@alpaca-editor/core 1.0.4049 → 1.0.4053

package/src/editor/ai/Agents.tsx

@@ -1,481 +1,320 @@
 import React, { useState, useRef, useEffect } from "react";
-import { AiTerminalOptions } from "./AiTerminal";
-import { EditorAiTerminal } from "./EditorAiTerminal";
-import { AgentHistory } from "./AgentHistory";
+
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Plus, X, MoreHorizontal } from "lucide-react";
+import { Plus, X, History, MoreVertical, Trash } from "lucide-react";
 import { cn } from "../../lib/utils";
+
 import {
-  getAgents,
-  getAgent,
-  getChatHistory,
-  closeAgent,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import {
+  Agent,
+  getActiveAgents,
+  getClosedAgents,
+  closeAgent as closeAgentService,
   deleteAgent,
-  AgentChat,
-  AgentChatMessage,
 } from "../services/agentService";
-import { Message } from "./AiTerminal";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../../components/ui/dropdown-menu";
-
+import { AgentTerminal } from "./AgentTerminal";
 import { useEditContext } from "../client/editContext";
-import { AiContext } from "./AiTerminal";
-
-interface TerminalInstance {
-  id: string;
-  title: string;
-  agentId?: string;
-  options?: AiTerminalOptions;
-  messages?: Message[];
-}
 
-function convertAgentMessagesToTerminalMessages(
-  agentMessages: AgentChatMessage[],
-): Message[] {
-  return (
-    agentMessages
-      // Keep all messages including tool results for complete conversation context
-      .map((msg) => ({
-        id: msg.id,
-        content: msg.content,
-        name: msg.name,
-        role: msg.role,
-        tool_calls:
-          msg.toolCalls?.map((toolCall: any) => ({
-            id: toolCall.toolCallId,
-            displayName: toolCall.functionName,
-            function: {
-              name: toolCall.functionName,
-              arguments: toolCall.functionArguments || "",
-              result: toolCall.functionResult,
-              error: toolCall.functionError,
-            },
-          })) || [],
-        tool_call_id: msg.toolCallId,
-      }))
-  );
-}
+// 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 function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [activeAgentId, setActiveAgentId] = useState<string | null>(null);
+  const [historyPopoverOpen, setHistoryPopoverOpen] = useState(false);
+  const [menuPopoverOpen, setMenuPopoverOpen] = useState(false);
+  const [loadingAgents, setLoadingAgents] = useState(false);
+  const [inactiveAgents, setInactiveAgents] = useState<Agent[]>([]);
 
-function formatDateToLocalTime(dateString: string): string {
-  // Ensure the date string is treated as UTC if it doesn't have timezone info
-  const normalizedDate =
-    dateString.includes("Z") ||
-    dateString.includes("+") ||
-    dateString.includes("-", 19)
-      ? dateString
-      : dateString + "Z";
+  const editContext = useEditContext();
 
-  return new Date(normalizedDate).toLocaleString();
-}
+  // Helper function to get the most recently updated agent
+  const getMostRecentAgent = (agentList: Agent[]): Agent | null => {
+    if (agentList.length === 0) return null;
+    return agentList.reduce((mostRecent, current) => {
+      return new Date(current.updatedDate) > new Date(mostRecent.updatedDate)
+        ? current
+        : mostRecent;
+    });
+  };
 
-export function Agents({
-  closeButton,
-  initialOptions,
-}: {
-  closeButton?: React.ReactNode;
-  initialOptions?: AiTerminalOptions;
-}) {
-  const [terminals, setTerminals] = useState<TerminalInstance[]>([]);
-  const [activeTerminalId, setActiveTerminalId] = useState<string | null>(null);
-  const [closedAgents, setClosedAgents] = useState<AgentChat[]>([]);
-  const [historyPopoverOpen, setHistoryPopoverOpen] = useState(false);
-  const [loadingAgents, setLoadingAgents] = useState(true);
+  // Helper function to set active agent and persist to localStorage
+  const setActiveAgentIdWithStorage = (agentId: string | null) => {
+    console.log("setActiveAgentIdWithStorage", agentId);
+    setActiveAgentId(agentId);
 
-  const nextTerminalNumber = useRef(1);
-  const editContext = useEditContext();
+    if (agentId) {
+      localStorage.setItem(ACTIVE_AGENT_STORAGE_KEY, agentId);
+    } else {
+      localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+    }
+  };
 
-  // Create AI context for service calls
-  const createAgentContext = (): AiContext => ({
-    promptData: {
-      itemid: editContext?.currentItemDescriptor?.id,
-      language: editContext?.currentItemDescriptor?.language || "en",
-      version: editContext?.currentItemDescriptor?.version || 1,
-    },
-  });
+  // Initialize with a default agent if none exist
+  useEffect(() => {
+    if (agents.length === 0) {
+      const defaultAgent: Agent = {
+        status: "new",
+        id: crypto.randomUUID(),
+        name: `New Agent`,
+        updatedDate: new Date().toISOString(),
+        userId: "",
+      };
+      setAgents([defaultAgent]);
+      setActiveAgentId(defaultAgent.id);
+    }
+  }, [agents.length]);
 
   // Load agents from backend on mount
   useEffect(() => {
     loadAgentsFromBackend();
   }, []);
 
-  // Listen for WebSocket messages about agent changes
+  // Subscribe to websocket messages for agent-started events
   useEffect(() => {
-    if (!editContext) return;
-
-    const removeSocketListener = editContext.addSocketMessageListener(
-      (message) => {
-        if (
-          message.type === "agent-started" ||
-          message.type === "agent-updated"
-        ) {
-          // Refresh agents list when new agents are started or updated
-          loadAgentsFromBackend();
+    if (!editContext?.addSocketMessageListener) return;
+
+    const unsubscribe = editContext.addSocketMessageListener(
+      (message: { type: string; payload: any }) => {
+        if (message.type === "agent-started") {
+          const { agentId, agentName } = message.payload;
+
+          if (!agentId || !agentName) {
+            console.warn(
+              "Invalid agent-started message payload:",
+              message.payload,
+            );
+            return;
+          }
+
+          setAgents((prevAgents) => {
+            // Check if agent already exists
+            const existingAgentIndex = prevAgents.findIndex(
+              (agent) => agent.id === agentId,
+            );
+
+            if (existingAgentIndex !== -1) {
+              // Update existing agent name
+              const updatedAgents = [...prevAgents];
+              const existingAgent = updatedAgents[existingAgentIndex]!;
+              updatedAgents[existingAgentIndex] = {
+                ...existingAgent,
+                name: agentName,
+                status: "running" as const,
+                updatedDate: new Date().toISOString(),
+              };
+              return updatedAgents;
+            } else {
+              // Add new agent to the array
+              const newAgent: Agent = {
+                id: agentId,
+                name: agentName,
+                status: "running" as const,
+                userId: "", // Will be populated from backend if needed
+                updatedDate: new Date().toISOString(),
+              };
+              return [...prevAgents, newAgent];
+            }
+          });
         }
       },
     );
 
-    return removeSocketListener;
-  }, [editContext]);
+    return unsubscribe;
+  }, [editContext?.addSocketMessageListener]);
 
   const loadAgentsFromBackend = async () => {
     try {
       setLoadingAgents(true);
-      const context = createAgentContext();
 
-      // Load all non-closed agents
-      const activeAgentsResult = await getAgents(context);
+      // Load active agents
+      const activeAgentsResult = await getActiveAgents();
 
-      // Load closed agents for history
-      const closedAgentsResult = await getChatHistory(context, "closed", 20);
-
-      if (activeAgentsResult && Array.isArray(activeAgentsResult)) {
-        const activeAgents = activeAgentsResult;
-
-        // Create terminals for active agents
-        const activeTerminals: TerminalInstance[] = await Promise.all(
-          activeAgents.map(async (agent: any, index: number) => {
-            // Load messages for each active agent
-            const agentWithMessages = await loadAgentMessages(agent.id);
-
-            return {
-              id: `agent-${agent.id}`,
-              title: agent.name || "New Agent",
-              agentId: agent.id,
-              options: {
-                ...initialOptions,
-                // Pass cost information from loaded agent
-                totalCost: agentWithMessages?.totalCost,
-                totalInputTokenCost: agentWithMessages?.totalInputTokenCost,
-                totalOutputTokenCost: agentWithMessages?.totalOutputTokenCost,
-                totalCachedTokenCost:
-                  agentWithMessages?.totalCachedInputTokenCost,
-                totalInputTokens: agentWithMessages?.totalInputTokens,
-                totalOutputTokens: agentWithMessages?.totalOutputTokens,
-                totalCachedTokens: agentWithMessages?.totalCachedInputTokens,
-              },
-              messages: agentWithMessages?.messages
-                ? convertAgentMessagesToTerminalMessages(
-                    agentWithMessages.messages,
-                  )
-                : [],
-            };
-          }),
+      setAgents(activeAgentsResult);
+
+      // 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,
         );
 
-        // Set the first active terminal as active, or create a new one if none exist
-        if (activeTerminals.length > 0) {
-          setTerminals(activeTerminals);
-          setActiveTerminalId(activeTerminals[0]!.id);
+        if (storedAgent) {
+          selectedAgentId = storedAgent.id;
         } else {
-          // Create a default terminal if no active agents
-          const defaultTerminal: TerminalInstance = {
-            id: `terminal-${nextTerminalNumber.current}`,
-            title: "New Agent",
-            options: initialOptions,
-          };
-          setTerminals([defaultTerminal]);
-          setActiveTerminalId(defaultTerminal.id);
-          nextTerminalNumber.current++;
+          // Fall back to the most recently updated agent
+          console.log("get most recent agent", activeAgentsResult);
+          const mostRecentAgent = getMostRecentAgent(activeAgentsResult);
+          selectedAgentId = mostRecentAgent?.id || null;
         }
       }
 
-      if (closedAgentsResult && Array.isArray(closedAgentsResult)) {
-        setClosedAgents(closedAgentsResult);
-      }
+      console.log("set selectedAgentId", selectedAgentId);
+
+      setActiveAgentIdWithStorage(selectedAgentId);
+
+      // Load closed agents for history
+      const closedAgentsResult = await getClosedAgents();
+
+      setInactiveAgents(closedAgentsResult);
     } catch (error) {
       console.error("Failed to load agents:", error);
-      // Create a default terminal on error
-      const defaultTerminal: TerminalInstance = {
-        id: `terminal-${nextTerminalNumber.current}`,
-        title: `Agent ${nextTerminalNumber.current}`,
-        options: initialOptions,
-      };
-      setTerminals([defaultTerminal]);
-      setActiveTerminalId(defaultTerminal.id);
-      nextTerminalNumber.current++;
     } finally {
       setLoadingAgents(false);
     }
   };
 
-  const loadAgentMessages = async (
-    agentId: string,
-  ): Promise<AgentChat | null> => {
-    try {
-      const context = createAgentContext();
-      const result = await getAgent(agentId, context);
-      if (result && result.id) {
-        return result;
-      }
-    } catch (error) {
-      console.error(`Failed to load messages for agent ${agentId}:`, error);
-    }
-    return null;
-  };
-
-  const addTerminal = () => {
-    const newTerminal: TerminalInstance = {
-      id: `terminal-${nextTerminalNumber.current}`,
-      title: `Agent ${nextTerminalNumber.current}`,
-      options: undefined,
+  // 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 = () => {
+    const newAgent: Agent = {
+      status: "new",
+      id: crypto.randomUUID(),
+      name: `New Agent`,
+      updatedDate: new Date().toISOString(),
+      userId: "",
     };
-    setTerminals((prev) => [...prev, newTerminal]);
-    setActiveTerminalId(newTerminal.id);
-    nextTerminalNumber.current++;
+    setAgents((prev) => [...prev, newAgent]);
+    setActiveAgentIdWithStorage(newAgent.id);
   };
 
-  const createNewAgent = (options: AiTerminalOptions) => {
-    const newTerminal: TerminalInstance = {
-      id: `terminal-${nextTerminalNumber.current}`,
-      title: `Agent ${nextTerminalNumber.current}`,
-      options: options,
-    };
-    setTerminals((prev) => [...prev, newTerminal]);
-    setActiveTerminalId(newTerminal.id);
-    nextTerminalNumber.current++;
-  };
-
-  const closeTerminal = async (terminalId: string) => {
-    const terminal = terminals.find((t) => t.id === terminalId);
-    if (!terminal) return;
-
-    // If this terminal has an associated agent, show confirmation
-    if (terminal.agentId) {
-      editContext?.confirm({
-        header: "Close Agent",
-        message:
-          "Are you sure you want to close this agent? This will abort any running execution and mark the agent as closed.",
-        acceptLabel: "Close Agent",
-        rejectLabel: "Cancel",
-        accept: () => performCloseTerminal(terminalId),
-        reject: () => {}, // Do nothing on reject
-      });
-      return;
+  const closeAgent = async (agentId: string) => {
+    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
     }
 
-    // For terminals without agents, close immediately
-    performCloseTerminal(terminalId);
-  };
-
-  const performCloseTerminal = async (terminalId: string) => {
-    const terminal = terminals.find((t) => t.id === terminalId);
-
-    try {
-      // If this terminal has an associated agent, close it in the backend
-      if (terminal?.agentId) {
-        const context = createAgentContext();
-        await closeAgent(terminal.agentId, context);
-      }
+    setAgents((prev) => {
+      const filtered = prev.filter((a) => a.id !== agentId);
 
-      // Remove terminal from local state
-      setTerminals((prev) => {
-        const filtered = prev.filter((t) => t.id !== terminalId);
-
-        // If we're closing the active terminal, switch to the first remaining one
-        // or create a new one if this was the last terminal
-        if (activeTerminalId === terminalId) {
-          if (filtered.length > 0) {
-            setActiveTerminalId(filtered[0]!.id);
-          } else {
-            // Create a new terminal if this was the last one
-            const newTerminal: TerminalInstance = {
-              id: `terminal-${nextTerminalNumber.current}`,
-              title: "New Agent",
-              options: initialOptions,
-            };
-            nextTerminalNumber.current++;
-            setActiveTerminalId(newTerminal.id);
-            return [newTerminal];
-          }
+      // If we're closing the active terminal, switch to the most recent remaining one or clear storage
+      if (activeAgentId === agentId) {
+        if (filtered.length > 0) {
+          const mostRecentAgent = getMostRecentAgent(filtered);
+          setActiveAgentIdWithStorage(mostRecentAgent?.id || null);
+        } else {
+          setActiveAgentIdWithStorage(null);
         }
+      }
 
-        return filtered;
-      });
-    } catch (error) {
-      console.error("Failed to close agent:", error);
-      editContext?.showToast("Failed to close agent. Removing from UI.");
-      // Still remove the terminal from UI even if backend call fails
-      setTerminals((prev) => prev.filter((t) => t.id !== terminalId));
-    }
+      return filtered;
+    });
   };
 
-  const closeOtherTerminals = async () => {
-    if (!activeTerminalId || terminals.length <= 1) {
-      return;
-    }
+  const closeOtherAgents = async () => {
+    if (!activeAgentId) return;
 
-    // Get all terminals except the active one
-    const otherTerminals = terminals.filter((t) => t.id !== activeTerminalId);
-
-    // Show confirmation if any of the other terminals have agents
-    const hasAgents = otherTerminals.some((t) => t.agentId);
-
-    if (hasAgents) {
-      editContext?.confirm({
-        header: "Close Other Agents",
-        message: `Are you sure you want to close ${otherTerminals.length} other agent${otherTerminals.length > 1 ? "s" : ""}? This will abort any running executions and mark them as closed.`,
-        acceptLabel: "Close Others",
-        rejectLabel: "Cancel",
-        accept: async () => {
-          // Close all other terminals
-          for (const terminal of otherTerminals) {
-            try {
-              if (terminal.agentId) {
-                const context = createAgentContext();
-                await closeAgent(terminal.agentId, context);
-              }
-            } catch (error) {
-              console.error("Failed to close agent:", error);
-            }
-          }
+    // Get agents to close (all except active)
+    const agentsToClose = agents.filter((a) => a.id !== activeAgentId);
 
-          // Keep only the active terminal
-          const activeTerminal = terminals.find(
-            (t) => t.id === activeTerminalId,
-          );
-          if (activeTerminal) {
-            setTerminals([activeTerminal]);
-          }
-        },
-        reject: () => {}, // Do nothing on reject
-      });
-    } else {
-      // No agents, just close immediately
-      const activeTerminal = terminals.find((t) => t.id === activeTerminalId);
-      if (activeTerminal) {
-        setTerminals([activeTerminal]);
+    // 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);
       }
-    }
-  };
+    });
 
-  const closeAllTerminals = async () => {
-    // Show confirmation if any terminals have agents
-    const hasAgents = terminals.some((t) => t.agentId);
-
-    if (hasAgents) {
-      editContext?.confirm({
-        header: "Close All Agents",
-        message: `Are you sure you want to close all ${terminals.length} agent${terminals.length > 1 ? "s" : ""}? This will abort any running executions and mark them as closed.`,
-        acceptLabel: "Close All",
-        rejectLabel: "Cancel",
-        accept: async () => {
-          // Close all terminals with agents
-          for (const terminal of terminals) {
-            try {
-              if (terminal.agentId) {
-                const context = createAgentContext();
-                await closeAgent(terminal.agentId, context);
-              }
-            } catch (error) {
-              console.error("Failed to close agent:", error);
-            }
-          }
+    // Wait for all close operations to complete
+    await Promise.all(closePromises);
 
-          // Create a new default terminal
-          const defaultTerminal: TerminalInstance = {
-            id: `terminal-${nextTerminalNumber.current}`,
-            title: "New Agent",
-            options: initialOptions,
-          };
-          setTerminals([defaultTerminal]);
-          setActiveTerminalId(defaultTerminal.id);
-          nextTerminalNumber.current++;
-        },
-        reject: () => {}, // Do nothing on reject
-      });
-    } else {
-      // No agents, just create a new default terminal
-      const defaultTerminal: TerminalInstance = {
-        id: `terminal-${nextTerminalNumber.current}`,
-        title: "New Agent",
-        options: initialOptions,
-      };
-      setTerminals([defaultTerminal]);
-      setActiveTerminalId(defaultTerminal.id);
-      nextTerminalNumber.current++;
-    }
+    setAgents((prev) => {
+      return prev.filter((a) => a.id === activeAgentId);
+    });
+    setMenuPopoverOpen(false);
   };
 
-  const openAgentFromHistory = async (agent: AgentChat) => {
+  const openAgentFromHistory = async (agent: Agent) => {
     // Check if this agent is already open as a terminal
-    const existingTerminal = terminals.find((t) => t.agentId === agent.id);
+    const existingAgent = agents.find((a) => a.id === agent.id);
 
-    if (existingTerminal) {
-      // Switch to existing terminal
-      setActiveTerminalId(existingTerminal.id);
+    if (existingAgent) {
+      // Switch to existing agent
+      setActiveAgentIdWithStorage(existingAgent.id);
       setHistoryPopoverOpen(false);
       return;
     }
 
-    // Load the agent with messages
-    const agentWithMessages = await loadAgentMessages(agent.id);
-
-    // Create new terminal for this agent
-    const newTerminal: TerminalInstance = {
-      id: `agent-${agent.id}`,
-      title: agent.name,
-      agentId: agent.id,
-      options: {
-        ...initialOptions,
-        // Pass cost information from loaded agent
-        totalCost: agentWithMessages?.totalCost,
-        totalInputTokenCost: agentWithMessages?.totalInputTokenCost,
-        totalOutputTokenCost: agentWithMessages?.totalOutputTokenCost,
-        totalCachedTokenCost: agentWithMessages?.totalCachedInputTokenCost,
-        totalInputTokens: agentWithMessages?.totalInputTokens,
-        totalOutputTokens: agentWithMessages?.totalOutputTokens,
-        totalCachedTokens: agentWithMessages?.totalCachedInputTokens,
-      },
-      messages: agentWithMessages?.messages
-        ? convertAgentMessagesToTerminalMessages(agentWithMessages.messages)
-        : [],
+    // Add the closed agent to the active agents list
+    const reopenedAgent: Agent = {
+      ...agent,
+      // Keep the original status to allow AgentTerminal to load the full agent data
     };
 
-    setTerminals((prev) => [...prev, newTerminal]);
-    setActiveTerminalId(newTerminal.id);
+    setAgents((prev) => [...prev, reopenedAgent]);
+    setActiveAgentIdWithStorage(reopenedAgent.id);
     setHistoryPopoverOpen(false);
   };
 
-  const deleteAgentFromHistory = async (agent: AgentChat) => {
-    editContext?.confirm({
-      header: "Delete Agent",
-      message: `Are you sure you want to permanently delete "${agent.name}"? This action cannot be undone and will remove the agent and all its messages from the database.`,
-      acceptLabel: "Delete Permanently",
-      rejectLabel: "Cancel",
-      accept: async () => {
-        try {
-          const context = createAgentContext();
-          await deleteAgent(agent.id, context);
-
-          // Remove from closed agents list
-          setClosedAgents((prev) => prev.filter((a) => a.id !== agent.id));
-
-          // If this agent is currently open as a terminal, close it
-          const existingTerminal = terminals.find(
-            (t) => t.agentId === agent.id,
-          );
-          if (existingTerminal) {
-            performCloseTerminal(existingTerminal.id);
-          }
+  const deleteAgentFromHistory = async (
+    agentId: string,
+    event: React.MouseEvent,
+  ) => {
+    event.stopPropagation(); // Prevent opening the agent when clicking delete
 
-          editContext?.showToast("Agent deleted successfully");
-        } catch (error) {
-          console.error("Failed to delete agent:", error);
-          editContext?.showToast("Failed to delete agent. Please try again.");
-        }
-      },
-      reject: () => {}, // Do nothing on reject
-    });
+    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) {
     return (
       <div className="flex h-full items-center justify-center">
-        <div className="text-xs text-gray-500">Loading agents...</div>
+        <div className="text-sm text-gray-500">Loading agents...</div>
       </div>
     );
   }
@@ -484,81 +323,121 @@ export function Agents({
     <div className="flex h-full flex-col">
       {/* Tab Header */}
       <div className="flex items-center border-b border-gray-200 bg-gray-50">
-        <div className="flex flex-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          {terminals.map((terminal) => (
+        <div className="flex flex-1 overflow-x-auto">
+          {agents.map((agent) => (
             <div
-              key={terminal.id}
+              key={agent.id}
               className={cn(
                 "flex min-w-0 cursor-pointer items-center gap-1 border-r border-gray-200 px-3 py-2 text-xs",
-                activeTerminalId === terminal.id
+                activeAgentId === agent.id
                   ? "border-b-white bg-white"
                   : "hover:bg-gray-100",
               )}
-              onClick={() => setActiveTerminalId(terminal.id)}
+              onClick={() => setActiveAgentIdWithStorage(agent.id)}
             >
-              <span className="truncate">{terminal.title}</span>
-              <SimpleIconButton
-                onClick={(e) => {
-                  e.stopPropagation();
-                  closeTerminal(terminal.id);
-                }}
-                icon={<X className="size-3" />}
-                label="Close"
-                className="ml-1 opacity-60 hover:opacity-100"
-              />
+              <span className="truncate">{agent.name}</span>
+              {agents.length > 1 && (
+                <SimpleIconButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    closeAgent(agent.id);
+                  }}
+                  icon={<X className="size-2" strokeWidth={1} />}
+                  label="Close"
+                  className="ml-1 opacity-60 hover:opacity-100"
+                />
+              )}
             </div>
           ))}
         </div>
 
-        {/* Add Terminal Button */}
-        <div className="flex items-center px-1">
-          <SimpleIconButton
-            onClick={addTerminal}
-            icon={<Plus className="size-4" />}
-            label="Add Agent"
-            className="text-gray-600 hover:text-gray-800"
-          />
-        </div>
-
-        {/* Agent History */}
+        {/* History Popover */}
         <div className="flex items-center px-1">
-          <AgentHistory
-            closedAgents={closedAgents}
-            isOpen={historyPopoverOpen}
+          <Popover
+            open={historyPopoverOpen}
             onOpenChange={setHistoryPopoverOpen}
-            onOpenAgent={openAgentFromHistory}
-            onDeleteAgent={deleteAgentFromHistory}
-            formatDateToLocalTime={formatDateToLocalTime}
-          />
+          >
+            <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>
+              <div className="max-h-80 overflow-y-auto">
+                {inactiveAgents.length === 0 ? (
+                  <div className="px-3 py-2 text-xs text-gray-500">
+                    No closed agents found
+                  </div>
+                ) : (
+                  inactiveAgents.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">
+                            {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>
 
-        {/* More Options Menu */}
+        {/* Menu Popover */}
         <div className="flex items-center px-1">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
+          <Popover open={menuPopoverOpen} onOpenChange={setMenuPopoverOpen}>
+            <PopoverTrigger asChild>
               <SimpleIconButton
                 onClick={() => {}}
-                icon={<MoreHorizontal className="size-4" />}
-                label="More Options"
+                icon={<MoreVertical className="size-4" strokeWidth={1} />}
+                label="Menu"
                 className="text-gray-600 hover:text-gray-800"
               />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                onClick={closeOtherTerminals}
-                disabled={terminals.length <= 1}
-                className="cursor-pointer"
-              >
-                Close Other
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={closeAllTerminals}
-                className="cursor-pointer"
-              >
-                Close All
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+            </PopoverTrigger>
+            <PopoverContent className="w-48 p-0" align="end">
+              <div className="py-1">
+                <button
+                  onClick={closeOtherAgents}
+                  disabled={agents.length <= 1}
+                  className="w-full px-3 py-2 text-left text-xs hover:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-400"
+                >
+                  Close Other
+                </button>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* Add Terminal Button */}
+        <div className="flex items-center px-1">
+          <SimpleIconButton
+            onClick={addAgent}
+            icon={<Plus className="size-4" strokeWidth={1} />}
+            label="Add Terminal"
+            className="text-gray-600 hover:text-gray-800"
+          />
         </div>
 
         {/* Main Close Button */}
@@ -567,33 +446,17 @@ export function Agents({
         )}
       </div>
 
-      {/* Terminal Content */}
+      {/* Agent Content */}
       <div className="relative flex-1">
-        {terminals.map((terminal) => (
+        {agents.map((agent) => (
           <div
-            key={terminal.id}
+            key={agent.id}
             className={cn(
               "absolute inset-0",
-              activeTerminalId === terminal.id ? "block" : "hidden",
+              activeAgentId === agent.id ? "block" : "hidden",
             )}
           >
-            <EditorAiTerminal
-              options={{
-                ...terminal.options,
-                // Pass the pre-loaded messages to the terminal
-                initialMessages: terminal.messages,
-                // Pass the agentId to maintain continuity
-                agentId: terminal.agentId,
-              }}
-              onAgentNameUpdate={(name) => {
-                // Update the terminal title when agent name is updated
-                setTerminals((prev) =>
-                  prev.map((t) =>
-                    t.id === terminal.id ? { ...t, title: name } : t,
-                  ),
-                );
-              }}
-            />
+            <AgentTerminal agentStub={agent} />
           </div>
         ))}
       </div>