From 00a756825cb8481e225cd62b3d3c1c520078efbe Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Thu, 25 Sep 2025 14:05:22 -0400
Subject: [PATCH] standardize browser sessions ui, and prevent constant reloads
 of stream (#3527)

---
 .../routes/browserSession/BrowserSession.tsx  | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/skyvern-frontend/src/routes/browserSession/BrowserSession.tsx b/skyvern-frontend/src/routes/browserSession/BrowserSession.tsx
index 5ac6e6d0..7d6bd669 100644
--- a/skyvern-frontend/src/routes/browserSession/BrowserSession.tsx
+++ b/skyvern-frontend/src/routes/browserSession/BrowserSession.tsx
@@ -5,13 +5,17 @@ import { useQuery } from "@tanstack/react-query";
 import { getClient } from "@/api/AxiosClient";
 import { BrowserStream } from "@/components/BrowserStream";
 import { LogoMinimized } from "@/components/LogoMinimized";
+import { SwitchBar } from "@/components/SwitchBar";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { BrowserSessionVideo } from "./BrowserSessionVideo";
+import { cn } from "@/util/utils";
+
+type TabName = "stream" | "videos";
 
 function BrowserSession() {
   const { browserSessionId } = useParams();
   const [hasBrowserSession, setHasBrowserSession] = useState(false);
-  const [activeTab, setActiveTab] = useState<"stream" | "videos">("stream");
+  const [activeTab, setActiveTab] = useState<TabName>("stream");
 
   const credentialGetter = useCredentialGetter();
 
@@ -66,38 +70,40 @@ function BrowserSession() {
         </div>
 
         {/* Tab Navigation */}
-        <div className="flex w-full border-b">
-          <button
-            className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
-              activeTab === "stream"
-                ? "border-blue-500 text-blue-600"
-                : "border-transparent text-gray-500 hover:text-gray-700"
-            }`}
-            onClick={() => setActiveTab("stream")}
-          >
-            Live Stream
-          </button>
-          <button
-            className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
-              activeTab === "videos"
-                ? "border-blue-500 text-blue-600"
-                : "border-transparent text-gray-500 hover:text-gray-700"
-            }`}
-            onClick={() => setActiveTab("videos")}
-          >
-            Recordings
-          </button>
-        </div>
+        <SwitchBar
+          className="mb-2 border-none"
+          onChange={(value) => setActiveTab(value as TabName)}
+          value={activeTab}
+          options={[
+            {
+              label: "Stream",
+              value: "stream",
+              helpText: "The live stream of the browser session (if active).",
+            },
+            {
+              label: "Recordings",
+              value: "videos",
+              helpText: "All recordings of this browser session.",
+            },
+          ]}
+        />
 
         {/* Tab Content */}
-        <div className="min-h-0 w-full flex-1 rounded-lg border p-4">
-          {activeTab === "stream" && (
+        <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",
+              },
+            )}
+          >
             <BrowserStream
               browserSessionId={browserSessionId}
               interactive={false}
               showControlButtons={true}
             />
-          )}
+          </div>
           {activeTab === "videos" && <BrowserSessionVideo />}
         </div>
       </div>