@parhelia/core 0.1.12844 → 0.1.12856

package/dist/editor/ai/Agents.js

@@ -1,25 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, useMemo } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Plus, MoreVertical } from "lucide-react";
+import { ArrowLeft, List, Plus } 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 { CloseButton } from "../../components/ui/close-button";
-import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { getActiveAgents, closeAgent as closeAgentService, } from "../services/agentService";
-import { isExecutingAgentStatus, isRunningAgentStatus, needsAgentAttention, parseAgentRunStatusData, parseAgentStatus, shouldIgnoreReplayRunStart, } from "../services/agentStatus";
-import { toUserFacingAgentErrorMessage } from "../services/agentErrorMessage";
+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 { SecretAgentIcon } from "../ui/Icons";
+import { ParheliaAgentIcon } from "../ui/Icons";
 import { Spinner } from "../ui/Spinner";
 import { localStorageService } from "../services/localStorageService";
 import { LicenseFeatures, useFeature } from "../../licensing";
@@ -48,14 +41,6 @@ import { LicenseFeatures, useFeature } from "../../licensing";
 // }
 const ACTIVE_AGENT_STORAGE_KEY = "editor.activeAgentId";
 const TASKBOARD_PROJECT_QUERY_KEY = "tbProjectId";
-function AgentStatusIndicator({ status, label, size = "sm", }) {
-    if (status === "running") {
-        const dotClass = size === "md" ? "h-1.5 w-1.5" : "h-1 w-1";
-        return (_jsxs("div", { className: "flex flex-shrink-0 items-center gap-0.5", title: label, "aria-label": label, children: [_jsx("div", { className: cn(dotClass, "bg-highlight-100 animate-bounce rounded-full [animation-delay:-0.3s]") }), _jsx("div", { className: cn(dotClass, "bg-highlight-100 animate-bounce rounded-full [animation-delay:-0.15s]") }), _jsx("div", { className: cn(dotClass, "bg-highlight-100 animate-bounce rounded-full") })] }));
-    }
-    const statusConfig = getAgentStatusConfig({ status });
-    return (_jsx("div", { className: cn(size === "md" ? "h-2 w-2" : "h-1.5 w-1.5", "flex-shrink-0 rounded-full", statusConfig.color, statusConfig.shouldPulse && "animate-pulse"), title: label, "aria-label": label }));
-}
 const TASKBOARD_TASK_QUERY_KEY = "tbTaskId";
 function readTaskboardLinkageFromUrl() {
     if (typeof window === "undefined") {
@@ -74,9 +59,10 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
     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 [loadingAgents, setLoadingAgents] = useState(true);
     const [inactiveAgents, setInactiveAgents] = useState([]);
     const [initialMetadataMap, setInitialMetadataMap] = useState({});
     const [availableProfiles, setAvailableProfiles] = useState([]);
@@ -84,36 +70,15 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
     const [loadingProfiles, setLoadingProfiles] = useState(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);
-        });
-        return profileMap;
-    }, [agents, availableProfiles]);
-    // Calculate inbox count (agents needing attention, excluding currently open agent)
-    const inboxCount = useMemo(() => {
-        return agents.filter((agent) => needsAgentAttention(agent.status) && agent.id !== activeAgentId).length;
-    }, [agents, activeAgentId]);
+    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 {
@@ -134,37 +99,13 @@ 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);
         if (agentId) {
             localStorageService.setString(ACTIVE_AGENT_STORAGE_KEY, agentId);
         }
@@ -172,6 +113,34 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
         }
     };
+    // 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("");
+    };
+    // Clicking the agent title: open the full agents list to switch agents.
+    const openAgentsList = () => {
+        rememberReturnAgent();
+        setActiveAgentIdWithStorage(null);
+    };
+    // 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) => {
         if (!canUseAi) {
@@ -688,30 +657,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;
+                    localStorage.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) {
@@ -882,217 +845,44 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             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];
-            });
-        }
-        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: "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..." })] }));
     }
-    // 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: "border-border-default flex items-center border-b bg-[color-mix(in_srgb,var(--color-neutral-grey-5)_45%,var(--color-white))]", 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("border-border-default flex h-8 min-w-0 cursor-pointer items-center gap-2 border-r px-2 text-xs", "hover:bg-neutral-grey-5 border-b-white bg-white"), children: [_jsxs("div", { className: "relative", children: [_jsx(List, { className: "text-neutral-grey-50 size-4 flex-shrink-0", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "bg-feedback-orange absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full 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: "bg-feedback-orange absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), label: `Agent Overview${inboxCount > 0 ? ` (${inboxCount} need attention)` : ""}`, className: "text-neutral-grey-50 hover:text-neutral-grey-100 h-8" }) })), _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-neutral-grey-50 hover:text-neutral-grey-100", 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: "bg-border-default my-1 h-px" }, item.id)) : (_jsx("button", { onClick: async (e) => {
-                                                        if (item.command)
-                                                            await item.command(e);
-                                                        setMenuPopoverOpen(false);
-                                                    }, disabled: !!item.disabled, className: "hover:bg-neutral-grey-5 disabled:text-neutral-grey-50 w-full px-3 py-2 text-left text-xs disabled:cursor-not-allowed", 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: "border-border-default flex items-center border-b bg-[color-mix(in_srgb,var(--color-neutral-grey-5)_45%,var(--color-white))]", children: [_jsxs("div", { className: "flex min-w-0 flex-1 overflow-hidden", children: [activeAgentId === "" && agents.length > 0 && (_jsxs("div", { className: cn("border-border-default flex min-w-0 cursor-default items-center gap-2 overflow-hidden border-r 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-neutral-grey-50" }) }), _jsx("span", { className: "text-neutral-grey-100 min-w-0 truncate font-medium", children: "New Agent" })] }), _jsx(CloseButton, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            // Switch back to the most recent agent if we cancel "New Agent"
-                                            const mostRecent = getMostRecentAgent(agents);
-                                            setActiveAgentIdWithStorage(mostRecent?.id || null);
-                                        }, 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("border-border-default flex min-w-0 cursor-pointer items-center gap-2 overflow-hidden border-r p-2 text-xs", isActive
-                                                        ? "border-b-white bg-white"
-                                                        : "hover:bg-neutral-grey-5"), 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: "text-neutral-grey-50 flex h-[18px] w-[18px] items-center justify-center [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
-                                                                            __html: sanitizeSvg(displayIcon),
-                                                                        } })) : (_jsx(SecretAgentIcon, { size: 18, strokeWidth: 1, className: "text-neutral-grey-50" })) }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: displayName }), agentCount > 1 && (_jsx("div", { className: "bg-neutral-grey-10 badge-pad-sm text-neutral-grey-100 flex-shrink-0 rounded-full text-[10px] leading-none font-medium", children: agentCount })), _jsxs(Tooltip, { delayDuration: 1000, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "flex flex-shrink-0 items-center", title: statusConfig.label, children: _jsx(AgentStatusIndicator, { status: highestStatus, label: statusConfig.label }) }) }), _jsx(TooltipContent, { children: _jsxs("div", { children: [_jsx("div", { children: statusConfig.label }), singleAgent?.status === "error" ? (singleAgentErrorMessage ? (_jsx("div", { className: "text-feedback-red mt-1 text-xs", children: singleAgentErrorMessage })) : null) : activeAgent?.status === "error" ? (activeAgentErrorMessage ? (_jsx("div", { className: "text-feedback-red mt-1 text-xs", children: activeAgentErrorMessage })) : null) : null] }) })] }), agentCount > 1 && (_jsx(ChevronDown, { className: "text-neutral-grey-50 size-3 flex-shrink-0", strokeWidth: 1 }))] }), _jsx(CloseButton, { onClick: (e) => singleAgent
-                                                                ? handleCloseAgent(singleAgent.id, e)
-                                                                : handleCloseProfileAgents(profileGroup.agents, profileGroup.profileName, e), 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-border-default text-neutral-grey-50 border-b px-3 py-2 text-xs font-medium", 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("border-border-default hover:bg-neutral-grey-5 cursor-pointer border-b px-3 py-2", activeAgentId === agent.id &&
-                                                                    "bg-highlight-10/50"), onClick: () => {
-                                                                    setActiveAgentIdWithStorage(agent.id);
-                                                                    setProfileTabDropdownOpen(null);
-                                                                }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AgentStatusIndicator, { status: agent.status, label: agentStatusConfig.label, size: "md" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-neutral-grey-100 truncate text-xs font-medium", children: agent.name }), _jsx("div", { className: "text-neutral-grey-50 font-mono text-[9px]", children: agent.id }), agent.status === "error" ? (agentErrorMessage ? (_jsx("div", { className: "text-feedback-red truncate text-[11px] leading-tight", children: agentErrorMessage })) : (agent.description && (_jsx("div", { className: "text-neutral-grey-50 truncate text-[11px] leading-tight", children: agent.description })))) : (agent.description && (_jsx("div", { className: "text-neutral-grey-50 truncate text-[11px] leading-tight", children: agent.description })))] }), _jsx(CloseButton, { onClick: (e) => handleCloseAgent(agent.id, e), 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: "bg-feedback-orange absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), label: `Agent Overview${inboxCount > 0 ? ` (${inboxCount} need attention)` : ""}`, className: "text-neutral-grey-50 hover:text-neutral-grey-100" }) })), activeAgentId === null && (_jsx("div", { className: "flex items-center px-1", children: _jsxs("div", { className: cn("border-border-default flex min-w-0 cursor-default items-center gap-2 border-r p-2 text-xs", "border-b-white bg-white"), children: [_jsxs("div", { className: "relative", children: [_jsx(List, { className: "text-neutral-grey-50 size-4 flex-shrink-0", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "bg-feedback-orange absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full 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-neutral-grey-50 hover:text-neutral-grey-100", 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: "bg-border-default my-1 h-px" }, item.id)) : (_jsx("button", { onClick: async (e) => {
-                                                if (item.command)
-                                                    await item.command(e);
-                                                setMenuPopoverOpen(false);
-                                            }, disabled: !!item.disabled, className: "hover:bg-neutral-grey-5 disabled:text-neutral-grey-50 w-full px-3 py-2 text-left text-xs disabled:cursor-not-allowed", 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-neutral-grey-50 hover:text-neutral-grey-100", activeAgentId === "" && "bg-highlight-10 text-highlight-100"), 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: (() => {
+    // Derived display state for the header.
+    const activeAgent = agents.find((a) => a.id === activeAgentId);
+    const returnAgent = returnAgentIdRef.current &&
+        agents.find((agent) => agent.id === returnAgentIdRef.current);
+    // Overlay modes shown instead of an agent terminal:
+    //   null = agents list, "" = profile selector, string = an agent.
+    const showingList = activeAgentId === null;
+    const showingSelector = activeAgentId === "";
+    const inOverlay = showingList || showingSelector;
+    // The return button can go back to an agent only when at least one is open.
+    const canDismissToAgent = agents.length > 0;
+    const headerActsAsBack = inOverlay && canDismissToAgent;
+    const contextLabel = showingSelector
+        ? "Choose an agent profile"
+        : showingList
+            ? "Select an agent"
+            : activeAgent
+                ? activeAgent.name
+                : "Agents";
+    const headerAgent = !inOverlay ? activeAgent : null;
+    const headerAgentIcon = headerAgent ? getAgentIcon(headerAgent) : undefined;
+    return (_jsxs("div", { 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": !inOverlay ? "true" : undefined, "data-agent-id": typeof activeAgentId === "string" ? activeAgentId : "", "data-testid": "agent-title", "aria-label": headerActsAsBack ? "Return to agent" : "Open agents list", onClick: (event) => {
+                            if (headerActsAsBack) {
+                                event.stopPropagation();
+                                dismissOverlay();
+                                return;
+                            }
+                            openAgentsList();
+                        }, className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-left", 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" }))), headerAgent && (_jsx("span", { className: "text-neutral-grey-50 shrink-0 text-xs", children: "-" })), _jsx("span", { className: "text-neutral-grey-100 min-w-0 flex-1 truncate text-xs font-medium", children: contextLabel })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", onClick: (event) => event.stopPropagation(), children: [!showingList && agents.length > 0 && (_jsx(SimpleIconButton, { onClick: openAgentsList, icon: _jsx(List, { className: "size-4", strokeWidth: 1.5 }), label: "Switch Agent", className: "text-neutral-grey-50 hover:text-neutral-grey-100", "data-testid": "switch-agent-button" })), !showingSelector && (_jsx(SimpleIconButton, { onClick: showNewAgentProfileSelector, icon: _jsx(Plus, { className: "size-4", strokeWidth: 1.5 }), label: agents.length === 0 ? "Create Agent" : "New Agent", className: "text-neutral-grey-50 hover:text-neutral-grey-100", "data-testid": "add-agent-button" })), _jsx("div", { className: "flex items-center pl-0.5", children: closeButton ?? defaultCloseButton })] })] }), _jsx("div", { className: "relative flex-1", children: (() => {
                     const shouldKeepMounted = (agent) => {
                         const parsedStatus = parseAgentStatus(agent.status);
                         return (agent.id === activeAgentId ||
@@ -1111,11 +901,14 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                                 return (_jsx("div", { className: cn("absolute inset-0", !isSelected && "hidden"), style: isSelected
                                         ? { viewTransitionName: "agents-tab-pane" }
                                         : undefined, 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));
-                            }), 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 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 }) }) })) : null] }));
+                            }), showingList ? (
+                            // Agents list — pick an agent to switch, or create a new one.
+                            _jsx("div", { className: "absolute inset-0", children: _jsx(AgentsView, { compact: true, hideNewAgentButton: true, selectedAgentId: returnAgentIdRef.current &&
+                                        agents.some((a) => a.id === returnAgentIdRef.current)
+                                        ? returnAgentIdRef.current
+                                        : undefined, onSelectAgent: (agent) => openAgentFromHistory(agent), onRequestCreateAgent: showNewAgentProfileSelector }) })) : 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] }));
                 })() })] }));
 });
 //# sourceMappingURL=Agents.js.map