@elizaos/ui 2.0.0-beta.1 → 2.0.3-beta.2

package/dist/App.js

@@ -1,593 +0,0 @@
-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] }));
-}