@elizaos/app-core 2.0.0-alpha.37

package/dist/components/onboarding/ConnectionStep.js

@@ -0,0 +1,552 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core/api";
+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 { 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, onboardingRemoteApiBase, onboardingRemoteToken, onboardingRemoteConnecting, onboardingRemoteError, onboardingRemoteConnected, onboardingPrimaryModel, onboardingElizaCloudTab, onboardingOpenRouterModel, elizaCloudConnected, elizaCloudLoginBusy, elizaCloudLoginError, handleCloudLogin, handleOnboardingRemoteConnect, handleOnboardingUseLocalBackend, handleOnboardingNext, handleOnboardingBack, setState, t, } = useApp();
+    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);
+    };
+    const providers = (onboardingOptions?.providers ?? []).filter((provider) => provider.id !== "elizacloud");
+    const elizaCloudReady = elizaCloudConnected ||
+        (onboardingRunMode === "cloud" &&
+            onboardingCloudProvider === "elizacloud" &&
+            onboardingApiKey.trim().length > 0);
+    const showProviderSelection = onboardingRemoteConnected || onboardingRunMode === "local";
+    const recommendedIds = new Set([
+        "anthropic-subscription",
+        "openai-subscription",
+    ]);
+    const providerOverrides = {
+        elizacloud: { name: "Eliza Cloud", description: "Managed hosting" },
+        "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 handleSelectCloudHosting = () => {
+        setState("onboardingRunMode", "cloud");
+        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;
+        }
+        resetCloudSelection();
+    };
+    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);
+        setState("onboardingApiKey", "");
+        setState("onboardingPrimaryModel", "");
+        if (providerId === "anthropic-subscription") {
+            setState("onboardingSubscriptionTab", "token");
+        }
+    };
+    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 && (_jsxs("button", { type: "button", className: "onboarding-provider-card onboarding-provider-card--recommended", onClick: handleSelectLocalHosting, children: [_jsxs("div", { 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: handleSelectCloudHosting, children: _jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.hostingCloud") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.hostingCloudDesc") })] }) })] }), _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) {
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.hostingCloud") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsx("div", { className: "onboarding-question", children: t("onboarding.cloudQuestion") }), _jsxs("div", { className: "onboarding-provider-grid", children: [_jsxs("button", { type: "button", className: "onboarding-provider-card onboarding-provider-card--recommended", onClick: () => setState("onboardingCloudProvider", "elizacloud"), children: [_jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.cloudManaged") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.cloudManagedDesc") })] }), _jsx("span", { className: "onboarding-provider-badge", children: t("onboarding.recommended") ?? "Recommended" })] }), _jsx("button", { type: "button", className: "onboarding-provider-card", onClick: () => setState("onboardingCloudProvider", "remote"), children: _jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.cloudRemote") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.cloudRemoteDesc") })] }) })] }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: resetHostingSelection, 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: resetCloudSelection, 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);
+                        return (_jsxs("button", { type: "button", className: `onboarding-provider-card${isRecommended ? " onboarding-provider-card--recommended" : ""}`, onClick: () => handleProviderSelect(p.id), children: [_jsx("img", { src: getProviderLogo(p.id, false), 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 }))] }), isRecommended && (_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), 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/dist/components/onboarding/OnboardingPanel.d.ts

@@ -0,0 +1,9 @@
+import type { OnboardingStep } from "@elizaos/app-core/state";
+import { type ReactNode } from "react";
+interface OnboardingPanelProps {
+    step: OnboardingStep;
+    children: ReactNode;
+}
+export declare function OnboardingPanel({ step, children }: OnboardingPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OnboardingPanel.d.ts.map

package/dist/components/onboarding/OnboardingPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/OnboardingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAE1D,UAAU,oBAAoB;IAC5B,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CA8BvE"}

package/dist/components/onboarding/OnboardingPanel.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+export function OnboardingPanel({ step, children }) {
+    const panelRef = useRef(null);
+    const prevStepRef = useRef(step);
+    // Re-trigger entry animation on step change
+    useEffect(() => {
+        if (prevStepRef.current !== step && panelRef.current) {
+            const panel = panelRef.current;
+            panel.style.animation = "none";
+            // Force reflow
+            void panel.offsetHeight;
+            panel.style.animation = "";
+            // Re-trigger children stagger
+            panel.querySelectorAll(":scope > *").forEach((child) => {
+                child.style.animation = "none";
+                void child.offsetHeight;
+                child.style.animation = "";
+            });
+        }
+        prevStepRef.current = step;
+    }, [step]);
+    return (_jsx("div", { className: "onboarding-right", children: _jsx("div", { className: "onboarding-panel", ref: panelRef, children: children }) }));
+}

package/dist/components/onboarding/OnboardingStepNav.d.ts

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

package/dist/components/onboarding/OnboardingStepNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingStepNav.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/OnboardingStepNav.tsx"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,4CA4BhC"}