@parhelia/core 0.1.10745

package/dist/editor/ai/AgentTerminal.js

@@ -0,0 +1,2634 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo, ViewTransition, } from "react";
+import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, } from "lucide-react";
+import { DancingDots } from "./DancingDots";
+import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, cancelAgent, canonicalizeAgentMetadata, } from "../services/agentService";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
+import { Textarea } from "../../components/ui/textarea";
+import { Button } from "../../components/ui/button";
+import { PlaceholderInput } from "../../components/ui/PlaceholderInput";
+import { AiResponseMessage } from "./AiResponseMessage";
+import { AgentCostDisplay } from "./AgentCostDisplay";
+import { ContextInfoBar } from "./ContextInfoBar";
+import { getComponentById } from "../componentTreeHelper";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
+import { SecretAgentIcon } from "../ui/Icons";
+import { formatTime } from "../utils";
+import { Tooltip, TooltipTrigger, TooltipContent, } from "../../components/ui/tooltip";
+// Simple user message component
+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", "data-testid": "user-message-timestamp", "data-timestamp": message.createdDate, 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";
+    const plainTodoToken = "todo_list";
+    for (const message of messages) {
+        if (message.role !== "assistant" || !message.content)
+            continue;
+        const content = message.content;
+        let cursor = 0;
+        while (cursor < content.length) {
+            const nextFenced = content.indexOf(fencedTodoToken, cursor);
+            const nextPlain = content.indexOf(plainTodoToken, cursor);
+            let todoStart = -1;
+            let isFenced = false;
+            if (nextFenced !== -1 && (nextPlain === -1 || nextFenced < nextPlain)) {
+                todoStart = nextFenced;
+                isFenced = true;
+            }
+            else if (nextPlain !== -1) {
+                // Check if it's at line start
+                const before = nextPlain > 0 ? content[nextPlain - 1] : "\n";
+                if (before === "\n" || before === "\r" || nextPlain === 0) {
+                    todoStart = nextPlain;
+                    isFenced = false;
+                }
+            }
+            if (todoStart === -1)
+                break;
+            try {
+                let jsonText = "";
+                let isComplete = true;
+                if (isFenced) {
+                    const afterToken = todoStart + fencedTodoToken.length;
+                    const closePos = content.indexOf("```", afterToken);
+                    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);
+                    if (braceStart === -1)
+                        break;
+                    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 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;
+                    }
+                }
+                // 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.content ||
+                        item.label ||
+                        String(item.task || item.title || "");
+                    if (!text)
+                        return;
+                    todos.push({
+                        id: item.id,
+                        text,
+                        done: !!(item.done ??
+                            item.completed ??
+                            item.checked ??
+                            item.status === "completed"),
+                        note: item.note || item.description,
+                        messageId: message.id,
+                        sourceTitle: title,
+                    });
+                });
+            }
+            catch (e) {
+                cursor++;
+                continue;
+            }
+        }
+    }
+    return todos;
+};
+// TodoListPanel component
+const TodoListPanel = ({ messages, agentMetadata, }) => {
+    const [isExpanded, setIsExpanded] = useState(true);
+    const todos = useMemo(() => {
+        // First try to get todos from agent metadata (real-time updates)
+        const metadataTodos = (() => {
+            try {
+                const todoList = agentMetadata?.additionalData?.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) {
+                console.error("📋 Error extracting todos from metadata:", e);
+            }
+            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 || "";
+            // 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 && (_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
+    const allMessages = agentMessages;
+    const groups = [];
+    let currentAssistantGroup = [];
+    for (const message of allMessages) {
+        if (message.role === "user") {
+            // Finish any current assistant group
+            if (currentAssistantGroup.length > 0) {
+                groups.push({
+                    type: "assistant-group",
+                    messages: currentAssistantGroup,
+                });
+                currentAssistantGroup = [];
+            }
+            // Add user message
+            groups.push({ type: "user", messages: [message] });
+        }
+        else if (message.role === "assistant") {
+            // Add to current assistant group
+            currentAssistantGroup.push(message);
+        }
+        // Skip tool messages as they're handled within assistant messages
+    }
+    // Add any remaining assistant group
+    if (currentAssistantGroup.length > 0) {
+        groups.push({ type: "assistant-group", messages: currentAssistantGroup });
+    }
+    return groups;
+};
+// Merge messages from DB and local state with ID-based deduplication
+const mergeMessagesById = (dbMessages, localMessages) => {
+    const messageMap = new Map();
+    // Normalize ID key (lowercase) to avoid duplicates caused by casing differences
+    const keyOf = (id) => (id ? id.toLowerCase() : "");
+    // First, add all DB messages (source of truth for completed messages)
+    dbMessages.forEach((msg) => {
+        if (msg.id)
+            messageMap.set(keyOf(msg.id), msg);
+    });
+    // Then merge local messages (preserve streaming state, prefer longer content)
+    localMessages.forEach((localMsg) => {
+        if (!localMsg.id)
+            return;
+        const key = keyOf(localMsg.id);
+        const existingMsg = messageMap.get(key);
+        if (!existingMsg) {
+            // New message only in local state (e.g., streaming)
+            messageMap.set(key, localMsg);
+        }
+        else if (!localMsg.isCompleted && localMsg.messageType === "streaming") {
+            // Keep streaming version if more recent/longer
+            if (localMsg.content.length > existingMsg.content.length) {
+                messageMap.set(key, localMsg);
+            }
+        }
+        // Otherwise, keep the DB version (completed messages from DB are authoritative)
+    });
+    // Sort by messageIndex or createdDate to maintain order
+    // Ignore messageIndex if it's -1 (unassigned/streaming)
+    return Array.from(messageMap.values()).sort((a, b) => {
+        const aIndex = a.messageIndex === -1 ? Infinity : a.messageIndex;
+        const bIndex = b.messageIndex === -1 ? Infinity : b.messageIndex;
+        if (aIndex !== bIndex) {
+            return aIndex - bIndex;
+        }
+        return (new Date(a.createdDate || 0).getTime() -
+            new Date(b.createdDate || 0).getTime());
+    });
+};
+// Calculate total token usage and cost data from agent messages
+const calculateTotalTokens = (messages) => {
+    const totals = messages.reduce((acc, message) => {
+        return {
+            input: acc.input + (message.inputTokens || 0),
+            output: acc.output + (message.outputTokens || 0),
+            cached: acc.cached + (message.cachedInputTokens || 0),
+            cacheWrite: acc.cacheWrite,
+            inputCost: acc.inputCost + (message.inputTokenCost || 0),
+            outputCost: acc.outputCost + (message.outputTokenCost || 0),
+            cachedCost: acc.cachedCost + (message.cachedInputTokenCost || 0),
+            cacheWriteCost: acc.cacheWriteCost,
+            totalCost: acc.totalCost + (message.totalCost || 0),
+        };
+    }, {
+        input: 0,
+        output: 0,
+        cached: 0,
+        cacheWrite: 0,
+        inputCost: 0,
+        outputCost: 0,
+        cachedCost: 0,
+        cacheWriteCost: 0,
+        totalCost: 0,
+    });
+    return totals;
+};
+// Convert agent messages to AI terminal format for a response group
+const convertAgentMessagesToAiFormat = (agentMessages) => {
+    return agentMessages.map((agentMessage) => {
+        const message = {
+            id: agentMessage.id,
+            content: agentMessage.content,
+            formattedContent: agentMessage.content
+                ?.replace(/^######\s+(.+)$/gm, "<h6>$1</h6>")
+                ?.replace(/^#####\s+(.+)$/gm, "<h5>$1</h5>")
+                ?.replace(/^####\s+(.+)$/gm, "<h4>$1</h4>")
+                ?.replace(/^###\s+(.+)$/gm, "<h3>$1</h3>")
+                ?.replace(/^##\s+(.+)$/gm, "<h2>$1</h2>")
+                ?.replace(/^#\s+(.+)$/gm, "<h1>$1</h1>")
+                ?.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+                ?.replace(/\n/g, "<br/>"),
+            name: agentMessage.name,
+            role: agentMessage.role,
+            createdDate: agentMessage.createdDate,
+            tool_calls: agentMessage.toolCalls
+                ? agentMessage.toolCalls.map((toolCall) => ({
+                    id: toolCall.toolCallId,
+                    displayName: toolCall.functionName,
+                    function: {
+                        name: toolCall.functionName,
+                        arguments: toolCall.functionArguments,
+                        result: toolCall.functionResult,
+                        error: toolCall.functionError,
+                    },
+                    // Pass through approval info if present on the tool call
+                    requiresApproval: toolCall.requiresApproval,
+                }))
+                : [],
+        };
+        if (agentMessage.toolCallId) {
+            message.tool_call_id = agentMessage.toolCallId;
+        }
+        return message;
+    });
+};
+// interface AgentTerminalProps {
+//   agentStub: Agent;
+// }
+export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, compact = false, hideContext = false, hideBottomControls = false, hideGreeting = false, className, initialPrompt, }) {
+    const editContext = useEditContext();
+    const fieldsContext = useFieldsEditContext();
+    const [agent, setAgent] = useState(undefined);
+    const [messages, setMessages] = useState([]);
+    const [prompt, setPrompt] = useState("");
+    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);
+    const [activePlaceholderInput, setActivePlaceholderInput] = useState(null);
+    const [agentMetadata, setAgentMetadata] = useState(null);
+    // Generate a stable clientSessionId per component instance for stream deduplication
+    const clientSessionIdRef = useRef(null);
+    if (!clientSessionIdRef.current) {
+        clientSessionIdRef.current = crypto.randomUUID();
+    }
+    // Voice input state
+    const [isVoiceSupported, setIsVoiceSupported] = useState(false);
+    const [isListening, setIsListening] = useState(false);
+    const recognitionRef = useRef(null);
+    const prevPlaceholderRef = useRef(null);
+    const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
+    const isWaitingRef = useRef(false);
+    useEffect(() => {
+        isWaitingRef.current = isWaitingForResponse;
+    }, [isWaitingForResponse]);
+    // Dots visibility controlled by 1s idle timer since last incremental update
+    const [showDots, setShowDots] = useState(false);
+    const dotsTimeoutRef = useRef(null);
+    const hasActiveStreaming = useCallback(() => {
+        const current = messagesRef.current || [];
+        return current.some((m) => !m.isCompleted && m.messageType === "streaming");
+    }, []);
+    const hasPendingApprovals = useCallback(() => {
+        const current = messagesRef.current || [];
+        return current.some((m) => (m.toolCalls || []).some((tc) => (tc.functionName || "").includes("(pending approval)")));
+    }, []);
+    const resetDotsTimer = useCallback(() => {
+        if (dotsTimeoutRef.current) {
+            clearTimeout(dotsTimeoutRef.current);
+            dotsTimeoutRef.current = null;
+        }
+        const waiting = isWaitingRef.current;
+        const streaming = hasActiveStreaming();
+        const pendingApprovals = hasPendingApprovals();
+        // Don't show dots if there are pending approvals (waiting for user action)
+        if (!waiting && !streaming) {
+            setShowDots(false);
+            return;
+        }
+        if (pendingApprovals) {
+            setShowDots(false);
+            return;
+        }
+        // Show dots immediately when waiting or streaming
+        setShowDots(true);
+        dotsTimeoutRef.current = setTimeout(() => {
+            // Re-check conditions after a brief delay to avoid flicker
+            const stillWaiting = isWaitingRef.current;
+            const stillStreaming = hasActiveStreaming();
+            const stillPendingApprovals = hasPendingApprovals();
+            setShowDots((stillWaiting || stillStreaming) && !stillPendingApprovals);
+        }, 100);
+    }, [hasActiveStreaming, hasPendingApprovals]);
+    const [resolvedPageName, setResolvedPageName] = useState(undefined);
+    const [resolvedComponentName, setResolvedComponentName] = useState(undefined);
+    const [resolvedFieldName, setResolvedFieldName] = useState(undefined);
+    const [isContextCollapsed, setIsContextCollapsed] = useState(true);
+    const [isContextDragOver, setIsContextDragOver] = useState(false);
+    const [promptHistory, setPromptHistory] = useState(() => {
+        if (typeof window !== "undefined") {
+            return JSON.parse(localStorage.getItem("editor.agent.promptHistory") || "[]");
+        }
+        return [];
+    });
+    const [currentHistoryIndex, setCurrentHistoryIndex] = useState(-1);
+    const [showPredefined, setShowPredefined] = useState(false);
+    const [activeProfile, setActiveProfile] = useState(undefined);
+    const [selectedModelId, setSelectedModelId] = useState(undefined);
+    const [mode, setMode] = useState("supervised");
+    // Remove deprecated cost limit fields from metadata to avoid confusion with agent/profile settings
+    const sanitizeAgentMetadata = useCallback((meta) => {
+        try {
+            if (!meta)
+                return meta;
+            const clean = { ...meta };
+            delete clean.costLimit;
+            delete clean.CostLimit;
+            delete clean.initialCostLimit;
+            delete clean.InitialCostLimit;
+            if (clean.additionalData && typeof clean.additionalData === "object") {
+                const ad = { ...clean.additionalData };
+                delete ad.costLimit;
+                delete ad.CostLimit;
+                delete ad.initialCostLimit;
+                delete ad.InitialCostLimit;
+                clean.additionalData = ad;
+            }
+            return clean;
+        }
+        catch {
+            return meta;
+        }
+    }, []);
+    // Read deterministic flags from query string once
+    const deterministicFlags = React.useMemo(() => {
+        try {
+            const params = new URLSearchParams(window.location.search);
+            const detParam = params.get("deterministic");
+            const deterministic = detParam === "true" ||
+                (detParam === null ? params.has("deterministic") : false);
+            const seedStr = params.get("seed");
+            const seed = seedStr ? Number(seedStr) : undefined;
+            return {
+                deterministic,
+                seed: Number.isFinite(seed) ? seed : undefined,
+            };
+        }
+        catch {
+            return { deterministic: false, seed: undefined };
+        }
+    }, []);
+    useEffect(() => {
+        localStorage.setItem("editor.agent.promptHistory", JSON.stringify(promptHistory));
+    }, [promptHistory]);
+    // Clear idle timer on unmount
+    useEffect(() => {
+        return () => {
+            if (dotsTimeoutRef.current) {
+                clearTimeout(dotsTimeoutRef.current);
+                dotsTimeoutRef.current = null;
+            }
+        };
+    }, []);
+    // Whenever waiting state changes, restart idle timer logic
+    useEffect(() => {
+        resetDotsTimer();
+    }, [isWaitingForResponse, resetDotsTimer]);
+    useEffect(() => {
+        // Keep messagesRef synchronized with messages state
+        messagesRef.current = messages;
+    }, [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
+    const messagesRef = useRef([]);
+    const abortControllerRef = useRef(null);
+    const messagesEndRef = useRef(null);
+    const textareaRef = useRef(null);
+    const messagesContainerRef = useRef(null);
+    const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+    // WebSocket subscription state for agent streaming
+    const seenMessageIdsRef = useRef(new Set());
+    const lastSeqRef = useRef(0);
+    const subscribedAgentIdRef = useRef(null);
+    // Cache mode/model changes made while the agent is still "new" (not yet persisted)
+    const pendingSettingsRef = useRef(null);
+    // Auto-scroll to bottom when new messages arrive
+    const scrollToBottom = useCallback(() => {
+        const container = messagesContainerRef.current;
+        if (!container)
+            return;
+        // Jump precisely to the bottom to avoid ending slightly above due to smooth scrolling animations
+        container.scrollTop = container.scrollHeight;
+    }, []);
+    // Detect speech recognition support (client-only)
+    useEffect(() => {
+        try {
+            if (typeof window === "undefined")
+                return;
+            const SR = window.SpeechRecognition ||
+                window.webkitSpeechRecognition;
+            setIsVoiceSupported(!!SR);
+        }
+        catch {
+            setIsVoiceSupported(false);
+        }
+    }, []);
+    // Auto-focus terminal input on mount
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, []);
+    // Start voice recognition
+    const startVoice = useCallback(() => {
+        try {
+            if (isListening)
+                return;
+            if (typeof window === "undefined")
+                return;
+            const SR = window.SpeechRecognition ||
+                window.webkitSpeechRecognition;
+            if (!SR) {
+                return;
+            }
+            const r = new SR();
+            r.lang = editContext?.currentItemDescriptor?.language || "en-US";
+            r.continuous = true;
+            r.interimResults = true;
+            r.onstart = () => {
+                setIsListening(true);
+                prevPlaceholderRef.current = inputPlaceholder;
+                setInputPlaceholder("Listening...");
+            };
+            r.onresult = (event) => {
+                let finalText = "";
+                let interimText = "";
+                for (let i = event.resultIndex; i < event.results.length; i++) {
+                    const res = event.results[i];
+                    if (res.isFinal)
+                        finalText += res[0]?.transcript || "";
+                    else
+                        interimText += res[0]?.transcript || "";
+                }
+                if (interimText) {
+                    setInputPlaceholder(`Listening... ${interimText.trim()}`);
+                }
+                else {
+                    setInputPlaceholder("Listening...");
+                }
+                if (finalText && finalText.trim()) {
+                    setPrompt((prev) => {
+                        const prefix = prev && !prev.endsWith(" ") ? prev + " " : prev;
+                        return (prefix || "") + finalText.trim() + " ";
+                    });
+                    if (textareaRef.current) {
+                        try {
+                            const v = textareaRef.current.value || "";
+                            textareaRef.current.selectionStart = v.length;
+                            textareaRef.current.selectionEnd = v.length;
+                        }
+                        catch { }
+                    }
+                }
+            };
+            r.onerror = (e) => {
+                console.warn("Speech recognition error", e);
+            };
+            r.onend = () => {
+                setIsListening(false);
+                if (prevPlaceholderRef.current !== null) {
+                    setInputPlaceholder(prevPlaceholderRef.current);
+                    prevPlaceholderRef.current = null;
+                }
+                recognitionRef.current = null;
+            };
+            recognitionRef.current = r;
+            r.start();
+        }
+        catch (e) {
+            console.error("Failed to start voice input", e);
+        }
+    }, [
+        editContext?.currentItemDescriptor?.language,
+        inputPlaceholder,
+        isListening,
+    ]);
+    const stopVoice = useCallback(() => {
+        try {
+            const r = recognitionRef.current;
+            if (r)
+                r.stop();
+        }
+        catch { }
+    }, []);
+    const toggleVoice = useCallback(() => {
+        if (isListening)
+            stopVoice();
+        else
+            startVoice();
+    }, [isListening, startVoice, stopVoice]);
+    // Cleanup any active recognition on unmount
+    useEffect(() => {
+        return () => {
+            try {
+                const r = recognitionRef.current;
+                if (r) {
+                    r.onresult = null;
+                    r.onerror = null;
+                    r.onend = null;
+                    r.stop();
+                }
+            }
+            catch { }
+            recognitionRef.current = null;
+        };
+    }, []);
+    // Check if user is at the bottom of the scroll container
+    const isAtBottom = useCallback(() => {
+        const container = messagesContainerRef.current;
+        if (!container)
+            return true;
+        const threshold = 100; // pixels from bottom to consider "at bottom"
+        return (container.scrollHeight - container.scrollTop - container.clientHeight <
+            threshold);
+    }, []);
+    // Handle scroll events to detect manual scrolling
+    const handleScroll = useCallback(() => {
+        const atBottom = isAtBottom();
+        if (atBottom !== shouldAutoScroll) {
+            setShouldAutoScroll(atBottom);
+        }
+    }, [isAtBottom, shouldAutoScroll]);
+    // Shared stream message handlers with messageId support
+    const createNewStreamMessage = useCallback((messageId, agentData) => {
+        const currentAgent = agentData || agent;
+        if (!currentAgent) {
+            console.error("❌ createNewStreamMessage: No agent available", {
+                messageId,
+                agentData: !!agentData,
+                agent: !!agent,
+            });
+            throw new Error("No agent available");
+        }
+        // Reduced: avoid verbose logging during streaming
+        return {
+            id: messageId,
+            agentId: currentAgent.id,
+            messageIndex: -1,
+            role: "assistant",
+            content: "",
+            name: "agent",
+            messageType: "streaming",
+            isCompleted: false,
+            model: currentAgent.model || "",
+            tokensUsed: 0,
+            inputTokens: 0,
+            outputTokens: 0,
+            cachedInputTokens: 0,
+            inputTokenCost: 0,
+            outputTokenCost: 0,
+            cachedInputTokenCost: 0,
+            totalCost: 0,
+            currency: currentAgent.currency || "USD",
+            createdDate: new Date().toISOString(),
+            toolCalls: [],
+        };
+    }, [agent]);
+    const handleContentChunk = useCallback((message, agentData) => {
+        // Get messageId from data, or generate one from agent ID (for backward compatibility)
+        // If no messageId is provided, we'll use the last assistant message or create a new one
+        let messageId = message.data?.messageId;
+        if (!messageId && agentData?.id) {
+            // For backward compatibility: if no messageId, find or create the current streaming message
+            // This handles cases where the backend doesn't send messageId
+            const currentMessages = messagesRef.current;
+            const lastStreamingMessage = [...currentMessages]
+                .reverse()
+                .find((m) => m.role === "assistant" && !m.isCompleted);
+            if (lastStreamingMessage) {
+                messageId = lastStreamingMessage.id;
+            }
+            else {
+                // Create a new message ID based on timestamp
+                messageId = crypto.randomUUID();
+            }
+        }
+        if (!messageId) {
+            console.error("Unable to determine messageId for content chunk!");
+            return;
+        }
+        // Clear waiting state when first content chunk arrives
+        setIsWaitingForResponse(false);
+        isWaitingRef.current = false;
+        // Any content chunk is an incremental update -> reset idle timer
+        resetDotsTimer();
+        // Extract cost/token data from message.cost (new structure)
+        const cost = message.cost;
+        if (cost &&
+            (cost.total !== undefined || cost.tokens?.total !== undefined)) {
+            const nextTotals = {
+                input: Number(cost.tokens?.input) || 0,
+                output: Number(cost.tokens?.output) || 0,
+                cached: Number(cost.tokens?.cached) || 0,
+                cacheWrite: Number(cost.tokens?.cacheWrite) || 0,
+                inputCost: Number(cost.input) || 0,
+                outputCost: Number(cost.output) || 0,
+                cachedCost: Number(cost.cached) || 0,
+                cacheWriteCost: Number(cost.cacheWrite) || 0,
+                totalCost: Number(cost.total) || 0,
+                currency: "USD",
+            };
+            const anyNonZero = (nextTotals.totalCost || 0) > 0 ||
+                (nextTotals.input || 0) > 0 ||
+                (nextTotals.output || 0) > 0 ||
+                (nextTotals.cached || 0) > 0 ||
+                (nextTotals.cacheWrite || 0) > 0;
+            if (anyNonZero) {
+                setLiveTotals(nextTotals);
+            }
+            // Check cost limit if available
+            if (cost.limit &&
+                cost.total &&
+                Number(cost.total) > Number(cost.limit)) {
+                setCostLimitExceeded({
+                    totalCost: Number(cost.total),
+                    costLimit: Number(cost.limit),
+                    initialCostLimit: Number(cost.limit),
+                });
+                setIsWaitingForResponse(false);
+                shouldCreateNewMessage.current = false;
+            }
+        }
+        // Always call setMessages and handle all logic in the callback with latest messages
+        setMessages((prev) => {
+            // Find existing message by messageId in the latest messages
+            const existingMessageIndex = prev.findIndex((msg) => msg.id === messageId);
+            if (existingMessageIndex === -1) {
+                // Message doesn't exist - create new streaming message
+                const newStreamMessage = createNewStreamMessage(messageId, agentData);
+                // Set the content for the new message
+                const updatedNewMessage = { ...newStreamMessage };
+                if (!message.data.isIncremental) {
+                    updatedNewMessage.content = message.data?.deltaContent || "";
+                }
+                else {
+                    updatedNewMessage.content = message.data?.deltaContent || "";
+                }
+                const updated = [...prev, updatedNewMessage];
+                messagesRef.current = updated;
+                return updated;
+            }
+            else {
+                // Message exists - update it
+                const existingMessage = prev[existingMessageIndex];
+                if (!existingMessage)
+                    return prev;
+                // Check if existing content is already longer than what we're trying to stream
+                const currentContentLength = existingMessage.content?.length || 0;
+                const totalContentLength = message.data?.totalContentLength || 0;
+                if (currentContentLength >= totalContentLength &&
+                    totalContentLength > 0) {
+                    return prev;
+                }
+                const updatedMessage = { ...existingMessage };
+                if (!message.data.isIncremental) {
+                    updatedMessage.content = message.data?.deltaContent || "";
+                }
+                else {
+                    updatedMessage.content =
+                        existingMessage.content + (message.data?.deltaContent || "");
+                }
+                const updated = prev.map((msg, index) => index === existingMessageIndex ? updatedMessage : msg);
+                messagesRef.current = updated;
+                return updated;
+            }
+        });
+    }, [createNewStreamMessage]);
+    const handleToolCall = useCallback((message, agentData) => {
+        const toolCallId = message.data?.toolCallId || message.data?.id || crypto.randomUUID();
+        // Prefer provided messageId, otherwise fall back to the last streaming assistant message
+        let toolCallMessageId = message.data?.messageId;
+        if (!toolCallMessageId) {
+            const current = messagesRef.current;
+            const lastStreaming = [...current]
+                .reverse()
+                .find((m) => m.role === "assistant" && !m.isCompleted);
+            if (lastStreaming?.id) {
+                toolCallMessageId = lastStreaming.id;
+            }
+        }
+        // Find or create the target message for this tool call
+        if (toolCallMessageId) {
+            const currentMessages = messagesRef.current;
+            const existingMessageIndex = currentMessages.findIndex((msg) => msg.id === toolCallMessageId);
+            if (existingMessageIndex === -1) {
+                // Double-check with current ref to prevent race conditions
+                const currentMessages = messagesRef.current;
+                const existsInRef = currentMessages.find((msg) => msg.id === toolCallMessageId);
+                if (!existsInRef) {
+                    // Create new message for this tool call
+                    const newStreamMessage = createNewStreamMessage(toolCallMessageId, agentData);
+                    setMessages((prev) => {
+                        // Final check before adding to prevent duplicates
+                        const finalCheck = prev.find((msg) => msg.id === toolCallMessageId);
+                        if (finalCheck) {
+                            return prev;
+                        }
+                        const updated = [...prev, newStreamMessage];
+                        messagesRef.current = updated;
+                        return updated;
+                    });
+                }
+            }
+        }
+        // Add tool call to the message in the array
+        if (toolCallMessageId && message.data && toolCallId) {
+            const functionName = message.data.functionName ||
+                message.data.name ||
+                message.data.function?.name ||
+                "unknown";
+            const toolCall = {
+                id: toolCallId,
+                messageId: toolCallMessageId,
+                dbMessageId: message.data.messageId, // Database message ID for approval/rejection
+                toolCallId: toolCallId,
+                functionName: functionName,
+                functionArguments: message.data.functionArguments ||
+                    message.data.arguments ||
+                    JSON.stringify(message.data.function?.arguments || {}),
+                functionResult: message.data.functionResult || message.data.result || "",
+                functionError: message.data.functionError || message.data.error || "",
+                isCompleted: false,
+                responseTimeMs: message.data.responseTimeMs,
+                createdDate: new Date().toISOString(),
+                requiresApproval: message.data?.requiresApproval,
+            };
+            // Check for duplicates using the current messages ref
+            const currentMessages = messagesRef.current;
+            const targetMessage = currentMessages.find((msg) => msg.id === toolCallMessageId);
+            if (targetMessage) {
+                const existingToolCalls = targetMessage.toolCalls || [];
+                const existingToolCallIndex = existingToolCalls.findIndex((tc) => tc.toolCallId === toolCallId);
+                if (existingToolCallIndex !== -1) {
+                    return; // Skip adding duplicate
+                }
+            }
+            setMessages((prev) => {
+                const updated = prev.map((msg) => {
+                    if (msg.id !== toolCallMessageId)
+                        return msg;
+                    const existingToolCalls = msg.toolCalls || [];
+                    return { ...msg, toolCalls: [...existingToolCalls, toolCall] };
+                });
+                messagesRef.current = updated;
+                return updated;
+            });
+            // Tool call activity counts as activity; keep dots hidden for 1s
+            resetDotsTimer();
+        }
+    }, [createNewStreamMessage]);
+    const handleToolResult = useCallback((message, agentData) => {
+        const resultToolCallId = message.data?.toolCallId || message.data?.id || crypto.randomUUID();
+        // Prefer provided messageId, otherwise fall back to the last streaming assistant message
+        let resultMessageId = message.data?.messageId;
+        if (!resultMessageId) {
+            const current = messagesRef.current;
+            const lastStreaming = [...current]
+                .reverse()
+                .find((m) => m.role === "assistant" && !m.isCompleted);
+            if (lastStreaming?.id) {
+                resultMessageId = lastStreaming.id;
+            }
+        }
+        // Extract cost/token data from tool result if present
+        const cost = message.cost;
+        if (cost &&
+            (cost.total !== undefined || cost.tokens?.total !== undefined)) {
+            const nextTotals = {
+                input: Number(cost.tokens?.input) || 0,
+                output: Number(cost.tokens?.output) || 0,
+                cached: Number(cost.tokens?.cached) || 0,
+                cacheWrite: Number(cost.tokens?.cacheWrite) || 0,
+                inputCost: Number(cost.input) || 0,
+                outputCost: Number(cost.output) || 0,
+                cachedCost: Number(cost.cached) || 0,
+                cacheWriteCost: Number(cost.cacheWrite) || 0,
+                totalCost: Number(cost.total) || 0,
+                currency: "USD",
+            };
+            const anyNonZero = (nextTotals.totalCost || 0) > 0 ||
+                (nextTotals.input || 0) > 0 ||
+                (nextTotals.output || 0) > 0 ||
+                (nextTotals.cached || 0) > 0 ||
+                (nextTotals.cacheWrite || 0) > 0;
+            if (anyNonZero) {
+                setLiveTotals(nextTotals);
+            }
+        }
+        else {
+            // Fallback: legacy aggregated totals included in the tool result data
+            const data = message.data;
+            if (data &&
+                (data.totalCost !== undefined || data.totalTokens !== undefined)) {
+                const nextTotals = {
+                    input: Number(data.totalInputTokens) || 0,
+                    output: Number(data.totalOutputTokens) || 0,
+                    cached: Number(data.totalCachedTokens) || 0,
+                    cacheWrite: Number(data.totalCacheWriteTokens) || 0,
+                    inputCost: Number(data.totalInputTokenCost) || 0,
+                    outputCost: Number(data.totalOutputTokenCost) || 0,
+                    cachedCost: Number(data.totalCachedTokenCost) || 0,
+                    cacheWriteCost: Number(data.totalCacheWriteTokenCost) || 0,
+                    totalCost: Number(data.totalCost) || 0,
+                    currency: data.currency || "USD",
+                };
+                const anyNonZero = (nextTotals.totalCost || 0) > 0 ||
+                    (nextTotals.input || 0) > 0 ||
+                    (nextTotals.output || 0) > 0 ||
+                    (nextTotals.cached || 0) > 0 ||
+                    (nextTotals.cacheWrite || 0) > 0;
+                if (anyNonZero) {
+                    setLiveTotals(nextTotals);
+                }
+            }
+        }
+        // Update tool result directly in the messages array
+        if (!resultMessageId) {
+            return;
+        }
+        // Update the message with tool result
+        setMessages((prev) => {
+            const updated = prev.map((msg) => {
+                if (msg.id !== resultMessageId)
+                    return msg;
+                const updatedMessage = { ...msg };
+                if (!updatedMessage.toolCalls) {
+                    updatedMessage.toolCalls = [];
+                }
+                // Find and update the tool call with the result
+                const toolCallIndex = updatedMessage.toolCalls.findIndex((tc) => tc.toolCallId === resultToolCallId);
+                if (toolCallIndex >= 0) {
+                    const existingToolCall = updatedMessage.toolCalls[toolCallIndex];
+                    if (existingToolCall && message.data) {
+                        const updatedToolCalls = [...updatedMessage.toolCalls];
+                        const toolCall = {
+                            id: existingToolCall.id,
+                            messageId: existingToolCall.messageId,
+                            toolCallId: existingToolCall.toolCallId,
+                            functionName: existingToolCall.functionName,
+                            functionArguments: existingToolCall.functionArguments,
+                            functionResult: message.data.functionResult || message.data.result || "",
+                            functionError: message.data.functionError || message.data.error || "",
+                            isCompleted: true,
+                            responseTimeMs: message.data.responseTimeMs,
+                            createdDate: existingToolCall.createdDate,
+                        };
+                        updatedToolCalls[toolCallIndex] = toolCall;
+                        updatedMessage.toolCalls = updatedToolCalls;
+                    }
+                    // Check if all tool calls in message are completed
+                    const allToolCallsCompleted = updatedMessage.toolCalls.every((tc) => tc.isCompleted);
+                    if (allToolCallsCompleted) {
+                        shouldCreateNewMessage.current = true;
+                    }
+                }
+                else if (message.data && resultToolCallId && resultMessageId) {
+                    // Create new tool call if it doesn't exist
+                    const functionName = message.data.functionName ||
+                        message.data.name ||
+                        message.data.function?.name ||
+                        "unknown";
+                    const toolCall = {
+                        id: resultToolCallId,
+                        messageId: resultMessageId,
+                        toolCallId: resultToolCallId,
+                        functionName: functionName,
+                        functionArguments: message.data.functionArguments ||
+                            message.data.arguments ||
+                            JSON.stringify(message.data.function?.arguments || {}),
+                        functionResult: message.data.functionResult || message.data.result || "",
+                        functionError: message.data.functionError || message.data.error || "",
+                        isCompleted: true,
+                        responseTimeMs: message.data.responseTimeMs,
+                        createdDate: new Date().toISOString(),
+                    };
+                    updatedMessage.toolCalls = [...updatedMessage.toolCalls, toolCall];
+                }
+                // Updated tool calls count
+                return updatedMessage;
+            });
+            messagesRef.current = updated;
+            return updated;
+        });
+        // Tool result activity; reset idle timer
+        resetDotsTimer();
+    }, [resetDotsTimer]);
+    // Listen for local approval resolution to update UI
+    useEffect(() => {
+        const onApprovalResolved = (ev) => {
+            try {
+                const detail = ev?.detail || {};
+                const messageId = detail.messageId;
+                const toolCallId = detail.toolCallId;
+                const approved = !!detail.approved;
+                if (!messageId || !toolCallId)
+                    return;
+                // Update local state to reflect approval status
+                setMessages((prev) => {
+                    const updated = prev.map((m) => {
+                        if (m.id !== messageId)
+                            return m;
+                        const updatedToolCalls = (m.toolCalls || []).map((tc) => {
+                            if (tc.toolCallId !== toolCallId)
+                                return tc;
+                            const base = (tc.functionName || "")
+                                .replace(" (pending approval)", "")
+                                .replace(" (approved)", "")
+                                .replace(" (rejected)", "");
+                            return {
+                                ...tc,
+                                functionName: base + (approved ? " (approved)" : " (rejected)"),
+                            };
+                        });
+                        return { ...m, toolCalls: updatedToolCalls };
+                    });
+                    messagesRef.current = updated;
+                    return updated;
+                });
+            }
+            catch (err) {
+                console.error("❌ Error handling approval resolution:", err);
+            }
+        };
+        window.addEventListener("agent:toolApprovalResolved", onApprovalResolved);
+        return () => window.removeEventListener("agent:toolApprovalResolved", onApprovalResolved);
+    }, []);
+    // Load agent data and messages
+    const loadAgent = useCallback(async () => {
+        try {
+            if (agentStub.status === "new") {
+                // Derive initial profile from provided metadata if present
+                const initialProfileIdFromMeta = (() => {
+                    try {
+                        return initialMetadata?.additionalData?.profileId;
+                    }
+                    catch {
+                        return undefined;
+                    }
+                })();
+                const initialProfileNameFromMeta = (() => {
+                    try {
+                        return (initialMetadata?.additionalData?.profileName ||
+                            initialMetadata?.profile ||
+                            undefined);
+                    }
+                    catch {
+                        return undefined;
+                    }
+                })();
+                setAgent({
+                    ...agentStub,
+                    messages: [],
+                    status: "new",
+                    updatedDate: new Date().toISOString(),
+                    createdDate: new Date().toISOString(),
+                    id: agentStub.id,
+                    name: agentStub.name,
+                    model: "",
+                    currency: "USD",
+                    profileId: initialProfileIdFromMeta || "",
+                    profileName: initialProfileNameFromMeta || "",
+                    totalTokensUsed: 0,
+                    totalInputTokens: 0,
+                    totalOutputTokens: 0,
+                    totalCachedInputTokens: 0,
+                    totalInputTokenCost: 0,
+                    totalOutputTokenCost: 0,
+                    totalCachedInputTokenCost: 0,
+                    totalCost: 0,
+                    messageCount: 0,
+                });
+                setMessages([]);
+                setError(null);
+                setIsLoading(false);
+                // Initialize local context for a brand-new agent (not yet persisted)
+                // Optionally seed with current page/selection/focused field based on profile setting
+                const item = editContext?.currentItemDescriptor;
+                const profileForSeeding = (() => {
+                    try {
+                        if (initialProfileIdFromMeta) {
+                            const byId = (profiles || []).find((p) => p.id === initialProfileIdFromMeta);
+                            if (byId)
+                                return byId;
+                        }
+                        if (initialProfileNameFromMeta) {
+                            const byName = (profiles || []).find((p) => p.name === initialProfileNameFromMeta);
+                            if (byName)
+                                return byName;
+                        }
+                        return (profiles || [])[0];
+                    }
+                    catch {
+                        return undefined;
+                    }
+                })();
+                const shouldSeedContext = (() => {
+                    try {
+                        // Prefer profile flag if available; default to true when unspecified
+                        return profileForSeeding?.includeEditorContextOnCreate !== undefined
+                            ? !!profileForSeeding.includeEditorContextOnCreate
+                            : true;
+                    }
+                    catch {
+                        return true;
+                    }
+                })();
+                // Create context with top-level properties (what ContextInfoBar expects)
+                const localCtx = item && shouldSeedContext
+                    ? {
+                        items: [
+                            {
+                                id: item.id,
+                                language: item.language,
+                                version: item.version,
+                                name: editContext?.contentEditorItem?.name,
+                            },
+                        ],
+                        components: editContext?.selection?.length && item
+                            ? editContext.selection.map((componentId) => ({
+                                componentId,
+                                pageItem: {
+                                    id: item.id,
+                                    language: item.language,
+                                    version: item.version,
+                                    name: editContext?.contentEditorItem?.name,
+                                },
+                            }))
+                            : undefined,
+                        field: fieldsContext?.focusedField?.fieldId &&
+                            fieldsContext.focusedField?.item?.id
+                            ? {
+                                fieldId: fieldsContext.focusedField.fieldId,
+                                fieldName: fieldsContext.focusedField
+                                    .fieldName,
+                                item: {
+                                    id: fieldsContext.focusedField.item.id,
+                                    language: fieldsContext.focusedField.item.language ||
+                                        editContext?.currentItemDescriptor?.language ||
+                                        "en",
+                                    version: fieldsContext.focusedField.item.version ??
+                                        editContext?.currentItemDescriptor?.version ??
+                                        0,
+                                    name: editContext?.contentEditorItem?.name,
+                                },
+                            }
+                            : undefined,
+                    }
+                    : null;
+                let nextMetadata = null;
+                if (initialMetadata) {
+                    // Merge initial metadata with local context (using top-level structure)
+                    const base = { ...initialMetadata };
+                    if (localCtx) {
+                        // Merge items (avoid duplicates)
+                        if (localCtx.items && localCtx.items.length) {
+                            const targetPages = Array.isArray(base.items)
+                                ? [...base.items]
+                                : [];
+                            const existingKeys = new Set(targetPages.map((p) => `${p.id}-${p.language || ""}-${p.version || ""}`));
+                            const additions = localCtx.items.filter((p) => !existingKeys.has(`${p.id}-${p.language || ""}-${p.version || ""}`));
+                            if (additions.length)
+                                base.items = [...targetPages, ...additions];
+                        }
+                        // Merge components (avoid duplicates)
+                        if (localCtx.components && localCtx.components.length) {
+                            const currentComponents = Array.isArray(base.components)
+                                ? base.components
+                                : [];
+                            const existingIds = new Set(currentComponents.map((c) => c.componentId));
+                            const additions = localCtx.components.filter((c) => !!c?.componentId && !existingIds.has(c.componentId));
+                            if (additions.length)
+                                base.components = [...currentComponents, ...additions];
+                        }
+                        // Set field if missing
+                        if (!base.field && localCtx.field) {
+                            base.field = localCtx.field;
+                        }
+                    }
+                    nextMetadata = base;
+                }
+                else {
+                    nextMetadata = localCtx;
+                }
+                if (nextMetadata) {
+                    setAgentMetadata(sanitizeAgentMetadata(nextMetadata));
+                    // If an initial prompt is provided via metadata, seed the input once
+                    try {
+                        const maybePrompt = nextMetadata?.additionalData
+                            ?.initialPrompt;
+                        if (typeof maybePrompt === "string" && maybePrompt.trim()) {
+                            setPrompt(maybePrompt);
+                        }
+                    }
+                    catch { }
+                }
+                return;
+            }
+            setIsLoading(true);
+            setError(null);
+            const agentData = await getAgent(agentStub.id);
+            setAgent(agentData);
+            // Merge database messages with any existing local messages using ID-based deduplication
+            // This prevents both missing messages and duplicates
+            setMessages((prevMessages) => {
+                const dbMessages = agentData.messages || [];
+                // Track all DB message IDs as "seen" to prevent WebSocket duplicates
+                dbMessages.forEach((msg) => {
+                    if (msg.id) {
+                        seenMessageIdsRef.current.add(msg.id.toLowerCase());
+                    }
+                });
+                const merged = mergeMessagesById(dbMessages, prevMessages);
+                return merged;
+            });
+            // Check if cost limit was exceeded (detect from existing messages)
+            try {
+                const costLimitMessage = (agentData.messages || []).find((msg) => msg.role === "assistant" &&
+                    msg.content &&
+                    msg.content.startsWith("⚠️") &&
+                    msg.content.includes("Cost limit"));
+                if (costLimitMessage &&
+                    costLimitMessage.content &&
+                    agentData.costLimit) {
+                    // Extract cost from the message if possible
+                    const match = costLimitMessage.content.match(/Current cost: \$([0-9.]+)/);
+                    const totalCost = match && match[1] ? parseFloat(match[1]) : agentData.totalCost || 0;
+                    setCostLimitExceeded({
+                        totalCost: totalCost,
+                        costLimit: agentData.costLimit,
+                        initialCostLimit: agentData.costLimit,
+                    });
+                }
+                else if (agentData.costLimit &&
+                    agentData.totalCost &&
+                    agentData.totalCost > agentData.costLimit) {
+                    setCostLimitExceeded({
+                        totalCost: agentData.totalCost,
+                        costLimit: agentData.costLimit,
+                        initialCostLimit: agentData.costLimit,
+                    });
+                }
+            }
+            catch (e) {
+                console.error("Failed to check cost limit on load:", e);
+            }
+            // Parse metadata from DB if present (do not seed for existing agents)
+            const parsedMeta = (() => {
+                try {
+                    const contextJson = agentData.agentContext;
+                    if (!contextJson)
+                        return null;
+                    const parsedContext = JSON.parse(contextJson);
+                    // Context is stored as flat structure with top-level properties
+                    if (parsedContext && typeof parsedContext === "object") {
+                        return parsedContext;
+                    }
+                    return null;
+                }
+                catch {
+                    return null;
+                }
+            })();
+            // For existing agents, use database metadata or none
+            setAgentMetadata(sanitizeAgentMetadata(parsedMeta));
+        }
+        catch (err) {
+            console.error("❌ Failed to load agent:", err);
+            // For new agents that don't exist yet, this is expected
+            if (err?.message?.includes("404") ||
+                err?.message?.includes("not found")) {
+                // Agent does not exist, treat as new
+                setAgent(undefined);
+                setMessages([]);
+                setError(null);
+            }
+            else {
+                console.error("❌ Load error:", err.message);
+                setError("Failed to load agent data");
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [agentStub.id]);
+    // Initial load
+    useEffect(() => {
+        loadAgent();
+    }, [loadAgent]);
+    // Reload agent when tab becomes active to get latest messages
+    const previousIsActiveRef = useRef(isActive);
+    useEffect(() => {
+        const wasInactive = !previousIsActiveRef.current;
+        const isNowActive = isActive;
+        previousIsActiveRef.current = isActive;
+        if (wasInactive && isNowActive && agent) {
+            loadAgent();
+        }
+    }, [isActive, agent?.id, loadAgent]);
+    // Watch for cost limit exceeded based on agent status or cost values
+    useEffect(() => {
+        if (!agent) {
+            setCostLimitExceeded(null);
+            return;
+        }
+        // Check if cost limit exceeded based on status or cost values
+        const statusIndicatesLimit = agent.status === "costLimitReached" || agent.status === 7;
+        const costExceedsLimit = agent.costLimit && agent.totalCost && agent.totalCost > agent.costLimit;
+        if (statusIndicatesLimit || costExceedsLimit) {
+            // Only set if not already set to avoid unnecessary re-renders
+            setCostLimitExceeded((prev) => {
+                const totalCost = agent.totalCost || 0;
+                const costLimit = agent.costLimit || 0;
+                // Check if values actually changed
+                if (prev?.totalCost === totalCost && prev?.costLimit === costLimit) {
+                    return prev;
+                }
+                return {
+                    totalCost,
+                    costLimit,
+                    initialCostLimit: costLimit,
+                };
+            });
+        }
+        else {
+            // Clear cost limit exceeded if status changed back
+            setCostLimitExceeded((prev) => (prev ? null : prev));
+        }
+    }, [agent?.status, agent?.totalCost, agent?.costLimit]);
+    // WebSocket message handler for agent streaming
+    const handleAgentWebSocketMessage = useCallback((message) => {
+        if (!agent)
+            return;
+        const messageType = message.type;
+        // Handle agent:name:updated (payload structure is different)
+        if (messageType === "agent:name:updated") {
+            const { agentId: updatedAgentId, agentName } = message.payload;
+            if (updatedAgentId === agent.id && agentName) {
+                setAgent((prev) => (prev ? { ...prev, name: agentName } : prev));
+            }
+            return;
+        }
+        // For other agent messages, check if this is for our agent
+        const agentId = message.payload?.agentId;
+        if (agentId !== agent.id)
+            return;
+        // Handle agent:run:start
+        if (messageType === "agent:run:start") {
+            // Reset run-scoped deduplication so new run seq values (starting at 1)
+            // are not discarded due to previous run's lastSeqRef
+            lastSeqRef.current = 0;
+            // Prep streaming UI state for the new run
+            setIsConnecting(true);
+            setIsWaitingForResponse(true);
+            isWaitingRef.current = true;
+            shouldCreateNewMessage.current = false;
+            resetDotsTimer();
+            return;
+        }
+        // Handle agent:user:message
+        if (messageType === "agent:user:message") {
+            const { messageId, content, timestamp } = message.payload;
+            // Track in seenMessageIds for deduplication
+            const normalizedId = messageId.toLowerCase();
+            if (seenMessageIdsRef.current.has(normalizedId)) {
+                return;
+            }
+            seenMessageIdsRef.current.add(normalizedId);
+            // Add user message to the messages list
+            setMessages((prev) => {
+                // Double-check if message already exists (deduplication)
+                if (prev.some((m) => m.id && m.id.toLowerCase() === normalizedId)) {
+                    return prev;
+                }
+                const userMessage = {
+                    id: messageId,
+                    agentId: agent.id,
+                    messageIndex: prev.length,
+                    role: "user",
+                    content: content,
+                    name: "user",
+                    messageType: "user",
+                    isCompleted: true,
+                    model: "",
+                    tokensUsed: 0,
+                    inputTokens: 0,
+                    outputTokens: 0,
+                    cachedInputTokens: 0,
+                    inputTokenCost: 0,
+                    outputTokenCost: 0,
+                    cachedInputTokenCost: 0,
+                    totalCost: 0,
+                    currency: "USD",
+                    createdDate: timestamp || new Date().toISOString(),
+                    toolCalls: [],
+                };
+                const updated = [...prev, userMessage];
+                messagesRef.current = updated;
+                return updated;
+            });
+            return;
+        }
+        // Handle agent:run:delta (content, tools, etc.)
+        if (messageType === "agent:run:delta") {
+            const { seq, type, data, cost } = message.payload;
+            // Deduplicate by sequence
+            if (seq && seq <= lastSeqRef.current) {
+                return; // Already processed
+            }
+            if (seq) {
+                lastSeqRef.current = seq;
+            }
+            // Route based on delta type
+            const agentStreamMessage = {
+                type,
+                data,
+                cost,
+                timestamp: new Date().toISOString(),
+            };
+            if (type === "ContentChunk" || type === "contentChunk") {
+                handleContentChunk(agentStreamMessage, agent);
+            }
+            else if (type === "ToolCall" || type === "toolCall") {
+                handleToolCall(agentStreamMessage, agent);
+            }
+            else if (type === "ToolResult" || type === "toolResult") {
+                handleToolResult(agentStreamMessage, agent);
+            }
+            return;
+        }
+        // Unified: agent:run:status (state only)
+        if (messageType === "agent:run:status") {
+            const { seq, data: statusData } = message.payload;
+            // Deduplicate by sequence
+            if (seq && seq <= lastSeqRef.current) {
+                return;
+            }
+            if (seq) {
+                lastSeqRef.current = seq;
+            }
+            // Route based on statusData.state
+            try {
+                if (statusData?.state === "streamOpen") {
+                    setIsConnecting(false);
+                    return;
+                }
+                if (statusData?.state === "tokenUsage") {
+                    const totals = statusData?.totals;
+                    if (totals) {
+                        const totalCost = Number(totals.totalCost) || 0;
+                        const statusCostLimit = (() => {
+                            try {
+                                const v = statusData?.costLimit;
+                                const n = v != null ? Number(v) : undefined;
+                                return Number.isFinite(n) && n > 0
+                                    ? n
+                                    : undefined;
+                            }
+                            catch {
+                                return undefined;
+                            }
+                        })();
+                        const nextTotals = {
+                            input: Number(totals.totalInputTokens) || 0,
+                            output: Number(totals.totalOutputTokens) || 0,
+                            cached: Number(totals.totalCachedInputTokens) || 0,
+                            cacheWrite: Number(totals.totalCacheWriteTokens) || 0,
+                            inputCost: Number(totals.totalInputTokenCost) || 0,
+                            outputCost: Number(totals.totalOutputTokenCost) || 0,
+                            cachedCost: Number(totals.totalCachedInputTokenCost) || 0,
+                            cacheWriteCost: Number(totals.totalCacheWriteTokenCost) || 0,
+                            totalCost: totalCost,
+                            currency: totals.currency,
+                        };
+                        const anyNonZero = (nextTotals.totalCost || 0) > 0 ||
+                            (nextTotals.input || 0) > 0 ||
+                            (nextTotals.output || 0) > 0 ||
+                            (nextTotals.cached || 0) > 0 ||
+                            (nextTotals.cacheWrite || 0) > 0;
+                        if (anyNonZero) {
+                            setLiveTotals(nextTotals);
+                        }
+                        // If server provides costLimit along with totals, persist it locally
+                        if (statusCostLimit) {
+                            setAgent((prev) => prev &&
+                                (!prev.costLimit || prev.costLimit !== statusCostLimit)
+                                ? { ...prev, costLimit: statusCostLimit }
+                                : prev);
+                        }
+                        if (agent?.costLimit && totalCost > agent.costLimit) {
+                            setCostLimitExceeded({
+                                totalCost: totalCost,
+                                costLimit: agent.costLimit,
+                                initialCostLimit: agent.costLimit,
+                            });
+                            setIsWaitingForResponse(false);
+                            shouldCreateNewMessage.current = false;
+                        }
+                        setMessages((prev) => [...prev]);
+                    }
+                    return;
+                }
+                if (statusData?.state === "ToolApprovalsRequired") {
+                    const msgId = statusData.messageId;
+                    const ids = statusData.toolCallIds || [];
+                    if (msgId && Array.isArray(ids) && ids.length > 0) {
+                        setMessages((prev) => {
+                            const updated = prev.map((m) => {
+                                if (m.id !== msgId)
+                                    return m;
+                                const existingToolCalls = m.toolCalls || [];
+                                const updatedToolCalls = existingToolCalls.map((tc) => {
+                                    if (!ids.includes(tc.toolCallId))
+                                        return tc;
+                                    const fn = tc.functionName || "";
+                                    return {
+                                        ...tc,
+                                        functionName: fn.includes("(pending approval)")
+                                            ? fn
+                                            : fn + " (pending approval)",
+                                    };
+                                });
+                                return { ...m, toolCalls: updatedToolCalls };
+                            });
+                            messagesRef.current = updated;
+                            return updated;
+                        });
+                    }
+                    setIsConnecting(false);
+                    setIsWaitingForResponse(false);
+                    return;
+                }
+                if (statusData?.state === "CostLimitReached") {
+                    const totalCost = Number(statusData.totalCost) || 0;
+                    const costLimit = Number(statusData.costLimit) || agent?.costLimit || 0;
+                    setCostLimitExceeded({
+                        totalCost: totalCost,
+                        costLimit: costLimit,
+                        initialCostLimit: costLimit,
+                    });
+                    setIsWaitingForResponse(false);
+                    setIsConnecting(false);
+                    return;
+                }
+                if (statusData?.state === "contextWindow") {
+                    window.__agentContextWindowStatus = {
+                        model: statusData.model,
+                        normalizedModel: statusData.normalizedModel,
+                        contextWindowTokens: statusData.contextWindowTokens,
+                        maxCompletionTokens: statusData.maxCompletionTokens,
+                        estimatedInputTokens: statusData.estimatedInputTokens,
+                        messageCount: statusData.messageCount,
+                        contextUsedPercent: statusData.contextUsedPercent,
+                    };
+                    setMessages((prev) => [...prev]);
+                    return;
+                }
+                if (statusData?.state === "contextChanged") {
+                    const nextContext = statusData.context || {};
+                    setAgentMetadata((prev) => {
+                        const current = (prev || {});
+                        const currentWithoutContext = { ...current };
+                        delete currentWithoutContext.context;
+                        const next = {
+                            ...currentWithoutContext,
+                            additionalData: {
+                                ...(current.additionalData || {}),
+                                context: nextContext,
+                            },
+                        };
+                        return next;
+                    });
+                    return;
+                }
+            }
+            catch (err) {
+                console.error("[AgentTerminal] Error handling status update:", err);
+            }
+            return;
+        }
+        // Lifecycle: agent:run:complete
+        if (messageType === "agent:run:complete") {
+            // Reset deduplication for the next run
+            lastSeqRef.current = 0;
+            // Mark the last assistant message as completed
+            setMessages((prev) => {
+                const updated = prev.map((msg) => msg.role === "assistant" && !msg.isCompleted
+                    ? {
+                        ...msg,
+                        isCompleted: true,
+                        messageType: "completed",
+                    }
+                    : msg);
+                messagesRef.current = updated;
+                return updated;
+            });
+            setIsWaitingForResponse(false);
+            isWaitingRef.current = false;
+            setIsConnecting(false);
+            shouldCreateNewMessage.current = false;
+            resetDotsTimer();
+            return;
+        }
+        // Lifecycle: agent:run:error
+        if (messageType === "agent:run:error") {
+            const errorMsg = message.payload?.error || "Unknown error";
+            // Reset deduplication for the next run after an error
+            lastSeqRef.current = 0;
+            setError(errorMsg);
+            setIsWaitingForResponse(false);
+            isWaitingRef.current = false;
+            setIsConnecting(false);
+            resetDotsTimer();
+            return;
+        }
+    }, [
+        agent,
+        handleContentChunk,
+        handleToolCall,
+        handleToolResult,
+        resetDotsTimer,
+    ]);
+    // Keep refs for latest agent and resetDotsTimer to avoid adding them to effect deps
+    const agentRef = useRef(agent);
+    const resetDotsTimerRef = useRef(resetDotsTimer);
+    const handleAgentWebSocketMessageRef = useRef(handleAgentWebSocketMessage);
+    useEffect(() => {
+        agentRef.current = agent;
+    }, [agent]);
+    useEffect(() => {
+        resetDotsTimerRef.current = resetDotsTimer;
+    }, [resetDotsTimer]);
+    useEffect(() => {
+        handleAgentWebSocketMessageRef.current = handleAgentWebSocketMessage;
+    }, [handleAgentWebSocketMessage]);
+    // Subscribe to agent WebSocket messages when active
+    useEffect(() => {
+        const addListener = editContext?.addSocketMessageListener;
+        if (!isActive || !addListener) {
+            // Unsubscribe if we were previously subscribed
+            if (subscribedAgentIdRef.current) {
+                const socket = globalThis.editorSocket;
+                if (socket && socket.readyState === WebSocket.OPEN) {
+                    socket.send(JSON.stringify({
+                        type: "agent:unsubscribe",
+                        agentId: subscribedAgentIdRef.current,
+                    }));
+                }
+                subscribedAgentIdRef.current = null;
+            }
+            return;
+        }
+        // Send subscription message to server
+        const socket = globalThis.editorSocket;
+        if (socket && socket.readyState === WebSocket.OPEN) {
+            socket.send(JSON.stringify({
+                type: "agent:subscribe",
+                agentId: agentStub.id,
+            }));
+        }
+        // Use the addSocketMessageListener helper from editContext
+        // Wrap the handler in a stable function that uses the ref
+        const stableHandler = (message) => {
+            handleAgentWebSocketMessageRef.current(message);
+        };
+        const unsubscribe = addListener(stableHandler);
+        subscribedAgentIdRef.current = agentStub.id;
+        // Reset deduplication state when switching agents
+        seenMessageIdsRef.current.clear();
+        lastSeqRef.current = 0;
+        // Set up streaming state based on agent status (uses latest values via refs)
+        const currentAgent = agentRef.current;
+        if (currentAgent) {
+            const isRunning = currentAgent.status === "running" || currentAgent.status === 1;
+            const isWaitingForApproval = currentAgent.status === "waitingForApproval" ||
+                currentAgent.status === 2;
+            if (isRunning) {
+                setIsWaitingForResponse(true);
+                isWaitingRef.current = true;
+                shouldCreateNewMessage.current = false;
+                resetDotsTimerRef.current();
+            }
+            else if (isWaitingForApproval) {
+                setIsWaitingForResponse(false);
+                isWaitingRef.current = false;
+                resetDotsTimerRef.current();
+            }
+            else {
+                setIsWaitingForResponse(false);
+                isWaitingRef.current = false;
+                resetDotsTimerRef.current();
+            }
+        }
+        return () => {
+            // Send unsubscribe message to server
+            const socket = globalThis.editorSocket;
+            if (socket &&
+                socket.readyState === WebSocket.OPEN &&
+                subscribedAgentIdRef.current) {
+                socket.send(JSON.stringify({
+                    type: "agent:unsubscribe",
+                    agentId: subscribedAgentIdRef.current,
+                }));
+            }
+            unsubscribe();
+            subscribedAgentIdRef.current = null;
+        };
+    }, [isActive, agentStub.id, editContext?.addSocketMessageListener]);
+    // Focus prompt when requested globally (from AI command)
+    useEffect(() => {
+        const focusHandler = () => {
+            try {
+                if (textareaRef.current) {
+                    textareaRef.current.focus();
+                    // Move caret to end
+                    const value = textareaRef.current.value || "";
+                    textareaRef.current.selectionStart = value.length;
+                    textareaRef.current.selectionEnd = value.length;
+                }
+            }
+            catch { }
+        };
+        window.addEventListener("editor:focusAgentPrompt", focusHandler);
+        return () => window.removeEventListener("editor:focusAgentPrompt", focusHandler);
+    }, []);
+    // Profiles are provided by parent component (Agents). No local loading here.
+    // Select active profile based on agent.profileId or agentStub.profileId
+    useEffect(() => {
+        if (!profiles || profiles.length === 0)
+            return;
+        // For new agents, use agentStub.profileId; for loaded agents, use agent.profileId
+        const profileIdToUse = agent?.profileId || agentStub.profileId;
+        const candidate = profileIdToUse
+            ? (profiles.find((p) => p.id === profileIdToUse) ?? profiles[0])
+            : profiles[0];
+        if (candidate && (!activeProfile || activeProfile.id !== candidate.id)) {
+            setActiveProfile(candidate);
+        }
+    }, [profiles, agent?.profileId, agentStub.profileId]);
+    // Update selected model when the active profile or agent model changes
+    useEffect(() => {
+        if (!activeProfile)
+            return;
+        const agentModelName = agent?.model; // persisted as model NAME on server
+        const models = activeProfile.models || [];
+        let nextModelId = undefined;
+        if (agentModelName) {
+            const match = models.find((m) => (m.name || "").toLowerCase() === agentModelName.toLowerCase());
+            if (match)
+                nextModelId = match.id;
+        }
+        if (!nextModelId) {
+            nextModelId = activeProfile.defaultModelId || models[0]?.id;
+        }
+        setSelectedModelId(nextModelId || undefined);
+    }, [activeProfile?.id, agent?.model]);
+    // Cleanup stream connection when component unmounts or agent changes
+    useEffect(() => {
+        return () => {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+        };
+    }, [agent?.id]);
+    // Initialize mode from metadata; fall back to agent.Mode from server
+    useEffect(() => {
+        try {
+            const metaMode = agentMetadata?.mode;
+            if (metaMode === "autonomous" ||
+                metaMode === "read-only" ||
+                metaMode === "supervised") {
+                setMode(metaMode);
+                return;
+            }
+        }
+        catch { }
+        try {
+            const serverMode = agent?.mode;
+            if (serverMode === "autonomous" ||
+                serverMode === "read-only" ||
+                serverMode === "supervised") {
+                setMode(serverMode);
+            }
+        }
+        catch { }
+    }, [agentMetadata, agent?.mode]);
+    // Auto-scroll when messages change (only if user hasn't manually scrolled up)
+    useLayoutEffect(() => {
+        if (shouldAutoScroll) {
+            scrollToBottom();
+        }
+    }, [messages, scrollToBottom, shouldAutoScroll]);
+    // Persist any pending settings (mode/model) once an agent exists server-side
+    const persistPendingSettingsIfNeeded = useCallback(async () => {
+        try {
+            if (!agent?.id)
+                return;
+            const pending = pendingSettingsRef.current;
+            if (!pending)
+                return;
+            const payload = {};
+            if (pending.modelName)
+                payload.model = pending.modelName;
+            if (pending.mode)
+                payload.mode = pending.mode;
+            if (Object.keys(payload).length === 0)
+                return;
+            await updateAgentSettings(agent.id, payload);
+            pendingSettingsRef.current = null;
+        }
+        catch (e) {
+            console.error("Failed to persist pending settings", e);
+        }
+    }, [agent?.id]);
+    const handleSubmit = async () => {
+        if (isSubmitting || !editContext)
+            return;
+        try {
+            setIsSubmitting(true);
+            setError(null);
+            // For new agents, use agentStub.id; for existing agents, use agent.id
+            const agentId = agent?.id || agentStub.id;
+            if (!agentId)
+                return;
+            // Optional context factory: invoke if configured and available, otherwise continue
+            const factoryName = agentMetadata?.additionalData
+                ?.contextFactory;
+            if (factoryName) {
+                const factory = editContext.getContextFactory?.(factoryName);
+                if (factory) {
+                    try {
+                        await Promise.resolve(factory());
+                    }
+                    catch (e) {
+                        console.warn(`Context factory '${factoryName}' failed: ${e?.message || String(e)}`);
+                    }
+                }
+                else {
+                    console.warn(`Context factory not found: ${factoryName}. Proceeding without it.`);
+                }
+            }
+            // NOTE: User message is no longer added optimistically here
+            // It will be added when we receive the agent:user:message broadcast from the server
+            // This ensures all tabs (including the sending tab) have the same messageId from the database
+            const request = {
+                agentId: agentId,
+                message: prompt.trim(),
+                sessionId: editContext.sessionId,
+                profileId: activeProfile?.id || profiles[0]?.id || "",
+                profile: activeProfile?.name || profiles[0]?.name || "",
+                model: selectedModelId,
+                mode: mode,
+                context: canonicalizeAgentMetadata(agentMetadata), // Canonicalize to ensure complete field structure
+                deterministic: deterministicFlags.deterministic,
+                seed: deterministicFlags.seed,
+            };
+            // Starting agent
+            // Set waiting state to show dancing dots immediately
+            setIsWaitingForResponse(true);
+            // Update the ref immediately so resetDotsTimer sees the new state
+            isWaitingRef.current = true;
+            // Start idle timer; dots appear only if no chunks for >1s
+            resetDotsTimer();
+            // Re-enable auto-scroll when user submits a new message
+            setShouldAutoScroll(true);
+            // No need to create a temporary message - the stream will create messages as needed
+            await startAgent(request);
+            // If user changed mode/model while the agent was new, persist them now
+            await persistPendingSettingsIfNeeded();
+            // Save prompt to history
+            if (prompt.trim()) {
+                setPromptHistory((prev) => [
+                    prompt.trim(),
+                    ...prev.filter((p) => p !== prompt.trim()).slice(0, 9),
+                ]);
+                setCurrentHistoryIndex(-1);
+            }
+            setPrompt("");
+            // WebSocket connection is already active via subscription - no need for SSE
+        }
+        catch (err) {
+            console.error("Failed to submit prompt:", err);
+            setError("Failed to submit prompt");
+            setIsWaitingForResponse(false);
+            // Remove the optimistically added user message on error
+            setMessages((prev) => prev.slice(0, -1));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleKeyPress = (e) => {
+        // 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();
+        }
+        if (e.key === "ArrowUp") {
+            // Only navigate history if prompt is empty or we're already navigating history
+            const canNavigateHistory = prompt.trim().length === 0 || currentHistoryIndex !== -1;
+            if (canNavigateHistory) {
+                e.preventDefault();
+                if (promptHistory.length > 0) {
+                    const newIndex = currentHistoryIndex < promptHistory.length - 1
+                        ? currentHistoryIndex + 1
+                        : currentHistoryIndex;
+                    setCurrentHistoryIndex(newIndex);
+                    const historicalPrompt = promptHistory[newIndex];
+                    if (textareaRef.current && historicalPrompt) {
+                        setPrompt(historicalPrompt);
+                        setTimeout(() => {
+                            if (textareaRef.current) {
+                                textareaRef.current.selectionStart = historicalPrompt.length;
+                                textareaRef.current.selectionEnd = historicalPrompt.length;
+                            }
+                        }, 0);
+                    }
+                }
+            }
+        }
+        if (e.key === "ArrowDown" && currentHistoryIndex >= 0) {
+            e.preventDefault();
+            const newIndex = currentHistoryIndex - 1;
+            setCurrentHistoryIndex(newIndex);
+            const historicalPrompt = newIndex >= 0 ? promptHistory[newIndex] || "" : "";
+            setPrompt(historicalPrompt);
+            if (textareaRef.current) {
+                setTimeout(() => {
+                    if (textareaRef.current) {
+                        textareaRef.current.selectionStart = historicalPrompt.length;
+                        textareaRef.current.selectionEnd = historicalPrompt.length;
+                    }
+                }, 0);
+            }
+        }
+    };
+    // Send a message programmatically (used by quick-action buttons)
+    const sendQuickMessage = async (text) => {
+        if (!text.trim() || isSubmitting || !editContext)
+            return;
+        try {
+            setIsSubmitting(true);
+            setError(null);
+            const agentId = agent?.id;
+            if (!agentId)
+                return;
+            // Optional context factory: invoke if configured and available, otherwise continue
+            const factoryName = agentMetadata?.additionalData
+                ?.contextFactory;
+            if (factoryName) {
+                const factory = editContext.getContextFactory?.(factoryName);
+                if (factory) {
+                    try {
+                        await Promise.resolve(factory());
+                    }
+                    catch (e) {
+                        console.warn(`Context factory '${factoryName}' failed: ${e?.message || String(e)}`);
+                    }
+                }
+                else {
+                    console.warn(`Context factory not found: ${factoryName}. Proceeding without it.`);
+                }
+            }
+            // NOTE: User message is no longer added optimistically here
+            // It will be added when we receive the agent:user:message broadcast from the server
+            // This ensures all tabs (including the sending tab) have the same messageId from the database
+            const request = {
+                agentId: agent.id,
+                message: text.trim(),
+                sessionId: editContext.sessionId,
+                profileId: activeProfile?.id || profiles[0]?.id || "",
+                profile: activeProfile?.name || profiles[0]?.name || "",
+                model: selectedModelId,
+                mode: mode,
+                context: canonicalizeAgentMetadata(agentMetadata), // Canonicalize to ensure complete field structure
+                deterministic: deterministicFlags.deterministic,
+                seed: deterministicFlags.seed,
+            };
+            setIsWaitingForResponse(true);
+            // Update the ref immediately so resetDotsTimer sees the new state
+            isWaitingRef.current = true;
+            resetDotsTimer();
+            setShouldAutoScroll(true);
+            await startAgent(request);
+            // If user changed mode/model while the agent was new, persist them now
+            await persistPendingSettingsIfNeeded();
+            // WebSocket connection is already active via subscription - no need for SSE
+        }
+        catch (err) {
+            console.error("Failed to submit quick message:", err);
+            setError("Failed to submit prompt");
+            setIsWaitingForResponse(false);
+            setMessages((prev) => prev.slice(0, -1));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    // Auto-send initial prompt if provided and agent has no messages yet
+    const initialPromptSentRef = useRef(false);
+    useEffect(() => {
+        if (initialPrompt !== undefined &&
+            !isLoading &&
+            !initialPromptSentRef.current &&
+            messages.length === 0 &&
+            agentStub.id &&
+            editContext &&
+            activeProfile && // MUST have activeProfile set, not just profiles.length
+            profiles.length > 0) {
+            initialPromptSentRef.current = true;
+            // Delay slightly to ensure all state is ready
+            setTimeout(() => {
+                setPrompt(initialPrompt);
+                // Trigger submit programmatically
+                handleSubmit();
+            }, 200);
+        }
+    }, [
+        initialPrompt,
+        isLoading,
+        messages.length,
+        agentStub.id,
+        editContext,
+        activeProfile,
+        profiles.length,
+        handleSubmit,
+    ]);
+    // Resolve display names when metadata or editor state changes
+    useEffect(() => {
+        const metaCtx = agentMetadata;
+        if (!metaCtx) {
+            setResolvedPageName(undefined);
+            setResolvedComponentName(undefined);
+            setResolvedFieldName(undefined);
+            return;
+        }
+        // Page names (for now, just resolve the first page)
+        if (metaCtx.items?.length) {
+            const firstPage = metaCtx.items[0];
+            if (firstPage) {
+                let name = firstPage.name;
+                if (!name &&
+                    editContext?.contentEditorItem?.descriptor.id === firstPage.id &&
+                    editContext?.contentEditorItem?.name) {
+                    name = editContext.contentEditorItem.name;
+                }
+                else if (!name) {
+                    name = undefined;
+                }
+                setResolvedPageName(name);
+            }
+            else {
+                setResolvedPageName(undefined);
+            }
+        }
+        else
+            setResolvedPageName(undefined);
+        // Component names (for now, just resolve the first component)
+        if (metaCtx.components?.length && editContext?.page) {
+            const firstComponent = metaCtx.components[0];
+            if (firstComponent?.componentId) {
+                try {
+                    const comp = getComponentById(firstComponent.componentId, editContext.page);
+                    setResolvedComponentName(comp?.name);
+                }
+                catch {
+                    setResolvedComponentName(undefined);
+                }
+            }
+            else {
+                setResolvedComponentName(undefined);
+            }
+        }
+        else
+            setResolvedComponentName(undefined);
+        // Field name (async)
+        (async () => {
+            if (metaCtx.field && editContext?.itemsRepository) {
+                try {
+                    // Use the item descriptor from field context if available, otherwise fallback to current item
+                    const itemDescriptor = metaCtx.field.item || {
+                        id: editContext.currentItemDescriptor?.id || "",
+                        language: editContext.currentItemDescriptor?.language || "en",
+                        version: editContext.currentItemDescriptor?.version || 0,
+                    };
+                    const field = await editContext.itemsRepository.getField({
+                        item: itemDescriptor,
+                        fieldId: metaCtx.field.fieldId,
+                    });
+                    setResolvedFieldName(field?.name || metaCtx.field.fieldName);
+                }
+                catch {
+                    setResolvedFieldName(metaCtx.field.fieldName);
+                }
+            }
+            else
+                setResolvedFieldName(undefined);
+        })();
+    }, [
+        agentMetadata,
+        editContext?.page,
+        editContext?.contentEditorItem,
+        editContext?.currentItemDescriptor,
+        editContext?.itemsRepository,
+    ]);
+    // Stop current execution/stream safely
+    const handleStop = useCallback(async () => {
+        try {
+            setIsWaitingForResponse(false);
+            // **CRITICAL FIX**: Actually cancel the agent execution on the backend
+            // Before we were only disconnecting from the stream, letting the agent run
+            if (agentStub?.id) {
+                try {
+                    await cancelAgent(agentStub.id);
+                    console.log(`Agent ${agentStub.id} cancellation requested`);
+                }
+                catch (err) {
+                    console.error("Failed to cancel agent on backend:", err);
+                    // Continue with UI cleanup even if backend call fails
+                }
+            }
+            // Disconnect from the stream
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+                abortControllerRef.current = null;
+            }
+            setIsConnecting(false);
+            setIsSubmitting(false);
+            // Mark any in-progress streaming messages as completed in UI
+            setMessages((prev) => {
+                const updated = prev.map((msg) => !msg.isCompleted && msg.messageType === "streaming"
+                    ? { ...msg, isCompleted: true, messageType: "completed" }
+                    : msg);
+                messagesRef.current = updated;
+                return updated;
+            });
+            // Update indicator state
+            resetDotsTimer();
+        }
+        catch (e) {
+            console.error("Failed to stop agent execution", e);
+        }
+    }, [agentStub?.id, resetDotsTimer]);
+    // Determine effective cost limit from agent, profile, or metadata so the cost display
+    // is visible immediately even before any messages or server-side persistence.
+    const effectiveCostLimit = useMemo(() => {
+        try {
+            const candidates = [
+                agent?.costLimit,
+                activeProfile?.costLimit,
+            ];
+            for (const c of candidates) {
+                const n = c != null ? Number(c) : 0;
+                if (Number.isFinite(n) && n > 0)
+                    return n;
+            }
+        }
+        catch { }
+        return undefined;
+    }, [agent?.costLimit, activeProfile?.costLimit]);
+    if (isLoading) {
+        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);
+    // Determine if the agent is actively executing (submitting, connecting, waiting, or streaming)
+    const isExecuting = isSubmitting ||
+        isConnecting ||
+        isWaitingForResponse ||
+        hasActiveStreaming();
+    const renderContextInfoBar = () => (_jsx(ContextInfoBar, { agent: agent, agentMetadata: agentMetadata, setAgentMetadata: setAgentMetadata, setAgent: setAgent, resolvedPageName: resolvedPageName, resolvedComponentName: resolvedComponentName, resolvedFieldName: resolvedFieldName }));
+    const renderCostLimitBanner = () => {
+        if (!costLimitExceeded)
+            return null;
+        const { totalCost, costLimit, initialCostLimit } = costLimitExceeded;
+        return (_jsxs("div", { className: "m-3 rounded border border-amber-300 bg-amber-50 p-3 text-xs text-amber-900", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-amber-500", strokeWidth: 1 }), _jsxs("span", { children: ["Cost limit exceeded. Spent $", totalCost.toFixed(2), " / $", costLimit.toFixed(2), "."] })] }), _jsx("div", { className: "flex gap-2", children: _jsx("button", { className: "rounded border border-amber-300 bg-white px-2 py-1 hover:bg-amber-100", onClick: async () => {
+                            if (!agent?.id)
+                                return;
+                            try {
+                                // Extend cost limit - backend will automatically resume the agent
+                                const result = await updateAgentCostLimit(agent.id, "extend");
+                                // Update the agent's cost limit in local state
+                                if (result.success && result.costLimit !== undefined) {
+                                    setAgent((prev) => prev ? { ...prev, costLimit: result.costLimit } : prev);
+                                }
+                                // Clear the banner and set waiting state
+                                // Agent will resume automatically via backend's ResumeAgentAsync
+                                setCostLimitExceeded(null);
+                                setIsWaitingForResponse(true);
+                                isWaitingRef.current = true;
+                                setShouldAutoScroll(true);
+                            }
+                            catch (e) {
+                                console.error("Failed to extend cost limit:", e);
+                                setError(e instanceof Error
+                                    ? e.message
+                                    : "Failed to extend cost limit");
+                            }
+                        }, children: "Extend limit and continue" }) })] }));
+    };
+    return (_jsxs("div", { className: `flex h-full flex-col ${className || ""}`, children: [_jsxs("div", { ref: messagesContainerRef, className: "flex-1 overflow-y-auto", onScroll: handleScroll, children: [error && (_jsx("div", { className: "m-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-3 select-text", children: _jsxs("div", { className: "flex items-start", children: [_jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 text-red-400", strokeWidth: 1 }), _jsxs("div", { className: "ml-3", children: [_jsx("p", { className: "text-sm font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-sm text-red-700", children: error })] })] }) })), messages.length === 0 && !error && !hideGreeting && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsx("div", { className: "max-w-prose text-center", children: !activeProfile ? (_jsx(Loader2, { className: "h-8 w-8 animate-spin text-gray-400 mx-auto" })) : (_jsxs(_Fragment, { children: [activeProfile.svgIcon ? (_jsx("div", { className: "mx-auto mb-4 flex h-24 w-24 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                            __html: activeProfile.svgIcon,
+                                        } })) : (_jsx(SecretAgentIcon, { size: 96, strokeWidth: 1, className: "mx-auto mb-4 text-gray-400" })), activeProfile.greetingMessage ? (_jsx(ViewTransition, { children: _jsx("div", { className: "prose prose-sm mx-auto text-center", dangerouslySetInnerHTML: {
+                                                __html: activeProfile.greetingMessage,
+                                            } }) })) : (_jsxs(_Fragment, { children: [_jsx("h3", { className: "mb-2 text-lg font-medium text-gray-900", children: "Start a conversation" }), _jsx("p", { className: "mb-4 text-sm text-gray-500", children: "Send a message to begin working with your AI agent." }), _jsx("div", { className: "text-xs text-gray-400", children: "Your agent can help with content editing, research, and automation tasks." })] }))] })) }) })), _jsx("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: groupConsecutiveMessages(messages).map((group, groupIndex) => {
+                            if (group.type === "user" && group.messages[0]) {
+                                // Render user message
+                                return (_jsx(UserMessage, { message: group.messages[0] }, groupIndex));
+                            }
+                            else {
+                                // Render bundled assistant messages
+                                // Check if this group contains any streaming message
+                                const hasStreamingMessage = group.messages.some((msg) => !msg.isCompleted && msg.messageType === "streaming");
+                                // Filter out cost limit error messages (they're shown in the banner instead)
+                                const filteredMessages = group.messages.filter((msg) => {
+                                    const content = msg.content || "";
+                                    // Skip messages that are cost limit errors (shown in banner instead)
+                                    return (!content.startsWith("⚠️") || !content.includes("Cost limit"));
+                                });
+                                // If all messages were filtered out, don't render this group
+                                if (filteredMessages.length === 0) {
+                                    return null;
+                                }
+                                const convertedMessages = convertAgentMessagesToAiFormat(filteredMessages);
+                                return (_jsx(AiResponseMessage, { messages: convertedMessages, finished: !isSubmitting && !isConnecting, editOperations: [], error: error || undefined, profileSvgIcon: activeProfile?.svgIcon, agentId: agent?.id || agentStub.id, agentName: activeProfile?.name, onQuickAction: (action) => {
+                                        const text = (action.prompt ||
+                                            action.value ||
+                                            action.label ||
+                                            "").trim();
+                                        if (!text)
+                                            return;
+                                        // Check if text contains placeholders ({placeholder} or <placeholder>)
+                                        const hasPlaceholders = /\{([^}]+)\}|<([^>]+)>/.test(text);
+                                        if (hasPlaceholders) {
+                                            // Show placeholder input
+                                            setActivePlaceholderInput({
+                                                text,
+                                                behavior: action.behavior,
+                                            });
+                                            return;
+                                        }
+                                        if (action.behavior === "compose") {
+                                            setPrompt(text);
+                                            setInputPlaceholder(action.placeholder ||
+                                                "Review and edit, then press Enter to send");
+                                            if (textareaRef.current) {
+                                                try {
+                                                    textareaRef.current.focus();
+                                                    const v = textareaRef.current.value || "";
+                                                    textareaRef.current.selectionStart = v.length;
+                                                    textareaRef.current.selectionEnd = v.length;
+                                                }
+                                                catch { }
+                                            }
+                                            return;
+                                        }
+                                        // Stop any current execution before sending the next message
+                                        if (isExecuting) {
+                                            try {
+                                                handleStop();
+                                            }
+                                            catch { }
+                                        }
+                                        sendQuickMessage(text);
+                                    } }, groupIndex));
+                            }
+                        }) }), _jsx("div", { className: showDots ? "visible" : "invisible", children: _jsx(DancingDots, {}) }), renderCostLimitBanner(), _jsx("div", { ref: messagesEndRef })] }), !hideContext && renderContextInfoBar(), !hideContext && (_jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata })), _jsxs("div", { className: "border-t border-gray-200 p-4", children: [activePlaceholderInput ? (
+                    // Placeholder Input (from quick actions)
+                    _jsx(PlaceholderInput, { text: activePlaceholderInput.text, showButtons: false, onComplete: (filledText) => {
+                            setActivePlaceholderInput(null);
+                            if (activePlaceholderInput.behavior === "compose") {
+                                setPrompt(filledText);
+                                setInputPlaceholder("Review and edit, then press Enter to send");
+                                if (textareaRef.current) {
+                                    try {
+                                        textareaRef.current.focus();
+                                        const v = textareaRef.current.value || "";
+                                        textareaRef.current.selectionStart = v.length;
+                                        textareaRef.current.selectionEnd = v.length;
+                                    }
+                                    catch { }
+                                }
+                            }
+                            else {
+                                // Submit behavior or default
+                                if (isExecuting) {
+                                    try {
+                                        handleStop();
+                                    }
+                                    catch { }
+                                }
+                                sendQuickMessage(filledText);
+                            }
+                        }, onCancel: () => {
+                            setActivePlaceholderInput(null);
+                        } })) : prompt && /\{([^}]+)\}|<([^>]+)>/.test(prompt) ? (
+                    // Template mode: show PlaceholderInput when prompt contains placeholders
+                    _jsx(PlaceholderInput, { text: prompt, showButtons: false, onComplete: (filledText) => {
+                            setPrompt(filledText);
+                            // Auto-submit after filling placeholders
+                            if (filledText.trim()) {
+                                if (isExecuting) {
+                                    try {
+                                        handleStop();
+                                    }
+                                    catch { }
+                                }
+                                sendQuickMessage(filledText);
+                            }
+                        }, onCancel: () => {
+                            setPrompt("");
+                            setInputPlaceholder("Type your message... (Enter to send, Shift+Enter or Ctrl+Enter for new line)");
+                        } })) : (_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) {
+                                    setCurrentHistoryIndex(-1);
+                                }
+                            }, onKeyDown: handleKeyPress, placeholder: inputPlaceholder, className: "h-[80px] flex-1 resize-none overflow-y-auto text-xs", "data-testid": "agent-terminal-prompt", disabled: isSubmitting }) })), !hideBottomControls && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-stretch justify-between gap-2", children: [_jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-start gap-2", children: [_jsxs(Tooltip, { delayDuration: 400, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("select", { className: `h-5 rounded border px-1.5 text-[10px] ${mode === "read-only"
+                                                                ? "border-green-300 bg-green-50 text-green-700"
+                                                                : mode === "supervised"
+                                                                    ? "border-amber-300 bg-amber-50 text-amber-700"
+                                                                    : "border-red-300 bg-red-50 text-red-700"}`, value: mode, onChange: async (e) => {
+                                                                const nextMode = e.target.value || "supervised";
+                                                                // Optimistic UI update
+                                                                setMode(nextMode);
+                                                                const current = agentMetadata || {};
+                                                                const nextMeta = {
+                                                                    ...current,
+                                                                    mode: nextMode,
+                                                                };
+                                                                try {
+                                                                    if (!agent?.id || agent.status === "new") {
+                                                                        setAgentMetadata(nextMeta);
+                                                                        // Cache until first start when agent is persisted
+                                                                        pendingSettingsRef.current = {
+                                                                            ...(pendingSettingsRef.current || {}),
+                                                                            mode: nextMode,
+                                                                        };
+                                                                        return;
+                                                                    }
+                                                                    await updateAgentSettings(agent.id, {
+                                                                        mode: nextMode,
+                                                                    });
+                                                                    setAgentMetadata(nextMeta);
+                                                                    setAgent((prev) => prev
+                                                                        ? { ...prev, metadata: JSON.stringify(nextMeta) }
+                                                                        : prev);
+                                                                }
+                                                                catch (e2) {
+                                                                    console.error("Failed to persist mode change", e2);
+                                                                }
+                                                            }, title: "Mode", "aria-label": "Mode", "data-testid": "agent-mode-select", children: [_jsx("option", { value: "supervised", children: "Supervised" }), _jsx("option", { value: "autonomous", children: "Autonomous" }), _jsx("option", { value: "read-only", children: "Read-Only" })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: _jsxs("div", { className: "max-w-[320px] space-y-1", children: [_jsxs("div", { children: [_jsx("span", { className: "font-semibold text-green-500", children: "Read-Only" }), ": Limited tool access as configured by the profile (Ask Mode Tools)."] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold text-amber-500", children: "Supervised" }), ": 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."] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold text-red-500", children: "Autonomous" }), ": Full tool access; can write across the site/project only limited by user permissions."] })] }) })] }), profiles?.length > 0 && (_jsx("select", { className: "h-5 rounded border px-1.5 text-[10px] text-gray-500", value: activeProfile?.id || "", onChange: async (e) => {
+                                                    const nextProfile = profiles.find((x) => x.id === e.target.value);
+                                                    if (!nextProfile)
+                                                        return;
+                                                    setActiveProfile(nextProfile);
+                                                    try {
+                                                        if (agent?.id && agent.status !== "new") {
+                                                            await updateAgentSettings(agent.id, {
+                                                                profileId: nextProfile.id,
+                                                                profileName: nextProfile.name,
+                                                            });
+                                                        }
+                                                        else {
+                                                            // cache until first start
+                                                            pendingSettingsRef.current = {
+                                                                ...(pendingSettingsRef.current || {}),
+                                                                // we cache profile by updating local metadata
+                                                            };
+                                                            setAgentMetadata((current) => {
+                                                                const next = { ...(current || {}) };
+                                                                next.profile = nextProfile.name;
+                                                                next.additionalData = {
+                                                                    ...(next.additionalData || {}),
+                                                                    profileId: nextProfile.id,
+                                                                    profileName: nextProfile.name,
+                                                                };
+                                                                return next;
+                                                            });
+                                                        }
+                                                        // reflect in local agent stub so tabs and titles can use it if needed
+                                                        setAgent((prev) => prev
+                                                            ? {
+                                                                ...prev,
+                                                                metadata: JSON.stringify({
+                                                                    ...(agentMetadata || {}),
+                                                                    profile: nextProfile.name,
+                                                                    additionalData: {
+                                                                        ...(agentMetadata
+                                                                            ?.additionalData || {}),
+                                                                        profileId: nextProfile.id,
+                                                                        profileName: nextProfile.name,
+                                                                    },
+                                                                }),
+                                                            }
+                                                            : prev);
+                                                    }
+                                                    catch (err) {
+                                                        console.error("Failed to persist agent profile", err);
+                                                    }
+                                                }, title: "Profile", "aria-label": "Profile", "data-testid": "agent-profile-select", children: profiles.map((p) => (_jsx("option", { value: p.id, children: p.name }, p.id))) })), activeProfile?.models?.length ? (_jsx("select", { className: "h-5 rounded border px-1.5 text-[10px] text-gray-500", value: selectedModelId || "", onChange: async (e) => {
+                                                    const nextId = e.target.value;
+                                                    setSelectedModelId(nextId);
+                                                    const modelName = activeProfile?.models?.find((m) => m.id === nextId)
+                                                        ?.name || "";
+                                                    // Update local agent state immediately for UX and to reflect in streaming stub
+                                                    setAgent((prev) => prev ? { ...prev, model: modelName } : prev);
+                                                    // Persist only for existing agents; otherwise cache until first start
+                                                    try {
+                                                        if (agent?.id && agent.status !== "new") {
+                                                            await updateAgentSettings(agent.id, {
+                                                                model: modelName,
+                                                            });
+                                                        }
+                                                        else {
+                                                            pendingSettingsRef.current = {
+                                                                ...(pendingSettingsRef.current || {}),
+                                                                modelName,
+                                                            };
+                                                        }
+                                                    }
+                                                    catch (err) {
+                                                        console.error("Failed to persist agent model", err);
+                                                    }
+                                                }, title: "Model", "aria-label": "Model", "data-testid": "agent-model-select", children: activeProfile.models.map((m) => (_jsx("option", { value: m.id, children: m.name }, m.id))) })) : null, activeProfile?.prompts?.length ? (_jsxs(Popover, { open: showPredefined, onOpenChange: setShowPredefined, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "rounded p-1 hover:bg-gray-100", onClick: () => { }, title: "Predefined prompts", "aria-label": "Predefined prompts", children: _jsx(Wand2, { className: "h-3 w-3", strokeWidth: 1 }) }) }), _jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: _jsx("div", { className: "max-h-56 overflow-y-auto p-2", children: activeProfile.prompts.map((p, index) => (_jsx("div", { className: "cursor-pointer rounded p-1.5 text-xs text-gray-700 hover:bg-gray-100", onClick: () => {
+                                                                    setPrompt(p.prompt);
+                                                                    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: liveTotals
+                                            ? {
+                                                input: liveTotals.input,
+                                                output: liveTotals.output,
+                                                cached: liveTotals.cached,
+                                                cacheWrite: liveTotals.cacheWrite ?? 0,
+                                                inputCost: liveTotals.inputCost,
+                                                outputCost: liveTotals.outputCost,
+                                                cachedCost: liveTotals.cachedCost,
+                                                cacheWriteCost: liveTotals.cacheWriteCost ?? 0,
+                                                totalCost: liveTotals.totalCost,
+                                            }
+                                            : totalTokens, costLimit: effectiveCostLimit }), (() => {
+                                        try {
+                                            const s = window.__agentContextWindowStatus;
+                                            if (!s || !s.contextWindowTokens)
+                                                return null;
+                                            const pct = typeof s.contextUsedPercent === "number"
+                                                ? `${s.contextUsedPercent.toFixed(1)}%`
+                                                : undefined;
+                                            // Helper function to format tokens as "k"
+                                            const formatTokens = (tokens) => {
+                                                if (tokens >= 1000) {
+                                                    return `${(tokens / 1000).toFixed(1)}k`;
+                                                }
+                                                return tokens.toString();
+                                            };
+                                            if (!pct)
+                                                return null;
+                                            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;
+                                        }
+                                    })()] })] }))] })] }));
+}
+//# sourceMappingURL=AgentTerminal.js.map