@alpaca-editor/core 1.0.4169 → 1.0.4172

package/dist/editor/ai/AgentTerminal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo, } from "react";
 import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, } from "lucide-react";
 import { DancingDots } from "./DancingDots";
-import { getAgent, startAgent, connectToAgentStream, updateAgentContext, updateAgentSettings, updateAgentCostLimit, cancelAgent, } from "../services/agentService";
+import { getAgent, startAgent, updateAgentContext, updateAgentSettings, updateAgentCostLimit, cancelAgent, } from "../services/agentService";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { Textarea } from "../../components/ui/textarea";
 import { Button } from "../../components/ui/button";
@@ -265,9 +265,6 @@ const TodoListPanel = ({ messages, agentMetadata, }) => {
                     }))
                         .filter((item) => item.text);
                 }
-                else {
-                    console.log("📋 No todo list found in metadata. AgentMetadata:", agentMetadata);
-                }
             }
             catch (e) {
                 console.error("📋 Error extracting todos from metadata:", e);
@@ -368,6 +365,43 @@ const groupConsecutiveMessages = (agentMessages) => {
     }
     return groups;
 };
+// Merge messages from DB and local state with ID-based deduplication
+const mergeMessagesById = (dbMessages, localMessages) => {
+    const messageMap = new Map();
+    // Normalize ID key (lowercase) to avoid duplicates caused by casing differences
+    const keyOf = (id) => (id ? id.toLowerCase() : "");
+    // First, add all DB messages (source of truth for completed messages)
+    dbMessages.forEach((msg) => {
+        if (msg.id)
+            messageMap.set(keyOf(msg.id), msg);
+    });
+    // Then merge local messages (preserve streaming state, prefer longer content)
+    localMessages.forEach((localMsg) => {
+        if (!localMsg.id)
+            return;
+        const key = keyOf(localMsg.id);
+        const existingMsg = messageMap.get(key);
+        if (!existingMsg) {
+            // New message only in local state (e.g., streaming)
+            messageMap.set(key, localMsg);
+        }
+        else if (!localMsg.isCompleted && localMsg.messageType === "streaming") {
+            // Keep streaming version if more recent/longer
+            if (localMsg.content.length > existingMsg.content.length) {
+                messageMap.set(key, localMsg);
+            }
+        }
+        // Otherwise, keep the DB version (completed messages from DB are authoritative)
+    });
+    // Sort by messageIndex or createdDate to maintain order
+    return Array.from(messageMap.values()).sort((a, b) => {
+        if (a.messageIndex !== b.messageIndex) {
+            return a.messageIndex - b.messageIndex;
+        }
+        return (new Date(a.createdDate || 0).getTime() -
+            new Date(b.createdDate || 0).getTime());
+    });
+};
 // Calculate total token usage and cost data from agent messages
 const calculateTotalTokens = (messages) => {
     const totals = messages.reduce((acc, message) => {
@@ -431,7 +465,7 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
 // interface AgentTerminalProps {
 //   agentStub: Agent;
 // }
-export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
+export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive = true, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
     const [agent, setAgent] = useState(undefined);
@@ -442,6 +476,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
     const [isConnecting, setIsConnecting] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [agentMetadata, setAgentMetadata] = useState(null);
+    // Generate a stable clientSessionId per component instance for stream deduplication
+    const clientSessionIdRef = useRef(null);
+    if (!clientSessionIdRef.current) {
+        clientSessionIdRef.current = crypto.randomUUID();
+    }
     // Voice input state
     const [isVoiceSupported, setIsVoiceSupported] = useState(false);
     const [isListening, setIsListening] = useState(false);
@@ -558,6 +597,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
     const textareaRef = useRef(null);
     const messagesContainerRef = useRef(null);
     const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+    // WebSocket subscription state for agent streaming
+    const seenMessageIdsRef = useRef(new Set());
+    const lastSeqRef = useRef(0);
+    const subscribedAgentIdRef = useRef(null);
     // Cache mode/model changes made while the agent is still "new" (not yet persisted)
     const pendingSettingsRef = useRef(null);
     // Auto-scroll to bottom when new messages arrive
@@ -765,13 +808,14 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
         }
         // Clear waiting state when first content chunk arrives
         setIsWaitingForResponse(false);
+        isWaitingRef.current = false;
         // Any content chunk is an incremental update -> reset idle timer
         resetDotsTimer();
         // Extract cost/token data from content chunk if present
         const data = message.data;
         if (data &&
             (data.totalCost !== undefined || data.totalTokens !== undefined)) {
-            setLiveTotals({
+            const nextTotals = {
                 input: Number(data.totalInputTokens) || 0,
                 output: Number(data.totalOutputTokens) || 0,
                 cached: Number(data.totalCachedTokens) || 0,
@@ -782,7 +826,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                 cacheWriteCost: Number(data.totalCacheWriteTokenCost) || 0,
                 totalCost: Number(data.totalCost) || 0,
                 currency: data.currency || "USD",
-            });
+            };
+            const anyNonZero = (nextTotals.totalCost || 0) > 0 ||
+                (nextTotals.input || 0) > 0 ||
+                (nextTotals.output || 0) > 0 ||
+                (nextTotals.cached || 0) > 0 ||
+                (nextTotals.cacheWrite || 0) > 0;
+            if (anyNonZero) {
+                setLiveTotals(nextTotals);
+            }
         }
         // Always call setMessages and handle all logic in the callback with latest messages
         setMessages((prev) => {
@@ -929,7 +981,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
         const data = message.data;
         if (data &&
             (data.totalCost !== undefined || data.totalTokens !== undefined)) {
-            setLiveTotals({
+            const nextTotals = {
                 input: Number(data.totalInputTokens) || 0,
                 output: Number(data.totalOutputTokens) || 0,
                 cached: Number(data.totalCachedTokens) || 0,
@@ -940,7 +992,15 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                 cacheWriteCost: Number(data.totalCacheWriteTokenCost) || 0,
                 totalCost: Number(data.totalCost) || 0,
                 currency: data.currency || "USD",
-            });
+            };
+            const anyNonZero = (nextTotals.totalCost || 0) > 0 ||
+                (nextTotals.input || 0) > 0 ||
+                (nextTotals.output || 0) > 0 ||
+                (nextTotals.cached || 0) > 0 ||
+                (nextTotals.cacheWrite || 0) > 0;
+            if (anyNonZero) {
+                setLiveTotals(nextTotals);
+            }
         }
         // Update tool result directly in the messages array
         if (!resultMessageId) {
@@ -1013,436 +1073,492 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
         // Tool result activity; reset idle timer
         resetDotsTimer();
     }, [resetDotsTimer]);
-    // Connect to agent stream for real-time updates
-    const connectToStream = useCallback(async (agentData) => {
+    // DEPRECATED: SSE-based streaming has been replaced by WebSocket
+    // All streaming functionality is now handled by handleAgentWebSocketMessage
+    // This function is kept commented for reference but is no longer used
+    /*
+    const connectToStream = useCallback(
+      async (agentData?: AgentDetails) => {
         const currentAgent = agentData || agent;
-        if (!currentAgent)
-            return;
+        if (!currentAgent) return;
+  
         // Cancel any existing connection
         if (abortControllerRef.current) {
-            abortControllerRef.current.abort();
+          abortControllerRef.current.abort();
         }
+  
         const abortController = new AbortController();
         abortControllerRef.current = abortController;
+  
         try {
-            setIsConnecting(true);
-            // Reduced: minimal logging
-            // Expose agent id globally for approval actions
-            window.currentAgentId = currentAgent.id;
-            // Expose id for approval actions
-            // Connecting to agent stream
-            await connectToAgentStream(currentAgent.id, (message) => {
-                switch (message.type) {
-                    case "contentChunk":
-                        handleContentChunk(message, currentAgent);
-                        break;
-                    case "toolCall":
-                        handleToolCall(message, currentAgent);
-                        break;
-                    case "toolResult":
-                        handleToolResult(message, currentAgent);
-                        break;
-                    case "statusUpdate":
+          setIsConnecting(true);
+  
+          // Reduced: minimal logging
+  
+          // Expose agent id globally for approval actions
+          (window as any).currentAgentId = currentAgent.id;
+          // Expose id for approval actions
+  
+          // Connecting to agent stream
+          await connectToAgentStream_DEPRECATED(
+            currentAgent.id,
+            (message: AgentStreamMessage) => {
+              switch (message.type) {
+                case "contentChunk":
+                  handleContentChunk(message, currentAgent);
+                  break;
+  
+                case "toolCall":
+                  handleToolCall(message, currentAgent);
+                  break;
+  
+                case "toolResult":
+                  handleToolResult(message, currentAgent);
+                  break;
+  
+                case "statusUpdate":
+                  try {
+                    // Check both 'kind' and 'state' for backward compatibility
+                    const kind =
+                      (message as any)?.data?.kind ||
+                      (message as any)?.data?.state;
+                    if (kind === "streamOpen") {
+                      setIsConnecting(false);
+                      // Don't clear waiting state here - let it be cleared when first content arrives
+                      break;
+                    }
+                    // Live token usage totals update from backend
+                    if (kind === "tokenUsage") {
+                      const totals = (message as any)?.data?.totals;
+                      if (totals) {
+                        const totalCost = Number(totals.totalCost) || 0;
+                        const nextTotals = {
+                          input: Number(totals.totalInputTokens) || 0,
+                          output: Number(totals.totalOutputTokens) || 0,
+                          cached: Number(totals.totalCachedInputTokens) || 0,
+                          cacheWrite: Number(totals.totalCacheWriteTokens) || 0,
+                          inputCost: Number(totals.totalInputTokenCost) || 0,
+                          outputCost: Number(totals.totalOutputTokenCost) || 0,
+                          cachedCost:
+                            Number(totals.totalCachedInputTokenCost) || 0,
+                          cacheWriteCost:
+                            Number(totals.totalCacheWriteTokenCost) || 0,
+                          totalCost: totalCost,
+                          currency: totals.currency,
+                        };
+                        const anyNonZero =
+                          (nextTotals.totalCost || 0) > 0 ||
+                          (nextTotals.input || 0) > 0 ||
+                          (nextTotals.output || 0) > 0 ||
+                          (nextTotals.cached || 0) > 0 ||
+                          (nextTotals.cacheWrite || 0) > 0;
+                        if (anyNonZero) {
+                          setLiveTotals(nextTotals);
+                        }
+  
+                        // 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]);
+                      }
+                      break;
+                    }
+                    if (kind === "toolApprovalsRequired") {
+                      const data = (message as any).data || {};
+                      const msgId: string | undefined = data.messageId;
+                      const ids: string[] = data.toolCallIds || [];
+                      // Pause stream until approval
+  
+                      // Annotate tool calls with a temporary pending marker so UI can reflect paused state on reload
+                      if (msgId && Array.isArray(ids) && ids.length > 0) {
+                        setMessages((prev) => {
+                          const updated = prev.map((m) => {
+                            if (m.id !== msgId) return m;
+                            const existingToolCalls = m.toolCalls || [];
+                            const updatedToolCalls = existingToolCalls.map(
+                              (tc) => {
+                                if (!ids.includes(tc.toolCallId)) return tc;
+                                const fn = tc.functionName || "";
+                                return {
+                                  ...tc,
+                                  functionName: fn.includes("(pending approval)")
+                                    ? fn
+                                    : fn + " (pending approval)",
+                                };
+                              },
+                            );
+                            return { ...m, toolCalls: updatedToolCalls };
+                          });
+                          messagesRef.current = updated;
+                          return updated;
+                        });
+                      }
+  
+                      // Keep the stream open; just clear waiting flags so UI reflects pause state
+                      try {
+                        setIsConnecting(false);
+                        setIsWaitingForResponse(false);
+                      } catch {}
+                      break;
+                    }
+                    if (kind === "contextWindow") {
+                      const data = (message as any).data || {};
+                      // Store last context window status in a ref so we can render it below
+                      (window as any).__agentContextWindowStatus = {
+                        model: data.model,
+                        normalizedModel: data.normalizedModel,
+                        contextWindowTokens: data.contextWindowTokens,
+                        maxCompletionTokens: data.maxCompletionTokens,
+                        estimatedInputTokens: data.estimatedInputTokens,
+                        messageCount: data.messageCount,
+                        contextUsedPercent: data.contextUsedPercent,
+                      };
+                      // Force a re-render by toggling state (cheap no-op)
+                      setMessages((prev) => [...prev]);
+                    } else if (kind === "contextChanged") {
+                      const data = (message as any).data || {};
+                      const nextContext = data.context || {};
+                      // Merge incoming context into local metadata
+                      setAgentMetadata((prev) => {
+                        const current = (prev || {}) as 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: nextContext,
+                          },
+                        } as AgentMetadata;
+                        return next;
+                      });
+                      // Also reflect in agent metadata string for consistency
+                      setAgent((prevAgent) => {
+                        if (!prevAgent) return prevAgent;
                         try {
-                            // Check both 'kind' and 'state' for backward compatibility
-                            const kind = message?.data?.kind ||
-                                message?.data?.state;
-                            if (kind === "streamOpen") {
-                                setIsConnecting(false);
-                                // Don't clear waiting state here - let it be cleared when first content arrives
-                                break;
-                            }
-                            // Live token usage totals update from backend
-                            if (kind === "tokenUsage") {
-                                const totals = message?.data?.totals;
-                                if (totals) {
-                                    const totalCost = Number(totals.totalCost) || 0;
-                                    setLiveTotals({
-                                        input: Number(totals.totalInputTokens) || 0,
-                                        output: Number(totals.totalOutputTokens) || 0,
-                                        cached: Number(totals.totalCachedInputTokens) || 0,
-                                        cacheWrite: Number(totals.totalCacheWriteTokens) || 0,
-                                        inputCost: Number(totals.totalInputTokenCost) || 0,
-                                        outputCost: Number(totals.totalOutputTokenCost) || 0,
-                                        cachedCost: Number(totals.totalCachedInputTokenCost) || 0,
-                                        cacheWriteCost: Number(totals.totalCacheWriteTokenCost) || 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]);
-                                }
-                                break;
-                            }
-                            if (kind === "toolApprovalsRequired") {
-                                const data = message.data || {};
-                                const msgId = data.messageId;
-                                const ids = data.toolCallIds || [];
-                                // Pause stream until approval
-                                // Annotate tool calls with a temporary pending marker so UI can reflect paused state on reload
-                                if (msgId && Array.isArray(ids) && ids.length > 0) {
-                                    setMessages((prev) => {
-                                        const updated = prev.map((m) => {
-                                            if (m.id !== msgId)
-                                                return m;
-                                            const existingToolCalls = m.toolCalls || [];
-                                            const updatedToolCalls = existingToolCalls.map((tc) => {
-                                                if (!ids.includes(tc.toolCallId))
-                                                    return tc;
-                                                const fn = tc.functionName || "";
-                                                return {
-                                                    ...tc,
-                                                    functionName: fn.includes("(pending approval)")
-                                                        ? fn
-                                                        : fn + " (pending approval)",
-                                                };
-                                            });
-                                            return { ...m, toolCalls: updatedToolCalls };
-                                        });
-                                        messagesRef.current = updated;
-                                        return updated;
-                                    });
-                                }
-                                // Keep the stream open; just clear waiting flags so UI reflects pause state
-                                try {
-                                    setIsConnecting(false);
-                                    setIsWaitingForResponse(false);
-                                }
-                                catch { }
-                                break;
+                          const currentMeta: AgentMetadata | null = (() => {
+                            try {
+                              return prevAgent.agentContext
+                                ? (JSON.parse(
+                                    prevAgent.agentContext,
+                                  ) as AgentMetadata)
+                                : null;
+                            } catch {
+                              return null;
                             }
-                            if (kind === "contextWindow") {
-                                const data = message.data || {};
-                                // Store last context window status in a ref so we can render it below
-                                window.__agentContextWindowStatus = {
-                                    model: data.model,
-                                    normalizedModel: data.normalizedModel,
-                                    contextWindowTokens: data.contextWindowTokens,
-                                    maxCompletionTokens: data.maxCompletionTokens,
-                                    estimatedInputTokens: data.estimatedInputTokens,
-                                    messageCount: data.messageCount,
-                                    contextUsedPercent: data.contextUsedPercent,
+                          })();
+                          const nextMeta: AgentMetadata = {
+                            ...(currentMeta || ({} as AgentMetadata)),
+                            ...nextContext,
+                          } as AgentMetadata;
+                          return {
+                            ...prevAgent,
+                            agentContext: JSON.stringify(nextMeta),
+                          };
+                        } catch {
+                          return prevAgent;
+                        }
+                      });
+                    } else if (kind === "cost_limit_reached") {
+                      // Cost limit has been reached - show banner and stop waiting
+                      // NOTE: Stream stays connected so user can extend limit and continue immediately
+                      console.log(
+                        "[AgentTerminal] Cost limit reached notification received",
+                        message,
+                      );
+                      const data = (message as any).data || {};
+                      const totalCost = Number(data.totalCost) || 0;
+                      // Use costLimit from the notification data, or fall back to agent.costLimit
+                      const costLimit =
+                        Number(data.costLimit) || agent?.costLimit || 0;
+  
+                      console.log(
+                        "[AgentTerminal] Setting cost limit exceeded state:",
+                        {
+                          totalCost,
+                          costLimit,
+                          agentCostLimit: agent?.costLimit,
+                          dataCostLimit: data.costLimit,
+                          dataValues: data,
+                        },
+                      );
+  
+                      // Set the state with values from the notification
+                      setCostLimitExceeded({
+                        totalCost: totalCost,
+                        costLimit: costLimit,
+                        initialCostLimit: costLimit,
+                      });
+  
+                      // Clear waiting states but keep stream connected
+                      setIsWaitingForResponse(false);
+                      setIsConnecting(false);
+                      shouldCreateNewMessage.current = false;
+                      break;
+                    } else if (
+                      kind === "toolApprovalGranted" ||
+                      kind === "toolApprovalRejected"
+                    ) {
+                      const data = (message as any).data || {};
+                      const toolCallId: string | undefined = data.toolCallId;
+                      const msgId: string | undefined = data.messageId;
+                      // Processing tool approval
+                      if (toolCallId && msgId) {
+                        setMessages((prev) => {
+                          const updated = prev.map((m) => {
+                            if (m.id !== msgId) return m;
+                            const existingToolCalls = m.toolCalls || [];
+                            const updatedToolCalls = existingToolCalls.map(
+                              (tc) => {
+                                if (tc.toolCallId !== toolCallId) return tc;
+                                const suffix =
+                                  kind === "toolApprovalGranted"
+                                    ? " (approved)"
+                                    : " (rejected)";
+                                // Remove "(pending approval)" suffix before adding new suffix
+                                const baseFunctionName = (tc.functionName || "")
+                                  .replace(" (pending approval)", "")
+                                  .trim();
+                                const newFunctionName = baseFunctionName + suffix;
+                                // Update function name with approval suffix
+                                return {
+                                  ...tc,
+                                  functionName: newFunctionName,
                                 };
-                                // Force a re-render by toggling state (cheap no-op)
-                                setMessages((prev) => [...prev]);
+                              },
+                            );
+                            return { ...m, toolCalls: updatedToolCalls };
+                          });
+                          messagesRef.current = updated;
+                          return updated;
+                        });
+                      }
+                      break;
+                    }
+                  } catch {}
+                  break;
+  
+                case "completed":
+                  const completedMessageId = message.data?.messageId;
+  
+                  // If the completed event carries full messages, merge them into state
+                  try {
+                    const completionMessages = (message as any)?.data
+                      ?.messages as any[] | undefined;
+                    if (
+                      completionMessages &&
+                      Array.isArray(completionMessages) &&
+                      completionMessages.length > 0
+                    ) {
+                      setMessages((prev) => {
+                        // Mark all completion messages as completed
+                        const dbMessages = completionMessages.map((msg) => ({
+                          ...msg,
+                          isCompleted: true,
+                          messageType: "completed" as const,
+                        })) as AgentChatMessage[];
+  
+                        // Use ID-based merge to prevent duplicates
+                        const merged = mergeMessagesById(dbMessages, prev);
+                        messagesRef.current = merged;
+                        return merged;
+                      });
+                    }
+                  } catch (e) {
+                    console.warn("⚠️ Failed to merge completion messages:", e);
+                  }
+  
+                  // Mark the specific message as completed by messageId
+                  if (completedMessageId) {
+                    setMessages((prev) => {
+                      const updated = prev.map((msg) => {
+                        if (msg.id === completedMessageId) {
+                          const updatedMessage = {
+                            ...msg,
+                            isCompleted: true,
+                            messageType: "completed" as const,
+                          };
+  
+                          // Update token usage data if provided in the completed event
+                          if (message.data) {
+                            const data = message.data;
+                            if (data.numInputTokens !== undefined) {
+                              updatedMessage.inputTokens = data.numInputTokens;
                             }
-                            else if (kind === "contextChanged") {
-                                const data = message.data || {};
-                                const nextContext = data.context || {};
-                                // Merge incoming context into local metadata
-                                setAgentMetadata((prev) => {
-                                    const current = (prev || {});
-                                    // Exclude top-level context to avoid duplicate keys when spreading
-                                    const currentWithoutContext = { ...current };
-                                    delete currentWithoutContext.context;
-                                    const next = {
-                                        ...currentWithoutContext,
-                                        additionalData: {
-                                            ...(current.additionalData || {}),
-                                            context: nextContext,
-                                        },
-                                    };
-                                    return next;
-                                });
-                                // Also reflect in agent metadata string for consistency
-                                setAgent((prevAgent) => {
-                                    if (!prevAgent)
-                                        return prevAgent;
-                                    try {
-                                        const currentMeta = (() => {
-                                            try {
-                                                return prevAgent.agentContext
-                                                    ? JSON.parse(prevAgent.agentContext)
-                                                    : null;
-                                            }
-                                            catch {
-                                                return null;
-                                            }
-                                        })();
-                                        const nextMeta = {
-                                            ...(currentMeta || {}),
-                                            ...nextContext,
-                                        };
-                                        return {
-                                            ...prevAgent,
-                                            agentContext: JSON.stringify(nextMeta),
-                                        };
-                                    }
-                                    catch {
-                                        return prevAgent;
-                                    }
-                                });
+                            if (data.numOutputTokens !== undefined) {
+                              updatedMessage.outputTokens = data.numOutputTokens;
                             }
-                            else if (kind === "cost_limit_reached") {
-                                // Cost limit has been reached - show banner and stop waiting
-                                // NOTE: Stream stays connected so user can extend limit and continue immediately
-                                console.log("[AgentTerminal] Cost limit reached notification received", message);
-                                const data = message.data || {};
-                                const totalCost = Number(data.totalCost) || 0;
-                                // Use costLimit from the notification data, or fall back to agent.costLimit
-                                const costLimit = Number(data.costLimit) || agent?.costLimit || 0;
-                                console.log("[AgentTerminal] Setting cost limit exceeded state:", {
-                                    totalCost,
-                                    costLimit,
-                                    agentCostLimit: agent?.costLimit,
-                                    dataCostLimit: data.costLimit,
-                                    dataValues: data,
-                                });
-                                // Set the state with values from the notification
-                                setCostLimitExceeded({
-                                    totalCost: totalCost,
-                                    costLimit: costLimit,
-                                    initialCostLimit: costLimit,
-                                });
-                                // Clear waiting states but keep stream connected
-                                setIsWaitingForResponse(false);
-                                setIsConnecting(false);
-                                shouldCreateNewMessage.current = false;
-                                break;
+                            if (data.numCachedTokens !== undefined) {
+                              updatedMessage.cachedInputTokens =
+                                data.numCachedTokens;
                             }
-                            else if (kind === "toolApprovalGranted" ||
-                                kind === "toolApprovalRejected") {
-                                const data = message.data || {};
-                                const toolCallId = data.toolCallId;
-                                const msgId = data.messageId;
-                                // Processing tool approval
-                                if (toolCallId && msgId) {
-                                    setMessages((prev) => {
-                                        const updated = prev.map((m) => {
-                                            if (m.id !== msgId)
-                                                return m;
-                                            const existingToolCalls = m.toolCalls || [];
-                                            const updatedToolCalls = existingToolCalls.map((tc) => {
-                                                if (tc.toolCallId !== toolCallId)
-                                                    return tc;
-                                                const suffix = kind === "toolApprovalGranted"
-                                                    ? " (approved)"
-                                                    : " (rejected)";
-                                                // Remove "(pending approval)" suffix before adding new suffix
-                                                const baseFunctionName = (tc.functionName || "")
-                                                    .replace(" (pending approval)", "")
-                                                    .trim();
-                                                const newFunctionName = baseFunctionName + suffix;
-                                                // Update function name with approval suffix
-                                                return {
-                                                    ...tc,
-                                                    functionName: newFunctionName,
-                                                };
-                                            });
-                                            return { ...m, toolCalls: updatedToolCalls };
-                                        });
-                                        messagesRef.current = updated;
-                                        return updated;
-                                    });
-                                }
-                                break;
+                            // Update total tokens used
+                            updatedMessage.tokensUsed =
+                              (updatedMessage.inputTokens || 0) +
+                              (updatedMessage.outputTokens || 0);
+  
+                            // Update cost data if provided in the completed event
+                            if (data.inputTokenCost !== undefined) {
+                              updatedMessage.inputTokenCost = data.inputTokenCost;
                             }
-                        }
-                        catch { }
-                        break;
-                    case "completed":
-                        const completedMessageId = message.data?.messageId;
-                        // If the completed event carries full messages, merge them into state
-                        try {
-                            const completionMessages = message?.data
-                                ?.messages;
-                            if (completionMessages &&
-                                Array.isArray(completionMessages) &&
-                                completionMessages.length > 0) {
-                                setMessages((prev) => {
-                                    const existingById = new Map();
-                                    prev.forEach((m, idx) => existingById.set(m.id, idx));
-                                    const merged = [...prev];
-                                    for (const incoming of completionMessages) {
-                                        const incomingId = incoming?.id;
-                                        if (!incomingId)
-                                            continue;
-                                        const idx = existingById.get(incomingId);
-                                        const finalized = {
-                                            ...incoming,
-                                            isCompleted: true,
-                                            messageType: "completed",
-                                        };
-                                        if (typeof idx === "number") {
-                                            merged[idx] = finalized;
-                                        }
-                                        else {
-                                            merged.push(finalized);
-                                        }
-                                    }
-                                    messagesRef.current = merged;
-                                    return merged;
-                                });
+                            if (data.outputTokenCost !== undefined) {
+                              updatedMessage.outputTokenCost =
+                                data.outputTokenCost;
                             }
-                        }
-                        catch (e) {
-                            console.warn("⚠️ Failed to merge completion messages:", e);
-                        }
-                        // Mark the specific message as completed by messageId
-                        if (completedMessageId) {
-                            setMessages((prev) => {
-                                const updated = prev.map((msg) => {
-                                    if (msg.id === completedMessageId) {
-                                        const updatedMessage = {
-                                            ...msg,
-                                            isCompleted: true,
-                                            messageType: "completed",
-                                        };
-                                        // Update token usage data if provided in the completed event
-                                        if (message.data) {
-                                            const data = message.data;
-                                            if (data.numInputTokens !== undefined) {
-                                                updatedMessage.inputTokens = data.numInputTokens;
-                                            }
-                                            if (data.numOutputTokens !== undefined) {
-                                                updatedMessage.outputTokens = data.numOutputTokens;
-                                            }
-                                            if (data.numCachedTokens !== undefined) {
-                                                updatedMessage.cachedInputTokens =
-                                                    data.numCachedTokens;
-                                            }
-                                            // Update total tokens used
-                                            updatedMessage.tokensUsed =
-                                                (updatedMessage.inputTokens || 0) +
-                                                    (updatedMessage.outputTokens || 0);
-                                            // Update cost data if provided in the completed event
-                                            if (data.inputTokenCost !== undefined) {
-                                                updatedMessage.inputTokenCost = data.inputTokenCost;
-                                            }
-                                            if (data.outputTokenCost !== undefined) {
-                                                updatedMessage.outputTokenCost =
-                                                    data.outputTokenCost;
-                                            }
-                                            if (data.cachedInputTokenCost !== undefined ||
-                                                data.cachedTokenCost !== undefined) {
-                                                updatedMessage.cachedInputTokenCost =
-                                                    data.cachedInputTokenCost ?? data.cachedTokenCost;
-                                            }
-                                            if (data.totalCost !== undefined) {
-                                                updatedMessage.totalCost = data.totalCost;
-                                            }
-                                            // Handle content that might only be sent in the completed event
-                                            if (data.deltaContent && data.deltaContent.trim()) {
-                                                if (!data.isIncremental) {
-                                                    // Non-incremental: replace the entire content
-                                                    updatedMessage.content = data.deltaContent;
-                                                }
-                                                else {
-                                                    // Incremental: append to existing content
-                                                    updatedMessage.content =
-                                                        (updatedMessage.content || "") +
-                                                            data.deltaContent;
-                                                }
-                                            }
-                                        }
-                                        return updatedMessage;
-                                    }
-                                    return msg;
-                                });
-                                messagesRef.current = updated;
-                                return updated;
-                            });
-                        }
-                        else {
-                            // Fallback: Mark any streaming messages as completed (old behavior)
-                            console.warn("⚠️ No messageId in completed event, falling back to marking all streaming messages as completed");
-                            setMessages((prev) => {
-                                const updated = prev.map((msg) => !msg.isCompleted && msg.messageType === "streaming"
-                                    ? {
-                                        ...msg,
-                                        isCompleted: true,
-                                        messageType: "completed",
-                                    }
-                                    : msg);
-                                messagesRef.current = updated;
-                                return updated;
-                            });
-                        }
-                        // Ensure waiting state is cleared when stream completes
-                        setIsWaitingForResponse(false);
-                        shouldCreateNewMessage.current = false;
-                        // Streaming finished; update indicator
-                        resetDotsTimer();
-                        break;
-                    case "contextUpdate":
-                        // Update agent context when backend sends context update
-                        try {
-                            console.log("📥 Received contextUpdate message:", message);
-                            const updatedContext = message.data;
-                            if (updatedContext) {
-                                console.log("📝 Updating agent metadata with:", updatedContext);
-                                // Check if there's a todo list in the context
-                                if (updatedContext.additionalData?.todoList) {
-                                    console.log("✅ Todo list found in context update:", updatedContext.additionalData.todoList);
-                                }
-                                // 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),
-                                    };
-                                });
-                                console.log("✅ Context updated from backend successfully");
+                            if (
+                              data.cachedInputTokenCost !== undefined ||
+                              data.cachedTokenCost !== undefined
+                            ) {
+                              updatedMessage.cachedInputTokenCost =
+                                data.cachedInputTokenCost ?? data.cachedTokenCost;
                             }
-                            else {
-                                console.warn("⚠️ Context update received but updatedContext is null/undefined");
+                            if (data.totalCost !== undefined) {
+                              updatedMessage.totalCost = data.totalCost;
                             }
+  
+                            // Handle content that might only be sent in the completed event
+                            if (data.deltaContent && data.deltaContent.trim()) {
+                              if (!data.isIncremental) {
+                                // Non-incremental: replace the entire content
+                                updatedMessage.content = data.deltaContent;
+                              } else {
+                                // Incremental: append to existing content
+                                updatedMessage.content =
+                                  (updatedMessage.content || "") +
+                                  data.deltaContent;
+                              }
+                            }
+                          }
+  
+                          return updatedMessage;
                         }
-                        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);
-                        shouldCreateNewMessage.current = false;
-                        // Error ends streaming; update indicator
-                        resetDotsTimer();
-                        break;
-                    default:
-                        console.warn("❓ Unhandled message type:", {
-                            type: message.type,
-                            typeOf: typeof message.type,
-                            length: message.type?.length,
-                            charCodes: message.type
-                                ?.split("")
-                                .map((c) => c.charCodeAt(0)),
-                            message: message,
-                        });
-                        break;
-                }
-            }, abortController.signal);
-        }
-        catch (err) {
-            if (!abortController.signal.aborted) {
-                console.error("Stream connection failed:", err);
-                setError("Failed to connect to agent stream");
-            }
-        }
-        finally {
-            setIsConnecting(false);
-            // Guard: clear waiting state if connection finished without content
-            setIsWaitingForResponse(false);
-        }
-    }, [agent?.id, handleContentChunk, handleToolCall, handleToolResult]);
+                        return msg;
+                      });
+                      messagesRef.current = updated;
+                      return updated;
+                    });
+                  } else {
+                    // Fallback: Mark any streaming messages as completed (old behavior)
+                    console.warn(
+                      "⚠️ No messageId in completed event, falling back to marking all streaming messages as completed",
+                    );
+                    setMessages((prev) => {
+                      const updated = prev.map((msg) =>
+                        !msg.isCompleted && msg.messageType === "streaming"
+                          ? {
+                              ...msg,
+                              isCompleted: true,
+                              messageType: "completed",
+                            }
+                          : msg,
+                      );
+                      messagesRef.current = updated;
+                      return updated;
+                    });
+                  }
+                  // Ensure waiting state is cleared when stream completes
+                  setIsWaitingForResponse(false);
+                  isWaitingRef.current = false;
+                  shouldCreateNewMessage.current = false;
+                  // Streaming finished; update indicator
+                  resetDotsTimer();
+                  break;
+  
+                case "contextUpdate":
+                  // Update agent context when backend sends context update
+                  try {
+                    console.log("📥 Received contextUpdate message:", message);
+                    const updatedContext = message.data as AgentMetadata;
+                    if (updatedContext) {
+                      console.log(
+                        "📝 Updating agent metadata with:",
+                        updatedContext,
+                      );
+  
+                      // Check if there's a todo list in the context
+                      if (updatedContext.additionalData?.todoList) {
+                        console.log(
+                          "✅ Todo list found in context update:",
+                          updatedContext.additionalData.todoList,
+                        );
+                      }
+  
+                      // 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),
+                        };
+                      });
+  
+                      console.log("✅ Context updated from backend successfully");
+                    } else {
+                      console.warn(
+                        "⚠️ Context update received but updatedContext is null/undefined",
+                      );
+                    }
+                  } 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);
+                  isWaitingRef.current = false;
+                  shouldCreateNewMessage.current = false;
+                  // Error ends streaming; update indicator
+                  resetDotsTimer();
+                  break;
+  
+                default:
+                  console.warn("❓ Unhandled message type:", {
+                    type: message.type,
+                    typeOf: typeof message.type,
+                    length: message.type?.length,
+                    charCodes: message.type
+                      ?.split("")
+                      .map((c) => c.charCodeAt(0)),
+                    message: message,
+                  });
+                  break;
+              }
+            },
+            abortController.signal,
+            clientSessionIdRef.current || undefined,
+          );
+        } catch (err) {
+          if (!abortController.signal.aborted) {
+            console.error("Stream connection failed:", err);
+            setError("Failed to connect to agent stream");
+          }
+        } finally {
+          setIsConnecting(false);
+          // Guard: clear waiting state if connection finished without content
+          setIsWaitingForResponse(false);
+        }
+      },
+      [agent?.id, handleContentChunk, handleToolCall, handleToolResult],
+    );
+    */
     // Listen for local approval resolution to update UI
     useEffect(() => {
         const onApprovalResolved = (ev) => {
@@ -1647,42 +1763,22 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
             setIsLoading(true);
             setError(null);
             const agentData = await getAgent(agentStub.id);
+            console.log(`[AgentTerminal] Loaded agent ${agentStub.id}, messages count:`, agentData.messages?.length || 0, agentData.messages);
             setAgent(agentData);
-            // Merge database messages with any existing streaming messages
-            // to prevent losing responses that are currently being streamed
+            // Merge database messages with any existing local messages using ID-based deduplication
+            // This prevents both missing messages and duplicates
             setMessages((prevMessages) => {
                 const dbMessages = agentData.messages || [];
-                // Find any streaming (incomplete) messages that exist locally but not in DB
-                const streamingMessages = prevMessages.filter((msg) => !msg.isCompleted && msg.role === "assistant");
-                // If we have streaming messages, preserve them
-                if (streamingMessages.length > 0) {
-                    // Get all completed messages from DB
-                    const completedDbMessages = dbMessages.filter((msg) => {
-                        // Check if this message is one of our streaming messages
-                        const isStreamingMessage = streamingMessages.some((sm) => sm.id === msg.id);
-                        return !isStreamingMessage;
-                    });
-                    // Merge: use DB messages but keep streaming ones
-                    const merged = [...completedDbMessages];
-                    // Add back the streaming messages at the end
-                    for (const streamingMsg of streamingMessages) {
-                        // Check if this message ID exists in DB messages
-                        const dbVersion = dbMessages.find((m) => m.id === streamingMsg.id);
-                        if (dbVersion &&
-                            dbVersion.content &&
-                            dbVersion.content.length > streamingMsg.content.length) {
-                            // DB has more content, skip the streaming version
-                            merged.push(dbVersion);
-                        }
-                        else {
-                            // Keep the streaming version
-                            merged.push(streamingMsg);
-                        }
+                console.log(`[AgentTerminal] Merging messages - DB: ${dbMessages.length}, Local: ${prevMessages.length}`);
+                // Track all DB message IDs as "seen" to prevent WebSocket duplicates
+                dbMessages.forEach((msg) => {
+                    if (msg.id) {
+                        seenMessageIdsRef.current.add(msg.id.toLowerCase());
                     }
-                    return merged;
-                }
-                // No streaming messages, just use DB messages
-                return dbMessages;
+                });
+                const merged = mergeMessagesById(dbMessages, prevMessages);
+                console.log(`[AgentTerminal] Merged result: ${merged.length} messages`);
+                return merged;
             });
             // Set agent ID for existing agents too
             window.currentAgentId = agentData.id;
@@ -1744,34 +1840,12 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                 agentData.status === 2;
             const isCostLimitReached = agentData.status === "costLimitReached" ||
                 agentData.status === 7;
-            if (isRunning || isWaitingForApproval || isCostLimitReached) {
-                // Auto-connect for running agents, agents waiting for approval, and agents at cost limit
-                // (stream stays open so user can extend limit and continue)
-                setTimeout(async () => {
-                    if (abortControllerRef.current) {
-                        return;
-                    }
-                    shouldCreateNewMessage.current = false;
-                    // For cost limit reached, just connect to stream - don't restart agent
-                    // For running/approval states, signal the backend we're reconnecting
-                    if (!isCostLimitReached) {
-                        try {
-                            if (editContext?.sessionId) {
-                                await startAgent({
-                                    agentId: agentData.id,
-                                    message: "",
-                                    sessionId: editContext.sessionId,
-                                    profileId: agentData.profileId || "",
-                                    model: agentData.model,
-                                });
-                            }
-                        }
-                        catch (startError) {
-                            console.warn("Failed to call startAgent during reconnection:", startError);
-                        }
-                    }
-                    await connectToStream(agentData);
-                }, 100);
+            // NOTE: SSE reconnection logic removed - no longer needed with WebSocket
+            // The WebSocket subscription (in the useEffect below) handles reconnection automatically
+            // Just set the streaming state if agent is running
+            if (isRunning && isActive) {
+                shouldCreateNewMessage.current = false;
+                // State will be set by the WebSocket subscription useEffect
             }
         }
         catch (err) {
@@ -1797,6 +1871,403 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
     useEffect(() => {
         loadAgent();
     }, [loadAgent]);
+    // Reload agent when tab becomes active to get latest messages
+    const previousIsActiveRef = useRef(isActive);
+    useEffect(() => {
+        const wasInactive = !previousIsActiveRef.current;
+        const isNowActive = isActive;
+        previousIsActiveRef.current = isActive;
+        if (wasInactive && isNowActive && agent) {
+            // Tab just became active - reload to get any new messages
+            console.log(`[AgentTerminal] Tab became active, reloading agent ${agent.id}`);
+            loadAgent();
+        }
+    }, [isActive, agent?.id, loadAgent]);
+    // WebSocket message handler for agent streaming
+    const handleAgentWebSocketMessage = useCallback((message) => {
+        if (!agent)
+            return;
+        const messageType = message.type;
+        // Handle agent:name:updated (payload structure is different)
+        if (messageType === "agent:name:updated") {
+            const { agentId: updatedAgentId, agentName } = message.payload;
+            if (updatedAgentId === agent.id && agentName) {
+                console.log("[AgentTerminal] Agent name updated via WebSocket:", agentName);
+                setAgent((prev) => (prev ? { ...prev, name: agentName } : prev));
+            }
+            return;
+        }
+        // For other agent messages, check if this is for our agent
+        const agentId = message.payload?.agentId;
+        if (agentId !== agent.id)
+            return;
+        // Handle agent:run:start
+        if (messageType === "agent:run:start") {
+            console.log("[AgentTerminal] Agent run started via WebSocket:", agentId);
+            return;
+        }
+        // Handle agent:user:message
+        if (messageType === "agent:user:message") {
+            const { messageId, content, timestamp } = message.payload;
+            // Track in seenMessageIds for deduplication
+            const normalizedId = messageId.toLowerCase();
+            if (seenMessageIdsRef.current.has(normalizedId)) {
+                console.log("[AgentTerminal] User message already seen, skipping:", messageId);
+                return;
+            }
+            seenMessageIdsRef.current.add(normalizedId);
+            // Add user message to the messages list
+            setMessages((prev) => {
+                // Double-check if message already exists (deduplication)
+                if (prev.some((m) => m.id && m.id.toLowerCase() === normalizedId)) {
+                    console.log("[AgentTerminal] User message already in list, skipping:", messageId);
+                    return prev;
+                }
+                const userMessage = {
+                    id: messageId,
+                    agentId: agent.id,
+                    messageIndex: prev.length,
+                    role: "user",
+                    content: content,
+                    name: "user",
+                    messageType: "user",
+                    isCompleted: true,
+                    model: "",
+                    tokensUsed: 0,
+                    inputTokens: 0,
+                    outputTokens: 0,
+                    cachedInputTokens: 0,
+                    inputTokenCost: 0,
+                    outputTokenCost: 0,
+                    cachedInputTokenCost: 0,
+                    totalCost: 0,
+                    currency: "USD",
+                    createdDate: timestamp || new Date().toISOString(),
+                    toolCalls: [],
+                };
+                const updated = [...prev, userMessage];
+                messagesRef.current = updated;
+                return updated;
+            });
+            console.log("[AgentTerminal] User message added via WebSocket:", messageId);
+            return;
+        }
+        // Handle agent:run:delta (content, tools, etc.)
+        if (messageType === "agent:run:delta") {
+            const { seq, type, data } = message.payload;
+            // Deduplicate by sequence
+            if (seq && seq <= lastSeqRef.current) {
+                return; // Already processed
+            }
+            if (seq) {
+                lastSeqRef.current = seq;
+            }
+            // Route based on delta type
+            const agentStreamMessage = {
+                type,
+                data,
+                timestamp: new Date().toISOString(),
+            };
+            if (type === "ContentChunk" || type === "contentChunk") {
+                handleContentChunk(agentStreamMessage, agent);
+            }
+            else if (type === "ToolCall" || type === "toolCall") {
+                handleToolCall(agentStreamMessage, agent);
+            }
+            else if (type === "ToolResult" || type === "toolResult") {
+                handleToolResult(agentStreamMessage, agent);
+            }
+            return;
+        }
+        // Handle agent:run:status
+        if (messageType === "agent:run:status") {
+            const { seq, kind, data: statusData } = message.payload;
+            // Deduplicate by sequence
+            if (seq && seq <= lastSeqRef.current) {
+                return;
+            }
+            if (seq) {
+                lastSeqRef.current = seq;
+            }
+            // Route based on status kind
+            try {
+                if (kind === "streamOpen") {
+                    setIsConnecting(false);
+                    return;
+                }
+                if (kind === "tokenUsage") {
+                    const totals = statusData?.totals;
+                    if (totals) {
+                        const totalCost = Number(totals.totalCost) || 0;
+                        const nextTotals = {
+                            input: Number(totals.totalInputTokens) || 0,
+                            output: Number(totals.totalOutputTokens) || 0,
+                            cached: Number(totals.totalCachedInputTokens) || 0,
+                            cacheWrite: Number(totals.totalCacheWriteTokens) || 0,
+                            inputCost: Number(totals.totalInputTokenCost) || 0,
+                            outputCost: Number(totals.totalOutputTokenCost) || 0,
+                            cachedCost: Number(totals.totalCachedInputTokenCost) || 0,
+                            cacheWriteCost: Number(totals.totalCacheWriteTokenCost) || 0,
+                            totalCost: totalCost,
+                            currency: totals.currency,
+                        };
+                        const anyNonZero = (nextTotals.totalCost || 0) > 0 ||
+                            (nextTotals.input || 0) > 0 ||
+                            (nextTotals.output || 0) > 0 ||
+                            (nextTotals.cached || 0) > 0 ||
+                            (nextTotals.cacheWrite || 0) > 0;
+                        if (anyNonZero) {
+                            setLiveTotals(nextTotals);
+                        }
+                        if (agent?.costLimit && totalCost > agent.costLimit) {
+                            setCostLimitExceeded({
+                                totalCost: totalCost,
+                                costLimit: agent.costLimit,
+                                initialCostLimit: agent.costLimit,
+                            });
+                            setIsWaitingForResponse(false);
+                            shouldCreateNewMessage.current = false;
+                        }
+                        setMessages((prev) => [...prev]);
+                    }
+                    return;
+                }
+                if (kind === "toolApprovalsRequired") {
+                    const msgId = statusData.messageId;
+                    const ids = statusData.toolCallIds || [];
+                    if (msgId && Array.isArray(ids) && ids.length > 0) {
+                        setMessages((prev) => {
+                            const updated = prev.map((m) => {
+                                if (m.id !== msgId)
+                                    return m;
+                                const existingToolCalls = m.toolCalls || [];
+                                const updatedToolCalls = existingToolCalls.map((tc) => {
+                                    if (!ids.includes(tc.toolCallId))
+                                        return tc;
+                                    const fn = tc.functionName || "";
+                                    return {
+                                        ...tc,
+                                        functionName: fn.includes("(pending approval)")
+                                            ? fn
+                                            : fn + " (pending approval)",
+                                    };
+                                });
+                                return { ...m, toolCalls: updatedToolCalls };
+                            });
+                            messagesRef.current = updated;
+                            return updated;
+                        });
+                    }
+                    setIsConnecting(false);
+                    setIsWaitingForResponse(false);
+                    return;
+                }
+                if (kind === "cost_limit_reached") {
+                    const totalCost = Number(statusData.totalCost) || 0;
+                    const costLimit = Number(statusData.costLimit) || agent?.costLimit || 0;
+                    setCostLimitExceeded({
+                        totalCost: totalCost,
+                        costLimit: costLimit,
+                        initialCostLimit: costLimit,
+                    });
+                    setIsWaitingForResponse(false);
+                    setIsConnecting(false);
+                    return;
+                }
+                if (kind === "contextWindow") {
+                    window.__agentContextWindowStatus = {
+                        model: statusData.model,
+                        normalizedModel: statusData.normalizedModel,
+                        contextWindowTokens: statusData.contextWindowTokens,
+                        maxCompletionTokens: statusData.maxCompletionTokens,
+                        estimatedInputTokens: statusData.estimatedInputTokens,
+                        messageCount: statusData.messageCount,
+                        contextUsedPercent: statusData.contextUsedPercent,
+                    };
+                    setMessages((prev) => [...prev]);
+                    return;
+                }
+                if (kind === "contextChanged") {
+                    const nextContext = statusData.context || {};
+                    setAgentMetadata((prev) => {
+                        const current = (prev || {});
+                        const currentWithoutContext = { ...current };
+                        delete currentWithoutContext.context;
+                        const next = {
+                            ...currentWithoutContext,
+                            additionalData: {
+                                ...(current.additionalData || {}),
+                                context: nextContext,
+                            },
+                        };
+                        return next;
+                    });
+                    return;
+                }
+            }
+            catch (err) {
+                console.error("[AgentTerminal] Error handling status update:", err);
+            }
+            return;
+        }
+        // Handle agent:run:complete
+        if (messageType === "agent:run:complete") {
+            console.log("[AgentTerminal] Agent run completed via WebSocket:", agentId);
+            // Mark the last assistant message as completed
+            setMessages((prev) => {
+                const updated = prev.map((msg) => msg.role === "assistant" && !msg.isCompleted
+                    ? {
+                        ...msg,
+                        isCompleted: true,
+                        messageType: "completed",
+                    }
+                    : msg);
+                messagesRef.current = updated;
+                return updated;
+            });
+            setIsWaitingForResponse(false);
+            isWaitingRef.current = false;
+            setIsConnecting(false);
+            shouldCreateNewMessage.current = false;
+            resetDotsTimer();
+            return;
+        }
+        // Handle agent:run:error
+        if (messageType === "agent:run:error") {
+            const errorMsg = message.payload?.error || "Unknown error";
+            console.error("[AgentTerminal] Agent run error via WebSocket:", errorMsg);
+            setError(errorMsg);
+            setIsWaitingForResponse(false);
+            isWaitingRef.current = false;
+            setIsConnecting(false);
+            resetDotsTimer();
+            return;
+        }
+    }, [
+        agent,
+        handleContentChunk,
+        handleToolCall,
+        handleToolResult,
+        resetDotsTimer,
+    ]);
+    // Keep refs for latest agent and resetDotsTimer to avoid adding them to effect deps
+    const agentRef = useRef(agent);
+    const resetDotsTimerRef = useRef(resetDotsTimer);
+    const handleAgentWebSocketMessageRef = useRef(handleAgentWebSocketMessage);
+    useEffect(() => {
+        agentRef.current = agent;
+    }, [agent]);
+    useEffect(() => {
+        resetDotsTimerRef.current = resetDotsTimer;
+    }, [resetDotsTimer]);
+    useEffect(() => {
+        handleAgentWebSocketMessageRef.current = handleAgentWebSocketMessage;
+    }, [handleAgentWebSocketMessage]);
+    // Subscribe to agent WebSocket messages when active
+    useEffect(() => {
+        const addListener = editContext?.addSocketMessageListener;
+        if (!isActive || !addListener) {
+            // Unsubscribe if we were previously subscribed
+            if (subscribedAgentIdRef.current) {
+                const socket = globalThis.editorSocket;
+                if (socket && socket.readyState === WebSocket.OPEN) {
+                    socket.send(JSON.stringify({
+                        type: "agent:unsubscribe",
+                        agentId: subscribedAgentIdRef.current,
+                    }));
+                }
+                subscribedAgentIdRef.current = null;
+            }
+            return;
+        }
+        // Send subscription message to server
+        const socket = globalThis.editorSocket;
+        if (socket && socket.readyState === WebSocket.OPEN) {
+            socket.send(JSON.stringify({
+                type: "agent:subscribe",
+                agentId: agentStub.id,
+            }));
+            console.log(`[AgentTerminal] Sent agent:subscribe for ${agentStub.id}`);
+        }
+        // Use the addSocketMessageListener helper from editContext
+        // Wrap the handler in a stable function that uses the ref
+        const stableHandler = (message) => {
+            handleAgentWebSocketMessageRef.current(message);
+        };
+        const unsubscribe = addListener(stableHandler);
+        subscribedAgentIdRef.current = agentStub.id;
+        // Reset deduplication state when switching agents
+        seenMessageIdsRef.current.clear();
+        lastSeqRef.current = 0;
+        // Set up streaming state based on agent status (uses latest values via refs)
+        const currentAgent = agentRef.current;
+        if (currentAgent) {
+            const isRunning = currentAgent.status === "running" || currentAgent.status === 1;
+            const isWaitingForApproval = currentAgent.status === "waitingForApproval" ||
+                currentAgent.status === 2;
+            if (isRunning) {
+                console.log(`[AgentTerminal] Agent is running, setting up streaming state for ${currentAgent.id}`);
+                setIsWaitingForResponse(true);
+                isWaitingRef.current = true;
+                shouldCreateNewMessage.current = false;
+                resetDotsTimerRef.current();
+            }
+            else if (isWaitingForApproval) {
+                console.log(`[AgentTerminal] Agent is waiting for approval for ${currentAgent.id}`);
+                setIsWaitingForResponse(false);
+                isWaitingRef.current = false;
+                resetDotsTimerRef.current();
+            }
+            else {
+                console.log(`[AgentTerminal] Agent status is ${currentAgent.status}, clearing streaming state`);
+                setIsWaitingForResponse(false);
+                isWaitingRef.current = false;
+                resetDotsTimerRef.current();
+            }
+        }
+        return () => {
+            // Send unsubscribe message to server
+            const socket = globalThis.editorSocket;
+            if (socket &&
+                socket.readyState === WebSocket.OPEN &&
+                subscribedAgentIdRef.current) {
+                socket.send(JSON.stringify({
+                    type: "agent:unsubscribe",
+                    agentId: subscribedAgentIdRef.current,
+                }));
+                console.log(`[AgentTerminal] Sent agent:unsubscribe for ${subscribedAgentIdRef.current}`);
+            }
+            unsubscribe();
+            subscribedAgentIdRef.current = null;
+        };
+    }, [isActive, agentStub.id, editContext?.addSocketMessageListener]);
+    // Handle stream connection when agent becomes active/inactive
+    // NOTE: SSE connection disabled - now using WebSocket exclusively
+    // Keeping this code commented for easy rollback if needed
+    /*
+    useEffect(() => {
+      if (!agent) return;
+  
+      const isRunning = agent.status === "running" || (agent.status as any) === 1;
+      const isWaitingForApproval =
+        agent.status === "waitingForApproval" || (agent.status as any) === 2;
+      const isCostLimitReached =
+        agent.status === "costLimitReached" || (agent.status as any) === 7;
+  
+      const shouldBeConnected =
+        isRunning || isWaitingForApproval || isCostLimitReached;
+  
+      if (isActive && shouldBeConnected && !abortControllerRef.current) {
+        // Agent became active and should be connected - connect to stream
+        connectToStream();
+      } else if (!isActive && abortControllerRef.current) {
+        // Agent became inactive - disconnect from stream
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+        setIsConnecting(false);
+      }
+    }, [isActive, agent?.status, connectToStream]);
+    */
     // Focus prompt when requested globally (from AI command)
     useEffect(() => {
         const focusHandler = () => {
@@ -1952,29 +2423,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                     console.warn(`Context factory not found: ${factoryName}. Proceeding without it.`);
                 }
             }
-            // Add user message to local state immediately for better UX
-            const userMessage = {
-                id: `user-${Date.now()}`,
-                agentId,
-                messageIndex: messages.length,
-                role: "user",
-                content: prompt.trim(),
-                name: "user",
-                messageType: "user",
-                isCompleted: true,
-                model: "",
-                tokensUsed: 0,
-                inputTokens: 0,
-                outputTokens: 0,
-                cachedInputTokens: 0,
-                inputTokenCost: 0,
-                outputTokenCost: 0,
-                cachedInputTokenCost: 0,
-                totalCost: 0,
-                currency: "USD",
-                createdDate: new Date().toISOString(),
-            };
-            setMessages((prev) => [...prev, userMessage]);
+            // NOTE: User message is no longer added optimistically here
+            // It will be added when we receive the agent:user:message broadcast from the server
+            // This ensures all tabs (including the sending tab) have the same messageId from the database
             const metaCtx = agentMetadata?.additionalData?.context;
             const selectionFromCtx = metaCtx?.componentIds?.length
                 ? metaCtx.componentIds
@@ -2015,8 +2466,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                 setCurrentHistoryIndex(-1);
             }
             setPrompt("");
-            // Connect to stream immediately to start receiving updates
-            await connectToStream();
+            // WebSocket connection is already active via subscription - no need for SSE
         }
         catch (err) {
             console.error("Failed to submit prompt:", err);
@@ -2105,28 +2555,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
                     console.warn(`Context factory not found: ${factoryName}. Proceeding without it.`);
                 }
             }
-            const userMessage = {
-                id: `user-${Date.now()}`,
-                agentId,
-                messageIndex: messages.length,
-                role: "user",
-                content: text.trim(),
-                name: "user",
-                messageType: "user",
-                isCompleted: true,
-                model: "",
-                tokensUsed: 0,
-                inputTokens: 0,
-                outputTokens: 0,
-                cachedInputTokens: 0,
-                inputTokenCost: 0,
-                outputTokenCost: 0,
-                cachedInputTokenCost: 0,
-                totalCost: 0,
-                currency: "USD",
-                createdDate: new Date().toISOString(),
-            };
-            setMessages((prev) => [...prev, userMessage]);
+            // NOTE: User message is no longer added optimistically here
+            // It will be added when we receive the agent:user:message broadcast from the server
+            // This ensures all tabs (including the sending tab) have the same messageId from the database
             const metaCtx = agentMetadata?.additionalData?.context;
             const selectionFromCtx = metaCtx?.componentIds?.length
                 ? metaCtx.componentIds
@@ -2153,7 +2584,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, }) {
             await startAgent(request);
             // If user changed mode/model while the agent was new, persist them now
             await persistPendingSettingsIfNeeded();
-            await connectToStream();
+            // WebSocket connection is already active via subscription - no need for SSE
         }
         catch (err) {
             console.error("Failed to submit quick message:", err);