@parhelia/core 0.1.12485 → 0.1.12515

package/dist/editor/ai/AgentTerminal.js

@@ -1,7 +1,8 @@
 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, ExternalLink, Settings2, Target, X, Plus, } from "lucide-react";
-import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkillCatalog, getAgentOperationAllowances, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, } from "../services/agentService";
+import { getAgent, startAgent, claimAgentBrowser, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkillCatalog, getAgentAvailableTools, getAgentOperationAllowances, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, releaseAgentBrowser, } 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";
@@ -16,15 +17,31 @@ import { getComponentById } from "../componentTreeHelper";
 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 { 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 font-semibold leading-5 text-gray-900" })),
+    h2: (props) => (_jsx("h2", { ...props, className: "mb-1.5 text-[13px] font-semibold leading-5 text-gray-900" })),
+    h3: (props) => (_jsx("h3", { ...props, className: "mb-1 text-[12px] font-semibold leading-5 text-gray-900" })),
+    h4: (props) => (_jsx("h4", { ...props, className: "mb-1 text-[12px] font-medium leading-5 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;
@@ -75,23 +92,19 @@ function formatAllowanceLabel(allowance) {
         : ` ${allowance.normalizedPath}`}`;
 }
 function getAgentRunMessageAgentId(payload) {
-    const agentId = payload?.agentId || payload?.AgentId;
+    const agentId = payload?.agentId;
     return typeof agentId === "string" ? normalizeDialogAgentId(agentId) : null;
 }
 function getAgentRunMessageSeq(payload) {
-    const seq = payload?.seq ?? payload?.Seq;
+    const seq = payload?.seq;
     return typeof seq === "number" ? seq : null;
 }
 function getAgentRunMessageDetail(type, payload) {
     if (type === "agent:run:delta") {
-        return payload?.type || payload?.Type || null;
+        return payload?.type || null;
     }
     if (type === "agent:run:status") {
-        return (payload?.data?.state ||
-            payload?.data?.State ||
-            payload?.data?.status ||
-            payload?.data?.Status ||
-            null);
+        return payload?.data?.state || payload?.data?.status || null;
     }
     if (type === "agent:run:error") {
         return payload?.error || null;
@@ -104,6 +117,19 @@ function getAgentRunMessageDetail(type, payload) {
     }
     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 : {};
@@ -119,6 +145,38 @@ function decodeHtmlEntities(value) {
 function toUserFacingAgentErrorMessage(value) {
     if (!value)
         return "";
+    const normalizedValue = decodeHtmlEntities(value.replace(/<br\s*\/?>/gi, "\n")).trim();
+    if (!normalizedValue)
+        return "";
+    const trimmed = normalizedValue.trim();
+    const maybeJson = trimmed.startsWith("{") || trimmed.startsWith("[") || trimmed.startsWith('"');
+    if (maybeJson) {
+        try {
+            const parsed = JSON.parse(trimmed);
+            const structuredMessage = typeof parsed === "string"
+                ? parsed
+                : typeof parsed?.error === "string"
+                    ? parsed.error
+                    : typeof parsed?.message === "string"
+                        ? parsed.message
+                        : typeof parsed?.detail === "string"
+                            ? parsed.detail
+                            : typeof parsed?.error_description === "string"
+                                ? parsed.error_description
+                                : typeof parsed?.error === "object" &&
+                                    parsed?.error &&
+                                    typeof parsed.error.message ===
+                                        "string"
+                                    ? String(parsed.error.message)
+                                    : "";
+            if (structuredMessage.trim()) {
+                value = structuredMessage;
+            }
+        }
+        catch {
+            // Fall through to plain-text cleanup when the provider error isn't valid JSON.
+        }
+    }
     const firstLine = value
         .replace(/<br\s*\/?>/gi, "\n")
         .split(/\r?\n/)
@@ -134,7 +192,7 @@ function toUserFacingAgentErrorMessage(value) {
     return cleaned;
 }
 function isAgentErrorStatusValue(status) {
-    return status === "error" || status === 4;
+    return status === "error";
 }
 // Simple user message component
 const UserMessage = ({ message }) => {
@@ -147,7 +205,7 @@ const UserMessage = ({ message }) => {
     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: triggerContent }))] }) }));
+        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}"
@@ -175,7 +233,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) => {
@@ -416,12 +477,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) => ({
@@ -549,6 +607,16 @@ 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);
@@ -655,10 +723,10 @@ const stringifyToolField = (value) => {
 const getFirstToolCallEnvelope = (data) => {
     if (!data || typeof data !== "object")
         return undefined;
-    const direct = data.toolCall || data.tool_call || data.ToolCall;
+    const direct = data.toolCall || data.tool_call;
     if (direct)
         return direct;
-    const arrayCandidates = [data.tool_calls, data.toolCalls, data.ToolCalls];
+    const arrayCandidates = [data.tool_calls, data.toolCalls];
     for (const candidate of arrayCandidates) {
         if (Array.isArray(candidate) && candidate.length > 0) {
             return candidate[0];
@@ -668,27 +736,18 @@ const getFirstToolCallEnvelope = (data) => {
 };
 const extractToolCallFields = (data) => {
     const envelope = getFirstToolCallEnvelope(data);
-    const functionPayload = data?.function ||
-        data?.Function ||
-        envelope?.function ||
-        envelope?.Function;
+    const functionPayload = data?.function || envelope?.function;
     const functionName = data?.functionName ||
         data?.name ||
         functionPayload?.name ||
-        functionPayload?.Name ||
         envelope?.functionName ||
         envelope?.name ||
-        envelope?.FunctionName ||
-        envelope?.Name ||
         "unknown";
-    const toolCallId = data?.toolCallId || data?.id || envelope?.id || envelope?.Id;
+    const toolCallId = data?.toolCallId || data?.id || envelope?.id;
     const functionArguments = stringifyToolField(data?.functionArguments) ||
-        stringifyToolField(data?.Arguments) ||
         stringifyToolField(data?.arguments) ||
         stringifyToolField(functionPayload?.arguments) ||
-        stringifyToolField(functionPayload?.Arguments) ||
         stringifyToolField(envelope?.functionArguments) ||
-        stringifyToolField(envelope?.Arguments) ||
         stringifyToolField(envelope?.arguments) ||
         "{}";
     return {
@@ -774,6 +833,8 @@ 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(() => {
@@ -926,6 +987,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             if (!message?.type?.startsWith("agent:run:")) {
                 return false;
             }
+            if (isHeartbeatRunEventMessage(message)) {
+                return false;
+            }
             return getAgentRunMessageAgentId(message.payload) === normalizedAgentId;
         })
             .slice(-8)
@@ -1008,11 +1072,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             value === "supervised") {
             return value;
         }
-        // Backend task/spawned agents persist raw "agent", which behaves like
-        // autonomous in the frontend's current 3-mode model.
-        if (value === "agent") {
-            return "autonomous";
-        }
         return null;
     };
     const [mode, setMode] = useState("supervised");
@@ -1029,30 +1088,33 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [skillsLoading, setSkillsLoading] = useState(false);
     const [skillsError, setSkillsError] = 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 isNewAgent = agent?.status === "new";
     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;
@@ -1165,6 +1227,95 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             active = false;
         };
     }, []);
+    const modeOptions = useMemo(() => [
+        {
+            value: "supervised",
+            label: "Supervised",
+            className: "!bg-amber-50 text-amber-900 data-[selected=true]:!bg-amber-200 data-[selected=true]:text-amber-950",
+            description: "Full tool access, but writes are limited to pages/items in the current context. Creating new items or updating existing items outside context requires approval.",
+        },
+        {
+            value: "autonomous",
+            label: "Autonomous",
+            className: "!bg-red-50 text-red-900 data-[selected=true]:!bg-red-200 data-[selected=true]:text-red-950",
+            description: "Full tool access; can write across the site/project only limited by user permissions.",
+        },
+        {
+            value: "read-only",
+            label: "Read-Only",
+            className: "!bg-green-50 text-green-900 data-[selected=true]:!bg-green-200 data-[selected=true]:text-green-950",
+            description: "Limited tool access as configured by the profile (Ask Mode Tools).",
+        },
+    ], []);
+    const profileOptions = useMemo(() => {
+        // Get the current agent's profile ID
+        const currentProfileId = (agent?.profileId || agentStub.profileId)?.toLowerCase();
+        // Filter profiles: show non-hidden ones + always include current profile
+        const filteredProfiles = profiles?.filter((p) => !p.hiddenFromOverview || p.id.toLowerCase() === currentProfileId) || [];
+        return filteredProfiles.map((p) => ({
+            value: p.id,
+            label: p.name,
+        }));
+    }, [profiles, agent?.profileId, agentStub.profileId]);
+    const modelOptions = useMemo(() => (activeProfile?.models?.map((m) => ({
+        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 all = isNewAgent
+            ? [...preloadedSkillIds, ...backendAssignedSkillIds]
+            : backendAssignedSkillIds;
+        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, isNewAgent, preloadedSkillIds]);
+    const selectedSkillIds = useMemo(() => {
+        const all = [...autoAssignedSkillIds, ...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, metadataSelectedSkillIds]);
     useEffect(() => {
         let active = true;
         if (!showAgentSettings) {
@@ -1176,6 +1327,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             setTriggerSubscriptions([]);
             setTriggerSubscriptionsLoading(false);
             setTriggerSubscriptionsError(null);
+            setAvailableTools([]);
+            setAvailableToolsLoading(false);
+            setAvailableToolsError(null);
             setOperationAllowances({ sitecore: [], filesystem: [] });
             setOperationAllowancesLoading(false);
             setOperationAllowancesError(null);
@@ -1223,83 +1377,40 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 }
             }
         };
+        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]);
-    const modeOptions = useMemo(() => [
-        {
-            value: "supervised",
-            label: "Supervised",
-            className: "!bg-amber-50 text-amber-900 data-[selected=true]:!bg-amber-200 data-[selected=true]:text-amber-950",
-            description: "Full tool access, but writes are limited to pages/items in the current context. Creating new items or updating existing items outside context requires approval.",
-        },
-        {
-            value: "autonomous",
-            label: "Autonomous",
-            className: "!bg-red-50 text-red-900 data-[selected=true]:!bg-red-200 data-[selected=true]:text-red-950",
-            description: "Full tool access; can write across the site/project only limited by user permissions.",
-        },
-        {
-            value: "read-only",
-            label: "Read-Only",
-            className: "!bg-green-50 text-green-900 data-[selected=true]:!bg-green-200 data-[selected=true]:text-green-950",
-            description: "Limited tool access as configured by the profile (Ask Mode Tools).",
-        },
-    ], []);
-    const profileOptions = useMemo(() => {
-        // Get the current agent's profile ID
-        const currentProfileId = (agent?.profileId || agentStub.profileId)?.toLowerCase();
-        // Filter profiles: show non-hidden ones + always include current profile
-        const filteredProfiles = profiles?.filter((p) => !p.hiddenFromOverview || p.id.toLowerCase() === currentProfileId) || [];
-        return filteredProfiles.map((p) => ({
-            value: p.id,
-            label: p.name,
-        }));
-    }, [profiles, agent?.profileId, agentStub.profileId]);
-    const modelOptions = useMemo(() => (activeProfile?.models?.map((m) => ({
-        value: m.id,
-        label: m.name,
-    })) || []).sort((a, b) => a.label.localeCompare(b.label)), [activeProfile]);
-    const metadataSelectedSkillIds = useMemo(() => {
-        const rawSkillIds = agentMetadata?.additionalData?.skillIds ??
-            agentMetadata?.AdditionalData?.skillIds ??
-            agentMetadata?.skillIds ??
-            agentMetadata?.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 ??
-            agent?.AssignedSkillIds ??
-            [];
-        if (!Array.isArray(rawSkillIds)) {
-            return [];
-        }
-        return rawSkillIds
-            .map((x) => String(x || "").trim())
-            .filter((x) => x.length > 0);
-    }, [agent]);
-    const selectedSkillIds = useMemo(() => {
-        const all = [...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;
-    }, [backendAssignedSkillIds, metadataSelectedSkillIds]);
+    }, [
+        showAgentSettings,
+        agent?.id,
+        agent?.status,
+        agent?.profileId,
+        mode,
+        selectedSkillIds,
+    ]);
     const activeTriggerSubscriptions = useMemo(() => triggerSubscriptions.filter((sub) => sub.isActive), [triggerSubscriptions]);
     const allowanceGroups = useMemo(() => [
         {
@@ -1317,18 +1428,21 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         operationAllowances.filesystem.length > 0, [operationAllowances]);
     const allowancesTotalCount = useMemo(() => operationAllowances.sitecore.length +
         operationAllowances.filesystem.length, [operationAllowances]);
-    const allowedProfileSkillIdSet = useMemo(() => {
-        const ids = activeProfile?.allowedSkills
-            ?.map((skill) => String(skill?.id || "").toLowerCase())
-            .filter((id) => id.length > 0) || [];
+    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?.allowedSkills]);
+    }, [activeProfile?.availableSkills, activeProfile?.allowedSkills]);
     const profileFilteredSkills = useMemo(() => {
-        if (allowedProfileSkillIdSet.size === 0) {
-            return availableSkills;
+        if (listedProfileSkillIdSet.size === 0) {
+            return [];
         }
-        return availableSkills.filter((skill) => allowedProfileSkillIdSet.has(skill.id.toLowerCase()));
-    }, [availableSkills, allowedProfileSkillIdSet]);
+        return availableSkills.filter((skill) => listedProfileSkillIdSet.has(skill.id.toLowerCase()));
+    }, [availableSkills, listedProfileSkillIdSet]);
     const profileFilteredSkillIdSet = useMemo(() => new Set(profileFilteredSkills.map((s) => s.id.toLowerCase())), [profileFilteredSkills]);
     const availableSkillIdSet = useMemo(() => new Set(availableSkills.map((skill) => skill.id.toLowerCase())), [availableSkills]);
     const selectableTemplateIdSet = useMemo(() => new Set(selectableTemplateIds.map((id) => id.toLowerCase())), [selectableTemplateIds]);
@@ -1336,7 +1450,40 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         .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 backendAssignedSkillSet = useMemo(() => new Set(backendAssignedSkillIds.map((id) => id.toLowerCase())), [backendAssignedSkillIds]);
+    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 = isNewAgent
+        ? previewAvailableTools
+        : availableTools;
+    const displayedAvailableToolsLoading = isNewAgent
+        ? false
+        : availableToolsLoading;
+    const displayedAvailableToolsError = isNewAgent ? null : availableToolsError;
     // Remove deprecated cost limit fields from metadata to avoid confusion with agent/profile settings
     const sanitizeAgentMetadata = useCallback((meta) => {
         try {
@@ -1365,9 +1512,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         if (!agent?.id)
             return;
         const current = agentMetadata || {};
-        const currentAdditionalData = current.additionalData ||
-            current.AdditionalData ||
-            {};
+        const currentAdditionalData = current.additionalData || {};
         const nextAdditionalData = {
             ...currentAdditionalData,
         };
@@ -1382,11 +1527,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         };
         if (Object.keys(nextAdditionalData).length > 0) {
             next.additionalData = nextAdditionalData;
-            delete next.AdditionalData;
         }
         else {
             delete next.additionalData;
-            delete next.AdditionalData;
         }
         try {
             if (agent.status === "new") {
@@ -1542,7 +1685,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
@@ -1805,6 +1953,55 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             toolCalls: [],
         };
     }, [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
@@ -1823,7 +2020,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;
                 }
@@ -2630,29 +2827,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 can be serialized at top level.
-                    // Normalize well-known extension keys back under additionalData for consistent UI behavior.
                     if (parsedContext && typeof parsedContext === "object") {
-                        const normalized = { ...parsedContext };
-                        const additionalData = {
-                            ...(normalized.additionalData || {}),
-                        };
-                        let additionalDataUpdated = false;
-                        // If todoList is at top level but not in additionalData, move it
-                        if (normalized.todoList && !normalized.additionalData?.todoList) {
-                            additionalData.todoList = normalized.todoList;
-                            additionalDataUpdated = true;
-                        }
-                        // Planner/task skill selections may also be flattened from JsonExtensionData.
-                        if (normalized.skillIds && !normalized.additionalData?.skillIds) {
-                            additionalData.skillIds = normalized.skillIds;
-                            additionalDataUpdated = true;
-                        }
-                        if (additionalDataUpdated) {
-                            normalized.additionalData = additionalData;
-                        }
-                        return normalized;
+                        return parsedContext;
                     }
                     return null;
                 }
@@ -2738,7 +2914,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 &&
@@ -2823,9 +2999,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) => {
@@ -2866,7 +3042,7 @@ 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;
+        const agentId = message.payload?.agentId;
         if (agentId !== agent.id) {
             return;
         }
@@ -3008,15 +3184,25 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             }
             // 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
@@ -3033,6 +3219,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 cost,
                 timestamp: new Date().toISOString(),
             };
+            if (shouldClearHeartbeat) {
+                clearHeartbeatMessages();
+            }
             if (type === "ContentChunk" || type === "contentChunk") {
                 handleContentChunk(agentStreamMessage, agent);
             }
@@ -3042,6 +3231,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             else if (type === "ToolResult" || type === "toolResult") {
                 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;
@@ -3051,10 +3243,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,
@@ -3062,10 +3252,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;
@@ -3091,14 +3281,11 @@ 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" ||
-                    normalizedStatus === "stopped" ||
-                    normalizedStatus === "Stopped") {
+                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;
@@ -3201,6 +3388,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) {
@@ -3233,23 +3421,39 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     return;
                 }
                 // Handle waiting states explicitly
-                if (statusData?.state === "WaitingForApproval" ||
-                    statusData?.state === "waitingForApproval") {
+                if (normalizedStatus === "waitingForApproval") {
+                    setPendingBrowserCaptureDialogType(null);
                     setAgent((prev) => prev ? { ...prev, status: "waitingForApproval" } : prev);
                     setIsConnecting(false);
                     setIsWaitingForResponse(false);
                     setIsAgentThinking(false);
                     return;
                 }
-                if (statusData?.state === "WaitingForInput" ||
-                    statusData?.state === "waitingForInput") {
-                    setAgent((prev) => prev ? { ...prev, status: "waitingForInput" } : prev);
+                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 (statusData?.state === "CostLimitReached") {
+                if (normalizedStatus === "costLimitReached") {
+                    setPendingBrowserCaptureDialogType(null);
                     const totalCost = Number(statusData.totalCost) || 0;
                     const costLimit = Number(statusData.costLimit) || agent?.costLimit || 0;
                     setCostLimitExceeded({
@@ -3267,7 +3471,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 };
@@ -3281,10 +3485,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;
@@ -3296,10 +3500,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
@@ -3322,20 +3526,8 @@ 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") {
+                if (normalizedStatus === "running") {
                     // Update agent status to running
                     setAgent((prev) => (prev ? { ...prev, status: "running" } : prev));
                     setIsWaitingForResponse(true);
@@ -3344,8 +3536,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     return;
                 }
                 // Handle "Error" state
-                if (normalizedStatus === "error" || normalizedStatus === "Error") {
+                if (normalizedStatus === "error") {
                     const errorMsg = statusData?.statusMessage || statusData?.error || "Unknown error";
+                    clearHeartbeatMessages();
                     setAgent((prev) => prev
                         ? { ...prev, status: "error", statusMessage: errorMsg }
                         : prev);
@@ -3365,6 +3558,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
@@ -3391,6 +3585,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         if (messageType === "agent:run: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);
@@ -3405,7 +3600,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
     }, [
         agent,
+        clearHeartbeatMessages,
         handleContentChunk,
+        handleHeartbeatMessage,
         handleToolCall,
         handleToolResult,
         onAgentUpdate,
@@ -3611,9 +3808,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             }
             setTimeout(() => {
                 if (request.dialogType === "questionnaire") {
-                    inlineDialogContainerRef.current?.scrollIntoView({
-                        block: "start",
-                    });
+                    scrollToBottomRefForDialogs.current?.();
                     return;
                 }
                 scrollToBottomRefForDialogs.current?.();
@@ -3681,27 +3876,34 @@ 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)
+            ? profiles.find((p) => p.id?.toLowerCase() === normalizedProfileId)
+            : undefined;
+        if (!candidate) {
+            setActiveProfile(undefined);
             return;
+        }
         // Keep active profile in sync whenever the matching entry in `profiles` changes —
-        // not only when the profile id changes. Otherwise allowedSkills (and similar fields)
+        // 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((p.allowedSkills ?? []).map((s) => [
-                String(s?.id ?? ""),
-                String(s?.name ?? ""),
-            ]));
+            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?.profileId, agentStub.profileId]);
+    }, [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(() => {
@@ -3792,6 +3994,26 @@ 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))
@@ -3993,24 +4215,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
             };
             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
@@ -4251,16 +4473,17 @@ 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
             };
             console.log("[AgentTerminal] Calling startAgent API for quick message");
@@ -4685,6 +4908,70 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         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 {
@@ -4817,8 +5104,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         // 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)
@@ -4897,12 +5187,46 @@ 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 errorMessage = (isErrorStatus ? currentAgent?.statusMessage : null) || error;
+        if (!errorMessage)
             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 })] })] }) }));
+        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 })] })] }) }));
     };
+    const renderBrowserClaimBanner = (variant = "inline") => {
+        if (!agent?.id || !editContext?.sessionId)
+            return null;
+        if (!isClaimedByCurrentSession &&
+            !isClaimedByAnotherBrowser &&
+            !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;
+    useEffect(() => {
+        if (agent?.status !== "waitingForInput") {
+            setPendingBrowserCaptureDialogType(null);
+        }
+    }, [agent?.status]);
     const renderInlineDialogContent = () => {
         if (!activeInlineDialog)
             return null;
@@ -4962,10 +5286,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             const summaryOperations = latestSummaryAssistantGroup
                 ? getOperationsForMessageGroup(summaryMessages, agentOperations)
                 : [];
-            return (_jsxs("div", { className: `flex h-full min-h-0 flex-col ${className || ""}`, children: [_jsxs("div", { ref: messagesContainerRef, className: "flex-1 overflow-y-auto", onScroll: handleScroll, children: [error &&
+            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: 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(), 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, error: error || undefined, defaultCollapseJson: defaultCollapseJson, profileSvgIcon: activeProfile?.svgIcon, agentId: agent?.id || agentStub.id, agentName: activeProfile?.agentName ||
+                                                __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, onQuickAction: (action) => {
                                         const text = (action.prompt ||
@@ -4989,7 +5313,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 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: 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 ||
@@ -5076,7 +5400,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         })()
         : null;
     const fullModeInlineDialog = displayMode === "full" ? renderInlineDialogContent() : null;
-    const fullModeUpperContent = (_jsxs("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: [_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 })] })] }) })), 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 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(() => {
@@ -5090,8 +5414,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                     }
                                 }, 0);
                             } })) })), 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: 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: [(() => {
+                                        __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;
@@ -5099,6 +5423,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
@@ -5115,7 +5442,7 @@ 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, defaultCollapseJson: defaultCollapseJson, 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) => {
                                                 const text = (action.prompt ||
@@ -5161,7 +5488,7 @@ 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 ||
@@ -5220,10 +5547,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 if (qp.data) {
                                     try {
                                         const parsed = JSON.parse(qp.data);
-                                        triggerName =
-                                            parsed?.TriggerName?.trim() ||
-                                                parsed?.triggerName?.trim() ||
-                                                "";
+                                        triggerName = parsed?.triggerName?.trim() || "";
                                     }
                                     catch {
                                         // Ignore invalid JSON metadata and render as regular queued prompt.
@@ -5337,13 +5661,12 @@ 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";
-                                                setMode(nextMode);
                                                 const current = agentMetadata || {};
                                                 const nextMeta = {
                                                     ...current,
@@ -5351,6 +5674,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                 };
                                                 try {
                                                     if (!agent?.id || agent.status === "new") {
+                                                        setMode(nextMode);
                                                         setAgentMetadata(nextMeta);
                                                         pendingSettingsRef.current = {
                                                             ...(pendingSettingsRef.current || {}),
@@ -5358,13 +5682,18 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                         };
                                                         return;
                                                     }
-                                                    await updateAgentSettings(agent.id, {
+                                                    const result = await updateAgentSettings(agent.id, {
                                                         mode: nextMode,
                                                     });
+                                                    if (result.success === false || result.updates?.mode === false) {
+                                                        throw new Error("Mode change was not applied");
+                                                    }
+                                                    setMode(nextMode);
                                                     setAgentMetadata(nextMeta);
                                                     setAgent((prev) => prev
                                                         ? {
                                                             ...prev,
+                                                            mode: nextMode,
                                                             metadata: JSON.stringify(nextMeta),
                                                         }
                                                         : prev);
@@ -5411,6 +5740,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                                 setAgent((prev) => prev
                                                                                     ? {
                                                                                         ...prev,
+                                                                                        profileId: nextProfile.id,
+                                                                                        profileName: nextProfile.name,
                                                                                         metadata: JSON.stringify({
                                                                                             ...(agentMetadata || {}),
                                                                                             profile: nextProfile.name,
@@ -5475,15 +5806,17 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                                                     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 allowed skills are selected"
-                                                                                                        : "No skills available for this profile" }))] }) })] })] }), selectedSkillIds.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1", children: selectedSkillIds.map((skillId) => {
+                                                                                                        ? "All available/allowed skills are selected"
+                                                                                                        : "No available or allowed skills 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 }) }), backendAssignedSkillSet.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: () => {
+                                                                                        }, 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: () => 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) => {
+                                                                        }) }))] }), _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: [isNewAgent && (_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: isNewAgent
+                                                                                ? "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
@@ -5496,10 +5829,14 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                                                     ]
                                                                                                         .filter(Boolean)
                                                                                                         .join(" · ") }))] }, `${group.key}-${allowance.operationType}-${pathLabel}-${index}`));
-                                                                                    })] }, group.key)) : null) })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "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) => {
+                                                                                    })] }, group.key)) : null) })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isNewAgent
+                                                                                ? "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: "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: () => {
+                                                                            }) })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isNewAgent
+                                                                                ? "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)