@alpaca-editor/core 1.0.4033 → 1.0.4037

package/src/editor/ai/Agents.tsx

@@ -1,23 +1,27 @@
 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, History } from "lucide-react";
+import { Plus, X, MoreHorizontal } from "lucide-react";
 import { cn } from "../../lib/utils";
 import {
   getAgents,
   getAgent,
   getChatHistory,
+  closeAgent,
+  deleteAgent,
   AgentChat,
   AgentChatMessage,
 } from "../services/agentService";
 import { Message } from "./AiTerminal";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../../components/ui/popover";
-import { Button } from "../../components/ui/button";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+
 import { useEditContext } from "../client/editContext";
 import { AiContext } from "./AiTerminal";
 
@@ -76,9 +80,10 @@ export function Agents({
 }) {
   const [terminals, setTerminals] = useState<TerminalInstance[]>([]);
   const [activeTerminalId, setActiveTerminalId] = useState<string | null>(null);
-  const [inactiveAgents, setInactiveAgents] = useState<AgentChat[]>([]);
+  const [closedAgents, setClosedAgents] = useState<AgentChat[]>([]);
   const [historyPopoverOpen, setHistoryPopoverOpen] = useState(false);
   const [loadingAgents, setLoadingAgents] = useState(true);
+
   const nextTerminalNumber = useRef(1);
   const editContext = useEditContext();
 
@@ -101,15 +106,11 @@ export function Agents({
       setLoadingAgents(true);
       const context = createAgentContext();
 
-      // Load active agents
-      const activeAgentsResult = await getAgents(context, "active");
+      // Load all non-closed agents
+      const activeAgentsResult = await getAgents(context);
 
-      // Load inactive agents for history
-      const inactiveAgentsResult = await getChatHistory(
-        context,
-        "completed",
-        20,
-      );
+      // Load closed agents for history
+      const closedAgentsResult = await getChatHistory(context, "closed", 20);
 
       if (activeAgentsResult && Array.isArray(activeAgentsResult)) {
         const activeAgents = activeAgentsResult;
@@ -162,8 +163,8 @@ export function Agents({
         }
       }
 
-      if (inactiveAgentsResult && Array.isArray(inactiveAgentsResult)) {
-        setInactiveAgents(inactiveAgentsResult);
+      if (closedAgentsResult && Array.isArray(closedAgentsResult)) {
+        setClosedAgents(closedAgentsResult);
       }
     } catch (error) {
       console.error("Failed to load agents:", error);
@@ -218,22 +219,165 @@ export function Agents({
     nextTerminalNumber.current++;
   };
 
-  const closeTerminal = (terminalId: string) => {
-    if (terminals.length <= 1) {
-      // Don't close the last terminal
+  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;
     }
 
-    setTerminals((prev) => {
-      const filtered = prev.filter((t) => t.id !== terminalId);
+    // For terminals without agents, close immediately
+    performCloseTerminal(terminalId);
+  };
 
-      // If we're closing the active terminal, switch to the first remaining one
-      if (activeTerminalId === terminalId && filtered.length > 0) {
-        setActiveTerminalId(filtered[0]!.id);
+  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);
       }
 
-      return filtered;
-    });
+      // 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];
+          }
+        }
+
+        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));
+    }
+  };
+
+  const closeOtherTerminals = async () => {
+    if (!activeTerminalId || terminals.length <= 1) {
+      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);
+            }
+          }
+
+          // 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]);
+      }
+    }
+  };
+
+  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);
+            }
+          }
+
+          // 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++;
+    }
   };
 
   const openAgentFromHistory = async (agent: AgentChat) => {
@@ -276,10 +420,42 @@ export function Agents({
     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);
+          }
+
+          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
+    });
+  };
+
   if (loadingAgents) {
     return (
       <div className="flex h-full items-center justify-center">
-        <div className="text-sm text-gray-500">Loading agents...</div>
+        <div className="text-xs text-gray-500">Loading agents...</div>
       </div>
     );
   }
@@ -288,7 +464,7 @@ 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">
+        <div className="flex flex-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {terminals.map((terminal) => (
             <div
               key={terminal.id}
@@ -301,66 +477,17 @@ export function Agents({
               onClick={() => setActiveTerminalId(terminal.id)}
             >
               <span className="truncate">{terminal.title}</span>
-              {terminals.length > 1 && (
-                <SimpleIconButton
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    closeTerminal(terminal.id);
-                  }}
-                  icon={<X className="size-2" />}
-                  label="Close"
-                  className="ml-1 opacity-60 hover:opacity-100"
-                />
-              )}
-            </div>
-          ))}
-        </div>
-
-        {/* History Popover */}
-        <div className="flex items-center px-1">
-          <Popover
-            open={historyPopoverOpen}
-            onOpenChange={setHistoryPopoverOpen}
-          >
-            <PopoverTrigger asChild>
               <SimpleIconButton
-                onClick={() => {}}
-                icon={<History className="size-4" />}
-                label="Agent History"
-                className="text-gray-600 hover:text-gray-800"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  closeTerminal(terminal.id);
+                }}
+                icon={<X className="size-3" />}
+                label="Close"
+                className="ml-1 opacity-60 hover:opacity-100"
               />
-            </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">
-                Agent History
-              </div>
-              <div className="max-h-80 overflow-y-auto">
-                {inactiveAgents.length === 0 ? (
-                  <div className="px-3 py-2 text-xs text-gray-500">
-                    No previous 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="truncate font-medium text-gray-900">
-                        {agent.name}
-                      </div>
-                      <div className="truncate text-gray-500">
-                        {agent.profileName}
-                      </div>
-                      <div className="text-xs text-gray-400">
-                        {formatDateToLocalTime(agent.updatedDate)}
-                      </div>
-                    </div>
-                  ))
-                )}
-              </div>
-            </PopoverContent>
-          </Popover>
+            </div>
+          ))}
         </div>
 
         {/* Add Terminal Button */}
@@ -368,11 +495,52 @@ export function Agents({
           <SimpleIconButton
             onClick={addTerminal}
             icon={<Plus className="size-4" />}
-            label="Add Terminal"
+            label="Add Agent"
             className="text-gray-600 hover:text-gray-800"
           />
         </div>
 
+        {/* Agent History */}
+        <div className="flex items-center px-1">
+          <AgentHistory
+            closedAgents={closedAgents}
+            isOpen={historyPopoverOpen}
+            onOpenChange={setHistoryPopoverOpen}
+            onOpenAgent={openAgentFromHistory}
+            onDeleteAgent={deleteAgentFromHistory}
+            formatDateToLocalTime={formatDateToLocalTime}
+          />
+        </div>
+
+        {/* More Options Menu */}
+        <div className="flex items-center px-1">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SimpleIconButton
+                onClick={() => {}}
+                icon={<MoreHorizontal className="size-4" />}
+                label="More Options"
+                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>
+        </div>
+
         {/* Main Close Button */}
         {closeButton && (
           <div className="flex items-center px-2">{closeButton}</div>

package/src/editor/ai/AiResponseMessage.tsx

@@ -78,10 +78,12 @@ export function AiResponseMessage({
   messages,
   finished,
   editOperations,
+  error,
 }: {
   messages: Message[];
   finished: boolean;
   editOperations: EditOperation[];
+  error?: string;
 }) {
   const editContext = useEditContext();
   if (!editContext) return <></>;
@@ -206,11 +208,9 @@ export function AiResponseMessage({
         id: `input-${toolCall.id}`,
         label: "Input",
         content: (
-          <div className="relative h-full w-full p-2">
-            <div className="absolute inset-2 overflow-auto">
-              <div className="text-xs">
-                {renderJsonOrText(toolCall.function.arguments)}
-              </div>
+          <div className="h-[250px] w-full overflow-auto p-2">
+            <div className="text-xs">
+              {renderJsonOrText(toolCall.function.arguments)}
             </div>
           </div>
         ),
@@ -222,10 +222,8 @@ export function AiResponseMessage({
         id: `output-${toolCall.id}`,
         label: "Output",
         content: (
-          <div className="relative h-full w-full p-2">
-            <div className="absolute inset-2 overflow-y-auto">
-              <div className="text-xs">{renderJsonOrText(result || "")}</div>
-            </div>
+          <div className="h-[250px] w-full overflow-auto p-2">
+            <div className="text-xs">{renderJsonOrText(result || "")}</div>
           </div>
         ),
       });
@@ -248,7 +246,7 @@ export function AiResponseMessage({
     const tabs = createToolCallTabs(toolCall, result || "");
 
     return (
-      <div className="h-[400px]">
+      <div className="flex flex-col p-3">
         <div className="mb-3 flex items-center justify-between border-b border-gray-200 px-2 pb-1">
           <div className="flex items-center gap-2 text-sm font-semibold text-gray-800">
             {getToolIcon(toolCall?.function?.name || "")}
@@ -275,6 +273,22 @@ export function AiResponseMessage({
 
   return (
     <div>
+      {error && (
+        <div
+          className="mb-3 rounded-lg border-l-4 border-red-500 bg-red-50 p-3"
+          data-testid="agent-error"
+        >
+          <div className="flex items-start">
+            <div className="flex-shrink-0">
+              <X className="h-5 w-5 text-red-400" strokeWidth={1} />
+            </div>
+            <div className="ml-3">
+              <p className="text-sm font-medium text-red-800">Agent Error</p>
+              <p className="mt-1 text-sm text-red-700">{error}</p>
+            </div>
+          </div>
+        </div>
+      )}
       {messages
         .filter((x) => x.role !== "tool" && x.role !== "user")
         .map((message, filteredIndex) => {
@@ -334,7 +348,7 @@ export function AiResponseMessage({
                           </div>
                         </PopoverTrigger>
                         <PopoverContent
-                          className="w-[400px] p-3"
+                          className="w-[450px] p-0"
                           align="start"
                           side="bottom"
                           sideOffset={8}