@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/onboarding/ConnectionStep.js

@@ -0,0 +1,609 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core/api";
+import { useBranding } from "@elizaos/app-core/config";
+import { isNative } from "@elizaos/app-core/platform";
+import { getProviderLogo } from "@elizaos/app-core/providers";
+import { useApp } from "@elizaos/app-core/state";
+import { openExternalUrl } from "@elizaos/app-core/utils";
+import { ONBOARDING_PROVIDER_CATALOG } from "@elizaos/autonomous/contracts/onboarding";
+import { useEffect, useState } from "react";
+function formatRequestError(err) {
+    if (err instanceof Error) {
+        return err.message;
+    }
+    return String(err);
+}
+export function ConnectionStep() {
+    const { onboardingOptions, onboardingRunMode, onboardingCloudProvider, onboardingProvider, onboardingSubscriptionTab, onboardingApiKey, onboardingDetectedProviders, onboardingRemoteApiBase, onboardingRemoteToken, onboardingRemoteConnecting, onboardingRemoteError, onboardingRemoteConnected, onboardingPrimaryModel, onboardingElizaCloudTab, onboardingOpenRouterModel, elizaCloudConnected, elizaCloudLoginBusy, elizaCloudLoginError, handleCloudLogin, handleOnboardingRemoteConnect, handleOnboardingUseLocalBackend, handleOnboardingNext, handleOnboardingBack, setState, t, } = useApp();
+    const branding = useBranding();
+    const [openaiOAuthStarted, setOpenaiOAuthStarted] = useState(false);
+    const [openaiCallbackUrl, setOpenaiCallbackUrl] = useState("");
+    const [openaiConnected, setOpenaiConnected] = useState(false);
+    const [openaiError, setOpenaiError] = useState("");
+    const [anthropicOAuthStarted, setAnthropicOAuthStarted] = useState(false);
+    const [anthropicCode, setAnthropicCode] = useState("");
+    const [anthropicConnected, setAnthropicConnected] = useState(false);
+    const [anthropicError, setAnthropicError] = useState("");
+    const [apiKeyFormatWarning, setApiKeyFormatWarning] = useState("");
+    const handleAnthropicStart = async () => {
+        setAnthropicError("");
+        try {
+            const { authUrl } = await client.startAnthropicLogin();
+            if (authUrl) {
+                await openExternalUrl(authUrl);
+                setAnthropicOAuthStarted(true);
+                return;
+            }
+            setAnthropicError("Failed to get auth URL");
+        }
+        catch (err) {
+            setAnthropicError(`Failed to start login: ${formatRequestError(err)}`);
+        }
+    };
+    const handleAnthropicExchange = async () => {
+        setAnthropicError("");
+        try {
+            const result = await client.exchangeAnthropicCode(anthropicCode);
+            if (result.success) {
+                setAnthropicConnected(true);
+                return;
+            }
+            setAnthropicError(result.error ?? "Exchange failed");
+        }
+        catch (err) {
+            setAnthropicError(`Exchange failed: ${formatRequestError(err)}`);
+        }
+    };
+    const handleOpenAIStart = async () => {
+        try {
+            const { authUrl } = await client.startOpenAILogin();
+            if (authUrl) {
+                await openExternalUrl(authUrl);
+                setOpenaiOAuthStarted(true);
+                return;
+            }
+            setOpenaiError("No auth URL returned from login");
+        }
+        catch (err) {
+            setOpenaiError(`Failed to start login: ${formatRequestError(err)}`);
+        }
+    };
+    const handleOpenAIExchange = async () => {
+        setOpenaiError("");
+        try {
+            const data = await client.exchangeOpenAICode(openaiCallbackUrl);
+            if (data.success) {
+                setOpenaiOAuthStarted(false);
+                setOpenaiCallbackUrl("");
+                setOpenaiConnected(true);
+                setState("onboardingProvider", "openai-subscription");
+                return;
+            }
+            const msg = data.error ?? "Exchange failed";
+            setOpenaiError(msg.includes("No active flow")
+                ? t("onboarding.loginSessionExpired")
+                : msg);
+        }
+        catch (_err) {
+            setOpenaiError(t("onboarding.networkError"));
+        }
+    };
+    const validateApiKeyFormat = (key, providerId) => {
+        if (!key || key.trim().length === 0)
+            return "";
+        const trimmed = key.trim();
+        if (providerId === "openai" && !trimmed.startsWith("sk-")) {
+            return t("onboarding.keyFormatWarning");
+        }
+        if (providerId === "anthropic" && !trimmed.startsWith("sk-ant-")) {
+            return t("onboarding.keyFormatWarning");
+        }
+        if (trimmed.length < 20) {
+            return t("onboarding.keyFormatWarning");
+        }
+        return "";
+    };
+    const handleApiKeyChange = (e) => {
+        const newKey = e.target.value;
+        setState("onboardingApiKey", newKey);
+        setApiKeyFormatWarning(validateApiKeyFormat(newKey, onboardingProvider));
+    };
+    const handleOpenRouterModelSelect = (modelId) => {
+        setState("onboardingOpenRouterModel", modelId);
+    };
+    // Use the static provider catalog shipped in the frontend bundle — no API
+    // call needed. Runtime overrides from `onboardingOptions` (if available)
+    // take precedence so the server can still augment the list when present.
+    const catalogProviders = onboardingOptions?.providers?.length
+        ? onboardingOptions.providers
+        : [...ONBOARDING_PROVIDER_CATALOG];
+    // Merge custom providers from branding (app-injected) with the catalog.
+    // Custom providers are appended; duplicates (by id) are skipped.
+    const customProviders = branding.customProviders ?? [];
+    const catalogIds = new Set(catalogProviders.map((p) => p.id));
+    const providers = [
+        ...catalogProviders,
+        ...customProviders.filter((cp) => !catalogIds.has(cp.id)),
+    ];
+    // Build a map of custom provider logos for getProviderLogo lookups.
+    const customLogoMap = new Map(customProviders
+        .filter((cp) => cp.logoDark || cp.logoLight)
+        .map((cp) => [cp.id, { logoDark: cp.logoDark, logoLight: cp.logoLight }]));
+    const getCustomLogo = (id) => customLogoMap.get(id);
+    const elizaCloudReady = elizaCloudConnected ||
+        (onboardingRunMode === "cloud" &&
+            onboardingCloudProvider === "elizacloud" &&
+            onboardingApiKey.trim().length > 0);
+    const showProviderSelection = onboardingRemoteConnected || onboardingRunMode === "local";
+    const recommendedIds = new Set([
+        "elizacloud",
+        "anthropic-subscription",
+        "openai-subscription",
+    ]);
+    const providerOverrides = {
+        elizacloud: { name: "Eliza Cloud", description: "LLMs, RPCs & more included" },
+        "anthropic-subscription": {
+            name: "Claude Sub",
+            description: "Pro/Max subscription",
+        },
+        "openai-subscription": {
+            name: "ChatGPT Sub",
+            description: "Plus/Pro subscription",
+        },
+        anthropic: { name: "Anthropic", description: "Claude API key" },
+        openai: { name: "OpenAI", description: "GPT API key" },
+        openrouter: { name: "OpenRouter", description: "Multi-model API" },
+        gemini: { name: "Gemini", description: "Google AI" },
+        grok: { name: "xAI (Grok)" },
+        groq: { name: "Groq", description: "Fast inference" },
+        deepseek: { name: "DeepSeek" },
+        "pi-ai": { name: "Pi Credentials", description: "Local auth" },
+    };
+    const getProviderDisplay = (provider) => {
+        const override = providerOverrides[provider.id];
+        return {
+            name: override?.name ?? provider.name,
+            description: override?.description ?? provider.description,
+        };
+    };
+    const handleSelectLocalHosting = () => {
+        setState("onboardingRunMode", "local");
+        setState("onboardingCloudProvider", "");
+        setState("onboardingRemoteError", null);
+        setState("onboardingRemoteConnecting", false);
+    };
+    const handleSelectRemoteHosting = () => {
+        setState("onboardingRunMode", "cloud");
+        setState("onboardingCloudProvider", "remote");
+        setState("onboardingProvider", "");
+        setState("onboardingApiKey", "");
+        setState("onboardingPrimaryModel", "");
+    };
+    const handleSelectElizaCloudHosting = () => {
+        setState("onboardingRunMode", "cloud");
+        setState("onboardingCloudProvider", "elizacloud");
+        setState("onboardingProvider", "");
+        setState("onboardingApiKey", "");
+        setState("onboardingPrimaryModel", "");
+    };
+    const resetCloudSelection = () => {
+        setState("onboardingCloudProvider", "");
+        setState("onboardingApiKey", "");
+        setState("onboardingRemoteError", null);
+        setState("onboardingRemoteConnecting", false);
+    };
+    const resetHostingSelection = () => {
+        resetCloudSelection();
+        setState("onboardingRunMode", "");
+    };
+    const handleRemoteBack = () => {
+        if (onboardingRemoteConnected) {
+            handleOnboardingUseLocalBackend();
+            return;
+        }
+        resetHostingSelection();
+    };
+    const detectedByProviderId = new Map((onboardingDetectedProviders ?? []).map((d) => [d.id, d]));
+    const getDetectedLabel = (providerId) => {
+        const d = detectedByProviderId.get(providerId);
+        if (!d)
+            return null;
+        if (d.source === "codex-auth")
+            return "Detected from Codex";
+        if (d.source === "claude-credentials")
+            return "Detected from Claude Code";
+        if (d.source === "keychain")
+            return "Detected from Keychain";
+        if (d.source === "env")
+            return "Detected from env";
+        return "Auto-detected";
+    };
+    const availableProviders = providers;
+    const recommendedProviders = availableProviders.filter((p) => recommendedIds.has(p.id));
+    const otherProviders = availableProviders.filter((p) => !recommendedIds.has(p.id));
+    const sortedProviders = [...recommendedProviders, ...otherProviders];
+    const piAiModels = onboardingOptions?.piAiModels ?? [];
+    const piAiDefaultModel = onboardingOptions?.piAiDefaultModel ?? "";
+    const normalizedPrimaryModel = onboardingPrimaryModel.trim();
+    const hasKnownPiAiModel = piAiModels.some((model) => model.id === normalizedPrimaryModel);
+    const piAiSelectValue = normalizedPrimaryModel.length === 0
+        ? ""
+        : hasKnownPiAiModel
+            ? normalizedPrimaryModel
+            : "__custom__";
+    const handleProviderSelect = (providerId) => {
+        setState("onboardingProvider", providerId);
+        // Auto-fill API key from detected credentials if available
+        const detected = detectedByProviderId.get(providerId);
+        setState("onboardingApiKey", detected?.apiKey ?? "");
+        setState("onboardingPrimaryModel", "");
+        if (providerId === "anthropic-subscription") {
+            setState("onboardingSubscriptionTab", "token");
+        }
+    };
+    // On native (mobile) or when branding requires cloud-only, skip the
+    // hosting choice screen and go straight to the provider selection grid.
+    // Eliza Cloud appears as the first recommended option alongside subscriptions.
+    const forceCloud = isNative || branding.cloudOnly;
+    useEffect(() => {
+        if (forceCloud && !onboardingRunMode) {
+            setState("onboardingRunMode", "local");
+            setState("onboardingProvider", "");
+            setState("onboardingApiKey", "");
+            setState("onboardingPrimaryModel", "");
+        }
+    }, [forceCloud, onboardingRunMode, setState]);
+    if (!showProviderSelection) {
+        if (!onboardingRunMode) {
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.hostingTitle") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsx("div", { className: "onboarding-question", children: t("onboarding.hostingQuestion") }), _jsxs("div", { className: "onboarding-provider-grid", children: [!isNative && !branding.cloudOnly && (_jsxs("button", { type: "button", className: "onboarding-provider-card onboarding-provider-card--recommended", onClick: handleSelectLocalHosting, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.hostingLocal") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.hostingLocalDesc") })] }), _jsx("span", { className: "onboarding-provider-badge", children: t("onboarding.recommended") ?? "Recommended" })] })), _jsx("button", { type: "button", className: "onboarding-provider-card", onClick: handleSelectRemoteHosting, children: _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.hostingRemote") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.hostingRemoteDesc") })] }) }), _jsx("button", { type: "button", className: "onboarding-provider-card", onClick: handleSelectElizaCloudHosting, children: _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.hostingCloud") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.hostingElizaCloudDesc") })] }) })] }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: handleOnboardingBack, type: "button", children: t("onboarding.back") }), _jsx("span", {})] })] }));
+        }
+        if (onboardingCloudProvider === "remote") {
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.remoteTitle") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsxs("div", { style: {
+                            width: "100%",
+                            textAlign: "left",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "0.875rem",
+                        }, children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "remote-api-base", style: {
+                                            display: "block",
+                                            fontSize: "0.875rem",
+                                            marginBottom: "0.375rem",
+                                            color: "var(--muted)",
+                                        }, children: t("onboarding.remoteAddress") }), _jsx("input", { id: "remote-api-base", type: "text", className: "onboarding-input", placeholder: t("onboarding.remoteAddressPlaceholder"), value: onboardingRemoteApiBase, onChange: (e) => setState("onboardingRemoteApiBase", e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "remote-api-token", style: {
+                                            display: "block",
+                                            fontSize: "0.875rem",
+                                            marginBottom: "0.375rem",
+                                            color: "var(--muted)",
+                                        }, children: t("onboarding.remoteAccessKey") }), _jsx("input", { id: "remote-api-token", type: "password", className: "onboarding-input", placeholder: t("onboarding.remoteAccessKeyPlaceholder"), value: onboardingRemoteToken, onChange: (e) => setState("onboardingRemoteToken", e.target.value) })] }), onboardingRemoteError && (_jsx("p", { style: {
+                                    color: "var(--danger)",
+                                    fontSize: "0.8125rem",
+                                }, children: onboardingRemoteError }))] }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: handleRemoteBack, type: "button", children: t("onboarding.back") }), _jsx("button", { className: "onboarding-confirm-btn", onClick: () => void handleOnboardingRemoteConnect(), disabled: onboardingRemoteConnecting, type: "button", children: onboardingRemoteConnecting
+                                    ? t("onboarding.connecting")
+                                    : t("onboarding.remoteConnect") })] })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: "Eliza Cloud" }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsxs("div", { style: { width: "100%", textAlign: "left" }, children: [_jsxs("div", { style: {
+                                display: "flex",
+                                gap: "1rem",
+                                borderBottom: "1px solid var(--border)",
+                                marginBottom: "1rem",
+                            }, children: [_jsx("button", { type: "button", style: {
+                                        fontSize: "0.875rem",
+                                        paddingBottom: "0.5rem",
+                                        color: onboardingElizaCloudTab === "login"
+                                            ? "#f0b90b"
+                                            : "var(--muted)",
+                                        background: "none",
+                                        border: "none",
+                                        borderBottom: onboardingElizaCloudTab === "login"
+                                            ? "2px solid #f0b90b"
+                                            : "2px solid transparent",
+                                        cursor: "pointer",
+                                    }, onClick: () => setState("onboardingElizaCloudTab", "login"), children: t("onboarding.login") }), _jsx("button", { type: "button", style: {
+                                        fontSize: "0.875rem",
+                                        paddingBottom: "0.5rem",
+                                        borderBottom: onboardingElizaCloudTab === "apikey"
+                                            ? "2px solid #f0b90b"
+                                            : "2px solid transparent",
+                                        color: onboardingElizaCloudTab === "apikey"
+                                            ? "#f0b90b"
+                                            : "var(--muted)",
+                                        background: "none",
+                                        border: "none",
+                                        cursor: "pointer",
+                                    }, onClick: () => setState("onboardingElizaCloudTab", "apikey"), children: t("onboarding.apiKey") })] }), onboardingElizaCloudTab === "login" ? (_jsxs("div", { style: { textAlign: "center" }, children: [elizaCloudConnected ? (_jsxs("div", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "0.5rem",
+                                        padding: "0.625rem 1rem",
+                                        border: "1px solid var(--ok-muted)",
+                                        background: "var(--ok-subtle)",
+                                        color: "var(--ok)",
+                                        fontSize: "0.875rem",
+                                        borderRadius: "0.5rem",
+                                        justifyContent: "center",
+                                    }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("title", { children: t("onboarding.connected") }), _jsx("polyline", { points: "20 6 9 17 4 12" })] }), t("onboarding.connected")] })) : (_jsx("button", { type: "button", className: "onboarding-confirm-btn", onClick: handleCloudLogin, disabled: elizaCloudLoginBusy, children: elizaCloudLoginBusy
+                                        ? t("onboarding.connecting")
+                                        : t("onboarding.connectAccount") })), elizaCloudLoginError &&
+                                    (() => {
+                                        const urlMatch = elizaCloudLoginError.match(/^Open this link to log in: (.+)$/);
+                                        if (urlMatch) {
+                                            return (_jsxs("p", { style: {
+                                                    fontSize: "0.8125rem",
+                                                    marginTop: "0.5rem",
+                                                    color: "var(--text)",
+                                                }, children: ["Open this link to log in:", " ", _jsx("a", { href: urlMatch[1], target: "_blank", rel: "noopener noreferrer", style: {
+                                                            color: "var(--text)",
+                                                            textDecoration: "underline",
+                                                        }, children: "Click here" })] }));
+                                        }
+                                        return (_jsx("p", { style: {
+                                                color: "var(--danger)",
+                                                fontSize: "0.8125rem",
+                                                marginTop: "0.5rem",
+                                            }, children: elizaCloudLoginError }));
+                                    })(), _jsx("p", { className: "onboarding-desc", children: t("onboarding.freeCredits") })] })) : (_jsxs("div", { children: [_jsx("label", { htmlFor: "elizacloud-apikey", style: {
+                                        display: "block",
+                                        fontSize: "0.875rem",
+                                        marginBottom: "0.375rem",
+                                        color: "var(--muted)",
+                                    }, children: t("onboarding.apiKey") }), _jsx("input", { id: "elizacloud-apikey", type: "password", className: "onboarding-input", placeholder: "ck-...", value: onboardingApiKey, onChange: handleApiKeyChange }), _jsxs("p", { className: "onboarding-desc", children: [t("onboarding.useExistingKey"), " ", _jsx("a", { href: "https://elizacloud.ai/dashboard/settings", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--text)" }, children: t("onboarding.getOneHere") })] })] }))] }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: resetHostingSelection, type: "button", children: t("onboarding.back") }), _jsx("button", { className: "onboarding-confirm-btn", onClick: () => void handleOnboardingNext(), disabled: !elizaCloudReady, type: "button", children: t("onboarding.confirm") })] })] }));
+    }
+    if (!onboardingProvider) {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.neuralLinkTitle") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), onboardingRemoteConnected && (_jsx("p", { className: "onboarding-desc", style: { marginBottom: "1rem" }, children: t("onboarding.remoteConnectedDesc") })), _jsx("div", { className: "onboarding-question", children: t("onboarding.chooseProvider") }), _jsx("div", { className: "onboarding-provider-grid", children: sortedProviders.map((p) => {
+                        const display = getProviderDisplay(p);
+                        const isRecommended = recommendedIds.has(p.id);
+                        const detectedLabel = getDetectedLabel(p.id);
+                        return (_jsxs("button", { type: "button", className: `onboarding-provider-card${isRecommended ? " onboarding-provider-card--recommended" : ""}${detectedLabel ? " onboarding-provider-card--detected" : ""}`, onClick: () => handleProviderSelect(p.id), children: [_jsx("img", { src: getProviderLogo(p.id, false, getCustomLogo(p.id)), alt: display.name, className: "onboarding-provider-icon" }), _jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: display.name }), display.description && (_jsx("div", { className: "onboarding-provider-desc", children: display.description }))] }), detectedLabel && (_jsx("span", { className: "onboarding-provider-badge onboarding-provider-badge--detected", children: detectedLabel })), isRecommended && !detectedLabel && (_jsx("span", { className: "onboarding-provider-badge", children: t("onboarding.recommended") ?? "Recommended" }))] }, p.id));
+                    }) }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: onboardingRemoteConnected
+                                ? handleOnboardingUseLocalBackend
+                                : resetHostingSelection, type: "button", children: t("onboarding.back") }), _jsx("span", {})] })] }));
+    }
+    // Screen B: provider selected — show config UI
+    const selectedProvider = providers.find((p) => p.id === onboardingProvider);
+    const selectedDisplay = selectedProvider
+        ? getProviderDisplay(selectedProvider)
+        : { name: onboardingProvider, description: "" };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: _jsxs("span", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "0.5rem",
+                        justifyContent: "center",
+                    }, children: [selectedProvider && (_jsx("img", { src: getProviderLogo(selectedProvider.id, false, getCustomLogo(selectedProvider.id)), alt: selectedDisplay.name, className: "onboarding-provider-icon", style: { width: "1.5rem", height: "1.5rem" } })), selectedDisplay.name, _jsx("button", { type: "button", className: "onboarding-back-link", style: { marginLeft: "0.5rem", fontSize: "0.75rem" }, onClick: () => {
+                                setState("onboardingProvider", "");
+                                setState("onboardingApiKey", "");
+                                setState("onboardingPrimaryModel", "");
+                            }, children: t("onboarding.change") })] }) }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), onboardingProvider === "elizacloud" && (_jsxs("div", { style: { width: "100%", textAlign: "left" }, children: [_jsxs("div", { style: {
+                            display: "flex",
+                            gap: "1rem",
+                            borderBottom: "1px solid var(--border)",
+                            marginBottom: "1rem",
+                        }, children: [_jsx("button", { type: "button", style: {
+                                    fontSize: "0.875rem",
+                                    paddingBottom: "0.5rem",
+                                    color: onboardingElizaCloudTab === "login"
+                                        ? "#f0b90b"
+                                        : "var(--muted)",
+                                    background: "none",
+                                    border: "none",
+                                    borderBottom: onboardingElizaCloudTab === "login"
+                                        ? "2px solid #f0b90b"
+                                        : "2px solid transparent",
+                                    cursor: "pointer",
+                                }, onClick: () => setState("onboardingElizaCloudTab", "login"), children: t("onboarding.login") }), _jsx("button", { type: "button", style: {
+                                    fontSize: "0.875rem",
+                                    paddingBottom: "0.5rem",
+                                    borderBottom: onboardingElizaCloudTab === "apikey"
+                                        ? "2px solid #f0b90b"
+                                        : "2px solid transparent",
+                                    color: onboardingElizaCloudTab === "apikey"
+                                        ? "#f0b90b"
+                                        : "var(--muted)",
+                                    background: "none",
+                                    border: "none",
+                                    cursor: "pointer",
+                                }, onClick: () => setState("onboardingElizaCloudTab", "apikey"), children: t("onboarding.apiKey") })] }), onboardingElizaCloudTab === "login" ? (_jsxs("div", { style: { textAlign: "center" }, children: [elizaCloudConnected ? (_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "0.5rem",
+                                    padding: "0.625rem 1rem",
+                                    border: "1px solid var(--ok-muted)",
+                                    background: "var(--ok-subtle)",
+                                    color: "var(--ok)",
+                                    fontSize: "0.875rem",
+                                    borderRadius: "0.5rem",
+                                    justifyContent: "center",
+                                }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("title", { children: t("onboarding.connected") }), _jsx("polyline", { points: "20 6 9 17 4 12" })] }), t("onboarding.connected")] })) : (_jsx("button", { type: "button", className: "onboarding-confirm-btn", onClick: handleCloudLogin, disabled: elizaCloudLoginBusy, children: elizaCloudLoginBusy
+                                    ? t("onboarding.connecting")
+                                    : t("onboarding.connectAccount") })), elizaCloudLoginError &&
+                                (() => {
+                                    const urlMatch = elizaCloudLoginError.match(/^Open this link to log in: (.+)$/);
+                                    if (urlMatch) {
+                                        return (_jsxs("p", { style: {
+                                                fontSize: "0.8125rem",
+                                                marginTop: "0.5rem",
+                                                color: "var(--text)",
+                                            }, children: ["Open this link to log in:", " ", _jsx("a", { href: urlMatch[1], target: "_blank", rel: "noopener noreferrer", style: {
+                                                        color: "var(--text)",
+                                                        textDecoration: "underline",
+                                                    }, children: "Click here" })] }));
+                                    }
+                                    return (_jsx("p", { style: {
+                                            color: "var(--danger)",
+                                            fontSize: "0.8125rem",
+                                            marginTop: "0.5rem",
+                                        }, children: elizaCloudLoginError }));
+                                })(), _jsx("p", { className: "onboarding-desc", children: t("onboarding.freeCredits") })] })) : (_jsxs("div", { children: [_jsx("label", { htmlFor: "elizacloud-apikey", style: {
+                                    display: "block",
+                                    fontSize: "0.875rem",
+                                    marginBottom: "0.375rem",
+                                    color: "var(--muted)",
+                                }, children: t("onboarding.apiKey") }), _jsx("input", { id: "elizacloud-apikey", type: "password", className: "onboarding-input", placeholder: "ec-...", value: onboardingApiKey, onChange: handleApiKeyChange }), _jsxs("p", { className: "onboarding-desc", children: [t("onboarding.useExistingKey"), " ", _jsx("a", { href: "https://elizacloud.ai/dashboard/settings", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--text)" }, children: t("onboarding.getOneHere") })] })] }))] })), onboardingProvider === "anthropic-subscription" && (_jsxs("div", { style: { textAlign: "left", width: "100%" }, children: [_jsxs("div", { style: {
+                            display: "flex",
+                            gap: "1rem",
+                            borderBottom: "1px solid var(--border)",
+                            marginBottom: "0.75rem",
+                        }, children: [_jsx("button", { type: "button", style: {
+                                    fontSize: "0.875rem",
+                                    paddingBottom: "0.5rem",
+                                    background: "none",
+                                    border: "none",
+                                    borderBottom: onboardingSubscriptionTab === "token"
+                                        ? "2px solid #f0b90b"
+                                        : "2px solid transparent",
+                                    color: onboardingSubscriptionTab === "token"
+                                        ? "#f0b90b"
+                                        : "var(--muted)",
+                                    cursor: "pointer",
+                                }, onClick: () => setState("onboardingSubscriptionTab", "token"), children: t("onboarding.setupToken") }), _jsx("button", { type: "button", style: {
+                                    fontSize: "0.875rem",
+                                    paddingBottom: "0.5rem",
+                                    background: "none",
+                                    border: "none",
+                                    borderBottom: onboardingSubscriptionTab === "oauth"
+                                        ? "2px solid #f0b90b"
+                                        : "2px solid transparent",
+                                    color: onboardingSubscriptionTab === "oauth"
+                                        ? "#f0b90b"
+                                        : "var(--muted)",
+                                    cursor: "pointer",
+                                }, onClick: () => setState("onboardingSubscriptionTab", "oauth"), children: t("onboarding.oauthLogin") })] }), onboardingSubscriptionTab === "token" ? (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                                    fontSize: "0.8125rem",
+                                    fontWeight: "bold",
+                                    display: "block",
+                                    marginBottom: "0.5rem",
+                                    color: "var(--text)",
+                                }, children: t("onboarding.enterSetupToken") }), _jsx("input", { type: "password", className: "onboarding-input", value: onboardingApiKey, onChange: handleApiKeyChange, placeholder: "sk-ant-oat01-..." }), _jsx("p", { className: "onboarding-desc", style: { whiteSpace: "pre-line", textAlign: "left" }, children: t("onboarding.setupTokenInstructions") })] })) : anthropicConnected ? (_jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            gap: "0.75rem",
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "0.5rem",
+                                    padding: "0.75rem 1.5rem",
+                                    border: "1px solid var(--ok-muted)",
+                                    background: "var(--ok-subtle)",
+                                    color: "var(--ok)",
+                                    fontSize: "0.875rem",
+                                    fontWeight: "500",
+                                    width: "100%",
+                                    maxWidth: "20rem",
+                                    justifyContent: "center",
+                                }, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("title", { children: t("onboarding.connected") }), _jsx("polyline", { points: "20 6 9 17 4 12" })] }), t("onboarding.connectedToClaude")] }), _jsx("p", { className: "onboarding-desc", style: { textAlign: "center" }, children: t("onboarding.claudeSubscriptionReady") })] })) : !anthropicOAuthStarted ? (_jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            gap: "0.75rem",
+                        }, children: [_jsx("button", { type: "button", className: "onboarding-confirm-btn", onClick: () => void handleAnthropicStart(), children: t("onboarding.loginWithAnthropic") }), _jsx("p", { className: "onboarding-desc", style: { textAlign: "center" }, children: t("onboarding.requiresClaudeSub") }), anthropicError && (_jsx("p", { style: { fontSize: "0.75rem", color: "var(--danger)" }, children: anthropicError }))] })) : (_jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            gap: "0.75rem",
+                        }, children: [_jsx("p", { style: {
+                                    fontSize: "0.875rem",
+                                    textAlign: "center",
+                                    color: "var(--text)",
+                                }, children: t("onboarding.authCodeInstructions")
+                                    .split("\n")
+                                    .map((line, i) => (_jsxs("span", { children: [line, i === 0 && _jsx("br", {})] }, line + String(i)))) }), _jsx("input", { type: "text", className: "onboarding-input", placeholder: t("onboarding.pasteAuthCode"), value: anthropicCode, onChange: (e) => setAnthropicCode(e.target.value), style: { textAlign: "center" } }), anthropicError && (_jsx("p", { style: { fontSize: "0.75rem", color: "var(--danger)" }, children: anthropicError })), _jsx("button", { type: "button", className: "onboarding-confirm-btn", disabled: !anthropicCode, onClick: () => void handleAnthropicExchange(), children: t("onboarding.connect") })] }))] })), onboardingProvider === "openai-subscription" && (_jsx("div", { style: { width: "100%" }, children: openaiConnected ? (_jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        gap: "0.75rem",
+                    }, children: [_jsxs("div", { style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "0.5rem",
+                                padding: "0.75rem 1.5rem",
+                                border: "1px solid var(--ok-muted)",
+                                background: "var(--ok-subtle)",
+                                color: "var(--ok)",
+                                fontSize: "0.875rem",
+                                fontWeight: "500",
+                                width: "100%",
+                                maxWidth: "20rem",
+                                justifyContent: "center",
+                            }, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("title", { children: t("onboarding.connected") }), _jsx("polyline", { points: "20 6 9 17 4 12" })] }), t("onboarding.connectedToChatGPT")] }), _jsx("p", { className: "onboarding-desc", style: { textAlign: "center" }, children: t("onboarding.chatgptSubscriptionReady") })] })) : !openaiOAuthStarted ? (_jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        gap: "0.75rem",
+                    }, children: [_jsx("button", { type: "button", className: "onboarding-confirm-btn", onClick: () => void handleOpenAIStart(), children: t("onboarding.loginWithOpenAI") }), _jsx("p", { className: "onboarding-desc", style: { textAlign: "center" }, children: t("onboarding.requiresChatGPTSub") })] })) : (_jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "0.75rem",
+                    }, children: [_jsxs("div", { style: {
+                                padding: "0.75rem",
+                                border: "1px solid var(--border)",
+                                background: "var(--bg-hover)",
+                                fontSize: "0.875rem",
+                                borderRadius: "0.25rem",
+                            }, children: [_jsx("p", { style: {
+                                        fontWeight: "500",
+                                        marginBottom: "0.25rem",
+                                        color: "var(--text)",
+                                    }, children: t("onboarding.almostThere") }), _jsxs("p", { className: "onboarding-desc", style: { lineHeight: "1.5", textAlign: "left" }, children: [t("onboarding.redirectInstructions"), " ", _jsx("code", { style: {
+                                                background: "var(--bg-hover)",
+                                                padding: "0 0.25rem",
+                                                fontSize: "0.75rem",
+                                            }, children: "localhost:1455" }), t("onboarding.copyEntireUrl")] })] }), _jsx("input", { type: "text", className: "onboarding-input", placeholder: "http://localhost:1455/...", value: openaiCallbackUrl, onChange: (e) => {
+                                setOpenaiCallbackUrl(e.target.value);
+                                setOpenaiError("");
+                            } }), openaiError && (_jsx("p", { style: { fontSize: "0.75rem", color: "var(--danger)" }, children: openaiError })), _jsxs("div", { style: {
+                                display: "flex",
+                                gap: "0.5rem",
+                                justifyContent: "center",
+                            }, children: [_jsx("button", { type: "button", className: "onboarding-confirm-btn", disabled: !openaiCallbackUrl, onClick: () => void handleOpenAIExchange(), children: t("onboarding.completeLogin") }), _jsx("button", { type: "button", className: "onboarding-back-link", onClick: () => {
+                                        setOpenaiOAuthStarted(false);
+                                        setOpenaiCallbackUrl("");
+                                    }, children: t("onboarding.startOver") })] })] })) })), onboardingProvider &&
+                onboardingProvider !== "anthropic-subscription" &&
+                onboardingProvider !== "openai-subscription" &&
+                onboardingProvider !== "elizacloud" &&
+                onboardingProvider !== "ollama" &&
+                onboardingProvider !== "pi-ai" && (_jsxs("div", { style: { textAlign: "left", width: "100%" }, children: [_jsx("span", { style: {
+                            fontSize: "0.8125rem",
+                            fontWeight: "bold",
+                            display: "block",
+                            marginBottom: "0.5rem",
+                            color: "var(--text)",
+                        }, children: t("onboarding.apiKey") }), _jsx("input", { type: "password", className: "onboarding-input", value: onboardingApiKey, onChange: handleApiKeyChange, placeholder: t("onboarding.enterApiKey") }), apiKeyFormatWarning && (_jsx("p", { style: {
+                            fontSize: "0.75rem",
+                            color: "var(--danger)",
+                            marginTop: "0.5rem",
+                        }, children: apiKeyFormatWarning }))] })), onboardingProvider === "ollama" && (_jsx("p", { className: "onboarding-desc", children: t("onboarding.ollamaNoConfig") })), onboardingProvider === "pi-ai" && (_jsxs("div", { style: { textAlign: "left", width: "100%" }, children: [_jsx("span", { style: {
+                            fontSize: "0.8125rem",
+                            fontWeight: "bold",
+                            display: "block",
+                            marginBottom: "0.5rem",
+                            color: "var(--text)",
+                        }, children: t("onboarding.primaryModelOptional") }), piAiModels.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("select", { value: piAiSelectValue, onChange: (e) => {
+                                    const next = e.target.value;
+                                    if (next === "__custom__") {
+                                        if (piAiSelectValue !== "__custom__") {
+                                            setState("onboardingPrimaryModel", "");
+                                        }
+                                        return;
+                                    }
+                                    setState("onboardingPrimaryModel", next);
+                                }, className: "onboarding-input", children: [_jsxs("option", { value: "", children: [t("onboarding.useDefaultModel"), piAiDefaultModel ? ` (${piAiDefaultModel})` : ""] }), piAiModels.map((model) => (_jsxs("option", { value: model.id, children: [model.name, " (", model.provider, ")"] }, model.id))), _jsx("option", { value: "__custom__", children: t("onboarding.customModel") })] }), piAiSelectValue === "__custom__" && (_jsx("input", { type: "text", className: "onboarding-input", value: onboardingPrimaryModel, onChange: (e) => setState("onboardingPrimaryModel", e.target.value), placeholder: "provider/model (e.g. anthropic/claude-3.5-sonnet)", style: { marginTop: "0.5rem" } }))] })) : (_jsx("input", { type: "text", className: "onboarding-input", value: onboardingPrimaryModel, onChange: (e) => setState("onboardingPrimaryModel", e.target.value), placeholder: "provider/model (e.g. anthropic/claude-3.5-sonnet)" })), _jsxs("p", { className: "onboarding-desc", style: { textAlign: "left" }, children: [t("onboarding.piCredentialsHint"), piAiModels.length > 0
+                                ? t("onboarding.piDropdownHint")
+                                : t("onboarding.piManualHint")] })] })), onboardingProvider === "openrouter" &&
+                onboardingApiKey.trim() &&
+                onboardingOptions?.openrouterModels && (_jsxs("div", { style: { marginTop: "1rem", textAlign: "left", width: "100%" }, children: [_jsx("span", { style: {
+                            fontSize: "0.8125rem",
+                            fontWeight: "bold",
+                            display: "block",
+                            marginBottom: "0.5rem",
+                            color: "var(--text)",
+                        }, children: t("onboarding.selectModel") }), _jsx("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "0.5rem",
+                        }, children: onboardingOptions?.openrouterModels?.map((model) => (_jsx("button", { type: "button", className: `onboarding-provider-card${onboardingOpenRouterModel === model.id ? " onboarding-provider-card--selected" : ""}`, onClick: () => handleOpenRouterModelSelect(model.id), style: { width: "100%" }, children: _jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: model.name }), model.description && (_jsx("div", { className: "onboarding-provider-desc", children: model.description }))] }) }, model.id))) })] })), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: () => {
+                            setState("onboardingProvider", "");
+                            setState("onboardingApiKey", "");
+                            setState("onboardingPrimaryModel", "");
+                        }, type: "button", children: t("onboarding.back") }), _jsx("button", { className: "onboarding-confirm-btn", onClick: () => handleOnboardingNext(), type: "button", children: t("onboarding.confirm") })] })] }));
+}

package/components/onboarding/IdentityStep.d.ts

@@ -0,0 +1,2 @@
+export declare function IdentityStep(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IdentityStep.d.ts.map