agentation 2.1.0 → 2.2.0

package/dist/index.mjs

@@ -966,6 +966,181 @@ var AnimatedBunny = ({
   }
 );
 
+// src/utils/freeze-animations.ts
+var EXCLUDE_ATTRS = [
+  "data-feedback-toolbar",
+  "data-annotation-popup",
+  "data-annotation-marker"
+];
+var NOT_SELECTORS = EXCLUDE_ATTRS.flatMap((a) => [`:not([${a}])`, `:not([${a}] *)`]).join("");
+var STYLE_ID = "feedback-freeze-styles";
+var STATE_KEY = "__agentation_freeze";
+function getState() {
+  if (typeof window === "undefined") {
+    return {
+      frozen: false,
+      installed: true,
+      // prevent patching on server
+      origSetTimeout: setTimeout,
+      origSetInterval: setInterval,
+      origRAF: (cb) => 0,
+      pausedAnimations: [],
+      frozenTimeoutQueue: [],
+      frozenRAFQueue: []
+    };
+  }
+  const w = window;
+  if (!w[STATE_KEY]) {
+    w[STATE_KEY] = {
+      frozen: false,
+      installed: false,
+      origSetTimeout: null,
+      origSetInterval: null,
+      origRAF: null,
+      pausedAnimations: [],
+      frozenTimeoutQueue: [],
+      frozenRAFQueue: []
+    };
+  }
+  return w[STATE_KEY];
+}
+var _s = getState();
+if (typeof window !== "undefined" && !_s.installed) {
+  _s.origSetTimeout = window.setTimeout.bind(window);
+  _s.origSetInterval = window.setInterval.bind(window);
+  _s.origRAF = window.requestAnimationFrame.bind(window);
+  window.setTimeout = (handler, timeout, ...args) => {
+    if (typeof handler === "string") {
+      return _s.origSetTimeout(handler, timeout);
+    }
+    return _s.origSetTimeout(
+      (...a) => {
+        if (_s.frozen) {
+          _s.frozenTimeoutQueue.push(() => handler(...a));
+        } else {
+          handler(...a);
+        }
+      },
+      timeout,
+      ...args
+    );
+  };
+  window.setInterval = (handler, timeout, ...args) => {
+    if (typeof handler === "string") {
+      return _s.origSetInterval(handler, timeout);
+    }
+    return _s.origSetInterval(
+      (...a) => {
+        if (!_s.frozen) handler(...a);
+      },
+      timeout,
+      ...args
+    );
+  };
+  window.requestAnimationFrame = (callback) => {
+    return _s.origRAF((timestamp) => {
+      if (_s.frozen) {
+        _s.frozenRAFQueue.push(callback);
+      } else {
+        callback(timestamp);
+      }
+    });
+  };
+  _s.installed = true;
+}
+var originalSetTimeout = _s.origSetTimeout;
+var originalSetInterval = _s.origSetInterval;
+function isAgentationElement(el) {
+  if (!el) return false;
+  return EXCLUDE_ATTRS.some((attr) => !!el.closest?.(`[${attr}]`));
+}
+function freeze() {
+  if (typeof document === "undefined") return;
+  if (_s.frozen) return;
+  _s.frozen = true;
+  _s.frozenTimeoutQueue = [];
+  _s.frozenRAFQueue = [];
+  let style = document.getElementById(STYLE_ID);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = STYLE_ID;
+  }
+  style.textContent = `
+    *${NOT_SELECTORS},
+    *${NOT_SELECTORS}::before,
+    *${NOT_SELECTORS}::after {
+      animation-play-state: paused !important;
+      transition: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+  _s.pausedAnimations = [];
+  try {
+    document.getAnimations().forEach((anim) => {
+      if (anim.playState !== "running") return;
+      const target = anim.effect?.target;
+      if (!isAgentationElement(target)) {
+        anim.pause();
+        _s.pausedAnimations.push(anim);
+      }
+    });
+  } catch {
+  }
+  document.querySelectorAll("video").forEach((video) => {
+    if (!video.paused) {
+      video.dataset.wasPaused = "false";
+      video.pause();
+    }
+  });
+}
+function unfreeze() {
+  if (typeof document === "undefined") return;
+  if (!_s.frozen) return;
+  _s.frozen = false;
+  const timeoutQueue = _s.frozenTimeoutQueue;
+  _s.frozenTimeoutQueue = [];
+  for (const cb of timeoutQueue) {
+    _s.origSetTimeout(() => {
+      if (_s.frozen) {
+        _s.frozenTimeoutQueue.push(cb);
+        return;
+      }
+      try {
+        cb();
+      } catch (e) {
+        console.warn("[agentation] Error replaying queued timeout:", e);
+      }
+    }, 0);
+  }
+  const rafQueue = _s.frozenRAFQueue;
+  _s.frozenRAFQueue = [];
+  for (const cb of rafQueue) {
+    _s.origRAF((ts) => {
+      if (_s.frozen) {
+        _s.frozenRAFQueue.push(cb);
+        return;
+      }
+      cb(ts);
+    });
+  }
+  for (const anim of _s.pausedAnimations) {
+    try {
+      anim.play();
+    } catch (e) {
+      console.warn("[agentation] Error resuming animation:", e);
+    }
+  }
+  _s.pausedAnimations = [];
+  document.getElementById(STYLE_ID)?.remove();
+  document.querySelectorAll("video").forEach((video) => {
+    if (video.dataset.wasPaused === "false") {
+      video.play().catch(() => {
+      });
+      delete video.dataset.wasPaused;
+    }
+  });
+}
+
 // src/components/annotation-popup-css/index.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var AnnotationPopupCSS = forwardRef(
@@ -992,19 +1167,21 @@ var AnnotationPopupCSS = forwardRef(
     const [isStylesExpanded, setIsStylesExpanded] = useState(false);
     const textareaRef = useRef(null);
     const popupRef = useRef(null);
+    const cancelTimerRef = useRef(null);
+    const shakeTimerRef = useRef(null);
     useEffect(() => {
       if (isExiting && animState !== "exit") {
         setAnimState("exit");
       }
     }, [isExiting, animState]);
     useEffect(() => {
-      requestAnimationFrame(() => {
+      originalSetTimeout(() => {
         setAnimState("enter");
-      });
-      const enterTimer = setTimeout(() => {
+      }, 0);
+      const enterTimer = originalSetTimeout(() => {
         setAnimState("entered");
       }, 200);
-      const focusTimer = setTimeout(() => {
+      const focusTimer = originalSetTimeout(() => {
         const textarea = textareaRef.current;
         if (textarea) {
           textarea.focus();
@@ -1015,11 +1192,14 @@ var AnnotationPopupCSS = forwardRef(
       return () => {
         clearTimeout(enterTimer);
         clearTimeout(focusTimer);
+        if (cancelTimerRef.current) clearTimeout(cancelTimerRef.current);
+        if (shakeTimerRef.current) clearTimeout(shakeTimerRef.current);
       };
     }, []);
     const shake = useCallback(() => {
+      if (shakeTimerRef.current) clearTimeout(shakeTimerRef.current);
       setIsShaking(true);
-      setTimeout(() => {
+      shakeTimerRef.current = originalSetTimeout(() => {
         setIsShaking(false);
         textareaRef.current?.focus();
       }, 250);
@@ -1029,7 +1209,7 @@ var AnnotationPopupCSS = forwardRef(
     }), [shake]);
     const handleCancel = useCallback(() => {
       setAnimState("exit");
-      setTimeout(() => {
+      cancelTimerRef.current = originalSetTimeout(() => {
         onCancel();
       }, 150);
     }, [onCancel]);
@@ -1076,7 +1256,7 @@ var AnnotationPopupCSS = forwardRef(
                   const wasExpanded = isStylesExpanded;
                   setIsStylesExpanded(!isStylesExpanded);
                   if (wasExpanded) {
-                    setTimeout(() => textareaRef.current?.focus(), 0);
+                    originalSetTimeout(() => textareaRef.current?.focus(), 0);
                   }
                 },
                 type: "button",
@@ -2411,7 +2591,7 @@ function PageFeedbackToolbarCSS({
         exitTimeoutRef.current = null;
       }
       updatePosition();
-      timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = originalSetTimeout(() => {
         setVisible(true);
       }, 500);
     };
@@ -2422,7 +2602,7 @@ function PageFeedbackToolbarCSS({
         timeoutRef.current = null;
       }
       setVisible(false);
-      exitTimeoutRef.current = setTimeout(() => {
+      exitTimeoutRef.current = originalSetTimeout(() => {
         setShouldRender(false);
       }, 150);
     };
@@ -2446,6 +2626,7 @@ function PageFeedbackToolbarCSS({
         /* @__PURE__ */ jsx3(
           "div",
           {
+            "data-feedback-toolbar": true,
             style: {
               position: "fixed",
               top: position.top,
@@ -2515,13 +2696,13 @@ function PageFeedbackToolbarCSS({
     } else {
       setTooltipsHidden(false);
       setSettingsPage("main");
-      const timer = setTimeout(() => setShowSettingsVisible(false), 0);
+      const timer = originalSetTimeout(() => setShowSettingsVisible(false), 0);
       return () => clearTimeout(timer);
     }
   }, [showSettings]);
   useEffect2(() => {
     setIsTransitioning(true);
-    const timer = setTimeout(() => setIsTransitioning(false), 350);
+    const timer = originalSetTimeout(() => setIsTransitioning(false), 350);
     return () => clearTimeout(timer);
   }, [settingsPage]);
   const shouldShowMarkers = isActive && showMarkers;
@@ -2530,7 +2711,7 @@ function PageFeedbackToolbarCSS({
       setMarkersExiting(false);
       setMarkersVisible(true);
       setAnimatedMarkers(/* @__PURE__ */ new Set());
-      const timer = setTimeout(() => {
+      const timer = originalSetTimeout(() => {
         setAnimatedMarkers((prev) => {
           const newSet = new Set(prev);
           annotations.forEach((a) => newSet.add(a.id));
@@ -2540,7 +2721,7 @@ function PageFeedbackToolbarCSS({
       return () => clearTimeout(timer);
     } else if (markersVisible) {
       setMarkersExiting(true);
-      const timer = setTimeout(() => {
+      const timer = originalSetTimeout(() => {
         setMarkersVisible(false);
         setMarkersExiting(false);
       }, 250);
@@ -2555,7 +2736,7 @@ function PageFeedbackToolbarCSS({
     if (!hasPlayedEntranceAnimation) {
       setShowEntranceAnimation(true);
       hasPlayedEntranceAnimation = true;
-      setTimeout(() => setShowEntranceAnimation(false), 750);
+      originalSetTimeout(() => setShowEntranceAnimation(false), 750);
     }
     try {
       const storedSettings = localStorage.getItem("feedback-toolbar-settings");
@@ -2771,7 +2952,7 @@ function PageFeedbackToolbarCSS({
       }
     };
     checkHealth();
-    const interval = setInterval(checkHealth, 1e4);
+    const interval = originalSetInterval(checkHealth, 1e4);
     return () => clearInterval(interval);
   }, [endpoint, mounted]);
   useEffect2(() => {
@@ -2786,7 +2967,7 @@ function PageFeedbackToolbarCSS({
         if (removedStatuses.includes(event.payload?.status)) {
           const id = event.payload.id;
           setExitingMarkers((prev) => new Set(prev).add(id));
-          setTimeout(() => {
+          originalSetTimeout(() => {
             setAnnotations((prev) => prev.filter((a) => a.id !== id));
             setExitingMarkers((prev) => {
               const next = new Set(prev);
@@ -2868,14 +3049,14 @@ function PageFeedbackToolbarCSS({
     if (annotations.length > 0) return;
     const timeoutIds = [];
     timeoutIds.push(
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setIsActive(true);
       }, demoDelay - 200)
     );
     demoAnnotations.forEach((demo, index) => {
       const annotationDelay = demoDelay + index * 300;
       timeoutIds.push(
-        setTimeout(() => {
+        originalSetTimeout(() => {
           const element = document.querySelector(demo.selector);
           if (!element) return;
           const rect = element.getBoundingClientRect();
@@ -2913,7 +3094,7 @@ function PageFeedbackToolbarCSS({
       if (scrollTimeoutRef.current) {
         clearTimeout(scrollTimeoutRef.current);
       }
-      scrollTimeoutRef.current = setTimeout(() => {
+      scrollTimeoutRef.current = originalSetTimeout(() => {
         setIsScrolling(false);
       }, 150);
     };
@@ -2938,35 +3119,12 @@ function PageFeedbackToolbarCSS({
   }, [annotations, pathname, mounted, currentSessionId]);
   const freezeAnimations = useCallback2(() => {
     if (isFrozen) return;
-    const style = document.createElement("style");
-    style.id = "feedback-freeze-styles";
-    style.textContent = `
-      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *),
-      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *)::before,
-      *:not([data-feedback-toolbar]):not([data-feedback-toolbar] *):not([data-annotation-popup]):not([data-annotation-popup] *):not([data-annotation-marker]):not([data-annotation-marker] *)::after {
-        animation-play-state: paused !important;
-        transition: none !important;
-      }
-    `;
-    document.head.appendChild(style);
-    document.querySelectorAll("video").forEach((video) => {
-      if (!video.paused) {
-        video.dataset.wasPaused = "false";
-        video.pause();
-      }
-    });
+    freeze();
     setIsFrozen(true);
   }, [isFrozen]);
   const unfreezeAnimations = useCallback2(() => {
     if (!isFrozen) return;
-    const style = document.getElementById("feedback-freeze-styles");
-    if (style) style.remove();
-    document.querySelectorAll("video").forEach((video) => {
-      if (video.dataset.wasPaused === "false") {
-        video.play();
-        delete video.dataset.wasPaused;
-      }
-    });
+    unfreeze();
     setIsFrozen(false);
   }, [isFrozen]);
   const toggleFreeze = useCallback2(() => {
@@ -3075,6 +3233,11 @@ function PageFeedbackToolbarCSS({
       }
     }
   }, [isActive, isFrozen, unfreezeAnimations]);
+  useEffect2(() => {
+    return () => {
+      unfreeze();
+    };
+  }, []);
   useEffect2(() => {
     if (!isActive) return;
     const style = document.createElement("style");
@@ -3660,16 +3823,16 @@ function PageFeedbackToolbarCSS({
       };
       setAnnotations((prev) => [...prev, newAnnotation]);
       recentlyAddedIdRef.current = newAnnotation.id;
-      setTimeout(() => {
+      originalSetTimeout(() => {
         recentlyAddedIdRef.current = null;
       }, 300);
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setAnimatedMarkers((prev) => new Set(prev).add(newAnnotation.id));
       }, 250);
       onAnnotationAdd?.(newAnnotation);
       fireWebhook("annotation.add", { annotation: newAnnotation });
       setPendingExiting(true);
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setPendingAnnotation(null);
         setPendingExiting(false);
       }, 150);
@@ -3704,7 +3867,7 @@ function PageFeedbackToolbarCSS({
   );
   const cancelAnnotation = useCallback2(() => {
     setPendingExiting(true);
-    setTimeout(() => {
+    originalSetTimeout(() => {
       setPendingAnnotation(null);
       setPendingExiting(false);
     }, 150);
@@ -3715,7 +3878,7 @@ function PageFeedbackToolbarCSS({
       const deletedAnnotation = annotations[deletedIndex];
       if (editingAnnotation?.id === id) {
         setEditExiting(true);
-        setTimeout(() => {
+        originalSetTimeout(() => {
           setEditingAnnotation(null);
           setEditingTargetElement(null);
           setEditingTargetElements([]);
@@ -3736,7 +3899,7 @@ function PageFeedbackToolbarCSS({
           );
         });
       }
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setAnnotations((prev) => prev.filter((a) => a.id !== id));
         setExitingMarkers((prev) => {
           const next = new Set(prev);
@@ -3746,7 +3909,7 @@ function PageFeedbackToolbarCSS({
         setDeletingMarkerId(null);
         if (deletedIndex < annotations.length - 1) {
           setRenumberFrom(deletedIndex);
-          setTimeout(() => setRenumberFrom(null), 200);
+          originalSetTimeout(() => setRenumberFrom(null), 200);
         }
       }, 150);
     },
@@ -3859,7 +4022,7 @@ function PageFeedbackToolbarCSS({
         });
       }
       setEditExiting(true);
-      setTimeout(() => {
+      originalSetTimeout(() => {
         setEditingAnnotation(null);
         setEditingTargetElement(null);
         setEditingTargetElements([]);
@@ -3870,7 +4033,7 @@ function PageFeedbackToolbarCSS({
   );
   const cancelEditAnnotation = useCallback2(() => {
     setEditExiting(true);
-    setTimeout(() => {
+    originalSetTimeout(() => {
       setEditingAnnotation(null);
       setEditingTargetElement(null);
       setEditingTargetElements([]);
@@ -3897,13 +4060,13 @@ function PageFeedbackToolbarCSS({
     setIsClearing(true);
     setCleared(true);
     const totalAnimationTime = count * 30 + 200;
-    setTimeout(() => {
+    originalSetTimeout(() => {
       setAnnotations([]);
       setAnimatedMarkers(/* @__PURE__ */ new Set());
       localStorage.removeItem(getStorageKey(pathname));
       setIsClearing(false);
     }, totalAnimationTime);
-    setTimeout(() => setCleared(false), 1500);
+    originalSetTimeout(() => setCleared(false), 1500);
   }, [pathname, annotations, onAnnotationsClear, fireWebhook, endpoint]);
   const copyOutput = useCallback2(async () => {
     const displayUrl = typeof window !== "undefined" ? window.location.pathname + window.location.search + window.location.hash : pathname;
@@ -3922,9 +4085,9 @@ function PageFeedbackToolbarCSS({
     }
     onCopy?.(output);
     setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
+    originalSetTimeout(() => setCopied(false), 2e3);
     if (settings.autoClearAfterCopy) {
-      setTimeout(() => clearAll(), 500);
+      originalSetTimeout(() => clearAll(), 500);
     }
   }, [
     annotations,
@@ -3949,12 +4112,12 @@ function PageFeedbackToolbarCSS({
       onSubmit(output, annotations);
     }
     setSendState("sending");
-    await new Promise((resolve) => setTimeout(resolve, 150));
+    await new Promise((resolve) => originalSetTimeout(resolve, 150));
     const success = await fireWebhook("submit", { output, annotations }, true);
     setSendState(success ? "sent" : "failed");
-    setTimeout(() => setSendState("idle"), 2500);
+    originalSetTimeout(() => setSendState("idle"), 2500);
     if (success && settings.autoClearAfterCopy) {
-      setTimeout(() => clearAll(), 500);
+      originalSetTimeout(() => clearAll(), 500);
     }
   }, [
     onSubmit,
@@ -4429,7 +4592,7 @@ function PageFeedbackToolbarCSS({
                                   ] }),
                                   /* @__PURE__ */ jsxs3("span", { className: styles_module_default2.settingsVersion, children: [
                                     "v",
-                                    "2.1.0"
+                                    "2.2.0"
                                   ] }),
                                   /* @__PURE__ */ jsx3(
                                     "button",
@@ -4711,21 +4874,12 @@ function PageFeedbackToolbarCSS({
                                         ]
                                       }
                                     ),
-                                    endpoint ? /* @__PURE__ */ jsx3(
+                                    endpoint && /* @__PURE__ */ jsx3(
                                       "div",
                                       {
                                         className: `${styles_module_default2.mcpStatusDot} ${styles_module_default2[connectionStatus]}`,
                                         title: connectionStatus === "connected" ? "Connected" : connectionStatus === "connecting" ? "Connecting..." : "Disconnected"
                                       }
-                                    ) : /* @__PURE__ */ jsx3(
-                                      "a",
-                                      {
-                                        href: "https://agentation.dev/install#mcp-server",
-                                        target: "_blank",
-                                        rel: "noopener noreferrer",
-                                        className: styles_module_default2.settingsLink,
-                                        children: "Learn more \u2192"
-                                      }
                                     )
                                   ] }),
                                   /* @__PURE__ */ jsxs3(