add

frontend/src/components/shared/FloatingActionWidget.tsx

@@ -34,6 +34,9 @@ import { useNavigation } from "@/context/NavigationContext";
 import { useTaskPolling } from "@/hooks/useTaskPolling";
 import { api } from "@/lib/api";
 
+// Disable jittery animations/motion for the floating widget in HF build
+const DISABLE_FLOATING_WIDGET_JITTER = true;
+
 // Add custom glow animation styles
 const glowStyle = `
   @keyframes magical-glow {
@@ -439,57 +442,16 @@ export function FloatingActionWidget() {
     };
   }, [lastInteraction]);
 
-  // Random movement behavior (when not being dragged)
+  // Random movement behavior (disabled to prevent jitter)
   useEffect(() => {
+    if (DISABLE_FLOATING_WIDGET_JITTER) return;
     if (isDragging || isExpanded) return;
 
     const randomMove = () => {
-      const moveChance = Math.random();
-      if (moveChance < 0.2) {
-        // 20% chance to move
-        const margin = 100;
-        const newX =
-          margin + Math.random() * (window.innerWidth - 300 - margin);
-        const newY =
-          margin + Math.random() * (window.innerHeight - 200 - margin);
-
-        setPosition({ x: newX, y: newY });
-        setIsAnimating(true);
-
-        // Show a playful message during movement
-        const playfulMessages = [
-          {
-            text: "🏃‍♂️ Just stretching my legs!",
-            mood: "excited" as PetMood,
-            emoji: "🏃‍♂️",
-          },
-          {
-            text: "🔄 Change of scenery!",
-            mood: "happy" as PetMood,
-            emoji: "🔄",
-          },
-          {
-            text: "👀 Exploring your workspace!",
-            mood: "curious" as PetMood,
-            emoji: "👀",
-          },
-        ];
-        const randomMsg =
-          playfulMessages[Math.floor(Math.random() * playfulMessages.length)];
-        if (!randomMsg) return;
-        setCurrentMessage(randomMsg);
-        setCurrentMood(randomMsg.mood);
-        setShowTooltip(true);
-
-        setTimeout(() => {
-          setIsAnimating(false);
-          setShowTooltip(false);
-        }, 2000);
-      }
+      /* disabled */
     };
 
-    // Check for random movement every 30-60 seconds
-    const moveInterval = setInterval(randomMove, 45000);
+    const moveInterval = setInterval(randomMove, 60000);
     return () => clearInterval(moveInterval);
   }, [isDragging, isExpanded]);
 
@@ -877,8 +839,8 @@ export function FloatingActionWidget() {
             className={`w-14 h-14 bg-primary hover:bg-primary/90 rounded-full shadow-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-200 hover:scale-110 relative ${
               showTooltip ? "shadow-primary/50 shadow-2xl" : ""
             } ${isDragging ? "scale-110 shadow-2xl opacity-90" : ""} ${
-              isAnimating ? "animate-pulse" : ""
-            } ${isExpanded ? "ring-2 ring-primary/50 ring-offset-2" : ""} ${
+              isExpanded ? "ring-2 ring-primary/50 ring-offset-2" : ""
+            } ${
               isAtChartCenter
                 ? "ring-4 ring-blue-400/50 ring-offset-4 shadow-xl shadow-blue-500/30 scale-110"
                 : ""
@@ -888,9 +850,8 @@ export function FloatingActionWidget() {
             onMouseLeave={handleMouseLeave}
             onClick={toggleExpanded}
             style={{
-              animation: showTooltip
-                ? "magical-glow 2s ease-in-out infinite"
-                : undefined,
+              // Disable glow animation to avoid jitter
+              animation: undefined,
               transition: isDragging ? "none" : "all 0.2s ease",
               transform: `scale(${petScale})`,
             }}
@@ -904,7 +865,7 @@ export function FloatingActionWidget() {
 
           {/* Pet tooltip with mood-based messages - only show when collapsed */}
           {showTooltip && !isExpanded && (
-            <div className="absolute -top-16 -right-4 w-48 bg-black/90 text-white text-xs px-3 py-2 rounded-lg shadow-lg animate-bounce z-10">
+            <div className="absolute -top-16 -right-4 w-48 bg-black/90 text-white text-xs px-3 py-2 rounded-lg shadow-lg z-10">
               <div className="text-center">{currentMessage.text}</div>
               <div className="absolute top-full right-6 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-black/90"></div>
             </div>