@elizaos/app-core 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/GameView.js

@@ -1,294 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Game View — embeds a running app's game client in an iframe.
- *
- * Features:
- * - Full-screen iframe for game client
- * - PostMessage auth for HYPERSCAPE_AUTH / RS_2004SCAPE_AUTH
- * - Split-screen mode with agent logs panel
- * - Connection status indicator
- */
-import { Button, Input } from "@elizaos/ui";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { client } from "../api";
-import { invokeDesktopBridgeRequest, isElectrobunRuntime } from "../bridge";
-import { useRetakeCapture, useTimeout } from "../hooks";
-import { useApp } from "../state";
-import { openExternalUrl } from "../utils";
-import { formatTime } from "./format";
-const DEFAULT_VIEWER_SANDBOX = "allow-scripts allow-same-origin allow-popups";
-const READY_EVENT_BY_AUTH_TYPE = {
-    HYPERSCAPE_AUTH: "HYPERSCAPE_READY",
-    RS_2004SCAPE_AUTH: "RS_2004SCAPE_READY",
-};
-function resolvePostMessageTargetOrigin(viewerUrl) {
-    if (viewerUrl.startsWith("/"))
-        return window.location.origin;
-    const match = viewerUrl.match(/^https?:\/\/[^/?#]+/i);
-    return match?.[0] ?? "*";
-}
-/** Tag badge colors for logs panel. */
-const TAG_COLORS = {
-    agent: { bg: "rgba(99, 102, 241, 0.15)", fg: "rgb(99, 102, 241)" },
-    game: { bg: "rgba(34, 197, 94, 0.15)", fg: "rgb(34, 197, 94)" },
-    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 GameView() {
-    const { setTimeout } = useTimeout();
-    const { activeGameApp, activeGameDisplayName, activeGameViewerUrl, activeGameSandbox, activeGamePostMessageAuth, activeGamePostMessagePayload, gameOverlayEnabled, plugins, logs, loadLogs, setState, setActionNotice, t, } = useApp();
-    const isElectrobun = isElectrobunRuntime();
-    const [stopping, setStopping] = useState(false);
-    const [showLogsPanel, setShowLogsPanel] = useState(false);
-    const [connectionStatus, setConnectionStatus] = useState("connecting");
-    const [chatInput, setChatInput] = useState("");
-    const [sendingChat, setSendingChat] = useState(false);
-    const [retakeCapture, setRetakeCapture] = useState(false);
-    const [gameWindowId, setGameWindowId] = useState(null);
-    const gameWindowIdRef = useRef(null);
-    const iframeRef = useRef(null);
-    const authSentRef = useRef(false);
-    const viewerSessionRef = useRef("");
-    const logsIntervalRef = useRef(null);
-    // Stream iframe frames to retake.tv when capture is active
-    useRetakeCapture(iframeRef, retakeCapture);
-    // Send command to the agent - routes through elizaOS which processes
-    // the message and decides what game actions to take
-    const handleSendChat = useCallback(async () => {
-        const content = chatInput.trim();
-        if (!content)
-            return;
-        setSendingChat(true);
-        try {
-            // Send message to elizaOS agent - it will process and execute game actions
-            // Examples: "go chop some wood", "attack the goblin", "go to the bank"
-            const response = await client.sendChatRest(content, "DM");
-            setChatInput("");
-            // Show agent's response
-            if (response.text) {
-                setActionNotice(`Agent: ${response.text.slice(0, 100)}${response.text.length > 100 ? "..." : ""}`, "success", 4000);
-            }
-            else {
-                setActionNotice("Command sent to agent.", "success", 2000);
-            }
-            // Refresh logs to show activity
-            setTimeout(() => void loadLogs(), 1500);
-        }
-        catch (err) {
-            setActionNotice(`Failed to send: ${err instanceof Error ? err.message : "error"}`, "error", 3000);
-        }
-        finally {
-            setSendingChat(false);
-        }
-    }, [
-        chatInput,
-        setActionNotice,
-        loadLogs, // Refresh logs to show activity
-        setTimeout,
-    ]);
-    const postMessageTargetOrigin = useMemo(() => resolvePostMessageTargetOrigin(activeGameViewerUrl), [activeGameViewerUrl]);
-    const viewerSessionKey = useMemo(() => `${activeGameViewerUrl}::${JSON.stringify(activeGamePostMessagePayload ?? null)}`, [activeGamePostMessagePayload, activeGameViewerUrl]);
-    // Only show retake capture button when the retake connector is enabled
-    const retakeEnabled = useMemo(() => plugins.some((p) => p.id === "retake" && p.enabled), [plugins]);
-    // Filter logs relevant to the current game
-    const gameLogs = useMemo(() => {
-        if (!activeGameApp)
-            return [];
-        const appKeyword = activeGameApp.toLowerCase().replace("@elizaos/app-", "");
-        return logs.filter((entry) => {
-            const message = (entry.message ?? "").toLowerCase();
-            const source = (entry.source ?? "").toLowerCase();
-            const tags = (entry.tags ?? []).map((t) => t.toLowerCase());
-            return (message.includes(appKeyword) ||
-                source.includes(appKeyword) ||
-                tags.some((t) => t.includes(appKeyword)) ||
-                tags.includes("game") ||
-                tags.includes("autonomy") ||
-                source.includes("agent"));
-        });
-    }, [activeGameApp, logs]);
-    // Auto-refresh logs when panel is open
-    useEffect(() => {
-        if (!showLogsPanel) {
-            if (logsIntervalRef.current) {
-                clearInterval(logsIntervalRef.current);
-                logsIntervalRef.current = null;
-            }
-            return;
-        }
-        void loadLogs();
-        logsIntervalRef.current = setInterval(() => void loadLogs(), 3000);
-        return () => {
-            if (logsIntervalRef.current) {
-                clearInterval(logsIntervalRef.current);
-                logsIntervalRef.current = null;
-            }
-        };
-    }, [showLogsPanel, loadLogs]);
-    // Open the game URL in an isolated Electrobun BrowserWindow.
-    // Runs whenever the viewer URL or game title changes and we're inside the desktop app.
-    useEffect(() => {
-        if (!isElectrobun || !activeGameViewerUrl)
-            return;
-        let cancelled = false;
-        void invokeDesktopBridgeRequest({
-            rpcMethod: "gameOpenWindow",
-            ipcChannel: "game:openWindow",
-            params: {
-                url: activeGameViewerUrl,
-                title: activeGameDisplayName || activeGameApp || "Game",
-            },
-        })
-            .then((result) => {
-            if (cancelled)
-                return;
-            if (result?.id) {
-                gameWindowIdRef.current = result.id;
-                setGameWindowId(result.id);
-                setConnectionStatus("connected");
-            }
-        })
-            .catch((err) => {
-            console.warn("[GameView] game:openWindow failed:", err);
-            // Fall through — iframe fallback is still rendered
-        });
-        return () => {
-            cancelled = true;
-            // Close the game window when GameView unmounts or the URL changes
-            if (gameWindowIdRef.current) {
-                void invokeDesktopBridgeRequest({
-                    rpcMethod: "canvasDestroyWindow",
-                    ipcChannel: "canvas:destroyWindow",
-                    params: { id: gameWindowIdRef.current },
-                }).catch(() => { });
-                gameWindowIdRef.current = null;
-                setGameWindowId(null);
-            }
-        };
-    }, [activeGameViewerUrl, activeGameApp, activeGameDisplayName, isElectrobun]);
-    // Reset auth handshake state when the active viewer session changes.
-    useEffect(() => {
-        if (viewerSessionRef.current !== viewerSessionKey) {
-            viewerSessionRef.current = viewerSessionKey;
-            authSentRef.current = false;
-        }
-        if (activeGamePostMessageAuth) {
-            setConnectionStatus("connecting");
-            return;
-        }
-        // No auth required, assume connected once iframe loads.
-        setConnectionStatus("connected");
-    }, [activeGamePostMessageAuth, viewerSessionKey]);
-    const resetActiveGameState = useCallback(() => {
-        setState("activeGameApp", "");
-        setState("activeGameDisplayName", "");
-        setState("activeGameViewerUrl", "");
-        setState("activeGameSandbox", DEFAULT_VIEWER_SANDBOX);
-        setState("activeGamePostMessageAuth", false);
-        setState("activeGamePostMessagePayload", null);
-    }, [setState]);
-    useEffect(() => {
-        if (!activeGamePostMessageAuth || !activeGamePostMessagePayload)
-            return;
-        if (authSentRef.current)
-            return;
-        const expectedReadyType = READY_EVENT_BY_AUTH_TYPE[activeGamePostMessagePayload.type];
-        if (!expectedReadyType)
-            return;
-        const onMessage = (event) => {
-            if (authSentRef.current)
-                return;
-            const iframeWindow = iframeRef.current?.contentWindow;
-            if (!iframeWindow || event.source !== iframeWindow)
-                return;
-            if (event.data?.type !== expectedReadyType)
-                return;
-            if (postMessageTargetOrigin !== "*" &&
-                event.origin !== postMessageTargetOrigin) {
-                return;
-            }
-            iframeWindow.postMessage(activeGamePostMessagePayload, postMessageTargetOrigin);
-            authSentRef.current = true;
-            setConnectionStatus("connected");
-            setActionNotice("Viewer auth sent.", "info", 1800);
-        };
-        window.addEventListener("message", onMessage);
-        return () => {
-            window.removeEventListener("message", onMessage);
-        };
-    }, [
-        activeGamePostMessageAuth,
-        activeGamePostMessagePayload,
-        postMessageTargetOrigin,
-        setActionNotice,
-    ]);
-    const handleOpenInNewTab = useCallback(async () => {
-        try {
-            await openExternalUrl(activeGameViewerUrl);
-        }
-        catch {
-            setActionNotice("Popup blocked. Allow popups and try again.", "error", 3600);
-        }
-    }, [activeGameViewerUrl, setActionNotice]);
-    const handleStop = useCallback(async () => {
-        if (!activeGameApp)
-            return;
-        setStopping(true);
-        try {
-            const stopResult = await client.stopApp(activeGameApp);
-            resetActiveGameState();
-            setState("tab", "apps");
-            setActionNotice(stopResult.message, stopResult.success ? "success" : "info", stopResult.needsRestart ? 5000 : 3200);
-        }
-        catch (err) {
-            setActionNotice(`Failed to stop: ${err instanceof Error ? err.message : "error"}`, "error");
-        }
-        finally {
-            setStopping(false);
-        }
-    }, [activeGameApp, resetActiveGameState, setState, setActionNotice]);
-    if (!activeGameViewerUrl) {
-        return (_jsxs("div", { className: "flex items-center justify-center py-10 text-muted italic", children: [t("game.noActiveSession"), " ", _jsx(Button, { variant: "default", size: "sm", onClick: () => {
-                        setState("tab", "apps");
-                        setState("appsSubTab", "browse");
-                    }, className: "ml-2 font-bold tracking-wide shadow-sm", children: t("game.backToApps") })] }));
-    }
-    const renderLogsPanel = () => (_jsxs("div", { className: "w-80 border-l border-border bg-card flex flex-col min-h-0", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [_jsx("span", { className: "font-bold text-xs", children: t("game.agentActivity") }), _jsx("span", { className: "flex-1" }), _jsx(Button, { variant: "outline", size: "sm", className: "h-6 text-[10px] px-2 py-0 border-border bg-card hover:border-accent", onClick: () => void loadLogs(), children: t("common.refresh") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-6 text-[10px] px-2 py-0 border-border bg-card hover:border-accent", onClick: () => setShowLogsPanel(false), children: t("common.hide") })] }), _jsxs("div", { className: "flex items-center gap-2 px-2 py-2 border-b border-border", children: [_jsx(Input, { type: "text", value: chatInput, onChange: (e) => setChatInput(e.target.value), onKeyDown: (e) => {
-                            if (e.key === "Enter" && !e.shiftKey && !sendingChat) {
-                                e.preventDefault();
-                                handleSendChat();
-                            }
-                        }, placeholder: t("game.chatPlaceholder"), className: "flex-1 h-8 text-xs bg-bg focus-visible:ring-accent", disabled: sendingChat }), _jsx(Button, { variant: "default", size: "sm", onClick: handleSendChat, disabled: sendingChat || !chatInput.trim(), className: "h-8 shadow-sm font-bold tracking-wide", children: sendingChat ? "..." : t("common.send") })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto p-2 text-[11px] font-mono", children: gameLogs.length === 0 ? (_jsx("div", { className: "text-center py-4 text-muted italic", children: t("game.noAgentActivity") })) : (gameLogs.slice(0, 50).map((entry, idx) => (_jsxs("div", { className: "py-1 border-b border-border/50 flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted text-[10px]", children: formatTime(entry.timestamp, { fallback: "—" }) }), _jsx("span", { className: `font-semibold text-[10px] uppercase ${entry.level === "error"
-                                        ? "text-danger"
-                                        : entry.level === "warn"
-                                            ? "text-warn"
-                                            : "text-muted"}`, children: entry.level }), (entry.tags ?? []).slice(0, 2).map((t) => {
-                                    const c = TAG_COLORS[t];
-                                    return (_jsx("span", { className: "text-[9px] px-1 py-px rounded", style: {
-                                            background: c ? c.bg : "var(--bg-muted)",
-                                            color: c ? c.fg : "var(--muted)",
-                                        }, children: t }, t));
-                                })] }), _jsx("div", { className: "text-txt break-all", children: entry.message })] }, `${entry.timestamp}-${idx}`)))) })] }));
-    const connectionStatusColor = connectionStatus === "connected"
-        ? "text-ok border-ok"
-        : connectionStatus === "connecting"
-            ? "text-warn border-warn"
-            : "text-danger border-danger";
-    return (_jsxs("div", { className: "flex flex-col h-full min-h-0", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border bg-card", children: [_jsx("span", { className: "font-bold text-sm", children: activeGameDisplayName || activeGameApp }), _jsx("span", { className: `text-[10px] px-1.5 py-0.5 border ${connectionStatusColor}`, children: connectionStatus === "connected"
-                            ? t("game.connected")
-                            : connectionStatus === "connecting"
-                                ? t("game.connecting")
-                                : t("game.disconnected") }), activeGamePostMessageAuth ? (_jsx("span", { className: "text-[10px] px-1.5 py-0.5 border border-border text-muted", children: t("gameview.postMessageAuth") })) : null, _jsx("span", { className: "flex-1" }), _jsx(Button, { variant: showLogsPanel ? "default" : "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => setShowLogsPanel(!showLogsPanel), children: showLogsPanel ? t("game.hideLogs") : t("game.showLogs") }), retakeEnabled && (_jsx(Button, { variant: retakeCapture ? "default" : "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => setRetakeCapture(!retakeCapture), title: t("game.retakeTitle"), children: retakeCapture ? t("game.stopCapture") : t("game.retakeCapture") })), _jsx(Button, { variant: gameOverlayEnabled ? "default" : "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => setState("gameOverlayEnabled", !gameOverlayEnabled), title: gameOverlayEnabled
-                            ? t("game.disableOverlay")
-                            : t("game.keepVisible"), children: gameOverlayEnabled ? t("game.unpinOverlay") : t("game.keepOnTop") }), _jsx(Button, { variant: "default", size: "sm", className: "h-7 text-xs shadow-sm", onClick: handleOpenInNewTab, children: t("game.openInNewTab") }), _jsx(Button, { variant: "default", size: "sm", className: "h-7 text-xs shadow-sm", disabled: stopping, onClick: handleStop, children: stopping ? t("game.stopping") : t("game.stop") }), _jsx(Button, { variant: "default", size: "sm", className: "h-7 text-xs shadow-sm", onClick: () => {
-                            setState("tab", "apps");
-                            setState("appsSubTab", "browse");
-                        }, children: t("game.backToApps") })] }), _jsxs("div", { className: "flex-1 min-h-0 flex", children: [_jsx("div", { className: "flex-1 min-h-0 relative", children: isElectrobun ? (
-                        /* Electrobun mode: game runs in an isolated BrowserWindow opened
-                           via game:openWindow RPC. The div below is a placeholder that
-                           fills the same space in the layout while the native window is
-                           positioned by the OS window manager. */
-                        _jsx("div", { className: "w-full h-full flex flex-col items-center justify-center bg-bg text-muted gap-3", children: gameWindowId ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-sm font-semibold text-txt", children: activeGameDisplayName || activeGameApp }), _jsx("span", { className: "text-xs text-muted", children: t("game.openInNativeWindow") })] })) : (_jsx("span", { className: "text-xs italic", children: t("game.launching") })) })) : (
-                        /* Web / dev-server fallback: standard iframe */
-                        _jsx("iframe", { ref: iframeRef, src: activeGameViewerUrl, sandbox: activeGameSandbox, className: "w-full h-full border-none", title: activeGameDisplayName || "Game" })) }), showLogsPanel && renderLogsPanel()] })] }));
-}

package/components/GameViewOverlay.d.ts

@@ -1,8 +0,0 @@
-/**
- * GameViewOverlay — compact floating iframe overlay that persists across tabs.
- *
- * Rendered at the App.tsx level so it stays visible when the user navigates
- * away from the Apps tab. Provides drag, resize, and close controls.
- */
-export declare function GameViewOverlay(): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=GameViewOverlay.d.ts.map

package/components/GameViewOverlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GameViewOverlay.d.ts","sourceRoot":"","sources":["../../src/components/GameViewOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,wBAAgB,eAAe,mDA0H9B"}

package/components/GameViewOverlay.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * GameViewOverlay — compact floating iframe overlay that persists across tabs.
- *
- * Rendered at the App.tsx level so it stays visible when the user navigates
- * away from the Apps tab. Provides drag, resize, and close controls.
- */
-import { useCallback, useRef, useState } from "react";
-import { useApp } from "../state";
-export function GameViewOverlay() {
-    const { activeGameDisplayName, activeGameViewerUrl, activeGameSandbox, setState, t, } = useApp();
-    // --- Drag state ---
-    const containerRef = useRef(null);
-    const [pos, setPos] = useState(null);
-    const dragOffset = useRef({ x: 0, y: 0 });
-    const [dragging, setDragging] = useState(false);
-    const handleDragStart = useCallback((e) => {
-        e.preventDefault();
-        const rect = containerRef.current?.getBoundingClientRect();
-        if (!rect)
-            return;
-        dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-        setDragging(true);
-        const onMove = (ev) => {
-            setPos({
-                x: ev.clientX - dragOffset.current.x,
-                y: ev.clientY - dragOffset.current.y,
-            });
-        };
-        const onUp = () => {
-            setDragging(false);
-            window.removeEventListener("mousemove", onMove);
-            window.removeEventListener("mouseup", onUp);
-        };
-        window.addEventListener("mousemove", onMove);
-        window.addEventListener("mouseup", onUp);
-    }, []);
-    const handleClose = useCallback(() => {
-        setState("gameOverlayEnabled", false);
-    }, [setState]);
-    const handleExpand = useCallback(() => {
-        setState("gameOverlayEnabled", false);
-        setState("tab", "apps");
-        setState("appsSubTab", "games");
-    }, [setState]);
-    if (!activeGameViewerUrl)
-        return null;
-    const style = pos
-        ? { left: pos.x, top: pos.y, right: "auto", bottom: "auto" }
-        : { right: 16, bottom: 16 };
-    return (_jsx("div", { className: "fixed inset-0 z-50 pointer-events-none", children: _jsxs("div", { ref: containerRef, className: "absolute w-[480px] h-[360px] pointer-events-auto rounded-xl overflow-hidden flex flex-col", style: {
-                resize: "both",
-                background: "rgba(18, 22, 32, 0.96)",
-                border: "1px solid rgba(240, 178, 50, 0.18)",
-                boxShadow: "0 8px 60px rgba(0,0,0,0.6), 0 0 40px rgba(240,178,50,0.06)",
-                ...style,
-            }, children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 select-none", style: {
-                        cursor: dragging ? "grabbing" : "grab",
-                        background: "rgba(255,255,255,0.04)",
-                        borderBottom: "1px solid rgba(255,255,255,0.08)",
-                    }, children: [_jsx("button", { type: "button", className: "font-bold text-[11px] truncate flex-1 text-left cursor-inherit bg-transparent border-0", style: { color: "rgba(240,238,250,0.92)" }, onMouseDown: handleDragStart, "aria-label": "Drag overlay", children: activeGameDisplayName || "Game" }), _jsx("button", { type: "button", className: "text-[10px] px-2 py-0.5 cursor-pointer transition-colors", style: {
-                                border: "1px solid rgba(255,255,255,0.1)",
-                                background: "rgba(255,255,255,0.04)",
-                                color: "rgba(240,238,250,0.92)",
-                            }, onClick: handleExpand, title: t("gameviewoverlay.ExpandBackToApps"), children: t("gameviewoverlay.Expand") }), _jsx("button", { type: "button", className: "text-[10px] px-2 py-0.5 cursor-pointer transition-colors", style: {
-                                border: "1px solid rgba(255,255,255,0.1)",
-                                background: "rgba(255,255,255,0.04)",
-                                color: "rgba(240,238,250,0.92)",
-                            }, onClick: handleClose, title: t("gameviewoverlay.CloseOverlay"), children: t("bugreportmodal.Close") })] }), _jsx("iframe", { src: activeGameViewerUrl, sandbox: activeGameSandbox, className: "flex-1 w-full border-none", title: activeGameDisplayName || "Game Overlay" })] }) }));
-}

package/components/GlobalEmoteOverlay.d.ts

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

package/components/GlobalEmoteOverlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GlobalEmoteOverlay.d.ts","sourceRoot":"","sources":["../../src/components/GlobalEmoteOverlay.tsx"],"names":[],"mappings":"AAsCA,wBAAgB,kBAAkB,4CAiHjC"}

package/components/GlobalEmoteOverlay.js

@@ -1,112 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { APP_EMOTE_EVENT } from "../events";
-const OVERLAY_LIFETIME_MS = 2400;
-const EMOTE_EMOJIS = {
-    wave: "\u{1F44B}",
-    kiss: "\u{1F48B}",
-    crying: "\u{1F62D}",
-    sorrow: "\u{1F614}",
-    "rude-gesture": "\u{1F595}",
-    "looking-around": "\u{1F440}",
-    "dance-happy": "\u{1F483}",
-    "dance-breaking": "\u{1F938}",
-    "dance-hiphop": "\u{1F57A}",
-    "dance-popping": "\u{1FAA9}",
-    "hook-punch": "\u{1F44A}",
-    punching: "\u{1F94A}",
-    "firing-gun": "\u{1F52B}",
-    "sword-swing": "\u{2694}",
-    chopping: "\u{1FA93}",
-    "spell-cast": "\u{1FA84}",
-    range: "\u{1F3F9}",
-    death: "\u{1F480}",
-    talk: "\u{1F5E3}",
-    squat: "\u{1F9CE}",
-    fishing: "\u{1F3A3}",
-    float: "\u{2728}",
-    jump: "\u{1F4A8}",
-    flip: "\u{1F938}",
-    crawling: "\u{1F43E}",
-    fall: "\u{1F4A5}",
-};
-function getOverlayEmoji(emoteId) {
-    return EMOTE_EMOJIS[emoteId] ?? "\u2728";
-}
-export function GlobalEmoteOverlay() {
-    const [activeEmote, setActiveEmote] = useState(null);
-    const hideTimerRef = useRef(null);
-    const nextKeyRef = useRef(1);
-    useEffect(() => {
-        const handler = (event) => {
-            const detail = event.detail;
-            if (!detail?.emoteId)
-                return;
-            if (detail.showOverlay === false)
-                return;
-            if (hideTimerRef.current != null) {
-                window.clearTimeout(hideTimerRef.current);
-            }
-            const nextOverlay = {
-                key: nextKeyRef.current,
-                emoteId: detail.emoteId,
-                emoji: getOverlayEmoji(detail.emoteId),
-            };
-            nextKeyRef.current += 1;
-            setActiveEmote(nextOverlay);
-            hideTimerRef.current = window.setTimeout(() => {
-                setActiveEmote((current) => current?.key === nextOverlay.key ? null : current);
-                hideTimerRef.current = null;
-            }, OVERLAY_LIFETIME_MS);
-        };
-        window.addEventListener(APP_EMOTE_EVENT, handler);
-        return () => {
-            window.removeEventListener(APP_EMOTE_EVENT, handler);
-            if (hideTimerRef.current != null) {
-                window.clearTimeout(hideTimerRef.current);
-                hideTimerRef.current = null;
-            }
-        };
-    }, []);
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
-        @keyframes eliza-emote-burst {
-          0% {
-            opacity: 0;
-            transform: translateY(32px) scale(0.42) rotate(-10deg);
-          }
-          16% {
-            opacity: 1;
-            transform: translateY(-10px) scale(1.12) rotate(5deg);
-          }
-          48% {
-            opacity: 1;
-            transform: translateY(-24px) scale(1) rotate(-2deg);
-          }
-          100% {
-            opacity: 0;
-            transform: translateY(-72px) scale(0.84) rotate(6deg);
-          }
-        }
-
-        @keyframes eliza-emote-aura {
-          0% {
-            opacity: 0;
-            transform: scale(0.5);
-          }
-          24% {
-            opacity: 0.7;
-            transform: scale(1);
-          }
-          100% {
-            opacity: 0;
-            transform: scale(1.35);
-          }
-        }
-      ` }), activeEmote && (_jsx("div", { "aria-hidden": "true", "data-testid": "global-emote-overlay", "data-emote-id": activeEmote.emoteId, className: "pointer-events-none fixed inset-0 z-[11000] flex items-start justify-center overflow-hidden", children: _jsxs("div", { className: "relative mt-[18vh] flex items-center justify-center", children: [_jsx("div", { className: "absolute h-36 w-36 rounded-full", style: {
-                                background: "radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,214,102,0.18) 34%, rgba(255,214,102,0) 72%)",
-                                filter: "blur(6px)",
-                                animation: "eliza-emote-aura 2400ms ease-out forwards",
-                            } }), _jsx("div", { className: "relative flex h-32 w-32 items-center justify-center rounded-full border border-white/18 bg-black/18 text-[88px] shadow-[0_20px_54px_rgba(0,0,0,0.24)] backdrop-blur-md", style: {
-                                animation: "eliza-emote-burst 2400ms cubic-bezier(.2,.8,.2,1) forwards",
-                            }, children: _jsx("span", { className: "select-none leading-none", children: activeEmote.emoji }) }, activeEmote.key)] }) }))] }));
-}

package/components/Header.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from "react";
-interface HeaderProps {
-    mobileLeft?: ReactNode;
-    transparent?: boolean;
-    hideCloudCredits?: boolean;
-}
-export declare function Header({ mobileLeft, transparent, hideCloudCredits }: HeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Header.d.ts.map

package/components/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,UAAU,WAAW;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,WAAmB,EAAE,gBAAwB,EAAE,EAAE,WAAW,2CA+WhG"}

package/components/Header.js

@@ -1,123 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { LanguageDropdown, ThemeToggle } from "@elizaos/app-core/components";
-import { getTabGroups } from "@elizaos/app-core/navigation";
-import { useApp } from "@elizaos/app-core/state";
-import { AlertTriangle, CircleDollarSign, Menu } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { HEADER_ICON_BUTTON_CLASSNAME, ShellHeaderControls, } from "./shared/ShellHeaderControls";
-const NAV_LABEL_I18N_KEY = {
-    Chat: "nav.chat",
-    Companion: "nav.companion",
-    Stream: "nav.stream",
-    Character: "nav.character",
-    Wallets: "nav.wallets",
-    Knowledge: "nav.knowledge",
-    Connectors: "nav.social",
-    Apps: "nav.apps",
-    Settings: "nav.settings",
-    Heartbeats: "nav.heartbeats",
-    Advanced: "nav.advanced",
-};
-export function Header({ mobileLeft, transparent = false, hideCloudCredits = false }) {
-    const { elizaCloudEnabled, elizaCloudConnected, elizaCloudCredits, elizaCloudCreditsCritical, elizaCloudCreditsLow, tab, setTab, setState, plugins, loadDropStatus, uiShellMode, switchShellView, uiLanguage, setUiLanguage, uiTheme, setUiTheme, t, } = useApp();
-    const [copied, setCopied] = useState(null);
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-    useEffect(() => {
-        void loadDropStatus();
-    }, [loadDropStatus]);
-    // Clear copied state after 2 seconds
-    useEffect(() => {
-        if (copied) {
-            const timer = setTimeout(() => setCopied(null), 2000);
-            return () => clearTimeout(timer);
-        }
-    }, [copied]);
-    // Close mobile menu on escape key
-    useEffect(() => {
-        if (typeof window === "undefined")
-            return;
-        const handleKeyDown = (e) => {
-            if (e.key === "Escape") {
-                setMobileMenuOpen(false);
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, []);
-    const streamingEnabled = useMemo(() => plugins.some((plugin) => plugin.id === "streaming-base" && plugin.enabled), [plugins]);
-    const tabGroups = useMemo(() => getTabGroups(streamingEnabled), [streamingEnabled]);
-    const creditColor = elizaCloudCreditsCritical
-        ? "border-danger text-danger bg-danger/10"
-        : elizaCloudCreditsLow
-            ? "border-warn text-warn bg-warn/10"
-            : "border-ok text-ok bg-ok/10";
-    const shellMode = tab === "character" || tab === "character-select"
-        ? "native"
-        : (uiShellMode ?? "companion");
-    const activeShellView = shellMode === "companion"
-        ? "companion"
-        : tab === "character" || tab === "character-select"
-            ? "character"
-            : "desktop";
-    const useMinimalHeaderChrome = transparent || activeShellView !== "desktop";
-    const showNavigationMenu = activeShellView === "desktop";
-    const showCloudCredits = activeShellView === "desktop" && !hideCloudCredits;
-    const showCloudCreditsStatus = showCloudCredits && elizaCloudConnected;
-    const cloudCreditsDisplay = elizaCloudCredits === null
-        ? t("header.elizaCloudConnected")
-        : `$${elizaCloudCredits.toFixed(2)}`;
-    const handleShellViewChange = (view) => {
-        switchShellView(view);
-    };
-    const openCloudBilling = () => {
-        setState("cloudDashboardView", "billing");
-        setTab("settings");
-        setMobileMenuOpen(false);
-    };
-    const renderCloudCredits = (placement) => {
-        if (!showCloudCreditsStatus)
-            return null;
-        if (elizaCloudConnected) {
-            if (placement === "desktop") {
-                return (_jsxs("button", { type: "button", "data-testid": "header-cloud-credits-desktop", className: `hidden shrink-0 items-center gap-1.5 px-2.5 py-1.5 h-11 border rounded-md font-mono text-[11px] sm:text-xs no-underline transition-all duration-200 hover:border-accent hover:text-txt hover:shadow-sm sm:inline-flex ${elizaCloudCredits === null ? "border-muted text-muted" : creditColor}`, title: t("header.CloudCreditsBalanc"), onClick: openCloudBilling, children: [_jsx(CircleDollarSign, { className: "w-3.5 h-3.5" }), cloudCreditsDisplay] }));
-            }
-            return (_jsxs("button", { type: "button", "data-testid": "header-cloud-credits-mobile", className: `flex w-full items-center justify-between gap-3 px-3 py-3 border rounded-xl text-left no-underline transition-all duration-200 hover:border-accent hover:text-txt ${elizaCloudCredits === null ? "border-muted text-muted" : creditColor}`, title: t("header.CloudCreditsBalanc"), onClick: openCloudBilling, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-3", children: [_jsx(CircleDollarSign, { className: "h-4 w-4 shrink-0" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium font-sans text-txt", children: t("header.Cloud") }), _jsx("span", { className: "truncate text-xs font-sans text-muted", children: t("header.CloudCreditsBalanc") })] })] }), _jsx("span", { className: "shrink-0 font-mono text-sm", children: cloudCreditsDisplay })] }));
-        }
-        if (placement === "desktop") {
-            return (_jsxs("span", { className: "hidden shrink-0 items-center gap-1 px-2.5 py-1.5 h-11 border border-danger text-danger bg-danger/10 rounded-md font-mono text-[11px] sm:text-xs sm:inline-flex", children: [_jsx(AlertTriangle, { className: "w-3.5 h-3.5" }), _jsx("span", { className: "hidden sm:inline", children: t("header.cloudDisconnected") }), _jsx("span", { className: "sm:hidden", children: t("header.Cloud") })] }));
-        }
-        return (_jsxs("div", { "data-testid": "header-cloud-credits-mobile", className: "flex w-full items-center gap-3 px-3 py-3 border border-danger text-danger bg-danger/10 rounded-xl", children: [_jsx(AlertTriangle, { className: "h-4 w-4 shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-current", children: t("header.Cloud") }), _jsx("div", { className: "truncate text-xs text-danger/80", children: t("header.cloudDisconnected") })] })] }));
-    };
-    const renderMobileMenuThemeToggle = () => (_jsx("div", { "data-testid": "header-theme-toggle-mobile", className: "flex items-center justify-end", children: _jsx(ThemeToggle, { uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, className: "!h-11 !w-11 !min-h-11 !min-w-11" }) }));
-    const renderMobileMenuLanguageDropdown = () => (_jsx("div", { "data-testid": "header-language-dropdown-mobile", className: "shrink-0", children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, menuPlacement: "top-end", triggerClassName: "!h-11 !min-h-11 !rounded-xl !px-3.5" }) }));
-    useEffect(() => {
-        if (shellMode !== "native")
-            return;
-        setState("chatMode", "power");
-    }, [setState, shellMode]);
-    useEffect(() => {
-        if (showNavigationMenu)
-            return;
-        setMobileMenuOpen(false);
-    }, [showNavigationMenu]);
-    return (_jsxs(_Fragment, { children: [_jsx("header", { className: `py-2 px-3 sm:py-3 sm:px-4 z-20 sticky top-0 w-full transition-all ${useMinimalHeaderChrome
-                    ? "border-b border-transparent bg-transparent backdrop-blur-0 shadow-none"
-                    : "border-b border-border/50 bg-bg/80 backdrop-blur-xl"}`, children: _jsxs(ShellHeaderControls, { activeShellView: activeShellView, onShellViewChange: handleShellViewChange, uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, languageDropdownClassName: showNavigationMenu ? "hidden sm:inline-flex" : undefined, languageDropdownWrapperTestId: showNavigationMenu ? "header-language-dropdown-desktop" : undefined, themeToggleWrapperClassName: showNavigationMenu ? "hidden sm:flex" : undefined, themeToggleWrapperTestId: showNavigationMenu ? "header-theme-toggle-desktop" : undefined, rightExtras: renderCloudCredits("desktop"), trailingExtras: showNavigationMenu ? (_jsx("button", { type: "button", className: `sm:hidden ${HEADER_ICON_BUTTON_CLASSNAME}`, onClick: () => setMobileMenuOpen(true), "aria-label": "Open navigation menu", "aria-expanded": mobileMenuOpen, children: _jsx(Menu, { className: "w-5 h-5" }) })) : null, children: [mobileLeft ? (_jsx("div", { className: "flex sm:hidden", children: mobileLeft })) : null, showNavigationMenu ? (_jsx("nav", { className: "hidden sm:flex flex-1 items-center justify-left gap-1 overflow-x-auto whitespace-nowrap px-2 scrollbar-hide", children: tabGroups.map((group) => {
-                                const primaryTab = group.tabs[0];
-                                const isActive = group.tabs.includes(tab);
-                                const Icon = group.icon;
-                                return (_jsxs("button", { type: "button", className: `inline-flex items-center justify-center gap-0 xl:gap-1.5 shrink-0 px-2.5 md:px-3 xl:px-4 py-2 text-[12px] bg-transparent border border-transparent cursor-pointer transition-all duration-300 rounded-full ${isActive
-                                        ? "text-accent font-bold bg-accent/15 shadow-[0_0_15px_rgba(var(--accent),0.18)] border-accent/40 ring-1 ring-inset ring-accent/20"
-                                        : "text-muted hover:text-txt hover:bg-bg-hover hover:border-border/50"}`, onClick: () => setTab(primaryTab), title: group.description, children: [_jsx("span", { "data-testid": `header-nav-icon-${primaryTab}`, className: "inline-flex md:hidden xl:inline-flex", children: _jsx(Icon, { className: "w-4 h-4" }) }), _jsx("span", { "data-testid": `header-nav-label-${primaryTab}`, className: "hidden md:inline", children: t(NAV_LABEL_I18N_KEY[group.label] ?? group.label) })] }, group.label));
-                            }) })) : null] }) }), showNavigationMenu && mobileMenuOpen && (_jsxs("div", { className: "fixed inset-0 z-[140] sm:hidden", role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", children: [_jsx("button", { type: "button", className: "absolute inset-0 bg-black/30 backdrop-blur-sm w-full h-full border-0 cursor-pointer", onClick: () => setMobileMenuOpen(false), "aria-label": "Close navigation menu" }), _jsx("div", { className: "absolute right-0 top-0 bottom-0 w-[280px] max-w-[85vw] bg-bg border-l border-border shadow-2xl animate-in slide-in-from-right duration-200 flex flex-col", children: _jsxs("div", { className: "flex flex-1 flex-col py-3 px-3", children: [_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx("div", { className: "flex flex-col gap-1", children: tabGroups.map((group, index) => {
-                                            const primaryTab = group.tabs[0];
-                                            const isActive = group.tabs.includes(tab);
-                                            const Icon = group.icon;
-                                            return (_jsxs("button", { type: "button", className: `w-full flex items-center gap-3 px-3 py-3.5 border rounded-xl text-[14px] font-medium transition-all duration-300 cursor-pointer min-h-[48px] ${isActive
-                                                    ? "border-accent/40 bg-accent/15 text-accent shadow-[0_0_15px_rgba(var(--accent),0.18)] ring-1 ring-inset ring-accent/20"
-                                                    : "border-transparent bg-transparent text-txt hover:border-border/50 hover:bg-bg-hover"}`, style: { animationDelay: `${index * 50}ms` }, onClick: () => {
-                                                    setTab(primaryTab);
-                                                    setMobileMenuOpen(false);
-                                                }, children: [_jsx("span", { className: `w-8 h-8 rounded-md flex items-center justify-center shrink-0 ${isActive ? "bg-accent/20" : "bg-bg-accent"}`, children: _jsx(Icon, { className: `w-4 h-4 ${isActive ? "text-txt" : "text-muted"}` }) }), _jsxs("div", { className: "flex-1 text-left", children: [_jsx("div", { className: "font-medium", children: t(NAV_LABEL_I18N_KEY[group.label] ?? group.label) }), group.description && (_jsx("div", { className: "text-[11px] text-muted mt-0.5", children: group.description }))] })] }, group.label));
-                                        }) }) }), _jsxs("div", { className: "mt-3 flex flex-col gap-3 border-t border-border/50 pt-3", children: [renderCloudCredits("mobile-menu"), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [renderMobileMenuLanguageDropdown(), renderMobileMenuThemeToggle()] })] })] }) })] }))] }));
-}