@elizaos/app-core 2.0.0-alpha.37

package/dist/components/StreamView.js

@@ -0,0 +1,300 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StreamView — Dynamic agent activity screen for live streaming.
+ *
+ * Shows what the agent is actively doing as the primary content:
+ * - Terminal output when running commands
+ * - Game iframe when playing a game
+ * - Chat exchanges when conversing
+ * - Activity dashboard when idle
+ *
+ * VRM avatar floats as a small picture-in-picture overlay (bottom-left).
+ * Activity feed runs along the right sidebar. Chat ticker at the bottom.
+ */
+import { client, isApiError } from "@elizaos/app-core/api";
+import { isElectrobunRuntime } from "@elizaos/app-core/bridge";
+import { useApp } from "@elizaos/app-core/state";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { ActivityFeed } from "./stream/ActivityFeed";
+import { AvatarPip } from "./stream/AvatarPip";
+import { ChatContent } from "./stream/ChatContent";
+import { ChatTicker } from "./stream/ChatTicker";
+import { CHAT_ACTIVE_WINDOW_MS, FULL_SIZE, IS_POPOUT, PIP_SIZE, TERMINAL_ACTIVE_WINDOW_MS, } from "./stream/helpers";
+import { IdleContent } from "./stream/IdleContent";
+import { OverlayLayer } from "./stream/overlays/OverlayLayer";
+import { useOverlayLayout } from "./stream/overlays/useOverlayLayout";
+import { StatusBar } from "./stream/StatusBar";
+import { StreamSettings } from "./stream/StreamSettings";
+import { StreamTerminal } from "./stream/StreamTerminal";
+import { StreamVoiceConfig } from "./stream/StreamVoiceConfig";
+// ---------------------------------------------------------------------------
+// StreamView
+// ---------------------------------------------------------------------------
+export function StreamView({ inModal } = {}) {
+    const { agentStatus, autonomousEvents, conversationMessages, activeGameViewerUrl, activeGameSandbox, chatAvatarSpeaking, t, } = useApp();
+    const agentName = agentStatus?.agentName ?? "Milady";
+    const isElectrobun = isElectrobunRuntime();
+    // ── Stream status polling ─────────────────────────────────────────────
+    const [streamLive, setStreamLive] = useState(false);
+    const [streamLoading, setStreamLoading] = useState(false);
+    const loadingRef = useRef(false);
+    const [streamAvailable, setStreamAvailable] = useState(true);
+    // ── Volume / mute ───────────────────────────────────────────────────
+    const [volume, setVolume] = useState(100);
+    const [muted, setMuted] = useState(false);
+    // ── Destinations ────────────────────────────────────────────────────
+    const [destinations, setDestinations] = useState([]);
+    const [activeDestination, setActiveDestination] = useState(null);
+    // ── Health stats ────────────────────────────────────────────────────
+    const [uptime, setUptime] = useState(0);
+    const [frameCount, setFrameCount] = useState(0);
+    const [audioSource, setAudioSource] = useState("");
+    // ── Stream source ─────────────────────────────────────────────────
+    const [streamSource, setStreamSource] = useState({ type: "stream-tab" });
+    useEffect(() => {
+        let mounted = true;
+        const poll = async () => {
+            if (loadingRef.current || !streamAvailable)
+                return;
+            try {
+                const status = await client.streamStatus();
+                if (mounted && !loadingRef.current) {
+                    setStreamLive(status.running && status.ffmpegAlive);
+                    setVolume(status.volume);
+                    setMuted(status.muted);
+                    setUptime(status.uptime);
+                    setFrameCount(status.frameCount);
+                    setAudioSource(status.audioSource);
+                    if (status.destination)
+                        setActiveDestination(status.destination);
+                }
+            }
+            catch (err) {
+                // 404 means stream routes are not configured — stop polling
+                if (isApiError(err) && err.status === 404) {
+                    setStreamAvailable(false);
+                    return;
+                }
+                // Other errors — API not yet available, leave as offline
+            }
+        };
+        if (!streamAvailable)
+            return;
+        poll();
+        const id = setInterval(poll, 5_000);
+        return () => {
+            mounted = false;
+            clearInterval(id);
+        };
+    }, [streamAvailable]);
+    // ── Auto-detect game source ─────────────────────────────────────────
+    useEffect(() => {
+        if (!streamLive)
+            return;
+        let cancelled = false;
+        if (activeGameViewerUrl.trim() && streamSource.type !== "game") {
+            client
+                .setStreamSource("game", activeGameViewerUrl)
+                .then((result) => {
+                if (!cancelled && result.ok) {
+                    setStreamSource({ type: "game", url: activeGameViewerUrl });
+                }
+            })
+                .catch(() => { });
+        }
+        else if (!activeGameViewerUrl.trim() && streamSource.type === "game") {
+            client
+                .setStreamSource("stream-tab")
+                .then((result) => {
+                if (!cancelled && result.ok) {
+                    setStreamSource({ type: "stream-tab" });
+                }
+            })
+                .catch(() => { });
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [activeGameViewerUrl, streamLive, streamSource.type]);
+    const toggleStream = useCallback(async () => {
+        if (loadingRef.current)
+            return;
+        loadingRef.current = true;
+        setStreamLoading(true);
+        try {
+            if (streamLive) {
+                await client.streamGoOffline();
+                setStreamLive(false);
+            }
+            else {
+                const result = await client.streamGoLive();
+                setStreamLive(result.live);
+                // Browser popout is only meaningful on the web. Electrobun now captures
+                // the native app window directly, so a renderer popup no longer changes
+                // the capture target and should not be opened on desktop.
+                if (result.live && !IS_POPOUT && !isElectrobun) {
+                    const apiBase = window
+                        .__MILADY_API_BASE__;
+                    const base = window.location.origin || "";
+                    const sep = window.location.protocol === "file:" ||
+                        window.location.protocol === "capacitor-electron:"
+                        ? "#"
+                        : "";
+                    const qs = apiBase
+                        ? `popout&apiBase=${encodeURIComponent(apiBase)}`
+                        : "popout";
+                    window.open(`${base}${sep}/?${qs}`, "milady-stream", "width=1280,height=720,menubar=no,toolbar=no,location=no,status=no");
+                }
+            }
+        }
+        catch {
+            try {
+                const status = await client.streamStatus();
+                setStreamLive(status.running && status.ffmpegAlive);
+            }
+            catch {
+                /* poll will recover within 5s */
+            }
+        }
+        finally {
+            loadingRef.current = false;
+            setStreamLoading(false);
+        }
+    }, [isElectrobun, streamLive]);
+    // ── Fetch destinations on mount ──────────────────────────────────────
+    useEffect(() => {
+        if (!streamAvailable)
+            return;
+        client
+            .getStreamingDestinations()
+            .then((res) => {
+            if (res.ok)
+                setDestinations(res.destinations);
+        })
+            .catch(() => { });
+    }, [streamAvailable]);
+    // ── Volume / mute / destination handlers ────────────────────────────
+    const handleVolumeChange = useCallback((vol) => {
+        setVolume(vol);
+        client.setStreamVolume(vol).catch(() => { });
+    }, []);
+    const handleToggleMute = useCallback(() => {
+        const next = !muted;
+        setMuted(next);
+        (next ? client.muteStream() : client.unmuteStream()).catch(() => { });
+    }, [muted]);
+    const handleDestinationChange = useCallback((id) => {
+        client
+            .setActiveDestination(id)
+            .then((res) => {
+            if (res.ok && res.destination)
+                setActiveDestination(res.destination);
+        })
+            .catch(() => { });
+    }, []);
+    const handleSourceChange = useCallback(async (sourceType, customUrl) => {
+        try {
+            const result = await client.setStreamSource(sourceType, customUrl);
+            if (result.ok) {
+                setStreamSource(result.source);
+            }
+        }
+        catch {
+            // Non-fatal — UI will show stale state
+        }
+    }, []);
+    // Settings panel
+    const [showSettings, setShowSettings] = useState(false);
+    // PIP mode state — small overlay window
+    const [isPip, setIsPip] = useState(false);
+    const togglePip = useCallback(() => {
+        if (!IS_POPOUT)
+            return;
+        const next = !isPip;
+        if (next) {
+            // Enter PIP: small window positioned at bottom-right
+            window.resizeTo(PIP_SIZE.width, PIP_SIZE.height);
+            const sw = window.screen.availWidth;
+            const sh = window.screen.availHeight;
+            window.moveTo(sw - PIP_SIZE.width - 20, sh - PIP_SIZE.height - 20);
+        }
+        else {
+            // Exit PIP: restore full size, centered
+            window.resizeTo(FULL_SIZE.width, FULL_SIZE.height);
+            const sw = window.screen.availWidth;
+            const sh = window.screen.availHeight;
+            window.moveTo(Math.round((sw - FULL_SIZE.width) / 2), Math.round((sh - FULL_SIZE.height) / 2));
+        }
+        setIsPip(next);
+    }, [isPip]);
+    // Track whether terminal is active (received output recently)
+    const [terminalActive, setTerminalActive] = useState(false);
+    const terminalTimeoutRef = useRef(null);
+    useEffect(() => {
+        const unbind = client.onWsEvent("terminal-output", (data) => {
+            const event = data.event;
+            if (event === "start" || event === "stdout" || event === "stderr") {
+                setTerminalActive(true);
+                if (terminalTimeoutRef.current) {
+                    clearTimeout(terminalTimeoutRef.current);
+                }
+                terminalTimeoutRef.current = setTimeout(() => {
+                    setTerminalActive(false);
+                }, TERMINAL_ACTIVE_WINDOW_MS);
+            }
+        });
+        return () => {
+            unbind();
+            if (terminalTimeoutRef.current)
+                clearTimeout(terminalTimeoutRef.current);
+        };
+    }, []);
+    // Detect current mode (priority order)
+    const mode = useMemo(() => {
+        if (activeGameViewerUrl.trim())
+            return "gaming";
+        if (terminalActive)
+            return "terminal";
+        const now = Date.now();
+        const recentChat = autonomousEvents.find((e) => e.stream === "assistant" && now - e.ts < CHAT_ACTIVE_WINDOW_MS);
+        if (recentChat)
+            return "chatting";
+        return "idle";
+    }, [activeGameViewerUrl, terminalActive, autonomousEvents]);
+    const overlayLayout = useOverlayLayout(activeDestination?.id);
+    const { layout } = overlayLayout;
+    const feedEvents = useMemo(() => autonomousEvents
+        .filter((e) => e.stream !== "viewer_stats")
+        .slice(-80)
+        .reverse(), [autonomousEvents]);
+    // Extract latest viewer stats from events
+    const viewerCount = useMemo(() => {
+        for (let i = autonomousEvents.length - 1; i >= 0; i--) {
+            const evt = autonomousEvents[i];
+            if (evt.stream === "viewer_stats") {
+                const p = evt.payload;
+                if (typeof p.apiViewerCount === "number")
+                    return p.apiViewerCount;
+                if (typeof p.uniqueChatters === "number")
+                    return p.uniqueChatters;
+            }
+        }
+        return null;
+    }, [autonomousEvents]);
+    // In PIP mode, render the full 1280×720 layout and CSS-transform-scale it
+    // down to fit the PIP window. This keeps the stream capture identical to
+    // the normal view — capturePage() captures the full layout at native pixels.
+    const pipScale = isPip ? PIP_SIZE.width / FULL_SIZE.width : 1;
+    const pipStyle = isPip
+        ? {
+            width: FULL_SIZE.width,
+            height: FULL_SIZE.height,
+            transform: `scale(${pipScale})`,
+            transformOrigin: "top left",
+        }
+        : undefined;
+    return (_jsxs("div", { "data-stream-view": true, className: `flex flex-col text-txt font-body ${inModal ? "bg-transparent" : "bg-bg"} ${isPip ? "" : "h-full w-full"}`, style: pipStyle, children: [_jsx(StatusBar, { agentName: agentName, mode: mode, viewerCount: viewerCount, isPip: isPip, onTogglePip: togglePip, streamAvailable: streamAvailable, streamLive: streamLive, streamLoading: streamLoading, onToggleStream: toggleStream, volume: volume, muted: muted, onVolumeChange: handleVolumeChange, onToggleMute: handleToggleMute, destinations: destinations, activeDestination: activeDestination, onDestinationChange: handleDestinationChange, uptime: uptime, frameCount: frameCount, audioSource: audioSource, streamSource: streamSource, activeGameViewerUrl: activeGameViewerUrl, onSourceChange: handleSourceChange, onOpenSettings: () => setShowSettings(true) }), !isPip && streamAvailable && (_jsx("div", { className: `flex items-center px-4 py-1 border-b ${inModal
+                    ? "border-[var(--border)] bg-[rgba(255,255,255,0.03)]"
+                    : "border-border bg-bg"}`, children: _jsx(StreamVoiceConfig, { streamLive: streamLive }) })), _jsxs("div", { className: "flex flex-1 min-h-0", children: [_jsxs("div", { className: "flex-1 min-w-0 relative", children: [!streamAvailable ? (_jsx("div", { className: "h-full flex items-center justify-center p-6", children: _jsxs("div", { className: "max-w-md rounded-2xl border border-border bg-bg-muted/50 p-6 text-center shadow-lg", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.24em] text-muted", children: t("streamview.StreamingUnavailabl") }), _jsx("h2", { className: "mt-2 text-xl font-semibold text-txt", children: t("streamview.EnableTheStreaming") }), _jsxs("p", { className: "mt-3 text-sm leading-6 text-muted", children: [t("streamview.MiladyCouldNotRea"), " ", _jsx("code", { children: t("streamview.streamingBase") }), " ", t("streamview.pluginThenReload")] }), _jsx("p", { className: "mt-4 text-xs text-muted", children: t("streamview.IfThePluginIsAlr") })] }) })) : mode === "gaming" ? (_jsx("iframe", { src: activeGameViewerUrl, title: t("streamview.Game"), className: "w-full h-full border-0", sandbox: activeGameSandbox ||
+                                    "allow-scripts allow-same-origin allow-popups" })) : mode === "terminal" ? (_jsx(StreamTerminal, {})) : mode === "chatting" ? (_jsx(ChatContent, { events: autonomousEvents.slice(-20), messages: conversationMessages })) : (_jsx(IdleContent, { events: autonomousEvents.slice(-20) })), _jsx(OverlayLayer, { layout: layout, events: autonomousEvents, agentMode: mode, agentName: agentName }), _jsx(AvatarPip, { isSpeaking: chatAvatarSpeaking }), showSettings && streamAvailable && (_jsx(StreamSettings, { destinations: destinations, activeDestination: activeDestination, onDestinationChange: handleDestinationChange, streamLive: streamLive, streamSource: streamSource, activeGameViewerUrl: activeGameViewerUrl, onSourceChange: handleSourceChange, overlayLayout: overlayLayout, onClose: () => setShowSettings(false) }))] }), _jsx("div", { className: "w-[260px] min-w-[260px] xl:w-[300px] xl:min-w-[300px]", children: _jsx(ActivityFeed, { events: feedEvents }) })] }), _jsx(ChatTicker, { events: autonomousEvents })] }));
+}

package/dist/components/StripeEmbeddedCheckout.d.ts

@@ -0,0 +1,24 @@
+interface StripeEmbeddedCheckoutProps {
+    publishableKey: string;
+    clientSecret: string;
+    className?: string;
+}
+interface StripeEmbeddedCheckoutInstance {
+    mount: (selectorOrElement: string | HTMLElement) => void;
+    unmount?: () => void;
+    destroy?: () => void;
+}
+interface StripeInstance {
+    initEmbeddedCheckout: (options: {
+        fetchClientSecret: () => Promise<string>;
+    }) => Promise<StripeEmbeddedCheckoutInstance>;
+}
+type StripeFactory = (publishableKey: string) => StripeInstance;
+declare global {
+    interface Window {
+        Stripe?: StripeFactory;
+    }
+}
+export declare function StripeEmbeddedCheckout({ publishableKey, clientSecret, className, }: StripeEmbeddedCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StripeEmbeddedCheckout.d.ts.map

package/dist/components/StripeEmbeddedCheckout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StripeEmbeddedCheckout.d.ts","sourceRoot":"","sources":["../../src/components/StripeEmbeddedCheckout.tsx"],"names":[],"mappings":"AAEA,UAAU,2BAA2B;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,8BAA8B;IACtC,KAAK,EAAE,CAAC,iBAAiB,EAAE,MAAM,GAAG,WAAW,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,cAAc;IACtB,oBAAoB,EAAE,CAAC,OAAO,EAAE;QAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;KAC1C,KAAK,OAAO,CAAC,8BAA8B,CAAC,CAAC;CAC/C;AAED,KAAK,aAAa,GAAG,CAAC,cAAc,EAAE,MAAM,KAAK,cAAc,CAAC;AAEhE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,CAAC,EAAE,aAAa,CAAC;KACxB;CACF;AAqDD,wBAAgB,sBAAsB,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,SAAc,GACf,EAAE,2BAA2B,2CAuE7B"}

package/dist/components/StripeEmbeddedCheckout.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+let stripeLoader = null;
+async function loadStripeFactory() {
+    if (typeof window === "undefined") {
+        throw new Error("Stripe embedded checkout requires a browser environment.");
+    }
+    if (typeof window.Stripe === "function") {
+        return window.Stripe;
+    }
+    if (stripeLoader) {
+        return stripeLoader;
+    }
+    stripeLoader = new Promise((resolve, reject) => {
+        const existing = document.querySelector('script[data-milady-stripe-loader="true"]');
+        if (existing) {
+            existing.addEventListener("load", () => {
+                if (typeof window.Stripe === "function") {
+                    resolve(window.Stripe);
+                }
+                else {
+                    reject(new Error("Stripe.js loaded without Stripe factory."));
+                }
+            });
+            existing.addEventListener("error", () => {
+                reject(new Error("Failed to load Stripe.js."));
+            });
+            return;
+        }
+        const script = document.createElement("script");
+        script.src = "https://js.stripe.com/v3/";
+        script.async = true;
+        script.dataset.miladyStripeLoader = "true";
+        script.onload = () => {
+            if (typeof window.Stripe === "function") {
+                resolve(window.Stripe);
+            }
+            else {
+                reject(new Error("Stripe.js loaded without Stripe factory."));
+            }
+        };
+        script.onerror = () => {
+            reject(new Error("Failed to load Stripe.js."));
+        };
+        document.head.appendChild(script);
+    });
+    return stripeLoader;
+}
+export function StripeEmbeddedCheckout({ publishableKey, clientSecret, className = "", }) {
+    const containerRef = useRef(null);
+    const checkoutRef = useRef(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        let cancelled = false;
+        const setup = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const stripeFactory = await loadStripeFactory();
+                if (cancelled)
+                    return;
+                const stripe = stripeFactory(publishableKey);
+                const checkout = await stripe.initEmbeddedCheckout({
+                    fetchClientSecret: async () => clientSecret,
+                });
+                if (cancelled) {
+                    checkout.destroy?.();
+                    return;
+                }
+                checkoutRef.current = checkout;
+                if (containerRef.current) {
+                    checkout.mount(containerRef.current);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error
+                        ? err.message
+                        : "Failed to load embedded checkout.");
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        };
+        void setup();
+        return () => {
+            cancelled = true;
+            checkoutRef.current?.unmount?.();
+            checkoutRef.current?.destroy?.();
+            checkoutRef.current = null;
+        };
+    }, [clientSecret, publishableKey]);
+    if (error) {
+        return (_jsx("div", { className: "rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error }));
+    }
+    return (_jsxs("div", { className: className, children: [loading ? (_jsx("div", { className: "rounded-2xl border border-border/50 bg-bg/40 px-4 py-6 text-sm text-muted", children: "Loading secure checkout\u2026" })) : null, _jsx("div", { ref: containerRef, className: loading ? "hidden" : "block" })] }));
+}

package/dist/components/SubscriptionStatus.d.ts

@@ -0,0 +1,22 @@
+/**
+ * SubscriptionStatus — Anthropic and OpenAI subscription connection panels.
+ *
+ * Extracted from SettingsView.tsx for decomposition (P2 §10).
+ */
+export interface SubscriptionStatusProps {
+    resolvedSelectedId: string | null;
+    subscriptionStatus: Array<{
+        provider: string;
+        configured: boolean;
+        valid: boolean;
+        expiresAt: number | null;
+    }>;
+    anthropicConnected: boolean;
+    setAnthropicConnected: (v: boolean) => void;
+    openaiConnected: boolean;
+    setOpenaiConnected: (v: boolean) => void;
+    handleSelectSubscription: (providerId: string) => Promise<void>;
+    loadSubscriptionStatus: () => Promise<void>;
+}
+export declare function SubscriptionStatus({ resolvedSelectedId, subscriptionStatus, anthropicConnected, setAnthropicConnected, openaiConnected, setOpenaiConnected, handleSelectSubscription, loadSubscriptionStatus, }: SubscriptionStatusProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubscriptionStatus.d.ts.map

package/dist/components/SubscriptionStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionStatus.d.ts","sourceRoot":"","sources":["../../src/components/SubscriptionStatus.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAwEH,MAAM,WAAW,uBAAuB;IACtC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,EAAE,KAAK,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,OAAO,CAAC;QACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC1B,CAAC,CAAC;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wBAAwB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,sBAAsB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,GACvB,EAAE,uBAAuB,2CAohBzB"}