dsh-plugin-subscription-oauth 0.10.2 → 0.12.0

package/lib/auth/registry.d.ts

@@ -8,6 +8,7 @@
  *
  * @module dsh-plugin-subscription-oauth/auth/registry
  */
+import type { ModelPreferences } from '../settings.js';
 import type { LoginStart, ModelVariants, ProviderStatus, RefreshResult, SubscriptionStatus, UsageResult } from '../protocol.js';
 import type { LlmAdapter } from '@deepseek-ai/dsh-llm';
 import type { ProviderLoginStart, ProviderRefreshResult, ProviderUsageResult } from './provider-controller.js';
@@ -41,8 +42,9 @@ export interface ProviderRoute {
  * failure: the message names the routes that do exist.
  */
 export declare class SubscriptionRegistry {
+    private readonly preferences;
     private readonly byId;
-    constructor(routes: readonly ProviderRoute[]);
+    constructor(routes: readonly ProviderRoute[], preferences: ModelPreferences);
     /** Route keys this registry serves, in display order. */
     ids(): readonly string[];
     /** Every route, in registration order. */
@@ -92,4 +94,11 @@ export declare class SubscriptionRegistry {
     reload(): Promise<SubscriptionStatus>;
     /** The fast and image variants for one model, as the route's discovery reported them. */
     modelVariants(provider: string, id: string): Promise<ModelVariants | undefined>;
+    /** Whether the `auto` provider is offered; flips it. */
+    autoState(): Promise<{
+        enabled: boolean;
+    }>;
+    setAutoOn(enabled: boolean): Promise<{
+        enabled: boolean;
+    }>;
 }

package/lib/auth/registry.js

@@ -29,8 +29,10 @@ function displayRank(id) {
  * failure: the message names the routes that do exist.
  */
 export class SubscriptionRegistry {
+    preferences;
     byId;
-    constructor(routes) {
+    constructor(routes, preferences) {
+        this.preferences = preferences;
         this.byId = new Map(routes.map((route) => [route.id, route]));
     }
     /** Route keys this registry serves, in display order. */
@@ -151,4 +153,12 @@ export class SubscriptionRegistry {
         const route = this.route(provider);
         return route.modelVariants?.(id);
     }
+    /** Whether the `auto` provider is offered; flips it. */
+    async autoState() {
+        return { enabled: (await this.preferences.autoPreferences()).enabled };
+    }
+    async setAutoOn(enabled) {
+        await this.preferences.setAutoOn(enabled);
+        return { enabled };
+    }
 }

package/lib/auth/rpc.js

@@ -155,6 +155,12 @@ async function runEndpoint(registry, endpoint, payload, balance) {
         }
         case 'usage':
             return registry.usage(requiredProvider(payload, endpoint), booleanField(payload, 'force'));
+        case 'setAutoOn': {
+            const enabled = booleanField(payload, 'enabled');
+            if (enabled === undefined)
+                throw new ProviderError('setAutoOn requires an enabled flag', BAD_REQUEST);
+            return registry.setAutoOn(enabled);
+        }
         case 'deepseek-balance': {
             // The DeepSeek account's balance, read on the node half through the host's own
             // account service. The browser cannot call that service directly (it sits behind

package/lib/client/SubscriptionsSection.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Subscriptions settings page.
  *
@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module dsh-plugin-subscription-oauth/client/SubscriptionsSection
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { en } from './locales.js';
 import { subscriptionsCss } from './styles.js';
 import { SubscriptionsRpcError } from './subscriptions-rpc.js';
@@ -115,29 +115,48 @@ const styles = {
         display: 'flex', flexDirection: 'column', gap: 12, maxWidth: SECTION_WIDTH,
         color: 'var(--dsw-alias-label-primary)',
     },
-    intro: { margin: 0, color: 'var(--dsw-alias-label-tertiary)', fontSize: 14, lineHeight: '22px' },
+    sectionHeader: { display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 2 },
+    heading: { margin: 0, fontSize: 18, lineHeight: '26px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)' },
+    intro: { margin: 0, color: 'var(--dsw-alias-label-tertiary)', fontSize: 13, lineHeight: '20px', maxWidth: 560 },
     card: {
         border: '0.5px solid var(--dsw-alias-settings-card-stroke, var(--dsw-alias-border-l4))',
-        borderRadius: 'var(--dsw-radius-xl, 20px)',
+        borderRadius: 'var(--dsw-radius-xl, 16px)',
         background: 'var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2))',
-        padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
+        padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 8,
+        transition: 'border-color 120ms ease, background 120ms ease',
     },
-    cardHeader: { display: 'flex', alignItems: 'center', gap: 8 },
+    cardOpen: {
+        borderColor: 'var(--dsw-alias-border-l2, var(--dsw-alias-border-l3))',
+        background: 'var(--dsw-alias-settings-card-fill-hover, var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-layer-2)))',
+    },
+    cardHeader: { display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', userSelect: 'none' },
     /** Everything a folded card hides. */
-    cardBody: { display: 'flex', flexDirection: 'column', gap: 6 },
+    cardBody: { display: 'flex', flexDirection: 'column', gap: 10, marginTop: 2 },
     /** The one-line state a folded card shows in place of its body. */
     cardSummary: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
-    dot: { width: 8, height: 8, borderRadius: '50%', flexShrink: 0 },
-    name: { fontWeight: 500, fontSize: 14, lineHeight: '22px', color: 'var(--dsw-alias-label-primary)' },
-    providerId: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-dimmed)' },
+    /** The status indicator: filled when live, a hollow ring when not. */
+    dot: {
+        width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
+        border: '1.5px solid var(--dsw-alias-label-dimmed)',
+        background: 'transparent',
+    },
+    dotLive: {
+        borderColor: 'var(--dsw-alias-state-success-primary, #067647)',
+        background: 'var(--dsw-alias-state-success-primary, #067647)',
+    },
+    dotBusy: {
+        borderColor: 'var(--dsw-alias-state-warn-primary, #f5a524)',
+        background: 'var(--dsw-alias-state-warn-primary, #f5a524)',
+    },
+    name: { fontWeight: 600, fontSize: 14, lineHeight: '22px', color: 'var(--dsw-alias-label-primary)' },
     statusLine: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
     errorLine: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-state-error-primary)' },
     successLine: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-state-success-primary)' },
     actions: { display: 'flex', gap: 8, marginTop: 4, alignItems: 'center', flexWrap: 'wrap' },
     accountRow: {
         display: 'flex', flexDirection: 'column', gap: 6,
-        border: '0.5px solid var(--dsw-alias-border-l2)', borderRadius: 'var(--dsw-radius-lg, 16px)',
-        padding: '8px 10px', marginTop: 4,
+        border: '0.5px solid var(--dsw-alias-border-l2)', borderRadius: 'var(--dsw-radius-lg, 12px)',
+        padding: '10px 12px', background: 'var(--dsw-alias-bg-layer-1)',
     },
     accountHeader: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' },
     starButton: {
@@ -147,10 +166,21 @@ const styles = {
     },
     accountName: { fontSize: 13, lineHeight: '20px', color: 'var(--dsw-alias-label-primary)', userSelect: 'all' },
     badge: {
-        fontSize: 11, lineHeight: '16px', padding: '0 6px', borderRadius: 8,
-        background: 'var(--dsw-alias-bg-layer-1)', border: '0.5px solid var(--dsw-alias-border-l2)',
+        fontSize: 10, lineHeight: '14px', padding: '1px 7px', borderRadius: 999, fontWeight: 500,
+        background: 'var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-1))',
+        border: '0.5px solid var(--dsw-alias-border-l2)',
         color: 'var(--dsw-alias-label-secondary)',
     },
+    badgeDefault: {
+        fontSize: 10, lineHeight: '14px', padding: '1px 7px', borderRadius: 999, fontWeight: 500,
+        background: 'var(--dsw-alias-state-success-primary, #067647)',
+        color: 'var(--dsw-alias-label-primary-foreground, #fff)',
+    },
+    badgeWarn: {
+        fontSize: 10, lineHeight: '14px', padding: '1px 7px', borderRadius: 999, fontWeight: 500,
+        background: 'var(--dsw-alias-state-warn-primary, #f5a524)',
+        color: 'var(--dsw-alias-label-primary-foreground, #fff)',
+    },
     pushRight: { marginLeft: 'auto', flexShrink: 0 },
     catalog: {
         display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4,
@@ -197,16 +227,23 @@ const styles = {
         fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)',
     },
     usage: {
-        display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4,
-        borderTop: '0.5px solid var(--dsw-alias-border-l2)', paddingTop: 8,
+        display: 'flex', flexDirection: 'column', gap: 8, marginTop: 2,
+        borderTop: '0.5px solid var(--dsw-alias-border-l2)', paddingTop: 10,
     },
     usageHeader: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' },
-    usageRow: { display: 'flex', flexDirection: 'column', gap: 3 },
+    usageRow: { display: 'flex', flexDirection: 'column', gap: 4 },
     usageLine: { display: 'flex', alignItems: 'baseline', gap: 8, justifyContent: 'space-between' },
     usageMeter: {
         height: 6, borderRadius: 999, background: 'var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2))',
-        overflow: 'hidden',
+        overflow: 'hidden', boxShadow: 'inset 0 0 0 1px #8a8f9833',
+    },
+    usageAccount: {
+        display: 'flex', flexDirection: 'column', gap: 6,
+        padding: '8px 10px', borderRadius: 'var(--dsw-radius-md, 10px)',
+        background: 'var(--dsw-alias-bg-layer-1)', border: '0.5px solid var(--dsw-alias-border-l2)',
     },
+    /** The metered windows under one account row: no border, just the meters. */
+    usageInline: { display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 },
     modelRow: {
         display: 'flex', alignItems: 'flex-start', gap: 8,
         cursor: 'pointer', fontSize: 13, lineHeight: '20px',
@@ -248,13 +285,13 @@ const styles = {
     modalActions: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 2 },
     divider: { borderTop: '0.5px solid var(--dsw-alias-border-l2)' },
 };
-/** Status dot color for one provider's connection state. */
-function dotColor(status) {
+/** Status dot style for one provider's connection state. */
+function dotStyle(status) {
     if (status.busy)
-        return 'var(--dsw-alias-state-warn-label)';
+        return styles.dotBusy;
     if (status.loggedIn)
-        return 'var(--dsw-alias-state-success-primary)';
-    return 'var(--dsw-alias-label-dimmed)';
+        return styles.dotLive;
+    return {};
 }
 /** Localized label for one provider-owned detail row. */
 function detailLabel(t, row) {
@@ -274,10 +311,17 @@ function windowAmount(window) {
         return `${String(window.used)}/${String(window.limit)}`;
     return '—';
 }
-/** One account's plan and metered allowances. */
+/** One account's metered windows, rendered under its account row. */
+function AccountUsage(props) {
+    const { entry, t } = props;
+    if (entry === undefined)
+        return null;
+    return (_jsxs("div", { style: styles.usageInline, children: [entry.windows.map((window) => (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageLine, children: [_jsxs("span", { style: styles.modelName, children: [windowLabel(t, window), ' · ', windowAmount(window)] }), _jsx("span", { style: styles.modelMeta, children: window.resetsAt === undefined ? '' : formatReset(window.resetsAt, t) })] }), window.usedPercent !== undefined && (_jsx("div", { className: "dsh-subscription-meter", children: _jsx("span", { style: { width: `${String(Math.min(100, Math.max(0, window.usedPercent)))}%` }, "data-exhausted": window.usedPercent >= 90 ? 'true' : 'false' }) }))] }, `${entry.account}-${window.label}`))), entry.windows.length === 0 && (_jsx("p", { style: styles.statusLine, children: t('usageNone') }))] }));
+}
+/** The plan-and-usage block for the whole route. */
 function UsageBlock(props) {
     const { usage, error, t, busyAction, onRefresh } = props;
-    return (_jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.catalogTitle, children: t('usageTitle') }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.pushRight, disabled: busyAction, onClick: onRefresh, children: busyAction ? t('refreshing') : t('usageRefresh') })] }), error !== undefined && _jsx("p", { className: "dsh-subscription-error", children: t('usageError', { message: error }) }), usage.length === 0 && error === undefined && _jsx("p", { style: styles.statusLine, children: t('usageNone') }), usage.map((entry) => (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageLine, children: [_jsxs("span", { style: styles.modelMeta, children: [entry.plan === undefined ? entry.account : t('usagePlan', { plan: entry.plan }), entry.renewsAt === undefined ? '' : ` · ${t('usageRenews', { time: formatTime(entry.renewsAt) })}`] }), _jsx("span", { style: styles.modelMeta, children: t('usageFetched', { time: formatTime(entry.fetchedAt) }) })] }), entry.windows.map((window) => (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageLine, children: [_jsxs("span", { style: styles.modelName, children: [windowLabel(t, window), ' · ', windowAmount(window)] }), _jsx("span", { style: styles.modelMeta, children: window.resetsAt === undefined ? '' : formatReset(window.resetsAt, t) })] }), window.usedPercent !== undefined && (_jsx("div", { className: "dsh-subscription-meter", children: _jsx("span", { style: { width: `${String(Math.min(100, Math.max(0, window.usedPercent)))}%` }, "data-exhausted": window.usedPercent >= 90 ? 'true' : 'false' }) }))] }, `${entry.account}-${window.label}`)))] }, entry.account)))] }));
+    return (_jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.catalogTitle, children: t('usageTitle') }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.pushRight, disabled: busyAction, onClick: onRefresh, children: busyAction ? t('refreshing') : t('usageRefresh') })] }), error !== undefined && _jsx("p", { className: "dsh-subscription-error", children: t('usageError', { message: error }) }), usage.length === 0 && error === undefined && _jsx("p", { style: styles.statusLine, children: t('usageNone') }), usage.map((entry) => (_jsxs("div", { style: styles.usageAccount, children: [_jsxs("div", { style: styles.usageLine, children: [_jsxs("span", { style: styles.modelMeta, children: [entry.plan === undefined ? entry.account : t('usagePlan', { plan: entry.plan }), entry.renewsAt === undefined ? '' : ` · ${t('usageRenews', { time: formatTime(entry.renewsAt) })}`] }), _jsx("span", { style: styles.modelMeta, children: t('usageFetched', { time: formatTime(entry.fetchedAt) }) })] }), entry.windows.map((window) => (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageLine, children: [_jsxs("span", { style: styles.modelName, children: [windowLabel(t, window), ' · ', windowAmount(window)] }), _jsx("span", { style: styles.modelMeta, children: window.resetsAt === undefined ? '' : formatReset(window.resetsAt, t) })] }), window.usedPercent !== undefined && (_jsx("div", { className: "dsh-subscription-meter", children: _jsx("span", { style: { width: `${String(Math.min(100, Math.max(0, window.usedPercent)))}%` }, "data-exhausted": window.usedPercent >= 90 ? 'true' : 'false' }) }))] }, `${entry.account}-${window.label}`)))] }, entry.account)))] }));
 }
 /** The pending-login block: a device code, or a link to the sign-in page. */
 function PendingLogin(props) {
@@ -470,9 +514,15 @@ function ProviderCard(props) {
             : status.loggedIn
                 ? t('statusConnected', { count: accounts.length })
                 : t('statusSignedOut');
-    return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: { ...styles.dot, background: dotColor(status) }, "aria-hidden": "true" }), _jsx("span", { style: styles.name, children: status.displayName }), _jsx("span", { style: styles.providerId, children: status.provider }), _jsx("span", { style: styles.cardSummary, children: summaryLine }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.pushRight, "aria-expanded": cardOpen, "aria-controls": `dsh-subscription-card-${status.provider}`, onClick: toggleCardOpen, children: cardOpen ? t('collapse') : t('edit') })] }), _jsxs("div", { id: `dsh-subscription-card-${status.provider}`, style: cardOpen ? styles.cardBody : { ...styles.cardBody, display: 'none' }, children: [connectable && !status.loggedIn && !busy && _jsx("p", { style: styles.statusLine, children: t('statusSignIn') }), status.lastError !== undefined && (_jsx("p", { className: "dsh-subscription-error", children: t('lastError', { message: status.lastError }) })), message?.tone === 'error' && _jsx("p", { className: "dsh-subscription-error", children: message.text }), message?.tone === 'success' && _jsx("p", { className: "dsh-subscription-success", children: message.text }), accounts.map((account) => (_jsx("div", { style: styles.accountRow, children: _jsxs("div", { style: styles.accountHeader, children: [_jsx("button", { type: "button", style: styles.starButton, title: account.isDefault ? t('defaultBadge') : t('makeDefault'), "aria-label": account.isDefault ? t('defaultBadge') : t('makeDefault'), disabled: busyAction || account.isDefault, onClick: () => { props.onSetDefault(account.account); }, children: account.isDefault ? '★' : '☆' }), _jsx("span", { style: styles.accountName, children: account.label }), account.isDefault && _jsx("span", { style: styles.badge, children: t('defaultBadge') }), account.needsLogin === true && (_jsx("span", { style: styles.badge, title: t('accountNeedsLoginHint'), children: t('accountNeedsLogin') })), _jsx("span", { style: styles.statusLine, children: account.expired
-                                        ? t('accountExpired')
-                                        : t('accountExpires', { time: formatTime(account.expiresAt) }) }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.pushRight, disabled: busyAction, onClick: () => { props.onLogout(account.account); }, children: t('logout') })] }) }, account.account))), status.loggedIn && (_jsxs("div", { style: styles.catalog, children: [_jsxs("div", { style: styles.catalogHeader, children: [_jsxs("button", { type: "button", className: "dsh-subscription-disclosure", style: styles.disclosure, "aria-expanded": modelsOpen, "aria-controls": `dsh-subscription-models-${status.provider}`, onClick: toggleModelsOpen, children: [_jsx("span", { style: styles.chevron, "aria-hidden": "true", children: modelsOpen ? '▾' : '▸' }), _jsx("span", { style: styles.catalogTitle, children: t('modelsTitle') })] }), _jsxs("span", { style: styles.catalogMeta, children: [t('modelsCount', { count: models.length }), ' · ', liveCatalog ? t('modelsLive') : t('modelsBuiltIn'), hiddenCount === 0 ? '' : ` ${t('modelsHiddenCount', { count: hiddenCount })}`] }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.pushRight, disabled: busyAction, onClick: props.onRefreshModels, children: busyAction ? t('refreshing') : t('refresh') }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", disabled: busyAction || !connectable, title: t('modelsAddHint'), onClick: () => { setAdding((open) => !open); }, children: t('modelsAdd') })] }), adding && (_jsxs("form", { style: styles.addRow, onSubmit: (event) => {
+    return (_jsxs("div", { style: cardOpen ? { ...styles.card, ...styles.cardOpen } : styles.card, children: [_jsxs("div", { style: styles.cardHeader, role: "button", tabIndex: 0, "aria-expanded": cardOpen, onClick: toggleCardOpen, onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    toggleCardOpen();
+                } }, children: [_jsx("span", { style: { ...styles.dot, ...dotStyle(status) }, "aria-hidden": "true" }), _jsx("span", { style: styles.name, children: status.displayName }), status.loggedIn && _jsx("span", { style: styles.badgeDefault, children: t('badgeLive') }), _jsx("span", { style: styles.cardSummary, children: summaryLine }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.pushRight, "aria-expanded": cardOpen, "aria-controls": `dsh-subscription-card-${status.provider}`, onClick: (event) => { event.stopPropagation(); toggleCardOpen(); }, children: cardOpen ? t('collapse') : t('edit') })] }), _jsxs("div", { id: `dsh-subscription-card-${status.provider}`, style: cardOpen ? styles.cardBody : { ...styles.cardBody, display: 'none' }, children: [connectable && !status.loggedIn && !busy && _jsx("p", { style: styles.statusLine, children: t('statusSignIn') }), status.lastError !== undefined && (_jsx("p", { className: "dsh-subscription-error", children: t('lastError', { message: status.lastError }) })), message?.tone === 'error' && _jsx("p", { className: "dsh-subscription-error", children: message.text }), message?.tone === 'success' && _jsx("p", { className: "dsh-subscription-success", children: message.text }), accounts.map((account) => {
+                        const usageEntry = (status.usage ?? []).find((entry) => entry.account === account.account);
+                        return (_jsxs("div", { style: styles.accountRow, children: [_jsxs("div", { style: styles.accountHeader, children: [_jsx("button", { type: "button", style: styles.starButton, title: account.isDefault ? t('defaultBadge') : t('makeDefault'), "aria-label": account.isDefault ? t('defaultBadge') : t('makeDefault'), disabled: busyAction || account.isDefault, onClick: () => { props.onSetDefault(account.account); }, children: account.isDefault ? '★' : '☆' }), _jsx("span", { style: styles.accountName, children: account.label }), account.isDefault && _jsx("span", { style: styles.badgeDefault, children: t('defaultBadge') }), account.needsLogin === true && (_jsx("span", { style: styles.badgeWarn, title: t('accountNeedsLoginHint'), children: t('accountNeedsLogin') })), usageEntry?.plan !== undefined && (_jsx("span", { style: styles.badge, children: t('usagePlan', { plan: usageEntry.plan }) })), _jsx("span", { style: styles.statusLine, children: account.expired
+                                                ? t('accountExpired')
+                                                : t('accountExpires', { time: formatTime(account.expiresAt) }) }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.pushRight, disabled: busyAction, onClick: () => { props.onLogout(account.account); }, children: t('logout') })] }), _jsx(AccountUsage, { entry: usageEntry, t: t })] }, account.account));
+                    }), status.loggedIn && (_jsxs("div", { style: styles.catalog, children: [_jsxs("div", { style: styles.catalogHeader, children: [_jsxs("button", { type: "button", className: "dsh-subscription-disclosure", style: styles.disclosure, "aria-expanded": modelsOpen, "aria-controls": `dsh-subscription-models-${status.provider}`, onClick: toggleModelsOpen, children: [_jsx("span", { style: styles.chevron, "aria-hidden": "true", children: modelsOpen ? '▾' : '▸' }), _jsx("span", { style: styles.catalogTitle, children: t('modelsTitle') })] }), _jsxs("span", { style: styles.catalogMeta, children: [t('modelsCount', { count: models.length }), ' · ', liveCatalog ? t('modelsLive') : t('modelsBuiltIn'), hiddenCount === 0 ? '' : ` ${t('modelsHiddenCount', { count: hiddenCount })}`] }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.pushRight, disabled: busyAction, onClick: props.onRefreshModels, children: busyAction ? t('refreshing') : t('refresh') }), _jsx("button", { type: "button", className: "dsh-subscription-quiet", disabled: busyAction || !connectable, title: t('modelsAddHint'), onClick: () => { setAdding((open) => !open); }, children: t('modelsAdd') })] }), adding && (_jsxs("form", { style: styles.addRow, onSubmit: (event) => {
                                     event.preventDefault();
                                     const id = draft.trim();
                                     if (id.length === 0)
@@ -495,7 +545,7 @@ function ProviderCard(props) {
                                                     ? { ...styles.modelRowGrow, cursor: 'pointer' }
                                                     : { ...styles.modelRowGrow, cursor: 'pointer', color: 'var(--dsw-alias-label-dimmed)' }, title: model.visible ? t('modelsHidden') : t('modelsShow'), children: [_jsx("input", { type: "checkbox", className: "dsh-subscription-switch", role: "switch", checked: model.visible, disabled: busyAction, "aria-label": `${t('modelsShow')} · ${model.name}`, onChange: (event) => { props.onSetModelVisible(model.id, event.target.checked); } }), _jsxs("span", { style: styles.modelBody, children: [_jsxs("span", { style: styles.modelName, children: [model.name, model.source === undefined ? null : _jsx("span", { style: styles.badge, children: model.source })] }), _jsxs("span", { style: styles.modelMeta, children: [model.id, ' · ', t('modelsContext', { tokens: formatTokens(model.contextWindow) }), model.defaultEffort === undefined ? '' : ` · ${model.defaultEffort}`, model.inputModalities === undefined || model.inputModalities.length === 0
                                                                         ? ''
-                                                                        : ` · ${model.inputModalities.join('/')}`] })] })] }), model.userAdded === true && (_jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.removeButton, disabled: busyAction, title: t('modelsRemove'), "aria-label": `${t('modelsRemove')} · ${model.name}`, onClick: () => { props.onRemoveModel(model.id); }, children: "\u00D7" }))] }, model.id))), models.length === 0 && (_jsx("p", { style: styles.statusLine, children: status.provider === 'auto' ? t('modelsAutoChainEmpty') : t('modelsEmpty') }))] }))] })), _jsx(UsageBlock, { usage: status.usage ?? [], ...status.usageError === undefined ? {} : { error: status.usageError }, t: t, busyAction: busyAction, onRefresh: props.onRefreshUsage }), connectable && (_jsxs("div", { style: styles.actions, children: [!busy && (_jsx("button", { type: "button", disabled: busyAction, onClick: props.onLogin, children: accounts.length === 0 ? t('connect') : t('addAccount') })), !busy && (_jsx("button", { type: "button", disabled: busyAction, onClick: () => { setManageOpen(true); }, children: t('manage') })), busy && (_jsx("button", { type: "button", disabled: busyAction, onClick: props.onCancel, children: t('cancel') }))] })), connectable && accounts.length > 0 && _jsx("p", { style: styles.statusLine, children: t('hint') }), busy && status.pending !== undefined && (_jsx(PendingLogin, { prompt: status.pending, t: t, copied: copied, onCopy: (code) => { void copyCode(code); } }))] }), _jsxs("dialog", { ref: dialog, className: "dsh-subscription-manager", "aria-labelledby": `dsh-subscription-manage-${status.provider}`, 
+                                                                        : ` · ${model.inputModalities.join('/')}`] })] })] }), model.userAdded === true && (_jsx("button", { type: "button", className: "dsh-subscription-quiet", style: styles.removeButton, disabled: busyAction, title: t('modelsRemove'), "aria-label": `${t('modelsRemove')} · ${model.name}`, onClick: () => { props.onRemoveModel(model.id); }, children: "\u00D7" }))] }, model.id))), models.length === 0 && (_jsx("p", { style: styles.statusLine, children: status.provider === 'auto' ? t('modelsAutoChainEmpty') : t('modelsEmpty') }))] }))] })), connectable && (_jsxs("div", { style: styles.actions, children: [!busy && (_jsx("button", { type: "button", disabled: busyAction, onClick: props.onLogin, children: accounts.length === 0 ? t('connect') : t('addAccount') })), !busy && (_jsx("button", { type: "button", disabled: busyAction, onClick: () => { setManageOpen(true); }, children: t('manage') })), busy && (_jsx("button", { type: "button", disabled: busyAction, onClick: props.onCancel, children: t('cancel') }))] })), connectable && accounts.length > 0 && _jsx("p", { style: styles.statusLine, children: t('hint') }), busy && status.pending !== undefined && (_jsx(PendingLogin, { prompt: status.pending, t: t, copied: copied, onCopy: (code) => { void copyCode(code); } }))] }), _jsxs("dialog", { ref: dialog, className: "dsh-subscription-manager", "aria-labelledby": `dsh-subscription-manage-${status.provider}`, 
                 // A closed `<dialog>` is hidden by the user-agent stylesheet, and an
                 // inline `display` would override that rule — so the open state has to
                 // be restated here rather than left to `showModal()` alone.
@@ -614,6 +664,22 @@ export function SubscriptionsSection(props) {
         else
             stopPolling();
     }, [anyBusy, startPolling, stopPolling]);
+    /**
+     * Signed-in providers read first: a route with a live account is the one a
+     * reader most likely wants, and `auto` (which owns no account) leads the rest.
+     * The sort is stable, so equal ranks keep the host's configured order.
+     */
+    const orderedProviders = useMemo(() => {
+        const providers = status?.providers ?? [];
+        const rank = (provider) => {
+            if (provider.provider === 'auto')
+                return 0;
+            if (provider.loggedIn)
+                return 1;
+            return 2;
+        };
+        return [...providers].sort((left, right) => rank(left) - rank(right));
+    }, [status?.providers]);
     /** Run one action for one provider, reporting its own failure. */
     const act = useCallback(async (provider, run) => {
         setBusyAction(true);
@@ -758,5 +824,5 @@ export function SubscriptionsSection(props) {
     }, [act, call]);
     if (call === undefined)
         return _jsx("p", { style: styles.intro, children: t('unavailable') });
-    return (_jsxs("div", { className: "dsh-subscriptions-settings", style: styles.section, children: [_jsx("style", { children: subscriptionsCss }), _jsx("p", { style: styles.intro, children: t('intro') }), error !== undefined && _jsx("p", { className: "dsh-subscription-error", children: error }), status === undefined && _jsx("p", { style: styles.statusLine, children: t('loading') }), status?.providers.map((provider) => (_jsx(ProviderCard, { status: provider, t: t, busyAction: busyAction, ...messages[provider.provider] === undefined ? {} : { message: messages[provider.provider] }, onLogin: () => { login(provider.provider); }, onCancel: () => { cancel(provider.provider); }, onLogout: (account) => { logout(provider.provider, account); }, onSetDefault: (account) => { setDefault(provider.provider, account); }, onRefreshToken: (account) => { refreshToken(provider.provider, account); }, onRefreshModels: () => { refreshModels(provider.provider); }, onSetModelVisible: (id, visible) => { setModelVisible(provider.provider, id, visible); }, onSetModelOrder: (ids) => { setModelOrder(provider.provider, ids); }, onAddModel: (id) => { addModel(provider.provider, id); }, onRemoveModel: (id) => { removeModel(provider.provider, id); }, onRefreshUsage: () => { refreshUsage(provider.provider); }, onReload: () => { reload(provider.provider); } }, provider.provider)))] }));
+    return (_jsxs("div", { className: "dsh-subscriptions-settings", style: styles.section, children: [_jsx("style", { children: subscriptionsCss }), _jsxs("div", { style: styles.sectionHeader, children: [_jsx("h2", { style: styles.heading, children: t('nav') }), _jsx("p", { style: styles.intro, children: t('intro') })] }), error !== undefined && _jsx("p", { className: "dsh-subscription-error", children: error }), status === undefined && _jsx("p", { style: styles.statusLine, children: t('loading') }), orderedProviders.map((provider) => (_jsx(ProviderCard, { status: provider, t: t, busyAction: busyAction, ...messages[provider.provider] === undefined ? {} : { message: messages[provider.provider] }, onLogin: () => { login(provider.provider); }, onCancel: () => { cancel(provider.provider); }, onLogout: (account) => { logout(provider.provider, account); }, onSetDefault: (account) => { setDefault(provider.provider, account); }, onRefreshToken: (account) => { refreshToken(provider.provider, account); }, onRefreshModels: () => { refreshModels(provider.provider); }, onSetModelVisible: (id, visible) => { setModelVisible(provider.provider, id, visible); }, onSetModelOrder: (ids) => { setModelOrder(provider.provider, ids); }, onAddModel: (id) => { addModel(provider.provider, id); }, onRemoveModel: (id) => { removeModel(provider.provider, id); }, onRefreshUsage: () => { refreshUsage(provider.provider); }, onReload: () => { reload(provider.provider); } }, provider.provider)))] }));
 }

package/lib/client/locales.d.ts

@@ -8,7 +8,7 @@
 /** English strings. */
 export declare const en: {
     readonly nav: "Subscriptions";
-    readonly intro: "Sign in with a subscription account — Kimi Code, Grok (X Premium) or Google Antigravity. DeepSeek Harness keeps the tokens on this machine and streams every request through the provider's own API.";
+    readonly intro: "Sign in with the AI subscriptions you already pay for — no API key. Pick a provider below, connect once, and its models join the model picker with live plan usage. Tokens stay on this machine.";
     readonly loading: "Checking subscriptions…";
     readonly unavailable: "The subscriptions page needs the web connection service, which this composition does not provide.";
     readonly statusConnected: "Connected · {count} account(s)";
@@ -26,6 +26,7 @@ export declare const en: {
     readonly logout: "Sign out";
     readonly makeDefault: "Use by default";
     readonly defaultBadge: "Default";
+    readonly badgeLive: "Live";
     readonly accountNeedsLogin: "Sign in again";
     readonly accountNeedsLoginHint: "The provider refused this account's grant, so its token cannot be renewed";
     readonly accountExpired: "token expired";
@@ -122,6 +123,7 @@ export declare const zh: {
     logout: string;
     makeDefault: string;
     defaultBadge: string;
+    badgeLive: string;
     accountNeedsLogin: string;
     accountNeedsLoginHint: string;
     accountExpired: string;

package/lib/client/locales.js

@@ -8,7 +8,7 @@
 /** English strings. */
 export const en = {
     nav: 'Subscriptions',
-    intro: 'Sign in with a subscription account — Kimi Code, Grok (X Premium) or Google Antigravity. DeepSeek Harness keeps the tokens on this machine and streams every request through the provider\'s own API.',
+    intro: 'Sign in with the AI subscriptions you already pay for — no API key. Pick a provider below, connect once, and its models join the model picker with live plan usage. Tokens stay on this machine.',
     loading: 'Checking subscriptions…',
     unavailable: 'The subscriptions page needs the web connection service, which this composition does not provide.',
     statusConnected: 'Connected · {count} account(s)',
@@ -26,6 +26,7 @@ export const en = {
     logout: 'Sign out',
     makeDefault: 'Use by default',
     defaultBadge: 'Default',
+    badgeLive: 'Live',
     accountNeedsLogin: 'Sign in again',
     accountNeedsLoginHint: 'The provider refused this account\'s grant, so its token cannot be renewed',
     accountExpired: 'token expired',
@@ -102,7 +103,7 @@ export const en = {
 /** Chinese strings. */
 export const zh = {
     nav: '订阅',
-    intro: '使用订阅账号登录 —— Kimi Code、Grok (X Premium) 或 Google Antigravity。DeepSeek Harness 将令牌保存在本机，并通过各服务自己的 API 发起请求。',
+    intro: '使用你已付费的 AI 订阅 —— 无需 API Key。在下方选择服务，连接一次，其模型即进入模型选择器并显示实时额度。令牌仅保存在本机。',
     loading: '正在检查订阅…',
     unavailable: '订阅页面需要 Web 连接服务，当前组合未提供该服务。',
     statusConnected: '已连接 {count} 个账号',
@@ -120,6 +121,7 @@ export const zh = {
     logout: '退出登录',
     makeDefault: '设为默认',
     defaultBadge: '默认',
+    badgeLive: '已连接',
     accountNeedsLogin: '需重新登录',
     accountNeedsLoginHint: '服务方已拒绝该账号的授权，令牌无法自动续期',
     accountExpired: '令牌已过期',