@puckeditor/plugin-ai 0.8.3-canary.70014e71 → 0.8.3-canary.8cefba87

package/dist/index.js

@@ -742,7 +742,7 @@ var import_ulid2 = require("ulid");
 // src/components/Chat/index.tsx
 init_react_import();
 
-// ../../node_modules/.pnpm/@ai-sdk+react@3.0.232_react@19.2.8_zod@4.4.3/node_modules/@ai-sdk/react/dist/index.mjs
+// ../../node_modules/.pnpm/@ai-sdk+react@3.0.232_react@19.2.8_zod@3.25.76/node_modules/@ai-sdk/react/dist/index.mjs
 init_react_import();
 var import_ai = require("ai");
 var import_react4 = require("react");
@@ -3420,6 +3420,29 @@ var syncFieldValues = (entry, fields, props) => {
     });
   }
 };
+var claimedHostStyles = /* @__PURE__ */ new WeakMap();
+var claimHostStyles = (el, applyWhiteSpace) => {
+  if (!claimedHostStyles.has(el)) {
+    claimedHostStyles.set(el, {
+      cursor: el.style.cursor,
+      whiteSpace: applyWhiteSpace ? el.style.whiteSpace : null
+    });
+  }
+  applyHostStyles(el);
+};
+var applyHostStyles = (el) => {
+  const claimed = claimedHostStyles.get(el);
+  if (!claimed) return;
+  el.style.cursor = "text";
+  if (claimed.whiteSpace !== null) el.style.whiteSpace = "pre-wrap";
+};
+var releaseHostStyles = (el) => {
+  const claimed = claimedHostStyles.get(el);
+  if (!claimed) return;
+  el.style.cursor = claimed.cursor;
+  if (claimed.whiteSpace !== null) el.style.whiteSpace = claimed.whiteSpace;
+  claimedHostStyles.delete(el);
+};
 var attachInlineEditing = (el, {
   componentId,
   propPath,
@@ -3432,8 +3455,7 @@ var attachInlineEditing = (el, {
   const syncEditable = () => {
     el.contentEditable = hovering || focused ? mode === "richtext" ? "true" : "plaintext-only" : "false";
   };
-  const previousCursor = el.style.cursor;
-  el.style.cursor = "text";
+  claimHostStyles(el, mode !== "richtext");
   syncEditable();
   let lastValidNumberText = el.innerText.replaceAll(/\n/gm, "");
   const handleInput = () => {
@@ -3511,7 +3533,7 @@ var attachInlineEditing = (el, {
     el.removeEventListener("mouseout", handleMouseOut, true);
     el.removeEventListener("focus", handleFocus);
     el.removeEventListener("blur", handleBlur);
-    el.style.cursor = previousCursor;
+    releaseHostStyles(el);
     el.removeAttribute("contenteditable");
     cleanupPortal?.();
   };
@@ -3577,7 +3599,7 @@ var wireArrayItemEditing = ({
     const mode = inlineEditModeFor(field);
     const registration = wiring.get(target);
     if (registration?.propPath === propPath && registration.mode === mode) {
-      target.style.cursor = "text";
+      applyHostStyles(target);
       continue;
     }
     registration?.cleanup();
@@ -3903,7 +3925,7 @@ function createDesignComponentConfig(registration) {
         morphed.current = { el: entryEl, html, attrSig };
         morphHtml(entryEl, html, attrFields);
         for (const el of fieldWiring.current.keys()) {
-          if (el.isConnected) el.style.cursor = "text";
+          if (el.isConnected) applyHostStyles(el);
         }
       }
       syncFieldValues(entryEl, annotations.fields, props);
@@ -4062,9 +4084,11 @@ function getDynamicConfigGlobals(dynamicConfig) {
     ...typeof script === "string" ? { script } : {}
   };
 }
+var INLINE_EDIT_RESET = ":where([data-puck-design] [contenteditable]){overflow-wrap:inherit;line-break:inherit;-webkit-nbsp-mode:inherit}";
 function DesignGlobals({
   styles,
-  script
+  script,
+  isEditing
 }) {
   const scriptRef = (0, import_react25.useRef)(null);
   const hostRef = (0, import_react25.useRef)(null);
@@ -4082,6 +4106,7 @@ function DesignGlobals({
     };
   }, [script]);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    isEditing && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: INLINE_EDIT_RESET }),
     styles && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: styles }),
     script && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: hostRef, style: { display: "none" } })
   ] });
@@ -4094,7 +4119,14 @@ function withDesignGlobals(root) {
   const render = (props) => {
     const { styles, script } = getDynamicConfigGlobals(props._dynamicConfig);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DesignGlobals, { styles, script }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        DesignGlobals,
+        {
+          styles,
+          script,
+          isEditing: props.puck?.isEditing
+        }
+      ),
       userRender ? userRender(props) : props.children
     ] });
   };
@@ -4360,12 +4392,28 @@ var waitForIframeReady = async (root, imageTimeout = 1e4) => {
   await waitForNextPaint(document2);
 };
 
+// src/lib/client-tool-response.ts
+init_react_import();
+async function postClientToolResponse(host, body) {
+  const response = await fetch(`${host.replace(/\/+$/, "")}/tool`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Client tool endpoint returned ${response.status} ${response.statusText}`.trim()
+    );
+  }
+}
+
 // src/components/Chat/index.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var q = (0, import_qler.default)();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
-var PLUGIN_AI_VERSION = true ? "0.8.3-canary.70014e71" : "unknown";
+var CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE = "Unable to verify the page data. Please enable the `/chat/tool` endpoint on the server and try again.";
+var PLUGIN_AI_VERSION = true ? "0.8.3-canary.8cefba87" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${(0, import_ulid.ulid)()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4403,10 +4451,14 @@ function Chat2(props) {
   }, [puckData, getPuck]);
   const [error, setError] = (0, import_react27.useState)();
   const [userError, setUserError] = (0, import_react27.useState)();
+  const clientToolEndpointUnavailableRef = (0, import_react27.useRef)(false);
+  const stopChatRef = (0, import_react27.useRef)(null);
   const [composerAttachments, setComposerAttachments] = (0, import_react27.useState)([]);
   const removedAttachmentClientIdsRef = (0, import_react27.useRef)(/* @__PURE__ */ new Set());
   const uploadControllersRef = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
   const pendingBuildOpsRef = (0, import_react27.useRef)([]);
+  const lastStreamActivityRef = (0, import_react27.useRef)(0);
+  const hiddenSinceRef = (0, import_react27.useRef)(null);
   const [toolStatus, setToolStatus] = (0, import_react27.useState)({});
   const [subagentState, setSubagentState] = (0, import_react27.useState)({});
   const attachmentConfig = (0, import_react27.useMemo)(
@@ -4517,8 +4569,43 @@ function Chat2(props) {
     },
     [debouncedFlushBuildOps]
   );
+  const handleClientToolEndpointUnavailable = (0, import_react27.useCallback)(() => {
+    if (clientToolEndpointUnavailableRef.current) return;
+    clientToolEndpointUnavailableRef.current = true;
+    setError(CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE);
+    console.error(CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE);
+    setToolStatus((current) => {
+      let changed = false;
+      const next = {};
+      for (const [id, toolState] of Object.entries(current)) {
+        if (toolState.loading) {
+          changed = true;
+          next[id] = {
+            ...toolState,
+            loading: false,
+            label: "Verification unavailable"
+          };
+        } else {
+          next[id] = toolState;
+        }
+      }
+      return changed ? next : current;
+    });
+    stopChatRef.current?.();
+  }, []);
+  const sendClientToolResponse = (0, import_react27.useCallback)(
+    async (body) => {
+      try {
+        await postClientToolResponse(host, body);
+      } catch {
+        handleClientToolEndpointUnavailable();
+      }
+    },
+    [handleClientToolEndpointUnavailable, host]
+  );
   const processData = (0, import_react27.useCallback)(
     (dataPart) => {
+      lastStreamActivityRef.current = Date.now();
       switch (dataPart.type) {
         case "data-new-chat-created": {
           localChatId.current = dataPart.data.chatId;
@@ -4549,13 +4636,9 @@ function Chat2(props) {
             debouncedFlushBuildOps.flush();
             q.wait().then(() => {
               const { appState } = getPuck();
-              return fetch(`${host}/tool`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                  id: requestId,
-                  responses: [{ action, output: appState.data }]
-                })
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: appState.data }]
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
@@ -4597,13 +4680,9 @@ function Chat2(props) {
                   `Upload failed with status ${uploadResponse.status}`
                 );
               }
-              return fetch(`${host}/tool`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                  id: requestId,
-                  responses: [{ action, output: { sizeBytes: blob.size } }]
-                })
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: { sizeBytes: blob.size } }]
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
@@ -4650,6 +4729,7 @@ function Chat2(props) {
       getPuck,
       puckDispatch,
       queueBuildOp,
+      sendClientToolResponse,
       uploadScreenshot
     ]
   );
@@ -4719,12 +4799,14 @@ function Chat2(props) {
       if (BENCHMARK) {
         console.timeEnd("chat");
       }
-      setError(e.message);
+      if (!clientToolEndpointUnavailableRef.current) {
+        setError(e.message);
+      }
     },
     onFinish: (options) => {
       debouncedFlushBuildOps.flush();
       q.wait().then(() => {
-        if (!options.isAbort) {
+        if (!options.isAbort || clientToolEndpointUnavailableRef.current) {
           puckDispatch({
             type: "set",
             state: getPuck().appState,
@@ -4739,12 +4821,63 @@ function Chat2(props) {
       });
     }
   });
-  (0, import_react27.useEffect)(
-    () => () => {
+  (0, import_react27.useEffect)(() => {
+    stopChatRef.current = stop;
+    return () => {
+      stopChatRef.current = null;
       stop();
-    },
-    [stop]
-  );
+    };
+  }, [stop]);
+  const statusRef = (0, import_react27.useRef)(status);
+  (0, import_react27.useEffect)(() => {
+    statusRef.current = status;
+  }, [status]);
+  (0, import_react27.useEffect)(() => {
+    lastStreamActivityRef.current = Date.now();
+  }, [messages]);
+  (0, import_react27.useEffect)(() => {
+    const FROZEN_HIDDEN_MS = 3 * 6e4;
+    const RESUME_GRACE_MS = 12e3;
+    const isStreaming = () => statusRef.current === "streaming" || statusRef.current === "submitted";
+    let graceTimer;
+    const recoverIfSevered = () => {
+      if (!isStreaming()) return;
+      if (Date.now() - lastStreamActivityRef.current < RESUME_GRACE_MS) return;
+      stop();
+      setToolStatus((current) => {
+        let changed = false;
+        const next = {};
+        for (const [id, toolState] of Object.entries(current)) {
+          if (toolState.loading) {
+            changed = true;
+            next[id] = { ...toolState, loading: false, label: "Interrupted" };
+          } else {
+            next[id] = toolState;
+          }
+        }
+        return changed ? next : current;
+      });
+    };
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        hiddenSinceRef.current = isStreaming() ? Date.now() : null;
+        return;
+      }
+      const hiddenSince = hiddenSinceRef.current;
+      hiddenSinceRef.current = null;
+      if (graceTimer) clearTimeout(graceTimer);
+      if (hiddenSince === null || Date.now() - hiddenSince < FROZEN_HIDDEN_MS) {
+        return;
+      }
+      lastStreamActivityRef.current = 0;
+      graceTimer = setTimeout(recoverIfSevered, RESUME_GRACE_MS);
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      if (graceTimer) clearTimeout(graceTimer);
+    };
+  }, [stop]);
   const [forcedStatus, setForcedStatus] = (0, import_react27.useState)();
   const resolvedStatus = (0, import_react27.useMemo)(
     () => forcedStatus ?? status,
@@ -4795,6 +4928,8 @@ function Chat2(props) {
     if (!text && readyAttachments.length === 0) {
       return false;
     }
+    clientToolEndpointUnavailableRef.current = false;
+    setError("");
     setUserError("");
     if (chat?.onSubmit) {
       try {
@@ -5034,6 +5169,7 @@ function Chat2(props) {
       ),
       error,
       handleRetry: () => {
+        clientToolEndpointUnavailableRef.current = false;
         setError("");
         regenerate();
       },

package/dist/index.mjs

@@ -729,7 +729,7 @@ import { ulid as ulid2 } from "ulid";
 // src/components/Chat/index.tsx
 init_react_import();
 
-// ../../node_modules/.pnpm/@ai-sdk+react@3.0.232_react@19.2.8_zod@4.4.3/node_modules/@ai-sdk/react/dist/index.mjs
+// ../../node_modules/.pnpm/@ai-sdk+react@3.0.232_react@19.2.8_zod@3.25.76/node_modules/@ai-sdk/react/dist/index.mjs
 init_react_import();
 var import_throttleit = __toESM(require_throttleit(), 1);
 import {
@@ -3452,6 +3452,29 @@ var syncFieldValues = (entry, fields, props) => {
     });
   }
 };
+var claimedHostStyles = /* @__PURE__ */ new WeakMap();
+var claimHostStyles = (el, applyWhiteSpace) => {
+  if (!claimedHostStyles.has(el)) {
+    claimedHostStyles.set(el, {
+      cursor: el.style.cursor,
+      whiteSpace: applyWhiteSpace ? el.style.whiteSpace : null
+    });
+  }
+  applyHostStyles(el);
+};
+var applyHostStyles = (el) => {
+  const claimed = claimedHostStyles.get(el);
+  if (!claimed) return;
+  el.style.cursor = "text";
+  if (claimed.whiteSpace !== null) el.style.whiteSpace = "pre-wrap";
+};
+var releaseHostStyles = (el) => {
+  const claimed = claimedHostStyles.get(el);
+  if (!claimed) return;
+  el.style.cursor = claimed.cursor;
+  if (claimed.whiteSpace !== null) el.style.whiteSpace = claimed.whiteSpace;
+  claimedHostStyles.delete(el);
+};
 var attachInlineEditing = (el, {
   componentId,
   propPath,
@@ -3464,8 +3487,7 @@ var attachInlineEditing = (el, {
   const syncEditable = () => {
     el.contentEditable = hovering || focused ? mode === "richtext" ? "true" : "plaintext-only" : "false";
   };
-  const previousCursor = el.style.cursor;
-  el.style.cursor = "text";
+  claimHostStyles(el, mode !== "richtext");
   syncEditable();
   let lastValidNumberText = el.innerText.replaceAll(/\n/gm, "");
   const handleInput = () => {
@@ -3543,7 +3565,7 @@ var attachInlineEditing = (el, {
     el.removeEventListener("mouseout", handleMouseOut, true);
     el.removeEventListener("focus", handleFocus);
     el.removeEventListener("blur", handleBlur);
-    el.style.cursor = previousCursor;
+    releaseHostStyles(el);
     el.removeAttribute("contenteditable");
     cleanupPortal?.();
   };
@@ -3609,7 +3631,7 @@ var wireArrayItemEditing = ({
     const mode = inlineEditModeFor(field);
     const registration = wiring.get(target);
     if (registration?.propPath === propPath && registration.mode === mode) {
-      target.style.cursor = "text";
+      applyHostStyles(target);
       continue;
     }
     registration?.cleanup();
@@ -3935,7 +3957,7 @@ function createDesignComponentConfig(registration) {
         morphed.current = { el: entryEl, html, attrSig };
         morphHtml(entryEl, html, attrFields);
         for (const el of fieldWiring.current.keys()) {
-          if (el.isConnected) el.style.cursor = "text";
+          if (el.isConnected) applyHostStyles(el);
         }
       }
       syncFieldValues(entryEl, annotations.fields, props);
@@ -4094,9 +4116,11 @@ function getDynamicConfigGlobals(dynamicConfig) {
     ...typeof script === "string" ? { script } : {}
   };
 }
+var INLINE_EDIT_RESET = ":where([data-puck-design] [contenteditable]){overflow-wrap:inherit;line-break:inherit;-webkit-nbsp-mode:inherit}";
 function DesignGlobals({
   styles,
-  script
+  script,
+  isEditing
 }) {
   const scriptRef = useRef12(null);
   const hostRef = useRef12(null);
@@ -4114,6 +4138,7 @@ function DesignGlobals({
     };
   }, [script]);
   return /* @__PURE__ */ jsxs19(Fragment8, { children: [
+    isEditing && /* @__PURE__ */ jsx33("style", { children: INLINE_EDIT_RESET }),
     styles && /* @__PURE__ */ jsx33("style", { children: styles }),
     script && /* @__PURE__ */ jsx33("div", { ref: hostRef, style: { display: "none" } })
   ] });
@@ -4126,7 +4151,14 @@ function withDesignGlobals(root) {
   const render = (props) => {
     const { styles, script } = getDynamicConfigGlobals(props._dynamicConfig);
     return /* @__PURE__ */ jsxs19(Fragment8, { children: [
-      /* @__PURE__ */ jsx33(DesignGlobals, { styles, script }),
+      /* @__PURE__ */ jsx33(
+        DesignGlobals,
+        {
+          styles,
+          script,
+          isEditing: props.puck?.isEditing
+        }
+      ),
       userRender ? userRender(props) : props.children
     ] });
   };
@@ -4392,12 +4424,28 @@ var waitForIframeReady = async (root, imageTimeout = 1e4) => {
   await waitForNextPaint(document2);
 };
 
+// src/lib/client-tool-response.ts
+init_react_import();
+async function postClientToolResponse(host, body) {
+  const response = await fetch(`${host.replace(/\/+$/, "")}/tool`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Client tool endpoint returned ${response.status} ${response.statusText}`.trim()
+    );
+  }
+}
+
 // src/components/Chat/index.tsx
 import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var q = qler();
 var DEFAULT_API_VERSION = "v2";
 var BUILD_OP_DEBOUNCE_MS = 1e3 / 60;
-var PLUGIN_AI_VERSION = true ? "0.8.3-canary.70014e71" : "unknown";
+var CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE = "Unable to verify the page data. Please enable the `/chat/tool` endpoint on the server and try again.";
+var PLUGIN_AI_VERSION = true ? "0.8.3-canary.8cefba87" : "unknown";
 var BENCHMARK = false;
 var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
 var getClassName18 = getClassNameFactory("Chat", styles_module_default);
@@ -4435,10 +4483,14 @@ function Chat2(props) {
   }, [puckData, getPuck]);
   const [error, setError] = useState16();
   const [userError, setUserError] = useState16();
+  const clientToolEndpointUnavailableRef = useRef13(false);
+  const stopChatRef = useRef13(null);
   const [composerAttachments, setComposerAttachments] = useState16([]);
   const removedAttachmentClientIdsRef = useRef13(/* @__PURE__ */ new Set());
   const uploadControllersRef = useRef13(/* @__PURE__ */ new Map());
   const pendingBuildOpsRef = useRef13([]);
+  const lastStreamActivityRef = useRef13(0);
+  const hiddenSinceRef = useRef13(null);
   const [toolStatus, setToolStatus] = useState16({});
   const [subagentState, setSubagentState] = useState16({});
   const attachmentConfig = useMemo6(
@@ -4549,8 +4601,43 @@ function Chat2(props) {
     },
     [debouncedFlushBuildOps]
   );
+  const handleClientToolEndpointUnavailable = useCallback6(() => {
+    if (clientToolEndpointUnavailableRef.current) return;
+    clientToolEndpointUnavailableRef.current = true;
+    setError(CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE);
+    console.error(CLIENT_TOOL_ENDPOINT_UNAVAILABLE_ERROR_MESSAGE);
+    setToolStatus((current) => {
+      let changed = false;
+      const next = {};
+      for (const [id, toolState] of Object.entries(current)) {
+        if (toolState.loading) {
+          changed = true;
+          next[id] = {
+            ...toolState,
+            loading: false,
+            label: "Verification unavailable"
+          };
+        } else {
+          next[id] = toolState;
+        }
+      }
+      return changed ? next : current;
+    });
+    stopChatRef.current?.();
+  }, []);
+  const sendClientToolResponse = useCallback6(
+    async (body) => {
+      try {
+        await postClientToolResponse(host, body);
+      } catch {
+        handleClientToolEndpointUnavailable();
+      }
+    },
+    [handleClientToolEndpointUnavailable, host]
+  );
   const processData = useCallback6(
     (dataPart) => {
+      lastStreamActivityRef.current = Date.now();
       switch (dataPart.type) {
         case "data-new-chat-created": {
           localChatId.current = dataPart.data.chatId;
@@ -4581,13 +4668,9 @@ function Chat2(props) {
             debouncedFlushBuildOps.flush();
             q.wait().then(() => {
               const { appState } = getPuck();
-              return fetch(`${host}/tool`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                  id: requestId,
-                  responses: [{ action, output: appState.data }]
-                })
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: appState.data }]
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
@@ -4629,13 +4712,9 @@ function Chat2(props) {
                   `Upload failed with status ${uploadResponse.status}`
                 );
               }
-              return fetch(`${host}/tool`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                  id: requestId,
-                  responses: [{ action, output: { sizeBytes: blob.size } }]
-                })
+              return sendClientToolResponse({
+                id: requestId,
+                responses: [{ action, output: { sizeBytes: blob.size } }]
               });
             }).catch((e) => {
               console.error("Failed to respond to client request:", e);
@@ -4682,6 +4761,7 @@ function Chat2(props) {
       getPuck,
       puckDispatch,
       queueBuildOp,
+      sendClientToolResponse,
       uploadScreenshot
     ]
   );
@@ -4751,12 +4831,14 @@ function Chat2(props) {
       if (BENCHMARK) {
         console.timeEnd("chat");
       }
-      setError(e.message);
+      if (!clientToolEndpointUnavailableRef.current) {
+        setError(e.message);
+      }
     },
     onFinish: (options) => {
       debouncedFlushBuildOps.flush();
       q.wait().then(() => {
-        if (!options.isAbort) {
+        if (!options.isAbort || clientToolEndpointUnavailableRef.current) {
           puckDispatch({
             type: "set",
             state: getPuck().appState,
@@ -4771,12 +4853,63 @@ function Chat2(props) {
       });
     }
   });
-  useEffect13(
-    () => () => {
+  useEffect13(() => {
+    stopChatRef.current = stop;
+    return () => {
+      stopChatRef.current = null;
       stop();
-    },
-    [stop]
-  );
+    };
+  }, [stop]);
+  const statusRef = useRef13(status);
+  useEffect13(() => {
+    statusRef.current = status;
+  }, [status]);
+  useEffect13(() => {
+    lastStreamActivityRef.current = Date.now();
+  }, [messages]);
+  useEffect13(() => {
+    const FROZEN_HIDDEN_MS = 3 * 6e4;
+    const RESUME_GRACE_MS = 12e3;
+    const isStreaming = () => statusRef.current === "streaming" || statusRef.current === "submitted";
+    let graceTimer;
+    const recoverIfSevered = () => {
+      if (!isStreaming()) return;
+      if (Date.now() - lastStreamActivityRef.current < RESUME_GRACE_MS) return;
+      stop();
+      setToolStatus((current) => {
+        let changed = false;
+        const next = {};
+        for (const [id, toolState] of Object.entries(current)) {
+          if (toolState.loading) {
+            changed = true;
+            next[id] = { ...toolState, loading: false, label: "Interrupted" };
+          } else {
+            next[id] = toolState;
+          }
+        }
+        return changed ? next : current;
+      });
+    };
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        hiddenSinceRef.current = isStreaming() ? Date.now() : null;
+        return;
+      }
+      const hiddenSince = hiddenSinceRef.current;
+      hiddenSinceRef.current = null;
+      if (graceTimer) clearTimeout(graceTimer);
+      if (hiddenSince === null || Date.now() - hiddenSince < FROZEN_HIDDEN_MS) {
+        return;
+      }
+      lastStreamActivityRef.current = 0;
+      graceTimer = setTimeout(recoverIfSevered, RESUME_GRACE_MS);
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      if (graceTimer) clearTimeout(graceTimer);
+    };
+  }, [stop]);
   const [forcedStatus, setForcedStatus] = useState16();
   const resolvedStatus = useMemo6(
     () => forcedStatus ?? status,
@@ -4827,6 +4960,8 @@ function Chat2(props) {
     if (!text && readyAttachments.length === 0) {
       return false;
     }
+    clientToolEndpointUnavailableRef.current = false;
+    setError("");
     setUserError("");
     if (chat?.onSubmit) {
       try {
@@ -5066,6 +5201,7 @@ function Chat2(props) {
       ),
       error,
       handleRetry: () => {
+        clientToolEndpointUnavailableRef.current = false;
         setError("");
         regenerate();
       },

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@puckeditor/plugin-ai",
-  "version": "0.8.3-canary.70014e71",
+  "version": "0.8.3-canary.8cefba87",
   "author": "Chris Villa <chris@puckeditor.com>",
-  "repository": "puckeditor/puck",
+  "repository": {
+    "type": "git",
+    "url": "puckeditor/puck"
+  },
   "bugs": "https://github.com/puckeditor/puck/issues",
   "homepage": "https://puckeditor.com",
   "keywords": [
@@ -49,12 +52,12 @@
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
     "vitest": "^4.1.0",
-    "@puckeditor/ai-types": "0.8.3-canary.70014e71",
-    "@puckeditor/platform-types": "0.8.3-canary.70014e71",
-    "eslint-config-custom": "0.8.3-canary.70014e71",
-    "reducer": "0.8.3-canary.70014e71",
-    "tsconfig": "0.8.3-canary.70014e71",
-    "tsup-config": "0.8.3-canary.70014e71"
+    "@puckeditor/ai-types": "0.8.3-canary.8cefba87",
+    "@puckeditor/platform-types": "0.8.3-canary.8cefba87",
+    "eslint-config-custom": "0.8.3-canary.8cefba87",
+    "reducer": "0.8.3-canary.8cefba87",
+    "tsconfig": "0.8.3-canary.8cefba87",
+    "tsup-config": "0.8.3-canary.8cefba87"
   },
   "peerDependencies": {
     "@puckeditor/core": "^0",