Debugger Lite (#2970)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -1,7 +1,5 @@
 import { Status } from "@/api/types";
 import { useEffect, useState, useRef, useCallback } from "react";
-import { HandIcon, StopIcon } from "@radix-ui/react-icons";
-import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { statusIsNotFinalized } from "@/routes/tasks/types";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
@@ -29,6 +27,7 @@ type Command = CommandTakeControl | CommandCedeControl;
 
 type Props = {
   browserSessionId?: string;
+  interactive?: boolean;
   task?: {
     run: TaskApiResponse;
   };
@@ -41,6 +40,7 @@ type Props = {
 
 function BrowserStream({
   browserSessionId = undefined,
+  interactive = true,
   task = undefined,
   workflow = undefined,
   // --
@@ -67,7 +67,6 @@ function BrowserStream({
   }
 
   const [commandSocket, setCommandSocket] = useState<WebSocket | null>(null);
-  const [userIsControlling, setUserIsControlling] = useState<boolean>(false);
   const [vncDisconnectedTrigger, setVncDisconnectedTrigger] = useState(0);
   const prevVncConnectedRef = useRef<boolean>(false);
   const [isVncConnected, setIsVncConnected] = useState<boolean>(false);
@@ -273,13 +272,13 @@ function BrowserStream({
       commandSocket.send(JSON.stringify(command));
     };
 
-    if (userIsControlling) {
+    if (interactive) {
       sendCommand({ kind: "take-control" });
     } else {
       sendCommand({ kind: "cede-control" });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userIsControlling, isCommandConnected]);
+  }, [interactive, isCommandConnected]);
 
   // Effect to show toast when task or workflow reaches a final state based on hook updates
   useEffect(() => {
@@ -316,39 +315,11 @@ function BrowserStream({
   return (
     <div
       className={cn("browser-stream", {
-        "user-is-controlling": userIsControlling,
+        "user-is-controlling": interactive,
       })}
       ref={setCanvasContainerRef}
     >
-      {isVncConnected && (
-        <div className="overlay-container">
-          <div className="overlay">
-            <Button
-              className={cn(
-                "take-control absolute bottom-[-1rem] left-[1rem]",
-                { hide: userIsControlling },
-              )}
-              type="button"
-              onClick={() => setUserIsControlling(true)}
-            >
-              <HandIcon className="mr-2 h-4 w-4" />
-              interact
-            </Button>
-            <div className="absolute bottom-[-1rem] right-[1rem]">
-              <Button
-                className={cn("relinquish-control", {
-                  hide: !userIsControlling,
-                })}
-                type="button"
-                onClick={() => setUserIsControlling(false)}
-              >
-                <StopIcon className="mr-2 h-4 w-4" />
-                stop interacting
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
+      {isVncConnected && <div className="overlay" />}
       {!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" />

skyvern-frontend/src/components/FloatingWindow.tsx

@@ -6,6 +6,7 @@
  * and `re-resizable`; but I don't want to do that until it's worth the effort.)
  */
 
+import { ReloadIcon } from "@radix-ui/react-icons";
 import { Resizable } from "re-resizable";
 import {
   useCallback,
@@ -69,6 +70,14 @@ function WindowsButton(props: {
   );
 }
 
+function ReloadButton(props: { isReloading: boolean; onClick: () => void }) {
+  return (
+    <button onClick={() => props.onClick()}>
+      <ReloadIcon className={props.isReloading ? "animate-spin" : undefined} />
+    </button>
+  );
+}
+
 function getOs(): OS {
   if (typeof navigator === "undefined") {
     return "Unknown"; // For non-browser environments
@@ -105,6 +114,7 @@ function FloatingWindow({
   showCloseButton,
   showMaximizeButton,
   showMinimizeButton,
+  showReloadButton = false,
   title,
   zIndex,
   // --
@@ -118,11 +128,14 @@ function FloatingWindow({
   showCloseButton?: boolean;
   showMaximizeButton?: boolean;
   showMinimizeButton?: boolean;
+  showReloadButton?: boolean;
   title: string;
   zIndex?: string;
   // --
   onInteract?: () => void;
 }) {
+  const [reloadKey, setReloadKey] = useState(0);
+  const [isReloading, setIsReloading] = useState(false);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [size, setSize] = useState({
     left: 0,
@@ -394,6 +407,19 @@ function FloatingWindow({
     setIsMinimized(false);
   };
 
+  const reload = () => {
+    if (isReloading) {
+      return;
+    }
+
+    setReloadKey((prev) => prev + 1);
+    setIsReloading(true);
+
+    setTimeout(() => {
+      setIsReloading(false);
+    }, 1000);
+  };
+
   /**
    * If maximized, need to retain max size during parent resizing.
    */
@@ -507,6 +533,7 @@ function FloatingWindow({
         >
           <div
             ref={resizableRef}
+            key={reloadKey}
             className="my-window"
             style={{
               pointerEvents: "auto",
@@ -523,7 +550,7 @@ function FloatingWindow({
           >
             <div
               className={cn(
-                "my-window-header flex h-[3rem] w-full cursor-move items-center justify-start gap-2 bg-[#031827] p-3",
+                "my-window-header flex h-[3rem] w-full cursor-move items-center justify-start gap-2 bg-[#131519] p-3",
               )}
             >
               {os === "macOS" ? (
@@ -557,9 +584,21 @@ function FloatingWindow({
                     )}
                   </div>
                   <div className="ml-auto">{title}</div>
+                  {showReloadButton && (
+                    <ReloadButton
+                      isReloading={isReloading}
+                      onClick={() => reload()}
+                    />
+                  )}
                 </>
               ) : (
                 <>
+                  {showReloadButton && (
+                    <ReloadButton
+                      isReloading={isReloading}
+                      onClick={() => reload()}
+                    />
+                  )}
                   <div>{title}</div>
                   <div className="buttons-container ml-auto flex h-full items-center gap-2">
                     {showMinimizeButton && (

skyvern-frontend/src/components/browser-stream.css

@@ -13,35 +13,18 @@
   padding: 0rem;
 }
 
-.browser-stream .overlay-container {
+.browser-stream .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.browser-stream .overlay {
-  position: relative;
-  height: auto;
-  width: 100%;
-  max-height: 100%;
-  aspect-ratio: 16 / 9;
-  object-fit: cover;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  cursor: not-allowed;
 }
 
 .browser-stream.user-is-controlling .overlay {
   pointer-events: none;
-}
-
-.browser-stream.user-is-controlling .overlay-container {
-  pointer-events: none;
+  cursor: unset;
 }
 
 .browser-stream .take-control {