FE: allow workflow run UI to show browser stream if workflow run has one (#3838)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -476,6 +476,11 @@ function BrowserStream({
     }
   }, [task, workflow]);
 
+  useEffect(() => {
+    if (!interactive) {
+      setUserIsControlling(false);
+    }
+  }, [interactive]);
   /**
    * TODO(jdo): could use zod or smth similar
    */

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx

@@ -1,4 +1,4 @@
-import { ActionsApiResponse } from "@/api/types";
+import { ActionsApiResponse, Status as WorkflowRunStatus } from "@/api/types";
 import { BrowserStream } from "@/components/BrowserStream";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { ActionScreenshot } from "@/routes/tasks/detail/ActionScreenshot";
@@ -47,22 +47,20 @@ function WorkflowRunOverview() {
   const { data: workflowRunTimeline, isLoading: workflowRunTimelineIsLoading } =
     useWorkflowRunTimelineQuery();
 
+  const workflowRunId = workflowRun?.workflow_run_id;
+
   const invalidateQueries = useCallback(() => {
-    if (workflowRun) {
+    if (workflowRunId) {
       queryClient.invalidateQueries({
-        queryKey: [
-          "workflowRun",
-          workflowPermanentId,
-          workflowRun.workflow_run_id,
-        ],
+        queryKey: ["workflowRun", workflowPermanentId, workflowRunId],
       });
       queryClient.invalidateQueries({ queryKey: ["workflowRuns"] });
       queryClient.invalidateQueries({
-        queryKey: ["workflowTasks", workflowRun.workflow_run_id],
+        queryKey: ["workflowTasks", workflowRunId],
       });
       queryClient.invalidateQueries({ queryKey: ["runs"] });
     }
-  }, [queryClient, workflowPermanentId, workflowRun]);
+  }, [queryClient, workflowPermanentId, workflowRunId]);
 
   if (workflowRunIsLoading || workflowRunTimelineIsLoading) {
     return (
@@ -87,25 +85,50 @@ function WorkflowRunOverview() {
     workflowRunIsFinalized,
   );
 
-  const streamingComponent = workflowRun.browser_session_id ? (
-    <BrowserStream
-      workflow={{ run: workflowRun }}
-      onClose={() => invalidateQueries()}
-    />
-  ) : (
-    <WorkflowRunStream />
+  const browserSessionId = workflowRun.browser_session_id;
+
+  const isPaused =
+    workflowRun && workflowRun.status === WorkflowRunStatus.Paused;
+
+  const showStreamingBrowser =
+    (!workflowRunIsFinalized &&
+      browserSessionId &&
+      isWorkflowRunBlock(selection) &&
+      selection.block_type === "human_interaction") ||
+    selection === "stream";
+
+  const shouldShowBrowserStream = !!(
+    browserSessionId &&
+    !workflowRunIsFinalized &&
+    (selection === "stream" ||
+      (isWorkflowRunBlock(selection) &&
+        selection.block_type === "human_interaction"))
   );
 
   return (
     <AspectRatio ratio={16 / 9}>
-      {selection === "stream" && streamingComponent}
-      {selection !== "stream" && isAction(selection) && (
-        <ActionScreenshot
-          index={selection.action_order ?? 0}
-          stepId={selection.step_id ?? ""}
+      {shouldShowBrowserStream && (
+        <BrowserStream
+          key={browserSessionId}
+          browserSessionId={browserSessionId}
+          interactive={isPaused}
+          showControlButtons={isPaused}
+          workflow={undefined}
+          onClose={invalidateQueries}
         />
       )}
-      {isWorkflowRunBlock(selection) && (
+      {!shouldShowBrowserStream && selection === "stream" && (
+        <WorkflowRunStream />
+      )}
+      {selection !== "stream" &&
+        !showStreamingBrowser &&
+        isAction(selection) && (
+          <ActionScreenshot
+            index={selection.action_order ?? 0}
+            stepId={selection.step_id ?? ""}
+          />
+        )}
+      {isWorkflowRunBlock(selection) && !showStreamingBrowser && (
         <WorkflowRunBlockScreenshot
           workflowRunBlockId={selection.workflow_run_block_id}
         />