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

package/components/shell/Header.js

@@ -0,0 +1,316 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Capacitor } from "@capacitor/core";
+import { Button } from "@elizaos/ui";
+import { ChevronRight, ListTodo, Settings } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { isElectrobunRuntime } from "../../bridge/electrobun-runtime.js";
+import { MOBILE_RUNTIME_MODE_CHANGED_EVENT } from "../../events/index.js";
+import { useMediaQuery } from "../../hooks/index.js";
+import { getTabGroups, isAppsToolTab, titleForTab, } from "../../navigation/index.js";
+import { readPersistedMobileRuntimeMode } from "../../onboarding/mobile-runtime-mode.js";
+import { isDetachedWindowShell, resolveWindowShellRoute, } from "../../platform/window-shell.js";
+import { useApp } from "../../state/index.js";
+import { useIsDeveloperMode } from "../../state/useDeveloperMode.js";
+import { getOverlayApp } from "../apps/overlay-app-registry.js";
+import { CloudStatusBadge } from "../cloud/CloudStatusBadge.js";
+import { LanguageDropdown } from "../shared/LanguageDropdown.js";
+import { ThemeToggle } from "../shared/ThemeToggle.js";
+import { HEADER_BUTTON_STYLE } from "./ShellHeaderControls.js";
+const MOBILE_HEADER_MEDIA_QUERY = "(max-width: 819px)";
+const DESKTOP_LABEL_COLLAPSE_MEDIA_QUERY = "(max-width: 1380px)";
+const NAV_LABEL_I18N_KEY = {
+    Apps: "nav.apps",
+    Automations: "nav.automations",
+    Browser: "nav.browser",
+    Character: "nav.character",
+    Chat: "nav.chat",
+    Companion: "nav.companion",
+    Connectors: "nav.social",
+    Heartbeats: "nav.heartbeats",
+    Knowledge: "nav.documents",
+    LifeOps: "nav.lifeops",
+    Settings: "nav.settings",
+    Stream: "nav.stream",
+    Wallet: "nav.wallet",
+};
+const NAV_DESCRIPTION_I18N_KEY = {
+    Apps: "nav.description.apps",
+    Automations: "nav.description.automations",
+    Browser: "nav.description.browser",
+    Character: "nav.description.character",
+    Chat: "nav.description.chat",
+    Settings: "nav.description.settings",
+    Stream: "nav.description.stream",
+    Wallet: "nav.description.wallet",
+};
+const TOPBAR_NAV_BUTTON_CLASSNAME = "group relative inline-flex h-[2.375rem] min-h-[2.375rem] shrink-0 items-center gap-2 rounded-md border border-transparent px-2.5 text-xs font-medium text-muted transition-colors duration-150 hover:text-txt after:absolute after:inset-x-2.5 after:bottom-0 after:h-[3px] after:rounded-t-full after:bg-accent/70 after:opacity-0 after:transition-opacity after:duration-150 hover:after:opacity-55";
+const TOPBAR_NAV_BUTTON_ACTIVE_CLASSNAME = "text-accent after:opacity-100";
+const TOPBAR_ICON_BUTTON_CLASSNAME = "relative inline-flex h-[2.375rem] w-[2.375rem] min-h-[2.375rem] min-w-[2.375rem] shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent text-muted transition-colors duration-150 hover:text-txt after:absolute after:inset-x-2 after:bottom-0 after:h-[3px] after:rounded-t-full after:bg-accent/70 after:opacity-0 after:transition-opacity after:duration-150 hover:after:opacity-55";
+const TOPBAR_ICON_BUTTON_ACTIVE_CLASSNAME = "text-accent after:opacity-100";
+const TOPBAR_RIGHT_ICON_BUTTON_CLASSNAME = "inline-flex h-[2.375rem] w-[2.375rem] min-h-[2.375rem] min-w-[2.375rem] shrink-0 items-center justify-center rounded-md border border-transparent !bg-transparent text-muted shadow-none ring-0 transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent data-[state=open]:!bg-transparent";
+const TOPBAR_RIGHT_ICON_BUTTON_ACTIVE_CLASSNAME = "text-accent";
+const MOBILE_BOTTOM_NAV_BUTTON_CLASSNAME = "group relative mx-auto inline-flex h-11 w-full max-w-12 min-w-0 shrink-0 items-center justify-center rounded-md text-muted transition-colors duration-150 hover:text-txt after:absolute after:inset-x-2 after:top-0 after:h-[2px] after:rounded-b-full after:bg-accent/70 after:opacity-0 after:transition-opacity after:duration-150";
+const MOBILE_BOTTOM_NAV_BUTTON_ACTIVE_CLASSNAME = "text-accent after:opacity-100";
+const MAC_TITLEBAR_PADDING_STYLE = {
+    paddingInlineStart: "max(env(safe-area-inset-left, 0px), var(--eliza-macos-frame-left-inset, 80px))",
+    paddingInlineEnd: "0.75rem",
+    paddingTop: "max(env(safe-area-inset-top, 0px), var(--eliza-macos-frame-top-inset, 0px))",
+};
+function shouldShowMacDesktopTitleBar() {
+    if (!isElectrobunRuntime())
+        return false;
+    if (typeof navigator === "undefined")
+        return false;
+    if (!/Mac/i.test(navigator.userAgent))
+        return false;
+    if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent))
+        return false;
+    const route = resolveWindowShellRoute();
+    return !isDetachedWindowShell(route);
+}
+export function Header({ mobileLeft, pageRightExtras, transparent: _transparent = false, hideCloudCredits = false, tasksEventsPanelOpen = false, onToggleTasksPanel, }) {
+    const { activeGameRunId, activeOverlayApp, appRuns, browserEnabled, elizaCloudAuthRejected, elizaCloudConnected, elizaCloudCredits, elizaCloudCreditsCritical, elizaCloudCreditsError, elizaCloudCreditsLow, loadDropStatus, plugins, setState, setTab, setUiLanguage, setUiTheme, tab, t, uiLanguage, uiTheme, walletEnabled, } = useApp();
+    const isMobileViewport = useMediaQuery(MOBILE_HEADER_MEDIA_QUERY);
+    const [mobileRuntimeMode, setMobileRuntimeMode] = useState(readPersistedMobileRuntimeMode);
+    const collapseDesktopNavLabels = useMediaQuery(DESKTOP_LABEL_COLLAPSE_MEDIA_QUERY);
+    const showMacDesktopTitleBar = shouldShowMacDesktopTitleBar();
+    const titlebarPaddingStyle = showMacDesktopTitleBar
+        ? MAC_TITLEBAR_PADDING_STYLE
+        : undefined;
+    const showCloudStatus = !hideCloudCredits && !isMobileViewport;
+    const stopHeaderPointerPropagation = useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    useEffect(() => {
+        void loadDropStatus();
+    }, [loadDropStatus]);
+    useEffect(() => {
+        setState("chatMode", "power");
+    }, [setState]);
+    useEffect(() => {
+        if (typeof document === "undefined") {
+            return;
+        }
+        const handleMobileRuntimeModeChanged = () => {
+            setMobileRuntimeMode(readPersistedMobileRuntimeMode());
+        };
+        handleMobileRuntimeModeChanged();
+        document.addEventListener(MOBILE_RUNTIME_MODE_CHANGED_EVENT, handleMobileRuntimeModeChanged);
+        return () => {
+            document.removeEventListener(MOBILE_RUNTIME_MODE_CHANGED_EVENT, handleMobileRuntimeModeChanged);
+        };
+    }, []);
+    useEffect(() => {
+        if (typeof document === "undefined") {
+            return;
+        }
+        if (isMobileViewport) {
+            document.documentElement.classList.add("eliza-mobile-bottom-nav");
+        }
+        else {
+            document.documentElement.classList.remove("eliza-mobile-bottom-nav");
+        }
+        return () => {
+            document.documentElement.classList.remove("eliza-mobile-bottom-nav");
+        };
+    }, [isMobileViewport]);
+    useEffect(() => {
+        if (typeof document === "undefined") {
+            return;
+        }
+        const rootClassList = document.documentElement.classList;
+        if (showMacDesktopTitleBar) {
+            rootClassList.add("eliza-electrobun-custom-titlebar", "eliza-electrobun-macos-titlebar");
+        }
+        else {
+            rootClassList.remove("eliza-electrobun-custom-titlebar", "eliza-electrobun-macos-titlebar");
+        }
+        return () => {
+            rootClassList.remove("eliza-electrobun-custom-titlebar");
+            if (!rootClassList.contains("eliza-electrobun-frameless")) {
+                rootClassList.remove("eliza-electrobun-macos-titlebar");
+            }
+        };
+    }, [showMacDesktopTitleBar]);
+    const streamingEnabled = useMemo(() => plugins.some((plugin) => plugin.id === "streaming" && plugin.enabled), [plugins]);
+    const developerModeEnabled = useIsDeveloperMode();
+    // Plugin-contributed nav tabs from each loaded plugin's `app.navTabs`.
+    // Filter out developer-only tabs unless Developer Mode is enabled.
+    const dynamicNavTabs = useMemo(() => {
+        const out = [];
+        for (const plugin of plugins) {
+            if (!plugin.enabled)
+                continue;
+            const navTabs = plugin.app?.navTabs;
+            if (!navTabs?.length)
+                continue;
+            const appDeveloperOnly = plugin.app?.developerOnly === true;
+            for (const navTab of navTabs) {
+                const isDeveloperOnly = appDeveloperOnly || navTab.developerOnly === true;
+                if (isDeveloperOnly && !developerModeEnabled)
+                    continue;
+                out.push({
+                    tabId: navTab.id,
+                    label: navTab.label,
+                    navGroup: navTab.group,
+                });
+            }
+        }
+        return out;
+    }, [plugins, developerModeEnabled]);
+    const hideMobileLocalAutomations = isMobileViewport &&
+        mobileRuntimeMode === "local" &&
+        Capacitor.isNativePlatform();
+    const tabGroups = useMemo(() => getTabGroups(streamingEnabled, walletEnabled, browserEnabled, dynamicNavTabs, undefined, !hideMobileLocalAutomations), [
+        browserEnabled,
+        hideMobileLocalAutomations,
+        streamingEnabled,
+        walletEnabled,
+        dynamicNavTabs,
+    ]);
+    useEffect(() => {
+        if (hideMobileLocalAutomations &&
+            (tab === "automations" || tab === "triggers" || tab === "tasks")) {
+            setTab("apps");
+        }
+    }, [hideMobileLocalAutomations, setTab, tab]);
+    const settingsTabGroup = useMemo(() => tabGroups.find((group) => group.label === "Settings") ?? null, [tabGroups]);
+    const primaryDesktopGroups = useMemo(() => tabGroups.filter((group) => group.label !== "Settings"), [tabGroups]);
+    const localizeNavLabel = useCallback((label) => t(NAV_LABEL_I18N_KEY[label] ?? label, { defaultValue: label }), [t]);
+    // ── Active-app breadcrumb ────────────────────────────────────────────
+    // Surfaces "Apps > <AppName>" in the header center so the user knows which
+    // app they're inside. Three sources, in priority order:
+    //
+    //  1. Active game run (`activeGameRunId` resolved against `appRuns`).
+    //  2. Active full-screen overlay app (`activeOverlayApp` resolved against
+    //     the overlay registry — Companion, Shopify, Vincent, etc.).
+    //  3. The current tab is an "apps tool tab" — LifeOps, Plugins, Skills,
+    //     Trajectories, etc. These live at `/apps/<slug>` paths and belong to
+    //     the Apps nav group, so the user mentally treats them as apps.
+    //
+    // Overlay apps render full-screen on top of every tab (App.tsx gates on
+    // `activeOverlayApp !== null`), so the breadcrumb for sources (1) and (2)
+    // is correct regardless of the underlying `tab` value.
+    const activeAppCrumbLabel = useMemo(() => {
+        if (activeGameRunId) {
+            const run = appRuns.find((entry) => entry.runId === activeGameRunId);
+            if (run) {
+                const label = (run.displayName || run.appName).trim();
+                return label.length > 0 ? label : null;
+            }
+        }
+        if (activeOverlayApp) {
+            const overlay = getOverlayApp(activeOverlayApp);
+            if (overlay) {
+                const label = (overlay.displayName || overlay.name).trim();
+                return label.length > 0 ? label : null;
+            }
+            // Registry miss: don't leak the raw slug to the user. Hide the crumb
+            // until the registry resolves the app (or the active app changes).
+            return null;
+        }
+        if (isAppsToolTab(tab)) {
+            // Tool tabs use English titles via titleForTab; localizeNavLabel maps
+            // those to i18n keys when present (e.g. "LifeOps" → "nav.lifeops") and
+            // falls back to the literal label otherwise.
+            const title = titleForTab(tab);
+            const label = localizeNavLabel(title);
+            return label.length > 0 ? label : null;
+        }
+        return null;
+    }, [activeGameRunId, activeOverlayApp, appRuns, localizeNavLabel, tab]);
+    // Whether the active crumb originates from an overlay/game run vs a tool
+    // tab. The home-click handler differs between these: overlay/run crumbs
+    // need the state cleared, tool-tab crumbs just navigate.
+    const breadcrumbSourceIsApp = useMemo(() => {
+        if (activeGameRunId) {
+            return appRuns.some((entry) => entry.runId === activeGameRunId);
+        }
+        if (activeOverlayApp) {
+            return getOverlayApp(activeOverlayApp) !== undefined;
+        }
+        return false;
+    }, [activeGameRunId, activeOverlayApp, appRuns]);
+    // Breadcrumb "home" click sends the user back to the Apps catalog.
+    // For overlay apps and game runs this also clears the active state — that
+    // mirrors `OverlayAppContext.exitToApps()` ("Navigate back to the apps tab
+    // and close this overlay"). For tool tabs (LifeOps, Plugins, ...) we only
+    // navigate; there's no overlay state to clear.
+    const handleAppCrumbHomeClick = useCallback(() => {
+        if (breadcrumbSourceIsApp) {
+            setState("activeOverlayApp", null);
+            setState("activeGameRunId", "");
+        }
+        setTab("apps");
+    }, [breadcrumbSourceIsApp, setState, setTab]);
+    const localizeTabGroup = useCallback((group) => ({
+        description: group.description && NAV_DESCRIPTION_I18N_KEY[group.label]
+            ? t(NAV_DESCRIPTION_I18N_KEY[group.label], {
+                defaultValue: group.description,
+            })
+            : group.description,
+        label: localizeNavLabel(group.label),
+    }), [localizeNavLabel, t]);
+    const breadcrumbNode = useMemo(() => {
+        if (!activeAppCrumbLabel)
+            return null;
+        const appsLabel = localizeNavLabel("Apps");
+        const homeButtonClass = isMobileViewport
+            ? "inline-flex h-11 min-h-11 items-center rounded-[var(--radius-sm)] px-2 font-medium text-muted transition-colors hover:bg-bg-hover/40 hover:text-txt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+            : "inline-flex items-center rounded-[var(--radius-sm)] px-1 py-0.5 font-medium text-muted transition-colors hover:bg-bg-hover/40 hover:text-txt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40";
+        return (_jsxs("nav", { className: "flex min-w-0 items-center gap-1 px-2 text-xs", "aria-label": t("aria.breadcrumb", { defaultValue: "Breadcrumb" }), "data-testid": "header-breadcrumb", children: [_jsx("button", { type: "button", onClick: handleAppCrumbHomeClick, onPointerDown: stopHeaderPointerPropagation, "data-testid": "header-breadcrumb-home", "data-no-camera-drag": "true", className: homeButtonClass, children: appsLabel }), _jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted/60", "aria-hidden": "true" }), _jsx("span", { className: "truncate px-1 py-0.5 font-medium text-txt", "data-testid": "header-breadcrumb-current", "aria-current": "page", title: activeAppCrumbLabel, children: activeAppCrumbLabel })] }));
+    }, [
+        activeAppCrumbLabel,
+        handleAppCrumbHomeClick,
+        isMobileViewport,
+        localizeNavLabel,
+        stopHeaderPointerPropagation,
+        t,
+    ]);
+    const openCloudBilling = useCallback(() => {
+        setState("cloudDashboardView", "billing");
+        setTab("settings");
+    }, [setState, setTab]);
+    const settingsButtonLabel = settingsTabGroup
+        ? localizeTabGroup(settingsTabGroup).label
+        : t("nav.settings", { defaultValue: "Settings" });
+    const isSettingsActive = settingsTabGroup?.tabs.includes(tab) ?? false;
+    const desktopTaskToggle = onToggleTasksPanel ? (_jsx(Button, { size: "icon", variant: "ghost", className: `${TOPBAR_ICON_BUTTON_CLASSNAME} ${tasksEventsPanelOpen ? TOPBAR_ICON_BUTTON_ACTIVE_CLASSNAME : ""}`, onClick: onToggleTasksPanel, onPointerDown: stopHeaderPointerPropagation, "aria-label": t("taskseventspanel.Title", {
+            defaultValue: "Tasks & Events",
+        }), "aria-pressed": tasksEventsPanelOpen, style: HEADER_BUTTON_STYLE, "data-testid": "header-tasks-events-toggle", "data-no-camera-drag": "true", children: _jsx(ListTodo, { className: "pointer-events-none h-4 w-4" }) })) : null;
+    const settingsButton = (_jsx(Button, { size: "icon", variant: "ghost", className: `${TOPBAR_RIGHT_ICON_BUTTON_CLASSNAME} ${isSettingsActive ? TOPBAR_RIGHT_ICON_BUTTON_ACTIVE_CLASSNAME : ""}`, onClick: () => setTab(settingsTabGroup?.tabs[0] ?? "settings"), onPointerDown: stopHeaderPointerPropagation, "aria-label": settingsButtonLabel, title: settingsButtonLabel, style: HEADER_BUTTON_STYLE, "data-testid": "header-settings-button", "data-no-camera-drag": "true", children: _jsx(Settings, { className: "pointer-events-none h-4 w-4" }) }));
+    const mobileBottomNav = isMobileViewport ? (_jsx("nav", { className: "fixed inset-x-0 bottom-0 z-40 border-t border-border/55 bg-bg/95 pt-1.5 shadow-[0_-1px_0_rgba(255,255,255,0.04)] backdrop-blur-xl", style: {
+            paddingBottom: "max(0.375rem, env(safe-area-inset-bottom, 0px))",
+            paddingLeft: "max(0.5rem, var(--safe-area-left, 0px))",
+            paddingRight: "max(0.5rem, var(--safe-area-right, 0px))",
+        }, "aria-label": t("aria.navMenu"), "data-testid": "header-mobile-bottom-nav", "data-no-camera-drag": "true", children: _jsx("div", { className: "grid min-w-0 items-center gap-1 overflow-hidden", style: {
+                gridTemplateColumns: `repeat(${tabGroups.length}, minmax(0, 1fr))`,
+            }, children: tabGroups.map((group) => {
+                const primaryTab = group.tabs[0];
+                const isActive = group.tabs.includes(tab);
+                const localizedGroup = localizeTabGroup(group);
+                return (_jsx(Button, { variant: "ghost", "data-testid": `header-mobile-bottom-nav-button-${primaryTab}`, className: `${MOBILE_BOTTOM_NAV_BUTTON_CLASSNAME} ${isActive ? MOBILE_BOTTOM_NAV_BUTTON_ACTIVE_CLASSNAME : ""}`, onClick: () => setTab(primaryTab), onPointerDown: stopHeaderPointerPropagation, "aria-label": localizedGroup.label, "aria-current": isActive ? "page" : undefined, title: localizedGroup.label, style: HEADER_BUTTON_STYLE, "data-no-camera-drag": "true", children: _jsx(group.icon, { className: "pointer-events-none h-4.5 w-4.5 shrink-0" }) }, group.label));
+            }) }) })) : null;
+    const rightDesktopControls = (_jsxs("div", { className: "flex min-w-0 items-center justify-end gap-1.5", "data-no-camera-drag": "true", children: [pageRightExtras, desktopTaskToggle, showCloudStatus ? (_jsx(CloudStatusBadge, { connected: elizaCloudConnected, credits: elizaCloudCredits, creditsLow: elizaCloudCreditsLow, creditsCritical: elizaCloudCreditsCritical, authRejected: elizaCloudAuthRejected, creditsError: elizaCloudCreditsError, t: t, onClick: openCloudBilling, dataTestId: "header-cloud-status" })) : null, _jsx("div", { className: "max-[819px]:hidden", children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: "titlebar" }) }), _jsx("div", { className: "max-[819px]:hidden", children: _jsx(ThemeToggle, { uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, variant: "titlebar" }) }), settingsButton] }));
+    return (_jsxs(_Fragment, { children: [_jsx("header", { className: "sticky top-0 z-30 w-full select-none border-b border-border/50 bg-bg/88 shadow-[0_1px_0_rgba(255,255,255,0.04)] backdrop-blur-xl", style: { WebkitUserSelect: "none", userSelect: "none" }, children: _jsx("div", { className: showMacDesktopTitleBar ? "pointer-events-auto" : undefined, "data-window-titlebar": showMacDesktopTitleBar ? "true" : undefined, "data-testid": showMacDesktopTitleBar ? "desktop-window-titlebar" : undefined, children: _jsx("div", { className: isMobileViewport
+                            ? `grid ${mobileLeft || breadcrumbNode || pageRightExtras
+                                ? "min-h-[2.75rem]"
+                                : "min-h-0"} grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 px-2`
+                            : "grid min-h-[2.375rem] grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 px-3", "data-window-titlebar-padding": showMacDesktopTitleBar ? "true" : undefined, style: titlebarPaddingStyle, children: isMobileViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex min-w-0 items-center justify-start", "data-no-camera-drag": "true", children: mobileLeft }), _jsx("div", { className: breadcrumbNode
+                                        ? "flex h-[2.375rem] min-w-0 items-center justify-center gap-2"
+                                        : "pointer-events-none min-w-0", "data-testid": showMacDesktopTitleBar
+                                        ? "desktop-window-titlebar-drag-zone"
+                                        : undefined, "data-no-camera-drag": breadcrumbNode ? "true" : undefined, "aria-hidden": breadcrumbNode ? undefined : "true", children: breadcrumbNode }), _jsx("div", { className: "flex min-w-0 items-center justify-end", "data-no-camera-drag": "true", children: pageRightExtras })] })) : (_jsxs(_Fragment, { children: [_jsx("nav", { className: "scrollbar-hide flex min-w-0 items-center gap-1 overflow-x-auto pr-2", "aria-label": t("aria.navMenu"), "data-no-camera-drag": "true", children: primaryDesktopGroups.map((group) => {
+                                        const primaryTab = group.tabs[0];
+                                        const isActive = group.tabs.includes(tab);
+                                        const localizedGroup = localizeTabGroup(group);
+                                        return (_jsxs(Button, { variant: "ghost", "data-testid": `header-nav-button-${primaryTab}`, className: `${TOPBAR_NAV_BUTTON_CLASSNAME} ${isActive ? TOPBAR_NAV_BUTTON_ACTIVE_CLASSNAME : ""}`, onClick: () => setTab(primaryTab), onPointerDown: stopHeaderPointerPropagation, "aria-label": localizedGroup.label, title: collapseDesktopNavLabels
+                                                ? localizedGroup.label
+                                                : (localizedGroup.description ??
+                                                    localizedGroup.label), style: HEADER_BUTTON_STYLE, "data-no-camera-drag": "true", children: [_jsx(group.icon, { className: "pointer-events-none h-4 w-4 shrink-0" }), _jsx("span", { "data-testid": `header-nav-label-${primaryTab}`, className: `pointer-events-none truncate ${collapseDesktopNavLabels ? "hidden" : "inline"}`, children: localizedGroup.label })] }, group.label));
+                                    }) }), breadcrumbNode ? (_jsx("div", { className: "flex h-[2.375rem] min-w-0 items-center justify-center", "data-testid": showMacDesktopTitleBar
+                                        ? "desktop-window-titlebar-drag-zone"
+                                        : undefined, "data-no-camera-drag": "true", children: breadcrumbNode })) : (_jsx("div", { className: "pointer-events-none h-[2.375rem] w-[clamp(3rem,8vw,8rem)] min-w-0", "data-testid": showMacDesktopTitleBar
+                                        ? "desktop-window-titlebar-drag-zone"
+                                        : undefined, "aria-hidden": "true" })), rightDesktopControls] })) }) }) }), mobileBottomNav] }));
+}

package/components/shell/LoadingScreen.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Loading screen — NieR: Automata inspired loader with horizontal progress bar,
+ * phase label, and percentage indicator.
+ */
+import type { StartupPhase } from "../../state";
+interface LoadingScreenProps {
+    phase?: StartupPhase;
+    elapsedSeconds?: number;
+    vrmUrl?: string;
+}
+export declare function LoadingScreen({ phase, elapsedSeconds, vrmUrl, }: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LoadingScreen.d.ts.map

package/components/shell/LoadingScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/LoadingScreen.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAwBhD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAA0B,EAC1B,cAAc,EACd,MAAM,GACP,EAAE,kBAAkB,2CA+FpB"}

package/components/shell/LoadingScreen.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Loading screen — NieR: Automata inspired loader with horizontal progress bar,
+ * phase label, and percentage indicator.
+ */
+import { useEffect, useState } from "react";
+import { useApp } from "../../state/index.js";
+const PHASE_META = {
+    "starting-backend": {
+        labelKey: "loadingscreen.InitializingSystems",
+        defaultLabel: "Initializing systems",
+        progress: 20,
+    },
+    "initializing-agent": {
+        labelKey: "loadingscreen.LoadingNeuralNetwork",
+        defaultLabel: "Loading neural network",
+        progress: 50,
+    },
+    ready: {
+        labelKey: "loadingscreen.SystemsOnline",
+        defaultLabel: "Systems online",
+        progress: 100,
+    },
+};
+export function LoadingScreen({ phase = "starting-backend", elapsedSeconds, vrmUrl, }) {
+    const { t } = useApp();
+    const [vrmCached, setVrmCached] = useState(false);
+    const [fetchProgress, setFetchProgress] = useState(0);
+    const [, setRuntimeElapsedSeconds] = useState(0);
+    useEffect(() => {
+        if (typeof elapsedSeconds === "number")
+            return;
+        const startedAt = Date.now();
+        const timer = setInterval(() => {
+            setRuntimeElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [elapsedSeconds]);
+    useEffect(() => {
+        if (!vrmUrl)
+            return;
+        const controller = new AbortController();
+        (async () => {
+            try {
+                const response = await fetch(vrmUrl, { signal: controller.signal });
+                const contentLength = Number(response.headers.get("content-length") || 0);
+                if (!contentLength || !response.body) {
+                    setVrmCached(true);
+                    return;
+                }
+                const reader = response.body.getReader();
+                let received = 0;
+                for (;;) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                        break;
+                    received += value.byteLength;
+                    setFetchProgress(Math.min(received / contentLength, 1));
+                }
+                setVrmCached(true);
+            }
+            catch {
+                // Non-blocking — VRM will load normally later.
+            }
+        })();
+        return () => controller.abort();
+    }, [vrmUrl]);
+    const meta = PHASE_META[phase];
+    let progress;
+    if (vrmCached) {
+        progress = Math.max(meta.progress, 80);
+    }
+    else if (fetchProgress > 0) {
+        progress = Math.max(meta.progress, Math.round(55 + fetchProgress * 25));
+    }
+    else {
+        progress = meta.progress;
+    }
+    const label = vrmCached && phase !== "ready"
+        ? t("loadingscreen.LoadingAvatar", { defaultValue: "Loading avatar" })
+        : t(meta.labelKey, { defaultValue: meta.defaultLabel });
+    return (_jsx("div", { className: "flex items-center justify-center h-dvh bg-bg relative overflow-hidden", children: _jsxs("div", { className: "flex flex-col items-start gap-3.5 w-[420px] max-w-[90vw]", children: [_jsxs("div", { className: "font-mono text-sm font-normal tracking-[0.35em] uppercase text-txt/70 select-none", children: [t("common.loading", { defaultValue: "Loading" }), _jsx("span", { className: "loading-screen__dots" })] }), _jsxs("div", { className: "flex items-center gap-4 w-full", children: [_jsx("div", { className: "flex-1 h-1 bg-bg-accent overflow-hidden relative", children: _jsx("div", { className: "h-full bg-accent relative shadow-[0_0_8px_var(--accent-subtle)]", style: {
+                                    width: `${progress}%`,
+                                    transition: "width 1.5s ease-out",
+                                } }) }), _jsxs("div", { className: "font-mono text-sm font-normal tracking-[0.15em] text-white/60 min-w-[48px] text-right select-none", children: [progress, " %"] })] }), _jsx("div", { className: "font-mono text-xs-tight font-normal tracking-[0.12em] uppercase text-white/35 select-none", children: label })] }) }));
+}

package/components/shell/PairingCommandHint.d.ts

@@ -0,0 +1,4 @@
+export declare function PairingCommandHint({ remoteUrl }: {
+    remoteUrl?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PairingCommandHint.d.ts.map

package/components/shell/PairingCommandHint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PairingCommandHint.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/PairingCommandHint.tsx"],"names":[],"mappings":"AAMA,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAwHvE"}

package/components/shell/PairingCommandHint.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { Copy, RefreshCw, Server } from "lucide-react";
+import { useMemo } from "react";
+import { useApp } from "../../state/index.js";
+import { buildPairingCodeCommandInfo } from "./pairing-command.js";
+export function PairingCommandHint({ remoteUrl }) {
+    const { copyToClipboard, setActionNotice, t } = useApp();
+    const commandInfo = useMemo(() => buildPairingCodeCommandInfo(remoteUrl), [remoteUrl]);
+    const commandRows = commandInfo.sshCommand
+        ? [
+            {
+                label: t("pairingcommandhint.sshCommandLabel", {
+                    defaultValue: "From this computer",
+                }),
+                command: commandInfo.sshCommand,
+            },
+            {
+                label: t("pairingcommandhint.serverCommandLabel", {
+                    defaultValue: "On the server",
+                }),
+                command: commandInfo.serverCommand,
+            },
+        ]
+        : [
+            {
+                label: t("pairingcommandhint.serverCommandLabel", {
+                    defaultValue: "On the server",
+                }),
+                command: commandInfo.serverCommand,
+            },
+        ];
+    async function copyCommand(command) {
+        try {
+            await copyToClipboard(command);
+            setActionNotice(t("pairingcommandhint.copied", {
+                defaultValue: "Pairing command copied.",
+            }), "success", 2200);
+        }
+        catch {
+            setActionNotice(t("pairingcommandhint.copyFailed", {
+                defaultValue: "Could not copy pairing command.",
+            }), "error", 3200);
+        }
+    }
+    return (_jsxs("div", { className: "rounded-lg border border-border/60 bg-bg/50 p-4 text-txt shadow-sm", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border/60 bg-bg/80 text-muted", children: _jsx(Server, { className: "h-4 w-4", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-semibold text-txt-strong", children: t("pairingcommandhint.title", {
+                                    defaultValue: "Get a one-time code",
+                                }) }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted", children: commandInfo.isLoopback
+                                    ? t("pairingcommandhint.localDescription", {
+                                        defaultValue: "Run this on the same machine as the agent, then paste the returned code.",
+                                    })
+                                    : t("pairingcommandhint.remoteDescription", {
+                                        defaultValue: "Ask the server owner to generate a code. If you can SSH into the server, run the first command.",
+                                    }) })] })] }), commandRows.map((row) => (_jsx(CommandLine, { label: row.label, command: row.command, copyLabel: t("pairingcommandhint.copy", { defaultValue: "Copy" }), onCopy: copyCommand }, row.command))), _jsxs("div", { className: "mt-3 space-y-1 text-[11px] leading-relaxed text-muted", children: [commandInfo.sshTarget ? (_jsxs("p", { children: [t("pairingcommandhint.editSshTargetPrefix", {
+                                defaultValue: "If the app URL is a proxy, CDN, or dashboard domain, replace",
+                            }), " ", _jsx("span", { className: "font-mono text-txt", children: commandInfo.sshTarget }), " ", t("pairingcommandhint.editSshTargetSuffix", {
+                                defaultValue: "with your real SSH user and host.",
+                            })] })) : null, _jsxs("p", { className: "flex items-start gap-1.5", children: [_jsx(RefreshCw, { className: "mt-0.5 h-3 w-3 shrink-0", "aria-hidden": true }), _jsx("span", { children: t("pairingcommandhint.refreshHint", {
+                                    defaultValue: "Codes last 10 minutes. If the countdown is low or expired, run the command again.",
+                                }) })] }), commandInfo.usesDefaultPort ? (_jsx("p", { children: t("pairingcommandhint.defaultPortHint", {
+                            defaultValue: "No port was in the URL, so this assumes the agent listens on 2138 locally. Change 2138 if your server uses a custom ELIZA_PORT.",
+                        }) })) : null] })] }));
+}
+function CommandLine({ label, command, copyLabel, onCopy, }) {
+    return (_jsxs("div", { className: "mt-3", children: [_jsxs("div", { className: "mb-1.5 flex items-center justify-between gap-3", children: [_jsx("div", { className: "min-w-0", children: _jsx("p", { style: {
+                                fontFamily: "'Courier New', 'Courier', 'Monaco', monospace",
+                            }, className: "text-[10px] font-semibold uppercase text-muted", children: label }) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 shrink-0 gap-1.5 rounded-md px-2.5 text-xs font-semibold", onClick: () => void onCopy(command), children: [_jsx(Copy, { className: "h-3.5 w-3.5", "aria-hidden": true }), copyLabel] })] }), _jsx("code", { className: "block max-w-full select-all overflow-x-auto whitespace-pre rounded-md border border-border/60 bg-bg/80 px-3 py-2 font-mono text-[11px] leading-relaxed text-txt", children: command })] }));
+}

package/components/shell/PairingView.d.ts

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

package/components/shell/PairingView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PairingView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/PairingView.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,WAAW,4CAkM1B"}

package/components/shell/PairingView.js

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

package/components/shell/RestartBanner.d.ts

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

package/components/shell/RestartBanner.d.ts.map

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

package/components/shell/RestartBanner.js

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