@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/shell/StartupShell.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StartupShell — the front door to the app.
+ *
+ * Shows a branded splash with retro progress bar during ALL startup phases.
+ * New users see the server chooser first. Returning users see the progress bar
+ * immediately. The splash stays visible until the app is FULLY loaded
+ * (including a brief settle delay after coordinator reaches ready).
+ *
+ * Non-loading phases (error, pairing, onboarding) delegate to their views.
+ */
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { client } from "../../api/index.js";
+import { CONNECT_EVENT } from "../../events/index.js";
+import { persistMobileRuntimeModeForServerTarget } from "../../onboarding/mobile-runtime-mode.js";
+import { applyLaunchConnection } from "../../platform/index.js";
+import { useApp } from "../../state/index.js";
+import { resolveAppAssetUrl } from "../../utils/index.js";
+import { BootstrapStep } from "../onboarding/BootstrapStep.js";
+import { PairingView } from "./PairingView.js";
+import { RuntimeGate } from "./RuntimeGate.js";
+import { StartupFailureView } from "./StartupFailureView.js";
+const FONT = "'Courier New', 'Courier', 'Monaco', monospace";
+const PHASE_PROGRESS = {
+    splash: 0,
+    "restoring-session": 10,
+    "resolving-target": 20,
+    "polling-backend": 40,
+    "starting-runtime": 60,
+    hydrating: 85,
+    ready: 100,
+};
+function phaseToStatusKey(phase) {
+    switch (phase) {
+        case "restoring-session":
+            return "startupshell.Starting";
+        case "resolving-target":
+        case "polling-backend":
+            return "startupshell.ConnectingBackend";
+        case "starting-runtime":
+            return "startupshell.InitializingAgent";
+        case "hydrating":
+        case "ready":
+            return "startupshell.Loading";
+        default:
+            return "startupshell.Starting";
+    }
+}
+/**
+ * Returns true when the cloud-provisioned bootstrap session has NOT yet been
+ * established for this page load. After a successful exchange the UI writes
+ * sessionStorage["eliza_session"] as a renderer-side marker; the server-owned
+ * HttpOnly cookie remains the actual auth boundary.
+ */
+function needsBootstrapSession() {
+    try {
+        return !sessionStorage.getItem("eliza_session");
+    }
+    catch {
+        // sessionStorage unavailable — treat as needing bootstrap (fail closed).
+        return true;
+    }
+}
+export function StartupShell() {
+    const { startupCoordinator, startupError, onboardingComplete, onboardingCloudProvisionedContainer, retryStartup, setActionNotice, setState, t, } = useApp();
+    const phase = startupCoordinator.phase;
+    const cloudSkipProbeStartedRef = useRef(false);
+    const isSplash = phase === "splash";
+    const splashLoaded = isSplash
+        ? startupCoordinator.state.loaded
+        : false;
+    const progress = PHASE_PROGRESS[phase] ?? 50;
+    // ── Bootstrap gate state ───────────────────────────────────────
+    // Set to true when the server reports cloudProvisioned=true and no
+    // session exists yet. Set to false once the bootstrap exchange succeeds
+    // (onAdvance callback below).
+    const [showBootstrap, setShowBootstrap] = useState(false);
+    // ── Cloud onboarding skip ──────────────────────────────────────
+    // Fallback: if a cloud-provisioned container still reaches onboarding-required
+    // (e.g. splash probe didn't fire SPLASH_CLOUD_SKIP), re-check the server here
+    // and fast-forward past onboarding.
+    //
+    // IMPORTANT: deps must NOT include the unstable `startupCoordinator` object
+    // reference. Including it caused the probe to be cancelled on every re-render
+    // (RuntimeGate triggers state updates when the cloud login resolves), killing
+    // the in-flight fetch. We use a ref to access the coordinator's dispatch
+    // function instead.
+    const coordinatorDispatchRef = useRef(startupCoordinator.dispatch);
+    coordinatorDispatchRef.current = startupCoordinator.dispatch;
+    const coordinatorStateRef = useRef(startupCoordinator.state);
+    coordinatorStateRef.current = startupCoordinator.state;
+    useEffect(() => {
+        const handleConnect = (event) => {
+            const detail = event.detail;
+            const payload = detail && typeof detail === "object" && !Array.isArray(detail)
+                ? detail
+                : null;
+            if (typeof payload?.gatewayUrl !== "string") {
+                return;
+            }
+            try {
+                const connection = applyLaunchConnection({
+                    kind: "remote",
+                    apiBase: payload.gatewayUrl,
+                    token: typeof payload.token === "string" ? payload.token : null,
+                });
+                persistMobileRuntimeModeForServerTarget("remote");
+                setState("onboardingServerTarget", "remote");
+                setState("onboardingRemoteApiBase", connection.apiBase);
+                setState("onboardingRemoteToken", connection.token ?? "");
+                setState("onboardingRemoteConnected", true);
+                setState("onboardingRemoteError", null);
+                setActionNotice("Connected to remote backend.", "success", 4200);
+                retryStartup();
+            }
+            catch (err) {
+                setActionNotice(err instanceof Error
+                    ? err.message
+                    : "Failed to connect remote backend.", "error", 8000);
+            }
+        };
+        document.addEventListener(CONNECT_EVENT, handleConnect);
+        return () => document.removeEventListener(CONNECT_EVENT, handleConnect);
+    }, [retryStartup, setActionNotice, setState]);
+    useEffect(() => {
+        if (phase !== "onboarding-required") {
+            cloudSkipProbeStartedRef.current = false;
+            return;
+        }
+        const coordState = coordinatorStateRef.current;
+        if (coordState.phase !== "onboarding-required" ||
+            coordState.serverReachable ||
+            cloudSkipProbeStartedRef.current) {
+            return;
+        }
+        cloudSkipProbeStartedRef.current = true;
+        let cancelled = false;
+        void client
+            .getOnboardingStatus()
+            .then((status) => {
+            if (cancelled)
+                return;
+            if (!status.cloudProvisioned) {
+                // Not a cloud-provisioned container — nothing special to do here.
+                return;
+            }
+            if (needsBootstrapSession()) {
+                // Cloud-provisioned but no session yet. Lock the dashboard and show
+                // the bootstrap wizard step. Fail closed: we do NOT advance.
+                setShowBootstrap(true);
+                return;
+            }
+            // Cloud-provisioned and session already established — skip the wizard.
+            setState("onboardingComplete", true);
+            coordinatorDispatchRef.current({ type: "ONBOARDING_COMPLETE" });
+        })
+            .catch(() => {
+            // Probe failed — fail closed. If we can't determine cloud status,
+            // keep showBootstrap as false (no special gate) so the user sees
+            // RuntimeGate and can still choose how to connect.
+            cloudSkipProbeStartedRef.current = false;
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [phase, setState]);
+    // ── Bootstrap advance ──────────────────────────────────────────
+    // Called by BootstrapStep after a successful exchange. The session is
+    // already in sessionStorage at this point. Dispatch ONBOARDING_COMPLETE
+    // so the coordinator moves to "ready" and the main app shell renders.
+    const handleBootstrapAdvance = useCallback(() => {
+        setShowBootstrap(false);
+        setState("onboardingComplete", true);
+        coordinatorDispatchRef.current({ type: "ONBOARDING_COMPLETE" });
+    }, [setState]);
+    // ── Auto-continue splash ──────────────────────────────────────
+    // The deployment chooser now lives inside RuntimeGate. The splash phase
+    // is a pure loading screen that auto-advances to onboarding-required,
+    // which renders RuntimeGate when the user hasn't been onboarded yet.
+    useEffect(() => {
+        if (isSplash && splashLoaded) {
+            startupCoordinator.dispatch({ type: "SPLASH_CONTINUE" });
+        }
+    }, [isSplash, splashLoaded, startupCoordinator]);
+    // Error — delegate
+    if (phase === "error") {
+        const coordState = startupCoordinator.state;
+        const errState = coordState.phase === "error" &&
+            typeof coordState.reason === "string" &&
+            typeof coordState.message === "string"
+            ? {
+                reason: coordState.reason,
+                message: coordState.message,
+                timedOut: coordState.timedOut === true,
+            }
+            : null;
+        const errorState = startupError ?? {
+            reason: errState?.reason ?? "unknown",
+            message: errState?.message ?? "An unexpected error occurred during startup.",
+            phase: "starting-backend",
+        };
+        return _jsx(StartupFailureView, { error: errorState, onRetry: retryStartup });
+    }
+    // Pairing — delegate
+    if (phase === "pairing-required") {
+        return _jsx(PairingView, {});
+    }
+    // Onboarding — cloud-provisioned containers must exchange their bootstrap
+    // token before reaching RuntimeGate. All other containers go straight through.
+    if (phase === "onboarding-required") {
+        if (showBootstrap ||
+            (onboardingCloudProvisionedContainer && needsBootstrapSession())) {
+            return (_jsx(BootstrapGateShell, { children: _jsx(BootstrapStep, { onAdvance: handleBootstrapAdvance }) }));
+        }
+        return _jsx(RuntimeGate, {});
+    }
+    // Ready — let the app through
+    if (phase === "ready") {
+        if (!onboardingComplete) {
+            return _jsx(RuntimeGate, {});
+        }
+        return null;
+    }
+    return (_jsxs("div", { "data-testid": "startup-shell-loading", "data-startup-phase": phase, className: "flex items-center justify-center h-full w-full bg-[#ffe600] text-black overflow-hidden", children: [_jsx("img", { src: resolveAppAssetUrl("splash-bg.png"), alt: "", "aria-hidden": "true", className: "pointer-events-none absolute inset-0 h-full w-full object-cover" }), _jsx("div", { className: "relative z-10 flex flex-col items-center gap-5 px-6 text-center w-full", style: { maxWidth: 360 }, children: _jsxs("div", { className: "w-full mt-2", children: [_jsx("div", { className: "h-5 w-full border-2 border-black/70 bg-black/5 overflow-hidden", children: _jsx("div", { className: "h-full bg-black/70 transition-all duration-700 ease-out", style: { width: `${progress}%` }, children: _jsx("div", { className: "h-full w-full", style: {
+                                        backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(255,230,0,0.5) 6px, rgba(255,230,0,0.5) 8px)",
+                                    } }) }) }), _jsx("p", { style: { fontFamily: FONT }, className: "mt-2 text-3xs text-black/50 uppercase animate-pulse", children: t(phaseToStatusKey(phase)) })] }) })] }));
+}
+/**
+ * Shell wrapper for the bootstrap step — matches the dark visual style of
+ * RuntimeGate so the bootstrap gate feels like part of the same flow.
+ */
+function BootstrapGateShell({ children }) {
+    return (_jsxs("div", { className: "relative flex min-h-full w-full flex-col bg-black text-white", children: [_jsxs("div", { "aria-hidden": "true", className: "absolute inset-0 overflow-hidden pointer-events-none", children: [_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.14),transparent_36%),linear-gradient(180deg,rgba(11,14,20,0.18),rgba(6,7,8,0.56))]" }), _jsx("div", { className: "absolute left-[-10%] top-[8%] h-[24rem] w-[24rem] rounded-full bg-[rgba(240,185,11,0.1)] blur-[110px]" }), _jsx("div", { className: "absolute bottom-[-12%] right-[-8%] h-[20rem] w-[20rem] rounded-full bg-[rgba(255,255,255,0.08)] blur-[120px]" })] }), _jsx("div", { className: "relative z-10 flex flex-1 items-center justify-center px-4 pb-[max(1.5rem,var(--safe-area-bottom,0px))] pt-[calc(var(--safe-area-top,0px)_+_3.75rem)] sm:px-6 md:px-8", children: _jsx("div", { className: "flex w-full max-w-[32rem] flex-col items-center gap-4", children: children }) })] }));
+}

package/components/shell/SystemWarningBanner.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Renders yellow warning banners for system-level warnings
+ * broadcast via WebSocket `system-warning` events.
+ */
+export declare function SystemWarningBanner(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SystemWarningBanner.d.ts.map

package/components/shell/SystemWarningBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemWarningBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/SystemWarningBanner.tsx"],"names":[],"mappings":"AAMA;;;GAGG;AACH,wBAAgB,mBAAmB,mDA2DlC"}

package/components/shell/SystemWarningBanner.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Z_SYSTEM_BANNER } from "@elizaos/ui";
+import { useEffect, useRef } from "react";
+import { useApp } from "../../state/index.js";
+const AUTO_DISMISS_MS = 20_000;
+/**
+ * Renders yellow warning banners for system-level warnings
+ * broadcast via WebSocket `system-warning` events.
+ */
+export function SystemWarningBanner() {
+    const { systemWarnings, dismissSystemWarning } = useApp();
+    const timersRef = useRef(new Map());
+    useEffect(() => {
+        if (!systemWarnings?.length)
+            return;
+        const timers = timersRef.current;
+        for (const message of systemWarnings) {
+            if (!timers.has(message)) {
+                const timer = setTimeout(() => {
+                    timers.delete(message);
+                    dismissSystemWarning(message);
+                }, AUTO_DISMISS_MS);
+                timers.set(message, timer);
+            }
+        }
+        for (const [msg, timer] of timers) {
+            if (!systemWarnings.includes(msg)) {
+                clearTimeout(timer);
+                timers.delete(msg);
+            }
+        }
+    }, [systemWarnings, dismissSystemWarning]);
+    useEffect(() => {
+        const timers = timersRef.current;
+        return () => {
+            for (const timer of timers.values())
+                clearTimeout(timer);
+            timers.clear();
+        };
+    }, []);
+    if (!systemWarnings?.length)
+        return null;
+    return (_jsx(_Fragment, { children: systemWarnings.map((message) => (_jsxs("div", { role: "alert", "aria-live": "assertive", "data-window-titlebar-banner": "true", className: `shrink-0 z-[${Z_SYSTEM_BANNER}] flex items-center justify-between gap-3 bg-warn px-4 py-2 text-sm font-medium text-[color:var(--accent-foreground)] shadow-lg`, children: [_jsx("span", { className: "truncate", children: message }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => dismissSystemWarning(message), className: "shrink-0 rounded px-2 py-0.5 text-xs text-[color:var(--accent-foreground)]/80 hover:bg-black/10", children: "x" })] }, message))) }));
+}

package/components/shell/onboarding-theme.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from "react";
+import type { OnboardingThemeConfig } from "../../config/branding";
+type OnboardingCssVars = CSSProperties & Record<`--${string}`, string>;
+export declare function getOnboardingThemeVars(theme: OnboardingThemeConfig | undefined): OnboardingCssVars;
+export {};
+//# sourceMappingURL=onboarding-theme.d.ts.map

package/components/shell/onboarding-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-theme.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/onboarding-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,iBAAiB,GAAG,aAAa,GAAG,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;AAgBvE,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GACvC,iBAAiB,CAenB"}

package/components/shell/onboarding-theme.js

@@ -0,0 +1,29 @@
+const DEFAULT_ONBOARDING_THEME = {
+    background: "#c84d1f",
+    foreground: "#fffaf6",
+    mutedForeground: "rgba(255, 250, 246, 0.72)",
+    controlBackground: "rgba(255, 255, 255, 0.16)",
+    controlForeground: "#fffaf6",
+    buttonBackground: "#fffaf6",
+    buttonForeground: "#c84d1f",
+    buttonHighlightBackground: "#ffe7d9",
+    inputBackground: "#fffaf6",
+    inputForeground: "#9f3a18",
+    errorForeground: "#fff0e8",
+};
+export function getOnboardingThemeVars(theme) {
+    const resolved = { ...DEFAULT_ONBOARDING_THEME, ...theme };
+    return {
+        "--onboarding-bg": resolved.background,
+        "--onboarding-fg": resolved.foreground,
+        "--onboarding-muted": resolved.mutedForeground,
+        "--onboarding-control-bg": resolved.controlBackground,
+        "--onboarding-control-fg": resolved.controlForeground,
+        "--onboarding-button-bg": resolved.buttonBackground,
+        "--onboarding-button-fg": resolved.buttonForeground,
+        "--onboarding-button-highlight": resolved.buttonHighlightBackground,
+        "--onboarding-input-bg-flat": resolved.inputBackground,
+        "--onboarding-input-fg-flat": resolved.inputForeground,
+        "--onboarding-error": resolved.errorForeground,
+    };
+}

package/components/shell/pairing-command.d.ts

@@ -0,0 +1,9 @@
+export interface PairingCodeCommandInfo {
+    serverCommand: string;
+    sshCommand: string | null;
+    sshTarget: string | null;
+    usesDefaultPort: boolean;
+    isLoopback: boolean;
+}
+export declare function buildPairingCodeCommandInfo(remoteUrl?: string): PairingCodeCommandInfo;
+//# sourceMappingURL=pairing-command.d.ts.map

package/components/shell/pairing-command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pairing-command.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/pairing-command.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;CACrB;AA6BD,wBAAgB,2BAA2B,CACzC,SAAS,CAAC,EAAE,MAAM,GACjB,sBAAsB,CAmBxB"}

package/components/shell/pairing-command.js

@@ -0,0 +1,48 @@
+const DEFAULT_PAIRING_PORT = "2138";
+const PAIRING_CODE_PATH = "/api/auth/pair-code";
+const PLACEHOLDER_SSH_TARGET = "user@your-server";
+const LOOPBACK_HOSTS = new Set(["localhost", "127.0.0.1", "0.0.0.0", "::1"]);
+function parseRemoteUrlInput(value) {
+    const trimmed = value?.trim();
+    if (!trimmed)
+        return null;
+    const withScheme = /^[a-z][a-z\d+.-]*:\/\//i.test(trimmed)
+        ? trimmed
+        : `http://${trimmed}`;
+    try {
+        const parsed = new URL(withScheme);
+        if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+            return null;
+        }
+        return parsed.hostname ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+function normalizeHostname(hostname) {
+    return hostname.replace(/^\[(.*)\]$/, "$1").toLowerCase();
+}
+function formatSshTarget(hostname) {
+    const host = normalizeHostname(hostname);
+    return `user@${host.includes(":") ? `[${host}]` : host}`;
+}
+export function buildPairingCodeCommandInfo(remoteUrl) {
+    const parsed = parseRemoteUrlInput(remoteUrl);
+    const hostname = parsed ? normalizeHostname(parsed.hostname) : "";
+    const port = parsed?.port || DEFAULT_PAIRING_PORT;
+    const serverCommand = `curl -s http://127.0.0.1:${port}${PAIRING_CODE_PATH}`;
+    const isLoopback = Boolean(hostname && LOOPBACK_HOSTS.has(hostname));
+    const sshTarget = !isLoopback
+        ? parsed
+            ? formatSshTarget(parsed.hostname)
+            : PLACEHOLDER_SSH_TARGET
+        : null;
+    return {
+        serverCommand,
+        sshCommand: sshTarget ? `ssh ${sshTarget} "${serverCommand}"` : null,
+        sshTarget,
+        usesDefaultPort: !parsed?.port,
+        isLoopback,
+    };
+}

package/components/steward/injected.d.ts

@@ -0,0 +1,5 @@
+import type { StewardApprovalQueueProps, StewardLogoProps, StewardTransactionHistoryProps } from "../../config/boot-config";
+export declare function StewardLogo(props: StewardLogoProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ApprovalQueue(props: StewardApprovalQueueProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TransactionHistory(props: StewardTransactionHistoryProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=injected.d.ts.map

package/components/steward/injected.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injected.d.ts","sourceRoot":"","sources":["../../../../../../src/components/steward/injected.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,gBAAgB,EAChB,8BAA8B,EAC/B,MAAM,0BAA0B,CAAC;AAGlC,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAGlD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,yBAAyB,kDAG7D;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,8BAA8B,kDAMvE"}

package/components/steward/injected.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBootConfig } from "../../config/boot-config-react.js";
+export function StewardLogo(props) {
+    const { stewardLogo: StewardLogoComponent } = useBootConfig();
+    return StewardLogoComponent ? _jsx(StewardLogoComponent, { ...props }) : null;
+}
+export function ApprovalQueue(props) {
+    const { stewardApprovalQueue: ApprovalQueueComponent } = useBootConfig();
+    return ApprovalQueueComponent ? _jsx(ApprovalQueueComponent, { ...props }) : null;
+}
+export function TransactionHistory(props) {
+    const { stewardTransactionHistory: TransactionHistoryComponent } = useBootConfig();
+    return TransactionHistoryComponent ? (_jsx(TransactionHistoryComponent, { ...props })) : null;
+}

package/components/stream/StatusBar.d.ts

@@ -0,0 +1,10 @@
+export declare function StatusBar({ agentName, streamAvailable, streamLive, streamLoading, onToggleStream, uptime, frameCount, }: {
+    agentName: string;
+    streamAvailable: boolean;
+    streamLive: boolean;
+    streamLoading: boolean;
+    onToggleStream: () => void;
+    uptime: number;
+    frameCount: number;
+}): 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":"AASA,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,eAAe,EACf,UAAU,EACV,aAAa,EACb,cAAc,EACd,MAAM,EACN,UAAU,GACX,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,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,UAAU,EAAE,MAAM,CAAC;CACpB,2CAmIA"}

package/components/stream/StatusBar.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { ExternalLink } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { isElectrobunRuntime } from "../../bridge/electrobun-runtime.js";
+import { getBootConfig } from "../../config/boot-config.js";
+import { useApp } from "../../state/useApp.js";
+import { formatUptime } from "../../utils/format.js";
+import { IS_POPOUT } from "./helpers.js";
+export function StatusBar({ agentName, streamAvailable, streamLive, streamLoading, onToggleStream, uptime, frameCount, }) {
+    const { t } = useApp();
+    const isElectrobun = isElectrobunRuntime();
+    const popoutPollRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (popoutPollRef.current) {
+                clearInterval(popoutPollRef.current);
+                popoutPollRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsxs("div", { className: "flex items-center justify-between bg-card/80 shadow-sm backdrop-blur-xl shrink-0 px-3 py-2 lg:px-4", style: IS_POPOUT ? { WebkitAppRegion: "drag" } : undefined, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `w-2.5 h-2.5 rounded-full ${streamLive
+                            ? "bg-danger ring-2 ring-danger/25 animate-pulse"
+                            : "bg-muted"}` }), _jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-txt", children: streamLive
+                            ? t("statusbar.LiveShort", { defaultValue: "LIVE" })
+                            : t("statusbar.OfflineShort", { defaultValue: "OFFLINE" }) }), _jsx("span", { className: "text-sm font-semibold text-txt-strong", children: agentName })] }), _jsxs("div", { className: "flex items-center gap-2 lg:gap-3 text-xs text-muted", style: IS_POPOUT
+                    ? { WebkitAppRegion: "no-drag" }
+                    : undefined, children: [streamLive && (_jsxs("span", { className: "inline-flex min-h-9 items-center gap-1.5 rounded-xl border border-border/45 bg-card/92 px-2.5 py-1.5 text-xs-tight text-muted-strong shadow-sm font-mono text-2xs", children: [_jsx("span", { className: "text-txt", children: formatUptime(uptime) }), _jsx("span", { className: "text-border", children: "|" }), _jsxs("span", { className: "text-txt", children: [frameCount.toLocaleString(), "f"] })] })), _jsx(Button, { size: "sm", disabled: !streamAvailable || streamLoading, className: `inline-flex h-9 min-h-9 items-center justify-center rounded-xl border px-3 text-xs-tight font-semibold uppercase tracking-[0.16em] shadow-sm transition-[border-color,background-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-accent/35 disabled:cursor-wait disabled:opacity-50 ${streamLive
+                            ? "border-danger/35 bg-danger/10 text-danger hover:border-danger/50 hover:bg-danger/16"
+                            : "border-ok/35 bg-ok/10 text-ok hover:border-ok/50 hover:bg-ok/16"}`, onClick: onToggleStream, title: streamAvailable
+                            ? undefined
+                            : t("statusbar.InstallStreamingPlugin", {
+                                defaultValue: "Install and enable the streaming plugin to go live",
+                            }), children: streamLoading
+                            ? "..."
+                            : streamLive
+                                ? t("statusbar.StopStream", { defaultValue: "Stop Stream" })
+                                : t("statusbar.GoLive", { defaultValue: "Go Live" }) }), !IS_POPOUT && !isElectrobun && (_jsx(Button, { variant: "ghost", size: "sm", className: "inline-flex min-h-9 h-9 w-9 items-center justify-center rounded-xl border border-border/45 bg-card/92 px-0 py-1.5 text-xs-tight text-muted-strong shadow-sm transition-[border-color,background-color,color,box-shadow] focus-visible:ring-2 focus-visible:ring-accent/35 hover:border-border-strong hover:bg-bg-hover hover:text-txt hover:shadow-md", title: t("statusbar.PopOutStreamView"), onClick: () => {
+                            const apiBase = getBootConfig().apiBase;
+                            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}`, "elizaos-stream", "width=1280,height=720,menubar=no,toolbar=no,location=no,status=no");
+                            if (popoutWin) {
+                                window.dispatchEvent(new CustomEvent("stream-popout", { detail: "opened" }));
+                                if (popoutPollRef.current) {
+                                    clearInterval(popoutPollRef.current);
+                                }
+                                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" }) }))] })] }));
+}

package/components/stream/helpers.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared helpers and constants for StreamView.
+ */
+/** 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;
+};
+/** Detect popout mode from URL. */
+export declare const IS_POPOUT: 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;AAMH,oFAAoF;AACpF,eAAO,MAAM,QAAQ;;;CAA8B,CAAC;AACpD,eAAO,MAAM,SAAS;;;CAA+B,CAAC;AAEtD,mCAAmC;AACnC,eAAO,MAAM,SAAS,SAMlB,CAAC"}

package/components/stream/helpers.js

@@ -0,0 +1,16 @@
+/**
+ * Shared helpers and constants for StreamView.
+ */
+// ---------------------------------------------------------------------------
+// Popout / Window sizes
+// ---------------------------------------------------------------------------
+/** 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 };
+/** Detect popout mode from URL. */
+export const IS_POPOUT = (() => {
+    if (typeof window === "undefined" || !window.location)
+        return false;
+    const params = new URLSearchParams(window.location.search || window.location.hash?.split("?")[1] || "");
+    return params.has("popout");
+})();

package/components/tool-events/ToolCallEventLog.d.ts

@@ -0,0 +1,10 @@
+import type { NativeToolCallEvent } from "../../api/client-types-cloud";
+export interface ToolCallEventLogProps {
+    event: NativeToolCallEvent;
+    className?: string;
+}
+export type ToolCallEventDisplayState = "running" | "success" | "failure";
+export declare function getToolCallEventDisplayState(event: NativeToolCallEvent): ToolCallEventDisplayState;
+export declare function getToolCallName(event: NativeToolCallEvent): string;
+export declare function ToolCallEventLog({ className, event, }: ToolCallEventLogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolCallEventLog.d.ts.map

package/components/tool-events/ToolCallEventLog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCallEventLog.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tool-events/ToolCallEventLog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAExE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1E,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,mBAAmB,GACzB,yBAAyB,CAY3B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CASlE;AAkED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAc,EACd,KAAK,GACN,EAAE,qBAAqB,2CAuDvB"}

package/components/tool-events/ToolCallEventLog.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckCircle, ChevronDown, Clock3, XCircle } from "lucide-react";
+export function getToolCallEventDisplayState(event) {
+    if (event.type === "tool_error" || event.status === "failed" || event.error) {
+        return "failure";
+    }
+    if (event.type === "tool_result" ||
+        event.status === "completed" ||
+        event.success === true) {
+        return "success";
+    }
+    return "running";
+}
+export function getToolCallName(event) {
+    return (event.actionName ||
+        event.toolName ||
+        event.name ||
+        event.callId ||
+        event.toolCallId ||
+        "tool");
+}
+function previewValue(value) {
+    if (value == null)
+        return "—";
+    if (typeof value === "string")
+        return value.trim() || "—";
+    if (typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+    }
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+function truncate(value, max = 180) {
+    return value.length > max ? `${value.slice(0, max - 3)}...` : value;
+}
+function formatJson(value) {
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+function StatePill({ state }) {
+    const styles = {
+        running: "border-primary/30 bg-primary/5 text-primary",
+        success: "border-success/30 bg-success/5 text-success",
+        failure: "border-danger/30 bg-danger/5 text-danger",
+    };
+    const labels = {
+        running: "Running",
+        success: "Success",
+        failure: "Failure",
+    };
+    return (_jsx("span", { className: `inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.12em] ${styles[state]}`, children: labels[state] }));
+}
+function StateIcon({ state }) {
+    if (state === "success")
+        return _jsx(CheckCircle, { className: "h-4 w-4" });
+    if (state === "failure")
+        return _jsx(XCircle, { className: "h-4 w-4" });
+    return _jsx(Clock3, { className: "h-4 w-4" });
+}
+function PreviewRow({ label, value }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted/70", children: label }), _jsx("div", { className: "mt-1 truncate font-mono text-xs-tight text-txt", children: value })] }));
+}
+export function ToolCallEventLog({ className = "", event, }) {
+    const state = getToolCallEventDisplayState(event);
+    const actionName = getToolCallName(event);
+    const args = event.args ?? event.input;
+    const result = event.result ?? event.output ?? event.error;
+    return (_jsxs("div", { className: `rounded-lg border border-border/50 bg-bg/40 px-4 py-3 ${className}`, "data-testid": "tool-call-event-log", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `shrink-0 ${state === "failure"
+                                            ? "text-danger"
+                                            : state === "success"
+                                                ? "text-success"
+                                                : "text-primary"}`, children: _jsx(StateIcon, { state: state }) }), _jsx("div", { className: "truncate text-sm font-semibold text-txt", children: actionName })] }), _jsxs("div", { className: "mt-1 text-xs-tight text-muted", children: [event.stage ? String(event.stage).replace(/_/g, " ") : "tool", event.durationMs || event.duration ? (_jsxs(_Fragment, { children: [" - ", event.durationMs ?? event.duration, "ms"] })) : null] })] }), _jsx(StatePill, { state: state })] }), _jsxs("div", { className: "mt-3 grid gap-3 md:grid-cols-2", children: [_jsx(PreviewRow, { label: "Args", value: truncate(previewValue(args)) }), _jsx(PreviewRow, { label: "Result", value: truncate(previewValue(result)) })] }), _jsxs("details", { className: "group mt-3", children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center gap-1 text-xs-tight font-semibold text-muted hover:text-txt", children: [_jsx(ChevronDown, { className: "h-3.5 w-3.5 transition-transform group-open:rotate-180" }), "JSON details"] }), _jsx("pre", { className: "mt-2 max-h-[24rem] overflow-x-auto overflow-y-auto whitespace-pre-wrap break-words rounded-lg border border-border/40 bg-bg/60 px-3 py-3 text-xs leading-6 text-txt", children: formatJson(event) })] })] }));
+}