@alpaca-editor/core 1.0.4191 → 1.0.4192

package/src/editor/ai/Agents.tsx

@@ -34,8 +34,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../../components/ui/dropdown-menu";
-import { ChevronDown } from "lucide-react";
+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[],
@@ -72,12 +74,13 @@ 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 [historyPopoverOpen, setHistoryPopoverOpen] = useState(false);
+  const [profileTabDropdownOpen, setProfileTabDropdownOpen] = useState<
+    string | null
+  >(null);
   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>
   >({});
@@ -93,6 +96,44 @@ 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 {
@@ -103,18 +144,6 @@ 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;
@@ -125,6 +154,34 @@ 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);
@@ -289,7 +346,8 @@ export const Agents = React.memo(function Agents({
           }
         }
         if (message.type === "agent:run:start") {
-          const { agentId, agentName, autoSelect } = message.payload;
+          const { agentId, agentName, autoSelect, profileId, profileName } =
+            message.payload;
 
           if (!agentId || !agentName) {
             console.warn(
@@ -309,7 +367,7 @@ export const Agents = React.memo(function Agents({
             );
 
             if (existingAgentIndex !== -1) {
-              // Update existing agent name
+              // Update existing agent name and profile info
               const updatedAgents = [...prevAgents];
               const existingAgent = updatedAgents[existingAgentIndex]!;
               updatedAgents[existingAgentIndex] = {
@@ -317,6 +375,8 @@ export const Agents = React.memo(function Agents({
                 name: agentName,
                 status: "running" as const,
                 updatedDate: new Date().toISOString(),
+                ...(profileId && { profileId }),
+                ...(profileName && { profileName }),
               };
               return updatedAgents;
             } else {
@@ -327,6 +387,8 @@ 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];
@@ -477,13 +539,11 @@ export const Agents = React.memo(function Agents({
 
       setAgents(activeAgentsResult);
 
-      // Determine which agent to select as active
+      // Try to restore the previously active agent from localStorage if one exists
       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,
         );
@@ -491,7 +551,7 @@ export const Agents = React.memo(function Agents({
         if (storedAgent) {
           selectedAgentId = storedAgent.id;
         } else {
-          // Fall back to the most recently updated agent
+          // If no stored agent or stored agent not found, select the most recent agent
           const mostRecentAgent = getMostRecentAgent(activeAgentsResult);
           selectedAgentId = mostRecentAgent?.id || null;
         }
@@ -542,6 +602,8 @@ 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
@@ -668,6 +730,85 @@ 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;
 
@@ -730,37 +871,45 @@ 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 = {
-      ...agent,
+      ...fullAgent,
       // 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) {
@@ -774,32 +923,55 @@ export const Agents = React.memo(function Agents({
   // Empty state when no agents are open
   if (!loadingAgents && agents.length === 0) {
     return (
-      <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 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>
-              <AgentProfilesOverview
-                profiles={availableProfiles}
-                onSelectProfile={createAgentWithSelectedProfile}
-              />
-            </div>
-          ) : (
-            <div className="text-center text-xs text-gray-500">
-              No profiles available
-            </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>
+            )}
+          </div>
         </div>
       </div>
     );
@@ -810,179 +982,213 @@ 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">
-          {agents.map((agent) => (
-            <div
-              key={agent.id}
-              className={cn(
-                "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);
-              }}
-            >
-              {/* 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}
+          {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}
                       />
-                    </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"
+                    )}
+
+                    {/* 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>
-                )}
-                <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();
-                                }
-                              })()}
+                </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>
-                          <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>
+                  </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">
+            <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",
+              )}
+            >
+              <List className="size-4 flex-shrink-0 text-gray-600" strokeWidth={1} />
+              <span className="truncate font-medium">Overview</span>
+            </div>
           </div>
         )}
 
@@ -1072,22 +1278,30 @@ export const Agents = React.memo(function Agents({
 
       {/* Agent Content */}
       <div className="relative flex-1">
-        {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}
-            />
+        {activeAgentId === null ? (
+          // Show AgentsView when no agent is selected
+          <div className="absolute inset-0">
+            <AgentsView />
           </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>
   );