From 65a35ebd598da4101e536d9fa0d973892396e5b0 Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Tue, 15 Jul 2025 14:07:30 -0400
Subject: [PATCH] fix initial sizing; add welcome message (#2958)

---
 .../panels/WorkflowDebugOverviewWindow.tsx    | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowDebugOverviewWindow.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowDebugOverviewWindow.tsx
index e07af7c7..c37c975b 100644
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowDebugOverviewWindow.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowDebugOverviewWindow.tsx
@@ -9,7 +9,13 @@ import { useParams } from "react-router-dom";
 
 function WorkflowDebugOverviewWindow() {
   return (
-    <FloatingWindow title="Live View">
+    <FloatingWindow
+      title="Live View"
+      initialWidth={256}
+      initialHeight={512}
+      maximized={true}
+      showMaximizeButton={true}
+    >
       <WorkflowDebugOverviewWindowIframe />
     </FloatingWindow>
   );
@@ -43,8 +49,22 @@ function WorkflowDebugOverviewWindowIframe() {
       <iframe src={dest} className="h-full w-full rounded-xl" />
     </div>
   ) : (
-    <div className="h-full w-full rounded-xl bg-[#020817] p-6">
-      <p>Workflow not found</p>
+    // waving hand emoji
+
+    <div className="flex h-full w-full flex-col items-center justify-center gap-4 overflow-y-auto rounded-xl bg-[#020817] p-6">
+      <div className="flex h-full w-full max-w-[15rem] flex-col items-center justify-center gap-4 rounded-xl bg-[#020817] p-6">
+        <div>
+          Hi! 👋 We're experimenting with a new feature called debugger.
+        </div>
+        <div>
+          This debugger allows you to see the state of your workflow in a live
+          browser.
+        </div>
+        <div>You can run individual blocks, instead of the whole workflow.</div>
+        <div>
+          To get started, press the play button on a block in your workflow.
+        </div>
+      </div>
     </div>
   );
 }