@agent-native/core 0.54.0 → 0.55.0

package/dist/client/AgentPanel.d.ts

@@ -21,7 +21,17 @@
  *   <AgentChatSurface mode="page" className="h-screen" />
  */
 import React from "react";
+import type { MultiTabAssistantChatHeaderProps } from "./MultiTabAssistantChat.js";
 import { type AssistantChatProps } from "./AssistantChat.js";
+export declare function getAgentPanelChatTabGroups(tabs: MultiTabAssistantChatHeaderProps["tabs"], activeTabId: string): {
+    activeTab: import("./MultiTabAssistantChat.js").ChatTab | undefined;
+    childTabs: import("./MultiTabAssistantChat.js").ChatTab[];
+    focusParentId: string;
+    hasSubTabs: boolean;
+    mainTabs: import("./MultiTabAssistantChat.js").ChatTab[];
+};
+export declare function shouldShowAgentPanelChatTabBar(tabs: MultiTabAssistantChatHeaderProps["tabs"], activeTabId: string): boolean;
+export declare function shouldShowAgentPanelCliTabBar(cliTabs: string[]): boolean;
 export interface AgentPanelCodeAccess {
     /** Whether this surface can safely edit source and run shell commands. */
     enabled: boolean;
@@ -45,6 +55,8 @@ export interface AgentPanelProps extends Omit<AssistantChatProps, "onSwitchToCli
     defaultMode?: "chat" | "cli";
     /** CSS class for the outer container */
     className?: string;
+    /** Inline styles for the outer container. */
+    style?: React.CSSProperties;
     /** Called when the user clicks the collapse button. If provided, a collapse button appears in the header. */
     onCollapse?: () => void;
     /** Whether the panel is currently in fullscreen (Claude-style centered) mode. */
@@ -84,6 +96,12 @@ export interface AgentChatSurfaceProps extends AgentPanelProps {
      * Default: "panel".
      */
     mode?: AgentChatSurfaceMode;
+    /**
+     * Apply the shared chat view-transition marker/name to this surface. Pair
+     * with `AgentSidebar chatViewTransition` and navigate via
+     * `startAgentChatViewTransition` or `useAgentRouteState`.
+     */
+    chatViewTransition?: boolean;
 }
 /**
  * Reusable chat surface backed by AgentPanel internals.
@@ -92,7 +110,7 @@ export interface AgentChatSurfaceProps extends AgentPanelProps {
  * model controls, scoped chat behavior, and recovery boundary used by the
  * sidebar without introducing a second chat implementation.
  */
-export declare function AgentChatSurface({ mode, className, defaultMode, isFullscreen, ...props }: AgentChatSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatSurface({ mode, className, defaultMode, isFullscreen, style, chatViewTransition, ...props }: AgentChatSurfaceProps): import("react/jsx-runtime").JSX.Element;
 export interface AgentSidebarProps {
     children: React.ReactNode;
     /** Placeholder text for the empty chat state */
@@ -112,6 +130,15 @@ export interface AgentSidebarProps {
     defaultOpen?: boolean;
     /** Animate the mobile overlay in a sheet-style slide transition. */
     animateMobile?: boolean;
+    /**
+     * Apply the shared chat view-transition marker/name to the sidebar panel so a
+     * page-level AgentChatSurface can morph into it on navigation.
+     */
+    chatViewTransition?: boolean;
+    /** Namespace for persisted chat state. Use the same key as AgentChatHome. */
+    storageKey?: string;
+    /** Open the sidebar when a chat run is active or reconnects. */
+    openOnChatRunning?: boolean;
     /**
      * Bind chats to a resource. When set, every chat started here is
      * scoped to `{type, id}`, the tab bar/history partition by that scope,
@@ -126,7 +153,7 @@ export interface AgentSidebarProps {
  * Wraps app content with a toggleable agent sidebar.
  * Use AgentToggleButton in your header to open/close it.
  */
-export declare function AgentSidebar({ children, emptyStateText, suggestions, dynamicSuggestions, defaultSidebarWidth, sidebarWidth, position, defaultOpen, animateMobile, scope, browserTabId, }: AgentSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentSidebar({ children, emptyStateText, suggestions, dynamicSuggestions, defaultSidebarWidth, sidebarWidth, position, defaultOpen, animateMobile, chatViewTransition, storageKey, openOnChatRunning, scope, browserTabId, }: AgentSidebarProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Focus the agent chat composer input.
  * Opens the sidebar if closed, then focuses the text input.

package/dist/client/AgentPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentPanel.d.ts","sourceRoot":"","sources":["../../src/client/AgentPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AgentPanel.d.ts","sourceRoot":"","sources":["../../src/client/AgentPanel.tsx"],"names":[],"mappings":"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"}

package/dist/client/AgentPanel.js

@@ -48,6 +48,7 @@ import { getFramePostMessageTargetOrigin, isTrustedFrameMessage, } from "./frame
 import { shouldParentFrameOwnAgentPanel } from "./builder-frame.js";
 import { consumeAgentSidebarUrlOpenOverride, dispatchAgentSidebarStateChange, getInitialAgentSidebarOpen, SIDEBAR_OPEN_KEY, subscribeAgentSidebarUrlChanges, } from "./agent-sidebar-state.js";
 import { AgentNativeRouteWarmup } from "./route-warmup.js";
+import { AGENT_CHAT_VIEW_TRANSITION_CLASS, getAgentChatViewTransitionStyle, } from "./chat-view-transition.js";
 // Lazy-load AgentTerminal to avoid bundling xterm.js when not needed
 const AgentTerminal = lazy(() => import("./terminal/index.js").then((m) => ({ default: m.AgentTerminal })));
 const AGENT_PANEL_PREPARE_EVENT = "agent-panel:prepare";
@@ -154,6 +155,26 @@ function ChatLoadingSkeleton({ renderHeader, }) {
     };
     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" }) })] }));
 }
+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 shouldShowAgentPanelCliTabBar(cliTabs) {
+    return cliTabs.length > 1;
+}
 function useBuilderConnectUrl() {
     const [connectUrl, setConnectUrl] = useState(null);
     const [configured, setConfigured] = useState(false);
@@ -270,7 +291,7 @@ function CodeAccessUnavailablePanel({ title, description, ctaLabel, ctaHref, sec
                             });
                         }, 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, emptyStateAddon, suggestions, dynamicSuggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, devAppUrl, storageKey, restoreActiveThread = true, scope, browserTabId, chatNotice, showTabBar = true, codeAccess, ...assistantChatProps }) {
+function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, emptyStateText, emptyStateAddon, suggestions, dynamicSuggestions, showHeader = true, onCollapse, isFullscreen, onToggleFullscreen, devAppUrl, storageKey, restoreActiveThread = true, scope, browserTabId, chatNotice, showTabBar = true, codeAccess, ...assistantChatProps }) {
     const mounted = useClientOnly();
     const keyPrefix = storageKey ? `:${storageKey}` : "";
     const execModeKey = `${EXEC_MODE_KEY}${keyPrefix}`;
@@ -440,7 +461,6 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
     }, [mode, activeCliTab, closeCliTab, closeAllCliTabs, isMac]);
     const availableClis = useAvailableClis();
     const [selectedCli, selectCli] = useCliSelection(keyPrefix);
-    const selectedLabel = availableClis.find((c) => c.command === selectedCli)?.label || selectedCli;
     const { isDevMode, canToggle, setDevMode } = useDevMode(apiUrl);
     const isDevFrameChatSurface = assistantChatProps.agentChatSurface === "dev-frame";
     const inferredCodeAccessEnabled = !isDevMode || isDevFrameChatSurface;
@@ -489,14 +509,37 @@ 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(IconTerminal2, { size: 14 }), "CLI"] }) }), _jsx(TooltipContent, { className: "max-w-[260px]", children: codeAccessEnabled
                                 ? "CLI terminal mode"
-                                : 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: "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"
+                                : codeUnavailableDescription })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: () => switchMode("resources"), "aria-label": "Workspace files, agents, skills, and tasks", className: cn("agent-sidebar-hover-reveal 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"), children: _jsx(IconSettings, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Setup and configuration" })] })] }) })), [codeAccessEnabled, codeUnavailableDescription, showCliMode]);
-    const renderHeaderActions = useCallback((activeChatSessionId) => (_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", chatSessionId: activeChatSessionId, chatStorageKey: storageKey }), 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 }) }) }))] })), [canUseCodeTools, isFullscreen, onCollapse, onToggleFullscreen, storageKey]);
-    const [tabMenuOpen, setTabMenuOpen] = useState(null);
-    const [cliPickerOpen, setCliPickerOpen] = useState(false);
+                                    : "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" })] })] }) })), [codeAccessEnabled, codeUnavailableDescription, showCliMode]);
+    const [headerMenuOpen, setHeaderMenuOpen] = useState(false);
+    const [feedbackOpen, setFeedbackOpen] = useState(false);
+    const renderHeaderActions = useCallback(({ activeChatSessionId, activeTabId, addTab, clearActiveTab, closeAllTabs, closeOtherTabs, closeTab, showHistory, tabs, toggleHistory, }) => (_jsxs("div", { className: "relative flex shrink-0 items-center gap-0.5", children: [SHOW_ONBOARDING && canUseCodeTools && (_jsx(Suspense, { fallback: null, children: _jsx(SetupButton, {}) })), _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 right-0 top-full h-px w-px opacity-0" }) }), mode === "chat" && (_jsx(IconTooltip, { content: "New chat", children: _jsx("button", { onClick: addTab, "aria-label": "New chat", className: "agent-sidebar-hover-reveal 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 && (_jsx(IconTooltip, { content: "New terminal", children: _jsx("button", { onClick: addCliTab, "aria-label": "New terminal", className: "agent-sidebar-hover-reveal 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 || mode === "settings") &&
+                                "bg-accent text-foreground"), "aria-label": "Agent panel options", children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-48", children: [mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: toggleHistory, children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory ? "Hide chats" : "All chats"] })), mode === "chat" && (_jsx(RunsTrayMenuItem, { pollMs: 2000, 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, {})] })), _jsxs(DropdownMenuItem, { onSelect: () => switchMode("settings"), className: cn(mode === "settings" ? "font-medium" : "text-muted-foreground"), children: [_jsx(IconSettings, { size: 14, className: "shrink-0" }), "Settings"] }), _jsxs(DropdownMenuItem, { onSelect: () => setFeedbackOpen(true), children: [_jsx(IconMessageDots, { size: 14, className: "shrink-0" }), "Feedback"] }), onToggleFullscreen && (_jsxs(DropdownMenuItem, { onSelect: onToggleFullscreen, children: [isFullscreen ? (_jsx(IconArrowsMinimize, { size: 14, className: "shrink-0" })) : (_jsx(IconArrowsMaximize, { size: 14, className: "shrink-0" })), isFullscreen ? "Exit fullscreen" : "Fullscreen"] })), onCollapse && (_jsxs(DropdownMenuItem, { onSelect: onCollapse, children: [_jsx(IconLayoutSidebarRightCollapse, { size: 14, className: "shrink-0" }), "Collapse sidebar"] })), ((mode === "chat" && activeTabId) ||
+                                (mode === "cli" && canUseCodeTools && 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" }), "Close Tab", _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherTabs(activeTabId), children: "Close Other Tabs" }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllTabs(), children: ["Close All Tabs", _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] })) : (_jsxs(DropdownMenuItem, { onSelect: clearActiveTab, children: [_jsx(IconX, { size: 14, className: "shrink-0" }), "Clear chat"] }))) : (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: () => closeCliTab(activeCliTab), children: [_jsx(IconX, { size: 14, className: "shrink-0" }), "Close Tab", _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherCliTabs(activeCliTab), children: "Close Other Tabs" }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllCliTabs(), children: ["Close All Tabs", _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] }))] }))] })] })] })), [
+        activeCliTab,
+        addCliTab,
+        availableClis,
+        canUseCodeTools,
+        closeAllCliTabs,
+        closeAllTabsHint,
+        closeCliTab,
+        closeOtherCliTabs,
+        closeTabHint,
+        feedbackOpen,
+        headerMenuOpen,
+        isFullscreen,
+        mode,
+        onCollapse,
+        onToggleFullscreen,
+        openRunThread,
+        selectCli,
+        selectedCli,
+        storageKey,
+        switchMode,
+    ]);
     // Ref callback: scroll the active tab into view in the overflow container.
     // Uses getBoundingClientRect for reliable positioning regardless of offsetParent.
     const activeTabRefCb = useCallback((el) => {
@@ -517,43 +560,39 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
             }
         });
     }, []);
-    const renderChatHeader = useCallback(({ tabs, activeTabId, setActiveTabId, addTab, closeTab, closeOtherTabs, closeAllTabs, showHistory, toggleHistory, }) => (_jsxs("div", { className: "flex flex-col shrink-0", children: [_jsxs("div", { className: AGENT_PANEL_HEADER_CLASS, style: AGENT_PANEL_HEADER_STYLE, children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: renderModeButtons(mode) }), _jsx("div", { className: "flex items-center gap-0.5", children: renderHeaderActions(activeTabId) })] }), mode === "chat" && chatNotice ? (_jsx("div", { className: "border-b border-border", children: chatNotice })) : null, (mode === "chat" || (mode === "cli" && canUseCodeTools)) &&
+    const renderChatHeader = useCallback(({ tabs, activeTabId, setActiveTabId, addTab, clearActiveTab, closeTab, closeOtherTabs, closeAllTabs, showHistory, toggleHistory, }) => (_jsxs("div", { className: "flex flex-col shrink-0", children: [_jsxs("div", { className: AGENT_PANEL_HEADER_CLASS, style: AGENT_PANEL_HEADER_STYLE, children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: renderModeButtons(mode) }), _jsx("div", { className: "flex items-center gap-0.5", children: renderHeaderActions({
+                            activeChatSessionId: activeTabId,
+                            activeTabId,
+                            addTab,
+                            clearActiveTab,
+                            closeAllTabs,
+                            closeOtherTabs,
+                            closeTab,
+                            showHistory,
+                            tabs,
+                            toggleHistory,
+                        }) })] }), mode === "chat" && chatNotice ? (_jsx("div", { className: "border-b border-border", children: chatNotice })) : null, showTabBar &&
+                (mode === "chat" || (mode === "cli" && canUseCodeTools)) &&
                 (() => {
-                    // Compute parent/child tab groups for the sub-tab bar
-                    const activeTab = tabs.find((t) => t.id === activeTabId);
-                    // The "focus parent" is the parent thread for the active context
-                    const focusParentId = activeTab?.parentThreadId || activeTabId;
-                    const childTabs = tabs.filter((t) => t.parentThreadId === focusParentId);
-                    const hasSubTabs = childTabs.length > 0;
-                    // Main row: only show top-level (non-child) tabs
-                    const mainTabs = tabs.filter((t) => !t.parentThreadId);
-                    return (_jsxs(_Fragment, { children: [_jsxs("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) => {
-                                                // Highlight the parent tab if a child is active
-                                                const isActive = tab.id === activeTabId ||
-                                                    (tab.id === focusParentId &&
-                                                        activeTab?.parentThreadId === tab.id);
-                                                return (_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 max-w-[150px]", isActive
-                                                        ? "bg-accent text-foreground"
-                                                        : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pr-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": "Close tab", 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", { 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", id === activeCliTab
+                    const { activeTab, childTabs, focusParentId, hasSubTabs, mainTabs, } = getAgentPanelChatTabGroups(tabs, activeTabId);
+                    const showChatTabBar = mode === "chat" &&
+                        shouldShowAgentPanelChatTabBar(tabs, activeTabId);
+                    const showCliTabBar = mode === "cli" &&
+                        canUseCodeTools &&
+                        shouldShowAgentPanelCliTabBar(cliTabs);
+                    if (!showChatTabBar && !showCliTabBar)
+                        return null;
+                    return (_jsxs(_Fragment, { children: [_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) => {
+                                            // Highlight the parent tab if a child is active
+                                            const isActive = tab.id === activeTabId ||
+                                                (tab.id === focusParentId &&
+                                                    activeTab?.parentThreadId === tab.id);
+                                            return (_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 max-w-[150px]", isActive
                                                     ? "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": "Close tab", onClick: (e) => {
+                                                    : "text-muted-foreground hover:bg-accent hover:text-foreground"), children: [_jsx("span", { className: "truncate pr-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": "Close tab", onClick: (e) => {
                                                             e.stopPropagation();
-                                                            closeCliTab(id);
+                                                            closeTab(tab.id);
                                                         }, className: "agent-tab-close flex items-center justify-end text-muted-foreground hover:text-foreground", style: {
                                                             position: "absolute",
                                                             right: 0,
@@ -563,11 +602,23 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
                                                             paddingRight: 6,
                                                             borderRadius: "0 6px 6px 0",
                                                             background: "linear-gradient(to right, transparent, hsl(var(--accent)) 40%)",
-                                                        }, children: _jsx(IconX, { size: 10 }) })] }, id))) }), _jsxs("div", { className: "flex items-center gap-0.5 shrink-0 ml-auto", children: [mode === "chat" && (_jsxs(_Fragment, { children: [_jsx(IconTooltip, { content: "New chat", children: _jsx("button", { onClick: addTab, "aria-label": "New chat", className: "flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) }), toggleHistory && (_jsx(IconTooltip, { content: "All chats", children: _jsx("button", { onClick: toggleHistory, "aria-label": "All chats", className: cn("flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", showHistory && "bg-accent text-foreground"), children: _jsx(IconHistory, { size: 14 }) }) })), _jsxs(DropdownMenu, { open: tabMenuOpen === "__chat_global", onOpenChange: (open) => setTabMenuOpen(open ? "__chat_global" : null), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", tabMenuOpen === "__chat_global" &&
-                                                                        "bg-accent text-foreground"), "aria-label": "Chat tab options", children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 4, className: "w-44", children: [_jsx(RunsTrayMenuItem, { pollMs: 2000, limit: 12, showRecent: true, onOpenThread: openRunThread }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => closeTab(activeTabId), children: ["Close Tab", _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherTabs(activeTabId), children: "Close Other Tabs" }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllTabs(), children: ["Close All Tabs", _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] })] })] })), mode === "cli" && (_jsxs(_Fragment, { children: [_jsx(IconTooltip, { content: "New terminal", children: _jsx("button", { onClick: addCliTab, "aria-label": "New terminal", className: "flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) }), availableClis.length > 0 && (_jsxs(DropdownMenu, { open: cliPickerOpen, onOpenChange: setCliPickerOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { "aria-label": `Select CLI, currently ${selectedLabel}`, className: cn("flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", cliPickerOpen && "bg-accent text-foreground"), children: _jsx(IconSettings, { size: 14 }) }) }), _jsx(DropdownMenuContent, { align: "end", sideOffset: 4, className: "w-48", 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))) })] })), _jsxs(DropdownMenu, { open: tabMenuOpen === "__cli_global", onOpenChange: (open) => setTabMenuOpen(open ? "__cli_global" : null), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", tabMenuOpen === "__cli_global" &&
-                                                                        "bg-accent text-foreground"), "aria-label": "Terminal tab options", children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 4, className: "w-44", children: [_jsxs(DropdownMenuItem, { onSelect: () => closeCliTab(activeCliTab), children: ["Close Tab", _jsx(DropdownMenuShortcut, { children: closeTabHint })] }), _jsx(DropdownMenuItem, { onSelect: () => closeOtherCliTabs(activeCliTab), children: "Close Other Tabs" }), _jsxs(DropdownMenuItem, { onSelect: () => closeAllCliTabs(), children: ["Close All Tabs", _jsx(DropdownMenuShortcut, { children: closeAllTabsHint })] })] })] })] }))] })] }), mode === "chat" && hasSubTabs && (_jsx("div", { className: "flex items-center px-2 py-0.5 border-b border-border gap-0.5 bg-muted/30", 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
+                                                        }, children: _jsx(IconX, { size: 10 }) })] }, tab.id));
+                                        })
+                                        : cliTabs.map((id, i) => (_jsxs("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", 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": "Close tab", 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: "flex items-center px-2 py-0.5 border-b border-border gap-0.5 bg-muted/30", 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", { 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 max-w-[140px]", tab.id === activeTabId
                                                 ? "bg-accent text-foreground"
@@ -590,24 +641,17 @@ function AgentPanelInner({ defaultMode = "chat", className, apiUrl, emptyStateTe
         renderModeButtons,
         chatNotice,
         canUseCodeTools,
+        showTabBar,
         cliTabs,
         activeCliTab,
-        addCliTab,
-        openRunThread,
+        activeTabRefCb,
+        activateOnKeyDown,
         closeCliTab,
-        closeOtherCliTabs,
-        closeAllCliTabs,
-        tabMenuOpen,
-        availableClis,
-        selectedCli,
-        selectedLabel,
-        selectCli,
-        cliPickerOpen,
-        closeTabHint,
-        closeAllTabsHint,
     ]);
-    return (_jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: AGENT_PANEL_ROOT_STYLE, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
-                    __html: ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
+    return (_jsxs("div", { className: cn("agent-panel-root flex flex-1 flex-col min-h-0 h-full text-[13px] leading-[1.2] antialiased", className), style: { ...AGENT_PANEL_ROOT_STYLE, ...style }, "data-agent-fullscreen": isFullscreen ? "true" : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                    __html: ".agent-sidebar-hover-reveal{opacity:0;pointer-events:none;transition:opacity 150ms ease-out;}" +
+                        ".agent-panel-root:hover .agent-sidebar-hover-reveal,.agent-panel-root:focus-within .agent-sidebar-hover-reveal{opacity:1;pointer-events:auto;}" +
+                        ".agent-tab-close{opacity:0}.agent-tab:hover .agent-tab-close{opacity:1}" +
                         ".agent-tabs-scroll{scrollbar-width:none;-ms-overflow-style:none;}" +
                         ".agent-tabs-scroll::-webkit-scrollbar{display:none;}" +
                         `[data-agent-fullscreen='true'] .agent-thread-content,` +
@@ -989,15 +1033,15 @@ export function AgentPanel(props) {
  * model controls, scoped chat behavior, and recovery boundary used by the
  * sidebar without introducing a second chat implementation.
  */
-export function AgentChatSurface({ mode = "panel", className, defaultMode = "chat", isFullscreen, ...props }) {
+export function AgentChatSurface({ mode = "panel", className, defaultMode = "chat", isFullscreen, style, chatViewTransition = false, ...props }) {
     const pageMode = mode === "page";
-    return (_jsx(AgentPanel, { ...props, defaultMode: defaultMode, isFullscreen: isFullscreen ?? pageMode, className: cn(pageMode && "h-full min-h-0 w-full overflow-hidden bg-background", className) }));
+    return (_jsx(AgentPanel, { ...props, defaultMode: defaultMode, isFullscreen: isFullscreen ?? pageMode, 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 }));
 }
 /**
  * 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, dynamicSuggestions, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = false, scope, browserTabId, }) {
+export function AgentSidebar({ children, emptyStateText = "How can I help you?", suggestions, dynamicSuggestions, defaultSidebarWidth, sidebarWidth, position = "right", defaultOpen = false, animateMobile = false, chatViewTransition = false, storageKey, openOnChatRunning = false, scope, browserTabId, }) {
     const initialWidth = defaultSidebarWidth ?? sidebarWidth ?? 380;
     const [open, setOpen] = useState(() => getInitialAgentSidebarOpen(defaultOpen));
     const [presentationMode, setPresentationMode] = useState(false);
@@ -1120,6 +1164,8 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
                 ? detail.tabId
                 : "__default__";
             if (detail?.isRunning === true) {
+                if (openOnChatRunning)
+                    setOpenPersisted(true);
                 setRunningTabIds((prev) => {
                     const next = new Set(prev);
                     next.add(tabId);
@@ -1144,7 +1190,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
             window.removeEventListener(AGENT_PANEL_PREPARE_EVENT, preparePanel);
             window.removeEventListener(AGENT_CHAT_RUNNING_EVENT, handleChatRunning);
         };
-    }, []);
+    }, [openOnChatRunning, setOpenPersisted]);
     useEffect(() => {
         const replayAfterMount = (type, event) => {
             if (shouldMountPanelRef.current)
@@ -1371,9 +1417,11 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     }
     // Mount the live chat surface only while visible or actively needed. Keeping
     // it mounted while closed starts app-state polling on every public page view.
-    const sidebar = shouldMountPanel ? (_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 &&
+    const sidebar = shouldMountPanel ? (_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", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, 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, dynamicSuggestions: dynamicSuggestions, onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : toggleFullscreen, scope: scope, browserTabId: browserTabId }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] })) : null;
+                    "shadow-2xl transition-transform duration-[260ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none"), style: chatViewTransition
+                    ? getAgentChatViewTransitionStyle(panelStyle)
+                    : panelStyle, inert: isMobile && !open ? true : undefined, "aria-hidden": isMobile && !open ? true : undefined, children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, onCollapse: () => setOpenPersisted(false), isFullscreen: effectiveFullscreen, onToggleFullscreen: isMobile ? undefined : toggleFullscreen, storageKey: storageKey, scope: scope, browserTabId: browserTabId }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag }))] })) : null;
     return (_jsxs("div", { className: "flex min-w-0 flex-1 h-screen overflow-hidden", children: [_jsx(AgentNativeRouteWarmup, {}), 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) })), shouldMountPanel ? _jsx(URLSync, { browserTabId: browserTabId }) : null, 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] }));
 }