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

package/components/stream/StreamTerminal.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { useCallback, useEffect, useRef, useState } from "react";
+export function StreamTerminal() {
+    const { t } = useApp();
+    const [lines, setLines] = useState([]);
+    const scrollRef = useRef(null);
+    const lineIdRef = useRef(0);
+    const addLine = useCallback((type, text) => {
+        const id = String(++lineIdRef.current);
+        setLines((prev) => {
+            const next = [...prev, { id, type, text, ts: Date.now() }];
+            return next.length > 300 ? next.slice(-300) : next;
+        });
+    }, []);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    });
+    useEffect(() => {
+        const unbind = client.onWsEvent("terminal-output", (data) => {
+            const event = data.event;
+            switch (event) {
+                case "start":
+                    addLine("command", `$ ${data.command}`);
+                    break;
+                case "stdout":
+                    addLine("stdout", data.data);
+                    break;
+                case "stderr":
+                    addLine("stderr", data.data);
+                    break;
+                case "exit":
+                    addLine("exit", `Process exited with code ${data.code}`);
+                    break;
+                case "error":
+                    addLine("error", `Error: ${data.data}`);
+                    break;
+            }
+        });
+        return unbind;
+    }, [addLine]);
+    return (_jsxs("div", { className: "h-full w-full bg-bg-muted flex flex-col", children: [_jsx("div", { className: "flex items-center px-3 py-1.5 border-b border-border bg-bg shrink-0", children: _jsx("span", { className: "text-[11px] font-mono text-muted tracking-wide", children: t("streamterminal.TERMINAL") }) }), _jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto overflow-x-hidden px-3 py-2 font-mono text-[12px] leading-[1.6] whitespace-pre-wrap break-all", children: lines.length === 0 ? (_jsx("span", { className: "text-muted italic text-[11px]", children: t("streamterminal.WaitingForTerminal") })) : (lines.map((line) => (_jsx("div", { className: line.type === "command"
+                        ? "text-txt font-bold"
+                        : line.type === "stderr" || line.type === "error"
+                            ? "text-destructive"
+                            : line.type === "exit"
+                                ? "text-muted"
+                                : "text-txt", children: line.text }, line.id)))) })] }));
+}

package/components/stream/StreamVoiceConfig.d.ts

@@ -0,0 +1,10 @@
+/**
+ * StreamVoiceConfig — compact voice config panel for StreamView.
+ *
+ * Shows a toggle to enable/disable TTS on the RTMP stream, detected
+ * provider + API key status, and a test button to speak sample text.
+ */
+export declare function StreamVoiceConfig({ streamLive }: {
+    streamLive: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=StreamVoiceConfig.d.ts.map

package/components/stream/StreamVoiceConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamVoiceConfig.d.ts","sourceRoot":"","sources":["../../../src/components/stream/StreamVoiceConfig.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAmBH,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,kDAuIxE"}

package/components/stream/StreamVoiceConfig.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StreamVoiceConfig — compact voice config panel for StreamView.
+ *
+ * Shows a toggle to enable/disable TTS on the RTMP stream, detected
+ * provider + API key status, and a test button to speak sample text.
+ */
+import { client } from "@elizaos/app-core/api";
+import { useTimeout } from "@elizaos/app-core/hooks";
+import { useApp } from "@elizaos/app-core/state";
+import { Button } from "@elizaos/ui";
+import { Volume2, VolumeX } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+export function StreamVoiceConfig({ streamLive }) {
+    const { setTimeout } = useTimeout();
+    const { t } = useApp();
+    const [status, setStatus] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [speaking, setSpeaking] = useState(false);
+    // Poll voice status
+    useEffect(() => {
+        let mounted = true;
+        const poll = async () => {
+            try {
+                const res = await client.getStreamVoice();
+                if (mounted && res.ok) {
+                    setStatus(res);
+                    setSpeaking(res.isSpeaking);
+                }
+            }
+            catch {
+                // API may not be available yet
+            }
+        };
+        poll();
+        const id = setInterval(poll, 5_000);
+        return () => {
+            mounted = false;
+            clearInterval(id);
+        };
+    }, []);
+    const toggleEnabled = useCallback(async () => {
+        if (!status || loading)
+            return;
+        setLoading(true);
+        try {
+            const next = !status.enabled;
+            const res = await client.saveStreamVoice({ enabled: next });
+            if (res.ok) {
+                setStatus((prev) => prev ? { ...prev, enabled: res.voice.enabled } : prev);
+            }
+        }
+        catch {
+            // Ignore
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [status, loading]);
+    const testSpeak = useCallback(async () => {
+        if (speaking)
+            return;
+        setSpeaking(true);
+        try {
+            await client.streamVoiceSpeak("Hello, I am now speaking on the stream.");
+        }
+        catch {
+            // Ignore
+        }
+        finally {
+            // Poll will update speaking state
+            setTimeout(() => setSpeaking(false), 3000);
+        }
+    }, [
+        speaking, // Poll will update speaking state
+        setTimeout,
+    ]);
+    if (!status)
+        return null;
+    const providerLabel = status.provider
+        ? status.provider.charAt(0).toUpperCase() + status.provider.slice(1)
+        : "None";
+    return (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: toggleEnabled, disabled: loading, className: `flex items-center gap-1.5 px-2 py-1 h-7 rounded text-xs font-medium transition-colors ${status.enabled
+                    ? "bg-accent/20 text-txt hover:bg-accent/30"
+                    : "bg-surface text-muted hover:bg-surface-hover"}`, title: status.enabled
+                    ? "Voice on stream: ON (click to disable)"
+                    : "Voice on stream: OFF (click to enable)", children: [status.enabled ? (_jsx(Volume2, { className: "w-3.5 h-3.5" })) : (_jsx(VolumeX, { className: "w-3.5 h-3.5" })), _jsx("span", { children: t("streamvoiceconfig.Voice") })] }), status.enabled && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-muted", children: [providerLabel, !status.hasApiKey && status.provider !== "edge" && (_jsx("span", { className: "text-warning ml-1", title: t("streamvoiceconfig.NoAPIKeyConfigure"), children: t("streamvoiceconfig.NoKey") }))] }), speaking && (_jsx("span", { className: "text-txt animate-pulse", children: t("streamvoiceconfig.Speaking") })), streamLive && status.isAttached && (_jsx(Button, { variant: "ghost", size: "sm", onClick: testSpeak, disabled: speaking, className: "px-1.5 py-0.5 h-6 rounded bg-surface text-muted hover:bg-surface-hover hover:text-txt text-[10px] transition-colors", title: t("streamvoiceconfig.TestTTSOnStream"), children: t("streamvoiceconfig.Test") }))] }))] }));
+}

package/components/stream/helpers.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Shared helpers, constants, and types for StreamView sub-components.
+ */
+import type { StreamEventEnvelope } from "@elizaos/app-core/api";
+export declare const CHAT_ACTIVE_WINDOW_MS = 30000;
+export declare const TERMINAL_ACTIVE_WINDOW_MS = 15000;
+/** PIP window dimensions (640x360 → captures at 1280x720 on Retina 2x displays). */
+export declare const PIP_SIZE: {
+    width: number;
+    height: number;
+};
+export declare const FULL_SIZE: {
+    width: number;
+    height: number;
+};
+export declare const CHANNEL_COLORS: Record<string, {
+    border: string;
+    bg: string;
+    text: string;
+}>;
+export declare function getEventFrom(event: StreamEventEnvelope): string | undefined;
+export declare function getEventText(event: StreamEventEnvelope): string;
+export declare function getEventSource(event: StreamEventEnvelope): string;
+export type AgentMode = "gaming" | "terminal" | "chatting" | "idle";
+export type StreamSourceType = "stream-tab" | "game" | "custom-url";
+export declare const STREAM_SOURCE_LABELS: Record<StreamSourceType, string>;
+export declare function isSupportedStreamUrl(value: string): boolean;
+/** Detect popout mode from URL. */
+export declare const IS_POPOUT: boolean;
+/** Toggle always-on-top for the current desktop window. */
+export declare function toggleAlwaysOnTop(pinned: boolean): Promise<boolean>;
+//# sourceMappingURL=helpers.d.ts.map

package/components/stream/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/stream/helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAOjE,eAAO,MAAM,qBAAqB,QAAS,CAAC;AAC5C,eAAO,MAAM,yBAAyB,QAAS,CAAC;AAEhD,oFAAoF;AACpF,eAAO,MAAM,QAAQ;;;CAA8B,CAAC;AACpD,eAAO,MAAM,SAAS;;;CAA+B,CAAC;AAEtD,eAAO,MAAM,cAAc,EAAE,MAAM,CACjC,MAAM,EACN;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAY7C,CAAC;AAMF,wBAAgB,YAAY,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,GAAG,SAAS,CAO3E;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAS/D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAKjE;AAMD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,MAAM,GAAG,YAAY,CAAC;AAEpE,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAIjE,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAU3D;AAMD,mCAAmC;AACnC,eAAO,MAAM,SAAS,SAMlB,CAAC;AAEL,2DAA2D;AAC3D,wBAAsB,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CA4BzE"}

package/components/stream/helpers.js

@@ -0,0 +1,110 @@
+/**
+ * Shared helpers, constants, and types for StreamView sub-components.
+ */
+import { invokeDesktopBridgeRequest } from "@elizaos/app-core/bridge";
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+export const CHAT_ACTIVE_WINDOW_MS = 30_000;
+export const TERMINAL_ACTIVE_WINDOW_MS = 15_000;
+/** PIP window dimensions (640x360 → captures at 1280x720 on Retina 2x displays). */
+export const PIP_SIZE = { width: 640, height: 360 };
+export const FULL_SIZE = { width: 1280, height: 720 };
+export const CHANNEL_COLORS = {
+    retake: {
+        border: "border-fuchsia-500/30",
+        bg: "bg-fuchsia-500/5",
+        text: "text-fuchsia-400",
+    },
+    discord: {
+        border: "border-indigo-500/30",
+        bg: "bg-indigo-500/5",
+        text: "text-indigo-400",
+    },
+};
+// ---------------------------------------------------------------------------
+// Event helpers
+// ---------------------------------------------------------------------------
+export function getEventFrom(event) {
+    const payload = event.payload;
+    if (typeof payload.displayName === "string" && payload.displayName.trim())
+        return payload.displayName.trim();
+    if (typeof payload.from === "string" && payload.from.trim())
+        return payload.from.trim();
+    return undefined;
+}
+export function getEventText(event) {
+    const payload = event.payload;
+    const text = payload.text;
+    if (typeof text === "string" && text.trim())
+        return text.trim();
+    const preview = payload.preview;
+    if (typeof preview === "string" && preview.trim())
+        return preview.trim();
+    const reason = payload.reason;
+    if (typeof reason === "string" && reason.trim())
+        return reason.trim();
+    return event.stream ? `${event.stream} event` : event.type;
+}
+export function getEventSource(event) {
+    const payload = event.payload;
+    if (typeof payload.source === "string")
+        return payload.source;
+    if (typeof payload.channel === "string")
+        return payload.channel;
+    return event.stream ?? "agent";
+}
+export const STREAM_SOURCE_LABELS = {
+    "stream-tab": "Stream Tab",
+    game: "Game",
+    "custom-url": "Custom URL",
+};
+export function isSupportedStreamUrl(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return false;
+    try {
+        const url = new URL(trimmed);
+        return url.protocol === "http:" || url.protocol === "https:";
+    }
+    catch {
+        return false;
+    }
+}
+// ---------------------------------------------------------------------------
+// Popout / Always-on-top
+// ---------------------------------------------------------------------------
+/** Detect popout mode from URL. */
+export const IS_POPOUT = (() => {
+    if (typeof window === "undefined")
+        return false;
+    const params = new URLSearchParams(window.location.search || window.location.hash.split("?")[1] || "");
+    return params.has("popout");
+})();
+/** Toggle always-on-top for the current desktop window. */
+export async function toggleAlwaysOnTop(pinned) {
+    try {
+        // Try Capacitor Desktop plugin
+        const cap = window.Capacitor;
+        if (cap?.Plugins) {
+            const plugins = cap.Plugins;
+            const desktop = plugins.Desktop;
+            if (desktop?.setAlwaysOnTop) {
+                await desktop.setAlwaysOnTop({ flag: pinned });
+                return pinned;
+            }
+        }
+        const result = await invokeDesktopBridgeRequest({
+            rpcMethod: "desktopSetAlwaysOnTop",
+            ipcChannel: "desktop:setAlwaysOnTop",
+            params: { flag: pinned },
+        });
+        if (result !== null) {
+            return pinned;
+        }
+    }
+    catch {
+        // Non-fatal — may not be running in the desktop shell
+    }
+    return false;
+}

package/components/stream/overlays/OverlayLayer.d.ts

@@ -0,0 +1,20 @@
+/**
+ * OverlayLayer — Renders all enabled widget instances as absolute-positioned
+ * DOM elements inside the StreamView content area.
+ *
+ * Z-index strategy:
+ *   Content 0 | Widgets 10-39 | Alerts 40-49 | GameViewOverlay 50+
+ */
+import type { StreamEventEnvelope } from "@elizaos/app-core/api";
+import type { AgentMode } from "../helpers";
+import type { OverlayLayout } from "./types";
+import "./built-in";
+interface OverlayLayerProps {
+    layout: OverlayLayout;
+    events: StreamEventEnvelope[];
+    agentMode: AgentMode;
+    agentName: string;
+}
+export declare function OverlayLayer({ layout, events, agentMode, agentName, }: OverlayLayerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=OverlayLayer.d.ts.map

package/components/stream/overlays/OverlayLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLayer.d.ts","sourceRoot":"","sources":["../../../../src/components/stream/overlays/OverlayLayer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,OAAO,YAAY,CAAC;AAEpB,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,iBAAiB,kDA6CnB"}

package/components/stream/overlays/OverlayLayer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getWidget } from "./registry";
+// Ensure all built-in widgets are registered
+import "./built-in";
+export function OverlayLayer({ layout, events, agentMode, agentName, }) {
+    const enabledWidgets = useMemo(() => layout.widgets.filter((w) => w.enabled), [layout.widgets]);
+    if (enabledWidgets.length === 0)
+        return null;
+    return (_jsx("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 10 }, children: enabledWidgets.map((instance) => {
+            const def = getWidget(instance.type);
+            if (!def)
+                return null;
+            const filtered = events.filter((e) => e.stream != null && def.subscribesTo.includes(e.stream));
+            const Widget = def.render;
+            return (_jsx("div", { className: "absolute pointer-events-auto", style: {
+                    left: `${instance.position.x}%`,
+                    top: `${instance.position.y}%`,
+                    width: `${instance.position.width}%`,
+                    height: `${instance.position.height}%`,
+                    zIndex: instance.zIndex,
+                }, children: _jsx(Widget, { instance: instance, events: filtered, agentMode: agentMode, agentName: agentName }) }, instance.id));
+        }) }));
+}

package/components/stream/overlays/built-in/ActionTickerWidget.d.ts

@@ -0,0 +1,8 @@
+/**
+ * ActionTicker — Horizontal scrolling strip of recent agent actions/tool calls.
+ * Follows the ChatTicker pattern.
+ */
+import type { WidgetDefinition } from "../types";
+declare const definition: WidgetDefinition;
+export default definition;
+//# sourceMappingURL=ActionTickerWidget.d.ts.map

package/components/stream/overlays/built-in/ActionTickerWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionTickerWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/stream/overlays/built-in/ActionTickerWidget.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AAiCpE,QAAA,MAAM,UAAU,EAAE,gBAkBjB,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/components/stream/overlays/built-in/ActionTickerWidget.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ActionTicker — Horizontal scrolling strip of recent agent actions/tool calls.
+ * Follows the ChatTicker pattern.
+ */
+import { useApp } from "@elizaos/app-core/state";
+import { useMemo } from "react";
+import { getEventText } from "../../helpers";
+import { registerWidget } from "../registry";
+function ActionTicker({ instance, events }) {
+    const { t } = useApp();
+    const maxItems = instance.config.maxItems ?? 8;
+    const items = useMemo(() => {
+        return events.slice(-maxItems).map((e) => ({
+            id: e.eventId,
+            stream: e.stream ?? "action",
+            text: getEventText(e),
+        }));
+    }, [events, maxItems]);
+    if (items.length === 0)
+        return null;
+    return (_jsx("div", { className: "h-full flex items-center px-3 bg-bg/70 border-b border-border/30 backdrop-blur-sm overflow-hidden", children: _jsxs("div", { className: "flex items-center gap-4 text-[11px] text-muted overflow-x-auto whitespace-nowrap scrollbar-hide", children: [_jsx("span", { className: "text-[9px] uppercase tracking-wider text-muted/60 shrink-0 font-medium", children: t("actiontickerwidget.actions") }), items.map((item) => (_jsxs("span", { className: "shrink-0", children: [_jsxs("span", { className: "text-txt/70", children: ["[", item.stream, "]"] }), " ", _jsx("span", { className: "text-txt/80", children: item.text.slice(0, 60) })] }, item.id)))] }) }));
+}
+const definition = {
+    type: "action-ticker",
+    name: "Action Ticker",
+    description: "Scrolling strip of recent agent actions and tool calls",
+    subscribesTo: ["action", "tool"],
+    defaultPosition: { x: 0, y: 0, width: 100, height: 4 },
+    defaultZIndex: 12,
+    configSchema: {
+        maxItems: {
+            type: "number",
+            label: "Max visible items",
+            default: 8,
+            min: 3,
+            max: 20,
+        },
+    },
+    defaultConfig: { maxItems: 8 },
+    render: ActionTicker,
+};
+registerWidget(definition);
+export default definition;

package/components/stream/overlays/built-in/AlertPopupWidget.d.ts

@@ -0,0 +1,7 @@
+/**
+ * AlertPopup — Animated fade-in/out card for new viewer joins and chat triggers.
+ */
+import type { WidgetDefinition } from "../types";
+declare const definition: WidgetDefinition;
+export default definition;
+//# sourceMappingURL=AlertPopupWidget.d.ts.map

package/components/stream/overlays/built-in/AlertPopupWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertPopupWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/stream/overlays/built-in/AlertPopupWidget.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AA0DpE,QAAA,MAAM,UAAU,EAAE,gBAkBjB,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/components/stream/overlays/built-in/AlertPopupWidget.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AlertPopup — Animated fade-in/out card for new viewer joins and chat triggers.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { getEventFrom, getEventText } from "../../helpers";
+import { registerWidget } from "../registry";
+function AlertPopup({ instance, events }) {
+    const displayMs = instance.config.displayDuration ?? 5000;
+    const latest = useMemo(() => {
+        if (events.length === 0)
+            return null;
+        const e = events[events.length - 1];
+        const from = getEventFrom(e);
+        const isViewer = e.stream === "new_viewer";
+        return {
+            id: e.eventId,
+            title: isViewer ? "New Viewer!" : (from ?? "Alert"),
+            body: isViewer
+                ? `${from ?? "Someone"} joined the stream`
+                : getEventText(e),
+        };
+    }, [events]);
+    const [shown, setShown] = useState(null);
+    const [fading, setFading] = useState(false);
+    useEffect(() => {
+        if (!latest)
+            return;
+        setShown(latest);
+        setFading(false);
+        const fadeTimer = setTimeout(() => setFading(true), displayMs - 500);
+        const hideTimer = setTimeout(() => setShown(null), displayMs);
+        return () => {
+            clearTimeout(fadeTimer);
+            clearTimeout(hideTimer);
+        };
+    }, [latest, displayMs]);
+    if (!shown)
+        return null;
+    return (_jsx("div", { className: "h-full flex items-start justify-end p-2", children: _jsxs("div", { className: `bg-bg/90 border border-accent/40 rounded-lg px-4 py-3 backdrop-blur-sm shadow-lg max-w-[280px] transition-opacity duration-500 ${fading ? "opacity-0" : "opacity-100"}`, children: [_jsx("p", { className: "text-xs font-medium text-txt", children: shown.title }), _jsx("p", { className: "text-[11px] text-txt/80 mt-0.5 leading-snug", children: shown.body })] }) }));
+}
+const definition = {
+    type: "alert-popup",
+    name: "Alert Popup",
+    description: "Animated alerts for new viewers and chat messages",
+    subscribesTo: ["new_viewer", "message"],
+    defaultPosition: { x: 65, y: 5, width: 33, height: 15 },
+    defaultZIndex: 40,
+    configSchema: {
+        displayDuration: {
+            type: "number",
+            label: "Display duration (ms)",
+            default: 5000,
+            min: 2000,
+            max: 15000,
+        },
+    },
+    defaultConfig: { displayDuration: 5000 },
+    render: AlertPopup,
+};
+registerWidget(definition);
+export default definition;

package/components/stream/overlays/built-in/BrandingWidget.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Branding — Static agent name / logo watermark in the corner.
+ */
+import type { WidgetDefinition } from "../types";
+declare const definition: WidgetDefinition;
+export default definition;
+//# sourceMappingURL=BrandingWidget.d.ts.map

package/components/stream/overlays/built-in/BrandingWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/stream/overlays/built-in/BrandingWidget.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AAmBpE,QAAA,MAAM,UAAU,EAAE,gBAuBjB,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/components/stream/overlays/built-in/BrandingWidget.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Branding — Static agent name / logo watermark in the corner.
+ */
+import { registerWidget } from "../registry";
+function Branding({ instance, agentName }) {
+    const opacity = instance.config.opacity ?? 0.6;
+    const showLabel = instance.config.showLabel ?? true;
+    return (_jsx("div", { className: "h-full flex items-end justify-end p-2", style: { opacity }, children: _jsx("div", { className: "bg-bg/60 border border-border/30 rounded-md px-3 py-1.5 backdrop-blur-sm", children: showLabel && (_jsx("p", { className: "text-[10px] uppercase tracking-widest text-muted/80 font-medium", children: agentName })) }) }));
+}
+const definition = {
+    type: "branding",
+    name: "Branding",
+    description: "Agent name/logo watermark",
+    subscribesTo: [],
+    defaultPosition: { x: 78, y: 90, width: 20, height: 8 },
+    defaultZIndex: 11,
+    configSchema: {
+        opacity: {
+            type: "number",
+            label: "Opacity",
+            default: 0.6,
+            min: 0.1,
+            max: 1,
+        },
+        showLabel: {
+            type: "boolean",
+            label: "Show agent name",
+            default: true,
+        },
+    },
+    defaultConfig: { opacity: 0.6, showLabel: true },
+    render: Branding,
+};
+registerWidget(definition);
+export default definition;

package/components/stream/overlays/built-in/CustomHtmlWidget.d.ts

@@ -0,0 +1,26 @@
+/**
+ * CustomHtml — User-provided HTML/CSS/JS or external URL rendered in a
+ * sandboxed iframe.
+ *
+ * ## Security model
+ *
+ * Both modes use `sandbox="allow-scripts"` WITHOUT `allow-same-origin`.
+ * This means the iframe:
+ *   - Can execute JavaScript but is treated as a unique opaque origin
+ *   - Cannot access the parent frame's DOM, cookies, or localStorage
+ *   - Cannot make same-origin requests to the host application
+ *   - Cannot navigate the parent frame
+ *
+ * Inline mode adds a strict CSP meta tag that blocks all network requests
+ * (no fetch, XHR, image loads, or script imports from external origins).
+ * This confines user-provided JS to pure computation and DOM manipulation.
+ *
+ * URL mode loads external content with `allow-scripts` only. The content
+ * can make network requests to its own origin but cannot interact with
+ * the host application. Only use trusted URLs — the iframe will execute
+ * whatever JavaScript the remote page serves.
+ */
+import type { WidgetDefinition } from "../types";
+declare const definition: WidgetDefinition;
+export default definition;
+//# sourceMappingURL=CustomHtmlWidget.d.ts.map

package/components/stream/overlays/built-in/CustomHtmlWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomHtmlWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/stream/overlays/built-in/CustomHtmlWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AAkDpE,QAAA,MAAM,UAAU,EAAE,gBAyBjB,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/components/stream/overlays/built-in/CustomHtmlWidget.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * CustomHtml — User-provided HTML/CSS/JS or external URL rendered in a
+ * sandboxed iframe.
+ *
+ * ## Security model
+ *
+ * Both modes use `sandbox="allow-scripts"` WITHOUT `allow-same-origin`.
+ * This means the iframe:
+ *   - Can execute JavaScript but is treated as a unique opaque origin
+ *   - Cannot access the parent frame's DOM, cookies, or localStorage
+ *   - Cannot make same-origin requests to the host application
+ *   - Cannot navigate the parent frame
+ *
+ * Inline mode adds a strict CSP meta tag that blocks all network requests
+ * (no fetch, XHR, image loads, or script imports from external origins).
+ * This confines user-provided JS to pure computation and DOM manipulation.
+ *
+ * URL mode loads external content with `allow-scripts` only. The content
+ * can make network requests to its own origin but cannot interact with
+ * the host application. Only use trusted URLs — the iframe will execute
+ * whatever JavaScript the remote page serves.
+ */
+import { useApp } from "@elizaos/app-core/state";
+import { useRef } from "react";
+import { registerWidget } from "../registry";
+/** CSP that blocks all network access — inline scripts/styles only. */
+const INLINE_CSP = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline';";
+function CustomHtml({ instance }) {
+    const { t } = useApp();
+    const mode = instance.config.mode ?? "inline";
+    const htmlContent = instance.config.html ?? "";
+    const cssContent = instance.config.css ?? "";
+    const jsContent = instance.config.js ?? "";
+    const url = instance.config.url ?? "";
+    const iframeRef = useRef(null);
+    if (mode === "url" && url) {
+        return (_jsx("iframe", { ref: iframeRef, src: url, sandbox: "allow-scripts", className: "w-full h-full border-0 rounded", title: t("customhtmlwidget.CustomWidgetExter") }));
+    }
+    // Inline mode: render HTML/CSS/JS via srcdoc with strict CSP
+    const srcdoc = `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="${INLINE_CSP}">
+<style>${cssContent}</style>
+</head>
+<body>${htmlContent}<script>${jsContent}</script></body>
+</html>`;
+    return (_jsx("iframe", { ref: iframeRef, srcDoc: srcdoc, sandbox: "allow-scripts", className: "w-full h-full border-0 rounded", title: t("customhtmlwidget.CustomWidgetInlin") }));
+}
+const definition = {
+    type: "custom-html",
+    name: "Custom HTML",
+    description: "User-provided HTML/CSS/JS or external URL in a sandboxed iframe",
+    subscribesTo: [],
+    defaultPosition: { x: 10, y: 10, width: 30, height: 30 },
+    defaultZIndex: 20,
+    configSchema: {
+        mode: {
+            type: "select",
+            label: "Mode",
+            default: "inline",
+            options: [
+                { label: "Inline HTML", value: "inline" },
+                { label: "External URL", value: "url" },
+            ],
+        },
+        html: { type: "string", label: "HTML", default: "" },
+        css: { type: "string", label: "CSS", default: "" },
+        js: { type: "string", label: "JavaScript", default: "" },
+        url: { type: "string", label: "URL", default: "" },
+    },
+    defaultConfig: { mode: "inline", html: "", css: "", js: "", url: "" },
+    render: CustomHtml,
+};
+registerWidget(definition);
+export default definition;