@elizaos/ui 2.0.0-alpha.20 → 2.0.0-alpha.202

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

@@ -0,0 +1,385 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ElizaCloudDashboard — settings "Cloud" section.
+ *
+ * Two views:
+ *   - "overview" (default): account id, balance, status, Top-up button
+ *   - "billing":            top-up payment form + auto top-up + portal link
+ *
+ * The settings cloud tab is deliberately NOT an agent manager — agent
+ * lifecycle lives elsewhere (plugins view, dedicated cloud app).
+ */
+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_INSTANCES_URL, 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("elizaclouddashboard.ManagedGithubConnectFailed", {
+                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} `;
+    /* ── Disconnected: single-button connect view ────────────────────────── */
+    if (!elizaCloudConnected) {
+        return (_jsxs("div", { className: "mx-auto flex max-w-sm flex-col items-center px-4 py-10 text-center", children: [_jsx("div", { className: "mb-5 flex h-12 w-12 items-center justify-center rounded-2xl border border-accent/20 bg-accent/10", children: _jsx(Zap, { className: "h-6 w-6 text-txt" }) }), _jsx("p", { className: "mb-6 text-sm leading-relaxed text-muted", children: t("elizaclouddashboard.ScaleYourAgents") }), _jsxs(Button, { variant: "default", size: "sm", className: "rounded-xl px-6 py-2.5 text-sm 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("onboarding.connecting")
+                            : t("elizaclouddashboard.ConnectElizaCloud")] }), _jsx(Button, { variant: "link", className: "mt-3 h-auto p-0 text-xs text-muted", onClick: () => void openExternalUrl(ELIZA_CLOUD_WEB_URL), children: t("elizaclouddashboard.LearnMore") })] }));
+    }
+    /* ── Overview (default view): account + balance + actions ────────────── */
+    const overviewContent = (_jsxs("div", { className: "px-5 py-6 sm:px-6", children: [_jsxs("div", { className: "mb-6 flex items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "mb-1 text-xs font-medium uppercase tracking-wider text-muted", children: t("elizaclouddashboard.Balance", { defaultValue: "Balance" }) }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsxs("span", { className: `text-3xl font-bold tracking-tight tabular-nums ${creditStatusColor}`, children: [currencyPrefix, formattedBalance ?? (_jsx("span", { className: "text-muted", children: billingLoading ? "…" : "—" }))] }), billingLoading && (_jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted" }))] })] }), _jsx("span", { className: `shrink-0 rounded-full border px-2.5 py-0.5 text-2xs font-semibold uppercase tracking-wider ${statusChipClass}`, children: creditStatusTone })] }), elizaCloudAuthRejected && (_jsx("div", { role: "alert", className: "mb-5 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: "mb-5 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger", children: billingError })), _jsxs("dl", { className: "mb-6 space-y-2 text-xs", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted", children: t("elizaclouddashboard.Account", { defaultValue: "Account" }) }), _jsx("dd", { className: "min-w-0", children: accountIdDisplay.mono ? (_jsx("code", { className: "truncate font-mono text-txt", children: accountIdDisplay.text })) : (_jsx("span", { className: "truncate text-txt", children: accountIdDisplay.text })) })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("dt", { className: "text-muted", children: t("elizaclouddashboard.AutoTopUp", {
+                                    defaultValue: "Auto top-up",
+                                }) }), _jsx("dd", { className: "text-txt", children: billingAutoTopUp.enabled
+                                    ? t("elizaclouddashboard.OnAmount", {
+                                        defaultValue: "On · ${{amount}} when below ${{threshold}}",
+                                        amount: Number(autoTopUpForm.amount).toFixed(0),
+                                        threshold: Number(autoTopUpForm.threshold).toFixed(0),
+                                    })
+                                    : t("elizaclouddashboard.Off", { defaultValue: "Off" }) })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: "default", size: "sm", className: "rounded-lg font-semibold", onClick: goBilling, children: [_jsx(CreditCard, { className: "mr-1.5 h-3.5 w-3.5" }), t("elizaclouddashboard.TopUpCredits", {
+                                defaultValue: "Top up credits",
+                            })] }), _jsxs(Button, { variant: "outline", size: "sm", className: "rounded-lg", onClick: handleRefresh, disabled: refreshing || billingLoading, children: [_jsx(RefreshCw, { className: `mr-1.5 h-3.5 w-3.5 ${refreshing ? "animate-spin" : ""}` }), t("common.refresh")] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-lg border-danger/30 text-danger hover:bg-danger/10", onClick: () => void handleCloudDisconnect(), disabled: cloudDisconnecting, children: cloudDisconnecting
+                            ? t("providerswitcher.disconnecting")
+                            : t("providerswitcher.disconnect") }), _jsx("div", { className: "ml-auto", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-auto p-0 text-xs text-muted hover:text-txt", onClick: () => void openExternalUrl(ELIZA_CLOUD_INSTANCES_URL), children: [t("elizaclouddashboard.AdvancedDashboard"), _jsx(ExternalLink, { className: "ml-1 h-3 w-3" })] }) })] })] }));
+    /* ── Billing (payment) flip view ─────────────────────────────────────── */
+    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("apikeyconfig.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,48 @@
+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>;
+}
+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, }: 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,EAKL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACtB,MAAM,mBAAmB,CAAC;AAI3B,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;CACvD;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,GAChB,EAAE,kBAAkB,2CAmTpB"}

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

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, FieldLabel, FieldSwitch, FormSelect, FormSelectItem, Input, PagePanel, StatusDot, Textarea, } from "@elizaos/ui";
+import { useEffect, useState } from "react";
+import { client } from "../../api";
+import { formatDateTime, formatDurationMs } from "../../utils/format";
+import { DURATION_UNITS, durationUnitLabel, formFromTrigger, localizedExecutionStatus, } from "./heartbeat-utils";
+export function HeartbeatForm({ form, editingId, editorEnabled, modalTitle, formError, triggersSaving, templateNotice, triggers, triggerRunsById, t, selectedTriggerId, setField, setForm, setFormError, closeEditor, onSubmit, onDelete, onRunSelectedTrigger, onToggleTriggerEnabled, saveFormAsTemplate, loadTriggerRuns, }) {
+    return (_jsxs("div", { className: "w-full px-4 pb-8 pt-0 sm:px-5 sm:pb-8 sm:pt-1 lg:px-7 lg:pb-8 lg:pt-1 xl:px-8", children: [templateNotice && (_jsx(PagePanel.Notice, { tone: "accent", className: "mb-4 animate-[fadeIn_0.2s_ease] text-xs font-medium", children: templateNotice })), _jsxs("div", { className: "mb-3 flex flex-col justify-between gap-2 lg:flex-row lg:items-start", children: [_jsxs("div", { className: "max-w-3xl space-y-1", children: [_jsx(FieldLabel, { variant: "kicker", children: editingId
+                                    ? t("heartbeatsview.editHeartbeat")
+                                    : t("heartbeatsview.createHeartbeat") }), _jsx("h2", { className: "text-2xl font-semibold text-txt", children: modalTitle })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2 lg:justify-end", children: editingId && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs", disabled: triggersSaving, onClick: () => void onRunSelectedTrigger(editingId), children: t("triggersview.RunNow") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs", onClick: () => void onToggleTriggerEnabled(editingId, editorEnabled), children: editorEnabled
+                                        ? t("heartbeatsview.disable")
+                                        : t("heartbeatsview.enable") }), _jsx("div", { className: "w-px h-6 bg-border/50 mx-1 hidden sm:block" }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs text-danger hover:border-danger hover:bg-danger/10 hover:text-danger", onClick: () => void onDelete(), children: t("triggersview.Delete") })] })) })] }), _jsxs("div", { className: "space-y-6", children: [formError && (_jsx(PagePanel.Notice, { tone: "danger", className: "text-sm", children: formError })), _jsxs(PagePanel, { variant: "padded", className: "grid gap-5", "data-testid": "heartbeats-editor-panel", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("wallet.name") }), _jsx(Input, { variant: "form", value: form.displayName, onChange: (event) => setField("displayName", event.target.value), placeholder: t("triggersview.eGDailyDigestH") })] }), _jsx(TriggerKindSection, { form: form, setField: setField, t: t, onGoToWorkflows: () => {
+                                    // Switch the Automations view to the Workflows filter tab.
+                                    // AutomationsLayout listens for this event via a useEffect to call setFilter("workflows").
+                                    window.dispatchEvent(new CustomEvent("milady:automations:setFilter", {
+                                        detail: { filter: "workflows" },
+                                    }));
+                                } }), _jsxs("div", { className: "grid grid-cols-1 gap-5 lg:grid-cols-2", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("triggersview.ScheduleType") }), _jsxs(FormSelect, { value: form.triggerType, onValueChange: (value) => setField("triggerType", value), placeholder: t("triggersview.RepeatingInterval"), children: [_jsx(FormSelectItem, { value: "interval", children: t("triggersview.RepeatingInterval") }), _jsx(FormSelectItem, { value: "once", children: t("triggersview.OneTime") }), _jsx(FormSelectItem, { value: "cron", children: t("triggersview.CronSchedule") })] })] }), _jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("triggersview.WakeMode") }), _jsxs(FormSelect, { value: form.wakeMode, onValueChange: (value) => setField("wakeMode", value), placeholder: t("triggersview.InjectAmpWakeIm"), children: [_jsx(FormSelectItem, { value: "inject_now", children: t("triggersview.InjectAmpWakeIm") }), _jsx(FormSelectItem, { value: "next_autonomy_cycle", children: t("triggersview.QueueForNextCycle") })] })] })] }), form.triggerType === "interval" && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatsview.interval") }), _jsxs("div", { className: "grid grid-cols-[140px_minmax(0,1fr)] gap-3", children: [_jsx(Input, { type: "number", min: "1", variant: "form", value: form.durationValue, onChange: (event) => setField("durationValue", event.target.value), placeholder: "1" }), _jsx(FormSelect, { value: form.durationUnit, onValueChange: (value) => setField("durationUnit", value), placeholder: durationUnitLabel(form.durationUnit, t), children: DURATION_UNITS.map((unit) => (_jsx(FormSelectItem, { value: unit.unit, children: durationUnitLabel(unit.unit, t) }, unit.unit))) })] })] })), form.triggerType === "once" && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("triggersview.ScheduledTimeISO") }), _jsx(Input, { type: "datetime-local", variant: "form", value: form.scheduledAtIso, onChange: (event) => setField("scheduledAtIso", event.target.value) })] })), form.triggerType === "cron" && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("triggersview.CronExpression5F") }), _jsx(Input, { variant: "form", className: "font-mono", value: form.cronExpression, onChange: (event) => setField("cronExpression", event.target.value), placeholder: "*/15 * * * *" }), _jsx("div", { className: "mt-2 text-xs-tight text-muted", children: t("triggersview.minuteHourDayMont") })] })), _jsxs("div", { className: "grid grid-cols-1 gap-5 lg:grid-cols-2", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("triggersview.MaxRunsOptional") }), _jsx(Input, { variant: "form", value: form.maxRuns, onChange: (event) => setField("maxRuns", event.target.value), placeholder: "\\u221E" })] }), _jsx("div", { className: "flex items-end", children: _jsx(FieldSwitch, { checked: form.enabled, "aria-label": t("triggersview.StartEnabled"), className: "flex-1", label: t("triggersview.StartEnabled"), onCheckedChange: (checked) => setField("enabled", checked) }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [form.displayName.trim() && (_jsx("button", { type: "button", className: "text-xs font-medium text-muted transition-colors hover:text-accent underline-offset-2 hover:underline", onClick: saveFormAsTemplate, children: t("heartbeatsview.SaveAsTemplate", {
+                                    defaultValue: "Save as template",
+                                }) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-10 px-6 text-sm text-white shadow-sm hover:text-white dark:text-white dark:hover:text-white", disabled: triggersSaving ||
+                                            (form.kind === "workflow" && !form.workflowId), onClick: () => void onSubmit(), children: triggersSaving
+                                            ? t("apikeyconfig.saving")
+                                            : editingId
+                                                ? t("heartbeatsview.saveChanges")
+                                                : t("heartbeatsview.createHeartbeat") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-10 px-6 text-sm", onClick: () => {
+                                            if (editingId && selectedTriggerId === editingId) {
+                                                const trigger = triggers.find((trigger) => trigger.id === editingId);
+                                                if (trigger) {
+                                                    setForm(formFromTrigger(trigger));
+                                                    setFormError(null);
+                                                }
+                                            }
+                                            else {
+                                                closeEditor();
+                                            }
+                                        }, children: t("common.cancel") })] })] }), editingId && (_jsx(HeartbeatRunHistory, { editingId: editingId, triggers: triggers, triggerRunsById: triggerRunsById, loadTriggerRuns: loadTriggerRuns, t: t }))] })] }));
+}
+// ── Trigger kind section (what to run) ────────────────────────────
+function TriggerKindSection({ form, setField, t, onGoToWorkflows, }) {
+    const [workflows, setWorkflows] = useState([]);
+    const [workflowsError, setWorkflowsError] = useState(null);
+    const [workflowsLoading, setWorkflowsLoading] = useState(false);
+    useEffect(() => {
+        if (form.kind !== "workflow")
+            return;
+        let cancelled = false;
+        setWorkflowsLoading(true);
+        setWorkflowsError(null);
+        client
+            .listN8nWorkflows()
+            .then((list) => {
+            if (cancelled)
+                return;
+            setWorkflows([...list].sort((a, b) => a.name.localeCompare(b.name)));
+            setWorkflowsError(null);
+        })
+            .catch(() => {
+            if (cancelled)
+                return;
+            setWorkflowsError("unavailable");
+        })
+            .finally(() => {
+            if (!cancelled)
+                setWorkflowsLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [form.kind]);
+    const toggleLabelId = "trigger-kind-toggle-label";
+    return (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", id: toggleLabelId, children: t("triggers.whatToRun") }), _jsxs("div", { role: "radiogroup", "aria-labelledby": toggleLabelId, className: "mt-1.5 flex gap-2", children: [_jsx("button", { type: "button", role: "radio", "aria-checked": form.kind === "text", onClick: () => setField("kind", "text"), className: `rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors ${form.kind === "text"
+                            ? "border-accent bg-accent/10 text-accent"
+                            : "border-border/40 text-muted hover:border-border hover:text-txt"}`, children: t("triggers.kindText") }), _jsx("button", { type: "button", role: "radio", "aria-checked": form.kind === "workflow", onClick: () => setField("kind", "workflow"), className: `rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors ${form.kind === "workflow"
+                            ? "border-accent bg-accent/10 text-accent"
+                            : "border-border/40 text-muted hover:border-border hover:text-txt"}`, children: t("triggers.kindWorkflow") })] }), form.kind === "text" && (_jsxs("div", { className: "mt-4", children: [_jsx(FieldLabel, { variant: "form", children: t("triggersview.Instructions") }), _jsx(Textarea, { variant: "form", value: form.instructions, onChange: (event) => setField("instructions", event.target.value), placeholder: t("triggersview.WhatShouldTheAgen") })] })), form.kind === "workflow" && (_jsx("div", { className: "mt-4", children: workflowsError === "unavailable" ||
+                    (!workflowsLoading && workflows.length === 0) ? (_jsxs("div", { role: "status", className: "rounded-lg border border-border/30 bg-bg/30 px-4 py-3 text-sm text-muted", children: [_jsx("p", { children: t("triggers.workflowUnavailable") }), _jsx("button", { type: "button", className: "mt-2 text-xs font-medium text-accent underline-offset-2 hover:underline", onClick: onGoToWorkflows, children: t("triggers.goToWorkflows") })] })) : (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { variant: "form", htmlFor: "trigger-workflow-select", children: t("triggers.workflowLabel") }), _jsx(FormSelect, { value: form.workflowId, onValueChange: (value) => {
+                                const wf = workflows.find((w) => w.id === value);
+                                setField("workflowId", value);
+                                setField("workflowName", wf?.name ?? "");
+                            }, placeholder: workflowsLoading
+                                ? t("databaseview.Loading")
+                                : t("triggers.workflowPlaceholder"), children: workflows.map((wf) => (_jsx(FormSelectItem, { value: wf.id, children: wf.name }, wf.id))) })] })) }))] }));
+}
+// ── Run history sub-section (shown when editing) ───────────────────
+function HeartbeatRunHistory({ editingId, triggers, triggerRunsById, loadTriggerRuns, t, }) {
+    return (_jsxs("div", { className: "mt-10 grid gap-8 pt-8", children: [_jsxs("dl", { className: "grid gap-4 text-sm sm:grid-cols-2 lg:grid-cols-3", children: [_jsxs(PagePanel.SummaryCard, { className: "px-4 py-4", children: [_jsx("dt", { className: "text-xs-tight font-semibold uppercase tracking-[0.14em] text-muted", children: t("heartbeatsview.maxRuns") }), _jsx("dd", { className: "mt-1.5 text-txt font-medium", children: (() => {
+                                    const trigger = triggers.find((trigger) => trigger.id === editingId);
+                                    return trigger?.maxRuns
+                                        ? trigger.maxRuns
+                                        : t("heartbeatsview.unlimited");
+                                })() })] }), _jsxs(PagePanel.SummaryCard, { className: "px-4 py-4", children: [_jsx("dt", { className: "text-xs-tight font-semibold uppercase tracking-[0.14em] text-muted", children: t("triggersview.LastRun") }), _jsx("dd", { className: "mt-1.5 text-txt font-medium", children: (() => {
+                                    const trigger = triggers.find((trigger) => trigger.id === editingId);
+                                    return formatDateTime(trigger?.lastRunAtIso, {
+                                        fallback: t("heartbeatsview.notYetRun"),
+                                    });
+                                })() })] }), _jsxs(PagePanel.SummaryCard, { className: "px-4 py-4", children: [_jsx("dt", { className: "text-xs-tight font-semibold uppercase tracking-[0.14em] text-muted", children: t("heartbeatsview.nextRun") }), _jsx("dd", { className: "mt-1.5 text-txt font-medium", children: (() => {
+                                    const trigger = triggers.find((trigger) => trigger.id === editingId);
+                                    return formatDateTime(trigger?.nextRunAtMs, {
+                                        fallback: t("heartbeatsview.notScheduled"),
+                                    });
+                                })() })] })] }), _jsxs(PagePanel, { variant: "padded", className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 pb-3", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: t("triggersview.RunHistory") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 px-3 text-xs-tight", onClick: () => void loadTriggerRuns(editingId), children: t("common.refresh") })] }), (() => {
+                        const hasLoadedRuns = Object.hasOwn(triggerRunsById, editingId);
+                        const runs = triggerRunsById[editingId] ?? [];
+                        if (!hasLoadedRuns) {
+                            return (_jsxs("div", { className: "py-6 text-sm text-muted/70 flex items-center gap-2", children: [_jsx("div", { className: "w-4 h-4 border-2 border-muted/30 border-t-muted/80 rounded-full animate-spin" }), " ", t("databaseview.Loading")] }));
+                        }
+                        if (runs.length === 0) {
+                            return (_jsx("div", { className: "py-6 text-sm text-muted/70 italic", children: t("triggersview.NoRunsRecordedYet") }));
+                        }
+                        return (_jsx("div", { className: "space-y-3", children: runs
+                                .slice()
+                                .reverse()
+                                .map((run) => (_jsx("div", { className: "rounded-xl bg-bg/30 border border-border/20 px-4 py-3 text-sm transition-colors hover:bg-bg/50", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(StatusDot, { status: run.status, className: "mt-1 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-1", children: [_jsx("span", { className: "font-medium text-txt", children: localizedExecutionStatus(run.status, t) }), _jsx("span", { className: "text-xs text-muted", children: formatDateTime(run.finishedAt, {
+                                                                fallback: t("heartbeatsview.emDash"),
+                                                            }) })] }), _jsxs("div", { className: "text-xs-tight text-muted/80", children: [formatDurationMs(run.latencyMs), " \u00B7", " ", _jsx("span", { className: "font-mono text-muted/60 bg-bg/40 px-1 py-0.5 rounded", children: run.source })] }), run.error && (_jsx("div", { className: "mt-2.5 text-xs text-danger/90 bg-danger/10 border border-danger/20 p-2.5 rounded-lg whitespace-pre-wrap font-mono leading-relaxed", children: run.error }))] })] }) }, run.triggerRunId))) }));
+                    })()] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeartbeatsView.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/pages/HeartbeatsView.tsx"],"names":[],"mappings":"AAy4BA,wBAAgB,sBAAsB,4CAMrC;AAED,wBAAgB,cAAc,4CAM7B"}