@agent-native/core 0.14.8 → 0.15.0

package/dist/client/AgentPanel.js

@@ -28,14 +28,17 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortc
 import { IconMessageCircle, IconMessageDots, IconTerminal2, IconSettings, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsMaximize, IconArrowsMinimize, IconExternalLink, } from "@tabler/icons-react";
 import { FeedbackButton } from "./FeedbackButton.js";
 import { MultiTabAssistantChat, } from "./MultiTabAssistantChat.js";
+import { isAssistantUiStaleIndexError, } from "./AssistantChat.js";
 import { useDevMode } from "./use-dev-mode.js";
 import { useScreenRefreshKey } from "./use-db-sync.js";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useLocation, useNavigate } from "react-router";
 import { cn } from "./utils.js";
 import { agentNativePath } from "./api-path.js";
+import { trackEvent } from "./analytics.js";
 import { getFrameOrigin, isInFrame, isTrustedFrameMessage } from "./frame.js";
-import { getInitialAgentSidebarOpen, SIDEBAR_OPEN_KEY, } from "./agent-sidebar-state.js";
+import { shouldParentFrameOwnAgentPanel } from "./builder-frame.js";
+import { dispatchAgentSidebarStateChange, getInitialAgentSidebarOpen, SIDEBAR_OPEN_KEY, } from "./agent-sidebar-state.js";
 // Lazy-load AgentTerminal to avoid bundling xterm.js when not needed
 const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ default: m.AgentTerminal })));
 function parentFrameTargetOrigin() {
@@ -126,21 +129,94 @@ function IconTooltip({ content, children, }) {
 }
 function useBuilderConnectUrl() {
     const [connectUrl, setConnectUrl] = useState(null);
+    const [configured, setConfigured] = useState(false);
     useEffect(() => {
         let cancelled = false;
-        fetch(agentNativePath("/_agent-native/builder/status"))
-            .then((res) => (res.ok ? res.json() : null))
-            .then((data) => {
-            if (!cancelled && data?.connectUrl) {
-                setConnectUrl(data.connectUrl);
-            }
-        })
-            .catch(() => { });
+        // Track previous configured state so we only fanout the
+        // `agent-engine:configured-changed` event on a real false→true
+        // transition. Without this, every `/builder/status` response with
+        // `configured: true` dispatched the event, our own `onConfigured`
+        // listener caught it (because we both fire AND listen on the same
+        // global), refresh fired again, and we'd loop forever.
+        let lastConfigured = false;
+        const refresh = () => {
+            fetch(agentNativePath("/_agent-native/builder/status"))
+                .then((res) => (res.ok ? res.json() : null))
+                .then((data) => {
+                if (cancelled || !data)
+                    return;
+                if (data.connectUrl)
+                    setConnectUrl(data.connectUrl);
+                const nextConfigured = !!data.configured;
+                setConfigured(nextConfigured);
+                if (nextConfigured && !lastConfigured) {
+                    lastConfigured = true;
+                    // Tell other listeners (the agent panel's "Use Builder" CTA
+                    // lives in a different React tree than the connect-flow popup
+                    // poller, so a fresh status read here is the only thing that
+                    // flips its UI). Dispatch only on transition so listeners
+                    // that share this hook don't bounce the event back here.
+                    window.dispatchEvent(new CustomEvent("agent-engine:configured-changed", {
+                        detail: { source: "builder-status" },
+                    }));
+                }
+                else if (!nextConfigured) {
+                    lastConfigured = false;
+                }
+            })
+                .catch(() => { });
+        };
+        refresh();
+        // The "Use Builder" CTA opens Builder in a `<a target="_blank">` tab
+        // (not a popup), so the previous one-shot fetch never noticed the
+        // connect succeeded when the user came back to the original tab.
+        const onFocus = () => refresh();
+        const onVisibility = () => {
+            if (document.visibilityState === "visible")
+                refresh();
+        };
+        const onConfigured = (e) => {
+            // Ignore our own dispatch — refresh() already wrote the new state.
+            // Other dispatchers (the connect-flow popup poller, an external
+            // tab that completed connect, etc.) get the refresh they need.
+            const detail = e.detail;
+            if (detail?.source === "builder-status")
+                return;
+            refresh();
+        };
+        window.addEventListener("focus", onFocus);
+        document.addEventListener("visibilitychange", onVisibility);
+        window.addEventListener("agent-engine:configured-changed", onConfigured);
+        let channel = null;
+        try {
+            channel = new BroadcastChannel(`builder-connect:${window.location.host}`);
+            channel.onmessage = (e) => {
+                const data = e.data;
+                if (data?.type === "builder-connect-success")
+                    refresh();
+            };
+        }
+        catch {
+            // BroadcastChannel missing — focus/visibility refresh still covers it.
+        }
+        const onMessage = (e) => {
+            if (e.origin !== window.location.origin)
+                return;
+            const data = e.data;
+            if (data?.type === "builder-connect-success")
+                refresh();
+        };
+        window.addEventListener("message", onMessage);
         return () => {
             cancelled = true;
+            window.removeEventListener("focus", onFocus);
+            document.removeEventListener("visibilitychange", onVisibility);
+            window.removeEventListener("agent-engine:configured-changed", onConfigured);
+            window.removeEventListener("message", onMessage);
+            channel?.close();
         };
     }, []);
-    return connectUrl;
+    return { connectUrl, configured };
 }
 function useClientOnly() {
     const [mounted, setMounted] = useState(false);
@@ -148,11 +224,18 @@ function useClientOnly() {
     return mounted;
 }
 function CodeAccessUnavailablePanel({ title, description, ctaLabel, ctaHref, secondaryCtaLabel = "Use Builder", secondaryCtaHref, compact = false, }) {
-    const builderConnectUrl = useBuilderConnectUrl();
+    const { connectUrl: builderConnectUrl } = useBuilderConnectUrl();
     const builderHref = secondaryCtaHref ?? builderConnectUrl ?? "https://builder.io";
-    return (_jsxs("div", { className: cn("rounded-lg border border-border bg-muted/35 text-center", compact ? "mx-3 mt-2 px-3 py-2.5" : "max-w-[300px] px-4 py-4"), children: [_jsx("div", { className: cn("mx-auto flex items-center justify-center rounded-full bg-background text-muted-foreground", compact ? "mb-2 h-8 w-8" : "mb-3 h-10 w-10"), children: _jsx(IconTerminal2, { className: compact ? "h-4 w-4" : "h-5 w-5" }) }), _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: cn("mt-1 text-muted-foreground", compact ? "text-[11px] leading-snug" : "text-xs leading-relaxed"), children: description }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-center gap-2", children: [ctaHref ? (_jsxs("a", { href: ctaHref, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90", children: [ctaLabel, _jsx(IconExternalLink, { className: "h-3 w-3" })] })) : null, _jsxs("a", { href: builderHref, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [secondaryCtaLabel, _jsx(IconExternalLink, { className: "h-3 w-3" })] })] })] }));
+    return (_jsxs("div", { className: cn("rounded-lg border border-border bg-muted/35 text-center", compact ? "mx-3 mt-2 px-3 py-2.5" : "max-w-[300px] px-4 py-4"), children: [_jsx("div", { className: cn("mx-auto flex items-center justify-center rounded-full bg-background text-muted-foreground", compact ? "mb-2 h-8 w-8" : "mb-3 h-10 w-10"), children: _jsx(IconTerminal2, { className: compact ? "h-4 w-4" : "h-5 w-5" }) }), _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: cn("mt-1 text-muted-foreground", compact ? "text-[11px] leading-snug" : "text-xs leading-relaxed"), children: description }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-center gap-2", children: [ctaHref ? (_jsxs("a", { href: ctaHref, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90", children: [ctaLabel, _jsx(IconExternalLink, { className: "h-3 w-3" })] })) : null, _jsxs("a", { href: builderHref, target: "_blank", rel: "noreferrer", onClick: () => {
+                            trackEvent("builder connect clicked", {
+                                feature: "builder",
+                                stage: "client",
+                                source: "code_access_unavailable_panel",
+                                connect_url_kind: builderConnectUrl ? "provided" : "fallback",
+                            });
+                        }, className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [secondaryCtaLabel, _jsx(IconExternalLink, { className: "h-3 w-3" })] })] })] }));
 }
-function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateText, suggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, devAppUrl, storageKey, chatNotice, codeAccess, }) {
+function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateText, suggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, devAppUrl, storageKey, scope, browserTabId, chatNotice, codeAccess, }) {
     const mounted = useClientOnly();
     const keyPrefix = storageKey ? `:${storageKey}` : "";
     const execModeKey = `${EXEC_MODE_KEY}${keyPrefix}`;
@@ -269,9 +352,10 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
     // Tab close shortcuts. Avoid Cmd+W (browser/OS) and (on Windows) Ctrl+W.
     //   Mac:           Ctrl+W → close tab,  Ctrl+Alt+W → close all
     //   Windows/Linux: Alt+W  → close tab,  Ctrl+Alt+W → close all
+    // Use e.code (physical key) — on Mac, Alt+W inserts ∑ and e.key isn't "w".
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (e.key.toLowerCase() !== "w" || e.metaKey || e.shiftKey)
+            if (e.code !== "KeyW" || e.metaKey || e.shiftKey)
                 return;
             const isCloseAll = e.ctrlKey && e.altKey;
             const isCloseOne = isMac
@@ -303,7 +387,7 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
     const codeAccessEnabled = codeAccess?.enabled ?? inferredCodeAccessEnabled;
     const codeUnavailableTitle = codeAccess?.unavailableTitle ?? "Open Desktop to edit code";
     const codeUnavailableDescription = codeAccess?.unavailableDescription ??
-        "Source-code changes, workspace files, and CLI access are available in the Agent Native Desktop app.";
+        "Source-code changes and CLI access are available in the Agent Native Desktop app.";
     const codeUnavailableCtaLabel = codeAccess?.unavailableCtaLabel ?? "Download Desktop";
     const codeUnavailableCtaHref = codeAccess?.unavailableCtaHref ?? "https://www.agent-native.com/download";
     const codeUnavailableSecondaryCtaLabel = codeAccess?.unavailableSecondaryCtaLabel ?? "Use Builder";
@@ -343,15 +427,13 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
                                     ? "bg-accent text-foreground"
                                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconMessageCircle, { size: 14 }), "Chat"] }) }), _jsx(TooltipContent, { children: "Chat mode" })] }), showCliMode && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("cli"), "aria-label": "CLI terminal mode", className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "cli"
                                     ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconTerminal2, { size: 14 }), "CLI"] }) }), _jsx(TooltipContent, { children: codeAccessEnabled
+                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconTerminal2, { size: 14 }), "CLI"] }) }), _jsx(TooltipContent, { className: "max-w-[260px]", children: codeAccessEnabled
                                 ? "CLI terminal mode"
-                                : "Open Desktop to use CLI" })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": "Workspace files, agents, skills, and tasks", className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
+                                : codeUnavailableDescription })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": "Workspace files, agents, skills, and tasks", className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "resources"
                                     ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconLayoutGrid, { size: 14 }), "Workspace"] }) }), _jsx(TooltipContent, { children: codeAccessEnabled
-                                ? "Workspace files, agents, skills, and tasks"
-                                : "Open Desktop to use Workspace" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: () => switchMode("settings"), "aria-label": "Setup and configuration", className: cn("flex items-center justify-center rounded-md px-1.5 py-1", activeMode === "settings"
+                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconLayoutGrid, { size: 14 }), "Workspace"] }) }), _jsx(TooltipContent, { children: "Workspace files, agents, skills, and tasks" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: () => switchMode("settings"), "aria-label": "Setup and configuration", className: cn("flex items-center justify-center rounded-md px-1.5 py-1", activeMode === "settings"
                                     ? "bg-accent text-foreground"
-                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), children: _jsx(IconSettings, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Setup and configuration" })] })] }) })), [codeAccessEnabled, showCliMode]);
+                                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), children: _jsx(IconSettings, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Setup and configuration" })] })] }) })), [codeAccessEnabled, codeUnavailableDescription, showCliMode]);
     const renderHeaderActions = useCallback(() => (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [SHOW_ONBOARDING && canUseCodeTools && (_jsx(Suspense, { fallback: null, children: _jsx(SetupButton, {}) })), _jsx(FeedbackButton, { variant: "icon", side: "bottom", align: "end" }), onToggleFullscreen && (_jsx(IconTooltip, { content: isFullscreen ? "Exit fullscreen" : "Fullscreen", children: _jsx("button", { onClick: onToggleFullscreen, "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: isFullscreen ? (_jsx(IconArrowsMinimize, { size: 14 })) : (_jsx(IconArrowsMaximize, { size: 14 })) }) })), onCollapse && (_jsx(IconTooltip, { content: "Collapse sidebar", children: _jsx("button", { onClick: onCollapse, "aria-label": "Collapse sidebar", className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconLayoutSidebarRightCollapse, { size: 14 }) }) }))] })), [onCollapse, canUseCodeTools, onToggleFullscreen, isFullscreen]);
     const [tabMenuOpen, setTabMenuOpen] = useState(null);
     const [cliPickerOpen, setCliPickerOpen] = useState(false);
@@ -471,7 +553,7 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
                         `[data-agent-fullscreen='true'] .agent-composer-area{` +
                         `max-width:${FULLSCREEN_CONTENT_MAX_PX}px;` +
                         `margin-left:auto;margin-right:auto;width:100%;}`,
-                } }), SHOW_ONBOARDING && mounted && canUseCodeTools && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(MultiTabAssistantChat, { apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, renderOverlay: undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, suggestions: suggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey })) }), canUseCodeTools
+                } }), SHOW_ONBOARDING && mounted && canUseCodeTools && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(MultiTabAssistantChat, { apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, renderOverlay: undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, suggestions: suggestions, onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey, scope: scope, browserTabId: browserTabId })) }), canUseCodeTools
                 ? mode === "cli" &&
                     cliTabs.map((id) => (_jsx("div", { className: "min-h-0 relative flex-1", style: {
                             display: id === activeCliTab ? undefined : "none",
@@ -480,7 +562,7 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
                             ? "CLI requires dev mode"
                             : codeUnavailableTitle, description: codeAccessEnabled
                             ? "Run this app locally with pnpm dev or use Builder.io to access the CLI terminal."
-                            : codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeAccessEnabled ? undefined : codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })), mode === "resources" && (_jsx("div", { className: "flex-1 min-h-0", children: codeAccessEnabled ? (_jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full flex-col min-h-0", children: _jsx("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-5 w-16 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-14 rounded bg-muted animate-pulse" })] }) }) }), children: _jsx(ResourcesPanel, {}) })) : (_jsx("div", { className: "flex h-full items-center justify-center px-6", children: _jsx(CodeAccessUnavailablePanel, { title: "Open Desktop to use Workspace", description: codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })) })), mode === "settings" && (_jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" })] }), children: _jsx(SettingsPanel, { isDevMode: isDevMode, onToggleDevMode: () => setDevMode(!isDevMode), showDevToggle: showDevToggle, devAppUrl: devAppUrl, initialSection: settingsSection.section, sectionRequestKey: settingsSection.requestKey }) }) }))] }));
+                            : codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeAccessEnabled ? undefined : codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })), mode === "resources" && (_jsx("div", { className: "flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex h-full flex-col min-h-0", children: _jsx("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-2 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-5 w-16 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-5 w-14 rounded bg-muted animate-pulse" })] }) }) }), children: _jsx(ResourcesPanel, {}) }) })), mode === "settings" && (_jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx(Suspense, { fallback: _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" }), _jsx("div", { className: "h-10 w-full rounded-lg bg-muted animate-pulse" })] }), children: _jsx(SettingsPanel, { isDevMode: isDevMode, onToggleDevMode: () => setDevMode(!isDevMode), showDevToggle: showDevToggle, devAppUrl: devAppUrl, initialSection: settingsSection.section, sectionRequestKey: settingsSection.requestKey }) }) }))] }));
 }
 // ─── Resize handle ──────────────────────────────────────────────────────────
 const SIDEBAR_STORAGE_KEY = "agent-native-sidebar-width";
@@ -593,10 +675,19 @@ function ResizeHandle({ position, onDrag, }) {
  *                 the command, applies it via react-router, then deletes
  *                 the key. The UI reacts in one tick, no page reload.
  */
-function URLSync() {
+const SAFE_BROWSER_TAB_ID_RE = /^[A-Za-z0-9_-]{1,96}$/;
+function URLSync({ browserTabId }) {
     const location = useLocation();
     const navigate = useNavigate();
     const queryClient = useQueryClient();
+    const normalizedBrowserTabId = React.useMemo(() => {
+        if (typeof browserTabId !== "string")
+            return undefined;
+        const trimmed = browserTabId.trim();
+        return SAFE_BROWSER_TAB_ID_RE.test(trimmed) ? trimmed : undefined;
+    }, [browserTabId]);
+    const appStateKey = React.useCallback((key) => normalizedBrowserTabId ? `${key}:${normalizedBrowserTabId}` : key, [normalizedBrowserTabId]);
+    const setUrlQueryKey = React.useMemo(() => ["__set_url__", normalizedBrowserTabId ?? "global"], [normalizedBrowserTabId]);
     // Outbound: write the current URL to app-state whenever it changes.
     React.useEffect(() => {
         const searchParams = {};
@@ -609,46 +700,87 @@ function URLSync() {
             hash: location.hash,
             searchParams,
         };
-        fetch(agentNativePath("/_agent-native/application-state/__url__"), {
+        const write = (key) => fetch(agentNativePath(`/_agent-native/application-state/${key}`), {
             method: "PUT",
             keepalive: true,
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify(body),
         }).catch(() => { });
-    }, [location.pathname, location.search, location.hash]);
-    // Inbound: poll for URL-update commands from the agent. We piggyback on
-    // the same 2-second cadence useDbSync uses so there's no extra timer.
+        write(appStateKey("__url__"));
+        if (normalizedBrowserTabId)
+            write("__url__");
+    }, [
+        appStateKey,
+        location.pathname,
+        location.search,
+        location.hash,
+        normalizedBrowserTabId,
+    ]);
+    // Inbound: poll for URL-update commands from the agent. `useDbSync`
+    // invalidates this key on every relevant app-state event, so default
+    // `structuralSharing: true` is critical — without it, repeated reads of the
+    // same stale command (when the consume-DELETE below races against the next
+    // invalidation) churned the useEffect and re-applied the navigation in a
+    // tight loop. With structural sharing on, the previous reference is reused
+    // when the JSON is unchanged so the useEffect only fires when the command
+    // actually changes; the `lastProcessedDedupKeyRef` below covers the residual
+    // race window after the cache is cleared to `null`.
     const { data: command } = useQuery({
-        queryKey: ["__set_url__"],
+        queryKey: setUrlQueryKey,
         queryFn: async () => {
-            try {
-                const res = await fetch(agentNativePath("/_agent-native/application-state/__set_url__"));
+            const read = async (key) => {
+                const res = await fetch(agentNativePath(`/_agent-native/application-state/${key}`));
                 if (!res.ok || res.status === 204)
                     return null;
                 const text = await res.text();
                 if (!text)
                     return null;
                 const data = JSON.parse(text);
-                return data ? { ...data, _ts: Date.now() } : null;
+                return data ? { key, command: data } : null;
+            };
+            try {
+                return ((normalizedBrowserTabId
+                    ? await read(appStateKey("__set_url__"))
+                    : null) ?? (await read("__set_url__")));
             }
             catch {
                 return null;
             }
         },
         refetchInterval: 2_000,
-        structuralSharing: false,
         retry: false,
     });
+    const lastProcessedDedupKeyRef = React.useRef(null);
     React.useEffect(() => {
         if (!command)
             return;
+        const cmd = command.command;
+        const dedupKey = cmd._writeId ??
+            JSON.stringify({
+                pathname: cmd.pathname,
+                searchParams: cmd.searchParams,
+                mergeSearchParams: cmd.mergeSearchParams,
+                hash: cmd.hash,
+            });
+        if (lastProcessedDedupKeyRef.current === dedupKey) {
+            // Same command we already handled — the DELETE below races against the
+            // next polling refetch, so when it loses the same command can show up
+            // again on the next tick. Re-fire DELETE and bail rather than navigate
+            // again.
+            fetch(agentNativePath(`/_agent-native/application-state/${command.key}`), {
+                method: "DELETE",
+                headers: { "X-Agent-Native-CSRF": "1" },
+            }).catch(() => { });
+            queryClient.setQueryData(setUrlQueryKey, null);
+            return;
+        }
+        lastProcessedDedupKeyRef.current = dedupKey;
         // Delete the one-shot command before applying so duplicate events
         // don't cause repeated navigation.
-        fetch(agentNativePath("/_agent-native/application-state/__set_url__"), {
+        fetch(agentNativePath(`/_agent-native/application-state/${command.key}`), {
             method: "DELETE",
             headers: { "X-Agent-Native-CSRF": "1" },
         }).catch(() => { });
-        const cmd = command;
         try {
             const current = new URL(window.location.href);
             const nextPath = cmd.pathname ?? current.pathname;
@@ -682,7 +814,7 @@ function URLSync() {
             }
             const currentUrl = current.pathname + (current.search || "") + (current.hash || "");
             if (url === currentUrl) {
-                queryClient.setQueryData(["__set_url__"], null);
+                queryClient.setQueryData(setUrlQueryKey, null);
                 return;
             }
             // Replace rather than push so repeated agent URL updates don't
@@ -693,8 +825,8 @@ function URLSync() {
         catch {
             // Malformed command — ignore.
         }
-        queryClient.setQueryData(["__set_url__"], null);
-    }, [command, navigate, queryClient]);
+        queryClient.setQueryData(setUrlQueryKey, null);
+    }, [command, navigate, queryClient, setUrlQueryKey]);
     return null;
 }
 function ScreenRefreshBoundary({ children }) {
@@ -711,18 +843,66 @@ function ScreenRefreshBoundary({ children }) {
     return _jsx(React.Fragment, { children: children }, key);
 }
 class AgentPanelErrorBoundary extends React.Component {
-    state = { error: null };
+    state = {
+        error: null,
+        staleIndexRecoveryCount: 0,
+    };
+    recoveryTimer = null;
+    recoveryCooldownTimer = null;
     static getDerivedStateFromError(error) {
         return { error };
     }
     componentDidCatch(error, errorInfo) {
+        if (isAssistantUiStaleIndexError(error)) {
+            console.warn("[agent-native] Recovering agent panel after stale UI index");
+            if (this.state.staleIndexRecoveryCount >= 2) {
+                console.error("[agent-native] Agent panel stale-index recovery failed", error, errorInfo);
+                return;
+            }
+            if (!this.recoveryTimer) {
+                this.recoveryTimer = setTimeout(() => {
+                    this.recoveryTimer = null;
+                    this.setState((state) => ({
+                        error: null,
+                        staleIndexRecoveryCount: state.staleIndexRecoveryCount + 1,
+                    }));
+                    this.props.onReset();
+                }, 0);
+            }
+            return;
+        }
         console.error("[agent-native] Agent panel crashed", error, errorInfo);
     }
+    componentDidUpdate(_prevProps, prevState) {
+        if (prevState.error &&
+            !this.state.error &&
+            this.state.staleIndexRecoveryCount > 0) {
+            if (this.recoveryCooldownTimer) {
+                clearTimeout(this.recoveryCooldownTimer);
+            }
+            this.recoveryCooldownTimer = setTimeout(() => {
+                this.recoveryCooldownTimer = null;
+                this.setState((state) => state.error ? null : { staleIndexRecoveryCount: 0 });
+            }, 2_000);
+        }
+    }
+    componentWillUnmount() {
+        if (this.recoveryTimer) {
+            clearTimeout(this.recoveryTimer);
+        }
+        if (this.recoveryCooldownTimer) {
+            clearTimeout(this.recoveryCooldownTimer);
+        }
+    }
     render() {
         if (!this.state.error)
             return this.props.children;
+        if (isAssistantUiStaleIndexError(this.state.error) &&
+            this.state.staleIndexRecoveryCount < 2) {
+            return (_jsx("div", { className: "flex h-full items-center justify-center p-6 text-center text-xs text-muted-foreground", children: "Reloading chat UI..." }));
+        }
         return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-6 text-center", children: [_jsxs("div", { className: "max-w-[260px] space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Agent panel hit an internal UI error." }), _jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: "The app is still usable. Reset the panel to reload the chat UI." })] }), _jsx("button", { type: "button", className: "rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", onClick: () => {
-                        this.setState({ error: null });
+                        this.setState({ error: null, staleIndexRecoveryCount: 0 });
                         this.props.onReset();
                     }, children: "Reset agent panel" })] }));
     }
@@ -743,7 +923,7 @@ export function AgentPanel(props) {
  * Wraps app content with a toggleable agent sidebar.
  * Use AgentToggleButton in your header to open/close it.
  */
-export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = false, }) {
+export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = false, scope, browserTabId, }) {
     const initialWidth = defaultSidebarWidth ?? sidebarWidth ?? 380;
     const [open, setOpen] = useState(() => getInitialAgentSidebarOpen(defaultOpen));
     const [presentationMode, setPresentationMode] = useState(false);
@@ -805,10 +985,44 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     // Track whether the frame is controlling the sidebar (code mode = frame active).
     // Default to true when inside an iframe — assume the frame sidebar is active
     // until told otherwise. This prevents both sidebars flashing after hot reloads.
-    const [frameCodeMode, setFrameCodeMode] = useState(() => typeof window !== "undefined" && window.parent !== window);
+    const [frameCodeMode, setFrameCodeMode] = useState(() => shouldParentFrameOwnAgentPanel());
+    // Frame sidebar visibility: we don't know the frame's open/closed state at
+    // mount, so start at false and wait for the frame to dispatch its real
+    // state via the message handler below. Initializing to
+    // `shouldParentFrameOwnAgentPanel()` here was a category error — that
+    // helper reports ownership (which side renders the sidebar), not whether
+    // the sidebar is currently open. Mixing them up dispatched a stale
+    // "open: true" before the first frame message arrived.
+    const [frameSidebarOpen, setFrameSidebarOpen] = useState(false);
+    // Has the frame told us its sidebar state yet? In frame-owned mode we
+    // don't know whether the sidebar is open or closed until the parent frame
+    // dispatches `agentNative.sidebarMode`. Emitting a synthetic
+    // `{ open: false }` before that message arrives makes downstream listeners
+    // flip a moment later when the real state lands, which is the same
+    // ownership-vs-open-state confusion the previous fix addressed.
+    const [hasFrameSidebarState, setHasFrameSidebarState] = useState(false);
+    useEffect(() => {
+        const frameOwned = frameCodeMode && shouldParentFrameOwnAgentPanel();
+        // Skip the initial emit in frame-owned mode — wait until the frame has
+        // sent us its real sidebar state. Once we know, this effect re-runs and
+        // dispatches the correct value.
+        if (frameOwned && !hasFrameSidebarState)
+            return;
+        dispatchAgentSidebarStateChange({
+            open: !presentationMode && (frameOwned ? frameSidebarOpen : open),
+            source: frameOwned ? "frame" : "app",
+            mode: frameOwned ? "code" : "app",
+        });
+    }, [
+        frameCodeMode,
+        frameSidebarOpen,
+        open,
+        presentationMode,
+        hasFrameSidebarState,
+    ]);
     useEffect(() => {
         const toggleHandler = () => {
-            if (frameCodeMode && window.parent !== window) {
+            if (frameCodeMode && shouldParentFrameOwnAgentPanel()) {
                 // Forward toggle to frame parent — the frame sidebar handles it
                 window.parent.postMessage({ type: "agentNative.toggleSidebar" }, parentFrameTargetOrigin());
             }
@@ -817,7 +1031,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             }
         };
         const openHandler = () => {
-            if (frameCodeMode && window.parent !== window) {
+            if (frameCodeMode && shouldParentFrameOwnAgentPanel()) {
                 window.parent.postMessage({ type: "agentNative.toggleSidebar", data: { open: true } }, parentFrameTargetOrigin());
             }
             else {
@@ -825,7 +1039,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             }
         };
         const closeHandler = () => {
-            if (frameCodeMode && window.parent !== window) {
+            if (frameCodeMode && shouldParentFrameOwnAgentPanel()) {
                 window.parent.postMessage({ type: "agentNative.toggleSidebar", data: { open: false } }, parentFrameTargetOrigin());
             }
             else {
@@ -856,14 +1070,16 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             if (mode === "code") {
                 // Frame is showing its own sidebar — hide the app's
                 setFrameCodeMode(true);
+                setFrameSidebarOpen(frameOpen !== false);
+                setHasFrameSidebarState(true);
                 setOpenPersisted(false);
             }
             else if (mode === "app") {
                 // Frame deferred to the app — show and sync width + mode
                 setFrameCodeMode(false);
-                if (frameOpen !== false) {
-                    setOpenPersisted(true);
-                }
+                setFrameSidebarOpen(false);
+                setHasFrameSidebarState(true);
+                setOpenPersisted(frameOpen !== false);
                 if (frameWidth &&
                     frameWidth >= SIDEBAR_MIN &&
                     frameWidth <= SIDEBAR_MAX) {
@@ -882,11 +1098,18 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
         window.addEventListener("message", handleMessage);
         return () => window.removeEventListener("message", handleMessage);
     }, [setOpenPersisted]);
-    // Cmd+I / Ctrl+I to focus the agent chat. If the user has selected text,
-    // capture it into application_state under `pending-selection-context` so
-    // the agent's next turn includes it as immediate context to act on.
+    // Cmd+\ / Ctrl+\ toggles the agent sidebar globally. Cmd+I / Ctrl+I focuses
+    // chat and attaches selected page text as one-shot context for the next turn.
     useEffect(() => {
         const handleKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) &&
+                !e.altKey &&
+                !e.shiftKey &&
+                (e.key === "\\" || e.code === "Backslash")) {
+                e.preventDefault();
+                window.dispatchEvent(new Event("agent-panel:toggle"));
+                return;
+            }
             if ((e.metaKey || e.ctrlKey) && e.key === "i") {
                 e.preventDefault();
                 let selectionText = "";
@@ -1000,9 +1223,9 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     // any in-progress or completed conversations.
     const sidebar = (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag })), _jsx("div", { className: cn("agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", animateMobile &&
                     isMobile &&
-                    "shadow-2xl transition-transform duration-[260ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none"), style: panelStyle, inert: isMobile && !open ? true : undefined, "aria-hidden": isMobile && !open ? true : undefined, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : toggleFullscreen }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] }));
+                    "shadow-2xl transition-transform duration-[260ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none"), style: panelStyle, inert: isMobile && !open ? true : undefined, "aria-hidden": isMobile && !open ? true : undefined, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : toggleFullscreen, scope: scope, browserTabId: browserTabId }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] }));
     return (_jsxs("div", { className: "flex min-w-0 flex-1 h-screen overflow-hidden", children: [isMobile && !presentationMode && (animateMobile || open) && (_jsx("div", { className: cn("fixed inset-0 bg-black/40", animateMobile &&
-                    "transition-opacity duration-200 motion-reduce:transition-none", animateMobile && !open && "pointer-events-none opacity-0", animateMobile && open && "opacity-100"), style: { zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }, onClick: () => setOpenPersisted(false) })), _jsx(URLSync, {}), isLeft && !presentationMode ? sidebar : null, _jsx("div", { className: "flex flex-1 flex-col overflow-auto min-w-0", children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? sidebar : null] }));
+                    "transition-opacity duration-200 motion-reduce:transition-none", animateMobile && !open && "pointer-events-none opacity-0", animateMobile && open && "opacity-100"), style: { zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }, onClick: () => setOpenPersisted(false) })), _jsx(URLSync, { browserTabId: browserTabId }), isLeft && !presentationMode ? sidebar : null, _jsx("div", { className: "flex flex-1 flex-col overflow-auto min-w-0", children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? sidebar : null] }));
 }
 /**
  * Focus the agent chat composer input.