@alpaca-editor/core 1.0.4033 → 1.0.4037

package/src/editor/ai/AiTerminal.tsx

@@ -6,7 +6,13 @@ import { TerminalService } from "primereact/terminalservice";
 
 import { Terminal } from "../Terminal";
 import { useEditContext } from "../client/editContext";
-import { Dropdown } from "primereact/dropdown";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+import { ChevronDown } from "lucide-react";
 
 import { WizardIcon } from "../ui/Icons";
 import { AiResponseMessage } from "./AiResponseMessage";
@@ -20,14 +26,26 @@ import {
   getAgents,
   getChatHistory,
   cancelAgent,
+  checkAgentState,
+  convertAgentMessagesToTerminalFormat,
   AgentStreamMessageType,
   StartAgentRequest,
   AgentStreamMessage,
 } from "../services/agentService";
 import { EditOperation } from "../../types";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Settings } from "lucide-react";
+import { Settings, Square } from "lucide-react";
 import { AgentCostDisplay } from "./AgentCostDisplay";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 
 type Response = {
   messages: Message[];
@@ -37,6 +55,7 @@ type Response = {
   numCachedTokens: number;
   state: string;
   agentName?: string; // Updated agent name (only sent when the agent name has been updated)
+  error?: string; // Error message when agent execution fails
   // Cost information from backend
   totalCost?: number;
   totalInputTokenCost?: number;
@@ -137,6 +156,22 @@ export function AiTerminal({
   );
   const [showSettings, setShowSettings] = useState(false);
   const settingsRef = useRef<HTMLDivElement>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const [terminalError, setTerminalError] = useState<string | null>(null);
+
+  // Debug function - expose globally for testing
+  useEffect(() => {
+    (window as any).testAiTerminalError = (
+      errorMsg: string = "Test error message",
+    ) => {
+      console.log("Manually triggering error:", errorMsg);
+      setTerminalError(errorMsg);
+    };
+    return () => {
+      delete (window as any).testAiTerminalError;
+    };
+  }, []);
 
   useEffect(() => {
     if (options?.initialPrompt && !initialPromptExecuted && model) {
@@ -164,8 +199,271 @@ export function AiTerminal({
     fetchProfiles();
   }, [editContext?.currentItemDescriptor]);
 
+  // Agent reconnection logic
+  useEffect(() => {
+    async function checkAndReconnectAgent() {
+      if (!editContext || !agentId) return;
+
+      const context = createAiContext({ editContext });
+
+      try {
+        console.log("Checking agent state for reconnection:", agentId);
+        const agentState = await checkAgentState(agentId, context);
+
+        if (agentState.exists && agentState.agent) {
+          console.log(
+            "Found existing agent, restoring state:",
+            agentState.agent,
+          );
+
+          const agent = agentState.agent;
+
+          // Convert and set persisted messages if not already set via options
+          if (
+            agent.messages &&
+            (!options?.initialMessages || options.initialMessages.length === 0)
+          ) {
+            const terminalMessages = convertAgentMessagesToTerminalFormat(
+              agent.messages,
+            );
+            console.log("Restoring messages:", terminalMessages);
+            setMessages(terminalMessages);
+            setResponseMessages(terminalMessages);
+          }
+
+          // Set cost information if available
+          if (agent.totalCost !== undefined) {
+            setResponse(
+              (prev) =>
+                ({
+                  ...prev,
+                  totalCost: agent.totalCost,
+                  totalInputTokenCost: agent.totalInputTokenCost,
+                  totalOutputTokenCost: agent.totalOutputTokenCost,
+                  totalCachedTokenCost: agent.totalCachedInputTokenCost,
+                  totalInputTokens: agent.totalInputTokens,
+                  totalOutputTokens: agent.totalOutputTokens,
+                  totalCachedTokens: agent.totalCachedInputTokens,
+                }) as Response,
+            );
+          }
+
+          // If agent is still running, reconnect to the stream
+          if (agentState.isRunning) {
+            console.log("Agent is still running, reconnecting to stream");
+            await reconnectToRunningAgent(agentId, context);
+          } else {
+            console.log(
+              "Agent completed while disconnected, showing final state",
+            );
+          }
+        } else {
+          console.log("No existing agent found or agent doesn't exist");
+        }
+      } catch (error) {
+        console.error("Failed to check agent state:", error);
+        // Don't show error to user for reconnection failures - just continue as normal
+      }
+    }
+
+    // Only try to reconnect if we have an agentId and haven't already initialized with messages
+    if (agentId && editContext) {
+      checkAndReconnectAgent();
+    }
+  }, [agentId]); // Only run when agentId changes
+
+  // Function to reconnect to a running agent stream
+  async function reconnectToRunningAgent(agentId: string, context: AiContext) {
+    try {
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      setIsRunning(true);
+
+      let accumulatedResponse: any = {
+        messages: [...messages],
+        editOperations: [],
+        numInputTokens: 0,
+        numOutputTokens: 0,
+        numCachedTokens: 0,
+        state: "running",
+      };
+      let completionProcessed = false;
+
+      console.log("Reconnecting to agent stream:", agentId);
+      await connectToAgentStream(
+        agentId,
+        context,
+        (streamMessage) => {
+          console.log(
+            "Reconnected stream message:",
+            streamMessage.type,
+            streamMessage,
+          );
+
+          // Use the same stream message handling logic as the original startAgent function
+          // (This is the same logic that was already in the component)
+          handleStreamMessage(
+            streamMessage,
+            accumulatedResponse,
+            completionProcessed,
+            context,
+          );
+        },
+        abortController.signal,
+      );
+    } catch (error) {
+      console.error("Failed to reconnect to agent stream:", error);
+      setIsRunning(false);
+      setTerminalError(
+        `Failed to reconnect to agent: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    }
+  }
+
+  // Extract stream message handling logic into a separate function for reuse
+  function handleStreamMessage(
+    streamMessage: AgentStreamMessage,
+    accumulatedResponse: any,
+    completionProcessed: boolean,
+    context: AiContext,
+  ) {
+    // Safety check for valid stream message
+    if (!streamMessage || !streamMessage.type) {
+      console.error("Invalid stream message received:", streamMessage);
+      return;
+    }
+
+    console.log(
+      "Processing stream message:",
+      streamMessage.type,
+      streamMessage,
+    );
+
+    // Handle different message types (this logic was already in the component)
+    switch (streamMessage.type) {
+      case AgentStreamMessageType.StatusUpdate:
+        break;
+
+      case AgentStreamMessageType.ContentChunk:
+        if (streamMessage.data && typeof streamMessage.data === "object") {
+          if (
+            streamMessage.data.isIncremental &&
+            streamMessage.data.deltaContent
+          ) {
+            // Handle incremental content updates
+            const updatedMessages = [...(accumulatedResponse.messages || [])];
+            let lastAssistantMessage = null;
+            let lastAssistantIndex = -1;
+
+            // Find the last assistant message
+            for (let i = updatedMessages.length - 1; i >= 0; i--) {
+              if (updatedMessages[i].role === "assistant") {
+                lastAssistantMessage = updatedMessages[i];
+                lastAssistantIndex = i;
+                break;
+              }
+            }
+
+            // If no assistant message exists, or the last one has tool calls, create a new one
+            if (
+              !lastAssistantMessage ||
+              (lastAssistantMessage.tool_calls &&
+                lastAssistantMessage.tool_calls.length > 0)
+            ) {
+              lastAssistantMessage = {
+                id: crypto.randomUUID(),
+                role: "assistant",
+                name: "assistant",
+                content: "",
+                tool_calls: [],
+              };
+              updatedMessages.push(lastAssistantMessage);
+              lastAssistantIndex = updatedMessages.length - 1;
+            }
+
+            // Append the delta content to build up the full message
+            const currentContent = lastAssistantMessage.content || "";
+            const newContent = currentContent + streamMessage.data.deltaContent;
+
+            // Update the message with accumulated content
+            updatedMessages[lastAssistantIndex] = {
+              ...lastAssistantMessage,
+              content: newContent,
+            };
+
+            // Update accumulated response with incremental content
+            accumulatedResponse = {
+              ...accumulatedResponse,
+              ...streamMessage.data,
+              messages: updatedMessages,
+              editOperations:
+                streamMessage.data.editOperations ||
+                accumulatedResponse.editOperations,
+            };
+          } else {
+            // Non-incremental update - use as provided
+            accumulatedResponse = {
+              ...accumulatedResponse,
+              ...streamMessage.data,
+              editOperations:
+                streamMessage.data.editOperations ||
+                accumulatedResponse.editOperations,
+            };
+          }
+
+          // Always trigger UI update for content chunks
+          handleResponse(accumulatedResponse, () => {}, false);
+        }
+        break;
+
+      case AgentStreamMessageType.ToolCall:
+        // Handle tool calls - simplified for reconnection
+        if (streamMessage.data && typeof streamMessage.data === "object") {
+          console.log(
+            "Tool call received during reconnection:",
+            streamMessage.data,
+          );
+          // For reconnection, we mainly need to update the UI
+          // The detailed tool call logic can be handled the same as in the original
+        }
+        break;
+
+      case AgentStreamMessageType.ToolResult:
+        // Handle tool results - simplified for reconnection
+        if (streamMessage.data && typeof streamMessage.data === "object") {
+          console.log(
+            "Tool result received during reconnection:",
+            streamMessage.data,
+          );
+          // For reconnection, we mainly need to update the UI
+          // The detailed tool result logic can be handled the same as in the original
+        }
+        break;
+
+      case AgentStreamMessageType.Completed:
+        if (!completionProcessed) {
+          completionProcessed = true;
+          console.log("Agent execution completed");
+          setIsRunning(false);
+          if (streamMessage.data) {
+            handleResponse(streamMessage.data, () => {}, true);
+          }
+        }
+        break;
+
+      case AgentStreamMessageType.Error:
+        console.error("Agent execution error:", streamMessage);
+        setIsRunning(false);
+        setTerminalError(streamMessage.error || "Agent execution failed");
+        break;
+
+      default:
+        console.warn("Unknown stream message type:", streamMessage.type);
+    }
+  }
+
   useEffect(() => {
-    if (activeProfile?.defaultModel) setModel(activeProfile.defaultModel);
+    if (activeProfile?.defaultModelId) setModel(activeProfile.defaultModelId);
   }, [activeProfile]);
 
   const messagesRef = useRef(messages);
@@ -297,18 +595,38 @@ export function AiTerminal({
   // Handle click outside for settings popover
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
-      if (
-        settingsRef.current &&
-        !settingsRef.current.contains(event.target as Node)
-      ) {
-        setShowSettings(false);
+      const target = event.target as Element;
+
+      // Check if the click is inside the settings popover
+      if (settingsRef.current && settingsRef.current.contains(target)) {
+        return;
       }
+
+      // Check if the click is inside any dropdown menu content
+      // Radix UI dropdown menus can have various selectors
+      const isInDropdown = target.closest(
+        [
+          "[data-radix-popper-content-wrapper]",
+          '[data-slot="dropdown-menu-content"]',
+          "[data-radix-dropdown-menu-content]",
+          '[role="menu"]',
+          ".dropdown-menu", // fallback for any custom dropdown classes
+        ].join(", "),
+      );
+
+      if (isInDropdown) {
+        return;
+      }
+
+      // If we get here, it's a click outside both the settings and any dropdown
+      setShowSettings(false);
     }
 
     if (showSettings) {
-      document.addEventListener("click", handleClickOutside);
+      // Use mousedown instead of click for better timing
+      document.addEventListener("mousedown", handleClickOutside);
       return () => {
-        document.removeEventListener("click", handleClickOutside);
+        document.removeEventListener("mousedown", handleClickOutside);
       };
     }
   }, [showSettings]);
@@ -342,6 +660,7 @@ export function AiTerminal({
           messages={formattedMessages}
           editOperations={response.editOperations}
           finished={isFinished}
+          error={response.error}
         />,
         isFinished,
       );
@@ -352,6 +671,7 @@ export function AiTerminal({
           messages={messagesRef.current}
           editOperations={response.editOperations}
           finished={isFinished}
+          error={response.error}
         />,
         isFinished,
       );
@@ -416,10 +736,11 @@ export function AiTerminal({
       };
 
       const startResponse = await startAgent(startRequest, context);
-      console.log("Agent started:", startResponse);
 
       // Step 2: Connect to the agent stream for real-time updates
       const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      setIsRunning(true);
       let accumulatedResponse: any = {
         messages: [...messages],
         editOperations: [],
@@ -442,6 +763,18 @@ export function AiTerminal({
             //   new Date().toISOString(),
             // );
 
+            // Safety check for valid stream message
+            if (!streamMessage || !streamMessage.type) {
+              console.error("Invalid stream message received:", streamMessage);
+              return;
+            }
+
+            console.log(
+              "Processing stream message:",
+              streamMessage.type,
+              streamMessage,
+            );
+
             // Message types are now normalized in agentService.ts
             switch (streamMessage.type) {
               case AgentStreamMessageType.StatusUpdate:
@@ -449,7 +782,10 @@ export function AiTerminal({
                 break;
 
               case AgentStreamMessageType.ContentChunk:
-                if (streamMessage.data) {
+                if (
+                  streamMessage.data &&
+                  typeof streamMessage.data === "object"
+                ) {
                   // Handle incremental content updates
                   if (
                     streamMessage.data.isIncremental &&
@@ -526,7 +862,10 @@ export function AiTerminal({
 
               case AgentStreamMessageType.ToolCall:
                 //  console.log("Tool call received:", streamMessage.data);
-                if (streamMessage.data) {
+                if (
+                  streamMessage.data &&
+                  typeof streamMessage.data === "object"
+                ) {
                   // Find or create the assistant message that contains this tool call
                   const updatedMessages = [
                     ...(accumulatedResponse.messages || []),
@@ -606,12 +945,16 @@ export function AiTerminal({
 
               case AgentStreamMessageType.ToolResult:
                 console.log("Tool result received:", streamMessage.data);
-                if (streamMessage.data) {
+                if (
+                  streamMessage.data &&
+                  typeof streamMessage.data === "object"
+                ) {
                   // Find the assistant message and tool call to update with the result
                   const updatedMessages = [
                     ...(accumulatedResponse.messages || []),
                   ];
 
+                  let messageUpdated = false;
                   // Find the assistant message with the matching tool call ID
                   for (let i = updatedMessages.length - 1; i >= 0; i--) {
                     if (
@@ -639,6 +982,7 @@ export function AiTerminal({
                           ...updatedMessages[i],
                           tool_calls: updatedToolCalls,
                         };
+                        messageUpdated = true;
                         break;
                       }
                     }
@@ -656,12 +1000,15 @@ export function AiTerminal({
                 break;
 
               case AgentStreamMessageType.Completed:
-                if (streamMessage.data) {
+                if (
+                  streamMessage.data &&
+                  typeof streamMessage.data === "object"
+                ) {
                   // Final completion data
                   const finalResponse = {
                     messages:
-                      streamMessage.data.messages ||
-                      accumulatedResponse.messages,
+                      accumulatedResponse.messages ||
+                      streamMessage.data.messages,
                     editOperations:
                       streamMessage.data.editOperations ||
                       accumulatedResponse.editOperations,
@@ -676,6 +1023,8 @@ export function AiTerminal({
                       accumulatedResponse.numCachedTokens,
                     state: "completed",
                     agentName: streamMessage.data.agentName,
+                    error:
+                      streamMessage.data.error || accumulatedResponse.error,
                     // Add cost fields from backend (try both tokenUsage object and direct properties)
                     totalCost:
                       streamMessage.data.totalCost ||
@@ -731,6 +1080,7 @@ export function AiTerminal({
                       messages={formattedMessages}
                       editOperations={finalResponse.editOperations}
                       finished={true}
+                      error={finalResponse.error}
                     />,
                     true,
                   );
@@ -746,15 +1096,41 @@ export function AiTerminal({
                 break;
 
               case AgentStreamMessageType.Error:
-                console.error("Agent execution error:", streamMessage.error);
+                const errorMessage =
+                  streamMessage.error || "Unknown agent error";
+                console.error("Agent execution error:", errorMessage);
+                console.log("Displaying error in terminal:", errorMessage);
+                setTerminalError(errorMessage);
+
                 const errorResponse = {
                   ...accumulatedResponse,
                   state: "error",
-                  error: streamMessage.error,
+                  error: errorMessage,
                 };
                 setResponse(errorResponse);
+
+                // Display the error in the terminal
+                console.log("Calling handleResponse with error");
                 handleResponse(errorResponse, callback, true);
-                break;
+
+                // Also try using TerminalService directly as fallback
+                console.log("Also trying TerminalService.emit");
+                TerminalService.emit("response", {
+                  text: (
+                    <AiResponseMessage
+                      messages={[]}
+                      editOperations={[]}
+                      finished={true}
+                      error={errorMessage}
+                    />
+                  ),
+                  type: "response",
+                });
+
+                console.log("Error callback completed");
+                setIsRunning(false);
+                abortControllerRef.current = null;
+                return; // Exit the stream processing
 
               default:
                 console.log(
@@ -777,24 +1153,53 @@ export function AiTerminal({
           setResponse(finalResponse);
           handleResponse(finalResponse, callback, true);
         }
+        setIsRunning(false);
+        abortControllerRef.current = null;
       } catch (streamError) {
         console.error("Stream connection error:", streamError);
-        const errorMessage =
-          streamError instanceof Error
-            ? streamError.message
-            : "Unknown stream error";
-        const errorResponse = {
-          ...accumulatedResponse,
-          state: "error",
-          error: errorMessage,
-        };
-        setResponse(errorResponse);
-        handleResponse(errorResponse, callback, true);
+        const isAbort =
+          (streamError as any)?.name === "AbortError" ||
+          (streamError as any)?.message?.toLowerCase?.().includes("abort");
+        if (isAbort) {
+          const cancelledResponse = {
+            ...accumulatedResponse,
+            state: "cancelled",
+          };
+          setResponse(cancelledResponse);
+          handleResponse(cancelledResponse, callback, true);
+        } else {
+          const errorMessage =
+            streamError instanceof Error
+              ? streamError.message
+              : "Unknown stream error";
+
+          const errorResponse = {
+            ...accumulatedResponse,
+            state: "error",
+            error: errorMessage,
+          };
+          setResponse(errorResponse);
+
+          // Display the error in the terminal
+          callback(
+            <AiResponseMessage
+              messages={accumulatedResponse.messages || []}
+              editOperations={accumulatedResponse.editOperations || []}
+              finished={true}
+              error={errorMessage}
+            />,
+            true,
+          );
+        }
+        setIsRunning(false);
+        abortControllerRef.current = null;
       }
     } catch (error) {
       console.error("Error starting agent:", error);
       const errorMessage =
         error instanceof Error ? error.message : "Unknown error";
+
+      // Display error in the terminal
       const errorResponse = {
         messages: [...messages],
         editOperations: [],
@@ -805,10 +1210,36 @@ export function AiTerminal({
         error: errorMessage,
       };
       setResponse(errorResponse);
-      handleResponse(errorResponse, callback, true);
+
+      // Show the error in the terminal
+      callback(
+        <AiResponseMessage
+          messages={[]}
+          editOperations={[]}
+          finished={true}
+          error={errorMessage}
+        />,
+        true,
+      );
+
+      setIsRunning(false);
+      abortControllerRef.current = null;
     }
   }
 
+  // Stop button handler to cancel running agent and abort stream
+  const handleStop = async () => {
+    try {
+      if (!isRunning) return;
+      const context = createAiContext({ editContext });
+      await cancelAgent(agentId, context);
+    } catch (e) {
+      // Ignore cancel errors; still abort client-side stream
+    } finally {
+      abortControllerRef.current?.abort();
+    }
+  };
+
   useEffect(() => {
     TerminalService.on("command", commandHandler);
 
@@ -832,6 +1263,7 @@ export function AiTerminal({
               setResponseMessages([]);
               setResponse(undefined);
               setInitialTerminalMessages(undefined);
+              setTerminalError(null); // Clear any terminal errors
               // Generate a new agentId when clearing the terminal to start fresh
               setAgentId(crypto.randomUUID());
             }}
@@ -873,16 +1305,51 @@ export function AiTerminal({
             }
             prompt={prompt}
             setPrompt={setPrompt}
+            submitOverride={
+              isRunning ? (
+                <SimpleIconButton
+                  icon={<Square size={16} strokeWidth={1} />}
+                  label="Stop"
+                  onClick={handleStop}
+                  disabled={!isRunning}
+                />
+              ) : undefined
+            }
             statusbar=<div className="flex flex-1 items-center justify-between gap-1">
-              <a
-                className="ml-1 flex cursor-pointer items-center gap-1 text-xs"
-                onClick={() => {
-                  setShowPredefined(!showPredefined);
-                }}
-              >
-                <WizardIcon className="h-5 w-5" />
-                Predefined prompts
-              </a>
+              <Popover open={showPredefined} onOpenChange={setShowPredefined}>
+                <Tooltip delayDuration={500}>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <a className="ml-1 flex cursor-pointer items-center gap-1 text-xs">
+                        <WizardIcon className="text-theme-secondary h-5 w-5" />
+                      </a>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>Predefined prompts</TooltipContent>
+                </Tooltip>
+                <PopoverContent className="w-96 p-2" align="start" side="top">
+                  {activeProfile?.prompts?.length ? (
+                    <div className="flex max-h-64 flex-col gap-1 overflow-y-auto">
+                      {activeProfile.prompts.map((p, index) => (
+                        <div
+                          key={index}
+                          className="mb-1 cursor-pointer rounded-lg border border-gray-200 p-1.5 text-xs text-gray-700 hover:bg-gray-50"
+                          onClick={() => {
+                            setPrompt(p.prompt);
+                            setShowPredefined(false);
+                          }}
+                        >
+                          {p.title}
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="text-xs text-gray-500">
+                      No predefined prompts available
+                    </div>
+                  )}
+                </PopoverContent>
+              </Popover>
               {editContext.selection?.length > 0 && (
                 <div className="mr-2 flex items-center text-xs text-red-400">
                   {editContext.selection.length} items selected
@@ -895,23 +1362,6 @@ export function AiTerminal({
                   />
                 </div>
               )}
-              {showPredefined && (
-                <div className="absolute right-0 bottom-8 left-0 flex flex-col gap-1 overflow-y-auto bg-white p-3 pb-1 text-sm">
-                  {activeProfile &&
-                    activeProfile.prompts.map((p, index) => (
-                      <div
-                        key={index}
-                        className="mb-1 cursor-pointer rounded-lg border border-gray-200 p-1.5 text-xs text-gray-700"
-                        onClick={() => {
-                          setPrompt(p.prompt);
-                          setShowPredefined(false);
-                        }}
-                      >
-                        {p.title}
-                      </div>
-                    ))}
-                </div>
-              )}
             </div>
             toolbar=<div className="flex items-stretch gap-1">
               <div className="relative" ref={settingsRef}>
@@ -926,27 +1376,49 @@ export function AiTerminal({
                       <label className="text-xs font-medium text-gray-700">
                         Profile
                       </label>
-                      <Dropdown
-                        className="text-sm"
-                        value={activeProfile}
-                        onChange={(e) => setActiveProfile(e.value)}
-                        optionLabel="name"
-                        options={profiles}
-                      />
+                      <DropdownMenu>
+                        <DropdownMenuTrigger className="flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-xs hover:bg-gray-50 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                          <span>{activeProfile?.name || "Select profile"}</span>
+                          <ChevronDown size={16} strokeWidth={1} />
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="min-w-[200px]">
+                          {profiles.map((profile) => (
+                            <DropdownMenuItem
+                              key={profile.id}
+                              onClick={() => setActiveProfile(profile)}
+                              className="cursor-pointer"
+                            >
+                              {profile.name}
+                            </DropdownMenuItem>
+                          ))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     </div>
                     {activeProfile && (
                       <div className="flex flex-col gap-1">
                         <label className="text-xs font-medium text-gray-700">
                           Model
                         </label>
-                        <Dropdown
-                          className="text-sm"
-                          value={model}
-                          onChange={(e) => setModel(e.value)}
-                          options={activeProfile.models}
-                          optionLabel="name"
-                          optionValue="id"
-                        />
+                        <DropdownMenu>
+                          <DropdownMenuTrigger className="flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-xs hover:bg-gray-50 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                            <span>
+                              {activeProfile.models.find((m) => m.id === model)
+                                ?.name || "Select model"}
+                            </span>
+                            <ChevronDown size={16} strokeWidth={1} />
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent className="min-w-[200px]">
+                            {activeProfile.models.map((modelOption) => (
+                              <DropdownMenuItem
+                                key={modelOption.id}
+                                onClick={() => setModel(modelOption.id)}
+                                className="cursor-pointer"
+                              >
+                                {modelOption.name}
+                              </DropdownMenuItem>
+                            ))}
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       </div>
                     )}
                   </div>
@@ -959,6 +1431,32 @@ export function AiTerminal({
             }}
           />
         </div>
+        {/* Display terminal errors prominently */}
+        {terminalError && (
+          <div className="bg-opacity-95 absolute inset-0 z-10 flex items-center justify-center bg-white">
+            <div className="mx-4 max-w-md rounded-lg border-l-4 border-red-500 bg-red-50 p-4 shadow-md">
+              <div className="flex items-start">
+                <div className="flex-shrink-0">
+                  <div className="h-5 w-5 text-red-400">⚠️</div>
+                </div>
+                <div className="ml-3 flex-1">
+                  <h3 className="text-sm font-medium text-red-800">
+                    Agent Error
+                  </h3>
+                  <p className="mt-1 text-sm text-red-700">{terminalError}</p>
+                  <div className="mt-3">
+                    <button
+                      onClick={() => setTerminalError(null)}
+                      className="rounded bg-red-100 px-3 py-1 text-xs font-medium text-red-800 hover:bg-red-200"
+                    >
+                      Dismiss
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
         {activeProfile?.errorMessage && (
           <div className="absolute inset-0 grid items-center justify-center p-2 text-sm text-red-500">
             {activeProfile?.errorMessage}