Jon/sky 5841 make debug view the default view (#3208)

skyvern-frontend/src/components/FloatingWindow.tsx

@@ -6,6 +6,7 @@
  * and `re-resizable`; but I don't want to do that until it's worth the effort.)
  */
 
+import { OpenInNewWindowIcon } from "@radix-ui/react-icons";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import { Resizable } from "re-resizable";
 import {
@@ -77,6 +78,27 @@ function WindowsButton(props: {
   );
 }
 
+/**
+ * Button to open browser in a new tab.
+ */
+function BreakoutButton(props: { onClick: () => void }) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className="h-[1.2rem] w-[1.25rem] opacity-50 hover:opacity-100"
+            onClick={() => props.onClick()}
+          >
+            <OpenInNewWindowIcon />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>Open In New Tab</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
 function PowerButton(props: { onClick: () => void }) {
   return (
     <TooltipProvider>
@@ -149,6 +171,7 @@ function FloatingWindow({
   initialWidth,
   initialHeight,
   maximized,
+  showBreakoutButton,
   showCloseButton,
   showMaximizeButton,
   showMinimizeButton,
@@ -157,6 +180,7 @@ function FloatingWindow({
   title,
   zIndex,
   // --
+  onBreakout,
   onCycle,
   onFocus,
   onBlur,
@@ -168,6 +192,7 @@ function FloatingWindow({
   initialPosition?: { x: number; y: number };
   initialWidth?: number;
   maximized?: boolean;
+  showBreakoutButton?: boolean;
   showCloseButton?: boolean;
   showMaximizeButton?: boolean;
   showMinimizeButton?: boolean;
@@ -176,6 +201,7 @@ function FloatingWindow({
   title: string;
   zIndex?: number;
   // --
+  onBreakout?: () => void;
   onCycle?: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -469,6 +495,10 @@ function FloatingWindow({
     }, 1000);
   };
 
+  const breakout = () => {
+    onBreakout?.();
+  };
+
   const cycle = () => {
     onCycle?.();
   };
@@ -536,8 +566,8 @@ function FloatingWindow({
             pointerEvents: "auto",
             overflow: "hidden",
           }}
-          className={cn("border-2 border-gray-700", {
-            "hover:border-slate-500": !isMaximized,
+          className={cn("rounded-xl border border-slate-700", {
+            "hover:border-slate-600": !isMaximized,
           })}
           handleStyles={{
             bottomLeft: {
@@ -621,7 +651,7 @@ function FloatingWindow({
           >
             <div
               className={cn(
-                "my-window-header flex h-[3rem] w-full cursor-move items-center justify-start gap-2 bg-[#131519] p-3",
+                "my-window-header flex h-[3rem] w-full cursor-move items-center justify-start gap-2 bg-slate-elevation3 p-3",
               )}
             >
               {os === "macOS" ? (
@@ -655,7 +685,12 @@ function FloatingWindow({
                     )}
                     {showPowerButton && <PowerButton onClick={() => cycle()} />}
                   </div>
-                  <div className="ml-auto">{title}</div>
+                  <div className="ml-auto flex items-center justify-start gap-2">
+                    {showBreakoutButton && (
+                      <BreakoutButton onClick={() => breakout()} />
+                    )}
+                    {title}
+                  </div>
                   {showReloadButton && (
                     <ReloadButton
                       isReloading={isReloading}

skyvern-frontend/src/components/icons/BrowserIcon.tsx

@@ -0,0 +1,28 @@
+type Props = {
+  className?: string;
+};
+
+function BrowserIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <path
+        stroke="currentColor"
+        d="M3 10V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V10M3 10V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V10M3 10H21"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle cx="6" cy="7" r="1" fill="currentColor" />
+      <circle cx="9" cy="7" r="1" fill="currentColor" />
+    </svg>
+  );
+}
+
+export { BrowserIcon };