@parhelia/core 0.1.12242 → 0.1.12267

package/dist/editor/ai/AgentTerminal.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo, } from "react";
-import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, ArrowLeft, DollarSign, ExternalLink, Settings2, Target, Plus, X, } from "lucide-react";
-import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkills, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, } from "../services/agentService";
+import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, ArrowLeft, DollarSign, ExternalLink, Settings2, Target, X, } from "lucide-react";
+import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkillCatalog, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, } from "../services/agentService";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { localStorageService } from "../services/localStorageService";
 import { Textarea } from "../../components/ui/textarea";
 import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
 import { PlaceholderInput, } from "../../components/ui/PlaceholderInput";
 import { AiResponseMessage } from "./AiResponseMessage";
 import { ContextInfoBar } from "./ContextInfoBar";
@@ -16,6 +15,7 @@ import { SpawnedAgentsPanel } from "./SpawnedAgentsPanel";
 import { getComponentById } from "../componentTreeHelper";
 import { AgentGreeting } from "./AgentGreeting";
 import { getAgentHistory } from "../services/editService";
+import { QuestionnaireInline } from "./dialogs/QuestionnaireInline";
 import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { SecretAgentIcon } from "../ui/Icons";
 import { formatTime, formatDateTime } from "../utils";
@@ -24,6 +24,7 @@ import { Select } from "../../components/ui/select";
 import { AgentTerminalStatusBar } from "./AgentTerminalStatusBar";
 import { useMediaQuery } from "../client/hooks/useMediaQuery";
 import { SimpleTabs } from "../ui/SimpleTabs";
+import { ScrollingContentTree } from "../ScrollingContentTree";
 function buildPlaceholderAgentDetails(agentStub) {
     const now = new Date().toISOString();
     const updated = agentStub.updatedDate || now;
@@ -659,7 +660,7 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
 // interface AgentTerminalProps {
 //   agentStub: Agent;
 // }
-export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, compact = false, hideContext = false, hideBottomControls = false, hideGreeting = false, simpleMode = false, className, initialPrompt, onAgentUpdate, }) {
+export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, compact = false, displayMode = "full", showSummaryInput = false, hideContext = false, hideBottomControls = false, hideGreeting = false, simpleMode = false, className, initialPrompt, onAgentUpdate, onInteractionSubmitted, questionnaireFooterActions, hideSummaryMessages = false, summaryPlaceholderActions, hideSummaryWaitingPlaceholder = false, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
     const [agent, setAgent] = useState(() => buildPlaceholderAgentDetails(agentStub));
@@ -782,8 +783,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [hiddenContextPanelTabIds, setHiddenContextPanelTabIds] = useState(new Set());
     const [showCostAndAgent, setShowCostAndAgent] = useState(false);
     const [showAgentSettings, setShowAgentSettings] = useState(false);
-    const [skillSearchTerm, setSkillSearchTerm] = useState("");
     const [availableSkills, setAvailableSkills] = useState([]);
+    const [skillRootIds, setSkillRootIds] = useState([]);
+    const [selectableTemplateIds, setSelectableTemplateIds] = useState([]);
     const [skillsLoading, setSkillsLoading] = useState(false);
     const [skillsError, setSkillsError] = useState(null);
     const [triggerSubscriptions, setTriggerSubscriptions] = useState([]);
@@ -889,14 +891,19 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             try {
                 setSkillsLoading(true);
                 setSkillsError(null);
-                const skills = await getAgentSkills(false);
+                const catalog = await getAgentSkillCatalog(false);
                 if (active) {
-                    setAvailableSkills(skills.filter((s) => !s.disabled));
+                    setAvailableSkills(catalog.skills.filter((s) => !s.disabled));
+                    setSkillRootIds(catalog.rootIds);
+                    setSelectableTemplateIds(catalog.selectableTemplateIds);
                 }
             }
             catch (e) {
                 if (active) {
                     setSkillsError(e?.message || "Failed to load skills");
+                    setAvailableSkills([]);
+                    setSkillRootIds([]);
+                    setSelectableTemplateIds([]);
                 }
             }
             finally {
@@ -1031,23 +1038,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         return availableSkills.filter((skill) => allowedProfileSkillIdSet.has(skill.id.toLowerCase()));
     }, [availableSkills, allowedProfileSkillIdSet]);
+    const profileFilteredSkillIdSet = useMemo(() => new Set(profileFilteredSkills.map((skill) => skill.id.toLowerCase())), [profileFilteredSkills]);
+    const selectableTemplateIdSet = useMemo(() => new Set(selectableTemplateIds.map((id) => id.toLowerCase())), [selectableTemplateIds]);
     const selectedSkills = useMemo(() => selectedSkillIds
         .map((id) => profileFilteredSkills.find((s) => s.id.toLowerCase() === id.toLowerCase()))
         .filter((s) => !!s), [profileFilteredSkills, selectedSkillIds]);
     const selectedSkillSet = useMemo(() => new Set(selectedSkillIds.map((id) => id.toLowerCase())), [selectedSkillIds]);
     const backendAssignedSkillSet = useMemo(() => new Set(backendAssignedSkillIds.map((id) => id.toLowerCase())), [backendAssignedSkillIds]);
-    const selectableSkills = useMemo(() => profileFilteredSkills.filter((skill) => !selectedSkillSet.has(skill.id.toLowerCase())), [profileFilteredSkills, selectedSkillSet]);
-    const filteredSelectableSkills = useMemo(() => {
-        const q = skillSearchTerm.trim().toLowerCase();
-        if (!q)
-            return selectableSkills;
-        return selectableSkills.filter((skill) => {
-            const name = (skill.name || "").toLowerCase();
-            const description = (skill.description || "").toLowerCase();
-            const id = (skill.id || "").toLowerCase();
-            return name.includes(q) || description.includes(q) || id.includes(q);
-        });
-    }, [selectableSkills, skillSearchTerm]);
     // Remove deprecated cost limit fields from metadata to avoid confusion with agent/profile settings
     const sanitizeAgentMetadata = useCallback((meta) => {
         try {
@@ -3241,7 +3238,17 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 return;
             }
             console.log("[AgentTerminal] Received inline dialog request:", request);
-            setActiveInlineDialog({ request, onComplete, onCancel });
+            setActiveInlineDialog({
+                request,
+                onComplete: (result) => {
+                    onComplete(result);
+                    onInteractionSubmitted?.();
+                },
+                onCancel: () => {
+                    onCancel();
+                    onInteractionSubmitted?.();
+                },
+            });
             // Notify AgentDialogHandler that we accepted the dialog (stops retry mechanism)
             if (request.callbackId) {
                 window.dispatchEvent(new CustomEvent("agent:dialog:accepted", {
@@ -3397,6 +3404,17 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             .trim();
         return cleaned || fallback;
     };
+    const cancelActiveInlineDialog = useCallback(() => {
+        const activeDialog = activeInlineDialogRef.current;
+        if (!activeDialog)
+            return;
+        try {
+            activeDialog.onCancel();
+        }
+        finally {
+            setActiveInlineDialog(null);
+        }
+    }, []);
     const handleSubmit = async () => {
         // Guard against double-submit and missing context
         if (isSubmitting) {
@@ -3440,6 +3458,8 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             setError("Agent not ready. Please try again.");
             return;
         }
+        // A new user prompt supersedes any active questionnaire/inline dialog.
+        cancelActiveInlineDialog();
         // Generate a temporary ID for optimistic UI - will be replaced by server ID
         const tempMessageId = `temp-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
         try {
@@ -3569,6 +3589,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 ...prev.filter((p) => p !== savedPrompt).slice(0, 9),
             ]);
             setCurrentHistoryIndex(-1);
+            await onInteractionSubmitted?.();
             // WebSocket connection is already active via subscription - no need for SSE
         }
         catch (err) {
@@ -3801,6 +3822,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             await startAgent(request);
             // If user changed mode/model while the agent was new, persist them now
             await persistPendingSettingsIfNeeded();
+            await onInteractionSubmitted?.();
             // WebSocket connection is already active via subscription - no need for SSE
         }
         catch (err) {
@@ -4343,9 +4365,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             detail: { agentId: parentAgentId },
         }));
     }, [parentAgentId]);
-    if (isLoading && !activeInlineDialog) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), "Loading agent..."] }) }));
-    }
+    const loadingContent = isLoading && !activeInlineDialog ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), "Loading agent..."] }) })) : null;
     const renderContextInfoBar = () => (_jsx(ContextInfoBar, { agent: agent, agentMetadata: agentMetadata, setAgentMetadata: setAgentMetadata, setAgent: setAgent, resolvedPageName: resolvedPageName, resolvedComponentName: resolvedComponentName, resolvedFieldName: resolvedFieldName, isLiveEditorContextMode: isLiveEditorContextMode, onRefreshContext: handleRefreshContext }));
     const renderCostLimitBanner = () => {
         if (!costLimitExceeded)
@@ -4385,7 +4405,172 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             return null;
         return (_jsx("div", { className: "m-3 rounded border border-red-300 bg-red-50 p-3 text-[11px] text-red-900", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "mt-0.5 h-4 w-4 shrink-0 text-red-500", strokeWidth: 1 }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "mb-1 font-semibold", children: "Agent Error" }), _jsx("div", { className: "text-red-800", children: errorMessage })] })] }) }));
     };
-    return (_jsxs("div", { className: `flex h-full min-h-0 flex-col ${className || ""}`, children: [parentAgentId && !simpleMode && (_jsx("div", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2", children: _jsxs("button", { onClick: handleBackToParent, className: "flex items-center gap-2 text-[11px] text-gray-600 transition-colors hover:text-gray-900", title: "Back to parent agent", children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { children: "Back to parent agent" })] }) })), _jsxs("div", { ref: messagesContainerRef, className: "flex-1 overflow-y-auto", onScroll: handleScroll, children: [error && (_jsx("div", { className: "m-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-3 select-text", children: _jsxs("div", { className: "flex items-start", children: [_jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 text-red-400", strokeWidth: 1 }), _jsxs("div", { className: "ml-3", children: [_jsx("p", { className: "text-[11px] font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-[11px] text-red-700", children: error })] })] }) })), messages.length === 0 && !error && !hideGreeting && (_jsx("div", { className: "flex h-full items-center justify-center", children: !activeProfile ? (_jsx(Loader2, { className: "mx-auto h-8 w-8 animate-spin text-gray-400" })) : (_jsx(AgentGreeting, { profile: activeProfile, onPromptClick: (p) => {
+    const renderInlineDialogContent = () => {
+        if (!activeInlineDialog)
+            return null;
+        if (activeInlineDialog.request.dialogType === "questionnaire") {
+            return (_jsx("div", { className: "agent-inline-dialog", children: _jsx(QuestionnaireInline, { title: activeInlineDialog.request.title, description: activeInlineDialog.request.description, parameters: activeInlineDialog.request.parameters, footerActions: questionnaireFooterActions, onClose: (result) => {
+                        activeInlineDialog.onComplete(result);
+                        setActiveInlineDialog(null);
+                        void onInteractionSubmitted?.();
+                    }, onCancel: () => {
+                        activeInlineDialog.onCancel();
+                        setActiveInlineDialog(null);
+                    } }) }));
+        }
+        const dialogRegistration = editContext?.configuration?.editor?.agentDialogs?.find((d) => d.dialogType === activeInlineDialog.request.dialogType);
+        if (dialogRegistration) {
+            const DialogComponent = dialogRegistration.component;
+            return (_jsx("div", { className: "agent-inline-dialog", children: _jsx(DialogComponent, { title: activeInlineDialog.request.title, description: activeInlineDialog.request.description, parameters: activeInlineDialog.request.parameters, onClose: (result) => {
+                        activeInlineDialog.onComplete(result);
+                        setActiveInlineDialog(null);
+                        if (activeInlineDialog.request.dialogType === "questionnaire") {
+                            void onInteractionSubmitted?.();
+                        }
+                    }, onCancel: () => {
+                        activeInlineDialog.onCancel();
+                        setActiveInlineDialog(null);
+                    } }) }));
+        }
+        return (_jsx("div", { className: "agent-inline-dialog", children: _jsxs("div", { className: "p-4 text-sm text-red-500", children: ["Unknown dialog type: ", activeInlineDialog.request.dialogType] }) }));
+    };
+    const latestSummaryAssistantGroup = useMemo(() => {
+        if (hideSummaryMessages)
+            return null;
+        const groups = groupConsecutiveMessages(messages);
+        for (let groupIndex = groups.length - 1; groupIndex >= 0; groupIndex -= 1) {
+            const group = groups[groupIndex];
+            if (!group || group.type !== "assistant-group")
+                continue;
+            const filteredMessages = group.messages.filter((msg) => {
+                const content = msg.content || "";
+                return !content.startsWith("⚠️") || !content.includes("Cost limit");
+            });
+            if (filteredMessages.length === 0)
+                continue;
+            return {
+                messages: filteredMessages,
+                isLastGroup: groupIndex === groups.length - 1,
+            };
+        }
+        return null;
+    }, [messages, hideSummaryMessages]);
+    const summaryModeContent = displayMode === "summary" ? (() => {
+        const inlineDialog = renderInlineDialogContent();
+        const summaryMessages = latestSummaryAssistantGroup
+            ? convertAgentMessagesToAiFormat(latestSummaryAssistantGroup.messages)
+            : [];
+        const summaryOperations = latestSummaryAssistantGroup
+            ? getOperationsForMessageGroup(summaryMessages, agentOperations)
+            : [];
+        return (_jsxs("div", { className: `flex h-full min-h-0 flex-col ${className || ""}`, children: [_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 &&
+                            (isSubmitting || isConnecting) && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [activeProfile?.svgIcon ? (_jsx("div", { className: "flex h-16 w-16 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                            __html: activeProfile.svgIcon,
+                                        } })) : (_jsx(SecretAgentIcon, { size: 64, strokeWidth: 1, className: "text-gray-400" })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-gray-400" })] })] }) })), renderErrorBanner(), inlineDialog ? (inlineDialog) : latestSummaryAssistantGroup ? (_jsx("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: _jsx(AiResponseMessage, { messages: summaryMessages, finished: !latestSummaryAssistantGroup.isLastGroup || !isExecuting, editOperations: summaryOperations, error: error || undefined, profileSvgIcon: activeProfile?.svgIcon, agentId: agent?.id || agentStub.id, agentName: activeProfile?.agentName ||
+                                    activeProfile?.displayTitle ||
+                                    activeProfile?.name, allPendingApprovals: allPendingApprovals, onSwitchToAutonomous: handleSwitchToAutonomous, onQuickAction: (action) => {
+                                    const text = (action.prompt ||
+                                        action.value ||
+                                        action.label ||
+                                        "").trim();
+                                    if (!text)
+                                        return;
+                                    if (isExecuting) {
+                                        try {
+                                            handleStop();
+                                        }
+                                        catch { }
+                                    }
+                                    sendQuickMessage(text);
+                                } }) })) : hideSummaryWaitingPlaceholder ? (_jsx("div", { className: "flex h-full min-h-[220px] items-center justify-center p-6", children: summaryPlaceholderActions ? (_jsx("div", { className: "flex justify-center", children: summaryPlaceholderActions })) : null })) : (_jsx("div", { className: "flex h-full min-h-[220px] items-center justify-center p-6", children: _jsxs("div", { className: "max-w-md rounded-xl border border-slate-200 bg-slate-50 px-5 py-4 text-center text-sm text-slate-600", children: [_jsx("div", { children: shouldShowThinkingDots || isExecuting
+                                            ? "The agent is still working. The next update will appear here automatically."
+                                            : agent?.statusMessage || "Waiting for the next agent update." }), summaryPlaceholderActions ? (_jsx("div", { className: "mt-3 flex justify-center", children: summaryPlaceholderActions })) : null] }) })), shouldShowThinkingDots &&
+                            !inlineDialog &&
+                            !latestSummaryAssistantGroup && (_jsxs("div", { className: "flex gap-3 px-4 py-3", "data-testid": "agent-thinking-dots", children: [_jsx("div", { className: "shrink-0", children: activeProfile?.svgIcon ? (_jsx("div", { className: "text-gray-2 flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                            __html: activeProfile.svgIcon,
+                                        } })) : (_jsx(SecretAgentIcon, { size: 20, strokeWidth: 1, className: "text-gray-2" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "text-dark text-xs font-medium", children: activeProfile?.agentName ||
+                                                        activeProfile?.displayTitle ||
+                                                        activeProfile?.name ||
+                                                        "Agent" }), _jsx("span", { className: "text-xs text-gray-400", children: formatTime(new Date()) })] }), _jsxs("div", { className: "flex items-center gap-1 pt-2", children: [_jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" }), _jsx("div", { className: "h-1 w-1 animate-bounce rounded-full bg-gray-400" })] })] })] })), _jsx("div", { ref: messagesEndRef })] }), showSummaryInput && !activeInlineDialog ? (_jsxs("div", { className: cn("border-t border-gray-200 p-4", simpleMode && "pb-10"), children: [activePlaceholderInput ? (_jsx(PlaceholderInput, { ref: placeholderInputRef, text: activePlaceholderInput.text, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: setAllPlaceholdersFilled, onComplete: (filledText) => {
+                                setActivePlaceholderInput(null);
+                                setAllPlaceholdersFilled(false);
+                                if (activePlaceholderInput.behavior === "compose" &&
+                                    !hideBottomControls) {
+                                    setPrompt(filledText);
+                                    setInputPlaceholder("Review and edit, then press Enter to send");
+                                    if (textareaRef.current) {
+                                        try {
+                                            textareaRef.current.focus();
+                                            const v = textareaRef.current.value || "";
+                                            textareaRef.current.selectionStart = v.length;
+                                            textareaRef.current.selectionEnd = v.length;
+                                        }
+                                        catch { }
+                                    }
+                                }
+                                else {
+                                    if (isExecuting) {
+                                        try {
+                                            handleStop();
+                                        }
+                                        catch { }
+                                    }
+                                    sendQuickMessage(filledText);
+                                }
+                            }, onCancel: () => {
+                                setActivePlaceholderInput(null);
+                                setAllPlaceholdersFilled(false);
+                            } })) : prompt && /\{\{[^{}]+\}\}|<<[^<>]+>>/.test(prompt) ? (_jsx(PlaceholderInput, { ref: promptPlaceholderInputRef, text: prompt, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: setAllPlaceholdersFilled, onComplete: (filledText) => {
+                                setPrompt(filledText);
+                                setAllPlaceholdersFilled(false);
+                                if (filledText.trim()) {
+                                    if (isExecuting) {
+                                        try {
+                                            handleStop();
+                                        }
+                                        catch { }
+                                    }
+                                    sendQuickMessage(filledText);
+                                }
+                            }, onCancel: () => {
+                                setPrompt("");
+                                setAllPlaceholdersFilled(false);
+                                setInputPlaceholder("Type your message... (Enter to send, Shift+Enter or Ctrl+Enter for new line)");
+                            } })) : (_jsx("div", { className: "flex items-stretch gap-2", children: _jsx(Textarea, { ref: textareaRef, style: { viewTransitionName: "assistant-chat-input" }, value: prompt, onChange: (e) => {
+                                    setPrompt(e.target.value);
+                                    if (!/\{\{[^{}]+\}\}|<<[^<>]+>>/.test(e.target.value)) {
+                                        setAllPlaceholdersFilled(false);
+                                    }
+                                    if (currentHistoryIndex !== -1) {
+                                        setCurrentHistoryIndex(-1);
+                                    }
+                                }, onKeyDown: handleKeyPress, onPaste: handlePaste, onFocus: () => {
+                                    shouldMaintainFocusRef.current = true;
+                                }, onBlur: () => {
+                                    shouldMaintainFocusRef.current = false;
+                                }, placeholder: inputPlaceholder, className: "max-h-[250px] min-h-[80px] flex-1 resize-y overflow-y-auto text-[12px] lg:max-h-[450px]", "data-testid": "agent-terminal-prompt", disabled: isSubmitting }) })), (() => {
+                            const isInPlaceholderMode = activePlaceholderInput ||
+                                (prompt && /\{\{[^{}]+\}\}|<<[^<>]+>>/.test(prompt));
+                            const placeholderShowsOwnButtons = hideBottomControls && isInPlaceholderMode;
+                            if (placeholderShowsOwnButtons)
+                                return null;
+                            return (_jsxs("div", { className: cn("mt-2 flex items-stretch gap-2", hideBottomControls || simpleMode || isInPlaceholderMode
+                                    ? "justify-end"
+                                    : "justify-between"), children: [!hideBottomControls && !simpleMode && !isInPlaceholderMode ? (_jsx("div", { className: "flex-1" })) : null, _jsx(Button, { type: "button", size: "sm", onClick: () => {
+                                            if (isExecuting) {
+                                                handleStop();
+                                            }
+                                            else {
+                                                handleSubmit();
+                                            }
+                                        }, disabled: !isExecuting &&
+                                            !activePlaceholderInput &&
+                                            (!prompt.trim() || isSubmitting), "data-testid": "agent-send-stop-button", children: isExecuting ? "Stop" : "Send" })] }));
+                        })()] })) : null] }));
+    })() : null;
+    return (loadingContent ? (loadingContent) : displayMode === "summary" && summaryModeContent ? (summaryModeContent) : (_jsxs("div", { className: `flex h-full min-h-0 flex-col ${className || ""}`, children: [parentAgentId && !simpleMode && (_jsx("div", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2", children: _jsxs("button", { onClick: handleBackToParent, className: "flex items-center gap-2 text-[11px] text-gray-600 transition-colors hover:text-gray-900", title: "Back to parent agent", children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { children: "Back to parent agent" })] }) })), _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);
                                 // Use setTimeout to ensure state is updated before submission
                                 setTimeout(() => {
@@ -4556,23 +4741,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                             new Date().toDateString()
                                                                             ? formatTime(new Date(qp.scheduledFor))
                                                                             : formatDateTime(new Date(qp.scheduledFor))] })] }))] })] }) }) }, qp.id));
-                            }) })] }) })), activeInlineDialog &&
-                (() => {
-                    // Look up dialog component from config
-                    const dialogRegistration = editContext?.configuration?.editor?.agentDialogs?.find((d) => d.dialogType === activeInlineDialog.request.dialogType);
-                    if (dialogRegistration) {
-                        const DialogComponent = dialogRegistration.component;
-                        return (_jsx("div", { className: "agent-inline-dialog", children: _jsx(DialogComponent, { title: activeInlineDialog.request.title, description: activeInlineDialog.request.description, parameters: activeInlineDialog.request.parameters, onClose: (result) => {
-                                    activeInlineDialog.onComplete(result);
-                                    setActiveInlineDialog(null);
-                                }, onCancel: () => {
-                                    activeInlineDialog.onCancel();
-                                    setActiveInlineDialog(null);
-                                } }) }));
-                    }
-                    // Fallback for unknown dialog types
-                    return (_jsx("div", { className: "agent-inline-dialog", children: _jsxs("div", { className: "p-4 text-sm text-red-500", children: ["Unknown dialog type: ", activeInlineDialog.request.dialogType] }) }));
-                })(), _jsxs("div", { className: cn("border-t border-gray-200 p-4", simpleMode && "pb-10"), children: [activePlaceholderInput ? (
+                            }) })] }) })), renderInlineDialogContent(), _jsxs("div", { className: cn("border-t border-gray-200 p-4", simpleMode && "pb-10"), children: [activePlaceholderInput ? (
                     // Placeholder Input (from quick actions)
                     // Show internal buttons only in splash mode (hideBottomControls) since external buttons won't be visible there
                     _jsx(PlaceholderInput, { ref: placeholderInputRef, text: activePlaceholderInput.text, showButtons: hideBottomControls, buttonsClassName: hideBottomControls ? "justify-end" : "", onFilledChange: setAllPlaceholdersFilled, onComplete: (filledText) => {
@@ -4686,8 +4855,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                 }
                                             } }), _jsxs(Popover, { open: showAgentSettings, onOpenChange: (open) => {
                                                 setShowAgentSettings(open);
-                                                if (!open)
-                                                    setSkillSearchTerm("");
                                             }, 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) => {
                                                                             const nextProfile = profiles.find((x) => x.id === val);
                                                                             if (!nextProfile)
@@ -4759,21 +4926,34 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                             catch (err) {
                                                                                 console.error("Failed to persist agent model", err);
                                                                             }
-                                                                        } })] })) : null, _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-[11px] font-medium text-gray-700", children: [_jsx(Target, { className: "h-3 w-3", strokeWidth: 1 }), "Skills"] }), _jsx(Input, { value: skillSearchTerm, onChange: (e) => setSkillSearchTerm(e.target.value), placeholder: "Search skills...", className: "mb-2 h-6 px-2 text-[10px]" }), selectedSkillIds.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1", children: selectedSkillIds.map((skillId) => {
+                                                                        } })] })) : null, _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-[11px] font-medium text-gray-700", children: [_jsx(Target, { className: "h-3 w-3", strokeWidth: 1 }), "Skills"] }), selectedSkillIds.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1", children: selectedSkillIds.map((skillId) => {
                                                                             const skill = selectedSkills.find((s) => s.id === skillId);
                                                                             return (_jsxs("div", { className: "inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-700", children: [_jsx("span", { children: skill?.name || skillId }), _jsx("button", { type: "button", className: "rounded p-0.5 text-gray-500 hover:bg-gray-200 hover:text-gray-700", title: "Open skill item", "aria-label": `Open ${skill?.name || skillId}`, onClick: () => {
                                                                                             void handleOpenSkillItem(skillId);
                                                                                         }, children: _jsx(ExternalLink, { className: "h-2.5 w-2.5", strokeWidth: 1.5 }) }), backendAssignedSkillSet.has(skillId.toLowerCase()) ? (_jsx("span", { className: "text-[9px] text-gray-500", children: "auto" })) : (_jsx("button", { type: "button", className: "rounded p-0.5 text-gray-500 hover:bg-gray-200 hover:text-gray-700", onClick: () => {
                                                                                             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));
-                                                                        }) })), _jsx("div", { className: "max-h-40 space-y-1 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-1.5", children: skillsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading skills..." })) : filteredSelectableSkills.length > 0 ? (filteredSelectableSkills.map((skill) => (_jsxs("button", { type: "button", className: "flex w-full items-start gap-1 rounded px-1.5 py-1 text-left text-[10px] text-gray-700 hover:bg-gray-100", onClick: () => {
-                                                                                void handleAddSkill(skill.id);
-                                                                                setSkillSearchTerm("");
-                                                                            }, children: [_jsx(Plus, { className: "mt-[1px] h-2.5 w-2.5 shrink-0", strokeWidth: 1 }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-medium text-gray-900", children: skill.name }), skill.description && (_jsx("span", { className: "line-clamp-2 text-[10px] text-gray-500", children: skill.description }))] })] }, skill.id)))) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: selectableSkills.length === 0
-                                                                                ? selectedSkillIds.length > 0
-                                                                                    ? "All allowed skills are selected"
-                                                                                    : "No skills available for this profile"
-                                                                                : "No skills match your search" })) }), !skillsLoading && selectableSkills.length > 0 && (_jsxs("div", { className: "mt-1 text-[10px] text-gray-500", children: ["Showing ", filteredSelectableSkills.length, " of ", selectableSkills.length] })), skillsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: skillsError }))] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Subscribed triggers" }), _jsx("div", { className: "max-h-28 space-y-1 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-1.5", children: triggerSubscriptionsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading subscribed triggers..." })) : activeTriggerSubscriptions.length > 0 ? (activeTriggerSubscriptions.map((sub) => {
+                                                                        }) })), _jsxs("div", { className: "relative h-40 rounded border border-gray-200 bg-gray-50", children: [_jsx(ScrollingContentTree, { rootItemIds: skillRootIds, selectedItemId: selectedSkillIds[selectedSkillIds.length - 1] || undefined, expandedItemId: selectedSkillIds[selectedSkillIds.length - 1] ||
+                                                                                    skillRootIds[0], scrollToSelected: true, hideRootNodes: false, onSelectionChange: (selection) => {
+                                                                                    const selected = selection[0];
+                                                                                    if (!selected?.id)
+                                                                                        return;
+                                                                                    if (selectableTemplateIdSet.size > 0 &&
+                                                                                        (!selected.templateId ||
+                                                                                            !selectableTemplateIdSet.has(selected.templateId.toLowerCase()))) {
+                                                                                        return;
+                                                                                    }
+                                                                                    if (!profileFilteredSkillIdSet.has(selected.id.toLowerCase())) {
+                                                                                        return;
+                                                                                    }
+                                                                                    void handleAddSkill(selected.id);
+                                                                                } }), skillsLoading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/70 text-[10px] text-gray-500", children: "Loading skills..." }))] }), !skillsLoading && profileFilteredSkills.length > 0 && (_jsx("div", { className: "mt-1 text-[10px] text-gray-500", children: "Click a skill item in the tree to add it." })), skillsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: skillsError })), !skillsLoading &&
+                                                                        !skillsError &&
+                                                                        skillRootIds.length === 0 && (_jsx("div", { className: "mt-1 text-[10px] text-gray-500", children: "No skill roots available." })), !skillsLoading &&
+                                                                        !skillsError &&
+                                                                        profileFilteredSkills.length === 0 && (_jsx("div", { className: "mt-1 text-[10px] text-gray-500", children: selectedSkillIds.length > 0
+                                                                            ? "All allowed skills are selected"
+                                                                            : "No skills available for this profile" }))] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Subscribed triggers" }), _jsx("div", { className: "max-h-28 space-y-1 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-1.5", children: triggerSubscriptionsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading subscribed triggers..." })) : activeTriggerSubscriptions.length > 0 ? (activeTriggerSubscriptions.map((sub) => {
                                                                             const filterText = (sub.filter || "").trim();
                                                                             return (_jsxs("div", { className: "rounded border border-gray-200 bg-white px-1.5 py-1", children: [_jsx("div", { className: "truncate text-[10px] font-medium text-gray-800", children: sub.triggerName }), filterText.length > 0 && (_jsxs("div", { className: "mt-0.5 line-clamp-2 break-all text-[9px] text-gray-500", children: ["filter: ", filterText] }))] }, sub.id));
                                                                         })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "No active trigger subscriptions" })) }), triggerSubscriptionsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: triggerSubscriptionsError }))] })] }) })] }), activeProfile?.prompts?.length ? (_jsxs(Popover, { open: showPredefined, onOpenChange: setShowPredefined, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "rounded p-1 hover:bg-gray-100", onClick: () => { }, title: "Predefined prompts", "aria-label": "Predefined prompts", type: "button", children: _jsx(Wand2, { className: "h-3 w-3", strokeWidth: 1 }) }) }), _jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: _jsx("div", { className: "max-h-56 overflow-y-auto p-2", children: activeProfile.prompts.map((p, index) => (_jsx("div", { className: "cursor-pointer rounded p-1.5 text-[10px] text-gray-700 hover:bg-gray-100", onClick: () => {
@@ -4829,6 +5009,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                 cacheWriteCost: liveTotals.cacheWriteCost ?? 0,
                                 totalCost: liveTotals.totalCost,
                             }
-                            : totalTokens, effectiveCostLimit: effectiveCostLimit, messages: messages, showCompressionPopover: showCompressionPopover, setShowCompressionPopover: setShowCompressionPopover }))] })] }));
+                            : totalTokens, effectiveCostLimit: effectiveCostLimit, messages: messages, showCompressionPopover: showCompressionPopover, setShowCompressionPopover: setShowCompressionPopover }))] })] })));
 }
 //# sourceMappingURL=AgentTerminal.js.map