@elizaos/ui 2.0.0-beta.1 → 2.0.11-beta.7

package/App.js

@@ -0,0 +1,1013 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Root App component — routing shell.
+ */
+import { X } from "lucide-react";
+import "./components/chat/chat-source-registration.js";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState, useSyncExternalStore, } from "react";
+import { createNavigateViewHandler, } from "./app-navigate-view.js";
+import { invokeDesktopBridgeRequest, subscribeDesktopBridgeEvent, } from "./bridge/electrobun-rpc.js";
+import { NAVIGATE_SETTINGS_EVENT, useSlashCommandController, } from "./chat/useSlashCommandController.js";
+import { getOverlayAppLazyComponent } from "./components/apps/AppWindowRenderer.helpers.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 { CustomActionEditor } from "./components/custom-actions/CustomActionEditor.js";
+import { CustomActionsPanel } from "./components/custom-actions/CustomActionsPanel.js";
+import { AppsPageView } from "./components/pages/AppsPageView.js";
+import { TutorialOverlay } from "./components/pages/tutorial/TutorialOverlay.js";
+import { SecretsManagerModalRoot } from "./components/settings/SecretsManagerSection.js";
+import { ActionBanner } from "./components/shell/ActionBanner.js";
+import { AssistantOverlay } from "./components/shell/AssistantOverlay.js";
+import { BugReportModal } from "./components/shell/BugReportModal.js";
+import { ChatAmbientBackground } from "./components/shell/ChatAmbientBackground.js";
+import { ChatSurface } from "./components/shell/ChatSurface.js";
+import { ConnectionFailedBanner } from "./components/shell/ConnectionFailedBanner.js";
+import { ConnectionLostOverlay } from "./components/shell/ConnectionLostOverlay.js";
+import { ContinuousChatOverlay } from "./components/shell/ContinuousChatOverlay.js";
+import { HomePill } from "./components/shell/HomePill.js";
+import { HomeScreen } from "./components/shell/HomeScreen.js";
+import { KioskViewCanvas } from "./components/shell/KioskViewCanvas.js";
+import { NotificationCenter } from "./components/shell/NotificationCenter.js";
+import { ShellControllerProvider } from "./components/shell/ShellControllerContext.js";
+import { useShellControllerContext } from "./components/shell/ShellControllerContext.hooks.js";
+import { ShellOverlays } from "./components/shell/ShellOverlays.js";
+import { StartupFailureView } from "./components/shell/StartupFailureView.js";
+import { StartupScreen } from "./components/shell/StartupScreen.js";
+import { SystemWarningBanner } from "./components/shell/SystemWarningBanner.js";
+import { useKioskViewSurfaces } from "./components/shell/useKioskViewSurfaces.js";
+import { ErrorBoundary } from "./components/ui/error-boundary.js";
+import { AppWorkspaceChrome } from "./components/workspace/AppWorkspaceChrome.js";
+import { useBootConfig } from "./config/boot-config-react.hooks.js";
+import { FOCUS_CONNECTOR_EVENT, } from "./events/index.js";
+import { CompactOnboarding } from "./first-run/CompactOnboarding.js";
+import { BugReportProvider, useBugReportState, useContextMenu } from "./hooks/index.js";
+import { useAuthStatus } from "./hooks/useAuthStatus.js";
+import { useSecretsManagerShortcut } from "./hooks/useSecretsManagerShortcut.js";
+import { APPS_ENABLED, getAppSlugFromPath, getWindowNavigationPath, isAndroidPhoneSurfaceEnabled, isAospShellEnabled, isRouteRootPath, shouldUseHashNavigation, } from "./navigation/index.js";
+import { isIOS, isNative } from "./platform/init.js";
+import { RetainedLazyComponent } from "./retained-lazy.js";
+import { useApp } from "./state/index.js";
+import { isShellPaintable } from "./state/startup-coordinator.js";
+import { VoiceSelfTestShell } from "./voice/voice-selftest/VoiceSelfTestShell.js";
+const MOBILE_NAV_PADDING_CLASS = "pb-[calc(var(--eliza-mobile-nav-offset,0px)+var(--safe-area-bottom,0px)+var(--eliza-continuous-chat-clearance,5.25rem))]";
+// Single source of truth for the lazy route-view chunk loaders. Each
+// lazyNamedView() call registers its import() thunk here so prefetch (below)
+// warms exactly the chunks that are lazy-split — no hand-synced second list to
+// drift out of sync.
+const routeViewLoaders = new Set();
+function lazyNamedView(load, exportName) {
+    routeViewLoaders.add(load);
+    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 the page registry from its standalone module, NOT the
+// `app-shell-components` barrel — that barrel statically re-exports every page
+// view, so importing through it folds all of them back into the main chunk.
+import { getAppShellPageRegistrySnapshot, listAppShellPages, subscribeAppShellPages, } from "./app-shell-registry.js";
+// CharacterEditor, DesktopTabBar, and FineTuningView stay static: they are
+// already pulled eagerly elsewhere in the app graph (main.tsx / plugin-loader /
+// boot-config), so a lazy() boundary here would only fold back into main. The
+// remaining page views are lazy-split below.
+import { CharacterEditor } from "./components/character/CharacterEditor.js";
+import { DesktopTabBar } from "./components/desktop/DesktopTabBar.js";
+import { FineTuningView } from "./components/training/injected.js";
+import { DynamicViewLoader } from "./components/views/DynamicViewLoader.js";
+import { useAvailableViews, } from "./hooks/useAvailableViews.js";
+import { useDesktopTabs } from "./hooks/useDesktopTabs.js";
+import { useIsDeveloperMode } from "./state/useDeveloperMode.js";
+const ViewCatalog = lazyNamedView(() => import("./components/pages/ViewCatalog.js"), "ViewCatalog");
+const AutomationsFeed = lazyNamedView(() => import("./components/pages/AutomationsFeed.js"), "AutomationsFeed");
+const BrowserWorkspaceView = lazyNamedView(() => import("./components/pages/BrowserWorkspaceView.js"), "BrowserWorkspaceView");
+const CameraPageView = lazyNamedView(() => import("./components/pages/CameraPageView.js"), "CameraPageView");
+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 TutorialView = lazyNamedView(() => import("./components/pages/tutorial/TutorialView.js"), "TutorialView");
+const HelpView = lazyNamedView(() => import("./components/pages/help/HelpView.js"), "HelpView");
+const StreamView = lazyNamedView(() => import("./components/pages/StreamView.js"), "StreamView");
+// Route-level page views — lazy-split out of the main chunk. Each renders
+// inside the LazyViewBoundary Suspense below, and none is imported statically
+// elsewhere in the app graph, so the dynamic boundary actually defers load.
+const DatabasePageView = lazyNamedView(() => import("./components/pages/DatabasePageView.js"), "DatabasePageView");
+const LogsView = lazyNamedView(() => import("./components/pages/LogsView.js"), "LogsView");
+const MemoryViewerView = lazyNamedView(() => import("./components/pages/MemoryViewerView.js"), "MemoryViewerView");
+const PluginsPageView = lazyNamedView(() => import("./components/pages/PluginsPageView.js"), "PluginsPageView");
+const RelationshipsView = lazyNamedView(() => import("./components/pages/RelationshipsView.js"), "RelationshipsView");
+const RuntimeView = lazyNamedView(() => import("./components/pages/RuntimeView.js"), "RuntimeView");
+const SkillsView = lazyNamedView(() => import("./components/pages/SkillsView.js"), "SkillsView");
+const TasksPageView = lazyNamedView(() => import("./components/pages/TasksPageView.js"), "TasksPageView");
+const TrajectoriesView = lazyNamedView(() => import("./components/pages/TrajectoriesView.js"), "TrajectoriesView");
+const ROUTE_PREFETCH_MAX_CHUNKS = 4;
+function shouldWarmRouteViewChunks() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return false;
+    }
+    if (document.visibilityState === "hidden")
+        return false;
+    const navigatorWithHints = navigator;
+    if (navigatorWithHints.connection?.saveData)
+        return false;
+    if (navigatorWithHints.connection?.effectiveType === "slow-2g" ||
+        navigatorWithHints.connection?.effectiveType === "2g") {
+        return false;
+    }
+    if (typeof navigatorWithHints.deviceMemory === "number" &&
+        navigatorWithHints.deviceMemory <= 4) {
+        return false;
+    }
+    return true;
+}
+// Once the shell is interactive, warm a small number of lazy route chunks
+// during idle time on capable devices. Full views still stay lazy by default:
+// this is a bounded best-effort path, not an eager import of the whole shell.
+function scheduleRouteViewChunkPrefetch() {
+    if (!shouldWarmRouteViewChunks())
+        return () => { };
+    const loaders = [...routeViewLoaders].slice(0, ROUTE_PREFETCH_MAX_CHUNKS);
+    if (loaders.length === 0)
+        return () => { };
+    let cancelled = false;
+    let scheduledId = null;
+    const w = window;
+    const scheduleNext = () => {
+        if (cancelled || loaders.length === 0)
+            return;
+        const run = () => {
+            scheduledId = null;
+            if (cancelled)
+                return;
+            const load = loaders.shift();
+            if (load)
+                void load().catch(() => { });
+            scheduleNext();
+        };
+        scheduledId =
+            w.requestIdleCallback?.(run, { timeout: 2_000 }) ??
+                window.setTimeout(run, 750);
+    };
+    scheduleNext();
+    return () => {
+        cancelled = true;
+        if (scheduledId === null)
+            return;
+        if (w.cancelIdleCallback) {
+            w.cancelIdleCallback(scheduledId);
+        }
+        else {
+            window.clearTimeout(scheduledId);
+        }
+    };
+}
+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 }));
+}
+/** 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 readShellMode() {
+    if (typeof window === "undefined")
+        return "full";
+    const params = new URLSearchParams(window.location.search || window.location.hash.split("?")[1] || "");
+    const raw = params.get("shellMode") ??
+        params.get("shell-mode") ??
+        window.ELIZAOS_SHELL_MODE ??
+        "";
+    if (raw === "chat-overlay")
+        return "chat-overlay";
+    if (raw === "onboarding-overlay")
+        return "onboarding-overlay";
+    if (raw === "voice-selftest")
+        return "voice-selftest";
+    if (raw === "launcher")
+        return "launcher";
+    if (raw === "kiosk")
+        return "kiosk";
+    return "full";
+}
+function useShellMode() {
+    const [mode] = useState(readShellMode);
+    return mode;
+}
+/**
+ * Floating, transparent assistant overlay surface for the OS chat-overlay
+ * window. Renders ONLY the waveform + pill + chat/voice overlay — no app
+ * chrome — over a transparent background.
+ */
+function ChatOverlayShell() {
+    return (_jsx("div", { "data-testid": "chat-overlay-shell", className: "pointer-events-none fixed inset-0 flex items-end justify-center bg-transparent", children: _jsx(ShellFoundationMount, {}) }));
+}
+/**
+ * First-run onboarding overlay surface. Renders ONLY the floating
+ * CompactOnboarding card over a transparent, click-through background — no app
+ * chrome. The native overlay window is `transparent` + `passthrough`, so the
+ * empty (pointer-events-none) region lets clicks fall through to the desktop
+ * behind while the card stays interactive.
+ */
+function OnboardingOverlayShell() {
+    return (_jsx("div", { "data-testid": "onboarding-overlay-shell", className: "pointer-events-none fixed inset-0 bg-transparent", children: _jsx(CompactOnboarding, {}) }));
+}
+/**
+ * Locked appliance shell for the Linux OS kiosk window. The Electrobun bundle
+ * runs as the entire GUI: a single fullscreen, frameless, non-closable
+ * toplevel. This surface IS the view manager — agent-spawned dynamic views
+ * mount in-canvas (see `KioskViewCanvas`) and an always-visible bottom chat
+ * pill talks to the local OS agent. No header / tabs / desktop chrome.
+ */
+function KioskShell() {
+    const surfaces = useKioskViewSurfaces();
+    return (_jsxs("div", { "data-testid": "kiosk-shell", className: "fixed inset-0 flex flex-col overflow-hidden bg-bg", children: [_jsx("div", { className: "min-h-0 flex-1", children: _jsx(KioskViewCanvas, { surfaces: surfaces }) }), _jsx(ShellFoundationMount, {})] }));
+}
+function TabScrollView({ children, className = "", }) {
+    return (_jsx(AppWorkspaceChrome, { testId: "tab-scroll-view", chatDisabled: true, main: _jsx("div", { "data-shell-scroll-region": "true", className: `eliza-continuous-chat-scroll flex-1 min-h-0 min-w-0 w-full overflow-y-auto pb-[var(--eliza-continuous-chat-clearance,5.25rem)] ${className}`, children: children }) }));
+}
+function TabContentView({ children }) {
+    return (_jsx(AppWorkspaceChrome, { testId: "tab-content-view", chatDisabled: true, main: _jsx("div", { "data-shell-content-region": "true", className: "eliza-continuous-chat-scroll flex flex-col flex-1 min-h-0 min-w-0 w-full overflow-hidden pb-[var(--eliza-continuous-chat-clearance,5.25rem)]", children: children }) }));
+}
+function useAppShellPageRegistryVersion() {
+    return useSyncExternalStore(subscribeAppShellPages, getAppShellPageRegistrySnapshot, getAppShellPageRegistrySnapshot);
+}
+/**
+ * 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();
+    const registryVersion = useAppShellPageRegistryVersion();
+    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, registryVersion, tab]);
+}
+/**
+ * Render a dynamically-resolved plugin page. Honors:
+ *   1. An in-process registration (`registerAppShellPage`) — preferred.
+ *   2. A `componentExport` import-spec like `"@elizaos/plugin-wallet-ui#InventoryView"`,
+ *      loaded with dynamic `import()` and rendered via Suspense.
+ *
+ * Plugins that declare a `componentExport` without a matching registration get
+ * a small loading fallback until the import resolves. Plugins can avoid this
+ * path by self-registering with `registerAppShellPage` at boot.
+ */
+function RegisteredAppShellPage({ registration, }) {
+    if (registration.Component) {
+        const Component = registration.Component;
+        return _jsx(Component, {});
+    }
+    if (registration.loader) {
+        return (_jsx(RetainedLazyComponent, { loader: registration.loader, componentProps: {}, fallback: _jsxs("div", { className: "flex flex-1 min-h-0 min-w-0 items-center justify-center text-sm text-muted", children: ["Loading ", registration.label, "\u2026"] }), onError: (error) => (_jsxs("div", { className: "flex flex-1 min-h-0 min-w-0 items-center justify-center px-4 text-center text-sm text-destructive", children: ["Failed to load ", registration.label, ": ", error.message] })) }));
+    }
+    return (_jsxs("div", { className: "flex flex-1 min-h-0 min-w-0 items-center justify-center text-sm text-muted", children: [registration.label, " is not available in this build."] }));
+}
+function DynamicPluginPage({ resolved }) {
+    if (resolved.registration) {
+        return _jsx(RegisteredAppShellPage, { registration: resolved.registration });
+    }
+    // No bundled registration — display a lightweight loading fallback
+    // 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." }));
+    }
+    return _jsx(RegisteredAppShellPage, { registration: registration });
+}
+function visibleDynamicPage(page, developerModeEnabled) {
+    return Boolean(page && (developerModeEnabled || !page.developerOnly));
+}
+/**
+ * Whether the active app-shell page wants to render edge-to-edge with no host
+ * top-bar/chrome. Looks the active tab up in the runtime page registry and
+ * reads its `fullBleed` flag — backward-compatible: pages that don't set it
+ * keep the normal chrome.
+ */
+function useTabIsFullBleed(tab) {
+    const registryVersion = useAppShellPageRegistryVersion();
+    return useMemo(() => listAppShellPages().some((entry) => entry.id === tab && entry.fullBleed === true), [registryVersion, tab]);
+}
+function trimmedNavigationPath(navigationPath) {
+    return navigationPath.length > 1 && navigationPath.endsWith("/")
+        ? navigationPath.slice(0, -1)
+        : navigationPath;
+}
+function remoteViewAvailable(view) {
+    return Boolean(view.bundleUrl && view.available !== false);
+}
+function remoteViewMatchesTab(view, tab, appSlug) {
+    return Boolean(view.id === tab ||
+        view.path === `/${tab}` ||
+        view.path === `/apps/${tab}` ||
+        (appSlug !== null &&
+            (view.id === appSlug ||
+                view.path === `/apps/${appSlug}` ||
+                view.path === `/${appSlug}`)));
+}
+// These paths are owned by the built-in shell and must never be handed off to
+// a remote bundle, even if the view registry returns a bundleUrl for them.
+const SHELL_RESERVED_PATHS = new Set([
+    "/views",
+    "/apps",
+    "/apps/plugins",
+    "/apps/skills",
+    "/apps/trajectories",
+    "/apps/relationships",
+    "/apps/memories",
+    "/apps/runtime",
+    "/apps/database",
+    "/apps/logs",
+    "/apps/tasks",
+]);
+function findRemoteViewForRoute(views, navigationPath, tab, appSlug) {
+    const normalizedPath = trimmedNavigationPath(navigationPath);
+    if (SHELL_RESERVED_PATHS.has(normalizedPath))
+        return undefined;
+    return (views.find((view) => remoteViewAvailable(view) && view.path === normalizedPath) ??
+        views.find((view) => remoteViewAvailable(view) && remoteViewMatchesTab(view, tab, appSlug)));
+}
+function renderRemoteView(view) {
+    if (!view.bundleUrl)
+        return null;
+    return (_jsx(TabContentView, { children: _jsx(DynamicViewLoader, { bundleUrl: view.bundleUrl, componentExport: view.componentExport, viewId: view.id, viewType: view.viewType }) }));
+}
+function viewLayoutLabel(layout) {
+    return layout.mode === "split" ? "Split view" : "Tiled views";
+}
+function splitLayoutIsStacked(layout) {
+    const hint = `${layout.layout ?? ""} ${layout.placement ?? ""}`.toLowerCase();
+    return /\b(vertical|rows?|top|bottom|above|below)\b/.test(hint);
+}
+function viewLayoutGridClass(layout, count) {
+    if (layout.mode === "split") {
+        return splitLayoutIsStacked(layout)
+            ? "grid-cols-1 grid-rows-2"
+            : "grid-cols-1 md:grid-cols-2";
+    }
+    if (count <= 1)
+        return "grid-cols-1";
+    if (count === 2)
+        return "grid-cols-1 md:grid-cols-2";
+    return "grid-cols-1 md:grid-cols-2 xl:grid-cols-3";
+}
+function ViewLayoutSurface({ availableViews, layout, onClear, }) {
+    const entries = layout.viewIds
+        .map((viewId) => availableViews.find((view) => view.id === viewId))
+        .filter((view) => Boolean(view));
+    const paneClassName = "flex min-h-[18rem] min-w-0 flex-col overflow-hidden border border-border/45 bg-bg";
+    return (_jsx(TabContentView, { children: _jsxs("section", { "data-testid": "view-layout-surface", className: "flex h-full min-h-0 min-w-0 flex-1 flex-col bg-bg", children: [_jsxs("header", { className: "flex min-h-12 shrink-0 items-center justify-between gap-3 border-b border-border/45 px-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: viewLayoutLabel(layout) }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted", children: entries.length })] }), _jsx("button", { type: "button", "aria-label": "Close layout", title: "Close layout", "data-testid": "view-layout-close", onClick: onClear, className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted transition-colors hover:bg-border/35 hover:text-txt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": true }) })] }), _jsx("div", { className: `grid min-h-0 flex-1 gap-2 overflow-auto p-2 ${viewLayoutGridClass(layout, entries.length)} eliza-continuous-chat-scroll pb-[calc(0.5rem+var(--eliza-continuous-chat-clearance,5.25rem))]`, children: entries.length > 0 ? (entries.map((view) => (_jsxs("section", { "data-testid": `view-layout-pane-${view.id}`, className: paneClassName, children: [_jsx("div", { className: "flex h-9 shrink-0 items-center border-b border-border/35 px-2.5", children: _jsx("span", { className: "truncate text-xs font-medium text-muted", children: view.label }) }), _jsx("div", { className: "min-h-0 min-w-0 flex-1 overflow-hidden", children: view.bundleUrl ? (_jsx(DynamicViewLoader, { bundleUrl: view.bundleUrl, componentExport: view.componentExport, viewId: view.id, viewType: view.viewType })) : (_jsxs("div", { className: "flex h-full min-h-0 items-center justify-center px-4 text-center text-sm text-muted", children: [view.label, " is not available as a dynamic view."] })) })] }, view.id)))) : (_jsx("div", { className: "flex min-h-[18rem] items-center justify-center border border-border/45 px-4 text-center text-sm text-muted", children: "Requested views are not available." })) })] }) }));
+}
+/**
+ * Fallback shown when a view/tab is unavailable. Chat is the always-present
+ * ContinuousChatOverlay that floats over every view — views never embed an
+ * inline ChatView — so an unavailable view falls back to the app/view
+ * launcher, not a chat surface.
+ */
+function ViewUnavailableFallback() {
+    return (_jsx(TabContentView, { children: _jsx(ViewCatalog, {}) }));
+}
+function renderPhoneSurface(enabled, Component) {
+    return enabled ? (_jsx(TabContentView, { children: _jsx(Component, {}) })) : (_jsx(ViewUnavailableFallback, {}));
+}
+function renderAppsSurface(navigationPath) {
+    if (!APPS_ENABLED)
+        return _jsx(ViewUnavailableFallback, {});
+    return (_jsx(TabContentView, { children: getAppSlugFromPath(navigationPath) ? _jsx(AppsPageView, {}) : _jsx(ViewCatalog, {}) }));
+}
+function renderStaticViewRouterTab({ tab, androidPhoneSurfaceEnabled, navigationPath, settingsInitialSection, }) {
+    const directViews = {
+        tutorial: (_jsx(TabContentView, { children: _jsx(TutorialView, {}) })),
+        help: (_jsx(TabContentView, { children: _jsx(HelpView, {}) })),
+        camera: (_jsx(TabContentView, { children: _jsx(CameraPageView, {}) })),
+        chat: _jsx(ViewUnavailableFallback, {}),
+        browser: _jsx(BrowserWorkspaceView, {}),
+        companion: _jsx(ViewUnavailableFallback, {}),
+        stream: _jsx(StreamView, {}),
+        tasks: (_jsx(TabContentView, { children: _jsx(TasksPageView, {}) })),
+        automations: _jsx(AutomationsFeed, {}),
+        triggers: _jsx(AutomationsFeed, {}),
+        voice: (_jsx(TabContentView, { children: _jsx(SettingsView, { initialSection: "identity" }, "settings-identity") })),
+        settings: (_jsx(TabContentView, { children: _jsx(SettingsView, { initialSection: settingsInitialSection ?? undefined }, "settings-root") })),
+        plugins: (_jsx(TabContentView, { children: _jsx(PluginsPageView, {}) })),
+        skills: (_jsx(TabContentView, { children: _jsx(SkillsView, {}) })),
+        trajectories: (_jsx(TabContentView, { children: _jsx(TrajectoriesView, {}) })),
+        relationships: (_jsx(TabContentView, { children: _jsx(RelationshipsView, {}) })),
+        memories: (_jsx(TabContentView, { children: _jsx(MemoryViewerView, {}) })),
+        runtime: (_jsx(TabContentView, { children: _jsx(RuntimeView, {}) })),
+        database: (_jsx(TabContentView, { children: _jsx(DatabasePageView, {}) })),
+        logs: (_jsx(TabContentView, { children: _jsx(LogsView, {}) })),
+        desktop: (_jsx(TabContentView, { children: _jsx(DesktopWorkspaceSection, {}) })),
+    };
+    if (tab === "phone") {
+        return renderPhoneSurface(androidPhoneSurfaceEnabled, PhonePageView);
+    }
+    if (tab === "messages") {
+        return renderPhoneSurface(androidPhoneSurfaceEnabled, MessagesPageView);
+    }
+    if (tab === "contacts") {
+        return renderPhoneSurface(androidPhoneSurfaceEnabled, ContactsPageView);
+    }
+    if (tab === "views" || tab === "apps") {
+        return renderAppsSurface(navigationPath);
+    }
+    if (tab === "character" ||
+        tab === "character-select" ||
+        tab === "documents") {
+        return (_jsx(TabContentView, { children: _jsx(CharacterEditor, {}) }));
+    }
+    if (tab === "inventory") {
+        return (_jsx(TabScrollView, { children: _jsx(WalletInventoryPage, {}) }));
+    }
+    if (tab === "fine-tuning" || tab === "advanced") {
+        return (_jsx(TabContentView, { children: _jsx(FineTuningView, {}) }));
+    }
+    return directViews[tab] ?? _jsx(ViewUnavailableFallback, {});
+}
+function renderViewRouterContent({ tab, dynamicPage, dynamicAppPage, developerModeEnabled, navigationPath, availableViews, appSlug, androidPhoneSurfaceEnabled, settingsInitialSection, }) {
+    if (visibleDynamicPage(dynamicPage, developerModeEnabled)) {
+        return (_jsx(TabContentView, { children: _jsx(DynamicPluginPage, { resolved: dynamicPage }) }));
+    }
+    if (visibleDynamicPage(dynamicAppPage, developerModeEnabled)) {
+        return (_jsx(TabContentView, { children: _jsx(DynamicPluginPage, { resolved: dynamicAppPage }) }));
+    }
+    const remoteView = findRemoteViewForRoute(availableViews, navigationPath, tab, appSlug);
+    if (remoteView?.bundleUrl)
+        return renderRemoteView(remoteView);
+    return renderStaticViewRouterTab({
+        tab,
+        androidPhoneSurfaceEnabled,
+        navigationPath,
+        settingsInitialSection,
+    });
+}
+function ViewRouter({ settingsInitialSection, }) {
+    const { tab } = useApp();
+    const androidPhoneSurfaceEnabled = isAndroidPhoneSurfaceEnabled();
+    const dynamicPage = useResolvedDynamicPage(tab);
+    const [navigationPath, setNavigationPath] = useState(() => typeof window === "undefined" ? "/" : getWindowNavigationPath());
+    const appSlug = tab === "apps" || tab === "views"
+        ? getAppSlugFromPath(navigationPath)
+        : null;
+    const dynamicAppPage = useResolvedDynamicPage(appSlug ?? "");
+    const developerModeEnabled = useIsDeveloperMode();
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const navEvt = shouldUseHashNavigation() ? "hashchange" : "popstate";
+        const handleNavigationChange = () => {
+            setNavigationPath(getWindowNavigationPath());
+        };
+        window.addEventListener(navEvt, handleNavigationChange);
+        return () => window.removeEventListener(navEvt, handleNavigationChange);
+    }, []);
+    // Available views from /api/views — used to route to DynamicViewLoader
+    // when a tab ID matches a view entry that ships a remote bundle URL.
+    const { views: availableViews } = useAvailableViews();
+    const view = renderViewRouterContent({
+        tab,
+        dynamicPage,
+        dynamicAppPage,
+        developerModeEnabled,
+        navigationPath,
+        availableViews,
+        appSlug,
+        androidPhoneSurfaceEnabled,
+        settingsInitialSection,
+    });
+    return (_jsx(ErrorBoundary, { children: _jsx(LazyViewBoundary, { children: view }) }));
+}
+function greetingForTimeOfDay() {
+    const hour = new Date().getHours();
+    if (hour < 12)
+        return "Good morning! What would you like to do?";
+    if (hour < 18)
+        return "Good afternoon! What would you like to do?";
+    return "Good evening! What would you like to do?";
+}
+const APP_SHELL_CLASS = "flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg";
+function CompanionShellContent(props) {
+    if (props.uiShellMode === "companion" &&
+        props.isCompanionTab &&
+        props.CompanionShell) {
+        const CompanionShell = props.CompanionShell;
+        return _jsx(CompanionShell, { tab: "companion", actionNotice: props.actionNotice });
+    }
+    if (!props.isCompanionTab)
+        return null;
+    return _jsx("div", { className: APP_SHELL_CLASS }, "companion-shell");
+}
+function ChatRouteShellContent(props) {
+    // The /chat route is the ambient conversational home: open space behind the
+    // always-present ContinuousChatOverlay (mounted at the shell root), which is
+    // the whole chat experience. Ask it anything, or ask it to open a view ("show
+    // me the coding view") which surfaces over this base. The home is wordless —
+    // a warm, gently pulsing orange field, no greeting text.
+    return (_jsx("div", { className: APP_SHELL_CLASS, children: _jsxs("div", { className: "relative flex min-h-0 min-w-0 flex-1 items-center justify-center overflow-hidden", children: [_jsx(ChatAmbientBackground, {}), _jsx(HomeScreenMount, {}), _jsx(CustomActionsPanel, { open: props.customActionsPanelOpen, onClose: () => props.setCustomActionsPanelOpen(false), onOpenEditor: (action) => {
+                        props.setEditingAction(action ?? null);
+                        props.setCustomActionsEditorOpen(true);
+                    } })] }) }, "chat-shell"));
+}
+function routedShellMainClass(tab) {
+    // One tight page gutter for every routed view: minimal top so headers sit
+    // right under the chrome, a small side gutter, modest bottom. Views that own
+    // their full surface (browser/apps/views) still get zero padding.
+    const pagePadding = tab === "browser" || tab === "apps" || tab === "views"
+        ? ""
+        : "px-2 sm:px-3 pt-2 pb-4";
+    const mobilePadding = tab === "browser" ? "" : MOBILE_NAV_PADDING_CLASS;
+    return `flex flex-1 min-h-0 min-w-0 overflow-hidden ${pagePadding} ${mobilePadding}`;
+}
+/**
+ * The single routed shell for every view. ViewRouter already resolves every tab
+ * — static page views, dynamic plugin pages, and remote view bundles — so the
+ * shell only adds the desktop tab bar and per-tab padding around it. Chat is the
+ * always-present ContinuousChatOverlay floating over this base, never embedded
+ * per-view.
+ */
+function RoutedShellContent(props) {
+    return (_jsxs("div", { className: APP_SHELL_CLASS, children: [props.desktopTabBar, _jsx("main", { className: routedShellMainClass(props.tab), children: props.viewLayout ? (_jsx(ViewLayoutSurface, { availableViews: props.availableViewsForLayout, layout: props.viewLayout, onClear: props.onClearViewLayout })) : (_jsx(ViewRouter, { settingsInitialSection: props.settingsInitialSection })) })] }, `tab-shell-${props.tab}`));
+}
+/**
+ * Edge-to-edge surface for pages that register `fullBleed` — no tab bar, no
+ * padding. The page owns its full window (e.g. the orchestrator).
+ */
+function FullBleedShellContent(props) {
+    return (_jsx("div", { className: APP_SHELL_CLASS, children: _jsx("main", { className: "flex flex-1 min-h-0 min-w-0 overflow-hidden", children: _jsx(ViewRouter, {}) }) }, `fullbleed-shell-${props.tab}`));
+}
+/**
+ * Picks the shell wrapper for the active tab. Only three surfaces are genuinely
+ * distinct from a routed view: `fullBleed` pages (edge-to-edge), the ambient
+ * `/chat` home (open space behind the overlay), and the host-injected companion
+ * shell. Everything else is a view rendered through the single
+ * RoutedShellContent → ViewRouter path.
+ */
+function ShellContent(props) {
+    if (props.isFullBleed)
+        return _jsx(FullBleedShellContent, { ...props });
+    if (props.isChat)
+        return _jsx(ChatRouteShellContent, { ...props });
+    const companionContent = CompanionShellContent(props);
+    if (companionContent)
+        return companionContent;
+    return _jsx(RoutedShellContent, { ...props });
+}
+function ShellFoundationMount() {
+    const controller = useShellControllerContext();
+    if (!controller)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(HomePill, { phase: controller.phase, onOpen: controller.open, onClose: controller.close }), _jsx(AssistantOverlay, { phase: controller.phase, onClose: controller.close, children: _jsx(ChatSurface, { messages: controller.messages, onSend: controller.send, canSend: controller.canSend, greeting: greetingForTimeOfDay(), recording: controller.recording, onToggleRecording: controller.toggleRecording }) })] }));
+}
+/**
+ * Reads the shared shell controller from context and renders the always-present
+ * continuous chat overlay — one ambient glass conversation (the app's single
+ * active conversation via useShellController) that floats over every view,
+ * including the /chat route's ambient home. Returns null until a controller
+ * provider is present.
+ */
+function ContinuousChatOverlayMount() {
+    const controller = useShellControllerContext();
+    const { characterData, agentStatus } = useApp();
+    const slash = useSlashCommandController();
+    if (!controller)
+        return null;
+    // The live agent's name drives the composer placeholder ("Ask {name}").
+    // Character name wins (what the user configured), then the running agent's
+    // reported name; "Eliza" is the default the overlay falls back to.
+    const agentName = characterData?.name?.trim() || agentStatus?.agentName?.trim() || undefined;
+    return (_jsx(ContinuousChatOverlay, { controller: controller, agentName: agentName, slash: slash }));
+}
+/**
+ * The iOS-style home dashboard for the /chat route — clock, recent activity,
+ * recent messages, a customizable widget area, and pinned view tiles. Sits
+ * behind the always-present chat overlay. Wires tile taps to the real nav:
+ * builtin tabs via setTab, plugin/remote views via the eliza:navigate:view event.
+ */
+function HomeScreenMount() {
+    const { setTab } = useApp();
+    // Host apps can override the home screen via the `homeScreen` boot-config slot
+    // (whitelabel seam); fall back to the built-in HomeScreen.
+    const { homeScreen: HomeScreenOverride } = useBootConfig();
+    const onOpenTile = useCallback((target) => {
+        if (target.kind === "tab") {
+            setTab(target.tab);
+        }
+        else {
+            window.dispatchEvent(new CustomEvent("eliza:navigate:view", {
+                detail: { viewPath: target.path },
+            }));
+        }
+    }, [setTab]);
+    const Home = HomeScreenOverride ?? HomeScreen;
+    return (_jsx(Home, { onOpenTile: onOpenTile, showNativeOsTiles: isAospShellEnabled() }));
+}
+export function App() {
+    const { startupError, startupCoordinator, retryStartup, tab, setTab, setState, actionNotice, activeOverlayApp, uiTheme, backendConnection, activeGameViewerUrl, gameOverlayEnabled, uiShellMode, t, } = useApp();
+    const { companionShell: CompanionShell } = useBootConfig();
+    const isPopout = useIsPopout();
+    const shellMode = useShellMode();
+    // Auth gate — only active after the coordinator reaches "ready".
+    // During first-run setup / pairing / startup phases the StartupScreen handles
+    // its own gate (bootstrap step), so we skip the check.
+    const isCoordinatorReady = startupCoordinator.phase === "ready";
+    // The live shell may MOUNT once the backend is reached and the agent boot is
+    // underway (starting-runtime / hydrating / ready) — first-turn capability then
+    // fades in behind it (see useShellController's agentReady). Only the truly
+    // pre-shell phases (session restore, backend polling, first-run, pairing,
+    // error) keep the full-screen StartupScreen. Runtime-dependent effects and
+    // overlay apps below stay gated on `isCoordinatorReady` and defer safely.
+    const isShellPaintableNow = isShellPaintable(startupCoordinator.phase);
+    const { state: authState, refetch: refetchAuth } = useAuthStatus({
+        skip: !isShellPaintableNow || 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();
+    useSecretsManagerShortcut();
+    // Warm a small, device-aware subset of lazy route chunks once the shell is
+    // ready. The scheduler itself skips hidden/low-memory/save-data sessions.
+    useEffect(() => {
+        if (startupCoordinator.phase !== "ready" || typeof window === "undefined") {
+            return;
+        }
+        return scheduleRouteViewChunkPrefetch();
+    }, [startupCoordinator.phase]);
+    useEffect(() => {
+        if (!isCoordinatorReady || isPopout || shellMode !== "full")
+            return;
+        if (!isRouteRootPath(getWindowNavigationPath()))
+            return;
+        setTab("chat");
+    }, [isCoordinatorReady, isPopout, setTab, shellMode]);
+    useEffect(() => {
+        const handler = (event) => {
+            if (event.key !== "/" || event.ctrlKey || event.metaKey || event.altKey) {
+                return;
+            }
+            const target = event.target;
+            const tag = target?.tagName;
+            if (tag === "INPUT" ||
+                tag === "TEXTAREA" ||
+                tag === "SELECT" ||
+                target?.isContentEditable) {
+                return;
+            }
+            const composer = document.querySelector('[data-testid="chat-composer-textarea"]');
+            if (!composer)
+                return;
+            event.preventDefault();
+            composer.focus();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, []);
+    useEffect(() => {
+        if (startupCoordinator.phase !== "ready")
+            return;
+        if (backendConnection?.state !== "connected")
+            return;
+        const report = (appName) => {
+            void fetchWithCsrf("/api/apps/overlay-presence", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ appName }),
+            }).catch(() => {
+                /* ignore */
+            });
+        };
+        if (activeOverlayApp === null) {
+            report(null);
+            return;
+        }
+        report(activeOverlayApp);
+        const intervalId = window.setInterval(() => report(activeOverlayApp), 25_000);
+        return () => {
+            window.clearInterval(intervalId);
+            report(null);
+        };
+    }, [activeOverlayApp, backendConnection?.state, startupCoordinator.phase]);
+    const [customActionsPanelOpen, setCustomActionsPanelOpen] = useState(false);
+    const [customActionsEditorOpen, setCustomActionsEditorOpen] = useState(false);
+    const [settingsInitialSection, setSettingsInitialSection] = useState(null);
+    // Desktop tab bar — persisted pinned tabs for the Electrobun shell.
+    const { tabs: desktopTabs, openTab: openDesktopTab, closeTab: closeDesktopTab, } = useDesktopTabs();
+    const [activeDesktopTabId, setActiveDesktopTabId] = useState(null);
+    const { views: availableViewsForDesktopTabs } = useAvailableViews();
+    const [viewLayout, setViewLayout] = useState(null);
+    const [editingAction, setEditingAction] = useState(null);
+    const [desktopShuttingDown, setDesktopShuttingDown] = useState(false);
+    const isCompanionTab = tab === "companion";
+    const isChat = tab === "chat";
+    const isSettingsPage = tab === "settings" || tab === "voice";
+    const isFullBleed = useTabIsFullBleed(tab);
+    // Keep hook order stable across first-run/auth state transitions.
+    // Otherwise React can throw when first-run setup 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);
+    }, []);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const handleFocusConnector = (event) => {
+            const detail = event.detail;
+            if (!detail?.connectorId)
+                return;
+            setSettingsInitialSection("connectors");
+            setTab("settings");
+        };
+        document.addEventListener(FOCUS_CONNECTOR_EVENT, handleFocusConnector);
+        return () => document.removeEventListener(FOCUS_CONNECTOR_EVENT, handleFocusConnector);
+    }, [setTab]);
+    // Slash-command settings navigation (e.g. `/settings model`): open the
+    // settings tab focused on the requested section (or the hub when absent).
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handleNavigateSettings = (event) => {
+            const detail = event.detail;
+            setSettingsInitialSection(detail?.section ?? null);
+            setTab("settings");
+        };
+        window.addEventListener(NAVIGATE_SETTINGS_EVENT, handleNavigateSettings);
+        return () => window.removeEventListener(NAVIGATE_SETTINGS_EVENT, handleNavigateSettings);
+    }, [setTab]);
+    // Handle agent-dispatched view navigation events.
+    // The VIEWS action (and future agent commands) dispatch this event to navigate
+    // the user to a specific view by path or view ID.
+    // When the target is "/views" or "/apps" (the ViewCatalog), we also
+    // directly set the tab so the nav bar becomes visible.
+    // On desktop, also open the view as a desktop tab if desktopTabEnabled.
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handleNavigateView = createNavigateViewHandler({
+            availableViewsForDesktopTabs,
+            closeDesktopTab,
+            desktopTabs,
+            invokeDesktopBridgeRequest,
+            openDesktopTab,
+            setActiveDesktopTabId,
+            setTab,
+            setViewLayout,
+        });
+        window.addEventListener("eliza:navigate:view", handleNavigateView);
+        return () => window.removeEventListener("eliza:navigate:view", handleNavigateView);
+    }, [
+        setTab,
+        availableViewsForDesktopTabs,
+        closeDesktopTab,
+        desktopTabs,
+        openDesktopTab,
+    ]);
+    useEffect(() => {
+        if (tab !== "views" && viewLayout) {
+            setViewLayout(null);
+        }
+    }, [tab, viewLayout]);
+    useEffect(() => {
+        if (isSettingsPage || settingsInitialSection === null) {
+            return;
+        }
+        setSettingsInitialSection(null);
+    }, [isSettingsPage, settingsInitialSection]);
+    useEffect(() => {
+        if (!isNative || !isIOS) {
+            return;
+        }
+        // Dynamic import keeps @capacitor/keyboard (a native-only, devDependency
+        // plugin) out of the static module graph, so server consumers that pull in
+        // the @elizaos/ui barrel (e.g. plugin-inbox in the Node agent image) don't
+        // crash trying to resolve a package that's only installed for mobile.
+        void import("@capacitor/keyboard")
+            .then(({ Keyboard }) => 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);
+            },
+        });
+    }, []);
+    // Handle desktop tab navigation: clicking a tab navigates to its path.
+    // Closing the active tab falls back to the chat view.
+    const handleDesktopTabClick = useCallback((viewId) => {
+        const dtab = desktopTabs.find((t) => t.viewId === viewId);
+        if (!dtab)
+            return;
+        setViewLayout(null);
+        setActiveDesktopTabId(viewId);
+        try {
+            if (typeof window === "undefined")
+                return;
+            if (window.location.protocol === "file:") {
+                window.location.hash = dtab.path;
+            }
+            else {
+                window.history.pushState(null, "", dtab.path);
+                window.dispatchEvent(new PopStateEvent("popstate"));
+            }
+        }
+        catch {
+            // sandboxed — ignore
+        }
+    }, [desktopTabs]);
+    const handleDesktopTabClose = useCallback((viewId) => {
+        setViewLayout(null);
+        closeDesktopTab(viewId);
+        if (activeDesktopTabId === viewId) {
+            setActiveDesktopTabId(null);
+            setTab("chat");
+        }
+    }, [closeDesktopTab, activeDesktopTabId, setTab]);
+    const handleOpenViewManagerFromTabBar = useCallback(() => {
+        setViewLayout(null);
+        setTab("views");
+    }, [setTab]);
+    const handleClearViewLayout = useCallback(() => {
+        setViewLayout(null);
+    }, []);
+    // desktopTabBar is computed here (after handlers) so the memo below can
+    // reference a stable value. Rendered inside each shell variant, not at the
+    // outer level, so Header + TabBar + content stack correctly per shell.
+    const desktopTabBar = (_jsx(DesktopTabBar, { tabs: desktopTabs, activeViewId: activeDesktopTabId, onTabClick: handleDesktopTabClick, onTabClose: handleDesktopTabClose, onOpenViewManager: handleOpenViewManagerFromTabBar }));
+    const bugReport = useBugReportState();
+    // Loading is handled entirely by StartupScreen.
+    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(() => (_jsx(ShellContent, { CompanionShell: CompanionShell, actionNotice: actionNotice, availableViewsForLayout: availableViewsForDesktopTabs, customActionsPanelOpen: customActionsPanelOpen, desktopTabBar: desktopTabBar, isChat: isChat, isCompanionTab: isCompanionTab, isFullBleed: isFullBleed, setCustomActionsEditorOpen: setCustomActionsEditorOpen, setCustomActionsPanelOpen: setCustomActionsPanelOpen, setEditingAction: setEditingAction, settingsInitialSection: settingsInitialSection, tab: tab, uiShellMode: uiShellMode, viewLayout: viewLayout, onClearViewLayout: handleClearViewLayout })), [
+        CompanionShell,
+        tab,
+        uiShellMode,
+        isCompanionTab,
+        actionNotice,
+        isChat,
+        isFullBleed,
+        customActionsPanelOpen,
+        settingsInitialSection,
+        desktopTabBar,
+        availableViewsForDesktopTabs,
+        viewLayout,
+        handleClearViewLayout,
+    ]);
+    // 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, {}) }) }));
+    }
+    // Self-driving voice round-trip test screen — runs the real STT->agent->TTS
+    // loop against a known phrase and reports PASS/FAIL with no human in the loop.
+    // Self-contained (its own ElizaClient + AudioContext); no app chrome / gate.
+    if (shellMode === "voice-selftest") {
+        return _jsx(VoiceSelfTestShell, {});
+    }
+    // OS chat-overlay window — render JUST the floating assistant pill +
+    // waveform over a transparent background, no app chrome or onboarding gate.
+    if (shellMode === "chat-overlay") {
+        return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsx(ShellControllerProvider, { children: _jsx(ChatOverlayShell, {}) }), _jsx(BugReportModal, {})] }));
+    }
+    // First-run onboarding overlay window — render JUST the floating onboarding
+    // card over a transparent, click-through background, no app chrome or
+    // startup gate.
+    if (shellMode === "onboarding-overlay") {
+        return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsx(ShellControllerProvider, { children: _jsx(OnboardingOverlayShell, {}) }), _jsx(BugReportModal, {})] }));
+    }
+    if (!isShellPaintableNow) {
+        return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsx(StartupScreen, {}), _jsx(BugReportModal, {})] }));
+    }
+    // Auth gate — once the shell is paintable (agent may still be warming up),
+    // check /api/auth/me. "loading": wait (fall through to the main shell render).
+    // "unauthenticated": render LoginView. "authenticated": proceed.
+    // "server_unavailable": show a retryable startup failure.
+    if (isShellPaintableNow && !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).
+    }
+    // OS kiosk window — the locked appliance shell: a fullscreen in-window
+    // view-manager canvas plus an always-visible bottom chat pill. No app
+    // chrome, no tabs. The pill is enabled here regardless of web/native gating.
+    if (shellMode === "kiosk") {
+        return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsx(ShellControllerProvider, { children: _jsx(KioskShell, {}) }), _jsx(BugReportModal, {})] }));
+    }
+    // The app shell renders once paintable (the agent may still be warming up —
+    // the chat composer queues sends until first-turn capability fades in; views
+    // show their own loading states until the runtime is live). No deprecated
+    // first-run overlays — the coordinator handled all of that before this point.
+    return (_jsx(BugReportProvider, { value: bugReport, children: _jsxs(ShellControllerProvider, { children: [_jsxs("div", { className: "flex h-[100dvh] w-full max-w-full flex-col overflow-hidden", 
+                    // Reserve the status-bar safe area so view headers + back buttons sit
+                    // below the status bar. Top banners bleed their bg back up through it
+                    // via `.mobile-top-banner:first-child` (see styles.css). No-op on web.
+                    style: { paddingTop: "var(--safe-area-top, 0px)" }, children: [_jsx(ConnectionFailedBanner, {}), _jsx(SystemWarningBanner, {}), _jsx(ActionBanner, {}), shellContent] }), resolvedOverlayApp &&
+                    (() => {
+                        const exitToApps = () => {
+                            setState("activeOverlayApp", null);
+                            setTab("apps");
+                        };
+                        const theme = uiTheme === "dark" ? "dark" : "light";
+                        const LazyOverlay = getOverlayAppLazyComponent(resolvedOverlayApp);
+                        if (LazyOverlay) {
+                            return (_jsx(Suspense, { fallback: null, children: _jsx(LazyOverlay, { exitToApps: exitToApps, uiTheme: theme, t: t }) }));
+                        }
+                        const Component = resolvedOverlayApp.Component;
+                        if (!Component)
+                            return null;
+                        return _jsx(Component, { exitToApps: exitToApps, uiTheme: theme, t: t });
+                    })(), activeGameViewerUrl &&
+                    gameOverlayEnabled &&
+                    tab !== "apps" &&
+                    tab !== "views" && _jsx(GameViewOverlay, {}), _jsx(ContinuousChatOverlayMount, {}), _jsx(TutorialOverlay, {}), _jsx(NotificationCenter, { headless: true }), _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 ", role: "status", "aria-live": "polite", children: _jsxs("div", { className: "rounded-sm border border-border/60 bg-card/95 px-6 py-5 text-center ", 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] }) }));
+}