standardize browser sessions ui, and prevent constant reloads of stream (#3527)

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">
+        <SwitchBar
-          <button
+          className="mb-2 border-none"
-            className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
+          onChange={(value) => setActiveTab(value as TabName)}
-              activeTab === "stream"
+          value={activeTab}
-                ? "border-blue-500 text-blue-600"
+          options={[
-                : "border-transparent text-gray-500 hover:text-gray-700"
+            {
-            }`}
+              label: "Stream",
-            onClick={() => setActiveTab("stream")}
+              value: "stream",
-          >
+              helpText: "The live stream of the browser session (if active).",
-            Live Stream
+            },
-          </button>
+            {
-          <button
+              label: "Recordings",
-            className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
+              value: "videos",
-              activeTab === "videos"
+              helpText: "All recordings of this browser session.",
-                ? "border-blue-500 text-blue-600"
+            },
-                : "border-transparent text-gray-500 hover:text-gray-700"
+          ]}
-            }`}
+        />
-            onClick={() => setActiveTab("videos")}
-          >
-            Recordings
-          </button>
-        </div>
 
         {/* Tab Content */}
-        <div className="min-h-0 w-full flex-1 rounded-lg border p-4">
+        <div className="relative min-h-0 w-full flex-1 rounded-lg border p-4">
-          {activeTab === "stream" && (
+          <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>