@parhelia/core 0.1.12523 → 0.1.12554

package/dist/editor/ai/AgentTerminal.js

@@ -1,7 +1,7 @@
 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, claimAgentBrowser, assignAgentSkill, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkillCatalog, getAgentAvailableTools, getAgentOperationAllowances, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, releaseAgentBrowser, revokeAgentSkill, } from "../services/agentService";
+import { getAgent, startAgent, claimAgentBrowser, assignAgentSkill, persistDraftAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkillCatalog, getAgentAvailableTools, getAgentOperationAllowances, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, releaseAgentBrowser, revokeAgentSkill, } from "../services/agentService";
 import { parseAgentStatus } from "../services/agentStatus";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { localStorageService } from "../services/localStorageService";
@@ -31,14 +31,14 @@ 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" }),
+    h1: (props) => (_jsx("h1", { ...props, className: "mb-2 text-sm leading-5 font-semibold text-gray-900" })),
+    h2: (props) => (_jsx("h2", { ...props, className: "mb-1.5 text-[13px] leading-5 font-semibold text-gray-900" })),
+    h3: (props) => (_jsx("h3", { ...props, className: "mb-1 text-[12px] leading-5 font-semibold text-gray-900" })),
+    h4: (props) => (_jsx("h4", { ...props, className: "mb-1 text-[12px] leading-5 font-medium text-gray-800" })),
+    p: (props) => (_jsx("p", { ...props, className: "my-1 text-[12px] leading-5 text-gray-700" })),
     ul: (props) => (_jsx("ul", { ...props, className: "my-2 ml-5 list-disc space-y-1 text-[12px] leading-5 text-gray-700" })),
     ol: (props) => (_jsx("ol", { ...props, className: "my-2 ml-5 list-decimal space-y-1 text-[12px] leading-5 text-gray-700" })),
-    li: (props) => _jsx("li", { ...props, className: "text-[12px] leading-5 text-gray-700" }),
+    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 })),
 };
@@ -149,25 +149,36 @@ function toUserFacingAgentErrorMessage(value) {
     if (!normalizedValue)
         return "";
     const trimmed = normalizedValue.trim();
-    const maybeJson = trimmed.startsWith("{") || trimmed.startsWith("[") || trimmed.startsWith('"');
+    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)
+                : typeof parsed?.error === "object" && parsed?.error
+                    ? (() => {
+                        const errObj = parsed.error;
+                        // Extract detailed message from metadata.raw (OpenRouter-style nested errors)
+                        if (typeof errObj.metadata?.raw ===
+                            "string") {
+                            return String(errObj.metadata.raw);
+                        }
+                        // Fall back to error.message
+                        if (typeof errObj.message === "string") {
+                            return errObj.message;
+                        }
+                        return "";
+                    })()
+                    : 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
                                     : "";
             if (structuredMessage.trim()) {
                 value = structuredMessage;
@@ -607,7 +618,8 @@ const groupConsecutiveMessages = (agentMessages) => {
             // Add user message
             groups.push({ type: "user", messages: [message] });
         }
-        else if (message.messageType === "heartbeat" || message.role === "system") {
+        else if (message.messageType === "heartbeat" ||
+            message.role === "system") {
             if (currentAssistantGroup.length > 0) {
                 groups.push({
                     type: "assistant-group",
@@ -720,6 +732,35 @@ const stringifyToolField = (value) => {
         return String(value);
     }
 };
+const parseToolResultValue = (value) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (typeof value === "object") {
+        return value;
+    }
+    if (typeof value !== "string") {
+        return String(value);
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    try {
+        let parsed = JSON.parse(trimmed);
+        if (typeof parsed === "string" &&
+            (parsed.startsWith("{") || parsed.startsWith("["))) {
+            parsed = JSON.parse(parsed);
+        }
+        if (parsed && typeof parsed === "object") {
+            return parsed;
+        }
+    }
+    catch {
+        // Fall back to the original string when the payload is plain text.
+    }
+    return value;
+};
 const getFirstToolCallEnvelope = (data) => {
     if (!data || typeof data !== "object")
         return undefined;
@@ -779,13 +820,14 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
                 ? agentMessage.toolCalls.map((toolCall) => {
                     const isPruned = !!toolCall.isPruned ||
                         /^PRUNED$/i.test(toolCall.functionError || "");
+                    const displayResult = parseToolResultValue(toolCall.functionResultRichContent) ?? toolCall.functionResult;
                     return {
                         id: toolCall.toolCallId,
                         displayName: toolCall.functionName,
                         function: {
                             name: toolCall.functionName,
                             arguments: toolCall.functionArguments,
-                            result: toolCall.functionResult,
+                            result: displayResult,
                             error: toolCall.functionError,
                         },
                         // Pass through approval info if present on the tool call
@@ -798,7 +840,7 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
                         // Tool call is streaming if message is not completed and tool call has no result yet
                         isStreaming: !agentMessage.isCompleted &&
                             !toolCall.isCompleted &&
-                            !toolCall.functionResult &&
+                            !displayResult &&
                             !toolCall.functionError &&
                             !isPruned,
                         // Pass through message IDs for approval/rejection events
@@ -1103,7 +1145,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [toolsSectionExpanded, setToolsSectionExpanded] = useState(false);
     const [allowancesSectionExpanded, setAllowancesSectionExpanded] = useState(false);
     const [subscribedTriggersSectionExpanded, setSubscribedTriggersSectionExpanded,] = useState(false);
-    const isNewAgent = agent?.status === "new";
+    const isPersistedAgent = !!agent?.userId;
+    const isLocalOnlyDraftAgent = agent?.status === "new" && !isPersistedAgent;
     const hasSpawnedAgents = useMemo(() => {
         if (!agentMetadata)
             return false;
@@ -1291,7 +1334,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     }, [activeProfile?.preloadSkills]);
     const autoAssignedSkillIds = useMemo(() => {
         const preloadedIdSet = new Set(preloadedSkillIds.map((id) => id.toLowerCase()));
-        const all = backendAssignedSkillIds.filter((id) => preloadedIdSet.has(id.toLowerCase()));
+        const all = isLocalOnlyDraftAgent
+            ? preloadedSkillIds
+            : backendAssignedSkillIds.filter((id) => preloadedIdSet.has(id.toLowerCase()));
         const seen = new Set();
         const unique = [];
         for (const id of all) {
@@ -1302,9 +1347,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             unique.push(id);
         }
         return unique;
-    }, [backendAssignedSkillIds, preloadedSkillIds]);
+    }, [backendAssignedSkillIds, isLocalOnlyDraftAgent, preloadedSkillIds]);
     const selectedSkillIds = useMemo(() => {
-        const all = [...autoAssignedSkillIds, ...metadataSelectedSkillIds];
+        const all = [
+            ...autoAssignedSkillIds,
+            ...backendAssignedSkillIds,
+            ...metadataSelectedSkillIds,
+        ];
         const seen = new Set();
         const unique = [];
         for (const id of all) {
@@ -1315,7 +1364,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             unique.push(id);
         }
         return unique;
-    }, [autoAssignedSkillIds, metadataSelectedSkillIds]);
+    }, [autoAssignedSkillIds, backendAssignedSkillIds, metadataSelectedSkillIds]);
     useEffect(() => {
         let active = true;
         if (!showAgentSettings) {
@@ -1323,7 +1372,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 active = false;
             };
         }
-        if (!agent?.id || agent.status === "new") {
+        if (!agent?.id || isLocalOnlyDraftAgent) {
             setTriggerSubscriptions([]);
             setTriggerSubscriptionsLoading(false);
             setTriggerSubscriptionsError(null);
@@ -1407,6 +1456,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         showAgentSettings,
         agent?.id,
         agent?.status,
+        agent?.userId,
         agent?.profileId,
         mode,
         selectedSkillIds,
@@ -1455,8 +1505,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const autoAssignedSkillSet = useMemo(() => new Set(autoAssignedSkillIds.map((id) => id.toLowerCase())), [autoAssignedSkillIds]);
     const previewAvailableTools = useMemo(() => {
         const baseToolNames = mode === "read-only"
-            ? activeProfile?.readOnlyToolNames ?? []
-            : activeProfile?.allowedToolNames ?? [];
+            ? (activeProfile?.readOnlyToolNames ?? [])
+            : (activeProfile?.allowedToolNames ?? []);
         const toolNames = new Set();
         for (const toolName of baseToolNames) {
             const normalized = String(toolName || "").trim();
@@ -1479,13 +1529,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         mode,
         selectedSkills,
     ]);
-    const displayedAvailableTools = isNewAgent
+    const displayedAvailableTools = isLocalOnlyDraftAgent
         ? previewAvailableTools
         : availableTools;
-    const displayedAvailableToolsLoading = isNewAgent
+    const displayedAvailableToolsLoading = isLocalOnlyDraftAgent
         ? false
         : availableToolsLoading;
-    const displayedAvailableToolsError = isNewAgent ? null : availableToolsError;
+    const displayedAvailableToolsError = isLocalOnlyDraftAgent
+        ? null
+        : availableToolsError;
     // Remove deprecated cost limit fields from metadata to avoid confusion with agent/profile settings
     const sanitizeAgentMetadata = useCallback((meta) => {
         try {
@@ -1525,7 +1577,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             return;
         }
         const current = agentMetadata || {};
-        const currentAdditionalData = current.additionalData || {};
+        const currentAdditionalData = current.additionalData ||
+            {};
         const nextAdditionalData = Object.fromEntries(Object.entries(currentAdditionalData).filter(([key]) => key.toLowerCase() !== "skillids"));
         const next = {
             ...current,
@@ -1551,6 +1604,86 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         setAgent,
         setAgentMetadata,
     ]);
+    const parsePersistedAgentContext = (contextJson) => {
+        try {
+            if (!contextJson)
+                return null;
+            const parsedContext = JSON.parse(contextJson);
+            if (!parsedContext || typeof parsedContext !== "object") {
+                return null;
+            }
+            return sanitizeAgentMetadata(parsedContext);
+        }
+        catch {
+            return null;
+        }
+    };
+    const buildDraftPersistenceContext = () => {
+        let effectiveContext = agentMetadata;
+        try {
+            const normalizedAgentProfileId = agent?.profileId?.toLowerCase();
+            const profile = activeProfile ||
+                profiles.find((p) => p.id?.toLowerCase() === normalizedAgentProfileId);
+            const isLiveMode = profile?.editorContextMode === "live";
+            if (isLiveMode && typeof buildCurrentContext === "function") {
+                const freshContext = buildCurrentContext();
+                if (freshContext) {
+                    effectiveContext = {
+                        ...(agentMetadata || {}),
+                        items: freshContext.items,
+                        currentItemId: freshContext.currentItemId,
+                        components: freshContext.components,
+                        field: freshContext.field,
+                        activeWorkspace: freshContext.activeWorkspace,
+                        hasPageLoaded: freshContext.hasPageLoaded,
+                        openSidebars: freshContext.openSidebars,
+                    };
+                }
+            }
+        }
+        catch (e) {
+            console.warn("[AgentTerminal] Failed to compute draft context:", e);
+        }
+        return sanitizeAgentMetadata(effectiveContext || null);
+    };
+    const ensureDraftAgentPersisted = async () => {
+        if (!agent?.id) {
+            throw new Error("Agent not ready. Please try again.");
+        }
+        if (!isLocalOnlyDraftAgent) {
+            return agent;
+        }
+        const requestSettings = getPendingRequestSettings();
+        if (!requestSettings.profileId) {
+            throw new Error("Select an agent profile before adding a skill.");
+        }
+        const effectiveContext = buildDraftPersistenceContext();
+        const persistedAgent = await persistDraftAgent({
+            agentId: agent.id,
+            sessionId: editContext?.sessionId || undefined,
+            profileId: requestSettings.profileId,
+            mode: requestSettings.mode,
+            model: requestSettings.modelId || undefined,
+            name: agent.name,
+            context: effectiveContext,
+        });
+        pendingSettingsRef.current = null;
+        const persistedMetadata = parsePersistedAgentContext(persistedAgent.agentContext) ??
+            effectiveContext;
+        setAgentMetadata(persistedMetadata ? { ...persistedMetadata } : null);
+        setAgent((prev) => {
+            const next = {
+                ...(prev || {}),
+                ...persistedAgent,
+            };
+            if (prev?.messages?.length && !persistedAgent.messages?.length) {
+                next.messages = prev.messages;
+            }
+            return next;
+        });
+        onAgentUpdate?.(persistedAgent);
+        return persistedAgent;
+    };
     const handleAddSkill = useCallback(async (skillId) => {
         if (selectedSkillSet.has(skillId.toLowerCase()))
             return;
@@ -1558,7 +1691,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             return;
         try {
             setSkillActionError(null);
-            await assignAgentSkill({ agentId: agent.id, skillId });
+            const persistedAgent = await ensureDraftAgentPersisted();
+            await assignAgentSkill({ agentId: persistedAgent.id, skillId });
             setAgent((prev) => {
                 if (!prev)
                     return prev;
@@ -1584,6 +1718,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         agent?.id,
         assignAgentSkill,
         clearLegacySelectedSkillsFromMetadata,
+        ensureDraftAgentPersisted,
         getSkillActionErrorMessage,
         setAgent,
         selectedSkillSet,
@@ -2297,7 +2432,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         if (toolCallMessageId && message.data && toolCallId) {
             const toolCallError = message.data.functionError || message.data.error || "";
             const isPruned = !!message.data?.isPruned || /^PRUNED$/i.test(String(toolCallError));
-            const toolCallCreatedDate = message.data.createdDate || message.timestamp || new Date().toISOString();
+            const toolCallCreatedDate = message.data.createdDate ||
+                message.timestamp ||
+                new Date().toISOString();
             const toolCall = {
                 id: toolCallId,
                 messageId: toolCallMessageId,
@@ -2306,6 +2443,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 functionName: extractedToolCall.functionName,
                 functionArguments: extractedToolCall.functionArguments,
                 functionResult: message.data.functionResult || message.data.result || "",
+                functionResultRichContent: message.data.richContent || undefined,
                 functionError: toolCallError,
                 isPruned,
                 isCompleted: false,
@@ -2355,12 +2493,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     newArgsText !== existingArgsText) ||
                     (existingArgsText === "{}" && newArgsText !== "{}");
                 const hasNewResult = toolCall.functionResult && !existingToolCall.functionResult;
+                const hasNewRichContent = toolCall.functionResultRichContent &&
+                    !existingToolCall.functionResultRichContent;
                 const hasNewError = toolCall.functionError && !existingToolCall.functionError;
                 const hasNewApprovalInfo = toolCall.requiresApproval && !existingToolCall.requiresApproval;
                 const hasNewDbMessageId = toolCall.dbMessageId && !existingToolCall.dbMessageId;
                 // Only update if there's meaningful new data
                 if (hasMoreCompleteArgs ||
                     hasNewResult ||
+                    hasNewRichContent ||
                     hasNewError ||
                     hasNewApprovalInfo ||
                     hasNewDbMessageId) {
@@ -2380,6 +2521,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                         ? newArgsText
                                         : existingArgsText || existing.functionArguments,
                                     functionResult: toolCall.functionResult || existing.functionResult,
+                                    functionResultRichContent: toolCall.functionResultRichContent ||
+                                        existing.functionResultRichContent,
                                     functionError: toolCall.functionError || existing.functionError,
                                     requiresApproval: toolCall.requiresApproval || existing.requiresApproval,
                                 };
@@ -2540,6 +2683,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 ? nextArgsText
                                 : existingToolCall.functionArguments,
                             functionResult: message.data.functionResult || message.data.result || "",
+                            functionResultRichContent: message.data.richContent ||
+                                existingToolCall.functionResultRichContent,
                             functionError: message.data.functionError || message.data.error || "",
                             isCompleted: true,
                             responseTimeMs: message.data.responseTimeMs,
@@ -2556,7 +2701,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 }
                 else if (message.data && resultToolCallId && resultMessageId) {
                     // Create new tool call if it doesn't exist
-                    const toolCallCreatedDate = message.data.createdDate || message.timestamp || new Date().toISOString();
+                    const toolCallCreatedDate = message.data.createdDate ||
+                        message.timestamp ||
+                        new Date().toISOString();
                     const toolCall = {
                         id: resultToolCallId,
                         messageId: resultMessageId,
@@ -2564,6 +2711,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                         functionName: extractedToolCall.functionName,
                         functionArguments: extractedToolCall.functionArguments,
                         functionResult: message.data.functionResult || message.data.result || "",
+                        functionResultRichContent: message.data.richContent || undefined,
                         functionError: message.data.functionError || message.data.error || "",
                         isCompleted: true,
                         responseTimeMs: message.data.responseTimeMs,
@@ -2658,7 +2806,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             // The agent might have been persisted after sending a prompt
             // Only treat as "new" if backend returns 404
             const hasExistingMessages = messagesRef.current.length > 0;
-            if (agentStub.status === "new" && !hasExistingMessages) {
+            if (agentStub.status === "new" &&
+                !agentStub.userId &&
+                !hasExistingMessages) {
                 // Only initialize as new if we have no messages yet (initial mount)
                 // Derive initial profile from provided metadata if present
                 const initialProfileIdFromMeta = (() => {
@@ -4004,14 +4154,20 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 return prev;
             return candidate;
         });
-    }, [profiles, agent?.id, agent?.profileId, agentStub.id, 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(() => {
-        if (!agent?.id || agent.status === "new") {
+        if (!agent?.id || isLocalOnlyDraftAgent) {
             setQueuedPrompts([]);
         }
-    }, [agent?.id, agent?.status]);
+    }, [agent?.id, isLocalOnlyDraftAgent]);
     // Update selected model when the active profile or agent model changes
     useEffect(() => {
         if (!activeProfile)
@@ -5266,9 +5422,20 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             try {
                                 // Extend cost limit - backend will automatically resume the agent
                                 const result = await updateAgentCostLimit(agent.id, "extend");
-                                // Update the agent's cost limit in local state
+                                // Update the agent's cost limit and clear the costLimitReached
+                                // status in local state so the useEffect watcher doesn't
+                                // immediately re-show the banner before the backend status
+                                // update arrives.
                                 if (result.success && result.costLimit !== undefined) {
-                                    setAgent((prev) => prev ? { ...prev, costLimit: result.costLimit } : prev);
+                                    setAgent((prev) => prev
+                                        ? {
+                                            ...prev,
+                                            costLimit: result.costLimit,
+                                            status: prev.status === "costLimitReached"
+                                                ? "running"
+                                                : prev.status,
+                                        }
+                                        : prev);
                                 }
                                 // Clear the banner and set waiting state
                                 // Agent will resume automatically via backend's ResumeAgentAsync
@@ -5289,9 +5456,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const renderErrorBanner = () => {
         const currentAgent = agent || agentStub;
         const isErrorStatus = currentAgent?.status === "error";
-        const errorMessage = (isErrorStatus ? currentAgent?.statusMessage : null) || error;
-        if (!errorMessage)
+        const rawErrorMessage = (isErrorStatus ? currentAgent?.statusMessage : null) || error;
+        if (!rawErrorMessage)
             return null;
+        // Clean the error message (statusMessage from DB may contain raw JSON)
+        const errorMessage = toUserFacingAgentErrorMessage(rawErrorMessage) || rawErrorMessage;
         return (_jsx("div", { className: "m-3 rounded border border-red-300 bg-red-50 p-3 text-[11px] text-red-900", "data-testid": "agent-error-banner", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "mt-0.5 h-4 w-4 shrink-0 text-red-500", strokeWidth: 1 }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "mb-1 font-semibold", children: "Agent Error" }), _jsx("div", { className: "text-red-800", children: errorMessage })] })] }) }));
     };
     const renderBrowserClaimBanner = (variant = "inline") => {
@@ -5326,7 +5495,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const inlineBrowserClaimBanner = null;
     const browserCaptureInlinePrompt = isPendingBrowserCaptureWait && !isClaimedByCurrentSession
         ? {
-            toolNames: ["capture-page-screenshot", "capture-page-dom"],
+            toolNames: [
+                "capture-page-screenshot",
+                "capture-parhelia-ui-screenshot",
+                "capture-page-dom",
+            ],
             label: isClaimedByAnotherBrowser
                 ? "Attached in another browser"
                 : "No browser attached",
@@ -5793,7 +5966,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                     mode: nextMode,
                                                 };
                                                 try {
-                                                    if (!agent?.id || agent.status === "new") {
+                                                    if (!agent?.id || isLocalOnlyDraftAgent) {
                                                         setMode(nextMode);
                                                         setAgentMetadata(nextMeta);
                                                         pendingSettingsRef.current = {
@@ -5805,7 +5978,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                     const result = await updateAgentSettings(agent.id, {
                                                         mode: nextMode,
                                                     });
-                                                    if (result.success === false || result.updates?.mode === false) {
+                                                    if (result.success === false ||
+                                                        result.updates?.mode === false) {
                                                         throw new Error("Mode change was not applied");
                                                     }
                                                     setMode(nextMode);
@@ -5826,13 +6000,28 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                 if (!open) {
                                                     setShowSkillPicker(false);
                                                 }
-                                            }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "xs", variant: "outline", className: "h-5 rounded border px-1.5 text-[11px] text-gray-600", "data-testid": "agent-settings-popover-trigger", children: [_jsx(Settings2, { className: "mr-1 h-3 w-3", strokeWidth: 1 }), "Agent settings"] }) }), _jsx(PopoverContent, { className: "w-80 p-3", align: "start", children: _jsxs("div", { className: "space-y-3", children: [profiles?.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Agent profile" }), _jsx(Select, { size: "xs", maxWidth: 300, searchable: profiles.length > 5, searchPlaceholder: "Filter profiles...", className: "h-6 w-full rounded border px-1.5 text-[11px] text-gray-500", value: activeProfile?.id || "", options: profileOptions, "data-testid": "agent-profile-selector", onValueChange: async (val) => {
+                                            }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "xs", variant: "outline", className: "h-5 rounded border px-1.5 text-[11px] text-gray-600", "data-testid": "agent-settings-popover-trigger", children: [_jsx(Settings2, { className: "mr-1 h-3 w-3", strokeWidth: 1 }), "Agent settings"] }) }), _jsx(PopoverContent, { className: "w-80 p-3", align: "start", onInteractOutside: (e) => {
+                                                        const target = e.target;
+                                                        if (target?.closest('[data-help-panel="true"]')) {
+                                                            e.preventDefault();
+                                                        }
+                                                    }, onPointerDownOutside: (e) => {
+                                                        const target = e.target;
+                                                        if (target?.closest('[data-help-panel="true"]')) {
+                                                            e.preventDefault();
+                                                        }
+                                                    }, onFocusOutside: (e) => {
+                                                        const target = e.target;
+                                                        if (target?.closest('[data-help-panel="true"]')) {
+                                                            e.preventDefault();
+                                                        }
+                                                    }, children: _jsxs("div", { className: "space-y-3", children: [profiles?.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Agent profile" }), _jsx(Select, { size: "xs", maxWidth: 300, searchable: profiles.length > 5, searchPlaceholder: "Filter profiles...", className: "h-6 w-full rounded border px-1.5 text-[11px] text-gray-500", value: activeProfile?.id || "", options: profileOptions, "data-testid": "agent-profile-selector", onValueChange: async (val) => {
                                                                             const nextProfile = profiles.find((x) => x.id === val);
                                                                             if (!nextProfile)
                                                                                 return;
                                                                             setActiveProfile(nextProfile);
                                                                             try {
-                                                                                if (agent?.id && agent.status !== "new") {
+                                                                                if (agent?.id && !isLocalOnlyDraftAgent) {
                                                                                     await updateAgentSettings(agent.id, {
                                                                                         profileId: nextProfile.id,
                                                                                         profileName: nextProfile.name,
@@ -5884,13 +6073,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                                 }, "data-testid": "agent-profile-edit-button", children: "Edit" }), _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 text-[10px] text-gray-500 hover:text-gray-700", onClick: () => {
                                                                                     void handleOpenProfileSettings();
                                                                                     setShowAgentSettings(false);
-                                                                                }, children: ["Open profile settings", _jsx(ExternalLink, { className: "h-2.5 w-2.5", strokeWidth: 1.5 })] })] }))] })), activeProfile?.models?.length ? (_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Model" }), _jsx(Select, { size: "xs", maxWidth: 300, searchable: activeProfile.models.length > 5, searchPlaceholder: "Filter models...", className: "h-6 w-full rounded border px-1.5 text-[11px] text-gray-500", value: selectedModelId || "", options: modelOptions, onValueChange: async (val) => {
+                                                                                }, children: ["Open profile settings", _jsx(ExternalLink, { className: "h-2.5 w-2.5", strokeWidth: 1.5 })] })] }))] })), activeProfile?.models?.length ? (_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Model" }), _jsx(Select, { "data-testid": "agent-model-selector", size: "xs", maxWidth: 300, searchable: activeProfile.models.length > 5, searchPlaceholder: "Filter models...", className: "h-6 w-full rounded border px-1.5 text-[11px] text-gray-500", value: selectedModelId || "", options: modelOptions, onValueChange: async (val) => {
                                                                             const nextId = val;
                                                                             setSelectedModelId(nextId);
                                                                             const modelName = activeProfile?.models?.find((m) => m.id === nextId)?.name || "";
                                                                             setAgent((prev) => prev ? { ...prev, model: modelName } : prev);
                                                                             try {
-                                                                                if (agent?.id && agent.status !== "new") {
+                                                                                if (agent?.id && !isLocalOnlyDraftAgent) {
                                                                                     await updateAgentSettings(agent.id, {
                                                                                         model: modelName,
                                                                                     });
@@ -5945,7 +6134,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                                         }, children: _jsx(ExternalLink, { className: "h-2.5 w-2.5", strokeWidth: 1.5 }) }), autoAssignedSkillSet.has(skillId.toLowerCase()) ? (_jsx("span", { className: "text-[9px] text-gray-500", children: "auto" })) : (_jsx("button", { type: "button", className: "rounded p-0.5 text-gray-500 hover:bg-gray-200 hover:text-gray-700", onClick: () => {
                                                                                             void handleRemoveSkill(skillId);
                                                                                         }, title: "Remove skill", "aria-label": `Remove ${skill?.name || skillId}`, children: _jsx(X, { className: "h-2.5 w-2.5", strokeWidth: 1 }) }))] }, skillId));
-                                                                        }) }))] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setToolsSectionExpanded((open) => !open), className: "mb-0.5 flex w-full items-center justify-between rounded px-0.5 py-0.5 text-left text-[11px] font-medium text-gray-700 hover:bg-gray-100/80", "aria-expanded": toolsSectionExpanded, "data-testid": "agent-tools-section-toggle", children: [_jsxs("span", { children: ["Available tools (", displayedAvailableTools.length, ")"] }), toolsSectionExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 })) : (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 }))] }), toolsSectionExpanded && (_jsx("div", { className: "max-h-36 overflow-y-auto rounded border border-gray-100 bg-gray-50/50 p-1", "data-testid": "agent-tools-section", children: displayedAvailableToolsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading available tools..." })) : displayedAvailableTools.length > 0 ? (_jsxs("div", { className: "space-y-0.5", children: [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
+                                                                        }) }))] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setToolsSectionExpanded((open) => !open), className: "mb-0.5 flex w-full items-center justify-between rounded px-0.5 py-0.5 text-left text-[11px] font-medium text-gray-700 hover:bg-gray-100/80", "aria-expanded": toolsSectionExpanded, "data-testid": "agent-tools-section-toggle", children: [_jsxs("span", { children: ["Available tools (", displayedAvailableTools.length, ")"] }), toolsSectionExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 })) : (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 }))] }), toolsSectionExpanded && (_jsx("div", { className: "max-h-36 overflow-y-auto rounded border border-gray-100 bg-gray-50/50 p-1", "data-testid": "agent-tools-section", children: displayedAvailableToolsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading available tools..." })) : displayedAvailableTools.length > 0 ? (_jsxs("div", { className: "space-y-0.5", children: [isLocalOnlyDraftAgent && (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Preview based on the current profile, mode, and selected skills." })), displayedAvailableTools.map((toolName) => (_jsx("div", { className: "rounded px-1 py-0.5 transition-colors hover:bg-white/60", "data-testid": "agent-tool-row", title: toolName, children: _jsx("div", { className: "truncate text-[10px] text-gray-700", children: toolName }) }, toolName)))] })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isLocalOnlyDraftAgent
                                                                                 ? "No available tools for this profile and mode"
                                                                                 : "No available tools" })) })), displayedAvailableToolsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: displayedAvailableToolsError }))] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setAllowancesSectionExpanded((open) => !open), className: "mb-0.5 flex w-full items-center justify-between rounded px-0.5 py-0.5 text-left text-[11px] font-medium text-gray-700 hover:bg-gray-100/80", "aria-expanded": allowancesSectionExpanded, "data-testid": "agent-allowances-section-toggle", children: [_jsxs("span", { children: ["Allowances (", allowancesTotalCount, ")"] }), allowancesSectionExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 })) : (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 }))] }), allowancesSectionExpanded && (_jsx("div", { className: "max-h-36 overflow-y-auto rounded border border-gray-100 bg-gray-50/50 p-1", "data-testid": "agent-allowances-section", children: operationAllowancesLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading allowances..." })) : hasAnyAllowances ? (_jsx("div", { className: "space-y-1", children: allowanceGroups.map((group) => group.rows.length > 0 ? (_jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "px-1 text-[9px] font-medium tracking-wide text-gray-400 uppercase", children: group.label }), group.rows.map((allowance, index) => {
                                                                                         const sourceLabel = formatAllowanceSource(allowance.source);
@@ -5960,12 +6149,12 @@ 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: isNewAgent
+                                                                                    })] }, group.key)) : null) })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isLocalOnlyDraftAgent
                                                                                 ? "Allowances are shown after the agent is created"
                                                                                 : "No active allowances" })) })), operationAllowancesError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: operationAllowancesError }))] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setSubscribedTriggersSectionExpanded((open) => !open), className: "mb-0.5 flex w-full items-center justify-between rounded px-0.5 py-0.5 text-left text-[11px] font-medium text-gray-700 hover:bg-gray-100/80", "aria-expanded": subscribedTriggersSectionExpanded, "data-testid": "agent-subscribed-triggers-section-toggle", children: [_jsx("span", { children: `Subscribed triggers (${activeTriggerSubscriptions.length})` }), subscribedTriggersSectionExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 })) : (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-gray-400", strokeWidth: 1.5 }))] }), subscribedTriggersSectionExpanded && (_jsx("div", { className: "max-h-28 overflow-y-auto rounded border border-gray-100 bg-gray-50/50 p-1", "data-testid": "agent-subscribed-triggers-section", children: triggerSubscriptionsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading subscribed triggers..." })) : activeTriggerSubscriptions.length > 0 ? (_jsx("div", { className: "space-y-0.5", children: activeTriggerSubscriptions.map((sub) => {
                                                                                 const filterText = (sub.filter || "").trim();
                                                                                 return (_jsxs("div", { className: "flex items-baseline gap-1.5 rounded px-1 py-0.5 transition-colors hover:bg-white/60", children: [_jsx("div", { className: "shrink-0 text-[10px] font-medium text-gray-700", children: sub.triggerName }), filterText.length > 0 && (_jsx("div", { className: "truncate text-[9px] text-gray-400", title: filterText, children: filterText }))] }, sub.id));
-                                                                            }) })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isNewAgent
+                                                                            }) })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: isLocalOnlyDraftAgent
                                                                                 ? "Subscribed triggers are shown after the agent is created"
                                                                                 : "No active trigger subscriptions" })) })), triggerSubscriptionsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: triggerSubscriptionsError }))] })] }) })] }), activeProfile?.prompts?.length ? (_jsxs(Popover, { open: showPredefined, onOpenChange: setShowPredefined, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "rounded p-1 hover:bg-gray-100", onClick: () => { }, title: "Predefined prompts", "aria-label": "Predefined prompts", type: "button", children: _jsx(Wand2, { className: "h-3 w-3", strokeWidth: 1 }) }) }), _jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: _jsx("div", { className: "max-h-56 overflow-y-auto p-2", children: activeProfile.prompts.map((p, index) => (_jsx("div", { className: "cursor-pointer rounded p-1.5 text-[10px] text-gray-700 hover:bg-gray-100", onClick: () => {
                                                                 setPrompt(p.prompt);