@parhelia/core 0.1.12556 → 0.1.12565

package/dist/editor/ai/AgentTerminal.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo, } from "react";
-import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, ArrowLeft, DollarSign, } from "lucide-react";
-import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, } from "../services/agentService";
+import { flushSync } from "react-dom";
+import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, ArrowLeft, DollarSign, ExternalLink, Settings2, Target, X, Plus, } from "lucide-react";
+import { getAgent, startAgent, claimAgentBrowser, assignAgentSkill, persistDraftAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkillCatalog, getAgentAvailableTools, getAgentOperationAllowances, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, releaseAgentBrowser, revokeAgentSkill, } from "../services/agentService";
+import { parseAgentStatus } from "../services/agentStatus";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
+import { localStorageService } from "../services/localStorageService";
 import { Textarea } from "../../components/ui/textarea";
 import { Button } from "../../components/ui/button";
 import { PlaceholderInput, } from "../../components/ui/PlaceholderInput";
@@ -12,21 +15,145 @@ import { AgentDocumentList, } from "./AgentDocumentList";
 import { AgentEditOperationsPanel } from "./EditOperationsPanel";
 import { SpawnedAgentsPanel } from "./SpawnedAgentsPanel";
 import { getComponentById } from "../componentTreeHelper";
+import { toUserFacingAgentErrorMessage } from "../services/agentErrorMessage";
 import { AgentGreeting } from "./AgentGreeting";
 import { getAgentHistory } from "../services/editService";
+import { QuestionnaireInline } from "./dialogs/QuestionnaireInline";
+import { getBrowserCaptureClaim, setBrowserCaptureClaim, } from "./dialogs/browserBoundCapture";
+import { DIALOG_TYPES, } from "./dialogs/agentDialogTypes";
 import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { SecretAgentIcon } from "../ui/Icons";
 import { formatTime, formatDateTime } from "../utils";
 import { cn } from "../../lib/utils";
+import { sanitizeSvg } from "../../lib/sanitize";
 import { Select } from "../../components/ui/select";
 import { AgentTerminalStatusBar } from "./AgentTerminalStatusBar";
-import { useMediaQuery } from "../client/hooks/useMediaQuery";
 import { SimpleTabs } from "../ui/SimpleTabs";
+import { Splitter } from "../ui/Splitter";
+import { ScrollingContentTree } from "../ScrollingContentTree";
+import { MarkdownDisplay, } from "../../components/MarkdownDisplay";
+const userMessageMarkdownComponents = {
+    h1: (props) => (_jsx("h1", { ...props, className: "mb-2 text-sm leading-5 font-semibold text-gray-900" })),
+    h2: (props) => (_jsx("h2", { ...props, className: "mb-1.5 text-[13px] leading-5 font-semibold text-gray-900" })),
+    h3: (props) => (_jsx("h3", { ...props, className: "mb-1 text-[12px] leading-5 font-semibold text-gray-900" })),
+    h4: (props) => (_jsx("h4", { ...props, className: "mb-1 text-[12px] leading-5 font-medium text-gray-800" })),
+    p: (props) => (_jsx("p", { ...props, className: "my-1 text-[12px] leading-5 text-gray-700" })),
+    ul: (props) => (_jsx("ul", { ...props, className: "my-2 ml-5 list-disc space-y-1 text-[12px] leading-5 text-gray-700" })),
+    ol: (props) => (_jsx("ol", { ...props, className: "my-2 ml-5 list-decimal space-y-1 text-[12px] leading-5 text-gray-700" })),
+    li: (props) => (_jsx("li", { ...props, className: "text-[12px] leading-5 text-gray-700" })),
+    pre: (props) => (_jsx("pre", { ...props, className: "my-2 overflow-auto rounded-md bg-slate-100 px-3 py-2 text-[11px] leading-4 text-slate-700" })),
+    code: ({ inline, className, ...props }) => inline ? (_jsx("code", { ...props, className: "rounded bg-slate-100 px-1 py-0.5 text-[11px] text-slate-700" })) : (_jsx("code", { ...props, className: className })),
+};
+function buildPlaceholderAgentDetails(agentStub) {
+    const now = new Date().toISOString();
+    const updated = agentStub.updatedDate || now;
+    // AgentDetails has required fields, but some workspaces only pass an Agent stub initially.
+    // This placeholder keeps streaming/tool-call UI working until `getAgent()` returns full details.
+    return {
+        ...agentStub,
+        name: agentStub.name || "Agent",
+        userId: agentStub.userId || "",
+        updatedDate: updated,
+        profileName: agentStub.profileName || "",
+        model: agentStub.model || "",
+        createdDate: agentStub.createdDate || updated,
+        totalTokensUsed: 0,
+        totalInputTokens: 0,
+        totalOutputTokens: 0,
+        totalCachedInputTokens: 0,
+        totalInputTokenCost: 0,
+        totalOutputTokenCost: 0,
+        totalCachedInputTokenCost: 0,
+        totalImageCost: 0,
+        totalCost: 0,
+        currency: agentStub.currency || "USD",
+        messageCount: agentStub.messageCount || 0,
+    };
+}
+function normalizeDialogAgentId(value) {
+    return value?.trim().toLowerCase() || "";
+}
+function formatAllowanceSource(source) {
+    const normalized = source?.trim();
+    if (!normalized)
+        return null;
+    if (normalized === "user")
+        return "User granted";
+    if (normalized.startsWith("preconfigured:profile:"))
+        return "Profile";
+    if (normalized.startsWith("preconfigured:skill:"))
+        return "Skill";
+    if (normalized.startsWith("system:")) {
+        return normalized.slice("system:".length).replace(/[-_]+/g, " ").trim();
+    }
+    return normalized;
+}
+function formatAllowanceLabel(allowance) {
+    return `${allowance.operationType || "*"}${"itemPath" in allowance
+        ? ` ${allowance.itemPath}`
+        : ` ${allowance.normalizedPath}`}`;
+}
+function getAgentRunMessageAgentId(payload) {
+    const agentId = payload?.agentId;
+    return typeof agentId === "string" ? normalizeDialogAgentId(agentId) : null;
+}
+function getAgentRunMessageSeq(payload) {
+    const seq = payload?.seq;
+    return typeof seq === "number" ? seq : null;
+}
+function getAgentRunMessageDetail(type, payload) {
+    if (type === "agent:run:delta") {
+        return payload?.type || null;
+    }
+    if (type === "agent:run:status") {
+        return payload?.data?.state || payload?.data?.status || null;
+    }
+    if (type === "agent:run:error") {
+        return payload?.error || null;
+    }
+    if (type === "agent:run:complete") {
+        return payload?.finalStatus || null;
+    }
+    if (type === "agent:run:start") {
+        return payload?.agentName || null;
+    }
+    return null;
+}
+function isHeartbeatRunEventMessage(message) {
+    if (!message)
+        return false;
+    if (message.type === "agent:run:delta") {
+        const deltaType = message.payload?.type;
+        return String(deltaType || "").toLowerCase() === "heartbeat";
+    }
+    if (message.type === "agent:run:status") {
+        const state = message.payload?.data?.state || message.payload?.data?.status;
+        return String(state || "").toLowerCase() === "heartbeat";
+    }
+    return false;
+}
+function getVisibleDialogRegistry() {
+    const registry = globalThis.__agentDialogVisibleCallbacks;
+    return registry && typeof registry === "object" ? registry : {};
+}
+function isAgentErrorStatusValue(status) {
+    return status === "error";
+}
 // Simple user message component
 const UserMessage = ({ message }) => {
+    const content = message.content || "";
+    const [isTriggerExpanded, setIsTriggerExpanded] = useState(false);
+    // Trigger-sourced prompts are prefixed by backend as "[Trigger: {name}]: {content}"
+    const triggerPattern = /^\[Trigger: ([^\]]+)\]:\s*(.*)$/s;
+    const triggerMatch = content.match(triggerPattern);
+    const triggerName = triggerMatch?.[1]?.trim() || "";
+    const triggerContent = triggerMatch?.[2] || "";
+    const isTriggerMessage = triggerName.length > 0;
+    if (isTriggerMessage) {
+        return (_jsx("div", { className: "px-4 py-2", children: _jsxs("div", { className: "text-[11px]", children: [_jsxs("button", { type: "button", onClick: () => setIsTriggerExpanded((expanded) => !expanded), className: "text-theme-secondary hover:bg-theme-hover flex w-full items-center gap-2 rounded-md border-l-2 border-cyan-200 px-2 py-1 text-left transition-colors", "data-testid": "trigger-message-toggle", "data-expanded": isTriggerExpanded ? "true" : "false", children: [_jsx(Target, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }), _jsxs("span", { className: "truncate font-medium", children: ["Trigger: ", triggerName] }), message.createdDate && (_jsx("span", { className: "ml-1 shrink-0 text-[10px] text-gray-400", children: formatTime(new Date(message.createdDate)) })), _jsx("span", { className: "ml-auto shrink-0", children: isTriggerExpanded ? (_jsx(ChevronUp, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) })] }), isTriggerExpanded && (_jsx("div", { className: "mt-1 border-l-2 border-cyan-100 pl-[1.35rem] text-[11px] text-gray-600", children: _jsx(MarkdownDisplay, { source: triggerContent, components: userMessageMarkdownComponents }) }))] }) }));
+    }
     // Parse source agent name from content if it starts with "[From ...]:"
     // Backend formats messages from other agents as "[From {sourceAgentName}]: {content}"
-    const content = message.content || "";
     const fromPattern = /^\[From ([^\]]+)\]:\s*(.*)$/s;
     const match = content.match(fromPattern);
     let sourceAgentName;
@@ -51,7 +178,10 @@ const UserMessage = ({ message }) => {
                 message.sourceAgent?.name;
     }
     const displayName = sourceAgentName ? `[From ${sourceAgentName}]` : "You";
-    return (_jsxs("div", { className: "flex gap-3 p-4", children: [_jsx("div", { className: "shrink-0", children: _jsx(User, { className: "text-theme-secondary h-5 w-5", 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-[12px] font-medium text-gray-900", children: displayName }), message.createdDate && (_jsx("span", { className: "text-[12px] text-gray-400", "data-testid": "user-message-timestamp", "data-timestamp": message.createdDate, children: formatTime(new Date(message.createdDate)) }))] }), _jsx("div", { className: "prose prose max-w-none text-[12px] text-gray-700 select-text", children: displayContent })] })] }));
+    return (_jsxs("div", { className: "flex gap-3 p-4", children: [_jsx("div", { className: "shrink-0", children: _jsx(User, { className: "text-theme-secondary h-5 w-5", 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-[12px] font-medium text-gray-900", children: displayName }), message.createdDate && (_jsx("span", { className: "text-[12px] text-gray-400", "data-testid": "user-message-timestamp", "data-timestamp": message.createdDate, children: formatTime(new Date(message.createdDate)) }))] }), _jsx("div", { className: "prose prose max-w-none text-[12px] text-gray-700 select-text", children: _jsx(MarkdownDisplay, { source: displayContent, components: userMessageMarkdownComponents }) })] })] }));
+};
+const HeartbeatMessage = ({ message }) => {
+    return (_jsx("div", { className: "px-4 py-2", "data-testid": "agent-heartbeat-message", children: _jsxs("div", { className: "flex items-center gap-2 rounded-md border border-sky-100 bg-sky-50/80 px-3 py-2 text-[11px] text-sky-700", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1.5 }), _jsx("span", { className: "min-w-0 flex-1", children: message.content }), message.createdDate && (_jsx("span", { className: "shrink-0 text-[10px] text-sky-500", children: formatTime(new Date(message.createdDate)) }))] }) }));
 };
 // Helper to extract todos from potentially incomplete JSON during streaming
 const extractPartialTodos = (jsonText) => {
@@ -285,14 +415,6 @@ const extractTodosFromMessages = (messages) => {
         todoMap.set(key, todo);
     }
     const result = Array.from(todoMap.values());
-    // Only log when duplicates were actually removed (to reduce noise)
-    if (todos.length > result.length) {
-        console.log("🟡 TODO_DEBUG deduplication:", {
-            removed: todos.length - result.length,
-            before: todos.length,
-            after: result.length,
-        });
-    }
     return result;
 };
 // TodoListPanel component
@@ -300,12 +422,9 @@ const TodoListPanel = ({ messages, agentMetadata, }) => {
     const [isExpanded, setIsExpanded] = useState(true);
     // First try to get todos from agent metadata (real-time updates)
     // Server sends additionalData.todoList directly via contextChanged status
-    // Also check top-level todoList for backward compatibility with stored contexts
     const metadataTodos = (() => {
         try {
-            // Check both additionalData.todoList and top-level todoList (from [JsonExtensionData] serialization)
-            const todoList = agentMetadata?.additionalData?.todoList ||
-                agentMetadata?.todoList;
+            const todoList = agentMetadata?.additionalData?.todoList;
             if (todoList?.items && Array.isArray(todoList.items)) {
                 const rawItems = todoList.items
                     .map((item, idx) => ({
@@ -433,6 +552,17 @@ const groupConsecutiveMessages = (agentMessages) => {
             // Add user message
             groups.push({ type: "user", messages: [message] });
         }
+        else if (message.messageType === "heartbeat" ||
+            message.role === "system") {
+            if (currentAssistantGroup.length > 0) {
+                groups.push({
+                    type: "assistant-group",
+                    messages: currentAssistantGroup,
+                });
+                currentAssistantGroup = [];
+            }
+            groups.push({ type: "heartbeat", messages: [message] });
+        }
         else if (message.role === "assistant") {
             // Add to current assistant group
             currentAssistantGroup.push(message);
@@ -500,6 +630,7 @@ const calculateTotalTokens = (messages) => {
             outputCost: acc.outputCost + (message.outputTokenCost || 0),
             cachedCost: acc.cachedCost + (message.cachedInputTokenCost || 0),
             cacheWriteCost: acc.cacheWriteCost,
+            imageCost: acc.imageCost,
             totalCost: acc.totalCost + (message.totalCost || 0),
         };
     }, {
@@ -511,6 +642,7 @@ const calculateTotalTokens = (messages) => {
         outputCost: 0,
         cachedCost: 0,
         cacheWriteCost: 0,
+        imageCost: 0,
         totalCost: 0,
     });
     return totals;
@@ -521,6 +653,84 @@ const getOperationsForMessageGroup = (messages, agentOperations) => {
     const matched = agentOperations.filter((op) => op.toolCallId && toolCallIds.has(op.toolCallId));
     return matched;
 };
+const stringifyToolField = (value) => {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === "string") {
+        return value.trim().length > 0 ? value : undefined;
+    }
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return String(value);
+    }
+};
+const parseToolResultValue = (value) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (typeof value === "object") {
+        return value;
+    }
+    if (typeof value !== "string") {
+        return String(value);
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    try {
+        let parsed = JSON.parse(trimmed);
+        if (typeof parsed === "string" &&
+            (parsed.startsWith("{") || parsed.startsWith("["))) {
+            parsed = JSON.parse(parsed);
+        }
+        if (parsed && typeof parsed === "object") {
+            return parsed;
+        }
+    }
+    catch {
+        // Fall back to the original string when the payload is plain text.
+    }
+    return value;
+};
+const getFirstToolCallEnvelope = (data) => {
+    if (!data || typeof data !== "object")
+        return undefined;
+    const direct = data.toolCall || data.tool_call;
+    if (direct)
+        return direct;
+    const arrayCandidates = [data.tool_calls, data.toolCalls];
+    for (const candidate of arrayCandidates) {
+        if (Array.isArray(candidate) && candidate.length > 0) {
+            return candidate[0];
+        }
+    }
+    return undefined;
+};
+const extractToolCallFields = (data) => {
+    const envelope = getFirstToolCallEnvelope(data);
+    const functionPayload = data?.function || envelope?.function;
+    const functionName = data?.functionName ||
+        data?.name ||
+        functionPayload?.name ||
+        envelope?.functionName ||
+        envelope?.name ||
+        "unknown";
+    const toolCallId = data?.toolCallId || data?.id || envelope?.id;
+    const functionArguments = stringifyToolField(data?.functionArguments) ||
+        stringifyToolField(data?.arguments) ||
+        stringifyToolField(functionPayload?.arguments) ||
+        stringifyToolField(envelope?.functionArguments) ||
+        stringifyToolField(envelope?.arguments) ||
+        "{}";
+    return {
+        toolCallId,
+        functionName,
+        functionArguments,
+    };
+};
 // Convert agent messages to AI terminal format for a response group
 const convertAgentMessagesToAiFormat = (agentMessages) => {
     return agentMessages.map((agentMessage) => {
@@ -541,28 +751,39 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
             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,
-                    // Pass through isCompleted so ToolCallDisplay knows when to hide spinner
-                    isCompleted: toolCall.isCompleted,
-                    // Tool call is streaming if message is not completed and tool call has no result yet
-                    isStreaming: !agentMessage.isCompleted &&
-                        !toolCall.isCompleted &&
-                        !toolCall.functionResult &&
-                        !toolCall.functionError,
-                    // Pass through message IDs for approval/rejection events
-                    messageId: toolCall.messageId,
-                    dbMessageId: toolCall.dbMessageId,
-                }))
+                ? agentMessage.toolCalls.map((toolCall) => {
+                    const isPruned = !!toolCall.isPruned ||
+                        /^PRUNED$/i.test(toolCall.functionError || "");
+                    const displayResult = parseToolResultValue(toolCall.functionResultRichContent) ?? toolCall.functionResult;
+                    return {
+                        id: toolCall.toolCallId,
+                        displayName: toolCall.functionName,
+                        function: {
+                            name: toolCall.functionName,
+                            arguments: toolCall.functionArguments,
+                            result: displayResult,
+                            error: toolCall.functionError,
+                        },
+                        // Pass through approval info if present on the tool call
+                        requiresApproval: toolCall.requiresApproval,
+                        // Pass through prune metadata so the terminal can render a neutral state
+                        isPruned,
+                        prunedAt: toolCall.prunedAt,
+                        // Pass through isCompleted so ToolCallDisplay knows when to hide spinner
+                        isCompleted: toolCall.isCompleted,
+                        // Tool call is streaming if message is not completed and tool call has no result yet
+                        isStreaming: !agentMessage.isCompleted &&
+                            !toolCall.isCompleted &&
+                            !displayResult &&
+                            !toolCall.functionError &&
+                            !isPruned,
+                        // Pass through message IDs for approval/rejection events
+                        messageId: toolCall.messageId,
+                        dbMessageId: toolCall.dbMessageId,
+                        responseTimeMs: toolCall.responseTimeMs,
+                        createdDate: toolCall.createdDate,
+                    };
+                })
                 : [],
         };
         if (agentMessage.toolCallId) {
@@ -574,10 +795,10 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
 // interface AgentTerminalProps {
 //   agentStub: Agent;
 // }
-export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, compact = false, hideContext = false, hideBottomControls = false, hideGreeting = false, simpleMode = false, className, initialPrompt, onAgentUpdate, }) {
+export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, compact = false, displayMode = "full", showSummaryInput = false, hideContext = false, hideBottomControls = false, hideGreeting = false, defaultCollapseJson = false, simpleMode = false, className, initialPrompt, onAgentUpdate, onMessage, onInteractionSubmitted, onQuestionnaireOpenChange, questionnaireFooterActions, hideSummaryMessages = false, summaryPlaceholderActions, summaryPlaceholderMessage, hideSummaryWaitingPlaceholder = false, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
-    const [agent, setAgent] = useState(undefined);
+    const [agent, setAgent] = useState(() => buildPlaceholderAgentDetails(agentStub));
     const [messages, setMessages] = useState([]);
     const [agentOperations, setAgentOperations] = useState([]);
     const [prompt, setPrompt] = useState("");
@@ -588,6 +809,35 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [activePlaceholderInput, setActivePlaceholderInput] = useState(null);
     const [allPlaceholdersFilled, setAllPlaceholdersFilled] = useState(false);
     const [agentMetadata, setAgentMetadata] = useState(null);
+    const [isBrowserClaimMutationPending, setIsBrowserClaimMutationPending] = useState(false);
+    const [pendingBrowserCaptureDialogType, setPendingBrowserCaptureDialogType] = useState(null);
+    // Ensure we always have an agent object for streaming handlers, even before `getAgent()` resolves.
+    // This prevents early tool calls (e.g., ask-questionnaire) from being dropped in compact/workspace UIs.
+    useEffect(() => {
+        setAgent((prev) => {
+            if (prev?.id === agentStub.id)
+                return prev;
+            return buildPlaceholderAgentDetails(agentStub);
+        });
+    }, [agentStub.id]);
+    const observedMessageIdsRef = useRef(new Set());
+    useEffect(() => {
+        observedMessageIdsRef.current = new Set();
+    }, [agentStub.id]);
+    useEffect(() => {
+        if (!onMessage)
+            return;
+        for (const message of messages) {
+            if (!message?.id)
+                continue;
+            if (!message.isCompleted)
+                continue;
+            if (observedMessageIdsRef.current.has(message.id))
+                continue;
+            observedMessageIdsRef.current.add(message.id);
+            onMessage(message);
+        }
+    }, [messages, onMessage]);
     // Generate a stable clientSessionId per component instance for stream deduplication
     const clientSessionIdRef = useRef(null);
     if (!clientSessionIdRef.current) {
@@ -599,6 +849,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [isListening, setIsListening] = useState(false);
     const recognitionRef = useRef(null);
     const prevPlaceholderRef = useRef(null);
+    const promptBeforeVoiceRef = useRef("");
     // Voice button press-and-hold tracking
     const voicePressStartRef = useRef(null);
     const voiceHoldTimerRef = useRef(null);
@@ -608,6 +859,70 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [showCompressionPopover, setShowCompressionPopover] = useState(false);
     // Agent inline dialog state (for component type selector, etc.)
     const [activeInlineDialog, setActiveInlineDialog] = useState(null);
+    const dialogTerminalInstanceIdRef = useRef("");
+    if (!dialogTerminalInstanceIdRef.current) {
+        dialogTerminalInstanceIdRef.current = crypto.randomUUID();
+    }
+    const activeInlineDialogRef = useRef(activeInlineDialog);
+    const isQuestionnaireDialogOpen = activeInlineDialog?.request.dialogType === "questionnaire";
+    const orphanTimeoutRef = useRef(null);
+    useEffect(() => {
+        activeInlineDialogRef.current = activeInlineDialog;
+        const visibleRegistry = { ...getVisibleDialogRegistry() };
+        const callbackId = activeInlineDialog?.request.callbackId || null;
+        const terminalInstanceId = dialogTerminalInstanceIdRef.current;
+        const agentKeys = [
+            normalizeDialogAgentId(agentStubIdRefForDialogs.current),
+            normalizeDialogAgentId(agentIdRefForDialogs.current),
+        ].filter(Boolean);
+        agentKeys.forEach((key) => {
+            if (callbackId) {
+                visibleRegistry[key] = {
+                    callbackId,
+                    terminalInstanceId,
+                };
+            }
+            else {
+                delete visibleRegistry[key];
+            }
+        });
+        globalThis.__agentDialogVisibleCallbacks = visibleRegistry;
+    }, [activeInlineDialog]);
+    useEffect(() => {
+        onQuestionnaireOpenChange?.(isQuestionnaireDialogOpen);
+    }, [isQuestionnaireDialogOpen, onQuestionnaireOpenChange]);
+    useLayoutEffect(() => {
+        if (displayMode !== "summary" || !isQuestionnaireDialogOpen) {
+            return;
+        }
+        const scrollSummaryTerminalToTop = () => {
+            const container = messagesContainerRef.current;
+            if (!container) {
+                return;
+            }
+            container.scrollTop = 0;
+        };
+        scrollSummaryTerminalToTop();
+        const frame1 = requestAnimationFrame(() => {
+            scrollSummaryTerminalToTop();
+        });
+        let frame3 = 0;
+        const frame2 = requestAnimationFrame(() => {
+            frame3 = requestAnimationFrame(() => {
+                scrollSummaryTerminalToTop();
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame1);
+            cancelAnimationFrame(frame2);
+            cancelAnimationFrame(frame3);
+        };
+    }, [displayMode, isQuestionnaireDialogOpen]);
+    useEffect(() => {
+        return () => {
+            onQuestionnaireOpenChange?.(false);
+        };
+    }, [onQuestionnaireOpenChange]);
     const isWaitingRef = useRef(false);
     useEffect(() => {
         isWaitingRef.current = isWaitingForResponse;
@@ -618,10 +933,64 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const isStoppingRef = useRef(false);
     // Server-driven state: true when agent is actively processing (set by WebSocket messages)
     const [isAgentThinking, setIsAgentThinking] = useState(false);
+    useEffect(() => {
+        if (!initialMetadata)
+            return;
+        setAgentMetadata((prev) => sanitizeAgentMetadata({
+            ...(prev || {}),
+            ...initialMetadata,
+            additionalData: {
+                ...(prev?.additionalData || {}),
+                ...(initialMetadata?.additionalData || {}),
+            },
+        }));
+    }, [initialMetadata]);
     const hasActiveStreaming = useCallback(() => {
         const current = messagesRef.current || [];
         return current.some((m) => !m.isCompleted && m.messageType === "streaming");
     }, []);
+    const currentAgentId = agent?.id || agentStub.id;
+    const recentAgentRunEvents = useMemo(() => {
+        const normalizedAgentId = normalizeDialogAgentId(currentAgentId);
+        if (!normalizedAgentId) {
+            return [];
+        }
+        if (!editContext) {
+            return [];
+        }
+        return (editContext.webSocketMessages || [])
+            .filter((message) => {
+            if (!message?.type?.startsWith("agent:run:")) {
+                return false;
+            }
+            if (isHeartbeatRunEventMessage(message)) {
+                return false;
+            }
+            return getAgentRunMessageAgentId(message.payload) === normalizedAgentId;
+        })
+            .slice(-8)
+            .map((message) => ({
+            timestamp: message.timestamp,
+            type: message.type,
+            seq: getAgentRunMessageSeq(message.payload),
+            detail: getAgentRunMessageDetail(message.type, message.payload),
+        }));
+    }, [currentAgentId, editContext?.webSocketMessages]);
+    const appendToolUiEvent = useCallback((type, detail, seq) => {
+        const timestamp = new Date().toISOString();
+        setRecentToolUiEvents((prev) => {
+            const next = [
+                ...prev,
+                {
+                    timestamp,
+                    type,
+                    detail: detail || null,
+                    seq: seq ?? null,
+                },
+            ];
+            return next.slice(-40);
+        });
+    }, []);
     // Collect all pending tool calls for batch approval functionality
     const allPendingApprovals = useMemo(() => {
         const pending = [];
@@ -663,41 +1032,82 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     }, [allPendingApprovals]);
     // Handle mode switch to autonomous
     const handleSwitchToAutonomous = useCallback(() => {
-        setMode("autonomous");
-    }, []);
+        const nextMode = "autonomous";
+        setMode(nextMode);
+        setAgentMetadata((prev) => ({
+            ...(prev ?? {}),
+            mode: nextMode,
+        }));
+        setAgent((prev) => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                mode: nextMode,
+            };
+        });
+    }, [setAgent, setAgentMetadata]);
     const [resolvedPageName, setResolvedPageName] = useState(undefined);
     const [resolvedComponentName, setResolvedComponentName] = useState(undefined);
     const [resolvedFieldName, setResolvedFieldName] = useState(undefined);
     const [promptHistory, setPromptHistory] = useState(() => {
-        if (typeof window !== "undefined") {
-            return JSON.parse(localStorage.getItem("editor.agent.promptHistory") || "[]");
-        }
-        return [];
+        return (localStorageService.getItem("editor.agent.promptHistory") || []);
     });
     const [currentHistoryIndex, setCurrentHistoryIndex] = useState(-1);
     const [showPredefined, setShowPredefined] = useState(false);
     const [activeProfile, setActiveProfile] = useState(undefined);
     const [selectedModelId, setSelectedModelId] = useState(undefined);
+    const normalizeAgentMode = (value) => {
+        if (value === "autonomous" ||
+            value === "read-only" ||
+            value === "supervised") {
+            return value;
+        }
+        return null;
+    };
     const [mode, setMode] = useState("supervised");
     const [queuedPrompts, setQueuedPrompts] = useState([]);
-    const isMobile = useMediaQuery("(max-width: 768px)");
+    const [expandedQueuedTriggerIds, setExpandedQueuedTriggerIds] = useState({});
     const [contextPanelsActiveTab, setContextPanelsActiveTab] = useState(0);
     const [hiddenContextPanelTabIds, setHiddenContextPanelTabIds] = useState(new Set());
     const [showCostAndAgent, setShowCostAndAgent] = useState(false);
+    const [showAgentSettings, setShowAgentSettings] = useState(false);
+    const [showSkillPicker, setShowSkillPicker] = useState(false);
+    const [availableSkills, setAvailableSkills] = useState([]);
+    const [skillRootIds, setSkillRootIds] = useState([]);
+    const [selectableTemplateIds, setSelectableTemplateIds] = useState([]);
+    const [skillsLoading, setSkillsLoading] = useState(false);
+    const [skillsError, setSkillsError] = useState(null);
+    const [skillActionError, setSkillActionError] = useState(null);
+    const [triggerSubscriptions, setTriggerSubscriptions] = useState([]);
+    const [availableTools, setAvailableTools] = useState([]);
+    const [operationAllowances, setOperationAllowances] = useState({
+        sitecore: [],
+        filesystem: [],
+    });
+    const [triggerSubscriptionsLoading, setTriggerSubscriptionsLoading] = useState(false);
+    const [availableToolsLoading, setAvailableToolsLoading] = useState(false);
+    const [operationAllowancesLoading, setOperationAllowancesLoading] = useState(false);
+    const [triggerSubscriptionsError, setTriggerSubscriptionsError] = useState(null);
+    const [availableToolsError, setAvailableToolsError] = useState(null);
+    const [operationAllowancesError, setOperationAllowancesError] = useState(null);
+    const [toolsSectionExpanded, setToolsSectionExpanded] = useState(false);
+    const [allowancesSectionExpanded, setAllowancesSectionExpanded] = useState(false);
+    const [subscribedTriggersSectionExpanded, setSubscribedTriggersSectionExpanded,] = useState(false);
+    const isPersistedAgent = !!agent?.userId;
+    const isLocalOnlyDraftAgent = agent?.status === "new" && !isPersistedAgent;
     const hasSpawnedAgents = useMemo(() => {
         if (!agentMetadata)
             return false;
-        const childAgents = agentMetadata?.ChildAgents ||
-            agentMetadata?.childAgents;
+        const childAgents = agentMetadata?.childAgents;
         if (!Array.isArray(childAgents) || childAgents.length === 0)
             return false;
-        return childAgents.some((a) => a != null && typeof a === "object" && (a.AgentId || a.agentId));
+        return childAgents.some((a) => a != null && typeof a === "object" && a.agentId);
     }, [agentMetadata]);
     const hasTodoContent = useMemo(() => {
         const metadataTodos = (() => {
             try {
-                const todoList = agentMetadata?.additionalData?.todoList ||
-                    agentMetadata?.todoList;
+                const todoList = agentMetadata?.additionalData?.todoList;
                 if (todoList?.items && Array.isArray(todoList.items)) {
                     const raw = todoList.items.filter((item) => item?.title || item?.text || item?.label || item?.task);
                     return raw.length > 0;
@@ -745,7 +1155,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             .then((result) => {
             if (cancelled)
                 return;
-            if (result.type === "success" && result.data && result.data.length > 0) {
+            if (result.type === "success" &&
+                result.data &&
+                result.data.length > 0) {
                 setHasHistoryContent(true);
             }
             else {
@@ -776,6 +1188,38 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         });
         return () => unsubscribe();
     }, [agent?.id, editContext?.addSocketMessageListener]);
+    useEffect(() => {
+        let active = true;
+        const loadSkills = async () => {
+            try {
+                setSkillsLoading(true);
+                setSkillsError(null);
+                const catalog = await getAgentSkillCatalog(false);
+                if (active) {
+                    setAvailableSkills(catalog.skills.filter((s) => !s.disabled));
+                    setSkillRootIds(catalog.rootIds);
+                    setSelectableTemplateIds(catalog.selectableTemplateIds);
+                }
+            }
+            catch (e) {
+                if (active) {
+                    setSkillsError(e?.message || "Failed to load skills");
+                    setAvailableSkills([]);
+                    setSkillRootIds([]);
+                    setSelectableTemplateIds([]);
+                }
+            }
+            finally {
+                if (active) {
+                    setSkillsLoading(false);
+                }
+            }
+        };
+        void loadSkills();
+        return () => {
+            active = false;
+        };
+    }, []);
     const modeOptions = useMemo(() => [
         {
             value: "supervised",
@@ -810,6 +1254,239 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         value: m.id,
         label: m.name,
     })) || []).sort((a, b) => a.label.localeCompare(b.label)), [activeProfile]);
+    const metadataSelectedSkillIds = useMemo(() => {
+        const rawSkillIds = agentMetadata?.additionalData?.skillIds ?? [];
+        if (!Array.isArray(rawSkillIds)) {
+            return [];
+        }
+        return rawSkillIds
+            .map((x) => String(x || "").trim())
+            .filter((x) => x.length > 0);
+    }, [agentMetadata]);
+    const backendAssignedSkillIds = useMemo(() => {
+        const rawSkillIds = agent?.assignedSkillIds ?? [];
+        if (!Array.isArray(rawSkillIds)) {
+            return [];
+        }
+        return rawSkillIds
+            .map((x) => String(x || "").trim())
+            .filter((x) => x.length > 0);
+    }, [agent]);
+    const preloadedSkillIds = useMemo(() => {
+        const rawSkillIds = activeProfile?.preloadSkills ?? [];
+        if (!Array.isArray(rawSkillIds)) {
+            return [];
+        }
+        return rawSkillIds
+            .map((skill) => String(skill?.id || "").trim())
+            .filter((id) => id.length > 0);
+    }, [activeProfile?.preloadSkills]);
+    const autoAssignedSkillIds = useMemo(() => {
+        const preloadedIdSet = new Set(preloadedSkillIds.map((id) => id.toLowerCase()));
+        const all = isLocalOnlyDraftAgent
+            ? preloadedSkillIds
+            : backendAssignedSkillIds.filter((id) => preloadedIdSet.has(id.toLowerCase()));
+        const seen = new Set();
+        const unique = [];
+        for (const id of all) {
+            const key = id.toLowerCase();
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            unique.push(id);
+        }
+        return unique;
+    }, [backendAssignedSkillIds, isLocalOnlyDraftAgent, preloadedSkillIds]);
+    const selectedSkillIds = useMemo(() => {
+        const all = [
+            ...autoAssignedSkillIds,
+            ...backendAssignedSkillIds,
+            ...metadataSelectedSkillIds,
+        ];
+        const seen = new Set();
+        const unique = [];
+        for (const id of all) {
+            const key = id.toLowerCase();
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            unique.push(id);
+        }
+        return unique;
+    }, [autoAssignedSkillIds, backendAssignedSkillIds, metadataSelectedSkillIds]);
+    useEffect(() => {
+        let active = true;
+        if (!showAgentSettings) {
+            return () => {
+                active = false;
+            };
+        }
+        if (!agent?.id || isLocalOnlyDraftAgent) {
+            setTriggerSubscriptions([]);
+            setTriggerSubscriptionsLoading(false);
+            setTriggerSubscriptionsError(null);
+            setAvailableTools([]);
+            setAvailableToolsLoading(false);
+            setAvailableToolsError(null);
+            setOperationAllowances({ sitecore: [], filesystem: [] });
+            setOperationAllowancesLoading(false);
+            setOperationAllowancesError(null);
+            return () => {
+                active = false;
+            };
+        }
+        const loadTriggerSubscriptions = async () => {
+            try {
+                setTriggerSubscriptionsLoading(true);
+                setTriggerSubscriptionsError(null);
+                const subscriptions = await getAgentTriggerSubscriptions(agent.id);
+                if (active) {
+                    setTriggerSubscriptions(subscriptions);
+                }
+            }
+            catch (e) {
+                if (active) {
+                    setTriggerSubscriptionsError(e?.message || "Failed to load trigger subscriptions");
+                }
+            }
+            finally {
+                if (active) {
+                    setTriggerSubscriptionsLoading(false);
+                }
+            }
+        };
+        const loadOperationAllowances = async () => {
+            try {
+                setOperationAllowancesLoading(true);
+                setOperationAllowancesError(null);
+                const allowances = await getAgentOperationAllowances(agent.id);
+                if (active) {
+                    setOperationAllowances(allowances);
+                }
+            }
+            catch (e) {
+                if (active) {
+                    setOperationAllowancesError(e?.message || "Failed to load allowances");
+                }
+            }
+            finally {
+                if (active) {
+                    setOperationAllowancesLoading(false);
+                }
+            }
+        };
+        const loadAvailableTools = async () => {
+            try {
+                setAvailableToolsLoading(true);
+                setAvailableToolsError(null);
+                const tools = await getAgentAvailableTools(agent.id);
+                if (active) {
+                    setAvailableTools(tools);
+                }
+            }
+            catch (e) {
+                if (active) {
+                    setAvailableToolsError(e?.message || "Failed to load available tools");
+                }
+            }
+            finally {
+                if (active) {
+                    setAvailableToolsLoading(false);
+                }
+            }
+        };
+        void loadTriggerSubscriptions();
+        void loadAvailableTools();
+        void loadOperationAllowances();
+        return () => {
+            active = false;
+        };
+    }, [
+        showAgentSettings,
+        agent?.id,
+        agent?.status,
+        agent?.userId,
+        agent?.profileId,
+        mode,
+        selectedSkillIds,
+    ]);
+    const activeTriggerSubscriptions = useMemo(() => triggerSubscriptions.filter((sub) => sub.isActive), [triggerSubscriptions]);
+    const allowanceGroups = useMemo(() => [
+        {
+            key: "sitecore",
+            label: "Sitecore",
+            rows: operationAllowances.sitecore,
+        },
+        {
+            key: "filesystem",
+            label: "Filesystem",
+            rows: operationAllowances.filesystem,
+        },
+    ], [operationAllowances]);
+    const hasAnyAllowances = useMemo(() => operationAllowances.sitecore.length > 0 ||
+        operationAllowances.filesystem.length > 0, [operationAllowances]);
+    const allowancesTotalCount = useMemo(() => operationAllowances.sitecore.length +
+        operationAllowances.filesystem.length, [operationAllowances]);
+    const listedProfileSkillIdSet = useMemo(() => {
+        const ids = [
+            ...(activeProfile?.availableSkills ?? []),
+            ...(activeProfile?.allowedSkills ?? []),
+        ]
+            .map((skill) => String(skill?.id || "").toLowerCase())
+            .filter((id) => id.length > 0);
+        return new Set(ids);
+    }, [activeProfile?.availableSkills, activeProfile?.allowedSkills]);
+    const profileFilteredSkills = useMemo(() => {
+        if (listedProfileSkillIdSet.size === 0) {
+            return [];
+        }
+        return availableSkills.filter((skill) => listedProfileSkillIdSet.has(skill.id.toLowerCase()));
+    }, [availableSkills, listedProfileSkillIdSet]);
+    const profileFilteredSkillIdSet = useMemo(() => new Set(profileFilteredSkills.map((s) => s.id.toLowerCase())), [profileFilteredSkills]);
+    const manuallyAssignableSkillIdSet = useMemo(() => new Set((activeProfile?.allowedSkills ?? [])
+        .map((skill) => String(skill?.id || "").toLowerCase())
+        .filter((id) => id.length > 0)), [activeProfile?.allowedSkills]);
+    const selectableTemplateIdSet = useMemo(() => new Set(selectableTemplateIds.map((id) => id.toLowerCase())), [selectableTemplateIds]);
+    const selectedSkills = useMemo(() => selectedSkillIds
+        .map((id) => availableSkills.find((s) => s.id.toLowerCase() === id.toLowerCase()))
+        .filter((s) => !!s), [availableSkills, selectedSkillIds]);
+    const selectedSkillSet = useMemo(() => new Set(selectedSkillIds.map((id) => id.toLowerCase())), [selectedSkillIds]);
+    const autoAssignedSkillSet = useMemo(() => new Set(autoAssignedSkillIds.map((id) => id.toLowerCase())), [autoAssignedSkillIds]);
+    const previewAvailableTools = useMemo(() => {
+        const baseToolNames = mode === "read-only"
+            ? (activeProfile?.readOnlyToolNames ?? [])
+            : (activeProfile?.allowedToolNames ?? []);
+        const toolNames = new Set();
+        for (const toolName of baseToolNames) {
+            const normalized = String(toolName || "").trim();
+            if (normalized) {
+                toolNames.add(normalized);
+            }
+        }
+        for (const skill of selectedSkills) {
+            for (const toolName of skill.additionalAllowedTools ?? []) {
+                const normalized = String(toolName || "").trim();
+                if (normalized) {
+                    toolNames.add(normalized);
+                }
+            }
+        }
+        return Array.from(toolNames).sort((a, b) => a.localeCompare(b));
+    }, [
+        activeProfile?.allowedToolNames,
+        activeProfile?.readOnlyToolNames,
+        mode,
+        selectedSkills,
+    ]);
+    const displayedAvailableTools = isLocalOnlyDraftAgent
+        ? previewAvailableTools
+        : availableTools;
+    const displayedAvailableToolsLoading = isLocalOnlyDraftAgent
+        ? false
+        : availableToolsLoading;
+    const displayedAvailableToolsError = isLocalOnlyDraftAgent
+        ? null
+        : availableToolsError;
     // Remove deprecated cost limit fields from metadata to avoid confusion with agent/profile settings
     const sanitizeAgentMetadata = useCallback((meta) => {
         try {
@@ -834,28 +1511,239 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             return meta;
         }
     }, []);
-    // Read deterministic flags from query string once
-    let deterministicFlags;
-    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;
-        deterministicFlags = {
-            deterministic,
-            seed: Number.isFinite(seed) ? seed : undefined,
+    const getSkillActionErrorMessage = useCallback((error) => {
+        const message = error instanceof Error && error.message.trim()
+            ? error.message.trim()
+            : "Failed to update skill";
+        if (message.includes("Skill is not available for this agent profile")) {
+            return "This skill cannot be added for the current agent profile.";
+        }
+        return message;
+    }, []);
+    const clearLegacySelectedSkillsFromMetadata = useCallback(async () => {
+        const legacySkillIds = metadataSelectedSkillIds;
+        if (!agent?.id || legacySkillIds.length === 0) {
+            return;
+        }
+        const current = agentMetadata || {};
+        const currentAdditionalData = current.additionalData ||
+            {};
+        const nextAdditionalData = Object.fromEntries(Object.entries(currentAdditionalData).filter(([key]) => key.toLowerCase() !== "skillids"));
+        const next = {
+            ...current,
         };
-    }
-    catch {
-        deterministicFlags = {
-            deterministic: false,
-            seed: undefined,
+        if (Object.keys(nextAdditionalData).length > 0) {
+            next.additionalData = nextAdditionalData;
+        }
+        else {
+            delete next.additionalData;
+        }
+        try {
+            await updateAgentContext(agent.id, next);
+            setAgentMetadata(next);
+            setAgent((prev) => prev ? { ...prev, agentContext: JSON.stringify(next) } : prev);
+        }
+        catch (e) {
+            console.error("Failed to clear legacy selected skills", e);
+        }
+    }, [
+        agent?.id,
+        agentMetadata,
+        metadataSelectedSkillIds,
+        setAgent,
+        setAgentMetadata,
+    ]);
+    const parsePersistedAgentContext = (contextJson) => {
+        try {
+            if (!contextJson)
+                return null;
+            const parsedContext = JSON.parse(contextJson);
+            if (!parsedContext || typeof parsedContext !== "object") {
+                return null;
+            }
+            return sanitizeAgentMetadata(parsedContext);
+        }
+        catch {
+            return null;
+        }
+    };
+    const buildDraftPersistenceContext = () => {
+        let effectiveContext = agentMetadata;
+        try {
+            const normalizedAgentProfileId = agent?.profileId?.toLowerCase();
+            const profile = activeProfile ||
+                profiles.find((p) => p.id?.toLowerCase() === normalizedAgentProfileId);
+            const isLiveMode = profile?.editorContextMode === "live";
+            if (isLiveMode && typeof buildCurrentContext === "function") {
+                const freshContext = buildCurrentContext();
+                if (freshContext) {
+                    effectiveContext = {
+                        ...(agentMetadata || {}),
+                        items: freshContext.items,
+                        currentItemId: freshContext.currentItemId,
+                        components: freshContext.components,
+                        field: freshContext.field,
+                        activeWorkspace: freshContext.activeWorkspace,
+                        hasPageLoaded: freshContext.hasPageLoaded,
+                        openSidebars: freshContext.openSidebars,
+                    };
+                }
+            }
+        }
+        catch (e) {
+            console.warn("[AgentTerminal] Failed to compute draft context:", e);
+        }
+        return sanitizeAgentMetadata(effectiveContext || null);
+    };
+    const ensureDraftAgentPersisted = async () => {
+        if (!agent?.id) {
+            throw new Error("Agent not ready. Please try again.");
+        }
+        if (!isLocalOnlyDraftAgent) {
+            return agent;
+        }
+        const requestSettings = getPendingRequestSettings();
+        if (!requestSettings.profileId) {
+            throw new Error("Select an agent profile before adding a skill.");
+        }
+        const effectiveContext = buildDraftPersistenceContext();
+        const persistedAgent = await persistDraftAgent({
+            agentId: agent.id,
+            sessionId: editContext?.sessionId || undefined,
+            profileId: requestSettings.profileId,
+            mode: requestSettings.mode,
+            model: requestSettings.modelId || undefined,
+            name: agent.name,
+            context: effectiveContext,
+        });
+        pendingSettingsRef.current = null;
+        const persistedMetadata = parsePersistedAgentContext(persistedAgent.agentContext) ??
+            effectiveContext;
+        setAgentMetadata(persistedMetadata ? { ...persistedMetadata } : null);
+        setAgent((prev) => {
+            const next = {
+                ...(prev || {}),
+                ...persistedAgent,
+            };
+            if (prev?.messages?.length && !persistedAgent.messages?.length) {
+                next.messages = prev.messages;
+            }
+            return next;
+        });
+        onAgentUpdate?.(persistedAgent);
+        return persistedAgent;
+    };
+    const handleAddSkill = useCallback(async (skillId) => {
+        if (selectedSkillSet.has(skillId.toLowerCase()))
+            return;
+        if (!agent?.id)
+            return;
+        try {
+            setSkillActionError(null);
+            const persistedAgent = await ensureDraftAgentPersisted();
+            await assignAgentSkill({ agentId: persistedAgent.id, skillId });
+            setAgent((prev) => {
+                if (!prev)
+                    return prev;
+                const currentAssigned = Array.isArray(prev.assignedSkillIds)
+                    ? prev.assignedSkillIds
+                    : [];
+                if (currentAssigned.some((existingId) => String(existingId).toLowerCase() === skillId.toLowerCase())) {
+                    return prev;
+                }
+                return {
+                    ...prev,
+                    assignedSkillIds: [...currentAssigned, skillId],
+                };
+            });
+            await clearLegacySelectedSkillsFromMetadata();
+            return true;
+        }
+        catch (e) {
+            setSkillActionError(getSkillActionErrorMessage(e));
+            return false;
+        }
+    }, [
+        agent?.id,
+        assignAgentSkill,
+        clearLegacySelectedSkillsFromMetadata,
+        ensureDraftAgentPersisted,
+        getSkillActionErrorMessage,
+        setAgent,
+        selectedSkillSet,
+    ]);
+    const handleRemoveSkill = useCallback(async (skillId) => {
+        if (!agent?.id)
+            return;
+        try {
+            setSkillActionError(null);
+            await revokeAgentSkill({ agentId: agent.id, skillId });
+            setAgent((prev) => {
+                if (!prev)
+                    return prev;
+                const currentAssigned = Array.isArray(prev.assignedSkillIds)
+                    ? prev.assignedSkillIds
+                    : [];
+                return {
+                    ...prev,
+                    assignedSkillIds: currentAssigned.filter((existingId) => String(existingId).toLowerCase() !== skillId.toLowerCase()),
+                };
+            });
+            await clearLegacySelectedSkillsFromMetadata();
+        }
+        catch (e) {
+            setSkillActionError(getSkillActionErrorMessage(e));
+        }
+    }, [
+        agent?.id,
+        clearLegacySelectedSkillsFromMetadata,
+        getSkillActionErrorMessage,
+        revokeAgentSkill,
+        setAgent,
+    ]);
+    const handleOpenProfileSettings = useCallback(async () => {
+        if (!editContext || !activeProfile?.id)
+            return;
+        const lang = editContext.currentItemDescriptor?.language || "en";
+        await editContext.loadItem({
+            id: activeProfile.id,
+            language: lang,
+            version: 0,
+        });
+        editContext.switchWorkspace("editor");
+    }, [editContext, activeProfile?.id]);
+    const handleEditProfileSideBySide = useCallback(async () => {
+        if (!editContext || !activeProfile?.id)
+            return;
+        const lang = editContext.currentItemDescriptor?.language || "en";
+        const profileItem = {
+            id: activeProfile.id,
+            language: lang,
+            version: 0,
         };
-    }
+        if (editContext.workspaceId === "agents") {
+            editContext.setShowAgentsWorkspaceEditor(true);
+            await editContext.loadItem(profileItem);
+            return;
+        }
+        await editContext.loadItem(profileItem, {
+            openInNewSlot: true,
+        });
+        editContext.switchWorkspace("editor");
+    }, [editContext, activeProfile?.id]);
+    const handleOpenSkillItem = useCallback(async (skillId) => {
+        if (!editContext || !skillId)
+            return;
+        const lang = editContext.currentItemDescriptor?.language || "en";
+        await editContext.loadItem({
+            id: skillId,
+            language: lang,
+            version: 0,
+        });
+        editContext.switchWorkspace("editor");
+    }, [editContext]);
     useEffect(() => {
-        localStorage.setItem("editor.agent.promptHistory", JSON.stringify(promptHistory));
+        localStorageService.setItem("editor.agent.promptHistory", promptHistory);
     }, [promptHistory]);
     useEffect(() => {
         // Keep messagesRef synchronized with messages state
@@ -867,6 +1755,32 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [liveTotals, setLiveTotals] = useState(null);
     // Context window status from backend (extracted from delta cost object)
     const [contextWindowStatus, setContextWindowStatus] = useState(null);
+    const effectiveModelName = useMemo(() => {
+        const fromContextWindow = contextWindowStatus?.model?.trim();
+        if (fromContextWindow)
+            return fromContextWindow;
+        const fromAgent = agent?.model?.trim();
+        if (fromAgent)
+            return fromAgent;
+        const models = activeProfile?.models || [];
+        const selectedModelName = selectedModelId
+            ? models.find((m) => m.id === selectedModelId)?.name?.trim()
+            : undefined;
+        if (selectedModelName)
+            return selectedModelName;
+        const defaultModelName = activeProfile?.defaultModelId
+            ? models.find((m) => m.id === activeProfile.defaultModelId)?.name?.trim()
+            : undefined;
+        if (defaultModelName)
+            return defaultModelName;
+        return models[0]?.name?.trim() || undefined;
+    }, [
+        contextWindowStatus?.model,
+        agent?.model,
+        activeProfile?.models,
+        activeProfile?.defaultModelId,
+        selectedModelId,
+    ]);
     // Flag to track when we should create a new message
     const shouldCreateNewMessage = useRef(false);
     // Keep a ref to the current messages for immediate access
@@ -877,12 +1791,16 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const placeholderInputRef = useRef(null);
     const promptPlaceholderInputRef = useRef(null);
     const messagesContainerRef = useRef(null);
+    const inlineDialogContainerRef = useRef(null);
     const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+    const [recentToolUiEvents, setRecentToolUiEvents] = useState([]);
     // 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 toolCallFirstSeenAtRef = useRef({});
+    const pendingToolCompletionTimersRef = useRef({});
+    // Cache mode/model/profile changes made while the agent is still "new" (not yet persisted)
     const pendingSettingsRef = useRef(null);
     // Track whether textarea should maintain focus during re-renders
     const shouldMaintainFocusRef = useRef(false);
@@ -904,11 +1822,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             setIsVoiceSupported(!!SR);
             if (SR === undefined) {
                 setIsVoiceDisabled(true);
-                localStorage.setItem(VOICE_DISABLED_KEY, "true");
+                localStorageService.setString(VOICE_DISABLED_KEY, "true");
                 return;
             }
             else {
-                const wasDisabled = localStorage.getItem(VOICE_DISABLED_KEY) === "true";
+                const wasDisabled = localStorageService.getString(VOICE_DISABLED_KEY) === "true";
                 setIsVoiceDisabled(wasDisabled);
             }
         }
@@ -919,7 +1837,12 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     // Auto-focus terminal input on mount
     useEffect(() => {
         if (textareaRef.current) {
-            textareaRef.current.focus();
+            try {
+                textareaRef.current.focus({ preventScroll: true });
+            }
+            catch {
+                textareaRef.current.focus();
+            }
         }
     }, []);
     // Start voice recognition
@@ -938,20 +1861,29 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             r.lang = editContext?.currentItemDescriptor?.language || "en-US";
             r.continuous = true;
             r.interimResults = true;
+            promptBeforeVoiceRef.current = prompt;
             r.onstart = () => {
                 setIsListening(true);
                 prevPlaceholderRef.current = inputPlaceholder;
                 setInputPlaceholder("Listening...");
             };
+            // Desktop Chrome: single result at index 0, transitions interim→final once.
+            // Mobile Chrome: new result index per event, ALL immediately isFinal,
+            // each containing the full cumulative transcript. We always take the last
+            // non-empty final result and REPLACE the prompt to handle both patterns.
             r.onresult = (event) => {
-                let finalText = "";
+                let lastFinalTranscript = "";
                 let interimText = "";
-                for (let i = event.resultIndex; i < event.results.length; i++) {
+                for (let i = event.results.length - 1; i >= 0; i--) {
                     const res = event.results[i];
-                    if (res.isFinal)
-                        finalText += res[0]?.transcript || "";
-                    else
-                        interimText += res[0]?.transcript || "";
+                    if (res.isFinal &&
+                        !lastFinalTranscript &&
+                        (res[0]?.transcript || "").trim()) {
+                        lastFinalTranscript = res[0].transcript;
+                    }
+                    if (!res.isFinal) {
+                        interimText = (res[0]?.transcript || "") + interimText;
+                    }
                 }
                 if (interimText) {
                     setInputPlaceholder(`Listening... ${interimText.trim()}`);
@@ -959,11 +1891,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 else {
                     setInputPlaceholder("Listening...");
                 }
-                if (finalText && finalText.trim()) {
-                    setPrompt((prev) => {
-                        const prefix = prev && !prev.endsWith(" ") ? prev + " " : prev;
-                        return (prefix || "") + finalText.trim() + " ";
-                    });
+                const base = promptBeforeVoiceRef.current;
+                const separator = base && !base.endsWith(" ") ? " " : "";
+                const recognized = lastFinalTranscript.trim();
+                if (recognized) {
+                    setPrompt(base + separator + recognized + " ");
                     if (textareaRef.current) {
                         try {
                             const v = textareaRef.current.value || "";
@@ -979,7 +1911,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 // network error also comes from incompatible chromium client
                 if (e?.error === "network") {
                     try {
-                        localStorage.setItem(VOICE_DISABLED_KEY, "true");
+                        localStorageService.setString(VOICE_DISABLED_KEY, "true");
                         setIsVoiceDisabled(true);
                     }
                     catch { }
@@ -1148,25 +2080,18 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     // 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");
-        }
+        const effectiveAgentId = currentAgent?.id || agentStub.id;
         // Reduced: avoid verbose logging during streaming
         return {
             id: messageId,
-            agentId: currentAgent.id,
+            agentId: effectiveAgentId,
             messageIndex: -1,
             role: "assistant",
             content: "",
             name: "agent",
             messageType: "streaming",
             isCompleted: false,
-            model: currentAgent.model || "",
+            model: currentAgent?.model || "",
             tokensUsed: 0,
             inputTokens: 0,
             outputTokens: 0,
@@ -1175,16 +2100,71 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             outputTokenCost: 0,
             cachedInputTokenCost: 0,
             totalCost: 0,
-            currency: currentAgent.currency || "USD",
+            currency: currentAgent?.currency || "USD",
             createdDate: new Date().toISOString(),
             toolCalls: [],
         };
-    }, [agent]);
+    }, [agent, agentStub.id]);
+    const stripHeartbeatMessages = useCallback((currentMessages) => currentMessages.filter((message) => message.messageType !== "heartbeat"), []);
+    const handleHeartbeatMessage = useCallback((message) => {
+        const heartbeatText = (message.data?.message ||
+            message.data?.Message ||
+            "Still working on your request. This is taking a little longer than usual.").trim() ||
+            "Still working on your request. This is taking a little longer than usual.";
+        const createdDate = message.timestamp || new Date().toISOString();
+        const heartbeatId = `heartbeat-${agent?.id || agentStub.id}`;
+        setMessages((prev) => {
+            const withoutHeartbeats = stripHeartbeatMessages(prev);
+            const updated = [
+                ...withoutHeartbeats,
+                {
+                    id: heartbeatId,
+                    agentId: agent?.id || agentStub.id,
+                    messageIndex: -1,
+                    role: "system",
+                    content: heartbeatText,
+                    name: "system",
+                    messageType: "heartbeat",
+                    isCompleted: true,
+                    model: "",
+                    tokensUsed: 0,
+                    inputTokens: 0,
+                    outputTokens: 0,
+                    cachedInputTokens: 0,
+                    inputTokenCost: 0,
+                    outputTokenCost: 0,
+                    cachedInputTokenCost: 0,
+                    totalCost: 0,
+                    currency: "USD",
+                    createdDate,
+                    toolCalls: [],
+                },
+            ];
+            messagesRef.current = updated;
+            return updated;
+        });
+    }, [agent?.id, agentStub.id, stripHeartbeatMessages]);
+    const clearHeartbeatMessages = useCallback(() => {
+        setMessages((prev) => {
+            const updated = stripHeartbeatMessages(prev);
+            if (updated.length === prev.length) {
+                return prev;
+            }
+            messagesRef.current = updated;
+            return updated;
+        });
+    }, [stripHeartbeatMessages]);
     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) {
+            console.warn("[AgentTerminal] Content chunk missing messageId; falling back to local resolution", {
+                agentId: agentData.id,
+                isIncremental: message.data?.isIncremental,
+                previousContentLength: message.data?.previousContentLength,
+                totalContentLength: message.data?.totalContentLength,
+            });
             // 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;
@@ -1198,7 +2178,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 // If the agent isn't currently running (e.g., we switched tabs after the run
                 // completed), skip creating a new streaming message to avoid duplicates.
                 const currentAgentStatus = (agentData || agent)?.status;
-                const isAgentRunning = currentAgentStatus === "running" || currentAgentStatus === 1;
+                const isAgentRunning = currentAgentStatus === "running";
                 if (!isAgentRunning) {
                     return;
                 }
@@ -1231,6 +2211,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 outputCost: Number(cost.output) || 0,
                 cachedCost: Number(cost.cached) || 0,
                 cacheWriteCost: Number(cost.cacheWrite) || 0,
+                imageCost: Number(cost.imageCost ?? cost.totalImageCost) ||
+                    0,
                 totalCost: Number(cost.total) || 0,
                 currency: "USD",
             };
@@ -1254,11 +2236,20 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 setIsWaitingForResponse(false);
                 shouldCreateNewMessage.current = false;
             }
-            // Extract context window info from cost object
-            if (cost.contextWindow && cost.contextUsed) {
-                const contextWindowValue = Number(cost.contextWindow);
-                const contextUsedValue = Number(cost.contextUsed);
-                if (contextWindowValue > 0 && contextUsedValue >= 0) {
+            // Extract context window info from cost object.
+            // Note: contextUsed can legitimately be 0 (especially early in OpenAI streams),
+            // so we must check for null/undefined instead of truthiness.
+            const contextWindowRaw = cost.contextWindow;
+            const contextUsedRaw = cost.contextUsed;
+            if (contextWindowRaw !== undefined &&
+                contextWindowRaw !== null &&
+                contextUsedRaw !== undefined &&
+                contextUsedRaw !== null) {
+                const contextWindowValue = Number(contextWindowRaw);
+                const contextUsedValue = Number(contextUsedRaw);
+                if (contextWindowValue > 0 &&
+                    Number.isFinite(contextUsedValue) &&
+                    contextUsedValue >= 0) {
                     setContextWindowStatus({
                         contextWindowTokens: contextWindowValue,
                         estimatedInputTokens: contextUsedValue,
@@ -1274,6 +2265,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             const existingMessageIndex = prev.findIndex((msg) => msg.id === messageId);
             if (existingMessageIndex === -1) {
                 // Message doesn't exist - create new streaming message
+                const previousContentLength = message.data?.previousContentLength || 0;
+                if (message.data?.isIncremental && previousContentLength > 0) {
+                    console.warn("[AgentTerminal] Incremental chunk arrived before its base message existed", {
+                        messageId,
+                        previousContentLength,
+                        totalContentLength: message.data?.totalContentLength,
+                        deltaLength: (message.data?.deltaContent || "").length,
+                    });
+                }
                 const newStreamMessage = createNewStreamMessage(messageId, agentData);
                 // Set the content for the new message
                 const updatedNewMessage = { ...newStreamMessage };
@@ -1296,8 +2296,21 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     return prev;
                 // Check if existing content is already longer than what we're trying to stream
                 const currentContentLength = existingMessage.content?.length || 0;
+                const previousContentLength = message.data?.previousContentLength || 0;
                 const totalContentLength = message.data?.totalContentLength || 0;
-                if (currentContentLength >= totalContentLength &&
+                if (message.data?.isIncremental &&
+                    previousContentLength !== currentContentLength &&
+                    (previousContentLength > 0 || currentContentLength > 0)) {
+                    console.warn("[AgentTerminal] Content chunk length mismatch", {
+                        messageId,
+                        previousContentLength,
+                        currentContentLength,
+                        totalContentLength,
+                        deltaLength: (message.data?.deltaContent || "").length,
+                    });
+                }
+                if (message.data?.isIncremental &&
+                    currentContentLength >= totalContentLength &&
                     totalContentLength > 0) {
                     return prev;
                 }
@@ -1321,10 +2334,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         });
     }, [createNewStreamMessage, agent]);
     const handleToolCall = useCallback((message, agentData) => {
-        const toolCallId = message.data?.toolCallId || message.data?.id || crypto.randomUUID();
+        const extractedToolCall = extractToolCallFields(message.data);
+        const toolCallId = extractedToolCall.toolCallId || crypto.randomUUID();
         // Prefer provided messageId, otherwise fall back to the last streaming assistant message
         let toolCallMessageId = message.data?.messageId;
         if (!toolCallMessageId) {
+            console.warn("[AgentTerminal] Tool call missing messageId; falling back", {
+                toolCallId,
+                toolName: message.data?.name || message.data?.displayName,
+            });
             const current = messagesRef.current;
             const lastStreaming = [...current]
                 .reverse()
@@ -1332,7 +2350,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             if (lastStreaming?.id) {
                 toolCallMessageId = lastStreaming.id;
             }
+            else {
+                // Tool calls can arrive before any assistant content chunk (common for dialog tools like ask-questionnaire).
+                // Create a synthetic streaming message so the UI can render the tool call immediately.
+                toolCallMessageId = crypto.randomUUID();
+            }
         }
+        appendToolUiEvent("ui:tool-call-targeted", `${extractedToolCall.functionName || "unknown"} toolCallId=${toolCallId} targetMessageId=${toolCallMessageId || "none"} providedMessageId=${String(message.data?.messageId || "none")}`);
         // Find or create the target message for this tool call
         if (toolCallMessageId) {
             const currentMessages = messagesRef.current;
@@ -1359,24 +2383,25 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         // 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 toolCallError = message.data.functionError || message.data.error || "";
+            const isPruned = !!message.data?.isPruned || /^PRUNED$/i.test(String(toolCallError));
+            const toolCallCreatedDate = message.data.createdDate ||
+                message.timestamp ||
+                new Date().toISOString();
             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 || {}),
+                functionName: extractedToolCall.functionName,
+                functionArguments: extractedToolCall.functionArguments,
                 functionResult: message.data.functionResult || message.data.result || "",
-                functionError: message.data.functionError || message.data.error || "",
+                functionResultRichContent: message.data.richContent || undefined,
+                functionError: toolCallError,
+                isPruned,
                 isCompleted: false,
                 responseTimeMs: message.data.responseTimeMs,
-                createdDate: new Date().toISOString(),
+                createdDate: toolCallCreatedDate,
                 requiresApproval: message.data?.requiresApproval,
             };
             // Check for existing tool call - search across ALL messages by toolCallId first
@@ -1415,14 +2440,21 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 // Check if the new data has more information than what we have
                 const newArgs = toolCall.functionArguments;
                 const existingArgs = existingToolCall.functionArguments;
-                const hasMoreCompleteArgs = newArgs && newArgs.length > (existingArgs?.length || 0);
+                const newArgsText = stringifyToolField(newArgs) || "";
+                const existingArgsText = stringifyToolField(existingArgs) || "";
+                const hasMoreCompleteArgs = (newArgsText.length > existingArgsText.length &&
+                    newArgsText !== existingArgsText) ||
+                    (existingArgsText === "{}" && newArgsText !== "{}");
                 const hasNewResult = toolCall.functionResult && !existingToolCall.functionResult;
+                const hasNewRichContent = toolCall.functionResultRichContent &&
+                    !existingToolCall.functionResultRichContent;
                 const hasNewError = toolCall.functionError && !existingToolCall.functionError;
                 const hasNewApprovalInfo = toolCall.requiresApproval && !existingToolCall.requiresApproval;
                 const hasNewDbMessageId = toolCall.dbMessageId && !existingToolCall.dbMessageId;
                 // Only update if there's meaningful new data
                 if (hasMoreCompleteArgs ||
                     hasNewResult ||
+                    hasNewRichContent ||
                     hasNewError ||
                     hasNewApprovalInfo ||
                     hasNewDbMessageId) {
@@ -1439,9 +2471,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 updatedToolCalls[idx] = {
                                     ...existing,
                                     functionArguments: hasMoreCompleteArgs
-                                        ? newArgs
-                                        : existing.functionArguments,
+                                        ? newArgsText
+                                        : existingArgsText || existing.functionArguments,
                                     functionResult: toolCall.functionResult || existing.functionResult,
+                                    functionResultRichContent: toolCall.functionResultRichContent ||
+                                        existing.functionResultRichContent,
                                     functionError: toolCall.functionError || existing.functionError,
                                     requiresApproval: toolCall.requiresApproval || existing.requiresApproval,
                                 };
@@ -1459,27 +2493,36 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 }
                 return; // Done updating existing tool call
             }
-            setMessages((prev) => {
-                const updated = prev.map((msg) => {
-                    if (msg.id !== toolCallMessageId)
-                        return msg;
-                    const existingToolCalls = msg.toolCalls || [];
-                    return { ...msg, toolCalls: [...existingToolCalls, toolCall] };
+            flushSync(() => {
+                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;
                 });
-                messagesRef.current = updated;
-                return updated;
             });
+            const messageWithToolCall = messagesRef.current.find((msg) => msg.id === toolCallMessageId);
+            appendToolUiEvent("ui:tool-call-attached", `${extractedToolCall.functionName || "unknown"} toolCallId=${toolCallId} targetMessageId=${toolCallMessageId} messageToolCalls=${messageWithToolCall?.toolCalls?.length || 0} assistantMessages=${messagesRef.current.filter((msg) => msg.role === "assistant").length}`);
             // If tool requires approval, agent is now waiting for user action - stop thinking
             if (message.data?.requiresApproval) {
                 setIsAgentThinking(false);
             }
         }
-    }, [createNewStreamMessage]);
+    }, [appendToolUiEvent, createNewStreamMessage]);
     const handleToolResult = useCallback((message, agentData) => {
-        const resultToolCallId = message.data?.toolCallId || message.data?.id || crypto.randomUUID();
+        const extractedToolCall = extractToolCallFields(message.data);
+        const resultToolCallId = extractedToolCall.toolCallId || crypto.randomUUID();
         // Prefer provided messageId, otherwise fall back to the last streaming assistant message
         let resultMessageId = message.data?.messageId;
         if (!resultMessageId) {
+            console.warn("[AgentTerminal] Tool result missing messageId; falling back", {
+                toolCallId: resultToolCallId,
+                toolName: message.data?.functionName || message.data?.displayName,
+            });
             const current = messagesRef.current;
             const lastStreaming = [...current]
                 .reverse()
@@ -1501,6 +2544,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 outputCost: Number(cost.output) || 0,
                 cachedCost: Number(cost.cached) || 0,
                 cacheWriteCost: Number(cost.cacheWrite) || 0,
+                imageCost: Number(cost.imageCost) || 0,
                 totalCost: Number(cost.total) || 0,
                 currency: "USD",
             };
@@ -1512,11 +2556,20 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             if (anyNonZero) {
                 setLiveTotals(nextTotals);
             }
-            // Extract context window info from cost object
-            if (cost.contextWindow && cost.contextUsed) {
-                const contextWindowValue = Number(cost.contextWindow);
-                const contextUsedValue = Number(cost.contextUsed);
-                if (contextWindowValue > 0 && contextUsedValue >= 0) {
+            // Extract context window info from cost object.
+            // Note: contextUsed can legitimately be 0 (especially early in OpenAI streams),
+            // so we must check for null/undefined instead of truthiness.
+            const contextWindowRaw = cost.contextWindow;
+            const contextUsedRaw = cost.contextUsed;
+            if (contextWindowRaw !== undefined &&
+                contextWindowRaw !== null &&
+                contextUsedRaw !== undefined &&
+                contextUsedRaw !== null) {
+                const contextWindowValue = Number(contextWindowRaw);
+                const contextUsedValue = Number(contextUsedRaw);
+                if (contextWindowValue > 0 &&
+                    Number.isFinite(contextUsedValue) &&
+                    contextUsedValue >= 0) {
                     setContextWindowStatus({
                         contextWindowTokens: contextWindowValue,
                         estimatedInputTokens: contextUsedValue,
@@ -1540,6 +2593,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     outputCost: Number(data.totalOutputTokenCost) || 0,
                     cachedCost: Number(data.totalCachedTokenCost) || 0,
                     cacheWriteCost: Number(data.totalCacheWriteTokenCost) || 0,
+                    imageCost: Number(data.totalImageCost) || 0,
                     totalCost: Number(data.totalCost) || 0,
                     currency: data.currency || "USD",
                 };
@@ -1555,8 +2609,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         // Update tool result directly in the messages array
         if (!resultMessageId) {
+            appendToolUiEvent("ui:tool-result-dropped", `${extractedToolCall.functionName || "unknown"} toolCallId=${resultToolCallId} reason=no-result-message-id`);
             return;
         }
+        appendToolUiEvent("ui:tool-result-targeted", `${extractedToolCall.functionName || "unknown"} toolCallId=${resultToolCallId} targetMessageId=${resultMessageId}`);
         // Update the message with tool result
         setMessages((prev) => {
             const updated = prev.map((msg) => {
@@ -1572,13 +2628,22 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     const existingToolCall = updatedMessage.toolCalls[toolCallIndex];
                     if (existingToolCall && message.data) {
                         const updatedToolCalls = [...updatedMessage.toolCalls];
+                        const nextArgsText = stringifyToolField(extractedToolCall.functionArguments) || "";
+                        const existingArgsText = stringifyToolField(existingToolCall.functionArguments) || "";
+                        const hasMoreCompleteArgs = (nextArgsText.length > existingArgsText.length &&
+                            nextArgsText !== existingArgsText) ||
+                            (existingArgsText === "{}" && nextArgsText !== "{}");
                         const toolCall = {
                             id: existingToolCall.id,
                             messageId: existingToolCall.messageId,
                             toolCallId: existingToolCall.toolCallId,
                             functionName: existingToolCall.functionName,
-                            functionArguments: existingToolCall.functionArguments,
+                            functionArguments: hasMoreCompleteArgs
+                                ? nextArgsText
+                                : existingToolCall.functionArguments,
                             functionResult: message.data.functionResult || message.data.result || "",
+                            functionResultRichContent: message.data.richContent ||
+                                existingToolCall.functionResultRichContent,
                             functionError: message.data.functionError || message.data.error || "",
                             isCompleted: true,
                             responseTimeMs: message.data.responseTimeMs,
@@ -1595,23 +2660,21 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 }
                 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 toolCallCreatedDate = message.data.createdDate ||
+                        message.timestamp ||
+                        new Date().toISOString();
                     const toolCall = {
                         id: resultToolCallId,
                         messageId: resultMessageId,
                         toolCallId: resultToolCallId,
-                        functionName: functionName,
-                        functionArguments: message.data.functionArguments ||
-                            message.data.arguments ||
-                            JSON.stringify(message.data.function?.arguments || {}),
+                        functionName: extractedToolCall.functionName,
+                        functionArguments: extractedToolCall.functionArguments,
                         functionResult: message.data.functionResult || message.data.result || "",
+                        functionResultRichContent: message.data.richContent || undefined,
                         functionError: message.data.functionError || message.data.error || "",
                         isCompleted: true,
                         responseTimeMs: message.data.responseTimeMs,
-                        createdDate: new Date().toISOString(),
+                        createdDate: toolCallCreatedDate,
                     };
                     updatedMessage.toolCalls = [...updatedMessage.toolCalls, toolCall];
                 }
@@ -1619,9 +2682,12 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 return updatedMessage;
             });
             messagesRef.current = updated;
+            const messageWithToolResult = updated.find((msg) => msg.id === resultMessageId);
+            const matchingToolCall = messageWithToolResult?.toolCalls?.find((tc) => tc.toolCallId === resultToolCallId);
+            appendToolUiEvent("ui:tool-result-applied", `${extractedToolCall.functionName || "unknown"} toolCallId=${resultToolCallId} targetMessageId=${resultMessageId} completed=${matchingToolCall?.isCompleted ? "yes" : "no"} messageToolCalls=${messageWithToolResult?.toolCalls?.length || 0}`);
             return updated;
         });
-    }, []);
+    }, [appendToolUiEvent]);
     // Listen for local approval resolution to update UI
     useEffect(() => {
         const onApprovalResolved = (ev) => {
@@ -1702,7 +2768,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             // The agent might have been persisted after sending a prompt
             // Only treat as "new" if backend returns 404
             const hasExistingMessages = messagesRef.current.length > 0;
-            if (agentStub.status === "new" && !hasExistingMessages) {
+            if (agentStub.status === "new" &&
+                !agentStub.userId &&
+                !hasExistingMessages) {
                 // Only initialize as new if we have no messages yet (initial mount)
                 // Derive initial profile from provided metadata if present
                 const initialProfileIdFromMeta = (() => {
@@ -1742,6 +2810,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     totalInputTokenCost: 0,
                     totalOutputTokenCost: 0,
                     totalCachedInputTokenCost: 0,
+                    totalImageCost: 0,
                     totalCost: 0,
                     messageCount: 0,
                 });
@@ -1784,48 +2853,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     }
                 })();
                 // 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?.item?.name,
-                                path: editContext?.item?.path,
-                            },
-                        ],
-                        components: editContext?.selection?.length && item
-                            ? editContext.selection.map((componentId) => ({
-                                componentId,
-                                pageItem: {
-                                    id: item.id,
-                                    language: item.language,
-                                    version: item.version,
-                                    name: editContext?.item?.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?.item?.name,
-                                },
-                            }
-                            : undefined,
-                    }
-                    : null;
+                const localCtx = item && shouldSeedContext ? buildEditorContextPayload(item) : null;
                 let nextMetadata = null;
                 if (initialMetadata) {
                     // Merge initial metadata with local context (using top-level structure)
@@ -1901,8 +2929,16 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     seenMessageIdsRef.current.add(msg.id.toLowerCase());
                 }
             });
-            // Keep local streaming only if the agent is still running; otherwise discard locals
+            // Keep local streaming if the agent is still active (running/waiting); otherwise discard locals.
+            // This is important for dialog-style tools (e.g., ask-questionnaire) where the agent may be
+            // "waiting" but we still want to keep the in-flight tool call UI visible.
             const isRunning = agentData.status === "running" || agentData.status === 1;
+            const isWaiting = agentData.status === "waitingForApproval" ||
+                agentData.status === 2 ||
+                agentData.status === "waitingForInput" ||
+                agentData.status === "costLimitReached" ||
+                agentData.status === 7;
+            const keepLocalStreaming = isRunning || isWaiting;
             // Filter local messages to only include streaming/incomplete messages that aren't in DB
             // This prevents duplicates when reloading - DB messages are source of truth for completed messages
             const localStreaming = isRunning
@@ -1920,7 +2956,19 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     // Don't keep completed messages from local state - DB is source of truth
                     return false;
                 })
-                : [];
+                : keepLocalStreaming
+                    ? messagesRef.current.filter((localMsg) => {
+                        if (!localMsg.id)
+                            return false;
+                        if (!localMsg.isCompleted &&
+                            localMsg.messageType === "streaming") {
+                            const existsInDb = dbMessages.some((dbMsg) => dbMsg.id &&
+                                dbMsg.id.toLowerCase() === localMsg.id.toLowerCase());
+                            return !existsInDb;
+                        }
+                        return false;
+                    })
+                    : [];
             const merged = mergeMessagesById(dbMessages, localStreaming);
             messagesRef.current = merged;
             setMessages(merged);
@@ -1931,6 +2979,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 const runningNow = agentData.status === "running" || agentData.status === 1;
                 const waitingForApprovalNow = agentData.status === "waitingForApproval" ||
                     agentData.status === 2;
+                const waitingForInputNow = agentData.status === "waitingForInput";
                 const hasStreamingNow = merged.some((m) => !m.isCompleted && m.messageType === "streaming");
                 if (runningNow || hasStreamingNow) {
                     setIsWaitingForResponse(true);
@@ -1938,11 +2987,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     // Agent is actively running, show thinking dots
                     setIsAgentThinking(true);
                 }
-                else if (waitingForApprovalNow) {
+                else if (waitingForApprovalNow || waitingForInputNow) {
                     setIsWaitingForResponse(false);
                     isWaitingRef.current = false;
                     setIsConnecting(false);
-                    // Agent is waiting for user approval, hide thinking dots
+                    // Agent is waiting for user input/approval, hide thinking dots
                     setIsAgentThinking(false);
                 }
                 else {
@@ -1991,19 +3040,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     if (!contextJson)
                         return null;
                     const parsedContext = JSON.parse(contextJson);
-                    // Context is stored as flat structure with top-level properties
-                    // Due to C# [JsonExtensionData], AdditionalData entries are serialized at top level
-                    // We need to normalize: move todoList from top level into additionalData if present
                     if (parsedContext && typeof parsedContext === "object") {
-                        const normalized = { ...parsedContext };
-                        // If todoList is at top level but not in additionalData, move it
-                        if (normalized.todoList && !normalized.additionalData?.todoList) {
-                            normalized.additionalData = {
-                                ...(normalized.additionalData || {}),
-                                todoList: normalized.todoList,
-                            };
-                        }
-                        return normalized;
+                        return parsedContext;
                     }
                     return null;
                 }
@@ -2089,7 +3127,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             return;
         }
         // Check if cost limit exceeded based on status or cost values
-        const statusIndicatesLimit = agent.status === "costLimitReached" || agent.status === 7;
+        const statusIndicatesLimit = agent.status === "costLimitReached";
         // Use liveTotals.totalCost as fallback if agent.totalCost is missing or 0
         const effectiveTotalCost = agent.totalCost || liveTotals?.totalCost || 0;
         const costExceedsLimit = agent.costLimit &&
@@ -2174,9 +3212,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         // Handle agent:profile:switched (profile changed via switch-profile function)
         if (messageType === "agent:profile:switched") {
             const payload = message.payload || {};
-            const switchedAgentId = payload.agentId || payload.AgentId;
-            const newProfileId = payload.newProfileId || payload.NewProfileId;
-            const newProfileName = payload.newProfileName || payload.NewProfileName;
+            const switchedAgentId = payload.agentId;
+            const newProfileId = payload.newProfileId;
+            const newProfileName = payload.newProfileName;
             if (switchedAgentId === agent.id && newProfileId) {
                 // Update the agent's profile
                 setAgent((prev) => {
@@ -2217,9 +3255,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             return;
         }
         // For other agent messages, check if this is for our agent
-        const agentId = message.payload?.agentId || message.payload?.AgentId;
-        if (agentId !== agent.id)
+        const agentId = message.payload?.agentId;
+        if (agentId !== agent.id) {
             return;
+        }
         // Handle agent:run:start
         if (messageType === "agent:run:start") {
             // If a stop operation is in progress, ignore this message to prevent
@@ -2228,6 +3267,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 console.log("[AgentTerminal] Ignoring agent:run:start during stop operation");
                 return;
             }
+            const currentStatus = agentRef.current?.status;
+            if (currentStatus === "waitingForInput" ||
+                currentStatus === "waitingForApproval" ||
+                currentStatus === "costLimitReached") {
+                // Replayed start messages arrive before the buffered status payload when
+                // reopening an already-paused agent. Preserve the attention state instead
+                // of flashing "running" until the follow-up status update lands.
+                return;
+            }
             // Reset run-scoped deduplication so new run seq values (starting at 1)
             // are not discarded due to previous run's lastSeqRef
             lastSeqRef.current = 0;
@@ -2323,6 +3371,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         if (messageType === "agent:prompt:queued") {
             const { queueEntry } = message.payload;
             if (queueEntry) {
+                if (shouldSuppressQueuedPrompt(queueEntry)) {
+                    return;
+                }
                 // Add the new prompt to the queued prompts list
                 setQueuedPrompts((prev) => {
                     // Check if prompt already exists (deduplication)
@@ -2351,17 +3402,29 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 return;
             }
             const { seq, type, data, cost } = message.payload;
+            if (type === "ToolCall" || type === "toolCall") {
+            }
             // Always allow ContextUpdate messages (metadata updates) regardless of agent status
             const isContextUpdate = type === "ContextUpdate" || type === "contextUpdate";
+            const isHeartbeat = type === "Heartbeat" || type === "heartbeat";
+            const shouldClearHeartbeat = type === "ContentChunk" ||
+                type === "contentChunk" ||
+                type === "ToolCall" ||
+                type === "toolCall" ||
+                type === "ToolResult" ||
+                type === "toolResult";
             // Allow deltas if the agent is running OR if we already have an active streaming message
             // OR if the server provided a messageId for targeted updates.
             // This avoids dropping early deltas that may arrive before the 'running' status update.
             // ContextUpdate messages are always allowed as they're metadata updates, not content.
             const isRunning = agent.status === "running" || agent.status === 1;
             const hasStreaming = messagesRef.current.some((m) => !m.isCompleted && m.messageType === "streaming");
-            const hasMessageId = !!message?.payload?.data?.messageId ||
-                !!message?.payload?.data?.MessageId;
-            if (!isContextUpdate && !isRunning && !hasStreaming && !hasMessageId) {
+            const hasMessageId = !!message?.payload?.data?.messageId;
+            if (!isContextUpdate &&
+                !isHeartbeat &&
+                !isRunning &&
+                !hasStreaming &&
+                !hasMessageId) {
                 return; // ignore only if we cannot safely target an existing streaming message
             }
             // Deduplicate by sequence
@@ -2378,15 +3441,23 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 cost,
                 timestamp: new Date().toISOString(),
             };
+            if (shouldClearHeartbeat) {
+                clearHeartbeatMessages();
+            }
             if (type === "ContentChunk" || type === "contentChunk") {
                 handleContentChunk(agentStreamMessage, agent);
             }
             else if (type === "ToolCall" || type === "toolCall") {
+                appendToolUiEvent("ui:tool-delta-received", `ToolCall:${String(data?.functionName || data?.name || data?.displayName || "unknown")} messageId=${String(data?.messageId || "none")} activeStreaming=${messagesRef.current.some((m) => !m.isCompleted && m.messageType === "streaming") ? "yes" : "no"}`, seq ?? null);
                 handleToolCall(agentStreamMessage, agent);
             }
             else if (type === "ToolResult" || type === "toolResult") {
+                appendToolUiEvent("ui:tool-delta-received", `ToolResult:${String(data?.functionName || data?.name || data?.displayName || "unknown")} messageId=${String(data?.messageId || "none")} activeStreaming=${messagesRef.current.some((m) => !m.isCompleted && m.messageType === "streaming") ? "yes" : "no"}`, seq ?? null);
                 handleToolResult(agentStreamMessage, agent);
             }
+            else if (type === "Heartbeat" || type === "heartbeat") {
+                handleHeartbeatMessage(agentStreamMessage);
+            }
             else if (type === "ContextUpdate" || type === "contextUpdate") {
                 // Handle context updates from streaming - data contains additionalData.todoList and ChildAgents
                 const contextData = data;
@@ -2396,10 +3467,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             const current = (prev || {});
                             const updated = { ...current };
                             // Merge additionalData if present (deep merge to preserve existing values)
-                            if (contextData.additionalData || contextData.AdditionalData) {
-                                const sourceAdditionalData = contextData.additionalData ||
-                                    contextData.AdditionalData ||
-                                    {};
+                            if (contextData.additionalData) {
+                                const sourceAdditionalData = contextData.additionalData || {};
                                 updated.additionalData = {
                                     ...(current.additionalData || {}),
                                     ...sourceAdditionalData,
@@ -2407,10 +3476,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             }
                             // Merge ChildAgents if present (for spawned agents) - replace entire array
                             // Backend sends the complete updated list, not just additions
-                            if (contextData.ChildAgents || contextData.childAgents) {
-                                const childAgents = contextData.ChildAgents || contextData.childAgents;
+                            if (contextData.childAgents) {
+                                const childAgents = contextData.childAgents;
                                 if (Array.isArray(childAgents)) {
-                                    updated.ChildAgents = childAgents;
+                                    updated.childAgents = childAgents;
                                 }
                             }
                             return updated;
@@ -2436,15 +3505,18 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             // Route based on statusData.state
             try {
                 // Normalize various status shapes and handle Cancelled uniformly
-                const normalizedStatus = statusData?.state ||
-                    statusData?.Status ||
-                    statusData?.status;
-                if (normalizedStatus === "Cancelled" ||
-                    normalizedStatus === "canceled") {
+                const normalizedStatus = parseAgentStatus(statusData?.state) ||
+                    parseAgentStatus(statusData?.status);
+                if (normalizedStatus === "idle") {
                     // Stop indicators and mark any in-progress streaming messages as completed
+                    clearHeartbeatMessages();
+                    setAgent((prev) => (prev ? { ...prev, status: "idle" } : prev));
                     setIsWaitingForResponse(false);
                     isWaitingRef.current = false;
                     setIsConnecting(false);
+                    setIsSubmitting(false);
+                    shouldCreateNewMessage.current = false;
+                    setIsAgentThinking(false);
                     setMessages((prev) => {
                         const updated = prev.map((msg) => !msg.isCompleted && msg.messageType === "streaming"
                             ? {
@@ -2487,6 +3559,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             outputCost: Number(totals.totalOutputTokenCost) || 0,
                             cachedCost: Number(totals.totalCachedInputTokenCost) || 0,
                             cacheWriteCost: Number(totals.totalCacheWriteTokenCost) || 0,
+                            imageCost: Number(totals.totalImageCost) || 0,
                             totalCost: totalCost,
                             currency: totals.currency,
                         };
@@ -2498,6 +3571,26 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                         if (anyNonZero) {
                             setLiveTotals(nextTotals);
                         }
+                        // Fallback context usage update for providers that do not include
+                        // context usage in every stream delta (for example some OpenAI streams).
+                        // Prefer explicit status values when present; otherwise derive from totals.
+                        const contextWindowValue = Number(statusData?.contextWindow ??
+                            agent?.contextWindowTokens ??
+                            0);
+                        const contextUsedValue = Number(statusData?.contextUsed ??
+                            (Number(totals.totalInputTokens) || 0) +
+                                (Number(totals.totalCachedInputTokens) || 0) +
+                                (Number(totals.totalCacheWriteTokens) || 0));
+                        if (contextWindowValue > 0 &&
+                            Number.isFinite(contextUsedValue) &&
+                            contextUsedValue >= 0) {
+                            setContextWindowStatus({
+                                contextWindowTokens: contextWindowValue,
+                                estimatedInputTokens: contextUsedValue,
+                                contextUsedPercent: (contextUsedValue / contextWindowValue) * 100,
+                                model: agent?.model || "",
+                            });
+                        }
                         // If server provides costLimit along with totals, persist it locally
                         if (statusCostLimit) {
                             setAgent((prev) => prev &&
@@ -2519,6 +3612,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     return;
                 }
                 if (statusData?.state === "ToolApprovalsRequired") {
+                    setPendingBrowserCaptureDialogType(null);
                     const msgId = statusData.messageId;
                     const ids = statusData.toolCallIds || [];
                     if (msgId && Array.isArray(ids) && ids.length > 0) {
@@ -2550,16 +3644,40 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     setIsWaitingForResponse(false);
                     return;
                 }
-                // Handle "WaitingForApproval" state explicitly
-                if (statusData?.state === "WaitingForApproval" ||
-                    statusData?.state === "waitingForApproval") {
+                // Handle waiting states explicitly
+                if (normalizedStatus === "waitingForApproval") {
+                    setPendingBrowserCaptureDialogType(null);
                     setAgent((prev) => prev ? { ...prev, status: "waitingForApproval" } : prev);
                     setIsConnecting(false);
                     setIsWaitingForResponse(false);
                     setIsAgentThinking(false);
                     return;
                 }
-                if (statusData?.state === "CostLimitReached") {
+                if (normalizedStatus === "waitingForInput") {
+                    const dialogType = typeof statusData?.dialogType === "string"
+                        ? statusData.dialogType
+                        : null;
+                    const isBrowserCaptureWait = dialogType === DIALOG_TYPES.CAPTURE_PAGE_DOM ||
+                        dialogType === DIALOG_TYPES.CAPTURE_PAGE_SCREENSHOT;
+                    setPendingBrowserCaptureDialogType(isBrowserCaptureWait ? dialogType : null);
+                    setAgent((prev) => prev
+                        ? {
+                            ...prev,
+                            status: "waitingForInput",
+                            statusMessage: isBrowserCaptureWait &&
+                                typeof statusData?.title === "string" &&
+                                statusData.title.trim()
+                                ? statusData.title.trim()
+                                : prev.statusMessage,
+                        }
+                        : prev);
+                    setIsConnecting(false);
+                    setIsWaitingForResponse(false);
+                    setIsAgentThinking(false);
+                    return;
+                }
+                if (normalizedStatus === "costLimitReached") {
+                    setPendingBrowserCaptureDialogType(null);
                     const totalCost = Number(statusData.totalCost) || 0;
                     const costLimit = Number(statusData.costLimit) || agent?.costLimit || 0;
                     setCostLimitExceeded({
@@ -2577,7 +3695,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     // Server sends additionalData directly (with todoList inside)
                     // Also may include ChildAgents for spawned agents
                     try {
-                        const serverAdditionalData = statusData.additionalData || statusData.AdditionalData || {};
+                        const serverAdditionalData = statusData.additionalData || {};
                         setAgentMetadata((prev) => {
                             const current = (prev || {});
                             const updated = { ...current };
@@ -2591,10 +3709,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             }
                             // Merge ChildAgents if present (for spawned agents) - replace entire array
                             // Backend sends the complete updated list, not just additions
-                            if (statusData.ChildAgents || statusData.childAgents) {
-                                const childAgents = statusData.ChildAgents || statusData.childAgents;
+                            if (statusData.childAgents) {
+                                const childAgents = statusData.childAgents;
                                 if (Array.isArray(childAgents)) {
-                                    updated.ChildAgents = childAgents;
+                                    updated.childAgents = childAgents;
                                 }
                             }
                             return updated;
@@ -2606,10 +3724,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     return;
                 }
                 // Handle "completed" state (fallback for legacy code paths that send status instead of lifecycle event)
-                if (normalizedStatus === "completed" ||
-                    normalizedStatus === "Completed") {
+                if (normalizedStatus === "completed") {
                     // Reset deduplication for the next run
                     lastSeqRef.current = 0;
+                    clearHeartbeatMessages();
                     // Mark the last assistant message as completed
                     setMessages((prev) => {
                         const updated = prev.map((msg) => msg.role === "assistant" && !msg.isCompleted
@@ -2632,30 +3750,21 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     setIsAgentThinking(false);
                     return;
                 }
-                // Handle "Idle" state - agent has finished processing
-                if (normalizedStatus === "idle" || normalizedStatus === "Idle") {
-                    // Update agent status to idle
-                    setAgent((prev) => (prev ? { ...prev, status: "idle" } : prev));
-                    setIsWaitingForResponse(false);
-                    isWaitingRef.current = false;
-                    setIsConnecting(false);
-                    shouldCreateNewMessage.current = false;
-                    setIsAgentThinking(false);
-                    return;
-                }
                 // Handle "Running" state - agent is actively processing
-                if (normalizedStatus === "running" ||
-                    normalizedStatus === "Running") {
-                    // Update agent status to running
-                    setAgent((prev) => (prev ? { ...prev, status: "running" } : prev));
+                if (normalizedStatus === "running") {
+                    // Update agent status to running and clear any previous error statusMessage
+                    setAgent((prev) => prev
+                        ? { ...prev, status: "running", statusMessage: undefined }
+                        : prev);
                     setIsWaitingForResponse(true);
                     isWaitingRef.current = true;
                     setIsAgentThinking(true);
                     return;
                 }
                 // Handle "Error" state
-                if (normalizedStatus === "error" || normalizedStatus === "Error") {
-                    const errorMsg = statusData?.statusMessage || statusData?.error || "Unknown error";
+                if (normalizedStatus === "error") {
+                    const errorMsg = toUserFacingAgentErrorMessage(statusData?.statusMessage ?? statusData?.error) || "Unknown error";
+                    clearHeartbeatMessages();
                     setAgent((prev) => prev
                         ? { ...prev, status: "error", statusMessage: errorMsg }
                         : prev);
@@ -2675,6 +3784,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         if (messageType === "agent:run:complete") {
             // Reset deduplication for the next run
             lastSeqRef.current = 0;
+            clearHeartbeatMessages();
             // Mark the last assistant message as completed
             setMessages((prev) => {
                 const updated = prev.map((msg) => msg.role === "assistant" && !msg.isCompleted
@@ -2699,7 +3809,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         // Lifecycle: agent:run:error
         if (messageType === "agent:run:error") {
-            const errorMsg = message.payload?.error || "Unknown error";
+            const errorMsg = toUserFacingAgentErrorMessage(message.payload?.error) ||
+                "AI could not complete this request.";
+            clearHeartbeatMessages();
             // Reset deduplication for the next run after an error
             lastSeqRef.current = 0;
             setError(errorMsg);
@@ -2714,7 +3826,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
     }, [
         agent,
+        clearHeartbeatMessages,
         handleContentChunk,
+        handleHeartbeatMessage,
         handleToolCall,
         handleToolResult,
         onAgentUpdate,
@@ -2769,6 +3883,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             const isRunning = currentAgent.status === "running" || currentAgent.status === 1;
             const isWaitingForApproval = currentAgent.status === "waitingForApproval" ||
                 currentAgent.status === 2;
+            const isWaitingForInput = currentAgent.status === "waitingForInput";
             if (isRunning) {
                 setIsWaitingForResponse(true);
                 isWaitingRef.current = true;
@@ -2776,10 +3891,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 // Agent is currently running, show thinking dots
                 setIsAgentThinking(true);
             }
-            else if (isWaitingForApproval) {
+            else if (isWaitingForApproval || isWaitingForInput) {
                 setIsWaitingForResponse(false);
                 isWaitingRef.current = false;
-                // Agent is waiting for user approval, hide thinking dots
+                // Agent is waiting for user input/approval, hide thinking dots
                 setIsAgentThinking(false);
             }
             else {
@@ -2826,36 +3941,157 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         window.addEventListener("editor:focusAgentPrompt", focusHandler);
         return () => window.removeEventListener("editor:focusAgentPrompt", focusHandler);
     }, []);
+    // Keep stable refs so we don't miss window events during effect re-runs.
+    const agentIdRefForDialogs = useRef(null);
+    const agentStubIdRefForDialogs = useRef(agentStub.id);
+    const isActiveRefForDialogs = useRef(isActive);
+    const scrollToBottomRefForDialogs = useRef(scrollToBottom);
+    useEffect(() => {
+        agentIdRefForDialogs.current = agent?.id ?? null;
+    }, [agent?.id]);
+    useEffect(() => {
+        const prevId = agentStubIdRefForDialogs.current;
+        agentStubIdRefForDialogs.current = agentStub.id;
+        const visibleRegistry = { ...getVisibleDialogRegistry() };
+        const normalizedPrevId = normalizeDialogAgentId(prevId);
+        if (normalizedPrevId) {
+            delete visibleRegistry[normalizedPrevId];
+            globalThis.__agentDialogVisibleCallbacks = visibleRegistry;
+        }
+        if (prevId && prevId !== agentStub.id) {
+            const orphanedDialog = activeInlineDialogRef.current;
+            if (orphanedDialog) {
+                setActiveInlineDialog(null);
+                window.dispatchEvent(new CustomEvent("agent:dialog:orphaned", {
+                    detail: { callbackId: orphanedDialog.request.callbackId },
+                }));
+            }
+        }
+    }, [agentStub.id]);
+    useEffect(() => {
+        isActiveRefForDialogs.current = isActive;
+    }, [isActive]);
+    useEffect(() => {
+        scrollToBottomRefForDialogs.current = scrollToBottom;
+    }, [scrollToBottom]);
     // Listen for agent inline dialog requests from AgentDialogHandler
     useEffect(() => {
+        if (orphanTimeoutRef.current) {
+            clearTimeout(orphanTimeoutRef.current);
+            orphanTimeoutRef.current = null;
+        }
+        const globalListeners = (globalThis.__agentDialogMountedAgents ?? []).filter((x) => typeof x === "string");
+        const normalizedAgentStubId = normalizeDialogAgentId(agentStubIdRefForDialogs.current);
+        if (normalizedAgentStubId &&
+            !globalListeners.includes(normalizedAgentStubId)) {
+            globalListeners.push(normalizedAgentStubId);
+        }
+        globalThis.__agentDialogMountedAgents = globalListeners;
         const handleDialogShow = (event) => {
-            const { request, onComplete, onCancel } = event.detail;
-            // Only handle dialog requests for this agent
-            if (request.agentId && agent?.id && request.agentId !== agent.id) {
+            const detail = event?.detail;
+            const request = detail?.request;
+            const onComplete = detail?.onComplete;
+            const onCancel = detail?.onCancel;
+            const terminalAgentId = normalizeDialogAgentId(agentIdRefForDialogs.current);
+            const terminalAgentStubId = normalizeDialogAgentId(agentStubIdRefForDialogs.current);
+            const isActiveNow = isActiveRefForDialogs.current;
+            if (!request)
+                return;
+            const requestAgentId = normalizeDialogAgentId(request.agentId);
+            const agentMatch = !requestAgentId ||
+                !terminalAgentStubId ||
+                requestAgentId === terminalAgentStubId ||
+                requestAgentId === terminalAgentId;
+            if (!isActiveNow) {
+                return;
+            }
+            if (!request)
+                return;
+            // Only handle dialog requests for this terminal's agent stub
+            if (requestAgentId &&
+                terminalAgentStubId &&
+                requestAgentId !== terminalAgentStubId &&
+                requestAgentId !== terminalAgentId) {
                 return;
             }
             console.log("[AgentTerminal] Received inline dialog request:", request);
-            setActiveInlineDialog({ request, onComplete, onCancel });
+            setActiveInlineDialog({
+                request,
+                onComplete: (result) => {
+                    onComplete(result);
+                    onInteractionSubmitted?.();
+                },
+                onCancel: () => {
+                    onCancel();
+                    onInteractionSubmitted?.();
+                },
+            });
             // Notify AgentDialogHandler that we accepted the dialog (stops retry mechanism)
-            window.dispatchEvent(new CustomEvent("agent:dialog:accepted", {
-                detail: { callbackId: request.callbackId },
-            }));
-            // Scroll to bottom to show the dialog
-            setTimeout(scrollToBottom, 100);
+            if (request.callbackId) {
+                window.dispatchEvent(new CustomEvent("agent:dialog:accepted", {
+                    detail: { callbackId: request.callbackId },
+                }));
+            }
+            setTimeout(() => {
+                if (request.dialogType === "questionnaire") {
+                    scrollToBottomRefForDialogs.current?.();
+                    return;
+                }
+                scrollToBottomRefForDialogs.current?.();
+            }, 100);
         };
         window.addEventListener("agent:dialog:show", handleDialogShow);
-        return () => window.removeEventListener("agent:dialog:show", handleDialogShow);
-    }, [agent?.id, scrollToBottom]);
-    // Announce when this terminal is ready to accept dialogs
-    // This allows AgentDialogHandler to re-dispatch pending dialogs when switching to an agent
+        return () => {
+            const mounted = (globalThis.__agentDialogMountedAgents ?? []).filter((x) => typeof x === "string");
+            globalThis.__agentDialogMountedAgents = mounted.filter((id) => id !== normalizeDialogAgentId(agentStubIdRefForDialogs.current));
+            const visibleRegistry = { ...getVisibleDialogRegistry() };
+            const idsToClear = [
+                normalizeDialogAgentId(agentStubIdRefForDialogs.current),
+                normalizeDialogAgentId(agentIdRefForDialogs.current),
+            ].filter(Boolean);
+            idsToClear.forEach((id) => delete visibleRegistry[id]);
+            globalThis.__agentDialogVisibleCallbacks = visibleRegistry;
+            // If unmounting with an active dialog, defer the orphan event so that
+            // React strict mode remounts can cancel it. Only real unmounts fire.
+            const orphanedDialog = activeInlineDialogRef.current;
+            if (orphanedDialog) {
+                orphanTimeoutRef.current = setTimeout(() => {
+                    orphanTimeoutRef.current = null;
+                    window.dispatchEvent(new CustomEvent("agent:dialog:orphaned", {
+                        detail: { callbackId: orphanedDialog.request.callbackId },
+                    }));
+                }, 300);
+            }
+            window.removeEventListener("agent:dialog:show", handleDialogShow);
+        };
+    }, []);
+    // Announce when this terminal is ready to accept dialogs.
+    // Fire immediately on mount using agentStub.id so the AgentDialogHandler
+    // can re-dispatch pending dialogs without waiting for the async agent load.
+    // Also fire when agent?.id becomes available in case it differs from the stub.
     useEffect(() => {
-        if (agent?.id) {
-            console.log("[AgentTerminal] Terminal ready for agent:", agent.id);
+        const normalizedStubId = normalizeDialogAgentId(agentStub.id);
+        if (normalizedStubId) {
             window.dispatchEvent(new CustomEvent("agent:terminal:ready", {
-                detail: { agentId: agent.id },
+                detail: {
+                    agentId: normalizedStubId,
+                    terminalInstanceId: dialogTerminalInstanceIdRef.current,
+                },
             }));
         }
-    }, [agent?.id]);
+    }, [agentStub.id]);
+    useEffect(() => {
+        const normalizedAgentId = normalizeDialogAgentId(agent?.id);
+        const normalizedStubId = normalizeDialogAgentId(agentStub.id);
+        if (normalizedAgentId && normalizedAgentId !== normalizedStubId) {
+            window.dispatchEvent(new CustomEvent("agent:terminal:ready", {
+                detail: {
+                    agentId: normalizedAgentId,
+                    terminalInstanceId: dialogTerminalInstanceIdRef.current,
+                },
+            }));
+        }
+    }, [agent?.id, agentStub.id]);
     // Profiles are provided by parent component (Agents). No local loading here.
     // Select active profile based on agent.profileId or agentStub.profileId
     useEffect(() => {
@@ -2866,20 +4102,47 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         // Use case-insensitive comparison for GUID matching (backend may return different casing)
         const normalizedProfileId = profileIdToUse?.toLowerCase();
         const candidate = normalizedProfileId
-            ? (profiles.find((p) => p.id?.toLowerCase() === normalizedProfileId) ??
-                profiles[0])
-            : profiles[0];
-        if (candidate && (!activeProfile || activeProfile.id !== candidate.id)) {
-            setActiveProfile(candidate);
+            ? profiles.find((p) => p.id?.toLowerCase() === normalizedProfileId)
+            : undefined;
+        if (!candidate) {
+            setActiveProfile(undefined);
+            return;
         }
-    }, [profiles, agent?.profileId, agentStub.profileId]);
+        // Keep active profile in sync whenever the matching entry in `profiles` changes —
+        // not only when the profile id changes. Otherwise availableSkills (and similar fields)
+        // that are merged in the parent after async loads never update (e.g. Template Builder
+        // settings skills merged into the profile).
+        setActiveProfile((prev) => {
+            if (!prev || prev.id !== candidate.id)
+                return candidate;
+            const skillKey = (p) => JSON.stringify({
+                allowed: (p.allowedSkills ?? []).map((s) => [
+                    String(s?.id ?? ""),
+                    String(s?.name ?? ""),
+                ]),
+                available: (p.availableSkills ?? []).map((s) => [
+                    String(s?.id ?? ""),
+                    String(s?.name ?? ""),
+                ]),
+            });
+            if (skillKey(prev) === skillKey(candidate))
+                return prev;
+            return candidate;
+        });
+    }, [
+        profiles,
+        agent?.id,
+        agent?.profileId,
+        agentStub.id,
+        agentStub.profileId,
+    ]);
     // Clear queued prompts when agent changes or is new;
     // initial fetch is handled by loadAgent() for better performance and reliability
     useEffect(() => {
-        if (!agent?.id || agent.status === "new") {
+        if (!agent?.id || isLocalOnlyDraftAgent) {
             setQueuedPrompts([]);
         }
-    }, [agent?.id, agent?.status]);
+    }, [agent?.id, isLocalOnlyDraftAgent]);
     // Update selected model when the active profile or agent model changes
     useEffect(() => {
         if (!activeProfile)
@@ -2908,20 +4171,16 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     // 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") {
+            const metaMode = normalizeAgentMode(agentMetadata?.mode);
+            if (metaMode) {
                 setMode(metaMode);
                 return;
             }
         }
         catch { }
         try {
-            const serverMode = agent?.mode;
-            if (serverMode === "autonomous" ||
-                serverMode === "read-only" ||
-                serverMode === "supervised") {
+            const serverMode = normalizeAgentMode(agent?.mode);
+            if (serverMode) {
                 setMode(serverMode);
             }
         }
@@ -2941,7 +4200,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             textareaRef.current.focus();
         }
     }, [messages, activePlaceholderInput]);
-    // Persist any pending settings (mode/model) once an agent exists server-side
+    // Persist any pending settings (mode/model/profile) once an agent exists server-side
     const persistPendingSettingsIfNeeded = useCallback(async () => {
         try {
             if (!agent?.id)
@@ -2954,6 +4213,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 payload.model = pending.modelName;
             if (pending.mode)
                 payload.mode = pending.mode;
+            if (pending.profileId)
+                payload.profileId = pending.profileId;
+            if (pending.profileName != null)
+                payload.profileName = pending.profileName;
             if (Object.keys(payload).length === 0)
                 return;
             await updateAgentSettings(agent.id, payload);
@@ -2963,6 +4226,92 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             console.error("Failed to persist pending settings", e);
         }
     }, [agent?.id]);
+    const getPendingRequestSettings = useCallback(() => {
+        const pending = pendingSettingsRef.current;
+        const requestProfile = pending?.profileId
+            ? profiles.find((profile) => profile.id === pending.profileId) ||
+                activeProfile ||
+                profiles[0]
+            : activeProfile || profiles[0];
+        let requestModelId = selectedModelId;
+        if (pending?.modelName) {
+            const requestModel = (requestProfile?.models || []).find((model) => (model.name || "").trim().toLowerCase() ===
+                pending.modelName?.trim().toLowerCase());
+            requestModelId = requestModel?.id || requestModelId;
+        }
+        return {
+            mode: (pending?.mode || mode),
+            profileId: pending?.profileId || requestProfile?.id || "",
+            profileName: pending?.profileName || requestProfile?.name || "",
+            modelId: requestModelId,
+        };
+    }, [activeProfile, mode, profiles, selectedModelId]);
+    const getSubmitErrorMessage = (error) => {
+        const fallback = "Failed to submit prompt. Please try again.";
+        if (!(error instanceof Error))
+            return fallback;
+        const cleaned = toUserFacingAgentErrorMessage(error.message);
+        return cleaned || fallback;
+    };
+    const suppressedQueuedPromptsRef = useRef([]);
+    const pruneSuppressedQueuedPrompts = useCallback(() => {
+        const cutoff = Date.now() - 15_000;
+        suppressedQueuedPromptsRef.current =
+            suppressedQueuedPromptsRef.current.filter((entry) => entry.createdAt >= cutoff);
+    }, []);
+    const registerSuppressedQueuedPrompt = useCallback((agentId, promptText) => {
+        const normalizedAgentId = agentId.trim().toLowerCase();
+        const normalizedPrompt = promptText.trim();
+        if (!normalizedAgentId || !normalizedPrompt) {
+            return null;
+        }
+        pruneSuppressedQueuedPrompts();
+        const token = crypto.randomUUID();
+        suppressedQueuedPromptsRef.current = [
+            ...suppressedQueuedPromptsRef.current,
+            {
+                token,
+                agentId: normalizedAgentId,
+                prompt: normalizedPrompt,
+                createdAt: Date.now(),
+            },
+        ];
+        return token;
+    }, [pruneSuppressedQueuedPrompts]);
+    const clearSuppressedQueuedPrompt = useCallback((token) => {
+        if (!token) {
+            return;
+        }
+        suppressedQueuedPromptsRef.current =
+            suppressedQueuedPromptsRef.current.filter((entry) => entry.token !== token);
+    }, []);
+    const shouldSuppressQueuedPrompt = useCallback((queueEntry) => {
+        const normalizedAgentId = queueEntry?.targetAgentId?.trim().toLowerCase();
+        const normalizedPrompt = queueEntry?.prompt?.trim();
+        if (!normalizedAgentId || !normalizedPrompt) {
+            return false;
+        }
+        pruneSuppressedQueuedPrompts();
+        const matchedEntry = suppressedQueuedPromptsRef.current.find((entry) => entry.agentId === normalizedAgentId &&
+            entry.prompt === normalizedPrompt);
+        if (!matchedEntry) {
+            return false;
+        }
+        suppressedQueuedPromptsRef.current =
+            suppressedQueuedPromptsRef.current.filter((entry) => entry.token !== matchedEntry.token);
+        return true;
+    }, [pruneSuppressedQueuedPrompts]);
+    const cancelActiveInlineDialog = useCallback(() => {
+        const activeDialog = activeInlineDialogRef.current;
+        if (!activeDialog)
+            return;
+        try {
+            activeDialog.onCancel();
+        }
+        finally {
+            setActiveInlineDialog(null);
+        }
+    }, []);
     const handleSubmit = async () => {
         // Guard against double-submit and missing context
         if (isSubmitting) {
@@ -3006,6 +4355,12 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             setError("Agent not ready. Please try again.");
             return;
         }
+        const hadQuestionnaireDialogOpen = activeInlineDialogRef.current?.request.dialogType === "questionnaire";
+        const suppressedQueuedPromptToken = hadQuestionnaireDialogOpen && savedPrompt
+            ? registerSuppressedQueuedPrompt(agentId, savedPrompt)
+            : null;
+        // A new user prompt supersedes any active questionnaire/inline dialog.
+        cancelActiveInlineDialog();
         // Generate a temporary ID for optimistic UI - will be replaced by server ID
         const tempMessageId = `temp-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
         try {
@@ -3092,26 +4447,24 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 console.warn("[AgentTerminal] Failed to compute live context:", e);
             }
             // Add visible test IDs to context (only for Help agent)
-            const currentProfileName = activeProfile?.name || profiles[0]?.name || "";
+            const requestSettings = getPendingRequestSettings();
+            const currentProfileName = requestSettings.profileName;
             effectiveContext = addVisibleTestIdsToContext(effectiveContext, currentProfileName);
             const request = {
                 agentId: agentId,
                 message: savedPrompt,
                 sessionId: editContext.sessionId,
-                profileId: activeProfile?.id || profiles[0]?.id || "",
+                profileId: requestSettings.profileId,
                 profile: currentProfileName,
-                model: selectedModelId,
-                mode: mode,
+                model: requestSettings.modelId,
+                mode: requestSettings.mode,
                 context: canonicalizeAgentMetadata(effectiveContext), // Use fresh live context when in live mode
-                deterministic: deterministicFlags.deterministic,
-                seed: deterministicFlags.seed,
             };
             console.log("[AgentTerminal] Calling startAgent API for agent:", agentId);
             const response = await startAgent(request);
             console.log("[AgentTerminal] startAgent response:", response);
             // Check if prompt was queued (agent was already running)
-            const wasQueued = response.message?.toLowerCase().includes("queued") ||
-                response.status === "Queued";
+            const wasQueued = response.message?.toLowerCase().includes("queued");
             if (wasQueued) {
                 // Prompt was queued - show a brief notification but don't set waiting state
                 // The prompt will be processed when the agent becomes idle
@@ -3121,6 +4474,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 isWaitingRef.current = false;
             }
             else {
+                clearSuppressedQueuedPrompt(suppressedQueuedPromptToken);
                 // Normal submission - set waiting state to show dancing dots immediately
                 setIsWaitingForResponse(true);
                 isWaitingRef.current = true;
@@ -3135,11 +4489,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 ...prev.filter((p) => p !== savedPrompt).slice(0, 9),
             ]);
             setCurrentHistoryIndex(-1);
+            await onInteractionSubmitted?.();
             // WebSocket connection is already active via subscription - no need for SSE
         }
         catch (err) {
             console.error("[AgentTerminal] Failed to submit prompt:", err);
-            setError("Failed to submit prompt. Please try again.");
+            clearSuppressedQueuedPrompt(suppressedQueuedPromptToken);
+            setError(getSubmitErrorMessage(err));
             setIsWaitingForResponse(false);
             isWaitingRef.current = false;
             // Remove the optimistic user message on API error
@@ -3349,29 +4705,29 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 console.warn("[AgentTerminal] Failed to compute live context for quick message:", e);
             }
             // Add visible test IDs to context (only for Help agent)
-            const currentProfileName = activeProfile?.name || profiles[0]?.name || "";
+            const requestSettings = getPendingRequestSettings();
+            const currentProfileName = requestSettings.profileName;
             effectiveContext = addVisibleTestIdsToContext(effectiveContext, currentProfileName);
             const request = {
                 agentId: agent.id,
                 message: savedPrompt,
                 sessionId: editContext.sessionId,
-                profileId: activeProfile?.id || profiles[0]?.id || "",
+                profileId: requestSettings.profileId,
                 profile: currentProfileName,
-                model: selectedModelId,
-                mode: mode,
+                model: requestSettings.modelId,
+                mode: requestSettings.mode,
                 context: canonicalizeAgentMetadata(effectiveContext), // Use fresh live context when in live mode
-                deterministic: deterministicFlags.deterministic,
-                seed: deterministicFlags.seed,
             };
             console.log("[AgentTerminal] Calling startAgent API for quick message");
             await startAgent(request);
             // If user changed mode/model while the agent was new, persist them now
             await persistPendingSettingsIfNeeded();
+            await onInteractionSubmitted?.();
             // WebSocket connection is already active via subscription - no need for SSE
         }
         catch (err) {
             console.error("[AgentTerminal] Failed to submit quick message:", err);
-            setError("Failed to submit prompt. Please try again.");
+            setError(getSubmitErrorMessage(err));
             setIsWaitingForResponse(false);
             isWaitingRef.current = false;
             // Remove the optimistic user message on API error
@@ -3549,66 +4905,90 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         return context;
     }, [collectVisibleTestIds]);
-    // Helper function to build current context from editor state
-    const buildCurrentContext = useCallback(() => {
-        // Return context even without item - we want view info regardless
-        const item = editContext?.currentItemDescriptor;
-        return {
-            items: item
-                ? [
-                    {
-                        id: item.id,
-                        language: item.language,
-                        version: item.version,
-                        name: editContext?.item?.name,
-                        path: editContext?.item?.path,
-                    },
-                ]
-                : undefined,
-            currentItemId: item?.id, // ID of the currently loaded item user is viewing
-            components: editContext?.selection?.length && item
-                ? editContext.selection.map((componentId) => ({
-                    componentId,
-                    pageItem: {
-                        id: item.id,
-                        language: item.language,
-                        version: item.version,
-                        name: editContext?.item?.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?.item?.name,
-                    },
+    const buildPageContextItem = useCallback((item) => ({
+        id: item.id,
+        language: item.language,
+        version: item.version,
+        name: editContext?.item?.name,
+        path: editContext?.item?.path,
+    }), [editContext?.item?.name, editContext?.item?.path]);
+    const buildComponentContext = useCallback((item) => {
+        if (!editContext?.selection?.length)
+            return undefined;
+        return editContext.selection.map((componentId) => {
+            let componentName;
+            let componentType;
+            let renderingItemId;
+            if (editContext.page) {
+                try {
+                    const component = getComponentById(componentId, editContext.page);
+                    componentName =
+                        component?.datasourceItem?.name || component?.name || undefined;
+                    componentType = component?.type || undefined;
+                    renderingItemId = component?.rendering?.id || undefined;
                 }
-                : undefined,
-            // View context - always include so agent knows editor state
-            activeWorkspace: editContext?.workspaceId,
-            hasPageLoaded: !!editContext?.getActiveSlotContext()?.primaryPageViewContext?.page,
-            // Open sidebars - helps agent understand what panels are currently visible
-            openSidebars: editContext?.openSidebars,
+                catch { }
+            }
+            return {
+                componentId,
+                componentName,
+                componentType,
+                renderingItemId,
+                pageItem: buildPageContextItem(item),
+            };
+        });
+    }, [buildPageContextItem, editContext?.page, editContext?.selection]);
+    const buildFieldContext = useCallback(() => {
+        const focusedField = fieldsContext?.focusedField;
+        if (!focusedField?.fieldId || !focusedField?.item?.id)
+            return undefined;
+        const fieldItem = focusedField.item;
+        const currentItem = editContext?.currentItemDescriptor;
+        let fieldItemName = fieldItem.id === currentItem?.id ? editContext?.item?.name : undefined;
+        if (!fieldItemName && editContext?.page) {
+            try {
+                const component = getComponentById(fieldItem.id, editContext.page);
+                fieldItemName =
+                    component?.datasourceItem?.name || component?.name || undefined;
+            }
+            catch { }
+        }
+        return {
+            fieldId: focusedField.fieldId,
+            fieldName: focusedField.fieldName,
+            item: {
+                id: fieldItem.id,
+                language: fieldItem.language || currentItem?.language || "en",
+                version: fieldItem.version ?? currentItem?.version ?? 0,
+                name: fieldItem.name || fieldItemName,
+            },
         };
     }, [
         editContext?.currentItemDescriptor,
-        editContext?.selection,
-        editContext?.workspaceId,
         editContext?.item?.name,
-        editContext?.activeSlotId,
-        editContext?.openSidebars,
+        editContext?.page,
         fieldsContext?.focusedField,
     ]);
+    const buildEditorContextPayload = useCallback((item) => ({
+        items: item ? [buildPageContextItem(item)] : undefined,
+        currentItemId: item?.id,
+        components: item ? buildComponentContext(item) : undefined,
+        field: buildFieldContext(),
+        activeWorkspace: editContext?.workspaceId,
+        hasPageLoaded: !!editContext?.getActiveSlotContext()?.primaryPageViewContext?.page,
+        openSidebars: editContext?.openSidebars,
+    }), [
+        buildComponentContext,
+        buildFieldContext,
+        buildPageContextItem,
+        editContext,
+    ]);
+    // Helper function to build current context from editor state
+    const buildCurrentContext = useCallback(() => {
+        // Return context even without item - we want view info regardless
+        const item = editContext?.currentItemDescriptor;
+        return buildEditorContextPayload(item);
+    }, [buildEditorContextPayload, editContext?.currentItemDescriptor]);
     // Live context updates: watch for changes and update agent context when in "live" mode
     const previousContextRef = useRef("");
     useEffect(() => {
@@ -3708,6 +5088,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const handleRefreshContext = useCallback(async () => {
         if (!agent?.id)
             return;
+        const normalizedAgentProfileId = agent?.profileId?.toLowerCase();
+        const refreshProfile = activeProfile ||
+            profiles.find((p) => p.id?.toLowerCase() === normalizedAgentProfileId);
+        if (refreshProfile?.editorContextMode === "none") {
+            editContext?.showInfoToast({
+                summary: "This profile excludes editor context.",
+            });
+            return;
+        }
         try {
             const currentCtx = buildCurrentContext();
             if (!currentCtx) {
@@ -3748,7 +5137,73 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         buildCurrentContext,
         sanitizeAgentMetadata,
         editContext,
+        activeProfile,
+        profiles,
     ]);
+    const browserCaptureClaim = useMemo(() => getBrowserCaptureClaim(agentMetadata), [agentMetadata]);
+    const isPendingBrowserCaptureWait = pendingBrowserCaptureDialogType === DIALOG_TYPES.CAPTURE_PAGE_DOM ||
+        pendingBrowserCaptureDialogType === DIALOG_TYPES.CAPTURE_PAGE_SCREENSHOT;
+    const currentSessionId = editContext?.sessionId?.trim() || "";
+    const claimedSessionId = browserCaptureClaim?.sessionId?.trim() || "";
+    const isClaimedByCurrentSession = !!currentSessionId &&
+        !!claimedSessionId &&
+        currentSessionId.toLowerCase() === claimedSessionId.toLowerCase();
+    const isClaimedByAnotherBrowser = !!claimedSessionId && !isClaimedByCurrentSession;
+    const handleClaimBrowser = useCallback(async (takeOver) => {
+        if (!agent?.id || !editContext?.sessionId)
+            return;
+        setIsBrowserClaimMutationPending(true);
+        try {
+            const response = await claimAgentBrowser({
+                agentId: agent.id,
+                sessionId: editContext.sessionId,
+                takeOver,
+                terminalInstanceId: dialogTerminalInstanceIdRef.current,
+            });
+            setAgentMetadata((prev) => sanitizeAgentMetadata(setBrowserCaptureClaim(prev, response.claim || null)));
+        }
+        catch (err) {
+            console.error("[AgentTerminal] Failed to claim browser:", err);
+            editContext.showErrorToast(err);
+        }
+        finally {
+            setIsBrowserClaimMutationPending(false);
+        }
+    }, [agent?.id, editContext, sanitizeAgentMetadata]);
+    const handleReleaseBrowser = useCallback(async () => {
+        if (!agent?.id || !editContext?.sessionId)
+            return;
+        setIsBrowserClaimMutationPending(true);
+        try {
+            const response = await releaseAgentBrowser({
+                agentId: agent.id,
+                sessionId: editContext.sessionId,
+                terminalInstanceId: dialogTerminalInstanceIdRef.current,
+            });
+            setAgentMetadata((prev) => sanitizeAgentMetadata(setBrowserCaptureClaim(prev, response.claim || null)));
+        }
+        catch (err) {
+            console.error("[AgentTerminal] Failed to release browser:", err);
+            editContext.showErrorToast(err);
+        }
+        finally {
+            setIsBrowserClaimMutationPending(false);
+        }
+    }, [agent?.id, editContext, sanitizeAgentMetadata]);
+    useEffect(() => {
+        return () => {
+            if (!agent?.id || !editContext?.sessionId || !isClaimedByCurrentSession) {
+                return;
+            }
+            void releaseAgentBrowser({
+                agentId: agent.id,
+                sessionId: editContext.sessionId,
+                terminalInstanceId: dialogTerminalInstanceIdRef.current,
+            }).catch((error) => {
+                console.warn("[AgentTerminal] Failed to release browser on unmount:", error);
+            });
+        };
+    }, [agent?.id, editContext?.sessionId, isClaimedByCurrentSession]);
     // Stop current execution/stream safely
     const handleStop = useCallback(async () => {
         try {
@@ -3812,13 +5267,81 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     if (effectiveCostLimit === undefined) {
         effectiveCostLimit = undefined;
     }
-    // Calculate total token usage for cost display
-    const totalTokens = calculateTotalTokens(messages);
+    // Calculate total token usage for cost display.
+    // Message rows do not currently persist imageCost, so on refresh we fall back
+    // to the persisted agent aggregate for that single field.
+    const totalTokens = (() => {
+        const totals = calculateTotalTokens(messages);
+        return {
+            ...totals,
+            imageCost: totals.imageCost || Number(agent?.totalImageCost) || 0,
+        };
+    })();
     // Determine if the agent is actively executing (submitting, connecting, waiting, or streaming)
     const isExecuting = isSubmitting ||
         isConnecting ||
         isWaitingForResponse ||
         hasActiveStreaming();
+    const assistantMessageCount = useMemo(() => messages.filter((message) => message.role === "assistant").length, [messages]);
+    const messagesWithToolCallsCount = useMemo(() => messages.filter((message) => (message.toolCalls || []).length > 0).length, [messages]);
+    const totalToolCallCount = useMemo(() => messages.reduce((sum, message) => sum + (message.toolCalls?.length || 0), 0), [messages]);
+    const incompleteToolCallCount = useMemo(() => messages.reduce((sum, message) => sum +
+        (message.toolCalls?.filter((toolCall) => !toolCall.isCompleted).length || 0), 0), [messages]);
+    const assistantGroupsWithRenderableToolCalls = useMemo(() => {
+        const groups = groupConsecutiveMessages(messages);
+        return groups.filter((group) => {
+            if (group.type !== "assistant-group")
+                return false;
+            const convertedMessages = convertAgentMessagesToAiFormat(group.messages);
+            return convertedMessages.some((message) => (message.tool_calls?.length || 0) > 0);
+        }).length;
+    }, [messages]);
+    const assistantGroupCount = useMemo(() => groupConsecutiveMessages(messages).filter((group) => group.type === "assistant-group").length, [messages]);
+    const runDiagnosticsSnapshot = useMemo(() => {
+        const lastEvent = recentAgentRunEvents[recentAgentRunEvents.length - 1];
+        return {
+            agentId: currentAgentId,
+            isSubmitting,
+            isConnecting,
+            isWaitingForResponse,
+            isAgentThinking,
+            isExecuting,
+            hasActiveStreaming: hasActiveStreaming(),
+            isSubscribed: normalizeDialogAgentId(subscribedAgentIdRef.current) ===
+                normalizeDialogAgentId(currentAgentId),
+            lastSeq: lastSeqRef.current,
+            lastEventType: lastEvent?.type ?? null,
+            lastEventAt: lastEvent?.timestamp ?? null,
+            recentEvents: recentAgentRunEvents,
+            assistantMessageCount,
+            assistantGroupCount,
+            assistantGroupsWithRenderableToolCalls,
+            messagesWithToolCalls: messagesWithToolCallsCount,
+            totalToolCallCount,
+            incompleteToolCallCount,
+            recentToolUiEvents,
+        };
+    }, [
+        assistantGroupCount,
+        assistantGroupsWithRenderableToolCalls,
+        assistantMessageCount,
+        currentAgentId,
+        hasActiveStreaming,
+        incompleteToolCallCount,
+        isAgentThinking,
+        isConnecting,
+        isExecuting,
+        isSubmitting,
+        isWaitingForResponse,
+        messagesWithToolCallsCount,
+        recentAgentRunEvents,
+        recentToolUiEvents,
+        totalToolCallCount,
+    ]);
+    const showInitialThinkingSplash = messages.length === 0 &&
+        !error &&
+        hideGreeting &&
+        (isSubmitting || isConnecting);
     // Compute dots visibility: only show BEFORE any assistant message exists
     // This prevents duplicate headers - the dots indicator has its own header,
     // and we don't want to show a second header below existing messages
@@ -3833,13 +5356,20 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         // The message with the pending approval will display its own UI for approval
         if (allPendingApprovals.length > 0)
             return false;
+        // The hidden-greeting startup splash already renders its own bouncing dots.
+        // Suppress the generic indicator so reopening/running terminals don't show two.
+        if (showInitialThinkingSplash)
+            return false;
         // IMPORTANT: If the last message is an assistant message and we're still executing,
         // the AiResponseMessage for that message will show its own activity indicator.
         // We only want these global thinking dots if the last message was from the user
         // or if no messages exist yet (waiting for initial response).
         const lastMessage = messages.length > 0 ? messages[messages.length - 1] : null;
-        if (isExecuting && lastMessage?.role === "assistant")
+        if (isExecuting &&
+            lastMessage?.role === "assistant" &&
+            !lastMessage.isCompleted) {
             return false;
+        }
         // Existing check for uncompleted assistant messages
         const hasActiveStreamingMessage = messages.some((m) => !m.isCompleted && m.role === "assistant");
         if (hasActiveStreamingMessage)
@@ -3855,20 +5385,22 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         messages,
         activeInlineDialog,
         allPendingApprovals,
+        showInitialThinkingSplash,
     ]);
     // Move useMemo hook before early return to comply with Rules of Hooks
-    const isLiveEditorContextMode = React.useMemo(() => {
+    const resolvedEditorContextMode = React.useMemo(() => {
         try {
             const normalizedAgentProfileId = agent?.profileId?.toLowerCase();
             const profile = activeProfile ||
                 profiles.find((p) => p.id?.toLowerCase() === normalizedAgentProfileId);
-            const mode = profile?.editorContextMode;
-            return mode === "live";
+            return profile?.editorContextMode ?? null;
         }
         catch {
-            return false;
+            return null;
         }
     }, [activeProfile, profiles, agent?.profileId]);
+    const isLiveEditorContextMode = resolvedEditorContextMode === "live";
+    const omitsEditorContext = resolvedEditorContextMode === "none";
     // Get parent agent ID from agent or agentStub (handle both camelCase and PascalCase)
     const parentAgentId = agent?.parentAgentId ||
         agent?.ParentAgentId ||
@@ -3882,10 +5414,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             detail: { agentId: parentAgentId },
         }));
     }, [parentAgentId]);
-    if (isLoading) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), "Loading agent..."] }) }));
-    }
-    const renderContextInfoBar = () => (_jsx(ContextInfoBar, { agent: agent, agentMetadata: agentMetadata, setAgentMetadata: setAgentMetadata, setAgent: setAgent, resolvedPageName: resolvedPageName, resolvedComponentName: resolvedComponentName, resolvedFieldName: resolvedFieldName, isLiveEditorContextMode: isLiveEditorContextMode, activeProfile: activeProfile, onRefreshContext: handleRefreshContext }));
+    const loadingContent = isLoading && !activeInlineDialog ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), "Loading agent..."] }) })) : null;
+    const renderContextInfoBar = () => (_jsx(ContextInfoBar, { agent: agent, agentMetadata: agentMetadata, setAgentMetadata: setAgentMetadata, setAgent: setAgent, resolvedPageName: resolvedPageName, resolvedComponentName: resolvedComponentName, resolvedFieldName: resolvedFieldName, isLiveEditorContextMode: isLiveEditorContextMode, omitEditorContext: omitsEditorContext, onRefreshContext: handleRefreshContext }));
     const renderCostLimitBanner = () => {
         if (!costLimitExceeded)
             return null;
@@ -3896,9 +5426,20 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             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
+                                // Update the agent's cost limit and clear the costLimitReached
+                                // status in local state so the useEffect watcher doesn't
+                                // immediately re-show the banner before the backend status
+                                // update arrives.
                                 if (result.success && result.costLimit !== undefined) {
-                                    setAgent((prev) => prev ? { ...prev, costLimit: result.costLimit } : prev);
+                                    setAgent((prev) => prev
+                                        ? {
+                                            ...prev,
+                                            costLimit: result.costLimit,
+                                            status: prev.status === "costLimitReached"
+                                                ? "running"
+                                                : prev.status,
+                                        }
+                                        : prev);
                                 }
                                 // Clear the banner and set waiting state
                                 // Agent will resume automatically via backend's ResumeAgentAsync
@@ -3918,13 +5459,257 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     };
     const renderErrorBanner = () => {
         const currentAgent = agent || agentStub;
-        const isErrorStatus = currentAgent?.status === "error" || currentAgent?.status === 4;
-        const errorMessage = currentAgent?.statusMessage;
-        if (!isErrorStatus || !errorMessage)
+        const isErrorStatus = currentAgent?.status === "error";
+        const isWaitingForInputStatus = currentAgent?.status === "waitingForInput";
+        const isWaitingForApprovalStatus = currentAgent?.status === "waitingForApproval";
+        // Show error banner for error status, or for any terminal status that still
+        // carries a statusMessage (e.g. agent closed after an error).
+        const isTerminalWithError = !isErrorStatus &&
+            !!currentAgent?.statusMessage &&
+            currentAgent?.status !== "running" &&
+            currentAgent?.status !== "new" &&
+            !isWaitingForInputStatus &&
+            !isWaitingForApprovalStatus;
+        const rawErrorMessage = (isErrorStatus || isTerminalWithError
+            ? currentAgent?.statusMessage
+            : null) || error;
+        if (!rawErrorMessage)
             return null;
-        return (_jsx("div", { className: "m-3 rounded border border-red-300 bg-red-50 p-3 text-[11px] text-red-900", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "mt-0.5 h-4 w-4 shrink-0 text-red-500", strokeWidth: 1 }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "mb-1 font-semibold", children: "Agent Error" }), _jsx("div", { className: "text-red-800", children: errorMessage })] })] }) }));
+        // Clean the error message (statusMessage from DB may contain raw JSON)
+        const errorMessage = toUserFacingAgentErrorMessage(rawErrorMessage) || rawErrorMessage;
+        return (_jsx("div", { className: "m-3 rounded border border-red-300 bg-red-50 p-3 text-[11px] text-red-900", "data-testid": "agent-error-banner", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "mt-0.5 h-4 w-4 shrink-0 text-red-500", strokeWidth: 1 }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "mb-1 font-semibold", children: "Agent Error" }), _jsx("div", { className: "text-red-800", children: errorMessage })] })] }) }));
     };
-    return (_jsxs("div", { className: `flex h-full flex-col ${className || ""}`, children: [parentAgentId && !simpleMode && (_jsx("div", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2", children: _jsxs("button", { onClick: handleBackToParent, className: "flex items-center gap-2 text-[11px] text-gray-600 transition-colors hover:text-gray-900", title: "Back to parent agent", children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { children: "Back to parent agent" })] }) })), _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-[11px] font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-[11px] text-red-700", children: error })] })] }) })), messages.length === 0 && !error && !hideGreeting && (_jsx("div", { className: "flex h-full items-center justify-center", children: !activeProfile ? (_jsx(Loader2, { className: "mx-auto h-8 w-8 animate-spin text-gray-400" })) : (_jsx(AgentGreeting, { profile: activeProfile, onPromptClick: (p) => {
+    const renderBrowserClaimBanner = (variant = "inline") => {
+        if (!agent?.id || !editContext?.sessionId)
+            return null;
+        if (!isClaimedByCurrentSession && !isClaimedByAnotherBrowser) {
+            return null;
+        }
+        if (isPendingBrowserCaptureWait) {
+            return null;
+        }
+        const label = isClaimedByCurrentSession
+            ? "Attached to this browser"
+            : isClaimedByAnotherBrowser
+                ? "Attached in another browser"
+                : "No browser attached";
+        const description = isClaimedByCurrentSession
+            ? "This browser will handle page screenshot and DOM capture requests for the agent."
+            : isClaimedByAnotherBrowser
+                ? "Capture requests will stay with the other browser until you take over control here."
+                : "A page capture request is waiting for a browser attachment. Attach this browser to continue.";
+        const bannerClassName = cn("rounded border border-blue-200 bg-blue-50 p-3 text-[11px] text-blue-900", variant === "fixed" ? "mx-3 mt-3 mb-2 shrink-0" : "m-3", isClaimedByCurrentSession && "border-blue-300");
+        return (_jsx("div", { className: bannerClassName, children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-semibold", children: label }), _jsx("div", { className: "mt-1 text-blue-800", children: description })] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: isClaimedByCurrentSession ? (_jsx("button", { type: "button", className: "rounded border border-blue-300 bg-white px-2 py-1 text-[11px] font-medium text-blue-900 disabled:cursor-not-allowed disabled:opacity-60", disabled: isBrowserClaimMutationPending, onClick: () => {
+                                void handleReleaseBrowser();
+                            }, children: "Release" })) : (_jsx("button", { type: "button", className: "rounded border border-blue-300 bg-white px-2 py-1 text-[11px] font-medium text-blue-900 disabled:cursor-not-allowed disabled:opacity-60", disabled: isBrowserClaimMutationPending, onClick: () => {
+                                void handleClaimBrowser(isClaimedByAnotherBrowser);
+                            }, children: isClaimedByAnotherBrowser
+                                ? "Take over browser control"
+                                : "Attach to this browser" })) })] }) }));
+    };
+    const fixedBrowserClaimBanner = renderBrowserClaimBanner("fixed");
+    const inlineBrowserClaimBanner = null;
+    const browserCaptureInlinePrompt = isPendingBrowserCaptureWait && !isClaimedByCurrentSession
+        ? {
+            toolNames: [
+                "capture-page-screenshot",
+                "capture-parhelia-ui-screenshot",
+                "capture-page-dom",
+            ],
+            label: isClaimedByAnotherBrowser
+                ? "Attached in another browser"
+                : "No browser attached",
+            description: isClaimedByAnotherBrowser
+                ? "This capture request is waiting in another browser. Take over browser control here to continue."
+                : "This capture request is waiting for a browser attachment. Attach this browser to continue.",
+            actionLabel: isClaimedByAnotherBrowser
+                ? "Take over browser control"
+                : "Attach to this browser",
+            isPending: isBrowserClaimMutationPending,
+            onAction: () => {
+                void handleClaimBrowser(isClaimedByAnotherBrowser);
+            },
+        }
+        : null;
+    useEffect(() => {
+        if (agent?.status !== "waitingForInput") {
+            setPendingBrowserCaptureDialogType(null);
+        }
+    }, [agent?.status]);
+    const renderInlineDialogContent = () => {
+        if (!activeInlineDialog)
+            return null;
+        if (activeInlineDialog.request.dialogType === "questionnaire") {
+            return (_jsx("div", { ref: inlineDialogContainerRef, className: cn("agent-inline-dialog min-h-0 overflow-hidden", displayMode === "full" && "h-full"), children: _jsx(QuestionnaireInline, { requestId: activeInlineDialog.request.callbackId, agentId: activeInlineDialog.request.agentId, title: activeInlineDialog.request.title, description: activeInlineDialog.request.description, parameters: activeInlineDialog.request.parameters, footerActions: questionnaireFooterActions, onClose: (result) => {
+                        activeInlineDialog.onComplete(result);
+                        setActiveInlineDialog(null);
+                        void onInteractionSubmitted?.();
+                    }, onCancel: () => {
+                        activeInlineDialog.onCancel();
+                        setActiveInlineDialog(null);
+                    } }) }));
+        }
+        const dialogRegistration = editContext?.configuration?.editor?.agentDialogs?.find((d) => d.dialogType === activeInlineDialog.request.dialogType);
+        if (dialogRegistration) {
+            const DialogComponent = dialogRegistration.component;
+            return (_jsx("div", { className: "agent-inline-dialog", children: _jsx(DialogComponent, { title: activeInlineDialog.request.title, description: activeInlineDialog.request.description, parameters: activeInlineDialog.request.parameters, onClose: (result) => {
+                        activeInlineDialog.onComplete(result);
+                        setActiveInlineDialog(null);
+                        if (activeInlineDialog.request.dialogType === "questionnaire") {
+                            void onInteractionSubmitted?.();
+                        }
+                    }, onCancel: () => {
+                        activeInlineDialog.onCancel();
+                        setActiveInlineDialog(null);
+                    } }) }));
+        }
+        return (_jsx("div", { className: "agent-inline-dialog", children: _jsxs("div", { className: "p-4 text-sm text-red-500", children: ["Unknown dialog type: ", activeInlineDialog.request.dialogType] }) }));
+    };
+    const latestSummaryAssistantGroup = useMemo(() => {
+        if (hideSummaryMessages)
+            return null;
+        const groups = groupConsecutiveMessages(messages);
+        for (let groupIndex = groups.length - 1; groupIndex >= 0; groupIndex -= 1) {
+            const group = groups[groupIndex];
+            if (!group || group.type !== "assistant-group")
+                continue;
+            const filteredMessages = group.messages.filter((msg) => {
+                const content = msg.content || "";
+                return !content.startsWith("⚠️") || !content.includes("Cost limit");
+            });
+            if (filteredMessages.length === 0)
+                continue;
+            return {
+                messages: filteredMessages,
+                isLastGroup: groupIndex === groups.length - 1,
+            };
+        }
+        return null;
+    }, [messages, hideSummaryMessages]);
+    const summaryModeContent = displayMode === "summary"
+        ? (() => {
+            const inlineDialog = renderInlineDialogContent();
+            const summaryMessages = latestSummaryAssistantGroup
+                ? convertAgentMessagesToAiFormat(latestSummaryAssistantGroup.messages)
+                : [];
+            const summaryOperations = latestSummaryAssistantGroup
+                ? getOperationsForMessageGroup(summaryMessages, agentOperations)
+                : [];
+            return (_jsxs("div", { className: `flex h-full min-h-0 flex-col ${className || ""}`, children: [fixedBrowserClaimBanner, _jsxs("div", { ref: messagesContainerRef, className: "flex-1 overflow-y-auto", onScroll: handleScroll, children: [error &&
+                                !isAgentErrorStatusValue((agent || agentStub)?.status) && (_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-[11px] font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-[11px] text-red-700", children: error })] })] }) })), showInitialThinkingSplash && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [activeProfile?.svgIcon ? (_jsx("div", { className: "flex h-16 w-16 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                                __html: sanitizeSvg(activeProfile.svgIcon),
+                                            } })) : (_jsx(SecretAgentIcon, { size: 64, strokeWidth: 1, className: "text-gray-400" })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400" })] })] }) })), inlineBrowserClaimBanner, renderErrorBanner(), inlineDialog ? (inlineDialog) : latestSummaryAssistantGroup ? (_jsx("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: _jsx(AiResponseMessage, { messages: summaryMessages, finished: !latestSummaryAssistantGroup.isLastGroup || !isExecuting, editOperations: summaryOperations, defaultCollapseJson: defaultCollapseJson, profileSvgIcon: activeProfile?.svgIcon, agentId: agent?.id || agentStub.id, agentName: activeProfile?.agentName ||
+                                        activeProfile?.displayTitle ||
+                                        activeProfile?.name, allPendingApprovals: allPendingApprovals, onSwitchToAutonomous: handleSwitchToAutonomous, browserCaptureInlinePrompt: browserCaptureInlinePrompt, onQuickAction: (action) => {
+                                        const text = (action.prompt ||
+                                            action.value ||
+                                            action.label ||
+                                            "").trim();
+                                        if (!text)
+                                            return;
+                                        if (isExecuting) {
+                                            try {
+                                                handleStop();
+                                            }
+                                            catch { }
+                                        }
+                                        sendQuickMessage(text);
+                                    } }) })) : hideSummaryWaitingPlaceholder ? (_jsx("div", { className: `flex h-full items-center justify-center ${compact ? "min-h-[100px] p-3" : "min-h-[220px] p-6"}`, children: summaryPlaceholderActions ? (_jsx("div", { className: "flex justify-center", children: summaryPlaceholderActions })) : null })) : (_jsx("div", { className: `flex h-full items-center justify-center ${compact ? "min-h-[100px] p-3" : "min-h-[220px] p-6"}`, children: _jsxs("div", { className: `max-w-md rounded-xl border border-slate-200 bg-slate-50 text-center text-slate-600 ${compact ? "px-3 py-2 text-xs" : "px-5 py-4 text-sm"}`, children: [_jsx("div", { children: shouldShowThinkingDots || isExecuting
+                                                ? "The agent is still working. The next update will appear here automatically."
+                                                : agent?.statusMessage ||
+                                                    summaryPlaceholderMessage ||
+                                                    "Waiting for the next agent update." }), summaryPlaceholderActions ? (_jsx("div", { className: `flex justify-center ${compact ? "mt-2" : "mt-3"}`, children: summaryPlaceholderActions })) : null] }) })), displayMode !== "summary" &&
+                                shouldShowThinkingDots &&
+                                !inlineDialog &&
+                                !latestSummaryAssistantGroup && (_jsxs("div", { className: "flex gap-3 px-4 py-3", "data-testid": "agent-thinking-dots", children: [_jsx("div", { className: "shrink-0", children: activeProfile?.svgIcon ? (_jsx("div", { className: "text-gray-2 flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                                __html: sanitizeSvg(activeProfile.svgIcon),
+                                            } })) : (_jsx(SecretAgentIcon, { size: 20, strokeWidth: 1, className: "text-gray-2" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "text-dark text-xs font-medium", children: activeProfile?.agentName ||
+                                                            activeProfile?.displayTitle ||
+                                                            activeProfile?.name ||
+                                                            "Agent" }), _jsx("span", { className: "text-xs text-gray-400", children: formatTime(new Date()) })] }), _jsxs("div", { className: "flex items-center gap-1 pt-2", children: [_jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400" })] })] })] })), _jsx("div", { ref: messagesEndRef })] }), showSummaryInput && !activeInlineDialog ? (_jsxs("div", { className: cn("border-t border-gray-200 p-4", simpleMode && "pb-10"), children: [activePlaceholderInput ? (_jsx(PlaceholderInput, { ref: placeholderInputRef, text: activePlaceholderInput.text, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: setAllPlaceholdersFilled, onComplete: (filledText) => {
+                                    setActivePlaceholderInput(null);
+                                    setAllPlaceholdersFilled(false);
+                                    if (activePlaceholderInput.behavior === "compose" &&
+                                        !hideBottomControls) {
+                                        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 {
+                                        if (isExecuting) {
+                                            try {
+                                                handleStop();
+                                            }
+                                            catch { }
+                                        }
+                                        sendQuickMessage(filledText);
+                                    }
+                                }, onCancel: () => {
+                                    setActivePlaceholderInput(null);
+                                    setAllPlaceholdersFilled(false);
+                                } })) : prompt && /\{\{[^{}]+\}\}|<<[^<>]+>>/.test(prompt) ? (_jsx(PlaceholderInput, { ref: promptPlaceholderInputRef, text: prompt, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: setAllPlaceholdersFilled, onComplete: (filledText) => {
+                                    setPrompt(filledText);
+                                    setAllPlaceholdersFilled(false);
+                                    if (filledText.trim()) {
+                                        if (isExecuting) {
+                                            try {
+                                                handleStop();
+                                            }
+                                            catch { }
+                                        }
+                                        sendQuickMessage(filledText);
+                                    }
+                                }, onCancel: () => {
+                                    setPrompt("");
+                                    setAllPlaceholdersFilled(false);
+                                    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, style: { viewTransitionName: "assistant-chat-input" }, value: prompt, onChange: (e) => {
+                                        setPrompt(e.target.value);
+                                        if (!/\{\{[^{}]+\}\}|<<[^<>]+>>/.test(e.target.value)) {
+                                            setAllPlaceholdersFilled(false);
+                                        }
+                                        if (currentHistoryIndex !== -1) {
+                                            setCurrentHistoryIndex(-1);
+                                        }
+                                    }, onKeyDown: handleKeyPress, onPaste: handlePaste, onFocus: () => {
+                                        shouldMaintainFocusRef.current = true;
+                                    }, onBlur: () => {
+                                        shouldMaintainFocusRef.current = false;
+                                    }, placeholder: inputPlaceholder, className: "max-h-[250px] min-h-[80px] flex-1 resize-y overflow-y-auto text-[12px] lg:max-h-[450px]", "data-testid": "agent-terminal-prompt", disabled: isSubmitting }) })), (() => {
+                                const isInPlaceholderMode = activePlaceholderInput ||
+                                    (prompt && /\{\{[^{}]+\}\}|<<[^<>]+>>/.test(prompt));
+                                const placeholderShowsOwnButtons = hideBottomControls && isInPlaceholderMode;
+                                if (placeholderShowsOwnButtons)
+                                    return null;
+                                return (_jsxs("div", { className: cn("mt-2 flex items-stretch gap-2", hideBottomControls ||
+                                        simpleMode ||
+                                        isInPlaceholderMode
+                                        ? "justify-end"
+                                        : "justify-between"), children: [!hideBottomControls &&
+                                            !simpleMode &&
+                                            !isInPlaceholderMode ? (_jsx("div", { className: "flex-1" })) : null, _jsx(Button, { type: "button", size: "sm", onClick: () => {
+                                                if (isExecuting) {
+                                                    handleStop();
+                                                }
+                                                else {
+                                                    handleSubmit();
+                                                }
+                                            }, disabled: !isExecuting &&
+                                                !activePlaceholderInput &&
+                                                (!prompt.trim() || isSubmitting), "data-testid": "agent-send-stop-button", children: isExecuting ? "Stop" : "Send" })] }));
+                            })()] })) : null] }));
+        })()
+        : null;
+    const fullModeInlineDialog = displayMode === "full" ? renderInlineDialogContent() : null;
+    const fullModeUpperContent = (_jsxs("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: [fixedBrowserClaimBanner, _jsxs("div", { ref: messagesContainerRef, className: "flex-1 overflow-y-auto", onScroll: handleScroll, children: [messages.length === 0 && !error && !hideGreeting && (_jsx("div", { className: "flex h-full items-center justify-center", children: !activeProfile ? (_jsx(Loader2, { className: "mx-auto h-8 w-8 animate-spin text-gray-400" })) : (_jsx(AgentGreeting, { profile: activeProfile, onPromptClick: (p) => {
                                 setPrompt(p);
                                 // Use setTimeout to ensure state is updated before submission
                                 setTimeout(() => {
@@ -3937,12 +5722,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                         handleSubmit();
                                     }
                                 }, 0);
-                            } })) })), messages.length === 0 &&
-                        !error &&
-                        hideGreeting &&
-                        (isSubmitting || isConnecting) && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [activeProfile?.svgIcon ? (_jsx("div", { className: "flex h-16 w-16 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
-                                        __html: activeProfile.svgIcon,
-                                    } })) : (_jsx(SecretAgentIcon, { size: 64, strokeWidth: 1, className: "text-gray-400" })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400" })] })] }) })), renderErrorBanner(), _jsxs("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: [(() => {
+                            } })) })), showInitialThinkingSplash && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [activeProfile?.svgIcon ? (_jsx("div", { className: "flex h-16 w-16 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                        __html: sanitizeSvg(activeProfile.svgIcon),
+                                    } })) : (_jsx(SecretAgentIcon, { size: 64, strokeWidth: 1, className: "text-gray-400" })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400" })] })] }) })), inlineBrowserClaimBanner, renderErrorBanner(), _jsxs("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: [(() => {
                                 const groups = groupConsecutiveMessages(messages);
                                 return groups.map((group, groupIndex) => {
                                     const isLastGroup = groupIndex === groups.length - 1;
@@ -3950,6 +5732,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                         // Render user message
                                         return (_jsx(UserMessage, { message: group.messages[0] }, groupIndex));
                                     }
+                                    else if (group.type === "heartbeat" && group.messages[0]) {
+                                        return (_jsx(HeartbeatMessage, { message: group.messages[0] }, group.messages[0].id || groupIndex));
+                                    }
                                     else {
                                         // Render bundled assistant messages
                                         // Check if this group contains any streaming message
@@ -3966,9 +5751,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                         }
                                         const convertedMessages = convertAgentMessagesToAiFormat(filteredMessages);
                                         const operationsForGroup = getOperationsForMessageGroup(convertedMessages, agentOperations);
-                                        return (_jsx(AiResponseMessage, { messages: convertedMessages, finished: !isLastGroup || !isExecuting, editOperations: operationsForGroup, error: error || undefined, profileSvgIcon: activeProfile?.svgIcon, agentId: agent?.id || agentStub.id, agentName: activeProfile?.agentName ||
+                                        return (_jsx(AiResponseMessage, { messages: convertedMessages, finished: !isLastGroup || !isExecuting, editOperations: operationsForGroup, defaultCollapseJson: defaultCollapseJson, profileSvgIcon: activeProfile?.svgIcon, agentId: agent?.id || agentStub.id, agentName: activeProfile?.agentName ||
                                                 activeProfile?.displayTitle ||
-                                                activeProfile?.name, allPendingApprovals: allPendingApprovals, onSwitchToAutonomous: handleSwitchToAutonomous, onQuickAction: (action) => {
+                                                activeProfile?.name, allPendingApprovals: allPendingApprovals, onSwitchToAutonomous: handleSwitchToAutonomous, browserCaptureInlinePrompt: browserCaptureInlinePrompt, onQuickAction: (action) => {
                                                 const text = (action.prompt ||
                                                     action.value ||
                                                     action.label ||
@@ -4012,13 +5797,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                     }
                                 });
                             })(), shouldShowThinkingDots && (_jsxs("div", { className: "flex gap-3 px-4 py-3", "data-testid": "agent-thinking-dots", children: [_jsx("div", { className: "shrink-0", children: activeProfile?.svgIcon ? (_jsx("div", { className: "text-gray-2 flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
-                                                __html: activeProfile.svgIcon,
+                                                __html: sanitizeSvg(activeProfile.svgIcon),
                                             } })) : (_jsx(SecretAgentIcon, { size: 20, strokeWidth: 1, className: "text-gray-2" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "text-dark text-xs font-medium", children: activeProfile?.agentName ||
                                                             activeProfile?.displayTitle ||
                                                             activeProfile?.name ||
                                                             "Agent" }), _jsx("span", { className: "text-xs text-gray-400", children: formatTime(new Date()) })] }), _jsxs("div", { className: "flex items-center gap-1 pt-2", children: [_jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400" })] })] })] }))] }), !simpleMode && renderCostLimitBanner(), _jsx("div", { ref: messagesEndRef })] }), !hideContext &&
                 !simpleMode &&
-                (isMobile ? (_jsx("div", { className: "border-t border-gray-200 bg-gray-50", "data-testid": "agent-context-panel-tabs", children: _jsx(SimpleTabs, { tabs: [
+                (editContext?.isMobile ? (_jsx("div", { className: "border-t border-gray-200 bg-gray-50", "data-testid": "agent-context-panel-tabs", children: _jsx(SimpleTabs, { tabs: [
                             {
                                 id: "context",
                                 label: "Context",
@@ -4066,28 +5851,49 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             hasTodoContent,
                             hasSpawnedAgents,
                             agent?.id && hasHistoryContent,
-                        ].filter(Boolean).length - 1)), setActiveTab: setContextPanelsActiveTab, className: "justify-start px-4" }) })) : (_jsxs(_Fragment, { children: [renderContextInfoBar(), agent?.id && activeProfile && (_jsx(AgentDocumentList, { ref: documentListRef, agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), _jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata }), _jsx(SpawnedAgentsPanel, { agentMetadata: agentMetadata }), agent?.id && _jsx(AgentEditOperationsPanel, { agentId: agent.id })] }))), queuedPrompts.length > 0 && !simpleMode && (_jsx("div", { className: "border-t border-gray-200 bg-amber-50/50", "data-testid": "queued-prompts-section", children: _jsxs("div", { className: "px-4 pt-3 pb-2", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsxs("span", { className: "text-[11px] font-semibold text-amber-900", "data-testid": "queued-prompts-count", children: ["Queued Messages (", queuedPrompts.length, ")"] })] }), _jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: queuedPrompts.map((qp) => (_jsx("div", { className: "rounded-md border border-amber-200 bg-white p-2.5 text-[11px]", "data-testid": "queued-prompt-item", children: _jsx("div", { className: "flex items-start justify-between gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "mb-1 flex items-center gap-1.5", children: qp.sourceAgentName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-medium text-gray-700", children: ["From ", qp.sourceAgentName] }), qp.priority > 5 && (_jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 text-[11px] font-medium text-red-700", children: "High Priority" }))] })) : (_jsx("span", { className: "font-medium text-gray-700", children: "From User" })) }), _jsx("div", { className: "wrap-break-word whitespace-pre-wrap text-gray-600", "data-testid": "queued-prompt-text", children: qp.prompt }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-gray-400", children: [qp.createdDate && (_jsxs("span", { children: ["Queued ", formatTime(new Date(qp.createdDate))] })), qp.scheduledFor &&
-                                                        new Date(qp.scheduledFor).getTime() >
-                                                            new Date(qp.createdDate || 0).getTime() + 1000 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-300", children: "\u2022" }), _jsxs("span", { className: "font-medium text-amber-600", children: ["Scheduled for", " ", new Date(qp.scheduledFor).toDateString() ===
-                                                                        new Date().toDateString()
-                                                                        ? formatTime(new Date(qp.scheduledFor))
-                                                                        : formatDateTime(new Date(qp.scheduledFor))] })] }))] })] }) }) }, qp.id))) })] }) })), activeInlineDialog &&
-                (() => {
-                    // Look up dialog component from config
-                    const dialogRegistration = editContext?.configuration?.editor?.agentDialogs?.find((d) => d.dialogType === activeInlineDialog.request.dialogType);
-                    if (dialogRegistration) {
-                        const DialogComponent = dialogRegistration.component;
-                        return (_jsx("div", { className: "agent-inline-dialog", children: _jsx(DialogComponent, { title: activeInlineDialog.request.title, description: activeInlineDialog.request.description, parameters: activeInlineDialog.request.parameters, onClose: (result) => {
-                                    activeInlineDialog.onComplete(result);
-                                    setActiveInlineDialog(null);
-                                }, onCancel: () => {
-                                    activeInlineDialog.onCancel();
-                                    setActiveInlineDialog(null);
-                                } }) }));
-                    }
-                    // Fallback for unknown dialog types
-                    return (_jsx("div", { className: "agent-inline-dialog", children: _jsxs("div", { className: "p-4 text-sm text-red-500", children: ["Unknown dialog type: ", activeInlineDialog.request.dialogType] }) }));
-                })(), _jsxs("div", { className: cn("border-t border-gray-200 p-4", simpleMode && "pb-10"), children: [activePlaceholderInput ? (
+                        ].filter(Boolean).length - 1)), setActiveTab: setContextPanelsActiveTab, className: "justify-start px-4" }) })) : (_jsxs(_Fragment, { children: [renderContextInfoBar(), agent?.id && activeProfile && (_jsx(AgentDocumentList, { ref: documentListRef, agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), _jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata }), _jsx(SpawnedAgentsPanel, { agentMetadata: agentMetadata }), agent?.id && _jsx(AgentEditOperationsPanel, { agentId: agent.id })] }))), queuedPrompts.length > 0 && !simpleMode && (_jsx("div", { className: "border-t border-gray-200 bg-amber-50/50", "data-testid": "queued-prompts-section", children: _jsxs("div", { className: "px-4 pt-2.5 pb-2", children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-1.5", children: [_jsx("div", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-amber-400" }), _jsxs("span", { className: "text-[10px] font-medium tracking-wide text-amber-600 uppercase", "data-testid": "queued-prompts-count", children: ["Queued (", queuedPrompts.length, ")"] })] }), _jsx("div", { className: "max-h-64 space-y-0.5 overflow-y-auto", children: queuedPrompts.map((qp) => {
+                                let triggerName = "";
+                                if (qp.data) {
+                                    try {
+                                        const parsed = JSON.parse(qp.data);
+                                        triggerName = parsed?.triggerName?.trim() || "";
+                                    }
+                                    catch {
+                                        // Ignore invalid JSON metadata and render as regular queued prompt.
+                                    }
+                                }
+                                const isTriggerQueuedPrompt = !qp.sourceAgentName && triggerName.length > 0;
+                                const isTriggerExpanded = !!expandedQueuedTriggerIds[qp.id];
+                                if (isTriggerQueuedPrompt) {
+                                    return (_jsxs("div", { className: "text-[11px]", "data-testid": "queued-prompt-item", children: [_jsxs("button", { type: "button", onClick: () => setExpandedQueuedTriggerIds((prev) => ({
+                                                    ...prev,
+                                                    [qp.id]: !prev[qp.id],
+                                                })), className: "flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-amber-800 transition-colors hover:bg-amber-100/60", "data-testid": "queued-trigger-toggle", "data-expanded": isTriggerExpanded ? "true" : "false", children: [_jsx(Target, { className: "h-3 w-3 shrink-0 text-amber-500", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: triggerName }), qp.createdDate && (_jsx("span", { className: "ml-1 shrink-0 text-[10px] text-amber-500", children: formatTime(new Date(qp.createdDate)) })), _jsx("span", { className: "ml-auto shrink-0 text-amber-400", children: isTriggerExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3" })) : (_jsx(ChevronDown, { className: "h-3 w-3" })) })] }), isTriggerExpanded && (_jsx("div", { className: "mt-0.5 border-l-2 border-amber-200 pl-5 text-[11px] text-amber-700/80", children: qp.prompt }))] }, qp.id));
+                                }
+                                return (_jsx("div", { className: "rounded-md border border-amber-200 bg-white p-2.5 text-[11px]", "data-testid": "queued-prompt-item", children: _jsx("div", { className: "flex items-start justify-between gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "mb-1 flex items-center gap-1.5", children: qp.sourceAgentName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-medium text-gray-700", children: ["From ", qp.sourceAgentName] }), qp.priority > 5 && (_jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 text-[11px] font-medium text-red-700", children: "High Priority" }))] })) : (_jsx("span", { className: "font-medium text-gray-700", children: "From User" })) }), _jsx("div", { className: "wrap-break-word whitespace-pre-wrap text-gray-600", "data-testid": "queued-prompt-text", children: qp.prompt }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-gray-400", children: [qp.createdDate && (_jsxs("span", { children: ["Queued ", formatTime(new Date(qp.createdDate))] })), qp.scheduledFor &&
+                                                            new Date(qp.scheduledFor).getTime() >
+                                                                new Date(qp.createdDate || 0).getTime() +
+                                                                    1000 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-300", children: "\u2022" }), _jsxs("span", { className: "font-medium text-amber-600", children: ["Scheduled for", " ", new Date(qp.scheduledFor).toDateString() ===
+                                                                            new Date().toDateString()
+                                                                            ? formatTime(new Date(qp.scheduledFor))
+                                                                            : formatDateTime(new Date(qp.scheduledFor))] })] }))] })] }) }) }, qp.id));
+                            }) })] }) }))] }));
+    const showQuestionnaireSplitter = isQuestionnaireDialogOpen && !!fullModeInlineDialog;
+    const fullModeContent = showQuestionnaireSplitter ? (_jsx(Splitter, { panels: [
+            {
+                name: "conversation",
+                defaultSize: 65,
+                content: fullModeUpperContent,
+            },
+            {
+                name: "questionnaire",
+                defaultSize: 35,
+                content: fullModeInlineDialog,
+            },
+        ], direction: "vertical", localStorageKey: compact
+            ? "agent-terminal-compact-questionnaire-splitter"
+            : "agent-terminal-questionnaire-splitter", className: "min-h-0 flex-1", splitterClassName: "bg-gray-200 hover:bg-gray-300" })) : (_jsxs(_Fragment, { children: [fullModeUpperContent, fullModeInlineDialog] }));
+    return loadingContent ? (loadingContent) : displayMode === "summary" && summaryModeContent ? (summaryModeContent) : (_jsxs("div", { className: `flex h-full min-h-0 flex-col ${className || ""}`, children: [parentAgentId && !simpleMode && (_jsx("div", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2", children: _jsxs("button", { onClick: handleBackToParent, className: "flex items-center gap-2 text-[11px] text-gray-600 transition-colors hover:text-gray-900", title: "Back to parent agent", children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { children: "Back to parent agent" })] }) })), fullModeContent, _jsxs("div", { className: cn("border-t border-gray-200 p-4", simpleMode && "pb-10"), children: [activePlaceholderInput ? (
                     // Placeholder Input (from quick actions)
                     // Show internal buttons only in splash mode (hideBottomControls) since external buttons won't be visible there
                     _jsx(PlaceholderInput, { ref: placeholderInputRef, text: activePlaceholderInput.text, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: setAllPlaceholdersFilled, onComplete: (filledText) => {
@@ -4164,122 +5970,221 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             return null;
                         return (_jsxs("div", { className: cn("mt-2 flex items-stretch gap-2", hideBottomControls || simpleMode || isInPlaceholderMode
                                 ? "justify-end"
-                                : "justify-between"), children: [!hideBottomControls && !simpleMode && !isInPlaceholderMode && (_jsxs("div", { className: "flex flex-wrap items-center justify-start gap-2", children: [_jsx(Select, { size: "xs", maxWidth: 240, className: cn("h-5 w-auto min-w-[95px] rounded border px-1.5 text-[11px] font-normal", mode === "read-only"
+                                : "justify-between"), children: [!hideBottomControls && !simpleMode && !isInPlaceholderMode && (_jsxs("div", { className: "flex flex-wrap items-center justify-start gap-2", children: [_jsx(Select, { "data-testid": "agent-mode-selector", size: "xs", maxWidth: 240, className: cn("h-5 w-auto min-w-[95px] rounded border px-1.5 text-[11px] font-normal", mode === "read-only"
                                                 ? "border-green-300 bg-green-50! text-green-700 hover:bg-green-100!"
                                                 : mode === "supervised"
                                                     ? "border-amber-300 bg-amber-50! text-amber-700 hover:bg-amber-100!"
                                                     : "border-red-300 bg-red-50! text-red-700 hover:bg-red-100!"), value: mode, options: modeOptions, onValueChange: async (val) => {
                                                 const nextMode = val || "supervised";
-                                                // Optimistic UI update
-                                                setMode(nextMode);
                                                 const current = agentMetadata || {};
                                                 const nextMeta = {
                                                     ...current,
                                                     mode: nextMode,
                                                 };
                                                 try {
-                                                    if (!agent?.id || agent.status === "new") {
+                                                    if (!agent?.id || isLocalOnlyDraftAgent) {
+                                                        setMode(nextMode);
                                                         setAgentMetadata(nextMeta);
-                                                        // Cache until first start when agent is persisted
                                                         pendingSettingsRef.current = {
                                                             ...(pendingSettingsRef.current || {}),
                                                             mode: nextMode,
                                                         };
                                                         return;
                                                     }
-                                                    await updateAgentSettings(agent.id, {
+                                                    const result = 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);
-                                                }
-                                            } }), profiles?.length > 0 && (_jsx(Select, { size: "xs", maxWidth: 200, searchable: profiles.length > 5, searchPlaceholder: "Filter profiles...", className: "h-5 w-auto min-w-[120px] rounded border px-1.5 text-[11px] text-gray-500", value: activeProfile?.id || "", options: profileOptions, "data-testid": "agent-profile-selector", onValueChange: async (val) => {
-                                                const nextProfile = profiles.find((x) => x.id === val);
-                                                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;
-                                                        });
+                                                    if (result.success === false ||
+                                                        result.updates?.mode === false) {
+                                                        throw new Error("Mode change was not applied");
                                                     }
-                                                    // reflect in local agent stub so tabs and titles can use it if needed
+                                                    setMode(nextMode);
+                                                    setAgentMetadata(nextMeta);
                                                     setAgent((prev) => prev
                                                         ? {
                                                             ...prev,
-                                                            metadata: JSON.stringify({
-                                                                ...(agentMetadata || {}),
-                                                                profile: nextProfile.name,
-                                                                additionalData: {
-                                                                    ...(agentMetadata
-                                                                        ?.additionalData || {}),
-                                                                    profileId: nextProfile.id,
-                                                                    profileName: nextProfile.name,
-                                                                },
-                                                            }),
+                                                            mode: nextMode,
+                                                            metadata: JSON.stringify(nextMeta),
                                                         }
                                                         : prev);
                                                 }
-                                                catch (err) {
-                                                    console.error("Failed to persist agent profile", err);
-                                                }
-                                            } })), activeProfile?.models?.length ? (_jsx(Select, { size: "xs", maxWidth: 300, searchable: activeProfile.models.length > 5, searchPlaceholder: "Filter models...", className: "h-5 w-auto min-w-[120px] rounded border px-1.5 text-[11px] text-gray-500", value: selectedModelId || "", options: modelOptions, onValueChange: async (val) => {
-                                                const nextId = val;
-                                                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 (e2) {
+                                                    console.error("Failed to persist mode change", e2);
                                                 }
-                                                catch (err) {
-                                                    console.error("Failed to persist agent model", err);
+                                            } }), _jsxs(Popover, { open: showAgentSettings, onOpenChange: (open) => {
+                                                setShowAgentSettings(open);
+                                                if (!open) {
+                                                    setShowSkillPicker(false);
                                                 }
-                                            } })) : 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", type: "button", 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-[10px] text-gray-700 hover:bg-gray-100", onClick: () => {
+                                            }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "xs", variant: "outline", className: "h-5 rounded border px-1.5 text-[11px] text-gray-600", "data-testid": "agent-settings-popover-trigger", children: [_jsx(Settings2, { className: "mr-1 h-3 w-3", strokeWidth: 1 }), "Agent settings"] }) }), _jsx(PopoverContent, { className: "w-80 p-3", align: "start", onInteractOutside: (e) => {
+                                                        const target = e.target;
+                                                        if (target?.closest('[data-help-panel="true"]')) {
+                                                            e.preventDefault();
+                                                        }
+                                                    }, onPointerDownOutside: (e) => {
+                                                        const target = e.target;
+                                                        if (target?.closest('[data-help-panel="true"]')) {
+                                                            e.preventDefault();
+                                                        }
+                                                    }, onFocusOutside: (e) => {
+                                                        const target = e.target;
+                                                        if (target?.closest('[data-help-panel="true"]')) {
+                                                            e.preventDefault();
+                                                        }
+                                                    }, children: _jsxs("div", { className: "space-y-3", children: [profiles?.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Agent profile" }), _jsx(Select, { size: "xs", maxWidth: 300, searchable: profiles.length > 5, searchPlaceholder: "Filter profiles...", className: "h-6 w-full rounded border px-1.5 text-[11px] text-gray-500", value: activeProfile?.id || "", options: profileOptions, "data-testid": "agent-profile-selector", onValueChange: async (val) => {
+                                                                            const nextProfile = profiles.find((x) => x.id === val);
+                                                                            if (!nextProfile)
+                                                                                return;
+                                                                            setActiveProfile(nextProfile);
+                                                                            try {
+                                                                                if (agent?.id && !isLocalOnlyDraftAgent) {
+                                                                                    await updateAgentSettings(agent.id, {
+                                                                                        profileId: nextProfile.id,
+                                                                                        profileName: nextProfile.name,
+                                                                                    });
+                                                                                }
+                                                                                else {
+                                                                                    pendingSettingsRef.current = {
+                                                                                        ...(pendingSettingsRef.current || {}),
+                                                                                        profileId: nextProfile.id,
+                                                                                        profileName: nextProfile.name,
+                                                                                    };
+                                                                                    setAgentMetadata((current) => {
+                                                                                        const next = {
+                                                                                            ...(current || {}),
+                                                                                        };
+                                                                                        next.profile = nextProfile.name;
+                                                                                        next.additionalData = {
+                                                                                            ...(next.additionalData || {}),
+                                                                                            profileId: nextProfile.id,
+                                                                                            profileName: nextProfile.name,
+                                                                                        };
+                                                                                        return next;
+                                                                                    });
+                                                                                }
+                                                                                setAgent((prev) => prev
+                                                                                    ? {
+                                                                                        ...prev,
+                                                                                        profileId: nextProfile.id,
+                                                                                        profileName: nextProfile.name,
+                                                                                        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);
+                                                                            }
+                                                                        } }), activeProfile && (_jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-6 px-2 text-[10px]", onClick: () => {
+                                                                                    void handleEditProfileSideBySide();
+                                                                                    setShowAgentSettings(false);
+                                                                                }, "data-testid": "agent-profile-edit-button", children: "Edit" }), _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 text-[10px] text-gray-500 hover:text-gray-700", onClick: () => {
+                                                                                    void handleOpenProfileSettings();
+                                                                                    setShowAgentSettings(false);
+                                                                                }, children: ["Open profile settings", _jsx(ExternalLink, { className: "h-2.5 w-2.5", strokeWidth: 1.5 })] })] }))] })), activeProfile?.models?.length ? (_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Model" }), _jsx(Select, { "data-testid": "agent-model-selector", size: "xs", maxWidth: 300, searchable: activeProfile.models.length > 5, searchPlaceholder: "Filter models...", className: "h-6 w-full rounded border px-1.5 text-[11px] text-gray-500", value: selectedModelId || "", options: modelOptions, onValueChange: async (val) => {
+                                                                            const nextId = val;
+                                                                            setSelectedModelId(nextId);
+                                                                            const modelName = activeProfile?.models?.find((m) => m.id === nextId)?.name || "";
+                                                                            setAgent((prev) => prev ? { ...prev, model: modelName } : prev);
+                                                                            try {
+                                                                                if (agent?.id && !isLocalOnlyDraftAgent) {
+                                                                                    await updateAgentSettings(agent.id, {
+                                                                                        model: modelName,
+                                                                                    });
+                                                                                }
+                                                                                else {
+                                                                                    pendingSettingsRef.current = {
+                                                                                        ...(pendingSettingsRef.current || {}),
+                                                                                        modelName,
+                                                                                    };
+                                                                                }
+                                                                            }
+                                                                            catch (err) {
+                                                                                console.error("Failed to persist agent model", err);
+                                                                            }
+                                                                        } })] })) : null, _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1 text-[11px] font-medium text-gray-700", children: [_jsx(Target, { className: "h-3 w-3", strokeWidth: 1 }), "Skills"] }), _jsxs(Popover, { open: showSkillPicker, onOpenChange: (open) => {
+                                                                                    setShowSkillPicker(open);
+                                                                                    if (open) {
+                                                                                        setSkillActionError(null);
+                                                                                    }
+                                                                                }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "xs", variant: "outline", className: "h-5 rounded border px-1.5 text-[10px] text-gray-600", "data-testid": "agent-skill-picker-trigger", children: [_jsx(Plus, { className: "mr-1 h-3 w-3", strokeWidth: 1.5 }), "Add"] }) }), _jsx(PopoverContent, { className: "w-88 p-2", align: "end", side: "bottom", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[11px] font-medium text-gray-700", children: "Select a skill" }), _jsxs("div", { className: "relative h-56 rounded border border-gray-200 bg-gray-50", children: [_jsx(ScrollingContentTree, { rootItemIds: skillRootIds, selectedItemId: selectedSkillIds[selectedSkillIds.length - 1] || undefined, expandedItemId: selectedSkillIds[selectedSkillIds.length - 1] || skillRootIds[0], scrollToSelected: true, hideRootNodes: false, onSelectionChange: (selection) => {
+                                                                                                                const selected = selection[0];
+                                                                                                                if (!selected?.id)
+                                                                                                                    return;
+                                                                                                                setSkillActionError(null);
+                                                                                                                if (selectableTemplateIdSet.size > 0 &&
+                                                                                                                    (!selected.templateId ||
+                                                                                                                        !selectableTemplateIdSet.has(selected.templateId.toLowerCase()))) {
+                                                                                                                    return;
+                                                                                                                }
+                                                                                                                if (!manuallyAssignableSkillIdSet.has(selected.id.toLowerCase())) {
+                                                                                                                    setSkillActionError("This skill cannot be added for the current agent profile.");
+                                                                                                                    return;
+                                                                                                                }
+                                                                                                                void (async () => {
+                                                                                                                    const added = await handleAddSkill(selected.id);
+                                                                                                                    if (added) {
+                                                                                                                        setShowSkillPicker(false);
+                                                                                                                    }
+                                                                                                                })();
+                                                                                                            } }), skillsLoading && (_jsx("div", { className: "bg-background/70 absolute inset-0 flex items-center justify-center text-[10px] text-gray-500", children: "Loading skills..." }))] }), !skillsLoading &&
+                                                                                                    !skillsError &&
+                                                                                                    profileFilteredSkills.length > 0 && (_jsx("div", { className: "text-[10px] text-gray-500", children: "Click a skill item in the tree to add it." })), skillsError && (_jsx("div", { className: "text-[10px] text-red-600", children: skillsError })), !skillsError && skillActionError && (_jsx("div", { className: "text-[10px] text-red-600", children: skillActionError })), !skillsLoading &&
+                                                                                                    !skillsError &&
+                                                                                                    skillRootIds.length === 0 && (_jsx("div", { className: "text-[10px] text-gray-500", children: "No skill roots available." })), !skillsLoading &&
+                                                                                                    !skillsError &&
+                                                                                                    profileFilteredSkills.length === 0 && (_jsx("div", { className: "text-[10px] text-gray-500", children: selectedSkillIds.length > 0
+                                                                                                        ? "All addable skills are selected"
+                                                                                                        : "No skills can be added for this profile" }))] }) })] })] }), selectedSkillIds.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1", children: selectedSkillIds.map((skillId) => {
+                                                                            const skill = selectedSkills.find((s) => s.id === skillId);
+                                                                            return (_jsxs("div", { className: "inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-700", children: [_jsx("span", { children: skill?.name || skillId }), _jsx("button", { type: "button", className: "rounded p-0.5 text-gray-500 hover:bg-gray-200 hover:text-gray-700", title: "Open skill item", "aria-label": `Open ${skill?.name || skillId}`, onClick: () => {
+                                                                                            void handleOpenSkillItem(skillId);
+                                                                                        }, children: _jsx(ExternalLink, { className: "h-2.5 w-2.5", strokeWidth: 1.5 }) }), autoAssignedSkillSet.has(skillId.toLowerCase()) ? (_jsx("span", { className: "text-[9px] text-gray-500", children: "auto" })) : (_jsx("button", { type: "button", className: "rounded p-0.5 text-gray-500 hover:bg-gray-200 hover:text-gray-700", onClick: () => {
+                                                                                            void handleRemoveSkill(skillId);
+                                                                                        }, title: "Remove skill", "aria-label": `Remove ${skill?.name || skillId}`, children: _jsx(X, { className: "h-2.5 w-2.5", strokeWidth: 1 }) }))] }, skillId));
+                                                                        }) }))] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setToolsSectionExpanded((open) => !open), className: "mb-0.5 flex w-full items-center justify-between rounded px-0.5 py-0.5 text-left text-[11px] font-medium text-gray-700 hover:bg-gray-100/80", "aria-expanded": toolsSectionExpanded, "data-testid": "agent-tools-section-toggle", children: [_jsxs("span", { children: ["Available tools (", displayedAvailableTools.length, ")"] }), toolsSectionExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 })) : (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 }))] }), toolsSectionExpanded && (_jsx("div", { className: "max-h-36 overflow-y-auto rounded border border-gray-100 bg-gray-50/50 p-1", "data-testid": "agent-tools-section", children: displayedAvailableToolsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading available tools..." })) : displayedAvailableTools.length > 0 ? (_jsxs("div", { className: "space-y-0.5", children: [isLocalOnlyDraftAgent && (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Preview based on the current profile, mode, and selected skills." })), displayedAvailableTools.map((toolName) => (_jsx("div", { className: "rounded px-1 py-0.5 transition-colors hover:bg-white/60", "data-testid": "agent-tool-row", title: toolName, children: _jsx("div", { className: "truncate text-[10px] text-gray-700", children: toolName }) }, toolName)))] })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isLocalOnlyDraftAgent
+                                                                                ? "No available tools for this profile and mode"
+                                                                                : "No available tools" })) })), displayedAvailableToolsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: displayedAvailableToolsError }))] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setAllowancesSectionExpanded((open) => !open), className: "mb-0.5 flex w-full items-center justify-between rounded px-0.5 py-0.5 text-left text-[11px] font-medium text-gray-700 hover:bg-gray-100/80", "aria-expanded": allowancesSectionExpanded, "data-testid": "agent-allowances-section-toggle", children: [_jsxs("span", { children: ["Allowances (", allowancesTotalCount, ")"] }), allowancesSectionExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 })) : (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 }))] }), allowancesSectionExpanded && (_jsx("div", { className: "max-h-36 overflow-y-auto rounded border border-gray-100 bg-gray-50/50 p-1", "data-testid": "agent-allowances-section", children: operationAllowancesLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading allowances..." })) : hasAnyAllowances ? (_jsx("div", { className: "space-y-1", children: allowanceGroups.map((group) => group.rows.length > 0 ? (_jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "px-1 text-[9px] font-medium tracking-wide text-gray-400 uppercase", children: group.label }), group.rows.map((allowance, index) => {
+                                                                                        const sourceLabel = formatAllowanceSource(allowance.source);
+                                                                                        const pathLabel = "itemPath" in allowance
+                                                                                            ? allowance.itemPath
+                                                                                            : allowance.normalizedPath;
+                                                                                        return (_jsxs("div", { className: "rounded px-1 py-0.5 transition-colors hover:bg-white/60", "data-testid": `agent-allowance-row-${group.key}`, children: [_jsxs("div", { className: "flex items-baseline gap-1.5", children: [_jsx("div", { className: "shrink-0 text-[10px] font-medium text-gray-700", children: allowance.operationType ||
+                                                                                                                "*" }), _jsx("div", { className: "truncate text-[9px] text-gray-500", title: formatAllowanceLabel(allowance), children: pathLabel })] }), (sourceLabel ||
+                                                                                                    allowance.grantedBy) && (_jsx("div", { className: "truncate pl-6 text-[9px] text-gray-400", children: [
+                                                                                                        sourceLabel,
+                                                                                                        allowance.grantedBy,
+                                                                                                    ]
+                                                                                                        .filter(Boolean)
+                                                                                                        .join(" · ") }))] }, `${group.key}-${allowance.operationType}-${pathLabel}-${index}`));
+                                                                                    })] }, group.key)) : null) })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isLocalOnlyDraftAgent
+                                                                                ? "Allowances are shown after the agent is created"
+                                                                                : "No active allowances" })) })), operationAllowancesError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: operationAllowancesError }))] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setSubscribedTriggersSectionExpanded((open) => !open), className: "mb-0.5 flex w-full items-center justify-between rounded px-0.5 py-0.5 text-left text-[11px] font-medium text-gray-700 hover:bg-gray-100/80", "aria-expanded": subscribedTriggersSectionExpanded, "data-testid": "agent-subscribed-triggers-section-toggle", children: [_jsx("span", { children: `Subscribed triggers (${activeTriggerSubscriptions.length})` }), subscribedTriggersSectionExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 })) : (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 }))] }), subscribedTriggersSectionExpanded && (_jsx("div", { className: "max-h-28 overflow-y-auto rounded border border-gray-100 bg-gray-50/50 p-1", "data-testid": "agent-subscribed-triggers-section", children: triggerSubscriptionsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading subscribed triggers..." })) : activeTriggerSubscriptions.length > 0 ? (_jsx("div", { className: "space-y-0.5", children: activeTriggerSubscriptions.map((sub) => {
+                                                                                const filterText = (sub.filter || "").trim();
+                                                                                return (_jsxs("div", { className: "flex items-baseline gap-1.5 rounded px-1 py-0.5 transition-colors hover:bg-white/60", children: [_jsx("div", { className: "shrink-0 text-[10px] font-medium text-gray-700", children: sub.triggerName }), filterText.length > 0 && (_jsx("div", { className: "truncate text-[9px] text-gray-400", title: filterText, children: filterText }))] }, sub.id));
+                                                                            }) })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isLocalOnlyDraftAgent
+                                                                                ? "Subscribed triggers are shown after the agent is created"
+                                                                                : "No active trigger subscriptions" })) })), triggerSubscriptionsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: triggerSubscriptionsError }))] })] }) })] }), 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", type: "button", 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-[10px] text-gray-700 hover:bg-gray-100", onClick: () => {
                                                                 setPrompt(p.prompt);
                                                                 setShowPredefined(false);
                                                                 if (textareaRef.current)
                                                                     textareaRef.current.focus();
-                                                            }, children: p.title }, index))) }) })] })) : null, !hideBottomControls && !simpleMode && isMobile && (_jsxs(Popover, { open: showCostAndAgent, onOpenChange: setShowCostAndAgent, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { onClick: () => {
-                                                            if (isMobile)
+                                                            }, children: p.title }, index))) }) })] })) : null, !hideBottomControls &&
+                                            !simpleMode &&
+                                            editContext?.isMobile && (_jsxs(Popover, { open: showCostAndAgent, onOpenChange: setShowCostAndAgent, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { onClick: () => {
+                                                            if (editContext?.isMobile)
                                                                 setShowCostAndAgent((prev) => !prev);
-                                                        }, variant: "outline", size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", "aria-expanded": isMobile ? showCostAndAgent : undefined, "aria-label": "Toggle cost and context info", children: _jsx(DollarSign, { className: "size-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: _jsx(AgentTerminalStatusBar, { agent: agent, contextWindowStatus: contextWindowStatus, liveTotals: liveTotals, totalTokens: liveTotals
+                                                        }, variant: "outline", size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", "aria-expanded": editContext?.isMobile
+                                                            ? showCostAndAgent
+                                                            : undefined, "aria-label": "Toggle cost and context info", children: _jsx(DollarSign, { className: "size-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: _jsx(AgentTerminalStatusBar, { agent: agent, contextWindowStatus: contextWindowStatus, effectiveModelName: effectiveModelName, socketDiagnostics: editContext.socketDiagnostics, runDiagnosticsSnapshot: runDiagnosticsSnapshot, liveTotals: liveTotals, totalTokens: liveTotals
                                                                 ? {
                                                                     input: liveTotals.input,
                                                                     output: liveTotals.output,
@@ -4289,9 +6194,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                     outputCost: liveTotals.outputCost,
                                                                     cachedCost: liveTotals.cachedCost,
                                                                     cacheWriteCost: liveTotals.cacheWriteCost ?? 0,
+                                                                    imageCost: liveTotals.imageCost ?? 0,
                                                                     totalCost: liveTotals.totalCost,
                                                                 }
-                                                                : totalTokens, effectiveCostLimit: effectiveCostLimit, messages: messages, activeProfile: activeProfile, showCompressionPopover: showCompressionPopover, setShowCompressionPopover: setShowCompressionPopover }) }) })] }))] })), _jsxs("div", { className: "flex items-center gap-1 self-end", children: [_jsx("span", { title: isVoiceDisabled
+                                                                : totalTokens, effectiveCostLimit: effectiveCostLimit, messages: messages, showCompressionPopover: showCompressionPopover, setShowCompressionPopover: setShowCompressionPopover }) }) })] }))] })), _jsxs("div", { className: "flex items-center gap-1 self-end", children: [_jsx("span", { title: isVoiceDisabled
                                                 ? "Your browser does not support Speech Recognition"
                                                 : isListening
                                                     ? "Stop voice input"
@@ -4312,7 +6218,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                 : allPendingApprovals.length > 0
                                                     ? "Approve or reject pending tool calls first"
                                                     : "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 })) })] })] }));
-                    })(), !hideBottomControls && !simpleMode && !isMobile && (_jsx(AgentTerminalStatusBar, { agent: agent, contextWindowStatus: contextWindowStatus, liveTotals: liveTotals, totalTokens: liveTotals
+                    })(), !hideBottomControls &&
+                        !simpleMode &&
+                        editContext &&
+                        !editContext.isMobile && (_jsx(AgentTerminalStatusBar, { agent: agent, contextWindowStatus: contextWindowStatus, effectiveModelName: effectiveModelName, socketDiagnostics: editContext.socketDiagnostics, runDiagnosticsSnapshot: runDiagnosticsSnapshot, liveTotals: liveTotals, totalTokens: liveTotals
                             ? {
                                 input: liveTotals.input,
                                 output: liveTotals.output,
@@ -4322,8 +6231,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 outputCost: liveTotals.outputCost,
                                 cachedCost: liveTotals.cachedCost,
                                 cacheWriteCost: liveTotals.cacheWriteCost ?? 0,
+                                imageCost: liveTotals.imageCost ?? 0,
                                 totalCost: liveTotals.totalCost,
                             }
-                            : totalTokens, effectiveCostLimit: effectiveCostLimit, messages: messages, activeProfile: activeProfile, showCompressionPopover: showCompressionPopover, setShowCompressionPopover: setShowCompressionPopover }))] })] }));
+                            : totalTokens, effectiveCostLimit: effectiveCostLimit, messages: messages, showCompressionPopover: showCompressionPopover, setShowCompressionPopover: setShowCompressionPopover }))] })] }));
 }
 //# sourceMappingURL=AgentTerminal.js.map