From 2191b915199b9c7a3286ef258a9a3339d62394e2 Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Thu, 30 Oct 2025 14:08:54 -0400
Subject: [PATCH] ensure stream continues when switching between stream and
 recordings (#3865)

---
 .../src/components/BrowserStream.tsx          |  4 +++-
 .../routes/browserSessions/BrowserSession.tsx | 23 ++++++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/skyvern-frontend/src/components/BrowserStream.tsx b/skyvern-frontend/src/components/BrowserStream.tsx
index 1e026ce0..3b4d5a2f 100644
--- a/skyvern-frontend/src/components/BrowserStream.tsx
+++ b/skyvern-frontend/src/components/BrowserStream.tsx
@@ -75,6 +75,7 @@ type Props = {
     run: WorkflowRunStatusApiResponse;
   };
   resizeTrigger?: number;
+  isVisible?: boolean;
   // --
   onClose?: () => void;
 };
@@ -86,6 +87,7 @@ function BrowserStream({
   task = undefined,
   workflow = undefined,
   resizeTrigger,
+  isVisible = true,
   // --
   onClose,
 }: Props) {
@@ -622,7 +624,7 @@ function BrowserStream({
       )}
       ref={setCanvasContainerRef}
     >
-      {isReady && (
+      {isReady && isVisible && (
         <div className="overlay z-10 flex items-center justify-center overflow-hidden">
           {showControlButtons && (
             <div className="control-buttons pointer-events-none relative flex h-full w-full items-center justify-center">
diff --git a/skyvern-frontend/src/routes/browserSessions/BrowserSession.tsx b/skyvern-frontend/src/routes/browserSessions/BrowserSession.tsx
index da0b0207..3eca1fe5 100644
--- a/skyvern-frontend/src/routes/browserSessions/BrowserSession.tsx
+++ b/skyvern-frontend/src/routes/browserSessions/BrowserSession.tsx
@@ -23,7 +23,6 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useCloseBrowserSessionMutation } from "@/routes/browserSessions/hooks/useCloseBrowserSessionMutation";
 import { CopyText } from "@/routes/workflows/editor/Workspace";
 import { type BrowserSession as BrowserSessionType } from "@/routes/workflows/types/browserSessionTypes";
-import { cn } from "@/util/utils";
 
 import { BrowserSessionVideo } from "./BrowserSessionVideo";
 
@@ -183,20 +182,28 @@ function BrowserSession() {
         {/* Tab Content */}
         <div className="relative min-h-0 w-full flex-1 rounded-lg border p-4">
           <div
-            className={cn(
-              "absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center",
-              {
-                hidden: activeTab !== "stream",
-              },
-            )}
+            className="absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center"
+            style={{
+              visibility: activeTab === "stream" ? "visible" : "hidden",
+              pointerEvents: activeTab === "stream" ? "auto" : "none",
+            }}
           >
             <BrowserStream
               browserSessionId={browserSessionId}
               interactive={false}
               showControlButtons={true}
+              isVisible={activeTab === "stream"}
             />
           </div>
-          {activeTab === "videos" && <BrowserSessionVideo />}
+          <div
+            className="h-full w-full"
+            style={{
+              visibility: activeTab === "videos" ? "visible" : "hidden",
+              pointerEvents: activeTab === "videos" ? "auto" : "none",
+            }}
+          >
+            <BrowserSessionVideo />
+          </div>
         </div>
       </div>
       <Toaster />