@agent-native/toolkit 0.23.1-nightly-20260929180759 → 0.198.1

package/dist/app/chat/AgentPanel.js

@@ -0,0 +1,1216 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getBrowserTabId } from "@agent-native/core/client/hooks";
+import { Tooltip as DesignSystemTooltip } from "@agent-native/toolkit/design-system";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "@agent-native/toolkit/ui/dropdown-menu";
+import { normalizeTooltipText } from "@agent-native/toolkit/ui/tooltip";
+import { IconMessageCircle, IconMessageDots, IconTerminal2, IconLayoutSidebarRightCollapse, IconLayoutGrid, IconCheck, IconPlus, IconX, IconDotsVertical, IconHistory, IconArrowsHorizontal, IconExternalLink, IconPlugConnected, IconShare3, } from "@tabler/icons-react";
+import React, { useState, useEffect, useRef, useCallback, useMemo, lazy, Suspense, startTransition, } from "react";
+import { resolveFeedbackUrl } from "../feedback/FeedbackButton.js";
+import { ErrorReportActions, FeedbackButton } from "../feedback/index.js";
+import { RunsTrayMenuItem } from "../progress/index.js";
+import { ShareButton } from "../sharing/index.js";
+import { ThinkingDisplayProvider } from "./thinking-display.js";
+const loadMultiTabAssistantChat = () => import("./MultiTabAssistantChat.js").then((m) => ({
+    default: m.MultiTabAssistantChat,
+}));
+const MultiTabAssistantChatLazy = lazy(loadMultiTabAssistantChat);
+import { buildSettingsRoute } from "@agent-native/core/navigation";
+import { isSettingsSectionId, SETTINGS_SECTION_ALIASES, } from "@agent-native/core/navigation";
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
+import { useLocation, useNavigate } from "react-router";
+import { AGENT_PANEL_OPEN_SETTINGS_EVENT, AGENT_PANEL_SET_MODE_EVENT, } from "./agent-sidebar-events.js";
+export { shouldHandleAgentPanelChatShortcut, shouldHandleAgentSidebarToggle, } from "./agent-sidebar-events.js";
+export { AgentSidebar, AgentToggleButton, focusAgentChat, preloadAgentChatSurface, } from "./AgentSidebar.js";
+import { AGENT_CHAT_VIEW_TRANSITION_CLASS, getAgentChatViewTransitionStyle, } from "@agent-native/core/client/agent-chat";
+import { useDevMode } from "@agent-native/core/client/agent-chat";
+import { trackEvent } from "@agent-native/core/client/analytics";
+import { agentNativePath, appPath } from "@agent-native/core/client/api-path";
+import { fetchBuilderStatus } from "@agent-native/core/client/client-status-requests";
+import { getFramePostMessageTargetOrigin } from "@agent-native/core/client/host";
+import { useT } from "@agent-native/core/client/i18n";
+import { isFirstRunOnboardingEnabled } from "@agent-native/core/client/onboarding";
+import { useOnboardingPreviewMode } from "@agent-native/core/client/onboarding";
+import { recoverFromStaleChunkError } from "@agent-native/core/client/route-chunk-recovery";
+import { cn } from "@agent-native/toolkit/utils";
+import { useFirstRunOnboardingGateOwnsSurface } from "../onboarding/first-run-startup-gate.js";
+import { SETTINGS_SECTION_STATE_KEY, withBuilderConnectTrackingParams, } from "../settings/index.js";
+import { RouterSidebarLink } from "../shared/index.js";
+import { AgentSidebarOnboardingContext } from "./agent-sidebar-context.js";
+import { SettingsReturnPathRecorder, URLSync, } from "./agent-sidebar-url-sync.js";
+import { assistantUiRecoverableRenderErrorKind } from "./composer/assistant-ui-recovery.js";
+function parentFrameTargetOrigin() {
+    return getFramePostMessageTargetOrigin() ?? window.location.origin;
+}
+const AgentTerminal = lazy(() => import("../terminal/index.js").then((m) => ({
+    default: m.AgentTerminal,
+})));
+/**
+ * The section an `agent-panel:open-settings` request names. Callers that set
+ * the hash and dispatch no section (run recovery's `#agent-limits`, the
+ * composer's `#llm`) meant that hash.
+ */
+export function requestedSettingsSection(section, currentHash) {
+    const requested = section?.replace(/^#/, "").trim() ?? "";
+    if (requested)
+        return requested;
+    const hash = currentHash?.replace(/^#/, "").trim() ?? "";
+    return isSettingsSectionId(hash) || /^secrets:./i.test(hash) ? hash : "";
+}
+/** Today's Settings hash for a section; the redesigned shell reads the section itself. */
+export function settingsRouteHashForSection(section, currentHash) {
+    const raw = requestedSettingsSection(section, currentHash);
+    const lowered = raw.toLowerCase();
+    const normalized = SETTINGS_SECTION_ALIASES[lowered] ?? lowered;
+    if ([
+        "llm",
+        "app-models",
+        "limits",
+        "demo-mode",
+        "hosting",
+        "database",
+        "uploads",
+        "auth",
+        "email",
+        "browser",
+        "background",
+        "usage",
+    ].includes(normalized)) {
+        return `#${normalized}`;
+    }
+    if (normalized === "voice")
+        return "#voice";
+    if (normalized === "a2a")
+        return "#agent:agents";
+    if (normalized.startsWith("secrets:")) {
+        return `#secrets:${raw.slice("secrets:".length)}`;
+    }
+    if (normalized === "secrets") {
+        const existing = currentHash?.replace(/^#/, "").trim() ?? "";
+        if (existing.toLowerCase().startsWith("secrets:") && existing.length > 8) {
+            return `#secrets:${existing.slice("secrets:".length)}`;
+        }
+    }
+    if (normalized === "automations")
+        return "#agent:automations";
+    if (normalized.startsWith("secrets") ||
+        normalized.includes("api") ||
+        normalized === "integrations" ||
+        normalized === "connections") {
+        return "#integrations";
+    }
+    if (normalized === "account" ||
+        normalized === "workspace" ||
+        normalized === "workspace-settings" ||
+        normalized === "organization" ||
+        normalized === "org") {
+        return "#workspace";
+    }
+    return "#agent";
+}
+export function AgentPanelSettingsNavigation({ onOpenSettings, } = {}) {
+    const navigate = useNavigate();
+    useEffect(() => {
+        function handleOpenSettings(event) {
+            const section = event.detail
+                ?.section;
+            if (onOpenSettings) {
+                onOpenSettings(section);
+                return;
+            }
+            const requested = requestedSettingsSection(section, window.location.hash);
+            const navigation = navigate({
+                pathname: appPath("/settings"),
+                hash: settingsRouteHashForSection(section, window.location.hash),
+            }, 
+            // The hash can't tell API keys from Integrations; the redesigned
+            // Settings reads the section from history state instead.
+            {
+                state: requested ? { [SETTINGS_SECTION_STATE_KEY]: requested } : null,
+            });
+            const notifyLocationChange = () => {
+                window.dispatchEvent(new Event("popstate"));
+                window.dispatchEvent(new Event("hashchange"));
+            };
+            void Promise.resolve(navigation).then(notifyLocationChange, () => undefined);
+        }
+        window.addEventListener(AGENT_PANEL_OPEN_SETTINGS_EVENT, handleOpenSettings);
+        return () => window.removeEventListener(AGENT_PANEL_OPEN_SETTINGS_EVENT, handleOpenSettings);
+    }, [navigate, onOpenSettings]);
+    return null;
+}
+const ResourcesPanel = lazy(() => import("../resources/ResourcesPanel.js").then((m) => ({
+    default: m.ResourcesPanel,
+})));
+const OnboardingPanel = lazy(() => import("../onboarding/OnboardingPanel.js").then((m) => ({
+    default: m.OnboardingPanel,
+})));
+const FirstRunOnboarding = lazy(() => import("../onboarding/FirstRunOnboarding.js").then((m) => ({
+    default: m.FirstRunOnboarding,
+})));
+const SetupButton = lazy(() => import("../onboarding/SetupButton.js").then((m) => ({
+    default: m.SetupButton,
+})));
+const SHOW_ONBOARDING = false;
+const SHOW_FIRST_RUN_ONBOARDING = isFirstRunOnboardingEnabled();
+const CLI_STORAGE_KEY = "agent-native-cli-command";
+const CLI_DEFAULT = "claude";
+const EXEC_MODE_KEY = "agent-native-exec-mode";
+export function normalizeAgentPanelModeForSurface(mode, chatOnly = false) {
+    if (chatOnly)
+        return "chat";
+    return mode === "cli" || mode === "resources" ? mode : "chat";
+}
+const AGENT_PANEL_FONT_FAMILY = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+const AGENT_PANEL_ROOT_STYLE = {
+    fontFamily: AGENT_PANEL_FONT_FAMILY,
+    fontSize: 13,
+    lineHeight: 1.2,
+};
+const AGENT_PANEL_HEADER_CLASS = "agent-native-shell-topbar relative z-[240] flex h-12 shrink-0 items-center justify-between gap-2";
+const AGENT_PANEL_HEADER_STYLE = {
+    paddingLeft: 8,
+    paddingRight: 8,
+};
+const AGENT_PANEL_CONTROL_STYLE = {
+    fontSize: 12,
+    lineHeight: 1,
+};
+const ACTIVATE_KEYS = new Set(["Enter", " "]);
+export function deferAgentPanelOverlayOpen(event, closeMenu, openOverlay, timing = "animation-frame") {
+    event.preventDefault();
+    closeMenu();
+    if (timing === "timeout") {
+        setTimeout(openOverlay, 0);
+        return;
+    }
+    if (typeof window !== "undefined" &&
+        typeof window.requestAnimationFrame === "function") {
+        window.requestAnimationFrame(() => openOverlay());
+    }
+    else {
+        setTimeout(openOverlay, 0);
+    }
+}
+export function consumeAgentPanelOverlayFocusRestore(pendingOverlayRef, event) {
+    if (!pendingOverlayRef.current)
+        return;
+    pendingOverlayRef.current = false;
+    event.preventDefault();
+}
+function useAvailableClis() {
+    const [clis, setClis] = useState([]);
+    useEffect(() => {
+        fetch(agentNativePath("/_agent-native/available-clis"))
+            .then((r) => (r.ok ? r.json() : []))
+            .then((data) => setClis(Array.isArray(data) ? data : []))
+            .catch(() => { });
+    }, []);
+    return clis;
+}
+function useCliSelection(keyPrefix) {
+    const cliKey = `${CLI_STORAGE_KEY}${keyPrefix}`;
+    const [selected, setSelected] = useState(CLI_DEFAULT);
+    useEffect(() => {
+        try {
+            const saved = localStorage.getItem(cliKey);
+            if (saved)
+                setSelected(saved);
+        }
+        catch { }
+    }, [cliKey]);
+    const select = (cmd) => {
+        setSelected(cmd);
+        try {
+            localStorage.setItem(cliKey, cmd);
+        }
+        catch { }
+    };
+    return [selected, select];
+}
+function IconTooltip({ content, children, }) {
+    return (_jsx(DesignSystemTooltip, { trigger: children, content: normalizeTooltipText(content), placement: "bottom", delayMs: 250, className: "z-[300] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md" }));
+}
+function ChatLoadingSkeleton({ renderHeader, centerComposerWhenEmpty = false, composerSlot, composerAreaClassName, composerLayoutVariant = "default", }) {
+    const t = useT();
+    const noop = useCallback(() => { }, []);
+    const noopStr = useCallback((_id) => { }, []);
+    const stubProps = {
+        tabs: [],
+        activeTabId: "",
+        activeTabMessageCount: 0,
+        setActiveTabId: noopStr,
+        addTab: noop,
+        closeTab: noopStr,
+        closeOtherTabs: noopStr,
+        closeAllTabs: noop,
+        clearActiveTab: noop,
+        showHistory: false,
+        tabCount: 0,
+        toggleHistory: noop,
+    };
+    if (centerComposerWhenEmpty) {
+        return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [renderHeader ? renderHeader(stubProps) : null, _jsxs("div", { "data-agent-empty-state": "centered", className: "relative flex flex-1 flex-col h-full min-h-0 text-foreground", children: [_jsx("div", { className: "agent-chat-scroll flex-1 overflow-y-auto overflow-x-hidden min-h-0", children: _jsx("div", { className: "agent-empty-state sr-only", "aria-busy": "true", children: t("agentChat.empty.loadingChat") }) }), composerSlot, _jsx("div", { className: "agent-composer-stack", children: _jsx("div", { className: cn("agent-composer-area shrink-0 px-3 py-2", composerLayoutVariant !== "default" &&
+                                    `agent-composer-area--${composerLayoutVariant}`, composerAreaClassName), children: _jsxs("div", { className: cn("agent-composer-root flex flex-col rounded-lg border border-input bg-muted/45 transition-colors", composerLayoutVariant !== "default" &&
+                                        `agent-composer-root--${composerLayoutVariant}`), children: [_jsx("div", { className: "px-3 pt-3", children: _jsx("div", { className: "h-5 w-3/5 rounded bg-muted animate-pulse motion-reduce:animate-none" }) }), _jsxs("div", { className: "mt-auto flex items-center gap-2 px-3 py-2", children: [_jsx("div", { className: "h-5 w-5 rounded bg-muted animate-pulse motion-reduce:animate-none" }), _jsx("div", { className: "ml-auto h-4 w-28 rounded bg-muted animate-pulse motion-reduce:animate-none" }), _jsx("div", { className: "h-7 w-7 rounded-md bg-muted animate-pulse motion-reduce:animate-none" })] })] }) }) })] })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [renderHeader ? renderHeader(stubProps) : null, _jsx("div", { className: "mt-auto shrink-0 border-t border-border p-3", children: _jsx("div", { className: "h-16 rounded-xl bg-muted/40 animate-pulse motion-reduce:animate-none" }) })] }));
+}
+export function getAgentPanelChatTabGroups(tabs, activeTabId) {
+    const activeTab = tabs.find((t) => t.id === activeTabId);
+    const focusParentId = activeTab?.parentThreadId || activeTabId;
+    const childTabs = tabs.filter((t) => t.parentThreadId === focusParentId);
+    const mainTabs = tabs.filter((t) => !t.parentThreadId);
+    return {
+        activeTab,
+        childTabs,
+        focusParentId,
+        hasSubTabs: childTabs.length > 0,
+        mainTabs,
+    };
+}
+export function shouldShowAgentPanelChatTabBar(tabs, activeTabId) {
+    const { hasSubTabs, mainTabs } = getAgentPanelChatTabGroups(tabs, activeTabId);
+    return mainTabs.length > 1 || hasSubTabs;
+}
+export function shouldShowAgentPanelSidebarChatTabs(tabs) {
+    return tabs.some((tab) => !tab.parentThreadId);
+}
+export function shouldShowAgentPanelPageNewChatButton(tabs, activeTabId, activeTabMessageCount) {
+    return shouldShowAgentPanelPageHeader(tabs, activeTabId, activeTabMessageCount);
+}
+export function shouldShowAgentPanelPageHeader(tabs, activeTabId, activeTabMessageCount) {
+    if (!activeTabId)
+        return false;
+    if (activeTabMessageCount > 0)
+        return true;
+    const activeTab = tabs.find((tab) => tab.id === activeTabId);
+    return activeTab?.status === "running" || activeTab?.status === "completed";
+}
+export function shouldShowAgentPanelCliTabBar(cliTabs) {
+    return cliTabs.length > 1;
+}
+export function shouldShowAgentPanelModeButtons(isSidebar, chatOnly = false) {
+    return !isSidebar && !chatOnly;
+}
+export function shouldShowAgentPanelFullViewAction(agentPageHref, mode, isSidebar = false, currentPath) {
+    return (Boolean(agentPageHref) &&
+        currentPath !== agentPageHref &&
+        (isSidebar || mode === "resources"));
+}
+export function AgentPanelFullViewMenuItem({ activeTabId, onFullViewRequest, label, }) {
+    return (_jsx(DropdownMenuItem, { onSelect: () => onFullViewRequest(activeTabId || undefined), "aria-label": label, children: label }));
+}
+export function resolveAgentPanelFullViewAction(agentPageHref, onFullViewRequest, mode, isSidebar = false, currentPath) {
+    if (!agentPageHref ||
+        !shouldShowAgentPanelFullViewAction(agentPageHref, mode, isSidebar, currentPath)) {
+        return null;
+    }
+    return onFullViewRequest
+        ? { kind: "callback" }
+        : { kind: "link", href: agentPageHref };
+}
+// Hosts without a Settings route pass no agentPageHref, so it doubles as the
+// signal that an Integrations page exists to link to. Both paths are
+// router-local; RouterSidebarLink adds the app base path.
+export function resolveAgentPanelIntegrationsHref(agentPageHref, currentPath) {
+    if (!agentPageHref)
+        return null;
+    const href = buildSettingsRoute("integrations");
+    if (currentPath === href || currentPath?.startsWith(`${href}/`))
+        return null;
+    return href;
+}
+export function getAgentPanelShortcutHints(isMac) {
+    return {
+        closeTab: isMac ? "⌃W" : "⌥W",
+        closeAllTabs: isMac ? "⌃⌥W" : "^⌥W",
+        toggleSidebar: isMac ? "⌘\\" : "^\\",
+        widenChat: isMac ? "⌘⇧\\" : "^⇧\\",
+    };
+}
+function useBuilderConnectUrl() {
+    const [connectUrl, setConnectUrl] = useState(null);
+    const [configured, setConfigured] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        let lastConfigured = false;
+        const refresh = () => {
+            fetchBuilderStatus()
+                .then((result) => (result.state === "available" ? result.value : null))
+                .then((data) => {
+                if (cancelled || !data)
+                    return;
+                const nextConnectUrl = data.connectUrl;
+                if (nextConnectUrl)
+                    setConnectUrl(nextConnectUrl);
+                const nextConfigured = !!data.configured;
+                setConfigured(nextConfigured);
+                if (nextConfigured && !lastConfigured) {
+                    lastConfigured = true;
+                    window.dispatchEvent(new CustomEvent("agent-engine:configured-changed", {
+                        detail: { source: "builder-status" },
+                    }));
+                }
+                else if (!nextConfigured) {
+                    lastConfigured = false;
+                }
+            })
+                .catch(() => { });
+        };
+        refresh();
+        const onFocus = () => refresh();
+        const onVisibility = () => {
+            if (document.visibilityState === "visible")
+                refresh();
+        };
+        const onConfigured = (e) => {
+            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, configured };
+}
+function useClientOnly() {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    return mounted;
+}
+function PageHeaderVisibilityReporter({ visible, onVisibilityChange, }) {
+    useEffect(() => {
+        onVisibilityChange?.(visible);
+    }, [onVisibilityChange, visible]);
+    return null;
+}
+const DESKTOP_CODE_SURFACE_QUERY_PARAM = "_agentNativeDesktopCode";
+const DESKTOP_CODE_SURFACE_SESSION_KEY = "agent-native:desktop-code-surface";
+function isDesktopCodeSurfaceRequested() {
+    if (typeof window === "undefined")
+        return false;
+    try {
+        const requested = new URLSearchParams(window.location.search).get(DESKTOP_CODE_SURFACE_QUERY_PARAM) === "1";
+        if (requested) {
+            window.sessionStorage.setItem(DESKTOP_CODE_SURFACE_SESSION_KEY, "1");
+            return true;
+        }
+        return (window.sessionStorage.getItem(DESKTOP_CODE_SURFACE_SESSION_KEY) === "1");
+    }
+    catch {
+        return false;
+    }
+}
+export function resolveAgentPanelChatSurface(explicitSurface, desktopCodeSurfaceRequested) {
+    if (explicitSurface)
+        return explicitSurface;
+    return desktopCodeSurfaceRequested ? "desktop" : "app";
+}
+function CodeAccessUnavailablePanel({ title, description, ctaLabel, ctaHref, secondaryCtaLabel = "Use Builder", secondaryCtaHref, compact = false, }) {
+    const { connectUrl: builderConnectUrl } = useBuilderConnectUrl();
+    const builderHref = secondaryCtaHref
+        ? withBuilderUtmTrackingParams(secondaryCtaHref, {
+            campaign: "product",
+            content: "code_access_unavailable_panel",
+        })
+        : builderConnectUrl
+            ? withBuilderConnectTrackingParams(builderConnectUrl, {
+                source: "code_access_unavailable_panel",
+                flow: "background_agent",
+            })
+            : withBuilderUtmTrackingParams("https://builder.io", {
+                content: "code_access_unavailable_panel",
+            });
+    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, _jsx("a", { href: builderHref, target: "_blank", rel: "noreferrer", onClick: () => {
+                            trackEvent("builder connect clicked", {
+                                feature: "builder",
+                                stage: "client",
+                                source: "code_access_unavailable_panel",
+                                flow: "background_agent",
+                                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 })] })] }));
+}
+function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, emptyStateText, emptyStateAddon, emptyStateFooter, onMessageCountChange, suggestions, dynamicSuggestions, showHeader = true, onCollapse, showCollapseButton = true, isFullscreen, onToggleFullscreen, onFullViewRequest, onSnapTo75Percent, isWideDrawer, onExitWideDrawer, onOpenSettings, onNewCliTab, onNewUiTab, renderCliTab, newTabMode = "ui", newCliTabLabel, newUiTabLabel, storageKey, restoreActiveThread = true, scope, isolateHistoryByScope = false, showScopeBadge, browserTabId, threadUrlSync, chatNotice, showTabBar = true, showPageNewChatButton = false, showPageHeader = false, pageHeaderLeadingSlot, pageToolbarSlot, onPageHeaderVisibilityChange, chatOnly = false, agentPageHref, codeAccess, ...assistantChatProps }) {
+    const t = useT();
+    const location = useLocation();
+    const mounted = useClientOnly();
+    const onboardingPreviewMode = useOnboardingPreviewMode();
+    const firstRunOnboardingGateOwnsSurface = useFirstRunOnboardingGateOwnsSurface();
+    const showFirstRunOnboarding = !firstRunOnboardingGateOwnsSurface &&
+        (SHOW_FIRST_RUN_ONBOARDING || onboardingPreviewMode);
+    const insideAgentSidebar = React.useContext(AgentSidebarOnboardingContext);
+    const isFirstRunOnboardingSurface = showFirstRunOnboarding && !insideAgentSidebar;
+    const feedbackEnabled = resolveFeedbackUrl(undefined, mounted ? undefined : null) !== null;
+    const keyPrefix = storageKey ? `:${storageKey}` : "";
+    const execModeKey = `${EXEC_MODE_KEY}${keyPrefix}`;
+    const panelModeKey = `agent-native-panel-mode${keyPrefix}`;
+    const isMac = useMemo(() => typeof navigator !== "undefined" &&
+        /Mac|iPhone|iPad/.test(navigator.userAgent), []);
+    const { closeTab: closeTabHint, closeAllTabs: closeAllTabsHint, toggleSidebar: toggleSidebarHint, widenChat: widenChatHint, } = getAgentPanelShortcutHints(isMac);
+    const [execMode, setExecMode] = useState(() => {
+        try {
+            const saved = localStorage.getItem(execModeKey);
+            if (saved === "build" || saved === "plan")
+                return saved;
+        }
+        catch { }
+        return "build";
+    });
+    const switchExecMode = useCallback((next) => {
+        setExecMode(next);
+        try {
+            localStorage.setItem(execModeKey, next);
+        }
+        catch { }
+        window.dispatchEvent(new CustomEvent("agent-panel:exec-mode-change", {
+            detail: { mode: next },
+        }));
+    }, [execModeKey]);
+    const [mode, setMode] = useState(() => {
+        try {
+            const saved = localStorage.getItem(panelModeKey);
+            return normalizeAgentPanelModeForSurface(saved ?? defaultMode, chatOnly);
+        }
+        catch { }
+        return normalizeAgentPanelModeForSurface(defaultMode, chatOnly);
+    });
+    useEffect(() => {
+        try {
+            localStorage.setItem(panelModeKey, mode);
+        }
+        catch { }
+    }, [mode, panelModeKey]);
+    const switchMode = useCallback((m) => {
+        startTransition(() => setMode(normalizeAgentPanelModeForSurface(m, chatOnly)));
+    }, [chatOnly]);
+    const previousDefaultModeRef = useRef(defaultMode);
+    useEffect(() => {
+        if (previousDefaultModeRef.current === defaultMode)
+            return;
+        previousDefaultModeRef.current = defaultMode;
+        switchMode(defaultMode);
+    }, [defaultMode, switchMode]);
+    useEffect(() => {
+        const nextMode = normalizeAgentPanelModeForSurface(mode, chatOnly);
+        if (nextMode !== mode)
+            switchMode(nextMode);
+    }, [mode, chatOnly, switchMode]);
+    const openRunThread = useCallback((threadId, run) => {
+        switchMode("chat");
+        const metadata = run?.metadata ?? {};
+        const parentThreadId = typeof metadata.parentThreadId === "string"
+            ? metadata.parentThreadId.trim()
+            : "";
+        const isAgentTeam = metadata.kind === "agent-team" || metadata.source === "agent-teams";
+        if (isAgentTeam && parentThreadId && parentThreadId !== threadId) {
+            window.dispatchEvent(new CustomEvent("agent-task-open", {
+                detail: {
+                    threadId,
+                    parentThreadId,
+                    description: typeof metadata.description === "string"
+                        ? metadata.description
+                        : run?.title || "",
+                    name: typeof metadata.name === "string" ? metadata.name : "",
+                },
+            }));
+            return;
+        }
+        window.dispatchEvent(new CustomEvent("agent-chat:open-thread", {
+            detail: { threadId },
+        }));
+    }, [switchMode]);
+    const activateOnKeyDown = useCallback((activate) => (event) => {
+        if (!ACTIVATE_KEYS.has(event.key))
+            return;
+        event.preventDefault();
+        activate();
+    }, []);
+    useEffect(() => {
+        function handler(e) {
+            const requestedMode = e.detail?.mode;
+            if (requestedMode === "chat" ||
+                requestedMode === "cli" ||
+                requestedMode === "resources") {
+                switchMode(requestedMode);
+            }
+        }
+        window.addEventListener(AGENT_PANEL_SET_MODE_EVENT, handler);
+        return () => window.removeEventListener(AGENT_PANEL_SET_MODE_EVENT, handler);
+    }, [switchMode]);
+    const [cliTabs, setCliTabs] = useState(["cli-1"]);
+    const [activeCliTab, setActiveCliTab] = useState("cli-1");
+    const [mountedCliTabs, setMountedCliTabs] = useState([]);
+    const cliCounter = useRef(1);
+    useEffect(() => {
+        if (mode !== "cli" || !activeCliTab)
+            return;
+        setMountedCliTabs((current) => current.includes(activeCliTab) ? current : [...current, activeCliTab]);
+    }, [activeCliTab, mode]);
+    const addCliTab = useCallback(() => {
+        const id = `cli-${++cliCounter.current}`;
+        setCliTabs((prev) => [...prev, id]);
+        setActiveCliTab(id);
+    }, []);
+    const openNewCliTab = useCallback(() => {
+        if (onNewCliTab) {
+            onNewCliTab();
+            return;
+        }
+        addCliTab();
+        switchMode("cli");
+    }, [addCliTab, onNewCliTab, switchMode]);
+    const openNewUiTab = useCallback((addTab) => {
+        if (onNewUiTab) {
+            onNewUiTab();
+            return;
+        }
+        addTab();
+        switchMode("chat");
+    }, [onNewUiTab, switchMode]);
+    const cliTabsToRender = renderCliTab
+        ? cliTabs.filter((id) => mountedCliTabs.includes(id))
+        : cliTabs;
+    const closeCliTab = useCallback((id) => {
+        setCliTabs((prev) => {
+            if (prev.length <= 1) {
+                const newId = `cli-${++cliCounter.current}`;
+                setActiveCliTab(newId);
+                return [newId];
+            }
+            const next = prev.filter((t) => t !== id);
+            if (id === activeCliTab) {
+                const idx = prev.indexOf(id);
+                setActiveCliTab(next[Math.min(idx, next.length - 1)]);
+            }
+            return next;
+        });
+    }, [activeCliTab]);
+    const closeOtherCliTabs = useCallback((id) => {
+        setCliTabs([id]);
+        setActiveCliTab(id);
+    }, []);
+    const closeAllCliTabs = useCallback(() => {
+        const id = `cli-${++cliCounter.current}`;
+        setCliTabs([id]);
+        setActiveCliTab(id);
+    }, []);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.code !== "KeyW" || e.metaKey || e.shiftKey)
+                return;
+            const isCloseAll = e.ctrlKey && e.altKey;
+            const isCloseOne = isMac
+                ? e.ctrlKey && !e.altKey
+                : e.altKey && !e.ctrlKey;
+            if (!isCloseAll && !isCloseOne)
+                return;
+            e.preventDefault();
+            if (mode === "chat") {
+                window.dispatchEvent(new CustomEvent(isCloseAll
+                    ? "agent-chat:close-all-tabs"
+                    : "agent-chat:close-current-tab"));
+            }
+            else if (mode === "cli") {
+                if (isCloseAll)
+                    closeAllCliTabs();
+                else if (activeCliTab)
+                    closeCliTab(activeCliTab);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [mode, activeCliTab, closeCliTab, closeAllCliTabs, isMac]);
+    const availableClis = useAvailableClis();
+    const [selectedCli, selectCli] = useCliSelection(keyPrefix);
+    const { isDevMode } = useDevMode(apiUrl);
+    const effectiveAgentChatSurface = resolveAgentPanelChatSurface(assistantChatProps.agentChatSurface, isDesktopCodeSurfaceRequested());
+    const isDevFrameChatSurface = effectiveAgentChatSurface === "dev-frame";
+    const isCodeEditingChatSurface = isDevFrameChatSurface || effectiveAgentChatSurface === "desktop";
+    const inferredCodeAccessEnabled = !isDevMode || isCodeEditingChatSurface;
+    const codeAccessEnabled = codeAccess?.enabled ?? inferredCodeAccessEnabled;
+    const codeUnavailableTitle = codeAccess?.unavailableTitle ?? t("agentPanel.openDesktopToEditCode");
+    const codeUnavailableDescription = codeAccess?.unavailableDescription ??
+        t("agentPanel.codeUnavailableDescription");
+    const codeUnavailableCtaLabel = codeAccess?.unavailableCtaLabel ?? t("agentPanel.downloadDesktop");
+    const codeUnavailableCtaHref = codeAccess?.unavailableCtaHref ?? "https://www.agent-native.com/download";
+    const codeUnavailableSecondaryCtaLabel = codeAccess?.unavailableSecondaryCtaLabel ?? t("agentPanel.useBuilder");
+    const codeUnavailableSecondaryCtaHref = codeAccess?.unavailableSecondaryCtaHref;
+    const canUseCodeTools = isDevMode && codeAccessEnabled && isCodeEditingChatSurface;
+    const showCliMode = Boolean(renderCliTab) ||
+        ((isDevMode || !codeAccessEnabled) && isCodeEditingChatSurface);
+    useEffect(() => {
+        if (mode === "cli" && !showCliMode)
+            switchMode("chat");
+    }, [mode, showCliMode, switchMode]);
+    const prevIsDevMode = useRef(isDevMode);
+    useEffect(() => {
+        if (prevIsDevMode.current !== isDevMode) {
+            prevIsDevMode.current = isDevMode;
+            window.dispatchEvent(new CustomEvent("agent-panel:dev-mode-change", {
+                detail: { isDevMode },
+            }));
+            if (window.parent !== window) {
+                window.parent.postMessage({ type: "agentNative.devModeChange", data: { isDevMode } }, parentFrameTargetOrigin());
+            }
+        }
+    }, [isDevMode]);
+    const renderModeButtons = useCallback((activeMode) => (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(DesignSystemTooltip, { trigger: _jsxs("button", { onClick: () => switchMode("chat"), "aria-label": t("agentPanel.chatMode"), className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[12px] leading-none", activeMode === "chat"
+                        ? "bg-accent text-foreground"
+                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), style: AGENT_PANEL_CONTROL_STYLE, children: [_jsx(IconMessageCircle, { size: 14 }), t("agentPanel.chat")] }), content: t("agentPanel.chatMode"), delayMs: 200 }), showCliMode && (_jsx(DesignSystemTooltip, { trigger: _jsxs("button", { onClick: () => switchMode("cli"), "aria-label": t("agentPanel.cliTerminalMode"), 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 }), t("agentPanel.cli")] }), content: codeAccessEnabled
+                    ? t("agentPanel.cliTerminalMode")
+                    : codeUnavailableDescription, className: "max-w-[260px]", delayMs: 200 })), _jsx(DesignSystemTooltip, { trigger: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": t("agentPanel.workspaceMode"), 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 }), t("agentPanel.workspace")] }), content: t("agentPanel.workspaceMode"), delayMs: 200 })] })), [codeAccessEnabled, codeUnavailableDescription, showCliMode, t]);
+    const [headerMenuOpen, setHeaderMenuOpen] = useState(false);
+    const [feedbackOpen, setFeedbackOpen] = useState(false);
+    const [shareFromMenuOpen, setShareFromMenuOpen] = useState(false);
+    const preventHeaderMenuFocusRestoreRef = useRef(false);
+    const closeHeaderMenuForOverlay = useCallback(() => {
+        preventHeaderMenuFocusRestoreRef.current = true;
+        setHeaderMenuOpen(false);
+    }, []);
+    const getChatThreadShareUrl = useCallback((threadId) => {
+        if (typeof window === "undefined")
+            return undefined;
+        if (threadUrlSync &&
+            typeof threadUrlSync === "object" &&
+            typeof threadUrlSync.getPath === "function") {
+            return new URL(appPath(threadUrlSync.getPath(threadId)), window.location.origin).toString();
+        }
+        const url = new URL(window.location.href);
+        url.searchParams.set("thread", threadId);
+        return url.toString();
+    }, [threadUrlSync]);
+    const wideDrawerAction = isWideDrawer ? onExitWideDrawer : onSnapTo75Percent;
+    const wideDrawerLabel = t(isWideDrawer ? "agentPanel.returnChatToLayout" : "agentPanel.widenChat");
+    const fullViewAction = resolveAgentPanelFullViewAction(agentPageHref, onFullViewRequest, mode, chatOnly, location.pathname);
+    const integrationsHref = resolveAgentPanelIntegrationsHref(agentPageHref, location.pathname);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!(event.metaKey || event.ctrlKey) ||
+                !event.shiftKey ||
+                event.altKey) {
+                return;
+            }
+            if (event.code === "Backslash" &&
+                onCollapse &&
+                mode === "chat" &&
+                wideDrawerAction) {
+                event.preventDefault();
+                wideDrawerAction();
+                return;
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [mode, onCollapse, wideDrawerAction]);
+    const renderHeaderActions = useCallback(({ activeChatSessionId, activeTabId, activeTabMessageCount, addTab, clearActiveTab, closeAllTabs, closeOtherTabs, closeTab, showHistory, tabs, toggleHistory, }) => (_jsxs("div", { className: "relative flex shrink-0 items-center gap-0.5", children: [!onCollapse && SHOW_ONBOARDING && (_jsx(Suspense, { fallback: null, children: _jsx(SetupButton, {}) })), (!onCollapse || shareFromMenuOpen) &&
+                (() => {
+                    const activeTab = mode === "chat" && activeChatSessionId
+                        ? tabs.find((tab) => tab.id === activeChatSessionId)
+                        : undefined;
+                    if (!activeTab ||
+                        (activeTabMessageCount <= 0 && activeTab.status === "idle")) {
+                        return null;
+                    }
+                    return (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, allowedRoles: ["viewer", "editor", "admin"], resourceTitle: activeTab.label || t("agentPanel.chat"), shareUrl: getChatThreadShareUrl(activeTab.id), triggerClassName: "h-7 px-2", defaultOpen: onCollapse && shareFromMenuOpen, onOpenChange: onCollapse ? setShareFromMenuOpen : undefined }));
+                })(), feedbackEnabled ? (_jsx(FeedbackButton, { variant: "icon", side: "bottom", align: "end", chatSessionId: activeChatSessionId, chatStorageKey: storageKey, open: feedbackOpen, onOpenChange: setFeedbackOpen, trigger: _jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", className: "pointer-events-none absolute end-0 top-full h-px w-px opacity-0" }) })) : null, mode === "chat" && (_jsx(IconTooltip, { content: newTabMode === "cli" && newCliTabLabel
+                    ? newCliTabLabel
+                    : (newUiTabLabel ?? t("agentPanel.newChat")), children: _jsx("button", { onClick: newTabMode === "cli" ? openNewCliTab : addTab, "aria-label": newTabMode === "cli" && newCliTabLabel
+                        ? newCliTabLabel
+                        : (newUiTabLabel ?? t("agentPanel.newChat")), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) })), mode === "cli" && (canUseCodeTools || renderCliTab) && (_jsx(IconTooltip, { content: t("agentPanel.newTerminal"), children: _jsx("button", { onClick: openNewCliTab, "aria-label": t("agentPanel.newTerminal"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) })), _jsxs(DropdownMenu, { open: headerMenuOpen, onOpenChange: setHeaderMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", headerMenuOpen && "bg-accent text-foreground"), "aria-label": t("agentPanel.panelOptions"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "max-h-[var(--radix-dropdown-menu-content-available-height)] w-48 overflow-y-auto", onCloseAutoFocus: (event) => {
+                            consumeAgentPanelOverlayFocusRestore(preventHeaderMenuFocusRestoreRef, event);
+                        }, children: [onCollapse && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: onCollapse, children: [_jsx(IconLayoutSidebarRightCollapse, { size: 14, className: "shrink-0" }), t("agentPanel.collapseSidebar"), _jsx(DropdownMenuShortcut, { children: toggleSidebarHint })] }), _jsx(DropdownMenuSeparator, {})] })), onCollapse && mode === "chat" && wideDrawerAction ? (_jsxs(DropdownMenuItem, { onSelect: wideDrawerAction, children: [_jsx(IconArrowsHorizontal, { size: 14, className: "shrink-0" }), wideDrawerLabel, _jsx(DropdownMenuShortcut, { children: widenChatHint })] })) : null, fullViewAction?.kind === "callback" && onFullViewRequest ? (_jsx(AgentPanelFullViewMenuItem, { activeTabId: activeTabId, onFullViewRequest: onFullViewRequest, label: t("agentPanel.openFullView") })) : fullViewAction?.kind === "link" ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(RouterSidebarLink, { to: fullViewAction.href, "aria-label": t("agentPanel.openFullView"), children: t("agentPanel.openFullView") }) })) : null, integrationsHref ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(RouterSidebarLink, { to: integrationsHref, children: [_jsx(IconPlugConnected, { size: 14, className: "shrink-0" }), t("agentPanel.integrations")] }) })) : null, (onCollapse && mode === "chat" && wideDrawerAction) ||
+                                fullViewAction ||
+                                integrationsHref ? (_jsx(DropdownMenuSeparator, {})) : null, onCollapse &&
+                                (newTabMode === "cli" || (mode === "cli" && renderCliTab)) && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => openNewUiTab(addTab), children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), newUiTabLabel ?? t("agentPanel.newChat")] }), _jsxs(DropdownMenuItem, { onSelect: openNewCliTab, children: [_jsx(IconTerminal2, { size: 14, className: "shrink-0" }), newCliTabLabel ?? t("agentPanel.newTerminal")] }), mode === "chat" ? _jsx(DropdownMenuSeparator, {}) : null] })), onCollapse && mode === "chat" && newTabMode !== "cli" && (_jsxs(DropdownMenuItem, { onSelect: () => openNewUiTab(addTab), children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), newUiTabLabel ?? t("agentPanel.newChat")] })), onCollapse &&
+                                mode === "chat" &&
+                                renderCliTab &&
+                                newTabMode !== "cli" ? (_jsxs(DropdownMenuItem, { onSelect: openNewCliTab, children: [_jsx(IconTerminal2, { size: 14, className: "shrink-0" }), newCliTabLabel ?? t("agentPanel.newTerminal")] })) : null, mode === "chat" &&
+                                newTabMode !== "cli" &&
+                                onNewCliTab &&
+                                newCliTabLabel ? (_jsxs(DropdownMenuItem, { onSelect: onNewCliTab, children: [_jsx(IconTerminal2, { size: 14, className: "shrink-0" }), newCliTabLabel] })) : null, onCollapse &&
+                                mode === "chat" &&
+                                (() => {
+                                    const activeTab = activeChatSessionId
+                                        ? tabs.find((tab) => tab.id === activeChatSessionId)
+                                        : undefined;
+                                    if (!activeTab ||
+                                        (activeTabMessageCount <= 0 && activeTab.status === "idle")) {
+                                        return null;
+                                    }
+                                    return (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, () => setShareFromMenuOpen(true), "timeout"), children: [_jsx(IconShare3, { size: 14, className: "shrink-0" }), t("agentChat.share.share", { defaultValue: "Share" })] }));
+                                })(), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, toggleHistory, "timeout"), children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
+                                        ? t("agentPanel.hideChats")
+                                        : t("agentPanel.allChats")] })), mode === "chat" && (_jsx(RunsTrayMenuItem, { pollMs: 0, limit: 12, showRecent: true, onOpenThread: openRunThread })), mode === "chat" && _jsx(DropdownMenuSeparator, {}), mode === "cli" && availableClis.length > 0 && (_jsxs(_Fragment, { children: [availableClis.map((cli) => (_jsxs(DropdownMenuItem, { onSelect: () => selectCli(cli.command), className: cn(cli.command === selectedCli
+                                            ? "font-medium"
+                                            : "text-muted-foreground"), children: [cli.command === selectedCli ? (_jsx(IconCheck, { size: 12, className: "shrink-0" })) : (_jsx("span", { className: "w-3" })), cli.label] }, cli.command))), _jsx(DropdownMenuSeparator, {})] })), feedbackEnabled ? (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, () => setFeedbackOpen(true)), children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), t("agentPanel.feedback")] })) : null, ((mode === "chat" && activeTabId) ||
+                                (mode === "cli" &&
+                                    (canUseCodeTools || renderCliTab) &&
+                                    activeCliTab)) && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), mode === "chat" ? (shouldShowAgentPanelChatTabBar(tabs, activeTabId) ? (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => closeTab(activeTabId), children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.closeTab"), _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherTabs(activeTabId), children: t("agentPanel.closeOtherTabs") }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllTabs(), children: [t("agentPanel.closeAllTabs"), _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] })) : (_jsxs(DropdownMenuItem, { onSelect: clearActiveTab, children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.clearChat")] }))) : (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => closeCliTab(activeCliTab), children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.closeTab"), _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherCliTabs(activeCliTab), children: t("agentPanel.closeOtherTabs") }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllCliTabs(), children: [t("agentPanel.closeAllTabs"), _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] }))] }))] })] }), onCollapse && showCollapseButton && (_jsx(IconTooltip, { content: t("agentPanel.collapseSidebar"), children: _jsx("button", { type: "button", onClick: onCollapse, "aria-label": t("agentPanel.collapseSidebar"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconX, { size: 14 }) }) }))] })), [
+        activeCliTab,
+        addCliTab,
+        availableClis,
+        canUseCodeTools,
+        closeHeaderMenuForOverlay,
+        closeAllCliTabs,
+        closeAllTabsHint,
+        closeCliTab,
+        closeOtherCliTabs,
+        closeTabHint,
+        feedbackOpen,
+        feedbackEnabled,
+        getChatThreadShareUrl,
+        headerMenuOpen,
+        isWideDrawer,
+        mode,
+        newTabMode,
+        newCliTabLabel,
+        newUiTabLabel,
+        agentPageHref,
+        fullViewAction,
+        integrationsHref,
+        onCollapse,
+        onFullViewRequest,
+        onExitWideDrawer,
+        onSnapTo75Percent,
+        openRunThread,
+        openNewCliTab,
+        openNewUiTab,
+        renderCliTab,
+        selectCli,
+        selectedCli,
+        shareFromMenuOpen,
+        showCollapseButton,
+        storageKey,
+        switchMode,
+        t,
+        wideDrawerAction,
+        wideDrawerLabel,
+        widenChatHint,
+    ]);
+    const renderPageChatOverlay = useCallback(({ activeTabId, activeTabMessageCount, addTab, clearActiveTab, showHistory, tabs, toggleHistory, }) => {
+        const activeTab = activeTabId
+            ? tabs.find((tab) => tab.id === activeTabId)
+            : undefined;
+        const pageHeaderVisible = shouldShowAgentPanelPageHeader(tabs, activeTabId, activeTabMessageCount);
+        const canShareActiveTab = activeTab && (activeTabMessageCount > 0 || activeTab.status !== "idle");
+        const showNewChatAction = showPageNewChatButton &&
+            shouldShowAgentPanelPageNewChatButton(tabs, activeTabId, activeTabMessageCount);
+        return (_jsxs(_Fragment, { children: [_jsx(PageHeaderVisibilityReporter, { visible: pageHeaderVisible, onVisibilityChange: onPageHeaderVisibilityChange }), pageHeaderVisible ? (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", "data-agent-page-chat-fade": "", className: "agent-kit-page-fade pointer-events-none absolute inset-x-0 h-5 bg-gradient-to-b from-background/80 to-transparent" }), _jsxs("header", { "data-agent-page-chat-header": "", className: "agent-kit-page-header absolute inset-x-0 top-0 flex items-center gap-3 border-b border-border/70 px-3 sm:px-4", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [pageHeaderLeadingSlot, _jsx("h1", { className: "truncate text-xs font-medium text-foreground", children: activeTab?.label || t("agentPanel.newChat") }), _jsxs(DropdownMenu, { open: headerMenuOpen, onOpenChange: setHeaderMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-agent-page-title-menu": "", "aria-label": t("agentPanel.panelOptions"), className: "flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground", children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 5, className: "w-44", onCloseAutoFocus: (event) => {
+                                                        consumeAgentPanelOverlayFocusRestore(preventHeaderMenuFocusRestoreRef, event);
+                                                    }, children: [toggleHistory ? (_jsxs(DropdownMenuItem, { onSelect: (event) => deferAgentPanelOverlayOpen(event, closeHeaderMenuForOverlay, toggleHistory, "timeout"), children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
+                                                                    ? t("agentPanel.hideChats")
+                                                                    : t("agentPanel.allChats")] })) : null, activeTabMessageCount > 0 ? (_jsxs(DropdownMenuItem, { onSelect: clearActiveTab, children: [_jsx(IconX, { size: 14, className: "shrink-0" }), t("agentPanel.clearChat")] })) : null] })] }), activeTab?.status === "running" ? (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-muted-foreground/55 animate-pulse motion-reduce:animate-none" })) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [canShareActiveTab ? (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, allowedRoles: ["viewer", "editor", "admin"], resourceTitle: activeTab.label || t("agentPanel.chat"), shareUrl: getChatThreadShareUrl(activeTab.id), triggerContent: _jsx(IconShare3, { size: 15, "aria-hidden": "true" }), triggerClassName: "size-8 p-0 border-0 bg-transparent shadow-none hover:bg-accent/60" })) : null, pageToolbarSlot, showNewChatAction ? (_jsxs("button", { type: "button", "data-agent-page-new-chat": "", "aria-label": t("agentPanel.newChat"), onClick: () => {
+                                                addTab();
+                                            }, className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background/95 px-2.5 text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(IconPlus, { size: 14 }), _jsx("span", { children: t("agentPanel.newChat") })] })) : null] })] })] })) : null] }));
+    }, [
+        getChatThreadShareUrl,
+        closeHeaderMenuForOverlay,
+        headerMenuOpen,
+        onPageHeaderVisibilityChange,
+        pageHeaderLeadingSlot,
+        pageToolbarSlot,
+        preventHeaderMenuFocusRestoreRef,
+        setHeaderMenuOpen,
+        showPageNewChatButton,
+        t,
+    ]);
+    const activeTabResizeObserverRef = useRef(null);
+    const scrollActiveTabIntoView = useCallback((el) => {
+        const container = getActiveTabScrollContainer(el);
+        if (!container)
+            return;
+        requestAnimationFrame(() => {
+            const delta = getActiveTabScrollDelta(container.getBoundingClientRect(), el.getBoundingClientRect());
+            if (delta !== 0)
+                container.scrollLeft += delta;
+        });
+    }, []);
+    const activeTabRefCb = useCallback((el) => {
+        activeTabResizeObserverRef.current?.disconnect();
+        activeTabResizeObserverRef.current = null;
+        if (!el)
+            return;
+        const container = getActiveTabScrollContainer(el);
+        if (!container)
+            return;
+        const observer = typeof ResizeObserver === "undefined"
+            ? null
+            : new ResizeObserver(() => scrollActiveTabIntoView(el));
+        observer?.observe(container);
+        observer?.observe(el);
+        activeTabResizeObserverRef.current = observer;
+        scrollActiveTabIntoView(el);
+    }, [scrollActiveTabIntoView]);
+    useEffect(() => () => activeTabResizeObserverRef.current?.disconnect(), []);
+    const renderChatHeader = useCallback(({ tabs, activeTabId, activeTabMessageCount, setActiveTabId, addTab, clearActiveTab, closeTab, closeOtherTabs, closeAllTabs, showHistory, toggleHistory, }) => {
+        const { activeTab, childTabs, focusParentId, hasSubTabs, mainTabs } = getAgentPanelChatTabGroups(tabs, activeTabId);
+        const showSidebarChatTabs = Boolean(onCollapse) &&
+            mode === "chat" &&
+            shouldShowAgentPanelSidebarChatTabs(tabs);
+        const showUnifiedSurfaceTabs = Boolean(onCollapse && renderCliTab && showTabBar);
+        const renderUnifiedSurfaceTabs = () => (_jsxs("div", { className: "agent-tabs-scroll flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto", role: "tablist", "aria-label": t("agentPanel.panelOptions"), "data-agent-panel-surface-tabs": true, children: [mode === "chat" &&
+                    mainTabs.map((tab) => {
+                        const isActive = mode === "chat" &&
+                            (tab.id === activeTabId ||
+                                (tab.id === focusParentId &&
+                                    activeTab?.parentThreadId === tab.id));
+                        return (_jsxs("div", { className: "agent-tab-group relative flex shrink-0 items-center", children: [_jsxs("div", { role: "tab", tabIndex: 0, "aria-selected": isActive, ref: isActive ? activeTabRefCb : undefined, onClick: () => {
+                                        setActiveTabId(tab.id);
+                                        switchMode("chat");
+                                    }, onKeyDown: activateOnKeyDown(() => {
+                                        setActiveTabId(tab.id);
+                                        switchMode("chat");
+                                    }), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer min-w-[56px] max-w-[150px]", isActive
+                                        ? "bg-accent text-foreground"
+                                        : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pe-1", children: tab.label }), tab.status === "running" && (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" }))] }), _jsx("button", { type: "button", "aria-label": t("agentPanel.closeTab"), onClick: (event) => {
+                                        event.stopPropagation();
+                                        closeTab(tab.id);
+                                    }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                        position: "absolute",
+                                        right: 0,
+                                        top: 0,
+                                        bottom: 0,
+                                        width: 28,
+                                        paddingRight: 6,
+                                        borderRadius: "0 6px 6px 0",
+                                        background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                    }, children: _jsx(IconX, { size: 10 }) })] }, tab.id));
+                    }), mode === "cli" &&
+                    cliTabs.map((id, index) => {
+                        const isActive = mode === "cli" && id === activeCliTab;
+                        return (_jsxs("div", { className: "agent-tab-group relative flex shrink-0 items-center", children: [_jsx("div", { role: "tab", tabIndex: 0, "aria-selected": isActive, ref: isActive ? activeTabRefCb : undefined, onClick: () => {
+                                        setActiveCliTab(id);
+                                        switchMode("cli");
+                                    }, onKeyDown: activateOnKeyDown(() => {
+                                        setActiveCliTab(id);
+                                        switchMode("cli");
+                                    }), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer min-w-[56px]", isActive
+                                        ? "bg-accent text-foreground"
+                                        : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: _jsxs("span", { children: ["Terminal ", index + 1] }) }), _jsx("button", { type: "button", "aria-label": t("agentPanel.closeTab"), onClick: (event) => {
+                                        event.stopPropagation();
+                                        closeCliTab(id);
+                                    }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                        position: "absolute",
+                                        right: 0,
+                                        top: 0,
+                                        bottom: 0,
+                                        width: 28,
+                                        paddingRight: 6,
+                                        borderRadius: "0 6px 6px 0",
+                                        background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                    }, children: _jsx(IconX, { size: 10 }) })] }, id));
+                    })] }));
+        return (_jsxs("div", { className: "agent-sidebar-chat-header flex flex-col shrink-0", "data-agent-sidebar-chat-header": onCollapse ? "" : undefined, "data-agent-sidebar-chat-header-active": headerMenuOpen || feedbackOpen ? "" : undefined, children: [_jsxs("div", { className: cn(AGENT_PANEL_HEADER_CLASS, !onCollapse && "border-b border-border"), style: AGENT_PANEL_HEADER_STYLE, children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: showUnifiedSurfaceTabs ? (renderUnifiedSurfaceTabs()) : showSidebarChatTabs ? (_jsx("div", { className: "agent-tabs-scroll flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto", children: mainTabs.map((tab) => {
+                                    const isActive = tab.id === activeTabId ||
+                                        (tab.id === focusParentId &&
+                                            activeTab?.parentThreadId === tab.id);
+                                    return (_jsxs("div", { className: "agent-tab-group relative shrink-0", children: [_jsxs("div", { role: "button", tabIndex: 0, ref: isActive ? activeTabRefCb : undefined, onClick: () => setActiveTabId(tab.id), onKeyDown: activateOnKeyDown(() => setActiveTabId(tab.id)), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer min-w-[56px] max-w-[150px]", isActive
+                                                    ? "bg-accent text-foreground"
+                                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pe-1", children: tab.label }), tab.status === "running" && (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" }))] }), _jsx("button", { type: "button", "aria-label": t("agentPanel.closeTab"), onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    closeTab(tab.id);
+                                                }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                                    position: "absolute",
+                                                    right: 0,
+                                                    top: 0,
+                                                    bottom: 0,
+                                                    width: 28,
+                                                    paddingRight: 6,
+                                                    borderRadius: "0 6px 6px 0",
+                                                    background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                                }, children: _jsx(IconX, { size: 10 }) })] }, tab.id));
+                                }) })) : shouldShowAgentPanelModeButtons(Boolean(onCollapse), chatOnly) ? (renderModeButtons(mode)) : null }), _jsx("div", { className: "flex items-center gap-0.5", children: renderHeaderActions({
+                                activeChatSessionId: activeTabId,
+                                activeTabId,
+                                activeTabMessageCount,
+                                addTab,
+                                clearActiveTab,
+                                closeAllTabs,
+                                closeOtherTabs,
+                                closeTab,
+                                showHistory,
+                                tabs,
+                                toggleHistory,
+                            }) })] }), mode === "chat" && chatNotice ? (_jsx("div", { className: "border-b border-border", children: chatNotice })) : null, showTabBar &&
+                    !showUnifiedSurfaceTabs &&
+                    (mode === "chat" ||
+                        (mode === "cli" && (canUseCodeTools || renderCliTab))) &&
+                    (() => {
+                        const showChatTabBar = mode === "chat" &&
+                            shouldShowAgentPanelChatTabBar(tabs, activeTabId);
+                        const showCliTabBar = mode === "cli" &&
+                            (canUseCodeTools || renderCliTab) &&
+                            shouldShowAgentPanelCliTabBar(cliTabs);
+                        if (!showChatTabBar && !showCliTabBar)
+                            return null;
+                        return (_jsxs(_Fragment, { children: [!showSidebarChatTabs && (_jsx("div", { className: "flex items-center px-2 py-1 border-b border-border gap-0.5", children: _jsx("div", { className: "agent-tabs-scroll flex items-center gap-0.5 min-w-0 overflow-x-auto flex-1", children: mode === "chat"
+                                            ? mainTabs.map((tab) => {
+                                                const isActive = tab.id === activeTabId ||
+                                                    (tab.id === focusParentId &&
+                                                        activeTab?.parentThreadId === tab.id);
+                                                return (_jsxs("div", { className: "agent-tab-group relative shrink-0", children: [_jsxs("div", { role: "button", tabIndex: 0, ref: isActive ? activeTabRefCb : undefined, onClick: () => setActiveTabId(tab.id), onKeyDown: activateOnKeyDown(() => setActiveTabId(tab.id)), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer min-w-[56px] max-w-[150px]", isActive
+                                                                ? "bg-accent text-foreground"
+                                                                : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pe-1", children: tab.label }), tab.status === "running" && (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" }))] }), _jsx("button", { type: "button", "aria-label": t("agentPanel.closeTab"), onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                closeTab(tab.id);
+                                                            }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                                                position: "absolute",
+                                                                right: 0,
+                                                                top: 0,
+                                                                bottom: 0,
+                                                                width: 28,
+                                                                paddingRight: 6,
+                                                                borderRadius: "0 6px 6px 0",
+                                                                background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                                            }, children: _jsx(IconX, { size: 10 }) })] }, tab.id));
+                                            })
+                                            : cliTabs.map((id, i) => (_jsxs("div", { className: "agent-tab-group relative shrink-0", children: [_jsx("div", { role: "button", tabIndex: 0, ref: id === activeCliTab
+                                                            ? activeTabRefCb
+                                                            : undefined, onClick: () => setActiveCliTab(id), onKeyDown: activateOnKeyDown(() => setActiveCliTab(id)), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer min-w-[56px]", id === activeCliTab
+                                                            ? "bg-accent text-foreground"
+                                                            : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: _jsxs("span", { children: ["Terminal ", i + 1] }) }), _jsx("button", { type: "button", "aria-label": t("agentPanel.closeTab"), onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            closeCliTab(id);
+                                                        }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                                            position: "absolute",
+                                                            right: 0,
+                                                            top: 0,
+                                                            bottom: 0,
+                                                            width: 28,
+                                                            paddingRight: 6,
+                                                            borderRadius: "0 6px 6px 0",
+                                                            background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                                        }, children: _jsx(IconX, { size: 10 }) })] }, id))) }) })), mode === "chat" && hasSubTabs && (_jsx("div", { className: cn("flex items-center px-2 py-0.5 gap-0.5 bg-muted/30", !showSidebarChatTabs && "border-b border-border"), children: _jsxs("div", { className: "agent-tabs-scroll flex items-center gap-0.5 min-w-0 overflow-x-auto flex-1", children: [_jsx("div", { role: "button", tabIndex: 0, onClick: () => setActiveTabId(focusParentId), onKeyDown: activateOnKeyDown(() => setActiveTabId(focusParentId)), className: cn("flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer", activeTabId === focusParentId
+                                                    ? "bg-accent text-foreground"
+                                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: "Main" }), childTabs.map((tab) => (_jsxs("div", { className: "agent-tab-group relative shrink-0", children: [_jsxs("div", { role: "button", tabIndex: 0, ref: tab.id === activeTabId
+                                                            ? activeTabRefCb
+                                                            : undefined, onClick: () => setActiveTabId(tab.id), onKeyDown: activateOnKeyDown(() => setActiveTabId(tab.id)), className: cn("agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer min-w-[48px] max-w-[140px]", tab.id === activeTabId
+                                                            ? "bg-accent text-foreground"
+                                                            : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pe-1", children: tab.subAgentName || tab.label }), tab.status === "running" && (_jsx("span", { className: "h-1 w-1 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" }))] }), _jsx("button", { type: "button", "aria-label": t("agentPanel.closeTab"), onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            closeTab(tab.id);
+                                                        }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
+                                                            position: "absolute",
+                                                            right: 0,
+                                                            top: 0,
+                                                            bottom: 0,
+                                                            width: 24,
+                                                            paddingRight: 4,
+                                                            borderRadius: "0 6px 6px 0",
+                                                            background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
+                                                        }, children: _jsx(IconX, { size: 8 }) })] }, tab.id)))] }) }))] }));
+                    })()] }));
+    }, [
+        mode,
+        renderHeaderActions,
+        renderModeButtons,
+        chatNotice,
+        canUseCodeTools,
+        feedbackOpen,
+        headerMenuOpen,
+        onCollapse,
+        showTabBar,
+        cliTabs,
+        activeCliTab,
+        activeTabRefCb,
+        activateOnKeyDown,
+        closeCliTab,
+        renderCliTab,
+        switchMode,
+        t,
+    ]);
+    return (_jsxs(ThinkingDisplayProvider, { value: assistantChatProps.thinkingDisplay, children: [_jsx(AgentPanelSettingsNavigation, { onOpenSettings: onOpenSettings }), _jsxs("div", { className: cn("agent-panel-root agent-kit-density flex flex-1 flex-col min-h-0 min-w-0 h-full antialiased", className), style: {
+                    ...AGENT_PANEL_ROOT_STYLE,
+                    ...style,
+                    ...(isFirstRunOnboardingSurface ? { contain: "none" } : {}),
+                }, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                            __html: ".agent-tab-close{opacity:0;pointer-events:none}" +
+                                ".agent-tab-group:hover .agent-tab-close,.agent-tab-close:focus-visible{opacity:1;pointer-events:auto}" +
+                                ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
+                                ".agent-tabs-scroll::-webkit-scrollbar{display:none;}" +
+                                `[data-agent-fullscreen='true'] .agent-thread-content,` +
+                                `[data-agent-fullscreen='true'] .agent-running-activity{` +
+                                `max-width:var(--agent-kit-conversation-max-width);` +
+                                `margin-left:auto;margin-right:auto;width:100%;}` +
+                                `[data-agent-fullscreen='true'] [data-agent-suggestion-bar='true'],` +
+                                `[data-agent-fullscreen='true'] .agent-composer-area,` +
+                                `[data-agent-fullscreen='true'] .agent-plan-mode-callout{` +
+                                `max-width:var(--agent-kit-conversation-max-width);` +
+                                `margin-left:auto;margin-right:auto;width:100%;}` +
+                                `[data-agent-fullscreen='true'] .agent-composer-area:not(.agent-composer-area--compact){` +
+                                `padding-left:0;padding-right:0;}` +
+                                `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion--composer,` +
+                                `[data-agent-fullscreen='true'] .agent-mcp-connection-suggestion-error--composer{` +
+                                `max-width:var(--agent-kit-conversation-max-width);` +
+                                `margin-left:auto;margin-right:auto;width:100%;}`,
+                        } }), SHOW_ONBOARDING && mounted && (_jsx(Suspense, { fallback: null, children: _jsx(OnboardingPanel, {}) })), showFirstRunOnboarding && mounted && !insideAgentSidebar && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsx("div", { className: cn("flex flex-col min-h-0", mode === "chat" ? "flex-1" : "shrink-0"), children: mounted && (_jsx(Suspense, { fallback: _jsx(ChatLoadingSkeleton, { renderHeader: showHeader ? renderChatHeader : undefined, centerComposerWhenEmpty: assistantChatProps.centerComposerWhenEmpty, composerSlot: assistantChatProps.composerSlot, composerAreaClassName: assistantChatProps.composerAreaClassName, composerLayoutVariant: assistantChatProps.composerLayoutVariant }), children: _jsx(MultiTabAssistantChatLazy, { ...assistantChatProps, threadContentSlot: assistantChatProps.threadContentSlot, agentChatSurface: effectiveAgentChatSurface, apiUrl: apiUrl, showHeader: false, renderHeader: showHeader ? renderChatHeader : undefined, showTabBar: showTabBar, renderOverlay: showPageHeader && !showHeader
+                                    ? renderPageChatOverlay
+                                    : undefined, contentHidden: mode !== "chat", emptyStateText: emptyStateText, emptyStateAddon: emptyStateAddon, emptyStateFooter: emptyStateFooter, onMessageCountChange: onMessageCountChange, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, suggestionPlacement: assistantChatProps.suggestionPlacement ?? "context-chips", onSwitchToCli: () => switchMode("cli"), execMode: execMode, onExecModeChange: switchExecMode, storageKey: storageKey, restoreActiveThread: restoreActiveThread, scope: scope, isolateHistoryByScope: isolateHistoryByScope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync }) })) }), (canUseCodeTools || renderCliTab) &&
+                        (mode === "cli" || Boolean(renderCliTab)) &&
+                        cliTabsToRender.map((id) => (_jsx("div", { className: "min-h-0 relative flex-1", style: {
+                                display: mode === "cli" && id === activeCliTab ? undefined : "none",
+                            }, children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: t("agentPanel.loadingTerminal") }), children: renderCliTab ? (renderCliTab({
+                                    id,
+                                    active: mode === "cli" && id === activeCliTab,
+                                })) : (_jsx(AgentTerminal, { command: selectedCli, hideInFrame: false, className: "h-full", style: { background: "transparent" } })) }) }, id))), !canUseCodeTools && !renderCliTab && mode === "cli" && (_jsx("div", { className: "flex flex-1 flex-col items-center justify-center min-h-0 px-6 gap-3", children: _jsx(CodeAccessUnavailablePanel, { title: codeAccessEnabled
+                                ? t("agentPanel.cliRequiresDevMode")
+                                : codeUnavailableTitle, description: codeAccessEnabled
+                                ? t("agentPanel.cliRequiresDevModeDescription")
+                                : codeUnavailableDescription, ctaLabel: codeUnavailableCtaLabel, ctaHref: codeAccessEnabled ? undefined : codeUnavailableCtaHref, secondaryCtaLabel: codeUnavailableSecondaryCtaLabel, secondaryCtaHref: codeUnavailableSecondaryCtaHref }) })), mode === "resources" && (_jsx("div", { className: "flex flex-1 flex-col 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, {}) }) }))] })] }));
+}
+export function getActiveTabScrollDelta(containerRect, tabRect, margin = 24) {
+    if (tabRect.left < containerRect.left + margin) {
+        return tabRect.left - containerRect.left - margin;
+    }
+    if (tabRect.right > containerRect.right - margin) {
+        return tabRect.right - containerRect.right + margin;
+    }
+    return 0;
+}
+export function getActiveTabScrollContainer(el) {
+    return el.closest(".agent-tabs-scroll");
+}
+class AgentPanelErrorBoundary extends React.Component {
+    state = {
+        error: null,
+        staleIndexRecoveryCount: 0,
+    };
+    recoveryTimer = null;
+    recoveryCooldownTimer = null;
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, errorInfo) {
+        if (recoverFromStaleChunkError(error)) {
+            console.warn("[agent-native] Recovering agent panel after stale chunk error");
+            return;
+        }
+        const recoverableKind = assistantUiRecoverableRenderErrorKind(error);
+        if (recoverableKind) {
+            console.warn("[agent-native] Recovering agent panel after assistant UI render error", recoverableKind);
+            if (this.state.staleIndexRecoveryCount >= 2) {
+                console.error("[agent-native] Agent panel assistant UI 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 (assistantUiRecoverableRenderErrorKind(this.state.error) &&
+            this.state.staleIndexRecoveryCount < 2) {
+            return _jsx(AgentPanelReloadingNotice, {});
+        }
+        return (_jsx(AgentPanelErrorFallback, { details: this.state.error.message, onReset: () => {
+                this.setState({ error: null, staleIndexRecoveryCount: 0 });
+                this.props.onReset();
+            } }));
+    }
+}
+function AgentPanelReloadingNotice() {
+    const t = useT();
+    return (_jsx("div", { className: "flex h-full items-center justify-center p-6 text-center text-xs text-muted-foreground", children: t("agentPanel.uiError.reloading") }));
+}
+function AgentPanelErrorFallback({ details, onReset, }) {
+    const t = useT();
+    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: t("agentPanel.uiError.title") }), _jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: t("agentPanel.uiError.description") })] }), _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: onReset, children: t("agentPanel.uiError.reset") }), _jsx(ErrorReportActions, { appName: "Agent panel", title: t("agentPanel.uiError.title"), details: details, issueTitle: "Agent panel UI error", className: "max-w-[260px]", feedbackClassName: "h-7", githubClassName: "h-7" })] }));
+}
+export function AgentPanel(props) {
+    const [resetKey, setResetKey] = useState(0);
+    const resetPanel = useCallback(() => {
+        try {
+            const keyPrefix = props.storageKey ? `:${props.storageKey}` : "";
+            localStorage.setItem(`agent-native-panel-mode${keyPrefix}`, "chat");
+        }
+        catch { }
+        setResetKey((key) => key + 1);
+    }, [props.storageKey]);
+    const resolvedBrowserTabId = props.browserTabId ??
+        (typeof window === "undefined" ? undefined : getBrowserTabId());
+    return (_jsx(AgentPanelErrorBoundary, { onReset: resetPanel, children: _jsx(AgentPanelInner, { ...props, browserTabId: resolvedBrowserTabId }, resetKey) }));
+}
+export function shouldDefaultAgentChatSurfacePageNewChatButton(_mode, _showTabBar) {
+    return false;
+}
+export function shouldDefaultAgentChatSurfacePageHeader(mode) {
+    return mode === "page";
+}
+export function AgentChatSurface({ mode = "panel", className, defaultMode = "chat", showHeader = false, showTabBar = false, isFullscreen, style, chatViewTransition = false, showPageNewChatButton, showPageHeader, ...props }) {
+    const pageMode = mode === "page";
+    const resolvedBrowserTabId = props.browserTabId ??
+        (typeof window === "undefined" ? undefined : getBrowserTabId());
+    const defaultShowPageNewChatButton = shouldDefaultAgentChatSurfacePageNewChatButton(mode, showTabBar);
+    const panel = (_jsx(AgentPanel, { ...props, browserTabId: resolvedBrowserTabId, defaultMode: defaultMode, showHeader: showHeader, showTabBar: showTabBar, isFullscreen: isFullscreen ?? pageMode, showPageNewChatButton: showPageNewChatButton ?? defaultShowPageNewChatButton, showPageHeader: showPageHeader ?? shouldDefaultAgentChatSurfacePageHeader(mode), className: cn(pageMode && "h-full min-h-0 w-full overflow-hidden bg-background", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, className), style: chatViewTransition ? getAgentChatViewTransitionStyle(style) : style }));
+    if (!pageMode)
+        return panel;
+    return (_jsxs(_Fragment, { children: [_jsx(URLSync, { browserTabId: resolvedBrowserTabId }), panel, _jsx(SettingsReturnPathRecorder, {})] }));
+}
+//# sourceMappingURL=AgentPanel.js.map