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

package/components/stream/ActivityFeed.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatTime } from "@elizaos/app-core/components";
+import { useApp } from "@elizaos/app-core/state";
+import { useEffect, useRef } from "react";
+import { CHANNEL_COLORS, getEventFrom, getEventSource, getEventText, } from "./helpers";
+export function ActivityFeed({ events }) {
+    const { t } = useApp();
+    const feedRef = useRef(null);
+    const prevLenRef = useRef(0);
+    useEffect(() => {
+        if (events.length > prevLenRef.current && feedRef.current) {
+            feedRef.current.scrollTop = 0;
+        }
+        prevLenRef.current = events.length;
+    }, [events.length]);
+    return (_jsxs("div", { className: "flex flex-col h-full border-l border-border bg-bg", children: [_jsx("div", { className: "px-3 py-2 border-b border-border shrink-0", children: _jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-muted", children: t("activityfeed.Activity") }) }), _jsx("div", { ref: feedRef, className: "flex-1 min-h-0 overflow-y-auto px-3 py-2 space-y-2", children: events.length === 0 ? (_jsx("div", { className: "text-muted text-xs py-4 text-center", children: t("activityfeed.NoEventsYet") })) : (events.map((event) => {
+                    const isThought = event.stream === "thought";
+                    const isAction = event.stream === "action";
+                    const isAssistant = event.stream === "assistant";
+                    const isMessage = event.stream === "message";
+                    const isNewViewer = event.stream === "new_viewer";
+                    const source = getEventSource(event);
+                    const from = getEventFrom(event);
+                    const channelStyle = isMessage || isNewViewer
+                        ? (CHANNEL_COLORS[source] ?? null)
+                        : null;
+                    return (_jsxs("div", { className: `rounded border px-2 py-1.5 ${isNewViewer
+                            ? "border-emerald-500/30 bg-emerald-500/5"
+                            : isThought
+                                ? "border-yellow-500/30 bg-yellow-500/5"
+                                : isAction
+                                    ? "border-blue-500/30 bg-blue-500/5"
+                                    : isAssistant
+                                        ? "border-green-500/30 bg-green-500/5"
+                                        : channelStyle
+                                            ? `${channelStyle.border} ${channelStyle.bg}`
+                                            : "border-border"}`, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: `text-[11px] font-semibold uppercase ${isNewViewer
+                                            ? "text-emerald-400"
+                                            : isThought
+                                                ? "text-yellow-400"
+                                                : isAction
+                                                    ? "text-blue-400"
+                                                    : isAssistant
+                                                        ? "text-green-400"
+                                                        : channelStyle
+                                                            ? channelStyle.text
+                                                            : "text-txt"}`, children: isNewViewer
+                                            ? "new viewer"
+                                            : isThought
+                                                ? "thought"
+                                                : isAction
+                                                    ? "action"
+                                                    : from
+                                                        ? `@${from}`
+                                                        : `[${source}]` }), _jsx("span", { className: "text-[10px] text-muted", children: formatTime(event.ts, { fallback: "" }) })] }), _jsx("div", { className: `text-[12px] mt-0.5 break-words line-clamp-3 ${isThought ? "text-yellow-200/70 italic" : "text-txt"}`, children: getEventText(event) })] }, event.eventId));
+                })) })] }));
+}

package/components/stream/AvatarPip.d.ts

@@ -0,0 +1,5 @@
+/** PIP avatar overlay — small VRM in bottom-left corner of the main area. */
+export declare function AvatarPip({ isSpeaking }: {
+    isSpeaking: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvatarPip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarPip.d.ts","sourceRoot":"","sources":["../../../src/components/stream/AvatarPip.tsx"],"names":[],"mappings":"AAEA,6EAA6E;AAC7E,wBAAgB,SAAS,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,2CAMhE"}

package/components/stream/AvatarPip.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatAvatar } from "../ChatAvatar";
+/** PIP avatar overlay — small VRM in bottom-left corner of the main area. */
+export function AvatarPip({ isSpeaking }) {
+    return (_jsx("div", { className: "absolute bottom-3 left-3 z-10 w-[140px] h-[180px] xl:w-[180px] xl:h-[220px] rounded-lg overflow-hidden border border-border/50 bg-bg/60 backdrop-blur-sm shadow-lg pointer-events-none", children: _jsx(ChatAvatar, { isSpeaking: isSpeaking }) }));
+}

package/components/stream/ChatContent.d.ts

@@ -0,0 +1,6 @@
+import type { ConversationMessage, StreamEventEnvelope } from "@elizaos/app-core/api";
+export declare function ChatContent({ events, messages, }: {
+    events: StreamEventEnvelope[];
+    messages: ConversationMessage[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContent.d.ts","sourceRoot":"","sources":["../../../src/components/stream/ChatContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,uBAAuB,CAAC;AAK/B,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,QAAQ,EAAE,mBAAmB,EAAE,CAAC;CACjC,2CA+GA"}

package/components/stream/ChatContent.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApp } from "@elizaos/app-core/state";
+import { useEffect, useMemo, useRef } from "react";
+import { CHANNEL_COLORS, getEventSource, getEventText } from "./helpers";
+export function ChatContent({ events, messages, }) {
+    const { t } = useApp();
+    const scrollRef = useRef(null);
+    const recentExchanges = useMemo(() => {
+        const exchanges = [];
+        // Build lookup from events for username resolution
+        const eventFromLookup = new Map();
+        for (const evt of events) {
+            if (evt.stream !== "message")
+                continue;
+            const p = evt.payload;
+            const text = typeof p.text === "string" ? p.text.trim() : "";
+            const from = typeof p.from === "string" ? p.from : "";
+            if (text && from)
+                eventFromLookup.set(text, from);
+        }
+        for (const msg of messages.slice(-8)) {
+            exchanges.push({
+                id: msg.id,
+                role: msg.role,
+                text: msg.text,
+                source: msg.source,
+                from: msg.from ?? eventFromLookup.get(msg.text.trim()),
+                ts: msg.timestamp,
+            });
+        }
+        const assistantEvents = events
+            .filter((e) => e.stream === "assistant")
+            .slice(-4);
+        for (const evt of assistantEvents) {
+            const text = getEventText(evt);
+            if (!exchanges.some((e) => e.text === text)) {
+                exchanges.push({
+                    id: evt.eventId,
+                    role: "event",
+                    text,
+                    source: getEventSource(evt),
+                    ts: evt.ts,
+                });
+            }
+        }
+        return exchanges.sort((a, b) => a.ts - b.ts).slice(-10);
+    }, [events, messages]);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    });
+    return (_jsx("div", { ref: scrollRef, className: "h-full w-full overflow-y-auto px-5 py-4 space-y-3", children: recentExchanges.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full text-muted text-sm", children: t("chatcontent.WaitingForMessages") })) : (recentExchanges.map((exchange) => {
+            const channelStyle = exchange.role === "user" && exchange.source
+                ? CHANNEL_COLORS[exchange.source]
+                : undefined;
+            return (_jsx("div", { className: `flex ${exchange.role === "assistant" || exchange.role === "event"
+                    ? "justify-end"
+                    : "justify-start"}`, children: _jsxs("div", { className: `max-w-[75%] rounded-lg px-4 py-2.5 ${exchange.role === "assistant" || exchange.role === "event"
+                        ? "bg-accent/20 text-txt-strong"
+                        : channelStyle
+                            ? `${channelStyle.bg} text-txt border ${channelStyle.border}`
+                            : "bg-bg-muted text-txt"}`, children: [_jsx("div", { className: `text-[10px] uppercase mb-1 ${channelStyle?.text ?? "text-muted"}`, children: exchange.role === "user"
+                                ? exchange.from
+                                    ? `@${exchange.from}`
+                                    : (exchange.source ?? "viewer")
+                                : "agent" }), _jsx("div", { className: "text-sm leading-relaxed break-words", children: exchange.text })] }) }, exchange.id));
+        })) }));
+}

package/components/stream/ChatTicker.d.ts

@@ -0,0 +1,5 @@
+import type { StreamEventEnvelope } from "@elizaos/app-core/api";
+export declare function ChatTicker({ events }: {
+    events: StreamEventEnvelope[];
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ChatTicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTicker.d.ts","sourceRoot":"","sources":["../../../src/components/stream/ChatTicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAKjE,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,EAAE,CAAA;CAAE,kDAiDvE"}

package/components/stream/ChatTicker.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApp } from "@elizaos/app-core/state";
+import { useMemo } from "react";
+import { CHANNEL_COLORS } from "./helpers";
+export function ChatTicker({ events }) {
+    const { t } = useApp();
+    // Build ticker entries directly from inbound message events (retake, discord, etc.)
+    const recent = useMemo(() => {
+        const entries = [];
+        for (const evt of events) {
+            if (evt.stream !== "message")
+                continue;
+            const payload = evt.payload;
+            if (payload.direction !== "inbound")
+                continue;
+            const text = typeof payload.text === "string" ? payload.text.trim() : "";
+            const from = (typeof payload.displayName === "string" &&
+                payload.displayName.trim()) ||
+                (typeof payload.from === "string" && payload.from.trim()) ||
+                "";
+            const source = typeof payload.source === "string" ? payload.source : "retake";
+            if (text) {
+                entries.push({ id: evt.eventId, from: from || "viewer", text, source });
+            }
+        }
+        return entries.slice(-10);
+    }, [events]);
+    if (recent.length === 0)
+        return null;
+    return (_jsx("div", { className: "px-4 py-1.5 bg-bg border-t border-border overflow-hidden shrink-0", children: _jsxs("div", { className: "flex items-center gap-4 text-xs text-muted overflow-x-auto whitespace-nowrap scrollbar-hide", children: [_jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted shrink-0", children: t("chatticker.chat") }), recent.map((entry) => {
+                    const color = CHANNEL_COLORS[entry.source]?.text;
+                    return (_jsxs("span", { className: "shrink-0", children: [_jsxs("span", { className: color ?? "text-txt", children: ["@", entry.from] }), _jsxs("span", { className: "text-txt", children: [": ", entry.text.slice(0, 80)] })] }, entry.id));
+                })] }) }));
+}

package/components/stream/IdleContent.d.ts

@@ -0,0 +1,5 @@
+import type { StreamEventEnvelope } from "@elizaos/app-core/api";
+export declare function IdleContent({ events }: {
+    events: StreamEventEnvelope[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IdleContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IdleContent.d.ts","sourceRoot":"","sources":["../../../src/components/stream/IdleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAMjE,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,EAAE,CAAA;CAAE,2CAkExE"}

package/components/stream/IdleContent.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatTime } from "@elizaos/app-core/components";
+import { useApp } from "@elizaos/app-core/state";
+import { useMemo } from "react";
+import { getEventText } from "./helpers";
+export function IdleContent({ events }) {
+    const { t } = useApp();
+    const latestThought = useMemo(() => [...events]
+        .reverse()
+        .find((e) => e.stream === "assistant" || e.stream === "evaluator"), [events]);
+    const recentActions = useMemo(() => events
+        .filter((e) => e.stream === "action" ||
+        e.stream === "tool" ||
+        e.stream === "provider")
+        .slice(-6), [events]);
+    return (_jsxs("div", { className: "h-full w-full flex flex-col justify-center px-8 py-6", children: [latestThought ? (_jsxs("div", { className: "mb-5", children: [_jsx("div", { className: "text-[10px] uppercase text-muted mb-1", children: t("idlecontent.Thought") }), _jsxs("div", { className: "text-base text-txt italic leading-relaxed", children: ["\"", getEventText(latestThought).slice(0, 250), "\""] })] })) : (_jsx("div", { className: "text-muted text-base mb-5", children: t("idlecontent.AgentIsIdleAwai") })), recentActions.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] uppercase text-muted mb-2", children: t("idlecontent.RecentActions") }), _jsx("div", { className: "space-y-1.5", children: recentActions.map((a) => (_jsxs("div", { className: "flex items-center gap-2 text-[12px]", children: [_jsx("span", { className: "text-ok font-mono", children: a.stream ?? "action" }), _jsx("span", { className: "text-txt truncate", children: getEventText(a).slice(0, 80) }), _jsx("span", { className: "text-[10px] text-muted ml-auto shrink-0", children: formatTime(a.ts, { fallback: "" }) })] }, a.eventId))) })] }))] }));
+}

package/components/stream/StatusBar.d.ts

@@ -0,0 +1,36 @@
+import { type AgentMode, type StreamSourceType } from "./helpers";
+export declare function StatusBar({ agentName, mode, viewerCount, isPip, onTogglePip, streamAvailable, streamLive, streamLoading, onToggleStream, volume, muted, onVolumeChange, onToggleMute, destinations, activeDestination, onDestinationChange, uptime, frameCount, audioSource, streamSource, activeGameViewerUrl, onSourceChange, onOpenSettings, }: {
+    agentName: string;
+    mode: AgentMode;
+    viewerCount: number | null;
+    isPip: boolean;
+    onTogglePip: () => void;
+    streamAvailable: boolean;
+    streamLive: boolean;
+    streamLoading: boolean;
+    onToggleStream: () => void;
+    volume: number;
+    muted: boolean;
+    onVolumeChange: (vol: number) => void;
+    onToggleMute: () => void;
+    destinations: Array<{
+        id: string;
+        name: string;
+    }>;
+    activeDestination: {
+        id: string;
+        name: string;
+    } | null;
+    onDestinationChange: (id: string) => void;
+    uptime: number;
+    frameCount: number;
+    audioSource: string;
+    streamSource: {
+        type: StreamSourceType;
+        url?: string;
+    };
+    activeGameViewerUrl: string;
+    onSourceChange: (sourceType: StreamSourceType, customUrl?: string) => void;
+    onOpenSettings?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../src/components/stream/StatusBar.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,KAAK,SAAS,EAId,KAAK,gBAAgB,EAEtB,MAAM,WAAW,CAAC;AASnB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,IAAI,EACJ,WAAW,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,UAAU,EACV,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,MAAM,EACN,UAAU,EACV,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,cAAc,GACf,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,iBAAiB,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE;QAAE,IAAI,EAAE,gBAAgB,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,2CAiYA"}

package/components/stream/StatusBar.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isElectrobunRuntime } from "@elizaos/app-core/bridge";
+import { useApp } from "@elizaos/app-core/state";
+import { Button, Input, Slider } from "@elizaos/ui";
+import { ChevronDown, ExternalLink, PictureInPicture, Pin, Settings, Volume2, VolumeX, } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { IS_POPOUT, isSupportedStreamUrl, STREAM_SOURCE_LABELS, toggleAlwaysOnTop, } from "./helpers";
+function formatUptime(seconds) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+export function StatusBar({ agentName, mode, viewerCount, isPip, onTogglePip, streamAvailable, streamLive, streamLoading, onToggleStream, volume, muted, onVolumeChange, onToggleMute, destinations, activeDestination, onDestinationChange, uptime, frameCount, audioSource, streamSource, activeGameViewerUrl, onSourceChange, onOpenSettings, }) {
+    const { t } = useApp();
+    const isElectrobun = isElectrobunRuntime();
+    const isLive = streamLive;
+    const [pinned, setPinned] = useState(IS_POPOUT); // popout starts pinned
+    const [sourceOpen, setSourceOpen] = useState(false);
+    const sourceDropdownRef = useRef(null);
+    const [customUrlInput, setCustomUrlInput] = useState("");
+    const trimmedCustomUrl = customUrlInput.trim();
+    const customUrlValid = isSupportedStreamUrl(trimmedCustomUrl);
+    // Close source picker on click outside
+    useEffect(() => {
+        if (!sourceOpen)
+            return;
+        const handler = (e) => {
+            if (sourceDropdownRef.current &&
+                !sourceDropdownRef.current.contains(e.target)) {
+                setSourceOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [sourceOpen]);
+    const popoutPollRef = useRef(null);
+    // Cleanup popout polling interval on unmount to prevent memory leaks
+    useEffect(() => {
+        return () => {
+            if (popoutPollRef.current) {
+                clearInterval(popoutPollRef.current);
+                popoutPollRef.current = null;
+            }
+        };
+    }, []);
+    const modeLabel = mode === "gaming"
+        ? "gaming"
+        : mode === "terminal"
+            ? "terminal"
+            : mode === "chatting"
+                ? "chatting"
+                : "idle";
+    return (_jsxs("div", { className: `flex items-center justify-between bg-bg border-b border-border shrink-0 ${isPip ? "px-2 py-1" : "px-4 py-2"}`, style: IS_POPOUT ? { WebkitAppRegion: "drag" } : undefined, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `${isPip ? "w-2 h-2" : "w-2.5 h-2.5"} rounded-full ${isLive
+                            ? "bg-danger shadow-[0_0_8px_rgba(239,68,68,0.6)] animate-pulse"
+                            : "bg-muted"}` }), !isPip && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-txt", children: isLive ? "LIVE" : "OFFLINE" }), _jsx("span", { className: "text-sm font-semibold text-txt-strong", children: agentName })] }))] }), _jsxs("div", { className: `flex items-center ${isPip ? "gap-1" : "gap-3"} text-xs text-muted`, style: IS_POPOUT
+                    ? { WebkitAppRegion: "no-drag" }
+                    : undefined, children: [!isPip && viewerCount !== null && viewerCount > 0 && (_jsxs("span", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded bg-bg-muted", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-400 shadow-[0_0_4px_rgba(52,211,153,0.5)]" }), _jsx("span", { className: "text-txt", children: viewerCount })] })), !isPip && (_jsx("span", { className: "px-2 py-0.5 rounded bg-bg-muted", children: modeLabel })), !isPip && (_jsxs("span", { ref: sourceDropdownRef, className: "relative flex items-center", children: [_jsxs(Button, { variant: "ghost", size: "sm", disabled: !streamAvailable, className: "flex items-center gap-1 px-2 py-0.5 h-6 rounded bg-bg-muted hover:bg-accent/20 transition-colors text-[11px] font-normal", onClick: () => setSourceOpen((o) => !o), title: streamAvailable
+                                    ? "Select a stream source"
+                                    : "Install and enable the streaming plugin to change sources", children: [_jsx("span", { className: "text-muted", children: t("statusbar.Src") }), _jsx("span", { className: "text-txt font-medium", children: STREAM_SOURCE_LABELS[streamSource.type] }), _jsx(ChevronDown, { className: "w-2.5 h-2.5" })] }), sourceOpen && (_jsxs("div", { className: "absolute top-full left-0 mt-1 z-50 bg-bg border border-border rounded shadow-lg min-w-[180px]", children: [["stream-tab", "game", "custom-url"].map((st) => {
+                                        const isGame = st === "game";
+                                        const disabled = !streamAvailable || (isGame && !activeGameViewerUrl.trim());
+                                        return (_jsxs(Button, { variant: "ghost", size: "sm", disabled: disabled, className: `h-auto w-full justify-start rounded-lg px-3 py-1.5 text-xs transition-colors ${streamSource.type === st
+                                                ? "bg-accent/20 text-txt hover:bg-accent/30"
+                                                : disabled
+                                                    ? "text-muted/40 opacity-50"
+                                                    : "text-txt hover:bg-bg-muted"}`, onClick: () => {
+                                                if (st === "custom-url")
+                                                    return; // handled by input below
+                                                onSourceChange(st, isGame ? activeGameViewerUrl : undefined);
+                                                setSourceOpen(false);
+                                            }, children: [STREAM_SOURCE_LABELS[st], isGame && activeGameViewerUrl.trim() && (_jsx("span", { className: "ml-1 text-muted text-[10px]", children: t("statusbar.Active") }))] }, st));
+                                    }), _jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5 border-t border-border bg-bg", children: [_jsx(Input, { placeholder: t("statusbar.https"), value: customUrlInput, onChange: (e) => setCustomUrlInput(e.target.value), disabled: !streamAvailable, className: `flex-1 h-7 bg-bg-muted text-txt text-[11px] rounded px-2 border outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 ${trimmedCustomUrl && !customUrlValid
+                                                    ? "border-danger"
+                                                    : "border-border"}`, onKeyDown: (e) => {
+                                                    if (e.key === "Enter" && customUrlValid) {
+                                                        onSourceChange("custom-url", trimmedCustomUrl);
+                                                        setSourceOpen(false);
+                                                    }
+                                                } }), _jsx(Button, { variant: "ghost", size: "sm", disabled: !streamAvailable || !customUrlValid, className: "px-2 py-1 h-7 rounded bg-accent/20 text-txt text-[10px] font-semibold hover:bg-accent/30 transition-colors disabled:opacity-40", onClick: () => {
+                                                    if (customUrlValid) {
+                                                        onSourceChange("custom-url", trimmedCustomUrl);
+                                                        setSourceOpen(false);
+                                                    }
+                                                }, title: streamAvailable
+                                                    ? "Custom URLs must start with http:// or https://"
+                                                    : "Install and enable the streaming plugin to use custom URLs", children: "Go" })] })] }))] })), !isPip && isLive && (_jsxs("span", { className: "flex items-center gap-1 px-2 py-0.5 rounded bg-bg-muted text-[10px] font-mono", children: [_jsx("span", { className: "text-txt", children: formatUptime(uptime) }), _jsx("span", { className: "text-border", children: "|" }), _jsxs("span", { className: "text-txt", children: [frameCount.toLocaleString(), "f"] }), audioSource && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-border", children: "|" }), _jsx("span", { className: "text-txt", children: audioSource })] }))] })), !isPip && (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: !streamAvailable, className: "p-1 h-6 w-6 rounded bg-bg-muted hover:bg-accent/20 transition-colors disabled:opacity-50", title: muted ? "Unmute" : "Mute", onClick: onToggleMute, children: muted ? (_jsx(VolumeX, { className: "w-3.5 h-3.5" })) : (_jsx(Volume2, { className: "w-3.5 h-3.5" })) }), _jsx("div", { className: "w-16", children: _jsx(Slider, { min: 0, max: 100, step: 1, value: [muted ? 0 : volume], disabled: !streamAvailable, onValueChange: ([vol]) => onVolumeChange(vol), title: `Volume: ${muted ? 0 : volume}%`, className: "cursor-pointer" }) })] })), !isPip && destinations.length > 0 && (_jsx("select", { className: "bg-bg-muted text-txt border border-border text-[11px] rounded px-1.5 py-0.5 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed", value: activeDestination?.id ?? "", disabled: isLive || !streamAvailable, title: !streamAvailable
+                            ? "Install and enable the streaming plugin to change destinations"
+                            : isLive
+                                ? "Stop stream to change destination"
+                                : "Select destination", onChange: (e) => onDestinationChange(e.target.value), children: destinations.map((d) => (_jsx("option", { value: d.id, children: d.name }, d.id))) })), !isPip && onOpenSettings && (_jsx(Button, { variant: "ghost", size: "sm", disabled: !streamAvailable, className: "px-2 py-0.5 h-6 rounded bg-bg-muted hover:bg-accent/20 hover:text-txt transition-colors disabled:opacity-50", title: streamAvailable
+                            ? "Stream settings"
+                            : "Install and enable the streaming plugin to configure streaming", onClick: onOpenSettings, children: _jsx(Settings, { className: "w-3.5 h-3.5" }) })), !isPip && (_jsx(Button, { size: "sm", disabled: !streamAvailable || streamLoading, className: `px-3 py-0.5 h-6 rounded font-semibold text-[11px] uppercase tracking-wider transition-colors disabled:opacity-50 disabled:cursor-wait ${isLive
+                            ? "bg-danger/20 text-danger hover:bg-danger/30"
+                            : "bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30"}`, onClick: onToggleStream, title: streamAvailable
+                            ? undefined
+                            : "Install and enable the streaming plugin to go live", children: streamLoading ? "..." : isLive ? "Stop Stream" : "Go Live" })), IS_POPOUT ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: `px-2 py-0.5 h-6 rounded transition-colors ${isPip
+                                    ? "bg-purple-500/20 text-purple-400"
+                                    : "bg-bg-muted hover:bg-purple-500/20 hover:text-purple-400"}`, title: isPip
+                                    ? "Exit picture-in-picture"
+                                    : "Picture-in-picture (small overlay)", onClick: onTogglePip, children: _jsx(PictureInPicture, { className: "w-3.5 h-3.5" }) }), _jsx(Button, { variant: "ghost", size: "sm", className: `px-2 py-0.5 h-6 rounded transition-colors ${pinned
+                                    ? "bg-accent/20 text-txt"
+                                    : "bg-bg-muted hover:bg-accent/20 hover:text-txt"}`, title: pinned ? "Unpin from top" : "Pin to top (always on top)", onClick: () => {
+                                    const next = !pinned;
+                                    toggleAlwaysOnTop(next).then((result) => {
+                                        if (result !== undefined)
+                                            setPinned(next);
+                                    });
+                                }, children: _jsx(Pin, { className: "w-3.5 h-3.5" }) })] })) : !isElectrobun ? (_jsx(Button, { variant: "ghost", size: "sm", className: "px-2 py-0.5 h-6 rounded bg-bg-muted hover:bg-accent/20 hover:text-txt transition-colors", title: t("statusbar.PopOutStreamView"), onClick: () => {
+                            const apiBase = window
+                                .__MILADY_API_BASE__;
+                            const base = window.location.origin || "";
+                            const sep = window.location.protocol === "file:" ||
+                                window.location.protocol === "electrobun:"
+                                ? "#"
+                                : "";
+                            const qs = apiBase
+                                ? `popout&apiBase=${encodeURIComponent(apiBase)}`
+                                : "popout";
+                            const popoutWin = window.open(`${base}${sep}/?${qs}`, "milady-stream", "width=1280,height=720,menubar=no,toolbar=no,location=no,status=no");
+                            // Notify the main window to navigate away from stream tab
+                            if (popoutWin) {
+                                window.dispatchEvent(new CustomEvent("stream-popout", { detail: "opened" }));
+                                // Clear any existing poll before creating a new one
+                                if (popoutPollRef.current) {
+                                    clearInterval(popoutPollRef.current);
+                                }
+                                // Poll for popout close and notify to switch back
+                                popoutPollRef.current = setInterval(() => {
+                                    if (popoutWin.closed) {
+                                        if (popoutPollRef.current) {
+                                            clearInterval(popoutPollRef.current);
+                                            popoutPollRef.current = null;
+                                        }
+                                        window.dispatchEvent(new CustomEvent("stream-popout", { detail: "closed" }));
+                                    }
+                                }, 500);
+                            }
+                        }, children: _jsx(ExternalLink, { className: "w-3.5 h-3.5" }) })) : null] })] }));
+}

package/components/stream/StreamSettings.d.ts

@@ -0,0 +1,33 @@
+/**
+ * StreamSettings — in-stream settings panel.
+ *
+ * Panels:
+ *   1. Channel / destination picker
+ *   2. Overlay widget manager (enable/disable + per-widget config)
+ *   3. Stream source selector (stream-tab, game, custom-url)
+ */
+import type { StreamSourceType } from "./helpers";
+import type { UseOverlayLayout } from "./overlays/useOverlayLayout";
+interface StreamSettingsProps {
+    destinations: Array<{
+        id: string;
+        name: string;
+    }>;
+    activeDestination: {
+        id: string;
+        name: string;
+    } | null;
+    onDestinationChange: (id: string) => void;
+    streamLive: boolean;
+    streamSource: {
+        type: StreamSourceType;
+        url?: string;
+    };
+    activeGameViewerUrl: string;
+    onSourceChange: (sourceType: StreamSourceType, customUrl?: string) => void;
+    overlayLayout: UseOverlayLayout;
+    onClose: () => void;
+}
+export declare function StreamSettings({ destinations, activeDestination, onDestinationChange, streamLive, streamSource, activeGameViewerUrl, onSourceChange, overlayLayout, onClose, }: StreamSettingsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StreamSettings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamSettings.d.ts","sourceRoot":"","sources":["../../../src/components/stream/StreamSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAIlD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAIpE,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,iBAAiB,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE;QAAE,IAAI,EAAE,gBAAgB,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,aAAa,EAAE,gBAAgB,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAmMD,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,OAAO,GACR,EAAE,mBAAmB,2CA8QrB"}

package/components/stream/StreamSettings.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StreamSettings — in-stream settings panel.
+ *
+ * Panels:
+ *   1. Channel / destination picker
+ *   2. Overlay widget manager (enable/disable + per-widget config)
+ *   3. Stream source selector (stream-tab, game, custom-url)
+ */
+import { useApp } from "@elizaos/app-core/state";
+import { Button, Checkbox, Input, Switch } from "@elizaos/ui";
+import { useState } from "react";
+import { isSupportedStreamUrl, STREAM_SOURCE_LABELS } from "./helpers";
+import { getAllWidgets } from "./overlays/registry";
+// ---------------------------------------------------------------------------
+// Config field renderer
+// ---------------------------------------------------------------------------
+function ConfigField({ fieldKey, field, value, onChange, }) {
+    switch (field.type) {
+        case "boolean":
+            return (_jsxs("label", { htmlFor: `config-${fieldKey}`, className: "flex items-center gap-2 text-[12px] text-txt cursor-pointer", children: [_jsx(Checkbox, { id: `config-${fieldKey}`, checked: Boolean(value), onCheckedChange: (checked) => onChange(fieldKey, !!checked) }), field.label] }, fieldKey));
+        case "number":
+            return (_jsxs("label", { htmlFor: `config-${fieldKey}`, className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-[11px] text-muted", children: field.label }), _jsx(Input, { id: `config-${fieldKey}`, type: "number", min: field.min, max: field.max, value: typeof value === "number" ? value : field.default, onChange: (e) => onChange(fieldKey, Number(e.target.value)), className: "h-8 bg-bg-muted border-border text-xs rounded px-2" })] }, fieldKey));
+        case "select":
+            return (_jsxs("label", { htmlFor: `config-${fieldKey}`, className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-[11px] text-muted", children: field.label }), _jsx("select", { id: `config-${fieldKey}`, value: typeof value === "string" ? value : String(field.default), onChange: (e) => onChange(fieldKey, e.target.value), className: "bg-bg-muted border border-border text-txt text-[12px] rounded px-2 py-1 cursor-pointer", children: field.options?.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })] }, fieldKey));
+        case "color":
+            return (_jsxs("label", { htmlFor: `config-${fieldKey}`, className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[11px] text-muted", children: field.label }), _jsx("input", { id: `config-${fieldKey}`, type: "color", value: typeof value === "string" ? value : String(field.default), onChange: (e) => onChange(fieldKey, e.target.value), className: "w-8 h-6 rounded border border-border cursor-pointer bg-transparent" })] }, fieldKey));
+        default:
+            return (_jsxs("label", { htmlFor: `config-${fieldKey}`, className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-[11px] text-muted", children: field.label }), _jsx(Input, { id: `config-${fieldKey}`, type: "text", value: typeof value === "string" ? value : String(field.default ?? ""), onChange: (e) => onChange(fieldKey, e.target.value), className: "h-8 bg-bg-muted border-border text-xs rounded px-2" })] }, fieldKey));
+    }
+}
+// ---------------------------------------------------------------------------
+// Widget row
+// ---------------------------------------------------------------------------
+function WidgetRow({ instance, onToggle, onUpdate, }) {
+    const { t } = useApp();
+    const [expanded, setExpanded] = useState(false);
+    const def = getAllWidgets().find((d) => d.type === instance.type);
+    const hasConfig = def && Object.keys(def.configSchema).length > 0;
+    return (_jsxs("div", { className: "border border-border rounded-lg overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-[rgba(255,255,255,0.03)]", children: [_jsx(Switch, { checked: instance.enabled, onCheckedChange: onToggle, title: instance.enabled
+                            ? t("streamsettings.DisableWidget")
+                            : t("streamsettings.EnableWidget") }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-[12px] font-medium text-txt truncate", children: def?.name ?? instance.type }), def?.description && (_jsx("div", { className: "text-[10px] text-muted truncate", children: def.description }))] }), hasConfig && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setExpanded((x) => !x), className: "text-muted hover:text-txt text-[10px] h-6 px-1.5 py-0 bg-bg-muted", children: expanded
+                            ? t("streamsettings.ConfigExpanded")
+                            : t("streamsettings.ConfigCollapsed") }))] }), expanded && hasConfig && def && (_jsx("div", { className: "px-3 py-2 border-t border-border flex flex-col gap-2", children: Object.entries(def.configSchema).map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, value: instance.config[key] ?? field.default, onChange: (k, v) => onUpdate({ config: { ...instance.config, [k]: v } }) }, key))) }))] }));
+}
+// ---------------------------------------------------------------------------
+// Main panel
+// ---------------------------------------------------------------------------
+export function StreamSettings({ destinations, activeDestination, onDestinationChange, streamLive, streamSource, activeGameViewerUrl, onSourceChange, overlayLayout, onClose, }) {
+    const { t } = useApp();
+    const [section, setSection] = useState("channel");
+    const [customUrlInput, setCustomUrlInput] = useState(streamSource.type === "custom-url" ? (streamSource.url ?? "") : "");
+    const trimmedCustomUrl = customUrlInput.trim();
+    const customUrlValid = isSupportedStreamUrl(trimmedCustomUrl);
+    const { layout, toggleWidget, updateWidget, resetLayout } = overlayLayout;
+    const navBtn = (id, label) => (_jsx(Button, { variant: section === id ? "default" : "ghost", size: "sm", onClick: () => setSection(id), className: `px-3 py-1.5 text-[12px] font-medium rounded-lg transition-colors h-auto ${section === id
+            ? "bg-accent/20 text-txt hover:bg-accent/30"
+            : "text-muted hover:text-txt hover:bg-bg-muted"}`, children: label }));
+    return (_jsx("div", { className: "absolute inset-0 z-50 flex items-end justify-center", style: { background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }, children: _jsxs("div", { className: "w-full max-w-xl rounded-t-2xl border border-border overflow-hidden flex flex-col", style: { background: "rgba(14,18,28,0.97)", maxHeight: "80vh" }, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border flex-shrink-0", children: [_jsx("span", { className: "text-[13px] font-semibold text-txt", children: t("streamsettings.StreamSettings") }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "text-muted hover:text-txt transition-colors text-lg leading-none p-1 h-auto", children: "\u00D7" })] }), _jsxs("div", { className: "flex gap-1 px-4 py-2 border-b border-border flex-shrink-0", children: [navBtn("channel", t("streamsettings.NavChannel")), navBtn("overlays", t("streamsettings.NavOverlays")), navBtn("source", t("streamsettings.NavSource"))] }), _jsxs("div", { className: "overflow-y-auto flex-1 px-4 py-4", children: [section === "channel" && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-[12px] text-muted", children: t("streamsettings.SelectWhereToBroa") }), destinations.length === 0 ? (_jsxs("div", { className: "text-[12px] text-muted border border-border rounded-lg p-4 text-center", children: [t("streamsettings.NoStreamingDestina"), _jsx("br", {}), t("streamsettings.InstallAStreaming")] })) : (_jsx("div", { className: "flex flex-col gap-2", children: destinations.map((d) => {
+                                        const active = d.id === activeDestination?.id;
+                                        return (_jsxs(Button, { disabled: streamLive, variant: "outline", title: streamLive
+                                                ? t("streamsettings.StopStreamToChangeChannel")
+                                                : undefined, onClick: () => onDestinationChange(d.id), className: `w-full flex items-center justify-start gap-3 px-4 py-3 h-auto rounded-lg border transition-colors disabled:opacity-50 text-left ${active
+                                                ? "border-accent/60 bg-accent/10"
+                                                : "border-border bg-white/[0.03] hover:border-accent/30 hover:bg-white/[0.05]"}`, children: [_jsx("span", { className: `w-2.5 h-2.5 rounded-full flex-shrink-0 ${active
+                                                        ? "bg-accent shadow-[0_0_6px_theme(colors.accent.DEFAULT)]"
+                                                        : "bg-muted/30"}` }), _jsx("span", { className: `text-[13px] font-medium ${active ? "text-txt" : "text-txt"}`, children: d.name }), active && (_jsx("span", { className: "ml-auto text-[10px] text-txt font-semibold uppercase tracking-wide", children: t("appsview.Active") }))] }, d.id));
+                                    }) })), streamLive && (_jsx("p", { className: "text-[11px] text-[#f59e0b] border border-[#f59e0b]/30 rounded px-3 py-1.5 bg-[#f59e0b]/5", children: t("streamsettings.StreamIsLiveSt") }))] })), section === "overlays" && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-[12px] text-muted", children: t("streamsettings.ToggleAndConfigure") }), _jsx(Button, { variant: "link", size: "sm", onClick: resetLayout, className: "text-[11px] text-muted hover:text-danger transition-colors p-0 h-auto", children: t("streamsettings.ResetDefaults") })] }), layout.widgets.length === 0 ? (_jsx("div", { className: "text-[12px] text-muted border border-border rounded-lg p-4 text-center", children: t("streamsettings.NoWidgetsAvailable") })) : (_jsx("div", { className: "flex flex-col gap-2", children: layout.widgets.map((instance) => (_jsx(WidgetRow, { instance: instance, onToggle: () => toggleWidget(instance.id), onUpdate: (patch) => updateWidget(instance.id, patch) }, instance.id))) }))] })), section === "source" && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-[12px] text-muted", children: t("streamsettings.ChooseWhatContent") }), ["stream-tab", "game", "custom-url"].map((st) => {
+                                    const isGame = st === "game";
+                                    const disabled = isGame && !activeGameViewerUrl.trim();
+                                    const active = streamSource.type === st;
+                                    return (_jsxs("div", { children: [_jsxs(Button, { variant: "outline", disabled: disabled, onClick: () => {
+                                                    if (st !== "custom-url") {
+                                                        onSourceChange(st, isGame ? activeGameViewerUrl : undefined);
+                                                    }
+                                                }, className: `w-full h-auto flex items-center justify-start gap-3 px-4 py-3 rounded-lg border transition-colors text-left ${active && st !== "custom-url"
+                                                    ? "border-accent/60 bg-accent/10"
+                                                    : "border-border bg-white/[0.03] hover:border-accent/30 hover:bg-white/[0.05]"}`, children: [_jsx("span", { className: `w-2.5 h-2.5 rounded-full flex-shrink-0 ${active && st !== "custom-url"
+                                                            ? "bg-accent"
+                                                            : "bg-muted/30"}` }), _jsxs("div", { children: [_jsx("div", { className: `text-[13px] font-medium ${active && st !== "custom-url" ? "text-txt" : "text-txt"}`, children: STREAM_SOURCE_LABELS[st] }), _jsxs("div", { className: "text-[10px] text-muted mt-1.5", children: [st === "stream-tab" &&
+                                                                        t("streamsettings.CaptureStreamBrowserTab"), st === "game" &&
+                                                                        (activeGameViewerUrl.trim()
+                                                                            ? `${t("streamsettings.ActiveGame")} ${activeGameViewerUrl}`
+                                                                            : t("streamsettings.NoGameActive")), st === "custom-url" &&
+                                                                        t("streamsettings.BroadcastFromCustomUrl")] })] })] }), st === "custom-url" && (_jsxs("div", { className: `mt-1 flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-colors ${active
+                                                    ? "border-accent/60 bg-accent/10"
+                                                    : "border-border bg-white/[0.03]"}`, children: [_jsx(Input, { placeholder: t("streamsettings.httpsYourUrlCom"), value: customUrlInput, onChange: (e) => setCustomUrlInput(e.target.value), className: "flex-1 bg-transparent border-none p-0 h-auto text-xs focus-visible:ring-0 shadow-none placeholder:text-muted/40", onKeyDown: (e) => {
+                                                            if (e.key === "Enter" && customUrlValid) {
+                                                                onSourceChange("custom-url", trimmedCustomUrl);
+                                                            }
+                                                        } }), _jsx(Button, { variant: "ghost", size: "sm", disabled: !customUrlValid, onClick: () => {
+                                                            if (customUrlValid) {
+                                                                onSourceChange("custom-url", trimmedCustomUrl);
+                                                            }
+                                                        }, className: "px-2 py-1 h-auto bg-accent/20 text-txt text-[11px] font-semibold hover:bg-accent/30 transition-colors", children: t("streamsettings.Use") })] })), st === "custom-url" &&
+                                                trimmedCustomUrl &&
+                                                !customUrlValid && (_jsx("p", { className: "mt-1 px-1 text-[10px] text-danger", children: t("streamsettings.CustomURLsMustSta") }))] }, st));
+                                })] }))] })] }) }));
+}

package/components/stream/StreamTerminal.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamTerminal.d.ts","sourceRoot":"","sources":["../../../src/components/stream/StreamTerminal.tsx"],"names":[],"mappings":"AAWA,wBAAgB,cAAc,4CAkF7B"}