@elizaos/app-core 2.0.0-alpha.37

package/dist/components/ElizaCloudDashboard.js

@@ -0,0 +1,657 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, SectionCard, } from "@elizaos/ui";
+import { AlertCircle, CircleDollarSign, CreditCard, ExternalLink, LayoutDashboard, Loader2, Plus, RefreshCw, Server, Shield, Terminal, Trash2, Wallet, X, Zap, } from "lucide-react";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { client, } from "../api";
+import { useApp } from "../state";
+import { openExternalUrl } from "../utils";
+import { StripeEmbeddedCheckout } from "./StripeEmbeddedCheckout";
+const ELIZA_CLOUD_LOGIN_URL = "https://www.elizacloud.ai/login?returnTo=%2Fdashboard%2Fmilady";
+const ELIZA_CLOUD_INSTANCES_URL = "https://www.elizacloud.ai/dashboard/milady";
+const BILLING_PRESET_AMOUNTS = [10, 25, 100];
+const STATUS_BADGE = {
+    running: {
+        label: "Running",
+        className: "bg-ok/10 text-ok border-ok/20",
+    },
+    queued: {
+        label: "Queued",
+        className: "bg-warn/10 text-warn border-warn/20",
+    },
+    provisioning: {
+        label: "Provisioning",
+        className: "bg-accent/10 text-txt border-accent/20",
+    },
+    stopped: {
+        label: "Stopped",
+        className: "bg-muted/10 text-muted border-border/40",
+    },
+    failed: {
+        label: "Failed",
+        className: "bg-danger/10 text-danger border-danger/20",
+    },
+};
+function AgentStatusBadge({ status }) {
+    const badge = STATUS_BADGE[status] ?? STATUS_BADGE.stopped;
+    return (_jsx("span", { className: `text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider border ${badge?.className}`, children: badge?.label }));
+}
+function CloudAgentCard({ agent, onDelete, deleting, launching, onLaunch, onSelect, }) {
+    return (
+    // biome-ignore lint/a11y/useSemanticElements: cannot use button due to nested buttons
+    _jsxs("div", { className: "rounded-2xl border border-border/50 bg-bg/30 p-4 flex flex-col justify-between gap-3 hover:border-accent/30 transition-all duration-200 cursor-pointer", onClick: () => onSelect?.(agent.agent_id), onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect?.(agent.agent_id);
+            }
+        }, role: "button", tabIndex: 0, children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Server, { className: "w-4 h-4 text-txt shrink-0" }), _jsx("span", { className: "font-bold text-sm text-txt-strong truncate max-w-[140px]", children: agent.agent_name || "Unnamed Agent" })] }), _jsx(AgentStatusBadge, { status: agent.status })] }), _jsxs("div", { className: "text-[11px] text-muted space-y-1", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Node" }), _jsx("span", { className: "font-mono text-txt-strong/70", children: agent.node_id?.slice(0, 8) ?? "—" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Created" }), _jsx("span", { className: "text-txt-strong/70", children: new Date(agent.created_at).toLocaleDateString() })] })] }), _jsxs("div", { className: "flex gap-2 mt-1", children: [_jsxs(Button, { variant: "outline", size: "sm", className: "flex-1 rounded-xl h-8 text-xs border-border/40", onClick: (event) => {
+                            event.stopPropagation();
+                            onLaunch(agent.agent_id);
+                        }, disabled: launching, children: [launching ? (_jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" })) : (_jsx(ExternalLink, { className: "w-3 h-3 mr-1" })), "Open"] }), _jsx(Button, { variant: "outline", size: "sm", className: "settings-icon-button rounded-xl h-8 text-xs border-danger/30 text-danger hover:bg-danger/10", onClick: (event) => {
+                            event.stopPropagation();
+                            onDelete(agent.agent_id);
+                        }, disabled: deleting || launching, children: deleting ? (_jsx(Loader2, { className: "w-3 h-3 animate-spin" })) : (_jsx(Trash2, { className: "w-3 h-3" })) })] })] }));
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}
+function unwrapBillingData(value) {
+    if (isRecord(value.data)) {
+        return value.data;
+    }
+    return value;
+}
+function readString(value) {
+    return typeof value === "string" && value.trim() ? value : undefined;
+}
+function readNumber(value) {
+    if (typeof value === "number" && Number.isFinite(value))
+        return value;
+    if (typeof value === "string" && value.trim()) {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+}
+function readBoolean(value) {
+    return typeof value === "boolean" ? value : undefined;
+}
+function normalizeBillingSummary(raw) {
+    const source = unwrapBillingData(raw);
+    return {
+        ...raw,
+        ...source,
+        balance: readNumber(source.balance) ??
+            readNumber(source.creditBalance) ??
+            null,
+        currency: readString(source.currency) ??
+            readString(source.balanceCurrency),
+        topUpUrl: readString(source.topUpUrl) ??
+            readString(source.billingUrl),
+        embeddedCheckoutEnabled: readBoolean(source.embeddedCheckoutEnabled) ??
+            readBoolean(source.embedded),
+        hostedCheckoutEnabled: readBoolean(source.hostedCheckoutEnabled) ??
+            readBoolean(source.hosted),
+        cryptoEnabled: readBoolean(source.cryptoEnabled) ??
+            readBoolean(source.crypto),
+        low: readBoolean(source.low),
+        critical: readBoolean(source.critical),
+    };
+}
+function normalizeBillingSettings(raw) {
+    const source = unwrapBillingData(raw);
+    return {
+        ...raw,
+        ...source,
+        settings: isRecord(source.settings) ? source.settings : raw.settings,
+    };
+}
+function getBillingAutoTopUp(settings) {
+    const rawSettings = isRecord(settings?.settings) ? settings.settings : null;
+    return isRecord(rawSettings?.autoTopUp) ? rawSettings.autoTopUp : {};
+}
+function getBillingLimits(settings) {
+    const rawSettings = isRecord(settings?.settings) ? settings.settings : null;
+    return isRecord(rawSettings?.limits) ? rawSettings.limits : {};
+}
+function resolveCheckoutUrl(response) {
+    return (readString(response.checkoutUrl) ??
+        readString(response.url) ??
+        readString(response.hostedUrl) ??
+        null);
+}
+function buildAutoTopUpFormState(billingSummary, billingSettings) {
+    const autoTopUp = getBillingAutoTopUp(billingSettings);
+    const minimumTopUp = readNumber(billingSummary?.minimumTopUp) ?? 1;
+    const enabled = readBoolean(autoTopUp.enabled) ?? false;
+    const amount = String(readNumber(autoTopUp.amount) ?? minimumTopUp);
+    const threshold = String(readNumber(autoTopUp.threshold) ?? 5);
+    return {
+        amount,
+        dirty: false,
+        enabled,
+        sourceKey: JSON.stringify([enabled, amount, threshold]),
+        threshold,
+    };
+}
+function autoTopUpFormReducer(state, action) {
+    switch (action.type) {
+        case "hydrate":
+            if (!action.force && state.dirty) {
+                return state;
+            }
+            if (state.sourceKey === action.next.sourceKey && !state.dirty) {
+                return state;
+            }
+            return action.next;
+        case "setAmount":
+            return { ...state, amount: action.value, dirty: true };
+        case "setEnabled":
+            return { ...state, enabled: action.value, dirty: true };
+        case "setThreshold":
+            return { ...state, threshold: action.value, dirty: true };
+        default:
+            return state;
+    }
+}
+export function CloudDashboard() {
+    const { t, elizaCloudConnected, elizaCloudCredits, elizaCloudCreditsLow, elizaCloudCreditsCritical, elizaCloudTopUpUrl, elizaCloudUserId, cloudDashboardView, elizaCloudLoginBusy, handleCloudLogin, handleCloudDisconnect, elizaCloudDisconnecting: cloudDisconnecting, loadDropStatus, walletAddresses, walletBalances, retryStartup, setActionNotice, setState, setTab, } = useApp();
+    const [refreshing, setRefreshing] = useState(false);
+    const [billingLoading, setBillingLoading] = useState(false);
+    const [billingError, setBillingError] = useState(null);
+    const [billingSummary, setBillingSummary] = useState(null);
+    const [billingSettings, setBillingSettings] = useState(null);
+    const [billingAmount, setBillingAmount] = useState("25");
+    const [autoTopUpForm, dispatchAutoTopUpForm] = useReducer(autoTopUpFormReducer, buildAutoTopUpFormState(null, null));
+    const [billingSettingsBusy, setBillingSettingsBusy] = useState(false);
+    const [checkoutBusy, setCheckoutBusy] = useState(false);
+    const [checkoutSession, setCheckoutSession] = useState(null);
+    const [checkoutDialogOpen, setCheckoutDialogOpen] = useState(false);
+    const [cryptoBusy, setCryptoBusy] = useState(false);
+    const [cryptoQuote, setCryptoQuote] = useState(null);
+    const [cryptoPayBusy, setCryptoPayBusy] = useState(false);
+    const [cryptoPayResult, setCryptoPayResult] = useState(null);
+    const [cloudAgents, setCloudAgents] = useState([]);
+    const [agentsLoading, setAgentsLoading] = useState(false);
+    const [agentsError, setAgentsError] = useState(null);
+    const [deletingAgentId, setDeletingAgentId] = useState(null);
+    const [launchingAgentId, setLaunchingAgentId] = useState(null);
+    const [selectedAgentId, setSelectedAgentId] = useState(null);
+    const selectedAgent = cloudAgents.find((a) => a.agent_id === selectedAgentId);
+    const [showDeployForm, setShowDeployForm] = useState(false);
+    const [deployAgentName, setDeployAgentName] = useState("");
+    const [deploying, setDeploying] = useState(false);
+    const mountedRef = useRef(true);
+    const autoTopUpEnabled = autoTopUpForm.enabled;
+    const autoTopUpAmount = autoTopUpForm.amount;
+    const autoTopUpThreshold = autoTopUpForm.threshold;
+    const fetchCloudAgents = useCallback(async () => {
+        setAgentsLoading(true);
+        setAgentsError(null);
+        try {
+            const data = await client.getCloudCompatAgents();
+            if (!mountedRef.current)
+                return;
+            setCloudAgents(Array.isArray(data.data) ? data.data : []);
+        }
+        catch (err) {
+            if (!mountedRef.current)
+                return;
+            setAgentsError(err instanceof Error ? err.message : "Failed to load cloud agents");
+            setCloudAgents([]);
+        }
+        finally {
+            if (mountedRef.current)
+                setAgentsLoading(false);
+        }
+    }, []);
+    const fetchBillingData = useCallback(async () => {
+        setBillingLoading(true);
+        setBillingError(null);
+        try {
+            const [summaryResponse, settingsResponse] = await Promise.all([
+                client.getCloudBillingSummary().catch((err) => ({ __error: err })),
+                client.getCloudBillingSettings().catch((err) => ({
+                    __error: err,
+                })),
+            ]);
+            if (!mountedRef.current)
+                return;
+            if (isRecord(summaryResponse) && "__error" in summaryResponse) {
+                const err = summaryResponse.__error;
+                throw err instanceof Error
+                    ? err
+                    : new Error("Billing summary unavailable.");
+            }
+            setBillingSummary(normalizeBillingSummary(summaryResponse));
+            if (isRecord(settingsResponse) && !("__error" in settingsResponse)) {
+                setBillingSettings(normalizeBillingSettings(settingsResponse));
+            }
+            else {
+                setBillingSettings(null);
+            }
+        }
+        catch (err) {
+            if (!mountedRef.current)
+                return;
+            setBillingSummary(null);
+            setBillingSettings(null);
+            setBillingError(err instanceof Error ? err.message : "Failed to load billing data.");
+        }
+        finally {
+            if (mountedRef.current) {
+                setBillingLoading(false);
+            }
+        }
+    }, []);
+    useEffect(() => {
+        dispatchAutoTopUpForm({
+            type: "hydrate",
+            next: buildAutoTopUpFormState(billingSummary, billingSettings),
+        });
+    }, [billingSettings, billingSummary]);
+    const handleDeleteAgent = useCallback(async (agentId) => {
+        setDeletingAgentId(agentId);
+        try {
+            const data = await client.deleteCloudCompatAgent(agentId);
+            if (data.success) {
+                setCloudAgents((prev) => prev.filter((a) => a.agent_id !== agentId));
+            }
+        }
+        catch {
+            // Silently fail — user can retry
+        }
+        finally {
+            setDeletingAgentId(null);
+            if (selectedAgentId === agentId)
+                setSelectedAgentId(null);
+        }
+    }, [selectedAgentId]);
+    const handleDeployAgent = useCallback(async () => {
+        if (!deployAgentName.trim())
+            return;
+        setDeploying(true);
+        try {
+            const response = await client.createCloudCompatAgent({
+                agentName: deployAgentName.trim(),
+            });
+            if (response.success) {
+                await fetchCloudAgents();
+                setShowDeployForm(false);
+                setDeployAgentName("");
+            }
+        }
+        catch {
+            // Intentionally swallow for now
+        }
+        finally {
+            setDeploying(false);
+        }
+    }, [deployAgentName, fetchCloudAgents]);
+    const handleLaunchAgent = useCallback(async (agentId) => {
+        setLaunchingAgentId(agentId);
+        try {
+            const response = await client.launchCloudCompatAgent(agentId);
+            if (!response.success || !response.data?.connection?.apiBase) {
+                throw new Error("Eliza Cloud did not return a launch connection.");
+            }
+            const { connection } = response.data;
+            client.setBaseUrl(connection.apiBase);
+            client.setToken(connection.token);
+            setState("startupError", null);
+            setState("onboardingRunMode", "cloud");
+            setState("onboardingCloudProvider", "elizacloud");
+            setState("onboardingRemoteApiBase", connection.apiBase);
+            setState("onboardingRemoteToken", connection.token);
+            setState("onboardingRemoteError", null);
+            setState("onboardingRemoteConnecting", false);
+            setState("onboardingRemoteConnected", false);
+            setActionNotice("Opened managed Eliza Cloud instance.", "success", 3000);
+            setTab("chat");
+            retryStartup();
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : "Failed to open Eliza Cloud instance.", "error", 4200);
+        }
+        finally {
+            if (mountedRef.current) {
+                setLaunchingAgentId(null);
+            }
+        }
+    }, [retryStartup, setActionNotice, setState, setTab]);
+    const handleRefresh = useCallback(async () => {
+        setRefreshing(true);
+        await Promise.all([
+            loadDropStatus(),
+            fetchCloudAgents(),
+            fetchBillingData(),
+        ]);
+        setTimeout(() => setRefreshing(false), 600);
+    }, [fetchBillingData, fetchCloudAgents, loadDropStatus]);
+    const handleSaveBillingSettings = useCallback(async () => {
+        const limits = getBillingLimits(billingSettings);
+        const amount = Number(autoTopUpAmount);
+        const threshold = Number(autoTopUpThreshold);
+        const minAmount = readNumber(limits.minAmount) ?? 1;
+        const maxAmount = readNumber(limits.maxAmount) ?? 1000;
+        const minThreshold = readNumber(limits.minThreshold) ?? 0;
+        const maxThreshold = readNumber(limits.maxThreshold) ?? 1000;
+        const hasPaymentMethod = readBoolean(getBillingAutoTopUp(billingSettings).hasPaymentMethod) ??
+            readBoolean(billingSummary?.hasPaymentMethod) ??
+            false;
+        if (!Number.isFinite(amount) || amount < minAmount || amount > maxAmount) {
+            setActionNotice(`Auto top-up amount must be between $${minAmount} and $${maxAmount}.`, "error", 3600);
+            return;
+        }
+        if (!Number.isFinite(threshold) ||
+            threshold < minThreshold ||
+            threshold > maxThreshold) {
+            setActionNotice(`Auto top-up threshold must be between $${minThreshold} and $${maxThreshold}.`, "error", 3600);
+            return;
+        }
+        if (autoTopUpEnabled && !hasPaymentMethod) {
+            setActionNotice("Save a payment method through card checkout before enabling auto top-up.", "info", 4200);
+            return;
+        }
+        setBillingSettingsBusy(true);
+        try {
+            const response = await client.updateCloudBillingSettings({
+                autoTopUp: {
+                    enabled: autoTopUpEnabled,
+                    amount,
+                    threshold,
+                },
+            });
+            if (!mountedRef.current)
+                return;
+            const normalizedSettings = normalizeBillingSettings(response);
+            setBillingSettings(normalizedSettings);
+            dispatchAutoTopUpForm({
+                type: "hydrate",
+                next: buildAutoTopUpFormState(billingSummary, normalizedSettings),
+                force: true,
+            });
+            await fetchBillingData();
+            setActionNotice("Billing settings updated.", "success", 3200);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : "Failed to update billing settings.", "error", 4200);
+        }
+        finally {
+            if (mountedRef.current) {
+                setBillingSettingsBusy(false);
+            }
+        }
+    }, [
+        autoTopUpAmount,
+        autoTopUpEnabled,
+        autoTopUpThreshold,
+        billingSettings,
+        billingSummary,
+        fetchBillingData,
+        setActionNotice,
+    ]);
+    const handleStartCheckout = useCallback(async () => {
+        const minimumTopUp = readNumber(billingSummary?.minimumTopUp) ?? 1;
+        const amountUsd = Number(billingAmount);
+        if (!Number.isFinite(amountUsd) || amountUsd < minimumTopUp) {
+            setActionNotice(`Enter a top-up amount of at least $${minimumTopUp}.`, "error", 3200);
+            return;
+        }
+        setCheckoutBusy(true);
+        try {
+            const response = await client.createCloudBillingCheckout({
+                amountUsd,
+                mode: billingSummary?.embeddedCheckoutEnabled ? "embedded" : "hosted",
+            });
+            const clientSecret = readString(response.clientSecret);
+            const publishableKey = readString(response.publishableKey);
+            if (clientSecret && publishableKey) {
+                setCheckoutSession(response);
+                setCheckoutDialogOpen(true);
+                return;
+            }
+            const checkoutUrl = resolveCheckoutUrl(response);
+            if (checkoutUrl) {
+                await openExternalUrl(checkoutUrl);
+                return;
+            }
+            throw new Error(readString(response.message) ??
+                "Eliza Cloud did not return a checkout session.");
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error ? err.message : "Failed to start checkout.", "error", 4200);
+        }
+        finally {
+            setCheckoutBusy(false);
+        }
+    }, [billingAmount, billingSummary, setActionNotice]);
+    const handleCreateCryptoQuote = useCallback(async () => {
+        const minimumTopUp = readNumber(billingSummary?.minimumTopUp) ?? 1;
+        const amountUsd = Number(billingAmount);
+        if (!Number.isFinite(amountUsd) || amountUsd < minimumTopUp) {
+            setActionNotice(`Enter a top-up amount of at least $${minimumTopUp}.`, "error", 3200);
+            return;
+        }
+        setCryptoBusy(true);
+        setCryptoPayResult(null);
+        try {
+            const response = await client.createCloudBillingCryptoQuote({
+                amountUsd,
+                walletAddress: walletAddresses?.evmAddress ??
+                    walletAddresses?.solanaAddress ??
+                    undefined,
+            });
+            setCryptoQuote(response);
+        }
+        catch (err) {
+            setCryptoQuote(null);
+            setActionNotice(err instanceof Error ? err.message : "Failed to request crypto quote.", "error", 4200);
+        }
+        finally {
+            setCryptoBusy(false);
+        }
+    }, [billingAmount, billingSummary, setActionNotice, walletAddresses]);
+    const handlePayCryptoFromAgentWallet = useCallback(async () => {
+        if (!cryptoQuote)
+            return;
+        const network = readString(cryptoQuote.network)?.toLowerCase();
+        const payToAddress = readString(cryptoQuote.payToAddress) ??
+            readString(cryptoQuote.address);
+        const amount = readString(cryptoQuote.amount);
+        const currency = readString(cryptoQuote.currency) ?? "USDC";
+        const tokenAddress = readString(cryptoQuote.tokenAddress);
+        if (!network || network !== "bsc") {
+            setActionNotice("Agent-wallet payment is currently wired for BSC quotes only.", "info", 4200);
+            return;
+        }
+        if (!payToAddress || !amount) {
+            setActionNotice("Crypto quote is missing transfer details.", "error", 4200);
+            return;
+        }
+        setCryptoPayBusy(true);
+        try {
+            const result = await client.executeBscTransfer({
+                toAddress: payToAddress,
+                amount,
+                assetSymbol: currency,
+                tokenAddress: tokenAddress ?? undefined,
+                confirm: true,
+            });
+            if (result.executed && result.execution?.hash) {
+                setCryptoPayResult(`Submitted ${currency} payment: ${result.execution.hash}`);
+                setActionNotice("Crypto payment submitted from the agent wallet.", "success");
+            }
+            else if (result.requiresUserSignature) {
+                setCryptoPayResult("Cloud returned an unsigned payment request. Sign it from the wallet flow to complete payment.");
+                setActionNotice("This wallet requires user-sign mode for crypto payment.", "info", 4200);
+            }
+        }
+        catch (err) {
+            setCryptoPayResult(null);
+            setActionNotice(err instanceof Error ? err.message : "Crypto payment failed.", "error", 4200);
+        }
+        finally {
+            setCryptoPayBusy(false);
+        }
+    }, [cryptoQuote, setActionNotice]);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (elizaCloudConnected) {
+            void loadDropStatus();
+            void fetchCloudAgents();
+            void fetchBillingData();
+        }
+    }, [fetchBillingData, fetchCloudAgents, loadDropStatus, elizaCloudConnected]);
+    const summaryCritical = billingSummary?.critical ?? elizaCloudCreditsCritical ?? false;
+    const summaryLow = billingSummary?.low ?? elizaCloudCreditsLow ?? false;
+    const creditStatusColor = summaryCritical
+        ? "text-danger"
+        : summaryLow
+            ? "text-warn"
+            : "text-ok";
+    const activeView = cloudDashboardView;
+    const cloudBalance = billingSummary?.balance ?? elizaCloudCredits ?? 0;
+    const cloudCurrency = billingSummary?.currency ?? "USD";
+    const fallbackBillingUrl = billingSummary?.topUpUrl ?? elizaCloudTopUpUrl ?? null;
+    const minimumTopUp = readNumber(billingSummary?.minimumTopUp) ?? 1;
+    const billingAutoTopUp = getBillingAutoTopUp(billingSettings);
+    const billingLimits = getBillingLimits(billingSettings);
+    const autoTopUpHasPaymentMethod = readBoolean(billingAutoTopUp.hasPaymentMethod) ??
+        readBoolean(billingSummary?.hasPaymentMethod) ??
+        false;
+    const autoTopUpMinAmount = readNumber(billingLimits.minAmount) ?? minimumTopUp;
+    const autoTopUpMaxAmount = readNumber(billingLimits.maxAmount) ?? 1000;
+    const autoTopUpMinThreshold = readNumber(billingLimits.minThreshold) ?? 0;
+    const autoTopUpMaxThreshold = readNumber(billingLimits.maxThreshold) ?? 1000;
+    const creditStatusTone = summaryCritical
+        ? t("elizaclouddashboard.CreditsCritical")
+        : summaryLow
+            ? t("elizaclouddashboard.CreditsLow")
+            : t("elizaclouddashboard.CreditsHealthy");
+    const hasAgentWallet = Boolean(walletAddresses?.evmAddress || walletAddresses?.solanaAddress);
+    const hasWalletFunds = Boolean(walletBalances?.evm?.chains.some((chain) => Number(chain.nativeBalance) > 0 ||
+        chain.tokens.some((token) => Number(token.balance) > 0)) ||
+        ((walletBalances?.solana &&
+            (Number(walletBalances.solana.solBalance) > 0 ||
+                walletBalances.solana.tokens.some((token) => Number(token.balance) > 0))) ??
+            false));
+    if (!elizaCloudConnected) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center max-w-md mx-auto px-4 py-8 text-center animate-in fade-in slide-in-from-bottom-4 duration-700", children: [_jsx("div", { className: "w-12 h-12 rounded-2xl bg-accent/10 flex items-center justify-center mb-5 border border-accent/20", children: _jsx(Zap, { className: "w-6 h-6 text-txt" }) }), _jsx("p", { className: "text-sm text-muted mb-6 leading-relaxed", children: t("elizaclouddashboard.ScaleYourAgents") }), _jsxs(Button, { variant: "default", size: "sm", className: "rounded-xl px-8 py-3 text-sm font-semibold shadow-md shadow-accent/15 hover:shadow-accent/30 hover:-translate-y-0.5 transition-all duration-300", onClick: handleCloudLogin, disabled: elizaCloudLoginBusy, children: [elizaCloudLoginBusy ? (_jsx(RefreshCw, { className: "w-4 h-4 mr-2 animate-spin" })) : (_jsx(Zap, { className: "w-4 h-4 mr-2" })), elizaCloudLoginBusy
+                            ? t("elizaclouddashboard.Connecting")
+                            : t("elizaclouddashboard.ConnectElizaCloud")] }), _jsxs("p", { className: "mt-4 text-xs text-muted/60", children: [t("elizaclouddashboard.NewToElizaCloud"), " ", _jsx("a", { href: ELIZA_CLOUD_LOGIN_URL, target: "_blank", rel: "noopener noreferrer", className: "text-txt underline hover:text-txt-hover transition-colors", children: t("elizaclouddashboard.LearnMore") })] })] }));
+    }
+    return (_jsxs("div", { className: "custom-scrollbar p-6 lg:p-10 space-y-8 max-w-7xl mx-auto animate-in fade-in duration-500", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "w-10 h-10 rounded-xl bg-accent flex items-center justify-center shadow-lg shadow-accent/20", children: _jsx(LayoutDashboard, { className: "w-5 h-5 text-accent-fg" }) }), _jsx("h1", { className: "text-3xl font-bold text-txt-strong tracking-tight", children: t("elizaclouddashboard.CloudDashboard") })] }), _jsx("p", { className: "text-muted", children: t("elizaclouddashboard.ManageInstance") })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "inline-flex items-center gap-1 rounded-2xl border border-border/50 bg-bg/50 p-1", children: [_jsxs("button", { type: "button", className: `inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition-colors ${activeView === "billing"
+                                            ? "bg-accent text-accent-fg"
+                                            : "text-muted hover:text-txt"}`, onClick: () => setState("cloudDashboardView", "billing"), children: [_jsx(CircleDollarSign, { className: "w-4 h-4" }), t("elizaclouddashboard.CloudBilling")] }), _jsxs("button", { type: "button", className: `inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition-colors ${activeView === "agents"
+                                            ? "bg-accent text-accent-fg"
+                                            : "text-muted hover:text-txt"}`, onClick: () => setState("cloudDashboardView", "agents"), children: [_jsx(Server, { className: "w-4 h-4" }), t("elizaclouddashboard.CloudAgents")] })] }), _jsxs(Button, { variant: "outline", size: "sm", className: "rounded-xl border-border/50 bg-bg/50 backdrop-blur-sm", onClick: handleRefresh, disabled: refreshing, children: [_jsx(RefreshCw, { className: `w-4 h-4 mr-2 ${refreshing ? "animate-spin" : ""}` }), t("elizaclouddashboard.Refresh")] }), _jsx(Button, { variant: "outline", size: "sm", className: "rounded-xl border-danger/30 text-danger hover:bg-danger/10", onClick: handleCloudDisconnect, disabled: cloudDisconnecting, children: cloudDisconnecting
+                                    ? t("elizaclouddashboard.Disconnecting")
+                                    : t("elizaclouddashboard.Disconnect") })] })] }), activeView === "billing" ? (_jsxs("div", { className: "grid grid-cols-1 xl:grid-cols-[minmax(0,1.8fr)_minmax(320px,1fr)] gap-8", children: [_jsx("div", { className: "space-y-8", children: _jsxs(SectionCard, { title: t("elizaclouddashboard.CloudBilling"), description: t("elizaclouddashboard.CloudBillingDesc"), className: "border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm", children: [billingError && (_jsx("div", { className: "mt-4 rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: billingError })), _jsxs("div", { className: "mt-4 grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)]", children: [_jsxs("div", { className: "rounded-[28px] border border-accent/20 bg-[linear-gradient(160deg,rgba(var(--accent),0.16),rgba(255,255,255,0.02))] p-5 sm:p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted", children: t("elizaclouddashboard.AvailableBalance") }), _jsxs("div", { className: `mt-3 text-4xl font-bold tracking-tight sm:text-5xl ${creditStatusColor}`, children: [cloudCurrency === "USD" ? "$" : `${cloudCurrency} `, cloudBalance.toFixed(2)] }), _jsx("div", { className: "mt-3 text-sm text-muted", children: t("elizaclouddashboard.InAppBillingReady") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [billingLoading ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted" })) : null, _jsx("span", { className: `rounded-full border px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] ${summaryCritical
+                                                                        ? "border-danger/30 bg-danger/10 text-danger"
+                                                                        : summaryLow
+                                                                            ? "border-warn/30 bg-warn/10 text-warn"
+                                                                            : "border-ok/30 bg-ok/10 text-ok"}`, children: creditStatusTone })] })] }), _jsxs("div", { className: "mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-2xl border border-border/40 bg-bg/30 px-4 py-3", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted", children: t("elizaclouddashboard.TopUpCredits") }), _jsx("div", { className: "mt-2 text-sm text-txt-strong", children: t("elizaclouddashboard.MinimumTopUp", {
+                                                                        amount: minimumTopUp.toFixed(2),
+                                                                    }) })] }), _jsxs("div", { className: "rounded-2xl border border-border/40 bg-bg/30 px-4 py-3", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted", children: t("elizaclouddashboard.AutoTopUp") }), _jsx("div", { className: "mt-2 text-sm text-txt-strong", children: autoTopUpEnabled
+                                                                        ? t("elizaclouddashboard.Enabled")
+                                                                        : t("elizaclouddashboard.Disabled") })] })] })] }), _jsxs("div", { className: "rounded-[28px] border border-border/50 bg-bg/25 p-5 sm:p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-txt-strong", children: t("elizaclouddashboard.AutoTopUp") }), _jsx("div", { className: "mt-1 text-sm text-muted", children: t("elizaclouddashboard.AutoTopUpDesc") })] }), _jsx("button", { type: "button", onClick: () => dispatchAutoTopUpForm({
+                                                                type: "setEnabled",
+                                                                value: !autoTopUpEnabled,
+                                                            }), className: `relative inline-flex h-7 w-12 items-center rounded-full border transition-colors ${autoTopUpEnabled
+                                                                ? "border-accent bg-accent"
+                                                                : "border-border/60 bg-bg/50"}`, "aria-label": t("elizaclouddashboard.ToggleAutoTopUp"), children: _jsx("span", { className: `inline-block h-5 w-5 rounded-full bg-white transition-transform ${autoTopUpEnabled ? "translate-x-6" : "translate-x-1"}` }) })] }), _jsx("div", { className: "mt-4 rounded-2xl border border-border/40 bg-bg/20 px-4 py-3 text-sm text-muted", children: autoTopUpHasPaymentMethod
+                                                        ? t("elizaclouddashboard.AutoTopUpPaymentReady")
+                                                        : t("elizaclouddashboard.AutoTopUpNeedsPaymentMethod") }), _jsxs("div", { className: "mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "cloud-auto-topup-threshold", className: "text-xs font-medium text-muted", children: t("elizaclouddashboard.AutoTopUpThreshold") }), _jsx(Input, { id: "cloud-auto-topup-threshold", type: "number", min: String(autoTopUpMinThreshold), max: String(autoTopUpMaxThreshold), step: "1", value: autoTopUpThreshold, onChange: (event) => dispatchAutoTopUpForm({
+                                                                        type: "setThreshold",
+                                                                        value: event.target.value,
+                                                                    }), className: "rounded-xl bg-bg" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "cloud-auto-topup-amount", className: "text-xs font-medium text-muted", children: t("elizaclouddashboard.AutoTopUpAmount") }), _jsx(Input, { id: "cloud-auto-topup-amount", type: "number", min: String(autoTopUpMinAmount), max: String(autoTopUpMaxAmount), step: "1", value: autoTopUpAmount, onChange: (event) => dispatchAutoTopUpForm({
+                                                                        type: "setAmount",
+                                                                        value: event.target.value,
+                                                                    }), className: "rounded-xl bg-bg" })] })] }), _jsxs("div", { className: "mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "text-xs text-muted", children: t("elizaclouddashboard.AutoTopUpLimits", {
+                                                                minAmount: autoTopUpMinAmount,
+                                                                maxAmount: autoTopUpMaxAmount,
+                                                                minThreshold: autoTopUpMinThreshold,
+                                                                maxThreshold: autoTopUpMaxThreshold,
+                                                            }) }), _jsxs(Button, { variant: "outline", className: "rounded-2xl border-border/50", disabled: billingSettingsBusy ||
+                                                                billingLoading ||
+                                                                !autoTopUpForm.dirty, onClick: () => void handleSaveBillingSettings(), children: [billingSettingsBusy ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : null, t("elizaclouddashboard.SaveBillingSettings")] })] })] })] }), _jsxs("div", { className: "mt-6 rounded-[28px] border border-border/50 bg-bg/25 p-5 sm:p-6", children: [_jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-txt-strong", children: t("elizaclouddashboard.TopUpCredits") }), _jsx("div", { className: "mt-1 text-sm text-muted", children: t("elizaclouddashboard.TopUpCreditsDesc") })] }), fallbackBillingUrl ? (_jsxs(Button, { variant: "ghost", className: "justify-start rounded-2xl px-0 text-sm text-muted hover:text-txt", onClick: () => void openExternalUrl(fallbackBillingUrl), children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), t("elizaclouddashboard.OpenBrowserBilling")] })) : null] }), _jsxs("div", { className: "mt-5 grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(260px,0.8fr)]", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: BILLING_PRESET_AMOUNTS.map((amount) => (_jsxs("button", { type: "button", className: `rounded-xl border px-3 py-2 text-sm font-medium transition-colors ${billingAmount === String(amount)
+                                                                    ? "border-accent bg-accent text-accent-fg"
+                                                                    : "border-border/50 bg-bg/30 text-txt hover:border-accent/40"}`, onClick: () => setBillingAmount(String(amount)), children: ["$", amount] }, amount))) }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "cloud-billing-amount", className: "text-xs font-medium text-muted", children: t("elizaclouddashboard.CustomAmount") }), _jsx(Input, { id: "cloud-billing-amount", type: "number", min: String(minimumTopUp), step: "1", value: billingAmount, onChange: (event) => setBillingAmount(event.target.value), className: "rounded-xl bg-bg" })] }), _jsx("div", { className: "rounded-2xl border border-border/40 bg-bg/20 px-4 py-3 text-sm text-muted", children: t("elizaclouddashboard.MinimumTopUp", {
+                                                                        amount: minimumTopUp.toFixed(2),
+                                                                    }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { variant: "default", className: "h-12 rounded-2xl font-semibold", disabled: checkoutBusy || billingLoading, onClick: () => void handleStartCheckout(), children: [checkoutBusy ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(CreditCard, { className: "mr-2 h-4 w-4" })), t("elizaclouddashboard.PayWithCard")] }), _jsxs(Button, { variant: "outline", className: "h-12 rounded-2xl border-border/50", disabled: cryptoBusy || billingLoading, onClick: () => void handleCreateCryptoQuote(), children: [cryptoBusy ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Wallet, { className: "mr-2 h-4 w-4" })), t("elizaclouddashboard.PayWithCrypto")] }), _jsx("div", { className: "rounded-2xl border border-border/40 bg-bg/20 px-4 py-3 text-xs text-muted", children: t("elizaclouddashboard.CheckoutProviderNote") })] })] })] })] }) }), _jsxs("div", { className: "space-y-8", children: [_jsx(SectionCard, { title: t("elizaclouddashboard.CryptoTopUp"), description: t("elizaclouddashboard.CryptoTopUpDesc"), className: "border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm", children: _jsxs("div", { className: "mt-2 space-y-4", children: [_jsx("div", { className: "rounded-2xl border border-border/40 bg-bg/25 px-4 py-3 text-sm text-muted", children: hasAgentWallet
+                                                ? hasWalletFunds
+                                                    ? t("elizaclouddashboard.AgentWalletFunded")
+                                                    : t("elizaclouddashboard.AgentWalletDetected")
+                                                : t("elizaclouddashboard.NoAgentWalletDetected") }), cryptoQuote ? (_jsxs("div", { className: "rounded-2xl border border-border/40 bg-bg/25 p-4", children: [_jsxs("div", { className: "space-y-2 text-sm", children: [_jsx("div", { className: "font-semibold text-txt-strong", children: readString(cryptoQuote.provider) ??
+                                                                t("elizaclouddashboard.CryptoQuoteReady") }), _jsxs("div", { className: "text-muted", children: [readString(cryptoQuote.currency) ?? "USDC", " ", readString(cryptoQuote.amount) ?? "0", " on", " ", readString(cryptoQuote.network) ?? "selected network"] }), readString(cryptoQuote.payToAddress) && (_jsx("code", { className: "block rounded-xl border border-border/40 bg-bg/30 px-3 py-2 text-xs text-txt-strong break-all", children: readString(cryptoQuote.payToAddress) })), readString(cryptoQuote.expiresAt) && (_jsxs("div", { className: "text-xs text-muted", children: ["Expires", " ", new Date(readString(cryptoQuote.expiresAt) ?? "").toLocaleString()] }))] }), _jsxs("div", { className: "mt-4 flex flex-col gap-3", children: [readString(cryptoQuote.paymentLinkUrl) ? (_jsxs(Button, { variant: "outline", className: "rounded-2xl", onClick: () => void openExternalUrl(readString(cryptoQuote.paymentLinkUrl) ?? ""), children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), t("elizaclouddashboard.OpenHostedCryptoCheckout")] })) : null, _jsxs(Button, { variant: "default", className: "rounded-2xl", disabled: cryptoPayBusy ||
+                                                                !hasAgentWallet ||
+                                                                !hasWalletFunds ||
+                                                                readString(cryptoQuote.network)?.toLowerCase() !==
+                                                                    "bsc" ||
+                                                                !readString(cryptoQuote.payToAddress) ||
+                                                                !readString(cryptoQuote.amount), onClick: () => void handlePayCryptoFromAgentWallet(), children: [cryptoPayBusy ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Wallet, { className: "mr-2 h-4 w-4" })), t("elizaclouddashboard.PayFromAgentWallet")] })] })] })) : (_jsx("div", { className: "rounded-2xl border border-dashed border-border/50 bg-bg/20 px-4 py-5 text-sm text-muted", children: t("elizaclouddashboard.CryptoQuoteHint") })), cryptoPayResult && (_jsx("div", { className: "rounded-2xl border border-ok/30 bg-ok/10 px-4 py-3 text-sm text-ok", children: cryptoPayResult }))] }) }), _jsx(SectionCard, { title: t("elizaclouddashboard.AccountDetails"), className: "border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm", children: _jsxs("div", { className: "space-y-4 mt-2", children: [_jsxs("div", { className: "p-3 rounded-2xl bg-bg/30 border border-border/30", children: [_jsx("span", { className: "text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block", children: t("elizaclouddashboard.CloudUserID") }), _jsx("code", { className: "text-xs text-txt-strong break-all font-mono", children: elizaCloudUserId || t("elizaclouddashboard.NotAvailable") })] }), _jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Shield, { className: "w-4 h-4 text-ok" }), _jsx("span", { className: "text-xs font-medium", children: t("elizaclouddashboard.SecurityStatus") })] }), _jsx("span", { className: "text-[10px] px-2 py-0.5 rounded-full bg-ok/10 text-ok font-bold uppercase tracking-wider border border-ok/20", children: t("elizaclouddashboard.Secure") })] }), _jsxs(Button, { variant: "link", className: "settings-compact-button w-full text-xs text-txt justify-start px-3 h-auto", onClick: () => void openExternalUrl(ELIZA_CLOUD_INSTANCES_URL), children: [t("elizaclouddashboard.AdvancedDashboard"), _jsx(ExternalLink, { className: "w-3 h-3 ml-2" })] })] }) })] })] })) : (_jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", children: [_jsxs("div", { className: "lg:col-span-2 space-y-8", children: [_jsxs(SectionCard, { title: t("elizaclouddashboard.CloudAgents"), description: t("elizaclouddashboard.CloudAgentsDesc"), className: "border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl overflow-hidden shadow-sm", children: [agentsError && (_jsxs("div", { className: "mt-4 flex items-center gap-2 text-sm text-danger bg-danger/10 rounded-xl p-3 border border-danger/20", children: [_jsx(AlertCircle, { className: "w-4 h-4 shrink-0" }), agentsError] })), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4", children: agentsLoading && cloudAgents.length === 0 ? (_jsx("div", { className: "col-span-full flex items-center justify-center py-12", children: _jsx(Loader2, { className: "w-6 h-6 text-txt animate-spin" }) })) : (_jsxs(_Fragment, { children: [cloudAgents.map((agent) => (_jsx(CloudAgentCard, { agent: agent, onDelete: handleDeleteAgent, deleting: deletingAgentId === agent.agent_id, launching: launchingAgentId === agent.agent_id, onLaunch: handleLaunchAgent, onSelect: (id) => setSelectedAgentId(id) }, agent.agent_id))), showDeployForm ? (_jsx("div", { className: "aspect-[4/3] rounded-2xl border border-border/50 bg-bg/30 p-6 flex flex-col items-center justify-center text-center", children: _jsxs("div", { className: "w-full space-y-3", children: [_jsx("input", { placeholder: t("elizaclouddashboard.AgentName"), value: deployAgentName, onChange: (e) => setDeployAgentName(e.target.value), onKeyDown: (e) => {
+                                                                    if (e.key === "Enter")
+                                                                        void handleDeployAgent();
+                                                                    if (e.key === "Escape")
+                                                                        setShowDeployForm(false);
+                                                                }, disabled: deploying, className: "w-full h-8 px-3 rounded-xl bg-bg/50 border border-border/40 text-xs text-center focus:outline-none focus:border-accent" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "flex-1 rounded-xl h-8 text-xs text-muted hover:text-txt-strong flex items-center justify-center p-0", onClick: () => setShowDeployForm(false), disabled: deploying, children: t("onboarding.cancel") }), _jsx(Button, { variant: "default", size: "sm", className: "flex-1 rounded-xl h-8 text-xs font-bold", onClick: handleDeployAgent, disabled: deploying || !deployAgentName.trim(), children: deploying ? (_jsx(Loader2, { className: "w-3 h-3 animate-spin mx-auto" })) : (t("elizaclouddashboard.Deploy")) })] })] }) })) : (_jsxs("button", { type: "button", className: "aspect-[4/3] rounded-2xl border border-dashed border-border/60 flex flex-col items-center justify-center p-6 text-center group hover:border-accent/50 hover:bg-accent/5 transition-all duration-300 cursor-pointer", onClick: () => setShowDeployForm(true), children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-bg-accent flex items-center justify-center mb-4 group-hover:scale-110 transition-transform", children: _jsx(Plus, { className: "w-6 h-6 text-muted group-hover:text-txt" }) }), _jsx("h3", { className: "font-bold text-txt-strong mb-1", children: t("elizaclouddashboard.DeployNewAgent") }), _jsx("p", { className: "text-xs text-muted", children: t("elizaclouddashboard.InitializeInstance") })] }))] })) })] }), _jsx(SectionCard, { title: t("elizaclouddashboard.UsageMetrics"), description: t("elizaclouddashboard.UsageMetricsDesc"), className: "border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm", children: _jsx("div", { className: "h-48 flex items-center justify-center text-muted italic text-sm border border-border/30 rounded-2xl bg-bg/20 mt-4", children: t("elizaclouddashboard.MetricsPlaceholder") }) })] }), _jsx("div", { className: "space-y-8", children: selectedAgentId && selectedAgent ? (_jsx(AgentDetailSidebar, { agent: selectedAgent, onClose: () => setSelectedAgentId(null) })) : (_jsx(SectionCard, { title: t("elizaclouddashboard.AccountDetails"), className: "border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm", children: _jsxs("div", { className: "space-y-4 mt-2", children: [_jsxs("div", { className: "p-3 rounded-2xl bg-bg/30 border border-border/30", children: [_jsx("span", { className: "text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block", children: t("elizaclouddashboard.CloudUserID") }), _jsx("code", { className: "text-xs text-txt-strong break-all font-mono", children: elizaCloudUserId ||
+                                                    t("elizaclouddashboard.NotAvailable") })] }), _jsxs("div", { className: "rounded-2xl border border-accent/20 bg-accent/8 p-4", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted", children: t("elizaclouddashboard.AvailableBalance") }), _jsxs("div", { className: `mt-2 text-3xl font-bold ${creditStatusColor}`, children: ["$", cloudBalance.toFixed(2)] }), _jsx("div", { className: "mt-2 text-xs text-muted", children: creditStatusTone })] }), _jsxs(Button, { variant: "outline", className: "w-full justify-start rounded-2xl border-border/40 bg-bg/30 px-4 py-3 text-sm", onClick: () => setState("cloudDashboardView", "billing"), children: [_jsx(CircleDollarSign, { className: "mr-2 h-4 w-4" }), t("elizaclouddashboard.CloudBilling")] })] }) })) })] })), _jsx(Dialog, { open: checkoutDialogOpen, onOpenChange: (open) => {
+                    setCheckoutDialogOpen(open);
+                    if (!open) {
+                        void fetchBillingData();
+                    }
+                }, children: _jsxs(DialogContent, { className: "max-w-4xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t("elizaclouddashboard.PayWithCard") }) }), checkoutSession?.clientSecret && checkoutSession.publishableKey ? (_jsx(StripeEmbeddedCheckout, { publishableKey: checkoutSession.publishableKey, clientSecret: checkoutSession.clientSecret })) : (_jsx("div", { className: "rounded-2xl border border-border/40 bg-bg/25 px-4 py-5 text-sm text-muted", children: t("elizaclouddashboard.CheckoutProviderNote") }))] }) })] }));
+}
+function AgentDetailSidebar({ agent, onClose, }) {
+    const [logs, setLogs] = useState("");
+    const [statusDetail, setStatusDetail] = useState(null);
+    const logsEndRef = useRef(null);
+    useEffect(() => {
+        if (!agent)
+            return;
+        let mounted = true;
+        const fetchDetails = async () => {
+            try {
+                const [statusRes, logsRes] = await Promise.all([
+                    client.getCloudCompatAgentStatus(agent.agent_id),
+                    client.getCloudCompatAgentLogs(agent.agent_id, 100),
+                ]);
+                if (!mounted)
+                    return;
+                setStatusDetail(statusRes.data);
+                setLogs(typeof logsRes.data === "string" ? logsRes.data : "");
+            }
+            catch {
+                // Silently retry next tick
+            }
+        };
+        void fetchDetails();
+        const intId = setInterval(fetchDetails, 5000);
+        return () => {
+            mounted = false;
+            clearInterval(intId);
+        };
+    }, [agent]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: rerun when logs update
+    useEffect(() => {
+        if (logsEndRef.current) {
+            logsEndRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [logs]);
+    if (!agent)
+        return null;
+    return (_jsx("div", { className: "space-y-4 animate-in slide-in-from-right-8 duration-300", children: _jsxs(SectionCard, { title: "Agent Details", className: "border-accent/40 bg-accent/5 backdrop-blur-xl rounded-3xl shadow-sm relative overflow-hidden", children: [_jsx("button", { type: "button", className: "absolute top-4 right-4 p-1 rounded-full hover:bg-bg/50 transition-colors text-muted hover:text-txt-strong", onClick: onClose, children: _jsx(X, { className: "w-5 h-5" }) }), _jsxs("div", { className: "mt-4 space-y-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "p-3 rounded-xl bg-bg/40 border border-border/40", children: [_jsx("span", { className: "text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block", children: "Status" }), _jsx(AgentStatusBadge, { status: statusDetail?.status || agent.status })] }), _jsxs("div", { className: "p-3 rounded-xl bg-bg/40 border border-border/40", children: [_jsx("span", { className: "text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block", children: "DB Status" }), _jsx("span", { className: "text-xs font-mono", children: statusDetail?.databaseStatus || agent.database_status || "—" })] }), _jsxs("div", { className: "p-3 rounded-xl bg-bg/40 border border-border/40 col-span-2", children: [_jsx("span", { className: "text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block", children: "Heartbeat" }), _jsx("span", { className: "text-xs font-mono", children: statusDetail?.lastHeartbeat
+                                                ? new Date(statusDetail.lastHeartbeat).toLocaleString()
+                                                : agent.last_heartbeat_at
+                                                    ? new Date(agent.last_heartbeat_at).toLocaleString()
+                                                    : "No heartbeat yet" })] })] }), _jsxs("div", { className: "p-3 rounded-xl bg-bg/80 border border-border/40", children: [_jsxs("span", { className: "text-[10px] text-muted uppercase font-bold tracking-wider mb-2 flex items-center gap-2", children: [_jsx(Terminal, { className: "w-3 h-3" }), " Live Logs"] }), _jsx("div", { className: "h-64 overflow-y-auto custom-scrollbar bg-black/50 rounded-lg p-3 border border-border/20", children: _jsxs("pre", { className: "text-[10px] font-mono text-txt-strong/80 whitespace-pre-wrap break-all", children: [logs || "No logs available. Deploying...", _jsx("div", { ref: logsEndRef })] }) })] })] })] }) }));
+}