@elizaos/agent 2.0.0-alpha.441 → 2.0.0-alpha.501

package/packages/app-core/src/components/shell/RuntimeGate.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * RuntimeGate — the single pre-chat setup screen.
  *
@@ -19,19 +19,36 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * dispatches `ONBOARDING_COMPLETE` to the startup coordinator and hands
  * control to the main app shell.
  */
-import { Button, Card, CardContent, Input, Spinner } from "@elizaos/ui";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Card, CardContent, Checkbox, Input, Spinner, TooltipHint, } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { client } from "../../api";
 import { discoverGatewayEndpoints, gatewayEndpointToApiBase, } from "../../bridge/gateway-discovery";
 import { normalizeLanguage } from "../../i18n";
-import { persistMobileRuntimeModeForServerTarget } from "../../onboarding/mobile-runtime-mode";
-import { isDesktopPlatform } from "../../platform/init";
+import { persistMobileRuntimeModeForServerTarget, readPersistedMobileRuntimeMode, } from "../../onboarding/mobile-runtime-mode";
+import { shouldShowLocalOption } from "../../onboarding/probe-local-agent";
+import { isAndroid, isDesktopPlatform, isIOS } from "../../platform/init";
 import { addAgentProfile, clearPersistedActiveServer, savePersistedActiveServer, useApp, } from "../../state";
+import { resolveAppAssetUrl } from "../../utils";
 import { LanguageDropdown } from "../shared/LanguageDropdown";
+import { ThemeToggle } from "../shared/ThemeToggle";
 const MONO_FONT = "'Courier New', 'Courier', 'Monaco', monospace";
 const DEFAULT_AUTO_AGENT_NAME = "My Agent";
-function shouldShowLocalOption(isDesktop, isDev) {
-    return isDesktop || isDev;
+const LOCAL_AGENT_API_BASE = "http://127.0.0.1:31337";
+const CHOICE_IMAGE_PATH = {
+    cloud: "app-heroes/agentDOD.png",
+    local: "app-heroes/runtime-debugger.png",
+    remote: "app-heroes/log-viewer.png",
+};
+function resolveRuntimeChoices(args) {
+    if (args.isAndroid && args.localProbePending)
+        return [];
+    if (args.isAndroid && args.showLocalOption)
+        return ["local"];
+    if (args.isIOS || args.isAndroid)
+        return ["cloud", "remote"];
+    if (args.isDesktop || args.isDev)
+        return ["cloud", "local", "remote"];
+    return ["cloud", "remote"];
 }
 function statusBadge(status) {
     switch (status) {
@@ -52,8 +69,78 @@ function statusBadge(status) {
             };
     }
 }
+function runtimeChoiceDetails(choice, t, androidLocal) {
+    switch (choice) {
+        case "cloud":
+            return {
+                label: t("runtimegate.cloudOptionLabel", { defaultValue: "CLOUD" }),
+                eyebrow: t("runtimegate.cloudEyebrow", {
+                    defaultValue: "Eliza Cloud",
+                }),
+                title: t("runtimegate.cloudTitle", {
+                    defaultValue: "Run in Eliza Cloud",
+                }),
+                description: t("runtimegate.cloudDesc", {
+                    defaultValue: "Hosted agent with managed LLMs and connectors. Fastest start.",
+                }),
+                imageSrc: resolveAppAssetUrl(CHOICE_IMAGE_PATH.cloud),
+            };
+        case "local":
+            return {
+                label: t("runtimegate.localOptionLabel", { defaultValue: "LOCAL" }),
+                eyebrow: androidLocal
+                    ? t("runtimegate.localEyebrowOnDevice", {
+                        defaultValue: "On device",
+                    })
+                    : t("runtimegate.localEyebrow", {
+                        defaultValue: "This device",
+                    }),
+                title: androidLocal
+                    ? t("runtimegate.localTitleAndroid", {
+                        defaultValue: "Local Agent (Beta)",
+                    })
+                    : t("runtimegate.localTitle", {
+                        defaultValue: "Run a local agent",
+                    }),
+                description: androidLocal
+                    ? t("runtimegate.localDescAndroid", {
+                        defaultValue: "Runs the full Eliza agent on this device. No cloud needed.",
+                    })
+                    : t("runtimegate.localDesc", {
+                        defaultValue: "Keep the agent on this machine. You'll pick a provider after start.",
+                    }),
+                imageSrc: resolveAppAssetUrl(CHOICE_IMAGE_PATH.local),
+            };
+        case "remote":
+            return {
+                label: t("runtimegate.remoteOptionLabel", { defaultValue: "REMOTE" }),
+                eyebrow: t("runtimegate.remoteEyebrow", {
+                    defaultValue: "Remote agent",
+                }),
+                title: t("runtimegate.remoteTitle", {
+                    defaultValue: "Connect to an existing agent",
+                }),
+                description: t("runtimegate.remoteDesc", {
+                    defaultValue: "Point at an agent you're already running (e.g. on your Mac).",
+                }),
+                imageSrc: resolveAppAssetUrl(CHOICE_IMAGE_PATH.remote),
+            };
+    }
+}
+function selectChoiceLabel(choice, t) {
+    switch (choice) {
+        case "cloud":
+            return t("runtimegate.selectCloud", { defaultValue: "Select Cloud" });
+        case "local":
+            return t("runtimegate.selectLocal", {
+                defaultValue: "Start Local Agent",
+            });
+        case "remote":
+            return t("runtimegate.selectRemote", { defaultValue: "Select Remote" });
+    }
+}
 export function RuntimeGate() {
-    const { setState, completeOnboarding, elizaCloudConnected, elizaCloudLoginBusy, handleCloudLogin, startupCoordinator, uiLanguage, t, } = useApp();
+    const { setState, completeOnboarding, elizaCloudConnected, elizaCloudLoginBusy, handleCloudLogin, startupCoordinator, uiLanguage, uiTheme, setUiTheme, t, } = useApp();
     const setUiLanguage = useCallback((lang) => setState("uiLanguage", normalizeLanguage(lang)), [setState]);
     const [subView, setSubView] = useState("chooser");
     const [discoveredGateways, setDiscoveredGateways] = useState([]);
@@ -66,10 +153,77 @@ export function RuntimeGate() {
     // Remote sub-view
     const [remoteUrl, setRemoteUrl] = useState("");
     const [remoteToken, setRemoteToken] = useState("");
-    const showLocalOption = shouldShowLocalOption(isDesktopPlatform(), Boolean(import.meta.env.DEV));
+    // Local embeddings toggle (elizacloud only, default unchecked)
+    const [useLocalEmbeddings, setUseLocalEmbeddings] = useState(false);
+    // Local-tile visibility. On desktop/dev this is true synchronously; on
+    // Android it depends on a live probe of the on-device agent's
+    // `/api/health`, so the tile is hidden until the probe resolves. Other
+    // platforms never see it. `null` means "still probing" — Android waits
+    // briefly so AOSP builds can collapse to the local-only path.
+    const isDesktop = isDesktopPlatform();
+    const isDev = Boolean(import.meta.env.DEV);
+    const synchronousLocal = isDesktop || isDev;
+    const [localProbeResult, setLocalProbeResult] = useState(synchronousLocal ? true : isAndroid ? null : false);
+    useEffect(() => {
+        if (synchronousLocal)
+            return;
+        if (!isAndroid)
+            return;
+        let cancelled = false;
+        let pollTimer = null;
+        // Re-poll every 4 s while the gate is mounted and the agent is not yet
+        // reachable. The on-device agent can take 30+ s to come up after a cold
+        // boot (PGlite migration + GGUF model warmup). A one-shot probe at
+        // mount time would otherwise leave the user stuck on Cloud/Remote even
+        // though the agent is racing toward live. Stops polling once a positive
+        // result is in — `probe-local-agent`'s positive cache then keeps it
+        // stable for the rest of the session.
+        const poll = () => {
+            shouldShowLocalOption({ isDesktop, isDev, isAndroid })
+                .then((ok) => {
+                if (cancelled)
+                    return;
+                setLocalProbeResult(ok);
+                if (!ok) {
+                    pollTimer = setTimeout(poll, 4_000);
+                }
+            })
+                .catch(() => {
+                if (cancelled)
+                    return;
+                setLocalProbeResult(false);
+                pollTimer = setTimeout(poll, 4_000);
+            });
+        };
+        poll();
+        return () => {
+            cancelled = true;
+            if (pollTimer)
+                clearTimeout(pollTimer);
+        };
+    }, [isDesktop, isDev, synchronousLocal]);
+    const showLocalOption = localProbeResult === true;
+    const localProbePending = localProbeResult === null;
+    const runtimeChoices = useMemo(() => resolveRuntimeChoices({
+        isAndroid,
+        isIOS,
+        isDesktop,
+        isDev,
+        showLocalOption,
+        localProbePending,
+    }), [isDesktop, isDev, showLocalOption, localProbePending]);
+    const runtimeChoiceKey = runtimeChoices.join("|");
+    const [selectedChoice, setSelectedChoice] = useState("cloud");
+    useEffect(() => {
+        if (runtimeChoices.length === 0)
+            return;
+        if (runtimeChoices.includes(selectedChoice))
+            return;
+        setSelectedChoice(runtimeChoices[0]);
+    }, [runtimeChoices, selectedChoice]);
     // ── Gateway discovery (LAN autodetect) ────────────────────────────
     useEffect(() => {
-        if (subView !== "chooser")
+        if (subView !== "chooser" && subView !== "remote")
             return;
         let cancelled = false;
         discoverGatewayEndpoints()
@@ -119,12 +273,48 @@ export function RuntimeGate() {
         persistMobileRuntimeModeForServerTarget("elizacloud");
         setState("onboardingServerTarget", "elizacloud");
         startupCoordinator.dispatch({ type: "SPLASH_CLOUD_SKIP" });
+        // Apply embedding preference before handing off. Non-blocking: if this
+        // fails the user can adjust it from Settings → Provider.
+        if (useLocalEmbeddings) {
+            void client
+                .switchProvider("elizacloud", undefined, undefined, {
+                useLocalEmbeddings: true,
+            })
+                .catch((err) => {
+                console.warn("[RuntimeGate] Failed to apply local embeddings preference", err);
+            });
+        }
         completeOnboarding();
-    }, [completeOnboarding, setState, startupCoordinator]);
+    }, [completeOnboarding, setState, startupCoordinator, useLocalEmbeddings]);
     const finishAsLocal = useCallback(() => {
-        client.setBaseUrl(null);
-        client.setToken(null);
-        clearPersistedActiveServer();
+        if (isAndroid) {
+            // Android: the local agent runs as a foreground service inside the
+            // app and always listens on loopback `127.0.0.1:31337`. The WebView
+            // origin is `https://localhost` (Capacitor) or `file://`, so a null
+            // base URL does not reach the agent — pin it explicitly. We persist
+            // it as a `remote` active server pointing at loopback so the
+            // existing startup-phase-restore branch hydrates the API base on
+            // next launch; the `local` mobile runtime mode records the
+            // distinction for any UI that needs it.
+            client.setBaseUrl(LOCAL_AGENT_API_BASE);
+            client.setToken(null);
+            savePersistedActiveServer({
+                id: "local:android",
+                kind: "remote",
+                label: "On-device agent",
+                apiBase: LOCAL_AGENT_API_BASE,
+            });
+            addAgentProfile({
+                kind: "remote",
+                label: "On-device agent",
+                apiBase: LOCAL_AGENT_API_BASE,
+            });
+        }
+        else {
+            client.setBaseUrl(null);
+            client.setToken(null);
+            clearPersistedActiveServer();
+        }
         persistMobileRuntimeModeForServerTarget("local");
         setState("onboardingServerTarget", "local");
         startupCoordinator.dispatch({ type: "SPLASH_CONTINUE" });
@@ -132,6 +322,22 @@ export function RuntimeGate() {
         // placeholder handles the missing-provider case.
         completeOnboarding();
     }, [completeOnboarding, setState, startupCoordinator]);
+    // Auto-pick the on-device agent on Android when (a) the probe shows the
+    // agent is up and (b) the user hasn't already chosen a runtime. The
+    // RuntimeGate then never renders — the user lands directly in chat. If
+    // they later want a different agent (cloud / remote), the Settings ▸
+    // Runtime view re-opens this picker. The auto-pick is intentionally one
+    // shot: once the mode is persisted any subsequent launch reads it
+    // directly from storage and skips this path.
+    useEffect(() => {
+        if (!isAndroid)
+            return;
+        if (!showLocalOption)
+            return;
+        if (readPersistedMobileRuntimeMode() != null)
+            return;
+        finishAsLocal();
+    }, [finishAsLocal, showLocalOption]);
     const finishAsRemoteGateway = useCallback((gateway) => {
         const apiBase = gatewayEndpointToApiBase(gateway);
         client.setBaseUrl(apiBase);
@@ -174,6 +380,19 @@ export function RuntimeGate() {
         setState,
         startupCoordinator,
     ]);
+    const handleSelectChoice = useCallback(() => {
+        switch (selectedChoice) {
+            case "cloud":
+                setSubView("cloud");
+                return;
+            case "local":
+                finishAsLocal();
+                return;
+            case "remote":
+                setSubView("remote");
+                return;
+        }
+    }, [finishAsLocal, selectedChoice]);
     // ── Cloud: provision + connect ─────────────────────────────────────
     const provisionAndConnect = useCallback(async (agentId) => {
         setCloudStage("provisioning");
@@ -291,35 +510,37 @@ export function RuntimeGate() {
     }, []);
     // ── Render: chooser ────────────────────────────────────────────────
     if (subView === "chooser") {
-        return (_jsxs(GateShell, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, children: [_jsx(GateHeader, { t: t }), _jsxs("div", { className: "mt-6 flex w-full flex-col gap-3 text-left", children: [discoveredGateways.length > 0 && (_jsx("div", { className: "flex flex-col gap-3", children: discoveredGateways.map((gateway) => (_jsx(Card, { className: "rounded-xl border-white/20 bg-white/[0.07] shadow-lg backdrop-blur-xl", children: _jsxs(CardContent, { className: "flex items-center justify-between gap-3 px-5 py-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/60", children: gateway.isLocal
-                                                        ? t("startupshell.LocalNetworkAgent", {
-                                                            defaultValue: "LAN agent",
-                                                        })
-                                                        : t("startupshell.NetworkAgent", {
-                                                            defaultValue: "Network agent",
-                                                        }) }), _jsx("p", { className: "truncate text-sm font-semibold text-white/95", children: gateway.name }), _jsx("p", { className: "truncate text-xs-tight text-white/50", children: gateway.host })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "shrink-0 rounded-lg border-[#f0b90b]/40 bg-[#f0b90b]/15 text-[#fffaee] font-semibold hover:bg-[#f0b90b]/25 hover:border-[#f0b90b]/60", onClick: () => finishAsRemoteGateway(gateway), children: t("common.connect", { defaultValue: "Connect" }) })] }) }, gateway.stableId))) })), _jsx(ChoiceCard, { recommended: true, eyebrow: t("runtimegate.cloudEyebrow", {
-                                defaultValue: "Eliza Cloud",
-                            }), title: t("runtimegate.cloudTitle", {
-                                defaultValue: "Run in Eliza Cloud",
-                            }), description: t("runtimegate.cloudDesc", {
-                                defaultValue: "Hosted agent with managed LLMs and connectors. Fastest start.",
-                            }), onClick: () => setSubView("cloud") }), showLocalOption && (_jsx(ChoiceCard, { eyebrow: t("runtimegate.localEyebrow", {
-                                defaultValue: "This device",
-                            }), title: t("runtimegate.localTitle", {
-                                defaultValue: "Run a local agent",
-                            }), description: t("runtimegate.localDesc", {
-                                defaultValue: "Keep the agent on this machine. You'll pick a provider after start.",
-                            }), onClick: finishAsLocal })), _jsx(ChoiceCard, { eyebrow: t("runtimegate.remoteEyebrow", {
-                                defaultValue: "Remote agent",
-                            }), title: t("runtimegate.remoteTitle", {
-                                defaultValue: "Connect to an existing agent",
-                            }), description: t("runtimegate.remoteDesc", {
-                                defaultValue: "Point at an agent you're already running (e.g. on your Mac).",
-                            }), onClick: () => setSubView("remote") })] })] }));
+        const localOnly = runtimeChoiceKey === "local";
+        return (_jsxs(GateShell, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, children: [_jsx(GateHeader, { t: t }), runtimeChoices.length === 0 ? (_jsxs("div", { className: "mt-8 flex w-full items-center justify-center gap-3 border-2 border-[#f0b90b]/45 bg-black/70 px-5 py-5 text-[#ffe88a]", children: [_jsx(Spinner, { className: "h-4 w-4" }), _jsx("span", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase tracking-[0.16em]", children: t("runtimegate.localProbing", {
+                                defaultValue: "Checking for on-device agent...",
+                            }) })] })) : (_jsxs(_Fragment, { children: [_jsxs("fieldset", { className: `mt-5 grid w-full gap-2.5 text-left md:mt-7 md:gap-3 ${runtimeChoices.length === 3 ? "md:grid-cols-3" : ""}`, children: [_jsx("legend", { className: "sr-only", children: t("runtimegate.subtitle", {
+                                        defaultValue: "Where should your agent run?",
+                                    }) }), runtimeChoices.map((choice) => {
+                                    const details = runtimeChoiceDetails(choice, t, isAndroid);
+                                    return (_jsx(ChoiceCard, { choice: choice, selected: selectedChoice === choice, disabled: localOnly, statusLabel: selectedChoice === choice
+                                            ? t("runtimegate.optionSelected", {
+                                                defaultValue: "Selected",
+                                            })
+                                            : t("runtimegate.optionAvailable", {
+                                                defaultValue: "Available",
+                                            }), ...details, onClick: () => setSelectedChoice(choice) }, choice));
+                                })] }), _jsxs("div", { className: "mt-3 flex w-full flex-col gap-2 sm:mt-5 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "hidden min-w-0 text-3xs uppercase tracking-[0.16em] text-white/70 sm:block", children: localOnly
+                                        ? t("runtimegate.localOnlyHint", {
+                                            defaultValue: "This build runs your agent on this device.",
+                                        })
+                                        : t("runtimegate.selectedHint", {
+                                            defaultValue: "{{target}} selected",
+                                            target: runtimeChoiceDetails(selectedChoice, t, isAndroid)
+                                                .label,
+                                        }) }), _jsx(Button, { type: "button", variant: "default", className: "min-h-12 w-full border-2 border-black bg-[#ffe600] px-8 py-3 text-sm font-black uppercase tracking-[0.18em] text-black shadow-[5px_5px_0_rgba(0,0,0,0.72)] transition-transform duration-150 hover:-translate-y-0.5 hover:bg-white active:translate-y-0 sm:w-auto", style: {
+                                        borderRadius: 0,
+                                        clipPath: "polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)",
+                                        fontFamily: MONO_FONT,
+                                    }, onClick: handleSelectChoice, children: selectChoiceLabel(selectedChoice, t) })] })] }))] }));
     }
     // ── Render: cloud ──────────────────────────────────────────────────
     if (subView === "cloud") {
-        return (_jsxs(GateShell, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, children: [_jsx(GateHeader, { t: t }), cloudStage === "login" && (_jsxs("div", { className: "mt-4 flex w-full flex-col gap-3 text-left", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/60", children: t("runtimegate.cloudLoginEyebrow", {
+        return (_jsxs(GateShell, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, children: [_jsx(GateHeader, { t: t }), cloudStage !== "connecting" && (_jsx(LocalEmbeddingsCheckbox, { checked: useLocalEmbeddings, onCheckedChange: setUseLocalEmbeddings })), cloudStage === "login" && (_jsxs("div", { className: "mt-4 flex w-full max-w-[34rem] flex-col gap-3 text-left", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/60", children: t("runtimegate.cloudLoginEyebrow", {
                                 defaultValue: "Sign in to Eliza Cloud",
                             }) }), _jsx(Button, { type: "button", variant: "default", className: "justify-center rounded-xl border border-[#f0b90b]/40 bg-[#f0b90b]/15 px-3 py-5 text-[#f0b90b] font-semibold shadow-lg hover:bg-[#f0b90b]/25 hover:border-[#f0b90b]/60", onClick: handleLogin, disabled: elizaCloudLoginBusy, children: elizaCloudLoginBusy ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: "h-4 w-4" }), t("runtimegate.waitingForAuth", {
                                         defaultValue: "Waiting for auth...",
@@ -329,7 +550,7 @@ export function RuntimeGate() {
                     cloudStage === "auto-creating" ||
                     cloudStage === "creating" ||
                     cloudStage === "provisioning" ||
-                    cloudStage === "connecting") && (_jsxs("div", { className: "mt-6 flex w-full flex-col items-center gap-3", children: [_jsx(Spinner, { className: "h-6 w-6 text-white/60" }), _jsxs("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/50", children: [cloudStage === "loading" &&
+                    cloudStage === "connecting") && (_jsxs("div", { className: "mt-6 flex w-full max-w-[34rem] flex-col items-center gap-3", children: [_jsx(Spinner, { className: "h-6 w-6 text-white/60" }), _jsxs("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/50", children: [cloudStage === "loading" &&
                                     t("runtimegate.loadingAgents", {
                                         defaultValue: "Loading your agent...",
                                     }), cloudStage === "auto-creating" &&
@@ -345,7 +566,7 @@ export function RuntimeGate() {
                                         })), cloudStage === "connecting" &&
                                     t("runtimegate.connecting", {
                                         defaultValue: "Connecting...",
-                                    })] })] })), cloudStage === "agent-list" && (_jsxs("div", { className: "mt-4 flex w-full flex-col gap-3 text-left", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/60", children: t("runtimegate.yourAgents", {
+                                    })] })] })), cloudStage === "agent-list" && (_jsxs("div", { className: "mt-4 flex w-full max-w-[34rem] flex-col gap-3 text-left", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/60", children: t("runtimegate.yourAgents", {
                                         defaultValue: "Your cloud agents",
                                     }) }), _jsx("button", { type: "button", onClick: handleRefreshAgents, style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/50 hover:text-white underline", children: t("runtimegate.retry", { defaultValue: "Retry" }) })] }), error && (_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs text-red-400", children: error })), agents.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 max-h-48 overflow-y-auto", children: agents.map((agent) => {
                                 const badge = statusBadge(agent.status);
@@ -355,34 +576,65 @@ export function RuntimeGate() {
                             }) })), _jsx(BackButton, { t: t, onClick: () => setSubView("chooser") })] }))] }));
     }
     // ── Render: remote ─────────────────────────────────────────────────
-    return (_jsxs(GateShell, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, children: [_jsx(GateHeader, { t: t }), _jsxs("div", { className: "mt-4 flex w-full flex-col gap-3 text-left", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/60", children: t("runtimegate.remoteConnectEyebrow", {
+    return (_jsxs(GateShell, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, children: [_jsx(GateHeader, { t: t }), _jsxs("div", { className: "mt-4 flex w-full max-w-[34rem] flex-col gap-3 text-left", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-white/60", children: t("runtimegate.remoteConnectEyebrow", {
                             defaultValue: "Connect to a remote agent",
-                        }) }), _jsx(Input, { placeholder: t("runtimegate.remoteUrlPlaceholder", {
+                        }) }), discoveredGateways.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: discoveredGateways.map((gateway) => (_jsx(Card, { className: "border-2 border-[#f0b90b]/40 bg-black/58 text-white shadow-[4px_4px_0_rgba(0,0,0,0.52)]", style: { borderRadius: 0 }, children: _jsxs(CardContent, { className: "flex items-center justify-between gap-3 px-3 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-[#ffe600]/80", children: gateway.isLocal
+                                                    ? t("startupshell.LocalNetworkAgent", {
+                                                        defaultValue: "LAN agent",
+                                                    })
+                                                    : t("startupshell.NetworkAgent", {
+                                                        defaultValue: "Network agent",
+                                                    }) }), _jsx("p", { className: "truncate text-sm font-semibold text-white/95", children: gateway.name }), _jsx("p", { className: "truncate text-xs-tight text-white/52", children: gateway.host })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "shrink-0 rounded-none border-2 border-black bg-[#ffe600] text-xs font-black uppercase tracking-[0.12em] text-black hover:bg-white", onClick: () => finishAsRemoteGateway(gateway), children: t("common.connect", { defaultValue: "Connect" }) })] }) }, gateway.stableId))) })), _jsx(Input, { placeholder: t("runtimegate.remoteUrlPlaceholder", {
                             defaultValue: "https://your-agent.example.com",
-                        }), value: remoteUrl, onChange: (e) => setRemoteUrl(e.target.value), className: "h-10 border border-white/20 bg-transparent text-white text-sm placeholder:text-white/40" }), _jsx(Input, { placeholder: t("runtimegate.remoteTokenPlaceholder", {
+                        }), value: remoteUrl, onChange: (e) => setRemoteUrl(e.target.value), className: "h-11 rounded-none border-2 border-[#f0b90b]/35 bg-black/48 text-white text-sm placeholder:text-white/40" }), _jsx(Input, { placeholder: t("runtimegate.remoteTokenPlaceholder", {
                             defaultValue: "Access token (optional)",
-                        }), type: "password", value: remoteToken, onChange: (e) => setRemoteToken(e.target.value), className: "h-10 border border-white/20 bg-transparent text-white text-sm placeholder:text-white/40" }), _jsx(Button, { type: "button", variant: "default", className: "justify-center rounded-xl border border-[#f0b90b]/40 bg-[#f0b90b]/15 px-3 py-4 text-[#f0b90b] font-semibold shadow-lg hover:bg-[#f0b90b]/25 hover:border-[#f0b90b]/60", onClick: finishAsRemote, disabled: !remoteUrl.trim(), children: t("common.connect", { defaultValue: "Connect" }) }), _jsx(BackButton, { t: t, onClick: () => setSubView("chooser") })] })] }));
+                        }), type: "password", value: remoteToken, onChange: (e) => setRemoteToken(e.target.value), className: "h-11 rounded-none border-2 border-[#f0b90b]/35 bg-black/48 text-white text-sm placeholder:text-white/40" }), _jsx(Button, { type: "button", variant: "default", className: "justify-center rounded-none border-2 border-black bg-[#ffe600] px-3 py-4 text-sm font-black uppercase tracking-[0.14em] text-black shadow-[5px_5px_0_rgba(0,0,0,0.68)] hover:bg-white", onClick: finishAsRemote, disabled: !remoteUrl.trim(), children: t("common.connect", { defaultValue: "Connect" }) }), _jsx(BackButton, { t: t, onClick: () => setSubView("chooser") })] })] }));
 }
-function GateShell({ uiLanguage, setUiLanguage, t, children }) {
-    return (_jsxs("div", { className: "relative flex min-h-full w-full flex-col bg-black text-white", children: [_jsxs("div", { "aria-hidden": "true", className: "absolute inset-0 overflow-hidden pointer-events-none", children: [_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.14),transparent_36%),linear-gradient(180deg,rgba(11,14,20,0.18),rgba(6,7,8,0.56))]" }), _jsx("div", { className: "absolute left-[-10%] top-[8%] h-[24rem] w-[24rem] rounded-full bg-[rgba(240,185,11,0.1)] blur-[110px]" }), _jsx("div", { className: "absolute bottom-[-12%] right-[-8%] h-[20rem] w-[20rem] rounded-full bg-[rgba(255,255,255,0.08)] blur-[120px]" })] }), _jsx("div", { style: {
+function GateShell({ uiLanguage, setUiLanguage, uiTheme, setUiTheme, t, children, }) {
+    const lightMode = uiTheme === "light";
+    return (_jsxs("div", { className: "relative min-h-full w-full overflow-y-auto bg-black text-white", children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none fixed inset-0 overflow-hidden", children: [_jsx("img", { src: resolveAppAssetUrl("splash-bg.jpg"), alt: "", className: "absolute inset-0 h-full w-full object-cover" }), _jsx("div", { className: `absolute inset-0 ${lightMode ? "bg-[#f6d969]/38" : "bg-black/58"}` }), _jsx("div", { className: "absolute inset-0 opacity-35", style: {
+                            backgroundImage: "linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)",
+                            backgroundSize: "24px 24px",
+                        } })] }), _jsxs("div", { className: "flex items-center gap-2", style: {
                     position: "absolute",
-                    top: "calc(var(--safe-area-top, 0px) + 0.5rem)",
+                    top: "calc(var(--safe-area-top, 0px) + 0.75rem)",
                     right: "calc(var(--safe-area-right, 0px) + 1rem)",
                     zIndex: 50,
-                }, children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: "companion", triggerClassName: "!h-8 !min-h-0 !min-w-0 !rounded-lg !px-2.5 !text-xs leading-none" }) }), _jsx("div", { className: "relative z-10 flex flex-1 items-center justify-center px-4 pb-[max(1.5rem,var(--safe-area-bottom,0px))] pt-[calc(var(--safe-area-top,0px)+3.75rem)] sm:px-6 md:px-8", children: _jsx("div", { className: "flex w-full max-w-[32rem] flex-col items-center gap-4", children: children }) })] }));
+                }, children: [_jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: "companion", triggerClassName: "!h-9 !min-h-9 !min-w-0 !rounded-none !border-2 !border-black !bg-[#fff0a3] !px-2.5 !text-xs !text-black !shadow-[3px_3px_0_rgba(0,0,0,0.72)] leading-none" }), _jsx(ThemeToggle, { uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, variant: "companion", className: "!h-9 !w-9 !min-h-9 !min-w-9 !rounded-none !border-2 !border-black !bg-[#fff0a3] !text-black !shadow-[3px_3px_0_rgba(0,0,0,0.72)]" })] }), _jsx("div", { className: "relative z-10 flex min-h-full items-center justify-center px-3 pb-[max(1rem,var(--safe-area-bottom,0px))] pt-[calc(var(--safe-area-top,0px)_+_4.25rem)] sm:px-6 md:px-8", children: _jsx("div", { className: "flex w-full max-w-[72rem] flex-col items-center gap-3 border-2 border-black bg-[rgba(9,10,14,0.82)] px-3 py-4 shadow-[9px_9px_0_rgba(0,0,0,0.62)] backdrop-blur-md sm:gap-4 sm:px-6 sm:py-7 md:px-8 md:py-8", style: {
+                        borderRadius: 0,
+                        clipPath: "polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)",
+                    }, children: children }) })] }));
 }
 function GateHeader({ t, }) {
-    return (_jsxs("div", { className: "text-center", children: [_jsx("h1", { style: { fontFamily: MONO_FONT }, className: "text-2xl font-light text-white/95", children: t("runtimegate.title", { defaultValue: "Choose your setup" }) }), _jsx("p", { style: { fontFamily: MONO_FONT }, className: "mt-2 text-3xs uppercase tracking-[0.2em] text-white/60", children: t("runtimegate.subtitle", {
+    return (_jsxs("div", { className: "text-center", children: [_jsx("h1", { style: { fontFamily: MONO_FONT }, className: "text-xl font-light text-white/95 sm:text-2xl", children: t("runtimegate.title", { defaultValue: "Choose your setup" }) }), _jsx("p", { style: { fontFamily: MONO_FONT }, className: "mt-2 text-3xs uppercase tracking-[0.16em] text-white/60 sm:tracking-[0.2em]", children: t("runtimegate.subtitle", {
                     defaultValue: "Where should your agent run?",
                 }) })] }));
 }
-function ChoiceCard({ eyebrow, title, description, onClick, recommended, }) {
-    const base = "flex w-full cursor-pointer flex-col items-start gap-1.5 rounded-xl border px-5 py-4 text-left backdrop-blur-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2";
-    const className = recommended
-        ? `${base} border-[#f0b90b]/40 bg-[#f0b90b]/[0.1] shadow-lg hover:border-[#f0b90b]/60 hover:bg-[#f0b90b]/[0.18]`
-        : `${base} border-white/20 bg-white/[0.07] shadow-lg hover:border-white/35 hover:bg-white/[0.12]`;
-    return (_jsxs("button", { type: "button", className: className, onClick: onClick, children: [_jsx("span", { style: { fontFamily: MONO_FONT }, className: `text-3xs uppercase ${recommended ? "text-[#f0b90b]/80" : "text-white/60"}`, children: eyebrow }), _jsx("span", { className: "text-sm font-bold text-white/95", children: title }), _jsx("span", { className: "text-xs-tight leading-snug text-white/60", children: description })] }));
+function ChoiceCard({ choice, label, eyebrow, title, description, imageSrc, selected, statusLabel, disabled, onClick, }) {
+    const className = [
+        "group flex w-full min-w-0 border-2 p-1.5 text-left shadow-[5px_5px_0_rgba(0,0,0,0.62)] transition-[background-color,border-color,color,transform,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ffe600] focus-visible:ring-offset-2 focus-visible:ring-offset-black md:min-h-[21rem] md:flex-col md:p-3",
+        selected
+            ? "border-[#ffe600] bg-black/88 text-[#fff3a8]"
+            : "border-black bg-[#fff1ac]/90 text-black hover:-translate-y-0.5 hover:bg-white",
+        disabled ? "cursor-default" : "cursor-pointer",
+    ].join(" ");
+    const imageBorderClassName = selected
+        ? "border-[#ffe600] bg-[#17100a]"
+        : "border-black bg-black";
+    const eyebrowClassName = selected ? "text-[#ffe600]/82" : "text-black/60";
+    const titleClassName = selected ? "text-white/92" : "text-black/76";
+    const descriptionClassName = selected ? "text-white/66" : "text-black/62";
+    return (_jsxs("button", { type: "button", className: className, onClick: disabled ? undefined : onClick, "aria-pressed": selected, "aria-disabled": disabled, "data-runtime-choice": choice, style: {
+            borderRadius: 0,
+            clipPath: "polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)",
+        }, children: [_jsx("span", { className: `relative h-20 w-24 shrink-0 overflow-hidden border-2 sm:h-24 sm:w-28 md:h-36 md:w-full ${imageBorderClassName}`, style: {
+                    clipPath: "polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)",
+                }, children: _jsx("img", { src: imageSrc, alt: "", "aria-hidden": "true", className: "h-full w-full object-cover opacity-90 saturate-[1.05]" }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col px-2 py-0.5 sm:px-3 sm:py-1.5 md:px-1 md:pt-3", children: [_jsx("span", { style: { fontFamily: MONO_FONT }, className: `text-3xs uppercase tracking-[0.18em] ${eyebrowClassName}`, children: eyebrow }), _jsx("span", { style: { fontFamily: MONO_FONT }, className: "mt-1 text-base font-black uppercase leading-none tracking-[0.08em] sm:text-lg md:text-2xl", children: label }), _jsx("span", { className: `mt-1.5 text-[11px] font-bold leading-snug sm:mt-2 sm:text-xs ${titleClassName}`, children: title }), _jsx("span", { className: `mt-1 text-[12px] leading-[1.25] sm:text-xs-tight sm:leading-snug ${descriptionClassName}`, children: description })] }), _jsx("span", { style: { fontFamily: MONO_FONT }, className: `ml-auto hidden self-start px-2 py-1 text-3xs font-bold uppercase sm:inline-block md:ml-0 md:mt-3 md:self-start ${selected ? "bg-[#ffe600] text-black" : "bg-black text-[#ffe600]"}`, children: statusLabel })] }));
 }
 function BackButton({ t, onClick, }) {
     return (_jsx("button", { type: "button", onClick: onClick, style: { fontFamily: MONO_FONT }, className: "mt-2 self-center text-3xs uppercase text-white/60 underline hover:text-white", children: t("common.back", { defaultValue: "Back" }) }));
 }
+const LOCAL_EMBEDDINGS_TOOLTIP = "Embeddings are vector representations of your messages, used for memory and search. Keeping them local means your message text isn't sent to the cloud just to compute vectors. Chat still goes through the cloud.";
+function LocalEmbeddingsCheckbox({ checked, onCheckedChange, }) {
+    return (_jsxs("div", { className: "flex items-start gap-2.5 py-1", children: [_jsx(Checkbox, { id: "runtime-gate-local-embeddings", checked: checked, onCheckedChange: (value) => onCheckedChange(value === true), className: "mt-0.5 shrink-0 border-white/30 bg-white/10 data-[state=checked]:border-[#f0b90b]/60 data-[state=checked]:bg-[#f0b90b]/20", "aria-label": "Use local embeddings" }), _jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("label", { htmlFor: "runtime-gate-local-embeddings", className: "cursor-pointer text-xs-tight text-white/80 select-none", children: "Use local embeddings" }), _jsx(TooltipHint, { content: LOCAL_EMBEDDINGS_TOOLTIP, side: "top", children: _jsx("span", { className: "inline-flex h-4 w-4 shrink-0 cursor-help items-center justify-center rounded-full border border-white/20 text-2xs text-white/50 hover:text-white/70", "aria-hidden": "true", children: "?" }) })] })] }));
+}

package/packages/app-core/src/components/shell/StartupShell.js

@@ -217,7 +217,7 @@ export function StartupShell() {
     if (phase === "ready") {
         return null;
     }
-    return (_jsxs("div", { "data-testid": "startup-shell-loading", "data-startup-phase": phase, className: "flex items-center justify-center h-full w-full bg-[#ffe600] text-black overflow-hidden", children: [_jsx("img", { src: resolveAppAssetUrl("splash-bg.jpg"), alt: "", "aria-hidden": "true", className: "pointer-events-none absolute inset-0 h-full w-full object-cover" }), _jsx("div", { className: "relative z-10 flex flex-col items-center gap-5 px-6 text-center w-full", style: { maxWidth: 360 }, children: _jsxs("div", { className: "w-full mt-2", children: [_jsx("div", { className: "h-5 w-full border-2 border-black/70 bg-black/5 overflow-hidden", children: _jsx("div", { className: "h-full bg-black/70 transition-all duration-700 ease-out", style: { width: `${progress}%` }, children: _jsx("div", { className: "h-full w-full", style: {
+    return (_jsxs("div", { "data-testid": "startup-shell-loading", "data-startup-phase": phase, className: "flex items-center justify-center h-full w-full bg-[#ffe600] text-black overflow-hidden", children: [_jsx("img", { src: resolveAppAssetUrl("splash-bg.png"), alt: "", "aria-hidden": "true", className: "pointer-events-none absolute inset-0 h-full w-full object-cover" }), _jsx("div", { className: "relative z-10 flex flex-col items-center gap-5 px-6 text-center w-full", style: { maxWidth: 360 }, children: _jsxs("div", { className: "w-full mt-2", children: [_jsx("div", { className: "h-5 w-full border-2 border-black/70 bg-black/5 overflow-hidden", children: _jsx("div", { className: "h-full bg-black/70 transition-all duration-700 ease-out", style: { width: `${progress}%` }, children: _jsx("div", { className: "h-full w-full", style: {
                                         backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(255,230,0,0.5) 6px, rgba(255,230,0,0.5) 8px)",
                                     } }) }) }), _jsx("p", { style: { fontFamily: FONT }, className: "mt-2 text-3xs text-black/50 uppercase animate-pulse", children: t(phaseToStatusKey(phase)) })] }) })] }));
 }
@@ -226,5 +226,5 @@ export function StartupShell() {
  * RuntimeGate so the bootstrap gate feels like part of the same flow.
  */
 function BootstrapGateShell({ children }) {
-    return (_jsxs("div", { className: "relative flex min-h-full w-full flex-col bg-black text-white", children: [_jsxs("div", { "aria-hidden": "true", className: "absolute inset-0 overflow-hidden pointer-events-none", children: [_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.14),transparent_36%),linear-gradient(180deg,rgba(11,14,20,0.18),rgba(6,7,8,0.56))]" }), _jsx("div", { className: "absolute left-[-10%] top-[8%] h-[24rem] w-[24rem] rounded-full bg-[rgba(240,185,11,0.1)] blur-[110px]" }), _jsx("div", { className: "absolute bottom-[-12%] right-[-8%] h-[20rem] w-[20rem] rounded-full bg-[rgba(255,255,255,0.08)] blur-[120px]" })] }), _jsx("div", { className: "relative z-10 flex flex-1 items-center justify-center px-4 pb-[max(1.5rem,var(--safe-area-bottom,0px))] pt-[calc(var(--safe-area-top,0px)+3.75rem)] sm:px-6 md:px-8", children: _jsx("div", { className: "flex w-full max-w-[32rem] flex-col items-center gap-4", children: children }) })] }));
+    return (_jsxs("div", { className: "relative flex min-h-full w-full flex-col bg-black text-white", children: [_jsxs("div", { "aria-hidden": "true", className: "absolute inset-0 overflow-hidden pointer-events-none", children: [_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.14),transparent_36%),linear-gradient(180deg,rgba(11,14,20,0.18),rgba(6,7,8,0.56))]" }), _jsx("div", { className: "absolute left-[-10%] top-[8%] h-[24rem] w-[24rem] rounded-full bg-[rgba(240,185,11,0.1)] blur-[110px]" }), _jsx("div", { className: "absolute bottom-[-12%] right-[-8%] h-[20rem] w-[20rem] rounded-full bg-[rgba(255,255,255,0.08)] blur-[120px]" })] }), _jsx("div", { className: "relative z-10 flex flex-1 items-center justify-center px-4 pb-[max(1.5rem,var(--safe-area-bottom,0px))] pt-[calc(var(--safe-area-top,0px)_+_3.75rem)] sm:px-6 md:px-8", children: _jsx("div", { className: "flex w-full max-w-[32rem] flex-col items-center gap-4", children: children }) })] }));
 }

package/packages/app-core/src/components/workspace/AppWorkspaceChrome.js

@@ -10,7 +10,7 @@ export const APP_WORKSPACE_CHROME_CHAT_WIDTH_STORAGE_KEY = "app-workspace-chrome
 const CHAT_DEFAULT_WIDTH = 384;
 const CHAT_MIN_WIDTH = 240;
 const CHAT_MAX_WIDTH = 640;
-const WORKSPACE_MOBILE_MEDIA_QUERY = "(max-width: 639px)";
+const WORKSPACE_MOBILE_MEDIA_QUERY = "(max-width: 819px)";
 const AppWorkspaceChatChromeContext = createContext(null);
 export function useAppWorkspaceChatChrome() {
     return useContext(AppWorkspaceChatChromeContext);
@@ -212,7 +212,7 @@ export function AppWorkspaceChrome({ nav, main, chat, chatScope, pageScopedChatP
     }), [effectiveCollapsed, handleToggle]);
     const chatContent = chat ??
         (chatScope ? (_jsx(PageScopedChatPane, { ...pageScopedChatPaneProps, scope: chatScope })) : (_jsx(ChatView, { variant: "default" })));
-    return (_jsx(WorkspaceMobileSidebarControlsContext.Provider, { value: mobileSidebarControlsValue, children: _jsx(AppWorkspaceChatChromeContext.Provider, { value: chatChromeContextValue, children: _jsxs("div", { className: `flex min-h-0 min-w-0 w-full flex-1 bg-bg pb-[var(--eliza-mobile-nav-offset,0px)] ${isMobileViewport ? "flex-col" : ""}`, "data-testid": testId, children: [isMobileViewport &&
+    return (_jsx(WorkspaceMobileSidebarControlsContext.Provider, { value: mobileSidebarControlsValue, children: _jsx(AppWorkspaceChatChromeContext.Provider, { value: chatChromeContextValue, children: _jsxs("div", { className: `flex min-h-0 min-w-0 w-full flex-1 bg-bg pb-[calc(var(--eliza-mobile-nav-offset,0px)+var(--safe-area-bottom,0px))] ${isMobileViewport ? "flex-col" : ""}`, "data-testid": testId, children: [isMobileViewport &&
                         (!chatDisabled || mobileSidebarControl !== null) ? (_jsx(MobileWorkspacePaneSwitcher, { chatAvailable: !chatDisabled, chatOpen: !effectiveCollapsed, sidebar: mobileSidebarControl, onChat: () => handleToggle(false), onMain: handleOpenMobileMain, onSidebar: handleOpenMobileSidebar })) : null, _jsxs("div", { className: `relative min-h-0 min-w-0 flex-1 flex-col overflow-hidden ${isMobileViewport && !effectiveCollapsed ? "hidden" : "flex"}`, children: [nav, _jsx("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: main })] }), chatDisabled ? null : effectiveCollapsed ? (_jsx("aside", { className: "w-0 min-w-0 shrink-0", "data-testid": `${testId}-chat-sidebar`, "data-collapsed": true, children: !isMobileViewport ? (_jsx(AppWorkspaceChatDockToggleButton, { collapsed: true, testId: `${testId}-chat-expand` })) : null })) : (_jsxs(_Fragment, { children: [isMobileViewport ? (_jsx("aside", { className: "flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden bg-bg", "data-testid": `${testId}-chat-sidebar`, children: _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: chatContent }) })) : null, !isMobileViewport ? (_jsxs("aside", { className: "relative flex shrink-0 flex-col overflow-hidden bg-bg", style: {
                                     width: `${chatWidth}px`,
                                     minWidth: `${chatWidth}px`,

package/packages/app-core/src/config/boot-config-store.d.ts

@@ -8,8 +8,7 @@
  * React context lives in `boot-config-react.tsx` so Bun/Node can import this
  * module without loading `react` runtime (avoids Bun parsing @types/react).
  */
-import type { AppBlockerSettingsCardProps, WebsiteBlockerSettingsCardProps } from "@elizaos/app-lifeops/types";
-import type { StewardApprovalActionResponse, StewardPendingApproval, StewardTxRecord } from "@elizaos/app-steward";
+import type { AppBlockerSettingsCardProps, StewardPolicyResult, WebsiteBlockerSettingsCardProps } from "@elizaos/shared";
 import type { ComponentType, ReactNode } from "react";
 import type { CodingAgentSession } from "../api/client-types-cloud";
 import type { Tab } from "../navigation";
@@ -118,12 +117,42 @@ export interface StewardLogoProps {
     size?: number;
     className?: string;
 }
+export type AppBootStewardTxStatus = "pending" | "approved" | "rejected" | "signed" | "broadcast" | "confirmed" | "failed";
+export interface AppBootStewardTxRecord {
+    id: string;
+    agentId: string;
+    status: AppBootStewardTxStatus;
+    request: {
+        agentId: string;
+        tenantId: string;
+        to: string;
+        value: string;
+        data?: string;
+        chainId: number;
+    };
+    txHash?: string;
+    policyResults: StewardPolicyResult[];
+    createdAt: string;
+    signedAt?: string;
+    confirmedAt?: string;
+}
+export interface AppBootStewardPendingApproval {
+    queueId: string;
+    status: "pending" | "approved" | "rejected";
+    requestedAt: string;
+    transaction: AppBootStewardTxRecord;
+}
+export interface AppBootStewardApprovalActionResponse {
+    ok: boolean;
+    txHash?: string;
+    error?: string;
+}
 export interface StewardApprovalQueueProps {
     embedded?: boolean;
     refreshKey?: number | string;
-    getStewardPending: () => Promise<StewardPendingApproval[]>;
-    approveStewardTx: (txId: string) => Promise<StewardApprovalActionResponse>;
-    rejectStewardTx: (txId: string, reason?: string) => Promise<StewardApprovalActionResponse>;
+    getStewardPending: () => Promise<AppBootStewardPendingApproval[]>;
+    approveStewardTx: (txId: string) => Promise<AppBootStewardApprovalActionResponse>;
+    rejectStewardTx: (txId: string, reason?: string) => Promise<AppBootStewardApprovalActionResponse>;
     copyToClipboard: (text: string) => Promise<void>;
     setActionNotice: (text: string, tone?: "info" | "success" | "error", ttlMs?: number) => void;
     onPendingCountChange?: (count: number) => void;
@@ -135,7 +164,7 @@ export interface StewardTransactionHistoryProps {
         limit?: number;
         offset?: number;
     }) => Promise<{
-        records: StewardTxRecord[];
+        records: AppBootStewardTxRecord[];
         total: number;
         offset: number;
         limit: number;