feat: self healing skyvern api key (#3614)

Co-authored-by: Suchintan <suchintan@users.noreply.github.com>
Co-authored-by: Shuchang Zheng <wintonzheng0325@gmail.com>

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

@@ -5,6 +5,7 @@ import { Outlet } from "react-router-dom";
 import { Header } from "./Header";
 import { Sidebar } from "./Sidebar";
 import { useDebugStore } from "@/store/useDebugStore";
+import { SelfHealApiKeyBanner } from "@/components/SelfHealApiKeyBanner";
 
 function RootLayout() {
   const collapsed = useSidebarStore((state) => state.collapsed);
@@ -12,15 +13,21 @@ function RootLayout() {
   const isEmbedded = embed === "true";
   const debugStore = useDebugStore();
 
+  const horizontalPadding = cn("lg:pl-64", {
+    "lg:pl-28": collapsed,
+    "lg:pl-4": isEmbedded,
+  });
+
   return (
     <>
       {!isEmbedded && <Sidebar />}
       <div className="h-full w-full">
+        <div className={horizontalPadding}>
+          <SelfHealApiKeyBanner />
+        </div>
         <Header />
         <main
-          className={cn("lg:pb-4 lg:pl-64", {
-            "lg:pl-28": collapsed,
-            "lg:pl-4": isEmbedded,
+          className={cn("lg:pb-4", horizontalPadding, {
             "lg:pb-0": debugStore.isDebugMode,
           })}
         >