@alpaca-editor/core 1.0.4187 → 1.0.4190

package/src/editor/ai/AgentTerminal.tsx

@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useLayoutEffect,
   useMemo,
+  ViewTransition,
 } from "react";
 import {
   Send,
@@ -28,7 +29,6 @@ import {
   StartAgentRequest,
   Agent,
   AgentDetails,
-  updateAgentContext,
   AgentMetadata,
   updateAgentSettings,
   updateAgentCostLimit,
@@ -38,21 +38,22 @@ import {
 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 { Message } from "./types";
 import { ContextInfoBar } from "./ContextInfoBar";
 import { getComponentById } from "../componentTreeHelper";
-import { Comment } from "../../types";
+
 import { AiProfile } from "../services/aiService";
-import { ItemDescriptor } from "../pageModel";
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "../../components/ui/popover";
 import { SecretAgentIcon } from "../ui/Icons";
-import { formatTime, formatDateTime } from "../utils";
+import { formatTime } from "../utils";
 import {
   Tooltip,
   TooltipTrigger,
@@ -662,6 +663,12 @@ const convertAgentMessagesToAiFormat = (
       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,
@@ -700,11 +707,23 @@ export function AgentTerminal({
   initialMetadata,
   profiles,
   isActive = true,
+  compact = false,
+  hideContext = false,
+  hideBottomControls = false,
+  hideGreeting = false,
+  className,
+  initialPrompt,
 }: {
   agentStub: Agent;
   initialMetadata?: AgentMetadata;
   profiles: AiProfile[];
   isActive?: boolean;
+  compact?: boolean;
+  hideContext?: boolean;
+  hideBottomControls?: boolean;
+  hideGreeting?: boolean;
+  className?: string;
+  initialPrompt?: string;
 }) {
   const editContext = useEditContext();
   const fieldsContext = useFieldsEditContext();
@@ -717,6 +736,10 @@ export function AgentTerminal({
   const [isLoading, setIsLoading] = useState(false);
   const [isConnecting, setIsConnecting] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [activePlaceholderInput, setActivePlaceholderInput] = useState<{
+    text: string;
+    behavior?: "compose" | "submit";
+  } | null>(null);
   const [agentMetadata, setAgentMetadata] = useState<AgentMetadata | null>(
     null,
   );
@@ -945,6 +968,13 @@ export function AgentTerminal({
     }
   }, []);
 
+  // Auto-focus terminal input on mount
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, []);
+
   // Start voice recognition
   const startVoice = useCallback(() => {
     try {
@@ -1570,9 +1600,6 @@ export function AgentTerminal({
   const loadAgent = useCallback(async () => {
     try {
       if (agentStub.status === "new") {
-        // Set agent ID immediately for new agents
-        (window as any).currentAgentId = agentStub.id;
-        // Set currentAgentId for new agent
         // Derive initial profile from provided metadata if present
         const initialProfileIdFromMeta = (() => {
           try {
@@ -1790,9 +1817,6 @@ export function AgentTerminal({
         return merged;
       });
 
-      // Set agent ID for existing agents too
-      (window as any).currentAgentId = agentData.id;
-
       // Check if cost limit was exceeded (detect from existing messages)
       try {
         const costLimitMessage = (agentData.messages || []).find(
@@ -2390,17 +2414,20 @@ export function AgentTerminal({
 
   // 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 as any)) ??
-        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(() => {
@@ -2486,12 +2513,13 @@ export function AgentTerminal({
   }, [agent?.id]);
 
   const handleSubmit = async () => {
-    if (!prompt.trim() || isSubmitting || !editContext) return;
+    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;
 
@@ -2520,7 +2548,7 @@ export function AgentTerminal({
       // This ensures all tabs (including the sending tab) have the same messageId from the database
 
       const request: StartAgentRequest = {
-        agentId: agent.id,
+        agentId: agentId,
         message: prompt.trim(),
         sessionId: editContext.sessionId,
         profileId: activeProfile?.id || profiles[0]?.id || "",
@@ -2698,276 +2726,37 @@ export function AgentTerminal({
     }
   };
 
-  // Context info bar helpers - must be declared before any early returns to keep hooks order stable
-  const removeContextKey = useCallback(
-    async (
-      key: "items" | "componentIds" | "field" | "comment",
-      index?: number,
-    ) => {
-      if (!agent?.id) return;
-      const current = agentMetadata || {};
-      // Exclude top-level context to avoid duplicate keys when spreading
-      const currentWithoutContext = { ...current };
-      delete (currentWithoutContext as any).context;
-      const next: AgentMetadata = {
-        ...currentWithoutContext,
-        additionalData: {
-          ...(current.additionalData || {}),
-          context: {
-            ...((current.additionalData &&
-              (current.additionalData as any).context) ||
-              {}),
-          },
-        },
-      } as AgentMetadata;
-
-      if (next.additionalData && (next.additionalData as any).context) {
-        const ctx = (next.additionalData as any).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 as any)?.context?.items as Array<any>) || [];
-
-    // Check if this page is already in context
-    const existingPageIds = new Set(
-      currentPages.map((p: any) => `${p.id}-${p.language}-${p.version}`),
-    );
-
+  // Auto-send initial prompt if provided and agent has no messages yet
+  const initialPromptSentRef = useRef(false);
+  useEffect(() => {
     if (
-      existingPageIds.has(
-        `${pageToAdd.id}-${pageToAdd.language}-${pageToAdd.version}`,
-      )
+      initialPrompt !== undefined &&
+      !isLoading &&
+      !initialPromptSentRef.current &&
+      messages.length === 0 &&
+      agentStub.id &&
+      editContext &&
+      activeProfile && // MUST have activeProfile set, not just profiles.length
+      profiles.length > 0
     ) {
-      return; // Page already exists
-    }
-
-    // Exclude top-level context to avoid duplicate keys when spreading
-    const currentWithoutContext = { ...current };
-    delete (currentWithoutContext as any).context;
-    const next: AgentMetadata = {
-      ...currentWithoutContext,
-      additionalData: {
-        ...(current.additionalData || {}),
-        context: {
-          ...((current.additionalData &&
-            (current.additionalData as any).context) ||
-            {}),
-          items: [...currentPages, pageToAdd],
-        },
-      },
-    } as AgentMetadata;
-
-    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 as any)?.context?.componentIds as string[]) ||
-      [];
-
-    // 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 as any).context;
-    const next: AgentMetadata = {
-      ...currentWithoutContext,
-      additionalData: {
-        ...(current.additionalData || {}),
-        context: {
-          ...((current.additionalData &&
-            (current.additionalData as any).context) ||
-            {}),
-          componentIds: [...currentComponentIds, ...newComponentIds],
-        },
-      },
-    } as AgentMetadata;
-
-    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: string[]) => {
-    if (!agent?.id || !ids?.length) return;
-
-    const current = agentMetadata || {};
-    const currentComponentIds =
-      ((current.additionalData as any)?.context?.componentIds as string[]) ||
-      [];
-
-    // 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 as any).context;
-    const next: AgentMetadata = {
-      ...currentWithoutContext,
-      additionalData: {
-        ...(current.additionalData || {}),
-        context: {
-          ...((current.additionalData &&
-            (current.additionalData as any).context) ||
-            {}),
-          componentIds: [...currentComponentIds, ...newComponentIds],
-        },
-      },
-    } as AgentMetadata;
-
-    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);
+      initialPromptSentRef.current = true;
+      // Delay slightly to ensure all state is ready
+      setTimeout(() => {
+        setPrompt(initialPrompt);
+        // Trigger submit programmatically
+        handleSubmit();
+      }, 200);
     }
-  };
-
-  const addPagesToContextFromItems = async (items: ItemDescriptor[]) => {
-    if (!agent?.id || !items?.length) return;
-
-    const current = agentMetadata || {};
-    const currentPages =
-      ((current.additionalData as any)?.context?.items as Array<any>) || [];
-
-    const existingPageIds = new Set(
-      currentPages.map((p: any) => `${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 as any).context;
-    const next: AgentMetadata = {
-      ...currentWithoutContext,
-      additionalData: {
-        ...(current.additionalData || {}),
-        context: {
-          ...((current.additionalData &&
-            (current.additionalData as any).context) ||
-            {}),
-          items: [...currentPages, ...pagesToAdd],
-        },
-      },
-    } as AgentMetadata;
-
-    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);
-    }
-  };
+  }, [
+    initialPrompt,
+    isLoading,
+    messages.length,
+    agentStub.id,
+    editContext,
+    activeProfile,
+    profiles.length,
+    handleSubmit,
+  ]);
 
   // Resolve display names when metadata or editor state changes
   useEffect(() => {
@@ -3215,9 +3004,12 @@ export function AgentTerminal({
     );
   };
 
+  
+
   return (
-    <div className="flex h-full flex-col">
+    <div className={`flex h-full flex-col ${className || ""}`}>
       {/* Messages */}
+      
       <div
         ref={messagesContainerRef}
         className="flex-1 overflow-y-auto"
@@ -3238,42 +3030,50 @@ export function AgentTerminal({
           </div>
         )}
 
-        {messages.length === 0 && !error && (
+        {messages.length === 0 && !error && !hideGreeting && (
           <div className="flex h-full items-center justify-center p-8">
             <div className="max-w-prose text-center">
-              {activeProfile?.svgIcon ? (
-                <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,
-                  }}
-                />
-              ) : (
-                <SecretAgentIcon
-                  size={96}
-                  strokeWidth={1}
-                  className="mx-auto mb-4 text-gray-400"
-                />
-              )}
-              {activeProfile?.greetingMessage ? (
-                <div
-                  className="prose prose-sm mx-auto text-center"
-                  dangerouslySetInnerHTML={{
-                    __html: activeProfile.greetingMessage,
-                  }}
-                />
+              {!activeProfile ? (
+                <Loader2 className="h-8 w-8 animate-spin text-gray-400 mx-auto" />
               ) : (
                 <>
-                  <h3 className="mb-2 text-lg font-medium text-gray-900">
-                    Start a conversation
-                  </h3>
-                  <p className="mb-4 text-sm text-gray-500">
-                    Send a message to begin working with your AI agent.
-                  </p>
-                  <div className="text-xs text-gray-400">
-                    Your agent can help with content editing, research, and
-                    automation tasks.
-                  </div>
+                  {activeProfile.svgIcon ? (
+                    <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,
+                      }}
+                    />
+                  ) : (
+                    <SecretAgentIcon
+                      size={96}
+                      strokeWidth={1}
+                      className="mx-auto mb-4 text-gray-400"
+                    />
+                  )}
+                  {activeProfile.greetingMessage ? (
+                    <ViewTransition>
+                      <div
+                        className="prose prose-sm mx-auto text-center"
+                        dangerouslySetInnerHTML={{
+                          __html: activeProfile.greetingMessage,
+                        }}
+                      />     
+                    </ViewTransition>          
+                  ) : (
+                    <>
+                      <h3 className="mb-2 text-lg font-medium text-gray-900">
+                        Start a conversation
+                      </h3>
+                      <p className="mb-4 text-sm text-gray-500">
+                        Send a message to begin working with your AI agent.
+                      </p>
+                      <div className="text-xs text-gray-400">
+                        Your agent can help with content editing, research, and
+                        automation tasks.
+                      </div>
+                    </>
+                  )}
                 </>
               )}
             </div>
@@ -3319,6 +3119,8 @@ export function AgentTerminal({
                   editOperations={[]}
                   error={error || undefined}
                   profileSvgIcon={activeProfile?.svgIcon}
+                  agentId={agent?.id || agentStub.id}
+                  agentName={activeProfile?.name}
                   onQuickAction={(action) => {
                     const text = (
                       action.prompt ||
@@ -3327,6 +3129,19 @@ export function AgentTerminal({
                       ""
                     ).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(
@@ -3365,361 +3180,441 @@ export function AgentTerminal({
       </div>
 
       {/* Context Info Bar */}
-      {renderContextInfoBar()}
+      {!hideContext && renderContextInfoBar()}
 
       {/* Todo List Panel */}
-      <TodoListPanel messages={messages} agentMetadata={agentMetadata} />
+      {!hideContext && (
+        <TodoListPanel messages={messages} agentMetadata={agentMetadata} />
+      )}
 
       {/* Input */}
       <div className="border-t border-gray-200 p-4">
-        <div className="flex items-stretch gap-2">
-          <Textarea
-            ref={textareaRef}
-            value={prompt}
-            onChange={(e) => {
-              setPrompt(e.target.value);
-              // Reset history index when user starts typing
-              if (currentHistoryIndex !== -1) {
-                setCurrentHistoryIndex(-1);
+        {activePlaceholderInput ? (
+          // Placeholder Input (from quick actions)
+          <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);
               }
             }}
-            onKeyDown={handleKeyPress}
-            placeholder={inputPlaceholder}
-            className="h-[80px] flex-1 resize-none overflow-y-auto text-xs"
-            data-testid="agent-terminal-prompt"
-            disabled={isSubmitting}
+            onCancel={() => {
+              setActivePlaceholderInput(null);
+            }}
           />
-        </div>
-        <div className="flex items-stretch justify-between gap-2">
-          {/* Profile/Model selectors below the input */}
-          <div className="mt-2 flex flex-wrap items-center justify-start gap-2">
-            <Tooltip delayDuration={400}>
-              <TooltipTrigger asChild>
-                <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 as AgentMode) || "supervised";
-                    // Optimistic UI update
-                    setMode(nextMode);
-                    const current = agentMetadata || ({} as AgentMetadata);
-                    const nextMeta: AgentMetadata = {
-                      ...current,
-                      mode: nextMode,
-                    } as AgentMetadata;
-                    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"
-                >
-                  <option value="supervised">Supervised</option>
-                  <option value="autonomous">Autonomous</option>
-                  <option value="read-only">Read-Only</option>
-                </select>
-              </TooltipTrigger>
-              <TooltipContent side="top" sideOffset={6}>
-                <div className="max-w-[320px] space-y-1">
-                  <div>
-                    <span className="font-semibold text-green-500">
-                      Read-Only
-                    </span>
-                    : Limited tool access as configured by the profile (Ask Mode
-                    Tools).
-                  </div>
-                  <div>
-                    <span className="font-semibold text-amber-500">
-                      Supervised
-                    </span>
-                    : 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.
-                  </div>
-                  <div>
-                    <span className="font-semibold text-red-500">
-                      Autonomous
-                    </span>
-                    : Full tool access; can write across the site/project only
-                    limited by user permissions.
-                  </div>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-            {profiles?.length > 0 && (
-              <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);
+        ) : prompt && /\{([^}]+)\}|<([^>]+)>/.test(prompt) ? (
+          // Template mode: show PlaceholderInput when prompt contains placeholders
+          <PlaceholderInput
+            text={prompt}
+            showButtons={false}
+            onComplete={(filledText) => {
+              setPrompt(filledText);
+              // Auto-submit after filling placeholders
+              if (filledText.trim()) {
+                if (isExecuting) {
                   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 || {}) } as any;
-                        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 as any)?.additionalData ||
-                                  {}),
-                                profileId: nextProfile.id,
-                                profileName: nextProfile.name,
-                              },
-                            }),
-                          }
-                        : prev,
-                    );
-                  } catch (err) {
-                    console.error("Failed to persist agent profile", err);
-                  }
-                }}
-                title="Profile"
-                aria-label="Profile"
-                data-testid="agent-profile-select"
-              >
-                {profiles.map((p) => (
-                  <option key={p.id} value={p.id}>
-                    {p.name}
-                  </option>
-                ))}
-              </select>
-            )}
-            {activeProfile?.models?.length ? (
-              <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,
-                      };
-                    }
-                  } catch (err) {
-                    console.error("Failed to persist agent model", err);
-                  }
-                }}
-                title="Model"
-                aria-label="Model"
-                data-testid="agent-model-select"
-              >
-                {activeProfile.models.map((m) => (
-                  <option key={m.id} value={m.id}>
-                    {m.name}
-                  </option>
-                ))}
-              </select>
-            ) : null}
-            {activeProfile?.prompts?.length ? (
-              <Popover open={showPredefined} onOpenChange={setShowPredefined}>
-                <PopoverTrigger asChild>
-                  <button
-                    className="rounded p-1 hover:bg-gray-100"
-                    onClick={() => {}}
-                    title="Predefined prompts"
-                    aria-label="Predefined prompts"
-                  >
-                    <Wand2 className="h-3 w-3" strokeWidth={1} />
-                  </button>
-                </PopoverTrigger>
-                <PopoverContent className="w-64 p-0" align="start">
-                  <div className="max-h-56 overflow-y-auto p-2">
-                    {activeProfile.prompts.map((p, index) => (
-                      <div
-                        key={index}
-                        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();
-                        }}
-                      >
-                        {p.title}
-                      </div>
-                    ))}
-                  </div>
-                </PopoverContent>
-              </Popover>
-            ) : null}
-          </div>
-          <div className="flex items-center gap-1 self-end">
-            {isVoiceSupported ? (
-              <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"
+                    handleStop();
+                  } catch {}
                 }
-                aria-pressed={isListening}
-              >
-                {isListening ? (
-                  <MicOff className="size-3" strokeWidth={1} />
-                ) : (
-                  <Mic className="size-3" strokeWidth={1} />
-                )}
-              </Button>
-            ) : null}
-            <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"}
-            >
-              {isExecuting ? (
-                <Square className="size-3" strokeWidth={1} />
-              ) : (
-                <Send className="size-3" strokeWidth={1} />
-              )}
-            </Button>
-          </div>
-        </div>
-        <div className="mt-1 flex items-center gap-2 text-[10px] text-gray-500">
-          <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}
+                sendQuickMessage(filledText);
+              }
+            }}
+            onCancel={() => {
+              setPrompt("");
+              setInputPlaceholder(
+                "Type your message... (Enter to send, Shift+Enter or Ctrl+Enter for new line)",
+              );
+            }}
           />
-          {(() => {
-            try {
-              const s = (window as any).__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: number) => {
-                if (tokens >= 1000) {
-                  return `${(tokens / 1000).toFixed(1)}k`;
+        ) : (
+          <div className="flex items-stretch gap-2">
+            <Textarea
+              ref={textareaRef}
+              value={prompt}
+              onChange={(e) => {
+                setPrompt(e.target.value);
+                // Reset history index when user starts typing
+                if (currentHistoryIndex !== -1) {
+                  setCurrentHistoryIndex(-1);
                 }
-                return tokens.toString();
-              };
-
-              if (!pct) return null;
-
-              return (
-                <Tooltip>
+              }}
+              onKeyDown={handleKeyPress}
+              placeholder={inputPlaceholder}
+              className="h-[80px] flex-1 resize-none overflow-y-auto text-xs"
+              data-testid="agent-terminal-prompt"
+              disabled={isSubmitting}
+            />
+          </div>
+        )}
+        {!hideBottomControls && (
+          <>
+            <div className="flex items-stretch justify-between gap-2">
+              {/* Profile/Model selectors below the input */}
+              <div className="mt-2 flex flex-wrap items-center justify-start gap-2">
+                <Tooltip delayDuration={400}>
                   <TooltipTrigger asChild>
-                    <div className="cursor-help rounded border border-gray-200 bg-gray-50 px-2 py-0.5">
-                      Context: {pct}
-                    </div>
+                    <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 as AgentMode) || "supervised";
+                        // Optimistic UI update
+                        setMode(nextMode);
+                        const current = agentMetadata || ({} as AgentMetadata);
+                        const nextMeta: AgentMetadata = {
+                          ...current,
+                          mode: nextMode,
+                        } as AgentMetadata;
+                        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"
+                    >
+                      <option value="supervised">Supervised</option>
+                      <option value="autonomous">Autonomous</option>
+                      <option value="read-only">Read-Only</option>
+                    </select>
                   </TooltipTrigger>
                   <TooltipContent side="top" sideOffset={6}>
-                    <div className="max-w-[320px] space-y-1 text-xs">
+                    <div className="max-w-[320px] space-y-1">
                       <div>
-                        <span className="font-semibold">Model:</span> {s.model}
-                        {s.normalizedModel && ` (${s.normalizedModel})`}
+                        <span className="font-semibold text-green-500">
+                          Read-Only
+                        </span>
+                        : Limited tool access as configured by the profile (Ask
+                        Mode Tools).
                       </div>
                       <div>
-                        <span className="font-semibold">Context window:</span>{" "}
-                        {formatTokens(s.estimatedInputTokens || 0)} /{" "}
-                        {formatTokens(s.contextWindowTokens)} tokens
+                        <span className="font-semibold text-amber-500">
+                          Supervised
+                        </span>
+                        : 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.
                       </div>
-                      {typeof s.maxCompletionTokens === "number" && (
-                        <div>
-                          <span className="font-semibold">Max completion:</span>{" "}
-                          {formatTokens(s.maxCompletionTokens)} tokens
-                        </div>
-                      )}
                       <div>
-                        <span className="font-semibold">Used:</span> {pct}
+                        <span className="font-semibold text-red-500">
+                          Autonomous
+                        </span>
+                        : Full tool access; can write across the site/project
+                        only limited by user permissions.
                       </div>
                     </div>
                   </TooltipContent>
                 </Tooltip>
-              );
-            } catch {
-              return null;
-            }
-          })()}
-        </div>
+                {profiles?.length > 0 && (
+                  <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 || {}) } as any;
+                            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 as any)
+                                      ?.additionalData || {}),
+                                    profileId: nextProfile.id,
+                                    profileName: nextProfile.name,
+                                  },
+                                }),
+                              }
+                            : prev,
+                        );
+                      } catch (err) {
+                        console.error("Failed to persist agent profile", err);
+                      }
+                    }}
+                    title="Profile"
+                    aria-label="Profile"
+                    data-testid="agent-profile-select"
+                  >
+                    {profiles.map((p) => (
+                      <option key={p.id} value={p.id}>
+                        {p.name}
+                      </option>
+                    ))}
+                  </select>
+                )}
+                {activeProfile?.models?.length ? (
+                  <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,
+                          };
+                        }
+                      } catch (err) {
+                        console.error("Failed to persist agent model", err);
+                      }
+                    }}
+                    title="Model"
+                    aria-label="Model"
+                    data-testid="agent-model-select"
+                  >
+                    {activeProfile.models.map((m) => (
+                      <option key={m.id} value={m.id}>
+                        {m.name}
+                      </option>
+                    ))}
+                  </select>
+                ) : null}
+                {activeProfile?.prompts?.length ? (
+                  <Popover
+                    open={showPredefined}
+                    onOpenChange={setShowPredefined}
+                  >
+                    <PopoverTrigger asChild>
+                      <button
+                        className="rounded p-1 hover:bg-gray-100"
+                        onClick={() => {}}
+                        title="Predefined prompts"
+                        aria-label="Predefined prompts"
+                      >
+                        <Wand2 className="h-3 w-3" strokeWidth={1} />
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-64 p-0" align="start">
+                      <div className="max-h-56 overflow-y-auto p-2">
+                        {activeProfile.prompts.map((p, index) => (
+                          <div
+                            key={index}
+                            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();
+                            }}
+                          >
+                            {p.title}
+                          </div>
+                        ))}
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                ) : null}
+              </div>
+              <div className="flex items-center gap-1 self-end">
+                {isVoiceSupported ? (
+                  <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}
+                  >
+                    {isListening ? (
+                      <MicOff className="size-3" strokeWidth={1} />
+                    ) : (
+                      <Mic className="size-3" strokeWidth={1} />
+                    )}
+                  </Button>
+                ) : null}
+                <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"}
+                >
+                  {isExecuting ? (
+                    <Square className="size-3" strokeWidth={1} />
+                  ) : (
+                    <Send className="size-3" strokeWidth={1} />
+                  )}
+                </Button>
+              </div>
+            </div>
+            <div className="mt-1 flex items-center gap-2 text-[10px] text-gray-500">
+              <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 as any).__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: number) => {
+                    if (tokens >= 1000) {
+                      return `${(tokens / 1000).toFixed(1)}k`;
+                    }
+                    return tokens.toString();
+                  };
+
+                  if (!pct) return null;
+
+                  return (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className="cursor-help rounded border border-gray-200 bg-gray-50 px-2 py-0.5">
+                          Context: {pct}
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent side="top" sideOffset={6}>
+                        <div className="max-w-[320px] space-y-1 text-xs">
+                          <div>
+                            <span className="font-semibold">Model:</span>{" "}
+                            {s.model}
+                            {s.normalizedModel && ` (${s.normalizedModel})`}
+                          </div>
+                          <div>
+                            <span className="font-semibold">
+                              Context window:
+                            </span>{" "}
+                            {formatTokens(s.estimatedInputTokens || 0)} /{" "}
+                            {formatTokens(s.contextWindowTokens)} tokens
+                          </div>
+                          {typeof s.maxCompletionTokens === "number" && (
+                            <div>
+                              <span className="font-semibold">
+                                Max completion:
+                              </span>{" "}
+                              {formatTokens(s.maxCompletionTokens)} tokens
+                            </div>
+                          )}
+                          <div>
+                            <span className="font-semibold">Used:</span> {pct}
+                          </div>
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  );
+                } catch {
+                  return null;
+                }
+              })()}
+            </div>
+          </>
+        )}
       </div>
     </div>
   );