@alpaca-editor/core 1.0.4132 → 1.0.4134

package/src/editor/ai/AgentTerminal.tsx

@@ -88,10 +88,116 @@ interface TodoItem {
   text: string;
   done?: boolean;
   note?: string;
-  messageId: string;
+  messageId?: string;
   sourceTitle?: string;
 }
 
+// Helper to extract todos from potentially incomplete JSON during streaming
+const extractPartialTodos = (jsonText: string): any[] => {
+  // First try to parse complete JSON
+  try {
+    const parsed = JSON.parse(jsonText);
+    return Array.isArray(parsed) ? parsed : parsed?.items || [];
+  } catch (e) {
+    // If JSON is incomplete, try to extract whatever todo items we can find
+    const items: any[] = [];
+
+    // Look for individual todo objects in the partial JSON
+    // Match patterns like: { "text": "...", "done": false, "note": "..." }
+    // Handle various field orderings (text can be anywhere in the object)
+    const textPattern = /"text"\s*:\s*"([^"]+)"/g;
+    const textMatches: Array<{ text: string; startIdx: number }> = [];
+    let textMatch;
+    while ((textMatch = textPattern.exec(jsonText)) !== null) {
+      if (textMatch[1]) {
+        textMatches.push({
+          text: textMatch[1],
+          startIdx: textMatch.index,
+        });
+      }
+    }
+
+    // For each text field found, try to find the enclosing object
+    for (const { text, startIdx } of textMatches) {
+      // Find the opening brace before this text field
+      let openBrace = -1;
+      for (let i = startIdx - 1; i >= 0; i--) {
+        if (jsonText[i] === "{") {
+          openBrace = i;
+          break;
+        }
+        if (jsonText[i] === "}") break; // Hit another object's end
+      }
+
+      if (openBrace === -1) continue;
+
+      // Find the closing brace after this text field
+      let closeBrace = -1;
+      let depth = 0;
+      for (let i = openBrace; i < jsonText.length; i++) {
+        if (jsonText[i] === "{") depth++;
+        if (jsonText[i] === "}") {
+          depth--;
+          if (depth === 0) {
+            closeBrace = i;
+            break;
+          }
+        }
+      }
+
+      // Extract the object and try to parse it
+      const objStr =
+        closeBrace !== -1
+          ? jsonText.substring(openBrace, closeBrace + 1)
+          : jsonText.substring(openBrace) + "}"; // Try to close incomplete object
+
+      try {
+        const obj = JSON.parse(objStr);
+        if (obj.text) {
+          items.push({
+            text: obj.text,
+            done: obj.done === true,
+            note: obj.note || undefined,
+          });
+        }
+      } catch (e) {
+        // Skip malformed objects
+      }
+    }
+
+    // Also try to extract from partial objects at the end
+    // Look for the last opening brace and try to parse up to where we have valid content
+    const lines = jsonText.split("\n");
+    for (let i = lines.length - 1; i >= 0; i--) {
+      const partialJson = lines.slice(0, i + 1).join("\n");
+      // Try to close any open braces/brackets
+      let testJson = partialJson;
+      const openBraces = (testJson.match(/\{/g) || []).length;
+      const closeBraces = (testJson.match(/\}/g) || []).length;
+      const openBrackets = (testJson.match(/\[/g) || []).length;
+      const closeBrackets = (testJson.match(/\]/g) || []).length;
+
+      // Add missing closing characters
+      testJson += "]".repeat(openBrackets - closeBrackets);
+      testJson += "}".repeat(openBraces - closeBraces);
+
+      try {
+        const parsed = JSON.parse(testJson);
+        const partialItems = Array.isArray(parsed)
+          ? parsed
+          : parsed?.items || [];
+        if (partialItems.length > items.length) {
+          return partialItems;
+        }
+      } catch (e) {
+        continue;
+      }
+    }
+
+    return items;
+  }
+};
+
 const extractTodosFromMessages = (messages: AgentChatMessage[]): TodoItem[] => {
   const todos: TodoItem[] = [];
   const fencedTodoToken = "```todo_list";
@@ -126,12 +232,20 @@ const extractTodosFromMessages = (messages: AgentChatMessage[]): TodoItem[] => {
 
       try {
         let jsonText = "";
+        let isComplete = true;
+
         if (isFenced) {
           const afterToken = todoStart + fencedTodoToken.length;
           const closePos = content.indexOf("```", afterToken);
-          if (closePos === -1) break;
-          jsonText = content.slice(afterToken, closePos).trim();
-          cursor = closePos + 3;
+          if (closePos === -1) {
+            // Incomplete fenced block - extract what we have so far
+            jsonText = content.slice(afterToken).trim();
+            isComplete = false;
+            cursor = content.length; // Process till end
+          } else {
+            jsonText = content.slice(afterToken, closePos).trim();
+            cursor = closePos + 3;
+          }
         } else {
           const afterToken = todoStart + plainTodoToken.length;
           const braceStart = content.indexOf("{", afterToken);
@@ -149,24 +263,56 @@ const extractTodosFromMessages = (messages: AgentChatMessage[]): TodoItem[] => {
               }
             }
           }
-          if (braceEnd === -1) break;
-          jsonText = content.slice(braceStart, braceEnd + 1).trim();
-          cursor = braceEnd + 1;
+
+          if (braceEnd === -1) {
+            // Incomplete JSON - extract what we have
+            jsonText = content.slice(braceStart).trim();
+            isComplete = false;
+            cursor = content.length;
+          } else {
+            jsonText = content.slice(braceStart, braceEnd + 1).trim();
+            cursor = braceEnd + 1;
+          }
         }
 
-        const parsed = JSON.parse(jsonText);
-        const todoItems = Array.isArray(parsed) ? parsed : parsed?.items || [];
-        const title = Array.isArray(parsed) ? undefined : parsed?.title;
+        // Use the partial extraction helper for incomplete JSON
+        const todoItems = isComplete
+          ? (() => {
+              try {
+                const parsed = JSON.parse(jsonText);
+                return Array.isArray(parsed) ? parsed : parsed?.items || [];
+              } catch (e) {
+                return [];
+              }
+            })()
+          : extractPartialTodos(jsonText);
+
+        const title = (() => {
+          try {
+            const parsed = JSON.parse(jsonText);
+            return Array.isArray(parsed) ? undefined : parsed?.title;
+          } catch (e) {
+            return undefined;
+          }
+        })();
 
         todoItems.forEach((item: any) => {
           if (!item) return;
           const text =
-            item.text || item.label || String(item.task || item.title || "");
+            item.text ||
+            item.content ||
+            item.label ||
+            String(item.task || item.title || "");
           if (!text) return;
           todos.push({
             id: item.id,
             text,
-            done: !!(item.done ?? item.completed ?? item.checked),
+            done: !!(
+              item.done ??
+              item.completed ??
+              item.checked ??
+              item.status === "completed"
+            ),
             note: item.note || item.description,
             messageId: message.id,
             sourceTitle: title,
@@ -183,22 +329,101 @@ const extractTodosFromMessages = (messages: AgentChatMessage[]): TodoItem[] => {
 };
 
 // TodoListPanel component
-const TodoListPanel = ({ messages }: { messages: AgentChatMessage[] }) => {
+const TodoListPanel = ({
+  messages,
+  agentMetadata,
+}: {
+  messages: AgentChatMessage[];
+  agentMetadata: AgentMetadata | null;
+}) => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const todos = useMemo(() => extractTodosFromMessages(messages), [messages]);
 
-  // Check if there's an active streaming message with todo content
+  const todos = useMemo(() => {
+    // First try to get todos from agent metadata (real-time updates)
+    const metadataTodos = (() => {
+      try {
+        const context = (agentMetadata as any)?.additionalData?.context;
+        const todoList = context?.todoList;
+        if (todoList?.items && Array.isArray(todoList.items)) {
+          return todoList.items
+            .map((item: any, idx: number) => ({
+              id: item.id || `metadata-${idx}`,
+              text:
+                item.text ||
+                item.label ||
+                String(item.task || item.title || ""),
+              done: !!(item.done ?? item.completed ?? item.checked),
+              note: item.note || item.description,
+              messageId: undefined,
+              sourceTitle: todoList.title,
+            }))
+            .filter((item: any) => item.text);
+        }
+      } catch (e) {
+        // Fallback to extracting from messages
+      }
+      return null;
+    })();
+
+    // If we have metadata todos, use them; otherwise extract from messages
+    if (metadataTodos && metadataTodos.length > 0) {
+      return metadataTodos;
+    }
+
+    return extractTodosFromMessages(messages);
+  }, [messages, agentMetadata]);
+
+  // Check if there's an active streaming message with incomplete todo content
   const isUpdating = useMemo(() => {
     return messages.some((msg) => {
       if (msg.role !== "assistant" || msg.isCompleted) return false;
       const content = msg.content || "";
-      return content.includes("```todo_list") || content.includes("todo_list");
+
+      // Check for incomplete fenced todo blocks
+      const fencedStart = content.indexOf("```todo_list");
+      if (fencedStart !== -1) {
+        const afterStart = fencedStart + "```todo_list".length;
+        const closePos = content.indexOf("```", afterStart);
+        if (closePos === -1) {
+          // Incomplete fenced block
+          return true;
+        }
+      }
+
+      // Check for incomplete plain todo blocks
+      const plainStart = content.indexOf("todo_list");
+      if (plainStart !== -1 && plainStart !== fencedStart) {
+        const before = plainStart > 0 ? content[plainStart - 1] : "\n";
+        if (before === "\n" || before === "\r" || plainStart === 0) {
+          const braceStart = content.indexOf("{", plainStart);
+          if (braceStart !== -1) {
+            let depth = 0;
+            let braceEnd = -1;
+            for (let i = braceStart; i < content.length; i++) {
+              if (content[i] === "{") depth++;
+              if (content[i] === "}") {
+                depth--;
+                if (depth === 0) {
+                  braceEnd = i;
+                  break;
+                }
+              }
+            }
+            if (braceEnd === -1) {
+              // Incomplete plain block
+              return true;
+            }
+          }
+        }
+      }
+
+      return false;
     });
   }, [messages]);
 
   if (todos.length === 0 && !isUpdating) return null;
 
-  const completedCount = todos.filter((t) => t.done).length;
+  const completedCount = todos.filter((t: TodoItem) => t.done).length;
   const totalCount = todos.length;
 
   return (
@@ -229,66 +454,69 @@ const TodoListPanel = ({ messages }: { messages: AgentChatMessage[] }) => {
       </button>
       {isExpanded && (
         <div className="max-h-64 overflow-y-auto px-4 pb-3">
-          {isUpdating && todos.length === 0 ? (
-            <div className="flex items-center justify-center gap-2 py-4 text-xs text-gray-500">
-              <Loader2 className="h-4 w-4 animate-spin" strokeWidth={1} />
-              <span>Loading todo list...</span>
-            </div>
-          ) : (
-            <>
-              <div className="space-y-1.5">
-                {todos.map((todo, idx) => (
-                  <div
-                    key={todo.id || `${todo.messageId}-${idx}`}
-                    className="flex items-start gap-2 rounded bg-white p-2 text-xs"
-                  >
-                    <div className="flex-shrink-0 pt-0.5">
-                      {todo.done ? (
-                        <div className="flex h-4 w-4 items-center justify-center rounded border-2 border-green-500 bg-green-500">
-                          <svg
-                            className="h-3 w-3 text-white"
-                            fill="none"
-                            strokeWidth={2}
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M5 13l4 4L19 7"
-                            />
-                          </svg>
-                        </div>
-                      ) : (
-                        <div className="h-4 w-4 rounded border-2 border-gray-300" />
-                      )}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <div
-                        className={`${
-                          todo.done
-                            ? "text-gray-500 line-through"
-                            : "text-gray-900"
-                        }`}
-                      >
-                        {todo.text}
+          {todos.length > 0 && (
+            <div className="space-y-1.5">
+              {todos.map((todo: TodoItem, idx: number) => (
+                <div
+                  key={todo.id || `${todo.messageId}-${idx}`}
+                  className="flex items-start gap-2 rounded bg-white p-2 text-xs"
+                >
+                  <div className="flex-shrink-0 pt-0.5">
+                    {todo.done ? (
+                      <div className="flex h-4 w-4 items-center justify-center rounded border-2 border-green-500 bg-green-500">
+                        <svg
+                          className="h-3 w-3 text-white"
+                          fill="none"
+                          strokeWidth={2}
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
                       </div>
-                      {todo.note && (
-                        <div className="mt-0.5 text-xs text-gray-500">
-                          {todo.note}
-                        </div>
-                      )}
+                    ) : (
+                      <div className="h-4 w-4 rounded border-2 border-gray-300" />
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div
+                      className={`${
+                        todo.done
+                          ? "text-gray-500 line-through"
+                          : "text-gray-900"
+                      }`}
+                    >
+                      {todo.text}
                     </div>
+                    {todo.note && (
+                      <div className="mt-0.5 text-xs text-gray-500">
+                        {todo.note}
+                      </div>
+                    )}
                   </div>
-                ))}
-              </div>
-              {isUpdating && todos.length > 0 && (
-                <div className="mt-2 flex items-center gap-2 rounded bg-blue-50 px-3 py-2 text-xs text-blue-700">
-                  <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1} />
-                  <span>Updating todo list...</span>
                 </div>
-              )}
-            </>
+              ))}
+            </div>
+          )}
+          {isUpdating && (
+            <div
+              className={`flex items-center gap-2 rounded px-3 py-2 text-xs ${
+                todos.length > 0
+                  ? "mt-2 bg-blue-50 text-blue-700"
+                  : "justify-center bg-white text-gray-500"
+              }`}
+            >
+              <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1} />
+              <span>
+                {todos.length > 0
+                  ? "Updating todo list..."
+                  : "Loading todo list..."}
+              </span>
+            </div>
           )}
         </div>
       )}
@@ -423,7 +651,7 @@ export function AgentTerminal({
   const [messages, setMessages] = useState<AgentChatMessage[]>([]);
   const [prompt, setPrompt] = useState("");
   const [inputPlaceholder, setInputPlaceholder] = useState<string>(
-    "Type your message... (Enter to send, Ctrl+Enter for new line)",
+    "Type your message... (Enter to send, Shift+Enter or Ctrl+Enter for new line)",
   );
   const [isLoading, setIsLoading] = useState(false);
   const [isConnecting, setIsConnecting] = useState(false);
@@ -552,6 +780,18 @@ export function AgentTerminal({
     initialCostLimit: number;
   } | null>(null);
 
+  // Live running totals from backend status updates (tokenUsage)
+  const [liveTotals, setLiveTotals] = useState<{
+    input: number;
+    output: number;
+    cached: number;
+    inputCost: number;
+    outputCost: number;
+    cachedCost: number;
+    totalCost: number;
+    currency?: string;
+  } | null>(null);
+
   // Flag to track when we should create a new message
   const shouldCreateNewMessage = useRef(false);
 
@@ -724,10 +964,7 @@ export function AgentTerminal({
         });
         throw new Error("No agent available");
       }
-      console.log(
-        "✅ Creating new stream message with agent:",
-        currentAgent.id,
-      );
+      // Reduced: avoid verbose logging during streaming
       return {
         id: messageId,
         agentId: currentAgent.id,
@@ -873,10 +1110,6 @@ export function AgentTerminal({
                 (msg) => msg.id === toolCallMessageId,
               );
               if (finalCheck) {
-                console.log(
-                  "#!# ⚠️ Tool call message already exists in state, skipping:",
-                  toolCallMessageId,
-                );
                 return prev;
               }
 
@@ -886,11 +1119,6 @@ export function AgentTerminal({
               return updated;
             });
           }
-        } else {
-          console.log(
-            "📋 Adding tool call to existing message:",
-            toolCallMessageId,
-          );
         }
       }
 
@@ -971,12 +1199,9 @@ export function AgentTerminal({
 
       // Update tool result directly in the messages array
       if (!resultMessageId) {
-        console.warn("⚠️ No messageId available for tool result");
         return;
       }
 
-      console.log("📋 Updating tool result in message:", resultMessageId);
-
       // Update the message with tool result
       setMessages((prev) => {
         const updated = prev.map((msg) => {
@@ -1049,10 +1274,7 @@ export function AgentTerminal({
             updatedMessage.toolCalls = [...updatedMessage.toolCalls, toolCall];
           }
 
-          console.log(
-            "🔧 Updated tool calls count:",
-            updatedMessage.toolCalls.length,
-          );
+          // Updated tool calls count
 
           return updatedMessage;
         });
@@ -1094,23 +1316,16 @@ export function AgentTerminal({
       try {
         setIsConnecting(true);
 
-        console.log("🔌 connectToStream: Starting stream connection");
+        // Reduced: minimal logging
 
         // Expose agent id globally for approval actions
         (window as any).currentAgentId = currentAgent.id;
-        console.log("🔗 Setting currentAgentId:", currentAgent.id);
+        // Expose id for approval actions
 
-        console.log(
-          "🌐 Attempting to connect to agent stream for:",
-          currentAgent.id,
-        );
+        // Connecting to agent stream
         await connectToAgentStream(
           currentAgent.id,
           (message: AgentStreamMessage) => {
-            console.log("📨 Received stream message:", {
-              type: message.type,
-              data: message.data,
-            });
             switch (message.type) {
               case "contentChunk":
                 handleContentChunk(message, currentAgent);
@@ -1127,18 +1342,31 @@ export function AgentTerminal({
               case "statusUpdate":
                 try {
                   const kind = (message as any)?.data?.kind;
-                  console.log("📡 Received status update:", {
-                    kind,
-                    data: (message as any).data,
-                  });
+                  // Live token usage totals update from backend
+                  if (kind === "tokenUsage") {
+                    const totals = (message as any)?.data?.totals;
+                    if (totals) {
+                      setLiveTotals({
+                        input: Number(totals.totalInputTokens) || 0,
+                        output: Number(totals.totalOutputTokens) || 0,
+                        cached: Number(totals.totalCachedInputTokens) || 0,
+                        inputCost: Number(totals.totalInputTokenCost) || 0,
+                        outputCost: Number(totals.totalOutputTokenCost) || 0,
+                        cachedCost:
+                          Number(totals.totalCachedInputTokenCost) || 0,
+                        totalCost: Number(totals.totalCost) || 0,
+                        currency: totals.currency,
+                      });
+                      // Force a re-render to update cost display immediately
+                      setMessages((prev) => [...prev]);
+                    }
+                    break;
+                  }
                   if (kind === "toolApprovalsRequired") {
                     const data = (message as any).data || {};
                     const msgId: string | undefined = data.messageId;
                     const ids: string[] = data.toolCallIds || [];
-                    console.log(
-                      "⏸️ Approvals required; pausing stream until approval:",
-                      { msgId, ids },
-                    );
+                    // Pause stream until approval
 
                     // Annotate tool calls with a temporary pending marker so UI can reflect paused state on reload
                     if (msgId && Array.isArray(ids) && ids.length > 0) {
@@ -1243,21 +1471,9 @@ export function AgentTerminal({
                     const data = (message as any).data || {};
                     const toolCallId: string | undefined = data.toolCallId;
                     const msgId: string | undefined = data.messageId;
-                    console.log("🔧 Processing tool approval:", {
-                      kind,
-                      toolCallId,
-                      msgId,
-                      data,
-                    });
+                    // Processing tool approval
                     if (toolCallId && msgId) {
                       setMessages((prev) => {
-                        console.log("🔍 Looking for message:", {
-                          targetMsgId: msgId,
-                          availableMessages: prev.map((m) => ({
-                            id: m.id,
-                            toolCallsCount: m.toolCalls?.length || 0,
-                          })),
-                        });
                         const updated = prev.map((m) => {
                           if (m.id !== msgId) return m;
                           const existingToolCalls = m.toolCalls || [];
@@ -1270,11 +1486,7 @@ export function AgentTerminal({
                                   : " (rejected)";
                               const newFunctionName =
                                 (tc.functionName || "") + suffix;
-                              console.log("🏷️ Updating function name:", {
-                                toolCallId,
-                                oldName: tc.functionName,
-                                newName: newFunctionName,
-                              });
+                              // Update function name with approval suffix
                               return {
                                 ...tc,
                                 functionName: newFunctionName,
@@ -1294,12 +1506,6 @@ export function AgentTerminal({
 
               case "completed":
                 const completedMessageId = message.data?.messageId;
-                console.log(
-                  "💾 Stream completed for message:",
-                  completedMessageId,
-                  "messages count:",
-                  messages.length,
-                );
 
                 // If the completed event carries full messages, merge them into state
                 try {
@@ -1367,6 +1573,25 @@ export function AgentTerminal({
                             (updatedMessage.inputTokens || 0) +
                             (updatedMessage.outputTokens || 0);
 
+                          // Update cost data if provided in the completed event
+                          if (data.inputTokenCost !== undefined) {
+                            updatedMessage.inputTokenCost = data.inputTokenCost;
+                          }
+                          if (data.outputTokenCost !== undefined) {
+                            updatedMessage.outputTokenCost =
+                              data.outputTokenCost;
+                          }
+                          if (
+                            data.cachedInputTokenCost !== undefined ||
+                            data.cachedTokenCost !== undefined
+                          ) {
+                            updatedMessage.cachedInputTokenCost =
+                              data.cachedInputTokenCost ?? data.cachedTokenCost;
+                          }
+                          if (data.totalCost !== undefined) {
+                            updatedMessage.totalCost = data.totalCost;
+                          }
+
                           // Handle content that might only be sent in the completed event
                           if (data.deltaContent && data.deltaContent.trim()) {
                             if (!data.isIncremental) {
@@ -1462,7 +1687,6 @@ export function AgentTerminal({
           setError("Failed to connect to agent stream");
         }
       } finally {
-        console.log("🔌 Stream connection finished, cleaning up");
         setIsConnecting(false);
         // Guard: clear waiting state if connection finished without content
         setIsWaitingForResponse(false);
@@ -1479,7 +1703,6 @@ export function AgentTerminal({
 
       // Check if we're already connected
       if (abortControllerRef.current) {
-        console.log("🔄 Already connected to stream, skipping reconnect");
         return;
       }
 
@@ -1491,10 +1714,7 @@ export function AgentTerminal({
       );
 
       if (!hasPending) {
-        console.log("🔄 No pending approvals; reconnecting stream");
         await connectToStream(currentAgent);
-      } else {
-        console.log("⏸️ Still have pending approvals, not reconnecting yet");
       }
     } catch (err) {
       console.error("❌ Error attempting reconnect:", err);
@@ -1511,11 +1731,7 @@ export function AgentTerminal({
         const approved: boolean = !!detail.approved;
         if (!messageId || !toolCallId) return;
 
-        console.log("🔔 Approval resolved:", {
-          messageId,
-          toolCallId,
-          approved,
-        });
+        // Approval resolved; update local state
 
         setMessages((prev) => {
           const updated = prev.map((m) => {
@@ -1561,10 +1777,9 @@ export function AgentTerminal({
   const loadAgent = useCallback(async () => {
     try {
       if (agentStub.status === "new") {
-        console.log("✅ Setting up new agent", agentStub.id);
         // Set agent ID immediately for new agents
         (window as any).currentAgentId = agentStub.id;
-        console.log("🔗 Setting currentAgentId for new agent:", agentStub.id);
+        // Set currentAgentId for new agent
         // Derive initial profile from provided metadata if present
         const initialProfileIdFromMeta = (() => {
           try {
@@ -1772,10 +1987,6 @@ export function AgentTerminal({
 
       // Set agent ID for existing agents too
       (window as any).currentAgentId = agentData.id;
-      console.log(
-        "🔗 Setting currentAgentId for existing agent:",
-        agentData.id,
-      );
 
       // Parse metadata from DB if present (do not seed for existing agents)
       const parsedMeta: AgentMetadata | null = (() => {
@@ -1800,18 +2011,10 @@ export function AgentTerminal({
       const isRunning =
         agentData.status === "running" || (agentData.status as any) === 1;
       if (isRunning) {
-        console.log("🚀 Agent is running, connecting to stream...", {
-          agentId: agentData.id,
-          status: agentData.status,
-          messageCount: agentData.messages?.length || 0,
-        });
         // Use setTimeout to ensure state updates are processed first
         setTimeout(async () => {
           // Check if we're already connecting to avoid duplicate connections
           if (abortControllerRef.current) {
-            console.log(
-              "⚠️ loadAgent: Already connected to stream, skipping duplicate connection",
-            );
             return;
           }
 
@@ -1828,9 +2031,6 @@ export function AgentTerminal({
               ),
             );
             if (hasPending) {
-              console.log(
-                "⏸️ loadAgent: Pending approvals detected, delaying stream reconnect",
-              );
               return;
             }
           } catch {}
@@ -1846,7 +2046,7 @@ export function AgentTerminal({
         err?.message?.includes("404") ||
         err?.message?.includes("not found")
       ) {
-        console.log("ℹ️ Agent does not exist, treating as new");
+        // Agent does not exist, treat as new
         setAgent(undefined);
         setMessages([]);
         setError(null);
@@ -1924,7 +2124,6 @@ export function AgentTerminal({
   useEffect(() => {
     return () => {
       if (abortControllerRef.current) {
-        console.log("Cleaning up stream connection");
         abortControllerRef.current.abort();
       }
     };
@@ -2107,7 +2306,7 @@ export function AgentTerminal({
         seed: deterministicFlags.seed,
       };
 
-      console.log("Starting agent:", request);
+      // Starting agent
 
       // Set waiting state to show dancing dots immediately
       setIsWaitingForResponse(true);
@@ -2149,7 +2348,14 @@ export function AgentTerminal({
   };
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.ctrlKey && !e.metaKey) {
+    // Submit only on plain Enter (no Ctrl/Meta/Shift/Alt)
+    if (
+      e.key === "Enter" &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.shiftKey &&
+      !e.altKey
+    ) {
       e.preventDefault();
       handleSubmit();
     }
@@ -2825,7 +3031,7 @@ export function AgentTerminal({
   if (isLoading) {
     return (
       <div className="flex h-full items-center justify-center">
-        <div className="flex items-center gap-2 text-sm text-gray-500">
+        <div className="flex items-center gap-2 text-xs text-gray-500">
           <Loader2 className="h-4 w-4 animate-spin" strokeWidth={1} />
           Loading agent...
         </div>
@@ -3024,7 +3230,7 @@ export function AgentTerminal({
       {renderContextInfoBar()}
 
       {/* Todo List Panel */}
-      <TodoListPanel messages={messages} />
+      <TodoListPanel messages={messages} agentMetadata={agentMetadata} />
 
       {/* Input */}
       <div className="border-t border-gray-200 p-4">
@@ -3102,19 +3308,25 @@ export function AgentTerminal({
               </TooltipTrigger>
               <TooltipContent side="top" sideOffset={6}>
                 <div className="max-w-[320px] space-y-1">
-                <div>
-                    <span className="font-semibold text-green-500">Ask</span>: Limited tool
-                    access as configured by the profile (Ask Mode Tools).
+                  <div>
+                    <span className="font-semibold text-green-500">Ask</span>:
+                    Limited tool access as configured by the profile (Ask Mode
+                    Tools).
                   </div>
                   <div>
-                    <span className="font-semibold text-amber-500">Restricted</span>:
-                    Full tool access, but writes are limited to pages/items in the current
-                    context. Creating new items or updating existing items outside the current context requires explicit approval.
+                    <span className="font-semibold text-amber-500">
+                      Restricted
+                    </span>
+                    : Full tool access, but writes are limited to pages/items in
+                    the current context. Creating new items or updating existing
+                    items outside the current context requires explicit
+                    approval.
                   </div>
                   <div>
-                    <span className="font-semibold text-red-500">Agent</span>: Full tool
-                    access; can write across the site/project only limited by user permissions.
-                  </div>                  
+                    <span className="font-semibold text-red-500">Agent</span>:
+                    Full tool access; can write across the site/project only
+                    limited by user permissions.
+                  </div>
                 </div>
               </TooltipContent>
             </Tooltip>
@@ -3246,7 +3458,21 @@ export function AgentTerminal({
           </div>
         </div>
         <div className="mt-1 flex items-center gap-2 text-[10px] text-gray-500">
-          <AgentCostDisplay totalTokens={totalTokens} />
+          <AgentCostDisplay
+            totalTokens={
+              liveTotals
+                ? {
+                    input: liveTotals.input,
+                    output: liveTotals.output,
+                    cached: liveTotals.cached,
+                    inputCost: liveTotals.inputCost,
+                    outputCost: liveTotals.outputCost,
+                    cachedCost: liveTotals.cachedCost,
+                    totalCost: liveTotals.totalCost,
+                  }
+                : totalTokens
+            }
+          />
           {(() => {
             try {
               const s = (window as any).__agentContextWindowStatus;
@@ -3255,7 +3481,7 @@ export function AgentTerminal({
                 typeof s.contextUsedPercent === "number"
                   ? `${s.contextUsedPercent.toFixed(1)}%`
                   : undefined;
-              
+
               // Helper function to format tokens as "k"
               const formatTokens = (tokens: number) => {
                 if (tokens >= 1000) {
@@ -3269,7 +3495,7 @@ export function AgentTerminal({
               return (
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <div className="rounded border border-gray-200 bg-gray-50 px-2 py-0.5 cursor-help">
+                    <div className="cursor-help rounded border border-gray-200 bg-gray-50 px-2 py-0.5">
                       Context: {pct}
                     </div>
                   </TooltipTrigger>