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

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

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Application detail — Settings tab (edit fields, allowed origins, danger zone).
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-settings.tsx`.
+ * Bare `fetch` is replaced with the typed `updateApp` / `regenerateAppApiKey` /
+ * `deleteApp` helpers; the single-app + list query keys are invalidated after a
+ * save/delete so the detail page and list reflect changes without a full reload.
+ */
+import { useQueryClient } from "@tanstack/react-query";
+import { AlertTriangle, Key, Loader2, Plus, Save, Settings, Shield, Trash2, X, } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+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 { Label } from "../../../components/ui/label.js";
+import { Switch } from "../../../components/ui/switch.js";
+import { Textarea } from "../../../components/ui/textarea.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+import { APPS_QUERY_KEY, appQueryKey, deleteApp, regenerateAppApiKey, updateApp, } from "../lib/apps.js";
+import { storeOneTimeAppApiKey } from "../lib/one-time-app-api-key.js";
+export function AppSettings({ app }) {
+    const t = useCloudT();
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const [isLoading, setIsLoading] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [isRegenerating, setIsRegenerating] = useState(false);
+    const [allowedOrigins, setAllowedOrigins] = useState(() => {
+        const origins = app.allowed_origins;
+        return Array.isArray(origins)
+            ? origins.filter((origin) => typeof origin === "string")
+            : [];
+    });
+    const [newOrigin, setNewOrigin] = useState("");
+    const [formData, setFormData] = useState({
+        name: app.name,
+        description: app.description || "",
+        app_url: app.app_url,
+        website_url: app.website_url || "",
+        contact_email: app.contact_email || "",
+        is_active: app.is_active,
+    });
+    const handleSave = async () => {
+        setIsLoading(true);
+        try {
+            await updateApp(app.id, { ...formData, allowed_origins: allowedOrigins });
+            toast.success(t("cloud.appSettings.updateSuccess", {
+                defaultValue: "App updated successfully",
+            }));
+            await Promise.all([
+                queryClient.invalidateQueries({ queryKey: appQueryKey(app.id) }),
+                queryClient.invalidateQueries({ queryKey: APPS_QUERY_KEY }),
+            ]);
+        }
+        catch (error) {
+            toast.error(t("cloud.appSettings.updateFailed", {
+                defaultValue: "Failed to update app",
+            }), {
+                description: error instanceof Error
+                    ? error.message
+                    : t("cloud.appSettings.tryAgain", {
+                        defaultValue: "Please try again",
+                    }),
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleRegenerateApiKey = async () => {
+        setIsRegenerating(true);
+        try {
+            const apiKey = await regenerateAppApiKey(app.id);
+            storeOneTimeAppApiKey(app.id, apiKey);
+            toast.success(t("cloud.appSettings.regenerateSuccess", {
+                defaultValue: "API key regenerated",
+            }), {
+                description: t("cloud.appSettings.regenerateSuccessDescription", {
+                    defaultValue: "Your new API key has been generated. Make sure to save it!",
+                }),
+            });
+            navigate(`/dashboard/apps/${app.id}?tab=overview`, {
+                preventScrollReset: true,
+            });
+        }
+        catch (error) {
+            toast.error(t("cloud.appSettings.regenerateFailed", {
+                defaultValue: "Failed to regenerate API key",
+            }), {
+                description: error instanceof Error
+                    ? error.message
+                    : t("cloud.appSettings.tryAgain", {
+                        defaultValue: "Please try again",
+                    }),
+            });
+        }
+        finally {
+            setIsRegenerating(false);
+        }
+    };
+    const handleDelete = async () => {
+        setIsDeleting(true);
+        try {
+            await deleteApp(app.id);
+            toast.success(t("cloud.appSettings.deleteSuccess", {
+                defaultValue: "App deleted successfully",
+            }));
+            await queryClient.invalidateQueries({ queryKey: APPS_QUERY_KEY });
+            navigate("/dashboard/apps");
+        }
+        catch (error) {
+            toast.error(t("cloud.appSettings.deleteFailed", {
+                defaultValue: "Failed to delete app",
+            }), {
+                description: error instanceof Error
+                    ? error.message
+                    : t("cloud.appSettings.tryAgain", {
+                        defaultValue: "Please try again",
+                    }),
+            });
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    };
+    const addOrigin = () => {
+        if (newOrigin && !allowedOrigins.includes(newOrigin)) {
+            setAllowedOrigins([...allowedOrigins, newOrigin]);
+            setNewOrigin("");
+        }
+    };
+    const removeOrigin = (origin) => {
+        setAllowedOrigins(allowedOrigins.filter((o) => o !== origin));
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_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(Settings, { className: "h-4 w-4 text-[var(--brand-orange)]" }), t("cloud.appSettings.basicSettings", {
+                                defaultValue: "Basic Settings",
+                            })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "name", className: "text-xs text-neutral-400", children: t("cloud.appSettings.appName", { defaultValue: "App Name" }) }), _jsx(Input, { id: "name", value: formData.name, onChange: (e) => setFormData({ ...formData, name: e.target.value }), placeholder: t("cloud.appSettings.appNamePlaceholder", {
+                                            defaultValue: "My Awesome App",
+                                        }), className: "bg-black/40 border-white/10 focus:border-[var(--brand-orange)]/50 rounded-sm" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "description", className: "text-xs text-neutral-400", children: t("cloud.appSettings.description", {
+                                            defaultValue: "Description",
+                                        }) }), _jsx(Textarea, { id: "description", value: formData.description, onChange: (e) => setFormData({ ...formData, description: e.target.value }), placeholder: t("cloud.appSettings.descriptionPlaceholder", {
+                                            defaultValue: "A brief description of your app...",
+                                        }), rows: 3, className: "bg-black/40 border-white/10 focus:border-[var(--brand-orange)]/50 resize-none rounded-sm" })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "app_url", className: "text-xs text-neutral-400", children: t("cloud.appSettings.appUrl", { defaultValue: "App URL" }) }), _jsx(Input, { id: "app_url", type: "url", value: formData.app_url, onChange: (e) => setFormData({ ...formData, app_url: e.target.value }), placeholder: "https://myapp.com", className: "bg-black/40 border-white/10 focus:border-[var(--brand-orange)]/50 rounded-sm" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "website_url", className: "text-xs text-neutral-400", children: t("cloud.appSettings.websiteUrl", {
+                                                    defaultValue: "Website URL",
+                                                }) }), _jsx(Input, { id: "website_url", type: "url", value: formData.website_url, onChange: (e) => setFormData({ ...formData, website_url: e.target.value }), placeholder: "https://website.com", className: "bg-black/40 border-white/10 focus:border-[var(--brand-orange)]/50 rounded-sm" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "contact_email", className: "text-xs text-neutral-400", children: t("cloud.appSettings.contactEmail", {
+                                            defaultValue: "Contact Email",
+                                        }) }), _jsx(Input, { id: "contact_email", type: "email", value: formData.contact_email, onChange: (e) => setFormData({ ...formData, contact_email: e.target.value }), placeholder: "contact@myapp.com", className: "bg-black/40 border-white/10 focus:border-[var(--brand-orange)]/50 rounded-sm" })] }), _jsxs("div", { className: "flex items-center justify-between p-3 bg-black/30 rounded-sm border border-white/10", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-white", children: t("cloud.appSettings.activeStatus", {
+                                                    defaultValue: "Active Status",
+                                                }) }), _jsx("p", { className: "text-xs text-neutral-500 mt-0.5", children: t("cloud.appSettings.activeStatusHint", {
+                                                    defaultValue: "Inactive apps cannot make API requests",
+                                                }) })] }), _jsx(Switch, { id: "is_active", checked: formData.is_active, onCheckedChange: (checked) => setFormData({ ...formData, is_active: checked }), className: "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-neutral-700" })] })] })] }), _jsxs("div", { className: "bg-neutral-900 rounded-sm p-4 space-y-4", children: [_jsxs("div", { 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" }), t("cloud.appSettings.allowedOrigins", {
+                                        defaultValue: "Allowed Origins",
+                                    })] }), _jsx("p", { className: "text-xs text-neutral-500 mt-1", children: t("cloud.appSettings.allowedOriginsHint", {
+                                    defaultValue: "API requests are only accepted from these domains",
+                                }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: newOrigin, onChange: (e) => setNewOrigin(e.target.value), placeholder: "https://example.com", className: "bg-black/40 border-white/10 focus:border-[var(--brand-orange)]/50 rounded-sm", onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        addOrigin();
+                                    }
+                                } }), _jsx(Button, { type: "button", onClick: addOrigin, variant: "outline", size: "icon", className: "shrink-0 border-white/10 hover:bg-white/10", children: _jsx(Plus, { className: "h-4 w-4" }) })] }), allowedOrigins.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: allowedOrigins.map((origin) => (_jsxs(Badge, { className: "bg-white/5 text-white/70 border-white/10 flex items-center gap-1 pr-1", children: [origin, _jsx("button", { type: "button", onClick: () => removeOrigin(origin), className: "ml-1 p-0.5 hover:bg-white/10 rounded-sm transition-colors", children: _jsx(X, { className: "h-3 w-3" }) })] }, origin))) }))] }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { onClick: handleSave, disabled: isLoading, className: "bg-[var(--brand-orange)] hover:bg-[#e54f00] text-white", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }), t("cloud.appSettings.saving", { defaultValue: "Saving..." })] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "h-4 w-4 mr-2" }), t("cloud.appSettings.saveChanges", {
+                                defaultValue: "Save Changes",
+                            })] })) }) }), _jsxs("div", { className: "bg-red-500/10 rounded-sm p-4 space-y-4 border border-red-500/20", children: [_jsxs("h3", { className: "text-sm font-medium text-red-400 flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), t("cloud.appSettings.dangerZone", { defaultValue: "Danger Zone" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between p-4 bg-black rounded-sm border border-red-500/10", children: [_jsxs("div", { className: "min-w-0 flex-1 mr-3", children: [_jsx("p", { className: "text-sm font-medium text-white", children: t("cloud.appSettings.regenerateApiKey", {
+                                                    defaultValue: "Regenerate API Key",
+                                                }) }), _jsx("p", { className: "text-xs text-neutral-400 mt-1", children: t("cloud.appSettings.regenerateApiKeyHint", {
+                                                    defaultValue: "This will invalidate the current API key",
+                                                }) })] }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { size: "sm", className: "bg-red-600 hover:bg-red-700 text-white shrink-0", disabled: isRegenerating, children: isRegenerating ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (_jsxs(_Fragment, { children: [_jsx(Key, { className: "h-4 w-4 mr-1.5" }), t("cloud.appSettings.regenerate", {
+                                                                defaultValue: "Regenerate",
+                                                            })] })) }) }), _jsxs(AlertDialogContent, { className: "bg-neutral-900 border-white/10", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { className: "text-white", children: t("cloud.appSettings.regenerateDialogTitle", {
+                                                                    defaultValue: "Regenerate API Key?",
+                                                                }) }), _jsx(AlertDialogDescription, { className: "text-neutral-400", children: t("cloud.appSettings.regenerateDialogDescription", {
+                                                                    defaultValue: "This action will immediately invalidate your current API key. Your app will stop working until you update it with the new key. This cannot be undone.",
+                                                                }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { className: "border-white/10 text-white hover:bg-white/10", children: t("cloud.appSettings.cancel", { defaultValue: "Cancel" }) }), _jsx(AlertDialogAction, { onClick: handleRegenerateApiKey, className: "bg-red-600 hover:bg-red-700 text-white", children: t("cloud.appSettings.regenerateApiKey", {
+                                                                    defaultValue: "Regenerate API Key",
+                                                                }) })] })] })] })] }), _jsxs("div", { className: "flex items-center justify-between p-4 bg-black rounded-sm border border-red-500/10", children: [_jsxs("div", { className: "min-w-0 flex-1 mr-3", children: [_jsx("p", { className: "text-sm font-medium text-white", children: t("cloud.appSettings.deleteApp", {
+                                                    defaultValue: "Delete App",
+                                                }) }), _jsx("p", { className: "text-xs text-neutral-400 mt-1", children: t("cloud.appSettings.deleteAppHint", {
+                                                    defaultValue: "Permanently delete this app and all data",
+                                                }) })] }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { size: "sm", className: "bg-red-600 hover:bg-red-700 text-white shrink-0", disabled: isDeleting, children: isDeleting ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (_jsxs(_Fragment, { children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5" }), t("cloud.appSettings.deleteApp", {
+                                                                defaultValue: "Delete App",
+                                                            })] })) }) }), _jsxs(AlertDialogContent, { className: "bg-neutral-900 border-white/10", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { className: "text-white", children: t("cloud.appSettings.deleteDialogTitle", {
+                                                                    defaultValue: "Delete App?",
+                                                                }) }), _jsxs(AlertDialogDescription, { className: "text-neutral-400", children: [t("cloud.appSettings.deleteDialogIntro", {
+                                                                        defaultValue: "This action cannot be undone. This will permanently delete the app",
+                                                                    }), _jsxs("strong", { className: "text-white", children: [" ", app.name] }), " ", t("cloud.appSettings.deleteDialogOutro", {
+                                                                        defaultValue: "and remove all associated data including analytics and user tracking.",
+                                                                    })] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { className: "border-white/10 text-white hover:bg-white/10", children: t("cloud.appSettings.cancel", { defaultValue: "Cancel" }) }), _jsx(AlertDialogAction, { onClick: handleDelete, className: "bg-red-600 hover:bg-red-700 text-white", children: t("cloud.appSettings.deleteApp", {
+                                                                    defaultValue: "Delete App",
+                                                                }) })] })] })] })] })] })] })] }));
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Application detail — Users tab (authenticated users + anonymous visitors).
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-users.tsx`. Both
+ * GETs are routed through the typed `api` client.
+ */
+interface AppUsersProps {
+    appId: string;
+}
+export declare function AppUsers({ appId }: AppUsersProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=app-users.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-users.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/applications/components/app-users.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AA4CH,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,2CAqNhD"}

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Application detail — Users tab (authenticated users + anonymous visitors).
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/app-users.tsx`. Both
+ * GETs are routed through the typed `api` client.
+ */
+import { formatDistanceToNow } from "date-fns";
+import { Activity, DollarSign, Globe, Loader2, RefreshCw, Users as UsersIcon, } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Avatar, AvatarFallback } from "../../../components/ui/avatar.js";
+import { Button } from "../../../components/ui/button.js";
+import { EmptyState } from "../../../components/ui/empty-state.js";
+import { api } from "../../lib/api-client.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+export function AppUsers({ appId }) {
+    const t = useCloudT();
+    const [isLoading, setIsLoading] = useState(true);
+    const [users, setUsers] = useState([]);
+    const [visitors, setVisitors] = useState([]);
+    const fetchData = useCallback(async () => {
+        setIsLoading(true);
+        try {
+            const [usersData, visitorsData] = await Promise.all([
+                api(`/api/v1/apps/${appId}/users?limit=50`),
+                api(`/api/v1/apps/${appId}/analytics/requests?view=visitors&limit=50`),
+            ]);
+            if (usersData.success && usersData.users) {
+                setUsers(usersData.users);
+            }
+            if (visitorsData.success && visitorsData.visitors) {
+                setVisitors(visitorsData.visitors);
+            }
+        }
+        catch {
+            toast.error(t("cloud.appUsers.loadFailed", {
+                defaultValue: "Failed to load app users",
+            }));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [appId, t]);
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-accent" }) }));
+    }
+    const hasUsers = users.length > 0;
+    const hasVisitors = visitors.length > 0;
+    if (!hasUsers && !hasVisitors) {
+        return (_jsx(EmptyState, { variant: "dashed", icon: _jsx(UsersIcon, { className: "h-6 w-6" }), title: t("cloud.appUsers.emptyTitle", { defaultValue: "No users yet" }), description: t("cloud.appUsers.emptyDescription", {
+                defaultValue: "Users will appear here once they start using your app",
+            }) }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [hasUsers && (_jsxs("div", { className: "space-y-4 rounded-sm border border-border bg-card p-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium text-txt", children: [_jsx(UsersIcon, { className: "h-4 w-4 text-accent" }), t("cloud.appUsers.authenticatedUsers", {
+                                    count: users.length,
+                                    defaultValue: "Authenticated Users ({{count}})",
+                                })] }) }), _jsx("div", { className: "space-y-2", children: users.map((appUser) => (_jsx("div", { className: "flex items-center justify-between rounded-sm bg-bg-accent p-3 transition-all hover:bg-surface", children: _jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsx(Avatar, { className: "h-8 w-8", children: _jsx(AvatarFallback, { className: "bg-accent text-accent-fg text-xs", children: appUser.user_id.substring(0, 2).toUpperCase() }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium text-txt", children: t("cloud.appUsers.userLabel", {
+                                                    id: appUser.user_id.substring(0, 8),
+                                                    defaultValue: "User {{id}}",
+                                                }) }), _jsxs("div", { className: "flex items-center gap-3 text-xs text-muted", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Activity, { className: "h-3 w-3" }), appUser.total_requests] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(DollarSign, { className: "h-3 w-3" }), "$", parseFloat(appUser.total_credits_used).toFixed(2)] })] })] }), _jsxs("div", { className: "text-right hidden lg:block", children: [_jsx("p", { className: "text-xs text-muted", children: t("cloud.appUsers.firstSeen", {
+                                                    time: formatDistanceToNow(new Date(appUser.first_seen_at), { addSuffix: true }),
+                                                    defaultValue: "First seen {{time}}",
+                                                }) }), _jsx("p", { className: "mt-0.5 text-[10px] text-muted", children: t("cloud.appUsers.lastSeen", {
+                                                    time: formatDistanceToNow(new Date(appUser.last_seen_at), { addSuffix: true }),
+                                                    defaultValue: "Last seen {{time}}",
+                                                }) })] })] }) }, appUser.id))) })] })), hasVisitors && (_jsxs("div", { className: "space-y-4 rounded-sm border border-border bg-card p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium text-txt", children: [_jsx(Globe, { className: "h-4 w-4 text-accent" }), t("cloud.appUsers.visitors", {
+                                        count: visitors.length,
+                                        defaultValue: "Visitors ({{count}})",
+                                    })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => fetchData(), disabled: isLoading, className: "h-8 w-8 p-0", children: _jsx(RefreshCw, { className: `h-4 w-4 ${isLoading ? "animate-spin" : ""}` }) })] }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border", children: [_jsx("th", { className: "px-3 py-2 text-left text-xs font-medium text-muted", children: t("cloud.appUsers.ipAddress", {
+                                                    defaultValue: "IP Address",
+                                                }) }), _jsx("th", { className: "px-3 py-2 text-right text-xs font-medium text-muted", children: t("cloud.appUsers.requests", {
+                                                    defaultValue: "Requests",
+                                                }) }), _jsx("th", { className: "px-3 py-2 text-right text-xs font-medium text-muted", children: t("cloud.appUsers.lastSeenHeader", {
+                                                    defaultValue: "Last Seen",
+                                                }) })] }) }), _jsx("tbody", { children: visitors.map((visitor, index) => (_jsxs("tr", { className: "border-b border-border/60 hover:bg-surface", children: [_jsx("td", { className: "py-2 px-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-bg-accent", children: _jsx("span", { className: "text-[10px] text-muted", children: index + 1 }) }), _jsx("code", { className: "font-mono text-xs text-txt", children: visitor.ip })] }) }), _jsx("td", { className: "px-3 py-2 text-right text-xs font-medium text-txt", children: visitor.requestCount.toLocaleString() }), _jsx("td", { className: "px-3 py-2 text-right text-xs text-muted", children: formatDistanceToNow(new Date(visitor.lastSeen), {
+                                                    addSuffix: true,
+                                                }) })] }, visitor.ip))) })] }) })] }))] }));
+}

package/cloud/applications/components/apps-table.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Applications list table. Reuses the shared `AppsListView` from cloud-ui and
+ * adds the delete-confirmation dialog. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/apps-table.tsx`; the
+ * raw `fetch(... DELETE)` + `window.location.reload()` is replaced with the
+ * typed `deleteApp()` mutation + a react-query invalidation so the list updates
+ * in place under the app shell's Bearer-auth client.
+ */
+import { type App } from "../lib/apps";
+interface AppsTableProps {
+    apps: App[];
+}
+export declare function AppsTable({ apps }: AppsTableProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=apps-table.d.ts.map

package/cloud/applications/components/apps-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apps-table.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/applications/components/apps-table.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH,OAAO,EAAkB,KAAK,GAAG,EAAa,MAAM,aAAa,CAAC;AAElE,UAAU,cAAc;IACtB,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE,cAAc,kDAgHjD"}

package/cloud/applications/components/apps-table.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Applications list table. Reuses the shared `AppsListView` from cloud-ui and
+ * adds the delete-confirmation dialog. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/apps-table.tsx`; the
+ * raw `fetch(... DELETE)` + `window.location.reload()` is replaced with the
+ * typed `deleteApp()` mutation + a react-query invalidation so the list updates
+ * in place under the app shell's Bearer-auth client.
+ */
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "sonner";
+import { AppsListView } from "../../../cloud-ui/components/data-list/index.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "../../../components/ui/alert-dialog.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+import { APPS_QUERY_KEY, deleteApp } from "../lib/apps.js";
+export function AppsTable({ apps }) {
+    const t = useCloudT();
+    const queryClient = useQueryClient();
+    const [deletingId, setDeletingId] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const handleCopyUrl = async (url) => {
+        try {
+            await navigator.clipboard.writeText(url);
+            toast.success(t("cloud.apps.toast.urlCopied", {
+                defaultValue: "URL copied to clipboard",
+            }));
+        }
+        catch {
+            toast.error(t("cloud.apps.toast.urlCopyFailed", {
+                defaultValue: "Failed to copy URL",
+            }));
+        }
+    };
+    const handleConfirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        setDeletingId(deleteTarget.id);
+        const target = deleteTarget;
+        setDeleteTarget(null);
+        try {
+            await deleteApp(target.id);
+            toast.success(t("cloud.apps.toast.deleteSuccess", {
+                defaultValue: "App deleted successfully",
+            }));
+            await queryClient.invalidateQueries({ queryKey: APPS_QUERY_KEY });
+        }
+        catch (error) {
+            toast.error(t("cloud.apps.toast.deleteFailed", {
+                defaultValue: "Failed to delete app",
+            }), {
+                description: error instanceof Error
+                    ? error.message
+                    : t("cloud.apps.toast.tryAgain", {
+                        defaultValue: "Please try again",
+                    }),
+            });
+        }
+        finally {
+            setDeletingId(null);
+        }
+    };
+    if (apps.length === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(AppsListView, { apps: apps, deletingId: deletingId, renderAppLink: ({ app, className, children }) => (_jsx(Link, { to: `/dashboard/apps/${app.id}`, className: className, children: children })), onCopyUrl: (app) => void handleCopyUrl(app.app_url), onDeleteApp: (app) => setDeleteTarget(app) }), _jsx(AlertDialog, { open: deleteTarget !== null, onOpenChange: (open) => !open && setDeleteTarget(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t("cloud.apps.deleteDialog.title", {
+                                        defaultValue: "Delete App",
+                                    }) }), _jsxs(AlertDialogDescription, { children: [t("cloud.apps.deleteDialog.confirmPrefix", {
+                                            defaultValue: "Are you sure you want to delete",
+                                        }), " ", _jsxs("span", { className: "font-semibold text-white", children: ["\"", deleteTarget?.name, "\""] }), "?", " ", t("cloud.apps.deleteDialog.cannotBeUndone", {
+                                            defaultValue: "This action cannot be undone.",
+                                        })] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t("cloud.apps.deleteDialog.cancel", { defaultValue: "Cancel" }) }), _jsx(AlertDialogAction, { onClick: handleConfirmDelete, className: "bg-red-600 hover:bg-red-700", children: t("cloud.apps.deleteDialog.delete", { defaultValue: "Delete" }) })] })] }) })] }));
+}

package/cloud/applications/components/create-app-button.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Create-app trigger button + dialog. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/create-app-button.tsx`.
+ */
+export declare function CreateAppButton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=create-app-button.d.ts.map

package/cloud/applications/components/create-app-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-app-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/applications/components/create-app-button.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,wBAAgB,eAAe,4CAiB9B"}

package/cloud/applications/components/create-app-button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Create-app trigger button + dialog. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/create-app-button.tsx`.
+ */
+import { Plus } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../../../components/ui/button.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+import { CreateAppDialog } from "./create-app-dialog.js";
+export function CreateAppButton() {
+    const t = useCloudT();
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => setIsOpen(true), className: "bg-[#FF5800] hover:bg-[#e54f00] text-white", "data-onboarding": "apps-create", children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), t("cloud.apps.createApp", { defaultValue: "Create App" })] }), _jsx(CreateAppDialog, { open: isOpen, onOpenChange: setIsOpen })] }));
+}

package/cloud/applications/components/create-app-dialog.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Create App dialog — name + app_url + smart defaults.
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/create-app-dialog.tsx`.
+ * The bare `fetch` calls (check-name + create) are routed through the typed
+ * `checkAppNameAvailable()` / `createApp()` helpers so the Steward Bearer token
+ * is attached; on success the apps list is invalidated and the user is sent to
+ * the new app's Monetization tab to set their inference markup.
+ *
+ * The API (`POST /api/v1/apps`) only requires `name` and `app_url`; everything
+ * else is optional or belongs on the detail page.
+ */
+interface CreateAppDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function CreateAppDialog({ open, onOpenChange }: CreateAppDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=create-app-dialog.d.ts.map

package/cloud/applications/components/create-app-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-app-dialog.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/applications/components/create-app-dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAsBH,UAAU,oBAAoB;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAiS3E"}

package/cloud/applications/components/create-app-dialog.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Create App dialog — name + app_url + smart defaults.
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/apps/_components/create-app-dialog.tsx`.
+ * The bare `fetch` calls (check-name + create) are routed through the typed
+ * `checkAppNameAvailable()` / `createApp()` helpers so the Steward Bearer token
+ * is attached; on success the apps list is invalidated and the user is sent to
+ * the new app's Monetization tab to set their inference markup.
+ *
+ * The API (`POST /api/v1/apps`) only requires `name` and `app_url`; everything
+ * else is optional or belongs on the detail page.
+ */
+import { useQueryClient } from "@tanstack/react-query";
+import { AlertCircle, Check, Copy, Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { Button } from "../../../components/ui/button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../../components/ui/dialog.js";
+import { Input } from "../../../components/ui/input.js";
+import { Label } from "../../../components/ui/label.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+import { APPS_QUERY_KEY, checkAppNameAvailable, createApp } from "../lib/apps.js";
+import { useCopyFeedback } from "../lib/use-copy-feedback.js";
+export function CreateAppDialog({ open, onOpenChange }) {
+    const t = useCloudT();
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const [isLoading, setIsLoading] = useState(false);
+    const [name, setName] = useState("");
+    const [appUrl, setAppUrl] = useState("");
+    const [createdApp, setCreatedApp] = useState(null);
+    const { copied, markCopied } = useCopyFeedback();
+    // Name availability check — keeps the existing /api/v1/apps/check-name
+    // debounce so the submit button reflects collisions before the user clicks.
+    const [nameAvailable, setNameAvailable] = useState(null);
+    const [checkingName, setCheckingName] = useState(false);
+    const checkTimerRef = useRef(null);
+    useEffect(() => {
+        if (checkTimerRef.current)
+            clearTimeout(checkTimerRef.current);
+        const trimmed = name.trim();
+        if (trimmed.length < 2) {
+            setNameAvailable(null);
+            setCheckingName(false);
+            return;
+        }
+        setCheckingName(true);
+        checkTimerRef.current = setTimeout(async () => {
+            try {
+                setNameAvailable(await checkAppNameAvailable(trimmed));
+            }
+            catch {
+                setNameAvailable(null);
+            }
+            finally {
+                setCheckingName(false);
+            }
+        }, 500);
+        return () => {
+            if (checkTimerRef.current)
+                clearTimeout(checkTimerRef.current);
+        };
+    }, [name]);
+    const isUrlValid = (() => {
+        try {
+            new URL(appUrl);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    })();
+    const isNameValid = name.trim().length >= 2 && nameAvailable !== false && !checkingName;
+    const canSubmit = isNameValid && isUrlValid && !isLoading;
+    const reset = () => {
+        setName("");
+        setAppUrl("");
+        setCreatedApp(null);
+        setNameAvailable(null);
+        setCheckingName(false);
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+        try {
+            const data = await createApp({
+                name: name.trim(),
+                app_url: appUrl.trim(),
+                allowed_origins: [appUrl.trim()],
+            });
+            setCreatedApp({ appId: data.app.id, apiKey: data.apiKey });
+            await queryClient.invalidateQueries({ queryKey: APPS_QUERY_KEY });
+            toast.success(t("cloud.apps.create.toastSuccess", {
+                defaultValue: "App created — copy the API key, you won't see it again",
+            }));
+        }
+        catch (error) {
+            toast.error(t("cloud.apps.create.errFailedCreate", {
+                defaultValue: "Failed to create app",
+            }), {
+                description: error instanceof Error
+                    ? error.message
+                    : t("cloud.apps.toast.tryAgain", {
+                        defaultValue: "Please try again",
+                    }),
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const copyApiKey = async () => {
+        if (!createdApp)
+            return;
+        await navigator.clipboard.writeText(createdApp.apiKey);
+        markCopied();
+        toast.success(t("cloud.apps.create.apiKeyCopied", { defaultValue: "API key copied" }));
+    };
+    const handleClose = () => {
+        const target = createdApp
+            ? `/dashboard/apps/${createdApp.appId}?tab=monetization`
+            : null;
+        reset();
+        onOpenChange(false);
+        if (target)
+            navigate(target);
+    };
+    if (createdApp) {
+        return (_jsx(Dialog, { open: open, onOpenChange: handleClose, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(Check, { className: "h-5 w-5 text-green-500" }), t("cloud.apps.create.successTitle", {
+                                        defaultValue: "App Created",
+                                    })] }), _jsx(DialogDescription, { children: t("cloud.apps.create.copyApiKeyHint", {
+                                    defaultValue: "Copy your API key now — you won't see it again.",
+                                }) })] }), _jsxs("div", { className: "space-y-2 py-4", children: [_jsx(Label, { className: "text-xs text-white/60", children: t("cloud.apps.create.apiKeyLabel", { defaultValue: "API Key" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: createdApp.apiKey, readOnly: true, className: "font-mono text-sm" }), _jsx(Button, { type: "button", variant: "outline", onClick: copyApiKey, className: "shrink-0", children: copied ? (_jsx(Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(Copy, { className: "h-4 w-4" })) })] }), _jsxs("p", { className: "text-xs text-white/40 leading-relaxed", children: [t("cloud.apps.create.apiKeyExplain1", {
+                                        defaultValue: "Most apps don't need this. Users sign in with their own Eliza Cloud account (OAuth), and your app forwards their JWT — earnings go to you, charges go to them. This key is only for",
+                                    }), " ", _jsx("strong", { children: t("cloud.apps.create.serverToServer", {
+                                            defaultValue: "server-to-server",
+                                        }) }), " ", t("cloud.apps.create.apiKeyExplain2", {
+                                        defaultValue: "calls where there's no logged-in user.",
+                                    })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: handleClose, className: "bg-[#FF5800] hover:bg-[#e54f00] w-full sm:w-auto", children: t("cloud.apps.create.setMarkupCta", {
+                                defaultValue: "Set Markup & Earnings →",
+                            }) }) })] }) }));
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t("cloud.apps.create.title", { defaultValue: "Create New App" }) }), _jsx(DialogDescription, { children: t("cloud.apps.create.desc", {
+                                defaultValue: "Just a name and a URL. You can set markup, allowed origins, and other settings on the app's detail page once it exists.",
+                            }) })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-5 py-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { htmlFor: "app-name", children: [t("cloud.apps.create.nameLabel", { defaultValue: "Name" }), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), checkingName && (_jsx(Loader2, { className: "h-3 w-3 animate-spin text-white/40" })), !checkingName && nameAvailable === true && (_jsxs("span", { className: "text-xs text-green-500 inline-flex items-center gap-1", children: [_jsx(Check, { className: "h-3 w-3" }), " ", t("cloud.apps.create.available", {
+                                                    defaultValue: "available",
+                                                })] })), !checkingName && nameAvailable === false && (_jsxs("span", { className: "text-xs text-red-400 inline-flex items-center gap-1", children: [_jsx(AlertCircle, { className: "h-3 w-3" }), " ", t("cloud.apps.create.taken", { defaultValue: "taken" })] }))] }), _jsx(Input, { id: "app-name", value: name, onChange: (e) => setName(e.target.value), placeholder: t("cloud.apps.create.namePlaceholder", {
+                                        defaultValue: "My App",
+                                    }), maxLength: 100, disabled: isLoading })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "app-url", children: [t("cloud.apps.create.urlLabel", { defaultValue: "App URL" }), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "app-url", value: appUrl, onChange: (e) => setAppUrl(e.target.value), placeholder: "https://myapp.com", type: "url", disabled: isLoading }), _jsx("p", { className: "text-xs text-white/40", children: t("cloud.apps.create.urlHint", {
+                                        defaultValue: "Where your app lives. Used as the default CORS origin and for affiliate redirects.",
+                                    }) })] }), _jsxs(DialogFooter, { className: "flex-col sm:flex-row gap-2 pt-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), className: "w-full sm:w-auto", children: t("cloud.apps.deleteDialog.cancel", { defaultValue: "Cancel" }) }), _jsx(Button, { type: "submit", disabled: !canSubmit, className: "bg-[#FF5800] hover:bg-[#e54f00] w-full sm:w-auto", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }), " ", t("cloud.apps.create.creating", {
+                                                defaultValue: "Creating...",
+                                            })] })) : (t("cloud.apps.createApp", { defaultValue: "Create App" })) })] })] })] }) }));
+}