@alpaca-editor/core 1.0.4132 → 1.0.4134

package/dist/editor/ai/AgentTerminal.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo, } from "react";
 import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, } from "lucide-react";
 import { DancingDots } from "./DancingDots";
@@ -18,6 +18,106 @@ import { Tooltip, TooltipTrigger, TooltipContent, } from "../../components/ui/to
 const UserMessage = ({ message }) => {
     return (_jsxs("div", { className: "flex gap-3 p-4", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx(User, { className: "h-6 w-6 text-blue-600", strokeWidth: 1 }) }), _jsxs("div", { className: "min-w-0 flex-1 select-text", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-900", children: "You" }), message.createdDate && (_jsx("span", { className: "text-xs text-gray-400", children: formatTime(new Date(message.createdDate)) }))] }), _jsx("div", { className: "prose prose-sm max-w-none text-xs text-gray-700 select-text", children: message.content })] })] }));
 };
+// Helper to extract todos from potentially incomplete JSON during streaming
+const extractPartialTodos = (jsonText) => {
+    // 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 = [];
+        // 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 = [];
+        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) => {
     const todos = [];
     const fencedTodoToken = "```todo_list";
@@ -48,13 +148,20 @@ const extractTodosFromMessages = (messages) => {
                 break;
             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;
@@ -74,24 +181,54 @@ const extractTodosFromMessages = (messages) => {
                             }
                         }
                     }
-                    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) => {
                     if (!item)
                         return;
-                    const text = item.text || item.label || String(item.task || item.title || "");
+                    const text = 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,
@@ -107,25 +244,97 @@ const extractTodosFromMessages = (messages) => {
     return todos;
 };
 // TodoListPanel component
-const TodoListPanel = ({ messages }) => {
+const TodoListPanel = ({ messages, agentMetadata, }) => {
     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?.additionalData?.context;
+                const todoList = context?.todoList;
+                if (todoList?.items && Array.isArray(todoList.items)) {
+                    return todoList.items
+                        .map((item, idx) => ({
+                        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) => 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 totalCount = todos.length;
-    return (_jsxs("div", { className: "border-t border-gray-200 bg-gray-50", children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "flex w-full cursor-pointer items-center justify-between px-4 py-2 text-left transition-colors hover:bg-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ListTodo, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }), _jsx("span", { className: "text-xs font-medium text-gray-700", children: "Todo List" }), isUpdating ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-blue-600", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), "Updating..."] })) : (_jsxs("span", { className: "text-xs text-gray-500", children: [completedCount, "/", totalCount, " completed"] }))] }), isExpanded ? (_jsx(ChevronUp, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 })) : (_jsx(ChevronDown, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }))] }), isExpanded && (_jsx("div", { className: "max-h-64 overflow-y-auto px-4 pb-3", children: isUpdating && todos.length === 0 ? (_jsxs("div", { className: "flex items-center justify-center gap-2 py-4 text-xs text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), _jsx("span", { children: "Loading todo list..." })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-1.5", children: todos.map((todo, idx) => (_jsxs("div", { className: "flex items-start gap-2 rounded bg-white p-2 text-xs", children: [_jsx("div", { className: "flex-shrink-0 pt-0.5", children: todo.done ? (_jsx("div", { className: "flex h-4 w-4 items-center justify-center rounded border-2 border-green-500 bg-green-500", children: _jsx("svg", { className: "h-3 w-3 text-white", fill: "none", strokeWidth: 2, stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) })) : (_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-300" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: `${todo.done
-                                                    ? "text-gray-500 line-through"
-                                                    : "text-gray-900"}`, children: todo.text }), todo.note && (_jsx("div", { className: "mt-0.5 text-xs text-gray-500", children: todo.note }))] })] }, todo.id || `${todo.messageId}-${idx}`))) }), isUpdating && todos.length > 0 && (_jsxs("div", { className: "mt-2 flex items-center gap-2 rounded bg-blue-50 px-3 py-2 text-xs text-blue-700", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), _jsx("span", { children: "Updating todo list..." })] }))] })) }))] }));
+    return (_jsxs("div", { className: "border-t border-gray-200 bg-gray-50", children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "flex w-full cursor-pointer items-center justify-between px-4 py-2 text-left transition-colors hover:bg-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ListTodo, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }), _jsx("span", { className: "text-xs font-medium text-gray-700", children: "Todo List" }), isUpdating ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-blue-600", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), "Updating..."] })) : (_jsxs("span", { className: "text-xs text-gray-500", children: [completedCount, "/", totalCount, " completed"] }))] }), isExpanded ? (_jsx(ChevronUp, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 })) : (_jsx(ChevronDown, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }))] }), isExpanded && (_jsxs("div", { className: "max-h-64 overflow-y-auto px-4 pb-3", children: [todos.length > 0 && (_jsx("div", { className: "space-y-1.5", children: todos.map((todo, idx) => (_jsxs("div", { className: "flex items-start gap-2 rounded bg-white p-2 text-xs", children: [_jsx("div", { className: "flex-shrink-0 pt-0.5", children: todo.done ? (_jsx("div", { className: "flex h-4 w-4 items-center justify-center rounded border-2 border-green-500 bg-green-500", children: _jsx("svg", { className: "h-3 w-3 text-white", fill: "none", strokeWidth: 2, stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) })) : (_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-300" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: `${todo.done
+                                                ? "text-gray-500 line-through"
+                                                : "text-gray-900"}`, children: todo.text }), todo.note && (_jsx("div", { className: "mt-0.5 text-xs text-gray-500", children: todo.note }))] })] }, todo.id || `${todo.messageId}-${idx}`))) })), isUpdating && (_jsxs("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"}`, children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), _jsx("span", { children: todos.length > 0
+                                    ? "Updating todo list..."
+                                    : "Loading todo list..." })] }))] }))] }));
 };
 const groupConsecutiveMessages = (agentMessages) => {
     // Work directly with the messages array - streaming messages are identified by their properties
@@ -222,7 +431,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
     const [agent, setAgent] = useState(undefined);
     const [messages, setMessages] = useState([]);
     const [prompt, setPrompt] = useState("");
-    const [inputPlaceholder, setInputPlaceholder] = useState("Type your message... (Enter to send, Ctrl+Enter for new line)");
+    const [inputPlaceholder, setInputPlaceholder] = useState("Type your message... (Enter to send, Shift+Enter or Ctrl+Enter for new line)");
     const [isLoading, setIsLoading] = useState(false);
     const [isConnecting, setIsConnecting] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
@@ -320,6 +529,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
     }, [messages]);
     const [error, setError] = useState(null);
     const [costLimitExceeded, setCostLimitExceeded] = useState(null);
+    // Live running totals from backend status updates (tokenUsage)
+    const [liveTotals, setLiveTotals] = useState(null);
     // Flag to track when we should create a new message
     const shouldCreateNewMessage = useRef(false);
     // Keep a ref to the current messages for immediate access
@@ -487,7 +698,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
             });
             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,
@@ -594,7 +805,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                         // Final check before adding to prevent duplicates
                         const finalCheck = prev.find((msg) => msg.id === toolCallMessageId);
                         if (finalCheck) {
-                            console.log("#!# ⚠️ Tool call message already exists in state, skipping:", toolCallMessageId);
                             return prev;
                         }
                         const updated = [...prev, newStreamMessage];
@@ -603,9 +813,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                     });
                 }
             }
-            else {
-                console.log("📋 Adding tool call to existing message:", toolCallMessageId);
-            }
         }
         // Add tool call to the message in the array
         if (toolCallMessageId && message.data && toolCallId) {
@@ -667,10 +874,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
         }
         // 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) => {
@@ -729,7 +934,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                     };
                     updatedMessage.toolCalls = [...updatedMessage.toolCalls, toolCall];
                 }
-                console.log("🔧 Updated tool calls count:", updatedMessage.toolCalls.length);
+                // Updated tool calls count
                 return updatedMessage;
             });
             messagesRef.current = updated;
@@ -763,16 +968,12 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
         abortControllerRef.current = abortController;
         try {
             setIsConnecting(true);
-            console.log("🔌 connectToStream: Starting stream connection");
+            // Reduced: minimal logging
             // Expose agent id globally for approval actions
             window.currentAgentId = currentAgent.id;
-            console.log("🔗 Setting currentAgentId:", currentAgent.id);
-            console.log("🌐 Attempting to connect to agent stream for:", currentAgent.id);
+            // Expose id for approval actions
+            // Connecting to agent stream
             await connectToAgentStream(currentAgent.id, (message) => {
-                console.log("📨 Received stream message:", {
-                    type: message.type,
-                    data: message.data,
-                });
                 switch (message.type) {
                     case "contentChunk":
                         handleContentChunk(message, currentAgent);
@@ -786,15 +987,30 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                     case "statusUpdate":
                         try {
                             const kind = message?.data?.kind;
-                            console.log("📡 Received status update:", {
-                                kind,
-                                data: message.data,
-                            });
+                            // Live token usage totals update from backend
+                            if (kind === "tokenUsage") {
+                                const totals = message?.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.data || {};
                                 const msgId = data.messageId;
                                 const ids = 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) {
                                     setMessages((prev) => {
@@ -899,21 +1115,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                                 const data = message.data || {};
                                 const toolCallId = data.toolCallId;
                                 const msgId = 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;
@@ -925,11 +1129,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                                                     ? " (approved)"
                                                     : " (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,
@@ -948,7 +1148,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                         break;
                     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 {
                             const completionMessages = message?.data
@@ -1012,6 +1211,22 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                                             updatedMessage.tokensUsed =
                                                 (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) {
@@ -1101,7 +1316,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
             }
         }
         finally {
-            console.log("🔌 Stream connection finished, cleaning up");
             setIsConnecting(false);
             // Guard: clear waiting state if connection finished without content
             setIsWaitingForResponse(false);
@@ -1115,18 +1329,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                 return;
             // Check if we're already connected
             if (abortControllerRef.current) {
-                console.log("🔄 Already connected to stream, skipping reconnect");
                 return;
             }
             const msgs = messagesRef.current || [];
             const hasPending = msgs.some((m) => (m.toolCalls || []).some((tc) => (tc.functionName || "").includes("(pending approval)")));
             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);
@@ -1142,11 +1351,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                 const approved = !!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) => {
                         if (m.id !== messageId)
@@ -1184,10 +1389,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
     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.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 {
@@ -1369,7 +1573,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
             setMessages(agentData.messages || []);
             // Set agent ID for existing agents too
             window.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 = (() => {
                 try {
@@ -1392,16 +1595,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
             // Connect to stream if agent is running (handle both string and numeric status)
             const isRunning = agentData.status === "running" || agentData.status === 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;
                     }
                     // Reset streaming state for reconnection
@@ -1411,7 +1608,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                         const hasPending = (agentData.messages || []).some((m) => (m.toolCalls || []).some((tc) => typeof tc?.functionName === "string" &&
                             tc.functionName.includes("(pending approval)")));
                         if (hasPending) {
-                            console.log("⏸️ loadAgent: Pending approvals detected, delaying stream reconnect");
                             return;
                         }
                     }
@@ -1426,7 +1622,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
             // For new agents that don't exist yet, this is expected
             if (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);
@@ -1495,7 +1691,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
     useEffect(() => {
         return () => {
             if (abortControllerRef.current) {
-                console.log("Cleaning up stream connection");
                 abortControllerRef.current.abort();
             }
         };
@@ -1655,7 +1850,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                 deterministic: deterministicFlags.deterministic,
                 seed: deterministicFlags.seed,
             };
-            console.log("Starting agent:", request);
+            // Starting agent
             // Set waiting state to show dancing dots immediately
             setIsWaitingForResponse(true);
             // Start idle timer; dots appear only if no chunks for >1s
@@ -1690,7 +1885,12 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
         }
     };
     const handleKeyPress = (e) => {
-        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();
         }
@@ -2284,7 +2484,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
         resetDotsTimer,
     ]);
     if (isLoading) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), "Loading agent..."] }) }));
+        return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), "Loading agent..."] }) }));
     }
     // Calculate total token usage for cost display
     const totalTokens = calculateTotalTokens(messages);
@@ -2366,7 +2566,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                                         sendQuickMessage(text);
                                     } }, groupIndex));
                             }
-                        }) }), _jsx("div", { className: showDots ? "visible" : "invisible", children: _jsx(DancingDots, {}) }), _jsx("div", { ref: messagesEndRef })] }), renderContextInfoBar(), _jsx(TodoListPanel, { messages: messages }), _jsxs("div", { className: "border-t border-gray-200 p-4", children: [_jsx("div", { className: "flex items-stretch gap-2", children: _jsx(Textarea, { ref: textareaRef, value: prompt, onChange: (e) => {
+                        }) }), _jsx("div", { className: showDots ? "visible" : "invisible", children: _jsx(DancingDots, {}) }), _jsx("div", { ref: messagesEndRef })] }), renderContextInfoBar(), _jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata }), _jsxs("div", { className: "border-t border-gray-200 p-4", children: [_jsx("div", { className: "flex items-stretch gap-2", children: _jsx(Textarea, { ref: textareaRef, value: prompt, onChange: (e) => {
                                 setPrompt(e.target.value);
                                 // Reset history index when user starts typing
                                 if (currentHistoryIndex !== -1) {
@@ -2435,7 +2635,17 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                                                             setShowPredefined(false);
                                                             if (textareaRef.current)
                                                                 textareaRef.current.focus();
-                                                        }, children: p.title }, index))) }) })] })) : null] }), _jsxs("div", { className: "flex items-center gap-1 self-end", children: [isVoiceSupported ? (_jsx(Button, { onClick: toggleVoice, size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isListening ? "Stop voice input" : "Start voice input", "aria-label": isListening ? "Stop voice input" : "Start voice input", "aria-pressed": isListening, children: isListening ? (_jsx(MicOff, { className: "size-3", strokeWidth: 1 })) : (_jsx(Mic, { className: "size-3", strokeWidth: 1 })) })) : null, _jsx(Button, { onClick: isExecuting ? handleStop : handleSubmit, disabled: !isExecuting && !prompt.trim(), size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isExecuting ? "Stop" : "Send", "aria-label": isExecuting ? "Stop" : "Send", "data-testid": "agent-send-stop-button", "data-executing": isExecuting ? "true" : "false", children: isExecuting ? (_jsx(Square, { className: "size-3", strokeWidth: 1 })) : (_jsx(Send, { className: "size-3", strokeWidth: 1 })) })] })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2 text-[10px] text-gray-500", children: [_jsx(AgentCostDisplay, { totalTokens: totalTokens }), (() => {
+                                                        }, children: p.title }, index))) }) })] })) : null] }), _jsxs("div", { className: "flex items-center gap-1 self-end", children: [isVoiceSupported ? (_jsx(Button, { onClick: toggleVoice, size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isListening ? "Stop voice input" : "Start voice input", "aria-label": isListening ? "Stop voice input" : "Start voice input", "aria-pressed": isListening, children: isListening ? (_jsx(MicOff, { className: "size-3", strokeWidth: 1 })) : (_jsx(Mic, { className: "size-3", strokeWidth: 1 })) })) : null, _jsx(Button, { onClick: isExecuting ? handleStop : handleSubmit, disabled: !isExecuting && !prompt.trim(), size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isExecuting ? "Stop" : "Send", "aria-label": isExecuting ? "Stop" : "Send", "data-testid": "agent-send-stop-button", "data-executing": isExecuting ? "true" : "false", children: isExecuting ? (_jsx(Square, { className: "size-3", strokeWidth: 1 })) : (_jsx(Send, { className: "size-3", strokeWidth: 1 })) })] })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2 text-[10px] text-gray-500", children: [_jsx(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.__agentContextWindowStatus;
                                     if (!s || !s.contextWindowTokens)
@@ -2452,7 +2662,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                                     };
                                     if (!pct)
                                         return null;
-                                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "rounded border border-gray-200 bg-gray-50 px-2 py-0.5 cursor-help", children: ["Context: ", pct] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: _jsxs("div", { className: "max-w-[320px] space-y-1 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Model:" }), " ", s.model, s.normalizedModel && ` (${s.normalizedModel})`] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Context window:" }), " ", formatTokens(s.estimatedInputTokens || 0), " /", " ", formatTokens(s.contextWindowTokens), " tokens"] }), typeof s.maxCompletionTokens === "number" && (_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Max completion:" }), " ", formatTokens(s.maxCompletionTokens), " tokens"] })), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Used:" }), " ", pct] })] }) })] }));
+                                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "cursor-help rounded border border-gray-200 bg-gray-50 px-2 py-0.5", children: ["Context: ", pct] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: _jsxs("div", { className: "max-w-[320px] space-y-1 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Model:" }), " ", s.model, s.normalizedModel && ` (${s.normalizedModel})`] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Context window:" }), " ", formatTokens(s.estimatedInputTokens || 0), " /", " ", formatTokens(s.contextWindowTokens), " tokens"] }), typeof s.maxCompletionTokens === "number" && (_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Max completion:" }), " ", formatTokens(s.maxCompletionTokens), " tokens"] })), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Used:" }), " ", pct] })] }) })] }));
                                 }
                                 catch {
                                     return null;