@elizaos/agent 2.0.0-alpha.358 → 2.0.0-alpha.376

package/packages/app-core/src/components/pages/ElizaCloudDashboard.js

@@ -0,0 +1,380 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Switch, } from "@elizaos/ui";
+import { ArrowLeft, CreditCard, ExternalLink, Loader2, RefreshCw, 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 "../cloud/StripeEmbeddedCheckout";
+import { autoTopUpFormReducer, BILLING_PRESET_AMOUNTS, buildAutoTopUpFormState, consumeManagedDiscordCallbackUrl, consumeManagedGithubCallbackUrl, ELIZA_CLOUD_WEB_URL, getBillingAutoTopUp, getBillingLimits, isRecord, normalizeBillingSettings, normalizeBillingSummary, readBoolean, readNumber, readString, resolveCheckoutUrl, resolveCloudAccountIdDisplay, } from "./cloud-dashboard-utils";
+export function CloudDashboard() {
+    const { t, elizaCloudConnected, elizaCloudCredits, elizaCloudCreditsLow, elizaCloudCreditsCritical, elizaCloudAuthRejected, elizaCloudTopUpUrl, elizaCloudUserId, elizaCloudStatusReason, cloudDashboardView, elizaCloudLoginBusy, handleCloudLogin, handleCloudDisconnect, elizaCloudDisconnecting: cloudDisconnecting, setActionNotice, setState, } = 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 mountedRef = useRef(true);
+    const handledDiscordCallbackRef = useRef(false);
+    const handledGithubCallbackRef = useRef(false);
+    const autoTopUpEnabled = autoTopUpForm.enabled;
+    const autoTopUpAmount = autoTopUpForm.amount;
+    const autoTopUpThreshold = autoTopUpForm.threshold;
+    const view = cloudDashboardView;
+    const goOverview = useCallback(() => setState("cloudDashboardView", "overview"), [setState]);
+    const goBilling = useCallback(() => setState("cloudDashboardView", "billing"), [setState]);
+    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(t("elizaclouddashboard.BillingSummaryUnavailable", {
+                        defaultValue: "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
+                : t("elizaclouddashboard.FailedToLoadBillingData", {
+                    defaultValue: "Failed to load billing data.",
+                }));
+        }
+        finally {
+            if (mountedRef.current)
+                setBillingLoading(false);
+        }
+    }, [t]);
+    useEffect(() => {
+        dispatchAutoTopUpForm({
+            type: "hydrate",
+            next: buildAutoTopUpFormState(billingSummary, billingSettings),
+        });
+    }, [billingSettings, billingSummary]);
+    const handleRefresh = useCallback(async () => {
+        setRefreshing(true);
+        await fetchBillingData();
+        setTimeout(() => setRefreshing(false), 400);
+    }, [fetchBillingData]);
+    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(t("elizaclouddashboard.AutoTopUpAmountRange", {
+                defaultValue: "Auto top-up amount must be between $" +
+                    "{{min}}" +
+                    " and $" +
+                    "{{max}}.",
+                min: minAmount,
+                max: maxAmount,
+            }), "error", 3600);
+            return;
+        }
+        if (!Number.isFinite(threshold) ||
+            threshold < minThreshold ||
+            threshold > maxThreshold) {
+            setActionNotice(t("elizaclouddashboard.AutoTopUpThresholdRange", {
+                defaultValue: "Auto top-up threshold must be between $" +
+                    "{{min}}" +
+                    " and $" +
+                    "{{max}}.",
+                min: minThreshold,
+                max: maxThreshold,
+            }), "error", 3600);
+            return;
+        }
+        if (autoTopUpEnabled && !hasPaymentMethod) {
+            setActionNotice(t("elizaclouddashboard.SavePaymentMethodBeforeAutoTopUp", {
+                defaultValue: "Add a card first",
+            }), "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(t("elizaclouddashboard.BillingSettingsUpdated", {
+                defaultValue: "Billing settings updated.",
+            }), "success", 3200);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : t("elizaclouddashboard.FailedToUpdateBillingSettings", {
+                    defaultValue: "Failed to update billing settings.",
+                }), "error", 4200);
+        }
+        finally {
+            if (mountedRef.current)
+                setBillingSettingsBusy(false);
+        }
+    }, [
+        autoTopUpAmount,
+        autoTopUpEnabled,
+        autoTopUpThreshold,
+        billingSettings,
+        billingSummary,
+        fetchBillingData,
+        setActionNotice,
+        t,
+    ]);
+    const handleStartCheckout = useCallback(async () => {
+        const minimumTopUp = readNumber(billingSummary?.minimumTopUp) ?? 1;
+        const amountUsd = Number(billingAmount);
+        if (!Number.isFinite(amountUsd) || amountUsd < minimumTopUp) {
+            setActionNotice(t("elizaclouddashboard.EnterTopUpAmountMinimum", {
+                defaultValue: "Enter a top-up amount of at least $" + "{{amount}}.",
+                amount: 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(t("elizaclouddashboard.CheckoutSessionMissing", {
+                defaultValue: "Checkout unavailable. Try again or use the billing portal.",
+            }));
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error
+                ? err.message
+                : t("elizaclouddashboard.FailedToStartCheckout", {
+                    defaultValue: "Failed to start checkout.",
+                }), "error", 4200);
+        }
+        finally {
+            setCheckoutBusy(false);
+        }
+    }, [billingAmount, billingSummary, setActionNotice, t]);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (elizaCloudConnected) {
+            void fetchBillingData();
+        }
+    }, [elizaCloudConnected, fetchBillingData]);
+    // Drop cached billing on disconnect so we never show a stale balance.
+    useEffect(() => {
+        if (elizaCloudConnected)
+            return;
+        setBillingSummary(null);
+        setBillingSettings(null);
+        setBillingError(null);
+        setCheckoutSession(null);
+        setCheckoutDialogOpen(false);
+        dispatchAutoTopUpForm({
+            type: "hydrate",
+            next: buildAutoTopUpFormState(null, null),
+            force: true,
+        });
+    }, [elizaCloudConnected]);
+    // Managed Discord / GitHub OAuth callbacks: server-side already linked the
+    // connection — we just surface a toast and strip query params from the URL.
+    useEffect(() => {
+        if (handledDiscordCallbackRef.current || typeof window === "undefined") {
+            return;
+        }
+        const { callback, cleanedUrl } = consumeManagedDiscordCallbackUrl(window.location.href);
+        if (!callback)
+            return;
+        handledDiscordCallbackRef.current = true;
+        if (cleanedUrl && cleanedUrl !== window.location.href) {
+            window.history.replaceState({}, document.title, cleanedUrl);
+        }
+        if (callback.status === "connected") {
+            setActionNotice(callback.guildName
+                ? t("elizaclouddashboard.ManagedDiscordConnectedNotice", {
+                    defaultValue: callback.restarted
+                        ? "Managed Discord connected to {{guild}}. The agent restarted and is ready."
+                        : "Managed Discord connected to {{guild}}.",
+                    guild: callback.guildName,
+                })
+                : t("elizaclouddashboard.ManagedDiscordConnectedNoticeFallback", {
+                    defaultValue: callback.restarted
+                        ? "Managed Discord connected. The agent restarted and is ready."
+                        : "Managed Discord connected.",
+                }), "success", 5200);
+            return;
+        }
+        setActionNotice(callback.message ||
+            t("elizaclouddashboard.ManagedDiscordConnectFailed", {
+                defaultValue: "Managed Discord setup did not complete.",
+            }), "error", 5200);
+    }, [setActionNotice, t]);
+    useEffect(() => {
+        if (handledGithubCallbackRef.current || typeof window === "undefined") {
+            return;
+        }
+        const { callback, cleanedUrl } = consumeManagedGithubCallbackUrl(window.location.href);
+        if (!callback)
+            return;
+        handledGithubCallbackRef.current = true;
+        if (cleanedUrl && cleanedUrl !== window.location.href) {
+            window.history.replaceState({}, document.title, cleanedUrl);
+        }
+        if (callback.status === "connected") {
+            setActionNotice(t("elizaclouddashboard.ManagedGithubConnectedNotice", {
+                defaultValue: "GitHub account connected to this agent.",
+            }), "success", 5200);
+            return;
+        }
+        setActionNotice(callback.message ||
+            t("lifeopspage.githubSetupIncomplete", {
+                defaultValue: "GitHub setup did not complete.",
+            }), "error", 5200);
+    }, [setActionNotice, t]);
+    const summaryCritical = elizaCloudAuthRejected ||
+        (billingSummary?.critical ?? elizaCloudCreditsCritical ?? false);
+    const summaryLow = billingSummary?.low ?? elizaCloudCreditsLow ?? false;
+    const creditStatusColor = summaryCritical
+        ? "text-danger"
+        : summaryLow
+            ? "text-warn"
+            : "text-ok";
+    const cloudBalanceNumber = typeof elizaCloudCredits === "number"
+        ? elizaCloudCredits
+        : typeof billingSummary?.balance === "number"
+            ? billingSummary.balance
+            : null;
+    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 = elizaCloudAuthRejected
+        ? t("notice.elizaCloudAuthRejected")
+        : summaryCritical
+            ? t("elizaclouddashboard.CreditsCritical")
+            : summaryLow
+                ? t("elizaclouddashboard.CreditsLow")
+                : t("elizaclouddashboard.CreditsHealthy");
+    const statusChipClass = 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";
+    const accountIdDisplay = resolveCloudAccountIdDisplay(elizaCloudUserId, elizaCloudStatusReason, t);
+    const formattedBalance = cloudBalanceNumber !== null ? cloudBalanceNumber.toFixed(2) : null;
+    const currencyPrefix = cloudCurrency === "USD" ? "$" : `${cloudCurrency} `;
+    if (!elizaCloudConnected) {
+        return (_jsxs("div", { className: "mx-auto flex max-w-sm flex-wrap items-center justify-center gap-2 px-3 py-5 text-center", children: [_jsxs(Button, { variant: "default", size: "sm", className: "h-8 rounded-lg px-3 text-xs font-semibold", onClick: () => void handleCloudLogin(), disabled: elizaCloudLoginBusy, children: [elizaCloudLoginBusy ? (_jsx(RefreshCw, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Zap, { className: "mr-2 h-4 w-4" })), elizaCloudLoginBusy
+                            ? t("game.connecting")
+                            : t("elizaclouddashboard.ConnectElizaCloud")] }), _jsx(Button, { variant: "link", className: "h-8 px-2 text-xs text-muted", onClick: () => void openExternalUrl(ELIZA_CLOUD_WEB_URL), children: t("elizaclouddashboard.LearnMore") })] }));
+    }
+    const overviewContent = (_jsxs("div", { className: "px-3 py-2 sm:px-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(CreditCard, { className: "h-4 w-4 shrink-0 text-muted", "aria-hidden": true }), _jsxs("span", { className: `text-base font-semibold tracking-tight tabular-nums ${creditStatusColor}`, children: [currencyPrefix, formattedBalance ?? (_jsx("span", { className: "text-muted", children: billingLoading ? "…" : "—" }))] }), billingLoading && (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted" }))] }), _jsx("span", { className: `shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold uppercase leading-none tracking-wider ${statusChipClass}`, children: creditStatusTone }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [_jsxs(Button, { variant: "default", size: "sm", className: "h-8 rounded-lg px-2.5 text-xs font-semibold", onClick: goBilling, children: [_jsx(CreditCard, { className: "mr-1.5 h-3.5 w-3.5" }), t("elizaclouddashboard.TopUpCredits", {
+                                        defaultValue: "Top up credits",
+                                    })] }), _jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8 rounded-lg", onClick: handleRefresh, disabled: refreshing || billingLoading, "aria-label": t("common.refresh"), title: t("common.refresh"), children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${refreshing ? "animate-spin" : ""}` }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 rounded-lg border-danger/30 px-2.5 text-danger text-xs hover:bg-danger/10", onClick: () => void handleCloudDisconnect(), disabled: cloudDisconnecting, children: cloudDisconnecting
+                                    ? t("providerswitcher.disconnecting")
+                                    : t("common.disconnect") })] })] }), elizaCloudAuthRejected && (_jsx("div", { role: "alert", className: "mt-2 rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger", children: t("notice.elizaCloudAuthRejected") })), billingError && (_jsx("div", { role: "alert", className: "mt-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger", children: billingError })), _jsxs("div", { className: "mt-2 flex flex-wrap gap-1.5 text-xs", children: [_jsx("span", { className: "inline-flex max-w-full items-center rounded-md border border-border/50 bg-bg/55 px-2 py-1 text-muted", title: t("common.account", { defaultValue: "Account" }), children: accountIdDisplay.mono ? (_jsx("code", { className: "truncate font-mono text-txt", children: accountIdDisplay.text })) : (_jsx("span", { className: "truncate text-txt", children: accountIdDisplay.text })) }), _jsx("span", { className: "inline-flex items-center rounded-md border border-border/50 bg-bg/55 px-2 py-1 text-muted", title: t("elizaclouddashboard.AutoTopUp", {
+                            defaultValue: "Auto top-up",
+                        }), children: billingAutoTopUp.enabled
+                            ? t("elizaclouddashboard.OnAmount", {
+                                defaultValue: "Auto $" + "{{amount}}" + " below $" + "{{threshold}}",
+                                amount: Number(autoTopUpForm.amount).toFixed(0),
+                                threshold: Number(autoTopUpForm.threshold).toFixed(0),
+                            })
+                            : t("elizaclouddashboard.AutoTopUpOff", {
+                                defaultValue: "Auto top-up off",
+                            }) })] })] }));
+    const billingContent = (_jsxs("div", { className: "px-5 py-6 sm:px-6", children: [_jsxs("div", { className: "mb-5 flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-8 rounded-lg px-2 text-muted hover:text-txt", onClick: goOverview, "aria-label": t("common.back", { defaultValue: "Back" }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsx("h3", { className: "text-sm font-semibold text-txt-strong", children: t("elizaclouddashboard.TopUpCredits", {
+                            defaultValue: "Top up credits",
+                        }) }), _jsxs("span", { className: "ml-auto text-xs text-muted tabular-nums", children: [currencyPrefix, formattedBalance ?? (billingLoading ? "…" : "—")] })] }), billingError && (_jsx("div", { role: "alert", className: "mb-4 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger", children: billingError })), _jsxs("div", { className: "mb-6", children: [_jsx("div", { className: "mb-2 text-xs font-medium uppercase tracking-wider text-muted", children: t("elizaclouddashboard.PayWithCard") }), _jsx("div", { className: "mb-2 flex flex-wrap gap-1.5", children: BILLING_PRESET_AMOUNTS.map((amount) => {
+                            const active = billingAmount === String(amount);
+                            return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "h-8 rounded-lg px-3 text-xs font-medium", onClick: () => setBillingAmount(String(amount)), children: ["$", amount] }, amount));
+                        }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: "cloud-billing-amount", type: "number", min: String(minimumTopUp), step: "1", value: billingAmount, onChange: (e) => setBillingAmount(e.target.value), className: "h-9 flex-1 rounded-lg bg-bg text-sm", placeholder: t("elizaclouddashboard.MinAmountPlaceholder", {
+                                    defaultValue: "Min $" + "{{amount}}",
+                                    amount: minimumTopUp.toFixed(2),
+                                }) }), _jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-lg px-4 font-semibold", disabled: checkoutBusy || billingLoading, onClick: () => void handleStartCheckout(), children: checkoutBusy ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (t("elizaclouddashboard.Pay", { defaultValue: "Pay" })) })] })] }), _jsxs("div", { className: "mb-6 border-t border-border/40 pt-5", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-muted", children: t("elizaclouddashboard.AutoTopUp") }), _jsx("p", { className: "mt-0.5 text-xs-tight text-muted", children: autoTopUpHasPaymentMethod
+                                            ? t("elizaclouddashboard.AutoTopUpPaymentReady", {
+                                                defaultValue: "Card saved",
+                                            })
+                                            : t("elizaclouddashboard.AutoTopUpNeedsPaymentMethod", {
+                                                defaultValue: "Add a card first",
+                                            }) })] }), _jsx(Switch, { checked: autoTopUpEnabled, onCheckedChange: (v) => dispatchAutoTopUpForm({ type: "setEnabled", value: v }), "aria-label": t("elizaclouddashboard.ToggleAutoTopUp") })] }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-end", children: [_jsxs("div", { className: "flex-1 space-y-1", children: [_jsx("label", { htmlFor: "cloud-auto-topup-threshold", className: "text-xs-tight text-muted", children: t("elizaclouddashboard.RefillWhenBelow", {
+                                            defaultValue: "Refill when below",
+                                        }) }), _jsx(Input, { id: "cloud-auto-topup-threshold", type: "number", min: String(autoTopUpMinThreshold), max: String(autoTopUpMaxThreshold), step: "1", value: autoTopUpThreshold, onChange: (e) => dispatchAutoTopUpForm({
+                                            type: "setThreshold",
+                                            value: e.target.value,
+                                        }), className: "h-9 rounded-lg bg-bg" })] }), _jsxs("div", { className: "flex-1 space-y-1", children: [_jsx("label", { htmlFor: "cloud-auto-topup-amount", className: "text-xs-tight text-muted", children: t("elizaclouddashboard.TopUpAmount", {
+                                            defaultValue: "Top-up amount",
+                                        }) }), _jsx(Input, { id: "cloud-auto-topup-amount", type: "number", min: String(autoTopUpMinAmount), max: String(autoTopUpMaxAmount), step: "1", value: autoTopUpAmount, onChange: (e) => dispatchAutoTopUpForm({
+                                            type: "setAmount",
+                                            value: e.target.value,
+                                        }), className: "h-9 rounded-lg bg-bg" })] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 rounded-lg px-4 sm:self-end", disabled: billingSettingsBusy || billingLoading || !autoTopUpForm.dirty, onClick: () => void handleSaveBillingSettings(), children: [billingSettingsBusy && (_jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" })), t("common.save")] })] })] }), fallbackBillingUrl && (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-auto p-0 text-xs text-muted hover:text-txt", onClick: () => void openExternalUrl(fallbackBillingUrl), children: [t("elizaclouddashboard.OpenBrowserBilling"), _jsx(ExternalLink, { className: "ml-1 h-3 w-3" })] }))] }));
+    return (_jsxs(_Fragment, { children: [view === "billing" ? billingContent : overviewContent, _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") }))] }) })] }));
+}

package/packages/app-core/src/components/pages/HeartbeatForm.d.ts

@@ -0,0 +1,56 @@
+import type { TriggerSummary } from "../../api/client";
+import { type TranslateFn, type TriggerFormState } from "./heartbeat-utils";
+export interface HeartbeatFormProps {
+    /** Current form state. */
+    form: TriggerFormState;
+    /** ID of the trigger being edited, or null when creating. */
+    editingId: string | null;
+    /** Whether the trigger (or form default) is enabled. */
+    editorEnabled: boolean;
+    /** Computed modal/editor title. */
+    modalTitle: string;
+    /** Form validation error message, if any. */
+    formError: string | null;
+    /** True while a save/create request is in flight. */
+    triggersSaving: boolean;
+    /** Template notice banner text. */
+    templateNotice: string | null;
+    /** All triggers (used for looking up the editing trigger's metadata). */
+    triggers: TriggerSummary[];
+    /** Run history keyed by trigger ID. */
+    triggerRunsById: Record<string, import("../../api").TriggerRunRecord[]>;
+    /** Translation function. */
+    t: TranslateFn;
+    /** Currently selected trigger ID. */
+    selectedTriggerId: string | null;
+    /** Set a single form field value. */
+    setField: <K extends keyof TriggerFormState>(key: K, value: TriggerFormState[K]) => void;
+    /** Replace the entire form state. */
+    setForm: (form: TriggerFormState | ((prev: TriggerFormState) => TriggerFormState)) => void;
+    /** Set form error message. */
+    setFormError: (error: string | null) => void;
+    /** Close the editor panel. */
+    closeEditor: () => void;
+    /** Submit the form (create or update). */
+    onSubmit: () => Promise<void>;
+    /** Delete the trigger being edited. */
+    onDelete: () => Promise<void>;
+    /** Run a trigger immediately. */
+    onRunSelectedTrigger: (triggerId: string) => Promise<void>;
+    /** Toggle a trigger's enabled state. */
+    onToggleTriggerEnabled: (triggerId: string, currentlyEnabled: boolean) => Promise<void>;
+    /** Save the current form as a template. */
+    saveFormAsTemplate: () => void;
+    /** Load run history for a trigger. */
+    loadTriggerRuns: (triggerId: string) => Promise<void>;
+    /** Optional override for the create-mode kicker label. */
+    kickerLabelCreate?: string;
+    /** Optional override for the edit-mode kicker label. */
+    kickerLabelEdit?: string;
+    /** Optional override for the create submit label. */
+    submitLabelCreate?: string;
+    /** Optional override for the edit submit label. */
+    submitLabelEdit?: string;
+}
+export declare function HeartbeatForm({ form, editingId, editorEnabled, modalTitle, formError, triggersSaving, templateNotice, triggers, triggerRunsById, t, selectedTriggerId, setField, setForm, setFormError, closeEditor, onSubmit, onDelete, onRunSelectedTrigger, onToggleTriggerEnabled, saveFormAsTemplate, loadTriggerRuns, kickerLabelCreate, kickerLabelEdit, submitLabelCreate, submitLabelEdit, }: HeartbeatFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeartbeatForm.d.ts.map

package/packages/app-core/src/components/pages/HeartbeatForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeartbeatForm.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/pages/HeartbeatForm.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EASL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EAEtB,MAAM,mBAAmB,CAAC;AA2B3B,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,IAAI,EAAE,gBAAgB,CAAC;IACvB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,wDAAwD;IACxD,aAAa,EAAE,OAAO,CAAC;IACvB,mCAAmC;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,qDAAqD;IACrD,cAAc,EAAE,OAAO,CAAC;IACxB,mCAAmC;IACnC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,yEAAyE;IACzE,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,WAAW,EAAE,gBAAgB,EAAE,CAAC,CAAC;IACxE,4BAA4B;IAC5B,CAAC,EAAE,WAAW,CAAC;IACf,qCAAqC;IACrC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,qCAAqC;IACrC,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACzC,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KACvB,IAAI,CAAC;IACV,qCAAqC;IACrC,OAAO,EAAE,CACP,IAAI,EAAE,gBAAgB,GAAG,CAAC,CAAC,IAAI,EAAE,gBAAgB,KAAK,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV,8BAA8B;IAC9B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,8BAA8B;IAC9B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,iCAAiC;IACjC,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D,wCAAwC;IACxC,sBAAsB,EAAE,CACtB,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,OAAO,KACtB,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,2CAA2C;IAC3C,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,sCAAsC;IACtC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,aAAa,EACb,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,EACd,QAAQ,EACR,eAAe,EACf,CAAC,EACD,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,EAAE,kBAAkB,2CAgTpB"}