agents-vue 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,6 +1,41 @@
 # Changelog
 
 
+## v0.2.1
+
+[compare changes](https://github.com/ymansurozer/agents-vue/compare/v0.2.0...v0.2.1)
+
+### 🩹 Fixes
+
+- Serialize reconnect resume re-probes (parity with agents 0.17.2, #1837) ([#1837](https://github.com/ymansurozer/agents-vue/issues/1837))
+
+### ❤️ Contributors
+
+- Ymansurozer <ymansurozer@gmail.com>
+
+## v0.2.0
+
+[compare changes](https://github.com/ymansurozer/agents-vue/compare/v0.1.0...v0.2.0)
+
+Brings the Vue port to parity with `@cloudflare/ai-chat` 0.9.x on resume/recovery.
+
+### 🚀 Enhancements
+
+- Resume dedupe: fallback-ACK a resume offer at most once per socket, preventing duplicated assistant text on a double resume replay (upstream 0.8.5)
+- `isRecovering` reactive flag, driven by the `cf_agent_chat_recovering` frame and distinct from streaming (upstream 0.8.0)
+- `cancelOnClientAbort` option: generic client aborts are local-only by default; explicit `stop()` always cancels the server turn — including resume-fallback-observed and transport-resumed turns (upstream 0.7.0)
+- `cf_agent_stream_pending` handling: extend the resume probe 5s → 60s during the server's pre-stream window (upstream 0.9.0)
+- `connectionError` surfaced from the `AgentClient` on terminal WebSocket close (upstream 0.9.0)
+
+### 🏡 Chore
+
+- Bump `agents` to 0.17.0 and raise the peer floor to `>=0.17.0` (first version exporting `connectionError` / `onConnectionError`)
+
+### ❤️ Contributors
+
+- Ymansurozer <ymansurozer@gmail.com>
+
+
 ## v0.1.0
 
 

package/README.md

@@ -6,7 +6,7 @@ Vue 3 composable for [Cloudflare Agents](https://github.com/cloudflare/agents)
 
 ## Status
 
-v0.1 — covers the surface needed for a working chat UI: streaming responses, client-side tools, tool approvals, stream resumption, broadcast handling. Deeper upstream features (the `useAgent` connection hook, initial-message HTTP cache, `isServerStreaming` flag) are on the roadmap.
+Covers the surface needed for a working chat UI — streaming responses, client-side tools, tool approvals, stream resumption, broadcast handling — at parity with upstream `@cloudflare/ai-chat` 0.9.x on resume/recovery: resume dedupe, `isRecovering`, `cancelOnClientAbort`, pre-stream `cf_agent_stream_pending`, and `connectionError`. Deeper upstream features (the `useAgent` connection hook, initial-message HTTP cache, `isServerStreaming` / `isStreaming` flags) are on the roadmap.
 
 ## Install
 
@@ -21,7 +21,7 @@ Peer dependencies (must also be installed):
 | `vue` | `^3.3.4` |
 | `@ai-sdk/vue` | `^3.0.0` |
 | `ai` | `^6.0.0` |
-| `agents` | `>=0.11.0 <1.0.0` |
+| `agents` | `>=0.17.0 <1.0.0` |
 
 ## Usage
 
@@ -78,7 +78,9 @@ Returns:
 | `addToolOutput` | `function` | Submit a tool result. Sends `cf_agent_tool_result` and triggers continuation if enabled. |
 | `addToolApprovalResponse` | `function` | Resolve a human-in-the-loop tool approval. Sends `cf_agent_tool_approval` and triggers continuation. |
 | `clearHistory` | `function` | Clear local state and broadcast `cf_agent_chat_clear` to the server. |
-| `stop` | `function` | Abort the active stream and any pending tool continuation. |
+| `stop` | `function` | Abort the active stream and any pending tool continuation. Always cancels the server turn (explicit cancel). |
+| `isRecovering` | `Ref<boolean>` | Reactive — `true` while the server is recovering a durable chat turn (distinct from streaming, so a UI can show "recovering…"). Driven by `cf_agent_chat_recovering`. |
+| `connectionError` | `Ref<AgentConnectionError \| null>` | Reactive — the terminal WebSocket connection failure, or `null`. Cleared on reconnect. |
 
 ### Options
 
@@ -91,6 +93,7 @@ Returns:
 | `onToolCall` | `({ toolCall, addToolOutput }) => void \| Promise<void>` | — | Custom tool-call handler. Overrides per-tool `execute`. |
 | `autoContinueAfterToolResult` | `boolean` | `true` | Server resumes the stream after a tool result. |
 | `resume` | `boolean` | `true` | Resume in-flight streams on socket reconnect. |
+| `cancelOnClientAbort` | `boolean` | `false` | When `true`, a generic client-side abort cancels the server turn; when `false` (default) such aborts are local-only and the server turn keeps running and can resume. Explicit `stop()` always cancels. |
 | `onOpen` | `(event: Event) => void` | — | WebSocket open. |
 | `onClose` | `(event: CloseEvent) => void` | — | WebSocket close. |
 | `onSocketError` | `(event: Event) => void` | — | Connection-level error. |
@@ -157,6 +160,12 @@ const transport = new WebSocketChatTransport({
 | Partial-hydration replay rebuild | ✅ |
 | Broadcast handling (multi-tab) | ✅ |
 | Tool approval continuation merge across broadcasts | ✅ |
+| Resume dedupe (fallback-ACK at most once per socket) | ✅ |
+| `isRecovering` durable-recovery hint (`cf_agent_chat_recovering`) | ✅ |
+| `cancelOnClientAbort` (local-only abort, default) | ✅ |
+| Pre-stream `cf_agent_stream_pending` (extended resume probe) | ✅ |
+| `connectionError` (terminal WebSocket close) | ✅ |
+| Reconnect resume serialization (in-flight gate, `agents` 0.17.2 / #1837) | ✅ |
 | `useAgent` connection hook | 🚧 roadmap |
 | Initial-message HTTP cache | 🚧 roadmap |
 | `isServerStreaming` / `isStreaming` flags | 🚧 roadmap |
@@ -166,7 +175,7 @@ const transport = new WebSocketChatTransport({
 ```bash
 pnpm install
 pnpm exec playwright install chromium
-pnpm test       # 59 tests in chromium (vitest-browser-vue)
+pnpm test       # 80 tests in chromium (vitest-browser-vue)
 pnpm typecheck
 pnpm lint
 pnpm build

package/dist/index.d.mts

@@ -1,7 +1,8 @@
+import * as vue from 'vue';
 import * as ai from 'ai';
 import { UIMessage, Tool, JSONSchema7, ChatTransport, ChatRequestOptions, UIMessageChunk } from 'ai';
 import { Chat } from '@ai-sdk/vue';
-import { AgentClientOptions, AgentClient } from 'agents/client';
+import { AgentClientOptions, AgentClient, AgentConnectionError } from 'agents/client';
 
 interface AgentClientTool<Input = unknown, Output = unknown> {
     description?: Tool["description"];
@@ -37,6 +38,13 @@ interface UseAgentChatOptions<AgentT = unknown, ChatMessage extends UIMessage =
     autoContinueAfterToolResult?: boolean;
     /** When true (default), the chat resumes any in-flight stream on socket open. */
     resume?: boolean;
+    /**
+     * When true, a generic client-side abort (e.g. the AI SDK aborting the request on
+     * teardown) cancels the server turn. When false (default), such aborts are
+     * local-only — the server turn keeps running and can be resumed. Explicit `stop()`
+     * always cancels the server turn regardless. Matches upstream 0.7.0.
+     */
+    cancelOnClientAbort?: boolean;
     /** Called when the underlying WebSocket opens (initial connect or reconnect). */
     onOpen?: (event: Event) => void;
     /** Called when the underlying WebSocket closes. */
@@ -70,6 +78,10 @@ declare function useAgentChat<AgentT = unknown, ChatMessage extends UIMessage =
     chat: Chat<ChatMessage>;
     socket: AgentClient<AgentT, State>;
     stop: () => Promise<void>;
+    /** Reactive: true while the server is recovering a durable chat turn. */
+    isRecovering: vue.Ref<boolean, boolean>;
+    /** Reactive: terminal WebSocket connection failure, or null. */
+    connectionError: vue.Ref<AgentConnectionError | null, AgentConnectionError | null>;
 };
 
 /** Minimal interface a WebSocket must satisfy for the transport. */
@@ -89,6 +101,15 @@ interface WebSocketChatTransportOptions {
         trigger: "submit-message" | "regenerate-message";
         messageId?: string;
     }) => Record<string, unknown> | Promise<Record<string, unknown>>;
+    /**
+     * Whether a generic client-side abort (e.g. the AI SDK aborting the request
+     * signal, or the stream being cancelled on teardown) should cancel the
+     * *server* turn. Local-only by default — the server turn keeps running and can
+     * be resumed/observed. Explicit `stop()` always cancels via
+     * `cancelActiveServerTurn()`, regardless of this flag. Matches upstream 0.7.0.
+     * @default false
+     */
+    cancelOnClientAbort?: boolean;
 }
 /**
  * ChatTransport that communicates with a Cloudflare Agent over WebSocket.
@@ -105,11 +126,30 @@ declare class WebSocketChatTransport implements ChatTransport<UIMessage> {
     _resumeNoneResolver: (() => void) | null;
     private _expectToolContinuation;
     private _abortToolContinuation;
+    private cancelOnClientAbort;
+    private _activeServerTurnId;
+    private _cancelAttachedStream;
+    private _onStreamPending;
     constructor(options: WebSocketChatTransportOptions);
     /** Mark that the next reconnectToStream() should attach to a server-initiated tool continuation. */
     expectToolContinuation(): void;
     /** Abort the active client-side tool continuation stream. */
     abortActiveToolContinuation(): boolean;
+    /** Send a server-turn cancel frame for a request id (best-effort). */
+    private sendCancelFrame;
+    private setActiveServerTurn;
+    private clearActiveServerTurn;
+    /** Register a server-observed (broadcast / resume-fallback) turn as the cancellable one. */
+    observeServerTurn(requestId: string): void;
+    /** Mark a server turn complete so it is no longer the cancellable turn. */
+    handleServerTurnCompleted(requestId: string): void;
+    /**
+     * Explicitly cancel the active server turn (and any tool continuation). Unlike a
+     * generic client abort, this always signals the server. Drives `useAgentChat.stop()`.
+     */
+    cancelActiveServerTurn(): boolean;
+    /** Called by the composable on cf_agent_stream_pending — extend the in-flight resume probe. */
+    handleStreamPending(): boolean;
     /** True when the transport is waiting for a resume handshake. */
     isAwaitingResume(): boolean;
     /** Called by the composable when it receives cf_agent_stream_resuming. */

package/dist/index.d.ts

@@ -1,7 +1,8 @@
+import * as vue from 'vue';
 import * as ai from 'ai';
 import { UIMessage, Tool, JSONSchema7, ChatTransport, ChatRequestOptions, UIMessageChunk } from 'ai';
 import { Chat } from '@ai-sdk/vue';
-import { AgentClientOptions, AgentClient } from 'agents/client';
+import { AgentClientOptions, AgentClient, AgentConnectionError } from 'agents/client';
 
 interface AgentClientTool<Input = unknown, Output = unknown> {
     description?: Tool["description"];
@@ -37,6 +38,13 @@ interface UseAgentChatOptions<AgentT = unknown, ChatMessage extends UIMessage =
     autoContinueAfterToolResult?: boolean;
     /** When true (default), the chat resumes any in-flight stream on socket open. */
     resume?: boolean;
+    /**
+     * When true, a generic client-side abort (e.g. the AI SDK aborting the request on
+     * teardown) cancels the server turn. When false (default), such aborts are
+     * local-only — the server turn keeps running and can be resumed. Explicit `stop()`
+     * always cancels the server turn regardless. Matches upstream 0.7.0.
+     */
+    cancelOnClientAbort?: boolean;
     /** Called when the underlying WebSocket opens (initial connect or reconnect). */
     onOpen?: (event: Event) => void;
     /** Called when the underlying WebSocket closes. */
@@ -70,6 +78,10 @@ declare function useAgentChat<AgentT = unknown, ChatMessage extends UIMessage =
     chat: Chat<ChatMessage>;
     socket: AgentClient<AgentT, State>;
     stop: () => Promise<void>;
+    /** Reactive: true while the server is recovering a durable chat turn. */
+    isRecovering: vue.Ref<boolean, boolean>;
+    /** Reactive: terminal WebSocket connection failure, or null. */
+    connectionError: vue.Ref<AgentConnectionError | null, AgentConnectionError | null>;
 };
 
 /** Minimal interface a WebSocket must satisfy for the transport. */
@@ -89,6 +101,15 @@ interface WebSocketChatTransportOptions {
         trigger: "submit-message" | "regenerate-message";
         messageId?: string;
     }) => Record<string, unknown> | Promise<Record<string, unknown>>;
+    /**
+     * Whether a generic client-side abort (e.g. the AI SDK aborting the request
+     * signal, or the stream being cancelled on teardown) should cancel the
+     * *server* turn. Local-only by default — the server turn keeps running and can
+     * be resumed/observed. Explicit `stop()` always cancels via
+     * `cancelActiveServerTurn()`, regardless of this flag. Matches upstream 0.7.0.
+     * @default false
+     */
+    cancelOnClientAbort?: boolean;
 }
 /**
  * ChatTransport that communicates with a Cloudflare Agent over WebSocket.
@@ -105,11 +126,30 @@ declare class WebSocketChatTransport implements ChatTransport<UIMessage> {
     _resumeNoneResolver: (() => void) | null;
     private _expectToolContinuation;
     private _abortToolContinuation;
+    private cancelOnClientAbort;
+    private _activeServerTurnId;
+    private _cancelAttachedStream;
+    private _onStreamPending;
     constructor(options: WebSocketChatTransportOptions);
     /** Mark that the next reconnectToStream() should attach to a server-initiated tool continuation. */
     expectToolContinuation(): void;
     /** Abort the active client-side tool continuation stream. */
     abortActiveToolContinuation(): boolean;
+    /** Send a server-turn cancel frame for a request id (best-effort). */
+    private sendCancelFrame;
+    private setActiveServerTurn;
+    private clearActiveServerTurn;
+    /** Register a server-observed (broadcast / resume-fallback) turn as the cancellable one. */
+    observeServerTurn(requestId: string): void;
+    /** Mark a server turn complete so it is no longer the cancellable turn. */
+    handleServerTurnCompleted(requestId: string): void;
+    /**
+     * Explicitly cancel the active server turn (and any tool continuation). Unlike a
+     * generic client abort, this always signals the server. Drives `useAgentChat.stop()`.
+     */
+    cancelActiveServerTurn(): boolean;
+    /** Called by the composable on cf_agent_stream_pending — extend the in-flight resume probe. */
+    handleStreamPending(): boolean;
     /** True when the transport is waiting for a resume handshake. */
     isAwaitingResume(): boolean;
     /** Called by the composable when it receives cf_agent_stream_resuming. */

package/dist/index.mjs

@@ -1,11 +1,13 @@
 import { Chat } from '@ai-sdk/vue';
 import { broadcastTransition } from 'agents/chat';
 import { AgentClient } from 'agents/client';
-import { onScopeDispose } from 'vue';
+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;
@@ -16,10 +18,20 @@ class WebSocketChatTransport {
   // 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() {
@@ -29,6 +41,55 @@ class WebSocketChatTransport {
   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;
@@ -73,11 +134,14 @@ class WebSocketChatTransport {
     this.activeRequestIds.add(requestId);
     const socket = this.socket;
     const activeIds = this.activeRequestIds;
-    const finish = (action, keepId = false) => {
+    const finish = (action, keepId = false, clearServerTurn = true) => {
       if (completed) {
         return;
       }
       completed = true;
+      if (clearServerTurn) {
+        this.clearActiveServerTurn(requestId);
+      }
       try {
         action();
       } catch {
@@ -89,16 +153,27 @@ class WebSocketChatTransport {
     };
     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;
       }
-      try {
-        socket.send(JSON.stringify({ id: requestId, type: "cf_agent_chat_request_cancel" }));
-      } catch {
+      if (this.cancelOnClientAbort) {
+        if (requestSent) {
+          this.sendCancelFrame(requestId);
+        }
+        finish(() => streamController.error(abortError), requestSent);
+      } else {
+        finish(() => streamController.error(abortError), false, !requestSent);
       }
-      finish(() => streamController.error(abortError), true);
     };
     const stream = new ReadableStream({
       start(controller) {
@@ -135,19 +210,23 @@ class WebSocketChatTransport {
         onAbort();
       }
     });
+    this.setActiveServerTurn(requestId, cancelActiveRequest);
     if (options.abortSignal) {
       options.abortSignal.addEventListener("abort", onAbort, { once: true });
       if (options.abortSignal.aborted) {
         onAbort();
       }
     }
-    socket.send(
-      JSON.stringify({
-        id: requestId,
-        init: { method: "POST", body: bodyPayload },
-        type: "cf_agent_use_chat_request"
-      })
-    );
+    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) {
@@ -158,6 +237,7 @@ class WebSocketChatTransport {
     const activeIds = this.activeRequestIds;
     return new Promise((resolve) => {
       let resolved = false;
+      let timeout;
       const done = (value) => {
         if (resolved) {
           return;
@@ -165,6 +245,7 @@ class WebSocketChatTransport {
         resolved = true;
         this._resumeResolver = null;
         this._resumeNoneResolver = null;
+        this._onStreamPending = null;
         clearTimeout(timeout);
         resolve(value);
       };
@@ -175,11 +256,18 @@ class WebSocketChatTransport {
         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 {
       }
-      const timeout = setTimeout(() => done(null), 5e3);
+      timeout = setTimeout(() => done(null), RESUME_PROBE_TIMEOUT_MS);
     });
   }
   /**
@@ -217,6 +305,7 @@ class WebSocketChatTransport {
       }
       completed = true;
       this._abortToolContinuation = null;
+      this._onStreamPending = null;
       clearHandshakeResolvers(resumeResolver, resumeNoneResolver);
       try {
         action();
@@ -256,12 +345,26 @@ class WebSocketChatTransport {
           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;
-        const timeout = setTimeout(() => finish(() => controller.close(), onResume, onResumeNone), 5e3);
+        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) => {
@@ -294,9 +397,15 @@ class WebSocketChatTransport {
           finish(() => controller.close());
         }
       },
-      cancel() {
-        finish(() => {
-        });
+      cancel: () => {
+        if (requestId && this.cancelOnClientAbort) {
+          this.sendCancelFrame(requestId);
+          finish(() => {
+          }, onResumeRef, onResumeNoneRef, true);
+        } else {
+          finish(() => {
+          }, onResumeRef, onResumeNoneRef);
+        }
       }
     });
   }
@@ -305,21 +414,30 @@ class WebSocketChatTransport {
     const socket = this.socket;
     const activeIds = this.activeRequestIds;
     const chunkAbort = new AbortController();
+    const abortError = new Error("Aborted");
+    abortError.name = "AbortError";
     let completed = false;
-    const finish = (action) => {
+    let streamController;
+    const finish = (action, keepId = false, clearServerTurn = true) => {
       if (completed) {
         return;
       }
       completed = true;
+      if (clearServerTurn) {
+        this.clearActiveServerTurn(requestId);
+      }
       try {
         action();
       } catch {
       }
-      activeIds.delete(requestId);
+      if (!keepId) {
+        activeIds.delete(requestId);
+      }
       chunkAbort.abort();
     };
-    return new ReadableStream({
+    const stream = new ReadableStream({
       start(controller) {
+        streamController = controller;
         const onMessage = (event) => {
           try {
             const data = JSON.parse(String(event.data));
@@ -348,11 +466,25 @@ class WebSocketChatTransport {
         };
         socket.addEventListener("message", onMessage, { signal: chunkAbort.signal });
       },
-      cancel() {
-        finish(() => {
-        });
+      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;
   }
 }
 
@@ -375,6 +507,7 @@ function parseProtocolMessage(data) {
     replay: typeof parsed.replay === "boolean" ? parsed.replay : void 0,
     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,
     message,
     messages
   };
@@ -479,12 +612,24 @@ function createMessageId() {
 function useAgentChat(options) {
   const autoContinueAfterToolResult = options.autoContinueAfterToolResult ?? true;
   const activeRequestIds = /* @__PURE__ */ new Set();
+  const fallbackAckedResumeRequestIds = /* @__PURE__ */ new Set();
   let streamState = { status: "idle" };
   let isResumingToolContinuation = false;
-  const socket = new AgentClient(options.client);
+  let resumeInFlight = false;
+  let resumeGeneration = 0;
+  const isRecovering = ref(false);
+  const connectionError = ref(null);
+  const socket = new AgentClient({
+    ...options.client,
+    onConnectionError: (error) => {
+      connectionError.value = error;
+      options.client.onConnectionError?.(error);
+    }
+  });
   const transport = new WebSocketChatTransport({
     socket,
     activeRequestIds,
+    cancelOnClientAbort: options.cancelOnClientAbort ?? false,
     prepareBody: async () => {
       const rawBody = options.body;
       const extraBody = typeof rawBody === "function" ? await rawBody() : rawBody ?? {};
@@ -531,6 +676,7 @@ function useAgentChat(options) {
   }
   async function stop() {
     try {
+      transport.cancelActiveServerTurn();
       await chat.stop();
     } finally {
       transport.abortActiveToolContinuation();
@@ -539,6 +685,7 @@ function useAgentChat(options) {
   function clearHistory() {
     void stop();
     isResumingToolContinuation = false;
+    isRecovering.value = false;
     streamState = broadcastTransition(streamState, { type: "clear" }).state;
     chat.messages = [];
     socket.send(JSON.stringify({ type: "cf_agent_chat_clear" }));
@@ -619,21 +766,33 @@ function useAgentChat(options) {
         case "cf_agent_chat_clear":
           streamState = broadcastTransition(streamState, { type: "clear" }).state;
           chat.messages = [];
+          isRecovering.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)) {
+          if (data.id && !transport.handleStreamResuming({ type: data.type, id: data.id }) && !activeRequestIds.has(data.id) && !fallbackAckedResumeRequestIds.has(data.id)) {
             streamState = broadcastTransition(streamState, {
               type: "resume-fallback",
               streamId: data.id,
               messageId: createMessageId()
             }).state;
+            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();
           break;
+        // Pre-stream window (0.9.0): keep the in-flight resume probe waiting.
+        case "cf_agent_stream_pending":
+          transport.handleStreamPending();
+          break;
+        // Durable chat-recovery progress hint (0.8.0). Cleared on terminal/stream below.
+        case "cf_agent_chat_recovering":
+          isRecovering.value = Boolean(data.recovering);
+          break;
         case "cf_agent_use_chat_response":
           if (!data.id || activeRequestIds.has(data.id)) {
             return;
@@ -656,6 +815,10 @@ function useAgentChat(options) {
             if (result.messagesUpdate) {
               chat.messages = result.messagesUpdate(chat.messages);
             }
+            if (data.done) {
+              isRecovering.value = false;
+              transport.handleServerTurnCompleted(data.id);
+            }
           }
           break;
       }
@@ -663,12 +826,23 @@ function useAgentChat(options) {
     }
   });
   socket.addEventListener("open", (event) => {
+    connectionError.value = null;
     options.onOpen?.(event);
-    if (options.resume !== false) {
-      void chat.resumeStream();
+    if (options.resume !== false && !resumeInFlight && !isResumingToolContinuation && !transport.isAwaitingResume()) {
+      resumeInFlight = true;
+      const myGeneration = resumeGeneration;
+      void chat.resumeStream().catch(() => {
+      }).finally(() => {
+        if (resumeGeneration !== myGeneration) {
+          return;
+        }
+        resumeInFlight = false;
+      });
     }
   });
   socket.addEventListener("close", (event) => {
+    fallbackAckedResumeRequestIds.clear();
+    isRecovering.value = false;
     if (options.onClose && event instanceof CloseEvent) {
       options.onClose(event);
     }
@@ -677,6 +851,10 @@ function useAgentChat(options) {
     options.onSocketError?.(event);
   });
   onScopeDispose(() => {
+    fallbackAckedResumeRequestIds.clear();
+    isRecovering.value = false;
+    resumeGeneration++;
+    resumeInFlight = false;
     socket.close();
   });
   return {
@@ -685,7 +863,11 @@ function useAgentChat(options) {
     clearHistory,
     chat,
     socket,
-    stop
+    stop,
+    /** Reactive: true while the server is recovering a durable chat turn. */
+    isRecovering,
+    /** Reactive: terminal WebSocket connection failure, or null. */
+    connectionError
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agents-vue",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Vue 3 composable for Cloudflare Agents — a port of @cloudflare/ai-chat/react's useAgentChat.",
   "keywords": [
     "vue",
@@ -38,9 +38,19 @@
     "README.md",
     "CHANGELOG.md"
   ],
+  "scripts": {
+    "dev": "unbuild --watch",
+    "build": "unbuild",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "vue-tsc --noEmit",
+    "release": "pnpm run lint && pnpm run typecheck && pnpm run test && pnpm run build && changelogen --release && git push --follow-tags"
+  },
   "peerDependencies": {
     "@ai-sdk/vue": "^3.0.0",
-    "agents": ">=0.11.0 <1.0.0",
+    "agents": ">=0.17.0 <1.0.0",
     "ai": "^6.0.0",
     "vue": "^3.3.4"
   },
@@ -50,7 +60,7 @@
     "@types/node": "^22.0.0",
     "@vitest/browser": "^4.1.5",
     "@vitest/browser-playwright": "^4.1.5",
-    "agents": "^0.11.4",
+    "agents": "^0.17.0",
     "ai": "^6.0.0",
     "changelogen": "^0.6.2",
     "eslint": "^9.0.0",
@@ -69,14 +79,5 @@
   "engines": {
     "node": ">=20"
   },
-  "scripts": {
-    "dev": "unbuild --watch",
-    "build": "unbuild",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit",
-    "release": "pnpm run lint && pnpm run typecheck && pnpm run test && pnpm run build && changelogen --release && git push --follow-tags"
-  }
-}
+  "packageManager": "pnpm@9.0.0"
+}