add

frontend/src/components/shared/FloatingActionWidget.tsx

@@ -34,10 +34,6 @@ 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;
-const FLOATING_WIDGET_MINIMAL = true; // fixed bottom-right, no drag/tooltip; click opens splitter
-
 // Add custom glow animation styles
 const glowStyle = `
   @keyframes magical-glow {
@@ -143,7 +139,7 @@ export function FloatingActionWidget() {
 
   const [isExpanded, setIsExpanded] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
-  const [showTooltip, setShowTooltip] = useState(!FLOATING_WIDGET_MINIMAL);
+  const [showTooltip, setShowTooltip] = useState(true);
   const [hasMoved, setHasMoved] = useState(false);
   const [currentMood, setCurrentMood] = useState<PetMood>("curious");
   const [currentMessage, setCurrentMessage] = useState<PetMessage>({
@@ -328,10 +324,10 @@ export function FloatingActionWidget() {
   // Hide tooltip after 6 seconds or when expanded
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (!FLOATING_WIDGET_MINIMAL) setShowTooltip(false);
+      setShowTooltip(false);
     }, 6000);
 
-    if (isExpanded && !FLOATING_WIDGET_MINIMAL) {
+    if (isExpanded) {
       setShowTooltip(false);
     }
 
@@ -443,22 +439,62 @@ export function FloatingActionWidget() {
     };
   }, [lastInteraction]);
 
-  // Random movement behavior (disabled to prevent jitter)
+  // Random movement behavior (when not being dragged)
   useEffect(() => {
-    if (DISABLE_FLOATING_WIDGET_JITTER) return;
     if (isDragging || isExpanded) return;
 
     const randomMove = () => {
-      /* disabled */
+      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);
+      }
     };
 
-    const moveInterval = setInterval(randomMove, 60000);
+    // Check for random movement every 30-60 seconds
+    const moveInterval = setInterval(randomMove, 45000);
     return () => clearInterval(moveInterval);
   }, [isDragging, isExpanded]);
 
   // Handle mouse down for dragging
   const handleMouseDown = (e: React.MouseEvent) => {
-    if (FLOATING_WIDGET_MINIMAL) return; // disable drag in minimal mode
     if (!widgetRef.current) return;
 
     e.preventDefault();
@@ -541,12 +577,6 @@ export function FloatingActionWidget() {
     // Prevent toggle during dragging or if widget was just moved
     if (isDragging || hasMoved) return;
 
-    if (FLOATING_WIDGET_MINIMAL) {
-      setIsSplitterModalOpen(true);
-      setLastInteraction(Date.now());
-      return;
-    }
-
     setIsExpanded(!isExpanded);
     setLastInteraction(Date.now()); // Update interaction time
   };
@@ -830,11 +860,12 @@ export function FloatingActionWidget() {
       {/* Collapsed Widget */}
       <div
         ref={widgetRef}
-        className={`fixed ${FLOATING_WIDGET_MINIMAL ? "cursor-pointer" : isDragging ? "cursor-grabbing select-none" : "cursor-grab"}`}
+        className={`fixed ${
+          isDragging ? "cursor-grabbing select-none" : "cursor-grab"
+        }`}
         style={{
-          ...(FLOATING_WIDGET_MINIMAL
-            ? { right: 20, bottom: 20 }
-            : { left: `${position.x}px`, top: `${position.y}px` }),
+          left: `${position.x}px`,
+          top: `${position.y}px`,
           zIndex: 9999,
           pointerEvents: "auto",
           transition: isDragging ? "none" : "all 0.1s ease",
@@ -843,24 +874,23 @@ export function FloatingActionWidget() {
         {/* Pet Widget - Always visible */}
         <div className="relative">
           <div
-            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 ${
-              FLOATING_WIDGET_MINIMAL ? "" : "hover:scale-110"
-            } relative ${
-              showTooltip && !FLOATING_WIDGET_MINIMAL ? "shadow-primary/50 shadow-2xl" : ""
-            } ${isDragging && !FLOATING_WIDGET_MINIMAL ? "scale-110 shadow-2xl opacity-90" : ""} ${
-              isExpanded && !FLOATING_WIDGET_MINIMAL ? "ring-2 ring-primary/50 ring-offset-2" : ""
-            } ${
-              isAtChartCenter && !FLOATING_WIDGET_MINIMAL
+            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" : ""} ${
+              isAtChartCenter
                 ? "ring-4 ring-blue-400/50 ring-offset-4 shadow-xl shadow-blue-500/30 scale-110"
                 : ""
             }`}
             onMouseDown={handleMouseDown}
-            onMouseEnter={FLOATING_WIDGET_MINIMAL ? undefined : handleMouseEnter}
-            onMouseLeave={FLOATING_WIDGET_MINIMAL ? undefined : handleMouseLeave}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
             onClick={toggleExpanded}
             style={{
-              // Disable glow animation to avoid jitter
-              animation: undefined,
+              animation: showTooltip
+                ? "magical-glow 2s ease-in-out infinite"
+                : undefined,
               transition: isDragging ? "none" : "all 0.2s ease",
               transform: `scale(${petScale})`,
             }}
@@ -873,8 +903,8 @@ export function FloatingActionWidget() {
           </div>
 
           {/* Pet tooltip with mood-based messages - only show when collapsed */}
-          {showTooltip && !isExpanded && !FLOATING_WIDGET_MINIMAL && (
-            <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">
+          {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="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>
@@ -883,7 +913,7 @@ export function FloatingActionWidget() {
       </div>
 
       {/* Expanded Panel - Positioned Separately */}
-      {isExpanded && !FLOATING_WIDGET_MINIMAL && (
+      {isExpanded && (
         <div
           className="fixed"
           style={{