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

package/App.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Root App component — routing shell.
+ */
+import "./components/chat/chat-source-registration";
+export declare function App(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=App.d.ts.map

package/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../src/App.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAcH,OAAO,4CAA4C,CAAC;AA0nBpD,wBAAgB,GAAG,4CAipBlB"}

package/App.js

@@ -0,0 +1,593 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Root App component — routing shell.
+ */
+import { Keyboard } from "@capacitor/keyboard";
+import { ArrowDownLeft, ArrowLeftRight, Layers3, MessagesSquare, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, } from "lucide-react";
+import "./components/chat/chat-source-registration.js";
+import { Button, ErrorBoundary } from "@elizaos/ui";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState, } from "react";
+import { subscribeDesktopBridgeEvent } from "./bridge/electrobun-rpc.js";
+import { GameViewOverlay } from "./components/apps/GameViewOverlay.js";
+import { getOverlayApp } from "./components/apps/overlay-app-registry.js";
+import { LoginView } from "./components/auth/LoginView.js";
+import { SaveCommandModal } from "./components/chat/SaveCommandModal.js";
+import { TasksEventsPanel } from "./components/chat/TasksEventsPanel.js";
+import { DeferredSetupChecklist } from "./components/cloud/FlaminaGuide.js";
+import { ConversationsSidebar } from "./components/conversations/ConversationsSidebar.js";
+import { CustomActionEditor } from "./components/custom-actions/CustomActionEditor.js";
+import { CustomActionsPanel } from "./components/custom-actions/CustomActionsPanel.js";
+import { ChatView } from "./components/pages/ChatView.js";
+import { SecretsManagerModalRoot } from "./components/settings/SecretsManagerSection.js";
+import { BugReportModal } from "./components/shell/BugReportModal.js";
+import { ConnectionFailedBanner } from "./components/shell/ConnectionFailedBanner.js";
+import { ConnectionLostOverlay } from "./components/shell/ConnectionLostOverlay.js";
+import { Header } from "./components/shell/Header.js";
+import { ShellOverlays } from "./components/shell/ShellOverlays.js";
+import { StartupFailureView } from "./components/shell/StartupFailureView.js";
+import { StartupShell } from "./components/shell/StartupShell.js";
+import { SystemWarningBanner } from "./components/shell/SystemWarningBanner.js";
+import { AppWorkspaceChrome, } from "./components/workspace/AppWorkspaceChrome.js";
+import { useBootConfig } from "./config/boot-config-react.js";
+import { BugReportProvider, useBugReportState, useContextMenu, useStreamPopoutNavigation, } from "./hooks/index.js";
+import { useActivityEvents } from "./hooks/useActivityEvents.js";
+import { useAuthStatus } from "./hooks/useAuthStatus.js";
+import { useSecretsManagerShortcut } from "./hooks/useSecretsManagerShortcut.js";
+import { APPS_ENABLED, isAndroidPhoneSurfaceEnabled, isAppsToolTab, } from "./navigation/index.js";
+import { isIOS, isNative } from "./platform/init.js";
+import { useApp } from "./state/index.js";
+const CHAT_MOBILE_BREAKPOINT_PX = 820;
+const MOBILE_NAV_PADDING_CLASS = "pb-[calc(var(--eliza-mobile-nav-offset,0px)+var(--safe-area-bottom,0px))]";
+const WALLET_CHAT_PREFILL_EVENT = "eliza:chat:prefill";
+function lazyNamedView(load, exportName) {
+    return lazy(async () => {
+        const module = await load();
+        const component = module[exportName];
+        if (typeof component !== "function") {
+            throw new Error(`Missing component export: ${String(exportName)}`);
+        }
+        return {
+            default: component,
+        };
+    });
+}
+import { fetchWithCsrf } from "./api/csrf-client.js";
+import { listAppShellPages, } from "./app-shell-components.js";
+// Static imports for views that AppWindowRenderer (and DetachedShellRoot)
+// also import statically. WHY not lazy here: a `lazy()` for a module that
+// any other importer pulls eagerly is folded back into the main chunk by
+// Rollup with a warning, since the dynamic boundary can't actually defer
+// load. Going all-static makes the load path honest. If you want true
+// route-level splitting back, lift `lazy()` to a single owning call site.
+import { CharacterEditor } from "./components/character/CharacterEditor.js";
+import { DatabasePageView } from "./components/pages/DatabasePageView.js";
+import { LogsView } from "./components/pages/LogsView.js";
+import { MemoryViewerView } from "./components/pages/MemoryViewerView.js";
+import { PluginsPageView } from "./components/pages/PluginsPageView.js";
+import { RelationshipsView } from "./components/pages/RelationshipsView.js";
+import { RuntimeView } from "./components/pages/RuntimeView.js";
+import { SkillsView } from "./components/pages/SkillsView.js";
+import { TasksPageView } from "./components/pages/TasksPageView.js";
+import { TrajectoriesView } from "./components/pages/TrajectoriesView.js";
+import { FineTuningView } from "./components/training/injected.js";
+import { useIsDeveloperMode } from "./state/useDeveloperMode.js";
+// True lazy boundaries: these views are only imported here, so Rollup can
+// honour the split into separate chunks.
+const AppsPageView = lazyNamedView(() => import("./components/pages/AppsPageView.js"), "AppsPageView");
+const AutomationsFeed = lazyNamedView(() => import("./components/pages/AutomationsFeed.js"), "AutomationsFeed");
+const BrowserWorkspaceView = lazyNamedView(() => import("./components/pages/BrowserWorkspaceView.js"), "BrowserWorkspaceView");
+const ConnectorsPageView = lazyNamedView(() => import("./components/pages/ConnectorsPageView.js"), "ConnectorsPageView");
+const ContactsPageView = lazyNamedView(() => import("./components/pages/ElizaOsAppsView.js"), "ContactsPageView");
+const DesktopWorkspaceSection = lazyNamedView(() => import("./components/settings/DesktopWorkspaceSection.js"), "DesktopWorkspaceSection");
+const MessagesPageView = lazyNamedView(() => import("./components/pages/ElizaOsAppsView.js"), "MessagesPageView");
+const PhonePageView = lazyNamedView(() => import("./components/pages/ElizaOsAppsView.js"), "PhonePageView");
+const SettingsView = lazyNamedView(() => import("./components/pages/SettingsView.js"), "SettingsView");
+const StreamView = lazyNamedView(() => import("./components/pages/StreamView.js"), "StreamView");
+function LazyViewBoundary({ children }) {
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "flex flex-1 min-h-0 min-w-0 items-center justify-center text-sm text-muted", children: "Loading\u2026" }), children: children }));
+}
+function prefillWalletChat(text) {
+    if (typeof window === "undefined")
+        return;
+    window.dispatchEvent(new CustomEvent(WALLET_CHAT_PREFILL_EVENT, {
+        detail: { text, select: true },
+    }));
+}
+function WalletChatGuideBody() {
+    const items = [
+        {
+            icon: ArrowLeftRight,
+            label: "Swap, bridge, send, or receive",
+        },
+        {
+            icon: Layers3,
+            label: "Inspect tokens, NFTs, LPs, and activity",
+        },
+        {
+            icon: MessagesSquare,
+            label: "Ask how the agent can use this wallet",
+        },
+    ];
+    return (_jsx("div", { className: "grid gap-2", children: items.map((item) => (_jsxs("div", { className: "flex items-center gap-2 text-xs-tight text-muted", children: [_jsx(item.icon, { className: "h-3.5 w-3.5 shrink-0 text-accent" }), _jsx("span", { children: item.label })] }, item.label))) }));
+}
+function WalletChatGuideActions() {
+    const actions = [
+        {
+            label: "Swap",
+            prompt: "Prepare a wallet swap. Ask me for source token, destination token, amount, slippage, and route before any transaction.",
+            icon: ArrowLeftRight,
+        },
+        {
+            label: "Bridge",
+            prompt: "Prepare a bridge. Ask me for token, amount, destination address, destination network requirements, and route before any transaction.",
+            icon: Layers3,
+        },
+        {
+            label: "Receive",
+            prompt: "Show the EVM and Solana receive addresses available in this wallet and ask which address I want to use.",
+            icon: ArrowDownLeft,
+        },
+    ];
+    return (_jsx(_Fragment, { children: actions.map((action) => (_jsxs(Button, { variant: "outline", size: "sm", className: "rounded-full", onClick: () => prefillWalletChat(action.prompt), children: [_jsx(action.icon, { className: "mr-1.5 h-3.5 w-3.5" }), action.label] }, action.label))) }));
+}
+function MobileChatSurfaceButton({ icon: Icon, label, onClick, surface, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, title: label, "data-testid": `chat-mobile-surface-${surface}`, onClick: onClick, className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-border/40 bg-card/80 text-muted shadow-sm backdrop-blur transition-colors hover:text-txt", children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }) }));
+}
+function buildWalletPageScopedChatPaneProps() {
+    return {
+        persistentIntro: true,
+        placeholderOverride: "Ask about how the agent can use a wallet",
+        introOverride: {
+            title: "Wallet agent",
+            body: _jsx(WalletChatGuideBody, {}),
+            actions: _jsx(WalletChatGuideActions, {}),
+        },
+    };
+}
+/** Check if we're in pop-out mode (StreamView only, no chrome). */
+function useIsPopout() {
+    const [popout] = useState(() => {
+        if (typeof window === "undefined")
+            return false;
+        const params = new URLSearchParams(window.location.search || window.location.hash.split("?")[1] || "");
+        return params.has("popout") && params.get("popout") !== "false";
+    });
+    return popout;
+}
+function TabScrollView({ children, className = "", chat, chatScope, pageScopedChatPaneProps, }) {
+    return (_jsx(AppWorkspaceChrome, { testId: "tab-scroll-view", chat: chat, chatScope: chat ? undefined : chatScope, pageScopedChatPaneProps: chat ? undefined : pageScopedChatPaneProps, main: _jsx("div", { "data-shell-scroll-region": "true", className: `flex-1 min-h-0 min-w-0 w-full overflow-y-auto ${className}`, children: children }) }));
+}
+function TabContentView({ children, chatScope, chatDisabled = false, }) {
+    const { activeGameRunId, appsSubTab } = useApp();
+    const gameOwnsChat = chatScope === "page-apps" &&
+        appsSubTab === "games" &&
+        activeGameRunId.trim().length > 0;
+    return (_jsx(AppWorkspaceChrome, { testId: "tab-content-view", chatScope: chatScope, chatDisabled: chatDisabled || gameOwnsChat, main: _jsx("div", { className: "flex flex-col flex-1 min-h-0 min-w-0 w-full overflow-hidden", children: children }) }));
+}
+/**
+ * Resolve a tab id against the dynamic registry: first the in-process
+ * `registerAppShellPage` registrations, then any loaded plugin's
+ * `app.navTabs` declaration. Returns `null` when no plugin claims the tab.
+ */
+function useResolvedDynamicPage(tab) {
+    const { plugins } = useApp();
+    return useMemo(() => {
+        const registrations = listAppShellPages();
+        const registered = registrations.find((entry) => entry.id === tab);
+        if (registered) {
+            return {
+                id: registered.id,
+                pluginId: registered.pluginId,
+                developerOnly: registered.developerOnly === true,
+                registration: registered,
+            };
+        }
+        for (const plugin of plugins) {
+            const navTabs = plugin.app?.navTabs;
+            if (!navTabs?.length)
+                continue;
+            for (const navTab of navTabs) {
+                if (navTab.id !== tab)
+                    continue;
+                const reg = registrations.find((entry) => entry.id === navTab.id && entry.pluginId === plugin.id);
+                return {
+                    id: navTab.id,
+                    pluginId: plugin.id,
+                    developerOnly: plugin.app?.developerOnly === true || navTab.developerOnly === true,
+                    registration: reg,
+                    componentExport: navTab.componentExport,
+                };
+            }
+        }
+        return null;
+    }, [plugins, tab]);
+}
+/**
+ * Render a dynamically-resolved plugin page. Honors:
+ *   1. An in-process registration (`registerAppShellPage`) — preferred.
+ *   2. A `componentExport` import-spec like `"@elizaos/app-wallet#InventoryView"`,
+ *      loaded with dynamic `import()` and rendered via Suspense.
+ *
+ * Plugins that declare a `componentExport` without a matching
+ * registration get a small loading placeholder until the import resolves.
+ * (Until a real dynamic-import boundary is plumbed for these strings,
+ * this is a documented placeholder; the plugin can also self-register.)
+ */
+function DynamicPluginPage({ resolved }) {
+    if (resolved.registration) {
+        const Component = resolved.registration.Component;
+        return _jsx(Component, {});
+    }
+    // No bundled registration — display a lightweight loading placeholder
+    // so the shell stays responsive. Plugins that ship bundled components
+    // should call `registerAppShellPage` at boot to avoid this path.
+    return (_jsxs("div", { className: "flex flex-1 min-h-0 min-w-0 items-center justify-center text-sm text-muted", children: ["Loading ", resolved.id, "\u2026"] }));
+}
+function WalletInventoryPage() {
+    const registration = listAppShellPages().find((entry) => entry.id === "wallet.inventory" || entry.path === "/inventory");
+    if (!registration) {
+        return (_jsx("div", { className: "flex flex-1 min-h-0 min-w-0 items-center justify-center text-sm text-muted", children: "Wallet is not registered in this build." }));
+    }
+    const Component = registration.Component;
+    return _jsx(Component, {});
+}
+function ViewRouter({ onCharacterHeaderActionsChange, }) {
+    const { tab } = useApp();
+    const { lifeOpsPageView: LifeOpsPageView } = useBootConfig();
+    const androidPhoneSurfaceEnabled = isAndroidPhoneSurfaceEnabled();
+    const dynamicPage = useResolvedDynamicPage(tab);
+    const developerModeEnabled = useIsDeveloperMode();
+    const view = (() => {
+        if (dynamicPage && (developerModeEnabled || !dynamicPage.developerOnly)) {
+            return (_jsx(TabContentView, { children: _jsx(DynamicPluginPage, { resolved: dynamicPage }) }));
+        }
+        switch (tab) {
+            case "chat":
+                return _jsx(ChatView, {});
+            case "phone":
+                return androidPhoneSurfaceEnabled ? (_jsx(TabContentView, { chatScope: "page-phone", children: _jsx(PhonePageView, {}) })) : (_jsx(ChatView, {}));
+            case "messages":
+                return androidPhoneSurfaceEnabled ? (_jsx(TabContentView, { chatScope: "page-phone", children: _jsx(MessagesPageView, {}) })) : (_jsx(ChatView, {}));
+            case "contacts":
+                return androidPhoneSurfaceEnabled ? (_jsx(TabContentView, { chatScope: "page-phone", children: _jsx(ContactsPageView, {}) })) : (_jsx(ChatView, {}));
+            case "lifeops":
+                // LifeOpsPageView owns its own AppWorkspaceChrome (nav rail + main
+                // + right chat), so don't double-wrap.
+                return LifeOpsPageView ? _jsx(LifeOpsPageView, {}) : _jsx(ChatView, {});
+            case "browser":
+                // BrowserWorkspaceView owns its own AppWorkspaceChrome, so don't
+                // double-wrap.
+                return _jsx(BrowserWorkspaceView, {});
+            case "companion":
+                // Companion is now an app — redirect /companion URL to chat
+                return _jsx(ChatView, {});
+            case "stream":
+                return _jsx(StreamView, {});
+            case "apps":
+                // Apps disabled in production builds; fall through to chat
+                return APPS_ENABLED ? (_jsx(TabContentView, { chatScope: "page-apps", children: _jsx(AppsPageView, {}) })) : (_jsx(ChatView, {}));
+            case "tasks":
+                return (_jsx(TabContentView, { children: _jsx(TasksPageView, {}) }));
+            case "character":
+            case "character-select":
+            case "documents":
+                return (_jsx(TabContentView, { chatScope: "page-character", children: _jsx(CharacterEditor, { onHeaderActionsChange: onCharacterHeaderActionsChange }) }));
+            case "inventory":
+                return (_jsx(TabScrollView, { chatScope: "page-wallet", pageScopedChatPaneProps: buildWalletPageScopedChatPaneProps(), children: _jsx(WalletInventoryPage, {}) }));
+            case "connectors":
+                return (_jsx(TabContentView, { children: _jsx(ConnectorsPageView, { connectorDesktopPlacement: "right" }) }));
+            case "automations":
+            case "triggers":
+                return _jsx(AutomationsFeed, {});
+            case "voice":
+                return (_jsx(TabContentView, { children: _jsx(SettingsView, { initialSection: "identity" }, "settings-identity") }));
+            case "settings":
+                return (_jsx(TabContentView, { chatDisabled: true, children: _jsx(SettingsView, {}, "settings-root") }));
+            case "plugins":
+                return (_jsx(TabContentView, { children: _jsx(PluginsPageView, {}) }));
+            case "skills":
+                return (_jsx(TabContentView, { children: _jsx(SkillsView, {}) }));
+            case "trajectories":
+                return (_jsx(TabContentView, { children: _jsx(TrajectoriesView, {}) }));
+            case "relationships":
+                return (_jsx(TabContentView, { children: _jsx(RelationshipsView, {}) }));
+            case "memories":
+                return (_jsx(TabContentView, { children: _jsx(MemoryViewerView, {}) }));
+            case "runtime":
+                return (_jsx(TabContentView, { children: _jsx(RuntimeView, {}) }));
+            case "database":
+                return (_jsx(TabContentView, { children: _jsx(DatabasePageView, {}) }));
+            case "logs":
+                return (_jsx(TabContentView, { children: _jsx(LogsView, {}) }));
+            case "fine-tuning":
+            case "advanced":
+                return (_jsx(TabContentView, { children: _jsx(FineTuningView, {}) }));
+            case "desktop":
+                return (_jsx(TabContentView, { children: _jsx(DesktopWorkspaceSection, {}) }));
+            default:
+                return _jsx(ChatView, {});
+        }
+    })();
+    return (_jsx(ErrorBoundary, { children: _jsx(LazyViewBoundary, { children: view }) }));
+}
+export function App() {
+    const { startupError, startupCoordinator, onboardingComplete, retryStartup, tab, setTab, setState, actionNotice, activeOverlayApp, uiTheme, backendConnection, activeGameViewerUrl, gameOverlayEnabled, uiShellMode, t, } = useApp();
+    const { companionShell: CompanionShell } = useBootConfig();
+    const isPopout = useIsPopout();
+    // Auth gate — only active after the coordinator reaches "ready".
+    // During onboarding / pairing / startup phases the StartupShell handles
+    // its own gate (bootstrap step), so we skip the check.
+    const isCoordinatorReady = startupCoordinator.phase === "ready";
+    const { state: authState, refetch: refetchAuth } = useAuthStatus({
+        skip: !isCoordinatorReady || isPopout,
+    });
+    // Don't initialize the 3D scene while the system is still booting — this
+    // prevents VrmEngine's Three.js setup from blocking the JS thread and
+    // delaying WebSocket agent-status updates (which would freeze the loader).
+    const overlayAppActive = startupCoordinator.phase === "ready" && activeOverlayApp !== null;
+    const resolvedOverlayApp = overlayAppActive && activeOverlayApp
+        ? getOverlayApp(activeOverlayApp)
+        : undefined;
+    const contextMenu = useContextMenu();
+    useStreamPopoutNavigation(setTab);
+    useSecretsManagerShortcut();
+    useEffect(() => {
+        if (startupCoordinator.phase !== "ready")
+            return;
+        if (backendConnection?.state !== "connected")
+            return;
+        const report = () => {
+            void fetchWithCsrf("/api/apps/overlay-presence", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ appName: activeOverlayApp }),
+            }).catch(() => {
+                /* ignore */
+            });
+        };
+        report();
+        const intervalId = window.setInterval(report, 25_000);
+        return () => {
+            window.clearInterval(intervalId);
+            void fetchWithCsrf("/api/apps/overlay-presence", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ appName: null }),
+            }).catch(() => {
+                /* ignore */
+            });
+        };
+    }, [activeOverlayApp, backendConnection?.state, startupCoordinator.phase]);
+    const [customActionsPanelOpen, setCustomActionsPanelOpen] = useState(false);
+    const [customActionsEditorOpen, setCustomActionsEditorOpen] = useState(false);
+    const [settingsInitialSection, setSettingsInitialSection] = useState(null);
+    const [widgetsPanelCollapsed, setWidgetsPanelCollapsed] = useState(() => {
+        if (typeof window === "undefined")
+            return false;
+        try {
+            return (window.localStorage.getItem("elizaos:chat:widgets-collapsed") === "true");
+        }
+        catch {
+            return false;
+        }
+    });
+    const handleToggleWidgetsCollapsed = useCallback((next) => {
+        setWidgetsPanelCollapsed(next);
+        try {
+            window.localStorage.setItem("elizaos:chat:widgets-collapsed", String(next));
+        }
+        catch {
+            // localStorage unavailable in sandboxed environments — non-fatal.
+        }
+    }, []);
+    const { events: activityEvents, clearEvents: clearActivityEvents } = useActivityEvents();
+    const [editingAction, setEditingAction] = useState(null);
+    const [isChatMobileLayout, setIsChatMobileLayout] = useState(() => typeof window !== "undefined"
+        ? window.innerWidth < CHAT_MOBILE_BREAKPOINT_PX
+        : false);
+    const [mobileChatSurface, setMobileChatSurface] = useState("center");
+    const [desktopShuttingDown, setDesktopShuttingDown] = useState(false);
+    const [characterHeaderActions, setCharacterHeaderActions] = useState(null);
+    const isConnectors = tab === "connectors";
+    const isCompanionTab = tab === "companion";
+    const isChat = tab === "chat";
+    const isChatWorkspace = isChat || isConnectors;
+    const isCharacterPage = tab === "character" || tab === "character-select" || tab === "documents";
+    const isWallets = tab === "inventory";
+    const isHeartbeats = tab === "triggers" || tab === "automations";
+    const isSettingsPage = tab === "settings" || tab === "voice";
+    const isAppsToolPage = isAppsToolTab(tab);
+    const isDesktopWorkspacePage = tab === "desktop";
+    const mobileChatControls = useMemo(() => {
+        if (!isChatMobileLayout)
+            return null;
+        const leftLabel = t("conversations.chats", { defaultValue: "Chats" });
+        const rightLabel = t("taskseventspanel.Title", {
+            defaultValue: "Tasks & Events",
+        });
+        const leftOpen = mobileChatSurface === "left";
+        const rightOpen = mobileChatSurface === "right";
+        return {
+            // Left toggle: only render when nothing else is open OR it's the active one.
+            // Tapping again returns to center.
+            left: rightOpen ? null : (_jsx(MobileChatSurfaceButton, { icon: leftOpen ? PanelLeftClose : PanelLeftOpen, label: leftOpen ? `Hide ${leftLabel}` : `Show ${leftLabel}`, onClick: () => setMobileChatSurface(leftOpen ? "center" : "left"), surface: "left" })),
+            // Right toggle: only on chat tab, hidden when left is open.
+            right: isChat && !leftOpen ? (_jsx(MobileChatSurfaceButton, { icon: rightOpen ? PanelRightClose : PanelRightOpen, label: rightOpen ? `Hide ${rightLabel}` : `Show ${rightLabel}`, onClick: () => setMobileChatSurface(rightOpen ? "center" : "right"), surface: "right" })) : null,
+        };
+    }, [isChat, isChatMobileLayout, mobileChatSurface, t]);
+    // Keep hook order stable across onboarding/auth state transitions.
+    // Otherwise React can throw when onboarding completes and the main shell mounts.
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handler = () => setCustomActionsPanelOpen((v) => !v);
+        window.addEventListener("toggle-custom-actions-panel", handler);
+        return () => window.removeEventListener("toggle-custom-actions-panel", handler);
+    }, []);
+    const handleEditorSave = useCallback(() => {
+        setCustomActionsEditorOpen(false);
+        setEditingAction(null);
+    }, []);
+    const handleDeferredTaskOpen = useCallback((task) => {
+        if (task === "voice") {
+            setTab("voice");
+            return;
+        }
+        if (task === "permissions") {
+            setSettingsInitialSection("permissions");
+        }
+        else if (task === "provider") {
+            setSettingsInitialSection("ai-model");
+        }
+        else {
+            setSettingsInitialSection(null);
+        }
+        setTab("settings");
+    }, [setTab]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handleResize = () => {
+            setIsChatMobileLayout(window.innerWidth < CHAT_MOBILE_BREAKPOINT_PX);
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    useEffect(() => {
+        if (!isChatMobileLayout) {
+            setMobileChatSurface("center");
+        }
+    }, [isChatMobileLayout]);
+    useEffect(() => {
+        if (!isChatWorkspace) {
+            setMobileChatSurface("center");
+        }
+        if (!isChat && mobileChatSurface === "right") {
+            setMobileChatSurface("center");
+        }
+    }, [isChat, isChatWorkspace, mobileChatSurface]);
+    useEffect(() => {
+        if (isSettingsPage || settingsInitialSection === null) {
+            return;
+        }
+        setSettingsInitialSection(null);
+    }, [isSettingsPage, settingsInitialSection]);
+    useEffect(() => {
+        if (!isNative || !isIOS) {
+            return;
+        }
+        void Keyboard.setScroll({ isDisabled: true }).catch(() => {
+            // Ignore bridge failures so web and desktop shells keep working.
+        });
+    }, []);
+    useEffect(() => {
+        return subscribeDesktopBridgeEvent({
+            rpcMessage: "desktopShutdownStarted",
+            ipcChannel: "desktop:shutdownStarted",
+            listener: () => {
+                setDesktopShuttingDown(true);
+            },
+        });
+    }, []);
+    const bugReport = useBugReportState();
+    // Loading is handled entirely by StartupShell — no separate loader needed.
+    useEffect(() => {
+        // Safety-net watchdog: the coordinator has its own timeouts per phase, but
+        // this catches any edge case where the coordinator gets stuck in a loading
+        // phase. During "starting-runtime" the agent-wait loop has its own sliding
+        // deadline (up to 900s for embedding downloads), so we only watch the
+        // pre-runtime phases.
+        const STARTUP_TIMEOUT_MS = 300_000;
+        const coordinatorPolling = startupCoordinator.phase === "polling-backend" ||
+            startupCoordinator.phase === "restoring-session";
+        if (coordinatorPolling && !startupError) {
+            const timer = setTimeout(() => {
+                startupCoordinator.retry();
+            }, STARTUP_TIMEOUT_MS);
+            return () => clearTimeout(timer);
+        }
+    }, [startupCoordinator.phase, startupError, startupCoordinator.retry]);
+    // shellContent is memoized before early returns to satisfy the Rules of Hooks.
+    // Deps are local state/callbacks — not high-frequency AppContext fields like
+    // ptySessions/agentStatus — so CompanionSceneHost stays stable across polls.
+    const shellContent = useMemo(() => uiShellMode === "companion" && isCompanionTab && CompanionShell ? (_jsx(CompanionShell, { tab: "companion", actionNotice: actionNotice })) : isCompanionTab ? (_jsx("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg" }, "companion-shell")) : tab === "stream" ? (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, {}), _jsx("main", { className: `flex-1 min-h-0 overflow-hidden ${MOBILE_NAV_PADDING_CLASS}`, children: _jsx(LazyViewBoundary, { children: _jsx(StreamView, {}) }) })] }, "stream-shell")) : isChatWorkspace ? (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, { mobileLeft: mobileChatControls?.left, pageRightExtras: mobileChatControls?.right, tasksEventsPanelOpen: isChat && !isChatMobileLayout }), _jsxs("div", { className: "flex flex-1 min-h-0 relative", children: [!isChatMobileLayout && isChat ? (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-[5.75rem]", "data-chat-shell-composer-underlay": true })) : null, isChatMobileLayout ? (_jsx("div", { className: `flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden ${mobileChatSurface === "center" ? "px-2 pt-2" : ""}`, children: mobileChatSurface === "left" ? (_jsx(ConversationsSidebar, { mobile: true, onClose: () => setMobileChatSurface("center") }, "chat-sidebar-mobile")) : mobileChatSurface === "right" && isChat ? (_jsx(TasksEventsPanel, { open: true, events: activityEvents, clearEvents: clearActivityEvents, mobile: true })) : isChat ? (_jsxs(_Fragment, { children: [_jsx(DeferredSetupChecklist, { className: "mb-3", onOpenTask: handleDeferredTaskOpen }), _jsx(ChatView, {})] })) : (_jsx(LazyViewBoundary, { children: _jsx(ConnectorsPageView, {}) })) })) : (_jsxs(_Fragment, { children: [_jsx(ConversationsSidebar, {}, "chat-sidebar-desktop"), _jsx("div", { className: "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden", children: isChat ? (_jsxs(_Fragment, { children: [_jsx(DeferredSetupChecklist, { className: "mx-3 mb-3 mt-3 xl:mx-5", onOpenTask: handleDeferredTaskOpen }), _jsx(ChatView, {}, "chat-view-desktop")] })) : (_jsx(LazyViewBoundary, { children: _jsx(ConnectorsPageView, {}) })) }), isChat ? (_jsx(TasksEventsPanel, { open: true, events: activityEvents, clearEvents: clearActivityEvents, collapsed: widgetsPanelCollapsed, onToggleCollapsed: handleToggleWidgetsCollapsed })) : null] })), _jsx(CustomActionsPanel, { open: customActionsPanelOpen, onClose: () => setCustomActionsPanelOpen(false), onOpenEditor: (action) => {
+                            setEditingAction(action ?? null);
+                            setCustomActionsEditorOpen(true);
+                        } })] })] }, `chat-shell-${tab}`)) : isHeartbeats ? (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, {}), _jsx("div", { className: `flex flex-1 min-h-0 min-w-0 overflow-hidden ${MOBILE_NAV_PADDING_CLASS}`, children: _jsx(LazyViewBoundary, { children: _jsx(AutomationsFeed, {}, "automations-view-desktop") }) })] }, "heartbeats-shell")) : isSettingsPage ? (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, {}), _jsx(AppWorkspaceChrome, { testId: "settings-workspace", chatScope: "page-settings", chatDisabled: true, main: _jsx("div", { className: "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden", children: _jsx(LazyViewBoundary, { children: _jsx(SettingsView, { initialSection: tab === "voice"
+                                ? "identity"
+                                : tab === "connectors"
+                                    ? "connectors"
+                                    : (settingsInitialSection ?? undefined) }, tab === "voice"
+                            ? "settings-identity"
+                            : tab === "connectors"
+                                ? "settings-connectors"
+                                : "settings-root") }) }) })] }, `settings-shell-${tab}`)) : isWallets ? (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, {}), _jsx(AppWorkspaceChrome, { testId: "wallets-workspace", chatScope: "page-wallet", pageScopedChatPaneProps: buildWalletPageScopedChatPaneProps(), main: _jsx("div", { className: "flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden", children: _jsx(LazyViewBoundary, { children: _jsx(WalletInventoryPage, {}) }) }) })] }, "wallets-shell")) : isCharacterPage ? (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, { pageRightExtras: characterHeaderActions }), _jsx("div", { className: `flex flex-1 min-h-0 min-w-0 overflow-hidden ${MOBILE_NAV_PADDING_CLASS}`, children: _jsx(ViewRouter, { onCharacterHeaderActionsChange: setCharacterHeaderActions }) })] }, `character-shell-${tab}`)) : isAppsToolPage ? (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, {}), _jsx("div", { className: `flex flex-1 min-h-0 min-w-0 overflow-hidden ${MOBILE_NAV_PADDING_CLASS}`, children: _jsx(ViewRouter, {}) })] }, `apps-tool-shell-${tab}`)) : isDesktopWorkspacePage ? (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, {}), _jsx("div", { className: `flex flex-1 min-h-0 min-w-0 ${MOBILE_NAV_PADDING_CLASS}`, children: _jsx(LazyViewBoundary, { children: _jsx(DesktopWorkspaceSection, {}) }) })] }, `desktop-shell-${tab}`)) : (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg", children: [_jsx(Header, { pageRightExtras: isCharacterPage ? characterHeaderActions : null }), _jsx("main", { className: `flex flex-1 min-h-0 min-w-0 overflow-hidden ${tab === "browser" || tab === "apps"
+                    ? ""
+                    : "px-3 xl:px-5 py-4 xl:py-6"} ${tab === "browser" ? "" : MOBILE_NAV_PADDING_CLASS}`, children: _jsx(ViewRouter, { onCharacterHeaderActionsChange: setCharacterHeaderActions }) })] }, `tab-shell-${tab}`)), [
+        CompanionShell,
+        tab,
+        uiShellMode,
+        isCompanionTab,
+        actionNotice,
+        isChat,
+        isChatWorkspace,
+        isCharacterPage,
+        isHeartbeats,
+        isSettingsPage,
+        isWallets,
+        isAppsToolPage,
+        isDesktopWorkspacePage,
+        isChatMobileLayout,
+        mobileChatSurface,
+        mobileChatControls,
+        characterHeaderActions,
+        handleDeferredTaskOpen,
+        activityEvents,
+        clearActivityEvents,
+        customActionsPanelOpen,
+        handleToggleWidgetsCollapsed,
+        settingsInitialSection,
+        widgetsPanelCollapsed,
+    ]);
+    // Pop-out mode — render only StreamView, skip startup gates.
+    // Platform init is skipped in main.tsx; AppProvider hydrates WS in background.
+    if (isPopout) {
+        return (_jsx("div", { className: "flex h-[100dvh] w-full max-w-full flex-col overflow-hidden bg-bg font-body text-txt", children: _jsx(LazyViewBoundary, { children: _jsx(StreamView, {}) }) }));
+    }
+    // StartupCoordinator gate — the coordinator is the sole startup authority.
+    // Non-ready phases are handled by StartupShell (which renders the appropriate
+    // view for each coordinator phase: loading, pairing, onboarding, or error).
+    if (startupCoordinator.phase !== "ready" || !onboardingComplete) {
+        return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsx(StartupShell, {}), _jsx(BugReportModal, {})] }));
+    }
+    // Auth gate — when the coordinator is ready, check /api/auth/me.
+    // "loading" phase: wait (fall through to the coordinator's own "ready" render).
+    // "unauthenticated": render LoginView.
+    // "authenticated": proceed to the main shell.
+    // "server_unavailable": show a retryable startup failure.
+    if (isCoordinatorReady && !isPopout) {
+        if (authState.phase === "server_unavailable") {
+            return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsx(StartupFailureView, { error: {
+                            reason: "backend-unreachable",
+                            phase: "starting-backend",
+                            message: "Backend became unavailable after startup.",
+                            detail: "The auth probe could not reach /api/auth/me. If this is local development, start the local agent API with `bun run dev` or `bun run dev:desktop`, then retry.",
+                        }, onRetry: retryStartup }), _jsx(BugReportModal, {})] }));
+        }
+        if (authState.phase === "unauthenticated") {
+            return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsx(LoginView, { onLoginSuccess: refetchAuth, reason: authState.reason }), _jsx(BugReportModal, {})] }));
+        }
+        // While loading the auth state we allow the main shell to continue
+        // rendering (avoids a flash of login screen on refresh when cookies are valid).
+    }
+    // Coordinator is at "ready" — the app shell renders. No legacy onboarding
+    // overlays — the coordinator handled all of that before reaching ready.
+    return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsxs("div", { className: "flex h-[100dvh] w-full max-w-full flex-col overflow-hidden", children: [_jsx(ConnectionFailedBanner, {}), _jsx(SystemWarningBanner, {}), shellContent] }), resolvedOverlayApp && (_jsx(resolvedOverlayApp.Component, { exitToApps: () => {
+                    setState("activeOverlayApp", null);
+                    setTab("apps");
+                }, uiTheme: uiTheme === "dark" ? "dark" : "light", t: t })), activeGameViewerUrl && gameOverlayEnabled && tab !== "apps" && (_jsx(GameViewOverlay, {})), _jsx(ShellOverlays, { actionNotice: actionNotice }), _jsx(SaveCommandModal, { open: contextMenu.saveCommandModalOpen, text: contextMenu.saveCommandText, onSave: contextMenu.confirmSaveCommand, onClose: contextMenu.closeSaveCommandModal }), _jsx(SecretsManagerModalRoot, {}), _jsx(CustomActionEditor, { open: customActionsEditorOpen, action: editingAction, onSave: handleEditorSave, onClose: () => {
+                    setCustomActionsEditorOpen(false);
+                    setEditingAction(null);
+                } }), _jsx(ConnectionLostOverlay, {}), desktopShuttingDown ? (_jsx("div", { className: "fixed inset-0 z-[1000] flex items-center justify-center bg-bg/80 backdrop-blur-sm", role: "status", "aria-live": "polite", children: _jsxs("div", { className: "rounded-2xl border border-border/60 bg-card/95 px-6 py-5 text-center shadow-2xl", children: [_jsx("div", { className: "text-base font-semibold text-txt", children: "Shutting down\u2026" }), _jsx("div", { className: "mt-1 text-sm text-muted", children: "Closing services and saving state." })] }) })) : null] }));
+}