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

package/components/GameView.js

@@ -0,0 +1,294 @@
+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

@@ -0,0 +1,8 @@
+/**
+ * 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

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

package/components/GameViewOverlay.js

@@ -0,0 +1,70 @@
+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

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

package/components/GlobalEmoteOverlay.d.ts.map

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

package/components/GlobalEmoteOverlay.js

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+{"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,2CAgXhG"}

package/components/Header.js

@@ -0,0 +1,123 @@
+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 && (elizaCloudEnabled || 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()] })] })] }) })] }))] }));
+}