@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/LifoMonitorPanel.d.ts

@@ -0,0 +1,21 @@
+import type { SandboxBrowserEndpoints, SandboxWindowInfo } from "../api/client";
+interface LifoMonitorPanelProps {
+    monitorOnline: boolean;
+    monitorError: string | null;
+    monitorUpdatedAt: number | null;
+    noVncActive: boolean;
+    safeNoVncEndpoint: string | null;
+    noVncFailed: boolean;
+    setNoVncFailed: React.Dispatch<React.SetStateAction<boolean>>;
+    screenPreviewUrl: string | null;
+    browserEndpoints: SandboxBrowserEndpoints | null;
+    sandboxWindows: SandboxWindowInfo[];
+    noVncEndpoint: string | null;
+    refreshMonitorMeta: () => Promise<void>;
+    refreshScreenPreview: () => Promise<void>;
+    setMonitorOnline: React.Dispatch<React.SetStateAction<boolean>>;
+    setMonitorError: React.Dispatch<React.SetStateAction<string | null>>;
+}
+export declare function LifoMonitorPanel({ monitorOnline, monitorError, monitorUpdatedAt, noVncActive, safeNoVncEndpoint, noVncFailed, setNoVncFailed, screenPreviewUrl, browserEndpoints, sandboxWindows, noVncEndpoint, refreshMonitorMeta, refreshScreenPreview, setMonitorOnline, setMonitorError, }: LifoMonitorPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LifoMonitorPanel.d.ts.map

package/components/LifoMonitorPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LifoMonitorPanel.d.ts","sourceRoot":"","sources":["../../src/components/LifoMonitorPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGhF,UAAU,qBAAqB;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACjD,cAAc,EAAE,iBAAiB,EAAE,CAAC;IACpC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,oBAAoB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAChE,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACtE;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,GAChB,EAAE,qBAAqB,2CA6JvB"}

package/components/LifoMonitorPanel.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useApp } from "../state";
+export function LifoMonitorPanel({ monitorOnline, monitorError, monitorUpdatedAt, noVncActive, safeNoVncEndpoint, noVncFailed, setNoVncFailed, screenPreviewUrl, browserEndpoints, sandboxWindows, noVncEndpoint, refreshMonitorMeta, refreshScreenPreview, setMonitorOnline, setMonitorError, }) {
+    const { t } = useApp();
+    return (_jsxs("div", { className: "grid grid-cols-1 xl:grid-cols-[2fr_1fr] gap-3", children: [_jsxs("div", { className: "rounded-xl border border-border overflow-hidden bg-panel min-h-[320px]", children: [_jsxs("div", { className: "px-3 py-2 border-b border-border flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: t("lifomonitorpanel.LifoComputerUseSu") }), _jsx("div", { className: "text-[11px] text-muted", children: t("lifomonitorpanel.WatchOnlyDesktopM") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `rounded-full px-2 py-1 text-[11px] font-medium ${monitorOnline ? "bg-ok/20 text-ok" : "bg-warn/20 text-warn"}`, children: monitorOnline ? "live" : "offline" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                            setNoVncFailed(false);
+                                            void refreshMonitorMeta();
+                                            void refreshScreenPreview();
+                                        }, className: "h-7 px-2.5 py-1 text-[11px] shadow-sm hover:border-accent hover:text-txt", children: t("appsview.Refresh") })] })] }), _jsx("div", { className: "h-[320px] bg-black/90 flex items-center justify-center overflow-hidden", children: noVncActive && safeNoVncEndpoint ? (_jsx("iframe", { src: safeNoVncEndpoint, title: t("lifomonitorpanel.SandboxLiveNoVNCS"), className: "h-full w-full border-0", sandbox: "allow-scripts allow-forms allow-pointer-lock", onLoad: () => {
+                                setMonitorOnline(true);
+                                setMonitorError(null);
+                            }, onError: () => {
+                                setNoVncFailed(true);
+                                setMonitorOnline(false);
+                                setMonitorError("Live noVNC surface unavailable. Falling back to screenshots.");
+                            } })) : screenPreviewUrl ? (_jsx("img", { src: screenPreviewUrl, alt: "Sandbox computer-use surface", className: "h-full w-full object-contain" })) : (_jsx("p", { className: "px-4 text-center text-xs text-muted", children: t("lifomonitorpanel.WaitingForSandbox") })) }), _jsx("div", { className: "px-3 py-2 border-t border-border text-[11px] text-muted", children: monitorUpdatedAt
+                            ? `Last frame: ${new Date(monitorUpdatedAt).toLocaleTimeString()}`
+                            : "No frames captured yet" })] }), _jsxs("div", { className: "rounded-xl border border-border overflow-hidden bg-panel min-h-[320px]", children: [_jsxs("div", { className: "px-3 py-2 border-b border-border", children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: t("lifomonitorpanel.BrowserSandboxCo") }), _jsx("div", { className: "text-[11px] text-muted", children: t("lifomonitorpanel.AgentControlsBrows") })] }), _jsxs("div", { className: "p-3 space-y-3 text-[11px]", children: [_jsxs("div", { children: [_jsx("div", { className: "text-muted uppercase tracking-wide text-[10px]", children: t("lifomonitorpanel.LiveSurface") }), _jsx("div", { className: "mt-1 rounded border border-border bg-card px-2 py-1 text-txt break-all", children: noVncEndpoint && !noVncFailed
+                                            ? "noVNC"
+                                            : noVncEndpoint
+                                                ? "noVNC failed -> screenshot fallback"
+                                                : "Screenshot fallback" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted uppercase tracking-wide text-[10px]", children: t("lifomonitorpanel.CDPEndpoint") }), _jsx("div", { className: "mt-1 rounded border border-border bg-card px-2 py-1 text-txt break-all", children: browserEndpoints?.cdpEndpoint ?? "Unavailable" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted uppercase tracking-wide text-[10px]", children: t("lifomonitorpanel.WSEndpoint") }), _jsx("div", { className: "mt-1 rounded border border-border bg-card px-2 py-1 text-txt break-all", children: browserEndpoints?.wsEndpoint ?? "Unavailable" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted uppercase tracking-wide text-[10px]", children: t("lifomonitorpanel.noVNCEndpoint") }), _jsx("div", { className: "mt-1 rounded border border-border bg-card px-2 py-1 text-txt break-all", children: browserEndpoints?.noVncEndpoint ?? "Unavailable" })] }), _jsxs("div", { children: [_jsxs("div", { className: "text-muted uppercase tracking-wide text-[10px]", children: [t("lifomonitorpanel.VisibleWindows"), sandboxWindows.length, ")"] }), _jsx("div", { className: "mt-1 max-h-[154px] overflow-auto rounded border border-border bg-card p-2 space-y-1", children: sandboxWindows.length > 0 ? (sandboxWindows.slice(0, 20).map((windowInfo) => (_jsxs("div", { className: "text-txt", children: [_jsxs("span", { className: "text-muted", children: [windowInfo.app, ":"] }), " ", windowInfo.title || "(untitled)"] }, windowInfo.id)))) : (_jsx("div", { className: "text-muted", children: t("lifomonitorpanel.NoActiveWindowsRe") })) })] }), monitorError && (_jsx("div", { className: "rounded border border-danger/40 bg-danger/10 px-2 py-1 text-danger", children: monitorError }))] })] })] }));
+}

package/components/LifoSandboxView.d.ts

@@ -0,0 +1,5 @@
+import "@elizaos/app-core/styles/xterm.css";
+export declare function LifoSandboxView({ inModal }?: {
+    inModal?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LifoSandboxView.d.ts.map

package/components/LifoSandboxView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LifoSandboxView.d.ts","sourceRoot":"","sources":["../../src/components/LifoSandboxView.tsx"],"names":[],"mappings":"AACA,OAAO,oCAAoC,CAAC;AAgC5C,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,2CAidtE"}

package/components/LifoSandboxView.js

@@ -0,0 +1,333 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import "@elizaos/app-core/styles/xterm.css";
+import { client, } from "@elizaos/app-core/api";
+import { LifoMonitorPanel } from "@elizaos/app-core/components";
+import { useLifoSync } from "@elizaos/app-core/hooks";
+import { createLifoRuntime, generateLifoSessionId, isSafeEndpointUrl, normalizeTerminalText, } from "@elizaos/app-core/platform";
+import { useApp } from "@elizaos/app-core/state";
+const MONITOR_SCREENSHOT_POLL_MS = 1800;
+const MONITOR_META_POLL_MS = 10000;
+function formatError(error) {
+    if (error instanceof Error) {
+        return error.message;
+    }
+    return String(error);
+}
+export function LifoSandboxView({ inModal } = {}) {
+    const { t } = useApp();
+    const terminalRef = useRef(null);
+    const explorerRef = useRef(null);
+    const runtimeRef = useRef(null);
+    const queueRef = useRef([]);
+    const runningRef = useRef(false);
+    const controllerHeartbeatAtRef = useRef(0);
+    const [booting, setBooting] = useState(false);
+    const [ready, setReady] = useState(false);
+    const [error, setError] = useState(null);
+    const [output, setOutput] = useState([]);
+    const [runCount, setRunCount] = useState(0);
+    const [sessionKey, setSessionKey] = useState(0);
+    const popoutMode = false;
+    const [lifoSessionId] = useState(() => generateLifoSessionId());
+    const [controllerOnline, setControllerOnline] = useState(false);
+    const controllerOnlineRef = useRef(false);
+    controllerOnlineRef.current = controllerOnline;
+    const [monitorOnline, setMonitorOnline] = useState(false);
+    const [monitorError, setMonitorError] = useState(null);
+    const [monitorUpdatedAt, setMonitorUpdatedAt] = useState(null);
+    const [browserEndpoints, setBrowserEndpoints] = useState(null);
+    const [sandboxWindows, setSandboxWindows] = useState([]);
+    const [noVncFailed, setNoVncFailed] = useState(false);
+    const [screenPreviewBase64, setScreenPreviewBase64] = useState(null);
+    const appendOutput = useCallback((line) => {
+        setOutput((prev) => {
+            const next = [...prev, line];
+            return next.slice(-600);
+        });
+    }, []);
+    const screenPreviewUrl = screenPreviewBase64
+        ? `data:image/png;base64,${screenPreviewBase64}`
+        : null;
+    const noVncEndpoint = browserEndpoints?.noVncEndpoint ?? null;
+    const safeNoVncEndpoint = noVncEndpoint && isSafeEndpointUrl(noVncEndpoint) ? noVncEndpoint : null;
+    const noVncActive = Boolean(safeNoVncEndpoint) && !noVncFailed;
+    const { broadcastSyncMessage } = useLifoSync({
+        popoutMode,
+        lifoSessionId,
+        runtimeRef,
+        appendOutput,
+        setRunCount,
+        setSessionKey,
+        setControllerOnline,
+        controllerHeartbeatAtRef,
+    });
+    const teardown = useCallback(() => {
+        try {
+            const term = runtimeRef.current?.terminal;
+            if (term && "dispose" in term) {
+                term.dispose();
+            }
+        }
+        catch {
+            // Ignore terminal disposal failures.
+        }
+        try {
+            runtimeRef.current?.explorer.destroy();
+        }
+        catch {
+            // Ignore teardown failures.
+        }
+        runtimeRef.current = null;
+        queueRef.current = [];
+        runningRef.current = false;
+        if (terminalRef.current) {
+            terminalRef.current.innerHTML = "";
+        }
+        if (explorerRef.current) {
+            explorerRef.current.innerHTML = "";
+        }
+    }, []);
+    const runQueuedCommands = useCallback(async () => {
+        const runtime = runtimeRef.current;
+        if (!runtime || runningRef.current)
+            return;
+        runningRef.current = true;
+        try {
+            while (queueRef.current.length > 0) {
+                const command = queueRef.current.shift();
+                if (!command)
+                    continue;
+                runtime.terminal.writeln(`$ ${command}`);
+                appendOutput(`$ ${command}`);
+                setRunCount((prev) => prev + 1);
+                broadcastSyncMessage({ type: "command-start", command });
+                try {
+                    const result = await runtime.shell.execute(command, {
+                        onStdout: (chunk) => {
+                            runtime.terminal.write(normalizeTerminalText(chunk));
+                            const trimmed = chunk.trimEnd();
+                            if (trimmed)
+                                appendOutput(trimmed);
+                            broadcastSyncMessage({ type: "stdout", chunk });
+                        },
+                        onStderr: (chunk) => {
+                            runtime.terminal.write(normalizeTerminalText(chunk));
+                            const trimmed = chunk.trimEnd();
+                            if (trimmed)
+                                appendOutput(`stderr: ${trimmed}`);
+                            broadcastSyncMessage({ type: "stderr", chunk });
+                        },
+                    });
+                    runtime.terminal.writeln(`[exit ${result.exitCode}]`);
+                    appendOutput(`[exit ${result.exitCode}]`);
+                    broadcastSyncMessage({
+                        type: "command-exit",
+                        exitCode: result.exitCode,
+                    });
+                }
+                catch (err) {
+                    const message = formatError(err);
+                    runtime.terminal.writeln(`error: ${message}`);
+                    appendOutput(`error: ${message}`);
+                    broadcastSyncMessage({ type: "command-error", message });
+                }
+                try {
+                    runtime.explorer.refresh();
+                }
+                catch {
+                    // Keep processing command queue even if explorer refresh fails.
+                }
+            }
+        }
+        finally {
+            runningRef.current = false;
+        }
+    }, [appendOutput, broadcastSyncMessage]);
+    const enqueueAgentCommand = useCallback((command) => {
+        const trimmed = command.trim();
+        if (!trimmed)
+            return;
+        queueRef.current.push(trimmed);
+        void runQueuedCommands();
+    }, [runQueuedCommands]);
+    const refreshMonitorMeta = useCallback(async () => {
+        if (popoutMode)
+            return;
+        try {
+            const [browser, windowsResponse] = await Promise.all([
+                client.getSandboxBrowser(),
+                client.getSandboxWindows(),
+            ]);
+            setBrowserEndpoints(browser);
+            if (!browser.noVncEndpoint) {
+                setNoVncFailed(false);
+            }
+            setSandboxWindows(Array.isArray(windowsResponse.windows) ? windowsResponse.windows : []);
+            setMonitorError(null);
+        }
+        catch (err) {
+            setMonitorError(formatError(err));
+        }
+    }, []);
+    const refreshScreenPreview = useCallback(async () => {
+        if (popoutMode)
+            return;
+        if (noVncActive)
+            return;
+        try {
+            const screenshot = await client.getSandboxScreenshot();
+            if (typeof screenshot.data !== "string" || !screenshot.data.trim()) {
+                throw new Error("Sandbox screenshot response was empty");
+            }
+            setScreenPreviewBase64(screenshot.data);
+            setMonitorUpdatedAt(Date.now());
+            setMonitorOnline(true);
+            setMonitorError(null);
+        }
+        catch (err) {
+            setMonitorOnline(false);
+            setMonitorError(formatError(err));
+        }
+    }, [noVncActive]);
+    useEffect(() => {
+        let cancelled = false;
+        const initialize = async () => {
+            const terminalElement = terminalRef.current;
+            const explorerElement = explorerRef.current;
+            if (!terminalElement || !explorerElement)
+                return;
+            teardown();
+            setBooting(true);
+            setReady(false);
+            setError(null);
+            setOutput([`Starting Lifo session #${sessionKey + 1}...`]);
+            setRunCount(0);
+            try {
+                const runtime = await createLifoRuntime(terminalElement, explorerElement);
+                if (cancelled) {
+                    try {
+                        runtime.explorer.destroy();
+                    }
+                    catch {
+                        // Ignore cleanup failure on cancelled boot.
+                    }
+                    return;
+                }
+                runtimeRef.current = runtime;
+                runtime.terminal.writeln("Lifo runtime ready. Waiting for agent commands...");
+                appendOutput("Lifo runtime ready. Waiting for agent commands...");
+                setReady(true);
+                void runQueuedCommands();
+            }
+            catch (err) {
+                setError(formatError(err));
+            }
+            finally {
+                setBooting(false);
+            }
+        };
+        void initialize();
+        return () => {
+            cancelled = true;
+            teardown();
+        };
+    }, [appendOutput, runQueuedCommands, sessionKey, teardown]);
+    useEffect(() => {
+        if (popoutMode)
+            return;
+        let cancelled = false;
+        let previewInterval = null;
+        let metaInterval = null;
+        const refreshMeta = async () => {
+            if (cancelled)
+                return;
+            await refreshMonitorMeta();
+        };
+        const refreshPreview = async () => {
+            if (cancelled)
+                return;
+            await refreshScreenPreview();
+        };
+        const startPolling = () => {
+            stopPolling();
+            void refreshMeta();
+            void refreshPreview();
+            previewInterval = window.setInterval(() => {
+                void refreshPreview();
+            }, MONITOR_SCREENSHOT_POLL_MS);
+            metaInterval = window.setInterval(() => {
+                void refreshMeta();
+            }, MONITOR_META_POLL_MS);
+        };
+        const stopPolling = () => {
+            if (previewInterval)
+                window.clearInterval(previewInterval);
+            if (metaInterval)
+                window.clearInterval(metaInterval);
+            previewInterval = null;
+            metaInterval = null;
+        };
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === "visible") {
+                startPolling();
+            }
+            else {
+                stopPolling();
+            }
+        };
+        startPolling();
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => {
+            cancelled = true;
+            stopPolling();
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, [refreshMonitorMeta, refreshScreenPreview]);
+    useEffect(() => {
+        const unbind = client.onWsEvent("terminal-output", (data) => {
+            const event = data;
+            if (event.event !== "start")
+                return;
+            if (typeof event.command !== "string" || !event.command.trim())
+                return;
+            if (!popoutMode && controllerOnlineRef.current) {
+                // A dedicated popout controller is active; watcher mirrors via sync.
+                return;
+            }
+            enqueueAgentCommand(event.command);
+        });
+        return unbind;
+    }, [enqueueAgentCommand]);
+    const resetSession = useCallback(() => {
+        setSessionKey((value) => value + 1);
+        broadcastSyncMessage({ type: "session-reset" });
+    }, [broadcastSyncMessage]);
+    const panelCls = inModal
+        ? "rounded-xl border border-[var(--border)] overflow-hidden bg-[rgba(255,255,255,0.04)] backdrop-blur-sm"
+        : "rounded-xl border border-border overflow-hidden bg-panel";
+    const headerCls = inModal
+        ? "rounded-xl border border-[var(--border)] bg-[rgba(255,255,255,0.04)] backdrop-blur-sm p-3"
+        : "rounded-xl border border-border bg-panel p-3";
+    const badgeCls = inModal
+        ? "rounded-full px-2 py-1 text-[11px] font-medium bg-[rgba(255,255,255,0.06)] border border-[var(--border)] text-[var(--muted)]"
+        : "rounded-full px-2 py-1 text-[11px] font-medium bg-card border border-border text-muted";
+    const btnCls = inModal
+        ? "px-3 py-1.5 rounded-md border border-[var(--border)] bg-[rgba(255,255,255,0.06)] text-xs text-[var(--txt)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors"
+        : "px-3 py-1.5 rounded-md border border-border bg-card text-xs text-txt hover:border-accent hover:text-txt transition-colors";
+    return (_jsxs("section", { className: `h-full flex flex-col gap-3 ${inModal ? "p-4" : "min-h-[620px]"}`, children: [_jsxs("header", { className: headerCls, children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h2", { className: `text-sm font-semibold ${inModal ? "text-[var(--txt)]" : "text-txt"}`, children: "Lifo Agent Surface" }), _jsx("p", { className: `mt-1 text-xs ${inModal ? "text-[var(--muted)]" : "text-muted"}`, children: "Embedded Lifo watcher. Agent commands execute here in real time." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `rounded-full px-2 py-1 text-[11px] font-medium ${error
+                                            ? "bg-danger/20 text-danger"
+                                            : ready
+                                                ? "bg-ok/20 text-ok"
+                                                : "bg-warn/20 text-warn"}`, children: error ? "error" : ready ? "ready" : "booting" }), _jsx("span", { className: badgeCls, children: "embedded" }), _jsx("button", { type: "button", onClick: resetSession, className: btnCls, children: t("lifosandboxview.Reset") })] })] }), _jsxs("div", { className: `mt-2 text-[11px] ${inModal ? "text-[var(--muted)]" : "text-muted"}`, children: [t("lifosandboxview.AgentCommandsRepla"), " ", _jsx("span", { className: inModal ? "text-[var(--txt)]" : "text-txt", children: runCount })] }), error && (_jsx("p", { className: "mt-2 rounded-md border border-danger/40 bg-danger/10 px-2 py-1.5 text-xs text-danger", children: error }))] }), _jsxs("div", { className: "grid flex-1 min-h-[360px] grid-cols-1 xl:grid-cols-[360px_1fr] gap-3", children: [_jsxs("div", { className: `${panelCls} min-h-[280px] ${popoutMode ? "" : "pointer-events-none select-none"}`, children: [_jsx("div", { className: `px-3 py-2 text-xs font-semibold border-b ${inModal
+                                    ? "border-[var(--border)] text-[var(--txt)]"
+                                    : "border-border text-txt"}`, children: t("lifosandboxview.Explorer") }), _jsx("div", { ref: explorerRef, className: "h-[calc(100%-37px)] w-full" })] }), _jsxs("div", { className: `${panelCls} min-h-[280px] ${popoutMode ? "" : "pointer-events-none select-none"}`, children: [_jsx("div", { className: `px-3 py-2 text-xs font-semibold border-b ${inModal
+                                    ? "border-[var(--border)] text-[var(--txt)]"
+                                    : "border-border text-txt"}`, children: t("lifosandboxview.Terminal") }), _jsx("div", { ref: terminalRef, className: "h-[calc(100%-37px)] w-full" })] })] }), _jsx(LifoMonitorPanel, { monitorOnline: monitorOnline, monitorError: monitorError, monitorUpdatedAt: monitorUpdatedAt, noVncActive: noVncActive, safeNoVncEndpoint: safeNoVncEndpoint, noVncFailed: noVncFailed, setNoVncFailed: setNoVncFailed, screenPreviewUrl: screenPreviewUrl, browserEndpoints: browserEndpoints, sandboxWindows: sandboxWindows, noVncEndpoint: noVncEndpoint, refreshMonitorMeta: refreshMonitorMeta, refreshScreenPreview: refreshScreenPreview, setMonitorOnline: setMonitorOnline, setMonitorError: setMonitorError }), _jsxs("div", { className: `${inModal
+                    ? "rounded-xl border border-[var(--border)] bg-[rgba(255,255,255,0.04)] backdrop-blur-sm"
+                    : "rounded-xl border border-border bg-panel"} p-3 min-h-[140px] max-h-[220px] overflow-auto`, children: [_jsx("div", { className: `text-xs font-semibold ${inModal ? "text-[var(--txt)]" : "text-txt"}`, children: t("lifosandboxview.AgentReplayLog") }), _jsx("pre", { className: `mt-2 whitespace-pre-wrap break-words text-[11px] font-mono ${inModal ? "text-[var(--muted)]" : "text-muted"}`, children: output.length > 0
+                            ? output.join("\n")
+                            : booting
+                                ? "Booting Lifo..."
+                                : "Waiting for the agent to run a terminal command." })] })] }));
+}

package/components/LoadingScreen.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Loading screen — NieR: Automata inspired loader with horizontal progress bar,
+ * phase label, and percentage indicator.
+ */
+import type { StartupPhase } from "../state";
+interface LoadingScreenProps {
+    phase?: StartupPhase;
+    elapsedSeconds?: number;
+    vrmUrl?: string;
+}
+export declare function LoadingScreen({ phase, elapsedSeconds, vrmUrl, }: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LoadingScreen.d.ts.map

package/components/LoadingScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingScreen.d.ts","sourceRoot":"","sources":["../../src/components/LoadingScreen.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAQ7C,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAA0B,EAC1B,cAAc,EACd,MAAM,GACP,EAAE,kBAAkB,2CAuFpB"}

package/components/LoadingScreen.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Loading screen — NieR: Automata inspired loader with horizontal progress bar,
+ * phase label, and percentage indicator.
+ */
+import { useEffect, useState } from "react";
+const PHASE_META = {
+    "starting-backend": { label: "Initializing systems", progress: 20 },
+    "initializing-agent": { label: "Loading neural network", progress: 50 },
+    ready: { label: "Systems online", progress: 100 },
+};
+export function LoadingScreen({ phase = "starting-backend", elapsedSeconds, vrmUrl, }) {
+    const [vrmCached, setVrmCached] = useState(false);
+    const [fetchProgress, setFetchProgress] = useState(0);
+    const [, setRuntimeElapsedSeconds] = useState(0);
+    useEffect(() => {
+        if (typeof elapsedSeconds === "number")
+            return;
+        const startedAt = Date.now();
+        const timer = setInterval(() => {
+            setRuntimeElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [elapsedSeconds]);
+    useEffect(() => {
+        if (!vrmUrl)
+            return;
+        const controller = new AbortController();
+        (async () => {
+            try {
+                const response = await fetch(vrmUrl, { signal: controller.signal });
+                const contentLength = Number(response.headers.get("content-length") || 0);
+                if (!contentLength || !response.body) {
+                    setVrmCached(true);
+                    return;
+                }
+                const reader = response.body.getReader();
+                let received = 0;
+                for (;;) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                        break;
+                    received += value.byteLength;
+                    setFetchProgress(Math.min(received / contentLength, 1));
+                }
+                setVrmCached(true);
+            }
+            catch {
+                // Non-blocking — VRM will load normally later.
+            }
+        })();
+        return () => controller.abort();
+    }, [vrmUrl]);
+    const meta = PHASE_META[phase];
+    let progress;
+    if (vrmCached) {
+        progress = Math.max(meta.progress, 80);
+    }
+    else if (fetchProgress > 0) {
+        progress = Math.max(meta.progress, Math.round(55 + fetchProgress * 25));
+    }
+    else {
+        progress = meta.progress;
+    }
+    const label = vrmCached && phase !== "ready" ? "Loading avatar" : meta.label;
+    return (_jsx("div", { className: "loading-screen", children: _jsxs("div", { className: "loading-screen__center", children: [_jsxs("div", { className: "loading-screen__title", children: ["LOADING", _jsx("span", { className: "loading-screen__dots" })] }), _jsxs("div", { className: "loading-screen__bar-row", children: [_jsx("div", { className: "loading-screen__progress-track", children: _jsx("div", { className: "loading-screen__progress-fill", style: {
+                                    width: `${progress}%`,
+                                    transition: "width 1.5s ease-out",
+                                } }) }), _jsxs("div", { className: "loading-screen__percent", children: [progress, " %"] })] }), _jsx("div", { className: "loading-screen__phase", children: label })] }) }));
+}

package/components/LogsPageView.d.ts

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

package/components/LogsPageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogsPageView.d.ts","sourceRoot":"","sources":["../../src/components/LogsPageView.tsx"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,4CAa3B"}

package/components/LogsPageView.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApp } from "../state";
+import { LogsView } from "./LogsView";
+export function LogsPageView() {
+    const { t } = useApp();
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("h2", { className: "text-lg font-bold mb-1", children: t("bugreportmodal.Logs") }), _jsx("p", { className: "text-[13px] text-[var(--muted)] mb-4", children: t("logspageview.AgentRuntimeLogsW") }), _jsx("div", { className: "flex-1 min-h-0", children: _jsx(LogsView, {}) })] }));
+}

package/components/LogsView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Logs view component — logs viewer with filtering.
+ */
+export declare function LogsView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LogsView.d.ts.map

package/components/LogsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogsView.d.ts","sourceRoot":"","sources":["../../src/components/LogsView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AA0BH,wBAAgB,QAAQ,4CAkNvB"}

package/components/LogsView.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Logs view component — logs viewer with filtering.
+ */
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@elizaos/ui";
+import { useEffect, useMemo, useState } from "react";
+import { useApp } from "../state";
+import { formatTime } from "./format";
+/** Per-tag badge colour map. */
+const TAG_COLORS = {
+    agent: { bg: "rgba(99, 102, 241, 0.15)", fg: "rgb(99, 102, 241)" },
+    server: { bg: "rgba(34, 197, 94, 0.15)", fg: "rgb(34, 197, 94)" },
+    system: { bg: "rgba(156, 163, 175, 0.15)", fg: "rgb(156, 163, 175)" },
+    cloud: { bg: "rgba(59, 130, 246, 0.15)", fg: "rgb(59, 130, 246)" },
+    plugins: { bg: "rgba(168, 85, 247, 0.15)", fg: "rgb(168, 85, 247)" },
+    autonomy: { bg: "rgba(245, 158, 11, 0.15)", fg: "rgb(245, 158, 11)" },
+    websocket: { bg: "rgba(20, 184, 166, 0.15)", fg: "rgb(20, 184, 166)" },
+};
+export function LogsView() {
+    const [searchQuery, setSearchQuery] = useState("");
+    const { logs, logSources, logTags, logTagFilter, logLevelFilter, logSourceFilter, loadLogs, setState, t, } = useApp();
+    useEffect(() => {
+        void loadLogs();
+    }, [loadLogs]);
+    const handleClearFilters = () => {
+        setState("logTagFilter", "");
+        setState("logLevelFilter", "");
+        setState("logSourceFilter", "");
+        setSearchQuery("");
+        void loadLogs();
+    };
+    const hasActiveFilters = logTagFilter !== "" ||
+        logLevelFilter !== "" ||
+        logSourceFilter !== "" ||
+        searchQuery.trim() !== "";
+    const normalizedSearch = searchQuery.trim().toLowerCase();
+    const filteredLogs = useMemo(() => {
+        if (!normalizedSearch)
+            return logs;
+        return logs.filter((entry) => {
+            const haystack = [
+                entry.message ?? "",
+                entry.source ?? "",
+                entry.level ?? "",
+                ...(entry.tags ?? []),
+            ];
+            return haystack.some((part) => part.toLowerCase().includes(normalizedSearch));
+        });
+    }, [logs, normalizedSearch]);
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex flex-wrap gap-1.5 mb-2.5 items-center", children: [_jsx("input", { type: "text", className: "text-xs px-3 py-1.5 border border-border bg-card text-txt min-w-56", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: t("logsview.SearchLogs"), "aria-label": "Search logs" }), _jsxs(Select, { value: logLevelFilter === "" ? "all" : logLevelFilter, onValueChange: (val) => {
+                            setState("logLevelFilter", val === "all" ? "" : val);
+                            void loadLogs();
+                        }, children: [_jsx(SelectTrigger, { className: "h-8 px-3 py-1.5 text-xs bg-card border-border shadow-sm w-36", children: _jsx(SelectValue, { placeholder: t("logsview.AllLevels") }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("logsview.AllLevels") }), _jsx(SelectItem, { value: "debug", children: t("logsview.Debug") }), _jsx(SelectItem, { value: "info", children: t("logsview.Info") }), _jsx(SelectItem, { value: "warn", children: t("logsview.Warn") }), _jsx(SelectItem, { value: "error", children: t("logsview.Error") })] })] }), _jsxs(Select, { value: logSourceFilter === "" ? "all" : logSourceFilter, onValueChange: (val) => {
+                            setState("logSourceFilter", val === "all" ? "" : val);
+                            void loadLogs();
+                        }, children: [_jsx(SelectTrigger, { className: "h-8 px-3 py-1.5 text-xs bg-card border-border shadow-sm w-36", children: _jsx(SelectValue, { placeholder: t("logsview.AllSources") }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("logsview.AllSources") }), logSources.map((s) => (_jsx(SelectItem, { value: s, children: s }, s)))] })] }), logTags.length > 0 && (_jsxs(Select, { value: logTagFilter === "" ? "all" : logTagFilter, onValueChange: (val) => {
+                            setState("logTagFilter", val === "all" ? "" : val);
+                            void loadLogs();
+                        }, children: [_jsx(SelectTrigger, { className: "h-8 px-3 py-1.5 text-xs bg-card border-border shadow-sm w-36", children: _jsx(SelectValue, { placeholder: t("logsview.AllTags") }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("logsview.AllTags") }), logTags.map((tag) => (_jsx(SelectItem, { value: tag, children: tag }, tag)))] })] })), hasActiveFilters && (_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[2rem] whitespace-normal break-words text-left text-xs bg-card text-txt hover:text-txt shadow-sm px-3 py-1.5", onClick: handleClearFilters, children: t("logsview.ClearFilters") })), _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[2rem] whitespace-normal break-words text-left text-xs bg-card text-txt hover:text-txt shadow-sm ml-auto px-3 py-1.5", onClick: () => void loadLogs(), children: t("appsview.Refresh") })] }), _jsx("div", { className: "font-mono text-xs flex-1 min-h-0 overflow-y-auto border border-border p-2 bg-card", children: filteredLogs.length === 0 ? (_jsxs("div", { className: "text-center py-8 text-muted", children: [t("logsview.NoLogEntries"), hasActiveFilters ? " matching filters" : " yet", "."] })) : (filteredLogs.map((entry) => (_jsxs("div", { className: "font-mono text-xs px-2 py-1 border-b border-border flex gap-2 items-baseline", "data-testid": "log-entry", children: [_jsx("span", { className: "text-muted whitespace-nowrap", children: formatTime(entry.timestamp, { fallback: "—" }) }), _jsx("span", { className: `font-semibold w-[44px] uppercase text-[11px] ${entry.level === "error"
+                                ? "text-danger"
+                                : entry.level === "warn"
+                                    ? "text-warn"
+                                    : "text-muted"}`, children: entry.level }), _jsxs("span", { className: "text-muted w-16 overflow-hidden text-ellipsis whitespace-nowrap text-[11px]", children: ["[", entry.source, "]"] }), _jsx("span", { className: "inline-flex gap-0.5 shrink-0", children: (entry.tags ?? []).map((t) => {
+                                const c = TAG_COLORS[t];
+                                return (_jsx("span", { className: "inline-block text-[10px] px-1.5 py-px rounded-lg mr-0.5", style: {
+                                        background: c ? c.bg : "var(--bg-muted)",
+                                        color: c ? c.fg : "var(--muted)",
+                                        fontFamily: "var(--font-body, sans-serif)",
+                                    }, children: t }, t));
+                            }) }), _jsx("span", { className: "flex-1 break-all", children: entry.message })] }, `${entry.timestamp}-${entry.source}-${entry.level}-${entry.message}`)))) })] }));
+}

package/components/MediaGalleryView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Media Gallery — browse photos, videos, and audio stored in agent databases.
+ *
+ * Queries known tables for records containing media URLs (image/video/audio
+ * file extensions or data URIs). All data flows through the generic database
+ * APIs (getDatabaseTables, executeDatabaseQuery).
+ */
+export declare function MediaGalleryView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaGalleryView.d.ts.map

package/components/MediaGalleryView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGalleryView.d.ts","sourceRoot":"","sources":["../../src/components/MediaGalleryView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwJH,wBAAgB,gBAAgB,4CAgR/B"}