add take control/cede control buttons to browser stream view; improve branding yar (#2989)

skyvern-frontend/src/routes/browserSession/BrowserSession.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { BrowserStream } from "@/components/BrowserStream";
-import { getClient } from "@/api/AxiosClient";
-
 import { useQuery } from "@tanstack/react-query";
+
+import { getClient } from "@/api/AxiosClient";
+import { BrowserStream } from "@/components/BrowserStream";
+import { LogoMinimized } from "@/components/LogoMinimized";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 
 function BrowserSession() {
@@ -52,8 +53,20 @@ function BrowserSession() {
 
   return (
     <div className="h-screen w-full gap-4 p-6">
-      <div className="flex h-full w-full items-center justify-center">
-        <BrowserStream browserSessionId={browserSessionId} />
+      <div className="flex h-full w-full flex-col items-start justify-start gap-2">
+        <div className="flex w-full flex-shrink-0 flex-row items-center justify-between rounded-lg border p-4">
+          <div className="flex flex-row items-center justify-start gap-2">
+            <LogoMinimized />
+            <div className="text-xl">browser session</div>
+          </div>
+        </div>
+        <div className="min-h-0 w-full flex-1 rounded-lg border p-4">
+          <BrowserStream
+            browserSessionId={browserSessionId}
+            interactive={false}
+            showControlButtons={true}
+          />
+        </div>
       </div>
     </div>
   );