@parhelia/core 0.1.12272 → 0.1.12285

package/dist/editor/ai/AgentTerminal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo, } from "react";
-import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, ArrowLeft, DollarSign, ExternalLink, Settings2, Target, X, } from "lucide-react";
+import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, ArrowLeft, DollarSign, ExternalLink, Settings2, Target, X, Plus, } from "lucide-react";
 import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkillCatalog, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, } from "../services/agentService";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { localStorageService } from "../services/localStorageService";
@@ -50,6 +50,9 @@ function buildPlaceholderAgentDetails(agentStub) {
         messageCount: agentStub.messageCount || 0,
     };
 }
+function normalizeDialogAgentId(value) {
+    return value?.trim().toLowerCase() || "";
+}
 // Simple user message component
 const UserMessage = ({ message }) => {
     const content = message.content || "";
@@ -660,7 +663,7 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
 // interface AgentTerminalProps {
 //   agentStub: Agent;
 // }
-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, }) {
+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, onQuestionnaireOpenChange, questionnaireFooterActions, hideSummaryMessages = false, summaryPlaceholderActions, summaryPlaceholderMessage, hideSummaryWaitingPlaceholder = false, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
     const [agent, setAgent] = useState(() => buildPlaceholderAgentDetails(agentStub));
@@ -705,10 +708,19 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     // Agent inline dialog state (for component type selector, etc.)
     const [activeInlineDialog, setActiveInlineDialog] = useState(null);
     const activeInlineDialogRef = useRef(activeInlineDialog);
+    const isQuestionnaireDialogOpen = activeInlineDialog?.request.dialogType === "questionnaire";
     const orphanTimeoutRef = useRef(null);
     useEffect(() => {
         activeInlineDialogRef.current = activeInlineDialog;
     }, [activeInlineDialog]);
+    useEffect(() => {
+        onQuestionnaireOpenChange?.(isQuestionnaireDialogOpen);
+    }, [isQuestionnaireDialogOpen, onQuestionnaireOpenChange]);
+    useEffect(() => {
+        return () => {
+            onQuestionnaireOpenChange?.(false);
+        };
+    }, [onQuestionnaireOpenChange]);
     const isWaitingRef = useRef(false);
     useEffect(() => {
         isWaitingRef.current = isWaitingForResponse;
@@ -784,6 +796,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [hiddenContextPanelTabIds, setHiddenContextPanelTabIds] = useState(new Set());
     const [showCostAndAgent, setShowCostAndAgent] = useState(false);
     const [showAgentSettings, setShowAgentSettings] = useState(false);
+    const [showSkillPicker, setShowSkillPicker] = useState(false);
     const [availableSkills, setAvailableSkills] = useState([]);
     const [skillRootIds, setSkillRootIds] = useState([]);
     const [selectableTemplateIds, setSelectableTemplateIds] = useState([]);
@@ -1041,11 +1054,12 @@ 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 profileFilteredSkillIdSet = useMemo(() => new Set(profileFilteredSkills.map((s) => s.id.toLowerCase())), [profileFilteredSkills]);
+    const availableSkillIdSet = useMemo(() => new Set(availableSkills.map((skill) => skill.id.toLowerCase())), [availableSkills]);
     const selectableTemplateIdSet = useMemo(() => new Set(selectableTemplateIds.map((id) => id.toLowerCase())), [selectableTemplateIds]);
     const selectedSkills = useMemo(() => selectedSkillIds
-        .map((id) => profileFilteredSkills.find((s) => s.id.toLowerCase() === id.toLowerCase()))
-        .filter((s) => !!s), [profileFilteredSkills, selectedSkillIds]);
+        .map((id) => availableSkills.find((s) => s.id.toLowerCase() === id.toLowerCase()))
+        .filter((s) => !!s), [availableSkills, selectedSkillIds]);
     const selectedSkillSet = useMemo(() => new Set(selectedSkillIds.map((id) => id.toLowerCase())), [selectedSkillIds]);
     const backendAssignedSkillSet = useMemo(() => new Set(backendAssignedSkillIds.map((id) => id.toLowerCase())), [backendAssignedSkillIds]);
     // Remove deprecated cost limit fields from metadata to avoid confusion with agent/profile settings
@@ -2219,6 +2233,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             const isRunning = agentData.status === "running" || agentData.status === 1;
             const isWaiting = agentData.status === "waitingForApproval" ||
                 agentData.status === 2 ||
+                agentData.status === "waitingForInput" ||
                 agentData.status === "costLimitReached" ||
                 agentData.status === 7;
             const keepLocalStreaming = isRunning || isWaiting;
@@ -2262,6 +2277,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 const runningNow = agentData.status === "running" || agentData.status === 1;
                 const waitingForApprovalNow = agentData.status === "waitingForApproval" ||
                     agentData.status === 2;
+                const waitingForInputNow = agentData.status === "waitingForInput";
                 const hasStreamingNow = merged.some((m) => !m.isCompleted && m.messageType === "streaming");
                 if (runningNow || hasStreamingNow) {
                     setIsWaitingForResponse(true);
@@ -2269,11 +2285,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     // Agent is actively running, show thinking dots
                     setIsAgentThinking(true);
                 }
-                else if (waitingForApprovalNow) {
+                else if (waitingForApprovalNow || waitingForInputNow) {
                     setIsWaitingForResponse(false);
                     isWaitingRef.current = false;
                     setIsConnecting(false);
-                    // Agent is waiting for user approval, hide thinking dots
+                    // Agent is waiting for user input/approval, hide thinking dots
                     setIsAgentThinking(false);
                 }
                 else {
@@ -2914,7 +2930,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     setIsWaitingForResponse(false);
                     return;
                 }
-                // Handle "WaitingForApproval" state explicitly
+                // Handle waiting states explicitly
                 if (statusData?.state === "WaitingForApproval" ||
                     statusData?.state === "waitingForApproval") {
                     setAgent((prev) => prev ? { ...prev, status: "waitingForApproval" } : prev);
@@ -2923,6 +2939,14 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                     setIsAgentThinking(false);
                     return;
                 }
+                if (statusData?.state === "WaitingForInput" ||
+                    statusData?.state === "waitingForInput") {
+                    setAgent((prev) => prev ? { ...prev, status: "waitingForInput" } : prev);
+                    setIsConnecting(false);
+                    setIsWaitingForResponse(false);
+                    setIsAgentThinking(false);
+                    return;
+                }
                 if (statusData?.state === "CostLimitReached") {
                     const totalCost = Number(statusData.totalCost) || 0;
                     const costLimit = Number(statusData.costLimit) || agent?.costLimit || 0;
@@ -3133,6 +3157,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             const isRunning = currentAgent.status === "running" || currentAgent.status === 1;
             const isWaitingForApproval = currentAgent.status === "waitingForApproval" ||
                 currentAgent.status === 2;
+            const isWaitingForInput = currentAgent.status === "waitingForInput";
             if (isRunning) {
                 setIsWaitingForResponse(true);
                 isWaitingRef.current = true;
@@ -3140,10 +3165,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 // Agent is currently running, show thinking dots
                 setIsAgentThinking(true);
             }
-            else if (isWaitingForApproval) {
+            else if (isWaitingForApproval || isWaitingForInput) {
                 setIsWaitingForResponse(false);
                 isWaitingRef.current = false;
-                // Agent is waiting for user approval, hide thinking dots
+                // Agent is waiting for user input/approval, hide thinking dots
                 setIsAgentThinking(false);
             }
             else {
@@ -3224,8 +3249,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             orphanTimeoutRef.current = null;
         }
         const globalListeners = (globalThis.__agentDialogMountedAgents ?? []).filter((x) => typeof x === "string");
-        if (!globalListeners.includes(agentStubIdRefForDialogs.current)) {
-            globalListeners.push(agentStubIdRefForDialogs.current);
+        const normalizedAgentStubId = normalizeDialogAgentId(agentStubIdRefForDialogs.current);
+        if (normalizedAgentStubId &&
+            !globalListeners.includes(normalizedAgentStubId)) {
+            globalListeners.push(normalizedAgentStubId);
         }
         globalThis.__agentDialogMountedAgents = globalListeners;
         const handleDialogShow = (event) => {
@@ -3233,18 +3260,20 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             const request = detail?.request;
             const onComplete = detail?.onComplete;
             const onCancel = detail?.onCancel;
-            const terminalAgentId = agentIdRefForDialogs.current;
-            const terminalAgentStubId = agentStubIdRefForDialogs.current;
+            const terminalAgentId = normalizeDialogAgentId(agentIdRefForDialogs.current);
+            const terminalAgentStubId = normalizeDialogAgentId(agentStubIdRefForDialogs.current);
             const isActiveNow = isActiveRefForDialogs.current;
             if (!isActiveNow) {
                 return;
             }
             if (!request)
                 return;
+            const requestAgentId = normalizeDialogAgentId(request.agentId);
             // Only handle dialog requests for this terminal's agent stub
-            if (request.agentId &&
+            if (requestAgentId &&
                 terminalAgentStubId &&
-                request.agentId !== terminalAgentStubId) {
+                requestAgentId !== terminalAgentStubId &&
+                requestAgentId !== terminalAgentId) {
                 return;
             }
             console.log("[AgentTerminal] Received inline dialog request:", request);
@@ -3271,7 +3300,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         window.addEventListener("agent:dialog:show", handleDialogShow);
         return () => {
             const mounted = (globalThis.__agentDialogMountedAgents ?? []).filter((x) => typeof x === "string");
-            globalThis.__agentDialogMountedAgents = mounted.filter((id) => id !== agentStubIdRefForDialogs.current);
+            globalThis.__agentDialogMountedAgents = mounted.filter((id) => id !== normalizeDialogAgentId(agentStubIdRefForDialogs.current));
             // If unmounting with an active dialog, defer the orphan event so that
             // React strict mode remounts can cancel it. Only real unmounts fire.
             const orphanedDialog = activeInlineDialogRef.current;
@@ -3286,16 +3315,27 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             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
+    // Announce when this terminal is ready to accept dialogs.
+    // Fire immediately on mount using agentStub.id so the AgentDialogHandler
+    // can re-dispatch pending dialogs without waiting for the async agent load.
+    // Also fire when agent?.id becomes available in case it differs from the stub.
     useEffect(() => {
-        if (agent?.id) {
-            console.log("[AgentTerminal] Terminal ready for agent:", agent.id);
+        const normalizedStubId = normalizeDialogAgentId(agentStub.id);
+        if (normalizedStubId) {
             window.dispatchEvent(new CustomEvent("agent:terminal:ready", {
-                detail: { agentId: agent.id },
+                detail: { agentId: normalizedStubId },
             }));
         }
-    }, [agent?.id]);
+    }, [agentStub.id]);
+    useEffect(() => {
+        const normalizedAgentId = normalizeDialogAgentId(agent?.id);
+        const normalizedStubId = normalizeDialogAgentId(agentStub.id);
+        if (normalizedAgentId && normalizedAgentId !== normalizedStubId) {
+            window.dispatchEvent(new CustomEvent("agent:terminal:ready", {
+                detail: { agentId: normalizedAgentId },
+            }));
+        }
+    }, [agent?.id, agentStub.id]);
     // Profiles are provided by parent component (Agents). No local loading here.
     // Select active profile based on agent.profileId or agentStub.profileId
     useEffect(() => {
@@ -4492,10 +4532,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                             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
+                                    } }) })) : hideSummaryWaitingPlaceholder ? (_jsx("div", { className: `flex h-full items-center justify-center ${compact ? "min-h-[100px] p-3" : "min-h-[220px] p-6"}`, children: summaryPlaceholderActions ? (_jsx("div", { className: "flex justify-center", children: summaryPlaceholderActions })) : null })) : (_jsx("div", { className: `flex h-full items-center justify-center ${compact ? "min-h-[100px] p-3" : "min-h-[220px] p-6"}`, children: _jsxs("div", { className: `max-w-md rounded-xl border border-slate-200 bg-slate-50 text-center text-slate-600 ${compact ? "px-3 py-2 text-xs" : "px-5 py-4 text-sm"}`, 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 &&
+                                                    summaryPlaceholderMessage ||
+                                                    "Waiting for the next agent update." }), summaryPlaceholderActions ? (_jsx("div", { className: `flex justify-center ${compact ? "mt-2" : "mt-3"}`, 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,
@@ -4869,6 +4910,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                 }
                                             } }), _jsxs(Popover, { open: showAgentSettings, onOpenChange: (open) => {
                                                 setShowAgentSettings(open);
+                                                if (!open) {
+                                                    setShowSkillPicker(false);
+                                                }
                                             }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "xs", variant: "outline", className: "h-5 rounded border px-1.5 text-[11px] text-gray-600", "data-testid": "agent-settings-popover-trigger", children: [_jsx(Settings2, { className: "mr-1 h-3 w-3", strokeWidth: 1 }), "Agent settings"] }) }), _jsx(PopoverContent, { className: "w-80 p-3", align: "start", children: _jsxs("div", { className: "space-y-3", children: [profiles?.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Agent profile" }), _jsx(Select, { size: "xs", maxWidth: 300, searchable: profiles.length > 5, searchPlaceholder: "Filter profiles...", className: "h-6 w-full rounded border px-1.5 text-[11px] text-gray-500", value: activeProfile?.id || "", options: profileOptions, "data-testid": "agent-profile-selector", onValueChange: async (val) => {
                                                                             const nextProfile = profiles.find((x) => x.id === val);
                                                                             if (!nextProfile)
@@ -4941,7 +4985,29 @@ 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"] }), 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 justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1 text-[11px] font-medium text-gray-700", children: [_jsx(Target, { className: "h-3 w-3", strokeWidth: 1 }), "Skills"] }), _jsxs(Popover, { open: showSkillPicker, onOpenChange: setShowSkillPicker, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "xs", variant: "outline", className: "h-5 rounded border px-1.5 text-[10px] text-gray-600", "data-testid": "agent-skill-picker-trigger", children: [_jsx(Plus, { className: "mr-1 h-3 w-3", strokeWidth: 1.5 }), "Add"] }) }), _jsx(PopoverContent, { className: "w-[22rem] p-2", align: "end", side: "bottom", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[11px] font-medium text-gray-700", children: "Select a skill" }), _jsxs("div", { className: "relative h-56 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 (!availableSkillIdSet.has(selected.id.toLowerCase())) {
+                                                                                                                    return;
+                                                                                                                }
+                                                                                                                void handleAddSkill(selected.id);
+                                                                                                                setShowSkillPicker(false);
+                                                                                                            } }), skillsLoading && (_jsx("div", { className: "bg-background/70 absolute inset-0 flex items-center justify-center text-[10px] text-gray-500", children: "Loading skills..." }))] }), !skillsLoading &&
+                                                                                                    !skillsError &&
+                                                                                                    profileFilteredSkills.length > 0 && (_jsx("div", { className: "text-[10px] text-gray-500", children: "Click a skill item in the tree to add it." })), skillsError && (_jsx("div", { className: "text-[10px] text-red-600", children: skillsError })), !skillsLoading &&
+                                                                                                    !skillsError &&
+                                                                                                    skillRootIds.length === 0 && (_jsx("div", { className: "text-[10px] text-gray-500", children: "No skill roots available." })), !skillsLoading &&
+                                                                                                    !skillsError &&
+                                                                                                    profileFilteredSkills.length === 0 && (_jsx("div", { className: "text-[10px] text-gray-500", children: selectedSkillIds.length > 0
+                                                                                                        ? "All allowed skills are selected"
+                                                                                                        : "No skills available for this profile" }))] }) })] })] }), selectedSkillIds.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1", children: selectedSkillIds.map((skillId) => {
                                                                             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);