@alpaca-editor/core 1.0.4187 → 1.0.4190

package/dist/editor/ai/AgentTerminal.js

@@ -1,11 +1,12 @@
 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 React, { useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo, ViewTransition, } from "react";
 import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, } from "lucide-react";
 import { DancingDots } from "./DancingDots";
-import { getAgent, startAgent, updateAgentContext, updateAgentSettings, updateAgentCostLimit, cancelAgent, canonicalizeAgentMetadata, } from "../services/agentService";
+import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, cancelAgent, canonicalizeAgentMetadata, } from "../services/agentService";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { Textarea } from "../../components/ui/textarea";
 import { Button } from "../../components/ui/button";
+import { PlaceholderInput } from "../../components/ui/PlaceholderInput";
 import { AiResponseMessage } from "./AiResponseMessage";
 import { AgentCostDisplay } from "./AgentCostDisplay";
 import { ContextInfoBar } from "./ContextInfoBar";
@@ -439,6 +440,12 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
             id: agentMessage.id,
             content: agentMessage.content,
             formattedContent: agentMessage.content
+                ?.replace(/^######\s+(.+)$/gm, "<h6>$1</h6>")
+                ?.replace(/^#####\s+(.+)$/gm, "<h5>$1</h5>")
+                ?.replace(/^####\s+(.+)$/gm, "<h4>$1</h4>")
+                ?.replace(/^###\s+(.+)$/gm, "<h3>$1</h3>")
+                ?.replace(/^##\s+(.+)$/gm, "<h2>$1</h2>")
+                ?.replace(/^#\s+(.+)$/gm, "<h1>$1</h1>")
                 ?.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
                 ?.replace(/\n/g, "<br/>"),
             name: agentMessage.name,
@@ -468,7 +475,7 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
 // interface AgentTerminalProps {
 //   agentStub: Agent;
 // }
-export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, }) {
+export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, compact = false, hideContext = false, hideBottomControls = false, hideGreeting = false, className, initialPrompt, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
     const [agent, setAgent] = useState(undefined);
@@ -478,6 +485,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [isLoading, setIsLoading] = useState(false);
     const [isConnecting, setIsConnecting] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [activePlaceholderInput, setActivePlaceholderInput] = useState(null);
     const [agentMetadata, setAgentMetadata] = useState(null);
     // Generate a stable clientSessionId per component instance for stream deduplication
     const clientSessionIdRef = useRef(null);
@@ -650,6 +658,12 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             setIsVoiceSupported(false);
         }
     }, []);
+    // Auto-focus terminal input on mount
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, []);
     // Start voice recognition
     const startVoice = useCallback(() => {
         try {
@@ -1178,9 +1192,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const loadAgent = useCallback(async () => {
         try {
             if (agentStub.status === "new") {
-                // Set agent ID immediately for new agents
-                window.currentAgentId = agentStub.id;
-                // Set currentAgentId for new agent
                 // Derive initial profile from provided metadata if present
                 const initialProfileIdFromMeta = (() => {
                     try {
@@ -1365,8 +1376,6 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 const merged = mergeMessagesById(dbMessages, prevMessages);
                 return merged;
             });
-            // Set agent ID for existing agents too
-            window.currentAgentId = agentData.id;
             // Check if cost limit was exceeded (detect from existing messages)
             try {
                 const costLimitMessage = (agentData.messages || []).find((msg) => msg.role === "assistant" &&
@@ -1878,18 +1887,19 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         return () => window.removeEventListener("editor:focusAgentPrompt", focusHandler);
     }, []);
     // Profiles are provided by parent component (Agents). No local loading here.
-    // Select active profile based on agent.profileId or default to first
+    // Select active profile based on agent.profileId or agentStub.profileId
     useEffect(() => {
         if (!profiles || profiles.length === 0)
             return;
-        const candidate = agent?.profileId
-            ? (profiles.find((p) => p.id === agent?.profileId) ??
-                profiles[0])
+        // For new agents, use agentStub.profileId; for loaded agents, use agent.profileId
+        const profileIdToUse = agent?.profileId || agentStub.profileId;
+        const candidate = profileIdToUse
+            ? (profiles.find((p) => p.id === profileIdToUse) ?? profiles[0])
             : profiles[0];
         if (candidate && (!activeProfile || activeProfile.id !== candidate.id)) {
             setActiveProfile(candidate);
         }
-    }, [profiles, agent?.profileId]);
+    }, [profiles, agent?.profileId, agentStub.profileId]);
     // Update selected model when the active profile or agent model changes
     useEffect(() => {
         if (!activeProfile)
@@ -1966,12 +1976,13 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
     }, [agent?.id]);
     const handleSubmit = async () => {
-        if (!prompt.trim() || isSubmitting || !editContext)
+        if (isSubmitting || !editContext)
             return;
         try {
             setIsSubmitting(true);
             setError(null);
-            const agentId = agent?.id;
+            // For new agents, use agentStub.id; for existing agents, use agent.id
+            const agentId = agent?.id || agentStub.id;
             if (!agentId)
                 return;
             // Optional context factory: invoke if configured and available, otherwise continue
@@ -1995,7 +2006,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             // It will be added when we receive the agent:user:message broadcast from the server
             // This ensures all tabs (including the sending tab) have the same messageId from the database
             const request = {
-                agentId: agent.id,
+                agentId: agentId,
                 message: prompt.trim(),
                 sessionId: editContext.sessionId,
                 profileId: activeProfile?.id || profiles[0]?.id || "",
@@ -2152,232 +2163,35 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             setIsSubmitting(false);
         }
     };
-    // Context info bar helpers - must be declared before any early returns to keep hooks order stable
-    const removeContextKey = useCallback(async (key, index) => {
-        if (!agent?.id)
-            return;
-        const current = agentMetadata || {};
-        // Exclude top-level context to avoid duplicate keys when spreading
-        const currentWithoutContext = { ...current };
-        delete currentWithoutContext.context;
-        const next = {
-            ...currentWithoutContext,
-            additionalData: {
-                ...(current.additionalData || {}),
-                context: {
-                    ...((current.additionalData &&
-                        current.additionalData.context) ||
-                        {}),
-                },
-            },
-        };
-        if (next.additionalData && next.additionalData.context) {
-            const ctx = next.additionalData.context;
-            if (key === "items" && typeof index === "number" && ctx.items) {
-                ctx.items.splice(index, 1);
-                if (ctx.items.length === 0)
-                    delete ctx.items;
-            }
-            else if (key === "componentIds" &&
-                typeof index === "number" &&
-                ctx.componentIds) {
-                ctx.componentIds.splice(index, 1);
-                if (ctx.componentIds.length === 0)
-                    delete ctx.componentIds;
-            }
-            else if (key === "field") {
-                delete ctx.field;
-            }
-            else if (key === "comment") {
-                delete ctx.comment;
-            }
-        }
-        try {
-            // For new (not yet persisted) agents, only update local state
-            if (agent.status === "new") {
-                setAgentMetadata(next);
-                return;
-            }
-            // Persisted agents: update server and local cache
-            await updateAgentContext(agent.id, next);
-            setAgentMetadata(next);
-            setAgent((prev) => prev ? { ...prev, metadata: JSON.stringify(next) } : prev);
-        }
-        catch (e) {
-            console.error("Failed to update agent metadata", e);
-        }
-    }, [agent?.id, agentMetadata]);
-    const addPagesToContext = async () => {
-        if (!agent?.id || !editContext?.currentItemDescriptor)
-            return;
-        // Add the current page (currentItemDescriptor represents the current page)
-        // Note: Currently only supports adding the current page. To support multiple pages,
-        // we'd need a page selection mechanism in the UI (e.g., a page picker dialog)
-        const item = editContext.currentItemDescriptor;
-        const pageToAdd = {
-            id: item.id,
-            language: item.language,
-            version: item.version,
-            name: editContext.contentEditorItem?.name,
-            path: undefined,
-        };
-        const current = agentMetadata || {};
-        const currentPages = current.additionalData?.context?.items || [];
-        // Check if this page is already in context
-        const existingPageIds = new Set(currentPages.map((p) => `${p.id}-${p.language}-${p.version}`));
-        if (existingPageIds.has(`${pageToAdd.id}-${pageToAdd.language}-${pageToAdd.version}`)) {
-            return; // Page already exists
-        }
-        // Exclude top-level context to avoid duplicate keys when spreading
-        const currentWithoutContext = { ...current };
-        delete currentWithoutContext.context;
-        const next = {
-            ...currentWithoutContext,
-            additionalData: {
-                ...(current.additionalData || {}),
-                context: {
-                    ...((current.additionalData &&
-                        current.additionalData.context) ||
-                        {}),
-                    items: [...currentPages, pageToAdd],
-                },
-            },
-        };
-        try {
-            if (agent.status === "new") {
-                setAgentMetadata(next);
-                return;
-            }
-            await updateAgentContext(agent.id, next);
-            setAgentMetadata(next);
-            setAgent((prev) => prev ? { ...prev, metadata: JSON.stringify(next) } : prev);
-        }
-        catch (e) {
-            console.error("Failed to update agent metadata (add pages)", e);
-        }
-    };
-    const addSelectedComponentsToContext = async () => {
-        if (!agent?.id || !editContext?.selection?.length)
-            return;
-        const current = agentMetadata || {};
-        const currentComponentIds = current.additionalData?.context?.componentIds ||
-            [];
-        // Merge with existing components, avoiding duplicates
-        const existingIds = new Set(currentComponentIds);
-        const newComponentIds = editContext.selection.filter((id) => !existingIds.has(id));
-        if (newComponentIds.length === 0)
-            return; // No new components to add
-        // Exclude top-level context to avoid duplicate keys when spreading
-        const currentWithoutContext = { ...current };
-        delete currentWithoutContext.context;
-        const next = {
-            ...currentWithoutContext,
-            additionalData: {
-                ...(current.additionalData || {}),
-                context: {
-                    ...((current.additionalData &&
-                        current.additionalData.context) ||
-                        {}),
-                    componentIds: [...currentComponentIds, ...newComponentIds],
-                },
-            },
-        };
-        try {
-            if (agent.status === "new") {
-                setAgentMetadata(next);
-                return;
-            }
-            await updateAgentContext(agent.id, next);
-            setAgentMetadata(next);
-            setAgent((prev) => prev ? { ...prev, metadata: JSON.stringify(next) } : prev);
-        }
-        catch (e) {
-            console.error("Failed to update agent metadata (add components)", e);
-        }
-    };
-    const addComponentIdsToContext = async (ids) => {
-        if (!agent?.id || !ids?.length)
-            return;
-        const current = agentMetadata || {};
-        const currentComponentIds = current.additionalData?.context?.componentIds ||
-            [];
-        // Merge with existing components, avoiding duplicates
-        const existingIds = new Set(currentComponentIds);
-        const newComponentIds = ids.filter((id) => !!id && !existingIds.has(id));
-        if (newComponentIds.length === 0)
-            return;
-        // Exclude top-level context to avoid duplicate keys when spreading
-        const currentWithoutContext = { ...current };
-        delete currentWithoutContext.context;
-        const next = {
-            ...currentWithoutContext,
-            additionalData: {
-                ...(current.additionalData || {}),
-                context: {
-                    ...((current.additionalData &&
-                        current.additionalData.context) ||
-                        {}),
-                    componentIds: [...currentComponentIds, ...newComponentIds],
-                },
-            },
-        };
-        try {
-            if (agent.status === "new") {
-                setAgentMetadata(next);
-                return;
-            }
-            await updateAgentContext(agent.id, next);
-            setAgentMetadata(next);
-            setAgent((prev) => prev ? { ...prev, metadata: JSON.stringify(next) } : prev);
-        }
-        catch (e) {
-            console.error("Failed to update agent metadata (add components)", e);
-        }
-    };
-    const addPagesToContextFromItems = async (items) => {
-        if (!agent?.id || !items?.length)
-            return;
-        const current = agentMetadata || {};
-        const currentPages = current.additionalData?.context?.items || [];
-        const existingPageIds = new Set(currentPages.map((p) => `${p.id}-${p.language}-${p.version}`));
-        const pagesToAdd = items
-            .filter((it) => !!it?.id)
-            .map((it) => ({
-            id: it.id,
-            language: it.language,
-            version: it.version,
-        }))
-            .filter((p) => !existingPageIds.has(`${p.id}-${p.language}-${p.version}`));
-        if (pagesToAdd.length === 0)
-            return;
-        // Exclude top-level context to avoid duplicate keys when spreading
-        const currentWithoutContext = { ...current };
-        delete currentWithoutContext.context;
-        const next = {
-            ...currentWithoutContext,
-            additionalData: {
-                ...(current.additionalData || {}),
-                context: {
-                    ...((current.additionalData &&
-                        current.additionalData.context) ||
-                        {}),
-                    items: [...currentPages, ...pagesToAdd],
-                },
-            },
-        };
-        try {
-            if (agent.status === "new") {
-                setAgentMetadata(next);
-                return;
-            }
-            await updateAgentContext(agent.id, next);
-            setAgentMetadata(next);
-            setAgent((prev) => prev ? { ...prev, metadata: JSON.stringify(next) } : prev);
-        }
-        catch (e) {
-            console.error("Failed to update agent metadata (add items/pages)", e);
+    // Auto-send initial prompt if provided and agent has no messages yet
+    const initialPromptSentRef = useRef(false);
+    useEffect(() => {
+        if (initialPrompt !== undefined &&
+            !isLoading &&
+            !initialPromptSentRef.current &&
+            messages.length === 0 &&
+            agentStub.id &&
+            editContext &&
+            activeProfile && // MUST have activeProfile set, not just profiles.length
+            profiles.length > 0) {
+            initialPromptSentRef.current = true;
+            // Delay slightly to ensure all state is ready
+            setTimeout(() => {
+                setPrompt(initialPrompt);
+                // Trigger submit programmatically
+                handleSubmit();
+            }, 200);
         }
-    };
+    }, [
+        initialPrompt,
+        isLoading,
+        messages.length,
+        agentStub.id,
+        editContext,
+        activeProfile,
+        profiles.length,
+        handleSubmit,
+    ]);
     // Resolve display names when metadata or editor state changes
     useEffect(() => {
         const metaCtx = agentMetadata;
@@ -2551,11 +2365,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             }
                         }, children: "Extend limit and continue" }) })] }));
     };
-    return (_jsxs("div", { className: "flex h-full flex-col", 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-sm font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-sm text-red-700", children: error })] })] }) })), messages.length === 0 && !error && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("div", { className: "max-w-prose text-center", children: [activeProfile?.svgIcon ? (_jsx("div", { className: "mx-auto mb-4 flex h-24 w-24 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
-                                        __html: activeProfile.svgIcon,
-                                    } })) : (_jsx(SecretAgentIcon, { size: 96, strokeWidth: 1, className: "mx-auto mb-4 text-gray-400" })), activeProfile?.greetingMessage ? (_jsx("div", { className: "prose prose-sm mx-auto text-center", dangerouslySetInnerHTML: {
-                                        __html: activeProfile.greetingMessage,
-                                    } })) : (_jsxs(_Fragment, { children: [_jsx("h3", { className: "mb-2 text-lg font-medium text-gray-900", children: "Start a conversation" }), _jsx("p", { className: "mb-4 text-sm text-gray-500", children: "Send a message to begin working with your AI agent." }), _jsx("div", { className: "text-xs text-gray-400", children: "Your agent can help with content editing, research, and automation tasks." })] }))] }) })), _jsx("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: groupConsecutiveMessages(messages).map((group, groupIndex) => {
+    return (_jsxs("div", { className: `flex h-full 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-sm font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-sm text-red-700", children: error })] })] }) })), messages.length === 0 && !error && !hideGreeting && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsx("div", { className: "max-w-prose text-center", children: !activeProfile ? (_jsx(Loader2, { className: "h-8 w-8 animate-spin text-gray-400 mx-auto" })) : (_jsxs(_Fragment, { children: [activeProfile.svgIcon ? (_jsx("div", { className: "mx-auto mb-4 flex h-24 w-24 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                            __html: activeProfile.svgIcon,
+                                        } })) : (_jsx(SecretAgentIcon, { size: 96, strokeWidth: 1, className: "mx-auto mb-4 text-gray-400" })), activeProfile.greetingMessage ? (_jsx(ViewTransition, { children: _jsx("div", { className: "prose prose-sm mx-auto text-center", dangerouslySetInnerHTML: {
+                                                __html: activeProfile.greetingMessage,
+                                            } }) })) : (_jsxs(_Fragment, { children: [_jsx("h3", { className: "mb-2 text-lg font-medium text-gray-900", children: "Start a conversation" }), _jsx("p", { className: "mb-4 text-sm text-gray-500", children: "Send a message to begin working with your AI agent." }), _jsx("div", { className: "text-xs text-gray-400", children: "Your agent can help with content editing, research, and automation tasks." })] }))] })) }) })), _jsx("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: groupConsecutiveMessages(messages).map((group, groupIndex) => {
                             if (group.type === "user" && group.messages[0]) {
                                 // Render user message
                                 return (_jsx(UserMessage, { message: group.messages[0] }, groupIndex));
@@ -2575,13 +2389,23 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                     return null;
                                 }
                                 const convertedMessages = convertAgentMessagesToAiFormat(filteredMessages);
-                                return (_jsx(AiResponseMessage, { messages: convertedMessages, finished: !isSubmitting && !isConnecting, editOperations: [], error: error || undefined, profileSvgIcon: activeProfile?.svgIcon, onQuickAction: (action) => {
+                                return (_jsx(AiResponseMessage, { messages: convertedMessages, finished: !isSubmitting && !isConnecting, editOperations: [], error: error || undefined, profileSvgIcon: activeProfile?.svgIcon, agentId: agent?.id || agentStub.id, agentName: activeProfile?.name, onQuickAction: (action) => {
                                         const text = (action.prompt ||
                                             action.value ||
                                             action.label ||
                                             "").trim();
                                         if (!text)
                                             return;
+                                        // Check if text contains placeholders ({placeholder} or <placeholder>)
+                                        const hasPlaceholders = /\{([^}]+)\}|<([^>]+)>/.test(text);
+                                        if (hasPlaceholders) {
+                                            // Show placeholder input
+                                            setActivePlaceholderInput({
+                                                text,
+                                                behavior: action.behavior,
+                                            });
+                                            return;
+                                        }
                                         if (action.behavior === "compose") {
                                             setPrompt(text);
                                             setInputPlaceholder(action.placeholder ||
@@ -2607,154 +2431,204 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                         sendQuickMessage(text);
                                     } }, groupIndex));
                             }
-                        }) }), _jsx("div", { className: showDots ? "visible" : "invisible", children: _jsx(DancingDots, {}) }), renderCostLimitBanner(), _jsx("div", { ref: messagesEndRef })] }), renderContextInfoBar(), _jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata }), _jsxs("div", { className: "border-t border-gray-200 p-4", children: [_jsx("div", { className: "flex items-stretch gap-2", children: _jsx(Textarea, { ref: textareaRef, value: prompt, onChange: (e) => {
+                        }) }), _jsx("div", { className: showDots ? "visible" : "invisible", children: _jsx(DancingDots, {}) }), renderCostLimitBanner(), _jsx("div", { ref: messagesEndRef })] }), !hideContext && renderContextInfoBar(), !hideContext && (_jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata })), _jsxs("div", { className: "border-t border-gray-200 p-4", children: [activePlaceholderInput ? (
+                    // Placeholder Input (from quick actions)
+                    _jsx(PlaceholderInput, { text: activePlaceholderInput.text, showButtons: false, onComplete: (filledText) => {
+                            setActivePlaceholderInput(null);
+                            if (activePlaceholderInput.behavior === "compose") {
+                                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 {
+                                // Submit behavior or default
+                                if (isExecuting) {
+                                    try {
+                                        handleStop();
+                                    }
+                                    catch { }
+                                }
+                                sendQuickMessage(filledText);
+                            }
+                        }, onCancel: () => {
+                            setActivePlaceholderInput(null);
+                        } })) : prompt && /\{([^}]+)\}|<([^>]+)>/.test(prompt) ? (
+                    // Template mode: show PlaceholderInput when prompt contains placeholders
+                    _jsx(PlaceholderInput, { text: prompt, showButtons: false, onComplete: (filledText) => {
+                            setPrompt(filledText);
+                            // Auto-submit after filling placeholders
+                            if (filledText.trim()) {
+                                if (isExecuting) {
+                                    try {
+                                        handleStop();
+                                    }
+                                    catch { }
+                                }
+                                sendQuickMessage(filledText);
+                            }
+                        }, onCancel: () => {
+                            setPrompt("");
+                            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, value: prompt, onChange: (e) => {
                                 setPrompt(e.target.value);
                                 // Reset history index when user starts typing
                                 if (currentHistoryIndex !== -1) {
                                     setCurrentHistoryIndex(-1);
                                 }
-                            }, onKeyDown: handleKeyPress, placeholder: inputPlaceholder, className: "h-[80px] flex-1 resize-none overflow-y-auto text-xs", "data-testid": "agent-terminal-prompt", disabled: isSubmitting }) }), _jsxs("div", { className: "flex items-stretch justify-between gap-2", children: [_jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-start gap-2", children: [_jsxs(Tooltip, { delayDuration: 400, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("select", { className: `h-5 rounded border px-1.5 text-[10px] ${mode === "read-only"
-                                                        ? "border-green-300 bg-green-50 text-green-700"
-                                                        : mode === "supervised"
-                                                            ? "border-amber-300 bg-amber-50 text-amber-700"
-                                                            : "border-red-300 bg-red-50 text-red-700"}`, value: mode, onChange: async (e) => {
-                                                        const nextMode = e.target.value || "supervised";
-                                                        // Optimistic UI update
-                                                        setMode(nextMode);
-                                                        const current = agentMetadata || {};
-                                                        const nextMeta = {
-                                                            ...current,
-                                                            mode: nextMode,
-                                                        };
-                                                        try {
-                                                            if (!agent?.id || agent.status === "new") {
-                                                                setAgentMetadata(nextMeta);
-                                                                // Cache until first start when agent is persisted
-                                                                pendingSettingsRef.current = {
-                                                                    ...(pendingSettingsRef.current || {}),
+                            }, onKeyDown: handleKeyPress, placeholder: inputPlaceholder, className: "h-[80px] flex-1 resize-none overflow-y-auto text-xs", "data-testid": "agent-terminal-prompt", disabled: isSubmitting }) })), !hideBottomControls && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-stretch justify-between gap-2", children: [_jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-start gap-2", children: [_jsxs(Tooltip, { delayDuration: 400, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("select", { className: `h-5 rounded border px-1.5 text-[10px] ${mode === "read-only"
+                                                                ? "border-green-300 bg-green-50 text-green-700"
+                                                                : mode === "supervised"
+                                                                    ? "border-amber-300 bg-amber-50 text-amber-700"
+                                                                    : "border-red-300 bg-red-50 text-red-700"}`, value: mode, onChange: async (e) => {
+                                                                const nextMode = e.target.value || "supervised";
+                                                                // Optimistic UI update
+                                                                setMode(nextMode);
+                                                                const current = agentMetadata || {};
+                                                                const nextMeta = {
+                                                                    ...current,
                                                                     mode: nextMode,
                                                                 };
-                                                                return;
+                                                                try {
+                                                                    if (!agent?.id || agent.status === "new") {
+                                                                        setAgentMetadata(nextMeta);
+                                                                        // Cache until first start when agent is persisted
+                                                                        pendingSettingsRef.current = {
+                                                                            ...(pendingSettingsRef.current || {}),
+                                                                            mode: nextMode,
+                                                                        };
+                                                                        return;
+                                                                    }
+                                                                    await updateAgentSettings(agent.id, {
+                                                                        mode: nextMode,
+                                                                    });
+                                                                    setAgentMetadata(nextMeta);
+                                                                    setAgent((prev) => prev
+                                                                        ? { ...prev, metadata: JSON.stringify(nextMeta) }
+                                                                        : prev);
+                                                                }
+                                                                catch (e2) {
+                                                                    console.error("Failed to persist mode change", e2);
+                                                                }
+                                                            }, title: "Mode", "aria-label": "Mode", "data-testid": "agent-mode-select", children: [_jsx("option", { value: "supervised", children: "Supervised" }), _jsx("option", { value: "autonomous", children: "Autonomous" }), _jsx("option", { value: "read-only", children: "Read-Only" })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: _jsxs("div", { className: "max-w-[320px] space-y-1", children: [_jsxs("div", { children: [_jsx("span", { className: "font-semibold text-green-500", children: "Read-Only" }), ": Limited tool access as configured by the profile (Ask Mode Tools)."] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold text-amber-500", children: "Supervised" }), ": Full tool access, but writes are limited to pages/items in the current context. Creating new items or updating existing items outside the current context requires explicit approval."] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold text-red-500", children: "Autonomous" }), ": Full tool access; can write across the site/project only limited by user permissions."] })] }) })] }), profiles?.length > 0 && (_jsx("select", { className: "h-5 rounded border px-1.5 text-[10px] text-gray-500", value: activeProfile?.id || "", onChange: async (e) => {
+                                                    const nextProfile = profiles.find((x) => x.id === e.target.value);
+                                                    if (!nextProfile)
+                                                        return;
+                                                    setActiveProfile(nextProfile);
+                                                    try {
+                                                        if (agent?.id && agent.status !== "new") {
+                                                            await updateAgentSettings(agent.id, {
+                                                                profileId: nextProfile.id,
+                                                                profileName: nextProfile.name,
+                                                            });
+                                                        }
+                                                        else {
+                                                            // cache until first start
+                                                            pendingSettingsRef.current = {
+                                                                ...(pendingSettingsRef.current || {}),
+                                                                // we cache profile by updating local metadata
+                                                            };
+                                                            setAgentMetadata((current) => {
+                                                                const next = { ...(current || {}) };
+                                                                next.profile = nextProfile.name;
+                                                                next.additionalData = {
+                                                                    ...(next.additionalData || {}),
+                                                                    profileId: nextProfile.id,
+                                                                    profileName: nextProfile.name,
+                                                                };
+                                                                return next;
+                                                            });
+                                                        }
+                                                        // reflect in local agent stub so tabs and titles can use it if needed
+                                                        setAgent((prev) => prev
+                                                            ? {
+                                                                ...prev,
+                                                                metadata: JSON.stringify({
+                                                                    ...(agentMetadata || {}),
+                                                                    profile: nextProfile.name,
+                                                                    additionalData: {
+                                                                        ...(agentMetadata
+                                                                            ?.additionalData || {}),
+                                                                        profileId: nextProfile.id,
+                                                                        profileName: nextProfile.name,
+                                                                    },
+                                                                }),
                                                             }
-                                                            await updateAgentSettings(agent.id, { mode: nextMode });
-                                                            setAgentMetadata(nextMeta);
-                                                            setAgent((prev) => prev
-                                                                ? { ...prev, metadata: JSON.stringify(nextMeta) }
-                                                                : prev);
+                                                            : prev);
+                                                    }
+                                                    catch (err) {
+                                                        console.error("Failed to persist agent profile", err);
+                                                    }
+                                                }, title: "Profile", "aria-label": "Profile", "data-testid": "agent-profile-select", children: profiles.map((p) => (_jsx("option", { value: p.id, children: p.name }, p.id))) })), activeProfile?.models?.length ? (_jsx("select", { className: "h-5 rounded border px-1.5 text-[10px] text-gray-500", value: selectedModelId || "", onChange: async (e) => {
+                                                    const nextId = e.target.value;
+                                                    setSelectedModelId(nextId);
+                                                    const modelName = activeProfile?.models?.find((m) => m.id === nextId)
+                                                        ?.name || "";
+                                                    // Update local agent state immediately for UX and to reflect in streaming stub
+                                                    setAgent((prev) => prev ? { ...prev, model: modelName } : prev);
+                                                    // Persist only for existing agents; otherwise cache until first start
+                                                    try {
+                                                        if (agent?.id && agent.status !== "new") {
+                                                            await updateAgentSettings(agent.id, {
+                                                                model: modelName,
+                                                            });
                                                         }
-                                                        catch (e2) {
-                                                            console.error("Failed to persist mode change", e2);
+                                                        else {
+                                                            pendingSettingsRef.current = {
+                                                                ...(pendingSettingsRef.current || {}),
+                                                                modelName,
+                                                            };
                                                         }
-                                                    }, title: "Mode", "aria-label": "Mode", "data-testid": "agent-mode-select", children: [_jsx("option", { value: "supervised", children: "Supervised" }), _jsx("option", { value: "autonomous", children: "Autonomous" }), _jsx("option", { value: "read-only", children: "Read-Only" })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: _jsxs("div", { className: "max-w-[320px] space-y-1", children: [_jsxs("div", { children: [_jsx("span", { className: "font-semibold text-green-500", children: "Read-Only" }), ": Limited tool access as configured by the profile (Ask Mode Tools)."] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold text-amber-500", children: "Supervised" }), ": Full tool access, but writes are limited to pages/items in the current context. Creating new items or updating existing items outside the current context requires explicit approval."] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold text-red-500", children: "Autonomous" }), ": Full tool access; can write across the site/project only limited by user permissions."] })] }) })] }), profiles?.length > 0 && (_jsx("select", { className: "h-5 rounded border px-1.5 text-[10px] text-gray-500", value: activeProfile?.id || "", onChange: async (e) => {
-                                            const nextProfile = profiles.find((x) => x.id === e.target.value);
-                                            if (!nextProfile)
-                                                return;
-                                            setActiveProfile(nextProfile);
-                                            try {
-                                                if (agent?.id && agent.status !== "new") {
-                                                    await updateAgentSettings(agent.id, {
-                                                        profileId: nextProfile.id,
-                                                        profileName: nextProfile.name,
-                                                    });
-                                                }
-                                                else {
-                                                    // cache until first start
-                                                    pendingSettingsRef.current = {
-                                                        ...(pendingSettingsRef.current || {}),
-                                                        // we cache profile by updating local metadata
-                                                    };
-                                                    setAgentMetadata((current) => {
-                                                        const next = { ...(current || {}) };
-                                                        next.profile = nextProfile.name;
-                                                        next.additionalData = {
-                                                            ...(next.additionalData || {}),
-                                                            profileId: nextProfile.id,
-                                                            profileName: nextProfile.name,
-                                                        };
-                                                        return next;
-                                                    });
-                                                }
-                                                // reflect in local agent stub so tabs and titles can use it if needed
-                                                setAgent((prev) => prev
-                                                    ? {
-                                                        ...prev,
-                                                        metadata: JSON.stringify({
-                                                            ...(agentMetadata || {}),
-                                                            profile: nextProfile.name,
-                                                            additionalData: {
-                                                                ...(agentMetadata?.additionalData ||
-                                                                    {}),
-                                                                profileId: nextProfile.id,
-                                                                profileName: nextProfile.name,
-                                                            },
-                                                        }),
                                                     }
-                                                    : prev);
-                                            }
-                                            catch (err) {
-                                                console.error("Failed to persist agent profile", err);
+                                                    catch (err) {
+                                                        console.error("Failed to persist agent model", err);
+                                                    }
+                                                }, title: "Model", "aria-label": "Model", "data-testid": "agent-model-select", children: activeProfile.models.map((m) => (_jsx("option", { value: m.id, children: m.name }, m.id))) })) : null, 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", 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-xs text-gray-700 hover:bg-gray-100", onClick: () => {
+                                                                    setPrompt(p.prompt);
+                                                                    setShowPredefined(false);
+                                                                    if (textareaRef.current)
+                                                                        textareaRef.current.focus();
+                                                                }, children: p.title }, index))) }) })] })) : null] }), _jsxs("div", { className: "flex items-center gap-1 self-end", children: [isVoiceSupported ? (_jsx(Button, { onClick: toggleVoice, size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isListening ? "Stop voice input" : "Start voice input", "aria-label": isListening ? "Stop voice input" : "Start voice input", "aria-pressed": isListening, children: isListening ? (_jsx(MicOff, { className: "size-3", strokeWidth: 1 })) : (_jsx(Mic, { className: "size-3", strokeWidth: 1 })) })) : null, _jsx(Button, { onClick: isExecuting ? handleStop : handleSubmit, disabled: !isExecuting && !prompt.trim(), size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isExecuting ? "Stop" : "Send", "aria-label": isExecuting ? "Stop" : "Send", "data-testid": "agent-send-stop-button", "data-executing": isExecuting ? "true" : "false", children: isExecuting ? (_jsx(Square, { className: "size-3", strokeWidth: 1 })) : (_jsx(Send, { className: "size-3", strokeWidth: 1 })) })] })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2 text-[10px] text-gray-500", children: [_jsx(AgentCostDisplay, { totalTokens: liveTotals
+                                            ? {
+                                                input: liveTotals.input,
+                                                output: liveTotals.output,
+                                                cached: liveTotals.cached,
+                                                cacheWrite: liveTotals.cacheWrite ?? 0,
+                                                inputCost: liveTotals.inputCost,
+                                                outputCost: liveTotals.outputCost,
+                                                cachedCost: liveTotals.cachedCost,
+                                                cacheWriteCost: liveTotals.cacheWriteCost ?? 0,
+                                                totalCost: liveTotals.totalCost,
                                             }
-                                        }, title: "Profile", "aria-label": "Profile", "data-testid": "agent-profile-select", children: profiles.map((p) => (_jsx("option", { value: p.id, children: p.name }, p.id))) })), activeProfile?.models?.length ? (_jsx("select", { className: "h-5 rounded border px-1.5 text-[10px] text-gray-500", value: selectedModelId || "", onChange: async (e) => {
-                                            const nextId = e.target.value;
-                                            setSelectedModelId(nextId);
-                                            const modelName = activeProfile?.models?.find((m) => m.id === nextId)?.name ||
-                                                "";
-                                            // Update local agent state immediately for UX and to reflect in streaming stub
-                                            setAgent((prev) => prev ? { ...prev, model: modelName } : prev);
-                                            // Persist only for existing agents; otherwise cache until first start
-                                            try {
-                                                if (agent?.id && agent.status !== "new") {
-                                                    await updateAgentSettings(agent.id, { model: modelName });
-                                                }
-                                                else {
-                                                    pendingSettingsRef.current = {
-                                                        ...(pendingSettingsRef.current || {}),
-                                                        modelName,
-                                                    };
+                                            : totalTokens, costLimit: effectiveCostLimit }), (() => {
+                                        try {
+                                            const s = window.__agentContextWindowStatus;
+                                            if (!s || !s.contextWindowTokens)
+                                                return null;
+                                            const pct = typeof s.contextUsedPercent === "number"
+                                                ? `${s.contextUsedPercent.toFixed(1)}%`
+                                                : undefined;
+                                            // Helper function to format tokens as "k"
+                                            const formatTokens = (tokens) => {
+                                                if (tokens >= 1000) {
+                                                    return `${(tokens / 1000).toFixed(1)}k`;
                                                 }
-                                            }
-                                            catch (err) {
-                                                console.error("Failed to persist agent model", err);
-                                            }
-                                        }, title: "Model", "aria-label": "Model", "data-testid": "agent-model-select", children: activeProfile.models.map((m) => (_jsx("option", { value: m.id, children: m.name }, m.id))) })) : null, 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", 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-xs text-gray-700 hover:bg-gray-100", onClick: () => {
-                                                            setPrompt(p.prompt);
-                                                            setShowPredefined(false);
-                                                            if (textareaRef.current)
-                                                                textareaRef.current.focus();
-                                                        }, children: p.title }, index))) }) })] })) : null] }), _jsxs("div", { className: "flex items-center gap-1 self-end", children: [isVoiceSupported ? (_jsx(Button, { onClick: toggleVoice, size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isListening ? "Stop voice input" : "Start voice input", "aria-label": isListening ? "Stop voice input" : "Start voice input", "aria-pressed": isListening, children: isListening ? (_jsx(MicOff, { className: "size-3", strokeWidth: 1 })) : (_jsx(Mic, { className: "size-3", strokeWidth: 1 })) })) : null, _jsx(Button, { onClick: isExecuting ? handleStop : handleSubmit, disabled: !isExecuting && !prompt.trim(), size: "sm", className: "h-5.5 w-5.5 cursor-pointer rounded-full", title: isExecuting ? "Stop" : "Send", "aria-label": isExecuting ? "Stop" : "Send", "data-testid": "agent-send-stop-button", "data-executing": isExecuting ? "true" : "false", children: isExecuting ? (_jsx(Square, { className: "size-3", strokeWidth: 1 })) : (_jsx(Send, { className: "size-3", strokeWidth: 1 })) })] })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2 text-[10px] text-gray-500", children: [_jsx(AgentCostDisplay, { totalTokens: liveTotals
-                                    ? {
-                                        input: liveTotals.input,
-                                        output: liveTotals.output,
-                                        cached: liveTotals.cached,
-                                        cacheWrite: liveTotals.cacheWrite ?? 0,
-                                        inputCost: liveTotals.inputCost,
-                                        outputCost: liveTotals.outputCost,
-                                        cachedCost: liveTotals.cachedCost,
-                                        cacheWriteCost: liveTotals.cacheWriteCost ?? 0,
-                                        totalCost: liveTotals.totalCost,
-                                    }
-                                    : totalTokens, costLimit: effectiveCostLimit }), (() => {
-                                try {
-                                    const s = window.__agentContextWindowStatus;
-                                    if (!s || !s.contextWindowTokens)
-                                        return null;
-                                    const pct = typeof s.contextUsedPercent === "number"
-                                        ? `${s.contextUsedPercent.toFixed(1)}%`
-                                        : undefined;
-                                    // Helper function to format tokens as "k"
-                                    const formatTokens = (tokens) => {
-                                        if (tokens >= 1000) {
-                                            return `${(tokens / 1000).toFixed(1)}k`;
+                                                return tokens.toString();
+                                            };
+                                            if (!pct)
+                                                return null;
+                                            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "cursor-help rounded border border-gray-200 bg-gray-50 px-2 py-0.5", children: ["Context: ", pct] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: _jsxs("div", { className: "max-w-[320px] space-y-1 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Model:" }), " ", s.model, s.normalizedModel && ` (${s.normalizedModel})`] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Context window:" }), " ", formatTokens(s.estimatedInputTokens || 0), " /", " ", formatTokens(s.contextWindowTokens), " tokens"] }), typeof s.maxCompletionTokens === "number" && (_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Max completion:" }), " ", formatTokens(s.maxCompletionTokens), " tokens"] })), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Used:" }), " ", pct] })] }) })] }));
                                         }
-                                        return tokens.toString();
-                                    };
-                                    if (!pct)
-                                        return null;
-                                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "cursor-help rounded border border-gray-200 bg-gray-50 px-2 py-0.5", children: ["Context: ", pct] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: _jsxs("div", { className: "max-w-[320px] space-y-1 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Model:" }), " ", s.model, s.normalizedModel && ` (${s.normalizedModel})`] }), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Context window:" }), " ", formatTokens(s.estimatedInputTokens || 0), " /", " ", formatTokens(s.contextWindowTokens), " tokens"] }), typeof s.maxCompletionTokens === "number" && (_jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Max completion:" }), " ", formatTokens(s.maxCompletionTokens), " tokens"] })), _jsxs("div", { children: [_jsx("span", { className: "font-semibold", children: "Used:" }), " ", pct] })] }) })] }));
-                                }
-                                catch {
-                                    return null;
-                                }
-                            })()] })] })] }));
+                                        catch {
+                                            return null;
+                                        }
+                                    })()] })] }))] })] }));
 }
 //# sourceMappingURL=AgentTerminal.js.map