@parhelia/core 0.1.11873 → 0.1.11955

package/dist/editor/ai/AgentTerminal.js

@@ -21,6 +21,32 @@ import { cn } from "../../lib/utils";
 import { Select } from "../../components/ui/select";
 import { AgentTerminalStatusBar } from "./AgentTerminalStatusBar";
 import { useMediaQuery } from "../client/hooks/useMediaQuery";
+import { SimpleTabs } from "../ui/SimpleTabs";
+function buildPlaceholderAgentDetails(agentStub) {
+    const now = new Date().toISOString();
+    const updated = agentStub.updatedDate || now;
+    // AgentDetails has required fields, but some workspaces only pass an Agent stub initially.
+    // This placeholder keeps streaming/tool-call UI working until `getAgent()` returns full details.
+    return {
+        ...agentStub,
+        name: agentStub.name || "Agent",
+        userId: agentStub.userId || "",
+        updatedDate: updated,
+        profileName: agentStub.profileName || "",
+        model: agentStub.model || "",
+        createdDate: agentStub.createdDate || updated,
+        totalTokensUsed: 0,
+        totalInputTokens: 0,
+        totalOutputTokens: 0,
+        totalCachedInputTokens: 0,
+        totalInputTokenCost: 0,
+        totalOutputTokenCost: 0,
+        totalCachedInputTokenCost: 0,
+        totalCost: 0,
+        currency: agentStub.currency || "USD",
+        messageCount: agentStub.messageCount || 0,
+    };
+}
 // Simple user message component
 const UserMessage = ({ message }) => {
     // Parse source agent name from content if it starts with "[From ...]:"
@@ -50,7 +76,7 @@ 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: "flex-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: displayContent })] })] }));
 };
 // Helper to extract todos from potentially incomplete JSON during streaming
 const extractPartialTodos = (jsonText) => {
@@ -408,7 +434,7 @@ const TodoListPanel = ({ messages, agentMetadata, }) => {
                 return "text-gray-900";
         }
     };
-    return (_jsxs("div", { className: "border-t border-gray-200 bg-gray-50", children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "flex w-full cursor-pointer items-center justify-between px-4 py-2 text-left transition-colors hover:bg-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ListTodo, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }), _jsx("span", { className: "text-[11px] font-medium text-gray-700", children: "Todo List" }), isUpdating ? (_jsxs("span", { className: "text-theme-secondary flex items-center gap-1 text-[11px]", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), "Updating..."] })) : (_jsxs("span", { className: "text-[11px] text-gray-500", children: [completedCount, "/", totalCount, " completed"] }))] }), isExpanded ? (_jsx(ChevronUp, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 })) : (_jsx(ChevronDown, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }))] }), isExpanded && (_jsxs("div", { className: "max-h-64 overflow-y-auto px-4 pb-3", children: [todos.length > 0 && (_jsx("div", { className: "space-y-1.5", children: todos.map((todo, idx) => (_jsxs("div", { className: "flex items-start gap-2 rounded bg-white p-2 text-[11px]", children: [_jsx("div", { className: "flex-shrink-0 pt-0.5", children: getStatusIcon(todo.status) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: getTextClass(todo.status), children: todo.title }), todo.instructions && (_jsx("div", { className: "mt-0.5 text-[11px] text-gray-500", children: todo.instructions }))] })] }, todo.id || `${todo.messageId}-${idx}`))) })), isUpdating && (_jsxs("div", { className: `flex items-center gap-2 rounded px-3 py-2 text-[11px] ${todos.length > 0
+    return (_jsxs("div", { className: "border-t border-gray-200 bg-gray-50", children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "flex w-full cursor-pointer items-center justify-between px-4 py-2 text-left transition-colors hover:bg-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ListTodo, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }), _jsx("span", { className: "text-[11px] font-medium text-gray-700", children: "Todo List" }), isUpdating ? (_jsxs("span", { className: "text-theme-secondary flex items-center gap-1 text-[11px]", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), "Updating..."] })) : (_jsxs("span", { className: "text-[11px] text-gray-500", children: [completedCount, "/", totalCount, " completed"] }))] }), isExpanded ? (_jsx(ChevronUp, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 })) : (_jsx(ChevronDown, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }))] }), isExpanded && (_jsxs("div", { className: "max-h-64 overflow-y-auto px-4 pb-3", children: [todos.length > 0 && (_jsx("div", { className: "space-y-1.5", children: todos.map((todo, idx) => (_jsxs("div", { className: "flex items-start gap-2 rounded bg-white p-2 text-[11px]", children: [_jsx("div", { className: "shrink-0 pt-0.5", children: getStatusIcon(todo.status) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: getTextClass(todo.status), children: todo.title }), todo.instructions && (_jsx("div", { className: "mt-0.5 text-[11px] text-gray-500", children: todo.instructions }))] })] }, todo.id || `${todo.messageId}-${idx}`))) })), isUpdating && (_jsxs("div", { className: `flex items-center gap-2 rounded px-3 py-2 text-[11px] ${todos.length > 0
                             ? "bg-theme-secondary-light text-theme-secondary mt-2"
                             : "justify-center bg-white text-gray-500"}`, children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), _jsx("span", { children: todos.length > 0
                                     ? "Updating todo list..."
@@ -520,6 +546,59 @@ const getOperationsForMessageGroup = (messages, agentOperations) => {
     const matched = agentOperations.filter((op) => op.toolCallId && toolCallIds.has(op.toolCallId));
     return matched;
 };
+const stringifyToolField = (value) => {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === "string") {
+        return value.trim().length > 0 ? value : undefined;
+    }
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return String(value);
+    }
+};
+const getFirstToolCallEnvelope = (data) => {
+    if (!data || typeof data !== "object")
+        return undefined;
+    const direct = data.toolCall || data.tool_call || data.ToolCall;
+    if (direct)
+        return direct;
+    const arrayCandidates = [data.tool_calls, data.toolCalls, data.ToolCalls];
+    for (const candidate of arrayCandidates) {
+        if (Array.isArray(candidate) && candidate.length > 0) {
+            return candidate[0];
+        }
+    }
+    return undefined;
+};
+const extractToolCallFields = (data) => {
+    const envelope = getFirstToolCallEnvelope(data);
+    const functionPayload = data?.function || data?.Function || envelope?.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 functionArguments = stringifyToolField(data?.functionArguments) ||
+        stringifyToolField(data?.arguments) ||
+        stringifyToolField(functionPayload?.arguments) ||
+        stringifyToolField(functionPayload?.Arguments) ||
+        stringifyToolField(envelope?.functionArguments) ||
+        stringifyToolField(envelope?.arguments) ||
+        "{}";
+    return {
+        toolCallId,
+        functionName,
+        functionArguments,
+    };
+};
 // Convert agent messages to AI terminal format for a response group
 const convertAgentMessagesToAiFormat = (agentMessages) => {
     return agentMessages.map((agentMessage) => {
@@ -576,7 +655,7 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
 export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, compact = false, hideContext = false, hideBottomControls = false, hideGreeting = false, simpleMode = false, className, initialPrompt, onAgentUpdate, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
-    const [agent, setAgent] = useState(undefined);
+    const [agent, setAgent] = useState(() => buildPlaceholderAgentDetails(agentStub));
     const [messages, setMessages] = useState([]);
     const [agentOperations, setAgentOperations] = useState([]);
     const [prompt, setPrompt] = useState("");
@@ -587,6 +666,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [activePlaceholderInput, setActivePlaceholderInput] = useState(null);
     const [allPlaceholdersFilled, setAllPlaceholdersFilled] = useState(false);
     const [agentMetadata, setAgentMetadata] = useState(null);
+    // Ensure we always have an agent object for streaming handlers, even before `getAgent()` resolves.
+    // This prevents early tool calls (e.g., ask-questionnaire) from being dropped in compact/workspace UIs.
+    useEffect(() => {
+        setAgent((prev) => {
+            if (prev?.id === agentStub.id)
+                return prev;
+            return buildPlaceholderAgentDetails(agentStub);
+        });
+    }, [agentStub.id]);
     // Generate a stable clientSessionId per component instance for stream deduplication
     const clientSessionIdRef = useRef(null);
     if (!clientSessionIdRef.current) {
@@ -680,7 +768,103 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [mode, setMode] = useState("supervised");
     const [queuedPrompts, setQueuedPrompts] = useState([]);
     const isMobile = useMediaQuery("(max-width: 768px)");
+    const [contextPanelsActiveTab, setContextPanelsActiveTab] = useState(0);
+    const [hiddenContextPanelTabIds, setHiddenContextPanelTabIds] = useState(new Set());
     const [showCostAndAgent, setShowCostAndAgent] = useState(false);
+    const hasSpawnedAgents = useMemo(() => {
+        if (!agentMetadata)
+            return false;
+        const childAgents = agentMetadata?.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));
+    }, [agentMetadata]);
+    const hasTodoContent = useMemo(() => {
+        const metadataTodos = (() => {
+            try {
+                const todoList = agentMetadata?.additionalData?.todoList ||
+                    agentMetadata?.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;
+                }
+            }
+            catch {
+                // ignore
+            }
+            return false;
+        })();
+        if (metadataTodos)
+            return true;
+        const fromMessages = extractTodosFromMessages(messages);
+        if (fromMessages.length > 0)
+            return true;
+        const isUpdating = messages.some((msg) => msg.role === "assistant" &&
+            !msg.isCompleted &&
+            (msg.content || "").includes("todo_list"));
+        return isUpdating;
+    }, [agentMetadata, messages]);
+    const prevAgentIdRef = useRef(undefined);
+    const [hasHistoryContent, setHasHistoryContent] = useState(false);
+    useEffect(() => {
+        const currentId = agent?.id;
+        if (prevAgentIdRef.current !== currentId) {
+            prevAgentIdRef.current = currentId;
+            setHiddenContextPanelTabIds((prev) => {
+                if (prev.has("history")) {
+                    const next = new Set(prev);
+                    next.delete("history");
+                    return next;
+                }
+                return prev;
+            });
+        }
+    }, [agent?.id]);
+    useEffect(() => {
+        if (!agent?.id) {
+            setHasHistoryContent(false);
+            return;
+        }
+        setHasHistoryContent(false);
+        let cancelled = false;
+        getAgentHistory(agent.id, 10)
+            .then((result) => {
+            if (cancelled)
+                return;
+            if (result.type === "success" &&
+                result.data &&
+                result.data.length > 0) {
+                setHasHistoryContent(true);
+            }
+            else {
+                setHasHistoryContent(false);
+            }
+        })
+            .catch(() => {
+            if (!cancelled)
+                setHasHistoryContent(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [agent?.id]);
+    const agentIdForHistoryRef = useRef(agent?.id);
+    agentIdForHistoryRef.current = agent?.id;
+    useEffect(() => {
+        if (!agent?.id || !editContext?.addSocketMessageListener)
+            return;
+        const unsubscribe = editContext.addSocketMessageListener((message) => {
+            if (message.type !== "edit-operation")
+                return;
+            const op = message.payload;
+            const operationAgentId = op.agentId || op.user?.agentId;
+            if (operationAgentId === agentIdForHistoryRef.current) {
+                setHasHistoryContent(true);
+            }
+        });
+        return () => unsubscribe();
+    }, [agent?.id, editContext?.addSocketMessageListener]);
     const modeOptions = useMemo(() => [
         {
             value: "supervised",
@@ -1053,25 +1237,18 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     // Shared stream message handlers with messageId support
     const createNewStreamMessage = useCallback((messageId, agentData) => {
         const currentAgent = agentData || agent;
-        if (!currentAgent) {
-            console.error("❌ createNewStreamMessage: No agent available", {
-                messageId,
-                agentData: !!agentData,
-                agent: !!agent,
-            });
-            throw new Error("No agent available");
-        }
+        const effectiveAgentId = currentAgent?.id || agentStub.id;
         // Reduced: avoid verbose logging during streaming
         return {
             id: messageId,
-            agentId: currentAgent.id,
+            agentId: effectiveAgentId,
             messageIndex: -1,
             role: "assistant",
             content: "",
             name: "agent",
             messageType: "streaming",
             isCompleted: false,
-            model: currentAgent.model || "",
+            model: currentAgent?.model || "",
             tokensUsed: 0,
             inputTokens: 0,
             outputTokens: 0,
@@ -1080,11 +1257,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             outputTokenCost: 0,
             cachedInputTokenCost: 0,
             totalCost: 0,
-            currency: currentAgent.currency || "USD",
+            currency: currentAgent?.currency || "USD",
             createdDate: new Date().toISOString(),
             toolCalls: [],
         };
-    }, [agent]);
+    }, [agent, agentStub.id]);
     const 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
@@ -1226,7 +1403,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         });
     }, [createNewStreamMessage, agent]);
     const handleToolCall = useCallback((message, agentData) => {
-        const toolCallId = message.data?.toolCallId || message.data?.id || crypto.randomUUID();
+        const extractedToolCall = extractToolCallFields(message.data);
+        const toolCallId = extractedToolCall.toolCallId || crypto.randomUUID();
         // Prefer provided messageId, otherwise fall back to the last streaming assistant message
         let toolCallMessageId = message.data?.messageId;
         if (!toolCallMessageId) {
@@ -1237,6 +1415,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             if (lastStreaming?.id) {
                 toolCallMessageId = lastStreaming.id;
             }
+            else {
+                // Tool calls can arrive before any assistant content chunk (common for dialog tools like ask-questionnaire).
+                // Create a synthetic streaming message so the UI can render the tool call immediately.
+                toolCallMessageId = crypto.randomUUID();
+            }
         }
         // Find or create the target message for this tool call
         if (toolCallMessageId) {
@@ -1264,19 +1447,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         // Add tool call to the message in the array
         if (toolCallMessageId && message.data && toolCallId) {
-            const functionName = message.data.functionName ||
-                message.data.name ||
-                message.data.function?.name ||
-                "unknown";
             const toolCall = {
                 id: toolCallId,
                 messageId: toolCallMessageId,
                 dbMessageId: message.data.messageId, // Database message ID for approval/rejection
                 toolCallId: toolCallId,
-                functionName: functionName,
-                functionArguments: message.data.functionArguments ||
-                    message.data.arguments ||
-                    JSON.stringify(message.data.function?.arguments || {}),
+                functionName: extractedToolCall.functionName,
+                functionArguments: extractedToolCall.functionArguments,
                 functionResult: message.data.functionResult || message.data.result || "",
                 functionError: message.data.functionError || message.data.error || "",
                 isCompleted: false,
@@ -1320,7 +1497,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 // Check if the new data has more information than what we have
                 const newArgs = toolCall.functionArguments;
                 const existingArgs = existingToolCall.functionArguments;
-                const hasMoreCompleteArgs = newArgs && newArgs.length > (existingArgs?.length || 0);
+                const newArgsText = stringifyToolField(newArgs) || "";
+                const existingArgsText = stringifyToolField(existingArgs) || "";
+                const hasMoreCompleteArgs = (newArgsText.length > existingArgsText.length &&
+                    newArgsText !== existingArgsText) ||
+                    (existingArgsText === "{}" && newArgsText !== "{}");
                 const hasNewResult = toolCall.functionResult && !existingToolCall.functionResult;
                 const hasNewError = toolCall.functionError && !existingToolCall.functionError;
                 const hasNewApprovalInfo = toolCall.requiresApproval && !existingToolCall.requiresApproval;
@@ -1344,8 +1525,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 updatedToolCalls[idx] = {
                                     ...existing,
                                     functionArguments: hasMoreCompleteArgs
-                                        ? newArgs
-                                        : existing.functionArguments,
+                                        ? newArgsText
+                                        : existingArgsText || existing.functionArguments,
                                     functionResult: toolCall.functionResult || existing.functionResult,
                                     functionError: toolCall.functionError || existing.functionError,
                                     requiresApproval: toolCall.requiresApproval || existing.requiresApproval,
@@ -1381,7 +1562,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
     }, [createNewStreamMessage]);
     const handleToolResult = useCallback((message, agentData) => {
-        const resultToolCallId = message.data?.toolCallId || message.data?.id || crypto.randomUUID();
+        const extractedToolCall = extractToolCallFields(message.data);
+        const resultToolCallId = extractedToolCall.toolCallId || crypto.randomUUID();
         // Prefer provided messageId, otherwise fall back to the last streaming assistant message
         let resultMessageId = message.data?.messageId;
         if (!resultMessageId) {
@@ -1500,18 +1682,12 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 }
                 else if (message.data && resultToolCallId && resultMessageId) {
                     // Create new tool call if it doesn't exist
-                    const functionName = message.data.functionName ||
-                        message.data.name ||
-                        message.data.function?.name ||
-                        "unknown";
                     const toolCall = {
                         id: resultToolCallId,
                         messageId: resultMessageId,
                         toolCallId: resultToolCallId,
-                        functionName: functionName,
-                        functionArguments: message.data.functionArguments ||
-                            message.data.arguments ||
-                            JSON.stringify(message.data.function?.arguments || {}),
+                        functionName: extractedToolCall.functionName,
+                        functionArguments: extractedToolCall.functionArguments,
                         functionResult: message.data.functionResult || message.data.result || "",
                         functionError: message.data.functionError || message.data.error || "",
                         isCompleted: true,
@@ -1806,8 +1982,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     seenMessageIdsRef.current.add(msg.id.toLowerCase());
                 }
             });
-            // Keep local streaming only if the agent is still running; otherwise discard locals
+            // Keep local streaming if the agent is still active (running/waiting); otherwise discard locals.
+            // This is important for dialog-style tools (e.g., ask-questionnaire) where the agent may be
+            // "waiting" but we still want to keep the in-flight tool call UI visible.
             const isRunning = agentData.status === "running" || agentData.status === 1;
+            const isWaiting = agentData.status === "waitingForApproval" ||
+                agentData.status === 2 ||
+                agentData.status === "costLimitReached" ||
+                agentData.status === 7;
+            const keepLocalStreaming = isRunning || isWaiting;
             // Filter local messages to only include streaming/incomplete messages that aren't in DB
             // This prevents duplicates when reloading - DB messages are source of truth for completed messages
             const localStreaming = isRunning
@@ -1825,7 +2008,19 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     // Don't keep completed messages from local state - DB is source of truth
                     return false;
                 })
-                : [];
+                : keepLocalStreaming
+                    ? messagesRef.current.filter((localMsg) => {
+                        if (!localMsg.id)
+                            return false;
+                        if (!localMsg.isCompleted &&
+                            localMsg.messageType === "streaming") {
+                            const existsInDb = dbMessages.some((dbMsg) => dbMsg.id &&
+                                dbMsg.id.toLowerCase() === localMsg.id.toLowerCase());
+                            return !existsInDb;
+                        }
+                        return false;
+                    })
+                    : [];
             const merged = mergeMessagesById(dbMessages, localStreaming);
             messagesRef.current = merged;
             setMessages(merged);
@@ -2731,26 +2926,57 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         window.addEventListener("editor:focusAgentPrompt", focusHandler);
         return () => window.removeEventListener("editor:focusAgentPrompt", focusHandler);
     }, []);
+    // Keep stable refs so we don't miss window events during effect re-runs.
+    const agentIdRefForDialogs = useRef(null);
+    const agentStubIdRefForDialogs = useRef(agentStub.id);
+    const isActiveRefForDialogs = useRef(isActive);
+    const scrollToBottomRefForDialogs = useRef(scrollToBottom);
+    useEffect(() => {
+        agentIdRefForDialogs.current = agent?.id ?? null;
+    }, [agent?.id]);
+    useEffect(() => {
+        agentStubIdRefForDialogs.current = agentStub.id;
+    }, [agentStub.id]);
+    useEffect(() => {
+        isActiveRefForDialogs.current = isActive;
+    }, [isActive]);
+    useEffect(() => {
+        scrollToBottomRefForDialogs.current = scrollToBottom;
+    }, [scrollToBottom]);
     // Listen for agent inline dialog requests from AgentDialogHandler
     useEffect(() => {
         const handleDialogShow = (event) => {
-            const { request, onComplete, onCancel } = event.detail;
-            // Only handle dialog requests for this agent
-            if (request.agentId && agent?.id && request.agentId !== agent.id) {
+            const detail = event?.detail;
+            const request = detail?.request;
+            const onComplete = detail?.onComplete;
+            const onCancel = detail?.onCancel;
+            const terminalAgentId = agentIdRefForDialogs.current;
+            const terminalAgentStubId = agentStubIdRefForDialogs.current;
+            const isActiveNow = isActiveRefForDialogs.current;
+            if (!isActiveNow)
+                return;
+            if (!request)
+                return;
+            // Only handle dialog requests for this terminal's agent stub
+            if (request.agentId && terminalAgentStubId && request.agentId !== terminalAgentStubId) {
                 return;
             }
             console.log("[AgentTerminal] Received inline dialog request:", request);
             setActiveInlineDialog({ request, onComplete, onCancel });
             // Notify AgentDialogHandler that we accepted the dialog (stops retry mechanism)
-            window.dispatchEvent(new CustomEvent("agent:dialog:accepted", {
-                detail: { callbackId: request.callbackId },
-            }));
+            if (request.callbackId) {
+                window.dispatchEvent(new CustomEvent("agent:dialog:accepted", {
+                    detail: { callbackId: request.callbackId },
+                }));
+            }
             // Scroll to bottom to show the dialog
-            setTimeout(scrollToBottom, 100);
+            setTimeout(() => scrollToBottomRefForDialogs.current?.(), 100);
         };
         window.addEventListener("agent:dialog:show", handleDialogShow);
-        return () => window.removeEventListener("agent:dialog:show", handleDialogShow);
-    }, [agent?.id, scrollToBottom]);
+        return () => {
+            window.removeEventListener("agent:dialog:show", handleDialogShow);
+        };
+    }, []);
     // Announce when this terminal is ready to accept dialogs
     // This allows AgentDialogHandler to re-dispatch pending dialogs when switching to an agent
     useEffect(() => {
@@ -2868,6 +3094,17 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             console.error("Failed to persist pending settings", e);
         }
     }, [agent?.id]);
+    const getSubmitErrorMessage = (error) => {
+        const fallback = "Failed to submit prompt. Please try again.";
+        if (!(error instanceof Error))
+            return fallback;
+        const cleaned = error.message
+            .replace(/^Failed to start agent:\s*/i, "")
+            .replace(/^Unknown error\s*/i, "")
+            .replace(/^Error:\s*/i, "")
+            .trim();
+        return cleaned || fallback;
+    };
     const handleSubmit = async () => {
         // Guard against double-submit and missing context
         if (isSubmitting) {
@@ -3044,7 +3281,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         catch (err) {
             console.error("[AgentTerminal] Failed to submit prompt:", err);
-            setError("Failed to submit prompt. Please try again.");
+            setError(getSubmitErrorMessage(err));
             setIsWaitingForResponse(false);
             isWaitingRef.current = false;
             // Remove the optimistic user message on API error
@@ -3276,7 +3513,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         catch (err) {
             console.error("[AgentTerminal] Failed to submit quick message:", err);
-            setError("Failed to submit prompt. Please try again.");
+            setError(getSubmitErrorMessage(err));
             setIsWaitingForResponse(false);
             isWaitingRef.current = false;
             // Remove the optimistic user message on API error
@@ -3827,7 +4064,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         const errorMessage = currentAgent?.statusMessage;
         if (!isErrorStatus || !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 flex-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", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "mt-0.5 h-4 w-4 shrink-0 text-red-500", strokeWidth: 1 }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "mb-1 font-semibold", children: "Agent Error" }), _jsx("div", { className: "text-red-800", children: errorMessage })] })] }) }));
     };
     return (_jsxs("div", { className: `flex h-full flex-col ${className || ""}`, children: [parentAgentId && !simpleMode && (_jsx("div", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2", children: _jsxs("button", { onClick: handleBackToParent, className: "flex items-center gap-2 text-[11px] text-gray-600 transition-colors hover:text-gray-900", title: "Back to parent agent", children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { children: "Back to parent agent" })] }) })), _jsxs("div", { ref: messagesContainerRef, className: "flex-1 overflow-y-auto", onScroll: handleScroll, children: [error && (_jsx("div", { className: "m-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-3 select-text", children: _jsxs("div", { className: "flex items-start", children: [_jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 text-red-400", strokeWidth: 1 }), _jsxs("div", { className: "ml-3", children: [_jsx("p", { className: "text-[11px] font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-[11px] text-red-700", children: error })] })] }) })), messages.length === 0 && !error && !hideGreeting && (_jsx("div", { className: "flex h-full items-center justify-center", children: !activeProfile ? (_jsx(Loader2, { className: "mx-auto h-8 w-8 animate-spin text-gray-400" })) : (_jsx(AgentGreeting, { profile: activeProfile, onPromptClick: (p) => {
                                 setPrompt(p);
@@ -3916,12 +4153,62 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                             } }, groupIndex));
                                     }
                                 });
-                            })(), shouldShowThinkingDots && (_jsxs("div", { className: "flex gap-3 px-4 py-3", "data-testid": "agent-thinking-dots", children: [_jsx("div", { className: "flex-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: {
+                            })(), 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,
                                             } })) : (_jsx(SecretAgentIcon, { size: 20, strokeWidth: 1, className: "text-gray-2" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "text-dark text-xs font-medium", children: activeProfile?.agentName ||
                                                             activeProfile?.displayTitle ||
                                                             activeProfile?.name ||
-                                                            "Agent" }), _jsx("span", { className: "text-xs text-gray-400", children: formatTime(new Date()) })] }), _jsxs("div", { className: "flex items-center gap-1 pt-2", children: [_jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400" })] })] })] }))] }), !simpleMode && renderCostLimitBanner(), _jsx("div", { ref: messagesEndRef })] }), !hideContext && !simpleMode && renderContextInfoBar(), !hideContext && !simpleMode && agent?.id && activeProfile && (_jsx(AgentDocumentList, { ref: documentListRef, agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), !hideContext && !simpleMode && (_jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata })), !hideContext && !simpleMode && (_jsx(SpawnedAgentsPanel, { agentMetadata: agentMetadata })), !hideContext && !simpleMode && agent?.id && (_jsx(AgentEditOperationsPanel, { agentId: agent.id })), queuedPrompts.length > 0 && !simpleMode && (_jsx("div", { className: "border-t border-gray-200 bg-amber-50/50", "data-testid": "queued-prompts-section", children: _jsxs("div", { className: "px-4 pt-3 pb-2", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsxs("span", { className: "text-[11px] font-semibold text-amber-900", "data-testid": "queued-prompts-count", children: ["Queued Messages (", queuedPrompts.length, ")"] })] }), _jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: queuedPrompts.map((qp) => (_jsx("div", { className: "rounded-md border border-amber-200 bg-white p-2.5 text-[11px]", "data-testid": "queued-prompt-item", children: _jsx("div", { className: "flex items-start justify-between gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "mb-1 flex items-center gap-1.5", children: qp.sourceAgentName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-medium text-gray-700", children: ["From ", qp.sourceAgentName] }), qp.priority > 5 && (_jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 text-[11px] font-medium text-red-700", children: "High Priority" }))] })) : (_jsx("span", { className: "font-medium text-gray-700", children: "From User" })) }), _jsx("div", { className: "break-words whitespace-pre-wrap text-gray-600", "data-testid": "queued-prompt-text", children: qp.prompt }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-gray-400", children: [qp.createdDate && (_jsxs("span", { children: ["Queued ", formatTime(new Date(qp.createdDate))] })), qp.scheduledFor &&
+                                                            "Agent" }), _jsx("span", { className: "text-xs text-gray-400", children: formatTime(new Date()) })] }), _jsxs("div", { className: "flex items-center gap-1 pt-2", children: [_jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400" })] })] })] }))] }), !simpleMode && renderCostLimitBanner(), _jsx("div", { ref: messagesEndRef })] }), !hideContext &&
+                !simpleMode &&
+                (isMobile ? (_jsx("div", { className: "border-t border-gray-200 bg-gray-50", "data-testid": "agent-context-panel-tabs", children: _jsx(SimpleTabs, { tabs: [
+                            {
+                                id: "context",
+                                label: "Context",
+                                content: renderContextInfoBar(),
+                            },
+                            ...(agent?.id && activeProfile
+                                ? [
+                                    {
+                                        id: "documents",
+                                        label: "Documents",
+                                        content: (_jsx(AgentDocumentList, { ref: documentListRef, agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)),
+                                    },
+                                ]
+                                : []),
+                            ...(hasTodoContent
+                                ? [
+                                    {
+                                        id: "todos",
+                                        label: "Todos",
+                                        content: (_jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata })),
+                                    },
+                                ]
+                                : []),
+                            ...(hasSpawnedAgents
+                                ? [
+                                    {
+                                        id: "agents",
+                                        label: "Spawned",
+                                        content: (_jsx(SpawnedAgentsPanel, { agentMetadata: agentMetadata })),
+                                    },
+                                ]
+                                : []),
+                            ...(agent?.id && hasHistoryContent
+                                ? [
+                                    {
+                                        id: "history",
+                                        label: "History",
+                                        content: (_jsx(AgentEditOperationsPanel, { agentId: agent.id })),
+                                    },
+                                ]
+                                : []),
+                        ], activeTab: Math.max(0, Math.min(contextPanelsActiveTab, [
+                            true,
+                            agent?.id && activeProfile,
+                            hasTodoContent,
+                            hasSpawnedAgents,
+                            agent?.id && hasHistoryContent,
+                        ].filter(Boolean).length - 1)), setActiveTab: setContextPanelsActiveTab, className: "justify-start px-4" }) })) : (_jsxs(_Fragment, { children: [renderContextInfoBar(), agent?.id && activeProfile && (_jsx(AgentDocumentList, { ref: documentListRef, agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), _jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata }), _jsx(SpawnedAgentsPanel, { agentMetadata: agentMetadata }), agent?.id && _jsx(AgentEditOperationsPanel, { agentId: agent.id })] }))), queuedPrompts.length > 0 && !simpleMode && (_jsx("div", { className: "border-t border-gray-200 bg-amber-50/50", "data-testid": "queued-prompts-section", children: _jsxs("div", { className: "px-4 pt-3 pb-2", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsxs("span", { className: "text-[11px] font-semibold text-amber-900", "data-testid": "queued-prompts-count", children: ["Queued Messages (", queuedPrompts.length, ")"] })] }), _jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: queuedPrompts.map((qp) => (_jsx("div", { className: "rounded-md border border-amber-200 bg-white p-2.5 text-[11px]", "data-testid": "queued-prompt-item", children: _jsx("div", { className: "flex items-start justify-between gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "mb-1 flex items-center gap-1.5", children: qp.sourceAgentName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-medium text-gray-700", children: ["From ", qp.sourceAgentName] }), qp.priority > 5 && (_jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 text-[11px] font-medium text-red-700", children: "High Priority" }))] })) : (_jsx("span", { className: "font-medium text-gray-700", children: "From User" })) }), _jsx("div", { className: "wrap-break-word whitespace-pre-wrap text-gray-600", "data-testid": "queued-prompt-text", children: qp.prompt }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-gray-400", children: [qp.createdDate && (_jsxs("span", { children: ["Queued ", formatTime(new Date(qp.createdDate))] })), qp.scheduledFor &&
                                                         new Date(qp.scheduledFor).getTime() >
                                                             new Date(qp.createdDate || 0).getTime() + 1000 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-300", children: "\u2022" }), _jsxs("span", { className: "font-medium text-amber-600", children: ["Scheduled for", " ", new Date(qp.scheduledFor).toDateString() ===
                                                                         new Date().toDateString()
@@ -4020,10 +4307,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                         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"
-                                                ? "border-green-300 !bg-green-50 text-green-700 hover:!bg-green-100"
+                                                ? "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) => {
+                                                    ? "border-amber-300 bg-amber-50! text-amber-700 hover:bg-amber-100!"
+                                                    : "border-red-300 bg-red-50! text-red-700 hover:bg-red-100!"), value: mode, options: modeOptions, onValueChange: async (val) => {
                                                 const nextMode = val || "supervised";
                                                 // Optimistic UI update
                                                 setMode(nextMode);