@elizaos/app-core 2.0.0-alpha.37

package/src/components/ElizaCloudDashboard.tsx

@@ -0,0 +1,1696 @@
+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 {
+  type CloudBillingCheckoutResponse,
+  type CloudBillingSettings,
+  type CloudBillingSummary,
+  type CloudCompatAgent,
+  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: Record<string, { label: string; className: string }> = {
+  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 }: { status: string }) {
+  const badge = STATUS_BADGE[status] ?? STATUS_BADGE.stopped;
+  return (
+    <span
+      className={`text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider border ${badge?.className}`}
+    >
+      {badge?.label}
+    </span>
+  );
+}
+
+function CloudAgentCard({
+  agent,
+  onDelete,
+  deleting,
+  launching,
+  onLaunch,
+  onSelect,
+}: {
+  agent: CloudCompatAgent;
+  onDelete: (id: string) => void;
+  deleting: boolean;
+  launching: boolean;
+  onLaunch: (id: string) => void;
+  onSelect?: (id: string) => void;
+}) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: cannot use button due to nested buttons
+    <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}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-2">
+          <Server className="w-4 h-4 text-txt shrink-0" />
+          <span className="font-bold text-sm text-txt-strong truncate max-w-[140px]">
+            {agent.agent_name || "Unnamed Agent"}
+          </span>
+        </div>
+        <AgentStatusBadge status={agent.status} />
+      </div>
+
+      <div className="text-[11px] text-muted space-y-1">
+        <div className="flex justify-between">
+          <span>Node</span>
+          <span className="font-mono text-txt-strong/70">
+            {agent.node_id?.slice(0, 8) ?? "—"}
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span>Created</span>
+          <span className="text-txt-strong/70">
+            {new Date(agent.created_at).toLocaleDateString()}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex gap-2 mt-1">
+        <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}
+        >
+          {launching ? (
+            <Loader2 className="w-3 h-3 mr-1 animate-spin" />
+          ) : (
+            <ExternalLink className="w-3 h-3 mr-1" />
+          )}
+          Open
+        </Button>
+
+        <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}
+        >
+          {deleting ? (
+            <Loader2 className="w-3 h-3 animate-spin" />
+          ) : (
+            <Trash2 className="w-3 h-3" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function unwrapBillingData<T extends Record<string, unknown>>(value: T): T {
+  if (isRecord(value.data)) {
+    return value.data as T;
+  }
+  return value;
+}
+
+function readString(value: unknown): string | undefined {
+  return typeof value === "string" && value.trim() ? value : undefined;
+}
+
+function readNumber(value: unknown): number | null {
+  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: unknown): boolean | undefined {
+  return typeof value === "boolean" ? value : undefined;
+}
+
+function normalizeBillingSummary(
+  raw: CloudBillingSummary,
+): CloudBillingSummary {
+  const source = unwrapBillingData(raw);
+  return {
+    ...raw,
+    ...source,
+    balance:
+      readNumber(source.balance) ??
+      readNumber((source as Record<string, unknown>).creditBalance) ??
+      null,
+    currency:
+      readString(source.currency) ??
+      readString((source as Record<string, unknown>).balanceCurrency),
+    topUpUrl:
+      readString(source.topUpUrl) ??
+      readString((source as Record<string, unknown>).billingUrl),
+    embeddedCheckoutEnabled:
+      readBoolean(source.embeddedCheckoutEnabled) ??
+      readBoolean((source as Record<string, unknown>).embedded),
+    hostedCheckoutEnabled:
+      readBoolean(source.hostedCheckoutEnabled) ??
+      readBoolean((source as Record<string, unknown>).hosted),
+    cryptoEnabled:
+      readBoolean(source.cryptoEnabled) ??
+      readBoolean((source as Record<string, unknown>).crypto),
+    low: readBoolean(source.low),
+    critical: readBoolean(source.critical),
+  };
+}
+
+function normalizeBillingSettings(
+  raw: CloudBillingSettings,
+): CloudBillingSettings {
+  const source = unwrapBillingData(raw);
+  return {
+    ...raw,
+    ...source,
+    settings: isRecord(source.settings) ? source.settings : raw.settings,
+  };
+}
+
+function getBillingAutoTopUp(
+  settings: CloudBillingSettings | null,
+): Record<string, unknown> {
+  const rawSettings = isRecord(settings?.settings) ? settings.settings : null;
+  return isRecord(rawSettings?.autoTopUp) ? rawSettings.autoTopUp : {};
+}
+
+function getBillingLimits(
+  settings: CloudBillingSettings | null,
+): Record<string, unknown> {
+  const rawSettings = isRecord(settings?.settings) ? settings.settings : null;
+  return isRecord(rawSettings?.limits) ? rawSettings.limits : {};
+}
+
+function resolveCheckoutUrl(
+  response: CloudBillingCheckoutResponse,
+): string | null {
+  return (
+    readString(response.checkoutUrl) ??
+    readString(response.url) ??
+    readString((response as Record<string, unknown>).hostedUrl) ??
+    null
+  );
+}
+
+interface AutoTopUpFormState {
+  amount: string;
+  dirty: boolean;
+  enabled: boolean;
+  sourceKey: string;
+  threshold: string;
+}
+
+type AutoTopUpFormAction =
+  | { type: "hydrate"; next: AutoTopUpFormState; force?: boolean }
+  | { type: "setAmount"; value: string }
+  | { type: "setEnabled"; value: boolean }
+  | { type: "setThreshold"; value: string };
+
+function buildAutoTopUpFormState(
+  billingSummary: CloudBillingSummary | null,
+  billingSettings: CloudBillingSettings | null,
+): AutoTopUpFormState {
+  const autoTopUp = getBillingAutoTopUp(billingSettings);
+  const minimumTopUp =
+    readNumber(
+      (billingSummary as Record<string, unknown> | null)?.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: AutoTopUpFormState,
+  action: AutoTopUpFormAction,
+): AutoTopUpFormState {
+  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<string | null>(null);
+  const [billingSummary, setBillingSummary] =
+    useState<CloudBillingSummary | null>(null);
+  const [billingSettings, setBillingSettings] =
+    useState<CloudBillingSettings | null>(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<CloudBillingCheckoutResponse | null>(null);
+  const [checkoutDialogOpen, setCheckoutDialogOpen] = useState(false);
+  const [cryptoBusy, setCryptoBusy] = useState(false);
+  const [cryptoQuote, setCryptoQuote] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
+  const [cryptoPayBusy, setCryptoPayBusy] = useState(false);
+  const [cryptoPayResult, setCryptoPayResult] = useState<string | null>(null);
+  const [cloudAgents, setCloudAgents] = useState<CloudCompatAgent[]>([]);
+  const [agentsLoading, setAgentsLoading] = useState(false);
+  const [agentsError, setAgentsError] = useState<string | null>(null);
+  const [deletingAgentId, setDeletingAgentId] = useState<string | null>(null);
+  const [launchingAgentId, setLaunchingAgentId] = useState<string | null>(null);
+  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(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: string) => {
+      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: string) => {
+      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 as Record<string, unknown> | null)?.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 as Record<string, unknown> | null)?.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 as Record<string, unknown> | null)?.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 as Record<string, unknown>);
+    } 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 as Record<string, unknown>).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 as Record<string, unknown> | null)?.minimumTopUp,
+    ) ?? 1;
+  const billingAutoTopUp = getBillingAutoTopUp(billingSettings);
+  const billingLimits = getBillingLimits(billingSettings);
+  const autoTopUpHasPaymentMethod =
+    readBoolean(billingAutoTopUp.hasPaymentMethod) ??
+    readBoolean(
+      (billingSummary as Record<string, unknown> | null)?.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 (
+      <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">
+        <div className="w-12 h-12 rounded-2xl bg-accent/10 flex items-center justify-center mb-5 border border-accent/20">
+          <Zap className="w-6 h-6 text-txt" />
+        </div>
+        <p className="text-sm text-muted mb-6 leading-relaxed">
+          {t("elizaclouddashboard.ScaleYourAgents")}
+        </p>
+        <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}
+        >
+          {elizaCloudLoginBusy ? (
+            <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+          ) : (
+            <Zap className="w-4 h-4 mr-2" />
+          )}
+          {elizaCloudLoginBusy
+            ? t("elizaclouddashboard.Connecting")
+            : t("elizaclouddashboard.ConnectElizaCloud")}
+        </Button>
+        <p className="mt-4 text-xs text-muted/60">
+          {t("elizaclouddashboard.NewToElizaCloud")}{" "}
+          <a
+            href={ELIZA_CLOUD_LOGIN_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-txt underline hover:text-txt-hover transition-colors"
+          >
+            {t("elizaclouddashboard.LearnMore")}
+          </a>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="custom-scrollbar p-6 lg:p-10 space-y-8 max-w-7xl mx-auto animate-in fade-in duration-500">
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+        <div>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-10 h-10 rounded-xl bg-accent flex items-center justify-center shadow-lg shadow-accent/20">
+              <LayoutDashboard className="w-5 h-5 text-accent-fg" />
+            </div>
+            <h1 className="text-3xl font-bold text-txt-strong tracking-tight">
+              {t("elizaclouddashboard.CloudDashboard")}
+            </h1>
+          </div>
+          <p className="text-muted">
+            {t("elizaclouddashboard.ManageInstance")}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <div className="inline-flex items-center gap-1 rounded-2xl border border-border/50 bg-bg/50 p-1">
+            <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")}
+            >
+              <CircleDollarSign className="w-4 h-4" />
+              {t("elizaclouddashboard.CloudBilling")}
+            </button>
+            <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")}
+            >
+              <Server className="w-4 h-4" />
+              {t("elizaclouddashboard.CloudAgents")}
+            </button>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            className="rounded-xl border-border/50 bg-bg/50 backdrop-blur-sm"
+            onClick={handleRefresh}
+            disabled={refreshing}
+          >
+            <RefreshCw
+              className={`w-4 h-4 mr-2 ${refreshing ? "animate-spin" : ""}`}
+            />
+            {t("elizaclouddashboard.Refresh")}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="rounded-xl border-danger/30 text-danger hover:bg-danger/10"
+            onClick={handleCloudDisconnect}
+            disabled={cloudDisconnecting}
+          >
+            {cloudDisconnecting
+              ? t("elizaclouddashboard.Disconnecting")
+              : t("elizaclouddashboard.Disconnect")}
+          </Button>
+        </div>
+      </div>
+
+      {activeView === "billing" ? (
+        <div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1.8fr)_minmax(320px,1fr)] gap-8">
+          <div className="space-y-8">
+            <SectionCard
+              title={t("elizaclouddashboard.CloudBilling")}
+              description={t("elizaclouddashboard.CloudBillingDesc")}
+              className="border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm"
+            >
+              {billingError && (
+                <div className="mt-4 rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger">
+                  {billingError}
+                </div>
+              )}
+
+              <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)]">
+                <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">
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <div className="text-[11px] uppercase tracking-[0.18em] text-muted">
+                        {t("elizaclouddashboard.AvailableBalance")}
+                      </div>
+                      <div
+                        className={`mt-3 text-4xl font-bold tracking-tight sm:text-5xl ${creditStatusColor}`}
+                      >
+                        {cloudCurrency === "USD" ? "$" : `${cloudCurrency} `}
+                        {cloudBalance.toFixed(2)}
+                      </div>
+                      <div className="mt-3 text-sm text-muted">
+                        {t("elizaclouddashboard.InAppBillingReady")}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {billingLoading ? (
+                        <Loader2 className="h-4 w-4 animate-spin text-muted" />
+                      ) : null}
+                      <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"
+                        }`}
+                      >
+                        {creditStatusTone}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <div className="rounded-2xl border border-border/40 bg-bg/30 px-4 py-3">
+                      <div className="text-[11px] uppercase tracking-[0.18em] text-muted">
+                        {t("elizaclouddashboard.TopUpCredits")}
+                      </div>
+                      <div className="mt-2 text-sm text-txt-strong">
+                        {t("elizaclouddashboard.MinimumTopUp", {
+                          amount: minimumTopUp.toFixed(2),
+                        })}
+                      </div>
+                    </div>
+                    <div className="rounded-2xl border border-border/40 bg-bg/30 px-4 py-3">
+                      <div className="text-[11px] uppercase tracking-[0.18em] text-muted">
+                        {t("elizaclouddashboard.AutoTopUp")}
+                      </div>
+                      <div className="mt-2 text-sm text-txt-strong">
+                        {autoTopUpEnabled
+                          ? t("elizaclouddashboard.Enabled")
+                          : t("elizaclouddashboard.Disabled")}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="rounded-[28px] border border-border/50 bg-bg/25 p-5 sm:p-6">
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <div className="text-sm font-semibold text-txt-strong">
+                        {t("elizaclouddashboard.AutoTopUp")}
+                      </div>
+                      <div className="mt-1 text-sm text-muted">
+                        {t("elizaclouddashboard.AutoTopUpDesc")}
+                      </div>
+                    </div>
+                    <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")}
+                    >
+                      <span
+                        className={`inline-block h-5 w-5 rounded-full bg-white transition-transform ${
+                          autoTopUpEnabled ? "translate-x-6" : "translate-x-1"
+                        }`}
+                      />
+                    </button>
+                  </div>
+
+                  <div className="mt-4 rounded-2xl border border-border/40 bg-bg/20 px-4 py-3 text-sm text-muted">
+                    {autoTopUpHasPaymentMethod
+                      ? t("elizaclouddashboard.AutoTopUpPaymentReady")
+                      : t("elizaclouddashboard.AutoTopUpNeedsPaymentMethod")}
+                  </div>
+
+                  <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <div className="space-y-2">
+                      <label
+                        htmlFor="cloud-auto-topup-threshold"
+                        className="text-xs font-medium text-muted"
+                      >
+                        {t("elizaclouddashboard.AutoTopUpThreshold")}
+                      </label>
+                      <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"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label
+                        htmlFor="cloud-auto-topup-amount"
+                        className="text-xs font-medium text-muted"
+                      >
+                        {t("elizaclouddashboard.AutoTopUpAmount")}
+                      </label>
+                      <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"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="text-xs text-muted">
+                      {t("elizaclouddashboard.AutoTopUpLimits", {
+                        minAmount: autoTopUpMinAmount,
+                        maxAmount: autoTopUpMaxAmount,
+                        minThreshold: autoTopUpMinThreshold,
+                        maxThreshold: autoTopUpMaxThreshold,
+                      })}
+                    </div>
+                    <Button
+                      variant="outline"
+                      className="rounded-2xl border-border/50"
+                      disabled={
+                        billingSettingsBusy ||
+                        billingLoading ||
+                        !autoTopUpForm.dirty
+                      }
+                      onClick={() => void handleSaveBillingSettings()}
+                    >
+                      {billingSettingsBusy ? (
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      ) : null}
+                      {t("elizaclouddashboard.SaveBillingSettings")}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-6 rounded-[28px] border border-border/50 bg-bg/25 p-5 sm:p-6">
+                <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                  <div>
+                    <div className="text-sm font-semibold text-txt-strong">
+                      {t("elizaclouddashboard.TopUpCredits")}
+                    </div>
+                    <div className="mt-1 text-sm text-muted">
+                      {t("elizaclouddashboard.TopUpCreditsDesc")}
+                    </div>
+                  </div>
+
+                  {fallbackBillingUrl ? (
+                    <Button
+                      variant="ghost"
+                      className="justify-start rounded-2xl px-0 text-sm text-muted hover:text-txt"
+                      onClick={() => void openExternalUrl(fallbackBillingUrl)}
+                    >
+                      <ExternalLink className="mr-2 h-4 w-4" />
+                      {t("elizaclouddashboard.OpenBrowserBilling")}
+                    </Button>
+                  ) : null}
+                </div>
+
+                <div className="mt-5 grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(260px,0.8fr)]">
+                  <div className="space-y-3">
+                    <div className="flex flex-wrap gap-2">
+                      {BILLING_PRESET_AMOUNTS.map((amount) => (
+                        <button
+                          key={amount}
+                          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))}
+                        >
+                          ${amount}
+                        </button>
+                      ))}
+                    </div>
+
+                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                      <div className="space-y-2">
+                        <label
+                          htmlFor="cloud-billing-amount"
+                          className="text-xs font-medium text-muted"
+                        >
+                          {t("elizaclouddashboard.CustomAmount")}
+                        </label>
+                        <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"
+                        />
+                      </div>
+                      <div className="rounded-2xl border border-border/40 bg-bg/20 px-4 py-3 text-sm text-muted">
+                        {t("elizaclouddashboard.MinimumTopUp", {
+                          amount: minimumTopUp.toFixed(2),
+                        })}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-3">
+                    <Button
+                      variant="default"
+                      className="h-12 rounded-2xl font-semibold"
+                      disabled={checkoutBusy || billingLoading}
+                      onClick={() => void handleStartCheckout()}
+                    >
+                      {checkoutBusy ? (
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      ) : (
+                        <CreditCard className="mr-2 h-4 w-4" />
+                      )}
+                      {t("elizaclouddashboard.PayWithCard")}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      className="h-12 rounded-2xl border-border/50"
+                      disabled={cryptoBusy || billingLoading}
+                      onClick={() => void handleCreateCryptoQuote()}
+                    >
+                      {cryptoBusy ? (
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      ) : (
+                        <Wallet className="mr-2 h-4 w-4" />
+                      )}
+                      {t("elizaclouddashboard.PayWithCrypto")}
+                    </Button>
+                    <div className="rounded-2xl border border-border/40 bg-bg/20 px-4 py-3 text-xs text-muted">
+                      {t("elizaclouddashboard.CheckoutProviderNote")}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </SectionCard>
+          </div>
+
+          <div className="space-y-8">
+            <SectionCard
+              title={t("elizaclouddashboard.CryptoTopUp")}
+              description={t("elizaclouddashboard.CryptoTopUpDesc")}
+              className="border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm"
+            >
+              <div className="mt-2 space-y-4">
+                <div className="rounded-2xl border border-border/40 bg-bg/25 px-4 py-3 text-sm text-muted">
+                  {hasAgentWallet
+                    ? hasWalletFunds
+                      ? t("elizaclouddashboard.AgentWalletFunded")
+                      : t("elizaclouddashboard.AgentWalletDetected")
+                    : t("elizaclouddashboard.NoAgentWalletDetected")}
+                </div>
+
+                {cryptoQuote ? (
+                  <div className="rounded-2xl border border-border/40 bg-bg/25 p-4">
+                    <div className="space-y-2 text-sm">
+                      <div className="font-semibold text-txt-strong">
+                        {readString(cryptoQuote.provider) ??
+                          t("elizaclouddashboard.CryptoQuoteReady")}
+                      </div>
+                      <div className="text-muted">
+                        {readString(cryptoQuote.currency) ?? "USDC"}{" "}
+                        {readString(cryptoQuote.amount) ?? "0"} on{" "}
+                        {readString(cryptoQuote.network) ?? "selected network"}
+                      </div>
+                      {readString(cryptoQuote.payToAddress) && (
+                        <code className="block rounded-xl border border-border/40 bg-bg/30 px-3 py-2 text-xs text-txt-strong break-all">
+                          {readString(cryptoQuote.payToAddress)}
+                        </code>
+                      )}
+                      {readString(cryptoQuote.expiresAt) && (
+                        <div className="text-xs text-muted">
+                          Expires{" "}
+                          {new Date(
+                            readString(cryptoQuote.expiresAt) ?? "",
+                          ).toLocaleString()}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="mt-4 flex flex-col gap-3">
+                      {readString(cryptoQuote.paymentLinkUrl) ? (
+                        <Button
+                          variant="outline"
+                          className="rounded-2xl"
+                          onClick={() =>
+                            void openExternalUrl(
+                              readString(cryptoQuote.paymentLinkUrl) ?? "",
+                            )
+                          }
+                        >
+                          <ExternalLink className="mr-2 h-4 w-4" />
+                          {t("elizaclouddashboard.OpenHostedCryptoCheckout")}
+                        </Button>
+                      ) : null}
+
+                      <Button
+                        variant="default"
+                        className="rounded-2xl"
+                        disabled={
+                          cryptoPayBusy ||
+                          !hasAgentWallet ||
+                          !hasWalletFunds ||
+                          readString(cryptoQuote.network)?.toLowerCase() !==
+                            "bsc" ||
+                          !readString(cryptoQuote.payToAddress) ||
+                          !readString(cryptoQuote.amount)
+                        }
+                        onClick={() => void handlePayCryptoFromAgentWallet()}
+                      >
+                        {cryptoPayBusy ? (
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        ) : (
+                          <Wallet className="mr-2 h-4 w-4" />
+                        )}
+                        {t("elizaclouddashboard.PayFromAgentWallet")}
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="rounded-2xl border border-dashed border-border/50 bg-bg/20 px-4 py-5 text-sm text-muted">
+                    {t("elizaclouddashboard.CryptoQuoteHint")}
+                  </div>
+                )}
+
+                {cryptoPayResult && (
+                  <div className="rounded-2xl border border-ok/30 bg-ok/10 px-4 py-3 text-sm text-ok">
+                    {cryptoPayResult}
+                  </div>
+                )}
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title={t("elizaclouddashboard.AccountDetails")}
+              className="border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm"
+            >
+              <div className="space-y-4 mt-2">
+                <div className="p-3 rounded-2xl bg-bg/30 border border-border/30">
+                  <span className="text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block">
+                    {t("elizaclouddashboard.CloudUserID")}
+                  </span>
+                  <code className="text-xs text-txt-strong break-all font-mono">
+                    {elizaCloudUserId || t("elizaclouddashboard.NotAvailable")}
+                  </code>
+                </div>
+
+                <div className="flex items-center justify-between p-3">
+                  <div className="flex items-center gap-2">
+                    <Shield className="w-4 h-4 text-ok" />
+                    <span className="text-xs font-medium">
+                      {t("elizaclouddashboard.SecurityStatus")}
+                    </span>
+                  </div>
+                  <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">
+                    {t("elizaclouddashboard.Secure")}
+                  </span>
+                </div>
+
+                <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)
+                  }
+                >
+                  {t("elizaclouddashboard.AdvancedDashboard")}
+                  <ExternalLink className="w-3 h-3 ml-2" />
+                </Button>
+              </div>
+            </SectionCard>
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-8">
+            <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"
+            >
+              {agentsError && (
+                <div className="mt-4 flex items-center gap-2 text-sm text-danger bg-danger/10 rounded-xl p-3 border border-danger/20">
+                  <AlertCircle className="w-4 h-4 shrink-0" />
+                  {agentsError}
+                </div>
+              )}
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+                {agentsLoading && cloudAgents.length === 0 ? (
+                  <div className="col-span-full flex items-center justify-center py-12">
+                    <Loader2 className="w-6 h-6 text-txt animate-spin" />
+                  </div>
+                ) : (
+                  <>
+                    {cloudAgents.map((agent) => (
+                      <CloudAgentCard
+                        key={agent.agent_id}
+                        agent={agent}
+                        onDelete={handleDeleteAgent}
+                        deleting={deletingAgentId === agent.agent_id}
+                        launching={launchingAgentId === agent.agent_id}
+                        onLaunch={handleLaunchAgent}
+                        onSelect={(id) => setSelectedAgentId(id)}
+                      />
+                    ))}
+                    {showDeployForm ? (
+                      <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">
+                        <div className="w-full space-y-3">
+                          <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"
+                          />
+                          <div className="flex gap-2">
+                            <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}
+                            >
+                              {t("onboarding.cancel")}
+                            </Button>
+                            <Button
+                              variant="default"
+                              size="sm"
+                              className="flex-1 rounded-xl h-8 text-xs font-bold"
+                              onClick={handleDeployAgent}
+                              disabled={deploying || !deployAgentName.trim()}
+                            >
+                              {deploying ? (
+                                <Loader2 className="w-3 h-3 animate-spin mx-auto" />
+                              ) : (
+                                t("elizaclouddashboard.Deploy")
+                              )}
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <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)}
+                      >
+                        <div className="w-12 h-12 rounded-full bg-bg-accent flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                          <Plus className="w-6 h-6 text-muted group-hover:text-txt" />
+                        </div>
+                        <h3 className="font-bold text-txt-strong mb-1">
+                          {t("elizaclouddashboard.DeployNewAgent")}
+                        </h3>
+                        <p className="text-xs text-muted">
+                          {t("elizaclouddashboard.InitializeInstance")}
+                        </p>
+                      </button>
+                    )}
+                  </>
+                )}
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              title={t("elizaclouddashboard.UsageMetrics")}
+              description={t("elizaclouddashboard.UsageMetricsDesc")}
+              className="border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm"
+            >
+              <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">
+                {t("elizaclouddashboard.MetricsPlaceholder")}
+              </div>
+            </SectionCard>
+          </div>
+
+          <div className="space-y-8">
+            {selectedAgentId && selectedAgent ? (
+              <AgentDetailSidebar
+                agent={selectedAgent}
+                onClose={() => setSelectedAgentId(null)}
+              />
+            ) : (
+              <SectionCard
+                title={t("elizaclouddashboard.AccountDetails")}
+                className="border-border/50 bg-bg/40 backdrop-blur-xl rounded-3xl shadow-sm"
+              >
+                <div className="space-y-4 mt-2">
+                  <div className="p-3 rounded-2xl bg-bg/30 border border-border/30">
+                    <span className="text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block">
+                      {t("elizaclouddashboard.CloudUserID")}
+                    </span>
+                    <code className="text-xs text-txt-strong break-all font-mono">
+                      {elizaCloudUserId ||
+                        t("elizaclouddashboard.NotAvailable")}
+                    </code>
+                  </div>
+
+                  <div className="rounded-2xl border border-accent/20 bg-accent/8 p-4">
+                    <div className="text-[11px] uppercase tracking-[0.18em] text-muted">
+                      {t("elizaclouddashboard.AvailableBalance")}
+                    </div>
+                    <div
+                      className={`mt-2 text-3xl font-bold ${creditStatusColor}`}
+                    >
+                      ${cloudBalance.toFixed(2)}
+                    </div>
+                    <div className="mt-2 text-xs text-muted">
+                      {creditStatusTone}
+                    </div>
+                  </div>
+
+                  <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")}
+                  >
+                    <CircleDollarSign className="mr-2 h-4 w-4" />
+                    {t("elizaclouddashboard.CloudBilling")}
+                  </Button>
+                </div>
+              </SectionCard>
+            )}
+          </div>
+        </div>
+      )}
+
+      <Dialog
+        open={checkoutDialogOpen}
+        onOpenChange={(open) => {
+          setCheckoutDialogOpen(open);
+          if (!open) {
+            void fetchBillingData();
+          }
+        }}
+      >
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle>{t("elizaclouddashboard.PayWithCard")}</DialogTitle>
+          </DialogHeader>
+          {checkoutSession?.clientSecret && checkoutSession.publishableKey ? (
+            <StripeEmbeddedCheckout
+              publishableKey={checkoutSession.publishableKey}
+              clientSecret={checkoutSession.clientSecret}
+            />
+          ) : (
+            <div className="rounded-2xl border border-border/40 bg-bg/25 px-4 py-5 text-sm text-muted">
+              {t("elizaclouddashboard.CheckoutProviderNote")}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+interface StatusDetail {
+  status?: string;
+  databaseStatus?: string;
+  lastHeartbeat?: string | number | Date | null;
+}
+
+function AgentDetailSidebar({
+  agent,
+  onClose,
+}: {
+  agent: CloudCompatAgent | undefined;
+  onClose: () => void;
+}) {
+  const [logs, setLogs] = useState<string>("");
+  const [statusDetail, setStatusDetail] = useState<StatusDetail | null>(null);
+  const logsEndRef = useRef<HTMLDivElement>(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 (
+    <div className="space-y-4 animate-in slide-in-from-right-8 duration-300">
+      <SectionCard
+        title="Agent Details"
+        className="border-accent/40 bg-accent/5 backdrop-blur-xl rounded-3xl shadow-sm relative overflow-hidden"
+      >
+        <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}
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="mt-4 space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="p-3 rounded-xl bg-bg/40 border border-border/40">
+              <span className="text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block">
+                Status
+              </span>
+              <AgentStatusBadge status={statusDetail?.status || agent.status} />
+            </div>
+            <div className="p-3 rounded-xl bg-bg/40 border border-border/40">
+              <span className="text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block">
+                DB Status
+              </span>
+              <span className="text-xs font-mono">
+                {statusDetail?.databaseStatus || agent.database_status || "—"}
+              </span>
+            </div>
+            <div className="p-3 rounded-xl bg-bg/40 border border-border/40 col-span-2">
+              <span className="text-[10px] text-muted uppercase font-bold tracking-wider mb-1 block">
+                Heartbeat
+              </span>
+              <span className="text-xs font-mono">
+                {statusDetail?.lastHeartbeat
+                  ? new Date(statusDetail.lastHeartbeat).toLocaleString()
+                  : agent.last_heartbeat_at
+                    ? new Date(agent.last_heartbeat_at).toLocaleString()
+                    : "No heartbeat yet"}
+              </span>
+            </div>
+          </div>
+
+          <div className="p-3 rounded-xl bg-bg/80 border border-border/40">
+            <span className="text-[10px] text-muted uppercase font-bold tracking-wider mb-2 flex items-center gap-2">
+              <Terminal className="w-3 h-3" /> Live Logs
+            </span>
+            <div className="h-64 overflow-y-auto custom-scrollbar bg-black/50 rounded-lg p-3 border border-border/20">
+              <pre className="text-[10px] font-mono text-txt-strong/80 whitespace-pre-wrap break-all">
+                {logs || "No logs available. Deploying..."}
+                <div ref={logsEndRef} />
+              </pre>
+            </div>
+          </div>
+        </div>
+      </SectionCard>
+    </div>
+  );
+}