@parhelia/core 0.1.12556 → 0.1.12565

package/dist/editor/ai/Agents.js

@@ -3,9 +3,12 @@ import React, { useState, useRef, useEffect, useMemo } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Plus, X, MoreVertical } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { sanitizeSvg } from "../../lib/sanitize";
 import { getAgentStatusConfig } from "./AgentStatusBadge";
 import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { getActiveAgents, closeAgent as closeAgentService, } from "../services/agentService";
+import { isExecutingAgentStatus, isRunningAgentStatus, parseAgentStatus, shouldIgnoreReplayRunStart, } from "../services/agentStatus";
+import { toUserFacingAgentErrorMessage } from "../services/agentErrorMessage";
 import { AgentTerminal } from "./AgentTerminal";
 import { useEditContext } from "../client/editContext";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
@@ -17,6 +20,8 @@ import { AgentsView } from "../../agents-view/AgentsView";
 import { agentNeedsAttention } from "../../agents-view/AgentsInbox";
 import { SecretAgentIcon } from "../ui/Icons";
 import { Spinner } from "../ui/Spinner";
+import { localStorageService } from "../services/localStorageService";
+import { LicenseFeatures, useFeature } from "../../licensing";
 // function convertAgentMessagesToTerminalMessages(
 //   agentMessages: AgentChatMessage[],
 // ): Message[] {
@@ -41,6 +46,20 @@ import { Spinner } from "../ui/Spinner";
 //   }));
 // }
 const ACTIVE_AGENT_STORAGE_KEY = "editor.activeAgentId";
+const TASKBOARD_PROJECT_QUERY_KEY = "tbProjectId";
+const TASKBOARD_TASK_QUERY_KEY = "tbTaskId";
+function readTaskboardLinkageFromUrl() {
+    if (typeof window === "undefined") {
+        return {};
+    }
+    const params = new URLSearchParams(window.location.search);
+    const projectId = params.get(TASKBOARD_PROJECT_QUERY_KEY)?.trim() || "";
+    const taskId = params.get(TASKBOARD_TASK_QUERY_KEY)?.trim() || "";
+    return {
+        projectId: projectId || undefined,
+        taskId: taskId || undefined,
+    };
+}
 export const Agents = React.memo(function Agents({ closeButton, }) {
     const [agents, setAgents] = useState([]);
     const [activeAgentId, setActiveAgentId] = useState(""); // "" = show profile selector, null = show overview, string = agent ID
@@ -55,6 +74,7 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
     const [selectedProfileId, setSelectedProfileId] = useState("");
     const [loadingProfiles, setLoadingProfiles] = useState(false);
     const editContext = useEditContext();
+    const canUseAi = useFeature(LicenseFeatures.AI);
     // Group agents by profile for profile-based tabs
     const agentsGroupedByProfile = useMemo(() => {
         const profileMap = new Map();
@@ -133,14 +153,17 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
         setActiveAgentId(agentId);
         activeAgentIdRef.current = agentId;
         if (agentId) {
-            localStorage.setItem(ACTIVE_AGENT_STORAGE_KEY, agentId);
+            localStorageService.setString(ACTIVE_AGENT_STORAGE_KEY, agentId);
         }
         else {
-            localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+            localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
         }
     };
     // Open an agent from history (or switch to it if already open)
     const openAgentFromHistory = React.useCallback(async (agent) => {
+        if (!canUseAi) {
+            return;
+        }
         // Check if this agent is already open as a terminal
         // Use functional check pattern to get latest agents state
         let alreadyOpen = false;
@@ -195,11 +218,23 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
         };
         setAgents((prev) => [...prev, reopenedAgent]);
         setActiveAgentIdWithStorage(reopenedAgent.id);
-    }, []);
+    }, [canUseAi]);
     // Load agents from backend on mount
     useEffect(() => {
+        if (!canUseAi) {
+            setAgents([]);
+            setInactiveAgents([]);
+            setAvailableProfiles([]);
+            setActiveAgentId(null);
+            activeAgentIdRef.current = null;
+            setSelectedProfileId("");
+            setLoadingAgents(false);
+            setLoadingProfiles(false);
+            localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+            return;
+        }
         loadAgentsFromBackend();
-    }, []);
+    }, [canUseAi]);
     // When no agents are present (empty state) or when switching to the profile selector,
     // keep selection state consistent without triggering extra fetches.
     useEffect(() => {
@@ -214,6 +249,11 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
     }, [activeAgentId, agents.length]);
     // Function to reload profiles
     const reloadProfiles = React.useCallback(async () => {
+        if (!canUseAi) {
+            setAvailableProfiles([]);
+            setLoadingProfiles(false);
+            return;
+        }
         try {
             setLoadingProfiles(true);
             const profiles = await loadAiProfiles(editContext?.currentItemDescriptor);
@@ -225,10 +265,15 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
         finally {
             setLoadingProfiles(false);
         }
-    }, [editContext?.currentItemDescriptor]);
+    }, [canUseAi, editContext?.currentItemDescriptor]);
     // Ensure profiles are loaded once for terminals (centralized load)
     // Only load on mount - profiles are cached and will be reloaded via websocket when changed
     useEffect(() => {
+        if (!canUseAi) {
+            setAvailableProfiles([]);
+            setLoadingProfiles(false);
+            return;
+        }
         let cancelled = false;
         (async () => {
             try {
@@ -250,10 +295,10 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             cancelled = true;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Only run on mount - profiles reload via websocket when changed
+    }, [canUseAi]); // Only run on mount - profiles reload via websocket when changed
     // Listen for agent profile changes via websocket (when profiles are updated in Sitecore)
     useEffect(() => {
-        if (!editContext?.addSocketMessageListener)
+        if (!canUseAi || !editContext?.addSocketMessageListener)
             return;
         const removeListener = editContext.addSocketMessageListener((message) => {
             if (message.type === "agent-profiles-changed") {
@@ -263,9 +308,11 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
         return () => {
             removeListener();
         };
-    }, [editContext?.addSocketMessageListener, reloadProfiles]);
+    }, [canUseAi, editContext?.addSocketMessageListener, reloadProfiles]);
     // Listen for external requests to add a new agent (e.g., AI command)
     useEffect(() => {
+        if (!canUseAi)
+            return;
         const handleAddNewAgent = (ev) => {
             let initialMetadata = undefined;
             try {
@@ -284,9 +331,11 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
         };
         window.addEventListener("editor:addNewAgent", handleAddNewAgent);
         return () => window.removeEventListener("editor:addNewAgent", handleAddNewAgent);
-    }, []);
+    }, [canUseAi]);
     // Listen for external requests to select an existing open agent without switching views
     useEffect(() => {
+        if (!canUseAi)
+            return;
         const handleSelectAgent = (ev) => {
             try {
                 const ce = ev;
@@ -302,9 +351,11 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
         };
         window.addEventListener("editor:selectAgent", handleSelectAgent);
         return () => window.removeEventListener("editor:selectAgent", handleSelectAgent);
-    }, [agents]);
+    }, [canUseAi, agents]);
     // Listen for external requests to open an existing agent
     useEffect(() => {
+        if (!canUseAi)
+            return;
         const handleOpenAgent = (ev) => {
             try {
                 const ce = ev;
@@ -321,9 +372,11 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
         };
         window.addEventListener("editor:openAgent", handleOpenAgent);
         return () => window.removeEventListener("editor:openAgent", handleOpenAgent);
-    }, [openAgentFromHistory]);
+    }, [canUseAi, openAgentFromHistory]);
     // Listen for external requests to create a new agent with a specific profile
     useEffect(() => {
+        if (!canUseAi)
+            return;
         const handleCreateAgentWithProfile = (ev) => {
             try {
                 const ce = ev;
@@ -336,17 +389,16 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                     profileName: profile.name,
                 };
                 // Add preconfigured todos as todoList if the profile has them
-                // Backend uses [PreserveNames] so check both camelCase and PascalCase
-                const preconfiguredTodos = profile.preconfiguredTodos || profile.PreconfiguredTodos;
+                const preconfiguredTodos = profile.preconfiguredTodos;
                 if (preconfiguredTodos && preconfiguredTodos.length > 0) {
                     additionalData.todoList = {
                         title: "Preconfigured Tasks",
                         items: preconfiguredTodos.map((todo) => ({
-                            id: todo.id || todo.Id || crypto.randomUUID(),
-                            title: todo.title || todo.Title,
+                            id: todo.id || crypto.randomUUID(),
+                            title: todo.title,
                             status: "pending",
-                            instructions: todo.instructions || todo.Instructions,
-                            agentProfileId: todo.agentProfileId || todo.AgentProfileId,
+                            instructions: todo.instructions,
+                            agentProfileId: todo.agentProfileId,
                         })),
                     };
                 }
@@ -383,10 +435,10 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
         };
         window.addEventListener("editor:createAgentWithProfile", handleCreateAgentWithProfile);
         return () => window.removeEventListener("editor:createAgentWithProfile", handleCreateAgentWithProfile);
-    }, []);
+    }, [canUseAi]);
     // Subscribe to websocket messages for agent events
     useEffect(() => {
-        if (!editContext?.addSocketMessageListener)
+        if (!canUseAi || !editContext?.addSocketMessageListener)
             return;
         const unsubscribe = editContext.addSocketMessageListener((message) => {
             // In single-agent mode, ignore events that would add or remove agents,
@@ -399,11 +451,12 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             }
             if (message.type === "agent:run:start") {
                 const payload = message.payload || {};
-                const agentId = payload.agentId || payload.AgentId;
-                const agentName = payload.agentName || payload.AgentName;
-                const autoSelect = payload.autoSelect || payload.AutoSelect;
-                const profileId = payload.profileId || payload.ProfileId;
-                const profileName = payload.profileName || payload.ProfileName;
+                const agentId = payload.agentId;
+                const agentName = payload.agentName;
+                const autoSelect = payload.autoSelect;
+                const profileId = payload.profileId;
+                const profileName = payload.profileName;
+                const timestamp = payload.timestamp;
                 if (!agentId || !agentName) {
                     console.warn("Invalid agent:run:start message payload:", message.payload);
                     return;
@@ -415,6 +468,9 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                         // Update existing agent name and profile info
                         const updatedAgents = [...prevAgents];
                         const existingAgent = updatedAgents[existingAgentIndex];
+                        if (shouldIgnoreReplayRunStart(existingAgent.status, existingAgent.updatedDate, typeof timestamp === "string" ? timestamp : undefined)) {
+                            return prevAgents;
+                        }
                         updatedAgents[existingAgentIndex] = {
                             ...existingAgent,
                             name: agentName,
@@ -446,9 +502,9 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             }
             else if (message.type === "agent:info:updated") {
                 const payload = message.payload || {};
-                const agentId = payload.agentId || payload.AgentId;
-                const agentName = payload.agentName || payload.AgentName;
-                const agentDescription = payload.agentDescription || payload.AgentDescription;
+                const agentId = payload.agentId;
+                const agentName = payload.agentName;
+                const agentDescription = payload.agentDescription;
                 if (!agentId)
                     return;
                 // Update the agent name and/or description in the tabs list
@@ -472,56 +528,11 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             else if (message.type === "agent:run:status") {
                 // Unified status updates (state only)
                 const payload = message.payload || {};
-                const agentId = payload.agentId || payload.AgentId;
-                const data = payload.data || payload.Data;
+                const agentId = payload.agentId;
+                const data = payload.data;
                 if (!agentId)
                     return;
-                const rawState = data?.state || data?.State;
-                const status = (() => {
-                    if (!rawState)
-                        return undefined;
-                    switch (rawState) {
-                        case "Running":
-                            return "running";
-                        case "WaitingForApproval":
-                            return "waitingForApproval";
-                        case "Completed":
-                            return "completed";
-                        case "Closed":
-                            return "closed";
-                        case "Error":
-                            return "error";
-                        case "Idle":
-                            return "idle";
-                        case "CostLimitReached":
-                            return "costLimitReached";
-                        // Transient notification states - not actual agent statuses
-                        case "toolApprovalGranted":
-                        case "toolApprovalRejected":
-                        case "toolApprovalsRequired":
-                        case "executingToolCalls":
-                        case "tokenUsage":
-                        case "streamOpen":
-                        case "contextChanged":
-                        case "queued":
-                            return undefined; // ignore transient states
-                        default:
-                            // allow already-lowercased strings that are valid statuses
-                            if ([
-                                "new",
-                                "running",
-                                "waitingForApproval",
-                                "completed",
-                                "closed",
-                                "error",
-                                "idle",
-                                "costLimitReached",
-                            ].includes(rawState)) {
-                                return rawState;
-                            }
-                            return undefined; // ignore unknown states
-                    }
-                })();
+                const status = parseAgentStatus(data?.state);
                 if (!status)
                     return;
                 setAgents((prevAgents) => {
@@ -575,7 +586,7 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                             // No agents left, show profile selector
                             setActiveAgentId("");
                             activeAgentIdRef.current = "";
-                            localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+                            localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
                         }
                     }
                     // If no agents remain, reset profile selection to placeholder
@@ -588,9 +599,9 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             else if (message.type === "agent:profile:switched") {
                 // Handle profile switch initiated by the agent (via switch-profile function)
                 const payload = message.payload || {};
-                const agentId = payload.agentId || payload.AgentId;
-                const newProfileId = payload.newProfileId || payload.NewProfileId;
-                const newProfileName = payload.newProfileName || payload.NewProfileName;
+                const agentId = payload.agentId;
+                const newProfileId = payload.newProfileId;
+                const newProfileName = payload.newProfileName;
                 if (!agentId || !newProfileId)
                     return;
                 // Find the profile's icon from available profiles
@@ -613,9 +624,15 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             }
         });
         return unsubscribe;
-    }, [editContext?.addSocketMessageListener, availableProfiles]);
+    }, [canUseAi, editContext?.addSocketMessageListener, availableProfiles]);
     const loadAgentsFromBackend = async () => {
         try {
+            if (!canUseAi) {
+                setAgents([]);
+                setInactiveAgents([]);
+                setLoadingAgents(false);
+                return;
+            }
             // In single-agent mode, skip loading any pre-existing/open agents or history
             if (singleAgentModeRef.current) {
                 setAgents([]);
@@ -636,11 +653,18 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                 excludeClosed: true, // Exclude closed and cancelled agents
             });
             const activeAgentsResult = activeAgentsResponse.agents;
-            setAgents(activeAgentsResult);
+            // Merge the backend agents with any locally added "new" agents that haven't been saved yet
+            setAgents((prev) => {
+                const newAgents = prev.filter((a) => a.status === "new");
+                // Avoid duplicates if any new agents were already saved and returned in activeAgentsResult
+                const backendIds = new Set(activeAgentsResult.map((a) => a.id));
+                const filteredNewAgents = newAgents.filter((a) => !backendIds.has(a.id));
+                return [...activeAgentsResult, ...filteredNewAgents];
+            });
             // Try to restore the previously active agent from localStorage if one exists
             let selectedAgentId = null;
             if (activeAgentsResult.length > 0) {
-                const storedAgentId = localStorage.getItem(ACTIVE_AGENT_STORAGE_KEY);
+                const storedAgentId = localStorageService.getString(ACTIVE_AGENT_STORAGE_KEY);
                 const storedAgent = activeAgentsResult.find((agent) => agent.id === storedAgentId);
                 if (storedAgent) {
                     selectedAgentId = storedAgent.id;
@@ -653,13 +677,28 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             }
             // If there are no active agents after load, set to empty string to show profile selector
             if (activeAgentsResult.length === 0) {
-                setActiveAgentId("");
-                activeAgentIdRef.current = "";
-                localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
-                setSelectedProfileId("");
+                // Only if no new agent was added in the meantime
+                setAgents((prev) => {
+                    if (prev.length === 0) {
+                        setActiveAgentId("");
+                        activeAgentIdRef.current = "";
+                        localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+                        setSelectedProfileId("");
+                    }
+                    return prev;
+                });
             }
             else {
-                setActiveAgentIdWithStorage(selectedAgentId);
+                // Only restore from backend/storage if no new agent is currently active
+                // This prevents overwriting a newly created agent from a comment (especially on mobile)
+                const currentActiveId = activeAgentIdRef.current;
+                setAgents((prev) => {
+                    const isNewAgentActive = prev.some((a) => a.id === currentActiveId && a.status === "new");
+                    if (!isNewAgentActive) {
+                        setActiveAgentIdWithStorage(selectedAgentId);
+                    }
+                    return prev;
+                });
             }
             // Load closed agents for history
             const response = await getActiveAgents({
@@ -668,7 +707,7 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                 includeOwned: true,
             });
             // Filter to only closed agents on the client side
-            const closedAgents = response.agents.filter((agent) => agent.status === "closed" || agent.status === 5);
+            const closedAgents = response.agents.filter((agent) => agent.status === "closed");
             // Deduplicate agents by ID in case the backend returns duplicates
             const uniqueClosedAgents = closedAgents.filter((agent, index, self) => index === self.findIndex((a) => a.id === agent.id));
             setInactiveAgents(uniqueClosedAgents);
@@ -694,6 +733,9 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
     //   return null;
     // };
     const addAgent = (metadata) => {
+        if (!canUseAi) {
+            return;
+        }
         const newAgent = {
             status: "new",
             id: crypto.randomUUID(),
@@ -719,24 +761,29 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
     };
     const createAgentWithSelectedProfile = (profileId) => {
         const selected = availableProfiles.find((p) => p.id === profileId);
+        const taskboardLinkage = readTaskboardLinkageFromUrl();
         // Build additionalData with preconfigured todos if available
         // Backend uses [PreserveNames] so check both camelCase and PascalCase
         const additionalData = selected
             ? {
                 profileId: selected.id,
                 profileName: selected.name,
+                ...(taskboardLinkage.projectId
+                    ? { projectId: taskboardLinkage.projectId }
+                    : {}),
+                ...(taskboardLinkage.taskId ? { taskId: taskboardLinkage.taskId } : {}),
             }
             : {};
-        const preconfiguredTodos = selected?.preconfiguredTodos || selected?.PreconfiguredTodos;
+        const preconfiguredTodos = selected?.preconfiguredTodos;
         if (preconfiguredTodos && preconfiguredTodos.length > 0) {
             additionalData.todoList = {
                 title: "Preconfigured Tasks",
                 items: preconfiguredTodos.map((todo) => ({
-                    id: todo.id || todo.Id || crypto.randomUUID(),
-                    title: todo.title || todo.Title,
+                    id: todo.id || crypto.randomUUID(),
+                    title: todo.title,
                     status: "pending",
-                    instructions: todo.instructions || todo.Instructions,
-                    agentProfileId: todo.agentProfileId || todo.AgentProfileId,
+                    instructions: todo.instructions,
+                    agentProfileId: todo.agentProfileId,
                 })),
             };
         }
@@ -748,6 +795,9 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             : undefined;
         addAgent(metadata);
     };
+    const handleAgentUpdate = React.useCallback((agentId, updates) => {
+        setAgents((prev) => prev.map((agent) => agent.id === agentId ? { ...agent, ...updates } : agent));
+    }, []);
     const closeAgent = async (agentId) => {
         try {
             // Permanently close the agent in the backend
@@ -808,13 +858,8 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             closeAgent(agentId);
             return;
         }
-        // Check if agent is in an active state (running or waiting for approval)
-        // Handle both string and numeric status values
-        // Enum: New=0, Running=1, WaitingForApproval=2, Completed=3, Error=4, Closed=5
         const isActivelyRunning = agent.status === "running" ||
-            agent.status === "waitingForApproval" ||
-            agent.status === 1 ||
-            agent.status === 2;
+            agent.status === "waitingForApproval";
         // If agent is actively running, show confirmation dialog
         if (isActivelyRunning) {
             if (editContext?.confirm) {
@@ -837,15 +882,12 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
     const handleCloseProfileAgents = async (profileAgents, profileName, e) => {
         e.stopPropagation();
         const agentCount = profileAgents.length;
-        const hasActiveAgents = profileAgents.some((agent) => agent.status === "running" ||
-            agent.status === "waitingForApproval" ||
-            agent.status === 1 ||
-            agent.status === 2);
+        const hasActiveAgents = profileAgents.some((agent) => isExecutingAgentStatus(agent.status));
         if (editContext?.confirm) {
             editContext.confirm({
                 header: `Close ${agentCount} Agent${agentCount > 1 ? "s" : ""}`,
                 message: hasActiveAgents
-                    ? `This will close all ${agentCount} ${profileName} agent${agentCount > 1 ? "s" : ""}, including ${profileAgents.filter((a) => a.status === "running" || a.status === 1).length} running agent(s). Are you sure?`
+                    ? `This will close all ${agentCount} ${profileName} agent${agentCount > 1 ? "s" : ""}, including ${profileAgents.filter((a) => isRunningAgentStatus(a.status)).length} running agent(s). Are you sure?`
                     : `Are you sure you want to close all ${agentCount} ${profileName} agent${agentCount > 1 ? "s" : ""}?`,
                 acceptLabel: `Close ${agentCount > 1 ? "All" : "Agent"}`,
                 accept: async () => {
@@ -879,7 +921,7 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                                 // No agents left, show profile selector
                                 setActiveAgentId("");
                                 activeAgentIdRef.current = "";
-                                localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+                                localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
                             }
                         }
                         // Reset profile selection if no agents remain
@@ -939,6 +981,9 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
             },
         ];
     };
+    if (!canUseAi) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center p-4 text-center text-sm text-gray-500", children: "AI features are unavailable with the current license." }));
+    }
     if (loadingAgents) {
         return (_jsxs("div", { className: "flex h-full items-center justify-center gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx("div", { className: "text-xs text-gray-500", children: "Loading agents..." })] }));
     }
@@ -951,7 +996,7 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                                             console.log("[Agents Empty State] Overview tab clicked, toggling back to profile selector", e);
                                             setActiveAgentId("");
                                             activeAgentIdRef.current = "";
-                                            localStorage.removeItem(ACTIVE_AGENT_STORAGE_KEY);
+                                            localStorageService.removeItem(ACTIVE_AGENT_STORAGE_KEY);
                                         }, className: cn("flex h-8 min-w-0 cursor-pointer items-center gap-2 border-r border-gray-200 px-2 text-xs", "border-b-white bg-white hover:bg-gray-50"), children: [_jsxs("div", { className: "relative", children: [_jsx(List, { className: "size-4 flex-shrink-0 text-gray-600", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), _jsx("span", { className: "truncate font-medium", children: "Overview" })] }) })) : (
                                 /* Show Overview as a button when displaying profile selector */
                                 _jsx("div", { className: "flex items-center px-1", children: _jsx(SimpleIconButton, { onClick: (e) => {
@@ -983,6 +1028,10 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                                 const statusConfig = getAgentStatusConfig({
                                     status: highestStatus,
                                 });
+                                const singleAgentErrorMessage = toUserFacingAgentErrorMessage(singleAgent?.statusMessage) ||
+                                    singleAgent?.statusMessage;
+                                const activeAgentErrorMessage = toUserFacingAgentErrorMessage(activeAgent?.statusMessage) ||
+                                    activeAgent?.statusMessage;
                                 // Use agent name if: single agent OR active agent from this profile
                                 const displayName = activeAgent
                                     ? activeAgent.name
@@ -1008,21 +1057,20 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                                                         }
                                                         // Multiple agents: popover will open via PopoverTrigger
                                                     }, children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [_jsx("div", { className: "flex-shrink-0", children: displayIcon ? (_jsx("div", { className: "flex h-[18px] w-[18px] items-center justify-center text-gray-500 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
-                                                                            __html: displayIcon,
-                                                                        } })) : (_jsx(SecretAgentIcon, { size: 18, strokeWidth: 1, className: "text-gray-500" })) }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: displayName }), agentCount > 1 && (_jsx("div", { className: "flex-shrink-0 rounded-full bg-gray-200 px-1.5 py-0.5 text-[10px] leading-none font-medium text-gray-700", children: agentCount })), _jsxs(Tooltip, { delayDuration: 1000, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: cn("h-1.5 w-1.5 flex-shrink-0 rounded-full", statusConfig.color, statusConfig.shouldPulse && "animate-pulse"), title: statusConfig.label }) }), _jsx(TooltipContent, { children: _jsxs("div", { children: [_jsx("div", { children: statusConfig.label }), singleAgent?.status === "error" ||
-                                                                                        singleAgent?.status === 4 ? (singleAgent?.statusMessage ? (_jsx("div", { className: "mt-1 text-xs text-red-600", children: singleAgent.statusMessage })) : null) : activeAgent?.status === "error" ||
-                                                                                        activeAgent?.status === 4 ? (activeAgent?.statusMessage ? (_jsx("div", { className: "mt-1 text-xs text-red-600", children: activeAgent.statusMessage })) : null) : null] }) })] }), agentCount > 1 && (_jsx(ChevronDown, { className: "size-3 flex-shrink-0 text-gray-500", strokeWidth: 1 }))] }), _jsx(SimpleIconButton, { onClick: (e) => singleAgent
+                                                                            __html: sanitizeSvg(displayIcon),
+                                                                        } })) : (_jsx(SecretAgentIcon, { size: 18, strokeWidth: 1, className: "text-gray-500" })) }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: displayName }), agentCount > 1 && (_jsx("div", { className: "flex-shrink-0 rounded-full bg-gray-200 px-1.5 py-0.5 text-[10px] leading-none font-medium text-gray-700", children: agentCount })), _jsxs(Tooltip, { delayDuration: 1000, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: cn("h-1.5 w-1.5 flex-shrink-0 rounded-full", statusConfig.color, statusConfig.shouldPulse && "animate-pulse"), title: statusConfig.label }) }), _jsx(TooltipContent, { children: _jsxs("div", { children: [_jsx("div", { children: statusConfig.label }), singleAgent?.status === "error" ? (singleAgentErrorMessage ? (_jsx("div", { className: "mt-1 text-xs text-red-600", children: singleAgentErrorMessage })) : null) : activeAgent?.status === "error" ? (activeAgentErrorMessage ? (_jsx("div", { className: "mt-1 text-xs text-red-600", children: activeAgentErrorMessage })) : null) : null] }) })] }), agentCount > 1 && (_jsx(ChevronDown, { className: "size-3 flex-shrink-0 text-gray-500", strokeWidth: 1 }))] }), _jsx(SimpleIconButton, { onClick: (e) => singleAgent
                                                                 ? handleCloseAgent(singleAgent.id, e)
                                                                 : handleCloseProfileAgents(profileGroup.agents, profileGroup.profileName, e), icon: _jsx(X, { className: "size-3", strokeWidth: 1 }), label: agentCount > 1
                                                                 ? `Close all ${agentCount} agents`
                                                                 : "Close", className: "flex-shrink-0 opacity-60 hover:opacity-100", showTooltip: false })] }) }), agentCount > 1 && (_jsxs(PopoverContent, { className: "w-80 p-0", align: "start", children: [_jsxs("div", { className: "border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-500", children: [profileGroup.profileName, " Agents"] }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: profileGroup.agents.map((agent) => {
                                                             const agentStatusConfig = getAgentStatusConfig(agent);
+                                                            const agentErrorMessage = toUserFacingAgentErrorMessage(agent.statusMessage) ||
+                                                                agent.statusMessage;
                                                             return (_jsx("div", { "data-agent-id": agent.id, className: cn("cursor-pointer border-b border-gray-50 px-3 py-2 hover:bg-gray-50", activeAgentId === agent.id && "bg-theme-secondary-light/50"), onClick: () => {
                                                                     setActiveAgentIdWithStorage(agent.id);
                                                                     setProfileTabDropdownOpen(null);
                                                                 }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn("h-2 w-2 flex-shrink-0 rounded-full", agentStatusConfig.color, agentStatusConfig.shouldPulse &&
-                                                                                "animate-pulse"), title: agentStatusConfig.label }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-xs font-medium text-gray-900", children: agent.name }), _jsx("div", { className: "text-[9px] font-mono text-gray-400", children: agent.id }), agent.status === "error" ||
-                                                                                    agent.status === 4 ? (agent.statusMessage ? (_jsx("div", { className: "truncate text-[11px] leading-tight text-red-600", children: agent.statusMessage })) : (agent.description && (_jsx("div", { className: "truncate text-[11px] leading-tight text-gray-400", children: agent.description })))) : (agent.description && (_jsx("div", { className: "truncate text-[11px] leading-tight text-gray-400", children: agent.description })))] }), _jsx(SimpleIconButton, { onClick: (e) => handleCloseAgent(agent.id, e), icon: _jsx(X, { className: "size-3", strokeWidth: 1 }), label: "Close", className: "opacity-60 hover:opacity-100" })] }) }, agent.id));
+                                                                                "animate-pulse"), title: agentStatusConfig.label }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-xs font-medium text-gray-900", children: agent.name }), _jsx("div", { className: "text-[9px] font-mono text-gray-400", children: agent.id }), agent.status === "error" ? (agentErrorMessage ? (_jsx("div", { className: "truncate text-[11px] leading-tight text-red-600", children: agentErrorMessage })) : (agent.description && (_jsx("div", { className: "truncate text-[11px] leading-tight text-gray-400", children: agent.description })))) : (agent.description && (_jsx("div", { className: "truncate text-[11px] leading-tight text-gray-400", children: agent.description })))] }), _jsx(SimpleIconButton, { onClick: (e) => handleCloseAgent(agent.id, e), icon: _jsx(X, { className: "size-3", strokeWidth: 1 }), label: "Close", className: "opacity-60 hover:opacity-100" })] }) }, agent.id));
                                                         }) })] }))] }) }, profileKey));
                             })] }), activeAgentId !== null && (_jsx("div", { className: "flex items-center px-1", children: _jsx(SimpleIconButton, { onClick: () => setActiveAgentIdWithStorage(null), icon: _jsxs("div", { className: "relative", children: [_jsx(List, { className: "size-4", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), label: `Agent Overview${inboxCount > 0 ? ` (${inboxCount} need attention)` : ""}`, className: "text-gray-600 hover:text-gray-800" }) })), activeAgentId === null && (_jsx("div", { className: "flex items-center px-1", children: _jsxs("div", { className: cn("flex min-w-0 cursor-default items-center gap-2 border-r border-gray-200 p-2 text-xs", "border-b-white bg-white"), children: [_jsxs("div", { className: "relative", children: [_jsx(List, { className: "size-4 flex-shrink-0 text-gray-600", strokeWidth: 1 }), inboxCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-bold text-white", children: inboxCount > 9 ? "9+" : inboxCount }))] }), _jsx("span", { className: "truncate font-medium", children: "Overview" })] }) })), agents.length > 0 && (_jsx("div", { className: "flex items-center px-1", children: _jsxs(Popover, { open: menuPopoverOpen, onOpenChange: (open) => {
                                 setMenuPopoverOpen(open);
@@ -1052,7 +1100,7 @@ export const Agents = React.memo(function Agents({ closeButton, }) {
                     const activeAgent = agents.find((a) => a.id === activeAgentId);
                     if (!activeAgent)
                         return null;
-                    return (_jsx("div", { className: "absolute inset-0", children: _jsx(AgentTerminal, { agentStub: activeAgent, initialMetadata: initialMetadataMap[activeAgent.id], profiles: availableProfiles, isActive: true }) }, activeAgent.id));
+                    return (_jsx("div", { className: "absolute inset-0", children: _jsx(AgentTerminal, { agentStub: activeAgent, initialMetadata: initialMetadataMap[activeAgent.id], profiles: availableProfiles, isActive: true, onAgentUpdate: (updates) => handleAgentUpdate(activeAgent.id, updates) }) }, activeAgent.id));
                 })()) })] }));
 });
 //# sourceMappingURL=Agents.js.map