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

package/cloud/handoff/run-cloud-agent-handoff.d.ts

@@ -0,0 +1,18 @@
+import type { ConversationHandoffResult } from "./conversation-handoff.js";
+/**
+ * Run the shared→dedicated cloud-agent handoff and surface its lifecycle as
+ * {@link dispatchCloudHandoffPhase} events: `migrating` up front, then the
+ * terminal status the supervisor returns (or `failed` if it throws).
+ *
+ * On a non-success terminal phase (`timed-out`/`failed`) it arms a one-shot
+ * retry: a {@link CLOUD_HANDOFF_RETRY_EVENT} for this `agentId` re-invokes
+ * `start`. The supervisor's import is idempotent, so retrying is safe and the
+ * user is never silently stranded on the shared adapter — the failure stays
+ * visible with a retry instead of being swallowed (the old
+ * `startCloudAgentHandoff(...).catch(() => {})`).
+ *
+ * `start` is a thunk so the caller owns the supervisor args (agent id, bases,
+ * token, `onSwitch` rebind) and this module stays decoupled + unit-testable.
+ */
+export declare function runCloudAgentHandoff(agentId: string, start: () => Promise<ConversationHandoffResult>): void;
+//# sourceMappingURL=run-cloud-agent-handoff.d.ts.map

package/cloud/handoff/run-cloud-agent-handoff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"run-cloud-agent-handoff.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/handoff/run-cloud-agent-handoff.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,OAAO,CAAC,yBAAyB,CAAC,GAC9C,IAAI,CAsBN"}

package/cloud/handoff/run-cloud-agent-handoff.js

@@ -0,0 +1,51 @@
+import { CLOUD_HANDOFF_RETRY_EVENT, dispatchCloudHandoffPhase, } from "../../events/index.js";
+/**
+ * Run the shared→dedicated cloud-agent handoff and surface its lifecycle as
+ * {@link dispatchCloudHandoffPhase} events: `migrating` up front, then the
+ * terminal status the supervisor returns (or `failed` if it throws).
+ *
+ * On a non-success terminal phase (`timed-out`/`failed`) it arms a one-shot
+ * retry: a {@link CLOUD_HANDOFF_RETRY_EVENT} for this `agentId` re-invokes
+ * `start`. The supervisor's import is idempotent, so retrying is safe and the
+ * user is never silently stranded on the shared adapter — the failure stays
+ * visible with a retry instead of being swallowed (the old
+ * `startCloudAgentHandoff(...).catch(() => {})`).
+ *
+ * `start` is a thunk so the caller owns the supervisor args (agent id, bases,
+ * token, `onSwitch` rebind) and this module stays decoupled + unit-testable.
+ */
+export function runCloudAgentHandoff(agentId, start) {
+    dispatchCloudHandoffPhase({ agentId, phase: "migrating" });
+    start()
+        .then((result) => {
+        dispatchCloudHandoffPhase({
+            agentId,
+            phase: result.status,
+            imported: result.imported,
+            ...(result.error ? { error: result.error } : {}),
+        });
+        if (result.status === "timed-out" || result.status === "failed") {
+            armRetry(agentId, start);
+        }
+    })
+        .catch((err) => {
+        dispatchCloudHandoffPhase({
+            agentId,
+            phase: "failed",
+            error: err instanceof Error ? err.message : String(err),
+        });
+        armRetry(agentId, start);
+    });
+}
+function armRetry(agentId, start) {
+    if (typeof window === "undefined")
+        return;
+    const onRetry = (event) => {
+        const detail = event.detail;
+        if (detail?.agentId !== agentId)
+            return;
+        window.removeEventListener(CLOUD_HANDOFF_RETRY_EVENT, onRetry);
+        runCloudAgentHandoff(agentId, start);
+    };
+    window.addEventListener(CLOUD_HANDOFF_RETRY_EVENT, onRetry);
+}

package/cloud/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Barrel for the app-hosted Eliza Cloud surfaces.
+ *
+ * Shared infrastructure (typed API client, react-query client, steward-session
+ * glue) and the self-registering cloud-route registry live here. Domain modules
+ * under `cloud/<domain>/` register their routes/sections against these
+ * contracts; the app shell imports from `@elizaos/ui` via
+ * `export * as cloud from "./cloud"`.
+ */
+export * from "./lib/api-client.js";
+export * from "./lib/query-client.js";
+export * from "./lib/steward-session.js";
+export * from "./shell/cloud-route-registry.js";
+//# sourceMappingURL=index.d.ts.map

package/cloud/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/cloud/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC"}

package/cloud/index.js

@@ -0,0 +1,13 @@
+/**
+ * Barrel for the app-hosted Eliza Cloud surfaces.
+ *
+ * Shared infrastructure (typed API client, react-query client, steward-session
+ * glue) and the self-registering cloud-route registry live here. Domain modules
+ * under `cloud/<domain>/` register their routes/sections against these
+ * contracts; the app shell imports from `@elizaos/ui` via
+ * `export * as cloud from "./cloud"`.
+ */
+export * from "./lib/api-client.js";
+export * from "./lib/query-client.js";
+export * from "./lib/steward-session.js";
+export * from "./shell/cloud-route-registry.js";

package/cloud/instances/AgentChatPage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * In-dashboard quick chat (`/dashboard/agents/:id/chat`).
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/agents/[id]/chat/Page.tsx`. This is the
+ * lightweight JSON-RPC bridge chat kept as a convenience for a quick exchange
+ * from the management surface; for dedicated agents it offers "Open web UI"
+ * (the real full Eliza experience via the pairing flow). The richer connect →
+ * chat flow against the active cloud server lives in the app's main chat
+ * surface.
+ */
+export default function AgentChatPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AgentChatPage.d.ts.map

package/cloud/instances/AgentChatPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentChatPage.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/instances/AgentChatPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAmZH,MAAM,CAAC,OAAO,UAAU,aAAa,4CA0CpC"}

package/cloud/instances/AgentChatPage.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrandButton, DashboardErrorState, DashboardLoadingState, } from "@elizaos/ui/cloud-ui";
+import { ArrowLeft, ExternalLink, Loader2, MessageCircle, RefreshCw, Send, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Link, Navigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { ApiError, api } from "../lib/api-client.js";
+import { useDocumentTitle } from "../lib/use-document-title.js";
+import { useAgent } from "./lib/data/eliza-agents.js";
+import { useT } from "./lib/i18n.js";
+import { openWebUIWithPairing } from "./lib/open-web-ui.js";
+import { useRequireAuth } from "./lib/use-session-auth.js";
+function getErrorMessage(error) {
+    if (error instanceof ApiError)
+        return error.message;
+    return error.message;
+}
+function displayName(agent) {
+    const name = agent.agentName;
+    if (name && name.trim().length > 0)
+        return name;
+    return agent.id.slice(0, 8);
+}
+function bridgeReplyText(result) {
+    if (!result)
+        return null;
+    if (typeof result.text === "string" && result.text.trim().length > 0) {
+        return result.text;
+    }
+    if (typeof result.response === "string" &&
+        result.response.trim().length > 0) {
+        return result.response;
+    }
+    if (typeof result.message === "string" && result.message.trim().length > 0) {
+        return result.message;
+    }
+    return null;
+}
+function AgentBridgeChat({ agent }) {
+    const t = useT();
+    const name = useMemo(() => displayName(agent), [agent]);
+    const [messages, setMessages] = useState([]);
+    const [inputText, setInputText] = useState("");
+    const [isSending, setIsSending] = useState(false);
+    const [bridgeState, setBridgeState] = useState("idle");
+    const [bridgeError, setBridgeError] = useState(null);
+    const [chatAvailable, setChatAvailable] = useState(true);
+    const messagesEndRef = useRef(null);
+    const isRunning = agent.status === "running";
+    const hasStandaloneWebUi = agent.executionTier !== "shared" && Boolean(agent.webUiUrl);
+    const canUseBridgeChat = isRunning && chatAvailable;
+    useEffect(() => {
+        if (messages.length === 0 && !isSending)
+            return;
+        messagesEndRef.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "end",
+        });
+    }, [isSending, messages.length]);
+    const postBridge = useCallback((method, params) => api(`/api/v1/eliza/agents/${agent.id}/bridge`, {
+        method: "POST",
+        json: {
+            jsonrpc: "2.0",
+            id: `${method}-${Date.now()}`,
+            method,
+            params,
+        },
+    }), [agent.id]);
+    const checkBridge = useCallback(async () => {
+        if (!isRunning)
+            return;
+        setBridgeState("checking");
+        setBridgeError(null);
+        try {
+            const response = await postBridge("status.get", {});
+            if (response.error)
+                throw new Error(response.error.message);
+            setChatAvailable(response.result?.chat !== false);
+            setBridgeState("ready");
+        }
+        catch (error) {
+            const message = getErrorMessage(error instanceof Error ? error : new Error(String(error)));
+            setChatAvailable(true);
+            setBridgeState("error");
+            setBridgeError(message);
+        }
+    }, [isRunning, postBridge]);
+    useEffect(() => {
+        void checkBridge();
+    }, [checkBridge]);
+    const sendMessage = useCallback(async () => {
+        const text = inputText.trim();
+        if (!text || isSending || !canUseBridgeChat)
+            return;
+        const requestId = Date.now();
+        const userMessage = {
+            id: `user-${requestId}`,
+            role: "user",
+            text,
+        };
+        setMessages((current) => [...current, userMessage]);
+        setInputText("");
+        setIsSending(true);
+        setBridgeError(null);
+        try {
+            const response = await postBridge("message.send", {
+                text,
+                userId: "dashboard",
+                roomId: `dashboard-${agent.id}`,
+            });
+            if (response.error)
+                throw new Error(response.error.message);
+            const reply = bridgeReplyText(response.result);
+            if (!reply)
+                throw new Error("Agent returned an empty response");
+            setMessages((current) => [
+                ...current,
+                {
+                    id: `agent-${Date.now()}`,
+                    role: "agent",
+                    text: reply,
+                },
+            ]);
+            setBridgeState("ready");
+        }
+        catch (error) {
+            const message = getErrorMessage(error instanceof Error ? error : new Error(String(error)));
+            setBridgeState("error");
+            setBridgeError(message);
+            setMessages((current) => [
+                ...current,
+                {
+                    id: `system-${Date.now()}`,
+                    role: "system",
+                    text: message,
+                },
+            ]);
+            toast.error(message);
+        }
+        finally {
+            setIsSending(false);
+        }
+    }, [agent.id, canUseBridgeChat, inputText, isSending, postBridge]);
+    return (_jsxs("div", { className: "max-w-4xl mx-auto space-y-6", children: [_jsxs(Link, { to: `/dashboard/agents/${agent.id}`, className: "group inline-flex items-center gap-2 text-sm text-white/50 hover:text-white transition-colors", children: [_jsx("div", { className: "flex items-center justify-center w-7 h-7 bg-black/40 group-hover:bg-white/10 transition-colors", children: _jsx(ArrowLeft, { className: "h-3.5 w-3.5" }) }), _jsx("span", { children: t("cloud.agents.chat.backToAgent", {
+                            defaultValue: "Back to agent",
+                        }) })] }), _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center border border-[#FF5800]/25 bg-[#FF5800]/10", children: _jsx(MessageCircle, { className: "h-5 w-5 text-[#FF5800]" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "truncate text-xl font-semibold text-white", style: { fontFamily: "var(--font-roboto-mono)" }, children: t("cloud.agents.chat.titleWithName", {
+                                            defaultValue: "Chat — {{name}}",
+                                            name,
+                                        }) }), _jsx("p", { className: "truncate font-mono text-xs text-white/40", children: agent.id })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(BrandButton, { variant: "outline", size: "sm", onClick: checkBridge, disabled: !isRunning || bridgeState === "checking", children: [bridgeState === "checking" ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(RefreshCw, { className: "h-3.5 w-3.5" })), t("cloud.agents.chat.refresh", { defaultValue: "Refresh" })] }), hasStandaloneWebUi && isRunning && (_jsxs(BrandButton, { variant: "primary", size: "sm", onClick: () => openWebUIWithPairing(agent.id), children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), t("cloud.agents.chat.openWebUi", {
+                                        defaultValue: "Open web UI",
+                                    })] }))] })] }), _jsx("div", { className: "border border-white/10 bg-black", children: _jsxs("div", { className: "flex min-h-[420px] flex-col", children: [!isRunning && (_jsxs("div", { className: "border-b border-yellow-500/20 bg-yellow-500/5 px-4 py-3 text-sm text-yellow-200/80", children: [t("cloud.agents.chat.agentIsStatus", {
+                                    defaultValue: "This agent is",
+                                }), " ", _jsx("span", { className: "font-mono", children: agent.status }), ".", " ", t("cloud.agents.chat.startBeforeChat", {
+                                    defaultValue: "Start the agent before chatting.",
+                                })] })), bridgeError && isRunning && (_jsx("div", { className: "border-b border-red-500/20 bg-red-500/5 px-4 py-3 text-sm text-red-200/80", children: bridgeError })), chatAvailable === false && isRunning && (_jsx("div", { className: "border-b border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-white/60", children: t("cloud.agents.chat.webOnly", {
+                                defaultValue: "This custom app is online. Chat is handled by its Web UI.",
+                            }) })), _jsxs("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [messages.length === 0 ? (_jsx("div", { className: "flex h-full min-h-[280px] items-center justify-center text-center text-sm text-white/35", children: chatAvailable === false && isRunning
+                                        ? t("cloud.agents.chat.emptyWebOnly", {
+                                            defaultValue: "Open the Web UI to interact with this app.",
+                                        })
+                                        : isRunning
+                                            ? t("cloud.agents.chat.emptyReady", {
+                                                defaultValue: "Send a message to start this session.",
+                                            })
+                                            : t("cloud.agents.chat.emptyStopped", {
+                                                defaultValue: "Agent chat is unavailable while stopped.",
+                                            }) })) : (messages.map((message) => (_jsx("div", { className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, children: _jsx("div", { className: `max-w-[85%] whitespace-pre-wrap border px-3 py-2 text-sm leading-6 ${message.role === "user"
+                                            ? "border-[#FF5800]/35 bg-[#FF5800]/10 text-white"
+                                            : message.role === "agent"
+                                                ? "border-white/10 bg-white/[0.04] text-white/90"
+                                                : "border-red-500/20 bg-red-500/5 text-red-200/80"}`, children: message.text }) }, message.id)))), isSending && (_jsx("div", { className: "flex justify-start", children: _jsxs("div", { className: "inline-flex items-center gap-2 border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white/55", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }), t("cloud.agents.chat.waiting", {
+                                                defaultValue: "Waiting for reply",
+                                            })] }) })), _jsx("div", { ref: messagesEndRef })] }), _jsx("form", { className: "border-t border-white/10 p-3", onSubmit: (event) => {
+                                event.preventDefault();
+                                void sendMessage();
+                            }, children: _jsxs("div", { className: "flex gap-2", children: [_jsx("textarea", { value: inputText, onChange: (event) => setInputText(event.target.value), disabled: !canUseBridgeChat || isSending, rows: 2, placeholder: chatAvailable === false
+                                            ? t("cloud.agents.chat.webOnlyPlaceholder", {
+                                                defaultValue: "Open the Web UI to interact",
+                                            })
+                                            : t("cloud.agents.chat.placeholder", {
+                                                defaultValue: "Message this agent",
+                                            }), className: "min-h-12 flex-1 resize-none border border-white/10 bg-black px-3 py-2 text-sm leading-6 text-white outline-none transition-colors placeholder:text-white/25  disabled:cursor-not-allowed disabled:text-white/30" }), _jsxs(BrandButton, { type: "submit", variant: "primary", size: "sm", disabled: !canUseBridgeChat ||
+                                            isSending ||
+                                            inputText.trim().length === 0, className: "h-auto self-stretch px-3", children: [isSending ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (_jsx(Send, { className: "h-4 w-4" })), _jsx("span", { className: "sr-only", children: t("cloud.agents.chat.send", { defaultValue: "Send" }) })] })] }) })] }) })] }));
+}
+export default function AgentChatPage() {
+    const t = useT();
+    const session = useRequireAuth();
+    const { id } = useParams();
+    const enabled = session.ready && session.authenticated;
+    const query = useAgent(enabled ? id : undefined);
+    const titleId = id ? id.slice(0, 8) : "";
+    useDocumentTitle(t("cloud.agents.chat.metaTitleLoading", {
+        defaultValue: "Chat {{id}} — Agent",
+        id: titleId,
+    }));
+    if (!session.ready || (enabled && query.isLoading)) {
+        return (_jsx(DashboardLoadingState, { label: t("cloud.agents.chat.loading", {
+                defaultValue: "Loading agent",
+            }) }));
+    }
+    if (query.error instanceof ApiError && query.error.status === 404) {
+        return _jsx(Navigate, { to: "/dashboard/agents", replace: true });
+    }
+    if (query.error) {
+        const msg = query.error instanceof Error
+            ? query.error.message
+            : t("cloud.agents.chat.errorFailedLoad", {
+                defaultValue: "Failed to load agent",
+            });
+        return _jsx(DashboardErrorState, { message: msg });
+    }
+    const agent = query.data;
+    if (!agent)
+        return _jsx(Navigate, { to: "/dashboard/agents", replace: true });
+    return _jsx(AgentBridgeChat, { agent: agent });
+}

package/cloud/instances/AgentDetailPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Agent detail page (`/dashboard/agents/:id`).
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/agents/[id]/Page.tsx`.
+ */
+export default function AgentDetailPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AgentDetailPage.d.ts.map

package/cloud/instances/AgentDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentDetailPage.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/instances/AgentDetailPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AA4EH,MAAM,CAAC,OAAO,UAAU,eAAe,4CA6atC"}

package/cloud/instances/AgentDetailPage.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Agent detail page (`/dashboard/agents/:id`).
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/agents/[id]/Page.tsx`.
+ */
+import { AGENT_PRICING } from "@elizaos/cloud-shared/lib/constants/agent-pricing";
+import { formatHourlyRate, formatMonthlyEstimate, } from "@elizaos/cloud-shared/lib/constants/agent-pricing-display";
+import { Badge, DashboardErrorState, DashboardLoadingState, } from "@elizaos/ui/cloud-ui";
+import { AlertCircle, ArrowLeft, Cloud, ExternalLink, MessageCircle, Server, Terminal, } from "lucide-react";
+import { Link, Navigate, useParams } from "react-router-dom";
+import { ApiError } from "../lib/api-client.js";
+import { useDocumentTitle } from "../lib/use-document-title.js";
+import { ElizaAgentActions } from "./components/agent-actions.js";
+import { DockerLogsViewer } from "./components/docker-logs-viewer.js";
+import { ElizaAgentBackupsPanel } from "./components/eliza-agent-backups-panel.js";
+import { ElizaAgentLogsViewer } from "./components/eliza-agent-logs-viewer.js";
+import { ElizaAgentTabs } from "./components/eliza-agent-tabs.js";
+import { ElizaConnectButton } from "./components/eliza-connect-button.js";
+import { useAgent } from "./lib/data/eliza-agents.js";
+import { useT } from "./lib/i18n.js";
+import { statusBadgeColor, statusDotColor } from "./lib/sandbox-status.js";
+import { useRequireAuth } from "./lib/use-session-auth.js";
+function formatDate(date) {
+    if (!date)
+        return "—";
+    return new Date(date).toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+}
+function formatTime(date) {
+    if (!date)
+        return "";
+    return new Date(date).toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+}
+function formatRelativeShort(date, t) {
+    if (!date)
+        return t("cloud.agents.detail.never", { defaultValue: "Never" });
+    const d = new Date(date);
+    const diffMs = Date.now() - d.getTime();
+    const diffMin = Math.floor(diffMs / 60_000);
+    if (diffMin < 1)
+        return t("cloud.agents.detail.justNow", { defaultValue: "Just now" });
+    if (diffMin < 60)
+        return t("cloud.agents.detail.minutesAgo", {
+            defaultValue: "{{n}}m ago",
+            n: diffMin,
+        });
+    const diffH = Math.floor(diffMin / 60);
+    if (diffH < 24)
+        return t("cloud.agents.detail.hoursAgo", {
+            defaultValue: "{{n}}h ago",
+            n: diffH,
+        });
+    return formatDate(date);
+}
+export default function AgentDetailPage() {
+    const t = useT();
+    const session = useRequireAuth();
+    const { id } = useParams();
+    const enabled = session.ready && session.authenticated;
+    const query = useAgent(enabled ? id : undefined);
+    const titleId = id ? id.slice(0, 8) : "";
+    useDocumentTitle(t("cloud.agents.detail.metaTitle", {
+        defaultValue: "Agent {{id}} — Instances",
+        id: titleId,
+    }));
+    if (!session.ready || (enabled && query.isLoading)) {
+        return (_jsx(DashboardLoadingState, { label: t("cloud.agents.detail.loading", {
+                defaultValue: "Loading agent",
+            }) }));
+    }
+    if (query.error instanceof ApiError && query.error.status === 404) {
+        return _jsx(Navigate, { to: "/dashboard/agents", replace: true });
+    }
+    if (query.error) {
+        const msg = query.error instanceof Error
+            ? query.error.message
+            : t("cloud.agents.detail.errorFailedLoad", {
+                defaultValue: "Failed to load agent",
+            });
+        return _jsx(DashboardErrorState, { message: msg });
+    }
+    const agent = query.data;
+    if (!agent)
+        return _jsx(Navigate, { to: "/dashboard/agents", replace: true });
+    const badgeColor = statusBadgeColor(agent.status);
+    const dotColor = statusDotColor(agent.status);
+    const isRunningish = agent.status === "running" || agent.status === "provisioning";
+    const isIdle = agent.status === "stopped" || agent.status === "disconnected";
+    const adminDetails = agent.adminDetails;
+    const isDockerBacked = adminDetails?.isDockerBacked ?? false;
+    const showConnect = !!agent.webUiUrl && agent.status === "running";
+    return (_jsxs("div", { className: "max-w-5xl mx-auto space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Link, { to: "/dashboard/agents", className: "group flex items-center gap-2 text-sm text-white/50 hover:text-white transition-colors", children: [_jsx("div", { className: "flex items-center justify-center w-7 h-7 bg-black/40 group-hover:bg-white/10 transition-colors", children: _jsx(ArrowLeft, { className: "h-3.5 w-3.5" }) }), _jsx("span", { children: t("cloud.agents.detail.backToInstances", {
+                                    defaultValue: "Instances",
+                                }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [agent.status === "running" && (_jsxs(Link, { to: `/dashboard/agents/${agent.id}/chat`, className: "inline-flex items-center gap-1.5 h-8 px-3 text-sm font-medium bg-[var(--brand-orange)] text-black hover:bg-foreground hover:text-background transition-colors", children: [_jsx(MessageCircle, { className: "h-3.5 w-3.5" }), t("cloud.agents.detail.chat", { defaultValue: "Chat" })] })), showConnect && _jsx(ElizaConnectButton, { agentId: agent.id })] })] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex items-center justify-center w-12 h-12 border border-[var(--brand-orange)]/25 bg-[var(--brand-orange)]/10 shrink-0", children: isDockerBacked ? (_jsx(Server, { className: "h-6 w-6 text-[var(--brand-orange)]" })) : (_jsx(Cloud, { className: "h-6 w-6 text-[var(--brand-orange)]" })) }), _jsxs("div", { className: "min-w-0 space-y-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [_jsx("h1", { className: "text-2xl font-semibold text-white truncate", style: { fontFamily: "var(--font-roboto-mono)" }, children: agent.agentName ??
+                                                t("cloud.agents.detail.unnamedAgent", {
+                                                    defaultValue: "Unnamed Agent",
+                                                }) }), _jsxs(Badge, { variant: "outline", className: `${badgeColor} text-xs font-medium px-2 py-0.5`, children: [_jsx("span", { className: `inline-block size-1.5 rounded-full mr-1.5 ${dotColor}` }), agent.status] })] }), _jsx("div", { className: "flex items-center gap-3 text-xs text-white/35", children: _jsx("span", { className: "font-mono tabular-nums", children: agent.id }) })] })] }) }), _jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-5 gap-px bg-white/5 border border-white/10", children: [_jsxs("div", { className: "bg-black/60 p-4 space-y-1", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em] text-white/35", children: t("cloud.agents.detail.statusLabel", { defaultValue: "Status" }) }), _jsx("p", { className: "text-lg font-medium text-white capitalize tabular-nums", style: { fontFamily: "var(--font-roboto-mono)" }, children: agent.status })] }), _jsxs("div", { className: "bg-black/60 p-4 space-y-1", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em] text-white/35", children: t("cloud.agents.detail.databaseLabel", {
+                                    defaultValue: "Database",
+                                }) }), _jsx("p", { className: "text-lg font-medium text-white tabular-nums", style: { fontFamily: "var(--font-roboto-mono)" }, children: agent.databaseStatus === "ready"
+                                    ? t("cloud.agents.detail.dbConnected", {
+                                        defaultValue: "Connected",
+                                    })
+                                    : agent.databaseStatus === "provisioning"
+                                        ? t("cloud.agents.detail.dbSettingUp", {
+                                            defaultValue: "Setting up",
+                                        })
+                                        : agent.databaseStatus === "none"
+                                            ? t("cloud.agents.detail.dbNone", { defaultValue: "None" })
+                                            : t("cloud.agents.detail.dbError", {
+                                                defaultValue: "Error",
+                                            }) })] }), _jsxs("div", { className: "bg-black/60 p-4 space-y-1", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em] text-white/35", children: t("cloud.agents.detail.costLabel", { defaultValue: "Cost" }) }), _jsx("p", { className: "text-lg font-medium text-white tabular-nums", style: { fontFamily: "var(--font-roboto-mono)" }, children: isRunningish
+                                    ? formatHourlyRate(AGENT_PRICING.RUNNING_HOURLY_RATE)
+                                    : isIdle
+                                        ? formatHourlyRate(AGENT_PRICING.IDLE_HOURLY_RATE)
+                                        : "—" }), (isRunningish || isIdle) && (_jsx("p", { className: "text-[10px] text-white/30 tabular-nums", children: isRunningish
+                                    ? formatMonthlyEstimate(AGENT_PRICING.RUNNING_HOURLY_RATE)
+                                    : formatMonthlyEstimate(AGENT_PRICING.IDLE_HOURLY_RATE) }))] }), _jsxs("div", { className: "bg-black/60 p-4 space-y-1", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em] text-white/35", children: t("cloud.agents.detail.createdLabel", {
+                                    defaultValue: "Created",
+                                }) }), _jsx("p", { className: "text-lg font-medium text-white tabular-nums", style: { fontFamily: "var(--font-roboto-mono)" }, children: formatDate(agent.createdAt) }), _jsx("p", { className: "text-[10px] text-white/30 tabular-nums", children: formatTime(agent.createdAt) })] }), _jsxs("div", { className: "bg-black/60 p-4 space-y-1", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em] text-white/35", children: t("cloud.agents.detail.lastHeartbeatLabel", {
+                                    defaultValue: "Last Heartbeat",
+                                }) }), _jsx("p", { className: "text-lg font-medium text-white tabular-nums", style: { fontFamily: "var(--font-roboto-mono)" }, children: formatRelativeShort(agent.lastHeartbeatAt, t) }), agent.lastHeartbeatAt && (_jsx("p", { className: "text-[10px] text-white/30 tabular-nums", children: formatDate(agent.lastHeartbeatAt) }))] })] }), _jsxs(ElizaAgentTabs, { agentId: agent.id, children: [agent.errorMessage && (_jsxs("div", { className: "flex items-start gap-3 p-4 bg-red-950/20 border border-red-500/20", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-red-400 shrink-0 mt-0.5" }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx("p", { className: "text-sm font-medium text-red-400", children: t("cloud.agents.detail.errorWithCount", {
+                                            defaultValue: "Error ({{n}} occurrence{{plural}})",
+                                            n: agent.errorCount,
+                                            plural: agent.errorCount !== 1 ? "s" : "",
+                                        }) }), _jsx("p", { className: "text-sm text-red-400/70", children: agent.errorMessage })] })] })), agent.webUiUrl && (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block size-2 bg-[var(--brand-orange)]" }), _jsx("p", { className: "font-mono text-[11px] uppercase tracking-[0.32em] text-white/60", children: t("cloud.agents.detail.webUi", { defaultValue: "Web UI" }) })] }), _jsxs("div", { className: "border border-white/10 bg-black/40 px-4 py-3 flex items-start gap-3 text-sm", children: [_jsx("span", { className: "text-[11px] uppercase tracking-widest text-white/35 shrink-0 pt-0.5", children: t("cloud.agents.detail.publicUrl", {
+                                            defaultValue: "Public URL",
+                                        }) }), _jsx("a", { href: agent.webUiUrl, target: "_blank", rel: "noopener noreferrer", className: "text-white/74 hover:text-white font-mono text-xs break-all transition-colors", children: agent.webUiUrl })] })] })), adminDetails && isDockerBacked && (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block size-2 bg-[var(--brand-orange)]" }), _jsx("p", { className: "font-mono text-[11px] uppercase tracking-[0.32em] text-white/60", children: t("cloud.agents.detail.infrastructure", {
+                                            defaultValue: "Infrastructure",
+                                        }) })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/5 border border-white/10", children: [_jsx(InfoCell, { label: t("cloud.agents.detail.node", { defaultValue: "Node" }), value: adminDetails.nodeId ?? "—", mono: true }), _jsx(InfoCell, { label: t("cloud.agents.detail.container", {
+                                            defaultValue: "Container",
+                                        }), value: adminDetails.containerName ?? "—", mono: true }), _jsx(InfoCell, { label: t("cloud.agents.detail.dockerImage", {
+                                            defaultValue: "Docker Image",
+                                        }), value: adminDetails.dockerImage ?? "—", mono: true }), adminDetails.headscaleIp && (_jsx(InfoCell, { label: t("cloud.agents.detail.vpnIp", {
+                                            defaultValue: "VPN IP",
+                                        }), value: adminDetails.headscaleIp, mono: true, accent: "emerald" })), adminDetails.bridgePort !== null && (_jsx(InfoCell, { label: t("cloud.agents.detail.bridgePort", {
+                                            defaultValue: "Bridge Port",
+                                        }), value: String(adminDetails.bridgePort), mono: true })), adminDetails.webUiPort !== null && (_jsx(InfoCell, { label: t("cloud.agents.detail.webUiPort", {
+                                            defaultValue: "Web UI Port",
+                                        }), value: String(adminDetails.webUiPort), mono: true }))] })] })), adminDetails?.sshCommand && (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block size-2 bg-[var(--brand-orange)]" }), _jsx("p", { className: "font-mono text-[11px] uppercase tracking-[0.32em] text-white/60", children: t("cloud.agents.detail.sshAccess", {
+                                            defaultValue: "SSH Access",
+                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border border-white/10 bg-black/60", children: [_jsx(Terminal, { className: "h-4 w-4 text-green-400 shrink-0" }), _jsx("code", { className: "text-sm text-green-400 font-mono flex-1", style: { fontFamily: "var(--font-roboto-mono)" }, children: adminDetails.sshCommand })] }), adminDetails.bridgePort !== null && adminDetails.headscaleIp && (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border border-white/10 bg-black/60", children: [_jsx(Terminal, { className: "h-4 w-4 text-[#FF5800] shrink-0" }), _jsx("code", { className: "text-sm text-[#FF5800] font-mono flex-1", style: { fontFamily: "var(--font-roboto-mono)" }, children: `curl http://${adminDetails.headscaleIp}:${adminDetails.bridgePort}/health` })] }))] })] })), adminDetails && !isDockerBacked && agent.bridgeUrl && (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block size-2 bg-[var(--brand-orange)]" }), _jsx("p", { className: "font-mono text-[11px] uppercase tracking-[0.32em] text-white/60", children: t("cloud.agents.detail.sandboxConnection", {
+                                            defaultValue: "Sandbox Connection",
+                                        }) })] }), _jsxs("div", { className: "border border-white/10 bg-black/40 px-4 py-3 flex items-start gap-3", children: [_jsx("span", { className: "text-[11px] uppercase tracking-widest text-white/35 shrink-0 pt-0.5", children: t("cloud.agents.detail.bridgeUrl", {
+                                            defaultValue: "Bridge URL",
+                                        }) }), _jsxs("a", { href: agent.bridgeUrl, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-white/70 hover:text-white flex items-center gap-1 transition-colors font-mono break-all", children: [agent.bridgeUrl, _jsx(ExternalLink, { className: "h-3 w-3 shrink-0" })] })] })] })), _jsx(ElizaAgentActions, { agentId: agent.id, executionTier: agent.executionTier, status: agent.status, webUiUrl: agent.webUiUrl }), _jsx(ElizaAgentBackupsPanel, { agentId: agent.id, agentName: agent.agentName ??
+                            t("cloud.agents.detail.unnamedAgent", {
+                                defaultValue: "Unnamed Agent",
+                            }), status: agent.status }), _jsx(ElizaAgentLogsViewer, { agentId: agent.id, agentName: agent.agentName ??
+                            t("cloud.agents.detail.unnamedAgent", {
+                                defaultValue: "Unnamed Agent",
+                            }), status: agent.status, showAdvancedHint: !!adminDetails && isDockerBacked }), adminDetails &&
+                        isDockerBacked &&
+                        adminDetails.containerName &&
+                        adminDetails.nodeId && (_jsx(DockerLogsViewer, { sandboxId: agent.id, containerName: adminDetails.containerName, nodeId: adminDetails.nodeId }))] })] }));
+}
+function InfoCell({ label, value, mono = false, accent, }) {
+    const valueColor = accent === "emerald"
+        ? "text-green-400"
+        : accent === "orange"
+            ? "text-orange-400"
+            : "text-white/80";
+    return (_jsxs("div", { className: "bg-black/60 p-4 space-y-1 min-w-0", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em] text-white/35", children: label }), _jsx("p", { className: `text-sm font-medium ${valueColor} break-all ${mono ? "font-mono" : ""}`, style: mono ? { fontFamily: "var(--font-roboto-mono)" } : undefined, children: value })] }));
+}

package/cloud/instances/AgentsPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Instances page (`/dashboard/agents`) — the hosted agent management table.
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/agents/Page.tsx`.
+ */
+export default function AgentsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AgentsPage.d.ts.map

package/cloud/instances/AgentsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentsPage.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/instances/AgentsPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AA0CH,MAAM,CAAC,OAAO,UAAU,UAAU,4CA0DjC"}

package/cloud/instances/AgentsPage.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContainersSkeleton, DashboardLoadingState, DashboardPageContainer, ElizaAgentsPageWrapper, } from "@elizaos/ui/cloud-ui";
+import { useDocumentTitle } from "../lib/use-document-title.js";
+import { ElizaAgentPricingBanner } from "./components/eliza-agent-pricing-banner.js";
+import { ElizaAgentsTable, } from "./components/eliza-agents-table.js";
+import { useCreditsBalance } from "./lib/data/credits.js";
+import { useAgents } from "./lib/data/eliza-agents.js";
+import { useT } from "./lib/i18n.js";
+import { useRequireAuth } from "./lib/use-session-auth.js";
+function toAgentRow(a) {
+    return {
+        id: a.id,
+        agent_name: a.agentName,
+        status: a.status,
+        canonical_web_ui_url: a.webUiUrl,
+        node_id: null,
+        container_name: null,
+        bridge_port: null,
+        web_ui_port: null,
+        headscale_ip: null,
+        docker_image: a.dockerImage,
+        execution_tier: a.executionTier,
+        sandbox_id: null,
+        bridge_url: null,
+        error_message: a.errorMessage,
+        last_heartbeat_at: a.lastHeartbeatAt,
+        created_at: a.createdAt,
+        updated_at: a.updatedAt,
+    };
+}
+export default function AgentsPage() {
+    const t = useT();
+    const session = useRequireAuth();
+    const enabled = session.ready && session.authenticated;
+    const agentsQuery = useAgents();
+    const credits = useCreditsBalance();
+    useDocumentTitle(t("cloud.agents.metaTitle", { defaultValue: "Instances" }));
+    if (!session.ready) {
+        return (_jsx(DashboardLoadingState, { label: t("cloud.agents.loading", {
+                defaultValue: "Loading instances",
+            }) }));
+    }
+    const agents = agentsQuery.data ?? [];
+    const sandboxes = agents.map(toAgentRow);
+    const runningCount = agents.filter((a) => a.status === "running").length;
+    const idleCount = agents.filter((a) => a.status === "stopped" || a.status === "disconnected").length;
+    const creditBalance = typeof credits.data?.balance === "number" ? credits.data.balance : null;
+    const showSkeleton = enabled && agentsQuery.isLoading;
+    return (_jsx(ElizaAgentsPageWrapper, { children: _jsxs(DashboardPageContainer, { className: "space-y-6", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "inline-block size-2 bg-[#FF5800]" }), _jsx("p", { className: "font-mono text-[11px] uppercase tracking-[0.32em] text-white/60", children: t("cloud.agents.eyebrow", { defaultValue: "Instances" }) })] }), _jsx("h1", { className: "text-xl font-semibold text-white md:text-2xl", children: t("cloud.agents.title", { defaultValue: "Instances" }) })] }), _jsx(ElizaAgentPricingBanner, { runningCount: runningCount, idleCount: idleCount, creditBalance: creditBalance }), showSkeleton ? (_jsx(ContainersSkeleton, {})) : (_jsx(ElizaAgentsTable, { sandboxes: sandboxes }))] }) }));
+}

package/cloud/instances/MyAgentsPage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * "My Agent" page (`/dashboard/my-agents`) — the character library + agent
+ * console. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/my-agents/Page.tsx`.
+ */
+export default function MyAgentsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MyAgentsPage.d.ts.map

package/cloud/instances/MyAgentsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyAgentsPage.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/instances/MyAgentsPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,MAAM,CAAC,OAAO,UAAU,YAAY,4CAiBnC"}