Jon/sky 5838 launch the power restart feature for all users with a cooldown (#3133)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -8,7 +8,7 @@ import type {
   WorkflowRunStatusApiResponse,
 } from "@/api/types";
 import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
+import { AnimatedWave } from "@/components/AnimatedWave";
 import { toast } from "@/components/ui/use-toast";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { statusIsNotFinalized } from "@/routes/tasks/types";
@@ -21,6 +21,7 @@ import {
 } from "@/util/env";
 import { cn } from "@/util/utils";
 
+import { RotateThrough } from "./RotateThrough";
 import "./browser-stream.css";
 
 interface CommandTakeControl {
@@ -368,8 +369,18 @@ function BrowserStream({
         </div>
       )}
       {!isVncConnected && (
-        <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-black">
-          <Skeleton className="aspect-[16/9] h-auto max-h-full w-full max-w-full rounded-lg object-cover" />
+        <div className="flex h-full w-full flex-col items-center justify-center gap-2 pb-2 pt-4 text-sm text-slate-400">
+          <RotateThrough interval={7 * 1000}>
+            <span>Hm, working on the connection...</span>
+            <span>Hang tight, we're almost there...</span>
+            <span>Just a moment...</span>
+            <span>Backpropagating...</span>
+            <span>Attention is all I need...</span>
+            <span>Consulting the manual...</span>
+            <span>Looking for the bat phone...</span>
+            <span>Where's Shu?...</span>
+          </RotateThrough>
+          <AnimatedWave text=".‧₊˚ ⋅ ? ✨ ?★ ‧₊˚ ⋅" />
         </div>
       )}
     </div>

skyvern-frontend/src/components/FloatingWindow.tsx

@@ -18,7 +18,6 @@ import {
 import { flushSync } from "react-dom";
 import Draggable from "react-draggable";
 
-import { OrgWalled } from "./Orgwalled";
 import {
   Tooltip,
   TooltipContent,
@@ -628,11 +627,7 @@ function FloatingWindow({
                         onClick={toggleMaximized}
                       />
                     )}
-                    {showPowerButton && (
-                      <OrgWalled className="flex items-center justify-center">
-                        <PowerButton onClick={() => cycle()} />
-                      </OrgWalled>
-                    )}
+                    {showPowerButton && <PowerButton onClick={() => cycle()} />}
                   </div>
                   <div className="ml-auto">{title}</div>
                   {showReloadButton && (

skyvern-frontend/src/components/RotateThrough.tsx

@@ -0,0 +1,56 @@
+import { ReactNode, useEffect, useState } from "react";
+
+interface RotateThroughProps {
+  children: ReactNode[];
+  interval: number; // milliseconds
+  className?: string;
+}
+
+function RotateThrough({
+  children,
+  interval,
+  className = "",
+}: RotateThroughProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const childrenArray = Array.isArray(children) ? children : [children];
+
+  useEffect(() => {
+    if (childrenArray.length <= 1) return;
+
+    const timer = setInterval(() => {
+      setIsAnimating(true);
+
+      // After a short animation delay, change the content
+      setTimeout(() => {
+        setCurrentIndex((prevIndex) =>
+          prevIndex === childrenArray.length - 1 ? 0 : prevIndex + 1,
+        );
+        setIsAnimating(false);
+      }, 150); // Animation duration
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [childrenArray.length, interval]);
+
+  if (childrenArray.length === 0) {
+    return null;
+  }
+
+  if (childrenArray.length === 1) {
+    return <div className={className}>{childrenArray[0]}</div>;
+  }
+
+  return (
+    <div
+      className={`transition-all duration-150 ease-in-out ${
+        isAnimating ? "scale-95 opacity-0" : "scale-100 opacity-100"
+      } ${className}`}
+    >
+      {childrenArray[currentIndex]}
+    </div>
+  );
+}
+
+export { RotateThrough };