@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/settings/SecuritySettingsSection.js

@@ -0,0 +1,381 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, Input, Label } from "@elizaos/ui";
+import { KeyRound, Laptop, Loader2, Monitor, RefreshCw, Shield, Smartphone, Trash2, } from "lucide-react";
+import { useCallback, useEffect, useId, useState, } from "react";
+import { authChangePassword, authListSessions, authMe, authRevokeSession, authSetup, } from "../../api/auth-client.js";
+import { useBootConfig } from "../../config/boot-config-react.js";
+function formatRelativeTime(ms) {
+    if (ms == null)
+        return "local only";
+    const diff = ms - Date.now();
+    const absDiff = Math.abs(diff);
+    const mins = Math.floor(absDiff / 60_000);
+    const hours = Math.floor(absDiff / 3_600_000);
+    const days = Math.floor(absDiff / 86_400_000);
+    if (days > 0)
+        return diff < 0 ? `${days}d ago` : `in ${days}d`;
+    if (hours > 0)
+        return diff < 0 ? `${hours}h ago` : `in ${hours}h`;
+    if (mins > 0)
+        return diff < 0 ? `${mins}m ago` : `in ${mins}m`;
+    return diff < 0 ? "just now" : "soon";
+}
+function DeviceIcon({ userAgent }) {
+    if (!userAgent)
+        return _jsx(Monitor, { className: "h-4 w-4 shrink-0 opacity-50" });
+    const ua = userAgent.toLowerCase();
+    if (/mobile|android|iphone|ipad/.test(ua)) {
+        return _jsx(Smartphone, { className: "h-4 w-4 shrink-0 opacity-70" });
+    }
+    return _jsx(Laptop, { className: "h-4 w-4 shrink-0 opacity-70" });
+}
+const SECTION_CLASS = "rounded-lg border border-border/50 bg-bg/40 p-4 shadow-sm space-y-4 sm:p-5";
+const SECTION_TITLE_CLASS = "flex items-center gap-2 text-sm font-semibold text-foreground/90";
+const DIVIDER_CLASS = "border-t border-border/40";
+function SectionShell({ icon, title, children, }) {
+    return (_jsxs("div", { className: SECTION_CLASS, children: [_jsxs("h3", { className: SECTION_TITLE_CLASS, children: [icon, title] }), _jsx("div", { className: DIVIDER_CLASS }), children] }));
+}
+async function fetchAccessState() {
+    const result = await authMe();
+    if (result.ok === true) {
+        return {
+            phase: "loaded",
+            identity: result.identity,
+            access: result.access,
+        };
+    }
+    if (result.ok === false && result.status === 401) {
+        return {
+            phase: "locked",
+            reason: result.reason === "remote_auth_required" ||
+                result.reason === "remote_password_not_configured"
+                ? result.reason
+                : null,
+            access: result.access ?? null,
+        };
+    }
+    return {
+        phase: "error",
+        message: "Security settings are unavailable while auth storage is offline.",
+    };
+}
+function parseAbsoluteUrl(value) {
+    const trimmed = value?.trim();
+    if (!trimmed)
+        return null;
+    try {
+        return new URL(trimmed);
+    }
+    catch {
+        return null;
+    }
+}
+function trimTrailingSlash(value) {
+    return value.endsWith("/") ? value.slice(0, -1) : value;
+}
+function isLoopbackHost(hostname) {
+    const normalized = hostname.toLowerCase();
+    return (normalized === "localhost" ||
+        normalized === "::1" ||
+        normalized === "[::1]" ||
+        normalized === "127.0.0.1" ||
+        normalized.startsWith("127."));
+}
+function isAllInterfacesHost(hostname) {
+    const normalized = hostname.toLowerCase();
+    return (normalized === "0.0.0.0" || normalized === "::" || normalized === "[::]");
+}
+function isPrivateHost(hostname) {
+    const normalized = hostname.toLowerCase();
+    return (normalized.startsWith("10.") ||
+        normalized.startsWith("192.168.") ||
+        /^172\.(1[6-9]|2\d|3[0-1])\./.test(normalized) ||
+        normalized.endsWith(".local"));
+}
+function securitySettingsUrl(origin) {
+    return `${trimTrailingSlash(origin)}/settings#security`;
+}
+function describeEndpoint(url) {
+    if (isAllInterfacesHost(url.hostname)) {
+        return {
+            value: "All interfaces",
+            detail: `${url.host}; use this machine's LAN, tailnet, or tunnel hostname from another device.`,
+        };
+    }
+    if (isLoopbackHost(url.hostname)) {
+        return {
+            value: "Loopback only",
+            detail: `${url.host}; reachable from this machine only.`,
+        };
+    }
+    if (isPrivateHost(url.hostname)) {
+        return {
+            value: "LAN or tailnet",
+            detail: `${url.host}; reachable where this private network permits.`,
+        };
+    }
+    return {
+        value: "Remote URL",
+        detail: `${url.host}; remote browsers can use this address if firewall rules allow it.`,
+    };
+}
+function currentPageOrigin() {
+    if (typeof window === "undefined")
+        return null;
+    const protocol = window.location.protocol;
+    if (protocol !== "http:" && protocol !== "https:")
+        return null;
+    return window.location.origin;
+}
+function AccessInfoRow({ label, value, detail, }) {
+    return (_jsxs("div", { className: "grid gap-1 border-t border-border/30 py-2.5 first:border-t-0 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-3", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx("div", { className: "break-words text-sm font-medium text-foreground/90", children: value }), _jsx("p", { className: "text-xs leading-5 text-muted-foreground", children: detail })] })] }));
+}
+function StatusBadge({ children, tone = "neutral", }) {
+    return (_jsx("span", { className: cn("inline-flex w-fit shrink-0 rounded-full border px-2.5 py-1 text-xs font-medium", tone === "ok" &&
+            "border-[var(--ok-muted)] bg-[var(--ok-subtle)] text-ok", tone === "warn" && "border-warning/40 bg-warning/10 text-warning", tone === "danger" && "border-danger/40 bg-danger/10 text-danger", tone === "neutral" && "border-border/60 bg-bg/70 text-muted-foreground"), children: children }));
+}
+function AccessModeSection({ state, onRefresh, }) {
+    const bootConfig = useBootConfig();
+    let title = "Checking access";
+    let detail = "Confirming how this browser is connected.";
+    let status = "Checking";
+    let statusTone = "neutral";
+    let currentBrowserValue = "Checking";
+    let currentBrowserDetail = "Waiting for the auth endpoint to identify this browser.";
+    let remotePasswordValue = "Checking";
+    let remotePasswordDetail = "Waiting for the auth endpoint to report remote password state.";
+    let remotePasswordTone = "neutral";
+    if (state.phase === "loaded") {
+        if (state.access.mode === "local") {
+            title = "Local access";
+            detail =
+                "This browser is on the host machine. Localhost and Electrobun access do not require a password. Remote browsers use the remote password below.";
+            status = state.access.passwordConfigured
+                ? "Remote password set"
+                : "Remote password not set";
+            statusTone = state.access.passwordConfigured ? "ok" : "warn";
+            currentBrowserValue = "Local host";
+            currentBrowserDetail =
+                "The current browser is trusted because it is running from localhost or the desktop renderer.";
+        }
+        else {
+            title = "Remote session";
+            detail =
+                "This browser is signed in remotely. Localhost and Electrobun still use local access on the host machine.";
+            status = "Signed in";
+            statusTone = "ok";
+            currentBrowserValue = "Remote browser";
+            currentBrowserDetail =
+                "This session is authenticated with the configured remote password.";
+        }
+        remotePasswordValue = state.access.passwordConfigured ? "Set" : "Not set";
+        remotePasswordDetail = state.access.passwordConfigured
+            ? "Remote browsers can sign in with the configured password."
+            : "Remote browsers cannot sign in until a remote password is set.";
+        remotePasswordTone = state.access.passwordConfigured ? "ok" : "warn";
+    }
+    else if (state.phase === "locked") {
+        title = "Remote access";
+        detail =
+            state.reason === "remote_password_not_configured"
+                ? "Remote access is disabled until this instance is opened on the host machine and a remote password is set."
+                : "Remote access requires a password session.";
+        status = state.access?.passwordConfigured ? "Password required" : "Not set";
+        statusTone = state.access?.passwordConfigured ? "warn" : "danger";
+        currentBrowserValue = "Remote browser";
+        currentBrowserDetail =
+            state.reason === "remote_password_not_configured"
+                ? "This browser is remote and no remote password is configured yet."
+                : "This browser is remote and needs a password session.";
+        remotePasswordValue = state.access?.passwordConfigured ? "Set" : "Not set";
+        remotePasswordDetail = state.access?.passwordConfigured
+            ? "Remote password exists; sign in to manage sessions and changes."
+            : "Remote access is disabled until the host machine sets a password.";
+        remotePasswordTone = state.access?.passwordConfigured ? "warn" : "danger";
+    }
+    else if (state.phase === "error") {
+        title = "Access unavailable";
+        detail = state.message;
+        status = "Unavailable";
+        statusTone = "danger";
+        currentBrowserValue = "Unavailable";
+        currentBrowserDetail = state.message;
+        remotePasswordValue = "Unavailable";
+        remotePasswordDetail = "The auth endpoint did not return password state.";
+        remotePasswordTone = "danger";
+    }
+    const pageOrigin = currentPageOrigin();
+    const pageUrl = pageOrigin ? securitySettingsUrl(pageOrigin) : null;
+    const pageEndpoint = parseAbsoluteUrl(pageOrigin);
+    const pageEndpointDescription = pageEndpoint
+        ? describeEndpoint(pageEndpoint)
+        : null;
+    const apiBase = bootConfig.apiBase?.trim() ||
+        (pageOrigin ? trimTrailingSlash(pageOrigin) : null);
+    const apiEndpoint = parseAbsoluteUrl(apiBase);
+    const apiEndpointDescription = apiEndpoint
+        ? describeEndpoint(apiEndpoint)
+        : null;
+    const pageUrlLabel = pageEndpoint && !isLoopbackHost(pageEndpoint.hostname)
+        ? "Remote URL"
+        : "Local URL";
+    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: "Access", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "text-sm font-medium text-foreground/90", children: title }), _jsx("p", { className: "max-w-2xl text-sm leading-6 text-muted-foreground", children: detail })] }), _jsx(StatusBadge, { tone: statusTone, children: state.phase === "loading" ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), status] })) : (status) })] }), _jsxs("div", { className: "rounded-md border border-border/40 bg-bg/35 px-3", children: [_jsx(AccessInfoRow, { label: "Current browser", value: currentBrowserValue, detail: currentBrowserDetail }), _jsx(AccessInfoRow, { label: "Local access", value: "Enabled", detail: "Host-machine localhost and desktop renderer sessions do not require the remote password." }), _jsx(AccessInfoRow, { label: "Remote password", value: _jsx(StatusBadge, { tone: remotePasswordTone, children: remotePasswordValue }), detail: remotePasswordDetail }), pageUrl && pageEndpointDescription && (_jsx(AccessInfoRow, { label: pageUrlLabel, value: pageUrl, detail: pageEndpointDescription.detail })), apiBase && apiEndpointDescription && (_jsx(AccessInfoRow, { label: "API base", value: trimTrailingSlash(apiBase), detail: `${apiEndpointDescription.value}: ${apiEndpointDescription.detail}` })), state.phase === "loaded" && (_jsx(AccessInfoRow, { label: "Identity", value: state.identity.displayName, detail: `Signed in as ${state.identity.kind}.` }))] }), _jsxs("button", { type: "button", onClick: () => void onRefresh(), className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), "Refresh"] })] }));
+}
+function SessionsSection() {
+    const [state, setState] = useState({ phase: "loading" });
+    const [revokingIds, setRevokingIds] = useState(new Set());
+    const load = useCallback(async () => {
+        setState({ phase: "loading" });
+        const result = await authListSessions();
+        if (result.ok === true) {
+            setState({ phase: "loaded", sessions: result.sessions });
+        }
+        else if (result.ok === false) {
+            setState({
+                phase: "error",
+                message: result.status === 401
+                    ? "You must be signed in to view sessions."
+                    : "Could not load sessions. Try reloading the page.",
+            });
+        }
+    }, []);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    const handleRevoke = useCallback(async (sessionId) => {
+        setRevokingIds((prev) => new Set([...prev, sessionId]));
+        const result = await authRevokeSession(sessionId);
+        setRevokingIds((prev) => {
+            const next = new Set(prev);
+            next.delete(sessionId);
+            return next;
+        });
+        if (result.ok)
+            void load();
+    }, [load]);
+    const handleRevokeOthers = useCallback(async () => {
+        if (state.phase !== "loaded")
+            return;
+        const others = state.sessions.filter((s) => !s.current);
+        for (const s of others) {
+            await handleRevoke(s.id);
+        }
+    }, [state, handleRevoke]);
+    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: "Active sessions", children: [state.phase === "loading" && (_jsxs("div", { className: "flex items-center gap-2 py-3 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Loading sessions..."] })), state.phase === "error" && (_jsx("p", { className: "py-2 text-sm text-danger", children: state.message })), state.phase === "loaded" && (_jsxs("div", { className: "space-y-3", children: [state.sessions.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No active sessions." })) : (_jsx("div", { className: "divide-y divide-border/30", children: state.sessions.map((session) => (_jsx(SessionRow, { session: session, revoking: revokingIds.has(session.id), onRevoke: handleRevoke }, session.id))) })), _jsxs("div", { className: "flex items-center justify-between pt-1", children: [_jsxs("button", { type: "button", onClick: load, className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), "Refresh"] }), state.sessions.filter((s) => !s.current).length > 1 && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleRevokeOthers, className: "border-danger/40 text-xs text-danger hover:bg-danger/10", children: "Sign out everywhere else" }))] })] }))] }));
+}
+function SessionRow({ session, revoking, onRevoke, }) {
+    return (_jsxs("div", { className: "flex items-start gap-3 py-3", children: [_jsx(DeviceIcon, { userAgent: session.userAgent }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium capitalize text-foreground/90", children: session.kind }), session.current && (_jsx("span", { className: "rounded-full border border-[var(--ok-muted)] bg-[var(--ok-subtle)] px-2 py-0.5 text-3xs font-medium uppercase tracking-[0.08em] text-ok", children: "This session" }))] }), _jsxs("p", { className: "truncate text-xs text-muted-foreground/80", children: [session.ip ?? "Unknown IP", " \u00B7", " ", session.userAgent
+                                ? session.userAgent.slice(0, 60)
+                                : "Unknown client"] }), _jsxs("p", { className: "text-xs text-muted-foreground/60", children: ["Last seen ", formatRelativeTime(session.lastSeenAt), " \u00B7 expires", " ", formatRelativeTime(session.expiresAt)] })] }), !session.current && (_jsx(Button, { variant: "ghost", size: "sm", disabled: revoking, onClick: () => onRevoke(session.id), className: "shrink-0 text-xs text-danger hover:bg-danger/10 hover:text-danger", "aria-label": "Revoke this session", children: revoking ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Trash2, { className: "h-3 w-3" })) }))] }));
+}
+function RemotePasswordSection({ accessState, onAccessChanged, }) {
+    const displayNameId = useId().replace(/:/g, "");
+    const currentPasswordId = useId().replace(/:/g, "");
+    const newPasswordId = useId().replace(/:/g, "");
+    const confirmPasswordId = useId().replace(/:/g, "");
+    const [displayName, setDisplayName] = useState("Owner");
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [state, setState] = useState({ phase: "idle" });
+    const loaded = accessState.phase === "loaded" ? accessState : null;
+    const setupMode = loaded?.access.mode === "local" && !loaded.access.ownerConfigured;
+    const localAccess = loaded?.access.mode === "local";
+    const currentPasswordRequired = Boolean(loaded && !localAccess);
+    const confirmMismatch = confirmPassword.length > 0 && newPassword !== confirmPassword;
+    const isSubmitting = state.phase === "submitting";
+    const canSubmit = Boolean(loaded) &&
+        (!setupMode || displayName.trim().length > 0) &&
+        (!currentPasswordRequired || currentPassword.length > 0) &&
+        newPassword.length >= 12 &&
+        newPassword === confirmPassword &&
+        !isSubmitting;
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        if (!loaded)
+            return;
+        if (newPassword !== confirmPassword) {
+            setState({ phase: "error", message: "New passwords do not match." });
+            return;
+        }
+        setState({ phase: "submitting" });
+        const result = setupMode
+            ? await authSetup({
+                displayName: displayName.trim(),
+                password: newPassword,
+            })
+            : await authChangePassword({
+                currentPassword: currentPasswordRequired
+                    ? currentPassword
+                    : undefined,
+                newPassword,
+            });
+        if (result.ok === false) {
+            setState({ phase: "error", message: result.message });
+            return;
+        }
+        setState({
+            phase: "success",
+            message: "Remote access is enabled. Remote browsers can sign in with this password when they can reach this instance.",
+        });
+        setCurrentPassword("");
+        setNewPassword("");
+        setConfirmPassword("");
+        await onAccessChanged();
+    }, [
+        confirmPassword,
+        currentPassword,
+        currentPasswordRequired,
+        displayName,
+        loaded,
+        newPassword,
+        onAccessChanged,
+        setupMode,
+    ]);
+    if (accessState.phase === "loading") {
+        return (_jsx(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: "Remote password", children: _jsxs("div", { className: "flex items-center gap-2 py-3 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Loading password settings..."] }) }));
+    }
+    if (accessState.phase !== "loaded") {
+        const message = accessState.phase === "locked" &&
+            accessState.reason === "remote_password_not_configured"
+            ? "Remote access is not enabled yet. Open this instance on the host machine via localhost and set a remote password here."
+            : "Sign in to manage the remote password.";
+        return (_jsx(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: "Remote password", children: _jsx("p", { className: "text-sm text-muted-foreground", children: message }) }));
+    }
+    const description = localAccess
+        ? "Set the password used by browsers that connect to this instance from another machine. Localhost and Electrobun do not use it."
+        : "Change the password for this remote browser session.";
+    const buttonLabel = setupMode || !accessState.access.passwordConfigured
+        ? "Set remote password"
+        : "Change remote password";
+    return (_jsxs(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: "Remote password", children: [_jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: description }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", noValidate: true, children: [setupMode && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: displayNameId, className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Display name" }), _jsx(Input, { id: displayNameId, type: "text", autoComplete: "username", value: displayName, onChange: (event) => {
+                                    setDisplayName(event.target.value);
+                                    if (state.phase === "error")
+                                        setState({ phase: "idle" });
+                                }, disabled: isSubmitting })] })), currentPasswordRequired && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: currentPasswordId, className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Current password" }), _jsx(Input, { id: currentPasswordId, type: "password", autoComplete: "current-password", value: currentPassword, onChange: (event) => {
+                                    setCurrentPassword(event.target.value);
+                                    if (state.phase === "error")
+                                        setState({ phase: "idle" });
+                                }, disabled: isSubmitting })] })), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: newPasswordId, className: "text-xs uppercase tracking-wide text-muted-foreground", children: "New password" }), _jsx(Input, { id: newPasswordId, type: "password", autoComplete: "new-password", placeholder: "At least 12 characters", value: newPassword, onChange: (event) => {
+                                    setNewPassword(event.target.value);
+                                    if (state.phase === "error")
+                                        setState({ phase: "idle" });
+                                }, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: confirmPasswordId, className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Confirm new password" }), _jsx(Input, { id: confirmPasswordId, type: "password", autoComplete: "new-password", value: confirmPassword, onChange: (event) => {
+                                    setConfirmPassword(event.target.value);
+                                    if (state.phase === "error")
+                                        setState({ phase: "idle" });
+                                }, disabled: isSubmitting, "aria-invalid": confirmMismatch, className: cn(confirmMismatch && "border-danger focus-visible:border-danger") }), confirmMismatch && (_jsx("p", { className: "text-xs text-danger", children: "Passwords do not match." }))] }), state.phase === "error" && (_jsx("p", { role: "alert", className: "text-sm text-danger", children: state.message })), state.phase === "success" && (_jsx("p", { className: "text-sm text-ok", children: state.message })), _jsx("div", { className: "flex justify-end pt-1", children: _jsx(Button, { type: "submit", disabled: !canSubmit, size: "sm", children: isSubmitting ? "Saving..." : buttonLabel }) })] })] }));
+}
+export function SecuritySettingsSection() {
+    const [accessState, setAccessState] = useState({
+        phase: "loading",
+    });
+    const refreshAccessState = useCallback(async () => {
+        setAccessState({ phase: "loading" });
+        setAccessState(await fetchAccessState());
+    }, []);
+    useEffect(() => {
+        void refreshAccessState();
+    }, [refreshAccessState]);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(AccessModeSection, { state: accessState, onRefresh: refreshAccessState }), _jsx(RemotePasswordSection, { accessState: accessState, onAccessChanged: refreshAccessState }), _jsx(SessionsSection, {})] }));
+}

package/components/settings/SubscriptionStatus.d.ts

@@ -0,0 +1,33 @@
+import { type SubscriptionProviderSelectionId } from "../../providers";
+export interface SubscriptionStatusProps {
+    resolvedSelectedId: string | null;
+    subscriptionStatus: Array<{
+        provider: string;
+        accountId: string;
+        label: string;
+        configured: boolean;
+        valid: boolean;
+        expiresAt: number | null;
+        source?: "app" | "claude-code-cli" | "setup-token" | "codex-cli" | "gemini-cli" | "coding-plan-key" | "unavailable" | null;
+        available?: boolean;
+        availabilityReason?: string;
+        allowedClient?: string;
+        loginHint?: string;
+        billingMode?: "subscription-coding-plan" | "subscription-coding-cli";
+    }>;
+    anthropicConnected: boolean;
+    setAnthropicConnected: (v: boolean) => void;
+    /**
+     * True when Claude Code CLI credentials exist on this machine but the user
+     * has NOT linked their subscription via the in-app OAuth flow. In this
+     * state the panel shows a read-only notice and hides the Disconnect
+     * button — the app can't clear CLI-owned credentials.
+     */
+    anthropicCliDetected: boolean;
+    openaiConnected: boolean;
+    setOpenaiConnected: (v: boolean) => void;
+    handleSelectSubscription: (providerId: SubscriptionProviderSelectionId, activate?: boolean) => Promise<void>;
+    loadSubscriptionStatus: () => Promise<void>;
+}
+export declare function SubscriptionStatus({ resolvedSelectedId, subscriptionStatus, anthropicConnected, setAnthropicConnected, anthropicCliDetected, openaiConnected, setOpenaiConnected, handleSelectSubscription, loadSubscriptionStatus, }: SubscriptionStatusProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubscriptionStatus.d.ts.map

package/components/settings/SubscriptionStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/SubscriptionStatus.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,iBAAiB,CAAC;AAQzB,MAAM,WAAW,uBAAuB;IACtC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,EAAE,KAAK,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,OAAO,CAAC;QACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,MAAM,CAAC,EACH,KAAK,GACL,iBAAiB,GACjB,aAAa,GACb,WAAW,GACX,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,IAAI,CAAC;QACT,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,0BAA0B,GAAG,yBAAyB,CAAC;KACtE,CAAC,CAAC;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C;;;;;OAKG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wBAAwB,EAAE,CACxB,UAAU,EAAE,+BAA+B,EAC3C,QAAQ,CAAC,EAAE,OAAO,KACf,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,sBAAsB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7C;AA4LD,wBAAgB,kBAAkB,CAAC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,GACvB,EAAE,uBAAuB,2CA8ezB"}