@alpaca-editor/core 1.0.4192 → 1.0.4193

package/src/editor/ai/Agents.tsx

@@ -34,10 +34,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../../components/ui/dropdown-menu";
-import { ChevronDown, List } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { AgentProfilesOverview } from "./AgentProfilesOverview";
-import { AgentsView } from "../../agents-view/AgentsView";
-import { SecretAgentIcon } from "../ui/Icons";
 
 // function convertAgentMessagesToTerminalMessages(
 //   agentMessages: AgentChatMessage[],
@@ -74,13 +72,12 @@ export const Agents = React.memo(function Agents({
   const [activeAgentId, setActiveAgentId] = useState<string | null>(null);
   const activeAgentIdRef = useRef<string | null>(null);
   const singleAgentModeRef = useRef<boolean>(false);
-  const [profileTabDropdownOpen, setProfileTabDropdownOpen] = useState<
-    string | null
-  >(null);
+  const [historyPopoverOpen, setHistoryPopoverOpen] = useState(false);
   const [menuPopoverOpen, setMenuPopoverOpen] = useState(false);
   const [addPopoverOpen, setAddPopoverOpen] = useState(false);
   const [loadingAgents, setLoadingAgents] = useState(false);
   const [inactiveAgents, setInactiveAgents] = useState<Agent[]>([]);
+  const [historyFilter, setHistoryFilter] = useState("");
   const [initialMetadataMap, setInitialMetadataMap] = useState<
     Record<string, AgentMetadata | undefined>
   >({});
@@ -96,44 +93,6 @@ export const Agents = React.memo(function Agents({
     [editContext?.currentItemDescriptor?.id],
   );
 
-  // Group agents by profile for profile-based tabs
-  const agentsGroupedByProfile = useMemo(() => {
-    const profileMap = new Map<
-      string,
-      {
-        profileId: string | null;
-        profileName: string;
-        profileSvgIcon: string | undefined;
-        agents: Agent[];
-      }
-    >();
-
-    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 {
@@ -144,6 +103,18 @@ export const Agents = React.memo(function Agents({
     } catch {}
   }, []);
 
+  // Helper function to filter agents by name
+  const getFilteredInactiveAgents = (): Agent[] => {
+    if (!historyFilter.trim()) {
+      return inactiveAgents;
+    }
+
+    const filterLower = historyFilter.toLowerCase();
+    return inactiveAgents.filter((agent) =>
+      agent.name.toLowerCase().includes(filterLower),
+    );
+  };
+
   // Helper function to get the most recently updated agent
   const getMostRecentAgent = (agentList: Agent[]): Agent | null => {
     if (agentList.length === 0) return null;
@@ -154,34 +125,6 @@ export const Agents = React.memo(function Agents({
     });
   };
 
-  // Helper function to get highest priority status for a group of agents
-  const getHighestPriorityStatus = (agentList: Agent[]): Agent["status"] => {
-    const statusPriority: Record<string, number> = {
-      waitingForApproval: 5,
-      error: 4,
-      running: 3,
-      idle: 2,
-      completed: 1,
-      closed: 0,
-      new: 0,
-    };
-
-    let highestPriority = -1;
-    let highestStatus: Agent["status"] = "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: string | null) => {
     setActiveAgentId(agentId);
@@ -346,8 +289,7 @@ export const Agents = React.memo(function Agents({
           }
         }
         if (message.type === "agent:run:start") {
-          const { agentId, agentName, autoSelect, profileId, profileName } =
-            message.payload;
+          const { agentId, agentName, autoSelect } = message.payload;
 
           if (!agentId || !agentName) {
             console.warn(
@@ -367,7 +309,7 @@ export const Agents = React.memo(function Agents({
             );
 
             if (existingAgentIndex !== -1) {
-              // Update existing agent name and profile info
+              // Update existing agent name
               const updatedAgents = [...prevAgents];
               const existingAgent = updatedAgents[existingAgentIndex]!;
               updatedAgents[existingAgentIndex] = {
@@ -375,8 +317,6 @@ export const Agents = React.memo(function Agents({
                 name: agentName,
                 status: "running" as const,
                 updatedDate: new Date().toISOString(),
-                ...(profileId && { profileId }),
-                ...(profileName && { profileName }),
               };
               return updatedAgents;
             } else {
@@ -387,8 +327,6 @@ export const Agents = React.memo(function Agents({
                 status: "running" as const,
                 userId: "", // Will be populated from backend if needed
                 updatedDate: new Date().toISOString(),
-                ...(profileId && { profileId }),
-                ...(profileName && { profileName }),
               };
 
               return [...prevAgents, newAgent];
@@ -539,11 +477,13 @@ export const Agents = React.memo(function Agents({
 
       setAgents(activeAgentsResult);
 
-      // Try to restore the previously active agent from localStorage if one exists
+      // Determine which agent to select as active
       let selectedAgentId: string | null = null;
 
       if (activeAgentsResult.length > 0) {
+        // Try to restore the previously active agent from localStorage
         const storedAgentId = localStorage.getItem(ACTIVE_AGENT_STORAGE_KEY);
+
         const storedAgent = activeAgentsResult.find(
           (agent) => agent.id === storedAgentId,
         );
@@ -551,7 +491,7 @@ export const Agents = React.memo(function Agents({
         if (storedAgent) {
           selectedAgentId = storedAgent.id;
         } else {
-          // If no stored agent or stored agent not found, select the most recent agent
+          // Fall back to the most recently updated agent
           const mostRecentAgent = getMostRecentAgent(activeAgentsResult);
           selectedAgentId = mostRecentAgent?.id || null;
         }
@@ -602,8 +542,6 @@ export const Agents = React.memo(function Agents({
       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
@@ -730,85 +668,6 @@ export const Agents = React.memo(function Agents({
     }
   };
 
-  const handleCloseProfileAgents = async (
-    profileAgents: Agent[],
-    profileName: string,
-    e: React.MouseEvent,
-  ) => {
-    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" as const,
-              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;
 
@@ -871,45 +730,37 @@ export const Agents = React.memo(function Agents({
     if (existingAgent) {
       // Switch to existing agent
       setActiveAgentIdWithStorage(existingAgent.id);
+      setHistoryPopoverOpen(false);
       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: Agent = {
-      ...fullAgent,
+      ...agent,
       // Keep the original status to allow AgentTerminal to load the full agent data
     };
 
     setAgents((prev) => [...prev, reopenedAgent]);
     setActiveAgentIdWithStorage(reopenedAgent.id);
+    setHistoryPopoverOpen(false);
+  };
+
+  const deleteAgentFromHistory = async (
+    agentId: string,
+    event: React.MouseEvent,
+  ) => {
+    event.stopPropagation(); // Prevent opening the agent when clicking delete
+
+    try {
+      // Permanently delete the agent from the backend
+      await deleteAgent(agentId);
+
+      // Remove from inactive agents list
+      setInactiveAgents((prev) => prev.filter((agent) => agent.id !== agentId));
+    } catch (error) {
+      console.error("Failed to delete agent:", error);
+      // You might want to show a user-facing error message here
+    }
   };
 
   if (loadingAgents) {
@@ -923,55 +774,32 @@ export const Agents = React.memo(function Agents({
   // Empty state when no agents are open
   if (!loadingAgents && agents.length === 0) {
     return (
-      <div className="flex h-full flex-col">
-        {/* Header with Overview Button */}
-        <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-2">
-          <div className="text-xs font-medium text-gray-600">
-            No Active Agents
-          </div>
-          <div className="flex items-center gap-2">
-            {/* Overview Button */}
-            <SimpleIconButton
-              onClick={() => setActiveAgentIdWithStorage(null)}
-              icon={<List className="size-4" strokeWidth={1} />}
-              label="Agent Overview"
-              className="text-gray-600 hover:text-gray-800"
-            />
-            {/* Main Close Button */}
-            {closeButton && (
-              <div className="flex items-center">{closeButton}</div>
-            )}
-          </div>
-        </div>
-
-        {/* Content Area */}
-        <div className="flex flex-1 items-center justify-center p-4">
-          <div className="w-full max-w-4xl">
-            {loadingProfiles ? (
-              <div className="text-center text-xs text-gray-500">
-                Loading profiles...
-              </div>
-            ) : availableProfiles.length > 0 ? (
-              <div className="flex flex-col gap-4">
-                <div className="text-center">
-                  <h2 className="text-lg font-semibold text-gray-900">
-                    Select an AI Agent Profile
-                  </h2>
-                  <p className="text-xs text-gray-500">
-                    Choose a profile to start a new agent
-                  </p>
-                </div>
-                <AgentProfilesOverview
-                  profiles={availableProfiles}
-                  onSelectProfile={createAgentWithSelectedProfile}
-                />
-              </div>
-            ) : (
-              <div className="text-center text-xs text-gray-500">
-                No profiles available
+      <div className="flex items-center justify-center p-4">
+        <div className="w-full max-w-4xl">
+          {loadingProfiles ? (
+            <div className="text-center text-xs text-gray-500">
+              Loading profiles...
+            </div>
+          ) : availableProfiles.length > 0 ? (
+            <div className="flex flex-col gap-4">
+              <div className="text-center">
+                <h2 className="text-lg font-semibold text-gray-900">
+                  Select an AI Agent Profile
+                </h2>
+                <p className="text-xs text-gray-500">
+                  Choose a profile to start a new agent
+                </p>
               </div>
-            )}
-          </div>
+              <AgentProfilesOverview
+                profiles={availableProfiles}
+                onSelectProfile={createAgentWithSelectedProfile}
+              />
+            </div>
+          ) : (
+            <div className="text-center text-xs text-gray-500">
+              No profiles available
+            </div>
+          )}
         </div>
       </div>
     );
@@ -982,213 +810,179 @@ export const Agents = React.memo(function Agents({
       {/* Tab Header */}
       <div className="flex items-center border-b border-gray-200 bg-gray-50">
         <div className="scrollbar-hide flex flex-1 overflow-x-auto">
-          {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,
-            } as Agent);
-
-            // 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;
-
-            return (
-              <Popover
-                key={profileKey}
-                open={profileTabDropdownOpen === profileKey}
-                onOpenChange={(open) => {
-                  setProfileTabDropdownOpen(open ? profileKey : null);
-                }}
-              >
-                <PopoverTrigger asChild>
-                  <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
-                    }}
-                  >
-                    {/* Profile/Agent Icon */}
-                    <div className="flex-shrink-0">
-                      {displayIcon ? (
-                        <div
-                          className="flex h-[18px] w-[18px] items-center justify-center text-gray-500 [&>svg]:h-full [&>svg]:w-full"
-                          dangerouslySetInnerHTML={{
-                            __html: displayIcon,
-                          }}
-                        />
-                      ) : (
-                        <SecretAgentIcon
-                          size={18}
-                          strokeWidth={1}
-                          className="text-gray-500"
-                        />
-                      )}
-                    </div>
-
-                    {/* Profile/Agent Name */}
-                    <span className="truncate font-medium">{displayName}</span>
-
-                    {/* Agent Count Badge */}
-                    {agentCount > 1 && (
-                      <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">
-                        {agentCount}
-                      </div>
-                    )}
-
-                    {/* Status Indicator */}
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <div
-                          className={cn(
-                            "h-1.5 w-1.5 flex-shrink-0 rounded-full",
-                            statusConfig.color,
-                            statusConfig.shouldPulse && "animate-pulse",
-                          )}
-                          title={statusConfig.label}
-                        />
-                      </TooltipTrigger>
-                      <TooltipContent>{statusConfig.label}</TooltipContent>
-                    </Tooltip>
-
-                    {/* Chevron for multiple agents */}
-                    {agentCount > 1 && (
-                      <ChevronDown
-                        className="size-3 flex-shrink-0 text-gray-500"
-                        strokeWidth={1}
-                      />
-                    )}
-
-                    {/* Close button - always shown */}
-                    <SimpleIconButton
-                      onClick={(e) =>
-                        singleAgent
-                          ? handleCloseAgent(singleAgent.id, e)
-                          : handleCloseProfileAgents(
-                              profileGroup.agents,
-                              profileGroup.profileName,
-                              e,
-                            )
-                      }
-                      icon={<X className="size-3" strokeWidth={1} />}
-                      label={
-                        agentCount > 1
-                          ? `Close all ${agentCount} agents`
-                          : "Close"
-                      }
-                      className="opacity-60 hover:opacity-100"
-                    />
-                  </div>
-                </PopoverTrigger>
-
-                {/* Dropdown for multiple agents */}
-                {agentCount > 1 && (
-                  <PopoverContent className="w-80 p-0" align="start">
-                    <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500">
-                      {profileGroup.profileName} Agents
-                    </div>
-                    <div className="max-h-64 overflow-y-auto">
-                      {profileGroup.agents.map((agent) => {
-                        const agentStatusConfig = getAgentStatusConfig(agent);
-                        return (
-                          <div
-                            key={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);
-                            }}
-                          >
-                            <div className="flex items-center gap-2">
-                              {/* Status Indicator */}
-                              <div
-                                className={cn(
-                                  "h-2 w-2 flex-shrink-0 rounded-full",
-                                  agentStatusConfig.color,
-                                  agentStatusConfig.shouldPulse &&
-                                    "animate-pulse",
-                                )}
-                                title={agentStatusConfig.label}
-                              />
-                              {/* Agent Name */}
-                              <div className="min-w-0 flex-1">
-                                <div className="truncate text-xs font-medium text-gray-900">
-                                  {agent.name}
-                                </div>
-                                {agent.description && (
-                                  <div className="truncate text-[11px] leading-tight text-gray-400">
-                                    {agent.description}
-                                  </div>
-                                )}
-                              </div>
-                              {/* Close Button */}
-                              <SimpleIconButton
-                                onClick={(e) => handleCloseAgent(agent.id, e)}
-                                icon={<X className="size-3" strokeWidth={1} />}
-                                label="Close"
-                                className="opacity-60 hover:opacity-100"
-                              />
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </PopoverContent>
-                )}
-              </Popover>
-            );
-          })}
-        </div>
-
-        {/* Overview Button - only show when an agent is active (not showing overview) */}
-        {activeAgentId !== null && (
-          <div className="flex items-center px-1">
-            <SimpleIconButton
-              onClick={() => setActiveAgentIdWithStorage(null)}
-              icon={<List className="size-4" strokeWidth={1} />}
-              label="Agent Overview"
-              className="text-gray-600 hover:text-gray-800"
-            />
-          </div>
-        )}
-
-        {/* Overview Tab - show as active tab when overview is displayed */}
-        {activeAgentId === null && (
-          <div className="flex items-center px-1">
+          {agents.map((agent) => (
             <div
+              key={agent.id}
               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",
+                "flex min-w-0 cursor-pointer items-center gap-1 border-r border-gray-200 px-2 py-2 pr-1.5 text-xs",
+                activeAgentId === agent.id
+                  ? "border-b-white bg-white"
+                  : "hover:bg-gray-100",
               )}
+              data-agent-id={agent.id}
+              data-active={activeAgentId === agent.id ? "true" : "false"}
+              onClick={() => setActiveAgentIdWithStorage(agent.id)}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // Capture coordinates before state update to avoid pooled/react event issues
+                const contextEvent = {
+                  clientX: e.clientX,
+                  clientY: e.clientY,
+                  pageX: e.pageX,
+                  pageY: e.pageY,
+                  screenX: (e as any).screenX,
+                  screenY: (e as any).screenY,
+                  button: 2,
+                  buttons: 2,
+                  ctrlKey: e.ctrlKey,
+                  shiftKey: e.shiftKey,
+                  altKey: e.altKey,
+                  preventDefault: () => {},
+                } as any;
+
+                // Show the menu first at the correct position
+                setTimeout(() => {
+                  editContext?.showContextMenu(
+                    contextEvent,
+                    getTabsMenuItems(),
+                  );
+                }, 150);
+              }}
             >
-              <List className="size-4 flex-shrink-0 text-gray-600" strokeWidth={1} />
-              <span className="truncate font-medium">Overview</span>
+              {/* Status Indicator */}
+              {(() => {
+                const statusConfig = getAgentStatusConfig(agent);
+                return (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div
+                        className={cn(
+                          "mr-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full",
+                          statusConfig.color,
+                          statusConfig.shouldPulse && "animate-pulse",
+                        )}
+                        title={statusConfig.label}
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent>{statusConfig.label}</TooltipContent>
+                  </Tooltip>
+                );
+              })()}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="truncate" title={agent.name}>
+                    {agent.name}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>{agent.name}</TooltipContent>
+              </Tooltip>
+              <SimpleIconButton
+                onClick={(e) => handleCloseAgent(agent.id, e)}
+                icon={<X className="size-3" strokeWidth={1} />}
+                label="Close"
+                className="ml-1 opacity-60 hover:opacity-100"
+              />
             </div>
+          ))}
+        </div>
+
+        {/* History Popover */}
+        {agents.length > 0 && (
+          <div className="flex items-center px-1">
+            <Popover
+              open={historyPopoverOpen}
+              onOpenChange={(open) => {
+                setHistoryPopoverOpen(open);
+                if (!open) {
+                  setHistoryFilter(""); // Clear filter when popover closes
+                }
+              }}
+            >
+              <PopoverTrigger asChild>
+                <SimpleIconButton
+                  onClick={() => {}}
+                  icon={<History className="size-4" strokeWidth={1} />}
+                  label="Agent History"
+                  className="text-gray-600 hover:text-gray-800"
+                />
+              </PopoverTrigger>
+              <PopoverContent className="w-64 p-0" align="end">
+                <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500">
+                  Closed Agents
+                </div>
+                {inactiveAgents.length > 0 && (
+                  <div className="border-b border-gray-100 px-3 py-2">
+                    <input
+                      type="text"
+                      placeholder="Filter agents..."
+                      value={historyFilter}
+                      onChange={(e) => setHistoryFilter(e.target.value)}
+                      className="w-full rounded border border-gray-200 px-2 py-1 text-xs focus:border-blue-500 focus:outline-none"
+                    />
+                  </div>
+                )}
+                <div className="max-h-80 overflow-y-auto">
+                  {(() => {
+                    const filteredAgents = getFilteredInactiveAgents();
+
+                    if (inactiveAgents.length === 0) {
+                      return (
+                        <div className="px-3 py-2 text-xs text-gray-500">
+                          No closed agents found
+                        </div>
+                      );
+                    }
+
+                    if (filteredAgents.length === 0) {
+                      return (
+                        <div className="px-3 py-2 text-xs text-gray-500">
+                          No agents match your filter
+                        </div>
+                      );
+                    }
+
+                    return filteredAgents.map((agent) => (
+                      <div
+                        key={agent.id}
+                        className="cursor-pointer border-b border-gray-50 px-3 py-2 text-xs hover:bg-gray-50"
+                        onClick={() => openAgentFromHistory(agent)}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="min-w-0 flex-1">
+                            <div className="truncate font-medium text-gray-900">
+                              {agent.name}
+                            </div>
+                            <div className="text-xs text-gray-400">
+                              {(() => {
+                                try {
+                                  const {
+                                    formatDateTime,
+                                  } = require("../utils");
+                                  return formatDateTime(
+                                    new Date(agent.updatedDate),
+                                  );
+                                } catch {
+                                  return new Date(
+                                    agent.updatedDate,
+                                  ).toLocaleString();
+                                }
+                              })()}
+                            </div>
+                          </div>
+                          <SimpleIconButton
+                            onClick={(e) => deleteAgentFromHistory(agent.id, e)}
+                            icon={<Trash className="size-3" strokeWidth={1} />}
+                            label="Delete Agent"
+                            className="ml-2 text-red-600 opacity-60 hover:text-red-700 hover:opacity-100"
+                          />
+                        </div>
+                      </div>
+                    ));
+                  })()}
+                </div>
+              </PopoverContent>
+            </Popover>
           </div>
         )}
 
@@ -1278,30 +1072,22 @@ export const Agents = React.memo(function Agents({
 
       {/* Agent Content */}
       <div className="relative flex-1">
-        {activeAgentId === null ? (
-          // Show AgentsView when no agent is selected
-          <div className="absolute inset-0">
-            <AgentsView />
+        {agents.map((agent) => (
+          <div
+            key={agent.id}
+            className={cn(
+              "absolute inset-0",
+              activeAgentId === agent.id ? "block" : "hidden",
+            )}
+          >
+            <AgentTerminal
+              agentStub={agent}
+              initialMetadata={initialMetadataMap[agent.id]}
+              profiles={availableProfiles}
+              isActive={activeAgentId === agent.id}
+            />
           </div>
-        ) : (
-          // Show agent terminals
-          agents.map((agent) => (
-            <div
-              key={agent.id}
-              className={cn(
-                "absolute inset-0",
-                activeAgentId === agent.id ? "block" : "hidden",
-              )}
-            >
-              <AgentTerminal
-                agentStub={agent}
-                initialMetadata={initialMetadataMap[agent.id]}
-                profiles={availableProfiles}
-                isActive={activeAgentId === agent.id}
-              />
-            </div>
-          ))
-        )}
+        ))}
       </div>
     </div>
   );