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

package/packages/app-core/src/components/pages/BrowserWorkspaceView.js

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { client, } from "../../api";
 import { useApp } from "../../state";
 import { openExternalUrl } from "../../utils";
+import { BROWSER_TAB_PRELOAD_SCRIPT, setBrowserTabsRendererImpl, } from "../../utils/browser-tabs-renderer-registry";
 import { AppPageSidebar } from "../shared/AppPageSidebar";
 import { CollapsibleSidebarSection } from "../shared/CollapsibleSidebarSection";
 import { AppWorkspaceChrome, } from "../workspace/AppWorkspaceChrome.js";
@@ -15,6 +16,9 @@ const POLL_INTERVAL_MS = 2_500;
 const BROWSER_BRIDGE_POLL_INTERVAL_MS = 4_000;
 const BROWSER_WORKSPACE_AGENT_PARTITION = "persist:eliza-browser-agent";
 const BROWSER_WORKSPACE_APP_PARTITION = "persist:eliza-browser-app";
+// Default URL when the user opens a fresh tab via "+". The docs site
+// respects prefers-color-scheme so the OS theme drives light/dark.
+const BROWSER_WORKSPACE_DEFAULT_HOME_URL = "https://docs.elizaos.ai/";
 const BROWSER_WORKSPACE_COLLAPSED_SECTIONS_STORAGE_KEY = "milady:browser-workspace:collapsed-sections";
 function readStoredBrowserWorkspaceCollapsedSections() {
     if (typeof window === "undefined")
@@ -71,7 +75,10 @@ function isBrowserBridgePlugin(plugin) {
         value === "@elizaos/plugin-browser-bridge");
 }
 function isBrowserWorkspaceSessionMode(mode) {
-    return mode === "cloud" || mode === "desktop";
+    // Cloud is the only mode that still uses the snapshot-preview UX. Desktop
+    // mode renders <electrobun-webview> tags directly into the React tree, so
+    // there's no need to poll for screenshot data.
+    return mode === "cloud";
 }
 function normalizeBrowserWorkspaceInputUrl(rawUrl, t) {
     const trimmed = rawUrl.trim();
@@ -199,8 +206,16 @@ export function BrowserWorkspaceView() {
     const [browserBridgePackageStatus, setBrowserBridgePackageStatus] = useState(null);
     const initialBrowseUrlRef = useRef(undefined);
     const initialBrowseHandledRef = useRef(false);
-    const initialBlankTabHandledRef = useRef(false);
     const iframeRefs = useRef(new Map());
+    const electrobunWebviewRefs = useRef(new Map());
+    const pendingTabExecsRef = useRef(new Map());
+    const tabExecCounterRef = useRef(0);
+    const tabChainIdRef = useRef(new Map());
+    const browserWalletStateRef = useRef(null);
+    // Ref-mirror of the selected tab id so the register callback (which is
+    // memoized on handleTabHostMessage only) can read the current selection
+    // without a fresh closure each render.
+    const selectedTabIdRef = useRef(null);
     const getStewardPendingRef = useRef(getStewardPending);
     const getStewardStatusRef = useRef(getStewardStatus);
     const setActionNoticeRef = useRef(setActionNotice);
@@ -229,7 +244,7 @@ export function BrowserWorkspaceView() {
         : false;
     const newBrowserWorkspaceTabSeedUrl = selectedTabIsInternal
         ? "about:blank"
-        : locationInput || "about:blank";
+        : locationInput || BROWSER_WORKSPACE_DEFAULT_HOME_URL;
     const groupedTabs = useMemo(() => workspace.tabs.reduce((groups, tab) => {
         groups[resolveBrowserWorkspaceTabSectionKey(tab)].push(tab);
         return groups;
@@ -448,6 +463,10 @@ export function BrowserWorkspaceView() {
                 iframe.src = tab.url;
             }
         }
+        else if (workspace.mode === "desktop") {
+            const tag = electrobunWebviewRefs.current.get(selectedTabId);
+            tag?.loadURL(tab.url);
+        }
         await loadWorkspace({ preferTabId: tab.id, silent: true });
         setLocationInput(tab.url);
         setLocationDirty(false);
@@ -466,6 +485,405 @@ export function BrowserWorkspaceView() {
         }
         iframeRefs.current.set(tabId, iframe);
     }, []);
+    // Keep a ref so the host-message handler always sees the latest wallet
+    // state without needing a fresh closure per render.
+    browserWalletStateRef.current = browserWalletState;
+    selectedTabIdRef.current = selectedTabId;
+    const handleTabWalletRequest = useCallback(async (req) => {
+        const tag = electrobunWebviewRefs.current.get(req.tabId);
+        const reply = (payload) => {
+            if (!tag)
+                return;
+            tag.executeJavascript(`window.__elizaWalletReply(${JSON.stringify(req.requestId)}, ${JSON.stringify(payload)})`);
+        };
+        const walletState = browserWalletStateRef.current;
+        if (!walletState) {
+            reply({ error: "Wallet state not yet loaded." });
+            return;
+        }
+        try {
+            const evmAddress = walletState.evmAddress;
+            const solanaAddress = walletState.solanaAddress;
+            if (req.protocol === "evm") {
+                switch (req.method) {
+                    case "eth_requestAccounts":
+                    case "eth_accounts": {
+                        if (!evmAddress) {
+                            reply({
+                                error: walletState.reason ?? "No EVM wallet connected.",
+                            });
+                            return;
+                        }
+                        reply({ result: [evmAddress] });
+                        return;
+                    }
+                    case "eth_chainId": {
+                        const chainId = tabChainIdRef.current.get(req.tabId) ?? 1;
+                        reply({ result: `0x${chainId.toString(16)}` });
+                        return;
+                    }
+                    case "wallet_switchEthereumChain": {
+                        const arr = Array.isArray(req.params) ? req.params : [req.params];
+                        const next = arr[0] && typeof arr[0] === "object"
+                            ? arr[0].chainId
+                            : null;
+                        const chainHex = typeof next === "string" ? next : "";
+                        const chainId = chainHex.startsWith("0x")
+                            ? Number.parseInt(chainHex.slice(2), 16)
+                            : Number(chainHex);
+                        if (!Number.isFinite(chainId) || chainId <= 0) {
+                            reply({
+                                error: "wallet_switchEthereumChain requires a valid chainId.",
+                            });
+                            return;
+                        }
+                        tabChainIdRef.current.set(req.tabId, chainId);
+                        reply({ result: null });
+                        return;
+                    }
+                    case "personal_sign":
+                    case "eth_sign": {
+                        if (!walletState.messageSigningAvailable) {
+                            reply({
+                                error: walletState.mode === "steward"
+                                    ? "Browser message signing requires a local wallet key."
+                                    : (walletState.reason ??
+                                        "Browser wallet message signing is unavailable."),
+                            });
+                            return;
+                        }
+                        const arr = Array.isArray(req.params) ? req.params : [];
+                        const message = typeof arr[0] === "string"
+                            ? arr[0]
+                            : typeof arr[1] === "string"
+                                ? arr[1]
+                                : null;
+                        if (!message) {
+                            reply({
+                                error: "Browser wallet signing requires a message payload.",
+                            });
+                            return;
+                        }
+                        const result = await client.signBrowserWalletMessage(message);
+                        reply({ result: result.signature });
+                        return;
+                    }
+                    case "eth_sendTransaction": {
+                        if (!walletState.transactionSigningAvailable) {
+                            reply({
+                                error: walletState.reason ??
+                                    "Browser wallet transaction signing is unavailable.",
+                            });
+                            return;
+                        }
+                        const arr = Array.isArray(req.params) ? req.params : [req.params];
+                        const tx = arr[0] && typeof arr[0] === "object"
+                            ? arr[0]
+                            : null;
+                        if (!tx) {
+                            reply({
+                                error: "eth_sendTransaction requires a transaction object.",
+                            });
+                            return;
+                        }
+                        const chainId = tabChainIdRef.current.get(req.tabId) ?? 1;
+                        const value = typeof tx.value === "string"
+                            ? tx.value.startsWith("0x")
+                                ? BigInt(tx.value).toString()
+                                : tx.value
+                            : "0";
+                        const result = await client.sendBrowserWalletTransaction({
+                            broadcast: true,
+                            chainId,
+                            to: typeof tx.to === "string" ? tx.to : "",
+                            value,
+                            data: typeof tx.data === "string" ? tx.data : undefined,
+                            description: typeof tx.description === "string"
+                                ? tx.description
+                                : undefined,
+                        });
+                        reply({ result: result.txHash ?? result.txId ?? null });
+                        const next = await loadBrowserWalletState();
+                        browserWalletStateRef.current = next;
+                        return;
+                    }
+                    default:
+                        reply({ error: `Unsupported EVM method: ${req.method}` });
+                        return;
+                }
+            }
+            if (req.protocol === "solana") {
+                switch (req.method) {
+                    case "connect": {
+                        if (!solanaAddress) {
+                            reply({
+                                error: walletState.reason ?? "No Solana wallet connected.",
+                            });
+                            return;
+                        }
+                        reply({ result: { publicKey: solanaAddress } });
+                        return;
+                    }
+                    case "signMessage": {
+                        if (!walletState.solanaMessageSigningAvailable) {
+                            reply({
+                                error: walletState.reason ??
+                                    "Solana message signing is unavailable.",
+                            });
+                            return;
+                        }
+                        const messageBase64 = req.params && typeof req.params === "object"
+                            ? req.params.messageBase64
+                            : undefined;
+                        const message = req.params && typeof req.params === "object"
+                            ? req.params.message
+                            : undefined;
+                        const result = await client.signBrowserSolanaMessage({
+                            ...(messageBase64 ? { messageBase64 } : {}),
+                            ...(message ? { message } : {}),
+                        });
+                        reply({ result });
+                        return;
+                    }
+                    case "signTransaction":
+                    case "signAndSendTransaction": {
+                        if (!walletState.solanaTransactionSigningAvailable) {
+                            reply({
+                                error: walletState.reason ??
+                                    "Solana transaction signing is unavailable.",
+                            });
+                            return;
+                        }
+                        const transactionBase64 = req.params && typeof req.params === "object"
+                            ? req.params
+                                .transactionBase64
+                            : undefined;
+                        if (!transactionBase64) {
+                            reply({
+                                error: "Solana transaction signing requires transactionBase64.",
+                            });
+                            return;
+                        }
+                        const result = await client.sendBrowserSolanaTransaction({
+                            transactionBase64,
+                            broadcast: req.method === "signAndSendTransaction",
+                        });
+                        reply({ result });
+                        return;
+                    }
+                    default:
+                        reply({ error: `Unsupported Solana method: ${req.method}` });
+                        return;
+                }
+            }
+            reply({ error: `Unsupported wallet protocol: ${req.protocol}` });
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            reply({ error: message });
+        }
+    }, [loadBrowserWalletState]);
+    const handleTabHostMessage = useCallback((event) => {
+        const detail = event.detail;
+        if (!detail || typeof detail.type !== "string")
+            return;
+        if (detail.type === "__elizaTabExecResult" &&
+            typeof detail.requestId === "number") {
+            const pending = pendingTabExecsRef.current.get(detail.requestId);
+            if (!pending)
+                return;
+            pendingTabExecsRef.current.delete(detail.requestId);
+            clearTimeout(pending.timer);
+            pending.resolve({
+                ok: detail.ok === true,
+                result: detail.result,
+                error: detail.error,
+            });
+            return;
+        }
+        if (detail.type === "__elizaWalletRequest" &&
+            typeof detail.requestId === "number" &&
+            typeof detail.protocol === "string" &&
+            typeof detail.method === "string") {
+            const tag = event.currentTarget ?? null;
+            const tabId = [...electrobunWebviewRefs.current.entries()].find(([, el]) => el === tag)?.[0] ?? null;
+            if (!tabId)
+                return;
+            void handleTabWalletRequest({
+                tabId,
+                requestId: detail.requestId,
+                protocol: detail.protocol,
+                method: detail.method,
+                params: detail.params,
+            });
+        }
+    }, [handleTabWalletRequest]);
+    const registerBrowserWorkspaceElectrobunWebview = useCallback((tabId, element) => {
+        const previous = electrobunWebviewRefs.current.get(tabId);
+        if (previous && previous !== element) {
+            previous.off("host-message", handleTabHostMessage);
+        }
+        if (!element) {
+            electrobunWebviewRefs.current.delete(tabId);
+            return;
+        }
+        if (previous !== element) {
+            element.on("host-message", handleTabHostMessage);
+            // Poke the OOPIF to read fresh dimensions multiple times — the
+            // tag auto-syncs only on its own ResizeObserver firing, and that
+            // can miss the initial layout settle if the parent flex chain is
+            // still computing on first mount.
+            const sync = () => {
+                try {
+                    element.syncDimensions(true);
+                }
+                catch {
+                    // Element may have unmounted.
+                }
+            };
+            if (typeof requestAnimationFrame === "function") {
+                requestAnimationFrame(() => requestAnimationFrame(sync));
+            }
+            else {
+                setTimeout(sync, 0);
+            }
+            // Safety net for late-settling layouts (image-driven shifts, web
+            // fonts loading, etc.). The poll loop in the upstream tag runs
+            // every 100ms anyway — these poke a forceSync on top.
+            setTimeout(sync, 250);
+            setTimeout(sync, 1000);
+            // Hide the native OOPIF immediately if the tag isn't the active
+            // one — otherwise its native view sits over the surface and
+            // intercepts clicks while React still has it in the tree.
+            if (selectedTabIdRef.current && selectedTabIdRef.current !== tabId) {
+                try {
+                    element.toggleHidden(true);
+                }
+                catch {
+                    // best-effort
+                }
+            }
+        }
+        electrobunWebviewRefs.current.set(tabId, element);
+    }, [handleTabHostMessage]);
+    // Track the surface container so layout changes (sidebar collapse,
+    // window resize, route entry) re-poke every mounted tag. Without this
+    // the OOPIF can latch at whatever rect it had on first mount because
+    // Electrobun's OverlaySyncController only fires onSync when the rect
+    // *changes* — a small-but-stable rect persists.
+    const browserSurfaceRef = useRef(null);
+    useEffect(() => {
+        const surface = browserSurfaceRef.current;
+        if (!surface || typeof ResizeObserver === "undefined")
+            return;
+        const pokeAll = () => {
+            for (const element of electrobunWebviewRefs.current.values()) {
+                try {
+                    element?.syncDimensions(true);
+                }
+                catch {
+                    // Tag may have been unmounted between observation and dispatch.
+                }
+            }
+        };
+        const observer = new ResizeObserver(() => pokeAll());
+        observer.observe(surface);
+        window.addEventListener("resize", pokeAll);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("resize", pokeAll);
+        };
+    }, []);
+    // Drive native hide/show on every tag whenever selection changes. The
+    // HTML `hidden` attribute does NOT propagate to the OOPIF — only the
+    // tag's `toggleHidden(bool)` method does. Without this, inactive tabs'
+    // OOPIFs stay painted over the surface as native views and intercept
+    // clicks intended for sibling UI (e.g. the top app nav).
+    useEffect(() => {
+        if (workspace.mode !== "desktop")
+            return;
+        for (const [tabId, element] of electrobunWebviewRefs.current.entries()) {
+            if (!element)
+                continue;
+            try {
+                element.toggleHidden(tabId !== selectedTabId);
+                element.syncDimensions(true);
+            }
+            catch {
+                // best-effort
+            }
+        }
+    }, [selectedTabId, workspace.mode]);
+    // On unmount, hide every OOPIF so leftover native views don't bleed onto
+    // other routes between React's unmount and the tag's
+    // disconnectedCallback firing.
+    useEffect(() => {
+        const refs = electrobunWebviewRefs;
+        return () => {
+            for (const element of refs.current.values()) {
+                try {
+                    element?.toggleHidden(true);
+                }
+                catch {
+                    // best-effort
+                }
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const tagsRef = electrobunWebviewRefs;
+        const pendingsRef = pendingTabExecsRef;
+        const counterRef = tabExecCounterRef;
+        setBrowserTabsRendererImpl({
+            evaluate: (id, script, timeoutMs) => new Promise((resolve) => {
+                const tag = tagsRef.current.get(id);
+                if (!tag) {
+                    resolve({
+                        ok: false,
+                        error: `browser workspace tab ${id} is not mounted in the renderer`,
+                    });
+                    return;
+                }
+                counterRef.current += 1;
+                const requestId = counterRef.current;
+                const timer = setTimeout(() => {
+                    if (pendingsRef.current.delete(requestId)) {
+                        resolve({
+                            ok: false,
+                            error: `browser workspace tab eval timed out after ${timeoutMs}ms`,
+                        });
+                    }
+                }, timeoutMs);
+                pendingsRef.current.set(requestId, { resolve, timer });
+                tag.executeJavascript(`window.__elizaTabExec(${JSON.stringify(requestId)}, ${JSON.stringify(script)})`);
+            }),
+            getTabRect: async (id) => {
+                const tag = tagsRef.current.get(id);
+                if (!tag)
+                    return null;
+                const rect = tag.getBoundingClientRect();
+                if (rect.width <= 0 || rect.height <= 0)
+                    return null;
+                return {
+                    x: rect.x,
+                    y: rect.y,
+                    width: rect.width,
+                    height: rect.height,
+                };
+            },
+        });
+        return () => {
+            setBrowserTabsRendererImpl(null);
+            for (const pending of pendingsRef.current.values()) {
+                clearTimeout(pending.timer);
+                pending.resolve({
+                    ok: false,
+                    error: "BrowserWorkspaceView unmounted",
+                });
+            }
+            pendingsRef.current.clear();
+        };
+    }, []);
     const { postBrowserWalletReady } = useBrowserWorkspaceWalletBridge({
         iframeRefs,
         workspaceTabs: workspace.mode === "web" ? workspace.tabs : [],
@@ -568,34 +986,6 @@ export function BrowserWorkspaceView() {
         t,
         workspace.tabs,
     ]);
-    // When the workspace loads with no tabs (and the ?browse= path isn't going
-    // to open one), auto-open the Milady homepage so the user lands on a live
-    // page instead of a dead empty state. Runs exactly once per mount.
-    useEffect(() => {
-        if (initialBlankTabHandledRef.current)
-            return;
-        if (loading || loadError)
-            return;
-        if (initialBrowseUrlRef.current)
-            return;
-        if (workspace.tabs.length > 0) {
-            initialBlankTabHandledRef.current = true;
-            return;
-        }
-        initialBlankTabHandledRef.current = true;
-        void runBrowserWorkspaceAction("open:initial-home", async () => {
-            await openNewBrowserWorkspaceTab("https://milady.ai/");
-        }, t("browserworkspace.OpenInitialHomeFailed", {
-            defaultValue: "Failed to open the Milady homepage.",
-        }));
-    }, [
-        loadError,
-        loading,
-        openNewBrowserWorkspaceTab,
-        runBrowserWorkspaceAction,
-        t,
-        workspace.tabs.length,
-    ]);
     const reloadSelectedBrowserWorkspaceTab = useCallback(async () => {
         if (!selectedTab)
             return;
@@ -606,6 +996,11 @@ export function BrowserWorkspaceView() {
             }
             return;
         }
+        if (workspace.mode === "desktop") {
+            const tag = electrobunWebviewRefs.current.get(selectedTab.id);
+            tag?.reload();
+            return;
+        }
         await client.navigateBrowserWorkspaceTab(selectedTab.id, selectedTab.url);
     }, [selectedTab, workspace.mode]);
     const installBrowserBridgeExtension = useCallback(async () => {
@@ -756,7 +1151,9 @@ export function BrowserWorkspaceView() {
                         await activateBrowserWorkspaceTab(tab.id);
                     }), className: `flex w-full min-w-0 items-start gap-1.5 rounded-[var(--radius-sm)] px-1.5 py-1 text-left transition-colors ${tabIsInternal ? "pr-1.5" : "pr-7"} ${active ? "bg-bg-muted/50 text-txt" : "text-txt hover:bg-bg-muted/50"}`, children: [_jsx("span", { className: "mt-0.5 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-muted/70", children: tabHasSessionFocus ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "h-2 w-2 rounded-full bg-accent shadow-[0_0_4px_var(--accent)]" }), _jsx("span", { className: "sr-only", children: t("browserworkspace.AgentActive", {
                                             defaultValue: "Agent is on this tab",
-                                        }) })] })) : (_jsx("span", { className: "text-[10px] font-semibold leading-none", children: getBrowserWorkspaceTabMonogram(label) })) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs-tight font-medium leading-snug", children: label }), _jsx("span", { className: "block truncate text-[11px] leading-snug text-muted/65", children: description })] })] }), tabIsInternal ? null : (_jsx("button", { type: "button", "aria-label": closeTabLabel, title: closeTabLabel, className: "absolute right-0 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-[var(--radius-sm)] text-muted opacity-0 transition-opacity group-hover:opacity-100 hover:bg-bg-muted/50 hover:text-danger", onClick: (event) => {
+                                        }) })] })) : (_jsx("span", { className: "text-[10px] font-semibold leading-none", children: getBrowserWorkspaceTabMonogram(label) })) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs-tight font-medium leading-snug", children: label }), _jsx("span", { className: "block truncate text-[11px] leading-snug text-muted/65", children: description })] })] }), tabIsInternal ? null : (_jsx("button", { type: "button", "aria-label": `${closeTabLabel} ${label}`, title: `${closeTabLabel}: ${label}`, className: `absolute right-0 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-[var(--radius-sm)] text-muted transition-opacity hover:bg-bg-muted/50 hover:text-danger focus-visible:opacity-100 ${active
+                        ? "opacity-100"
+                        : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"}`, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         void runBrowserWorkspaceAction(`close:${tab.id}`, async () => {
@@ -802,7 +1199,9 @@ export function BrowserWorkspaceView() {
                     defaultValue: selectedTabIsInternal
                         ? "Internal tab URL is managed by the app"
                         : "Enter a URL",
-                }), disabled: busyAction !== null || selectedTabIsInternal, className: "h-8 flex-1 rounded-full border-border/40 bg-card/70 px-4 text-sm text-txt" }), _jsx(Button, { variant: "outline", size: "sm", className: "h-8 shrink-0 px-3", "aria-label": goLabel, disabled: busyAction !== null || locationInput.trim().length === 0, onClick: () => void runBrowserWorkspaceAction("navigate:click", async () => {
+                }), "data-testid": "browser-workspace-address-input", disabled: busyAction !== null || selectedTabIsInternal, className: "h-8 min-w-0 flex-1 rounded-full border-border/40 bg-card/70 px-4 text-sm text-txt" }), _jsx(Button, { variant: "outline", size: "sm", className: "h-8 shrink-0 px-3", "aria-label": goLabel, disabled: busyAction !== null ||
+                    selectedTabIsInternal ||
+                    locationInput.trim().length === 0, onClick: () => void runBrowserWorkspaceAction("navigate:click", async () => {
                     await navigateSelectedBrowserWorkspaceTab(locationInput);
                 }), children: goLabel }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", "aria-label": t("browserworkspace.OpenExternal", {
                     defaultValue: "Open external",
@@ -811,19 +1210,29 @@ export function BrowserWorkspaceView() {
                         return;
                     await openExternalUrl(selectedTab.url);
                 }), children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] }));
-    const browserSurface = (_jsxs("div", { className: "relative flex-1 min-h-0 overflow-hidden bg-bg", children: [loadError ? (_jsx("div", { className: "absolute left-1/2 top-6 z-20 -translate-x-1/2 rounded-md border border-danger/50 bg-danger/15 px-3 py-1.5 text-xs text-danger", role: "alert", children: loadError })) : null, workspace.tabs.length === 0 ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-2 text-center", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: loading
+    const watchBannerLabel = busyAction
+        ? t("browserworkspace.Working", {
+            defaultValue: "Working: {{action}}",
+            action: busyAction.replace(/[:\-_]+/g, " "),
+        })
+        : null;
+    const browserSurface = (_jsxs("div", { ref: browserSurfaceRef, className: "relative flex-1 min-h-0 overflow-hidden bg-bg", children: [watchBannerLabel ? (_jsxs("div", { className: "absolute left-3 right-3 top-2 z-20 flex items-center gap-2 rounded-md border border-border/40 bg-card/80 px-3 py-1.5 text-xs text-muted shadow-sm backdrop-blur-sm", role: "status", "aria-live": "polite", "data-testid": "browser-workspace-watch-banner", children: [_jsx("span", { "aria-hidden": true, className: "inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent shadow-[0_0_4px_var(--accent)]" }), _jsx("span", { className: "truncate", children: watchBannerLabel })] })) : null, loadError ? (_jsx("div", { className: "absolute left-1/2 top-6 z-20 -translate-x-1/2 rounded-md border border-danger/50 bg-danger/15 px-3 py-1.5 text-xs text-danger", role: "alert", children: loadError })) : null, workspace.tabs.length === 0 ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 text-center", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: loading
                                 ? t("browserworkspace.Loading", {
                                     defaultValue: "Loading browser workspace",
                                 })
                                 : t("browserworkspace.EmptyTitle", {
                                     defaultValue: "No browser tabs yet",
-                                }) }), _jsx("div", { className: "text-xs text-muted", children: isBrowserWorkspaceSessionMode(workspace.mode)
+                                }) }), _jsx("div", { className: "text-xs leading-5 text-muted", children: isBrowserWorkspaceSessionMode(workspace.mode)
                                 ? t("browserworkspace.EmptySessionDescription", {
                                     defaultValue: "Open a page to start a real browser session. The preview here follows the session instead of embedding the target site directly.",
                                 })
                                 : t("browserworkspace.EmptyDescription", {
-                                    defaultValue: "Open a page here to get started.",
-                                }) }), !loading && workspace.mode === "web" && browserBridgeSupported ? (_jsxs("div", { className: "mt-3 flex w-full flex-col gap-3 rounded-md border border-border/40 bg-card/35 p-3 text-left", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: t("browserworkspace.BrowserBridgeTitle", {
+                                    defaultValue: "Open a tab and watch the agent drive the page. Wallet and signing route through your local Steward — no extension required.",
+                                }) }), !loading ? (_jsx(Button, { size: "sm", className: "mt-1", disabled: busyAction !== null, onClick: () => void runBrowserWorkspaceAction("open:home", async () => {
+                                await openNewBrowserWorkspaceTab(BROWSER_WORKSPACE_DEFAULT_HOME_URL, "user");
+                            }), "data-testid": "browser-workspace-open-home", children: t("browserworkspace.OpenNewTab", {
+                                defaultValue: "Open new tab",
+                            }) })) : null, !loading && workspace.mode === "web" && browserBridgeSupported ? (_jsxs("div", { className: "mt-3 flex w-full flex-col gap-3 rounded-md border border-border/40 bg-card/35 p-3 text-left", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: t("browserworkspace.BrowserBridgeTitle", {
                                                         defaultValue: "Agent Browser Bridge",
                                                     }) }), _jsx("div", { className: "mt-1 text-xs leading-5 text-muted", children: t("browserworkspace.BrowserBridgeDescription", {
                                                         defaultValue: "The agent can drive your real Chrome tabs with the Agent Browser Bridge extension.",
@@ -848,7 +1257,19 @@ export function BrowserWorkspaceView() {
                                                     defaultValue: "Open extension folder",
                                                 })] }), _jsx(Button, { variant: "outline", size: "sm", disabled: busyAction !== null, onClick: () => void openBrowserBridgeChromeExtensions(), children: t("browserworkspace.OpenChromeExtensions", {
                                                 defaultValue: "Open Chrome extensions",
-                                            }) })] })] })) : null] }) })) : workspace.mode === "web" ? (workspace.tabs.map((tab) => {
+                                            }) })] })] })) : null] }) })) : workspace.mode === "desktop" ? (workspace.tabs.map((tab) => {
+                const active = tab.id === selectedTabId;
+                const visibilityClass = active
+                    ? "pointer-events-auto opacity-100"
+                    : "pointer-events-none opacity-0";
+                return (_jsx("electrobun-webview", { ref: (el) => registerBrowserWorkspaceElectrobunWebview(tab.id, el ?? null), src: tab.url, partition: tab.partition, preload: BROWSER_TAB_PRELOAD_SCRIPT, 
+                    // Native OOPIF hide/show is driven by `tag.toggleHidden(bool)`
+                    // in the selection useEffect — the HTML `hidden` attribute
+                    // alone is a no-op for the underlying native view, which is
+                    // why inactive tabs were leaking pointer events through the
+                    // surface.
+                    className: `absolute inset-0 ${visibilityClass}`, style: { display: "block" } }, tab.id));
+            })) : workspace.mode === "web" ? (workspace.tabs.map((tab) => {
                 const active = tab.id === selectedTabId;
                 const highlighted = tab.visible;
                 const frameBlocked = isBrowserWorkspaceFrameBlockedUrl(tab.url);
@@ -875,13 +1296,9 @@ export function BrowserWorkspaceView() {
                     className: `absolute inset-0 h-full w-full border-0 bg-bg transition-opacity ${visibilityClass}`, style: { colorScheme: uiTheme }, onLoad: () => highlighted
                         ? postBrowserWalletReady(tab, browserWalletState)
                         : undefined }, tab.id));
-            })) : (_jsxs("div", { className: "flex h-full flex-1 flex-col bg-bg", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border/30 bg-card/20 px-3 py-2 text-xs text-muted", children: [_jsx("span", { className: "rounded-full border border-border/40 bg-card/60 px-2 py-1 font-medium text-txt", children: workspace.mode === "cloud"
-                                    ? t("browserworkspace.CloudSession", {
-                                        defaultValue: "Cloud browser session",
-                                    })
-                                    : t("browserworkspace.DesktopSession", {
-                                        defaultValue: "Desktop browser session",
-                                    }) }), selectedTab?.provider ? (_jsxs("span", { children: [t("common.provider", {
+            })) : (_jsxs("div", { className: "flex h-full flex-1 flex-col bg-bg", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border/30 bg-card/20 px-3 py-2 text-xs text-muted", children: [_jsx("span", { className: "rounded-full border border-border/40 bg-card/60 px-2 py-1 font-medium text-txt", children: t("browserworkspace.CloudSession", {
+                                    defaultValue: "Cloud browser session",
+                                }) }), selectedTab?.provider ? (_jsxs("span", { children: [t("common.provider", {
                                         defaultValue: "Provider",
                                     }), `: ${selectedTab.provider}`] })) : null, selectedTab?.status ? (_jsxs("span", { children: [t("common.status", {
                                         defaultValue: "Status",

package/packages/app-core/src/components/pages/ChatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/pages/ChatView.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,KAAK,kBAAkB,EAAU,MAAM,kBAAkB,CAAC;AAuBnE,OAAO,EAAE,oCAAoC,EAAE,MAAM,mBAAmB,CAAC;AAOzE,KAAK,eAAe,GAAG,SAAS,GAAG,YAAY,CAAC;AAYhD,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAyCD,wBAAgB,QAAQ,CAAC,EACvB,OAAmB,EACnB,iBAAiB,GAClB,EAAE,aAAa,2CAwnBf;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,eAAe,EACf,QAAQ,EACR,OAAO,EACP,YAAY,GACb,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,2CA6BA"}
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/pages/ChatView.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,KAAK,kBAAkB,EAAU,MAAM,kBAAkB,CAAC;AAuBnE,OAAO,EAAE,oCAAoC,EAAE,MAAM,mBAAmB,CAAC;AAOzE,KAAK,eAAe,GAAG,SAAS,GAAG,YAAY,CAAC;AAYhD,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAyCD,wBAAgB,QAAQ,CAAC,EACvB,OAAmB,EACnB,iBAAiB,GAClB,EAAE,aAAa,2CA4nBf;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,eAAe,EACf,QAAQ,EACR,OAAO,EACP,YAAY,GACb,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,2CA6BA"}

package/packages/app-core/src/components/pages/ChatView.js

@@ -310,7 +310,7 @@ export function ChatView({ variant = "default", onPtySessionClick, }) {
             defaultValue: "Saving...",
         }),
     };
-    const messagesContent = visibleMsgs.length === 0 && !chatSending ? null : (_jsx(ChatTranscript, { variant: variant, agentName: agentName, carryoverMessages: companionCarryover?.messages, carryoverOpacity: gameModalCarryoverOpacity, labels: chatMessageLabels, messages: isGameModal ? gameModalVisibleMsgs : visibleMsgs, onEdit: handleEditMessage, onSpeak: handleSpeakMessage, onCopy: (text) => {
+    const messagesContent = visibleMsgs.length === 0 && !chatSending ? (_jsx("div", { className: "flex h-full items-center justify-center px-6 text-center text-xs text-muted", children: t("chatview.NoMessagesYet", { defaultValue: "No messages yet." }) })) : (_jsx(ChatTranscript, { variant: variant, agentName: agentName, carryoverMessages: companionCarryover?.messages, carryoverOpacity: gameModalCarryoverOpacity, labels: chatMessageLabels, messages: isGameModal ? gameModalVisibleMsgs : visibleMsgs, onEdit: handleEditMessage, onSpeak: handleSpeakMessage, onCopy: (text) => {
             void copyToClipboard(text);
         }, renderMessageContent: (message) => (_jsx(MessageContent, { message: message })), typingIndicator: chatSending && !chatFirstTokenReceived ? (isGameModal ? (_jsx(TypingIndicator, { variant: "game-modal", agentName: agentName })) : (_jsx(TypingIndicator, { agentName: agentName, agentAvatarSrc: agentAvatarSrc }))) : null }));
     const auxiliaryNode = (_jsxs(_Fragment, { children: [shareIngestNotice ? (_jsx("div", { className: `text-xs text-ok py-1 relative${isGameModal ? " pointer-events-auto" : ""}`, style: { zIndex: 1 }, children: shareIngestNotice })) : null, droppedFiles.length > 0 ? (_jsx("div", { className: `text-xs text-muted py-0.5 flex gap-2 relative${isGameModal ? " pointer-events-auto" : ""}`, style: { zIndex: 1 }, children: droppedFiles.map((f) => (_jsx("span", { children: f }, f))) })) : null, _jsx(ChatAttachmentStrip, { variant: variant, items: chatPendingImages.map((img, imgIdx) => ({