@parhelia/core 0.1.12903 → 0.1.12905

package/dist/editor/ai/Agents.js

@@ -1,24 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useMemo } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { ArrowLeft, PanelRightClose, PanelRightOpen } from "lucide-react";
-import { CloseButton } from "../../components/ui/close-button";
+import { Plus, X, MoreVertical } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { sanitizeSvg } from "../../lib/sanitize";
-import { getActiveAgents, } from "../services/agentService";
-import { isExecutingAgentStatus, parseAgentRunStatusData, parseAgentStatus, shouldIgnoreReplayRunStart, } from "../services/agentStatus";
+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 { 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 { ParheliaAgentIcon } from "../ui/Icons";
+import { agentNeedsAttention } from "../../agents-view/AgentsInbox";
+import { SecretAgentIcon } 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[] {
@@ -42,16 +46,9 @@ import { requestSplitterPanelSize } from "../ui/splitterResizeEvent";
 //     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 {};
@@ -65,63 +62,50 @@ 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);
-    // 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 [profileTabDropdownOpen, setProfileTabDropdownOpen] = useState(null);
+    const [menuPopoverOpen, setMenuPopoverOpen] = useState(false);
+    const [loadingAgents, setLoadingAgents] = useState(false);
     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);
-    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));
+    // 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);
         });
-        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;
+        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]);
     // Detect single-agent mode from query parameter once on mount
     useEffect(() => {
         try {
@@ -142,74 +126,43 @@ 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.
-    // 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.
+    // Wrapped in startViewTransition so tab switches cross-fade instead of
+    // flashing the empty terminal frame while messages load.
     const setActiveAgentIdWithStorage = (agentId) => {
         activeAgentIdRef.current = 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,
+        startViewTransition(() => {
+            setActiveAgentId(agentId);
         });
-    }, []);
-    const setAgentsListPinnedState = React.useCallback((nextPinned) => {
-        setAgentsListPinned(nextPinned);
-        localStorageService.setItem(AGENTS_LIST_PINNED_STORAGE_KEY, nextPinned);
-        if (nextPinned) {
-            requestExpandedAgentsPanel();
+        if (agentId) {
+            localStorageService.setString(ACTIVE_AGENT_STORAGE_KEY, agentId);
         }
-    }, [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;
+        else {
+            localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
         }
-        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) => {
@@ -435,20 +388,11 @@ 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) {
@@ -701,7 +645,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 = "";
-                localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+                localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
                 setLoadingAgents(false);
                 return;
             }
@@ -736,24 +680,30 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                     selectedAgentId = mostRecentAgent?.id || null;
                 }
             }
-            // 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 there are no active agents after load, set to empty string to show profile selector
             if (activeAgentsResult.length === 0) {
-                if (!activeAgentIdRef.current) {
-                    setActiveAgentId(null);
-                    activeAgentIdRef.current = null;
-                    localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
-                    setSelectedProfileId("");
-                }
+                // 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;
+                });
             }
             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;
-                if (!currentActiveId) {
-                    setActiveAgentIdWithStorage(selectedAgentId);
-                }
+                setAgents((prev) => {
+                    const isNewAgentActive = prev.some((a) => a.id === currentActiveId && a.status === "new");
+                    if (!isNewAgentActive) {
+                        setActiveAgentIdWithStorage(selectedAgentId);
+                    }
+                    return prev;
+                });
             }
         }
         catch (error) {
@@ -815,9 +765,7 @@ 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;
@@ -844,138 +792,309 @@ 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));
     }, []);
-    useEffect(() => {
-        if (agentsListPinned &&
-            agents.length > 0 &&
-            activeAgentId !== "" &&
-            activeAgentId !== null) {
-            requestExpandedAgentsPanel();
+    const closeAgent = async (agentId) => {
+        try {
+            // Permanently close the agent in the backend
+            await closeAgentService(agentId);
         }
-    }, [
-        activeAgentId,
-        agents.length,
-        agentsListPinned,
-        requestExpandedAgentsPanel,
-    ]);
-    if (!canUseAi) {
-        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-neutral-grey-50 text-xs", children: "Loading agents..." })] }));
-    }
-    // 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);
+        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 handleAgentsListCreate = () => {
-        setAgentsListHoverOpen(false);
-        showNewAgentProfileSelector();
+    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 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;
+    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);
                             }
-                            if (showCollapsedAgentsListButton) {
-                                setAgentsListHoverOpen(true);
+                            else {
+                                // No agents left, show profile selector
+                                setActiveAgentId("");
+                                activeAgentIdRef.current = "";
+                                localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
                             }
-                        }, 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() })] }))] })] }));
+                        }
+                        // 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];
+            });
+        }
+        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,
+            },
+        ];
+    };
+    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." }));
+    }
+    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..." })] }));
+    }
+    // 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));
+                })()) })] }));
 });
 //# sourceMappingURL=Agents.js.map