MVP Debugger UI (#2888)

skyvern-frontend/src/routes/root/Header.tsx

@@ -1,10 +1,15 @@
 import { DiscordLogoIcon } from "@radix-ui/react-icons";
 import GitHubButton from "react-github-btn";
-import { Link, useMatch } from "react-router-dom";
+import { Link, useMatch, useSearchParams } from "react-router-dom";
 import { NavigationHamburgerMenu } from "./NavigationHamburgerMenu";
 
 function Header() {
-  const match = useMatch("/workflows/:workflowPermanentId/edit");
+  const [searchParams] = useSearchParams();
+  const embed = searchParams.get("embed");
+  const match =
+    useMatch("/workflows/:workflowPermanentId/edit") ||
+    location.pathname.includes("debug") ||
+    embed === "true";
 
   if (match) {
     return null;

skyvern-frontend/src/routes/root/RootLayout.tsx

@@ -4,18 +4,24 @@ import { cn } from "@/util/utils";
 import { Outlet } from "react-router-dom";
 import { Header } from "./Header";
 import { Sidebar } from "./Sidebar";
+import { useDebugStore } from "@/store/useDebugStore";
 
 function RootLayout() {
   const collapsed = useSidebarStore((state) => state.collapsed);
+  const embed = new URLSearchParams(window.location.search).get("embed");
+  const isEmbedded = embed === "true";
+  const debugStore = useDebugStore();
 
   return (
     <>
+      {!isEmbedded && <Sidebar />}
       <div className="h-full w-full">
-        <Sidebar />
         <Header />
         <main
           className={cn("lg:pb-4 lg:pl-64", {
             "lg:pl-28": collapsed,
+            "lg:pl-4": isEmbedded,
+            "lg:pb-0": debugStore.isDebugMode,
           })}
         >
           <Outlet />