dsh-plugin-subscriptions 0.1.0

package/lib/auth/rpc.js

@@ -0,0 +1,83 @@
+/**
+ * The `/subscriptions-auth` host RPC channel the web Settings page drives. The
+ * channel is registered only when a host `connection` service exists (the web
+ * profile); headless compositions load the plugin without it. All business
+ * outcomes are returned as RpcResult values; handlers never throw.
+ */
+import { PROVIDER_IDS } from './store.js';
+/** The RPC channel this plugin registers on the host connection. */
+export const SUBSCRIPTIONS_AUTH_CHANNEL = '/subscriptions-auth';
+/** Payload carried no usable provider id — an RPC client bug, not a server failure. */
+class BadRequest extends Error {
+}
+function ok(value) {
+    return { ok: true, value };
+}
+function failure(error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (error instanceof BadRequest) {
+        // The issues array is zod-shaped upstream; this channel validates by hand.
+        return { ok: false, error: { code: 'bad-request', message, details: { issues: [] } } };
+    }
+    return { ok: false, error: { code: 'internal', message, details: {} } };
+}
+function readProvider(payload) {
+    if (typeof payload !== 'object' || payload === null)
+        throw new BadRequest('payload must be an object');
+    const provider = payload.provider;
+    if (typeof provider !== 'string' || !PROVIDER_IDS.includes(provider)) {
+        throw new BadRequest(`payload.provider must be one of ${PROVIDER_IDS.join(', ')}`);
+    }
+    return provider;
+}
+function readString(payload, field) {
+    const value = payload[field];
+    if (typeof value !== 'string' || value.length === 0) {
+        throw new BadRequest(`payload.${field} must be a non-empty string`);
+    }
+    return value;
+}
+async function dispatch(controller, endpoint, payload) {
+    switch (endpoint) {
+        case 'status': {
+            const entries = await Promise.all(PROVIDER_IDS.map(async (provider) => [provider, await controller.status(provider)]));
+            return ok({ providers: Object.fromEntries(entries) });
+        }
+        case 'login':
+            return ok(await controller.login(readProvider(payload)));
+        case 'manual': {
+            const provider = readProvider(payload);
+            await controller.manual(provider, readString(payload, 'input'));
+            return ok({ ok: true });
+        }
+        case 'cancel':
+            await controller.cancel(readProvider(payload));
+            return ok({ ok: true });
+        case 'logout':
+            await controller.logout(readProvider(payload));
+            return ok({ ok: true });
+        default:
+            throw new BadRequest(`unknown /subscriptions-auth endpoint "${endpoint}"`);
+    }
+}
+/**
+ * Register the `/subscriptions-auth` RPC channel when a host connection exists.
+ * @param ctx - the plugin context (headless profiles have no `connection`).
+ * @param controller - the auth operations backing the endpoints.
+ */
+export function registerAuthRpc(ctx, controller) {
+    // `connection` is not in this plugin's inject list (headless compositions
+    // lack it), so its startup order is unconstrained: defer registration until
+    // the service exists instead of probing once at apply time.
+    ctx.inject(['connection'], (ctx) => {
+        const connection = ctx.get('connection');
+        ctx.effect(() => connection.rpc.handle(SUBSCRIPTIONS_AUTH_CHANNEL, async (endpoint, payload) => {
+            try {
+                return await dispatch(controller, endpoint, payload);
+            }
+            catch (error) {
+                return failure(error);
+            }
+        }, { authority: 'loopback' }), 'dsh-plugin-subscriptions: /subscriptions-auth rpc channel');
+    });
+}

package/lib/auth/store.d.ts

@@ -0,0 +1,90 @@
+/**
+ * On-disk OAuth session store at `~/.dsh/plugins/subscriptions/auth.json`.
+ *
+ * The file is a JSON object keyed by provider id. Writes are atomic
+ * (tmp file + rename) with mode 0600 because they carry bearer tokens.
+ * Session shapes live here (not in the provider modules) because this file
+ * owns the durable format.
+ */
+/** Provider routes this plugin can serve. */
+export type ProviderId = 'codex' | 'claude' | 'grok';
+/** Every provider route, in display order. */
+export declare const PROVIDER_IDS: readonly ProviderId[];
+/** Stored ChatGPT/Codex subscription session. */
+export interface CodexSession {
+    accessToken: string;
+    refreshToken: string;
+    /** Epoch milliseconds at which the access token expires. */
+    expiresAt: number;
+    /** `chatgpt_account_id` claim from the id token; sent as the `chatgpt-account-id` header. */
+    accountId: string;
+    idToken?: string;
+    /** User email from the id token, when the token carried it. */
+    emailAddress?: string;
+    /** `chatgpt_plan_type` claim from the id token (e.g. `plus`, `pro`), when present. */
+    planType?: string;
+}
+/** Stored Claude Pro/Max subscription session. */
+export interface ClaudeSession {
+    accessToken: string;
+    refreshToken: string;
+    /** Epoch milliseconds at which the access token expires. */
+    expiresAt: number;
+    /** Scope string the tokens were issued with; echoed on refresh. */
+    scopes: string;
+    emailAddress?: string;
+    subscriptionType?: string;
+}
+/** Stored Grok (X Premium / xAI) subscription session. */
+export interface GrokSession {
+    accessToken: string;
+    refreshToken: string;
+    /** Epoch milliseconds at which the access token expires. */
+    expiresAt: number;
+    /** Token endpoint from OIDC discovery; retained for refreshes. */
+    tokenEndpoint: string;
+    scopes?: string;
+    /** Display account: email, username, or subject claim from the id token. */
+    account?: string;
+}
+/** The durable store shape: one optional session per provider. */
+export interface SessionMap {
+    codex?: CodexSession;
+    claude?: ClaudeSession;
+    grok?: GrokSession;
+}
+/** Any stored session, for provider-agnostic plumbing. */
+export type StoredSession = CodexSession | ClaudeSession | GrokSession;
+/**
+ * Absolute path of the auth store file.
+ * @returns `dshHomePath('plugins', 'subscriptions', 'auth.json')`.
+ */
+export declare function authFilePath(): string;
+/**
+ * Read the whole store. A missing file is an empty store; malformed JSON or a
+ * malformed entry throws, because silently discarding tokens would strand the
+ * user without a diagnosis.
+ * @param path - store file path; defaults to {@link authFilePath}.
+ * @returns the parsed session map.
+ */
+export declare function loadStore(path?: string): Promise<SessionMap>;
+/**
+ * Read one provider's session.
+ * @param provider - the provider route.
+ * @param path - store file path; defaults to {@link authFilePath}.
+ * @returns the stored session, or `undefined` when logged out.
+ */
+export declare function getSession<K extends ProviderId>(provider: K, path?: string): Promise<SessionMap[K] | undefined>;
+/**
+ * Write one provider's session, preserving the others.
+ * @param provider - the provider route.
+ * @param session - the fresh session from a login or refresh.
+ * @param path - store file path; defaults to {@link authFilePath}.
+ */
+export declare function saveSession<K extends ProviderId>(provider: K, session: NonNullable<SessionMap[K]>, path?: string): Promise<void>;
+/**
+ * Delete one provider's session (logout).
+ * @param provider - the provider route.
+ * @param path - store file path; defaults to {@link authFilePath}.
+ */
+export declare function deleteSession(provider: ProviderId, path?: string): Promise<void>;

package/lib/auth/store.js

@@ -0,0 +1,137 @@
+/**
+ * On-disk OAuth session store at `~/.dsh/plugins/subscriptions/auth.json`.
+ *
+ * The file is a JSON object keyed by provider id. Writes are atomic
+ * (tmp file + rename) with mode 0600 because they carry bearer tokens.
+ * Session shapes live here (not in the provider modules) because this file
+ * owns the durable format.
+ */
+import { chmod, mkdir, readFile, rename, rm, writeFile } from 'node:fs/promises';
+import { dirname } from 'node:path';
+import { dshHomePath } from '@deepseek-ai/dsh-home-paths';
+/** Every provider route, in display order. */
+export const PROVIDER_IDS = ['codex', 'claude', 'grok'];
+/**
+ * Absolute path of the auth store file.
+ * @returns `dshHomePath('plugins', 'subscriptions', 'auth.json')`.
+ */
+export function authFilePath() {
+    return dshHomePath('plugins', 'subscriptions', 'auth.json');
+}
+/** Store location used before the plugin was renamed; migrated on first read. */
+function legacyAuthFilePath() {
+    return dshHomePath('plugins', 'router', 'auth.json');
+}
+/** Check that one durable entry carries the fields every session needs. */
+function assertSessionShape(provider, value) {
+    if (typeof value !== 'object' || value === null) {
+        throw new Error(`subscriptions auth store: entry "${provider}" is not an object; fix or delete the store file`);
+    }
+    const entry = value;
+    if (typeof entry.accessToken !== 'string' || entry.accessToken.length === 0
+        || typeof entry.refreshToken !== 'string' || entry.refreshToken.length === 0
+        || typeof entry.expiresAt !== 'number' || !Number.isFinite(entry.expiresAt)) {
+        throw new Error(`subscriptions auth store: entry "${provider}" is missing accessToken/refreshToken/expiresAt; fix or delete the store file`);
+    }
+}
+/**
+ * Read the whole store. A missing file is an empty store; malformed JSON or a
+ * malformed entry throws, because silently discarding tokens would strand the
+ * user without a diagnosis.
+ * @param path - store file path; defaults to {@link authFilePath}.
+ * @returns the parsed session map.
+ */
+export async function loadStore(path = authFilePath()) {
+    let text;
+    try {
+        text = await readFile(path, 'utf8');
+    }
+    catch (error) {
+        if (error.code !== 'ENOENT')
+            throw error;
+        // Migrate the pre-rename store once, preserving existing logins.
+        if (path !== authFilePath())
+            return {};
+        try {
+            text = await readFile(legacyAuthFilePath(), 'utf8');
+        }
+        catch (legacyError) {
+            if (legacyError.code === 'ENOENT')
+                return {};
+            throw legacyError;
+        }
+        const migrated = parseStore(text, legacyAuthFilePath());
+        await writeStore(migrated, path);
+        await rm(legacyAuthFilePath(), { force: true });
+        return migrated;
+    }
+    return parseStore(text, path);
+}
+/** Parse and validate store JSON read from `path`. */
+function parseStore(text, path) {
+    let parsed;
+    try {
+        parsed = JSON.parse(text);
+    }
+    catch {
+        throw new Error(`subscriptions auth store at ${path} is not valid JSON; fix or delete the file`);
+    }
+    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+        throw new Error(`subscriptions auth store at ${path} must be a JSON object keyed by provider; fix or delete the file`);
+    }
+    const store = parsed;
+    for (const provider of PROVIDER_IDS) {
+        const entry = store[provider];
+        if (entry !== undefined)
+            assertSessionShape(provider, entry);
+    }
+    return store;
+}
+/** Persist the whole store atomically with owner-only permissions. */
+async function writeStore(store, path) {
+    await mkdir(dirname(path), { recursive: true });
+    const tmp = `${path}.tmp-${process.pid}-${Math.random().toString(36).slice(2)}`;
+    try {
+        await writeFile(tmp, JSON.stringify(store, null, 2), { mode: 0o600 });
+        // An existing destination keeps its old mode through rename on some
+        // filesystems; enforce 0600 on the source before the swap.
+        await chmod(tmp, 0o600);
+        await rename(tmp, path);
+    }
+    catch (error) {
+        await rm(tmp, { force: true });
+        throw error;
+    }
+}
+/**
+ * Read one provider's session.
+ * @param provider - the provider route.
+ * @param path - store file path; defaults to {@link authFilePath}.
+ * @returns the stored session, or `undefined` when logged out.
+ */
+export async function getSession(provider, path = authFilePath()) {
+    return (await loadStore(path))[provider];
+}
+/**
+ * Write one provider's session, preserving the others.
+ * @param provider - the provider route.
+ * @param session - the fresh session from a login or refresh.
+ * @param path - store file path; defaults to {@link authFilePath}.
+ */
+export async function saveSession(provider, session, path = authFilePath()) {
+    const store = await loadStore(path);
+    store[provider] = session;
+    await writeStore(store, path);
+}
+/**
+ * Delete one provider's session (logout).
+ * @param provider - the provider route.
+ * @param path - store file path; defaults to {@link authFilePath}.
+ */
+export async function deleteSession(provider, path = authFilePath()) {
+    const store = await loadStore(path);
+    if (store[provider] === undefined)
+        return;
+    delete store[provider];
+    await writeStore(store, path);
+}

package/lib/client/SubscriptionsSection.d.ts

@@ -0,0 +1,30 @@
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+import type { SubscriptionsKey } from './locales.js';
+/** Subscription provider ids, fixed by the node half's OAuth adapters. */
+export type SubscriptionProvider = 'codex' | 'claude' | 'grok';
+/** One provider's login state as answered by the `status` endpoint. */
+export interface ProviderStatus {
+    loggedIn: boolean;
+    busy: boolean;
+    expiresAt?: number;
+    account?: string;
+    detail?: string;
+}
+/** Injected dependencies of {@link SubscriptionsSection} (slot `inject`). */
+export interface SubscriptionsSectionInjected {
+    /** Generic logical-RPC caller over the Connection transport. */
+    rpc: ConnectionHandle['rpc'];
+    /** Section copy: translate a 'settings.subscriptions' key with `{name}` template params. */
+    t: (key: SubscriptionsKey, params?: Record<string, unknown>) => string;
+}
+/**
+ * Props delivered by the slot outlet: the inject face spread flat (the
+ * renderer erases the share boundary at the render call).
+ */
+export type SubscriptionsSectionProps = Partial<SubscriptionsSectionInjected>;
+/**
+ * The Subscriptions settings page component.
+ * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
+ * @returns the section body, or a notice while the RPC face is absent.
+ */
+export declare function SubscriptionsSection(props: SubscriptionsSectionProps): import("react").JSX.Element;

package/lib/client/SubscriptionsSection.js

@@ -0,0 +1,290 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Subscriptions settings section: one card per subscription provider with an
+ * OAuth login/logout flow driven by the node half's `/subscriptions-auth` RPC
+ * channel. Login state lives server-side; the page polls `status` only while
+ * a login attempt is busy, so an idle page never polls. All state is local
+ * React state — the page has no store.
+ *
+ * Every color resolves through a `--dsw-alias-*` design token (the ui-theme
+ * design-platform.css values flip under `body[data-ds-dark-theme]`), and
+ * every user-visible string goes through the locale-bound `t` of the
+ * 'settings.subscriptions' namespace. Buttons and inputs take the
+ * ModelsSection vocabulary minus hover rules, which inline styles cannot
+ * express.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { en } from './locales.js';
+/** Logical RPC channel served by the node half of this plugin. */
+const SUBSCRIPTIONS_AUTH_CHANNEL = '/subscriptions-auth';
+/** Poll cadence while a provider login attempt is busy. */
+const POLL_INTERVAL_MS = 2000;
+/** Card display metadata, in page order (names are brand names, not translated). */
+const PROVIDERS = [
+    { id: 'codex', name: 'Codex (ChatGPT)' },
+    { id: 'claude', name: 'Claude' },
+    { id: 'grok', name: 'Grok (X Premium)' },
+];
+/** Business error returned by the `/subscriptions-auth` channel (error branch message). */
+class SubscriptionsAuthError extends Error {
+}
+/**
+ * Call one `/subscriptions-auth` endpoint and unwrap the business result.
+ * @param rpc - Connection RPC caller.
+ * @param endpoint - channel-relative endpoint.
+ * @param payload - channel-owned request payload.
+ * @returns the success value, cast by the caller to the endpoint's shape.
+ */
+async function callSubscriptionsAuth(rpc, endpoint, payload) {
+    let result;
+    try {
+        result = await rpc.call(SUBSCRIPTIONS_AUTH_CHANNEL, endpoint, payload);
+    }
+    catch (error) {
+        // The transport rejected rather than answering; surface the same way.
+        throw new SubscriptionsAuthError(error instanceof Error ? error.message : String(error));
+    }
+    if (!result.ok)
+        throw new SubscriptionsAuthError(result.error.message);
+    return result.value;
+}
+/** Human text of an action failure, SubscriptionsAuthError or not. */
+function messageOf(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+/**
+ * English-dictionary fallback for a missing inject `t` (standalone renders);
+ * the slot inject always supplies the locale-bound one.
+ * @param key - dictionary key.
+ * @param params - `{name}` template params.
+ * @returns the template with params substituted.
+ */
+function fallbackTranslate(key, params) {
+    let text = en[key];
+    for (const [name, value] of Object.entries(params ?? {})) {
+        text = text.replaceAll(`{${name}}`, String(value));
+    }
+    return text;
+}
+const styles = {
+    section: {
+        display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 560,
+        color: 'var(--dsw-alias-label-primary)',
+    },
+    intro: { margin: 0, color: 'var(--dsw-alias-label-tertiary)', fontSize: 14, lineHeight: '22px' },
+    card: {
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 12,
+        padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
+    },
+    cardHeader: { display: 'flex', alignItems: 'center', gap: 8 },
+    dot: { width: 8, height: 8, borderRadius: '50%', flexShrink: 0 },
+    name: { fontWeight: 500, 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)' },
+    actions: { display: 'flex', gap: 8, marginTop: 4, alignItems: 'center', flexWrap: 'wrap' },
+    button: {
+        boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        height: 28, padding: '0 10px', borderRadius: 14,
+        border: '1px solid var(--dsw-alias-border-l2)', background: 'transparent',
+        color: 'var(--dsw-alias-label-primary)', font: 'inherit', fontSize: 12, lineHeight: '18px',
+        cursor: 'pointer',
+    },
+    manual: { marginTop: 4, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)' },
+    manualRow: { display: 'flex', gap: 8, marginTop: 6 },
+    manualInput: {
+        flex: 1, height: 32, boxSizing: 'border-box',
+        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
+        padding: '0 10px', font: 'inherit', fontSize: 14, lineHeight: '22px',
+        background: 'var(--dsw-alias-bg-layer-1)', color: 'var(--dsw-alias-label-primary)',
+    },
+};
+/** Status dot color for one provider state. */
+function dotColor(status) {
+    if (status?.busy === true)
+        return 'var(--dsw-alias-state-warn-label)';
+    if (status?.loggedIn === true)
+        return 'var(--dsw-alias-state-success-primary)';
+    return 'var(--dsw-alias-label-dimmed)';
+}
+/**
+ * One-line status text for one provider state.
+ * @param t - section translate.
+ * @param status - the provider's last reported state.
+ * @returns the localized status line.
+ */
+function statusText(t, status) {
+    if (status === undefined)
+        return t('checking');
+    if (status.busy)
+        return t('loginInProgress');
+    if (status.loggedIn) {
+        const params = {};
+        if (status.account !== undefined)
+            params.account = status.account;
+        if (status.expiresAt !== undefined)
+            params.date = new Date(status.expiresAt).toLocaleString();
+        if (params.account !== undefined && params.date !== undefined)
+            return t('loggedInAccountExpires', params);
+        if (params.account !== undefined)
+            return t('loggedInAccount', params);
+        if (params.date !== undefined)
+            return t('loggedInExpires', params);
+        return t('loggedIn');
+    }
+    return t('notLoggedIn');
+}
+/**
+ * The Subscriptions settings page component.
+ * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
+ * @returns the section body, or a notice while the RPC face is absent.
+ */
+export function SubscriptionsSection(props) {
+    const { rpc } = props;
+    const t = props.t ?? fallbackTranslate;
+    const [statuses, setStatuses] = useState({});
+    const [errors, setErrors] = useState({});
+    const [manualDrafts, setManualDrafts] = useState({
+        codex: '', claude: '', grok: '',
+    });
+    const mountedRef = useRef(true);
+    const pollersRef = useRef(new Map());
+    const setProviderError = useCallback((provider, message) => {
+        if (!mountedRef.current)
+            return;
+        setErrors((prev) => {
+            const next = { ...prev };
+            if (message === undefined)
+                delete next[provider];
+            else
+                next[provider] = message;
+            return next;
+        });
+    }, []);
+    const stopPolling = useCallback((provider) => {
+        const poller = pollersRef.current.get(provider);
+        if (poller !== undefined) {
+            clearInterval(poller);
+            pollersRef.current.delete(provider);
+        }
+    }, []);
+    /** Refetch every provider's status; stop a provider's poller once its attempt settles. */
+    const refresh = useCallback(async () => {
+        if (rpc === undefined)
+            return;
+        let response;
+        try {
+            response = await callSubscriptionsAuth(rpc, 'status', {});
+        }
+        catch {
+            // A failed poll must not kill the page; busy providers keep polling and
+            // the action paths report their own errors.
+            return;
+        }
+        if (!mountedRef.current)
+            return;
+        setStatuses(response.providers);
+        for (const { id } of PROVIDERS) {
+            const status = response.providers[id];
+            if (status.loggedIn || !status.busy)
+                stopPolling(id);
+        }
+    }, [rpc, stopPolling]);
+    const startPolling = useCallback((provider) => {
+        if (pollersRef.current.has(provider))
+            return;
+        pollersRef.current.set(provider, setInterval(() => { void refresh(); }, POLL_INTERVAL_MS));
+    }, [refresh]);
+    // Initial load; every busy provider (e.g. an attempt started before a page
+    // reload) resumes polling. Teardown clears pollers and the mounted guard.
+    useEffect(() => {
+        mountedRef.current = true;
+        void refresh().then(() => {
+            if (!mountedRef.current)
+                return;
+            setStatuses((current) => {
+                for (const { id } of PROVIDERS) {
+                    if (current[id]?.busy === true)
+                        startPolling(id);
+                }
+                return current;
+            });
+        });
+        return () => {
+            mountedRef.current = false;
+            for (const poller of pollersRef.current.values())
+                clearInterval(poller);
+            pollersRef.current.clear();
+        };
+    }, [refresh, startPolling]);
+    const login = useCallback(async (provider) => {
+        if (rpc === undefined)
+            return;
+        setProviderError(provider, undefined);
+        try {
+            const response = await callSubscriptionsAuth(rpc, 'login', { provider });
+            if (typeof response.authorizeUrl !== 'string' || response.authorizeUrl === '') {
+                throw new SubscriptionsAuthError(t('loginMissingUrl'));
+            }
+            window.open(response.authorizeUrl, '_blank', 'noopener');
+            if (!mountedRef.current)
+                return;
+            // Optimistic busy so Cancel and the manual fallback appear before the first poll tick.
+            setStatuses(prev => ({ ...prev, [provider]: { ...prev[provider], busy: true, loggedIn: false } }));
+            startPolling(provider);
+        }
+        catch (error) {
+            setProviderError(provider, messageOf(error));
+        }
+    }, [rpc, t, setProviderError, startPolling]);
+    const cancel = useCallback(async (provider) => {
+        if (rpc === undefined)
+            return;
+        stopPolling(provider);
+        try {
+            await callSubscriptionsAuth(rpc, 'cancel', { provider });
+        }
+        catch (error) {
+            setProviderError(provider, messageOf(error));
+        }
+        await refresh();
+    }, [rpc, stopPolling, setProviderError, refresh]);
+    const submitManual = useCallback(async (provider) => {
+        if (rpc === undefined)
+            return;
+        const input = manualDrafts[provider].trim();
+        if (input === '')
+            return;
+        setProviderError(provider, undefined);
+        try {
+            await callSubscriptionsAuth(rpc, 'manual', { provider, input });
+            if (mountedRef.current)
+                setManualDrafts(prev => ({ ...prev, [provider]: '' }));
+        }
+        catch (error) {
+            setProviderError(provider, messageOf(error));
+        }
+        await refresh();
+    }, [rpc, manualDrafts, setProviderError, refresh]);
+    const logout = useCallback(async (provider, name) => {
+        if (rpc === undefined)
+            return;
+        if (!window.confirm(t('logoutConfirm', { provider: name })))
+            return;
+        setProviderError(provider, undefined);
+        try {
+            await callSubscriptionsAuth(rpc, 'logout', { provider });
+        }
+        catch (error) {
+            setProviderError(provider, messageOf(error));
+        }
+        await refresh();
+    }, [rpc, t, setProviderError, refresh]);
+    if (rpc === undefined) {
+        return _jsx("p", { style: styles.intro, children: t('unavailable') });
+    }
+    return (_jsxs("div", { style: styles.section, children: [_jsx("p", { style: styles.intro, children: t('intro') }), PROVIDERS.map(({ id, name }) => {
+                const status = statuses[id];
+                const busy = status?.busy === true;
+                return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: { ...styles.dot, background: dotColor(status) } }), _jsx("span", { style: styles.name, children: name })] }), _jsx("p", { style: styles.statusLine, children: statusText(t, status) }), status?.detail !== undefined && status.detail !== '' && (_jsx("p", { style: styles.statusLine, children: status.detail })), errors[id] !== undefined && _jsx("p", { style: styles.errorLine, children: errors[id] }), _jsxs("div", { style: styles.actions, children: [!busy && status?.loggedIn !== true && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id); }, children: t('login') })), busy && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void cancel(id); }, children: t('cancel') })), status?.loggedIn === true && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void logout(id, name); }, children: t('logout') }))] }), busy && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
+            })] }));
+}

package/lib/client/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Subscription OAuth login page, browser half. Registers the Subscriptions
+ * settings section; every login state fact arrives through the node half's
+ * `/subscriptions-auth` RPC channel — this plugin holds no credential state of its
+ * own. Section copy rides the client locale service: one 'settings.subscriptions'
+ * namespace with zh/en dictionaries, rebound per read so the nav label and
+ * page text follow the active locale.
+ */
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client';
+import type { SubscriptionsKey } from './locales.js';
+export type { SubscriptionsSectionInjected, SubscriptionsSectionProps } from './SubscriptionsSection.js';
+export type { SubscriptionsKey } from './locales.js';
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+    interface LocaleNamespaceMap {
+        /** The Subscriptions settings page copy. */
+        'settings.subscriptions': SubscriptionsKey;
+    }
+}
+/**
+ * Required services (cordis fiber inject): `slots` carries the registration
+ * seat, `connection` the `/subscriptions-auth` RPC caller, and `locale` the copy
+ * dictionaries.
+ */
+export declare const inject: string[];
+/**
+ * Register the Subscriptions section once the `settings.section` declaration
+ * is on the ledger (the shell's apply order relative to this one is NOT
+ * constrained; registration depends on the slot through `slots.inject()`).
+ * @param ctx - client root context.
+ */
+export declare function apply(ctx: ClientContext): void;