@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/pages/BrowserWorkspaceView.js

@@ -1,20 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Capacitor } from "@capacitor/core";
-import { Button, ConfirmDialog, Input, SidebarCollapsedActionButton, SidebarContent, SidebarPanel, SidebarScrollRegion, useConfirm, useIntervalWhenDocumentVisible, WorkspaceLayout, } from "@elizaos/ui";
-import { ExternalLink, FolderOpen, Plus, RefreshCw, X } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { ExternalLink, FolderOpen, PanelLeftClose, PanelLeftOpen, Plus, RefreshCw, X, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client, } from "../../api/index.js";
 import { MOBILE_RUNTIME_MODE_CHANGED_EVENT } from "../../events/index.js";
-import { readPersistedMobileRuntimeMode } from "../../onboarding/mobile-runtime-mode.js";
+import { readPersistedMobileRuntimeMode } from "../../first-run/mobile-runtime-mode.js";
+import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
+import { useRenderGuard } from "../../hooks/useRenderGuard.js";
+import { WorkspaceLayout } from "../../layouts/workspace-layout/workspace-layout.js";
 import { useApp } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { BROWSER_TAB_PRELOAD_SCRIPT, setBrowserTabsRendererImpl, } from "../../utils/browser-tabs-renderer-registry.js";
+import { SidebarCollapsedActionButton } from "../composites/sidebar/sidebar-collapsed-rail.js";
+import { SidebarContent } from "../composites/sidebar/sidebar-content.js";
+import { SidebarPanel } from "../composites/sidebar/sidebar-panel.js";
+import { SidebarScrollRegion } from "../composites/sidebar/sidebar-scroll-region.js";
 import { AppPageSidebar } from "../shared/AppPageSidebar.js";
 import { CollapsibleSidebarSection } from "../shared/CollapsibleSidebarSection.js";
-import { AppWorkspaceChrome, } from "../workspace/AppWorkspaceChrome.js";
+import { Button } from "../ui/button.js";
+import { ConfirmDialog } from "../ui/confirm-dialog.js";
+import { useConfirm } from "../ui/confirm-dialog.hooks.js";
+import { Input } from "../ui/input.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
+import { AppWorkspaceChrome } from "../workspace/AppWorkspaceChrome.js";
 import { decodeBase64ForPreview, decodeSignableMessage, formatAddressForDisplay, formatWeiForDisplay, truncateMessageForDisplay, } from "./browser-wallet-consent-format.js";
-import { buildBrowserWorkspaceWalletState, } from "./browser-workspace-wallet.js";
-import { getBrowserPageScopeCopy } from "./page-scoped-conversations.js";
+import { buildBrowserWorkspaceWalletState, getUnsupportedBrowserWorkspaceEvmChainError, isBrowserWorkspaceEvmChainSupported, parseBrowserWorkspaceEvmChainId, resolveBrowserWorkspaceSignMessage, } from "./browser-workspace-wallet.js";
 import { useBrowserWorkspaceWalletBridge } from "./useBrowserWorkspaceWalletBridge.js";
 const POLL_INTERVAL_MS = 2_500;
 const BROWSER_BRIDGE_POLL_INTERVAL_MS = 4_000;
@@ -24,7 +35,24 @@ const BROWSER_WORKSPACE_APP_PARTITION = "persist:eliza-browser-app";
 // 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 = "eliza:browser-workspace:collapsed-sections";
-function isWebviewTagElement(value) {
+// Selectors handed to `<electrobun-webview masks=…>` so the native OOPIF
+// surface doesn't paint over (or capture clicks within) React overlays
+// stacked on the same rect. Covers Radix Dialog/AlertDialog content
+// (`role=dialog`/`alertdialog`), every Radix popper-based surface (Popover,
+// Tooltip, Dropdown, Select, HoverCard, ContextMenu — all wrapped in
+// `data-radix-popper-content-wrapper`), and the ActionNotice toast which
+// uses `role=status`. Polled by OverlaySyncController so overlays mounted
+// after the tab still get masked.
+const BROWSER_WORKSPACE_TAB_MASK_SELECTORS = [
+    '[role="dialog"]',
+    '[role="alertdialog"]',
+    "[data-radix-popper-content-wrapper]",
+    '[role="tooltip"]',
+    '[role="menu"]',
+    '[role="listbox"]',
+    '[role="status"]',
+].join(", ");
+function _isWebviewTagElement(value) {
     if (!(value instanceof HTMLElement))
         return false;
     const candidate = value;
@@ -192,21 +220,70 @@ function resolveBrowserWorkspaceSelection(tabs, selectedId) {
     const visibleTab = tabs.find((tab) => tab.visible);
     return visibleTab?.id ?? tabs[0]?.id ?? null;
 }
-function parseEip155ChainId(value) {
-    if (typeof value === "number" && Number.isFinite(value) && value > 0) {
-        return value;
-    }
+function resolveSolanaCluster(value) {
     if (typeof value !== "string")
-        return null;
-    const trimmed = value.trim();
-    if (!trimmed)
-        return null;
-    const parsed = trimmed.startsWith("0x")
-        ? Number.parseInt(trimmed.slice(2), 16)
-        : Number(trimmed);
-    return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+        return undefined;
+    const normalized = value.toLowerCase();
+    if (normalized.includes("devnet"))
+        return "devnet";
+    if (normalized.includes("testnet"))
+        return "testnet";
+    if (normalized.includes("mainnet"))
+        return "mainnet";
+    return undefined;
+}
+function BrowserNavButton({ agentId, agentLabel, agentDescription, group, status, onActivate, ...buttonProps }) {
+    const { ref, agentProps } = useAgentElement({
+        id: agentId,
+        role: "button",
+        label: agentLabel,
+        group,
+        ...(agentDescription ? { description: agentDescription } : {}),
+        ...(status ? { status } : {}),
+        onActivate,
+    });
+    return _jsx(Button, { ref: ref, ...agentProps, ...buttonProps });
+}
+function BrowserAddressInput({ agentLabel, agentDescription, getValue, onFill, ...inputProps }) {
+    const { ref, agentProps } = useAgentElement({
+        id: "address-input",
+        role: "text-input",
+        label: agentLabel,
+        ...(agentDescription ? { description: agentDescription } : {}),
+        getValue,
+        onFill,
+    });
+    return _jsx(Input, { ref: ref, ...agentProps, ...inputProps });
+}
+function BrowserTabRow({ tab, active, tabHasSessionFocus, label, description, closeTabLabel, agentActiveLabel, monogram, onActivate, onClose, }) {
+    const tabIsInternal = isInternalBrowserWorkspaceTab(tab);
+    const { ref: activateRef, agentProps: activateAgentProps } = useAgentElement({
+        id: `tab-${tab.id}`,
+        role: "tab",
+        label,
+        group: "browser-tabs",
+        description: `Activate browser tab: ${label}`,
+        status: active ? "active" : "inactive",
+        onActivate,
+    });
+    const { ref: closeRef, agentProps: closeAgentProps } = useAgentElement({
+        id: `tab-close-${tab.id}`,
+        role: "button",
+        label: `${closeTabLabel} ${label}`,
+        group: "browser-tabs",
+        description: `Close browser tab: ${label}`,
+        onActivate: onClose,
+    });
+    return (_jsxs("div", { className: "group relative", children: [_jsxs("button", { ref: activateRef, ...activateAgentProps, type: "button", role: "tab", "aria-selected": active, "aria-current": active ? "page" : undefined, title: tab.url, onClick: onActivate, className: `flex w-full min-w-0 items-start gap-1.5 rounded-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 " }), _jsx("span", { className: "sr-only", children: agentActiveLabel })] })) : (_jsx("span", { className: "text-[10px] font-semibold leading-none", children: monogram })) }), _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", { ref: closeRef, ...closeAgentProps, 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-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();
+                    onClose();
+                }, children: _jsx(X, { className: "h-3 w-3" }) }))] }));
 }
 export function BrowserWorkspaceView() {
+    useRenderGuard("BrowserWorkspaceView");
     const { getStewardPending, getStewardStatus, setActionNotice, t, plugins, uiTheme, walletAddresses, walletConfig, } = useApp();
     const [workspace, setWorkspace] = useState({
         mode: "web",
@@ -227,6 +304,11 @@ export function BrowserWorkspaceView() {
     const [tabSnapshots, setTabSnapshots] = useState({});
     const [busyAction, setBusyAction] = useState(null);
     const [collapsedSections, setCollapsedSections] = useState(() => readStoredBrowserWorkspaceCollapsedSections());
+    // Controlled collapsed state for the tabs sidebar so the URL bar can
+    // expose a toggle that's always reachable — when the sidebar is
+    // collapsed past its rail, the rail's expand button can sit behind
+    // the OOPIF and become unclickable.
+    const [tabsSidebarCollapsed, setTabsSidebarCollapsed] = useState(false);
     const [browserBridgeAvailable, setBrowserBridgeAvailable] = useState(false);
     const [browserBridgeLoading, setBrowserBridgeLoading] = useState(true);
     const [browserBridgeCompanions, setBrowserBridgeCompanions] = useState([]);
@@ -236,6 +318,7 @@ export function BrowserWorkspaceView() {
     const initialBrowseHandledRef = useRef(false);
     const iframeRefs = useRef(new Map());
     const electrobunWebviewRefs = useRef(new Map());
+    const electrobunHostMessageHandlersRef = useRef(new Map());
     const pendingTabExecsRef = useRef(new Map());
     const tabExecCounterRef = useRef(0);
     const tabChainIdRef = useRef(new Map());
@@ -612,16 +695,19 @@ export function BrowserWorkspaceView() {
                         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) {
+                        const chainId = parseBrowserWorkspaceEvmChainId(next);
+                        if (!chainId) {
                             reply({
                                 error: "wallet_switchEthereumChain requires a valid chainId.",
                             });
                             return;
                         }
+                        if (!isBrowserWorkspaceEvmChainSupported(chainId)) {
+                            reply({
+                                error: getUnsupportedBrowserWorkspaceEvmChainError(chainId),
+                            });
+                            return;
+                        }
                         tabChainIdRef.current.set(req.tabId, chainId);
                         reply({ result: null });
                         return;
@@ -637,12 +723,7 @@ export function BrowserWorkspaceView() {
                             });
                             return;
                         }
-                        const arr = Array.isArray(req.params) ? req.params : [];
-                        const message = typeof arr[0] === "string"
-                            ? arr[0]
-                            : typeof arr[1] === "string"
-                                ? arr[1]
-                                : null;
+                        const message = resolveBrowserWorkspaceSignMessage(req.params, evmAddress);
                         if (!message) {
                             reply({
                                 error: "Browser wallet signing requires a message payload.",
@@ -663,6 +744,14 @@ export function BrowserWorkspaceView() {
                         reply({ result: result.signature });
                         return;
                     }
+                    case "eth_signTypedData":
+                    case "eth_signTypedData_v3":
+                    case "eth_signTypedData_v4": {
+                        reply({
+                            error: "Typed-data signing is not supported by the Eliza browser wallet.",
+                        });
+                        return;
+                    }
                     case "eth_sendTransaction": {
                         if (!walletState.transactionSigningAvailable) {
                             reply({
@@ -681,8 +770,14 @@ export function BrowserWorkspaceView() {
                             });
                             return;
                         }
-                        const txChainId = parseEip155ChainId(tx.chainId);
+                        const txChainId = parseBrowserWorkspaceEvmChainId(tx.chainId);
                         const chainId = txChainId ?? tabChainIdRef.current.get(req.tabId) ?? 1;
+                        if (!isBrowserWorkspaceEvmChainSupported(chainId)) {
+                            reply({
+                                error: getUnsupportedBrowserWorkspaceEvmChainError(chainId),
+                            });
+                            return;
+                        }
                         tabChainIdRef.current.set(req.tabId, chainId);
                         const value = typeof tx.value === "string"
                             ? tx.value.startsWith("0x")
@@ -799,9 +894,31 @@ export function BrowserWorkspaceView() {
                             return;
                         }
                         const willBroadcast = req.method === "signAndSendTransaction";
+                        const chain = req.params && typeof req.params === "object"
+                            ? req.params.chain
+                            : undefined;
+                        const cluster = resolveSolanaCluster(req.params && typeof req.params === "object"
+                            ? req.params.cluster
+                            : undefined) ?? resolveSolanaCluster(chain);
+                        const description = req.params && typeof req.params === "object"
+                            ? req.params.description
+                            : undefined;
+                        const effectiveDescription = typeof description === "string" && description.trim()
+                            ? description.trim()
+                            : typeof chain === "string" && chain.trim()
+                                ? `Solana transaction on ${chain.trim()}`
+                                : cluster
+                                    ? `Solana transaction on ${cluster}`
+                                    : undefined;
+                        const solanaDetails = [
+                            cluster ? `Cluster: ${cluster}` : null,
+                            typeof chain === "string" && chain.trim()
+                                ? `Chain: ${chain.trim()}`
+                                : null,
+                        ].filter(Boolean);
                         const allowed = await walletActionConfirm({
                             title: `${domain} wants to ${willBroadcast ? "send" : "sign"} a Solana transaction`,
-                            message: `From: ${formatAddressForDisplay(solanaAddress ?? "")}\n${willBroadcast ? "Will broadcast on submit." : "Returns the signed bytes to the dApp; the dApp may broadcast."}\n\nAllow?`,
+                            message: `From: ${formatAddressForDisplay(solanaAddress ?? "")}${solanaDetails.length ? `\n${solanaDetails.join("\n")}` : ""}\n${willBroadcast ? "Will broadcast on submit." : "Returns the signed bytes to the dApp; the dApp may broadcast."}\n\nAllow?`,
                             confirmLabel: willBroadcast ? "Send" : "Sign",
                             cancelLabel: "Reject",
                         });
@@ -812,6 +929,10 @@ export function BrowserWorkspaceView() {
                         const result = await client.sendBrowserSolanaTransaction({
                             transactionBase64,
                             broadcast: willBroadcast,
+                            ...(cluster ? { cluster } : {}),
+                            ...(effectiveDescription
+                                ? { description: effectiveDescription }
+                                : {}),
                         });
                         reply({ result });
                         return;
@@ -837,6 +958,7 @@ export function BrowserWorkspaceView() {
     // user consent, either at request time or via a previously stored
     // `creds.<domain>.:autoallow` entry.
     const { confirm: vaultAutofillConfirm, modalProps: vaultAutofillModalProps } = useConfirm();
+    const browserWorkspaceConfirmOpen = walletActionModalProps.open || vaultAutofillModalProps.open;
     const handleTabVaultAutofillRequest = useCallback(async (req) => {
         const tag = electrobunWebviewRefs.current.get(req.tabId);
         const reply = (payload) => {
@@ -868,9 +990,8 @@ export function BrowserWorkspaceView() {
                 reply({ fields: {} });
                 return;
             }
-            // Pick the most-recently-modified entry. Multi-account selection
-            // is a future UI improvement — at first save time only one entry
-            // typically exists per domain.
+            // Pick the most-recently-modified entry; first-save flows typically
+            // have one entry per domain.
             const sorted = [...candidates].sort((a, b) => b.updatedAt - a.updatedAt);
             const chosen = sorted[0];
             if (!chosen) {
@@ -906,7 +1027,7 @@ export function BrowserWorkspaceView() {
             reply({ error: message });
         }
     }, [vaultAutofillConfirm]);
-    const handleTabHostMessage = useCallback((event) => {
+    const handleTabHostMessage = useCallback((tabId, event) => {
         const detail = event.detail;
         if (!detail || typeof detail.type !== "string")
             return;
@@ -928,12 +1049,6 @@ export function BrowserWorkspaceView() {
             typeof detail.requestId === "number" &&
             typeof detail.protocol === "string" &&
             typeof detail.method === "string") {
-            const tag = isWebviewTagElement(event.currentTarget)
-                ? event.currentTarget
-                : null;
-            const tabId = [...electrobunWebviewRefs.current.entries()].find(([, el]) => el === tag)?.[0] ?? null;
-            if (!tabId)
-                return;
             void handleTabWalletRequest({
                 tabId,
                 requestId: detail.requestId,
@@ -949,12 +1064,6 @@ export function BrowserWorkspaceView() {
             typeof detail.domain === "string" &&
             typeof detail.url === "string" &&
             Array.isArray(detail.fieldHints)) {
-            const tag = isWebviewTagElement(event.currentTarget)
-                ? event.currentTarget
-                : null;
-            const tabId = [...electrobunWebviewRefs.current.entries()].find(([, el]) => el === tag)?.[0] ?? null;
-            if (!tabId)
-                return;
             const fieldHints = [];
             for (const hint of detail.fieldHints) {
                 if (hint &&
@@ -975,15 +1084,25 @@ export function BrowserWorkspaceView() {
     }, [handleTabWalletRequest, handleTabVaultAutofillRequest]);
     const registerBrowserWorkspaceElectrobunWebview = useCallback((tabId, element) => {
         const previous = electrobunWebviewRefs.current.get(tabId);
+        const previousHandler = electrobunHostMessageHandlersRef.current.get(tabId);
         if (previous && previous !== element) {
-            previous.off("host-message", handleTabHostMessage);
+            if (previousHandler) {
+                previous.off("host-message", previousHandler);
+            }
+            electrobunHostMessageHandlersRef.current.delete(tabId);
         }
         if (!element) {
+            if (previous && previousHandler) {
+                previous.off("host-message", previousHandler);
+            }
+            electrobunHostMessageHandlersRef.current.delete(tabId);
             electrobunWebviewRefs.current.delete(tabId);
             return;
         }
         if (previous !== element) {
-            element.on("host-message", handleTabHostMessage);
+            const hostMessageHandler = (event) => handleTabHostMessage(tabId, event);
+            electrobunHostMessageHandlersRef.current.set(tabId, hostMessageHandler);
+            element.on("host-message", hostMessageHandler);
             // 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
@@ -1010,9 +1129,12 @@ export function BrowserWorkspaceView() {
             // 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.
+            // Passthrough goes along for the ride so any clicks landing on the
+            // rect mid-transition fall through to React siblings beneath.
             if (selectedTabIdRef.current && selectedTabIdRef.current !== tabId) {
                 try {
                     element.toggleHidden(true);
+                    element.togglePassthrough(true);
                 }
                 catch {
                     // best-effort
@@ -1049,40 +1171,56 @@ export function BrowserWorkspaceView() {
             window.removeEventListener("resize", pokeAll);
         };
     }, []);
-    // Drive native hide/show on every tag whenever selection changes. The
+    // Drive native hide/show on every tag whenever selection or an in-app
+    // consent dialog changes. The native webview is an OOPIF overlay, so
+    // React dialogs are otherwise rendered under it and cannot be acted on.
     // 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).
+    // clicks intended for sibling UI (e.g. the top app nav). Passthrough is
+    // toggled in lockstep so a tab caught mid-transition (visible but not
+    // selected) still lets clicks fall through to the React layer beneath.
     useEffect(() => {
         if (workspace.mode !== "desktop")
             return;
         for (const [tabId, element] of electrobunWebviewRefs.current.entries()) {
             if (!element)
                 continue;
+            // Hide + engage passthrough whenever the tab is inactive OR an
+            // in-app consent dialog is open over the surface, so the dialog (a
+            // React sibling) renders above the native OOPIF and stays clickable.
+            const occluded = browserWorkspaceConfirmOpen || tabId !== selectedTabId;
             try {
-                element.toggleHidden(tabId !== selectedTabId);
+                element.toggleHidden(occluded);
+                element.togglePassthrough(occluded);
                 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.
+    }, [browserWorkspaceConfirmOpen, selectedTabId, workspace.mode]);
+    // On unmount, hide every OOPIF and engage passthrough so leftover native
+    // views don't bleed onto other routes between React's unmount and the
+    // tag's disconnectedCallback firing.
     useEffect(() => {
         const refs = electrobunWebviewRefs;
+        const handlers = electrobunHostMessageHandlersRef;
         return () => {
-            for (const element of refs.current.values()) {
+            for (const [tabId, element] of refs.current.entries()) {
                 try {
+                    const handler = handlers.current.get(tabId);
+                    if (element && handler) {
+                        element.off("host-message", handler);
+                    }
                     element?.toggleHidden(true);
+                    element?.togglePassthrough(true);
                 }
                 catch {
                     // best-effort
                 }
             }
+            handlers.current.clear();
         };
     }, []);
     useEffect(() => {
@@ -1342,41 +1480,6 @@ export function BrowserWorkspaceView() {
             defaultValue: "Failed to refresh Agent Browser Bridge status.",
         }));
     }, [loadBrowserBridgeState, runBrowserWorkspaceAction, t]);
-    const browserPageScopeCopy = useMemo(() => getBrowserPageScopeCopy({
-        browserBridgeConnected,
-        browserBridgeInstallAvailable: browserBridgeSupported,
-        browserLabel: primaryBrowserBridgeCompanion?.browser,
-        profileLabel: primaryBrowserBridgeCompanion?.profileLabel,
-    }), [
-        browserBridgeConnected,
-        browserBridgeSupported,
-        primaryBrowserBridgeCompanion?.browser,
-        primaryBrowserBridgeCompanion?.profileLabel,
-    ]);
-    const browserChatActions = !browserBridgeSupported ||
-        browserBridgeUnsupportedInNativeLocalMode ||
-        browserBridgeConnected ? null : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", disabled: busyAction !== null, onClick: () => void installBrowserBridgeExtension(), children: t("browserworkspace.InstallBrowserBridge", {
-                    defaultValue: "Install Agent Browser Bridge",
-                }) }), _jsxs(Button, { variant: "outline", size: "sm", disabled: busyAction !== null || !browserBridgePackageStatus?.chromeBuildPath, onClick: () => void revealBrowserBridgeFolder(), children: [_jsx(FolderOpen, { className: "h-4 w-4" }), t("browserworkspace.OpenBrowserBridgeFolder", {
-                        defaultValue: "Open extension folder",
-                    })] }), _jsx(Button, { variant: "outline", size: "sm", disabled: busyAction !== null, onClick: () => void openBrowserBridgeChromeExtensions(), children: t("browserworkspace.OpenChromeExtensions", {
-                    defaultValue: "Open Chrome extensions",
-                }) })] }));
-    const browserPageScopedChatPaneProps = useMemo(() => ({
-        introOverride: {
-            title: browserPageScopeCopy.title,
-            body: browserPageScopeCopy.body,
-            actions: browserChatActions,
-        },
-        systemAddendumOverride: browserPageScopeCopy.systemAddendum,
-        placeholderOverride: browserBridgeConnected
-            ? t("browserworkspace.ChatPlaceholderConnected", {
-                defaultValue: "Message",
-            })
-            : t("browserworkspace.ChatPlaceholderInstallBridge", {
-                defaultValue: "Message",
-            }),
-    }), [browserBridgeConnected, browserChatActions, browserPageScopeCopy, t]);
     const tabsLabel = t("browserworkspace.Tabs", {
         defaultValue: "Tabs",
     });
@@ -1398,27 +1501,21 @@ export function BrowserWorkspaceView() {
     const goLabel = t("browserworkspace.Go", {
         defaultValue: "Go",
     });
+    const agentActiveLabel = t("browserworkspace.AgentActive", {
+        defaultValue: "Agent is on this tab",
+    });
     function renderBrowserWorkspaceTabRow(tab) {
         const active = tab.id === selectedTabId;
         const tabHasSessionFocus = workspace.mode === "web" ? tab.visible : active;
         const label = getBrowserWorkspaceTabLabel(tab, t);
         const description = getBrowserWorkspaceTabDescription(tab, workspace.mode);
-        const tabIsInternal = isInternalBrowserWorkspaceTab(tab);
-        return (_jsxs("div", { className: "group relative", children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": active, "aria-current": active ? "page" : undefined, title: tab.url, onClick: () => void runBrowserWorkspaceAction(`show:${tab.id}`, async () => {
-                        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} ${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 () => {
-                            await closeBrowserWorkspaceTabById(tab.id);
-                        });
-                    }, children: _jsx(X, { className: "h-3 w-3" }) }))] }, tab.id));
+        return (_jsx(BrowserTabRow, { tab: tab, active: active, tabHasSessionFocus: tabHasSessionFocus, label: label, description: description, closeTabLabel: closeTabLabel, agentActiveLabel: agentActiveLabel, monogram: getBrowserWorkspaceTabMonogram(label), onActivate: () => void runBrowserWorkspaceAction(`show:${tab.id}`, async () => {
+                await activateBrowserWorkspaceTab(tab.id);
+            }), onClose: () => void runBrowserWorkspaceAction(`close:${tab.id}`, async () => {
+                await closeBrowserWorkspaceTabById(tab.id);
+            }) }, tab.id));
     }
-    const browserTabsSidebar = (_jsx(AppPageSidebar, { testId: "browser-workspace-sidebar", collapsible: true, contentIdentity: "browser-workspace-tabs", collapseButtonTestId: "browser-workspace-sidebar-collapse-toggle", expandButtonTestId: "browser-workspace-sidebar-expand-toggle", collapseButtonAriaLabel: t("browserworkspace.CollapseTabs", {
+    const browserTabsSidebar = (_jsx(AppPageSidebar, { testId: "browser-workspace-sidebar", collapsible: true, collapsed: tabsSidebarCollapsed, onCollapsedChange: setTabsSidebarCollapsed, contentIdentity: "browser-workspace-tabs", collapseButtonTestId: "browser-workspace-sidebar-collapse-toggle", expandButtonTestId: "browser-workspace-sidebar-expand-toggle", collapseButtonAriaLabel: t("browserworkspace.CollapseTabs", {
             defaultValue: "Collapse browser tabs",
         }), expandButtonAriaLabel: t("browserworkspace.ExpandTabs", {
             defaultValue: "Expand browser tabs",
@@ -1440,9 +1537,34 @@ export function BrowserWorkspaceView() {
                             }), emptyClassName: "pl-3 pr-2 py-1 text-2xs text-muted/70", bodyClassName: "space-y-0.5 pl-3", hoverActionsOnDesktop: true, testIdPrefix: "browser-tab-section", children: groupedTabs.agent.length > 0 ? (_jsx("div", { role: "tablist", "aria-label": agentTabsLabel, className: "space-y-1", children: groupedTabs.agent.map((tab) => renderBrowserWorkspaceTabRow(tab)) })) : null }), _jsx(CollapsibleSidebarSection, { sectionKey: "app", label: appTabsLabel, collapsed: collapsedSections.has("app"), onToggleCollapsed: toggleSidebarSectionCollapsed, emptyLabel: t("browserworkspace.NoAppTabs", {
                                 defaultValue: "No app tabs yet.",
                             }), emptyClassName: "pl-3 pr-2 py-1 text-2xs text-muted/70", bodyClassName: "space-y-0.5 pl-3", hoverActionsOnDesktop: true, testIdPrefix: "browser-tab-section", children: groupedTabs.app.length > 0 ? (_jsx("div", { role: "tablist", "aria-label": appTabsLabel, className: "space-y-1", children: groupedTabs.app.map((tab) => renderBrowserWorkspaceTabRow(tab)) })) : null })] }) }) }) }));
-    const navNode = (_jsxs("div", { className: "flex items-center gap-2 border-b border-border/30 bg-card/20 px-3 py-2", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", "aria-label": t("common.refresh", { defaultValue: "Refresh" }), disabled: !selectedTab || busyAction !== null, onClick: () => void runBrowserWorkspaceAction("reload:selected", async () => {
+    const navNode = (_jsxs("div", { className: "flex items-center gap-2 border-b border-border/30 bg-card/20 px-3 py-2", children: [_jsx(BrowserNavButton, { agentId: "toggle-tabs", agentLabel: tabsSidebarCollapsed
+                    ? t("browserworkspace.ExpandTabs", {
+                        defaultValue: "Expand browser tabs",
+                    })
+                    : t("browserworkspace.CollapseTabs", {
+                        defaultValue: "Collapse browser tabs",
+                    }), agentDescription: "Toggle the browser tabs sidebar", group: "browser-nav", onActivate: () => setTabsSidebarCollapsed((current) => !current), variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", "aria-label": tabsSidebarCollapsed
+                    ? t("browserworkspace.ExpandTabs", {
+                        defaultValue: "Expand browser tabs",
+                    })
+                    : t("browserworkspace.CollapseTabs", {
+                        defaultValue: "Collapse browser tabs",
+                    }), onClick: () => setTabsSidebarCollapsed((current) => !current), "data-testid": "browser-workspace-nav-tabs-toggle", children: tabsSidebarCollapsed ? (_jsx(PanelLeftOpen, { className: "h-4 w-4" })) : (_jsx(PanelLeftClose, { className: "h-4 w-4" })) }), _jsx(BrowserNavButton, { agentId: "new-tab", agentLabel: newTabLabel, agentDescription: "Open a new browser tab", group: "browser-nav", onActivate: () => void runBrowserWorkspaceAction("open:new", async () => {
+                    await openNewBrowserWorkspaceTab(newBrowserWorkspaceTabSeedUrl, "user");
+                }), variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", "aria-label": newTabLabel, disabled: busyAction !== null, onClick: () => void runBrowserWorkspaceAction("open:new", async () => {
+                    await openNewBrowserWorkspaceTab(newBrowserWorkspaceTabSeedUrl, "user");
+                }), "data-testid": "browser-workspace-nav-new-tab", children: _jsx(Plus, { className: "h-4 w-4" }) }), _jsx(BrowserNavButton, { agentId: "reload", agentLabel: t("common.refresh", { defaultValue: "Refresh" }), agentDescription: "Reload the active browser tab", group: "browser-nav", onActivate: () => void runBrowserWorkspaceAction("reload:selected", async () => {
+                    await reloadSelectedBrowserWorkspaceTab();
+                }), variant: "ghost", size: "icon", className: "h-8 w-8", "aria-label": t("common.refresh", { defaultValue: "Refresh" }), disabled: !selectedTab || busyAction !== null, onClick: () => void runBrowserWorkspaceAction("reload:selected", async () => {
                     await reloadSelectedBrowserWorkspaceTab();
-                }), children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), _jsx(Input, { value: locationInput, onChange: (event) => {
+                }), children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), _jsx(BrowserAddressInput, { agentLabel: t("browserworkspace.AddressPlaceholder", {
+                    defaultValue: selectedTabIsInternal
+                        ? "Internal tab URL is managed by the app"
+                        : "Enter a URL",
+                }), agentDescription: "The browser address bar for the active tab", getValue: () => locationInput, onFill: (value) => {
+                    setLocationInput(value);
+                    setLocationDirty(true);
+                }, value: locationInput, onChange: (event) => {
                     setLocationInput(event.target.value);
                     setLocationDirty(true);
                 }, onKeyDown: (event) => {
@@ -1456,11 +1578,19 @@ export function BrowserWorkspaceView() {
                     defaultValue: selectedTabIsInternal
                         ? "Internal tab URL is managed by the app"
                         : "Enter a URL",
-                }), "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 ||
+                }), "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(BrowserNavButton, { agentId: "go", agentLabel: goLabel, agentDescription: "Navigate the active tab to the address bar URL", group: "browser-nav", onActivate: () => void runBrowserWorkspaceAction("navigate:click", async () => {
+                    await navigateSelectedBrowserWorkspaceTab(locationInput);
+                }), 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", {
+                }), children: goLabel }), _jsx(BrowserNavButton, { agentId: "open-external", agentLabel: t("browserworkspace.OpenExternal", {
+                    defaultValue: "Open external",
+                }), agentDescription: "Open the active tab URL in an external browser", group: "browser-nav", onActivate: () => void runBrowserWorkspaceAction("open:external", async () => {
+                    if (!selectedTab)
+                        return;
+                    await openExternalUrl(selectedTab.url);
+                }), variant: "ghost", size: "icon", className: "h-8 w-8", "aria-label": t("browserworkspace.OpenExternal", {
                     defaultValue: "Open external",
                 }), disabled: !selectedTab || busyAction !== null, onClick: () => void runBrowserWorkspaceAction("open:external", async () => {
                     if (!selectedTab)
@@ -1473,7 +1603,7 @@ export function BrowserWorkspaceView() {
             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
+    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-sm border border-border/40 bg-card/80 px-3 py-1.5 text-xs text-muted 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 " }), _jsx("span", { className: "truncate", children: watchBannerLabel })] })) : null, loadError ? (_jsx("div", { className: "absolute left-1/2 top-6 z-20 -translate-x-1/2 rounded-sm 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",
                                 })
@@ -1492,7 +1622,7 @@ export function BrowserWorkspaceView() {
                             }) })) : null, !loading &&
                             workspace.mode === "web" &&
                             browserBridgeSupported &&
-                            !browserBridgeUnsupportedInNativeLocalMode ? (_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", {
+                            !browserBridgeUnsupportedInNativeLocalMode ? (_jsxs("div", { className: "mt-3 flex w-full flex-col gap-3 rounded-sm 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.",
@@ -1522,13 +1652,12 @@ export function BrowserWorkspaceView() {
                 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));
+                return (_jsx("electrobun-webview", { ref: (el) => registerBrowserWorkspaceElectrobunWebview(tab.id, el ?? null), src: tab.url, partition: tab.partition, preload: BROWSER_TAB_PRELOAD_SCRIPT, renderer: "cef", masks: BROWSER_WORKSPACE_TAB_MASK_SELECTORS, 
+                    // Start inactive tabs in passthrough so the OOPIF doesn't
+                    // capture clicks during the gap between mount and the first
+                    // selection effect. Native hide/show (toggleHidden) is then
+                    // driven from the selection useEffect.
+                    passthrough: active ? undefined : "", 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;
@@ -1562,11 +1691,11 @@ export function BrowserWorkspaceView() {
                                         defaultValue: "Provider",
                                     }), `: ${selectedTab.provider}`] })) : null, selectedTab?.status ? (_jsxs("span", { children: [t("common.status", {
                                         defaultValue: "Status",
-                                    }), `: ${selectedTab.status}`] })) : null, selectedTabLiveViewUrl ? (_jsx("button", { type: "button", className: "rounded-md border border-border/40 px-2 py-1 text-txt hover:bg-card/60", onClick: () => void runBrowserWorkspaceAction("open:live-session", async () => {
+                                    }), `: ${selectedTab.status}`] })) : null, selectedTabLiveViewUrl ? (_jsx("button", { type: "button", className: "rounded-sm border border-border/40 px-2 py-1 text-txt hover:bg-card/60", onClick: () => void runBrowserWorkspaceAction("open:live-session", async () => {
                                     await openExternalUrl(selectedTabLiveViewUrl);
                                 }), children: t("browserworkspace.OpenLiveSession", {
                                     defaultValue: "Open live session",
-                                }) })) : null] }), _jsxs("div", { className: "relative flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-card/15", children: [snapshotError ? (_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: snapshotError })) : null, selectedTabSnapshot ? (_jsx("img", { alt: selectedTab
+                                }) })) : null] }), _jsxs("div", { className: "relative flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-card/15", children: [snapshotError ? (_jsx("div", { className: "absolute left-1/2 top-6 z-20 -translate-x-1/2 rounded-sm border border-danger/50 bg-danger/15 px-3 py-1.5 text-xs text-danger", role: "alert", children: snapshotError })) : null, selectedTabSnapshot ? (_jsx("img", { alt: selectedTab
                                     ? getBrowserWorkspaceTabLabel(selectedTab, t)
                                     : t("browserworkspace.SessionPreview", {
                                         defaultValue: "Browser session preview",
@@ -1582,5 +1711,5 @@ export function BrowserWorkspaceView() {
                                         defaultValue: "This is a real browser session, not a raw iframe embed. Use chat or browser actions to navigate and interact with sites like Google and Discord.",
                                     }) })] })) : null] }))] }));
     const mainNode = (_jsx(WorkspaceLayout, { sidebar: browserTabsSidebar, contentHeader: navNode, contentHeaderClassName: "mb-0", headerPlacement: "inside", contentPadding: false, contentClassName: "overflow-hidden", contentInnerClassName: "min-h-0 overflow-hidden", mobileSidebarLabel: tabsLabel, mobileSidebarTriggerClassName: "ml-3 mt-3", children: browserSurface }));
-    return (_jsxs(_Fragment, { children: [_jsx(AppWorkspaceChrome, { testId: "browser-workspace-view", main: mainNode, chatScope: "page-browser", pageScopedChatPaneProps: browserPageScopedChatPaneProps }), _jsx(ConfirmDialog, { ...vaultAutofillModalProps }), _jsx(ConfirmDialog, { ...walletActionModalProps })] }));
+    return (_jsxs(ShellViewAgentSurface, { viewId: "browser", children: [_jsx(AppWorkspaceChrome, { testId: "browser-workspace-view", main: mainNode }), _jsx(ConfirmDialog, { ...vaultAutofillModalProps }), _jsx(ConfirmDialog, { ...walletActionModalProps })] }));
 }