dsh-plugin-subscription-oauth 0.2.2 → 0.4.0

package/lib/client/UsageChip.d.ts

@@ -0,0 +1,120 @@
+/**
+ * The usage chip that rides the composer's bottom bar.
+ *
+ * The bar itself is a slot the shell owns. `conversation.composer.dock` is a
+ * session-scoped `list`, and the shell's own stats pills (`tok/s`, cache hit) and its
+ * context meter register into it; this chip joins as the last entry, so it reads to the
+ * right of the context meter. It is deliberately compact — an abbreviated route name
+ * and the percentage — because the bar is a status line, not a dashboard; the full
+ * figure, its reset and the meter appear when the chip is clicked.
+ *
+ * Two silences are deliberate: a provider this plugin does not own shows nothing rather
+ * than a fabricated zero, and switching to a foreign provider keeps the last own reading
+ * on screen instead of blanking the bar — the shell's own pills already speak for the
+ * foreign one.
+ *
+ * @module dsh-plugin-subscription-oauth/client/UsageChip
+ */
+import type { ReactNode } from 'react';
+import type { SessionStandardProps } from '@deepseek-ai/dsh-client-ui-slots';
+import type { SubscriptionsCall } from './subscriptions-rpc.js';
+import type { ProviderUsage, UsageWindow } from '../protocol.js';
+/** Injected props the chip is registered with. */
+export interface UsageChipInjected {
+    /** The plugin's own RPC caller. */
+    call: SubscriptionsCall;
+    /** Copy for the active locale. */
+    t: (key: 'usageChipTitle' | 'usageChipFull', values?: Record<string, string | number>) => string;
+    /** Whether the provider is one this plugin serves. */
+    isOwnProvider: (provider: string) => boolean;
+}
+/** One model choice, as the host records it. */
+export interface ModelSelection {
+    /** Provider route key. */
+    readonly provider: string;
+    /** Model id. */
+    readonly model: string;
+    /** Reasoning effort, when one was chosen. */
+    readonly reasoningEffort?: string;
+}
+/**
+ * The session's model-selection projection, as the host wires it.
+ *
+ * `next` is a selection the user has made but not yet used; `lastUsed` is the one a
+ * request actually ran with. Reading `next` first is what makes the chip follow the
+ * picker immediately rather than only after the next message.
+ */
+export interface ModelSelectionProjection {
+    /** The last selection a request ran with. */
+    readonly lastUsed: ModelSelection | null;
+    /** The selection in force now. */
+    readonly next: ModelSelection | null;
+}
+/** The session's provider, from its model-selection projection. */
+export declare function providerOf(projection: ModelSelectionProjection | null | undefined): string | undefined;
+/** What one route's allowance reduces to for a single line. */
+export interface ChipReading {
+    /** Route the figures belong to. */
+    provider: string;
+    /** Name to show, as the route states it. */
+    label: string;
+    /** Every window that states a figure, in the order the route stated them. */
+    windows: readonly UsageWindow[];
+    /** The window worth showing in the compact line: the one closest to its limit. */
+    window: UsageWindow;
+    /** Plan name, when the provider stated one. */
+    plan?: string;
+}
+/**
+ * The short form of a route's name.
+ *
+ * @param provider - the route id.
+ * @param label - the route's own display name.
+ * @returns an abbreviation that still identifies the route.
+ */
+export declare function shortLabel(provider: string, label: string): string;
+/**
+ * The short form of a window's name.
+ *
+ * @param label - the window's own name, e.g. `weekly`.
+ * @returns an abbreviation, or the label itself when it is already short.
+ */
+export declare function shortWindow(label: string): string;
+/**
+ * Pick the window a single line should show.
+ *
+ * A plan can meter several windows at once (a rolling five-hour one and a weekly one).
+ * The most constrained is the one that will stop work soonest, so it earns the space;
+ * ties fall to the earlier window, which is the order the providers state them in.
+ *
+ * @param windows - the route's metered windows.
+ * @returns the window to show, or undefined when none states a figure.
+ */
+export declare function pickWindow(windows: readonly UsageWindow[]): UsageWindow | undefined;
+/**
+ * Reduce one route's usage to what the chip renders.
+ *
+ * @param provider - the route the figures came from.
+ * @param label - the route's display name.
+ * @param usage - the accounts the route answered for.
+ * @returns the reading, or undefined when the route stated no figure.
+ */
+export declare function readingOf(provider: string, label: string, usage: readonly ProviderUsage[]): ChipReading | undefined;
+/**
+ * Format a window's reset the way the settings cards do.
+ *
+ * The rule is shared with the cards on purpose: a figure reading `6d20h` here and
+ * something else there would be two answers to one question.
+ *
+ * @param at - epoch milliseconds, or undefined when the provider states none.
+ * @param now - the instant to measure from.
+ * @returns a short phrase, or undefined when there is no reset to show.
+ */
+export declare function formatReset(at: number | undefined, now: number): string | undefined;
+/**
+ * The composer's usage chip.
+ *
+ * @param props - injected RPC caller, copy, and the session's provider reader.
+ * @returns the chip, or null when there is nothing true to say.
+ */
+export declare function UsageChip({ call, t, isOwnProvider, useProjection }: UsageChipInjected & SessionStandardProps): ReactNode;

package/lib/client/UsageChip.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The usage chip that rides the composer's bottom bar.
+ *
+ * The bar itself is a slot the shell owns. `conversation.composer.dock` is a
+ * session-scoped `list`, and the shell's own stats pills (`tok/s`, cache hit) and its
+ * context meter register into it; this chip joins as the last entry, so it reads to the
+ * right of the context meter. It is deliberately compact — an abbreviated route name
+ * and the percentage — because the bar is a status line, not a dashboard; the full
+ * figure, its reset and the meter appear when the chip is clicked.
+ *
+ * Two silences are deliberate: a provider this plugin does not own shows nothing rather
+ * than a fabricated zero, and switching to a foreign provider keeps the last own reading
+ * on screen instead of blanking the bar — the shell's own pills already speak for the
+ * foreign one.
+ *
+ * @module dsh-plugin-subscription-oauth/client/UsageChip
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usageChipCss } from './styles.js';
+/** How often a visible chip refreshes its figures. */
+const REFRESH_INTERVAL_MS = 60_000;
+/**
+ * Abbreviations for the routes this plugin serves.
+ *
+ * The bar is a status line under the composer, where a full product name crowds out the
+ * shell's own pills; the full name is one click away. The fallback shortens an unknown
+ * route's display name rather than dropping it.
+ */
+const SHORT_LABELS = {
+    kimi: 'Kimi',
+    grok: 'Grok',
+    antigravity: 'Anti',
+    glm: 'GLM',
+    ark: 'Ark',
+};
+/**
+ * Abbreviations for the window names the providers use.
+ *
+ * The bar has room for a token or two, so `weekly` becomes `7d` — the same figure in a
+ * form that reads at a glance. An unrecognised window keeps its own name, shortened
+ * only if it is long.
+ */
+const SHORT_WINDOWS = {
+    'weekly': '7d',
+    '7d': '7d',
+    '5h': '5h',
+    'monthly': 'mo',
+    'daily': '1d',
+    'credits': 'cr',
+    'free': 'free',
+    'session': 's',
+};
+/** The session's provider, from its model-selection projection. */
+export function providerOf(projection) {
+    return (projection?.next ?? projection?.lastUsed)?.provider;
+}
+/**
+ * The short form of a route's name.
+ *
+ * @param provider - the route id.
+ * @param label - the route's own display name.
+ * @returns an abbreviation that still identifies the route.
+ */
+export function shortLabel(provider, label) {
+    const known = SHORT_LABELS[provider];
+    if (known !== undefined)
+        return known;
+    // An unknown route keeps its first word, so the chip names something recognisable
+    // rather than a generic placeholder.
+    const [first] = label.trim().split(/\s+/);
+    return first === undefined || first === '' ? provider : first;
+}
+/**
+ * The short form of a window's name.
+ *
+ * @param label - the window's own name, e.g. `weekly`.
+ * @returns an abbreviation, or the label itself when it is already short.
+ */
+export function shortWindow(label) {
+    const known = SHORT_WINDOWS[label.toLowerCase()];
+    if (known !== undefined)
+        return known;
+    return label.length <= 4 ? label : label.slice(0, 4);
+}
+/**
+ * Pick the window a single line should show.
+ *
+ * A plan can meter several windows at once (a rolling five-hour one and a weekly one).
+ * The most constrained is the one that will stop work soonest, so it earns the space;
+ * ties fall to the earlier window, which is the order the providers state them in.
+ *
+ * @param windows - the route's metered windows.
+ * @returns the window to show, or undefined when none states a figure.
+ */
+export function pickWindow(windows) {
+    let best;
+    for (const window of windows) {
+        if (window.usedPercent === undefined)
+            continue;
+        if (best?.usedPercent === undefined || window.usedPercent > best.usedPercent)
+            best = window;
+    }
+    return best;
+}
+/**
+ * Reduce one route's usage to what the chip renders.
+ *
+ * @param provider - the route the figures came from.
+ * @param label - the route's display name.
+ * @param usage - the accounts the route answered for.
+ * @returns the reading, or undefined when the route stated no figure.
+ */
+export function readingOf(provider, label, usage) {
+    for (const entry of usage) {
+        const window = pickWindow(entry.windows);
+        if (window === undefined)
+            continue;
+        const windows = entry.windows.filter((candidate) => candidate.usedPercent !== undefined);
+        return {
+            provider,
+            label,
+            windows,
+            window,
+            ...entry.plan === undefined ? {} : { plan: entry.plan },
+        };
+    }
+    return undefined;
+}
+/**
+ * Format a window's reset the way the settings cards do.
+ *
+ * The rule is shared with the cards on purpose: a figure reading `6d20h` here and
+ * something else there would be two answers to one question.
+ *
+ * @param at - epoch milliseconds, or undefined when the provider states none.
+ * @param now - the instant to measure from.
+ * @returns a short phrase, or undefined when there is no reset to show.
+ */
+export function formatReset(at, now) {
+    if (at === undefined)
+        return undefined;
+    const remaining = at - now;
+    if (remaining <= 0)
+        return 'now';
+    const hours = remaining / 3_600_000;
+    if (hours < 1)
+        return `${String(Math.max(1, Math.round(remaining / 60_000)))}m`;
+    if (hours < 24)
+        return `${String(Math.round(hours))}h`;
+    const days = Math.floor(hours / 24);
+    return `${String(days)}d${String(Math.round(hours - days * 24))}h`;
+}
+/**
+ * The composer's usage chip.
+ *
+ * @param props - injected RPC caller, copy, and the session's provider reader.
+ * @returns the chip, or null when there is nothing true to say.
+ */
+export function UsageChip({ call, t, isOwnProvider, useProjection }) {
+    const [reading, setReading] = useState(undefined);
+    const [now, setNow] = useState(() => Date.now());
+    const [open, setOpen] = useState(false);
+    // The last route that answered, so a switch to a foreign provider leaves the last own
+    // reading up rather than blanking the bar.
+    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 load = useCallback(async (target) => {
+        try {
+            const result = await call('usage', { provider: target });
+            const label = result.status.providers.find((entry) => entry.provider === target)?.displayName ?? target;
+            return readingOf(target, label, result.usage);
+        }
+        catch {
+            // A failed read is not worth a chip of its own: the settings page is where a user
+            // goes to find out why a route cannot report.
+            return undefined;
+        }
+    }, [call]);
+    useEffect(() => {
+        const target = selected !== undefined && isOwnProvider(selected)
+            ? selected
+            // Not one of ours (or none selected): keep showing the last own reading.
+            : lastOwn.current;
+        if (target === undefined) {
+            setReading(undefined);
+            return;
+        }
+        let live = true;
+        const refresh = () => {
+            setNow(Date.now());
+            void load(target).then((next) => {
+                if (!live || next === undefined)
+                    return;
+                lastOwn.current = target;
+                setReading(next);
+            });
+        };
+        refresh();
+        const timer = setInterval(refresh, REFRESH_INTERVAL_MS);
+        return () => {
+            live = false;
+            clearInterval(timer);
+        };
+    }, [selected, isOwnProvider, load]);
+    // A click anywhere else puts the detail away, which is what a status chip should do.
+    useEffect(() => {
+        if (!open)
+            return;
+        const close = () => { setOpen(false); };
+        document.addEventListener('click', close);
+        return () => { document.removeEventListener('click', close); };
+    }, [open]);
+    if (reading === undefined)
+        return null;
+    const percent = reading.window.usedPercent;
+    if (percent === undefined)
+        return null;
+    const reset = formatReset(reading.window.resetsAt, now);
+    const clamped = Math.max(0, Math.min(100, percent));
+    const short = shortLabel(reading.provider, reading.label);
+    return (_jsxs("span", { className: "dsh-subscription-usage-chip", children: [_jsx("style", { children: usageChipCss }), _jsxs("button", { type: "button", className: "dsh-subscription-usage-chip-trigger", "aria-expanded": open, title: t('usageChipTitle', { provider: reading.label }), onClick: (event) => {
+                    // The document listener would otherwise close what this click just opened.
+                    event.stopPropagation();
+                    setOpen((was) => !was);
+                }, children: [_jsx("span", { className: "dsh-subscription-usage-chip-label", children: short }), reading.windows.map((window) => (_jsxs("span", { className: "dsh-subscription-usage-chip-cell", children: [_jsx("span", { className: "dsh-subscription-usage-chip-window", children: shortWindow(window.label) }), _jsx("span", { className: "dsh-subscription-usage-chip-value", children: `${String(Math.round(window.usedPercent ?? 0))}%` })] }, window.label)))] }), open && (_jsxs("span", { className: "dsh-subscription-usage-chip-panel", role: "status", children: [_jsx("span", { className: "dsh-subscription-usage-chip-full", children: t('usageChipFull', { provider: reading.label }) }), reading.windows.map((window) => {
+                        const windowReset = formatReset(window.resetsAt, now);
+                        return (_jsxs("span", { className: "dsh-subscription-usage-chip-meter", children: [_jsxs("span", { className: "dsh-subscription-usage-chip-meterHead", children: [_jsx("span", { children: window.label }), _jsx("span", { className: "dsh-subscription-usage-chip-detail", children: `${String(Math.round(window.usedPercent ?? 0))}%${windowReset === undefined ? '' : ` · ${windowReset}`}` })] }), _jsx("span", { className: "dsh-subscription-usage-chip-track", "aria-hidden": "true", children: _jsx("span", { className: "dsh-subscription-usage-chip-fill", style: { width: `${String(Math.max(0, Math.min(100, window.usedPercent ?? 0)))}%` } }) })] }, window.label));
+                    }), reading.plan === undefined ? null : (_jsx("span", { className: "dsh-subscription-usage-chip-detail", children: reading.plan }))] }))] }));
+}

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 { UsageChipInjected } from './UsageChip.js';
 export type { SubscriptionsKey } from './locales.js';
 export { createSubscriptionsCall, SubscriptionsRpcError } from './subscriptions-rpc.js';
 export type { SubscriptionsCall } from './subscriptions-rpc.js';
@@ -19,6 +20,32 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
         /** The Subscriptions settings page copy. */
         'settings.subscriptions': SubscriptionsKey;
     }
+    interface SlotMap {
+        /**
+         * The composer's bottom bar.
+         *
+         * Declared here as the shell declares it — a session-scoped list — because the
+         * owning package ships no type declarations to a plugin that only consumes it.
+         * The shell's own stats pills are one entry in this list; this plugin's usage chip
+         * is another.
+         */
+        'conversation.composer.dock': {
+            kind: 'list';
+            scope: 'session';
+        };
+    }
+    /**
+     * The session standard kit, of which this plugin reads one member.
+     *
+     * `ui-session` merges the session identity and the projection reader into every
+     * session-scoped component's props, and it ships no declarations a plugin can see, so
+     * the member is declared here. It reads one session projection, optionally narrowed
+     * by a selector, and re-renders the component when that projection changes — which is
+     * what lets the usage chip follow the model picker.
+     */
+    interface SessionStandardProps {
+        useProjection<T>(key: string, selector: (value: unknown) => T): T;
+    }
 }
 /**
  * Required services: `slots` carries the registration seat, `connection` the

package/lib/client/index.js

@@ -9,13 +9,28 @@
  * @module dsh-plugin-subscription-oauth/client
  */
 import { SubscriptionsSection } from './SubscriptionsSection.js';
+import { UsageChip } from './UsageChip.js';
 import { createSubscriptionsCall } from './subscriptions-rpc.js';
 import { en, zh } from './locales.js';
 export { createSubscriptionsCall, SubscriptionsRpcError } from './subscriptions-rpc.js';
+/**
+ * Routes this plugin serves.
+ *
+ * The chip only reports for these; a provider somebody else registered gets no chip,
+ * because this plugin has no way to read its allowance.
+ */
+const OWN_PROVIDER_IDS = new Set(['kimi', 'grok', 'antigravity', 'glm', 'ark']);
 /** Dictionary namespace owned by this plugin. */
 const NS = 'settings.subscriptions';
 /** Settings nav position: after the shipped sections, before plugin tooling. */
 const SECTION_ORDER = 92;
+/**
+ * Composer-dock position: after the shell's own stats pills, which sit at 0.
+ *
+ * The shell owns that bar and registers `tok/s` and the cache-hit pill into it, so the
+ * chip follows them rather than displacing them.
+ */
+const CHIP_ORDER = 10;
 /**
  * Required services: `slots` carries the registration seat, `connection` the
  * RPC caller, and `locale` the copy dictionaries.
@@ -44,4 +59,18 @@ export function apply(ctx) {
         label: () => t('nav'),
         inject: () => ({ call, t }),
     }, SubscriptionsSection));
+    // The composer's bottom bar is a session-scoped list the shell owns; its own stats
+    // pills sit at order 0. This chip rides beside them and shows the allowance of the
+    // provider the session is using. The scope hands `inject` the session id, but the chip
+    // reads the selection from its own projection prop, so nothing here needs it.
+    ctx.slots.inject('conversation.composer.dock', () => ctx.slots.register({
+        name: 'conversation.composer.dock',
+        id: 'subscription-usage',
+        order: CHIP_ORDER,
+        inject: () => ({
+            call,
+            t: t,
+            isOwnProvider: (provider) => OWN_PROVIDER_IDS.has(provider),
+        }),
+    }, UsageChip));
 }

package/lib/client/locales.d.ts

@@ -96,6 +96,8 @@ export declare const en: {
     readonly lastError: "Last login attempt failed: {message}";
     readonly loginFailed: "Could not start the sign-in: {message}";
     readonly actionFailed: "Action failed: {message}";
+    readonly usageChipTitle: "{provider} subscription usage";
+    readonly usageChipFull: "{provider} allowance";
 };
 /** The Subscriptions namespace key union. */
 export type SubscriptionsKey = keyof typeof en;
@@ -190,4 +192,6 @@ export declare const zh: {
     lastError: string;
     loginFailed: string;
     actionFailed: string;
+    usageChipTitle: string;
+    usageChipFull: string;
 };

package/lib/client/locales.js

@@ -96,6 +96,8 @@ export const en = {
     lastError: 'Last login attempt failed: {message}',
     loginFailed: 'Could not start the sign-in: {message}',
     actionFailed: 'Action failed: {message}',
+    usageChipTitle: '{provider} subscription usage',
+    usageChipFull: '{provider} allowance',
 };
 /** Chinese strings. */
 export const zh = {
@@ -188,4 +190,6 @@ export const zh = {
     lastError: '上次登录失败：{message}',
     loginFailed: '无法开始登录：{message}',
     actionFailed: '操作失败：{message}',
+    usageChipTitle: '{provider} 订阅用量',
+    usageChipFull: '{provider} 额度',
 };

package/lib/client/styles.d.ts

@@ -15,4 +15,18 @@
  * @module dsh-plugin-subscription-oauth/client/styles
  */
 /** The page's and dialog's stylesheet. */
-export declare const subscriptionsCss = "\n.dsh-subscriptions-settings,\n.dsh-subscription-manager {\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 1.5;\n  /* Native controls (checkbox, dialog) follow the host theme, not the OS. */\n  color-scheme: light;\n}\nbody[data-ds-dark-theme] :is(.dsh-subscriptions-settings, .dsh-subscription-manager) {\n  color-scheme: dark;\n}\n.dsh-subscription-manager {\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dsw-radius-panel, 16px);\n  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));\n  color: var(--dsw-alias-label-primary);\n  box-shadow: var(--dsw-elevation-prominent, 0 20px 70px #0004);\n}\n.dsh-subscription-manager::backdrop {\n  background: var(--dsw-alias-bg-mask-1, #0006);\n  backdrop-filter: var(--dsw-mask-blur, none);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) h2 {\n  margin: 0;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 500;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) strong,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-label {\n  font-size: 13px;\n  line-height: 1.5;\n  font-weight: 500;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) small,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-hint,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) [role=\"status\"] {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-tertiary);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-error {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-state-error-primary, #b42318);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-success {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-state-success-primary, #067647);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) label:has(> input[type=\"checkbox\"]) {\n  cursor: pointer;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"] {\n  accent-color: var(--dsw-alias-brand-primary);\n}\n/*\n * A model's on/off control is a switch, not a checkbox: it takes effect\n * immediately and its state is what matters, not a tick. Drawn from the theme\n * tokens with appearance: none, so it follows the host palette in both themes\n * instead of the platform's checkbox chrome.\n */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch {\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 34px;\n  height: 20px;\n  margin: 0;\n  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2));\n  cursor: pointer;\n  transition: background 120ms ease, border-color 120ms ease;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--dsw-alias-label-primary-foreground, #fff);\n  box-shadow: 0 1px 2px #0003;\n  transition: transform 120ms ease;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch:checked {\n  border-color: transparent;\n  background: var(--dsw-alias-state-success-primary, var(--dsw-alias-brand-primary, #067647));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch:checked::after {\n  transform: translateX(14px);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  min-height: 28px;\n  padding: 0 10px;\n  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 12px;\n  line-height: 18px;\n  cursor: pointer;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-3));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button:active:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-bg-layer-3));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n/* A control that is present but should not read as a bordered button. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-quiet {\n  min-height: 22px;\n  padding: 0 4px;\n  border-color: transparent;\n  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));\n}\n/* The free-text field for a hand-added model id. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input.dsh-subscription-input {\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 28px;\n  padding: 0 10px;\n  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: var(--dsw-alias-bg-layer-1);\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 12px;\n  line-height: 18px;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input.dsh-subscription-input::placeholder {\n  color: var(--dsw-alias-label-tertiary);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input.dsh-subscription-input:focus-visible {\n  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 2px;\n}\n/* A drag handle: no border or fill, so it reads as a grip rather than a button. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-handle {\n  min-height: 18px;\n  height: 18px;\n  padding: 0 2px;\n  border-color: transparent;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary));\n  font-size: 12px;\n  line-height: 18px;\n  cursor: grab;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-handle:hover:not(:disabled) {\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-handle:active:not(:disabled) { cursor: grabbing; }\n/* Controls inside the manage dialog are one step larger, like a form footer. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-dialog-actions button {\n  min-height: 34px;\n  padding: 0 14px;\n  border-radius: var(--dsw-radius-md, 8px);\n  font-size: 13px;\n  line-height: 1.5;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-primary {\n  border-color: transparent;\n  background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary));\n  color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-layer-1));\n  font-weight: 500;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-primary:hover:not(:disabled) {\n  background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-label-secondary));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button:focus-visible,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"]:focus-visible,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-disclosure:focus-visible {\n  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 2px;\n}\n/* The catalog heading is a summary-style disclosure, not a bordered button. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-disclosure {\n  border-color: transparent;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  padding: 0 4px;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-disclosure:hover:not(:disabled) {\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n}\n/* A usage meter: the track, with the fill sized by the caller. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-meter {\n  height: 6px;\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2));\n  overflow: hidden;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-meter > span {\n  display: block;\n  height: 100%;\n  background: var(--dsw-alias-state-success-primary, #067647);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-meter > span[data-exhausted=\"true\"] {\n  background: var(--dsw-alias-state-error-primary, #b42318);\n}\n";
+export declare const subscriptionsCss = "\n.dsh-subscriptions-settings,\n.dsh-subscription-manager {\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 1.5;\n  /* Native controls (checkbox, dialog) follow the host theme, not the OS. */\n  color-scheme: light;\n}\nbody[data-ds-dark-theme] :is(.dsh-subscriptions-settings, .dsh-subscription-manager) {\n  color-scheme: dark;\n}\n.dsh-subscription-manager {\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dsw-radius-panel, 16px);\n  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));\n  color: var(--dsw-alias-label-primary);\n  box-shadow: var(--dsw-elevation-prominent, 0 20px 70px #0004);\n}\n.dsh-subscription-manager::backdrop {\n  background: var(--dsw-alias-bg-mask-1, #0006);\n  backdrop-filter: var(--dsw-mask-blur, none);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) h2 {\n  margin: 0;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 500;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) strong,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-label {\n  font-size: 13px;\n  line-height: 1.5;\n  font-weight: 500;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) small,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-hint,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) [role=\"status\"] {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-tertiary);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-error {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-state-error-primary, #b42318);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-success {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-state-success-primary, #067647);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) label:has(> input[type=\"checkbox\"]) {\n  cursor: pointer;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"] {\n  accent-color: var(--dsw-alias-brand-primary);\n}\n/*\n * A model's on/off control is a switch, not a checkbox: it takes effect\n * immediately and its state is what matters, not a tick. Drawn from the theme\n * tokens with appearance: none, so it follows the host palette in both themes\n * instead of the platform's checkbox chrome.\n */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch {\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 34px;\n  height: 20px;\n  margin: 0;\n  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));\n  border-radius: 999px;\n  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2));\n  cursor: pointer;\n  transition: background 120ms ease, border-color 120ms ease;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--dsw-alias-label-primary-foreground, #fff);\n  box-shadow: 0 1px 2px #0003;\n  transition: transform 120ms ease;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch:checked {\n  border-color: transparent;\n  background: var(--dsw-alias-state-success-primary, var(--dsw-alias-brand-primary, #067647));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch:checked::after {\n  transform: translateX(14px);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"].dsh-subscription-switch:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  min-height: 28px;\n  padding: 0 10px;\n  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 12px;\n  line-height: 18px;\n  cursor: pointer;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-3));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button:active:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-bg-layer-3));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n/* A control that is present but should not read as a bordered button. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-quiet {\n  min-height: 22px;\n  padding: 0 4px;\n  border-color: transparent;\n  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));\n}\n/* The free-text field for a hand-added model id. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input.dsh-subscription-input {\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 28px;\n  padding: 0 10px;\n  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: var(--dsw-alias-bg-layer-1);\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 12px;\n  line-height: 18px;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input.dsh-subscription-input::placeholder {\n  color: var(--dsw-alias-label-tertiary);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input.dsh-subscription-input:focus-visible {\n  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 2px;\n}\n/* A drag handle: no border or fill, so it reads as a grip rather than a button. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-handle {\n  min-height: 18px;\n  height: 18px;\n  padding: 0 2px;\n  border-color: transparent;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary));\n  font-size: 12px;\n  line-height: 18px;\n  cursor: grab;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-handle:hover:not(:disabled) {\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-handle:active:not(:disabled) { cursor: grabbing; }\n/* Controls inside the manage dialog are one step larger, like a form footer. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-dialog-actions button {\n  min-height: 34px;\n  padding: 0 14px;\n  border-radius: var(--dsw-radius-md, 8px);\n  font-size: 13px;\n  line-height: 1.5;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-primary {\n  border-color: transparent;\n  background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary));\n  color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-layer-1));\n  font-weight: 500;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button.dsh-subscription-primary:hover:not(:disabled) {\n  background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-label-secondary));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) button:focus-visible,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) input[type=\"checkbox\"]:focus-visible,\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-disclosure:focus-visible {\n  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 2px;\n}\n/* The catalog heading is a summary-style disclosure, not a bordered button. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-disclosure {\n  border-color: transparent;\n  border-radius: var(--dsw-radius-sm, 6px);\n  background: transparent;\n  padding: 0 4px;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-disclosure:hover:not(:disabled) {\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n}\n/* A usage meter: the track, with the fill sized by the caller. */\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-meter {\n  height: 6px;\n  border-radius: 999px;\n  /* The track must stay visible when nothing is spent \u2014 a 0 % window otherwise reads as\n     \"no meter at all\", which is the opposite of \"nothing used\". The layer token falls\n     back to the card's own colour on a host that does not define it, so the neutral is\n     explicit and translucent, and the inset ring keeps the empty track visible on a\n     light theme as well as a dark one. */\n  background: #8a8f9826;\n  box-shadow: inset 0 0 0 1px #8a8f9833;\n  overflow: hidden;\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-meter > span {\n  display: block;\n  height: 100%;\n  background: var(--dsw-alias-state-success-primary, #067647);\n}\n:is(.dsh-subscriptions-settings, .dsh-subscription-manager) .dsh-subscription-meter > span[data-exhausted=\"true\"] {\n  background: var(--dsw-alias-state-error-primary, #b42318);\n}\n";
+/**
+ * The composer usage chip's stylesheet.
+ *
+ * Separate from the page's, because the chip renders in the composer's own bar rather
+ * than inside either page container — the page stylesheet is scoped to those
+ * containers on purpose, so nothing here may leak into the shell.
+ *
+ * The chip inherits the bar's type and only draws a meter, so it sits beside the shell's
+ * own stats pills without looking like a second design. The trigger is a bare control:
+ * the host gives plugin markup no control classes, and a default `<button>` would
+ * otherwise read as a raised chip. Every token carries a fallback for hosts that do not
+ * 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-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: 8px;\n  min-width: 168px;\n  padding: 10px 12px;\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: 4px;\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";