agents-vue 0.2.1 → 0.3.0

package/dist/index.mjs

@@ -1,498 +1,14 @@
 import { Chat } from '@ai-sdk/vue';
 import { broadcastTransition } from 'agents/chat';
+import { WebSocketChatTransport } from 'agents/chat/transport';
 import { AgentClient } from 'agents/client';
-import { ref, onScopeDispose } from 'vue';
-
-function randomRequestId() {
-  return Math.random().toString(36).slice(2, 10);
-}
-const RESUME_PROBE_TIMEOUT_MS = 5e3;
-const RESUME_PENDING_TIMEOUT_MS = 6e4;
-class WebSocketChatTransport {
-  socket;
-  prepareBody;
-  activeRequestIds;
-  // Resume handshake state (public so the composable message handler can resolve them)
-  _resumeResolver = null;
-  _resumeNoneResolver = null;
-  // Tool continuation state
-  _expectToolContinuation = false;
-  _abortToolContinuation = null;
-  // Whether a generic client abort should cancel the server turn (default: local-only).
-  cancelOnClientAbort;
-  // The currently cancellable server turn — either locally initiated (sendMessages)
-  // or observed via the broadcast/resume-fallback path. `_cancelAttachedStream` tears
-  // down the local stream attached to a locally-initiated turn (null for observed turns).
-  _activeServerTurnId = null;
-  _cancelAttachedStream = null;
-  // Pre-stream "pending" extender for the in-flight resume probe (cleared on resolve).
-  _onStreamPending = null;
-  constructor(options) {
-    this.socket = options.socket;
-    this.prepareBody = options.prepareBody;
-    this.activeRequestIds = options.activeRequestIds ?? /* @__PURE__ */ new Set();
-    this.cancelOnClientAbort = options.cancelOnClientAbort ?? false;
-  }
-  /** Mark that the next reconnectToStream() should attach to a server-initiated tool continuation. */
-  expectToolContinuation() {
-    this._expectToolContinuation = true;
-  }
-  /** Abort the active client-side tool continuation stream. */
-  abortActiveToolContinuation() {
-    return this._abortToolContinuation?.() ?? false;
-  }
-  /** Send a server-turn cancel frame for a request id (best-effort). */
-  sendCancelFrame(id) {
-    try {
-      this.socket.send(JSON.stringify({ id, type: "cf_agent_chat_request_cancel" }));
-    } catch {
-    }
-  }
-  setActiveServerTurn(id, cancelStream) {
-    this._activeServerTurnId = id;
-    this._cancelAttachedStream = cancelStream;
-  }
-  clearActiveServerTurn(id) {
-    if (this._activeServerTurnId === id) {
-      this._activeServerTurnId = null;
-      this._cancelAttachedStream = null;
-    }
-  }
-  /** Register a server-observed (broadcast / resume-fallback) turn as the cancellable one. */
-  observeServerTurn(requestId) {
-    this.setActiveServerTurn(requestId, null);
-  }
-  /** Mark a server turn complete so it is no longer the cancellable turn. */
-  handleServerTurnCompleted(requestId) {
-    this.clearActiveServerTurn(requestId);
-  }
-  /**
-   * Explicitly cancel the active server turn (and any tool continuation). Unlike a
-   * generic client abort, this always signals the server. Drives `useAgentChat.stop()`.
-   */
-  cancelActiveServerTurn() {
-    const id = this._activeServerTurnId;
-    let cancelledRequest = false;
-    if (id) {
-      this.sendCancelFrame(id);
-      this._cancelAttachedStream?.();
-      this.clearActiveServerTurn(id);
-      cancelledRequest = true;
-    }
-    const cancelledToolContinuation = this.abortActiveToolContinuation();
-    return cancelledRequest || cancelledToolContinuation;
-  }
-  /** Called by the composable on cf_agent_stream_pending — extend the in-flight resume probe. */
-  handleStreamPending() {
-    if (!this._onStreamPending) {
-      return false;
-    }
-    this._onStreamPending();
-    return true;
-  }
-  /** True when the transport is waiting for a resume handshake. */
-  isAwaitingResume() {
-    return this._resumeResolver !== null || this._resumeNoneResolver !== null;
-  }
-  /** Called by the composable when it receives cf_agent_stream_resuming. */
-  handleStreamResuming(data) {
-    if (!this._resumeResolver) {
-      return false;
-    }
-    this._resumeResolver(data);
-    return true;
-  }
-  /** Called by the composable when it receives cf_agent_stream_resume_none. */
-  handleStreamResumeNone() {
-    if (!this._resumeNoneResolver) {
-      return false;
-    }
-    this._resumeNoneResolver();
-    return true;
-  }
-  async sendMessages(options) {
-    const requestId = randomRequestId();
-    const abortController = new AbortController();
-    let completed = false;
-    let extraBody = {};
-    if (this.prepareBody) {
-      extraBody = await this.prepareBody({
-        messages: options.messages,
-        trigger: options.trigger,
-        messageId: options.messageId
-      });
-    }
-    if (options.body) {
-      extraBody = { ...extraBody, ...options.body };
-    }
-    const tail = options.messages.at(-1);
-    const bodyPayload = JSON.stringify({
-      messages: tail ? [tail] : [],
-      trigger: options.trigger,
-      ...extraBody
-    });
-    this.activeRequestIds.add(requestId);
-    const socket = this.socket;
-    const activeIds = this.activeRequestIds;
-    const finish = (action, keepId = false, clearServerTurn = true) => {
-      if (completed) {
-        return;
-      }
-      completed = true;
-      if (clearServerTurn) {
-        this.clearActiveServerTurn(requestId);
-      }
-      try {
-        action();
-      } catch {
-      }
-      if (!keepId) {
-        activeIds.delete(requestId);
-      }
-      abortController.abort();
-    };
-    const abortError = new Error("Aborted");
-    abortError.name = "AbortError";
-    let requestSent = false;
-    let streamController;
-    const cancelActiveRequest = () => {
-      if (completed) {
-        return false;
-      }
-      finish(() => streamController.error(abortError), true);
-      return true;
-    };
-    const onAbort = () => {
-      if (completed) {
-        return;
-      }
-      if (this.cancelOnClientAbort) {
-        if (requestSent) {
-          this.sendCancelFrame(requestId);
-        }
-        finish(() => streamController.error(abortError), requestSent);
-      } else {
-        finish(() => streamController.error(abortError), false, !requestSent);
-      }
-    };
-    const stream = new ReadableStream({
-      start(controller) {
-        streamController = controller;
-        const onMessage = (event) => {
-          try {
-            const data = JSON.parse(String(event.data));
-            if (data.type !== "cf_agent_use_chat_response") {
-              return;
-            }
-            if (data.id !== requestId) {
-              return;
-            }
-            if (data.error) {
-              finish(() => controller.error(new Error(data.body || "Stream error")));
-              return;
-            }
-            if (data.body?.trim()) {
-              try {
-                const chunk = JSON.parse(data.body);
-                controller.enqueue(chunk);
-              } catch {
-              }
-            }
-            if (data.done) {
-              finish(() => controller.close());
-            }
-          } catch {
-          }
-        };
-        socket.addEventListener("message", onMessage, { signal: abortController.signal });
-      },
-      cancel() {
-        onAbort();
-      }
-    });
-    this.setActiveServerTurn(requestId, cancelActiveRequest);
-    if (options.abortSignal) {
-      options.abortSignal.addEventListener("abort", onAbort, { once: true });
-      if (options.abortSignal.aborted) {
-        onAbort();
-      }
-    }
-    if (!completed) {
-      socket.send(
-        JSON.stringify({
-          id: requestId,
-          init: { method: "POST", body: bodyPayload },
-          type: "cf_agent_use_chat_request"
-        })
-      );
-      requestSent = true;
-    }
-    return stream;
-  }
-  async reconnectToStream(_options) {
-    if (this._expectToolContinuation) {
-      this._expectToolContinuation = false;
-      return this._createToolContinuationStream();
-    }
-    const activeIds = this.activeRequestIds;
-    return new Promise((resolve) => {
-      let resolved = false;
-      let timeout;
-      const done = (value) => {
-        if (resolved) {
-          return;
-        }
-        resolved = true;
-        this._resumeResolver = null;
-        this._resumeNoneResolver = null;
-        this._onStreamPending = null;
-        clearTimeout(timeout);
-        resolve(value);
-      };
-      this._resumeNoneResolver = () => done(null);
-      this._resumeResolver = (data) => {
-        const id = data.id;
-        activeIds.add(id);
-        this.socket.send(JSON.stringify({ type: "cf_agent_stream_resume_ack", id }));
-        done(this._createResumeStream(id));
-      };
-      this._onStreamPending = () => {
-        if (resolved) {
-          return;
-        }
-        clearTimeout(timeout);
-        timeout = setTimeout(() => done(null), RESUME_PENDING_TIMEOUT_MS);
-      };
-      try {
-        this.socket.send(JSON.stringify({ type: "cf_agent_stream_resume_request" }));
-      } catch {
-      }
-      timeout = setTimeout(() => done(null), RESUME_PROBE_TIMEOUT_MS);
-    });
-  }
-  /**
-   * Creates a deferred ReadableStream for client-side tool continuations.
-   * Returned immediately so AI SDK status becomes "submitted" right after tool output,
-   * then waits for the server to announce continuation via STREAM_RESUMING.
-   */
-  _createToolContinuationStream() {
-    const socket = this.socket;
-    const activeIds = this.activeRequestIds;
-    const streamAbort = new AbortController();
-    const abortError = new Error("Aborted");
-    abortError.name = "AbortError";
-    let completed = false;
-    let requestId = null;
-    let readerController;
-    let onResumeRef = null;
-    let onResumeNoneRef = null;
-    const clearHandshakeResolvers = (resumeResolver, resumeNoneResolver) => {
-      if (resumeResolver === void 0 && resumeNoneResolver === void 0) {
-        this._resumeResolver = null;
-        this._resumeNoneResolver = null;
-        return;
-      }
-      if (resumeResolver && this._resumeResolver === resumeResolver) {
-        this._resumeResolver = null;
-      }
-      if (resumeNoneResolver && this._resumeNoneResolver === resumeNoneResolver) {
-        this._resumeNoneResolver = null;
-      }
-    };
-    const finish = (action, resumeResolver, resumeNoneResolver, keepRequestId = false) => {
-      if (completed) {
-        return;
-      }
-      completed = true;
-      this._abortToolContinuation = null;
-      this._onStreamPending = null;
-      clearHandshakeResolvers(resumeResolver, resumeNoneResolver);
-      try {
-        action();
-      } catch {
-      }
-      if (requestId && !keepRequestId) {
-        activeIds.delete(requestId);
-      }
-      streamAbort.abort();
-    };
-    this._abortToolContinuation = () => {
-      if (completed) {
-        return false;
-      }
-      if (requestId === null) {
-        finish(() => readerController.error(abortError), onResumeRef, onResumeNoneRef);
-        return true;
-      }
-      try {
-        socket.send(JSON.stringify({ type: "cf_agent_chat_request_cancel", id: requestId }));
-      } catch {
-      }
-      finish(() => readerController.error(abortError), onResumeRef, onResumeNoneRef, true);
-      return true;
-    };
-    return new ReadableStream({
-      start: (controller) => {
-        readerController = controller;
-        const onResumeNone = () => {
-          clearTimeout(timeout);
-          finish(() => controller.close(), onResume, onResumeNone);
-        };
-        const onResume = (data) => {
-          if (requestId) {
-            return;
-          }
-          requestId = data.id;
-          activeIds.add(requestId);
-          clearHandshakeResolvers(onResume, onResumeNone);
-          this._onStreamPending = null;
-          clearTimeout(timeout);
-          socket.send(JSON.stringify({ type: "cf_agent_stream_resume_ack", id: requestId }));
-        };
-        onResumeRef = onResume;
-        onResumeNoneRef = onResumeNone;
-        let timeout = setTimeout(
-          () => finish(() => controller.close(), onResume, onResumeNone),
-          RESUME_PROBE_TIMEOUT_MS
-        );
-        this._onStreamPending = () => {
-          if (completed) {
-            return;
-          }
-          clearTimeout(timeout);
-          timeout = setTimeout(
-            () => finish(() => controller.close(), onResume, onResumeNone),
-            RESUME_PENDING_TIMEOUT_MS
-          );
-        };
-        this._resumeResolver = onResume;
-        this._resumeNoneResolver = onResumeNone;
-        const onMessage = (event) => {
-          try {
-            const data = JSON.parse(String(event.data));
-            if (data.type !== "cf_agent_use_chat_response" || requestId == null || data.id !== requestId) {
-              return;
-            }
-            if (data.error) {
-              finish(() => controller.error(new Error(data.body || "Stream error")), onResume, onResumeNone);
-              return;
-            }
-            if (data.body?.trim()) {
-              try {
-                const chunk = JSON.parse(data.body);
-                controller.enqueue(chunk);
-              } catch {
-              }
-            }
-            if (data.done) {
-              finish(() => controller.close(), onResume, onResumeNone);
-            }
-          } catch {
-          }
-        };
-        socket.addEventListener("message", onMessage, { signal: streamAbort.signal });
-        try {
-          socket.send(JSON.stringify({ type: "cf_agent_stream_resume_request" }));
-        } catch {
-          finish(() => controller.close());
-        }
-      },
-      cancel: () => {
-        if (requestId && this.cancelOnClientAbort) {
-          this.sendCancelFrame(requestId);
-          finish(() => {
-          }, onResumeRef, onResumeNoneRef, true);
-        } else {
-          finish(() => {
-          }, onResumeRef, onResumeNoneRef);
-        }
-      }
-    });
-  }
-  /** Creates a ReadableStream that receives resumed stream chunks. */
-  _createResumeStream(requestId) {
-    const socket = this.socket;
-    const activeIds = this.activeRequestIds;
-    const chunkAbort = new AbortController();
-    const abortError = new Error("Aborted");
-    abortError.name = "AbortError";
-    let completed = false;
-    let streamController;
-    const finish = (action, keepId = false, clearServerTurn = true) => {
-      if (completed) {
-        return;
-      }
-      completed = true;
-      if (clearServerTurn) {
-        this.clearActiveServerTurn(requestId);
-      }
-      try {
-        action();
-      } catch {
-      }
-      if (!keepId) {
-        activeIds.delete(requestId);
-      }
-      chunkAbort.abort();
-    };
-    const stream = new ReadableStream({
-      start(controller) {
-        streamController = controller;
-        const onMessage = (event) => {
-          try {
-            const data = JSON.parse(String(event.data));
-            if (data.type !== "cf_agent_use_chat_response") {
-              return;
-            }
-            if (data.id !== requestId) {
-              return;
-            }
-            if (data.error) {
-              finish(() => controller.error(new Error(data.body || "Stream error")));
-              return;
-            }
-            if (data.body?.trim()) {
-              try {
-                const chunk = JSON.parse(data.body);
-                controller.enqueue(chunk);
-              } catch {
-              }
-            }
-            if (data.done) {
-              finish(() => controller.close());
-            }
-          } catch {
-          }
-        };
-        socket.addEventListener("message", onMessage, { signal: chunkAbort.signal });
-      },
-      cancel: () => {
-        if (this.cancelOnClientAbort) {
-          this.sendCancelFrame(requestId);
-          finish(() => {
-          }, true);
-        } else {
-          finish(() => {
-          }, false, false);
-        }
-      }
-    });
-    this.setActiveServerTurn(requestId, () => {
-      if (completed) {
-        return false;
-      }
-      finish(() => streamController.error(abortError), true);
-      return true;
-    });
-    return stream;
-  }
-}
+import { isToolUIPart, getToolName } from 'ai';
+import { ref, watch, onScopeDispose } from 'vue';
 
 function isRecord(value) {
   return typeof value === "object" && value !== null;
 }
-function parseProtocolMessage(data) {
-  const parsed = JSON.parse(data);
+function parseProtocolMessage(parsed) {
   if (!isRecord(parsed) || typeof parsed.type !== "string") {
     return null;
   }
@@ -508,6 +24,7 @@ function parseProtocolMessage(data) {
     replayComplete: typeof parsed.replayComplete === "boolean" ? parsed.replayComplete : void 0,
     continuation: typeof parsed.continuation === "boolean" ? parsed.continuation : void 0,
     recovering: typeof parsed.recovering === "boolean" ? parsed.recovering : void 0,
+    probeId: typeof parsed.probeId === "string" ? parsed.probeId : void 0,
     message,
     messages
   };
@@ -604,10 +121,20 @@ function preserveActiveStreamMessages(currentMessages, incomingMessages) {
       return nextMessages;
     }
   }
-  return [...incomingMessages, tailMessage];
+  return incomingMessages;
+}
+const CONTINUATION_BLOCKING_STATUSES = /* @__PURE__ */ new Set(["submitted", "streaming", "error"]);
+function mergeById(onScreen, stored) {
+  const storedIds = new Set(stored.map((message) => message.id));
+  return [...stored, ...onScreen.filter((message) => !storedIds.has(message.id))];
 }
 function createMessageId() {
-  return globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2);
+  if (globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID();
+  }
+  const bytes = new Uint8Array(16);
+  globalThis.crypto.getRandomValues(bytes);
+  return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
 }
 function useAgentChat(options) {
   const autoContinueAfterToolResult = options.autoContinueAfterToolResult ?? true;
@@ -615,19 +142,30 @@ function useAgentChat(options) {
   const fallbackAckedResumeRequestIds = /* @__PURE__ */ new Set();
   let streamState = { status: "idle" };
   let isResumingToolContinuation = false;
+  let pendingToolContinuation = false;
+  let continuationLaunchTimer = null;
+  let observedToolContinuationRequestId = null;
+  const dispatchedToolCallIds = /* @__PURE__ */ new Set();
   let resumeInFlight = false;
   let resumeGeneration = 0;
   const isRecovering = ref(false);
   const connectionError = ref(null);
+  const connectionState = ref("connected");
+  let resyncPending = false;
+  const isServerStreaming = ref(false);
   const socket = new AgentClient({
     ...options.client,
     onConnectionError: (error) => {
       connectionError.value = error;
       options.client.onConnectionError?.(error);
+    },
+    onStateUpdate: (state, source) => {
+      options.onStateUpdate?.(state, source);
+      options.client.onStateUpdate?.(state, source);
     }
   });
   const transport = new WebSocketChatTransport({
-    socket,
+    agent: socket,
     activeRequestIds,
     cancelOnClientAbort: options.cancelOnClientAbort ?? false,
     prepareBody: async () => {
@@ -637,7 +175,7 @@ function useAgentChat(options) {
       return clientTools ? { ...extraBody, clientTools } : extraBody;
     }
   });
-  const handleToolCall = async ({ toolCall }) => {
+  async function dispatchToolCall(toolCall) {
     const clientTool = options.tools?.[toolCall.toolName];
     const addClientToolOutput = (toolOutput) => addToolOutputForTool(toolCall.toolName, toolOutput);
     if (options.onToolCall) {
@@ -657,23 +195,69 @@ function useAgentChat(options) {
         errorText: getErrorText(error)
       });
     }
-  };
+  }
   const chat = new Chat({
     messages: options.initialMessages,
     transport,
-    onToolCall: handleToolCall,
     onError: options.onError
   });
-  function startToolContinuation() {
-    if (!autoContinueAfterToolResult || isResumingToolContinuation) {
+  function dispatchRenderedToolCalls() {
+    if (chat.status === "streaming" || chat.status === "submitted" || isServerStreaming.value || isRecovering.value) {
+      return;
+    }
+    const lastMessage = chat.messages.at(-1);
+    if (!lastMessage || lastMessage.role !== "assistant") {
       return;
     }
+    for (const part of lastMessage.parts) {
+      if (!isToolUIPart(part) || part.state !== "input-available" || dispatchedToolCallIds.has(part.toolCallId)) {
+        continue;
+      }
+      dispatchedToolCallIds.add(part.toolCallId);
+      void dispatchToolCall({ toolCallId: part.toolCallId, toolName: getToolName(part), input: part.input });
+    }
+  }
+  function armToolContinuation() {
+    if (!autoContinueAfterToolResult || isResumingToolContinuation) {
+      return false;
+    }
     isResumingToolContinuation = true;
-    transport.expectToolContinuation();
-    void chat.resumeStream().finally(() => {
-      isResumingToolContinuation = false;
-    });
+    pendingToolContinuation = true;
+    return true;
+  }
+  function scheduleToolContinuationLaunch() {
+    if (!pendingToolContinuation || continuationLaunchTimer !== null || CONTINUATION_BLOCKING_STATUSES.has(chat.status)) {
+      return;
+    }
+    continuationLaunchTimer = setTimeout(() => {
+      continuationLaunchTimer = null;
+      if (!pendingToolContinuation || CONTINUATION_BLOCKING_STATUSES.has(chat.status)) {
+        return;
+      }
+      pendingToolContinuation = false;
+      transport.expectToolContinuation();
+      void chat.resumeStream().finally(() => {
+        isResumingToolContinuation = false;
+      });
+    }, 0);
+  }
+  function resetToolContinuation() {
+    pendingToolContinuation = false;
+    isResumingToolContinuation = false;
+    observedToolContinuationRequestId = null;
+    if (continuationLaunchTimer !== null) {
+      clearTimeout(continuationLaunchTimer);
+      continuationLaunchTimer = null;
+    }
   }
+  watch([() => chat.messages, () => chat.status, isServerStreaming, isRecovering], () => {
+    if (chat.status === "error" && pendingToolContinuation) {
+      resetToolContinuation();
+    } else {
+      scheduleToolContinuationLaunch();
+    }
+    dispatchRenderedToolCalls();
+  });
   async function stop() {
     try {
       transport.cancelActiveServerTurn();
@@ -684,8 +268,9 @@ function useAgentChat(options) {
   }
   function clearHistory() {
     void stop();
-    isResumingToolContinuation = false;
+    resetToolContinuation();
     isRecovering.value = false;
+    isServerStreaming.value = false;
     streamState = broadcastTransition(streamState, { type: "clear" }).state;
     chat.messages = [];
     socket.send(JSON.stringify({ type: "cf_agent_chat_clear" }));
@@ -693,6 +278,7 @@ function useAgentChat(options) {
   async function addToolOutputForTool(toolName, toolOutput) {
     const shouldAutoContinue = toolOutput.state === "output-error" ? false : autoContinueAfterToolResult;
     const clientTools = getClientToolSchemas(options.tools);
+    const continuing = shouldAutoContinue && armToolContinuation();
     socket.send(
       JSON.stringify({
         type: "cf_agent_tool_result",
@@ -719,8 +305,8 @@ function useAgentChat(options) {
         output: toolOutput.output
       });
     }
-    if (shouldAutoContinue) {
-      startToolContinuation();
+    if (continuing) {
+      scheduleToolContinuationLaunch();
     }
   }
   async function addToolOutput(...args) {
@@ -734,6 +320,7 @@ function useAgentChat(options) {
       console.warn(`[agents-vue] Could not find tool call for approval "${approvalResponse.id}".`);
       return;
     }
+    const continuing = armToolContinuation();
     socket.send(
       JSON.stringify({
         type: "cf_agent_tool_approval",
@@ -743,11 +330,17 @@ function useAgentChat(options) {
       })
     );
     await chat.addToolApprovalResponse(...args);
-    startToolContinuation();
+    if (continuing) {
+      scheduleToolContinuationLaunch();
+    }
   }
   socket.addEventListener("message", (event) => {
     try {
-      const data = parseProtocolMessage(String(event.data));
+      const raw = JSON.parse(String(event.data));
+      if (options.onFrame?.(raw) === true) {
+        return;
+      }
+      const data = parseProtocolMessage(raw);
       if (!data) {
         return;
       }
@@ -767,24 +360,42 @@ function useAgentChat(options) {
           streamState = broadcastTransition(streamState, { type: "clear" }).state;
           chat.messages = [];
           isRecovering.value = false;
+          isServerStreaming.value = false;
           break;
         // Forward resume handshake to transport
-        case "cf_agent_stream_resuming":
-          if (data.id && !transport.handleStreamResuming({ type: data.type, id: data.id }) && !activeRequestIds.has(data.id) && !fallbackAckedResumeRequestIds.has(data.id)) {
-            streamState = broadcastTransition(streamState, {
+        case "cf_agent_stream_resuming": {
+          const isEarlyToolContinuation = isResumingToolContinuation && !transport.isAwaitingResume();
+          if (data.id && !transport.handleStreamResuming({ id: data.id }) && !activeRequestIds.has(data.id) && !fallbackAckedResumeRequestIds.has(data.id)) {
+            if (isEarlyToolContinuation) {
+              pendingToolContinuation = false;
+              observedToolContinuationRequestId = data.id;
+              if (continuationLaunchTimer !== null) {
+                clearTimeout(continuationLaunchTimer);
+                continuationLaunchTimer = null;
+              }
+            }
+            const resumed = broadcastTransition(streamState, {
               type: "resume-fallback",
               streamId: data.id,
               messageId: createMessageId()
-            }).state;
+            });
+            streamState = resumed.state;
+            isServerStreaming.value = resumed.isStreaming;
             fallbackAckedResumeRequestIds.add(data.id);
             transport.observeServerTurn(data.id);
             isRecovering.value = false;
             socket.send(JSON.stringify({ type: "cf_agent_stream_resume_ack", id: data.id }));
           }
           break;
-        case "cf_agent_stream_resume_none":
-          transport.handleStreamResumeNone();
+        }
+        // 0.23 carries the probe id, so a NONE answering an older probe cannot settle this one.
+        case "cf_agent_stream_resume_none": {
+          const settled = transport.handleStreamResumeNone({ probeId: data.probeId });
+          if (settled && observedToolContinuationRequestId !== null) {
+            resetToolContinuation();
+          }
           break;
+        }
         // Pre-stream window (0.9.0): keep the in-flight resume probe waiting.
         case "cf_agent_stream_pending":
           transport.handleStreamPending();
@@ -798,6 +409,9 @@ function useAgentChat(options) {
             return;
           }
           {
+            if (!data.done && !data.error && transport.activeServerTurnId !== data.id) {
+              transport.observeServerTurn(data.id);
+            }
             const chunkData = data.body?.trim() ? JSON.parse(data.body) : void 0;
             const result = broadcastTransition(streamState, {
               type: "response",
@@ -812,12 +426,16 @@ function useAgentChat(options) {
               currentMessages: data.continuation ? chat.messages : void 0
             });
             streamState = result.state;
+            isServerStreaming.value = result.isStreaming;
             if (result.messagesUpdate) {
               chat.messages = result.messagesUpdate(chat.messages);
             }
-            if (data.done) {
+            if (data.done || data.error) {
               isRecovering.value = false;
               transport.handleServerTurnCompleted(data.id);
+              if (observedToolContinuationRequestId === data.id) {
+                resetToolContinuation();
+              }
             }
           }
           break;
@@ -827,8 +445,18 @@ function useAgentChat(options) {
   });
   socket.addEventListener("open", (event) => {
     connectionError.value = null;
+    connectionState.value = "connected";
     options.onOpen?.(event);
-    if (options.resume !== false && !resumeInFlight && !isResumingToolContinuation && !transport.isAwaitingResume()) {
+    void seedInitialMessages();
+    if (resyncPending) {
+      resyncPending = false;
+      void resyncMessages();
+    }
+    if (transport.retryPendingResume()) {
+      return;
+    }
+    const canReconcileObservedContinuation = observedToolContinuationRequestId !== null;
+    if (options.resume !== false && !resumeInFlight && (!isResumingToolContinuation || canReconcileObservedContinuation) && !transport.isAwaitingResume()) {
       resumeInFlight = true;
       const myGeneration = resumeGeneration;
       void chat.resumeStream().catch(() => {
@@ -843,6 +471,8 @@ function useAgentChat(options) {
   socket.addEventListener("close", (event) => {
     fallbackAckedResumeRequestIds.clear();
     isRecovering.value = false;
+    connectionState.value = "reconnecting";
+    resyncPending = true;
     if (options.onClose && event instanceof CloseEvent) {
       options.onClose(event);
     }
@@ -852,23 +482,73 @@ function useAgentChat(options) {
   });
   onScopeDispose(() => {
     fallbackAckedResumeRequestIds.clear();
+    resetToolContinuation();
     isRecovering.value = false;
     resumeGeneration++;
     resumeInFlight = false;
     socket.close();
   });
+  function setAgent(next) {
+    transport.setAgent(next);
+  }
+  const initialMessagesLoaded = ref(false);
+  let initialMessagesSeedStarted = options.initialMessages !== void 0;
+  initialMessagesLoaded.value = initialMessagesSeedStarted;
+  async function fetchStoredMessages() {
+    try {
+      const target = new URL(socket.url);
+      target.protocol = target.protocol === "wss:" ? "https:" : "http:";
+      target.searchParams.delete("_pk");
+      target.pathname += "/get-messages";
+      const response = await fetch(target.toString(), { credentials: "include" });
+      if (!response.ok) {
+        console.warn(`[agents-vue] get-messages failed: ${response.status} ${response.statusText}`);
+        return null;
+      }
+      const text = await response.text();
+      return text.trim() ? JSON.parse(text) : null;
+    } catch (error) {
+      console.warn("[agents-vue] get-messages errored", error);
+      return null;
+    }
+  }
+  async function seedInitialMessages() {
+    if (initialMessagesSeedStarted) {
+      return;
+    }
+    initialMessagesSeedStarted = true;
+    try {
+      const stored = await fetchStoredMessages();
+      if (stored && chat.messages.length === 0) {
+        chat.messages = stored;
+      }
+    } finally {
+      initialMessagesLoaded.value = true;
+    }
+  }
+  async function resyncMessages() {
+    const stored = await fetchStoredMessages();
+    if (stored) {
+      chat.messages = (options.mergeMessages ?? mergeById)(chat.messages, stored);
+    }
+  }
   return {
     addToolApprovalResponse,
     addToolOutput,
     clearHistory,
     chat,
     socket,
+    setAgent,
     stop,
+    /** Reactive: true once the `get-messages` seed has settled (or was skipped). */
+    initialMessagesLoaded,
     /** Reactive: true while the server is recovering a durable chat turn. */
     isRecovering,
     /** Reactive: terminal WebSocket connection failure, or null. */
-    connectionError
+    connectionError,
+    /** Reactive: whether the socket is up, for the header's "Reconnecting…". */
+    connectionState
   };
 }
 
-export { WebSocketChatTransport, useAgentChat };
+export { useAgentChat };