@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.3

package/cloud/applications/components/app-monetization-settings.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Application detail — Monetization tab. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-monetization-settings.tsx`.
+ * GET/PUT `/api/v1/apps/:id/monetization` go through the typed `api` client.
+ * Reuses the shared `EarningsSimulator` + `RevenueFlowDiagram` from cloud-ui.
+ */
+import { ChevronRight, Coins, DollarSign, Info, Loader2, Save, Server, } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { EarningsSimulator, RevenueFlowDiagram, } from "../../../cloud-ui/components/monetization/index.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "../../../components/ui/alert-dialog.js";
+import { Button } from "../../../components/ui/button.js";
+import { Slider } from "../../../components/ui/slider.js";
+import { Switch } from "../../../components/ui/switch.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../../../components/ui/tooltip.js";
+import { cn } from "../../../lib/utils.js";
+import { api } from "../../lib/api-client.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+export function AppMonetizationSettings({ appId, }) {
+    const t = useCloudT();
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [settings, setSettings] = useState({
+        monetizationEnabled: false,
+        inferenceMarkupPercentage: 0,
+        purchaseSharePercentage: 10,
+        platformOffsetAmount: 1,
+        totalCreatorEarnings: 0,
+    });
+    const [hasChanges, setHasChanges] = useState(false);
+    const [showEnableDialog, setShowEnableDialog] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        setIsLoading(true);
+        void api(`/api/v1/apps/${appId}/monetization`)
+            .then((data) => {
+            if (cancelled)
+                return;
+            if (data.success && data.monetization) {
+                setSettings(data.monetization);
+            }
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            toast.error(error instanceof Error
+                ? error.message
+                : t("cloud.monetization.loadFailed", {
+                    defaultValue: "Failed to load settings",
+                }));
+        })
+            .finally(() => {
+            if (!cancelled)
+                setIsLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [appId, t]);
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            await api(`/api/v1/apps/${appId}/monetization`, {
+                method: "PUT",
+                json: {
+                    monetizationEnabled: settings.monetizationEnabled,
+                    inferenceMarkupPercentage: settings.inferenceMarkupPercentage,
+                    purchaseSharePercentage: settings.purchaseSharePercentage,
+                },
+            });
+            toast.success(t("cloud.monetization.saved", { defaultValue: "Settings saved" }));
+            setHasChanges(false);
+        }
+        catch (error) {
+            toast.error(error instanceof Error
+                ? error.message
+                : t("cloud.monetization.saveFailed", {
+                    defaultValue: "Failed to save settings",
+                }));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const updateSetting = (key, value) => {
+        setSettings((prev) => ({ ...prev, [key]: value }));
+        setHasChanges(true);
+    };
+    const toggleMonetization = async (enabled) => {
+        setSettings((prev) => ({ ...prev, monetizationEnabled: enabled }));
+        try {
+            await api(`/api/v1/apps/${appId}/monetization`, {
+                method: "PUT",
+                json: {
+                    monetizationEnabled: enabled,
+                    inferenceMarkupPercentage: settings.inferenceMarkupPercentage,
+                    purchaseSharePercentage: settings.purchaseSharePercentage,
+                },
+            });
+            toast.success(enabled
+                ? t("cloud.monetization.enabled", {
+                    defaultValue: "Monetization enabled",
+                })
+                : t("cloud.monetization.disabled", {
+                    defaultValue: "Monetization disabled",
+                }));
+        }
+        catch (error) {
+            // Revert on failure
+            setSettings((prev) => ({ ...prev, monetizationEnabled: !enabled }));
+            toast.error(error instanceof Error
+                ? error.message
+                : t("cloud.monetization.updateFailed", {
+                    defaultValue: "Failed to update monetization",
+                }));
+        }
+    };
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-[var(--brand-orange)]" }) }));
+    }
+    return (_jsx(TooltipProvider, { children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: cn("rounded-sm p-4 border transition-colors", settings.monetizationEnabled
+                        ? "bg-green-500/5 border-green-500/20"
+                        : "bg-neutral-900 border-white/10"), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: cn("p-2 rounded-sm mt-0.5", settings.monetizationEnabled ? "bg-green-500/10" : "bg-white/5"), children: _jsx(DollarSign, { className: cn("h-5 w-5", settings.monetizationEnabled
+                                        ? "text-green-400"
+                                        : "text-white/40") }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-sm font-medium text-white", children: settings.monetizationEnabled
+                                                    ? t("cloud.monetization.active", {
+                                                        defaultValue: "Monetization Active",
+                                                    })
+                                                    : t("cloud.monetization.enableTitle", {
+                                                        defaultValue: "Enable Monetization",
+                                                    }) }), _jsx(Switch, { checked: settings.monetizationEnabled, onCheckedChange: (checked) => {
+                                                    if (checked && !settings.monetizationEnabled) {
+                                                        setShowEnableDialog(true);
+                                                    }
+                                                    else {
+                                                        toggleMonetization(checked);
+                                                    }
+                                                }, className: "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-neutral-700" })] }), _jsx("p", { className: "text-xs text-neutral-500 mt-1", children: settings.monetizationEnabled
+                                            ? t("cloud.monetization.activeDesc", {
+                                                defaultValue: "Earning from inference markups and credit purchases. Users pay app-specific credits.",
+                                            })
+                                            : t("cloud.monetization.enableDesc", {
+                                                defaultValue: "Start earning from your app. You'll earn from inference markups and credit purchases.",
+                                            }) }), settings.totalCreatorEarnings > 0 && (_jsxs("button", { type: "button", onClick: () => navigate(`/dashboard/apps/${appId}?tab=earnings`), className: "mt-2 text-xs text-white/60 hover:text-white transition-colors flex items-center gap-1", children: [t("cloud.monetization.earned", {
+                                                amount: settings.totalCreatorEarnings.toFixed(2),
+                                                defaultValue: "$" + "{{amount}}" + " earned",
+                                            }), _jsx(ChevronRight, { className: "h-3 w-3" })] }))] })] }) }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs("div", { className: "bg-neutral-900 rounded-sm p-4 space-y-4", children: [_jsx("h3", { className: "text-sm font-medium text-white", children: t("cloud.monetization.revenueSettings", {
+                                        defaultValue: "Revenue Settings",
+                                    }) }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-white", children: t("cloud.monetization.inferenceMarkup", {
+                                                                defaultValue: "Inference Markup",
+                                                            }) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Info, { className: "h-3.5 w-3.5 text-neutral-500" }) }), _jsx(TooltipContent, { side: "right", className: "max-w-[200px] bg-neutral-800 border-white/10 text-white", children: t("cloud.monetization.inferenceMarkupTooltip", {
+                                                                        defaultValue: "Markup on LLM costs. Higher = more per request.",
+                                                                    }) })] })] }), _jsxs("span", { className: "text-lg font-mono font-semibold text-purple-400", children: [settings.inferenceMarkupPercentage, "%"] })] }), _jsx(Slider, { value: [settings.inferenceMarkupPercentage], onValueChange: ([value]) => updateSetting("inferenceMarkupPercentage", value), min: 0, max: 500, step: 5, className: "w-full" }), _jsx("div", { className: "flex gap-1.5 flex-wrap", children: [0, 25, 50, 100, 200].map((preset) => (_jsxs("button", { type: "button", className: cn("px-2.5 py-1 text-xs rounded-sm transition-colors", settings.inferenceMarkupPercentage === preset
+                                                    ? "bg-purple-500/20 text-purple-400 border border-purple-500/30"
+                                                    : "bg-white/5 text-neutral-400 hover:bg-white/10 border border-transparent"), onClick: () => updateSetting("inferenceMarkupPercentage", preset), children: [preset, "%"] }, preset))) })] }), _jsx("div", { className: "h-px bg-white/10" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-white", children: t("cloud.monetization.purchaseShare", {
+                                                                defaultValue: "Purchase Share",
+                                                            }) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Info, { className: "h-3.5 w-3.5 text-neutral-500" }) }), _jsx(TooltipContent, { side: "right", className: "max-w-[200px] bg-neutral-800 border-white/10 text-white", children: t("cloud.monetization.purchaseShareTooltip", {
+                                                                        defaultValue: "Your cut of credit purchases after platform fee.",
+                                                                    }) })] })] }), _jsxs("span", { className: "text-lg font-mono font-semibold text-orange-400", children: [settings.purchaseSharePercentage, "%"] })] }), _jsx(Slider, { value: [settings.purchaseSharePercentage], onValueChange: ([value]) => updateSetting("purchaseSharePercentage", value), min: 0, max: 50, step: 5, className: "w-full" }), _jsx("div", { className: "flex gap-1.5 flex-wrap", children: [0, 10, 20, 30, 50].map((preset) => (_jsxs("button", { type: "button", className: cn("px-2.5 py-1 text-xs rounded-sm transition-colors", settings.purchaseSharePercentage === preset
+                                                    ? "bg-orange-500/20 text-white border border-orange-500/30"
+                                                    : "bg-white/5 text-neutral-400 hover:bg-white/10 border border-transparent"), onClick: () => updateSetting("purchaseSharePercentage", preset), children: [preset, "%"] }, preset))) })] }), _jsx("div", { className: "pt-2", children: _jsxs(Button, { onClick: handleSave, disabled: !hasChanges || isSaving, className: "w-full bg-[var(--brand-orange)] hover:bg-[#e54f00] text-white disabled:bg-white/5 disabled:text-white/30", children: [isSaving ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin mr-2" })) : (_jsx(Save, { className: "h-4 w-4 mr-2" })), t("cloud.monetization.saveChanges", {
+                                                defaultValue: "Save Changes",
+                                            })] }) })] }), _jsx(RevenueFlowDiagram, { markupPercentage: settings.inferenceMarkupPercentage, purchaseSharePercentage: settings.purchaseSharePercentage })] }), _jsx(EarningsSimulator, { markupPercentage: settings.inferenceMarkupPercentage, purchaseSharePercentage: settings.purchaseSharePercentage }), settings.monetizationEnabled && _jsx(SelfHostCTA, {}), _jsx(AlertDialog, { open: showEnableDialog, onOpenChange: setShowEnableDialog, children: _jsxs(AlertDialogContent, { className: "bg-neutral-900 border-white/10", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { className: "text-white text-center sm:text-left", children: t("cloud.monetization.enableDialogTitle", {
+                                            defaultValue: "Enable Monetization?",
+                                        }) }), _jsx(AlertDialogDescription, { className: "text-neutral-400 space-y-3 text-left", children: t("cloud.monetization.enableDialogIntro", {
+                                            defaultValue: "When monetization is enabled, users of your app will:",
+                                        }) })] }), _jsxs("div", { className: "text-neutral-400 space-y-3 text-left text-sm", children: [_jsxs("ul", { className: "list-disc list-inside space-y-1", children: [_jsx("li", { children: t("cloud.monetization.enableDialogPoint1", {
+                                                    defaultValue: "Pay app-specific credits (separate balance)",
+                                                }) }), _jsx("li", { children: t("cloud.monetization.enableDialogPoint2", {
+                                                    defaultValue: "See inference costs with your markup applied",
+                                                }) }), _jsx("li", { children: t("cloud.monetization.enableDialogPoint3", {
+                                                    defaultValue: "Purchase credits that contribute to your earnings",
+                                                }) })] }), _jsx("p", { className: "pt-2 text-[var(--brand-orange)]", children: t("cloud.monetization.enableDialogNote", {
+                                            defaultValue: "You can adjust markup and purchase share after enabling.",
+                                        }) })] }), _jsxs(AlertDialogFooter, { className: "gap-2 sm:gap-2", children: [_jsx(AlertDialogCancel, { className: "border-0 bg-transparent text-neutral-400 hover:text-white hover:bg-transparent", children: t("cloud.monetization.cancel", { defaultValue: "Cancel" }) }), _jsx(AlertDialogAction, { onClick: () => {
+                                            toggleMonetization(true);
+                                            setShowEnableDialog(false);
+                                        }, className: "bg-[var(--brand-orange)] hover:bg-[#e54f00] text-white px-6", children: t("cloud.monetization.startEarning", {
+                                            defaultValue: "Start Earning",
+                                        }) })] })] }) })] }) }));
+}
+/**
+ * Self-hosting CTA shown only when monetization is on. Tells the loop story:
+ * deploy the app as its own container — earnings pay the daily hosting bill
+ * automatically. Cashout still works any time via the Earnings page.
+ */
+function SelfHostCTA() {
+    const t = useCloudT();
+    return (_jsx("div", { className: "border border-[var(--brand-orange)]/30 bg-[var(--brand-orange)]/10 p-5", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "hidden sm:flex items-center justify-center w-10 h-10 rounded-sm border border-[var(--brand-orange)]/40 bg-[var(--brand-orange)]/10 shrink-0", children: _jsx(Server, { className: "h-5 w-5 text-[var(--brand-orange)]" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "text-base font-mono text-white mb-1", children: t("cloud.monetization.selfHostTitle", {
+                                defaultValue: "Let this app host itself.",
+                            }) }), _jsx("p", { className: "text-sm text-white/60 mb-3", children: t("cloud.monetization.selfHostDesc", {
+                                defaultValue: "Deploy as a container — daily hosting bills are paid from your app earnings first, then your credits. No setup, no settings. Cashout still works whenever you want.",
+                            }) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Link, { to: "/dashboard/agents", className: "inline-flex items-center gap-2 px-4 py-2 bg-[var(--brand-orange)] hover:bg-[#e54f00] text-white text-sm font-mono transition-colors", children: [_jsx(Server, { className: "h-4 w-4" }), t("cloud.monetization.deployAgent", {
+                                            defaultValue: "Deploy an Agent",
+                                        })] }), _jsxs(Link, { to: "/dashboard/earnings", className: "inline-flex items-center gap-2 px-4 py-2 text-white/80 hover:bg-foreground hover:text-background text-sm font-mono transition-colors", children: [_jsx(Coins, { className: "h-4 w-4" }), t("cloud.monetization.viewEarnings", {
+                                            defaultValue: "View Earnings",
+                                        })] })] })] })] }) }));
+}

package/cloud/applications/components/app-overview.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Application detail — Overview tab. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-overview.tsx`.
+ * Bare same-origin `fetch` is routed through the typed `api`/`regenerateAppApiKey`
+ * helpers so the Steward Bearer token is attached on every target.
+ */
+import type { App } from "../lib/apps.js";
+interface AppOverviewProps {
+    app: App;
+    showApiKey?: string;
+}
+export declare function AppOverview({ app, showApiKey }: AppOverviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=app-overview.d.ts.map

package/cloud/applications/components/app-overview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-overview.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/applications/components/app-overview.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAwCH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAOvC,UAAU,gBAAgB;IACxB,GAAG,EAAE,GAAG,CAAC;IACT,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AASD,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,gBAAgB,2CA8kBhE"}

package/cloud/applications/components/app-overview.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Application detail — Overview tab. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-overview.tsx`.
+ * Bare same-origin `fetch` is routed through the typed `api`/`regenerateAppApiKey`
+ * helpers so the Steward Bearer token is attached on every target.
+ */
+import { useQueryClient } from "@tanstack/react-query";
+import { Activity, Check, ChevronRight, Coins, Copy, ExternalLink, Eye, EyeOff, Globe, Key, Loader2, Mail, RefreshCw, Rocket, Shield, TrendingUp, } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { DashboardStatCard } from "../../../cloud-ui/components/brand/index.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../../components/ui/alert-dialog.js";
+import { Badge } from "../../../components/ui/badge.js";
+import { cn } from "../../../lib/utils.js";
+import { api } from "../../lib/api-client.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+import { deployApp, getLatestAppDeployment, regenerateAppApiKey, } from "../lib/apps.js";
+const DEPLOY_STATUS_POLL_INTERVAL_MS = 3_000;
+const DEPLOY_STATUS_POLL_TIMEOUT_MS = 10 * 60 * 1_000;
+function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+export function AppOverview({ app, showApiKey }) {
+    const t = useCloudT();
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const [copiedItem, setCopiedItem] = useState(null);
+    const [displayApiKey, setDisplayApiKey] = useState(showApiKey || "");
+    const [showKey, setShowKey] = useState(!!showApiKey);
+    const [isRegenerating, setIsRegenerating] = useState(false);
+    const [isDeploying, setIsDeploying] = useState(false);
+    const [isPollingDeployment, setIsPollingDeployment] = useState(false);
+    const [monetizationEnabled, setMonetizationEnabled] = useState(null);
+    const [totalEarnings, setTotalEarnings] = useState(null);
+    const hideApiKeyTimerRef = useRef(null);
+    const deploymentPollInFlightRef = useRef(false);
+    const mountedRef = useRef(true);
+    const copyToClipboard = (text, label) => {
+        navigator.clipboard.writeText(text);
+        setCopiedItem(label);
+        toast.success(t("cloud.apps.overview.copiedLabel", {
+            defaultValue: "{{label}} copied to clipboard",
+            label,
+        }));
+        setTimeout(() => setCopiedItem(null), 2000);
+    };
+    const revealApiKey = useCallback((apiKey) => {
+        if (hideApiKeyTimerRef.current) {
+            clearTimeout(hideApiKeyTimerRef.current);
+        }
+        setDisplayApiKey(apiKey);
+        setShowKey(true);
+        hideApiKeyTimerRef.current = setTimeout(() => {
+            setDisplayApiKey("");
+            setShowKey(false);
+            hideApiKeyTimerRef.current = null;
+        }, 60000);
+    }, []);
+    useEffect(() => {
+        if (showApiKey)
+            revealApiKey(showApiKey);
+    }, [showApiKey, revealApiKey]);
+    useEffect(() => {
+        return () => {
+            mountedRef.current = false;
+            if (hideApiKeyTimerRef.current)
+                clearTimeout(hideApiKeyTimerRef.current);
+        };
+    }, []);
+    const refreshAppRecord = useCallback(() => queryClient.invalidateQueries({ queryKey: ["app", app.id] }), [app.id, queryClient]);
+    const pollLatestDeployment = useCallback(async (showTerminalToast) => {
+        if (deploymentPollInFlightRef.current)
+            return;
+        deploymentPollInFlightRef.current = true;
+        setIsPollingDeployment(true);
+        const deadline = Date.now() + DEPLOY_STATUS_POLL_TIMEOUT_MS;
+        try {
+            while (Date.now() < deadline && mountedRef.current) {
+                const record = await getLatestAppDeployment(app.id);
+                await refreshAppRecord();
+                if (record.status === "READY") {
+                    if (showTerminalToast && mountedRef.current) {
+                        toast.success(t("cloud.apps.overview.deployReady", {
+                            defaultValue: "Deployment is live",
+                        }));
+                    }
+                    return;
+                }
+                if (record.status === "ERROR") {
+                    toast.error(record.error ||
+                        t("cloud.apps.overview.deployFailed", {
+                            defaultValue: "Deployment failed",
+                        }));
+                    return;
+                }
+                if (record.status === "DRAFT")
+                    return;
+                await wait(DEPLOY_STATUS_POLL_INTERVAL_MS);
+            }
+            if (showTerminalToast && mountedRef.current) {
+                toast.error(t("cloud.apps.overview.deployPollTimeout", {
+                    defaultValue: "Deployment is still running. Refresh the app to check status.",
+                }));
+            }
+        }
+        catch (error) {
+            if (mountedRef.current) {
+                toast.error(error instanceof Error
+                    ? error.message
+                    : t("cloud.apps.overview.deployStatusFailed", {
+                        defaultValue: "Failed to check deployment status",
+                    }));
+            }
+        }
+        finally {
+            deploymentPollInFlightRef.current = false;
+            if (mountedRef.current)
+                setIsPollingDeployment(false);
+        }
+    }, [app.id, refreshAppRecord, t]);
+    useEffect(() => {
+        if (app.deployment_status === "building" ||
+            app.deployment_status === "deploying") {
+            void pollLatestDeployment(false);
+        }
+    }, [app.deployment_status, pollLatestDeployment]);
+    useEffect(() => {
+        let cancelled = false;
+        void api(`/api/v1/apps/${app.id}/monetization`)
+            .then((data) => {
+            if (cancelled)
+                return;
+            if (data.success && data.monetization) {
+                setMonetizationEnabled(data.monetization.monetizationEnabled);
+                setTotalEarnings(data.monetization.totalCreatorEarnings);
+            }
+        })
+            .catch(() => {
+            // Monetization summary is non-critical; leave the card hidden.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [app.id]);
+    async function handleRegenerateApiKey() {
+        setIsRegenerating(true);
+        try {
+            const apiKey = await regenerateAppApiKey(app.id);
+            revealApiKey(apiKey);
+            toast.success(t("cloud.apps.overview.regenSuccess", {
+                defaultValue: "API key regenerated",
+            }));
+        }
+        catch (error) {
+            toast.error(error instanceof Error
+                ? error.message
+                : t("cloud.apps.overview.regenFailedShort", {
+                    defaultValue: "Failed to regenerate",
+                }));
+        }
+        finally {
+            setIsRegenerating(false);
+        }
+    }
+    async function handleDeploy() {
+        setIsDeploying(true);
+        try {
+            await deployApp(app.id);
+            // Refresh the app record so the Deployment status flips to "building"
+            // without a manual reload (the key is a prefix of the auth-scoped key).
+            await refreshAppRecord();
+            toast.success(t("cloud.apps.overview.deployStarted", {
+                defaultValue: "Deployment started",
+            }));
+            void pollLatestDeployment(true);
+        }
+        catch (error) {
+            // Includes the gated `apps_deploy_disabled` case (deploy flag off) — show
+            // the server's reason rather than pretending it worked.
+            toast.error(error instanceof Error
+                ? error.message
+                : t("cloud.apps.overview.deployFailed", {
+                    defaultValue: "Failed to start deployment",
+                }));
+        }
+        finally {
+            setIsDeploying(false);
+        }
+    }
+    const deploymentInProgress = app.deployment_status === "building" ||
+        app.deployment_status === "deploying";
+    const deploymentButtonDisabled = isDeploying || isPollingDeployment || deploymentInProgress;
+    const allowedOrigins = Array.isArray(app.allowed_origins)
+        ? app.allowed_origins.filter((origin) => typeof origin === "string")
+        : [];
+    const maskedApiKey = `eliza_${"•".repeat(32)}`;
+    return (_jsxs("div", { className: "space-y-4", children: [showKey && displayApiKey && (_jsx("div", { className: "p-4 rounded-sm bg-[#FF5800]/10 border border-[#FF5800]/20", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Key, { className: "h-5 w-5 text-[#FF5800] mt-0.5 shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-white mb-2", children: t("cloud.apps.overview.apiKeyOnce", {
+                                        defaultValue: "Your API Key (shown once)",
+                                    }) }), _jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("code", { className: "flex-1 bg-black/30 px-3 py-2 rounded-sm text-xs text-white/80 font-mono overflow-x-auto", children: displayApiKey }), _jsx("button", { type: "button", onClick: () => copyToClipboard(displayApiKey, "API Key"), className: "p-2 bg-white/10 hover:bg-white/20 rounded-sm transition-colors shrink-0", children: copiedItem === "API Key" ? (_jsx(Check, { className: "h-4 w-4 text-green-400" })) : (_jsx(Copy, { className: "h-4 w-4 text-white/60" })) })] }), _jsx("p", { className: "text-xs text-white/74", children: t("cloud.apps.overview.saveKeyHint", {
+                                        defaultValue: "Save this key securely. You won't see it again. This message disappears in 60 seconds.",
+                                    }) })] })] }) })), _jsxs("div", { className: "grid gap-3 grid-cols-2 lg:grid-cols-4", children: [_jsx(DashboardStatCard, { label: t("cloud.apps.overview.stat.status", {
+                            defaultValue: "Status",
+                        }), value: app.is_active
+                            ? t("cloud.apps.overview.statusActive", {
+                                defaultValue: "Active",
+                            })
+                            : t("cloud.apps.overview.statusInactive", {
+                                defaultValue: "Inactive",
+                            }), icon: _jsx(Activity, { className: "h-5 w-5" }), accent: app.is_active ? "emerald" : "red" }), _jsx(DashboardStatCard, { label: t("cloud.apps.overview.stat.deployment", {
+                            defaultValue: "Deployment",
+                        }), value: (app.deployment_status || "draft").charAt(0).toUpperCase() +
+                            (app.deployment_status || "draft").slice(1), icon: _jsx(Rocket, { className: "h-5 w-5" }), accent: "white" }), _jsx(DashboardStatCard, { label: t("cloud.apps.overview.stat.totalUsers", {
+                            defaultValue: "Total Users",
+                        }), value: app.total_users?.toLocaleString("en-US") || "0", icon: _jsx(Shield, { className: "h-5 w-5" }), accent: "violet" }), _jsx(DashboardStatCard, { label: t("cloud.apps.overview.stat.totalRequests", {
+                            defaultValue: "Total Requests",
+                        }), value: app.total_requests?.toLocaleString("en-US") || "0", icon: _jsx(TrendingUp, { className: "h-5 w-5" }), accent: "orange" })] }), _jsxs("div", { className: "bg-neutral-900 rounded-sm p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "text-sm font-medium text-white flex items-center gap-2", children: [_jsx(Rocket, { className: "h-4 w-4 text-[#FF5800]" }), t("cloud.apps.overview.deployment", {
+                                        defaultValue: "Deployment",
+                                    })] }), _jsxs("button", { type: "button", disabled: deploymentButtonDisabled, onClick: handleDeploy, className: "text-xs text-neutral-400 hover:text-white flex items-center gap-1 transition-colors disabled:opacity-50", children: [isDeploying || isPollingDeployment || deploymentInProgress ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Rocket, { className: "h-3 w-3" })), deploymentInProgress || isPollingDeployment
+                                        ? t("cloud.apps.overview.deploying", {
+                                            defaultValue: "Deploying",
+                                        })
+                                        : app.deployment_status === "deployed"
+                                            ? t("cloud.apps.overview.redeploy", {
+                                                defaultValue: "Redeploy",
+                                            })
+                                            : t("cloud.apps.overview.deploy", { defaultValue: "Deploy" })] })] }), _jsx("p", { className: "text-xs text-neutral-500", children: deploymentInProgress || isPollingDeployment
+                            ? t("cloud.apps.overview.deployBuilding", {
+                                defaultValue: "A deployment is in progress…",
+                            })
+                            : app.deployment_status === "deployed"
+                                ? t("cloud.apps.overview.deployLive", {
+                                    defaultValue: "Your app is live. Redeploy to push the latest build.",
+                                })
+                                : t("cloud.apps.overview.deployDraft", {
+                                    defaultValue: "Deploy this app to a managed container.",
+                                }) })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "bg-neutral-900 rounded-sm p-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "text-sm font-medium text-white flex items-center gap-2", children: [_jsx(Key, { className: "h-4 w-4 text-[#FF5800]" }), t("cloud.apps.overview.apiKey", { defaultValue: "API Key" })] }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: isRegenerating, className: "text-xs text-neutral-400 hover:text-white flex items-center gap-1 transition-colors", children: [isRegenerating ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(RefreshCw, { className: "h-3 w-3" })), t("cloud.apps.overview.regenerate", {
+                                                            defaultValue: "Regenerate",
+                                                        })] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t("cloud.apps.overview.regenTitle", {
+                                                                    defaultValue: "Regenerate API Key?",
+                                                                }) }), _jsx(AlertDialogDescription, { children: t("cloud.apps.overview.regenBody", {
+                                                                    defaultValue: "This will immediately invalidate your current API key. Your app will stop working until you update it with the new key.",
+                                                                }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t("cloud.apps.deleteDialog.cancel", {
+                                                                    defaultValue: "Cancel",
+                                                                }) }), _jsx(AlertDialogAction, { onClick: handleRegenerateApiKey, className: "bg-[#FF5800] hover:bg-[#e54f00]", children: t("cloud.apps.overview.regenerate", {
+                                                                    defaultValue: "Regenerate",
+                                                                }) })] })] })] })] }), _jsx("div", { className: "bg-black/40 rounded-sm p-3 border border-white/10", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 text-xs text-white/70 font-mono overflow-x-auto", children: showKey && displayApiKey ? displayApiKey : maskedApiKey }), displayApiKey && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setShowKey(!showKey), className: "p-1.5 hover:bg-white/10 rounded-sm transition-colors", children: showKey ? (_jsx(EyeOff, { className: "h-3.5 w-3.5 text-white/50" })) : (_jsx(Eye, { className: "h-3.5 w-3.5 text-white/50" })) }), _jsx("button", { type: "button", onClick: () => copyToClipboard(displayApiKey, "API Key"), className: "p-1.5 hover:bg-white/10 rounded-sm transition-colors", children: copiedItem === "API Key" ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5 text-white/50" })) })] }))] }) }), _jsx("p", { className: "text-xs text-neutral-500", children: t("cloud.apps.overview.apiKeyHint", {
+                                    defaultValue: "Use this key to authenticate API requests from your app.",
+                                }) })] }), _jsxs("div", { className: "bg-neutral-900 rounded-sm p-4 space-y-4", children: [_jsxs("h3", { className: "text-sm font-medium text-white flex items-center gap-2", children: [_jsx(Globe, { className: "h-4 w-4 text-[#FF5800]" }), t("cloud.apps.overview.appInformation", {
+                                        defaultValue: "App Information",
+                                    })] }), _jsxs("div", { className: "space-y-3", children: [app.description && (_jsx(InfoRow, { label: t("cloud.apps.overview.description", {
+                                            defaultValue: "Description",
+                                        }), value: app.description })), app.production_url && app.deployment_status === "deployed" && (_jsx(InfoRow, { label: "Production URL", value: app.production_url, href: app.production_url })), app.website_url && (_jsx(InfoRow, { label: "Website", value: app.website_url, href: app.website_url })), app.contact_email && (_jsx(InfoRow, { label: "Contact", value: app.contact_email, href: `mailto:${app.contact_email}`, icon: _jsx(Mail, { className: "h-3 w-3" }) })), app.last_deployed_at && (_jsx(InfoRow, { label: "Last Deployed", value: new Date(app.last_deployed_at).toLocaleDateString("en-US", {
+                                            year: "numeric",
+                                            month: "short",
+                                            day: "numeric",
+                                            hour: "2-digit",
+                                            minute: "2-digit",
+                                        }) }))] })] })] }), monetizationEnabled !== null && (_jsx("div", { className: "bg-neutral-900 rounded-sm p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 rounded-sm bg-orange-500/10", children: _jsx(Coins, { className: "h-5 w-5 text-orange-400" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-white", children: "Monetization" }), _jsx("p", { className: "text-xs text-neutral-500", children: monetizationEnabled
+                                                ? totalEarnings && totalEarnings > 0
+                                                    ? `$${totalEarnings.toFixed(2)} earned`
+                                                    : "Enabled, no earnings yet"
+                                                : "Enable to earn from app usage" })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, { className: cn(monetizationEnabled
+                                        ? "bg-green-500/20 text-green-400 border-green-500/30"
+                                        : "bg-white/10 text-white/50 border-white/20"), children: monetizationEnabled ? "Enabled" : "Disabled" }), _jsx("button", { type: "button", onClick: () => navigate(`/dashboard/apps/${app.id}?tab=monetization`), className: "p-2 hover:bg-white/10 rounded-sm transition-colors", children: _jsx(ChevronRight, { className: "h-4 w-4 text-neutral-400" }) })] })] }) })), _jsxs("div", { className: "bg-neutral-900 rounded-sm p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "text-sm font-medium text-white flex items-center gap-2", children: [_jsx(Shield, { className: "h-4 w-4 text-white/70" }), "Allowed Origins"] }), _jsx("button", { type: "button", onClick: () => navigate(`/dashboard/apps/${app.id}?tab=settings`), className: "text-xs text-neutral-400 hover:text-white transition-colors", children: "Edit" })] }), _jsx("p", { className: "text-xs text-neutral-500", children: "API requests are only accepted from these domains" }), _jsx("div", { className: "flex flex-wrap gap-2", children: allowedOrigins.length > 0 ? (allowedOrigins.map((origin) => (_jsx(Badge, { className: "bg-white/5 text-white/70 border-white/10", children: origin }, origin)))) : (_jsx("p", { className: "text-xs text-neutral-500", children: "No origins configured" })) })] })] }));
+}
+function InfoRow({ label, value, href, icon, }) {
+    return (_jsxs("div", { children: [_jsx("p", { className: "text-xs text-neutral-500", children: label }), href ? (_jsxs("a", { href: href, target: href.startsWith("mailto:") ? undefined : "_blank", rel: href.startsWith("mailto:") ? undefined : "noopener noreferrer", className: "text-sm text-white hover:opacity-75 transition-opacity flex items-center gap-1 mt-0.5", children: [icon, _jsx("span", { className: "truncate", children: value }), !href.startsWith("mailto:") && (_jsx(ExternalLink, { className: "h-3 w-3 shrink-0" }))] })) : (_jsx("p", { className: "text-sm text-white mt-0.5 line-clamp-2", children: value }))] }));
+}

package/cloud/applications/components/app-promote.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Application detail — Promote tab. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-promote.tsx`.
+ *
+ * Two larp blocks from the original are dropped (per the migration scope):
+ *   - the hard-coded "Quick Stats" tiles (Social Posts: 0 / SEO Score: -- /
+ *     Ad Campaigns: 0) which never reflected real data, and
+ *   - the static "Promotional Assets" placeholder grid (four dashed boxes with
+ *     no behaviour).
+ *
+ * The real surfaces are kept and wired to the typed `api` client: the
+ * promotion-suggestions GET, the connected-ad-accounts GET, the
+ * generate-assets POST (now re-fetching instead of `window.location.reload()`),
+ * and the shared `PromoteAppDialog` from cloud-ui.
+ */
+import type { App } from "../lib/apps.js";
+interface AppPromoteProps {
+    app: App;
+}
+export declare function AppPromote({ app }: AppPromoteProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=app-promote.d.ts.map

package/cloud/applications/components/app-promote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-promote.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/applications/components/app-promote.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAUH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEvC,UAAU,eAAe;IACvB,GAAG,EAAE,GAAG,CAAC;CACV;AAeD,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,EAAE,eAAe,2CAkPlD"}