@alpaca-editor/core 1.0.4135 → 1.0.4140

package/src/editor/ai/AgentTerminal.tsx

@@ -29,10 +29,11 @@ import {
   StartAgentRequest,
   Agent,
   AgentDetails,
-  updateAgentMetadata,
+  updateAgentContext,
   AgentMetadata,
   updateAgentSettings,
   updateAgentCostLimit,
+  cancelAgent,
 } from "../services/agentService";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { Textarea } from "../../components/ui/textarea";
@@ -678,6 +679,14 @@ export function AgentTerminal({
     const current = messagesRef.current || [];
     return current.some((m) => !m.isCompleted && m.messageType === "streaming");
   }, []);
+  const hasPendingApprovals = useCallback(() => {
+    const current = messagesRef.current || [];
+    return current.some((m) =>
+      (m.toolCalls || []).some((tc) =>
+        (tc.functionName || "").includes("(pending approval)"),
+      ),
+    );
+  }, []);
   const resetDotsTimer = useCallback(() => {
     if (dotsTimeoutRef.current) {
       clearTimeout(dotsTimeoutRef.current);
@@ -685,18 +694,26 @@ export function AgentTerminal({
     }
     const waiting = isWaitingRef.current;
     const streaming = hasActiveStreaming();
+    const pendingApprovals = hasPendingApprovals();
+    // Don't show dots if there are pending approvals (waiting for user action)
     if (!waiting && !streaming) {
       setShowDots(false);
       return;
     }
-    setShowDots(false);
+    if (pendingApprovals) {
+      setShowDots(false);
+      return;
+    }
+    // Show dots immediately when waiting or streaming
+    setShowDots(true);
     dotsTimeoutRef.current = setTimeout(() => {
-      // Re-check conditions after 1s of inactivity
+      // Re-check conditions after a brief delay to avoid flicker
       const stillWaiting = isWaitingRef.current;
       const stillStreaming = hasActiveStreaming();
-      setShowDots(stillWaiting || stillStreaming);
-    }, 500);
-  }, [hasActiveStreaming]);
+      const stillPendingApprovals = hasPendingApprovals();
+      setShowDots((stillWaiting || stillStreaming) && !stillPendingApprovals);
+    }, 100);
+  }, [hasActiveStreaming, hasPendingApprovals]);
   const [resolvedPageName, setResolvedPageName] = useState<string | undefined>(
     undefined,
   );
@@ -724,8 +741,8 @@ export function AgentTerminal({
   const [selectedModelId, setSelectedModelId] = useState<string | undefined>(
     undefined,
   );
-  type AgentMode = "agent" | "ask" | "restricted";
-  const [mode, setMode] = useState<AgentMode>("restricted");
+  type AgentMode = "autonomous" | "read-only" | "supervised";
+  const [mode, setMode] = useState<AgentMode>("supervised");
 
   // Read deterministic flags from query string once
   const deterministicFlags = React.useMemo(() => {
@@ -807,7 +824,7 @@ export function AgentTerminal({
   // Cache mode/model changes made while the agent is still "new" (not yet persisted)
   const pendingSettingsRef = useRef<{
     modelName?: string | null;
-    mode?: "agent" | "ask";
+    mode?: "autonomous" | "read-only" | "supervised";
   } | null>(null);
 
   // Auto-scroll to bottom when new messages arrive
@@ -993,10 +1010,28 @@ export function AgentTerminal({
 
   const handleContentChunk = useCallback(
     (message: AgentStreamMessage, agentData?: AgentDetails) => {
-      const messageId = message.data?.messageId;
+      // Get messageId from data, or generate one from agent ID (for backward compatibility)
+      // If no messageId is provided, we'll use the last assistant message or create a new one
+      let messageId = message.data?.messageId;
+
+      if (!messageId && agentData?.id) {
+        // For backward compatibility: if no messageId, find or create the current streaming message
+        // This handles cases where the backend doesn't send messageId
+        const currentMessages = messagesRef.current;
+        const lastStreamingMessage = [...currentMessages]
+          .reverse()
+          .find((m) => m.role === "assistant" && !m.isCompleted);
+
+        if (lastStreamingMessage) {
+          messageId = lastStreamingMessage.id;
+        } else {
+          // Create a new message ID based on timestamp
+          messageId = crypto.randomUUID();
+        }
+      }
 
       if (!messageId) {
-        console.error("No messageId found in message data!");
+        console.error("Unable to determine messageId for content chunk!");
         return;
       }
 
@@ -1005,6 +1040,24 @@ export function AgentTerminal({
       // Any content chunk is an incremental update -> reset idle timer
       resetDotsTimer();
 
+      // Extract cost/token data from content chunk if present
+      const data = message.data as any;
+      if (
+        data &&
+        (data.totalCost !== undefined || data.totalTokens !== undefined)
+      ) {
+        setLiveTotals({
+          input: Number(data.totalInputTokens) || 0,
+          output: Number(data.totalOutputTokens) || 0,
+          cached: Number(data.totalCachedTokens) || 0,
+          inputCost: Number(data.totalInputTokenCost) || 0,
+          outputCost: Number(data.totalOutputTokenCost) || 0,
+          cachedCost: Number(data.totalCachedTokenCost) || 0,
+          totalCost: Number(data.totalCost) || 0,
+          currency: data.currency || "USD",
+        });
+      }
+
       // Always call setMessages and handle all logic in the callback with latest messages
       setMessages((prev) => {
         // Find existing message by messageId in the latest messages
@@ -1133,6 +1186,7 @@ export function AgentTerminal({
         const toolCall = {
           id: toolCallId,
           messageId: toolCallMessageId,
+          dbMessageId: message.data.messageId as string | undefined, // Database message ID for approval/rejection
           toolCallId: toolCallId,
           functionName: functionName,
           functionArguments:
@@ -1197,6 +1251,24 @@ export function AgentTerminal({
         }
       }
 
+      // Extract cost/token data from tool result if present
+      const data = message.data as any;
+      if (
+        data &&
+        (data.totalCost !== undefined || data.totalTokens !== undefined)
+      ) {
+        setLiveTotals({
+          input: Number(data.totalInputTokens) || 0,
+          output: Number(data.totalOutputTokens) || 0,
+          cached: Number(data.totalCachedTokens) || 0,
+          inputCost: Number(data.totalInputTokenCost) || 0,
+          outputCost: Number(data.totalOutputTokenCost) || 0,
+          cachedCost: Number(data.totalCachedTokenCost) || 0,
+          totalCost: Number(data.totalCost) || 0,
+          currency: data.currency || "USD",
+        });
+      }
+
       // Update tool result directly in the messages array
       if (!resultMessageId) {
         return;
@@ -1346,6 +1418,7 @@ export function AgentTerminal({
                   if (kind === "tokenUsage") {
                     const totals = (message as any)?.data?.totals;
                     if (totals) {
+                      const totalCost = Number(totals.totalCost) || 0;
                       setLiveTotals({
                         input: Number(totals.totalInputTokens) || 0,
                         output: Number(totals.totalOutputTokens) || 0,
@@ -1354,9 +1427,21 @@ export function AgentTerminal({
                         outputCost: Number(totals.totalOutputTokenCost) || 0,
                         cachedCost:
                           Number(totals.totalCachedInputTokenCost) || 0,
-                        totalCost: Number(totals.totalCost) || 0,
+                        totalCost: totalCost,
                         currency: totals.currency,
                       });
+
+                      // Check if cost limit exceeded
+                      if (agent?.costLimit && totalCost > agent.costLimit) {
+                        setCostLimitExceeded({
+                          totalCost: totalCost,
+                          costLimit: agent.costLimit,
+                          initialCostLimit: agent.costLimit,
+                        });
+                        setIsWaitingForResponse(false);
+                        shouldCreateNewMessage.current = false;
+                      }
+
                       // Force a re-render to update cost display immediately
                       setMessages((prev) => [...prev]);
                     }
@@ -1423,7 +1508,8 @@ export function AgentTerminal({
                     setAgentMetadata((prev) => {
                       const current = (prev || {}) as AgentMetadata;
                       // Exclude top-level context to avoid duplicate keys when spreading
-                      const { context: _, ...currentWithoutContext } = current;
+                      const currentWithoutContext = { ...current };
+                      delete (currentWithoutContext as any).context;
                       const next: AgentMetadata = {
                         ...currentWithoutContext,
                         additionalData: {
@@ -1439,9 +1525,9 @@ export function AgentTerminal({
                       try {
                         const currentMeta: AgentMetadata | null = (() => {
                           try {
-                            return prevAgent.metadata
+                            return prevAgent.agentContext
                               ? (JSON.parse(
-                                  prevAgent.metadata,
+                                  prevAgent.agentContext,
                                 ) as AgentMetadata)
                               : null;
                           } catch {
@@ -1450,15 +1536,11 @@ export function AgentTerminal({
                         })();
                         const nextMeta: AgentMetadata = {
                           ...(currentMeta || ({} as AgentMetadata)),
-                          additionalData: {
-                            ...(((currentMeta as any)?.additionalData as any) ||
-                              {}),
-                            context: nextContext,
-                          },
+                          ...nextContext,
                         } as AgentMetadata;
                         return {
                           ...prevAgent,
-                          metadata: JSON.stringify(nextMeta),
+                          agentContext: JSON.stringify(nextMeta),
                         };
                       } catch {
                         return prevAgent;
@@ -1639,25 +1721,37 @@ export function AgentTerminal({
                 resetDotsTimer();
                 break;
 
-              case "error":
-                // Detect cost limit exceeded
+              case "contextUpdate":
+                // Update agent context when backend sends context update
                 try {
-                  const data: any = (message as any).data;
-                  if (
-                    message.error === "COST_LIMIT_EXCEEDED" ||
-                    (data && data.kind === "costLimitExceeded")
-                  ) {
-                    setCostLimitExceeded({
-                      totalCost: Number(data?.totalCost) || 0,
-                      costLimit: Number(data?.costLimit) || 0,
-                      initialCostLimit: Number(data?.initialCostLimit) || 0,
+                  const updatedContext = message.data as AgentMetadata;
+                  if (updatedContext) {
+                    // Update local metadata state
+                    setAgentMetadata((prev) => ({
+                      ...prev,
+                      ...updatedContext,
+                    }));
+
+                    // Update agent state with new context
+                    setAgent((prevAgent) => {
+                      if (!prevAgent) return prevAgent;
+                      return {
+                        ...prevAgent,
+                        agentContext: JSON.stringify(updatedContext),
+                      };
                     });
-                    setIsWaitingForResponse(false);
-                    shouldCreateNewMessage.current = false;
-                    resetDotsTimer();
-                    break;
+
+                    console.log(
+                      "✅ Context updated from backend:",
+                      updatedContext,
+                    );
                   }
-                } catch {}
+                } catch (err) {
+                  console.error("Error handling context update:", err);
+                }
+                break;
+
+              case "error":
                 console.error("❌ Stream error:", message.error);
                 setError(message.error || "Stream error occurred");
                 setIsWaitingForResponse(false);
@@ -1813,10 +1907,6 @@ export function AgentTerminal({
           name: agentStub.name,
           model: "",
           currency: "USD",
-          itemId: "",
-          itemPath: "",
-          language: "",
-          version: 0,
           profileId: initialProfileIdFromMeta || "",
           profileName: initialProfileNameFromMeta || "",
           totalTokensUsed: 0,
@@ -1866,95 +1956,77 @@ export function AgentTerminal({
             return true;
           }
         })();
+        // Create context with top-level properties (what ContextInfoBar expects)
         const localCtx: AgentMetadata | null =
           item && shouldSeedContext
             ? {
-                additionalData: {
-                  context: {
-                    pages: [
-                      {
-                        id: item.id,
-                        language: item.language,
-                        version: item.version,
-                        name: editContext?.contentEditorItem?.name,
-                      },
-                    ],
-                    componentIds: editContext?.selection?.length
-                      ? (editContext.selection as any)
-                      : undefined,
-                    field:
-                      fieldsContext?.focusedField?.fieldId &&
-                      (fieldsContext.focusedField as any)?.item?.id
-                        ? {
-                            fieldId: fieldsContext.focusedField.fieldId,
-                            itemId: (fieldsContext.focusedField as any).item.id,
-                            name: (fieldsContext.focusedField as any).fieldName,
-                          }
-                        : undefined,
+                pages: [
+                  {
+                    id: item.id,
+                    language: item.language,
+                    version: item.version,
+                    name: editContext?.contentEditorItem?.name,
                   },
-                },
+                ],
+                componentIds: editContext?.selection?.length
+                  ? (editContext.selection as any)
+                  : undefined,
+                field:
+                  fieldsContext?.focusedField?.fieldId &&
+                  (fieldsContext.focusedField as any)?.item?.id
+                    ? {
+                        fieldId: fieldsContext.focusedField.fieldId,
+                        itemId: (fieldsContext.focusedField as any).item.id,
+                        name: (fieldsContext.focusedField as any).fieldName,
+                      }
+                    : undefined,
               }
             : null;
 
         let nextMetadata: AgentMetadata | null = null;
         if (initialMetadata) {
-          // Merge initial metadata (e.g., profile) with local context
-          const base: AgentMetadata = {
-            ...(initialMetadata as any),
-            additionalData: {
-              ...((initialMetadata as any)?.additionalData || {}),
-              context: {
-                ...(((initialMetadata as any)?.additionalData
-                  ?.context as any) || {}),
-              },
-            },
-          } as AgentMetadata;
+          // Merge initial metadata with local context (using top-level structure)
+          const base: AgentMetadata = { ...(initialMetadata as any) };
 
-          if (localCtx?.additionalData?.context) {
-            const ctx = base.additionalData!.context as any;
-            const local = localCtx.additionalData!.context as any;
+          if (localCtx) {
             // Normalize existing shape: migrate items -> pages if needed
-            if (!ctx.pages && ctx.items) {
-              ctx.pages = ctx.items;
-              delete ctx.items;
+            if (!base.pages && (base as any).items) {
+              base.pages = (base as any).items;
+              delete (base as any).items;
             }
             // Merge pages (avoid duplicates)
-            if (
-              (local.pages && local.pages.length) ||
-              (local.items && local.items.length)
-            ) {
-              const targetPages: any[] = Array.isArray(ctx.pages)
-                ? [...ctx.pages]
+            if (localCtx.pages && localCtx.pages.length) {
+              const targetPages: any[] = Array.isArray(base.pages)
+                ? [...base.pages]
                 : [];
               const existingKeys = new Set(
                 targetPages.map(
                   (p: any) => `${p.id}-${p.language || ""}-${p.version || ""}`,
                 ),
               );
-              const incoming = (local.pages || local.items) as any[];
-              const additions = incoming.filter(
+              const additions = localCtx.pages.filter(
                 (p: any) =>
                   !existingKeys.has(
                     `${p.id}-${p.language || ""}-${p.version || ""}`,
                   ),
               );
-              if (additions.length) ctx.pages = [...targetPages, ...additions];
+              if (additions.length) base.pages = [...targetPages, ...additions];
             }
             // Merge componentIds (avoid duplicates)
-            if (local.componentIds && local.componentIds.length) {
-              const currentIds: string[] = Array.isArray(ctx.componentIds)
-                ? ctx.componentIds
+            if (localCtx.componentIds && localCtx.componentIds.length) {
+              const currentIds: string[] = Array.isArray(base.componentIds)
+                ? base.componentIds
                 : [];
               const existingIds = new Set(currentIds);
-              const additions = (local.componentIds as string[]).filter(
+              const additions = (localCtx.componentIds as string[]).filter(
                 (id) => !!id && !existingIds.has(id),
               );
               if (additions.length)
-                ctx.componentIds = [...currentIds, ...additions];
+                base.componentIds = [...currentIds, ...additions];
             }
             // Set field if missing
-            if (!ctx.field && local.field) {
-              ctx.field = local.field;
+            if (!base.field && localCtx.field) {
+              base.field = localCtx.field;
             }
           }
 
@@ -1988,17 +2060,61 @@ export function AgentTerminal({
       // 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(
+          (msg: AgentChatMessage) =>
+            msg.role === "assistant" &&
+            msg.content &&
+            msg.content.startsWith("⚠️") &&
+            msg.content.includes("Cost limit"),
+        );
+        if (
+          costLimitMessage &&
+          costLimitMessage.content &&
+          agentData.costLimit
+        ) {
+          // Extract cost from the message if possible
+          const match = costLimitMessage.content.match(
+            /Current cost: \$([0-9.]+)/,
+          );
+          const totalCost =
+            match && match[1] ? parseFloat(match[1]) : agentData.totalCost || 0;
+          setCostLimitExceeded({
+            totalCost: totalCost,
+            costLimit: agentData.costLimit,
+            initialCostLimit: agentData.costLimit,
+          });
+        } else if (
+          agentData.costLimit &&
+          agentData.totalCost &&
+          agentData.totalCost > agentData.costLimit
+        ) {
+          // Fallback: check if current cost exceeds limit
+          setCostLimitExceeded({
+            totalCost: agentData.totalCost,
+            costLimit: agentData.costLimit,
+            initialCostLimit: agentData.costLimit,
+          });
+        }
+      } catch (e) {
+        console.error("Failed to check cost limit on load:", e);
+      }
+
       // Parse metadata from DB if present (do not seed for existing agents)
       const parsedMeta: AgentMetadata | null = (() => {
         try {
-          if (!agentData.metadata) return null;
-          const meta = JSON.parse(agentData.metadata) as AgentMetadata;
-          // Clean up: remove top-level context if present (should only be in additionalData)
-          if (meta && meta.context) {
-            const { context: _, ...cleanMeta } = meta;
-            return cleanMeta as AgentMetadata;
+          const contextJson = agentData.agentContext;
+          if (!contextJson) return null;
+
+          const parsedContext = JSON.parse(contextJson);
+
+          // Context is stored as flat structure with top-level properties
+          if (parsedContext && typeof parsedContext === "object") {
+            return parsedContext as AgentMetadata;
           }
-          return meta;
+
+          return null;
         } catch {
           return null;
         }
@@ -2007,37 +2123,48 @@ export function AgentTerminal({
       // For existing agents, use database metadata or none
       setAgentMetadata(parsedMeta);
 
-      // Connect to stream if agent is running (handle both string and numeric status)
+      // Connect to stream if agent is running
+      // For agents waiting for approval, DON'T auto-reconnect on load - let the user click approve first
       const isRunning =
         agentData.status === "running" || (agentData.status as any) === 1;
+      const isWaitingForApproval =
+        agentData.status === "waitingForApproval" ||
+        (agentData.status as any) === 2;
+
       if (isRunning) {
-        // Use setTimeout to ensure state updates are processed first
+        // Only auto-reconnect for running agents, not waiting for approval
         setTimeout(async () => {
-          // Check if we're already connecting to avoid duplicate connections
           if (abortControllerRef.current) {
             return;
           }
 
-          // Reset streaming state for reconnection
           shouldCreateNewMessage.current = false;
 
-          // If there are pending approvals in current messages, skip reconnect for now
           try {
-            const hasPending = (agentData.messages || []).some((m: any) =>
-              (m.toolCalls || []).some(
-                (tc: any) =>
-                  typeof tc?.functionName === "string" &&
-                  tc.functionName.includes("(pending approval)"),
-              ),
-            );
-            if (hasPending) {
-              return;
+            if (editContext?.sessionId) {
+              await startAgent({
+                agentId: agentData.id,
+                message: "",
+                sessionId: editContext.sessionId,
+                profileId: agentData.profileId || "",
+                model: agentData.model,
+              });
             }
-          } catch {}
+          } catch (startError: any) {
+            console.warn(
+              "Failed to call startAgent during reconnection:",
+              startError,
+            );
+          }
 
-          // Use the existing connectToStream function with the loaded agent data
           await connectToStream(agentData);
         }, 100);
+      } else if (isWaitingForApproval) {
+        // For agents waiting for approval, just show the UI
+        // The approval button handler will restart the agent if needed
+        console.log(
+          "Agent is waiting for approval - showing approval UI without auto-reconnect",
+        );
       }
     } catch (err: any) {
       console.error("❌ Failed to load agent:", err);
@@ -2133,14 +2260,14 @@ export function AgentTerminal({
   useEffect(() => {
     try {
       const metaMode = (agentMetadata as any)?.mode as
-        | "agent"
-        | "ask"
-        | "restricted"
+        | "autonomous"
+        | "read-only"
+        | "supervised"
         | undefined;
       if (
-        metaMode === "agent" ||
-        metaMode === "ask" ||
-        metaMode === "restricted"
+        metaMode === "autonomous" ||
+        metaMode === "read-only" ||
+        metaMode === "supervised"
       ) {
         setMode(metaMode);
         return;
@@ -2149,9 +2276,9 @@ export function AgentTerminal({
     try {
       const serverMode = (agent as any)?.mode as string | undefined;
       if (
-        serverMode === "agent" ||
-        serverMode === "ask" ||
-        serverMode === "restricted"
+        serverMode === "autonomous" ||
+        serverMode === "read-only" ||
+        serverMode === "supervised"
       ) {
         setMode(serverMode);
       }
@@ -2175,7 +2302,7 @@ export function AgentTerminal({
           setAgentMetadata(nextMeta);
           return;
         }
-        await updateAgentMetadata(agent.id, nextMeta);
+        await updateAgentContext(agent.id, nextMeta);
         setAgentMetadata(nextMeta);
         setAgent((prev) =>
           prev ? { ...prev, metadata: JSON.stringify(nextMeta) } : prev,
@@ -2282,29 +2409,14 @@ export function AgentTerminal({
         agentId: agent.id,
         message: prompt.trim(),
         sessionId: editContext.sessionId,
-        profileId: activeProfile?.id || "default",
-        profile: activeProfile?.name || "default",
+        profileId: activeProfile?.id || profiles[0]?.id || "",
+        profile: activeProfile?.name || profiles[0]?.name || "",
         model: selectedModelId,
-        itemid: editContext.currentItemDescriptor?.id || "",
-        language: editContext.currentItemDescriptor?.language || "en",
-        version: editContext.currentItemDescriptor?.version || 1,
-        selection: effectiveSelection,
-        selectedText: selectedTextFromCtx,
         mode: mode as any,
-        allowedFunctions:
-          mode === "ask"
-            ? activeProfile?.askModeTools &&
-              activeProfile.askModeTools.length > 0
-              ? activeProfile.askModeTools
-              : []
-            : undefined,
-        addSelectedComponents: !!effectiveSelection?.length,
-        addContextContent: false,
-        addAllContent: false,
-        context: (agentMetadata as any)?.additionalData?.context,
+        context: agentMetadata, // Flat structure with top-level properties
         deterministic: deterministicFlags.deterministic,
         seed: deterministicFlags.seed,
-      };
+      } as any;
 
       // Starting agent
 
@@ -2469,29 +2581,14 @@ export function AgentTerminal({
         agentId: agent.id,
         message: text.trim(),
         sessionId: editContext.sessionId,
-        profileId: activeProfile?.id || "default",
-        profile: activeProfile?.name || "default",
+        profileId: activeProfile?.id || profiles[0]?.id || "",
+        profile: activeProfile?.name || profiles[0]?.name || "",
         model: selectedModelId,
-        itemid: editContext.currentItemDescriptor?.id || "",
-        language: editContext.currentItemDescriptor?.language || "en",
-        version: editContext.currentItemDescriptor?.version || 1,
-        selection: effectiveSelection,
-        selectedText: selectedTextFromCtx,
         mode: mode as any,
-        allowedFunctions:
-          mode === "ask"
-            ? activeProfile?.askModeTools &&
-              activeProfile.askModeTools.length > 0
-              ? activeProfile.askModeTools
-              : []
-            : undefined,
-        addSelectedComponents: !!effectiveSelection?.length,
-        addContextContent: false,
-        addAllContent: false,
         context: (agentMetadata as any)?.additionalData?.context,
         deterministic: deterministicFlags.deterministic,
         seed: deterministicFlags.seed,
-      };
+      } as any;
 
       setIsWaitingForResponse(true);
       resetDotsTimer();
@@ -2522,7 +2619,8 @@ export function AgentTerminal({
       if (!agent?.id) return;
       const current = agentMetadata || {};
       // Exclude top-level context to avoid duplicate keys when spreading
-      const { context: _, ...currentWithoutContext } = current;
+      const currentWithoutContext = { ...current };
+      delete (currentWithoutContext as any).context;
       const next: AgentMetadata = {
         ...currentWithoutContext,
         additionalData: {
@@ -2562,7 +2660,7 @@ export function AgentTerminal({
         }
 
         // Persisted agents: update server and local cache
-        await updateAgentMetadata(agent.id, next);
+        await updateAgentContext(agent.id, next);
         setAgentMetadata(next);
         setAgent((prev) =>
           prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
@@ -2586,7 +2684,7 @@ export function AgentTerminal({
       language: item.language,
       version: item.version,
       name: editContext.contentEditorItem?.name,
-      path: agent?.itemPath,
+      path: undefined,
     };
 
     const current = agentMetadata || {};
@@ -2607,7 +2705,8 @@ export function AgentTerminal({
     }
 
     // Exclude top-level context to avoid duplicate keys when spreading
-    const { context: _, ...currentWithoutContext } = current;
+    const currentWithoutContext = { ...current };
+    delete (currentWithoutContext as any).context;
     const next: AgentMetadata = {
       ...currentWithoutContext,
       additionalData: {
@@ -2626,7 +2725,7 @@ export function AgentTerminal({
         setAgentMetadata(next);
         return;
       }
-      await updateAgentMetadata(agent.id, next);
+      await updateAgentContext(agent.id, next);
       setAgentMetadata(next);
       setAgent((prev) =>
         prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
@@ -2653,7 +2752,8 @@ export function AgentTerminal({
     if (newComponentIds.length === 0) return; // No new components to add
 
     // Exclude top-level context to avoid duplicate keys when spreading
-    const { context: _, ...currentWithoutContext } = current;
+    const currentWithoutContext = { ...current };
+    delete (currentWithoutContext as any).context;
     const next: AgentMetadata = {
       ...currentWithoutContext,
       additionalData: {
@@ -2672,7 +2772,7 @@ export function AgentTerminal({
         setAgentMetadata(next);
         return;
       }
-      await updateAgentMetadata(agent.id, next);
+      await updateAgentContext(agent.id, next);
       setAgentMetadata(next);
       setAgent((prev) =>
         prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
@@ -2696,7 +2796,8 @@ export function AgentTerminal({
     if (newComponentIds.length === 0) return;
 
     // Exclude top-level context to avoid duplicate keys when spreading
-    const { context: _, ...currentWithoutContext } = current;
+    const currentWithoutContext = { ...current };
+    delete (currentWithoutContext as any).context;
     const next: AgentMetadata = {
       ...currentWithoutContext,
       additionalData: {
@@ -2715,7 +2816,7 @@ export function AgentTerminal({
         setAgentMetadata(next);
         return;
       }
-      await updateAgentMetadata(agent.id, next);
+      await updateAgentContext(agent.id, next);
       setAgentMetadata(next);
       setAgent((prev) =>
         prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
@@ -2750,7 +2851,8 @@ export function AgentTerminal({
     if (pagesToAdd.length === 0) return;
 
     // Exclude top-level context to avoid duplicate keys when spreading
-    const { context: _, ...currentWithoutContext } = current;
+    const currentWithoutContext = { ...current };
+    delete (currentWithoutContext as any).context;
     const next: AgentMetadata = {
       ...currentWithoutContext,
       additionalData: {
@@ -2769,7 +2871,7 @@ export function AgentTerminal({
         setAgentMetadata(next);
         return;
       }
-      await updateAgentMetadata(agent.id, next);
+      await updateAgentContext(agent.id, next);
       setAgentMetadata(next);
       setAgent((prev) =>
         prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
@@ -2863,7 +2965,8 @@ export function AgentTerminal({
 
     const current = agentMetadata || {};
     // Exclude top-level context to avoid duplicate keys when spreading
-    const { context: _, ...currentWithoutContext } = current;
+    const currentWithoutContext = { ...current };
+    delete (currentWithoutContext as any).context;
     const next: AgentMetadata = {
       ...currentWithoutContext,
       additionalData: {
@@ -2891,7 +2994,7 @@ export function AgentTerminal({
         setAgentMetadata(next);
         return;
       }
-      await updateAgentMetadata(agent.id, next);
+      await updateAgentContext(agent.id, next);
       setAgentMetadata(next);
       setAgent((prev) =>
         prev ? { ...prev, metadata: JSON.stringify(next) } : prev,
@@ -2933,8 +3036,8 @@ export function AgentTerminal({
           editContext?.contentEditorItem?.name
         ) {
           name = editContext.contentEditorItem.name;
-        } else if (!name && agent?.itemPath) {
-          name = agent.itemPath.split("/").pop() || undefined;
+        } else if (!name) {
+          name = undefined;
         }
         setResolvedPageName(name);
       } else {
@@ -2979,15 +3082,28 @@ export function AgentTerminal({
     agentMetadata,
     editContext?.page,
     editContext?.contentEditorItem,
-    agent?.itemPath,
     editContext?.currentItemDescriptor,
     editContext?.itemsRepository,
   ]);
 
   // Stop current execution/stream safely
-  const handleStop = useCallback(() => {
+  const handleStop = useCallback(async () => {
     try {
       setIsWaitingForResponse(false);
+
+      // **CRITICAL FIX**: Actually cancel the agent execution on the backend
+      // Before we were only disconnecting from the stream, letting the agent run
+      if (agentStub?.id) {
+        try {
+          await cancelAgent(agentStub.id);
+          console.log(`Agent ${agentStub.id} cancellation requested`);
+        } catch (err) {
+          console.error("Failed to cancel agent on backend:", err);
+          // Continue with UI cleanup even if backend call fails
+        }
+      }
+
+      // Disconnect from the stream
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
         abortControllerRef.current = null;
@@ -3009,7 +3125,7 @@ export function AgentTerminal({
     } catch (e) {
       console.error("Failed to stop agent execution", e);
     }
-  }, [resetDotsTimer]);
+  }, [agentStub?.id, resetDotsTimer]);
 
   // Ensure waiting state resets when no active work remains
   useEffect(() => {
@@ -3074,29 +3190,21 @@ export function AgentTerminal({
           </span>
         </div>
         <div className="flex gap-2">
-          <button
-            className="rounded border border-amber-300 bg-white px-2 py-1 hover:bg-amber-100"
-            onClick={async () => {
-              if (!agent?.id) return;
-              try {
-                await updateAgentCostLimit(agent.id, "remove");
-                setCostLimitExceeded(null);
-                // Reconnect to stream for next actions
-                await connectToStream(agent);
-              } catch (e) {
-                console.error("Failed to remove cost limit", e);
-              }
-            }}
-          >
-            Continue and remove limit
-          </button>
           <button
             className="rounded border border-amber-300 bg-white px-2 py-1 hover:bg-amber-100"
             onClick={async () => {
               if (!agent?.id) return;
               try {
                 // Extend by initial cost limit amount
-                await updateAgentCostLimit(agent.id, "extend");
+                const result = await updateAgentCostLimit(agent.id, "extend");
+
+                // Update the agent's cost limit in local state
+                if (result.success && result.costLimit !== undefined) {
+                  setAgent((prev) =>
+                    prev ? { ...prev, costLimit: result.costLimit } : prev,
+                  );
+                }
+
                 setCostLimitExceeded(null);
                 await connectToStream(agent);
               } catch (e) {
@@ -3104,7 +3212,7 @@ export function AgentTerminal({
               }
             }}
           >
-            Continue and extend limit
+            Extend limit and continue
           </button>
         </div>
       </div>
@@ -3119,9 +3227,8 @@ export function AgentTerminal({
         className="flex-1 overflow-y-auto"
         onScroll={handleScroll}
       >
-        {renderCostLimitBanner()}
         {error && (
-          <div className="m-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-3">
+          <div className="m-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-3 select-text">
             <div className="flex items-start">
               <AlertCircle
                 className="mt-0.5 h-5 w-5 text-red-400"
@@ -3171,9 +3278,22 @@ export function AgentTerminal({
                 (msg) => !msg.isCompleted && msg.messageType === "streaming",
               );
 
-              const convertedMessages = convertAgentMessagesToAiFormat(
-                group.messages,
-              );
+              // Filter out cost limit error messages (they're shown in the banner instead)
+              const filteredMessages = group.messages.filter((msg) => {
+                const content = msg.content || "";
+                // Skip messages that are cost limit errors (shown in banner instead)
+                return (
+                  !content.startsWith("⚠️") || !content.includes("Cost limit")
+                );
+              });
+
+              // If all messages were filtered out, don't render this group
+              if (filteredMessages.length === 0) {
+                return null;
+              }
+
+              const convertedMessages =
+                convertAgentMessagesToAiFormat(filteredMessages);
 
               return (
                 <AiResponseMessage
@@ -3223,6 +3343,7 @@ export function AgentTerminal({
         <div className={showDots ? "visible" : "invisible"}>
           <DancingDots />
         </div>
+        {renderCostLimitBanner()}
         <div ref={messagesEndRef} />
       </div>
 
@@ -3259,16 +3380,16 @@ export function AgentTerminal({
               <TooltipTrigger asChild>
                 <select
                   className={`h-5 rounded border px-1.5 text-[10px] ${
-                    mode === "ask"
+                    mode === "read-only"
                       ? "border-green-300 bg-green-50 text-green-700"
-                      : mode === "restricted"
+                      : 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 "agent" | "ask") || "agent";
+                      (e.target.value as AgentMode) || "supervised";
                     // Optimistic UI update
                     setMode(nextMode);
                     const current = agentMetadata || ({} as AgentMetadata);
@@ -3301,21 +3422,23 @@ export function AgentTerminal({
                   aria-label="Mode"
                   data-testid="agent-mode-select"
                 >
-                  <option value="restricted">Restricted</option>
-                  <option value="agent">Agent</option>
-                  <option value="ask">Ask</option>
+                  <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">Ask</span>:
-                    Limited tool access as configured by the profile (Ask Mode
+                    <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">
-                      Restricted
+                      Supervised
                     </span>
                     : Full tool access, but writes are limited to pages/items in
                     the current context. Creating new items or updating existing
@@ -3323,8 +3446,10 @@ export function AgentTerminal({
                     approval.
                   </div>
                   <div>
-                    <span className="font-semibold text-red-500">Agent</span>:
-                    Full tool access; can write across the site/project only
+                    <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>
@@ -3472,6 +3597,7 @@ export function AgentTerminal({
                   }
                 : totalTokens
             }
+            costLimit={agent?.costLimit}
           />
           {(() => {
             try {