@parhelia/core 0.1.10745

package/dist/editor/ai/Agents.js

@@ -0,0 +1,813 @@
+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 { Plus, X, MoreVertical } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { getAgentStatusConfig } from "./AgentStatusBadge";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
+import { getActiveAgents, getClosedAgents, closeAgent as closeAgentService, } from "../services/agentService";
+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 { AgentProfilesOverview } from "./AgentProfilesOverview";
+import { AgentsView } from "../../agents-view/AgentsView";
+import { SecretAgentIcon } from "../ui/Icons";
+// function convertAgentMessagesToTerminalMessages(
+//   agentMessages: AgentChatMessage[],
+// ): Message[] {
+//   return agentMessages.map((msg) => ({
+//     id: msg.id,
+//     content: msg.content,
+//     name: msg.name,
+//     role: msg.role,
+//     tool_calls: msg.functionName
+//       ? [
+//           {
+//             id: msg.toolCallId || msg.id,
+//             displayName: msg.functionName,
+//             function: {
+//               name: msg.functionName,
+//               arguments: msg.functionArguments || "",
+//             },
+//           },
+//         ]
+//       : [],
+//     tool_call_id: msg.toolCallId,
+//   }));
+// }
+const ACTIVE_AGENT_STORAGE_KEY = "editor.activeAgentId";
+export const Agents = React.memo(function Agents({ closeButton, }) {
+    const [agents, setAgents] = useState([]);
+    const [activeAgentId, setActiveAgentId] = useState(null);
+    const activeAgentIdRef = useRef(null);
+    const singleAgentModeRef = useRef(false);
+    const [profileTabDropdownOpen, setProfileTabDropdownOpen] = useState(null);
+    const [menuPopoverOpen, setMenuPopoverOpen] = useState(false);
+    const [addPopoverOpen, setAddPopoverOpen] = 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 editContext = useEditContext();
+    // Memoize the current item ID to avoid reloading profiles when descriptor object reference changes
+    const currentItemId = useMemo(() => editContext?.currentItemDescriptor?.id, [editContext?.currentItemDescriptor?.id]);
+    // 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]);
+    // Detect single-agent mode from query parameter once on mount
+    useEffect(() => {
+        try {
+            const params = new URLSearchParams(window.location.search);
+            const value = params.get("singleAgent");
+            singleAgentModeRef.current =
+                value === "true" || params.has("singleAgent");
+        }
+        catch { }
+    }, []);
+    // Helper function to get the most recently updated agent
+    const getMostRecentAgent = (agentList) => {
+        if (agentList.length === 0)
+            return null;
+        return agentList.reduce((mostRecent, current) => {
+            return new Date(current.updatedDate) > new Date(mostRecent.updatedDate)
+                ? current
+                : 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
+    const setActiveAgentIdWithStorage = (agentId) => {
+        setActiveAgentId(agentId);
+        activeAgentIdRef.current = agentId;
+        if (agentId) {
+            localStorage.setItem(ACTIVE_AGENT_STORAGE_KEY, agentId);
+        }
+        else {
+            localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+        }
+    };
+    // Load agents from backend on mount
+    useEffect(() => {
+        loadAgentsFromBackend();
+    }, []);
+    // When the add popover opens or when no agents are present (empty state),
+    // keep selection state consistent without triggering extra fetches.
+    useEffect(() => {
+        if (!addPopoverOpen && agents.length > 0)
+            return;
+        // When showing empty state (no agents), force placeholder selection
+        if (agents.length === 0) {
+            setSelectedProfileId("");
+        }
+        else {
+            // Otherwise preserve placeholder if not set yet
+            setSelectedProfileId((prev) => prev || "");
+        }
+    }, [addPopoverOpen, agents.length]);
+    // Ensure profiles are loaded once for terminals (centralized load)
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                setLoadingProfiles(true);
+                const profiles = await loadAiProfiles(editContext?.currentItemDescriptor);
+                if (cancelled)
+                    return;
+                setAvailableProfiles(profiles || []);
+            }
+            catch (e) {
+                console.error("Failed to load AI profiles", e);
+            }
+            finally {
+                if (!cancelled)
+                    setLoadingProfiles(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [currentItemId]);
+    // Listen for external requests to add a new agent (e.g., AI command)
+    useEffect(() => {
+        const handleAddNewAgent = (ev) => {
+            let initialMetadata = undefined;
+            try {
+                const ce = ev;
+                initialMetadata = (ce.detail && ce.detail.metadata);
+            }
+            catch { }
+            addAgent(initialMetadata);
+            // Ensure the prompt focuses after the agent tab mounts
+            setTimeout(() => {
+                try {
+                    window.dispatchEvent(new CustomEvent("editor:focusAgentPrompt"));
+                }
+                catch { }
+            }, 60);
+        };
+        window.addEventListener("editor:addNewAgent", handleAddNewAgent);
+        return () => window.removeEventListener("editor:addNewAgent", handleAddNewAgent);
+    }, []);
+    // Listen for external requests to select an existing open agent without switching views
+    useEffect(() => {
+        const handleSelectAgent = (ev) => {
+            try {
+                const ce = ev;
+                const agentId = (ce.detail && ce.detail.agentId);
+                if (!agentId)
+                    return;
+                const existingAgent = agents.find((a) => a.id === agentId);
+                if (existingAgent) {
+                    setActiveAgentIdWithStorage(agentId);
+                }
+            }
+            catch { }
+        };
+        window.addEventListener("editor:selectAgent", handleSelectAgent);
+        return () => window.removeEventListener("editor:selectAgent", handleSelectAgent);
+    }, [agents]);
+    // Listen for external requests to open an existing agent
+    useEffect(() => {
+        const handleOpenAgent = (ev) => {
+            try {
+                const ce = ev;
+                const agentId = (ce.detail && ce.detail.agentId);
+                if (!agentId)
+                    return;
+                // Check if agent is already open
+                const existingAgent = agents.find((a) => a.id === agentId);
+                if (existingAgent) {
+                    // Just switch to it
+                    setActiveAgentIdWithStorage(agentId);
+                    return;
+                }
+                // Load the agent from history and add to open agents
+                openAgentFromHistory({ id: agentId });
+            }
+            catch (error) {
+                console.error("Error opening agent:", error);
+            }
+        };
+        window.addEventListener("editor:openAgent", handleOpenAgent);
+        return () => window.removeEventListener("editor:openAgent", handleOpenAgent);
+    }, [agents]);
+    // Subscribe to websocket messages for agent events
+    useEffect(() => {
+        if (!editContext?.addSocketMessageListener)
+            return;
+        const unsubscribe = editContext.addSocketMessageListener((message) => {
+            // In single-agent mode, ignore events that would add or remove agents,
+            // but still allow updates (e.g., name/status) for the current tab.
+            if (singleAgentModeRef.current) {
+                if (message.type === "agent:run:start" ||
+                    message.type === "agent:run:closed") {
+                    return;
+                }
+            }
+            if (message.type === "agent:run:start") {
+                const { agentId, agentName, autoSelect, profileId, profileName } = message.payload;
+                if (!agentId || !agentName) {
+                    console.warn("Invalid agent:run:start message payload:", message.payload);
+                    return;
+                }
+                // Show the agent panel when an agent starts
+                editContext.setShowAgentsPanel?.(true);
+                setAgents((prevAgents) => {
+                    // Check if agent already exists
+                    const existingAgentIndex = prevAgents.findIndex((agent) => agent.id === agentId);
+                    if (existingAgentIndex !== -1) {
+                        // Update existing agent name and profile info
+                        const updatedAgents = [...prevAgents];
+                        const existingAgent = updatedAgents[existingAgentIndex];
+                        updatedAgents[existingAgentIndex] = {
+                            ...existingAgent,
+                            name: agentName,
+                            status: "running",
+                            updatedDate: new Date().toISOString(),
+                            ...(profileId && { profileId }),
+                            ...(profileName && { profileName }),
+                        };
+                        return updatedAgents;
+                    }
+                    else {
+                        // Add new agent to the array
+                        const newAgent = {
+                            id: agentId,
+                            name: agentName,
+                            status: "running",
+                            userId: "", // Will be populated from backend if needed
+                            updatedDate: new Date().toISOString(),
+                            ...(profileId && { profileId }),
+                            ...(profileName && { profileName }),
+                        };
+                        return [...prevAgents, newAgent];
+                    }
+                });
+                // Auto-switch to the spawned agent if requested
+                if (autoSelect === true) {
+                    setActiveAgentIdWithStorage(agentId);
+                }
+            }
+            else if (message.type === "agent:info:updated") {
+                const { agentId, agentName, agentDescription } = message.payload || {};
+                if (!agentId)
+                    return;
+                // Update the agent name and/or description in the tabs list
+                setAgents((prevAgents) => {
+                    const existingIndex = prevAgents.findIndex((a) => a.id === agentId);
+                    if (existingIndex === -1)
+                        return prevAgents;
+                    const updatedAgents = [...prevAgents];
+                    const existingAgent = updatedAgents[existingIndex];
+                    updatedAgents[existingIndex] = {
+                        ...existingAgent,
+                        ...(agentName !== undefined && { name: agentName }),
+                        ...(agentDescription !== undefined && {
+                            description: agentDescription,
+                        }),
+                        updatedDate: new Date().toISOString(),
+                    };
+                    return updatedAgents;
+                });
+            }
+            else if (message.type === "agent:run:status") {
+                // Unified status updates (state only)
+                const { agentId, data } = message.payload || {};
+                if (!agentId)
+                    return;
+                const rawState = data?.state;
+                const status = (() => {
+                    if (!rawState)
+                        return undefined;
+                    switch (rawState) {
+                        case "Running":
+                            return "running";
+                        case "WaitingForApproval":
+                            return "waitingForApproval";
+                        case "Completed":
+                            return "completed";
+                        case "Closed":
+                            return "closed";
+                        case "Error":
+                            return "error";
+                        case "Idle":
+                            return "idle";
+                        case "CostLimitReached":
+                            return "costLimitReached";
+                        default:
+                            // allow already-lowercased strings
+                            return rawState;
+                    }
+                })();
+                if (!status)
+                    return;
+                setAgents((prevAgents) => {
+                    const existingIndex = prevAgents.findIndex((a) => a.id === agentId);
+                    if (existingIndex !== -1) {
+                        const updatedAgents = [...prevAgents];
+                        const existingAgent = updatedAgents[existingIndex];
+                        updatedAgents[existingIndex] = {
+                            ...existingAgent,
+                            status,
+                            updatedDate: new Date().toISOString(),
+                        };
+                        return updatedAgents;
+                    }
+                    return prevAgents;
+                });
+            }
+            else if (message.type === "agent:run:closed") {
+                // Remove agent from tabs when closed in another browser instance
+                const { agentId } = message.payload || {};
+                if (!agentId)
+                    return;
+                setAgents((prevAgents) => {
+                    const filtered = prevAgents.filter((a) => a.id !== agentId);
+                    // Find the closed agent to add to history
+                    const closedAgent = prevAgents.find((a) => a.id === agentId);
+                    if (closedAgent) {
+                        // Add to inactive agents list (history) if it doesn't already exist
+                        setInactiveAgents((prevInactive) => {
+                            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 agent, switch to the most recent remaining one
+                    if (activeAgentIdRef.current === agentId) {
+                        if (filtered.length > 0) {
+                            const mostRecentAgent = getMostRecentAgent(filtered);
+                            setActiveAgentIdWithStorage(mostRecentAgent?.id || null);
+                        }
+                        else {
+                            setActiveAgentIdWithStorage(null);
+                        }
+                    }
+                    // If no agents remain, reset profile selection to placeholder
+                    if (filtered.length === 0) {
+                        setSelectedProfileId("");
+                    }
+                    return filtered;
+                });
+            }
+        });
+        return unsubscribe;
+    }, [editContext?.addSocketMessageListener]);
+    const loadAgentsFromBackend = async () => {
+        try {
+            // In single-agent mode, skip loading any pre-existing/open agents or history
+            if (singleAgentModeRef.current) {
+                setAgents([]);
+                setInactiveAgents([]);
+                setActiveAgentIdWithStorage(null);
+                setLoadingAgents(false);
+                return;
+            }
+            setLoadingAgents(true);
+            // Load active agents (exclude shared agents for the agent panel)
+            const activeAgentsResponse = await getActiveAgents({
+                limit: 1000,
+                includeShared: false, // Agent panel only shows user's own agents
+                includeOwned: true,
+                excludeClosed: true, // Exclude closed and cancelled agents
+            });
+            const activeAgentsResult = activeAgentsResponse.agents;
+            setAgents(activeAgentsResult);
+            // Try to restore the previously active agent from localStorage if one exists
+            let selectedAgentId = null;
+            if (activeAgentsResult.length > 0) {
+                const storedAgentId = localStorage.getItem(ACTIVE_AGENT_STORAGE_KEY);
+                const storedAgent = activeAgentsResult.find((agent) => agent.id === storedAgentId);
+                if (storedAgent) {
+                    selectedAgentId = storedAgent.id;
+                }
+                else {
+                    // If no stored agent or stored agent not found, select the most recent agent
+                    const mostRecentAgent = getMostRecentAgent(activeAgentsResult);
+                    selectedAgentId = mostRecentAgent?.id || null;
+                }
+            }
+            setActiveAgentIdWithStorage(selectedAgentId);
+            // If there are no active agents after load, ensure placeholder is selected
+            if (activeAgentsResult.length === 0) {
+                setSelectedProfileId("");
+            }
+            // Load closed agents for history
+            const closedAgentsResult = await getClosedAgents();
+            // Deduplicate agents by ID in case the backend returns duplicates
+            const uniqueClosedAgents = closedAgentsResult.filter((agent, index, self) => index === self.findIndex((a) => a.id === agent.id));
+            setInactiveAgents(uniqueClosedAgents);
+        }
+        catch (error) {
+            console.error("Failed to load agents:", error);
+        }
+        finally {
+            setLoadingAgents(false);
+        }
+    };
+    // const loadAgentMessages = async (
+    //   agentId: string,
+    // ): Promise<AgentChat | null> => {
+    //   try {
+    //     const result = await getAgent(agentId);
+    //     if (result.type === "success" && result.data) {
+    //       return result.data;
+    //     }
+    //   } catch (error) {
+    //     console.error(`Failed to load messages for agent ${agentId}:`, error);
+    //   }
+    //   return null;
+    // };
+    const addAgent = (metadata) => {
+        const newAgent = {
+            status: "new",
+            id: crypto.randomUUID(),
+            name: `New Agent`,
+            updatedDate: new Date().toISOString(),
+            userId: "",
+            profileId: metadata?.additionalData?.profileId,
+            profileName: metadata?.additionalData?.profileName || metadata?.profile,
+        };
+        setAgents((prev) => [...prev, newAgent]);
+        // User-initiated creation should activate the new agent tab
+        setActiveAgentIdWithStorage(newAgent.id);
+        if (metadata) {
+            setInitialMetadataMap((prev) => ({ ...prev, [newAgent.id]: metadata }));
+        }
+        // Ensure the prompt focuses after the agent tab mounts
+        setTimeout(() => {
+            try {
+                window.dispatchEvent(new CustomEvent("editor:focusAgentPrompt"));
+            }
+            catch { }
+        }, 60);
+    };
+    const createAgentWithSelectedProfile = (profileId) => {
+        try {
+            const selected = availableProfiles.find((p) => p.id === profileId);
+            const metadata = selected
+                ? {
+                    profile: selected.name,
+                    additionalData: {
+                        profileId: selected.id,
+                        profileName: selected.name,
+                    },
+                }
+                : undefined;
+            addAgent(metadata);
+        }
+        finally {
+            setAddPopoverOpen(false);
+        }
+    };
+    const closeAgent = async (agentId) => {
+        try {
+            // Permanently close the agent in the backend
+            await closeAgentService(agentId);
+        }
+        catch (error) {
+            console.error("Failed to close agent:", error);
+            // Continue with UI cleanup even if backend call fails
+        }
+        setAgents((prev) => {
+            const filtered = prev.filter((a) => a.id !== agentId);
+            // Find the closed agent to add to history
+            const closedAgent = prev.find((a) => a.id === agentId);
+            if (closedAgent) {
+                // Add the closed agent to the inactive agents list (history) if it doesn't already exist
+                setInactiveAgents((prevInactive) => {
+                    // Check if this agent is already in the history
+                    const alreadyExists = prevInactive.some((a) => a.id === agentId);
+                    if (alreadyExists) {
+                        return prevInactive;
+                    }
+                    return [
+                        {
+                            ...closedAgent,
+                            status: "closed",
+                            updatedDate: new Date().toISOString(),
+                        },
+                        ...prevInactive,
+                    ];
+                });
+            }
+            // If we're closing the active terminal, switch to the most recent remaining one or clear storage
+            if (activeAgentIdRef.current === agentId) {
+                if (filtered.length > 0) {
+                    const mostRecentAgent = getMostRecentAgent(filtered);
+                    setActiveAgentIdWithStorage(mostRecentAgent?.id || null);
+                }
+                else {
+                    setActiveAgentIdWithStorage(null);
+                }
+            }
+            // If no agents remain, reset profile selection to placeholder
+            if (filtered.length === 0) {
+                setSelectedProfileId("");
+            }
+            return filtered;
+        });
+    };
+    const handleCloseAgent = (agentId, e) => {
+        e.stopPropagation();
+        // Find the agent to check its status
+        const agent = agents.find((a) => a.id === agentId);
+        if (!agent) {
+            // Agent not found, close anyway
+            closeAgent(agentId);
+            return;
+        }
+        // Check if agent is in an active state (running or waiting for approval)
+        // Handle both string and numeric status values
+        // Enum: New=0, Running=1, WaitingForApproval=2, Completed=3, Error=4, Closed=5
+        const isActivelyRunning = agent.status === "running" ||
+            agent.status === "waitingForApproval" ||
+            agent.status === 1 ||
+            agent.status === 2;
+        // If agent is actively running, show confirmation dialog
+        if (isActivelyRunning) {
+            if (editContext?.confirm) {
+                editContext.confirm({
+                    header: "Abort Agent",
+                    message: "This agent is currently running. Are you sure you want to abort it?",
+                    acceptLabel: "Abort Agent",
+                    accept: () => {
+                        closeAgent(agentId);
+                    },
+                    showCancel: true,
+                });
+            }
+        }
+        else {
+            // Agent is not actively running, close immediately
+            closeAgent(agentId);
+        }
+    };
+    const handleCloseProfileAgents = async (profileAgents, profileName, e) => {
+        e.stopPropagation();
+        const agentCount = profileAgents.length;
+        const hasActiveAgents = profileAgents.some((agent) => agent.status === "running" ||
+            agent.status === "waitingForApproval" ||
+            agent.status === 1 ||
+            agent.status === 2);
+        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) => a.status === "running" || a.status === 1).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 null
+                        if (activeAgentIdRef.current &&
+                            agentIds.has(activeAgentIdRef.current)) {
+                            if (filtered.length > 0) {
+                                const mostRecentAgent = getMostRecentAgent(filtered);
+                                setActiveAgentIdWithStorage(mostRecentAgent?.id || null);
+                            }
+                            else {
+                                setActiveAgentIdWithStorage(null);
+                            }
+                        }
+                        // 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,
+            },
+        ];
+    };
+    const openAgentFromHistory = async (agent) => {
+        // Check if this agent is already open as a terminal
+        const existingAgent = agents.find((a) => a.id === agent.id);
+        if (existingAgent) {
+            // Switch to existing agent
+            setActiveAgentIdWithStorage(existingAgent.id);
+            return;
+        }
+        // If agent data is incomplete (e.g., only has ID), fetch full details from backend
+        let fullAgent = agent;
+        if (!agent.name || !agent.userId) {
+            try {
+                const { getAgent } = await import("../services/agentService");
+                const agentDetails = await getAgent(agent.id);
+                fullAgent = {
+                    id: agentDetails.id,
+                    name: agentDetails.name,
+                    description: agentDetails.description,
+                    userId: agentDetails.userId,
+                    updatedDate: agentDetails.updatedDate,
+                    status: agentDetails.status,
+                    isShared: agentDetails.isShared,
+                    ownerName: agentDetails.ownerName,
+                    profileId: agentDetails.profileId,
+                    profileName: agentDetails.profileName,
+                    profileSvgIcon: agentDetails.profileSvgIcon,
+                    messageCount: agentDetails.messageCount,
+                    totalCost: agentDetails.totalCost,
+                    totalTokensUsed: agentDetails.totalTokensUsed,
+                };
+            }
+            catch (error) {
+                console.error("Failed to fetch agent details:", error);
+                // Fall back to using whatever data we have
+            }
+        }
+        // Add the closed agent to the active agents list
+        const reopenedAgent = {
+            ...fullAgent,
+            // Keep the original status to allow AgentTerminal to load the full agent data
+        };
+        setAgents((prev) => [...prev, reopenedAgent]);
+        setActiveAgentIdWithStorage(reopenedAgent.id);
+    };
+    if (loadingAgents) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx("div", { className: "text-xs text-gray-500", children: "Loading agents..." }) }));
+    }
+    // Empty state when no agents are open
+    if (!loadingAgents && agents.length === 0) {
+        return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-2", children: [_jsx("div", { className: "text-xs font-medium text-gray-600", children: "No Active Agents" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SimpleIconButton, { onClick: () => setActiveAgentIdWithStorage(null), icon: _jsx(List, { className: "size-4", strokeWidth: 1 }), label: "Agent Overview", className: "text-gray-600 hover:text-gray-800" }), closeButton && (_jsx("div", { className: "flex items-center", children: closeButton }))] })] }), _jsx("div", { className: "flex flex-1 items-center justify-center p-4", children: _jsx("div", { className: "w-full max-w-4xl", children: loadingProfiles ? (_jsx("div", { className: "text-center text-xs text-gray-500", children: "Loading profiles..." })) : availableProfiles.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Select an AI Agent Profile" }), _jsx("p", { className: "text-xs text-gray-500", children: "Choose a profile to start a new agent" })] }), _jsx(AgentProfilesOverview, { profiles: availableProfiles, onSelectProfile: createAgentWithSelectedProfile })] })) : (_jsx("div", { className: "text-center text-xs text-gray-500", children: "No profiles available" })) }) })] }));
+    }
+    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 flex-1 min-w-0 overflow-hidden", children: 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,
+                            });
+                            // 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);
+                                    }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: cn("flex min-w-0 cursor-pointer items-center gap-2 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: [_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: displayIcon,
+                                                            } })) : (_jsx(SecretAgentIcon, { size: 18, strokeWidth: 1, className: "text-gray-500" })) }), _jsx("span", { className: "truncate font-medium min-w-0 flex-1", 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, { 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: statusConfig.label })] }), 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: "opacity-60 hover:opacity-100 flex-shrink-0", 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);
+                                                        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-blue-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 }), 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: _jsx(List, { className: "size-4", strokeWidth: 1 }), label: "Agent Overview", 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: [_jsx(List, { className: "size-4 flex-shrink-0 text-gray-600", strokeWidth: 1 }), _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: setMenuPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(SimpleIconButton, { onClick: () => { }, icon: _jsx(MoreVertical, { className: "size-4", strokeWidth: 1 }), label: "Menu", className: "text-gray-600 hover:text-gray-800" }) }), _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: _jsxs(Popover, { open: addPopoverOpen, onOpenChange: setAddPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(SimpleIconButton, { onClick: () => { }, icon: _jsx(Plus, { className: "size-4", strokeWidth: 1 }), label: agents.length === 0 ? "Create Agent" : "Add Agent", className: "text-gray-600 hover:text-gray-800" }) }), _jsxs(PopoverContent, { className: "w-auto max-w-4xl p-4", align: "end", "data-testid": "agents-add-popover", children: [_jsxs("div", { className: "mb-3 text-center", children: [_jsx("div", { className: "text-sm font-semibold text-gray-900", children: "Select an AI Agent Profile" }), _jsx("div", { className: "text-xs text-gray-500", children: "Choose a profile to start a new agent" })] }), loadingProfiles ? (_jsx("div", { className: "text-xs text-gray-500", children: "Loading profiles..." })) : availableProfiles.length > 0 ? (_jsx(AgentProfilesOverview, { profiles: availableProfiles, onSelectProfile: createAgentWithSelectedProfile, className: "max-h-96 overflow-y-auto" })) : (_jsx("div", { className: "text-xs text-gray-500", children: "No profiles available" }))] })] }) }), 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, {}) })) : (
+                // Show agent terminals
+                agents.map((agent) => (_jsx("div", { className: cn("absolute inset-0", activeAgentId === agent.id ? "block" : "hidden"), children: _jsx(AgentTerminal, { agentStub: agent, initialMetadata: initialMetadataMap[agent.id], profiles: availableProfiles, isActive: activeAgentId === agent.id }) }, agent.id)))) })] }));
+});
+//# sourceMappingURL=Agents.js.map