@elizaos/ui 2.0.0-beta.2 → 2.0.11-beta.7

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

@@ -0,0 +1,348 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Application detail — Domains tab (subdomain + custom domain + DNS verify).
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-domains.tsx`. The
+ * domain list/add/remove/status `fetch` calls are routed through the typed `api`
+ * client.
+ */
+import { AlertTriangle, Check, CheckCircle2, Clock, Copy, ExternalLink, Globe, Info, Loader2, Lock, Plus, RefreshCw, Trash2, Zap, } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../../components/ui/alert-dialog.js";
+import { Badge } from "../../../components/ui/badge.js";
+import { Button } from "../../../components/ui/button.js";
+import { Input } from "../../../components/ui/input.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../../../components/ui/tooltip.js";
+import { api } from "../../lib/api-client.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+export function AppDomains({ appId }) {
+    const t = useCloudT();
+    const [domains, setDomains] = useState([]);
+    const [sandboxUrl, setSandboxUrl] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isAdding, setIsAdding] = useState(false);
+    const [isRemoving, setIsRemoving] = useState(false);
+    const [isChecking, setIsChecking] = useState(false);
+    const [newDomain, setNewDomain] = useState("");
+    const [copiedValue, setCopiedValue] = useState(null);
+    const [domainStatus, setDomainStatus] = useState(null);
+    const [showAddForm, setShowAddForm] = useState(false);
+    const [lastChecked, setLastChecked] = useState(null);
+    const pollIntervalRef = useRef(null);
+    const inputRef = useRef(null);
+    const fetchDomains = useCallback(async () => {
+        try {
+            const data = await api(`/api/v1/apps/${appId}/domains`);
+            if (data.success && data.domains) {
+                setDomains(data.domains);
+                setSandboxUrl(data.sandboxUrl || null);
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [appId]);
+    const checkDomainStatus = useCallback(async (domain, silent = false) => {
+        if (!silent)
+            setIsChecking(true);
+        try {
+            const data = await api(`/api/v1/apps/${appId}/domains/status`, { method: "POST", json: { domain } });
+            if (data.success) {
+                setDomainStatus(data);
+                setLastChecked(new Date());
+                if (data.verified) {
+                    if (!silent) {
+                        toast.success(t("cloud.appDomains.domainVerified", {
+                            defaultValue: "Domain verified!",
+                        }), {
+                            description: t("cloud.appDomains.sslProvisioningNow", {
+                                defaultValue: "SSL certificate is now being provisioned",
+                            }),
+                            icon: _jsx(CheckCircle2, { className: "h-4 w-4 text-green-400" }),
+                        });
+                    }
+                    await fetchDomains();
+                }
+            }
+        }
+        finally {
+            if (!silent)
+                setIsChecking(false);
+        }
+    }, [appId, fetchDomains, t]);
+    useEffect(() => {
+        void fetchDomains();
+    }, [fetchDomains]);
+    useEffect(() => {
+        const primaryDomain = domains.find((d) => d.isPrimary);
+        if (primaryDomain?.customDomain && !primaryDomain.customDomainVerified) {
+            pollIntervalRef.current = setInterval(() => {
+                checkDomainStatus(primaryDomain.customDomain ?? "", true);
+            }, 15000);
+            return () => {
+                if (pollIntervalRef.current) {
+                    clearInterval(pollIntervalRef.current);
+                }
+            };
+        }
+    }, [domains, checkDomainStatus]);
+    useEffect(() => {
+        if (showAddForm && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [showAddForm]);
+    const copyToClipboard = async (text, label) => {
+        await navigator.clipboard.writeText(text);
+        setCopiedValue(text);
+        toast.success(t("cloud.appDomains.copiedToClipboard", {
+            label,
+            defaultValue: "{{label}} copied to clipboard",
+        }));
+        setTimeout(() => setCopiedValue(null), 2000);
+    };
+    const handleAddDomain = async () => {
+        const domain = newDomain.trim().toLowerCase();
+        if (!domain)
+            return;
+        const domainRegex = /^([a-z0-9]([a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}$/;
+        if (!domainRegex.test(domain)) {
+            toast.error(t("cloud.appDomains.invalidDomain", {
+                defaultValue: "Invalid domain",
+            }), {
+                description: t("cloud.appDomains.invalidDomainHint", {
+                    defaultValue: "Please enter a valid domain like example.com or app.example.com",
+                }),
+            });
+            return;
+        }
+        setIsAdding(true);
+        try {
+            const data = await api(`/api/v1/apps/${appId}/domains`, { method: "POST", json: { domain } });
+            if (data.success) {
+                toast.success(data.verified
+                    ? t("cloud.appDomains.domainVerified", {
+                        defaultValue: "Domain verified!",
+                    })
+                    : t("cloud.appDomains.domainAdded", {
+                        defaultValue: "Domain added successfully",
+                    }), {
+                    description: data.verified
+                        ? t("cloud.appDomains.sslProvisioningAuto", {
+                            defaultValue: "SSL certificate is being provisioned automatically",
+                        })
+                        : t("cloud.appDomains.configureDnsToComplete", {
+                            defaultValue: "Configure your DNS records to complete setup",
+                        }),
+                });
+                setDomainStatus({
+                    domain: data.domain ?? domain,
+                    status: data.verified ? "valid" : "pending",
+                    configured: Boolean(data.verified),
+                    verified: Boolean(data.verified),
+                    sslStatus: data.verified ? "active" : "pending",
+                    configuredBy: null,
+                    records: data.verificationRecords ?? [],
+                    isApexDomain: Boolean(data.isApexDomain),
+                    dnsInstructions: data.dnsInstructions ?? [],
+                });
+                setNewDomain("");
+                setShowAddForm(false);
+                await fetchDomains();
+            }
+            else {
+                toast.error(t("cloud.appDomains.failedToAdd", {
+                    defaultValue: "Failed to add domain",
+                }), { description: data.error });
+            }
+        }
+        catch (error) {
+            toast.error(t("cloud.appDomains.failedToAdd", {
+                defaultValue: "Failed to add domain",
+            }), {
+                description: error instanceof Error ? error.message : undefined,
+            });
+        }
+        finally {
+            setIsAdding(false);
+        }
+    };
+    const handleRemoveDomain = async (domain) => {
+        setIsRemoving(true);
+        try {
+            const data = await api(`/api/v1/apps/${appId}/domains`, { method: "DELETE", json: { domain } });
+            if (data.success) {
+                toast.success(t("cloud.appDomains.domainRemoved", {
+                    defaultValue: "Domain removed successfully",
+                }));
+                setDomainStatus(null);
+                await fetchDomains();
+            }
+            else {
+                toast.error(t("cloud.appDomains.failedToRemove", {
+                    defaultValue: "Failed to remove domain",
+                }), { description: data.error });
+            }
+        }
+        catch (error) {
+            toast.error(t("cloud.appDomains.failedToRemove", {
+                defaultValue: "Failed to remove domain",
+            }), {
+                description: error instanceof Error ? error.message : undefined,
+            });
+        }
+        finally {
+            setIsRemoving(false);
+        }
+    };
+    const primaryDomain = domains.find((d) => d.isPrimary);
+    const hasCustomDomain = !!primaryDomain?.customDomain;
+    const needsVerification = hasCustomDomain && !primaryDomain?.customDomainVerified;
+    return (_jsx(TooltipProvider, { children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "bg-neutral-900 rounded-sm p-4", children: [_jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4", children: [_jsxs("div", { 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.appDomains.title", { defaultValue: "Domains" })] }), _jsx("p", { className: "text-xs text-neutral-500 mt-1", children: t("cloud.appDomains.subtitle", {
+                                                defaultValue: "Connect custom domains to your app",
+                                            }) })] }), primaryDomain &&
+                                    !hasCustomDomain &&
+                                    !showAddForm &&
+                                    !isLoading && (_jsxs(Button, { onClick: () => setShowAddForm(true), size: "sm", className: "bg-[#FF5800] hover:bg-[#e54f00] text-white rounded-sm", children: [_jsx(Plus, { className: "h-4 w-4 mr-1.5" }), t("cloud.appDomains.addDomain", {
+                                            defaultValue: "Add Domain",
+                                        })] }))] }), isLoading ? (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-16 bg-black/30 rounded-sm animate-pulse" }), _jsx("div", { className: "h-16 bg-black/30 rounded-sm animate-pulse opacity-50" })] })) : !primaryDomain && sandboxUrl ? (_jsxs("div", { className: "space-y-3", children: [_jsx(DomainCard, { domain: new URL(sandboxUrl).hostname, url: sandboxUrl, type: "subdomain", status: "verified", copyToClipboard: copyToClipboard, copiedValue: copiedValue }), _jsx("div", { className: "p-3 rounded-sm bg-white/5 border border-white/10", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Info, { className: "h-4 w-4 text-white/70 shrink-0 mt-0.5" }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-white/90 font-medium", children: t("cloud.appDomains.developmentUrl", {
+                                                            defaultValue: "Development URL",
+                                                        }) }), _jsx("p", { className: "text-xs text-white/60 mt-0.5", children: t("cloud.appDomains.developmentUrlHint", {
+                                                            defaultValue: "Deploy your app to get a permanent subdomain and add custom domains.",
+                                                        }) })] })] }) })] })) : !primaryDomain ? (_jsxs("div", { className: "p-6 rounded-sm bg-orange-500/5 border border-orange-500/20 text-center", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center mx-auto mb-3", children: _jsx(AlertTriangle, { className: "h-6 w-6 text-orange-400" }) }), _jsx("h4", { className: "text-sm font-medium text-white mb-1", children: t("cloud.appDomains.noAppDeployed", {
+                                        defaultValue: "No App Deployed",
+                                    }) }), _jsx("p", { className: "text-xs text-neutral-500 max-w-sm mx-auto", children: t("cloud.appDomains.noAppDeployedHint", {
+                                        defaultValue: "Deploy your app first to get a subdomain. Once deployed, you can add custom domains here.",
+                                    }) })] })) : (_jsxs("div", { className: "space-y-3", children: [primaryDomain && (_jsx(DomainCard, { domain: primaryDomain.subdomain, url: primaryDomain.subdomainUrl, type: "subdomain", status: "verified", copyToClipboard: copyToClipboard, copiedValue: copiedValue })), hasCustomDomain && primaryDomain?.customDomain && (_jsx(DomainCard, { domain: primaryDomain.customDomain, url: primaryDomain.customDomainUrl, type: "custom", status: primaryDomain.customDomainVerified ? "verified" : "pending", sslStatus: primaryDomain.sslStatus, onRefresh: () => checkDomainStatus(primaryDomain.customDomain ?? ""), onRemove: () => handleRemoveDomain(primaryDomain.customDomain ?? ""), isChecking: isChecking, isRemoving: isRemoving, copyToClipboard: copyToClipboard, copiedValue: copiedValue })), _jsx(AnimatePresence, { mode: "wait", children: showAddForm && primaryDomain && !hasCustomDomain && (_jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2 }, children: _jsxs("div", { className: "p-6 rounded-sm border border-white/5 bg-black/20", children: [_jsx("h4", { className: "text-sm font-medium text-white mb-1", children: t("cloud.appDomains.addCustomDomain", {
+                                                        defaultValue: "Add Custom Domain",
+                                                    }) }), _jsx("p", { className: "text-xs text-neutral-500 mb-4", children: t("cloud.appDomains.enterDomainName", {
+                                                        defaultValue: "Enter your domain name below",
+                                                    }) }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [_jsx(Input, { ref: inputRef, placeholder: "yourdomain.com", value: newDomain, onChange: (e) => setNewDomain(e.target.value), onKeyDown: (e) => {
+                                                                if (e.key === "Enter" && newDomain.trim()) {
+                                                                    e.preventDefault();
+                                                                    handleAddDomain();
+                                                                }
+                                                                if (e.key === "Escape") {
+                                                                    setShowAddForm(false);
+                                                                    setNewDomain("");
+                                                                }
+                                                            }, className: "flex-1 bg-black/30 border-white/10 focus:border-[#FF5800]/50 rounded-sm placeholder:text-neutral-600" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: handleAddDomain, disabled: isAdding || !newDomain.trim(), className: `h-9 px-4 ${isAdding || !newDomain.trim()
+                                                                        ? "bg-neutral-700 text-neutral-400"
+                                                                        : "bg-[#FF5800] hover:bg-[#e54f00] text-white"}`, children: isAdding ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (t("cloud.appDomains.addDomain", {
+                                                                        defaultValue: "Add Domain",
+                                                                    })) }), _jsx(Button, { variant: "outline", onClick: () => {
+                                                                        setShowAddForm(false);
+                                                                        setNewDomain("");
+                                                                    }, className: "h-9 px-4 border-white/20 text-white hover:bg-white/10", children: t("cloud.appDomains.cancel", {
+                                                                        defaultValue: "Cancel",
+                                                                    }) })] })] })] }) })) }), primaryDomain && !hasCustomDomain && !showAddForm && (_jsxs("div", { className: "p-6 rounded-sm border border-white/5 bg-black/20 text-center", children: [_jsx("h4", { className: "text-sm font-medium text-white", children: t("cloud.appDomains.useYourOwnDomain", {
+                                                defaultValue: "Use Your Own Domain",
+                                            }) }), _jsx("p", { className: "text-xs text-neutral-500 max-w-xs mx-auto mt-2", children: t("cloud.appDomains.useYourOwnDomainHint", {
+                                                defaultValue: "Connect a custom domain to make your app accessible at your own branded URL",
+                                            }) })] }))] }))] }), _jsx(AnimatePresence, { children: needsVerification && (_jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, children: _jsx(DnsConfigPanel, { domain: primaryDomain?.customDomain || "", domainStatus: domainStatus, onRefresh: () => checkDomainStatus(primaryDomain?.customDomain || ""), isChecking: isChecking, lastChecked: lastChecked, copyToClipboard: copyToClipboard, copiedValue: copiedValue }) })) }), _jsxs("div", { className: "bg-neutral-900 rounded-sm p-4", children: [_jsx("h3", { className: "text-sm font-medium text-white mb-4", children: t("cloud.appDomains.quickDnsReference", {
+                                defaultValue: "Quick DNS Reference",
+                            }) }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-3", children: [_jsxs("div", { className: "flex items-center justify-between p-4 rounded-sm bg-black/40", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-white", children: t("cloud.appDomains.subdomains", {
+                                                        defaultValue: "Subdomains",
+                                                    }) }), _jsx("p", { className: "text-xs text-neutral-500 font-mono mt-1", children: "app.example.com" })] }), _jsxs("div", { className: "text-right", children: [_jsx("p", { className: "text-sm text-white font-mono", children: "CNAME" }), _jsx("p", { className: "text-xs text-white font-mono mt-1", children: "<your-cloudflare-cname>" })] })] }), _jsxs("div", { className: "flex items-center justify-between p-4 rounded-sm bg-black/40", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-white", children: t("cloud.appDomains.rootDomains", {
+                                                        defaultValue: "Root Domains",
+                                                    }) }), _jsx("p", { className: "text-xs text-neutral-500 font-mono mt-1", children: "example.com" })] }), _jsxs("div", { className: "text-right", children: [_jsx("p", { className: "text-sm text-white font-mono", children: "A" }), _jsx("p", { className: "text-xs text-white font-mono mt-1", children: "76.76.21.21" })] })] })] }), _jsx("p", { className: "mt-3 text-xs text-neutral-500", children: t("cloud.appDomains.dnsPropagationNote", {
+                                defaultValue: "DNS changes typically propagate within 5 minutes to 48 hours",
+                            }) })] })] }) }));
+}
+function DomainCard({ domain, url, type, status, sslStatus = "active", onRefresh, onRemove, isChecking, isRemoving, copyToClipboard, copiedValue, }) {
+    const t = useCloudT();
+    const fullUrl = url || `https://${domain}`;
+    const isVerified = status === "verified";
+    return (_jsx("div", { className: `
+        rounded-sm border p-3
+        ${isVerified ? "bg-black/30 border-white/10" : "bg-orange-500/5 border-orange-500/20"}
+      `, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "font-mono text-sm text-white truncate", children: domain }), _jsx(DomainStatusBadge, { status: status, sslStatus: sslStatus }), type === "subdomain" && (_jsx("span", { className: "text-[10px] text-neutral-500 uppercase tracking-wider", children: t("cloud.appDomains.default", { defaultValue: "Default" }) }))] }), isVerified && (_jsxs("div", { className: "flex items-center gap-1 text-green-400/80 mt-2", children: [_jsx(Lock, { className: "h-3 w-3" }), _jsx("span", { className: "text-xs", children: t("cloud.appDomains.sslTlsSecured", {
+                                        defaultValue: "SSL/TLS Secured",
+                                    }) })] })), !isVerified && type === "custom" && (_jsxs("div", { className: "flex items-center gap-1 text-orange-400/80 mt-2", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), _jsx("span", { className: "text-xs", children: t("cloud.appDomains.dnsVerificationPending", {
+                                        defaultValue: "DNS verification pending",
+                                    }) })] }))] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => copyToClipboard(fullUrl, t("cloud.appDomains.urlLabel", { defaultValue: "URL" })), className: "h-8 w-8 p-0 text-neutral-400 hover:text-white hover:bg-white/10", children: copiedValue === fullUrl ? (_jsx(Check, { className: "h-4 w-4 text-green-400" })) : (_jsx(Copy, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "bottom", className: "bg-neutral-800 text-white border-white/10", children: t("cloud.appDomains.copyUrl", { defaultValue: "Copy URL" }) })] }), isVerified && url && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center justify-center h-8 w-8 text-neutral-400 hover:text-white hover:bg-white/10 rounded-sm transition-colors", children: _jsx(ExternalLink, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "bottom", className: "bg-neutral-800 text-white border-white/10", children: t("cloud.appDomains.openInNewTab", {
+                                        defaultValue: "Open in new tab",
+                                    }) })] })), type === "custom" && onRefresh && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", onClick: onRefresh, disabled: isChecking, className: "h-8 w-8 p-0 text-neutral-400 hover:text-white hover:bg-white/10", children: _jsx(RefreshCw, { className: `h-4 w-4 ${isChecking ? "animate-spin" : ""}` }) }) }), _jsx(TooltipContent, { side: "bottom", className: "bg-neutral-800 text-white border-white/10", children: t("cloud.appDomains.checkDnsStatus", {
+                                        defaultValue: "Check DNS status",
+                                    }) })] })), type === "custom" && onRemove && (_jsxs(AlertDialog, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", disabled: isRemoving, className: "h-8 w-8 p-0 text-neutral-400 hover:text-red-400 hover:bg-red-500/10", children: isRemoving ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (_jsx(Trash2, { className: "h-4 w-4" })) }) }) }), _jsx(TooltipContent, { side: "bottom", className: "bg-neutral-800 text-white border-white/10", children: t("cloud.appDomains.removeDomainTooltip", {
+                                                defaultValue: "Remove domain",
+                                            }) })] }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t("cloud.appDomains.removeDomainTitle", {
+                                                        defaultValue: "Remove Domain",
+                                                    }) }), _jsxs(AlertDialogDescription, { children: [t("cloud.appDomains.removeDomainConfirmPre", {
+                                                            defaultValue: "Are you sure you want to remove",
+                                                        }), " ", _jsx("code", { className: "px-1.5 py-0.5 bg-white/10 rounded-sm font-mono text-white", children: domain }), t("cloud.appDomains.removeDomainConfirmPost", {
+                                                            defaultValue: "? Users will no longer be able to access your app via this domain.",
+                                                        })] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t("cloud.appDomains.cancel", { defaultValue: "Cancel" }) }), _jsx(AlertDialogAction, { onClick: onRemove, className: "bg-red-600 hover:bg-red-700", children: t("cloud.appDomains.removeDomainTitle", {
+                                                        defaultValue: "Remove Domain",
+                                                    }) })] })] })] }))] })] }) }));
+}
+function DomainStatusBadge({ status, sslStatus, }) {
+    const t = useCloudT();
+    if (status === "verified" && sslStatus === "active") {
+        return (_jsxs(Badge, { className: "bg-green-500/10 text-green-400 border-green-500/30 gap-1 text-[10px]", children: [_jsxs("span", { className: "relative flex h-1.5 w-1.5", children: [_jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-50" }), _jsx("span", { className: "relative inline-flex rounded-full h-1.5 w-1.5 bg-green-400" })] }), t("cloud.appDomains.statusActive", { defaultValue: "Active" })] }));
+    }
+    if (sslStatus === "provisioning") {
+        return (_jsxs(Badge, { className: "bg-white/10 text-white/80 border-white/20 gap-1 text-[10px]", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), t("cloud.appDomains.statusSslProvisioning", {
+                    defaultValue: "SSL Provisioning",
+                })] }));
+    }
+    return (_jsxs(Badge, { className: "bg-orange-500/10 text-orange-400 border-orange-500/30 gap-1 text-[10px]", children: [_jsx(Clock, { className: "h-3 w-3" }), t("cloud.appDomains.statusPending", { defaultValue: "Pending" })] }));
+}
+function DnsConfigPanel({ domain, domainStatus, onRefresh, isChecking, lastChecked, copyToClipboard, copiedValue, }) {
+    const t = useCloudT();
+    const isApex = domain.split(".").length === 2;
+    const currentStatus = domainStatus?.status || "pending";
+    const dnsRecords = domainStatus?.dnsInstructions || [
+        isApex
+            ? { type: "A", name: "@", value: "76.76.21.21" }
+            : {
+                type: "CNAME",
+                name: domain.split(".")[0],
+                value: "<your-cloudflare-cname>",
+            },
+    ];
+    const txtRecords = domainStatus?.records?.filter((r) => r.type === "TXT") || [];
+    return (_jsxs("div", { className: "bg-neutral-900 rounded-sm p-4 space-y-4", children: [_jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Zap, { className: "h-4 w-4 text-orange-400" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-white", children: t("cloud.appDomains.configureDns", {
+                                            defaultValue: "Configure DNS",
+                                        }) }), _jsx("p", { className: "text-xs text-neutral-500", children: t("cloud.appDomains.addRecordsHint", {
+                                            defaultValue: "Add these records at your DNS provider",
+                                        }) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [lastChecked && (_jsx("span", { className: "text-xs text-neutral-500 hidden sm:block", children: t("cloud.appDomains.lastChecked", {
+                                    time: lastChecked.toLocaleTimeString(),
+                                    defaultValue: "Last checked: {{time}}",
+                                }) })), _jsxs(Button, { variant: "outline", size: "sm", onClick: onRefresh, disabled: isChecking, className: "border-white/10 hover:bg-white/10 rounded-sm", children: [isChecking ? (_jsx(Loader2, { className: "h-4 w-4 mr-1.5 animate-spin" })) : (_jsx(RefreshCw, { className: "h-4 w-4 mr-1.5" })), t("cloud.appDomains.verify", { defaultValue: "Verify" })] })] })] }), _jsx("div", { className: `p-3 rounded-sm border flex items-start gap-2 ${currentStatus === "valid"
+                    ? "bg-green-500/10 border-green-500/20"
+                    : currentStatus === "invalid"
+                        ? "bg-red-500/10 border-red-500/20"
+                        : "bg-orange-500/10 border-orange-500/20"}`, children: currentStatus === "valid" ? (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-400 shrink-0 mt-0.5" }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-green-300 font-medium", children: t("cloud.appDomains.dnsVerified", {
+                                        defaultValue: "DNS Verified",
+                                    }) }), _jsx("p", { className: "text-xs text-green-300/70", children: t("cloud.appDomains.sslProvisioning", {
+                                        defaultValue: "SSL certificate is being provisioned",
+                                    }) })] })] })) : currentStatus === "invalid" ? (_jsxs(_Fragment, { children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-red-400 shrink-0 mt-0.5" }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-red-300 font-medium", children: t("cloud.appDomains.dnsConfigIssue", {
+                                        defaultValue: "DNS Configuration Issue",
+                                    }) }), _jsx("p", { className: "text-xs text-red-300/70", children: t("cloud.appDomains.dnsConfigIssueHint", {
+                                        defaultValue: "Please check your records match exactly",
+                                    }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 text-orange-400 animate-spin shrink-0 mt-0.5" }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-orange-300 font-medium", children: t("cloud.appDomains.waitingForPropagation", {
+                                        defaultValue: "Waiting for DNS Propagation",
+                                    }) }), _jsx("p", { className: "text-xs text-orange-300/70", children: t("cloud.appDomains.waitingFewMinutes", {
+                                        defaultValue: "This may take a few minutes",
+                                    }) })] })] })) }), _jsxs("div", { className: "space-y-3", children: [txtRecords.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-medium text-neutral-500 uppercase tracking-wider mb-2", children: t("cloud.appDomains.verificationRecord", {
+                                    defaultValue: "Verification Record",
+                                }) }), _jsx("div", { className: "space-y-2", children: txtRecords.map((record) => (_jsx(DnsRecordRow, { type: "TXT", name: record.name, value: record.value, copyToClipboard: copyToClipboard, copiedValue: copiedValue }, record.name))) })] })), _jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-medium text-neutral-500 uppercase tracking-wider mb-2", children: isApex
+                                    ? t("cloud.appDomains.aRecord", { defaultValue: "A Record" })
+                                    : t("cloud.appDomains.cnameRecord", {
+                                        defaultValue: "CNAME Record",
+                                    }) }), _jsx("div", { className: "space-y-2", children: dnsRecords.map((record) => (_jsx(DnsRecordRow, { type: record.type, name: record.name, value: record.value, copyToClipboard: copyToClipboard, copiedValue: copiedValue }, record.name))) })] })] })] }));
+}
+function DnsRecordRow({ type, name, value, copyToClipboard, copiedValue, }) {
+    const t = useCloudT();
+    const valueLabel = t("cloud.appDomains.recordValueLabel", {
+        type,
+        defaultValue: "{{type}} value",
+    });
+    return (_jsxs("div", { className: "group bg-black/30 rounded-sm border border-white/5 p-3", children: [_jsxs("div", { className: "hidden sm:flex items-center gap-3", children: [_jsx(Badge, { variant: "outline", className: "font-mono text-[10px] border-white/20 text-neutral-400 bg-white/5", children: type }), _jsx("span", { className: "font-mono text-xs text-white flex-1 truncate", children: name }), _jsx("span", { className: "font-mono text-xs text-neutral-500 flex-1 truncate", children: value }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => copyToClipboard(value, valueLabel), className: "h-7 w-7 p-0 text-neutral-500 hover:text-white hover:bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity", children: copiedValue === value ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) })] }), _jsxs("div", { className: "sm:hidden space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Badge, { variant: "outline", className: "font-mono text-[10px] border-white/20 text-neutral-400 bg-white/5", children: type }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => copyToClipboard(value, valueLabel), className: "h-7 px-2 text-neutral-500 hover:text-white", children: [copiedValue === value ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })), _jsx("span", { className: "ml-1.5 text-[10px]", children: t("cloud.appDomains.copy", { defaultValue: "Copy" }) })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[10px] text-neutral-500 mb-0.5", children: t("cloud.appDomains.nameHost", {
+                                            defaultValue: "Name / Host",
+                                        }) }), _jsx("p", { className: "font-mono text-xs text-white break-all", children: name })] }), _jsxs("div", { children: [_jsx("p", { className: "text-[10px] text-neutral-500 mb-0.5", children: t("cloud.appDomains.valueTarget", {
+                                            defaultValue: "Value / Target",
+                                        }) }), _jsx("p", { className: "font-mono text-xs text-neutral-400 break-all", children: value })] })] })] })] }));
+}

package/cloud/applications/components/app-earnings-dashboard.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Application detail — Earnings tab. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-earnings-dashboard.tsx`.
+ * GET `/api/v1/apps/:id/earnings` goes through the typed `api` client.
+ */
+interface AppEarningsDashboardProps {
+    appId: string;
+}
+export declare function AppEarningsDashboard({ appId }: AppEarningsDashboardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=app-earnings-dashboard.d.ts.map

package/cloud/applications/components/app-earnings-dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-earnings-dashboard.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/applications/components/app-earnings-dashboard.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA8FH,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,CAAC;CACf;AAID,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,yBAAyB,2CAsZxE"}

package/cloud/applications/components/app-earnings-dashboard.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Application detail — Earnings tab. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-earnings-dashboard.tsx`.
+ * GET `/api/v1/apps/:id/earnings` goes through the typed `api` client.
+ */
+import { formatDistanceToNow } from "date-fns";
+import { AlertCircle, ArrowUpRight, BarChart3, Clock, Coins, DollarSign, FlaskConical, Loader2, TrendingUp, Wallet, Zap, } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { DashboardStatCard } from "../../../cloud-ui/components/brand/index.js";
+import { MilestoneProgress } from "../../../cloud-ui/components/monetization/index.js";
+import { Badge } from "../../../components/ui/badge.js";
+import { Button } from "../../../components/ui/button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../../components/ui/select.js";
+import { cn } from "../../../lib/utils.js";
+import { api } from "../../lib/api-client.js";
+import { WithdrawDialog } from "./withdraw-dialog.js";
+const PAYOUT_THRESHOLD = 25;
+export function AppEarningsDashboard({ appId }) {
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const testDataParam = searchParams.get("testData") === "true";
+    const [isLoading, setIsLoading] = useState(true);
+    const [isTestData, setIsTestData] = useState(false);
+    const [monetizationEnabled, setMonetizationEnabled] = useState(null);
+    const [period, setPeriod] = useState("30");
+    const [summary, setSummary] = useState(null);
+    const [breakdown, setBreakdown] = useState(null);
+    const [chartData, setChartData] = useState([]);
+    const [transactions, setTransactions] = useState([]);
+    const [error, setError] = useState(null);
+    const [showWithdrawDialog, setShowWithdrawDialog] = useState(false);
+    const fetchEarnings = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const query = new URLSearchParams({ days: period });
+            if (testDataParam)
+                query.set("testData", "true");
+            const data = await api(`/api/v1/apps/${appId}/earnings?${query.toString()}`);
+            if (data.success && data.earnings) {
+                setSummary(data.earnings.summary);
+                setBreakdown(data.earnings.breakdown);
+                setChartData(data.earnings.chartData);
+                setTransactions(data.earnings.recentTransactions);
+                setIsTestData(data.testData === true);
+                if (data.monetization) {
+                    setMonetizationEnabled(data.monetization.enabled);
+                }
+            }
+            else {
+                setError(data.error || "Failed to load earnings data");
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load earnings data");
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [appId, period, testDataParam]);
+    useEffect(() => {
+        fetchEarnings();
+    }, [fetchEarnings]);
+    const handleWithdrawSuccess = (newBalance) => {
+        if (summary) {
+            setSummary({ ...summary, withdrawableBalance: newBalance });
+        }
+        fetchEarnings();
+    };
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-[#FF5800]" }) }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "bg-neutral-900 rounded-sm p-8 text-center", children: [_jsx(AlertCircle, { className: "h-12 w-12 mx-auto mb-4 text-red-400" }), _jsx("h3", { className: "text-lg font-medium text-white mb-2", children: "Error loading earnings" }), _jsx("p", { className: "text-neutral-400 mb-4 text-sm", children: error }), _jsx(Button, { onClick: fetchEarnings, variant: "outline", className: "border-white/10 hover:bg-white/10", children: "Try Again" })] }));
+    }
+    const canWithdraw = summary &&
+        summary.withdrawableBalance >=
+            (summary.payoutThreshold || PAYOUT_THRESHOLD);
+    return (_jsxs("div", { className: "space-y-4", children: [isTestData && (_jsxs("div", { className: "flex items-center gap-2 p-3 bg-orange-500/10 border border-orange-500/20 rounded-sm", children: [_jsx(FlaskConical, { className: "h-4 w-4 text-orange-400" }), _jsx("p", { className: "text-sm text-orange-400", children: "Test Data Mode - Showing sample earnings data" })] })), _jsx("div", { className: "flex justify-end", children: _jsxs(Select, { value: period, onValueChange: (v) => setPeriod(v), children: [_jsx(SelectTrigger, { className: "w-[140px] h-9 bg-neutral-900 border-white/10 rounded-sm", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { className: "bg-neutral-800 border-white/10 rounded-sm", children: [_jsx(SelectItem, { value: "7", children: "Last 7 days" }), _jsx(SelectItem, { value: "30", children: "Last 30 days" }), _jsx(SelectItem, { value: "90", children: "Last 90 days" })] })] }) }), !summary && !isLoading && (_jsxs("div", { className: "bg-neutral-900 rounded-sm p-8 text-center", children: [_jsx(TrendingUp, { className: "h-12 w-12 mx-auto mb-4 text-neutral-600" }), _jsx("h3", { className: "text-lg font-medium text-neutral-500 mb-2", children: "No earnings yet" }), monetizationEnabled ? (_jsx("p", { className: "text-neutral-500 text-sm", children: "Earnings will appear here once users start using your app" })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-neutral-500 text-sm mb-4", children: "Enable monetization to start earning from your app" }), _jsx(Button, { onClick: () => {
+                                    navigate(`/dashboard/apps/${appId}?tab=monetization`);
+                                }, className: "bg-[#FF5800] hover:bg-[#e54f00] text-white", children: "Enable Monetization" })] }))] })), summary && (_jsxs("div", { className: "grid gap-3 grid-cols-1 sm:grid-cols-2", children: [_jsx("div", { className: "bg-neutral-900 rounded-sm p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs text-neutral-500", children: "Total Lifetime Earnings" }), _jsxs("p", { className: "text-2xl font-semibold text-white mt-1", children: ["$", summary.totalLifetimeEarnings.toFixed(2)] }), breakdown && (_jsxs("p", { className: "text-xs text-green-400 mt-1 flex items-center gap-1", children: [_jsx(ArrowUpRight, { className: "h-3 w-3" }), "$", breakdown.thisWeek.total.toFixed(2), " this week"] }))] }), _jsx(TrendingUp, { className: "h-5 w-5 text-[#FF5800]" })] }) }), _jsxs("div", { className: cn("bg-neutral-900 rounded-sm p-4", canWithdraw && "border border-green-500/30"), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs text-neutral-500", children: "Ready to Withdraw" }), _jsxs("p", { className: "text-2xl font-semibold text-green-400 mt-1", children: ["$", summary.withdrawableBalance.toFixed(2)] })] }), _jsx(Wallet, { className: "h-5 w-5 text-green-400" })] }), _jsx("div", { className: "mt-3", children: canWithdraw ? (_jsxs(Button, { onClick: () => setShowWithdrawDialog(true), size: "sm", className: "w-full bg-green-600 hover:bg-green-500 text-white", children: [_jsx(Wallet, { className: "h-4 w-4 mr-2" }), "Withdraw Now"] })) : (_jsx(MilestoneProgress, { current: summary.withdrawableBalance, target: summary.payoutThreshold || PAYOUT_THRESHOLD, showAmount: false })) })] })] })), summary && (_jsxs("div", { className: "grid gap-3 grid-cols-2 lg:grid-cols-4", children: [_jsx(DashboardStatCard, { label: "Pending", value: `$${summary.pendingBalance.toFixed(2)}`, icon: _jsx(Clock, { className: "h-5 w-5" }), accent: "amber" }), _jsx(DashboardStatCard, { label: "Withdrawable", value: `$${summary.withdrawableBalance.toFixed(2)}`, icon: _jsx(Wallet, { className: "h-5 w-5" }), accent: "emerald" }), _jsx(DashboardStatCard, { label: "From Inference", value: `$${summary.totalInferenceEarnings.toFixed(2)}`, icon: _jsx(Zap, { className: "h-5 w-5" }), accent: "violet" }), _jsx(DashboardStatCard, { label: "From Purchases", value: `$${summary.totalPurchaseEarnings.toFixed(2)}`, icon: _jsx(Coins, { className: "h-5 w-5" }), accent: "orange" })] })), breakdown && (_jsx("div", { className: "grid gap-3 grid-cols-2 lg:grid-cols-4", children: [
+                    { label: "Today", data: breakdown.today },
+                    { label: "This Week", data: breakdown.thisWeek },
+                    { label: "This Month", data: breakdown.thisMonth },
+                    { label: "All Time", data: breakdown.allTime },
+                ].map(({ label, data }) => (_jsxs("div", { className: "bg-neutral-900 rounded-sm p-3", children: [_jsx("p", { className: "text-xs text-neutral-500", children: label }), _jsxs("p", { className: "text-lg font-semibold text-white mt-1", children: ["$", data.total.toFixed(2)] }), _jsxs("div", { className: "flex gap-3 text-xs mt-2", children: [_jsxs("span", { className: "text-purple-400 flex items-center gap-1", children: [_jsx(Zap, { className: "h-3 w-3" }), "$", data.inferenceEarnings.toFixed(2)] }), _jsxs("span", { className: "text-orange-400 flex items-center gap-1", children: [_jsx(Coins, { className: "h-3 w-3" }), "$", data.purchaseEarnings.toFixed(2)] })] })] }, label))) })), _jsxs("div", { className: "bg-neutral-900 rounded-sm p-4", children: [_jsxs("h3", { className: "text-sm font-medium text-white mb-4 flex items-center gap-2", children: [_jsx(BarChart3, { className: "h-4 w-4 text-neutral-400" }), "Earnings Over Time"] }), chartData.length > 0 ? (_jsx(ResponsiveContainer, { width: "100%", height: 250, children: _jsxs(BarChart, { data: chartData, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "rgba(255,255,255,0.1)" }), _jsx(XAxis, { dataKey: "date", stroke: "rgba(255,255,255,0.4)", style: { fontSize: "11px" } }), _jsx(YAxis, { stroke: "rgba(255,255,255,0.4)", style: { fontSize: "11px" }, tickFormatter: (value) => `$${value.toFixed(2)}` }), _jsx(Tooltip, { contentStyle: {
+                                        backgroundColor: "#171717",
+                                        border: "1px solid rgba(255,255,255,0.1)",
+                                        borderRadius: "8px",
+                                        color: "white",
+                                        fontSize: "12px",
+                                    }, formatter: (value) => {
+                                        const raw = Array.isArray(value) ? value[0] : value;
+                                        const numericValue = Number(raw);
+                                        if (!Number.isFinite(numericValue))
+                                            return "—";
+                                        return `$${numericValue.toFixed(4)}`;
+                                    } }), _jsx(Legend, {}), _jsx(Bar, { dataKey: "inferenceEarnings", fill: "#a855f7", name: "Inference Markup", stackId: "a", radius: [4, 4, 0, 0] }), _jsx(Bar, { dataKey: "purchaseEarnings", fill: "#f59e0b", name: "Purchase Share", stackId: "a", radius: [4, 4, 0, 0] })] }) })) : (_jsxs("div", { className: "text-center text-neutral-500 py-8", children: [_jsx(DollarSign, { className: "h-10 w-10 mx-auto mb-3 text-neutral-600" }), _jsx("p", { className: "text-sm", children: "No earnings data yet" })] }))] }), _jsxs("div", { className: "bg-neutral-900 rounded-sm p-4", children: [_jsxs("h3", { className: "text-sm font-medium text-white mb-4 flex items-center gap-2", children: [_jsx(Clock, { className: "h-4 w-4 text-neutral-400" }), "Recent Earnings"] }), transactions.length > 0 ? (_jsx("div", { className: "space-y-2", children: transactions.map((tx) => (_jsxs("div", { className: "flex items-center justify-between p-3 bg-black/30 rounded-sm border border-white/5 hover:border-white/10 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TransactionIcon, { type: tx.type }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-white", children: tx.description }), _jsx("p", { className: "text-xs text-neutral-500", children: formatDistanceToNow(new Date(tx.created_at), {
+                                                        addSuffix: true,
+                                                    }) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TransactionBadge, { type: tx.type }), _jsxs("span", { className: cn("font-mono text-sm font-medium", Number(tx.amount) >= 0
+                                                ? "text-green-400"
+                                                : "text-red-400"), children: [Number(tx.amount) >= 0 ? "+" : "", "$", Math.abs(Number(tx.amount)).toFixed(4)] })] })] }, tx.id))) })) : (_jsxs("div", { className: "text-center text-neutral-500 py-8", children: [_jsx(DollarSign, { className: "h-10 w-10 mx-auto mb-3 text-neutral-600" }), _jsx("p", { className: "text-sm mb-1", children: "No transactions yet" }), _jsx("p", { className: "text-xs text-neutral-600", children: "Transactions will appear here once you start earning" })] }))] }), summary && (_jsx(WithdrawDialog, { open: showWithdrawDialog, onOpenChange: setShowWithdrawDialog, appId: appId, withdrawableBalance: summary.withdrawableBalance, payoutThreshold: summary.payoutThreshold || PAYOUT_THRESHOLD, onSuccess: handleWithdrawSuccess }))] }));
+}
+function TransactionIcon({ type }) {
+    switch (type) {
+        case "inference_markup":
+            return _jsx(Zap, { className: "h-4 w-4 text-purple-400" });
+        case "purchase_share":
+            return _jsx(Coins, { className: "h-4 w-4 text-yellow-400" });
+        case "withdrawal":
+            return _jsx(ArrowUpRight, { className: "h-4 w-4 text-red-400" });
+        default:
+            return _jsx(DollarSign, { className: "h-4 w-4 text-gray-400" });
+    }
+}
+function TransactionBadge({ type }) {
+    switch (type) {
+        case "inference_markup":
+            return (_jsx(Badge, { className: "bg-purple-500/20 text-purple-400 border-purple-500/30 text-[10px]", children: "Inference" }));
+        case "purchase_share":
+            return (_jsx(Badge, { className: "bg-orange-500/20 text-orange-400 border-orange-500/30 text-[10px]", children: "Purchase" }));
+        case "withdrawal":
+            return (_jsx(Badge, { className: "bg-red-500/20 text-red-400 border-red-500/30 text-[10px]", children: "Withdrawal" }));
+        default:
+            return (_jsx(Badge, { className: "bg-white/10 text-neutral-400 border-white/20 text-[10px]", children: type }));
+    }
+}

package/cloud/applications/components/app-monetization-settings.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+interface AppMonetizationSettingsProps {
+    appId: string;
+}
+export declare function AppMonetizationSettings({ appId, }: AppMonetizationSettingsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=app-monetization-settings.d.ts.map

package/cloud/applications/components/app-monetization-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-monetization-settings.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/applications/components/app-monetization-settings.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuDH,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,GACN,EAAE,4BAA4B,2CA8a9B"}