@elizaos/ui 2.0.0-alpha.21 → 2.0.0-alpha.210

package/packages/app-core/src/components/shell/PairingView.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, } from "@elizaos/ui";
+import { appNameInterpolationVars, useBranding } from "../../config/branding";
+import { useApp } from "../../state";
+const SCREEN_SHELL_CLASS = "relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-bg px-4 py-6 font-body text-txt sm:px-6";
+const SCREEN_CARD_CLASS = "relative z-10 w-full max-w-[620px] overflow-hidden border border-border/60 bg-card/95 shadow-[0_30px_120px_rgba(0,0,0,0.35)] backdrop-blur-xl";
+const SURFACE_PANEL_CLASS = "rounded-2xl border border-border/50 bg-bg/40 p-4 shadow-sm sm:p-5";
+export function PairingView() {
+    const { pairingEnabled, pairingExpiresAt, pairingCodeInput, pairingError, pairingBusy, handlePairingSubmit, setState, t, } = useApp();
+    const branding = useBranding();
+    const pairingCode = pairingCodeInput.trim();
+    function formatExpiry(timestamp) {
+        if (!timestamp)
+            return "";
+        const now = Date.now();
+        const diff = timestamp - now;
+        if (diff <= 0)
+            return t("pairingview.Expired");
+        const minutes = Math.floor(diff / 60000);
+        const seconds = Math.floor((diff % 60000) / 1000);
+        return t("pairingview.ExpiresIn", {
+            time: `${minutes}:${seconds.toString().padStart(2, "0")}`,
+        });
+    }
+    const expiryText = formatExpiry(pairingExpiresAt);
+    const handleCodeChange = (e) => {
+        setState("pairingCodeInput", e.target.value);
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        void handlePairingSubmit();
+    };
+    return (_jsxs("div", { className: SCREEN_SHELL_CLASS, children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(var(--accent-rgb),0.12),transparent_30%),linear-gradient(180deg,rgba(255,255,255,0.02),transparent_40%)]" }), _jsxs(Card, { className: SCREEN_CARD_CLASS, children: [_jsx(CardHeader, { className: "bg-card/70 pb-6 pt-6", children: _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-1.5", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted/80", children: branding.appName }), _jsx(CardTitle, { className: "text-xl text-txt-strong", children: t("pairingview.PairingRequired") }), _jsx(CardDescription, { className: "max-w-[48ch] text-sm leading-relaxed", children: t("pairingview.EnterThePairingCo") })] }), pairingEnabled && expiryText ? (_jsx("div", { id: "pairing-code-expiry", "aria-live": "polite", className: "inline-flex min-h-10 items-center rounded-xl border border-border/60 bg-bg/55 px-3 py-2 text-xs font-medium text-muted shadow-sm", children: expiryText })) : null] }) }), _jsx(CardContent, { className: "pt-6", children: pairingEnabled ? (_jsxs("form", { onSubmit: handleSubmit, "aria-busy": pairingBusy, className: "space-y-6", children: [_jsxs("div", { className: SURFACE_PANEL_CLASS, children: [_jsx("div", { className: "mb-3", children: _jsx(Label, { htmlFor: "pairing-code", className: "text-sm font-semibold", children: t("pairingview.PairingCode") }) }), _jsx(Input, { id: "pairing-code", type: "text", value: pairingCodeInput, onChange: handleCodeChange, placeholder: t("pairingview.EnterPairingCode"), disabled: pairingBusy, autoFocus: true, autoCapitalize: "characters", autoCorrect: "off", enterKeyHint: "done", spellCheck: false, "aria-invalid": pairingError ? "true" : "false", "aria-describedby": [
+                                                pairingError ? "pairing-code-error" : null,
+                                                expiryText ? "pairing-code-expiry" : null,
+                                            ]
+                                                .filter(Boolean)
+                                                .join(" ") || undefined, className: "h-12 rounded-xl text-base sm:text-sm" })] }), pairingError ? (_jsx("div", { id: "pairing-code-error", role: "alert", className: "rounded-xl border border-danger/30 bg-danger/10 px-3 py-3 text-sm leading-relaxed text-danger", children: pairingError })) : null, _jsxs("div", { className: "flex flex-col gap-3 pt-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsx(Button, { asChild: true, variant: "outline", size: "lg", className: "w-full sm:w-auto sm:min-w-[12rem]", children: _jsx("a", { href: `https://github.com/${branding.orgName}/${branding.repoName}/blob/develop/docs/api-reference.mdx`, target: "_blank", rel: "noreferrer", children: t("pairingview.PairingSetupDocs") }) }), _jsx(Button, { type: "submit", variant: "default", size: "lg", className: "w-full sm:w-auto sm:min-w-[9rem]", disabled: pairingBusy || !pairingCode, children: pairingBusy
+                                                ? t("pairingview.PairingInProgress")
+                                                : t("pairingview.Submit") })] })] })) : (_jsxs("div", { className: "space-y-5 text-sm", children: [_jsx("div", { className: "rounded-xl border border-border/60 bg-bg/40 px-4 py-3.5 text-muted", children: _jsx("p", { className: "leading-relaxed", children: t("pairingview.PairingIsNotEnabl") }) }), _jsxs("div", { className: `${SURFACE_PANEL_CLASS} space-y-3`, children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("pairingview.NextSteps") }), _jsxs("ol", { className: "list-decimal space-y-2 pl-5 text-sm leading-relaxed text-txt", children: [_jsx("li", { children: t("pairingview.AskTheServerOwner") }), _jsx("li", { children: t("pairingview.EnablePairingOnTh", appNameInterpolationVars(branding)) })] })] }), _jsx(Button, { asChild: true, variant: "outline", size: "lg", className: "w-full sm:w-auto sm:min-w-[12rem]", children: _jsx("a", { href: `https://github.com/${branding.orgName}/${branding.repoName}/blob/develop/docs/api-reference.mdx`, target: "_blank", rel: "noreferrer", children: t("pairingview.PairingSetupDocs") }) })] })) })] })] }));
+}

package/packages/app-core/src/components/shell/RestartBanner.d.ts

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

package/packages/app-core/src/components/shell/RestartBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RestartBanner.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/shell/RestartBanner.tsx"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,mDA0E5B"}

package/packages/app-core/src/components/shell/RestartBanner.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Z_SYSTEM_BANNER } from "@elizaos/ui";
+import { useCallback, useState } from "react";
+import { useApp } from "../../state";
+export function RestartBanner() {
+    const { pendingRestart, pendingRestartReasons, restartBannerDismissed, dismissRestartBanner, triggerRestart, t, } = useApp();
+    const [restarting, setRestarting] = useState(false);
+    const handleRestart = useCallback(async () => {
+        setRestarting(true);
+        try {
+            await triggerRestart();
+        }
+        finally {
+            setRestarting(false);
+        }
+    }, [triggerRestart]);
+    if (!pendingRestart || restartBannerDismissed)
+        return null;
+    const reasons = pendingRestartReasons;
+    const text = reasons.length === 1
+        ? t("restartbanner.SingleReasonPending", { reason: reasons[0] })
+        : reasons.length > 1
+            ? t("restartbanner.MultipleReasonsPending", {
+                count: reasons.length,
+            })
+            : t("restartbanner.RestartRequired");
+    return (_jsxs("div", { className: `fixed bottom-4 right-4 z-[${Z_SYSTEM_BANNER}] flex flex-col gap-2 rounded-lg px-4 py-3 text-sm font-medium shadow-lg`, style: {
+            background: "color-mix(in srgb, var(--bg) 95%, var(--accent) 5%)",
+            border: "1px solid color-mix(in srgb, var(--accent) 25%, transparent)",
+            color: "var(--text)",
+            maxWidth: "22rem",
+            backdropFilter: "blur(12px)",
+        }, role: "status", "aria-live": "polite", children: [_jsx("span", { className: "leading-snug", children: text }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: dismissRestartBanner, className: "rounded px-3 py-1 text-xs text-muted hover:bg-bg-hover", children: t("restartbanner.Later") }), _jsx(Button, { variant: "secondary", size: "sm", onClick: handleRestart, disabled: restarting, className: "rounded px-3 py-1 text-xs font-semibold border-transparent", style: {
+                            background: "var(--accent)",
+                            color: "var(--accent-foreground)",
+                        }, children: restarting
+                            ? t("restartbanner.Restarting")
+                            : t("restartbanner.RestartNow") })] })] }));
+}

package/packages/app-core/src/components/shell/ShellOverlays.d.ts

@@ -0,0 +1,5 @@
+import type { ActionNotice } from "../../state/types";
+export declare function ShellOverlays({ actionNotice, }: {
+    actionNotice: ActionNotice | null;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShellOverlays.d.ts.map

package/packages/app-core/src/components/shell/ShellOverlays.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellOverlays.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/shell/ShellOverlays.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,wBAAgB,aAAa,CAAC,EAC5B,YAAY,GACb,EAAE;IACD,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC,2CA8BA"}

package/packages/app-core/src/components/shell/ShellOverlays.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { GlobalEmoteOverlay } from "@elizaos/app-companion/components/companion/GlobalEmoteOverlay";
+import { Spinner, Z_SHELL_OVERLAY } from "@elizaos/ui";
+import { BugReportModal } from "./BugReportModal";
+import { CommandPalette } from "./CommandPalette";
+import { ComputerUseApprovalOverlay } from "./ComputerUseApprovalOverlay";
+import { RestartBanner } from "./RestartBanner";
+import { ShortcutsOverlay } from "./ShortcutsOverlay";
+export function ShellOverlays({ actionNotice, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(CommandPalette, {}), _jsx(RestartBanner, {}), _jsx(BugReportModal, {}), _jsx(ComputerUseApprovalOverlay, {}), _jsx(ShortcutsOverlay, {}), _jsx(GlobalEmoteOverlay, {}), actionNotice && (_jsxs("div", { className: `fixed bottom-6 left-1/2 -translate-x-1/2 px-5 py-2.5 rounded-lg text-sm font-medium z-[${Z_SHELL_OVERLAY}] flex items-center gap-2.5 max-w-[min(92vw,28rem)] ${actionNotice.tone === "error"
+                    ? "bg-danger text-white"
+                    : actionNotice.tone === "success"
+                        ? "bg-ok text-white"
+                        : "bg-accent text-accent-fg"}`, role: "status", "aria-live": "polite", "aria-busy": actionNotice.busy ? true : undefined, children: [actionNotice.busy ? (_jsx(Spinner, { size: 16, className: "shrink-0 opacity-95", "aria-hidden": true })) : null, _jsx("span", { className: "text-left leading-snug", children: actionNotice.text })] }))] }));
+}

package/packages/app-core/src/components/shell/ShortcutsOverlay.d.ts

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

package/packages/app-core/src/components/shell/ShortcutsOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutsOverlay.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/shell/ShortcutsOverlay.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,gBAAgB,4CAiF/B"}

package/packages/app-core/src/components/shell/ShortcutsOverlay.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@elizaos/ui";
+import { useEffect, useState } from "react";
+import { COMMON_SHORTCUTS } from "../../hooks";
+import { useApp } from "../../state";
+function formatKey(shortcut) {
+    const isMac = typeof navigator !== "undefined" && navigator.platform?.includes("Mac");
+    const parts = [];
+    if (shortcut.ctrl) {
+        parts.push(isMac ? "\u2318" : "Ctrl");
+    }
+    if (shortcut.shift) {
+        parts.push(isMac ? "\u21E7" : "Shift");
+    }
+    if (shortcut.alt) {
+        parts.push(isMac ? "\u2325" : "Alt");
+    }
+    if (shortcut.meta) {
+        parts.push(isMac ? "\u2318" : "Win");
+    }
+    parts.push(shortcut.key.length === 1 ? shortcut.key.toUpperCase() : shortcut.key);
+    return parts.join(isMac ? "" : "+");
+}
+export function ShortcutsOverlay() {
+    const { t } = useApp();
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        const handler = (event) => {
+            if (event.shiftKey && event.key === "?") {
+                const tag = event.target?.tagName;
+                if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
+                    return;
+                }
+                event.preventDefault();
+                setOpen((value) => !value);
+            }
+            if (event.key === "Escape" && open) {
+                event.preventDefault();
+                setOpen(false);
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [open]);
+    const grouped = {};
+    for (const shortcut of COMMON_SHORTCUTS) {
+        const scope = shortcut.scope ?? "global";
+        if (!grouped[scope]) {
+            grouped[scope] = [];
+        }
+        grouped[scope].push(shortcut);
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-lg rounded-xl max-h-[80vh] overflow-y-auto p-0", children: [_jsx(DialogHeader, { className: "px-5 py-4", style: { borderBottom: "1px solid var(--border)" }, children: _jsx(DialogTitle, { className: "text-base font-bold", children: t("shortcutsoverlay.KeyboardShortcuts") }) }), _jsx("div", { className: "p-5 space-y-5", children: Object.entries(grouped).map(([scope, shortcuts]) => (_jsxs("div", { children: [_jsx("h3", { className: "text-xs-tight uppercase tracking-wide font-medium mb-2", style: { color: "var(--muted)" }, children: scope }), _jsx("div", { className: "space-y-1", children: shortcuts.map((shortcut) => (_jsxs("div", { className: "flex items-center justify-between py-1.5 px-2 rounded", children: [_jsx("span", { className: "text-sm", style: { color: "var(--text)" }, children: shortcut.description }), _jsx("kbd", { className: "inline-flex items-center gap-0.5 px-2 py-0.5 text-xs-tight font-mono rounded", style: {
+                                                background: "var(--bg-hover)",
+                                                border: "1px solid var(--border)",
+                                                color: "var(--muted)",
+                                            }, children: formatKey(shortcut) })] }, `${shortcut.key}-${shortcut.description}`))) })] }, scope))) })] }) }));
+}

package/packages/app-core/src/components/shell/StartupFailureView.d.ts

@@ -0,0 +1,8 @@
+import type { StartupErrorState } from "../../state";
+interface StartupFailureViewProps {
+    error: StartupErrorState;
+    onRetry: () => void;
+}
+export declare function StartupFailureView({ error, onRetry, }: StartupFailureViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StartupFailureView.d.ts.map

package/packages/app-core/src/components/shell/StartupFailureView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartupFailureView.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/shell/StartupFailureView.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAwCrD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,GACR,EAAE,uBAAuB,2CAqLzB"}

package/packages/app-core/src/components/shell/StartupFailureView.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner, Button, Card, CardContent, CardDescription, CardHeader, StatusBadge, } from "@elizaos/ui";
+import { useState } from "react";
+import { client } from "../../api";
+import { useBranding } from "../../config/branding";
+import { useOptionalBugReport } from "../../hooks";
+import { useApp } from "../../state";
+function startupReasonLabel(t, reason) {
+    switch (reason) {
+        case "backend-timeout":
+            return t("startupfailureview.BackendTimeout", {
+                defaultValue: "Backend Timeout",
+            });
+        case "backend-unreachable":
+            return t("startupfailureview.BackendUnreachable", {
+                defaultValue: "Backend Unreachable",
+            });
+        case "agent-timeout":
+            return t("startupfailureview.AgentTimeout", {
+                defaultValue: "Agent Timeout",
+            });
+        case "agent-error":
+            return t("startupfailureview.AgentError", {
+                defaultValue: "Agent Error",
+            });
+        case "asset-missing":
+            return t("startupfailureview.AssetMissing", {
+                defaultValue: "Asset Missing",
+            });
+        case "unknown":
+            return t("startupfailureview.Unknown", {
+                defaultValue: "Unknown Error",
+            });
+    }
+}
+const SCREEN_SHELL_CLASS = "relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-bg px-4 py-6 font-body text-txt sm:px-6";
+const SCREEN_CARD_CLASS = "relative z-10 w-full max-w-[720px] overflow-hidden border border-border/60 bg-card/95 shadow-[0_30px_120px_rgba(0,0,0,0.36)] backdrop-blur-xl";
+function buildStartupBugReportDraft(reasonLabel, error) {
+    const logs = [
+        `Reason: ${error.reason}`,
+        `Phase: ${error.phase}`,
+        typeof error.status === "number" ? `Status: ${error.status}` : null,
+        error.path ? `Path: ${error.path}` : null,
+        error.detail ? `Detail: ${error.detail}` : null,
+    ]
+        .filter(Boolean)
+        .join("\n");
+    return {
+        description: `${reasonLabel}: ${error.message}`.slice(0, 80),
+        stepsToReproduce: "1. Launch the desktop app.\n2. Wait for startup to fail.\n3. Observe the startup failure screen.",
+        expectedBehavior: "The app should finish startup and show the main shell.",
+        actualBehavior: error.message,
+        logs,
+    };
+}
+function normalizeReportUrl(url) {
+    if (!url)
+        return null;
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === "https:" ? parsed.toString() : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function StartupFailureView({ error, onRetry, }) {
+    const { t } = useApp();
+    const branding = useBranding();
+    const bugReport = useOptionalBugReport();
+    const [reportState, setReportState] = useState("idle");
+    const [reportMessage, setReportMessage] = useState(null);
+    const isBackendUnreachable = error.reason === "backend-unreachable";
+    const reasonLabel = startupReasonLabel(t, error.reason);
+    const startupDraft = buildStartupBugReportDraft(reasonLabel, error);
+    async function handleShareReport() {
+        setReportState("submitting");
+        setReportMessage(null);
+        try {
+            const info = await client.checkBugReportInfo();
+            const result = await client.submitBugReport({
+                category: "startup-failure",
+                description: `${branding.appName} startup failed: ${reasonLabel}`,
+                stepsToReproduce: `1. Launch ${branding.appName}\n2. Wait for startup to complete\n3. Observe the startup failure screen`,
+                expectedBehavior: `${branding.appName} should finish startup successfully.`,
+                actualBehavior: error.message,
+                environment: info.platform === "darwin"
+                    ? "macOS"
+                    : info.platform === "win32"
+                        ? "Windows"
+                        : info.platform === "linux"
+                            ? "Linux"
+                            : info.platform || "Unknown",
+                nodeVersion: info.nodeVersion,
+                logs: [
+                    `reason=${error.reason}`,
+                    `phase=${error.phase}`,
+                    error.status ? `status=${error.status}` : null,
+                    error.path ? `path=${error.path}` : null,
+                    error.detail ? `detail=${error.detail}` : null,
+                ]
+                    .filter(Boolean)
+                    .join("\n"),
+                startup: {
+                    reason: error.reason,
+                    phase: error.phase,
+                    message: error.message,
+                    detail: error.detail,
+                    status: error.status,
+                    path: error.path,
+                },
+            });
+            const safeResultUrl = normalizeReportUrl(result.url);
+            if (safeResultUrl) {
+                setReportState("success");
+                setReportMessage(`Report shared: ${safeResultUrl}`);
+                return;
+            }
+            if (result.accepted) {
+                setReportState("success");
+                setReportMessage("Diagnostic report shared successfully.");
+                return;
+            }
+            if (result.fallback) {
+                setReportState("error");
+                setReportMessage(bugReport
+                    ? "Automatic sharing is unavailable. Use Report Bug to review and submit it manually."
+                    : "Automatic sharing is unavailable on this screen.");
+                return;
+            }
+            setReportState("error");
+            setReportMessage("Failed to share diagnostic report.");
+        }
+        catch (submitError) {
+            setReportState("error");
+            setReportMessage(submitError instanceof Error
+                ? submitError.message
+                : "Failed to share diagnostic report.");
+        }
+    }
+    return (_jsxs("div", { className: SCREEN_SHELL_CLASS, children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(220,38,38,0.1),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.02),transparent_42%)]" }), _jsxs(Card, { className: SCREEN_CARD_CLASS, children: [_jsx(CardHeader, { className: "bg-danger/5 pb-6 pt-6", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(StatusBadge, { label: reasonLabel, variant: "danger", withDot: true, className: "self-start" }), _jsx("div", { className: "space-y-2", children: _jsxs("h1", { className: "text-xl font-semibold leading-tight text-danger", children: [t("startupfailureview.StartupFailed"), " ", reasonLabel] }) }), isBackendUnreachable ? null : null] }) }), _jsxs(CardContent, { className: "flex flex-col gap-5 pt-6", children: [reportMessage ? (_jsx(Banner, { variant: reportState === "success" ? "info" : "error", className: "rounded-xl text-xs", children: reportMessage })) : null, error.detail ? (_jsxs("section", { className: "space-y-2 rounded-2xl border border-border/50 bg-bg/35 p-4 shadow-sm", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.08em] text-muted", children: t("startupfailureview.Details", {
+                                            defaultValue: "Details",
+                                        }) }), _jsx("pre", { className: "max-h-60 overflow-auto rounded-xl border border-border bg-bg-muted p-3 text-xs leading-relaxed text-muted whitespace-pre-wrap break-words", children: error.detail })] })) : (_jsx(CardDescription, { className: "max-w-[56ch] leading-relaxed", children: reasonLabel })), _jsxs("div", { className: "flex flex-col gap-3 pt-4 sm:flex-row sm:items-center", children: [_jsx(Button, { variant: "default", size: "lg", onClick: onRetry, className: "w-full sm:w-auto sm:min-w-[11rem]", children: t("startupfailureview.RetryStartup") }), bugReport ? (_jsx(Button, { variant: "outline", size: "lg", onClick: () => bugReport.open(startupDraft), className: "w-full sm:w-auto sm:min-w-[10rem]", children: t("bugreportmodal.ReportABug") })) : null, _jsx(Button, { variant: "outline", size: "lg", onClick: () => {
+                                            void handleShareReport();
+                                        }, disabled: reportState === "submitting", className: "w-full sm:w-auto sm:min-w-[12rem]", children: reportState === "submitting"
+                                            ? "Sharing report..."
+                                            : "Share diagnostic report" }), isBackendUnreachable ? (_jsx(Button, { variant: "outline", size: "lg", asChild: true, className: "w-full sm:w-auto sm:min-w-[10rem]", children: _jsx("a", { href: branding.appUrl, target: "_blank", rel: "noreferrer", children: t("startupfailureview.OpenApp") }) })) : null] })] })] })] }));
+}

package/packages/app-core/src/components/shell/StartupShell.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+export declare function StartupShell(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=StartupShell.d.ts.map

package/packages/app-core/src/components/shell/StartupShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartupShell.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/shell/StartupShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAwCH,wBAAgB,YAAY,mDAuJ3B"}

package/packages/app-core/src/components/shell/StartupShell.js

@@ -0,0 +1,139 @@
+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 { useEffect, useRef } from "react";
+import { client } from "../../api";
+import { useApp } from "../../state";
+import { resolveAppAssetUrl } from "../../utils";
+import { OnboardingWizard } from "../onboarding/OnboardingWizard";
+import { PairingView } from "./PairingView";
+import { StartupFailureView } from "./StartupFailureView";
+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";
+    }
+}
+export function StartupShell() {
+    const { startupCoordinator, startupError, retryStartup, 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;
+    // ── 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
+    // (OnboardingWizard triggers many state updates), 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(() => {
+        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 || !status.cloudProvisioned) {
+                return;
+            }
+            console.log("[eliza][startup] Cloud-provisioned container detected at onboarding — skipping wizard");
+            setState("onboardingComplete", true);
+            coordinatorDispatchRef.current({ type: "ONBOARDING_COMPLETE" });
+        })
+            .catch(() => {
+            cloudSkipProbeStartedRef.current = false;
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [phase, setState]);
+    // ── Auto-continue splash ──────────────────────────────────────
+    // The deployment chooser now lives inside OnboardingWizard (DeploymentStep).
+    // The splash phase becomes a pure loading screen that auto-advances.
+    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 — delegate
+    if (phase === "onboarding-required") {
+        return _jsx(OnboardingWizard, {});
+    }
+    // Ready — let the app through
+    if (phase === "ready") {
+        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.jpg"), 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)) })] }) })] }));
+}

package/packages/app-core/src/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/packages/app-core/src/components/shell/SystemWarningBanner.d.ts.map

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

package/packages/app-core/src/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";
+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", 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/packages/app-core/src/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/packages/app-core/src/components/stream/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/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"}