@alpaca-editor/core 1.0.4026 → 1.0.4030

package/src/editor/ai/AiTerminal.tsx

@@ -10,14 +10,24 @@ import { Dropdown } from "primereact/dropdown";
 
 import { WizardIcon } from "../ui/Icons";
 import { AiResponseMessage } from "./AiResponseMessage";
+import { AiProfile, loadAiProfiles } from "../services/aiService";
 import {
-  AiProfile,
-  loadAiProfiles,
-  executePrompt,
-} from "../services/aiService";
+  startAgent,
+  connectToAgentStream,
+  getAgentStatus,
+  getRunningAgents,
+  getAgent,
+  getAgents,
+  getChatHistory,
+  cancelAgent,
+  AgentStreamMessageType,
+  StartAgentRequest,
+  AgentStreamMessage,
+} from "../services/agentService";
 import { EditOperation } from "../../types";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Settings } from "lucide-react";
+import { AgentCostDisplay } from "./AgentCostDisplay";
 
 type Response = {
   messages: Message[];
@@ -26,6 +36,15 @@ type Response = {
   numOutputTokens: number;
   numCachedTokens: number;
   state: string;
+  agentName?: string; // Updated agent name (only sent when the agent name has been updated)
+  // Cost information from backend
+  totalCost?: number;
+  totalInputTokenCost?: number;
+  totalOutputTokenCost?: number;
+  totalCachedTokenCost?: number;
+  totalInputTokens?: number;
+  totalOutputTokens?: number;
+  totalCachedTokens?: number;
 };
 
 export type ToolCall = {
@@ -47,9 +66,22 @@ export type Message = {
   tool_call_id?: string; // For tool response messages
 };
 
+// Helper function to format message content
+function formatMessageContent(content: string): string {
+  return (
+    content
+      ?.trim()
+      ?.replaceAll("\n", "<br>")
+      ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") // Bold markdown
+      ?.replace(
+        /\[([^\]]+)\]\(([^)]+)\)/g,
+        '<a href="$2" target="_blank" class="text-blue-500" rel="noopener noreferrer">$1</a>',
+      ) || "" // Links
+  );
+}
+
 export type AiContext = {
   promptData: any;
-  endpoint: string;
   callback?: (response: Response) => void;
 };
 
@@ -57,6 +89,15 @@ export type AiTerminalOptions = {
   initialPrompt?: string;
   hiddenSystemPrompt?: string;
   initialMessages?: Message[];
+  agentId?: string;
+  // Cost information for loaded agent sessions
+  totalCost?: number;
+  totalInputTokenCost?: number;
+  totalOutputTokenCost?: number;
+  totalCachedTokenCost?: number;
+  totalInputTokens?: number;
+  totalOutputTokens?: number;
+  totalCachedTokens?: number;
 };
 
 export function AiTerminal({
@@ -64,11 +105,13 @@ export function AiTerminal({
   createAiContext,
   defaultProfile,
   options,
+  onAgentNameUpdate,
 }: {
   closeButton?: React.ReactNode;
   createAiContext: ({ editContext }: { editContext: any }) => AiContext;
   defaultProfile?: string;
   options?: AiTerminalOptions;
+  onAgentNameUpdate?: (name: string) => void;
 }) {
   const editContext = useEditContext();
   const [showPredefined, setShowPredefined] = useState(false);
@@ -84,7 +127,9 @@ export function AiTerminal({
   const [profiles, setProfiles] = useState<AiProfile[]>([]);
   const [activeProfile, setActiveProfile] = useState<AiProfile>();
   const [initialPromptExecuted, setInitialPromptExecuted] = useState(false);
-  const [agentId] = useState<string>(() => crypto.randomUUID());
+  const [agentId, setAgentId] = useState<string>(
+    () => options?.agentId || crypto.randomUUID(),
+  );
   const selection = editContext.selection;
   const terminalRef = useRef<{ submit: () => void }>(null);
   const [responseMessages, setResponseMessages] = useState<Message[]>(
@@ -147,11 +192,7 @@ export function AiTerminal({
 
       // Format the initial messages for display
       const formattedMessages = options.initialMessages.map((message) => {
-        const formattedContent =
-          message.content
-            ?.trim()
-            ?.replaceAll("\n", "<br>")
-            ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
+        const formattedContent = formatMessageContent(message.content || "");
 
         return {
           ...message,
@@ -161,8 +202,6 @@ export function AiTerminal({
         };
       });
 
-      console.log("AiTerminal: Formatted messages", formattedMessages);
-
       // Update the internal message states
       setMessages(formattedMessages);
       setResponseMessages(formattedMessages);
@@ -171,52 +210,85 @@ export function AiTerminal({
       const initialResponse: Response = {
         messages: formattedMessages,
         editOperations: [],
-        numInputTokens: 0,
-        numOutputTokens: 0,
-        numCachedTokens: 0,
+        numInputTokens: options?.totalInputTokens || 0,
+        numOutputTokens: options?.totalOutputTokens || 0,
+        numCachedTokens: options?.totalCachedTokens || 0,
         state: "loaded",
+        // Include cost information from loaded agent session
+        totalCost: options?.totalCost,
+        totalInputTokenCost: options?.totalInputTokenCost,
+        totalOutputTokenCost: options?.totalOutputTokenCost,
+        totalCachedTokenCost: options?.totalCachedTokenCost,
+        totalInputTokens: options?.totalInputTokens,
+        totalOutputTokens: options?.totalOutputTokens,
+        totalCachedTokens: options?.totalCachedTokens,
       };
 
-      console.log("AiTerminal: Setting response", initialResponse);
       setResponse(initialResponse);
 
       // Create individual Terminal messages for each conversation message
       const terminalMessages: TerminalMessage[] = [];
 
-      formattedMessages.forEach((message) => {
+      // Group messages by conversation turns (user + assistant pairs)
+      let i = 0;
+      while (i < formattedMessages.length) {
+        const message = formattedMessages[i];
+        if (!message) {
+          i++;
+          continue;
+        }
+
         if (message.role === "user") {
           // User messages appear as commands
           terminalMessages.push({
             type: "command",
             text: message.content,
           });
+          i++;
+
+          // Look for following assistant messages to group together
+          const assistantMessages: Message[] = [];
+          while (i < formattedMessages.length) {
+            const assistantMessage = formattedMessages[i];
+            if (assistantMessage && assistantMessage.role === "assistant") {
+              assistantMessages.push(assistantMessage);
+              i++;
+            } else {
+              break;
+            }
+          }
+
+          // If we have assistant messages, render them with AiResponseMessage
+          if (assistantMessages.length > 0) {
+            terminalMessages.push({
+              type: "response",
+              text: (
+                <AiResponseMessage
+                  messages={assistantMessages}
+                  editOperations={[]} // No edit operations for historical messages
+                  finished={true}
+                />
+              ),
+            });
+          }
         } else if (message.role === "assistant") {
-          // Assistant messages appear as responses
+          // Handle standalone assistant messages
           terminalMessages.push({
             type: "response",
             text: (
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: message.formattedContent || message.content || "",
-                }}
+              <AiResponseMessage
+                messages={[message]}
+                editOperations={[]} // No edit operations for historical messages
+                finished={true}
               />
             ),
           });
+          i++;
+        } else {
+          // Skip other message types (like tool messages)
+          i++;
         }
-        // Add tool calls if present
-        if (message.tool_calls && message.tool_calls.length > 0) {
-          message.tool_calls.forEach((toolCall) => {
-            terminalMessages.push({
-              type: "response",
-              text: (
-                <div className="text-xs text-gray-1">
-                  🔧 {toolCall.displayName}
-                </div>
-              ),
-            })
-          });
-        }
-      });
+      }
 
       setInitialTerminalMessages(terminalMessages);
     }
@@ -251,11 +323,7 @@ export function AiTerminal({
     // Replace the conversation history with the authoritative response from AI
     if (updatedMessages && Array.isArray(updatedMessages)) {
       const formattedMessages = updatedMessages.map((message) => {
-        const formattedContent =
-          message.content
-            ?.trim()
-            ?.replaceAll("\n", "<br>")
-            ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
+        const formattedContent = formatMessageContent(message.content || "");
 
         return {
           ...message,
@@ -304,12 +372,10 @@ export function AiTerminal({
 
     const context = createAiContext({ editContext });
 
-    let lastOpIndex = 0;
     const selectedText = editContext?.selectedRange?.text || null;
     if (!activeProfile || !model) return;
 
-    // Build complete message history for API call
-    const conversationHistory = [...messagesRef.current, userMessage];
+    // Only send the new user message - message history will be loaded from database
     const messages = [
       ...(options?.hiddenSystemPrompt
         ? [
@@ -322,44 +388,425 @@ export function AiTerminal({
             },
           ]
         : []),
-      ...conversationHistory,
+      userMessage, // Send only the new user message
     ];
 
-    const response = await executePrompt(
-      messages,
-      context,
-      {
+    // Update local state to include the new user message for UI display
+    setMessages((prevMessages) => [...prevMessages, userMessage]);
+    setResponseMessages((prevMessages) => [...prevMessages, userMessage]);
+
+    try {
+      // Step 1: Start the agent execution
+      const startRequest: StartAgentRequest = {
+        agentId,
+        messages,
+        sessionId: editContext!.sessionId,
         profileId: activeProfile.id,
-        selection,
-        selectedText,
         model,
-        sessionId: editContext!.sessionId,
-        agentId,
+        itemid: context.promptData.itemid,
+        language: context.promptData.language,
+        version: context.promptData.version,
+        selection,
+        selectedText: selectedText || undefined,
+        allowedFunctions: context.promptData.allowedFunctions,
+        addContextContent: context.promptData.addContextContent,
+        addAllContent: context.promptData.addAllContent,
         addSelectedComponents: true,
-      },
-      undefined,
-      (response: any) => {
-        setResponse(response);
-        handleResponse(response, callback, false);
-      },
-    );
-
-    if (response) {
-      handleResponse(response, callback, true);
-      if (context.callback) context.callback(response);
-      editContext?.requestRefresh("immediate");
-    }
+        profile: activeProfile.name,
+      };
 
-    // if (response?.responseText)
-    //   newMessages.push({
-    //     content: response.responseText,
-    //     role: "assistant",
-    //     name: "assistant",
-    //   });
+      const startResponse = await startAgent(startRequest, context);
+      console.log("Agent started:", startResponse);
 
-    setResponse(response ? response : undefined);
+      // Step 2: Connect to the agent stream for real-time updates
+      const abortController = new AbortController();
+      let accumulatedResponse: any = {
+        messages: [...messages],
+        editOperations: [],
+        numInputTokens: 0,
+        numOutputTokens: 0,
+        numCachedTokens: 0,
+        state: "running",
+      };
+      let completionProcessed = false;
+
+      try {
+        console.log("Connecting to agent stream");
+        await connectToAgentStream(
+          agentId,
+          context,
+          (streamMessage) => {
+            // console.log(
+            //   "Stream message:",
+            //   streamMessage,
+            //   new Date().toISOString(),
+            // );
+
+            // Message types are now normalized in agentService.ts
+            switch (streamMessage.type) {
+              case AgentStreamMessageType.StatusUpdate:
+                //console.log("Status update:", streamMessage.data);
+                break;
+
+              case AgentStreamMessageType.ContentChunk:
+                if (streamMessage.data) {
+                  // Handle incremental content updates
+                  if (
+                    streamMessage.data.isIncremental &&
+                    streamMessage.data.deltaContent
+                  ) {
+                    // Find the last assistant message to append delta content to
+                    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, callback, false);
+                }
+                break;
+
+              case AgentStreamMessageType.ToolCall:
+                //  console.log("Tool call received:", streamMessage.data);
+                if (streamMessage.data) {
+                  // Find or create the assistant message that contains this tool call
+                  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, create one
+                  if (!lastAssistantMessage) {
+                    lastAssistantMessage = {
+                      id: crypto.randomUUID(),
+                      role: "assistant",
+                      name: "assistant",
+                      content: "",
+                      tool_calls: [],
+                    };
+                    updatedMessages.push(lastAssistantMessage);
+                    lastAssistantIndex = updatedMessages.length - 1;
+                  }
+
+                  // Add or update the tool call
+                  const toolCall = {
+                    id: streamMessage.data.id,
+                    displayName: streamMessage.data.displayName,
+                    function: {
+                      name:
+                        streamMessage.data.function?.name ||
+                        streamMessage.data.name,
+                      arguments:
+                        streamMessage.data.function?.arguments ||
+                        streamMessage.data.arguments,
+                    },
+                  };
+
+                  // Update or add the tool call to the assistant message
+                  const existingToolCalls =
+                    lastAssistantMessage.tool_calls || [];
+                  const existingIndex = existingToolCalls.findIndex(
+                    (tc: any) => tc.id === toolCall.id,
+                  );
+
+                  let updatedToolCalls;
+                  if (existingIndex >= 0) {
+                    // Update existing tool call
+                    updatedToolCalls = [...existingToolCalls];
+                    updatedToolCalls[existingIndex] = toolCall;
+                  } else {
+                    // Add new tool call
+                    updatedToolCalls = [...existingToolCalls, toolCall];
+                  }
+
+                  // Update the assistant message with the tool call
+                  updatedMessages[lastAssistantIndex] = {
+                    ...lastAssistantMessage,
+                    tool_calls: updatedToolCalls,
+                  };
+
+                  // Update accumulated response
+                  accumulatedResponse = {
+                    ...accumulatedResponse,
+                    messages: updatedMessages,
+                  };
+
+                  // Trigger UI update to show the tool call
+                  handleResponse(accumulatedResponse, callback, false);
+                }
+                break;
+
+              case AgentStreamMessageType.ToolResult:
+                console.log("Tool result received:", streamMessage.data);
+                if (streamMessage.data) {
+                  // Find the assistant message and tool call to update with the result
+                  const updatedMessages = [
+                    ...(accumulatedResponse.messages || []),
+                  ];
+
+                  // Find the assistant message with the matching tool call ID
+                  for (let i = updatedMessages.length - 1; i >= 0; i--) {
+                    if (
+                      updatedMessages[i].role === "assistant" &&
+                      updatedMessages[i].tool_calls
+                    ) {
+                      const toolCalls = updatedMessages[i].tool_calls || [];
+                      const toolCallIndex = toolCalls.findIndex(
+                        (tc: any) => tc.id === streamMessage.data.toolCallId,
+                      );
+
+                      if (toolCallIndex >= 0) {
+                        // Update the tool call with the result
+                        const updatedToolCalls = [...toolCalls];
+                        updatedToolCalls[toolCallIndex] = {
+                          ...updatedToolCalls[toolCallIndex],
+                          function: {
+                            ...updatedToolCalls[toolCallIndex].function,
+                            result: streamMessage.data.result,
+                          },
+                        };
+
+                        // Update the message
+                        updatedMessages[i] = {
+                          ...updatedMessages[i],
+                          tool_calls: updatedToolCalls,
+                        };
+                        break;
+                      }
+                    }
+                  }
+
+                  // Update accumulated response
+                  accumulatedResponse = {
+                    ...accumulatedResponse,
+                    messages: updatedMessages,
+                  };
+
+                  // Trigger UI update to show the tool result
+                  handleResponse(accumulatedResponse, callback, false);
+                }
+                break;
+
+              case AgentStreamMessageType.Completed:
+                if (streamMessage.data) {
+                  // Final completion data
+                  const finalResponse = {
+                    messages:
+                      streamMessage.data.messages ||
+                      accumulatedResponse.messages,
+                    editOperations:
+                      streamMessage.data.editOperations ||
+                      accumulatedResponse.editOperations,
+                    numInputTokens:
+                      streamMessage.data.tokenUsage?.inputTokens ||
+                      accumulatedResponse.numInputTokens,
+                    numOutputTokens:
+                      streamMessage.data.tokenUsage?.outputTokens ||
+                      accumulatedResponse.numOutputTokens,
+                    numCachedTokens:
+                      streamMessage.data.tokenUsage?.cachedTokens ||
+                      accumulatedResponse.numCachedTokens,
+                    state: "completed",
+                    agentName: streamMessage.data.agentName,
+                    // Add cost fields from backend (try both tokenUsage object and direct properties)
+                    totalCost:
+                      streamMessage.data.totalCost ||
+                      streamMessage.data.tokenUsage?.totalCost,
+                    totalInputTokenCost:
+                      streamMessage.data.totalInputTokenCost ||
+                      streamMessage.data.tokenUsage?.inputTokenCost,
+                    totalOutputTokenCost:
+                      streamMessage.data.totalOutputTokenCost ||
+                      streamMessage.data.tokenUsage?.outputTokenCost,
+                    totalCachedTokenCost:
+                      streamMessage.data.totalCachedTokenCost ||
+                      streamMessage.data.tokenUsage?.cachedTokenCost,
+                    totalInputTokens:
+                      streamMessage.data.totalInputTokens ||
+                      streamMessage.data.tokenUsage?.inputTokens,
+                    totalOutputTokens:
+                      streamMessage.data.totalOutputTokens ||
+                      streamMessage.data.tokenUsage?.outputTokens,
+                    totalCachedTokens:
+                      streamMessage.data.totalCachedTokens ||
+                      streamMessage.data.tokenUsage?.cachedTokens,
+                  };
+
+                  completionProcessed = true;
+                  setResponse(finalResponse);
+
+                  // On completion, just update the internal state and call the final callback
+                  // Don't call handleResponse again as it would duplicate the message
+                  // The Terminal component will clear the streaming response and add it to the message history
+                  const formattedMessages = (finalResponse.messages || []).map(
+                    (message: any) => {
+                      const formattedContent = formatMessageContent(
+                        message.content || "",
+                      );
+
+                      return {
+                        ...message,
+                        content: message.content || "",
+                        formattedContent: formattedContent,
+                        tool_calls: message.tool_calls || [],
+                      };
+                    },
+                  );
+
+                  // Update internal state without triggering a new render via handleResponse
+                  setMessages([...formattedMessages]);
+                  setResponseMessages([...formattedMessages]);
+
+                  // Only call the terminal callback to mark completion (this will add to history)
+                  callback(
+                    <AiResponseMessage
+                      messages={formattedMessages}
+                      editOperations={finalResponse.editOperations}
+                      finished={true}
+                    />,
+                    true,
+                  );
+
+                  // Handle agent name update
+                  if (finalResponse.agentName && onAgentNameUpdate) {
+                    onAgentNameUpdate(finalResponse.agentName);
+                  }
+
+                  if (context.callback) context.callback(finalResponse);
+                  //editContext?.requestRefresh("immediate");
+                }
+                break;
+
+              case AgentStreamMessageType.Error:
+                console.error("Agent execution error:", streamMessage.error);
+                const errorResponse = {
+                  ...accumulatedResponse,
+                  state: "error",
+                  error: streamMessage.error,
+                };
+                setResponse(errorResponse);
+                handleResponse(errorResponse, callback, true);
+                break;
+
+              default:
+                console.log(
+                  "Unhandled stream message type:",
+                  streamMessage.type,
+                );
+                break;
+            }
+          },
+          abortController.signal,
+        );
 
-    // setMessages(newMessages);
+        // If we reach here, the stream ended without a Completed message
+        if (!completionProcessed) {
+          //    console.log("Stream ended without Completed message, cleaning up");
+          const finalResponse = {
+            ...accumulatedResponse,
+            state: "completed",
+          };
+          setResponse(finalResponse);
+          handleResponse(finalResponse, callback, true);
+        }
+      } 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);
+      }
+    } catch (error) {
+      console.error("Error starting agent:", error);
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      const errorResponse = {
+        messages: [...messages],
+        editOperations: [],
+        numInputTokens: 0,
+        numOutputTokens: 0,
+        numCachedTokens: 0,
+        state: "error",
+        error: errorMessage,
+      };
+      setResponse(errorResponse);
+      handleResponse(errorResponse, callback, true);
+    }
   }
 
   useEffect(() => {
@@ -385,22 +832,44 @@ export function AiTerminal({
               setResponseMessages([]);
               setResponse(undefined);
               setInitialTerminalMessages(undefined);
+              // Generate a new agentId when clearing the terminal to start fresh
+              setAgentId(crypto.randomUUID());
             }}
             initialMessages={initialTerminalMessages}
             infobar={
-              response?.numInputTokens && response?.numInputTokens > 0 ? (
-                <div
-                  className="text-right text-gray-400"
-                  style={{ fontSize: "10px" }}
-                >
-                  Tokens in: {response?.numInputTokens?.toLocaleString()} out:{" "}
-                  {response?.numOutputTokens?.toLocaleString()}{" "}
-                  {response?.numCachedTokens
-                    ? `cached: ${response?.numCachedTokens?.toLocaleString()} `
-                    : ""}
-                  {response?.state}
-                </div>
-              ) : null
+              <AgentCostDisplay
+                response={
+                  response
+                    ? {
+                        numInputTokens: response.numInputTokens,
+                        numOutputTokens: response.numOutputTokens,
+                        numCachedTokens: response.numCachedTokens,
+                        totalCost: response.totalCost,
+                        inputCost: response.totalInputTokenCost,
+                        outputCost: response.totalOutputTokenCost,
+                        cachedCost: response.totalCachedTokenCost,
+                      }
+                    : null
+                }
+                totalTokens={
+                  response
+                    ? {
+                        input:
+                          response.totalInputTokens || response.numInputTokens,
+                        output:
+                          response.totalOutputTokens ||
+                          response.numOutputTokens,
+                        cached:
+                          response.totalCachedTokens ||
+                          response.numCachedTokens,
+                        totalCost: response.totalCost || 0,
+                        inputCost: response.totalInputTokenCost || 0,
+                        outputCost: response.totalOutputTokenCost || 0,
+                        cachedCost: response.totalCachedTokenCost || 0,
+                      }
+                    : undefined
+                }
+              />
             }
             prompt={prompt}
             setPrompt={setPrompt}
@@ -475,6 +944,8 @@ export function AiTerminal({
                           value={model}
                           onChange={(e) => setModel(e.value)}
                           options={activeProfile.models}
+                          optionLabel="name"
+                          optionValue="id"
                         />
                       </div>
                     )}