@elizaos/agent 2.0.0-alpha.358 → 2.0.0-alpha.376

package/apps/app-companion/src/components/companion/CompanionView.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatModalView, useApp, usePtySessions, useRenderGuard, } from "@elizaos/app-core";
+import { PtyConsoleSidePanel } from "@elizaos/app-task-coordinator";
+import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useState, } from "react";
+import { CompanionHeader } from "./CompanionHeader";
+import { CompanionSceneHost } from "./CompanionSceneHost";
+import { useCompanionSceneStatus } from "./companion-scene-status-context";
+import { EmotePicker } from "./EmotePicker";
+import { InferenceCloudAlertButton } from "./InferenceCloudAlertButton";
+import { resolveCompanionInferenceNotice } from "./resolve-companion-inference-notice";
+const CharacterEditor = lazy(() => import("@elizaos/app-core/components/character/CharacterEditor").then((m) => ({
+    default: m.CharacterEditor,
+})));
+const COMPANION_UI_REVEAL_FALLBACK_MS = 1400;
+const COMPANION_DOCK_HEIGHT = "min(42vh, 24rem)";
+/**
+ * Isolated wrapper for the PTY side panel so that CompanionViewOverlay doesn't
+ * need to subscribe to ptySessions (which polls every 5 s) for a panel that is
+ * only visible when the user has explicitly clicked a session.
+ */
+const CompanionPtyPanel = memo(function CompanionPtyPanel({ sessionId, onClose, }) {
+    const { ptySessions } = usePtySessions();
+    if (ptySessions.length === 0)
+        return null;
+    return (_jsx(PtyConsoleSidePanel, { activeSessionId: sessionId, sessions: ptySessions, onClose: onClose }));
+});
+/**
+ * Inner overlay that subscribes to useApp() for frequently-changing data
+ * (conversationMessages, chatLastUsage, etc.). Extracted so that
+ * CompanionView itself doesn't subscribe — keeping the children prop
+ * passed to CompanionSceneHost referentially stable and avoiding
+ * cascading re-renders into the 3D scene.
+ */
+const CompanionViewOverlay = memo(function CompanionViewOverlay() {
+    useRenderGuard("CompanionView");
+    const { uiLanguage, setUiLanguage, uiTheme, setUiTheme, chatAgentVoiceMuted, chatLastUsage, conversationMessages, elizaCloudAuthRejected, elizaCloudConnected, elizaCloudCreditsError, elizaCloudEnabled, handleNewConversation, navigation, setState, setTab, t, } = useApp();
+    const [companionView, setCompanionView] = useState("companion");
+    const [ptySidePanelSessionId, setPtySidePanelSessionId] = useState(null);
+    const [historyOpen, setHistoryOpen] = useState(false);
+    const handleSidebarClose = useCallback(() => setHistoryOpen(false), []);
+    const handlePtySessionClick = useCallback((id) => setPtySidePanelSessionId((prev) => (prev === id ? null : id)), []);
+    const handlePtyPanelClose = useCallback(() => setPtySidePanelSessionId(null), []);
+    const { avatarReady: sceneAvatarReady } = useCompanionSceneStatus();
+    // Gate chat + header behind avatar load — don't show chat or play
+    // greeting speech until the VRM finishes its teleport-in animation.
+    const [avatarReadyFallback, setAvatarReadyFallback] = useState(false);
+    useEffect(() => {
+        if (sceneAvatarReady) {
+            setAvatarReadyFallback(false);
+            return;
+        }
+        setAvatarReadyFallback(false);
+        const fallbackTimer = window.setTimeout(() => {
+            setAvatarReadyFallback(true);
+        }, COMPANION_UI_REVEAL_FALLBACK_MS);
+        return () => {
+            window.clearTimeout(fallbackTimer);
+        };
+    }, [sceneAvatarReady]);
+    const avatarReady = sceneAvatarReady || avatarReadyFallback;
+    const handleExitToDesktop = useCallback(() => {
+        setState("activeOverlayApp", null);
+        setTab("chat");
+    }, [setState, setTab]);
+    const handleSwitchToCharacter = useCallback(() => {
+        setCompanionView("character");
+    }, []);
+    const handleSwitchToCompanion = useCallback(() => {
+        setCompanionView("companion");
+    }, []);
+    useEffect(() => {
+        setState("chatMode", elizaCloudEnabled || elizaCloudConnected ? "power" : "simple");
+    }, [elizaCloudConnected, elizaCloudEnabled, setState]);
+    const hasInterruptedAssistant = useMemo(() => conversationMessages.some((m) => m.role === "assistant" && m.interrupted), [conversationMessages]);
+    const inferenceNotice = useMemo(() => resolveCompanionInferenceNotice({
+        elizaCloudConnected,
+        elizaCloudAuthRejected,
+        elizaCloudCreditsError,
+        elizaCloudEnabled,
+        chatLastUsageModel: chatLastUsage?.model,
+        hasInterruptedAssistant,
+        t,
+    }), [
+        chatLastUsage?.model,
+        elizaCloudAuthRejected,
+        elizaCloudConnected,
+        elizaCloudCreditsError,
+        elizaCloudEnabled,
+        hasInterruptedAssistant,
+        t,
+    ]);
+    const handleInferenceAlertClick = useCallback(() => {
+        if (!inferenceNotice)
+            return;
+        setState("activeOverlayApp", null);
+        navigation.scheduleAfterTabCommit(() => {
+            setTab("settings");
+            if (inferenceNotice.kind === "cloud") {
+                setState("cloudDashboardView", "billing");
+            }
+        });
+    }, [inferenceNotice, navigation, setState, setTab]);
+    const companionHeaderRightExtras = (_jsx(_Fragment, { children: inferenceNotice ? (_jsx(InferenceCloudAlertButton, { notice: inferenceNotice, onPointerDown: (e) => e.stopPropagation(), onClick: handleInferenceAlertClick })) : null }));
+    return (_jsxs("div", { className: "absolute inset-0 z-10 flex flex-col pointer-events-none", children: [_jsx("div", { style: {
+                    opacity: avatarReady ? 1 : 0,
+                    transition: "opacity 0.35s ease-out",
+                    pointerEvents: avatarReady ? "auto" : "none",
+                }, children: _jsx(CompanionHeader, { activeView: companionView, onExitToDesktop: handleExitToDesktop, onExitToCharacter: handleSwitchToCharacter, onSwitchToCompanion: handleSwitchToCompanion, uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, chatAgentVoiceMuted: chatAgentVoiceMuted, onToggleVoiceMute: () => setState("chatAgentVoiceMuted", !chatAgentVoiceMuted), onNewChat: () => void handleNewConversation(), rightExtras: companionHeaderRightExtras }) }), avatarReady && companionView === "companion" && (_jsx("div", { className: "pointer-events-auto absolute inset-x-0 bottom-0 z-20 flex justify-center px-1.5 sm:px-4", style: {
+                    paddingBottom: "calc(var(--safe-area-bottom, 0px) + 0.75rem)",
+                }, children: _jsx("div", { className: "relative w-full max-w-5xl min-w-0", style: { height: COMPANION_DOCK_HEIGHT, minHeight: "17rem" }, children: _jsx(ChatModalView, { variant: "companion-dock", showSidebar: historyOpen, onSidebarClose: handleSidebarClose, onPtySessionClick: handlePtySessionClick }) }) })), avatarReady && companionView === "character" && (_jsx(Suspense, { fallback: null, children: _jsx(CharacterEditor, { sceneOverlay: true }) })), ptySidePanelSessionId && companionView === "companion" && (_jsx("div", { className: "pointer-events-auto", children: _jsx(CompanionPtyPanel, { sessionId: ptySidePanelSessionId, onClose: handlePtyPanelClose }) })), _jsx(EmotePicker, {}), _jsx("div", { className: "flex-1 grid grid-cols-[1fr_auto] gap-6 min-h-0 relative", children: _jsx("div", { className: "w-full h-full" }) })] }));
+});
+/**
+ * CompanionView — thin shell that composes CompanionSceneHost + overlay.
+ * Does NOT subscribe to useApp() so CompanionSceneHost receives stable
+ * children and avoids re-rendering the 3D scene on unrelated state changes.
+ */
+export const CompanionView = memo(function CompanionView() {
+    return (_jsx(CompanionSceneHost, { active: true, children: _jsx(CompanionViewOverlay, {}) }));
+});

package/apps/app-companion/src/components/companion/EmotePicker.d.ts

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

package/apps/app-companion/src/components/companion/EmotePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmotePicker.d.ts","sourceRoot":"","sources":["../../../../../../../../apps/app-companion/src/components/companion/EmotePicker.tsx"],"names":[],"mappings":"AAkNA,wBAAgB,WAAW,4CAsV1B"}

package/apps/app-companion/src/components/companion/EmotePicker.js

@@ -0,0 +1,351 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { client, dispatchAppEvent, EMOTE_PICKER_EVENT, STOP_EMOTE_EVENT, useApp, } from "@elizaos/app-core";
+import { Button, Input, useTimeout, Z_SYSTEM_CRITICAL, } from "@elizaos/ui";
+import { Menu, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+// Category icons
+const CATEGORY_ICONS = {
+    greeting: "\u{1F44B}",
+    emotion: "\u{1F622}",
+    dance: "\u{1F57A}",
+    combat: "\u{2694}",
+    idle: "\u{1F9D8}",
+    movement: "\u{1F3C3}",
+    other: "\u{2728}",
+};
+// Emote icons
+const EMOTE_ICONS = {
+    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}",
+    idle: "\u{1F9D8}",
+    talk: "\u{1F5E3}",
+    squat: "\u{1F9CE}",
+    fishing: "\u{1F3A3}",
+    float: "\u{1F54A}",
+    jump: "\u{1F4A8}",
+    flip: "\u{1F938}",
+    run: "\u{1F3C3}",
+    walk: "\u{1F6B6}",
+    crawling: "\u{1F40D}",
+    fall: "\u{1F4A5}",
+};
+// All emotes
+const ALL_EMOTES = [
+    // Greeting
+    { id: "wave", name: "Wave", category: "greeting", icon: EMOTE_ICONS.wave },
+    { id: "kiss", name: "Kiss", category: "greeting", icon: EMOTE_ICONS.kiss },
+    // Emotion
+    {
+        id: "crying",
+        name: "Crying",
+        category: "emotion",
+        icon: EMOTE_ICONS.crying,
+    },
+    {
+        id: "sorrow",
+        name: "Sorrow",
+        category: "emotion",
+        icon: EMOTE_ICONS.sorrow,
+    },
+    {
+        id: "rude-gesture",
+        name: "Rude Gesture",
+        category: "emotion",
+        icon: EMOTE_ICONS["rude-gesture"],
+    },
+    {
+        id: "looking-around",
+        name: "Looking Around",
+        category: "emotion",
+        icon: EMOTE_ICONS["looking-around"],
+    },
+    // Dance
+    {
+        id: "dance-happy",
+        name: "Dance Happy",
+        category: "dance",
+        icon: EMOTE_ICONS["dance-happy"],
+    },
+    {
+        id: "dance-breaking",
+        name: "Dance Breaking",
+        category: "dance",
+        icon: EMOTE_ICONS["dance-breaking"],
+    },
+    {
+        id: "dance-hiphop",
+        name: "Dance Hip Hop",
+        category: "dance",
+        icon: EMOTE_ICONS["dance-hiphop"],
+    },
+    {
+        id: "dance-popping",
+        name: "Dance Popping",
+        category: "dance",
+        icon: EMOTE_ICONS["dance-popping"],
+    },
+    // Combat
+    {
+        id: "hook-punch",
+        name: "Hook Punch",
+        category: "combat",
+        icon: EMOTE_ICONS["hook-punch"],
+    },
+    {
+        id: "punching",
+        name: "Punching",
+        category: "combat",
+        icon: EMOTE_ICONS.punching,
+    },
+    {
+        id: "firing-gun",
+        name: "Firing Gun",
+        category: "combat",
+        icon: EMOTE_ICONS["firing-gun"],
+    },
+    {
+        id: "sword-swing",
+        name: "Sword Swing",
+        category: "combat",
+        icon: EMOTE_ICONS["sword-swing"],
+    },
+    {
+        id: "chopping",
+        name: "Chopping",
+        category: "combat",
+        icon: EMOTE_ICONS.chopping,
+    },
+    {
+        id: "spell-cast",
+        name: "Spell Cast",
+        category: "combat",
+        icon: EMOTE_ICONS["spell-cast"],
+    },
+    { id: "range", name: "Range", category: "combat", icon: EMOTE_ICONS.range },
+    { id: "death", name: "Death", category: "combat", icon: EMOTE_ICONS.death },
+    // Idle
+    { id: "idle", name: "Idle", category: "idle", icon: EMOTE_ICONS.idle },
+    { id: "talk", name: "Talk", category: "idle", icon: EMOTE_ICONS.talk },
+    { id: "squat", name: "Squat", category: "idle", icon: EMOTE_ICONS.squat },
+    {
+        id: "fishing",
+        name: "Fishing",
+        category: "idle",
+        icon: EMOTE_ICONS.fishing,
+    },
+    // Movement
+    { id: "float", name: "Float", category: "movement", icon: EMOTE_ICONS.float },
+    { id: "jump", name: "Jump", category: "movement", icon: EMOTE_ICONS.jump },
+    { id: "flip", name: "Flip", category: "movement", icon: EMOTE_ICONS.flip },
+    { id: "run", name: "Run", category: "movement", icon: EMOTE_ICONS.run },
+    { id: "walk", name: "Walk", category: "movement", icon: EMOTE_ICONS.walk },
+    {
+        id: "crawling",
+        name: "Crawling",
+        category: "movement",
+        icon: EMOTE_ICONS.crawling,
+    },
+    { id: "fall", name: "Fall", category: "movement", icon: EMOTE_ICONS.fall },
+];
+const CATEGORIES = [
+    "greeting",
+    "emotion",
+    "dance",
+    "combat",
+    "idle",
+    "movement",
+];
+const CATEGORY_LABELS = {
+    greeting: "Greeting",
+    emotion: "Emotion",
+    dance: "Dance",
+    combat: "Combat",
+    idle: "Idle",
+    movement: "Movement",
+};
+export function EmotePicker() {
+    const { setTimeout } = useTimeout();
+    const { emotePickerOpen, openEmotePicker, closeEmotePicker, t } = useApp();
+    const [search, setSearch] = useState("");
+    const [playing, setPlaying] = useState(null);
+    const [activeCategory, setActiveCategory] = useState(null);
+    const inputRef = useRef(null);
+    const panelRef = useRef(null);
+    const posRef = useRef({ x: 0, y: 0 });
+    const dragOrigin = useRef(null);
+    // Apply position to panel
+    const applyPosition = useCallback((x, y) => {
+        const el = panelRef.current;
+        if (!el)
+            return;
+        el.style.left = `${x}px`;
+        el.style.top = `${y}px`;
+        el.style.bottom = "auto";
+        el.style.right = "auto";
+        posRef.current = { x, y };
+    }, []);
+    // Drag handlers
+    const onPointerDown = useCallback((e) => {
+        const el = panelRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        dragOrigin.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            rect,
+        };
+        const onPointerMove = (moveEvent) => {
+            if (!dragOrigin.current)
+                return;
+            const dx = moveEvent.clientX - dragOrigin.current.startX;
+            const dy = moveEvent.clientY - dragOrigin.current.startY;
+            let newX = dragOrigin.current.rect.left + dx;
+            let newY = dragOrigin.current.rect.top + dy;
+            // Clamp to viewport
+            const maxX = window.innerWidth - dragOrigin.current.rect.width;
+            const maxY = window.innerHeight - dragOrigin.current.rect.height;
+            newX = Math.max(0, Math.min(newX, maxX));
+            newY = Math.max(0, Math.min(newY, maxY));
+            applyPosition(newX, newY);
+        };
+        const onPointerUp = () => {
+            dragOrigin.current = null;
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", onPointerUp);
+        };
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+    }, [applyPosition]);
+    // Reset position on open
+    useEffect(() => {
+        if (emotePickerOpen && panelRef.current) {
+            panelRef.current.style.left = "";
+            panelRef.current.style.top = "";
+            panelRef.current.style.bottom = "";
+            panelRef.current.style.right = "";
+            posRef.current = { x: 0, y: 0 };
+        }
+    }, [emotePickerOpen]);
+    // Filter emotes
+    const filteredEmotes = useMemo(() => {
+        let emotes = ALL_EMOTES;
+        if (activeCategory) {
+            emotes = emotes.filter((e) => e.category === activeCategory);
+        }
+        if (search.trim()) {
+            const query = search.toLowerCase();
+            emotes = emotes.filter((e) => e.name.toLowerCase().includes(query) ||
+                e.id.toLowerCase().includes(query));
+        }
+        return emotes;
+    }, [search, activeCategory]);
+    // Play emote
+    const playEmote = useCallback(async (emoteId) => {
+        setPlaying(emoteId);
+        try {
+            await client.playEmote(emoteId);
+        }
+        catch (err) {
+            console.error("Failed to play emote:", err);
+        }
+        finally {
+            setTimeout(() => setPlaying(null), 1000);
+        }
+    }, [setTimeout]);
+    // Stop emote
+    const stopEmote = useCallback(() => {
+        dispatchAppEvent(STOP_EMOTE_EVENT);
+        setPlaying(null);
+    }, []);
+    // Keyboard shortcuts
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Cmd+E toggle
+            if ((e.metaKey || e.ctrlKey) && e.key === "e") {
+                e.preventDefault();
+                if (emotePickerOpen) {
+                    closeEmotePicker();
+                }
+                else {
+                    openEmotePicker();
+                }
+            }
+            // Escape to close
+            if (e.key === "Escape" && emotePickerOpen) {
+                closeEmotePicker();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [emotePickerOpen, openEmotePicker, closeEmotePicker]);
+    // Desktop bridge listener
+    useEffect(() => {
+        const handleDesktopToggle = () => {
+            if (emotePickerOpen) {
+                closeEmotePicker();
+            }
+            else {
+                openEmotePicker();
+            }
+        };
+        document.addEventListener(EMOTE_PICKER_EVENT, handleDesktopToggle);
+        return () => document.removeEventListener(EMOTE_PICKER_EVENT, handleDesktopToggle);
+    }, [emotePickerOpen, openEmotePicker, closeEmotePicker]);
+    // Focus search input on open
+    useEffect(() => {
+        if (emotePickerOpen && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [emotePickerOpen]);
+    if (!emotePickerOpen)
+        return null;
+    return (_jsxs("div", { ref: panelRef, className: `fixed bottom-4 left-4 z-[${Z_SYSTEM_CRITICAL}] w-[320px] rounded-xl shadow-2xl`, style: {
+            background: "rgba(18, 22, 32, 0.96)",
+            border: "1px solid rgba(240, 178, 50, 0.18)",
+            backdropFilter: "blur(24px)",
+            boxShadow: "0 8px 60px rgba(0,0,0,0.6), 0 0 40px rgba(240,178,50,0.06)",
+        }, children: [_jsxs("div", { className: "flex cursor-move items-center justify-between px-3 py-2", style: { borderBottom: "1px solid rgba(255,255,255,0.08)" }, onPointerDown: onPointerDown, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Menu, { className: "w-4 h-4", style: { color: "rgba(255,255,255,0.45)" } }), _jsx("span", { className: "text-sm font-semibold", style: { color: "rgba(240,238,250,0.92)" }, children: t("emotepicker.Emotes") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "destructive", size: "sm", onClick: stopEmote, className: "rounded px-2 py-1 text-xs font-medium h-auto", children: t("game.stop") }), _jsx("span", { className: "text-xs", style: { color: "rgba(255,255,255,0.45)" }, children: "\u2318E" }), _jsx(Button, { variant: "ghost", size: "icon", onClick: closeEmotePicker, className: "h-auto w-auto p-0", style: { color: "rgba(255,255,255,0.45)" }, onMouseEnter: (e) => {
+                                    e.currentTarget.style.color = "rgba(240,238,250,0.92)";
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.color = "rgba(255,255,255,0.45)";
+                                }, children: _jsx(X, { className: "w-4 h-4" }) })] })] }), _jsx("div", { className: "px-3 py-2", style: { borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: _jsx(Input, { ref: inputRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: t("emotepicker.SearchEmotes"), className: "w-full rounded px-2 py-1 text-sm focus:outline-none focus:ring-1", style: {
+                        background: "rgba(255,255,255,0.06)",
+                        color: "rgba(240,238,250,0.92)",
+                        border: "1px solid rgba(255,255,255,0.1)",
+                    } }) }), _jsxs("div", { className: "flex gap-1 overflow-x-auto px-3 py-2", style: { borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setActiveCategory(null), className: "shrink-0 rounded px-2 py-1 text-xs font-medium h-auto", style: {
+                            background: activeCategory === null
+                                ? "var(--accent)"
+                                : "rgba(255,255,255,0.06)",
+                            color: activeCategory === null
+                                ? "var(--accent-foreground)"
+                                : "rgba(255,255,255,0.6)",
+                        }, children: t("wallet.all") }), CATEGORIES.map((cat) => (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setActiveCategory(cat), className: "shrink-0 rounded px-2 py-1 text-xs font-medium h-auto", style: {
+                            background: activeCategory === cat
+                                ? "var(--accent)"
+                                : "rgba(255,255,255,0.06)",
+                            color: activeCategory === cat
+                                ? "var(--accent-foreground)"
+                                : "rgba(255,255,255,0.6)",
+                        }, children: [_jsx("span", { className: "mr-1", children: CATEGORY_ICONS[cat] }), CATEGORY_LABELS[cat]] }, cat)))] }), _jsxs("div", { className: "max-h-[400px] overflow-y-auto p-3", children: [_jsx("div", { className: "grid grid-cols-5 gap-2", children: filteredEmotes.map((emote) => (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => playEmote(emote.id), disabled: playing === emote.id, title: emote.name, className: "flex aspect-square items-center justify-center rounded text-2xl h-auto w-auto", style: {
+                                background: playing === emote.id
+                                    ? "var(--accent)"
+                                    : "rgba(255,255,255,0.06)",
+                            }, children: emote.icon }, emote.id))) }), filteredEmotes.length === 0 && (_jsx("div", { className: "py-8 text-center text-sm", style: { color: "rgba(255,255,255,0.3)" }, children: t("emotepicker.NoEmotesFound") }))] })] }));
+}

package/apps/app-companion/src/components/companion/GlobalEmoteOverlay.d.ts

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

package/apps/app-companion/src/components/companion/GlobalEmoteOverlay.d.ts.map

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

package/apps/app-companion/src/components/companion/GlobalEmoteOverlay.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { APP_EMOTE_EVENT } from "@elizaos/app-core";
+import { Z_GLOBAL_EMOTE } from "@elizaos/ui";
+import { useEffect, useRef, useState } from "react";
+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-[${Z_GLOBAL_EMOTE}] 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/apps/app-companion/src/components/companion/InferenceCloudAlertButton.d.ts

@@ -0,0 +1,9 @@
+import { type PointerEvent } from "react";
+import type { CompanionInferenceNotice } from "./resolve-companion-inference-notice";
+export interface InferenceCloudAlertButtonProps {
+    notice: CompanionInferenceNotice;
+    onPointerDown?: (e: PointerEvent<HTMLButtonElement>) => void;
+    onClick: () => void;
+}
+export declare const InferenceCloudAlertButton: import("react").MemoExoticComponent<(props: InferenceCloudAlertButtonProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=InferenceCloudAlertButton.d.ts.map

package/apps/app-companion/src/components/companion/InferenceCloudAlertButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InferenceCloudAlertButton.d.ts","sourceRoot":"","sources":["../../../../../../../../apps/app-companion/src/components/companion/InferenceCloudAlertButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA4B,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAErF,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,wBAAwB,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,yBAAyB,8CACM,8BAA8B,6CA4BzE,CAAC"}

package/apps/app-companion/src/components/companion/InferenceCloudAlertButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, IconTooltip } from "@elizaos/ui";
+import { AlertTriangle } from "lucide-react";
+import { memo } from "react";
+export const InferenceCloudAlertButton = memo(function InferenceCloudAlertButton(props) {
+    const { notice, onPointerDown, onClick } = props;
+    const isDanger = notice.variant === "danger";
+    const toneVar = isDanger ? "var(--danger)" : "var(--warn)";
+    const toneStyle = {
+        borderColor: `color-mix(in srgb, ${toneVar} 34%, var(--border))`,
+        backgroundColor: `color-mix(in srgb, ${toneVar} 10%, transparent)`,
+        backgroundImage: `linear-gradient(180deg, color-mix(in srgb, ${toneVar} 18%, rgba(255,255,255,0.1)), color-mix(in srgb, ${toneVar} 10%, transparent))`,
+        color: `color-mix(in srgb, var(--text-strong) 78%, ${toneVar} 22%)`,
+    };
+    return (_jsx(IconTooltip, { label: notice.tooltip, position: "bottom", multiline: true, children: _jsx(Button, { size: "icon", variant: "outline", className: "inline-flex h-11 w-11 min-h-touch min-w-touch items-center justify-center rounded-xl border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_14px_32px_rgba(3,5,10,0.14)] ring-1 ring-inset ring-white/6 backdrop-blur-xl supports-[backdrop-filter]:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_62%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.22),0_18px_36px_rgba(3,5,10,0.18)] active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt", "aria-label": notice.tooltip, "data-testid": "companion-inference-cloud-alert", onPointerDown: onPointerDown, onClick: onClick, style: toneStyle, children: _jsx(AlertTriangle, { className: "pointer-events-none h-5 w-5 shrink-0" }) }) }));
+});

package/apps/app-companion/src/components/companion/VrmStage.d.ts

@@ -0,0 +1,27 @@
+import { type CompanionHalfFramerateMode, type CompanionVrmPowerMode, type TranslateFn } from "@elizaos/app-core";
+import { type ReactElement } from "react";
+import type { CameraProfile, VrmEngine } from "../avatar/VrmEngine";
+import { type VrmViewerProps } from "../avatar/VrmViewer";
+/**
+ * VrmStage — single persistent VRM engine that swaps only the character model
+ * when `vrmPath` changes. The mathematical environment stays
+ * continuously rendered, completely decoupled from character selection.
+ */
+export declare const VrmStage: import("react").MemoExoticComponent<({ active, vrmPath, environmentTheme, fallbackPreviewUrl, cameraProfile, initialCompanionZoomNormalized, onEngineReady, onRevealStart, playWaveOnAvatarChange, onLayerEngineReady: _onLayerEngineReady, companionVrmPowerMode, companionHalfFramerateMode, companionAnimateWhenHidden, viewerComponent: ViewerComponent, t, }: {
+    active?: boolean;
+    vrmPath: string;
+    environmentTheme?: "light" | "dark";
+    fallbackPreviewUrl: string;
+    cameraProfile?: CameraProfile;
+    initialCompanionZoomNormalized?: number;
+    onEngineReady?: (engine: VrmEngine) => void;
+    onLayerEngineReady?: (vrmPath: string, engine: VrmEngine) => void;
+    onRevealStart?: () => void;
+    playWaveOnAvatarChange?: boolean;
+    companionVrmPowerMode?: CompanionVrmPowerMode;
+    companionHalfFramerateMode?: CompanionHalfFramerateMode;
+    companionAnimateWhenHidden?: boolean;
+    viewerComponent?: (props: VrmViewerProps) => ReactElement;
+    t: TranslateFn;
+}) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=VrmStage.d.ts.map