@parhelia/core 0.1.12907 → 0.1.12909

package/dist/editor/ai/Agents.js

@@ -1,28 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, useMemo } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Plus, X, MoreVertical } from "lucide-react";
+import { ArrowLeft, PanelRightClose, PanelRightOpen } from "lucide-react";
+import { CloseButton } from "../../components/ui/close-button";
 import { cn } from "../../lib/utils";
 import { sanitizeSvg } from "../../lib/sanitize";
-import { startViewTransition } from "../../lib/viewTransition";
-import { getAgentStatusConfig } from "./AgentStatusBadge";
-import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
-import { getActiveAgents, closeAgent as closeAgentService, } from "../services/agentService";
-import { isExecutingAgentStatus, isRunningAgentStatus, parseAgentRunStatusData, shouldIgnoreReplayRunStart, } from "../services/agentStatus";
-import { toUserFacingAgentErrorMessage } from "../services/agentErrorMessage";
+import { getActiveAgents, } from "../services/agentService";
+import { isExecutingAgentStatus, parseAgentRunStatusData, parseAgentStatus, shouldIgnoreReplayRunStart, } from "../services/agentStatus";
 import { AgentTerminal } from "./AgentTerminal";
 import { useEditContext } from "../client/editContext";
-import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
-// import { Button } from "../../components/ui/button";
 import { loadAiProfiles } from "../services/aiService";
-import { ChevronDown, List } from "lucide-react";
 import { AgentProfileSelector } from "./AgentProfileSelector";
 import { AgentsView } from "../../agents-view/AgentsView";
-import { agentNeedsAttention } from "../../agents-view/AgentsInbox";
-import { SecretAgentIcon } from "../ui/Icons";
+import { ParheliaAgentIcon } from "../ui/Icons";
 import { Spinner } from "../ui/Spinner";
+import { Splitter } from "../ui/Splitter";
 import { localStorageService } from "../services/localStorageService";
 import { LicenseFeatures, useFeature } from "../../licensing";
+import { ACTIVE_AGENT_STORAGE_KEY, setActiveAgentConversation, } from "./useActiveAgentConversation";
+import { requestSplitterPanelSize } from "../ui/splitterResizeEvent";
 // function convertAgentMessagesToTerminalMessages(
 //   agentMessages: AgentChatMessage[],
 // ): Message[] {
@@ -46,9 +42,16 @@ import { LicenseFeatures, useFeature } from "../../licensing";
 //     tool_call_id: msg.toolCallId,
 //   }));
 // }
-const ACTIVE_AGENT_STORAGE_KEY = "editor.activeAgentId";
 const TASKBOARD_PROJECT_QUERY_KEY = "tbProjectId";
 const TASKBOARD_TASK_QUERY_KEY = "tbTaskId";
+const AGENTS_LIST_WIDTH = 320;
+const AGENTS_LIST_OVERLAY_WIDTH = 340;
+const AGENTS_INLINE_LIST_MIN_WIDTH = 860;
+const AGENTS_EXPANDED_PANEL_WIDTH = 920;
+const AGENTS_LIST_PINNED_STORAGE_KEY = "agentsPanel.listPinned";
+const AGENTS_CHAT_LIST_SPLITTER_STORAGE_KEY = "agentsPanel.chatListSizes";
+const EDITOR_SPLITTER_STORAGE_KEY = "editor.panelSizes";
+const FAR_RIGHT_AGENTS_PANEL_NAME = "farRightSidebar";
 function readTaskboardLinkageFromUrl() {
     if (typeof window === "undefined") {
         return {};
@@ -62,50 +65,63 @@ function readTaskboardLinkageFromUrl() {
     };
 }
 export const Agents = React.memo(function Agents({ closeButton, }) {
+    const panelRef = useRef(null);
     const [agents, setAgents] = useState([]);
     const [activeAgentId, setActiveAgentId] = useState(""); // "" = show profile selector, null = show overview, string = agent ID
     const activeAgentIdRef = useRef("");
     const singleAgentModeRef = useRef(false);
-    const [profileTabDropdownOpen, setProfileTabDropdownOpen] = useState(null);
-    const [menuPopoverOpen, setMenuPopoverOpen] = useState(false);
-    const [loadingAgents, setLoadingAgents] = useState(false);
+    // Remembers the agent to return to when dismissing the agents-list or
+    // profile-selector overlay via the X button.
+    const returnAgentIdRef = useRef(null);
+    const agentsListHoverCloseTimeoutRef = useRef(null);
+    const [loadingAgents, setLoadingAgents] = useState(true);
     const [inactiveAgents, setInactiveAgents] = useState([]);
     const [initialMetadataMap, setInitialMetadataMap] = useState({});
     const [availableProfiles, setAvailableProfiles] = useState([]);
     const [selectedProfileId, setSelectedProfileId] = useState("");
     const [loadingProfiles, setLoadingProfiles] = useState(false);
+    const [panelWidth, setPanelWidth] = useState(0);
+    const [agentsListHoverOpen, setAgentsListHoverOpen] = useState(false);
+    const [agentsListPinned, setAgentsListPinned] = useState(() => localStorageService.getItem(AGENTS_LIST_PINNED_STORAGE_KEY) ??
+        false);
     const editContext = useEditContext();
     const canUseAi = useFeature(LicenseFeatures.AI);
-    // Group agents by profile for profile-based tabs
-    const agentsGroupedByProfile = useMemo(() => {
-        const profileMap = new Map();
-        agents.forEach((agent) => {
-            const profileId = agent.profileId || null;
-            const profileKey = profileId || "general";
-            const profile = availableProfiles.find((p) => p.id === profileId);
-            if (!profileMap.has(profileKey)) {
-                profileMap.set(profileKey, {
-                    profileId,
-                    profileName: agent.profileName || "General",
-                    profileSvgIcon: profile?.svgIcon,
-                    agents: [],
-                });
-            }
-            else {
-                // Update icon if current group doesn't have one but this agent does
-                const group = profileMap.get(profileKey);
-                if (!group.profileSvgIcon && profile?.svgIcon) {
-                    group.profileSvgIcon = profile?.svgIcon;
-                }
-            }
-            profileMap.get(profileKey).agents.push(agent);
+    useEffect(() => {
+        const element = panelRef.current;
+        if (!element)
+            return;
+        const updateWidth = () => {
+            setPanelWidth(Math.round(element.getBoundingClientRect().width));
+        };
+        updateWidth();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateWidth);
+            return () => window.removeEventListener("resize", updateWidth);
+        }
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            setPanelWidth(Math.round(entry.contentRect.width));
         });
-        return profileMap;
-    }, [agents, availableProfiles]);
-    // Calculate inbox count (agents needing attention, excluding currently open agent)
-    const inboxCount = useMemo(() => {
-        return agents.filter((agent) => agentNeedsAttention(agent) && agent.id !== activeAgentId).length;
-    }, [agents, activeAgentId]);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        if (loadingAgents && activeAgentId === "")
+            return;
+        const hasActiveConversation = typeof activeAgentId === "string" && activeAgentId !== "";
+        setActiveAgentConversation(hasActiveConversation ? activeAgentId : null);
+    }, [activeAgentId, loadingAgents]);
+    const defaultCloseButton = (_jsx(CloseButton, { onClick: () => {
+            editContext?.setShowAgentsPanel(false);
+            if (editContext?.openSidebars.includes("agents-panel")) {
+                editContext.toggleSidebar("agents-panel", { forceClose: true });
+            }
+        }, label: "Close Agents Panel", showTooltip: false }));
+    // Resolve the profile SVG icon for the active/return agent shown in the header.
+    const getAgentIcon = (agent) => availableProfiles.find((p) => p.id === agent.profileId)?.svgIcon ||
+        agent.profileSvgIcon;
     // Detect single-agent mode from query parameter once on mount
     useEffect(() => {
         try {
@@ -126,43 +142,74 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                 : mostRecent;
         });
     };
-    // Helper function to get highest priority status for a group of agents
-    const getHighestPriorityStatus = (agentList) => {
-        const statusPriority = {
-            waitingForApproval: 5,
-            error: 4,
-            running: 3,
-            idle: 2,
-            completed: 1,
-            closed: 0,
-            new: 0,
-        };
-        let highestPriority = -1;
-        let highestStatus = "idle";
-        agentList.forEach((agent) => {
-            const statusKey = typeof agent.status === "string" ? agent.status : "idle";
-            const priority = statusPriority[statusKey] ?? 0;
-            if (priority > highestPriority) {
-                highestPriority = priority;
-                highestStatus = agent.status;
-            }
-        });
-        return highestStatus;
-    };
     // Helper function to set active agent and persist to localStorage.
-    // Wrapped in startViewTransition so tab switches cross-fade instead of
-    // flashing the empty terminal frame while messages load.
+    // Keep this as a plain React update: the embedded panel can contain long
+    // transcripts, profile grids, and hidden running terminals, and browser View
+    // Transition snapshots have proven too expensive here.
     const setActiveAgentIdWithStorage = (agentId) => {
         activeAgentIdRef.current = agentId;
-        startViewTransition(() => {
-            setActiveAgentId(agentId);
+        setActiveAgentId(agentId);
+        setActiveAgentConversation(agentId);
+    };
+    // Remember the currently open agent (if any) so the overlay X can return to it.
+    const rememberReturnAgent = () => {
+        const current = activeAgentIdRef.current;
+        if (typeof current === "string" && current) {
+            returnAgentIdRef.current = current;
+        }
+    };
+    // The "+" button: open the profile selector to start a new agent.
+    const showNewAgentProfileSelector = () => {
+        rememberReturnAgent();
+        setActiveAgentIdWithStorage("");
+    };
+    const requestExpandedAgentsPanel = React.useCallback(() => {
+        requestSplitterPanelSize({
+            localStorageKey: EDITOR_SPLITTER_STORAGE_KEY,
+            panelName: FAR_RIGHT_AGENTS_PANEL_NAME,
+            size: AGENTS_EXPANDED_PANEL_WIDTH,
         });
-        if (agentId) {
-            localStorageService.setString(ACTIVE_AGENT_STORAGE_KEY, agentId);
+    }, []);
+    const setAgentsListPinnedState = React.useCallback((nextPinned) => {
+        setAgentsListPinned(nextPinned);
+        localStorageService.setItem(AGENTS_LIST_PINNED_STORAGE_KEY, nextPinned);
+        if (nextPinned) {
+            requestExpandedAgentsPanel();
         }
-        else {
-            localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+    }, [requestExpandedAgentsPanel]);
+    const toggleAgentsListPinned = React.useCallback(() => {
+        setAgentsListPinnedState(!agentsListPinned);
+    }, [agentsListPinned, setAgentsListPinnedState]);
+    const clearAgentsListHoverCloseTimeout = React.useCallback(() => {
+        if (agentsListHoverCloseTimeoutRef.current === null)
+            return;
+        clearTimeout(agentsListHoverCloseTimeoutRef.current);
+        agentsListHoverCloseTimeoutRef.current = null;
+    }, []);
+    const openAgentsListHover = React.useCallback(() => {
+        clearAgentsListHoverCloseTimeout();
+        setAgentsListHoverOpen(true);
+    }, [clearAgentsListHoverCloseTimeout]);
+    const scheduleAgentsListHoverClose = React.useCallback(() => {
+        clearAgentsListHoverCloseTimeout();
+        agentsListHoverCloseTimeoutRef.current = setTimeout(() => {
+            setAgentsListHoverOpen(false);
+            agentsListHoverCloseTimeoutRef.current = null;
+        }, 120);
+    }, [clearAgentsListHoverCloseTimeout]);
+    useEffect(() => () => {
+        clearAgentsListHoverCloseTimeout();
+    }, [clearAgentsListHoverCloseTimeout]);
+    // The overlay X: return to the previously open agent, falling back to the
+    // most recent agent, or the agents list when nothing is open.
+    const dismissOverlay = () => {
+        const ret = returnAgentIdRef.current;
+        if (ret && agents.some((a) => a.id === ret)) {
+            setActiveAgentIdWithStorage(ret);
+            return;
         }
+        const mostRecent = getMostRecentAgent(agents);
+        setActiveAgentIdWithStorage(mostRecent ? mostRecent.id : null);
     };
     // Open an agent from history (or switch to it if already open)
     const openAgentFromHistory = React.useCallback(async (agent) => {
@@ -388,11 +435,20 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                 const profile = (ce.detail && ce.detail.profile);
                 if (!profile)
                     return;
+                const suggestedInitialPrompt = (ce.detail && ce.detail.initialPrompt
+                    ? String(ce.detail.initialPrompt)
+                    : "").trim();
                 // Build additionalData with preconfigured todos if available
                 const additionalData = {
                     profileId: profile.id,
                     profileName: profile.name,
                 };
+                // A suggested opening prompt pre-fills the new chat's composer but is NOT auto-sent,
+                // so the user can review/edit it before submitting.
+                if (suggestedInitialPrompt) {
+                    additionalData.initialPrompt = suggestedInitialPrompt;
+                    additionalData.initialPromptAutoSubmit = false;
+                }
                 // Add preconfigured todos as todoList if the profile has them
                 const preconfiguredTodos = profile.preconfiguredTodos;
                 if (preconfiguredTodos && preconfiguredTodos.length > 0) {
@@ -645,7 +701,7 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                 // In single-agent mode, start with profile selector (empty string) instead of overview (null)
                 setActiveAgentId("");
                 activeAgentIdRef.current = "";
-                localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+                localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
                 setLoadingAgents(false);
                 return;
             }
@@ -680,30 +736,24 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                     selectedAgentId = mostRecentAgent?.id || null;
                 }
             }
-            // If there are no active agents after load, set to empty string to show profile selector
+            // If there are no active agents after load, show the agents list/empty
+            // state. The profile selector is heavier and should only mount when the
+            // user explicitly clicks + New Agent.
             if (activeAgentsResult.length === 0) {
-                // Only if no new agent was added in the meantime
-                setAgents((prev) => {
-                    if (prev.length === 0) {
-                        setActiveAgentId("");
-                        activeAgentIdRef.current = "";
-                        localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
-                        setSelectedProfileId("");
-                    }
-                    return prev;
-                });
+                if (!activeAgentIdRef.current) {
+                    setActiveAgentId(null);
+                    activeAgentIdRef.current = null;
+                    localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+                    setSelectedProfileId("");
+                }
             }
             else {
                 // Only restore from backend/storage if no new agent is currently active
                 // This prevents overwriting a newly created agent from a comment (especially on mobile)
                 const currentActiveId = activeAgentIdRef.current;
-                setAgents((prev) => {
-                    const isNewAgentActive = prev.some((a) => a.id === currentActiveId && a.status === "new");
-                    if (!isNewAgentActive) {
-                        setActiveAgentIdWithStorage(selectedAgentId);
-                    }
-                    return prev;
-                });
+                if (!currentActiveId) {
+                    setActiveAgentIdWithStorage(selectedAgentId);
+                }
             }
         }
         catch (error) {
@@ -765,7 +815,9 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                 ...(taskboardLinkage.projectId
                     ? { projectId: taskboardLinkage.projectId }
                     : {}),
-                ...(taskboardLinkage.taskId ? { taskId: taskboardLinkage.taskId } : {}),
+                ...(taskboardLinkage.taskId
+                    ? { taskId: taskboardLinkage.taskId }
+                    : {}),
             }
             : {};
         const preconfiguredTodos = selected?.preconfiguredTodos;
@@ -792,309 +844,138 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
     const handleAgentUpdate = React.useCallback((agentId, updates) => {
         setAgents((prev) => prev.map((agent) => agent.id === agentId ? { ...agent, ...updates } : agent));
     }, []);
-    const closeAgent = async (agentId) => {
-        try {
-            // Permanently close the agent in the backend
-            await closeAgentService(agentId);
-        }
-        catch (error) {
-            console.error("Failed to close agent:", error);
-            // Continue with UI cleanup even if backend call fails
-        }
-        setAgents((prev) => {
-            const filtered = prev.filter((a) => a.id !== agentId);
-            // Find the closed agent to add to history
-            const closedAgent = prev.find((a) => a.id === agentId);
-            if (closedAgent) {
-                // Add the closed agent to the inactive agents list (history) if it doesn't already exist
-                setInactiveAgents((prevInactive) => {
-                    // Check if this agent is already in the history
-                    const alreadyExists = prevInactive.some((a) => a.id === agentId);
-                    if (alreadyExists) {
-                        return prevInactive;
-                    }
-                    return [
-                        {
-                            ...closedAgent,
-                            status: "closed",
-                            updatedDate: new Date().toISOString(),
-                        },
-                        ...prevInactive,
-                    ];
-                });
-            }
-            // If we're closing the active terminal, switch to the most recent remaining one or show profile selector
-            if (activeAgentIdRef.current === agentId) {
-                if (filtered.length > 0) {
-                    const mostRecentAgent = getMostRecentAgent(filtered);
-                    setActiveAgentIdWithStorage(mostRecentAgent?.id || null);
-                }
-                else {
-                    // No agents left, show profile selector
-                    setActiveAgentId("");
-                    activeAgentIdRef.current = "";
-                    localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
-                }
-            }
-            // If no agents remain, reset profile selection to placeholder
-            if (filtered.length === 0) {
-                setSelectedProfileId("");
-            }
-            return filtered;
-        });
-    };
-    const handleCloseAgent = (agentId, e) => {
-        e.stopPropagation();
-        // Find the agent to check its status
-        const agent = agents.find((a) => a.id === agentId);
-        if (!agent) {
-            // Agent not found, close anyway
-            closeAgent(agentId);
-            return;
-        }
-        const isActivelyRunning = agent.status === "running" ||
-            agent.status === "waitingForApproval";
-        // If agent is actively running, show confirmation dialog
-        if (isActivelyRunning) {
-            if (editContext?.confirm) {
-                editContext.confirm({
-                    header: "Abort Agent",
-                    message: "This agent is currently running. Are you sure you want to abort it?",
-                    acceptLabel: "Abort Agent",
-                    accept: () => {
-                        closeAgent(agentId);
-                    },
-                    showCancel: true,
-                });
-            }
-        }
-        else {
-            // Agent is not actively running, close immediately
-            closeAgent(agentId);
-        }
-    };
-    const handleCloseProfileAgents = async (profileAgents, profileName, e) => {
-        e.stopPropagation();
-        const agentCount = profileAgents.length;
-        const hasActiveAgents = profileAgents.some((agent) => isExecutingAgentStatus(agent.status));
-        if (editContext?.confirm) {
-            editContext.confirm({
-                header: `Close ${agentCount} Agent${agentCount > 1 ? "s" : ""}`,
-                message: hasActiveAgents
-                    ? `This will close all ${agentCount} ${profileName} agent${agentCount > 1 ? "s" : ""}, including ${profileAgents.filter((a) => isRunningAgentStatus(a.status)).length} running agent(s). Are you sure?`
-                    : `Are you sure you want to close all ${agentCount} ${profileName} agent${agentCount > 1 ? "s" : ""}?`,
-                acceptLabel: `Close ${agentCount > 1 ? "All" : "Agent"}`,
-                accept: async () => {
-                    // Close all agents in this profile
-                    const closePromises = profileAgents.map((agent) => closeAgentService(agent.id).catch((error) => {
-                        console.error(`Failed to close agent ${agent.id}:`, error);
-                    }));
-                    await Promise.all(closePromises);
-                    // Update UI state
-                    setAgents((prev) => {
-                        const agentIds = new Set(profileAgents.map((a) => a.id));
-                        const filtered = prev.filter((a) => !agentIds.has(a.id));
-                        // Add closed agents to history
-                        const closedAgents = profileAgents.map((agent) => ({
-                            ...agent,
-                            status: "closed",
-                            updatedDate: new Date().toISOString(),
-                        }));
-                        setInactiveAgents((prevInactive) => {
-                            const newAgents = closedAgents.filter((closedAgent) => !prevInactive.some((a) => a.id === closedAgent.id));
-                            return [...newAgents, ...prevInactive];
-                        });
-                        // If we're closing the active agent, switch to most recent remaining or show profile selector
-                        if (activeAgentIdRef.current &&
-                            agentIds.has(activeAgentIdRef.current)) {
-                            if (filtered.length > 0) {
-                                const mostRecentAgent = getMostRecentAgent(filtered);
-                                setActiveAgentIdWithStorage(mostRecentAgent?.id || null);
-                            }
-                            else {
-                                // No agents left, show profile selector
-                                setActiveAgentId("");
-                                activeAgentIdRef.current = "";
-                                localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
-                            }
-                        }
-                        // Reset profile selection if no agents remain
-                        if (filtered.length === 0) {
-                            setSelectedProfileId("");
-                        }
-                        return filtered;
-                    });
-                },
-                showCancel: true,
-            });
-        }
-    };
-    const closeOtherAgents = async () => {
-        if (!activeAgentIdRef.current)
-            return;
-        // Get agents to close (all except active)
-        const agentsToClose = agents.filter((a) => a.id !== activeAgentIdRef.current);
-        // Permanently close each agent in the backend
-        const closePromises = agentsToClose.map(async (agent) => {
-            try {
-                await closeAgentService(agent.id);
-            }
-            catch (error) {
-                console.error(`Failed to close agent ${agent.id}:`, error);
-            }
-        });
-        // Wait for all close operations to complete
-        await Promise.all(closePromises);
-        // Add closed agents to history (deduplicate to prevent duplicates)
-        if (agentsToClose.length > 0) {
-            const closedAgents = agentsToClose.map((agent) => ({
-                ...agent,
-                status: "closed",
-                updatedDate: new Date().toISOString(),
-            }));
-            setInactiveAgents((prevInactive) => {
-                // Filter out agents that already exist in history
-                const newAgents = closedAgents.filter((closedAgent) => !prevInactive.some((a) => a.id === closedAgent.id));
-                return [...newAgents, ...prevInactive];
-            });
+    useEffect(() => {
+        if (agentsListPinned &&
+            agents.length > 0 &&
+            activeAgentId !== "" &&
+            activeAgentId !== null) {
+            requestExpandedAgentsPanel();
         }
-        setAgents((prev) => {
-            return prev.filter((a) => a.id === activeAgentIdRef.current);
-        });
-        setMenuPopoverOpen(false);
-    };
-    const getTabsMenuItems = () => {
-        return [
-            {
-                id: "close-other",
-                label: "Close Other",
-                command: async () => {
-                    await closeOtherAgents();
-                },
-                disabled: agents.length <= 1,
-            },
-        ];
-    };
+    }, [
+        activeAgentId,
+        agents.length,
+        agentsListPinned,
+        requestExpandedAgentsPanel,
+    ]);
     if (!canUseAi) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center p-4 text-center text-sm text-gray-500", children: "AI features are unavailable with the current license." }));
+        return (_jsx("div", { className: "text-neutral-grey-50 flex h-full items-center justify-center p-4 text-center text-sm", children: "AI features are unavailable with the current license." }));
     }
     if (loadingAgents) {
-        return (_jsxs("div", { className: "flex h-full items-center justify-center gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx("div", { className: "text-xs text-gray-500", children: "Loading agents..." })] }));
+        return (_jsxs("div", { className: "flex h-full items-center justify-center gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx("div", { className: "text-neutral-grey-50 text-xs", children: "Loading agents..." })] }));
     }
-    // Empty state when no agents are open
-    if (!loadingAgents && agents.length === 0) {
-        const showingOverview = activeAgentId === null;
-        return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center border-b border-gray-200 bg-gray-50", children: [_jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex items-center gap-2", children: [showingOverview ? (
-                                /* Show Overview as an active tab when displaying overview - clickable to toggle back */
-                                _jsx("div", { className: "flex items-center px-1", children: _jsxs("div", { onClick: (e) => {
-                                            console.log("[Agents Empty State] Overview tab clicked, toggling back to profile selector", e);
-                                            setActiveAgentId("");
-                                            activeAgentIdRef.current = "";
-                                            localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
-                                        }, className: cn("flex h-8 min-w-0 cursor-pointer items-center gap-2 border-r border-gray-200 px-2 text-xs", "border-b-white bg-white hover:bg-gray-50"), children: [_jsxs("div", { className: "relative", children: [_jsx(List, { className: "size-4 flex-shrink-0 text-gray-600", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), _jsx("span", { className: "truncate font-medium", children: "Overview" })] }) })) : (
-                                /* Show Overview as a button when displaying profile selector */
-                                _jsx("div", { className: "flex items-center px-1", children: _jsx(SimpleIconButton, { onClick: (e) => {
-                                            console.log("[Agents Empty State] Overview button clicked", e);
-                                            setActiveAgentIdWithStorage(null);
-                                        }, icon: _jsxs("div", { className: "relative", children: [_jsx(List, { className: "size-4", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), label: `Agent Overview${inboxCount > 0 ? ` (${inboxCount} need attention)` : ""}`, className: "h-8 text-gray-600 hover:text-gray-800" }) })), _jsxs(Popover, { open: menuPopoverOpen, onOpenChange: (open) => {
-                                        console.log("[Agents Empty State] Menu popover onOpenChange:", open);
-                                        setMenuPopoverOpen(open);
-                                    }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(SimpleIconButton, { onClick: (e) => {
-                                                    setMenuPopoverOpen(!menuPopoverOpen);
-                                                }, icon: _jsx(MoreVertical, { className: "size-4", strokeWidth: 1 }), label: "Menu", className: "text-gray-600 hover:text-gray-800", showTooltip: false }) }), _jsx(PopoverContent, { className: "w-48 p-0", align: "end", children: _jsx("div", { className: "py-1", children: getTabsMenuItems().map((item) => item.separator ? (_jsx("div", { className: "my-1 h-px bg-gray-100" }, item.id)) : (_jsx("button", { onClick: async (e) => {
-                                                        if (item.command)
-                                                            await item.command(e);
-                                                        setMenuPopoverOpen(false);
-                                                    }, disabled: !!item.disabled, className: "w-full px-3 py-2 text-left text-xs hover:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-400", children: item.label }, item.id))) }) })] }), closeButton && (_jsx("div", { className: "flex items-center", children: closeButton }))] })] }), showingOverview ? (_jsx("div", { className: "relative flex-1", children: _jsx("div", { className: "absolute inset-0", children: _jsx(AgentsView, {}) }) })) : (_jsx("div", { className: "flex flex-1 items-start justify-center overflow-y-auto p-3", children: _jsx("div", { className: "w-full max-w-5xl", children: _jsx(AgentProfileSelector, { profiles: availableProfiles, onSelectProfile: createAgentWithSelectedProfile, loading: loadingProfiles }) }) }))] }));
-    }
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center border-b border-gray-200 bg-gray-50", children: [_jsxs("div", { className: "flex min-w-0 flex-1 overflow-hidden", children: [activeAgentId === "" && agents.length > 0 && (_jsxs("div", { className: cn("flex min-w-0 cursor-default items-center gap-2 overflow-hidden border-r border-gray-200 p-2 text-xs", "border-b-white bg-white"), children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx(Plus, { size: 18, strokeWidth: 1, className: "text-gray-400" }) }), _jsx("span", { className: "min-w-0 truncate font-medium text-gray-700", children: "New Agent" })] }), _jsx(SimpleIconButton, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            // Switch back to the most recent agent if we cancel "New Agent"
-                                            const mostRecent = getMostRecentAgent(agents);
-                                            setActiveAgentIdWithStorage(mostRecent?.id || null);
-                                        }, icon: _jsx(X, { className: "size-3", strokeWidth: 1 }), label: "Cancel", className: "flex-shrink-0 opacity-60 hover:opacity-100", showTooltip: false })] })), Array.from(agentsGroupedByProfile.values()).map((profileGroup) => {
-                                const profileKey = profileGroup.profileId || "general";
-                                const activeAgent = profileGroup.agents.find((a) => a.id === activeAgentId);
-                                const isActive = !!activeAgent;
-                                const agentCount = profileGroup.agents.length;
-                                const singleAgent = agentCount === 1 ? profileGroup.agents[0] : null;
-                                const highestStatus = getHighestPriorityStatus(profileGroup.agents);
-                                const statusConfig = getAgentStatusConfig({
-                                    status: highestStatus,
-                                });
-                                const singleAgentErrorMessage = toUserFacingAgentErrorMessage(singleAgent?.statusMessage) ||
-                                    singleAgent?.statusMessage;
-                                const activeAgentErrorMessage = toUserFacingAgentErrorMessage(activeAgent?.statusMessage) ||
-                                    activeAgent?.statusMessage;
-                                // Use agent name if: single agent OR active agent from this profile
-                                const displayName = activeAgent
-                                    ? activeAgent.name
-                                    : singleAgent
-                                        ? singleAgent.name
-                                        : profileGroup.profileName;
-                                // Always use profile group icon since all agents in the group share the same profile
-                                const displayIcon = profileGroup.profileSvgIcon;
-                                // For data-agent-id: prioritize singleAgent, then activeAgent
-                                // This ensures a single agent always has its ID on the tab
-                                const tabAgentId = singleAgent?.id || activeAgent?.id || "";
-                                return (_jsx("div", { className: "min-w-0 shrink", "data-active": isActive ? "true" : "false", "data-agent-id": tabAgentId, children: _jsxs(Popover, { open: profileTabDropdownOpen === profileKey, onOpenChange: (open) => {
-                                            setProfileTabDropdownOpen(open ? profileKey : null);
-                                            if (open) {
-                                                setMenuPopoverOpen(false);
-                                            }
-                                        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: cn("flex min-w-0 cursor-pointer items-center gap-2 overflow-hidden border-r border-gray-200 p-2 text-xs", isActive
-                                                        ? "border-b-white bg-white"
-                                                        : "hover:bg-gray-100"), onClick: () => {
-                                                        if (singleAgent) {
-                                                            // Single agent: switch directly
-                                                            setActiveAgentIdWithStorage(singleAgent.id);
-                                                        }
-                                                        // Multiple agents: popover will open via PopoverTrigger
-                                                    }, children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [_jsx("div", { className: "flex-shrink-0", children: displayIcon ? (_jsx("div", { className: "flex h-[18px] w-[18px] items-center justify-center text-gray-500 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
-                                                                            __html: sanitizeSvg(displayIcon),
-                                                                        } })) : (_jsx(SecretAgentIcon, { size: 18, strokeWidth: 1, className: "text-gray-500" })) }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: displayName }), agentCount > 1 && (_jsx("div", { className: "flex-shrink-0 rounded-full bg-gray-200 px-1.5 py-0.5 text-[10px] leading-none font-medium text-gray-700", children: agentCount })), _jsxs(Tooltip, { delayDuration: 1000, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: cn("h-1.5 w-1.5 flex-shrink-0 rounded-full", statusConfig.color, statusConfig.shouldPulse && "animate-pulse"), title: statusConfig.label }) }), _jsx(TooltipContent, { children: _jsxs("div", { children: [_jsx("div", { children: statusConfig.label }), singleAgent?.status === "error" ? (singleAgentErrorMessage ? (_jsx("div", { className: "mt-1 text-xs text-red-600", children: singleAgentErrorMessage })) : null) : activeAgent?.status === "error" ? (activeAgentErrorMessage ? (_jsx("div", { className: "mt-1 text-xs text-red-600", children: activeAgentErrorMessage })) : null) : null] }) })] }), agentCount > 1 && (_jsx(ChevronDown, { className: "size-3 flex-shrink-0 text-gray-500", strokeWidth: 1 }))] }), _jsx(SimpleIconButton, { onClick: (e) => singleAgent
-                                                                ? handleCloseAgent(singleAgent.id, e)
-                                                                : handleCloseProfileAgents(profileGroup.agents, profileGroup.profileName, e), icon: _jsx(X, { className: "size-3", strokeWidth: 1 }), label: agentCount > 1
-                                                                ? `Close all ${agentCount} agents`
-                                                                : "Close", className: "flex-shrink-0 opacity-60 hover:opacity-100", showTooltip: false })] }) }), agentCount > 1 && (_jsxs(PopoverContent, { className: "w-80 p-0", align: "start", children: [_jsxs("div", { className: "border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500", children: [profileGroup.profileName, " Agents"] }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: profileGroup.agents.map((agent) => {
-                                                            const agentStatusConfig = getAgentStatusConfig(agent);
-                                                            const agentErrorMessage = toUserFacingAgentErrorMessage(agent.statusMessage) ||
-                                                                agent.statusMessage;
-                                                            return (_jsx("div", { "data-agent-id": agent.id, className: cn("cursor-pointer border-b border-gray-50 px-3 py-2 hover:bg-gray-50", activeAgentId === agent.id && "bg-theme-secondary-light/50"), onClick: () => {
-                                                                    setActiveAgentIdWithStorage(agent.id);
-                                                                    setProfileTabDropdownOpen(null);
-                                                                }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn("h-2 w-2 flex-shrink-0 rounded-full", agentStatusConfig.color, agentStatusConfig.shouldPulse &&
-                                                                                "animate-pulse"), title: agentStatusConfig.label }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-xs font-medium text-gray-900", children: agent.name }), _jsx("div", { className: "text-[9px] font-mono text-gray-400", children: agent.id }), agent.status === "error" ? (agentErrorMessage ? (_jsx("div", { className: "truncate text-[11px] leading-tight text-red-600", children: agentErrorMessage })) : (agent.description && (_jsx("div", { className: "truncate text-[11px] leading-tight text-gray-400", children: agent.description })))) : (agent.description && (_jsx("div", { className: "truncate text-[11px] leading-tight text-gray-400", children: agent.description })))] }), _jsx(SimpleIconButton, { onClick: (e) => handleCloseAgent(agent.id, e), icon: _jsx(X, { className: "size-3", strokeWidth: 1 }), label: "Close", className: "opacity-60 hover:opacity-100" })] }) }, agent.id));
-                                                        }) })] }))] }) }, profileKey));
-                            })] }), activeAgentId !== null && (_jsx("div", { className: "flex items-center px-1", children: _jsx(SimpleIconButton, { onClick: () => setActiveAgentIdWithStorage(null), icon: _jsxs("div", { className: "relative", children: [_jsx(List, { className: "size-4", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), label: `Agent Overview${inboxCount > 0 ? ` (${inboxCount} need attention)` : ""}`, className: "text-gray-600 hover:text-gray-800" }) })), activeAgentId === null && (_jsx("div", { className: "flex items-center px-1", children: _jsxs("div", { className: cn("flex min-w-0 cursor-default items-center gap-2 border-r border-gray-200 p-2 text-xs", "border-b-white bg-white"), children: [_jsxs("div", { className: "relative", children: [_jsx(List, { className: "size-4 flex-shrink-0 text-gray-600", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), _jsx("span", { className: "truncate font-medium", children: "Overview" })] }) })), agents.length > 0 && (_jsx("div", { className: "flex items-center px-1", children: _jsxs(Popover, { open: menuPopoverOpen, onOpenChange: (open) => {
-                                setMenuPopoverOpen(open);
-                                if (open) {
-                                    setProfileTabDropdownOpen(null);
-                                }
-                            }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(SimpleIconButton, { onClick: (e) => {
-                                            setMenuPopoverOpen(!menuPopoverOpen);
-                                            if (!menuPopoverOpen) {
-                                                setProfileTabDropdownOpen(null);
-                                            }
-                                        }, icon: _jsx(MoreVertical, { className: "size-4", strokeWidth: 1 }), label: "Menu", className: "text-gray-600 hover:text-gray-800", showTooltip: false }) }), _jsx(PopoverContent, { className: "w-48 p-0", align: "end", children: _jsx("div", { className: "py-1", children: getTabsMenuItems().map((item) => item.separator ? (_jsx("div", { className: "my-1 h-px bg-gray-100" }, item.id)) : (_jsx("button", { onClick: async (e) => {
-                                                if (item.command)
-                                                    await item.command(e);
-                                                setMenuPopoverOpen(false);
-                                            }, disabled: !!item.disabled, className: "w-full px-3 py-2 text-left text-xs hover:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-400", children: item.label }, item.id))) }) })] }) })), _jsx("div", { className: "flex items-center px-1", children: _jsx(SimpleIconButton, { onClick: () => {
-                                setActiveAgentId("");
-                                activeAgentIdRef.current = "";
-                                localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
-                            }, icon: _jsx(Plus, { className: "size-4", strokeWidth: 1 }), label: agents.length === 0 ? "Create Agent" : "Add Agent", className: cn("text-gray-600 hover:text-gray-800", activeAgentId === "" && "bg-theme-secondary-light text-theme-secondary"), showTooltip: false, "data-testid": "add-agent-button" }) }), closeButton && (_jsx("div", { className: "flex items-center px-2", children: closeButton }))] }), _jsx("div", { className: "relative flex-1", children: activeAgentId === null ? (
-                // Show AgentsView when no agent is selected
-                _jsx("div", { className: "absolute inset-0", children: _jsx(AgentsView, {}) })) : activeAgentId === "" ? (
-                // Show Profile Selector when activeAgentId is ""
-                _jsx("div", { className: "absolute inset-0 flex justify-center items-start overflow-y-auto p-2", children: _jsx("div", { className: "w-full max-w-5xl", children: _jsx(AgentProfileSelector, { profiles: availableProfiles, onSelectProfile: createAgentWithSelectedProfile, loading: loadingProfiles }) }) })) : (
-                // Only render the active agent terminal (lazy rendering to avoid N+1 API calls)
-                (() => {
-                    const activeAgent = agents.find((a) => a.id === activeAgentId);
-                    if (!activeAgent)
-                        return null;
-                    return (_jsx("div", { className: "absolute inset-0", style: { viewTransitionName: "agents-tab-pane" }, children: _jsx(AgentTerminal, { agentStub: activeAgent, initialMetadata: initialMetadataMap[activeAgent.id], profiles: availableProfiles, onReloadProfiles: reloadProfiles, isActive: true, onAgentUpdate: (updates) => handleAgentUpdate(activeAgent.id, updates) }) }, activeAgent.id));
-                })()) })] }));
+    // Derived display state for the header and responsive agents list.
+    const activeAgent = agents.find((a) => a.id === activeAgentId);
+    // Main content modes shown instead of an agent terminal:
+    //   null = agents list, "" = profile selector, string = an agent.
+    const showingMainList = activeAgentId === null;
+    const showingSelector = activeAgentId === "";
+    const inMainOverlay = showingMainList || showingSelector;
+    // The return button can go back to an agent only when at least one is open.
+    const canDismissToAgent = agents.length > 0;
+    const headerActsAsBack = inMainOverlay && canDismissToAgent;
+    const canShowAgentsListSidebar = agents.length > 0 && !showingMainList && !showingSelector;
+    const enoughSpaceForInlineList = panelWidth >= AGENTS_INLINE_LIST_MIN_WIDTH;
+    const showInlineAgentsList = canShowAgentsListSidebar && (enoughSpaceForInlineList || agentsListPinned);
+    const showCollapsedAgentsListButton = canShowAgentsListSidebar && !showInlineAgentsList;
+    const selectedListAgentId = typeof activeAgentId === "string" && activeAgentId
+        ? activeAgentId
+        : returnAgentIdRef.current &&
+            agents.some((a) => a.id === returnAgentIdRef.current)
+            ? returnAgentIdRef.current
+            : undefined;
+    const contextLabel = showingSelector
+        ? "Choose an agent profile"
+        : showingMainList
+            ? "Select an agent session"
+            : activeAgent
+                ? activeAgent.name
+                : "Agents";
+    const headerAgent = !inMainOverlay ? activeAgent : null;
+    const headerAgentIcon = headerAgent ? getAgentIcon(headerAgent) : undefined;
+    const handleAgentsListSelect = (agent) => {
+        setAgentsListHoverOpen(false);
+        openAgentFromHistory(agent);
+    };
+    const handleAgentsListCreate = () => {
+        setAgentsListHoverOpen(false);
+        showNewAgentProfileSelector();
+    };
+    const agentsListToggleButton = canShowAgentsListSidebar ? (_jsx(SimpleIconButton, { onClick: toggleAgentsListPinned, icon: agentsListPinned ? (_jsx(PanelRightClose, { className: "size-4", strokeWidth: 1.5 })) : (_jsx(PanelRightOpen, { className: "size-4", strokeWidth: 1.5 })), label: agentsListPinned
+            ? "Unpin Agents List"
+            : showInlineAgentsList
+                ? "Pin Agents List"
+                : "Expand Agents List", "aria-expanded": showInlineAgentsList, selected: agentsListPinned, className: "border-border-default text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 h-[38px] w-[38px] bg-white", "data-testid": "switch-agent-button" })) : null;
+    const renderAgentsList = () => (_jsx(AgentsView, { compact: true, selectedAgentId: selectedListAgentId, onSelectAgent: handleAgentsListSelect, onRequestCreateAgent: handleAgentsListCreate, toolbarActions: agentsListToggleButton }));
+    const agentChatPane = (_jsx("div", { className: "relative h-full w-full min-w-0 flex-1 overflow-hidden bg-white", children: (() => {
+            const shouldKeepMounted = (agent) => {
+                const parsedStatus = parseAgentStatus(agent.status);
+                return (agent.id === activeAgentId ||
+                    isExecutingAgentStatus(parsedStatus) ||
+                    parsedStatus === "waitingForInput" ||
+                    parsedStatus === "costLimitReached");
+            };
+            const mountedAgents = agents.filter(shouldKeepMounted);
+            return (_jsxs(_Fragment, { children: [mountedAgents.map((agent) => {
+                        const isSelected = agent.id === activeAgentId;
+                        const parsedStatus = parseAgentStatus(agent.status);
+                        const keepStreaming = isSelected ||
+                            isExecutingAgentStatus(parsedStatus) ||
+                            parsedStatus === "waitingForInput" ||
+                            parsedStatus === "costLimitReached";
+                        return (_jsx("div", { 
+                            // No view-transition-name here. The full streaming transcript
+                            // renders inside this div; a name makes any document-wide
+                            // startViewTransition (workspace switch, splitter collapse)
+                            // snapshot the old transcript and cross-fade it over the live
+                            // one, painting the same content at offset positions (a
+                            // ghosted z-stack). The tab-switch crossfade this name once
+                            // paired with was removed for perf (see
+                            // setActiveAgentIdWithStorage), so the name was dead metadata.
+                            className: cn("absolute inset-0", !isSelected && "hidden"), children: _jsx(AgentTerminal, { agentStub: agent, initialMetadata: initialMetadataMap[agent.id], profiles: availableProfiles, onReloadProfiles: reloadProfiles, isActive: isSelected, isVisible: keepStreaming, isFocused: isSelected, onAgentUpdate: (updates) => handleAgentUpdate(agent.id, updates) }) }, agent.id));
+                    }), showingMainList ? (
+                    // Agents list - pick an agent to switch, or create a new one.
+                    _jsx("div", { className: "absolute inset-0", children: renderAgentsList() })) : showingSelector ? (
+                    // Profile selector - its heading lives in the header instead.
+                    _jsx("div", { className: "absolute inset-0 flex items-start justify-center overflow-y-auto p-2", children: _jsx("div", { className: "w-full max-w-5xl", children: _jsx(AgentProfileSelector, { profiles: availableProfiles, onSelectProfile: createAgentWithSelectedProfile, loading: loadingProfiles, title: "" }) }) })) : null] }));
+        })() }));
+    const agentsListPane = (_jsx("div", { className: "relative h-full overflow-hidden bg-white", children: renderAgentsList() }));
+    const chatListSplitterPanels = [
+        {
+            name: "agent-chat",
+            defaultSize: "auto",
+            minSize: 360,
+            content: agentChatPane,
+        },
+        {
+            name: "agent-chat-list",
+            defaultSize: AGENTS_LIST_WIDTH,
+            minSize: 260,
+            content: agentsListPane,
+        },
+    ];
+    return (_jsxs("div", { ref: panelRef, className: "flex h-full flex-col", children: [_jsxs("div", { className: cn("border-border-default flex min-h-12 items-center gap-1.5 border-b bg-white px-2.5 py-2", headerActsAsBack && "cursor-pointer"), onClick: headerActsAsBack ? dismissOverlay : undefined, children: [_jsxs("button", { type: "button", "data-active": !inMainOverlay ? "true" : undefined, "data-agent-id": typeof activeAgentId === "string" ? activeAgentId : "", "data-testid": "agent-title", "aria-label": headerActsAsBack
+                            ? "Return to agent"
+                            : showCollapsedAgentsListButton
+                                ? "Preview agents list"
+                                : "Active agent", onClick: (event) => {
+                            if (headerActsAsBack) {
+                                event.stopPropagation();
+                                dismissOverlay();
+                                return;
+                            }
+                            if (showCollapsedAgentsListButton) {
+                                setAgentsListHoverOpen(true);
+                            }
+                        }, className: cn("flex min-w-0 flex-1 items-center gap-1.5 rounded-md px-1.5 py-1 text-left", headerActsAsBack || showCollapsedAgentsListButton
+                            ? "hover:bg-neutral-grey-5 cursor-pointer"
+                            : "cursor-default"), children: [headerActsAsBack && (_jsx(ArrowLeft, { className: "text-neutral-grey-50 size-4 shrink-0", strokeWidth: 1.5 })), headerAgent &&
+                                (headerAgentIcon ? (_jsx("div", { className: "text-neutral-grey-100 flex size-[22px] shrink-0 items-center justify-center [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                        __html: sanitizeSvg(headerAgentIcon),
+                                    } })) : (_jsx(ParheliaAgentIcon, { size: 22, strokeWidth: 1.35, className: "text-neutral-grey-100 shrink-0" }))), _jsx("span", { className: "text-neutral-grey-100 min-w-0 flex-1 truncate text-[14px] font-medium", children: contextLabel })] }), _jsx("div", { className: "flex shrink-0 items-center gap-1", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "flex items-center pl-0.5", children: closeButton ?? defaultCloseButton }) })] }), _jsxs("div", { className: "relative flex min-h-0 flex-1 overflow-hidden", children: [showInlineAgentsList ? (_jsx(Splitter, { direction: "horizontal", localStorageKey: AGENTS_CHAT_LIST_SPLITTER_STORAGE_KEY, panels: chatListSplitterPanels, className: "h-full w-full", splitterClassName: "md:w-[6px]" })) : (agentChatPane), showCollapsedAgentsListButton && (_jsxs("div", { className: "pointer-events-none absolute inset-y-2 right-2 z-40 flex items-start justify-end", children: [_jsx(SimpleIconButton, { onClick: toggleAgentsListPinned, icon: _jsx(PanelRightOpen, { className: "size-4", strokeWidth: 1.5 }), label: "Expand Agents List", showTooltip: !agentsListHoverOpen, "aria-expanded": agentsListHoverOpen, className: "border-border-default text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 pointer-events-auto h-7 w-7 bg-white p-0 shadow-sm", "data-testid": "expand-agents-list-button", onMouseEnter: openAgentsListHover, onMouseLeave: scheduleAgentsListHoverClose }), _jsx("div", { className: cn("pointer-events-auto absolute top-0 right-7 h-7 w-2", agentsListHoverOpen ? "block" : "hidden"), onMouseEnter: openAgentsListHover, onMouseLeave: scheduleAgentsListHoverClose }), _jsx("div", { className: cn("border-border-default absolute top-0 right-9 h-full overflow-hidden rounded-md border bg-white shadow-xl transition-all duration-150", agentsListHoverOpen
+                                    ? "pointer-events-auto translate-x-0 opacity-100"
+                                    : "pointer-events-none translate-x-2 opacity-0"), style: {
+                                    width: AGENTS_LIST_OVERLAY_WIDTH,
+                                    maxWidth: "calc(100vw - 56px)",
+                                }, onMouseEnter: openAgentsListHover, onMouseLeave: scheduleAgentsListHoverClose, children: renderAgentsList() })] }))] })] }));
 });
 //# sourceMappingURL=Agents.js.map