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

package/App.js

@@ -2,44 +2,63 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /**
  * Root App component — routing shell.
  */
-import { Keyboard } from "@capacitor/keyboard";
-import { ArrowDownLeft, ArrowLeftRight, Layers3, MessagesSquare, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, } from "lucide-react";
+import { X } 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 { 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 { 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 { 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 { Header } from "./components/shell/Header.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 { StartupShell } from "./components/shell/StartupShell.js";
+import { StartupScreen } from "./components/shell/StartupScreen.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 { 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, isAndroidPhoneSurfaceEnabled, isAppsToolTab, } from "./navigation/index.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";
-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";
+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];
@@ -52,98 +71,109 @@ function lazyNamedView(load, exportName) {
     });
 }
 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 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 { 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 { 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";
-// 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 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 ConnectorsPageView = lazyNamedView(() => import("./components/pages/ConnectorsPageView.js"), "ConnectorsPageView");
+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");
-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 }));
+// 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;
 }
-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, {}),
-        },
+// 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(() => {
@@ -154,15 +184,67 @@ function useIsPopout() {
     });
     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 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 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 }) }));
+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
@@ -171,6 +253,7 @@ function TabContentView({ children, chatScope, chatDisabled = false, }) {
  */
 function useResolvedDynamicPage(tab) {
     const { plugins } = useApp();
+    const registryVersion = useAppShellPageRegistryVersion();
     return useMemo(() => {
         const registrations = listAppShellPages();
         const registered = registrations.find((entry) => entry.id === tab);
@@ -200,25 +283,33 @@ function useResolvedDynamicPage(tab) {
             }
         }
         return null;
-    }, [plugins, tab]);
+    }, [plugins, registryVersion, 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"`,
+ *   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 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.)
+ * 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) {
-        const Component = resolved.registration.Component;
-        return _jsx(Component, {});
+        return _jsx(RegisteredAppShellPage, { registration: resolved.registration });
     }
-    // No bundled registration — display a lightweight loading placeholder
+    // 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"] }));
@@ -228,98 +319,352 @@ function WalletInventoryPage() {
     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, {});
+    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 ViewRouter({ onCharacterHeaderActionsChange, }) {
+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 { lifeOpsPageView: LifeOpsPageView } = useBootConfig();
     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();
-    const view = (() => {
-        if (dynamicPage && (developerModeEnabled || !dynamicPage.developerOnly)) {
-            return (_jsx(TabContentView, { children: _jsx(DynamicPluginPage, { resolved: dynamicPage }) }));
+    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);
         }
-        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, {});
+        else {
+            window.dispatchEvent(new CustomEvent("eliza:navigate:view", {
+                detail: { viewPath: target.path },
+            }));
         }
-    })();
-    return (_jsx(ErrorBoundary, { children: _jsx(LazyViewBoundary, { children: view }) }));
+    }, [setTab]);
+    const Home = HomeScreenOverride ?? HomeScreen;
+    return (_jsx(Home, { onOpenTile: onOpenTile, showNativeOsTiles: isAospShellEnabled() }));
 }
 export function App() {
-    const { startupError, startupCoordinator, onboardingComplete, retryStartup, tab, setTab, setState, actionNotice, activeOverlayApp, uiTheme, backendConnection, activeGameViewerUrl, gameOverlayEnabled, uiShellMode, t, } = useApp();
+    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 onboarding / pairing / startup phases the StartupShell handles
+    // 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: !isCoordinatorReady || isPopout,
+        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
@@ -329,94 +674,85 @@ export function App() {
         ? getOverlayApp(activeOverlayApp)
         : undefined;
     const contextMenu = useContextMenu();
-    useStreamPopoutNavigation(setTab);
     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 = () => {
+        const report = (appName) => {
             void fetchWithCsrf("/api/apps/overlay-presence", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ appName: activeOverlayApp }),
+                body: JSON.stringify({ appName }),
             }).catch(() => {
                 /* ignore */
             });
         };
-        report();
-        const intervalId = window.setInterval(report, 25_000);
+        if (activeOverlayApp === null) {
+            report(null);
+            return;
+        }
+        report(activeOverlayApp);
+        const intervalId = window.setInterval(() => report(activeOverlayApp), 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 */
-            });
+            report(null);
         };
     }, [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();
+    // 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 [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.
+    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;
@@ -428,45 +764,65 @@ export function App() {
         setCustomActionsEditorOpen(false);
         setEditingAction(null);
     }, []);
-    const handleDeferredTaskOpen = useCallback((task) => {
-        if (task === "voice") {
-            setTab("voice");
+    useEffect(() => {
+        if (typeof document === "undefined")
             return;
-        }
-        if (task === "permissions") {
-            setSettingsInitialSection("permissions");
-        }
-        else if (task === "provider") {
-            setSettingsInitialSection("ai-model");
-        }
-        else {
-            setSettingsInitialSection(null);
-        }
-        setTab("settings");
+        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 handleResize = () => {
-            setIsChatMobileLayout(window.innerWidth < CHAT_MOBILE_BREAKPOINT_PX);
+        const handleNavigateSettings = (event) => {
+            const detail = event.detail;
+            setSettingsInitialSection(detail?.section ?? null);
+            setTab("settings");
         };
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
+        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 (!isChatMobileLayout) {
-            setMobileChatSurface("center");
-        }
-    }, [isChatMobileLayout]);
+        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 (!isChatWorkspace) {
-            setMobileChatSurface("center");
+        if (tab !== "views" && viewLayout) {
+            setViewLayout(null);
         }
-        if (!isChat && mobileChatSurface === "right") {
-            setMobileChatSurface("center");
-        }
-    }, [isChat, isChatWorkspace, mobileChatSurface]);
+    }, [tab, viewLayout]);
     useEffect(() => {
         if (isSettingsPage || settingsInitialSection === null) {
             return;
@@ -477,7 +833,13 @@ export function App() {
         if (!isNative || !isIOS) {
             return;
         }
-        void Keyboard.setScroll({ isDisabled: true }).catch(() => {
+        // 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.
         });
     }, []);
@@ -490,8 +852,50 @@ export function App() {
             },
         });
     }, []);
+    // 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 StartupShell — no separate loader needed.
+    // 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
@@ -511,62 +915,51 @@ export function App() {
     // 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}`)), [
+    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,
-        isChatWorkspace,
-        isCharacterPage,
-        isHeartbeats,
-        isSettingsPage,
-        isWallets,
-        isAppsToolPage,
-        isDesktopWorkspacePage,
-        isChatMobileLayout,
-        mobileChatSurface,
-        mobileChatControls,
-        characterHeaderActions,
-        handleDeferredTaskOpen,
-        activityEvents,
-        clearActivityEvents,
+        isFullBleed,
         customActionsPanelOpen,
-        handleToggleWidgetsCollapsed,
         settingsInitialSection,
-        widgetsPanelCollapsed,
+        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, {}) }) }));
     }
-    // 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, {})] }));
+    // 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, {})] }));
     }
-    // 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.
+    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 (isCoordinatorReady && !isPopout) {
+    if (isShellPaintableNow && !isPopout) {
         if (authState.phase === "server_unavailable") {
             return (_jsxs(BugReportProvider, { value: bugReport, children: [_jsx(StartupFailureView, { error: {
                             reason: "backend-unreachable",
@@ -581,13 +974,40 @@ export function App() {
         // 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] }));
+    // 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] }) }));
 }