@tanstack/ai-preact 0.11.1 → 0.12.1

package/dist/esm/use-mcp-app-bridge.js

@@ -1,26 +1,49 @@
-import { useRef, useMemo } from "preact/hooks";
 import { createMcpAppBridge } from "@tanstack/ai-client";
+import { useMemo, useRef } from "preact/hooks";
+//#region src/use-mcp-app-bridge.ts
+/**
+* Preact wrapper around `createMcpAppBridge` that returns a **stable** bridge for
+* the given `threadId`/`callEndpoint`, while always invoking the latest
+* `chat.sendMessage` and `onLink` (kept in refs). This avoids both recreating
+* the bridge on every render and the stale-closure / `exhaustive-deps` dance
+* you'd otherwise write by hand:
+*
+* ```tsx
+* const { sendMessage } = useChat({ threadId, connection })
+* const bridge = useMcpAppBridge({
+*   threadId,
+*   callEndpoint: '/api/mcp-apps-call',
+*   chat: { sendMessage: async (content) => void sendMessage(content) },
+*   onLink: (url) => window.open(url, '_blank', 'noopener,noreferrer'),
+* })
+* // pass `bridge` to <MCPAppResource bridge={bridge} … />
+* ```
+*
+* The bridge is recreated only when `threadId`, `callEndpoint`, `fetchImpl`, or
+* the *presence* of `onLink` changes — passing a new inline `onLink`/`sendMessage`
+* each render does not churn it.
+*/
 function useMcpAppBridge(options) {
-  const { threadId, callEndpoint, chat, fetchImpl, onLink } = options;
-  const chatRef = useRef(chat);
-  chatRef.current = chat;
-  const onLinkRef = useRef(onLink);
-  onLinkRef.current = onLink;
-  const hasOnLink = onLink != null;
-  return useMemo(
-    () => createMcpAppBridge({
-      threadId,
-      callEndpoint,
-      fetchImpl,
-      chat: {
-        sendMessage: (content, body) => chatRef.current.sendMessage(content, body)
-      },
-      onLink: hasOnLink ? (url) => onLinkRef.current?.(url) : void 0
-    }),
-    [threadId, callEndpoint, fetchImpl, hasOnLink]
-  );
+	const { threadId, callEndpoint, chat, fetchImpl, onLink } = options;
+	const chatRef = useRef(chat);
+	chatRef.current = chat;
+	const onLinkRef = useRef(onLink);
+	onLinkRef.current = onLink;
+	const hasOnLink = onLink != null;
+	return useMemo(() => createMcpAppBridge({
+		threadId,
+		callEndpoint,
+		fetchImpl,
+		chat: { sendMessage: (content, body) => chatRef.current.sendMessage(content, body) },
+		onLink: hasOnLink ? (url) => onLinkRef.current?.(url) : void 0
+	}), [
+		threadId,
+		callEndpoint,
+		fetchImpl,
+		hasOnLink
+	]);
 }
-export {
-  useMcpAppBridge
-};
-//# sourceMappingURL=use-mcp-app-bridge.js.map
+//#endregion
+export { useMcpAppBridge };
+
+//# sourceMappingURL=use-mcp-app-bridge.js.map

package/dist/esm/use-mcp-app-bridge.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-mcp-app-bridge.js","sources":["../../src/use-mcp-app-bridge.ts"],"sourcesContent":["import { useMemo, useRef } from 'preact/hooks'\nimport { createMcpAppBridge } from '@tanstack/ai-client'\nimport type {\n  CreateMcpAppBridgeOptions,\n  McpAppBridge,\n} from '@tanstack/ai-client'\n\nexport type UseMcpAppBridgeOptions = CreateMcpAppBridgeOptions\n\n/**\n * Preact wrapper around `createMcpAppBridge` that returns a **stable** bridge for\n * the given `threadId`/`callEndpoint`, while always invoking the latest\n * `chat.sendMessage` and `onLink` (kept in refs). This avoids both recreating\n * the bridge on every render and the stale-closure / `exhaustive-deps` dance\n * you'd otherwise write by hand:\n *\n * ```tsx\n * const { sendMessage } = useChat({ threadId, connection })\n * const bridge = useMcpAppBridge({\n *   threadId,\n *   callEndpoint: '/api/mcp-apps-call',\n *   chat: { sendMessage: async (content) => void sendMessage(content) },\n *   onLink: (url) => window.open(url, '_blank', 'noopener,noreferrer'),\n * })\n * // pass `bridge` to <MCPAppResource bridge={bridge} … />\n * ```\n *\n * The bridge is recreated only when `threadId`, `callEndpoint`, `fetchImpl`, or\n * the *presence* of `onLink` changes — passing a new inline `onLink`/`sendMessage`\n * each render does not churn it.\n */\nexport function useMcpAppBridge(options: UseMcpAppBridgeOptions): McpAppBridge {\n  const { threadId, callEndpoint, chat, fetchImpl, onLink } = options\n\n  // Latest-value refs so the bridge identity stays stable but its callbacks are\n  // never stale (the bridge calls `.current` at invocation time, not creation).\n  const chatRef = useRef(chat)\n  chatRef.current = chat\n  const onLinkRef = useRef(onLink)\n  onLinkRef.current = onLink\n\n  // Whether a link handler was supplied governs the bridge's link behavior\n  // (forward vs. display-only warn), so it's part of the bridge's identity.\n  const hasOnLink = onLink != null\n\n  return useMemo(\n    () =>\n      createMcpAppBridge({\n        threadId,\n        callEndpoint,\n        fetchImpl,\n        chat: {\n          sendMessage: (content, body) =>\n            chatRef.current.sendMessage(content, body),\n        },\n        onLink: hasOnLink ? (url) => onLinkRef.current?.(url) : undefined,\n      }),\n    [threadId, callEndpoint, fetchImpl, hasOnLink],\n  )\n}\n"],"names":[],"mappings":";;AA+BO,SAAS,gBAAgB,SAA+C;AAC7E,QAAM,EAAE,UAAU,cAAc,MAAM,WAAW,WAAW;AAI5D,QAAM,UAAU,OAAO,IAAI;AAC3B,UAAQ,UAAU;AAClB,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,UAAU;AAIpB,QAAM,YAAY,UAAU;AAE5B,SAAO;AAAA,IACL,MACE,mBAAmB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,QACJ,aAAa,CAAC,SAAS,SACrB,QAAQ,QAAQ,YAAY,SAAS,IAAI;AAAA,MAAA;AAAA,MAE7C,QAAQ,YAAY,CAAC,QAAQ,UAAU,UAAU,GAAG,IAAI;AAAA,IAAA,CACzD;AAAA,IACH,CAAC,UAAU,cAAc,WAAW,SAAS;AAAA,EAAA;AAEjD;"}
+{"version":3,"file":"use-mcp-app-bridge.js","names":[],"sources":["../../src/use-mcp-app-bridge.ts"],"sourcesContent":["import { useMemo, useRef } from 'preact/hooks'\nimport { createMcpAppBridge } from '@tanstack/ai-client'\nimport type {\n  CreateMcpAppBridgeOptions,\n  McpAppBridge,\n} from '@tanstack/ai-client'\n\nexport type UseMcpAppBridgeOptions = CreateMcpAppBridgeOptions\n\n/**\n * Preact wrapper around `createMcpAppBridge` that returns a **stable** bridge for\n * the given `threadId`/`callEndpoint`, while always invoking the latest\n * `chat.sendMessage` and `onLink` (kept in refs). This avoids both recreating\n * the bridge on every render and the stale-closure / `exhaustive-deps` dance\n * you'd otherwise write by hand:\n *\n * ```tsx\n * const { sendMessage } = useChat({ threadId, connection })\n * const bridge = useMcpAppBridge({\n *   threadId,\n *   callEndpoint: '/api/mcp-apps-call',\n *   chat: { sendMessage: async (content) => void sendMessage(content) },\n *   onLink: (url) => window.open(url, '_blank', 'noopener,noreferrer'),\n * })\n * // pass `bridge` to <MCPAppResource bridge={bridge} … />\n * ```\n *\n * The bridge is recreated only when `threadId`, `callEndpoint`, `fetchImpl`, or\n * the *presence* of `onLink` changes — passing a new inline `onLink`/`sendMessage`\n * each render does not churn it.\n */\nexport function useMcpAppBridge(options: UseMcpAppBridgeOptions): McpAppBridge {\n  const { threadId, callEndpoint, chat, fetchImpl, onLink } = options\n\n  // Latest-value refs so the bridge identity stays stable but its callbacks are\n  // never stale (the bridge calls `.current` at invocation time, not creation).\n  const chatRef = useRef(chat)\n  chatRef.current = chat\n  const onLinkRef = useRef(onLink)\n  onLinkRef.current = onLink\n\n  // Whether a link handler was supplied governs the bridge's link behavior\n  // (forward vs. display-only warn), so it's part of the bridge's identity.\n  const hasOnLink = onLink != null\n\n  return useMemo(\n    () =>\n      createMcpAppBridge({\n        threadId,\n        callEndpoint,\n        fetchImpl,\n        chat: {\n          sendMessage: (content, body) =>\n            chatRef.current.sendMessage(content, body),\n        },\n        onLink: hasOnLink ? (url) => onLinkRef.current?.(url) : undefined,\n      }),\n    [threadId, callEndpoint, fetchImpl, hasOnLink],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,gBAAgB,SAA+C;CAC7E,MAAM,EAAE,UAAU,cAAc,MAAM,WAAW,WAAW;CAI5D,MAAM,UAAU,OAAO,IAAI;CAC3B,QAAQ,UAAU;CAClB,MAAM,YAAY,OAAO,MAAM;CAC/B,UAAU,UAAU;CAIpB,MAAM,YAAY,UAAU;CAE5B,OAAO,cAEH,mBAAmB;EACjB;EACA;EACA;EACA,MAAM,EACJ,cAAc,SAAS,SACrB,QAAQ,QAAQ,YAAY,SAAS,IAAI,EAC7C;EACA,QAAQ,aAAa,QAAQ,UAAU,UAAU,GAAG,IAAI,KAAA;CAC1D,CAAC,GACH;EAAC;EAAU;EAAc;EAAW;CAAS,CAC/C;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-preact",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "description": "Preact hooks for TanStack AI streaming chat and typed messages.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "tool-calling"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.22.1"
+    "@tanstack/ai-client": "0.23.1"
   },
   "devDependencies": {
     "@mcp-ui/client": "^7.1.1",
@@ -54,13 +54,13 @@
     "@vitest/coverage-v8": "4.0.14",
     "jsdom": "^27.2.0",
     "preact": "^10.26.9",
-    "vite": "^7.3.3",
-    "@tanstack/ai": "0.42.0"
+    "vite": "^8.1.4",
+    "@tanstack/ai": "0.43.1"
   },
   "peerDependencies": {
     "@mcp-ui/client": "^7",
     "preact": ">=10.11.0",
-    "@tanstack/ai": "^0.42.0"
+    "@tanstack/ai": "^0.43.1"
   },
   "peerDependenciesMeta": {
     "@mcp-ui/client": {
@@ -69,8 +69,8 @@
   },
   "scripts": {
     "clean": "premove ./build ./dist",
-    "lint:fix": "eslint ./src --fix",
-    "test:eslint": "eslint ./src",
+    "lint:fix": "oxlint src --type-aware --fix",
+    "test:oxlint": "oxlint src --type-aware",
     "test:lib": "vitest run",
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",

package/src/index.ts

@@ -16,6 +16,16 @@ export type {
 
 export {
   fetchServerSentEvents,
+  localStoragePersistence,
+  sessionStoragePersistence,
+  indexedDBPersistence,
+  StorageUnavailableError,
+  type ChatClientPersistence,
+  type ChatPersistedState,
+  type ChatPersistenceOption,
+  type ChatStorageAdapter,
+  type WebStoragePersistenceOptions,
+  type IndexedDBPersistenceOptions,
   fetchHttpStream,
   xhrServerSentEvents,
   xhrHttpStream,

package/src/types.ts

@@ -1,9 +1,18 @@
-import type { AnyClientTool, ModelMessage, SchemaInput } from '@tanstack/ai'
+import type {
+  AnyClientTool,
+  ModelMessage,
+  RunAgentResumeItem,
+  SchemaInput,
+} from '@tanstack/ai'
 import type {
   AIDevtoolsDisplayOptions,
+  BoundInterrupts,
   ChatClientOptions,
   ChatClientState,
+  ChatInterrupt,
+  ChatInterruptState,
   ChatRequestBody,
+  ChatResumeState,
   ClientContextOptionFromTools,
   ConnectionStatus,
   DistributedOmit,
@@ -60,8 +69,14 @@ export type UseChatOptions<
   | 'onConnectionStatusChange'
   | 'onSessionGeneratingChange'
   | 'onQueueChange'
+  | 'onResumeStateChange'
+  | 'onRunIdChange'
   | 'context'
   | 'devtools'
+  // `id` is not a hook option: the hook's identity is its `threadId`, which is
+  // also the persistence key. Persist across reloads by passing a stable
+  // `threadId`; there is no separate id to set.
+  | 'id'
 > & {
   live?: boolean
   /** Display options for TanStack AI Devtools. */
@@ -126,6 +141,39 @@ export interface UseChatReturn<
     approved: boolean
   }) => Promise<void>
 
+  /**
+   * The id of the run this client has in flight — one it started or rejoined —
+   * or `null` when there is none (including while a run sits paused on an
+   * interrupt, waiting on approval).
+   *
+   * A run is one turn of the conversation, so this changes from turn to turn. A
+   * whole tool loop stays inside one run, while resuming after an interrupt
+   * continues the turn under a new id — so one user message can produce several
+   * run ids. Use it to talk to your own server about that run (cancel it, poll
+   * it, correlate a log line).
+   */
+  runId: string | null
+  interrupts: BoundInterrupts<TTools>
+  /** @deprecated Use `interrupts`. */
+  pendingInterrupts: BoundInterrupts<TTools>
+  interruptErrors: ChatInterruptState<TTools>['interruptErrors']
+  resuming: boolean
+  resolveInterrupts: {
+    (approved: boolean): void
+    (resolver: (interrupt: ChatInterrupt<TTools>) => undefined): void
+  }
+  cancelInterrupts: () => void
+  retryInterrupts: () => void
+  resumeInterruptsUnsafe: (
+    resume: Array<RunAgentResumeItem>,
+    state?: ChatResumeState,
+  ) => Promise<boolean>
+  /** @deprecated Use bound interrupt methods or `resumeInterruptsUnsafe`. */
+  resumeInterrupts: (
+    resume: Array<RunAgentResumeItem>,
+    state?: ChatResumeState,
+  ) => Promise<boolean>
+
   /**
    * Reload the last assistant message
    */

package/src/use-chat.ts

@@ -10,12 +10,19 @@ import {
 } from 'preact/hooks'
 import type {
   ChatClientState,
+  ChatInterrupt,
+  ChatInterruptState,
+  ChatResumeState,
   ConnectionStatus,
   InferredClientContext,
   QueuedMessage,
   SendMessageOptions,
 } from '@tanstack/ai-client'
-import type { AnyClientTool, ModelMessage } from '@tanstack/ai'
+import type {
+  AnyClientTool,
+  ModelMessage,
+  RunAgentResumeItem,
+} from '@tanstack/ai'
 
 import type {
   MultimodalContent,
@@ -24,12 +31,19 @@ import type {
   UseChatReturn,
 } from './types'
 
+const EMPTY_INTERRUPTS = Object.freeze([])
+const EMPTY_INTERRUPT_ERRORS = Object.freeze([])
+
 export function useChat<
   const TTools extends ReadonlyArray<AnyClientTool> = any,
   TContext = InferredClientContext<TTools>,
 >(options: UseChatOptions<TTools, TContext>): UseChatReturn<TTools> {
+  // The hook's identity is its `threadId` — also the persistence key, so a
+  // reload with the same `threadId` restores the same conversation. `hookId` is
+  // only a stable fallback for client-recreation keying when no `threadId` is
+  // given (an ephemeral chat), never a persistence key.
   const hookId = useId()
-  const clientId = options.id || hookId
+  const clientId = options.threadId ?? hookId
 
   const [messages, setMessages] = useState<Array<UIMessage<TTools>>>(
     options.initialMessages || [],
@@ -42,6 +56,15 @@ export function useChat<
     useState<ConnectionStatus>('disconnected')
   const [sessionGenerating, setSessionGenerating] = useState(false)
   const [queue, setQueue] = useState<Array<QueuedMessage>>([])
+  const [runId, setRunId] = useState<string | null>(null)
+  const [interruptState, setInterruptState] = useState<
+    ChatInterruptState<TTools>
+  >(() => ({
+    interrupts: EMPTY_INTERRUPTS,
+    pendingInterrupts: EMPTY_INTERRUPTS,
+    interruptErrors: EMPTY_INTERRUPT_ERRORS,
+    resuming: false,
+  }))
 
   // Track current messages in a ref to preserve them when client is recreated
   const messagesRef = useRef<Array<UIMessage<TTools>>>(
@@ -52,10 +75,20 @@ export function useChat<
   const cleanupInvalidationRef = useRef<ReturnType<typeof setTimeout> | null>(
     null,
   )
+  const cleanupDisposalRef = useRef<{
+    client: ChatClient
+    timeout: ReturnType<typeof setTimeout>
+  } | null>(null)
   const optionsRef = useRef<UseChatOptions<TTools, TContext>>(options)
 
   optionsRef.current = options
 
+  const syncResumeState = useCallback((target: ChatClient | null) => {
+    if (!target) return
+    setRunId(target.getCurrentRunId())
+    setInterruptState(target.getInterruptState())
+  }, [])
+
   useEffect(() => {
     messagesRef.current = messages
   }, [messages])
@@ -73,10 +106,20 @@ export function useChat<
       ? { connection: initialOptions.connection }
       : { fetcher: initialOptions.fetcher }
 
+    const instanceHolder: {
+      current: ChatClient<TTools, TContext> | undefined
+    } = { current: undefined }
+    const getActiveInstance = () => {
+      const currentInstance = instanceHolder.current
+      if (!currentInstance || activeClientRef.current !== currentInstance) {
+        return undefined
+      }
+      return currentInstance
+    }
+    const pendingInitializationErrors: Array<Error> = []
     const instance = new ChatClient<TTools, TContext>({
       devtoolsBridgeFactory: createChatDevtoolsBridge,
       ...transport,
-      id: clientId,
       initialMessages: messagesToUse,
       ...(initialOptions.body !== undefined && { body: initialOptions.body }),
       ...(initialOptions.threadId !== undefined && {
@@ -88,6 +131,9 @@ export function useChat<
       ...(initialOptions.persistence !== undefined && {
         persistence: initialOptions.persistence,
       }),
+      ...(initialOptions.initialResumeSnapshot !== undefined && {
+        initialResumeSnapshot: initialOptions.initialResumeSnapshot,
+      }),
       ...(initialOptions.context !== undefined && {
         context: initialOptions.context,
       }),
@@ -101,23 +147,28 @@ export function useChat<
       // Capturing the function reference directly would freeze it to whatever
       // the parent passed on the first render.
       onResponse: (response) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         return optionsRef.current.onResponse?.(response)
       },
       onChunk: (chunk) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         optionsRef.current.onChunk?.(chunk)
       },
       onFinish: (message) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         optionsRef.current.onFinish?.(message)
       },
       onError: (err) => {
-        if (activeClientRef.current !== instance) return
+        const currentInstance = instanceHolder.current
+        if (!currentInstance) {
+          pendingInitializationErrors.push(err)
+          return
+        }
+        if (activeClientRef.current !== currentInstance) return
         optionsRef.current.onError?.(err)
       },
       onCustomEvent: (eventType, data, context) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         optionsRef.current.onCustomEvent?.(eventType, data, context)
       },
       ...(initialOptions.tools !== undefined && {
@@ -127,44 +178,68 @@ export function useChat<
         streamProcessor: options.streamProcessor,
       }),
       onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         setMessages(newMessages)
       },
       onLoadingChange: (newIsLoading: boolean) => {
-        if (activeClientRef.current !== instance) return
+        const currentInstance = getActiveInstance()
+        if (!currentInstance) return
         setIsLoading(newIsLoading)
+        syncResumeState(currentInstance)
       },
       onStatusChange: (newStatus: ChatClientState) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         setStatus(newStatus)
       },
       onErrorChange: (newError: Error | undefined) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         setError(newError)
       },
       onSubscriptionChange: (nextIsSubscribed: boolean) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         setIsSubscribed(nextIsSubscribed)
       },
       onConnectionStatusChange: (nextStatus: ConnectionStatus) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         setConnectionStatus(nextStatus)
       },
       onSessionGeneratingChange: (isGenerating: boolean) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         setSessionGenerating(isGenerating)
       },
       ...(optionsRef.current.queue !== undefined && {
         queue: optionsRef.current.queue,
       }),
       onQueueChange: (nextQueue: Array<QueuedMessage>) => {
-        if (activeClientRef.current !== instance) return
+        if (!getActiveInstance()) return
         setQueue(nextQueue)
       },
+      onRunIdChange: (nextRunId) => {
+        if (!getActiveInstance()) return
+        setRunId(nextRunId)
+      },
+      onResumeStateChange: (_nextResumeState, nextPendingInterrupts) => {
+        if (!getActiveInstance()) return
+        setInterruptState((current) => ({
+          ...current,
+          interrupts: nextPendingInterrupts,
+          pendingInterrupts: nextPendingInterrupts,
+        }))
+      },
+      onInterruptStateChange: (nextInterruptState) => {
+        if (!getActiveInstance()) return
+        setInterruptState(nextInterruptState)
+        optionsRef.current.onInterruptStateChange?.(nextInterruptState)
+      },
     })
+    instanceHolder.current = instance
     activeClientRef.current = instance
+    for (const initializationError of pendingInitializationErrors) {
+      if (activeClientRef.current !== instance) break
+      optionsRef.current.onError?.(initializationError)
+    }
     return instance
-  }, [clientId])
+  }, [clientId, syncResumeState])
 
   useEffect(() => {
     const clientMessages = client.getMessages()
@@ -203,17 +278,41 @@ export function useChat<
     }
   }, [client, options.live])
 
+  // ONLY THE VIEW ON SCREEN HOLDS A STREAM. See the same effect in
+  // `@tanstack/ai-react`. A page can own many chats and a browser allows only ~6
+  // connections per origin, so one long-lived stream per chat starves everything
+  // else once a handful of views have been open. `attach` is idempotent and
+  // `detach` keeps the transcript and the resume pointer, so a remount picks the
+  // run straight back up from the durable log.
+  //
+  // Immediate, unlike the deferred disposal below, which a remount can skip —
+  // correct for disposal, useless for a connection.
+  useEffect(() => {
+    client.attach()
+    return () => {
+      client.detach()
+    }
+  }, [client])
+
   // Cleanup on unmount: stop any in-flight requests
   // Note: We only cleanup when client changes or component unmounts.
   // DO NOT include isLoading in dependencies - that would cause the cleanup
   // to run when isLoading changes, aborting continuation requests.
   useEffect(() => {
+    if (cleanupDisposalRef.current?.client === client) {
+      clearTimeout(cleanupDisposalRef.current.timeout)
+      cleanupDisposalRef.current = null
+    }
     if (cleanupInvalidationRef.current) {
       clearTimeout(cleanupInvalidationRef.current)
       cleanupInvalidationRef.current = null
     }
     activeClientRef.current = client
     client.mountDevtools()
+    // Delivery-durability resume is transparent: the resumable SSE connection
+    // adapter reattaches via the browser's native Last-Event-ID on reconnect.
+    // We only seed interrupt (state) resume from the client here.
+    syncResumeState(client)
 
     return () => {
       cleanupInvalidationRef.current = setTimeout(() => {
@@ -231,9 +330,18 @@ export function useChat<
       } else {
         client.stop()
       }
-      client.dispose()
+      const disposal = {
+        client,
+        timeout: setTimeout(() => {
+          client.dispose()
+          if (cleanupDisposalRef.current === disposal) {
+            cleanupDisposalRef.current = null
+          }
+        }, 0),
+      }
+      cleanupDisposalRef.current = disposal
     }
-  }, [client])
+  }, [client, syncResumeState])
 
   // All callback options are read through optionsRef at call time, so fresh
   // closures from each render are picked up without recreating the client.
@@ -242,28 +350,40 @@ export function useChat<
       content: string | MultimodalContent,
       sendOptions?: SendMessageOptions,
     ) => {
-      await client.sendMessage(content, undefined, sendOptions)
+      try {
+        await client.sendMessage(content, undefined, sendOptions)
+      } finally {
+        syncResumeState(client)
+      }
     },
-    [client],
+    [client, syncResumeState],
   )
 
   const cancelQueued = useCallback(
     (id: string) => {
       client.cancelQueued(id)
     },
-    [client],
+    [client, syncResumeState],
   )
 
   const append = useCallback(
     async (message: ModelMessage | UIMessage) => {
-      await client.append(message)
+      try {
+        await client.append(message)
+      } finally {
+        syncResumeState(client)
+      }
     },
-    [client],
+    [client, syncResumeState],
   )
 
   const reload = useCallback(async () => {
-    await client.reload()
-  }, [client])
+    try {
+      await client.reload()
+    } finally {
+      syncResumeState(client)
+    }
+  }, [client, syncResumeState])
 
   const stop = useCallback(() => {
     client.stop()
@@ -271,7 +391,8 @@ export function useChat<
 
   const clear = useCallback(() => {
     client.clear()
-  }, [client])
+    syncResumeState(client)
+  }, [client, syncResumeState])
 
   const setMessagesManually = useCallback(
     (newMessages: Array<UIMessage<TTools>>) => {
@@ -296,7 +417,44 @@ export function useChat<
   const addToolApprovalResponse = useCallback(
     async (response: { id: string; approved: boolean }) => {
       await client.addToolApprovalResponse(response)
+      syncResumeState(client)
     },
+    [client, syncResumeState],
+  )
+
+  const resumeInterrupts = useCallback(
+    async (resumeItems: Array<RunAgentResumeItem>, state?: ChatResumeState) => {
+      const result = await client.resumeInterrupts(resumeItems, state)
+      syncResumeState(client)
+      return result
+    },
+    [client, syncResumeState],
+  )
+
+  const resolveInterrupts = useCallback(
+    (
+      resolution: boolean | ((interrupt: ChatInterrupt<TTools>) => undefined),
+    ) => {
+      if (typeof resolution === 'boolean') {
+        client.resolveInterrupts(resolution)
+      } else {
+        client.resolveInterrupts(resolution)
+      }
+    },
+    [client],
+  )
+
+  const cancelInterrupts = useCallback(() => {
+    client.cancelInterrupts()
+  }, [client])
+
+  const retryInterrupts = useCallback(() => {
+    client.retryInterrupts()
+  }, [client])
+
+  const resumeInterruptsUnsafe = useCallback(
+    (resumeItems: Array<RunAgentResumeItem>, state?: ChatResumeState) =>
+      client.resumeInterruptsUnsafe(resumeItems, state),
     [client],
   )
 
@@ -320,5 +478,15 @@ export function useChat<
     addToolApprovalResponse,
     queue,
     cancelQueued,
+    runId,
+    interrupts: interruptState.interrupts,
+    pendingInterrupts: interruptState.pendingInterrupts,
+    interruptErrors: interruptState.interruptErrors,
+    resuming: interruptState.resuming,
+    resolveInterrupts,
+    cancelInterrupts,
+    retryInterrupts,
+    resumeInterruptsUnsafe,
+    resumeInterrupts,
   }
 }

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}