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", {
+          className={cn("rounded-xl border border-slate-700", {
-            "hover:border-slate-500": !isMaximized,
+            "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 };

skyvern-frontend/src/routes/discover/WorkflowTemplates.tsx

@@ -37,7 +37,7 @@ function WorkflowTemplates() {
                 testImg
               }
               onClick={() => {
-                navigate(`/workflows/${workflow.workflow_permanent_id}/edit`);
+                navigate(`/workflows/${workflow.workflow_permanent_id}/debug`);
               }}
             />
           );

skyvern-frontend/src/routes/workflows/ImportWorkflowButton.tsx

@@ -48,7 +48,7 @@ function ImportWorkflowButton() {
       queryClient.invalidateQueries({
         queryKey: ["workflows"],
       });
-      navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
+      navigate(`/workflows/${response.data.workflow_permanent_id}/debug`);
     },
     onError: (error: AxiosError) => {
       toast({

skyvern-frontend/src/routes/workflows/WorkflowPage.tsx

@@ -89,7 +89,7 @@ function WorkflowPage() {
             />
           )}
           <Button asChild variant="secondary">
-            <Link to={`/workflows/${workflowPermanentId}/edit`}>
+            <Link to={`/workflows/${workflowPermanentId}/debug`}>
               <Pencil2Icon className="mr-2 size-4" />
               Edit
             </Link>

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -222,7 +222,7 @@ function WorkflowRun() {
               }
             />
             <Button asChild variant="secondary">
-              <Link to={`/workflows/${workflowPermanentId}/edit`}>
+              <Link to={`/workflows/${workflowPermanentId}/debug`}>
                 <Pencil2Icon className="mr-2 h-4 w-4" />
                 Edit
               </Link>

skyvern-frontend/src/routes/workflows/Workflows.tsx

@@ -236,7 +236,7 @@ function Workflows() {
                                   onClick={(event) => {
                                     handleIconClick(
                                       event,
-                                      `/workflows/${workflow.workflow_permanent_id}/edit`,
+                                      `/workflows/${workflow.workflow_permanent_id}/debug`,
                                     );
                                   }}
                                 >

skyvern-frontend/src/routes/workflows/debugger/DebuggerRunTimeline.tsx

@@ -1,3 +1,4 @@
+import { useParams } from "react-router-dom";
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import { Skeleton } from "@/components/ui/skeleton";
 import { statusIsFinalized } from "@/routes/tasks/types";
@@ -17,6 +18,7 @@ import {
   WorkflowRunOverviewActiveElement,
 } from "@/routes/workflows/workflowRun/WorkflowRunOverview";
 import { WorkflowRunTimelineBlockItem } from "@/routes/workflows/workflowRun/WorkflowRunTimelineBlockItem";
+import { useWorkflowQuery } from "../hooks/useWorkflowQuery";
 
 type Props = {
   activeItem: WorkflowRunOverviewActiveElement;
@@ -25,12 +27,25 @@ type Props = {
   onBlockItemSelected: (item: WorkflowRunBlock) => void;
 };
 
+function Step({ n, children }: { n: number; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <div className="flex h-[4rem] w-[4rem] items-center justify-center rounded-full bg-slate-elevation3 px-4 py-3 text-lg font-bold">
+        {n}
+      </div>
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}
+
 function DebuggerRunTimeline({
   activeItem,
   onObserverThoughtCardSelected,
   onActionItemSelected,
   onBlockItemSelected,
 }: Props) {
+  const { workflowPermanentId } = useParams();
+  const { data: workflow } = useWorkflowQuery({ workflowPermanentId }!);
   const { data: workflowRun, isLoading: workflowRunIsLoading } =
     useWorkflowRunQuery();
 
@@ -41,23 +56,61 @@ function DebuggerRunTimeline({
     return <Skeleton className="h-full w-full" />;
   }
 
+  const blocks = workflow?.workflow_definition.blocks ?? [];
+
+  const getStarted =
+    blocks.length === 0 ? (
+      <div>
+        Hi! 👋 To get started, add a block to your workflow. You can do that by
+        clicking the round plus button beneath the Start block, on the left
+      </div>
+    ) : null;
+
+  const runABlock = (
+    <div>
+      To run a single block, click the play button on that block. We'll run the
+      block in the browser, live!
+    </div>
+  );
+
+  const runWorkflow = (
+    <div>
+      To run your entire workflow, click the large Run button, top right.
+    </div>
+  );
+
+  const addBlocks = (
+    <div>
+      Not finished? Add a block to your workflow by clicking the round plus
+      button before or after any other block.
+    </div>
+  );
+
+  const removeBlocks = (
+    <div>
+      Too much? On the top right of each block is an ellipsis (...). Click that
+      and select "Delete" to remove the block.
+    </div>
+  );
+
+  const steps = [
+    getStarted,
+    runABlock,
+    runWorkflow,
+    getStarted === null ? addBlocks : null,
+    getStarted === null ? removeBlocks : null,
+  ].filter((step) => step);
+
   if (!workflowRun || !workflowRunTimeline) {
     return (
       <div className="flex h-full w-full flex-col items-center justify-center rounded-xl bg-[#020817] p-12">
-        <div className="flex h-full w-full flex-col items-center justify-center gap-4">
+        <div className="flex h-full w-full flex-col items-center justify-around gap-4">
-          <div>
+          {getStarted === null && <div>This is going to be awesome! 🤗</div>}
-            Hi! 👋 We're experimenting with a new feature called debugger.
+          {steps.map((step, index) => (
-          </div>
+            <Step key={index} n={index + 1}>
-          <div>
+              {step}
-            This debugger allows you to see the state of your workflow in a live
+            </Step>
-            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>
     );

skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx

@@ -485,8 +485,7 @@ function FlowRenderer({
    * TODO(jdo): hack
    */
   const getXLock = () => {
-    const hasForLoopNode = nodes.some((node) => node.type === "loop");
+    return 24;
-    return hasForLoopNode ? 24 : 104;
   };
 
   useOnChange(debugStore.isDebugMode, (newValue) => {

skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx

@@ -1,4 +1,5 @@
 import { SaveIcon } from "@/components/icons/SaveIcon";
+import { BrowserIcon } from "@/components/icons/BrowserIcon";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -10,7 +11,6 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   CopyIcon,
-  Crosshair1Icon,
   PlayIcon,
   ReloadIcon,
 } from "@radix-ui/react-icons";
@@ -103,21 +103,36 @@ function WorkflowHeader({
           </Button>
         ) : (
           <>
-            <Button
+            <TooltipProvider>
-              size="lg"
+              <Tooltip>
-              variant={debugStore.isDebugMode ? "default" : "tertiary"}
+                <TooltipTrigger asChild>
-              disabled={workflowRunIsRunningOrQueued}
+                  <Button
-              onClick={() => {
+                    size="icon"
-                if (debugStore.isDebugMode) {
+                    variant={debugStore.isDebugMode ? "default" : "tertiary"}
-                  navigate(`/workflows/${workflowPermanentId}/edit`);
+                    className="size-10"
-                } else {
+                    disabled={workflowRunIsRunningOrQueued}
-                  navigate(`/workflows/${workflowPermanentId}/debug`);
+                    onClick={() => {
-                }
+                      if (debugStore.isDebugMode) {
-              }}
+                        navigate(`/workflows/${workflowPermanentId}/edit`);
-            >
+                      } else {
-              <Crosshair1Icon className="mr-2 h-6 w-6" />
+                        navigate(`/workflows/${workflowPermanentId}/debug`);
-              {debugStore.isDebugMode ? "End Debugging" : "Start Debugging"}
+                      }
-            </Button>
+                    }}
+                  >
+                    {debugStore.isDebugMode ? (
+                      <BrowserIcon className="h-6 w-6" />
+                    ) : (
+                      <BrowserIcon className="h-6 w-6" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {debugStore.isDebugMode
+                    ? "Turn off Browser"
+                    : "Turn on Browser"}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>

skyvern-frontend/src/routes/workflows/editor/Workspace.tsx

@@ -114,8 +114,10 @@ function Workspace({
   ]);
 
   // ---start fya: https://github.com/frontyardart
+  const hasForLoopNode = nodes.some((node) => node.type === "loop");
+
   const initialBrowserPosition = {
-    x: 600,
+    x: hasForLoopNode ? 600 : 520,
     y: 132,
   };
 
@@ -143,6 +145,18 @@ function Workspace({
 
   const workflowChangesStore = useWorkflowHasChangesStore();
 
+  /**
+   * Open a new tab (not window) with the browser session URL.
+   */
+  const handleOnBreakout = () => {
+    if (activeDebugSession) {
+      const pbsId = activeDebugSession.browser_session_id;
+      if (pbsId) {
+        window.open(`${location.origin}/browser-session/${pbsId}`, "_blank");
+      }
+    }
+  };
+
   const handleOnCycle = () => {
     setOpenDialogue(true);
   };
@@ -435,8 +449,14 @@ function Workspace({
       {/* sub panels */}
       {workflowPanelState.active && (
         <div
-          className="absolute right-6 top-[7.75rem]"
+          className="absolute right-6 top-[8.5rem]"
-          style={{ zIndex: rankedItems.dropdown ?? 2 }}
+          style={{
+            height:
+              workflowPanelState.content === "nodeLibrary"
+                ? "calc(100vh - 9.5rem)"
+                : "unset",
+            zIndex: rankedItems.dropdown ?? 2,
+          }}
           onMouseDownCapture={() => {
             promote("dropdown");
           }}
@@ -471,7 +491,7 @@ function Workspace({
           }}
         >
           <div className="pointer-events-none absolute right-0 top-0 flex h-full w-[400px] flex-col items-end justify-end bg-slate-900">
-            <div className="pointer-events-auto relative flex h-full w-full flex-col items-start overflow-hidden rounded-xl border-2 border-slate-500">
+            <div className="pointer-events-auto relative flex h-full w-full flex-col items-start overflow-hidden rounded-xl border border-slate-700">
               {workflowRunId && (
                 <SwitchBar
                   className="m-2 border-none"
@@ -530,12 +550,14 @@ function Workspace({
           initialPosition={initialBrowserPosition}
           initialWidth={initialWidth}
           initialHeight={initialHeight}
+          showBreakoutButton={activeDebugSession !== null}
           showMaximizeButton={true}
           showMinimizeButton={true}
           showPowerButton={blockLabel === undefined && showPowerButton}
           showReloadButton={true}
           zIndex={rankedItems.browserWindow ?? 4}
           // --
+          onBreakout={handleOnBreakout}
           onCycle={handleOnCycle}
           onFocus={() => promote("browserWindow")}
         >

skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx

@@ -34,7 +34,6 @@ import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { RunEngineSelector } from "@/components/EngineSelector";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { useBlockScriptStore } from "@/store/BlockScriptStore";
 import { cn } from "@/util/utils";
 import { useParams } from "react-router-dom";
@@ -53,7 +52,7 @@ function ActionNode({ id, data, type }: NodeProps<ActionNode>) {
   const { updateNodeData } = useReactFlow();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
-  const { editable, debuggable, label } = data;
+  const { editable, label } = data;
   const script = blockScriptStore.scripts[label];
   const [inputs, setInputs] = useState({
     url: data.url,
@@ -69,7 +68,6 @@ function ActionNode({ id, data, type }: NodeProps<ActionNode>) {
     engine: data.engine,
   });
   const { blockLabel: urlBlockLabel } = useParams();
-  const debugStore = useDebugStore();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
     workflowRun && statusIsRunningOrQueued(workflowRun);
@@ -77,7 +75,6 @@ function ActionNode({ id, data, type }: NodeProps<ActionNode>) {
     urlBlockLabel !== undefined && urlBlockLabel === label;
   const thisBlockIsPlaying =
     workflowRunIsRunningOrQueued && thisBlockIsTargetted;
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const rerender = useRerender({ prefix: "accordian" });
 
   const nodes = useNodes<AppNode>();
@@ -125,7 +122,6 @@ function ActionNode({ id, data, type }: NodeProps<ActionNode>) {
         >
           <NodeHeader
             blockLabel={label}
-            disabled={elideFromDebugging}
             editable={editable}
             nodeId={id}
             totpIdentifier={inputs.totpIdentifier}

skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx

@@ -4,7 +4,6 @@ import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
 import { useState } from "react";
 import type { CodeBlockNode } from "./types";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -13,9 +12,7 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 
 function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
   const { updateNodeData } = useReactFlow();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -55,7 +52,6 @@ function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx

@@ -4,7 +4,6 @@ import { Label } from "@/components/ui/label";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 import { helpTooltips } from "../../helpContent";
 import type { DownloadNode } from "./types";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -12,9 +11,7 @@ import { statusIsRunningOrQueued } from "@/routes/tasks/types";
 import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
 
 function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -50,7 +47,6 @@ function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx

@@ -33,7 +33,6 @@ import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { RunEngineSelector } from "@/components/EngineSelector";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { useBlockScriptStore } from "@/store/BlockScriptStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
@@ -46,10 +45,8 @@ function ExtractionNode({ id, data, type }: NodeProps<ExtractionNode>) {
   const { updateNodeData } = useReactFlow();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
   const script = blockScriptStore.scripts[label];
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -114,7 +111,6 @@ function ExtractionNode({ id, data, type }: NodeProps<ExtractionNode>) {
         >
           <NodeHeader
             blockLabel={label}
-            disabled={elideFromDebugging}
             editable={editable}
             nodeId={id}
             totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx

@@ -34,7 +34,6 @@ import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { RunEngineSelector } from "@/components/EngineSelector";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -53,9 +52,8 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
   const { updateNodeData } = useReactFlow();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
   const script = blockScriptStore.scripts[label];
-  const debugStore = useDebugStore();
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -64,7 +62,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
     urlBlockLabel !== undefined && urlBlockLabel === label;
   const thisBlockIsPlaying =
     workflowRunIsRunningOrQueued && thisBlockIsTargetted;
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const [inputs, setInputs] = useState({
     url: data.url,
     navigationGoal: data.navigationGoal,
@@ -122,7 +119,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
         >
           <NodeHeader
             blockLabel={label}
-            disabled={elideFromDebugging}
             editable={editable}
             nodeId={id}
             totpIdentifier={inputs.totpIdentifier}

skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx

@@ -6,7 +6,6 @@ import { helpTooltips } from "../../helpContent";
 import { type FileParserNode } from "./types";
 import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -17,9 +16,7 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 
 function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
   const { updateNodeData } = useReactFlow();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -69,7 +66,6 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/FileUploadNode/FileUploadNode.tsx

@@ -6,7 +6,6 @@ import { helpTooltips } from "../../helpContent";
 import { type FileUploadNode } from "./types";
 import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
 import { useState } from "react";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -22,9 +21,7 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 
 function FileUploadNode({ id, data }: NodeProps<FileUploadNode>) {
   const { updateNodeData } = useReactFlow();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -80,7 +77,6 @@ function FileUploadNode({ id, data }: NodeProps<FileUploadNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx

@@ -35,7 +35,6 @@ import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow"
 import { LoginBlockCredentialSelector } from "./LoginBlockCredentialSelector";
 import { RunEngineSelector } from "@/components/EngineSelector";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -47,10 +46,8 @@ function LoginNode({ id, data, type }: NodeProps<LoginNode>) {
   const { updateNodeData } = useReactFlow();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
   const script = blockScriptStore.scripts[label];
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -119,7 +116,6 @@ function LoginNode({ id, data, type }: NodeProps<LoginNode>) {
         >
           <NodeHeader
             blockLabel={label}
-            disabled={elideFromDebugging}
             editable={editable}
             nodeId={id}
             totpIdentifier={inputs.totpIdentifier}

skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx

@@ -16,7 +16,6 @@ import { useState } from "react";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { Checkbox } from "@/components/ui/checkbox";
 import { getLoopNodeWidth } from "../../workflowEditorUtils";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -30,9 +29,7 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
   if (!node) {
     throw new Error("Node not found"); // not possible
   }
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -109,7 +106,6 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
           >
             <NodeHeader
               blockLabel={label}
-              disabled={elideFromDebugging}
               editable={editable}
               nodeId={id}
               totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx

@@ -36,7 +36,6 @@ import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { RunEngineSelector } from "@/components/EngineSelector";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { useParams } from "react-router-dom";
 import { NodeHeader } from "../components/NodeHeader";
@@ -45,11 +44,10 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 
 function NavigationNode({ id, data, type }: NodeProps<NavigationNode>) {
   const { blockLabel: urlBlockLabel } = useParams();
-  const debugStore = useDebugStore();
   const { updateNodeData } = useReactFlow();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
-  const { editable, debuggable, label } = data;
+  const { editable, label } = data;
   const script = blockScriptStore.scripts[label];
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -58,7 +56,6 @@ function NavigationNode({ id, data, type }: NodeProps<NavigationNode>) {
     urlBlockLabel !== undefined && urlBlockLabel === label;
   const thisBlockIsPlaying =
     workflowRunIsRunningOrQueued && thisBlockIsTargetted;
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const rerender = useRerender({ prefix: "accordian" });
   const [inputs, setInputs] = useState({
     allowDownloads: data.allowDownloads,
@@ -125,7 +122,6 @@ function NavigationNode({ id, data, type }: NodeProps<NavigationNode>) {
           <NodeHeader
             blockLabel={label}
             editable={editable}
-            disabled={elideFromDebugging}
             nodeId={id}
             totpIdentifier={inputs.totpIdentifier}
             totpUrl={inputs.totpVerificationUrl}

skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx

@@ -8,7 +8,6 @@ import { dataSchemaExampleForFileExtraction } from "../types";
 import { type PDFParserNode } from "./types";
 import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -17,9 +16,7 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 
 function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
   const { updateNodeData } = useReactFlow();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -69,7 +66,6 @@ function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx

@@ -8,7 +8,6 @@ import { type SendEmailNode } from "./types";
 import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
 import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -17,9 +16,7 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 
 function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
   const { updateNodeData } = useReactFlow();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -71,7 +68,6 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx

@@ -148,21 +148,23 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                           />
                         </div>
                       </div>
-                      <div className="space-y-2">
+                      {inputs.useScriptCache && (
-                        <div className="flex gap-2">
+                        <div className="space-y-2">
-                          <Label>Script Key</Label>
+                          <div className="flex gap-2">
-                          <HelpTooltip content="A constant string or templated name, comprised of one or more of your parameters. It's the unique key for a workflow script." />
+                            <Label>Script Key</Label>
+                            <HelpTooltip content="A constant string or templated name, comprised of one or more of your parameters. It's the unique key for a workflow script." />
+                          </div>
+                          <Input
+                            value={inputs.scriptCacheKey ?? ""}
+                            placeholder="my-{{param1}}-{{param2}}-key"
+                            onChange={(event) => {
+                              const value = (event.target.value ?? "").trim();
+                              const v = value.length ? value : null;
+                              handleChange("scriptCacheKey", v);
+                            }}
+                          />
                         </div>
-                        <Input
+                      )}
-                          value={inputs.scriptCacheKey ?? ""}
-                          placeholder="my-{param1}-{param2}-key"
-                          onChange={(event) => {
-                            const value = (event.target.value ?? "").trim();
-                            const v = value.length ? value : null;
-                            handleChange("scriptCacheKey", v);
-                          }}
-                        />
-                      </div>
                     </OrgWalled>
                     <div className="space-y-2">
                       <div className="flex items-center gap-2">

skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx

@@ -36,7 +36,6 @@ import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { RunEngineSelector } from "@/components/EngineSelector";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -48,10 +47,8 @@ function TaskNode({ id, data, type }: NodeProps<TaskNode>) {
   const { updateNodeData } = useReactFlow();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
   const script = blockScriptStore.scripts[label];
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -126,7 +123,6 @@ function TaskNode({ id, data, type }: NodeProps<TaskNode>) {
         >
           <NodeHeader
             blockLabel={label}
-            disabled={elideFromDebugging}
             editable={editable}
             nodeId={id}
             totpIdentifier={inputs.totpIdentifier}

skyvern-frontend/src/routes/workflows/editor/nodes/Taskv2Node/Taskv2Node.tsx

@@ -15,7 +15,6 @@ import { helpTooltips, placeholders } from "../../helpContent";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { MAX_STEPS_DEFAULT, type Taskv2Node } from "./types";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -24,9 +23,7 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 import { useRerender } from "@/hooks/useRerender";
 
 function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -82,7 +79,6 @@ function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={inputs.totpIdentifier}

skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx

@@ -10,7 +10,6 @@ import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/
 import { dataSchemaExampleValue } from "../types";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -19,9 +18,7 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 
 function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
   const { updateNodeData } = useReactFlow();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -72,7 +69,6 @@ function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/URLNode/URLNode.tsx

@@ -9,7 +9,6 @@ import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTexta
 import { BlockCodeEditor } from "@/routes/workflows/components/BlockCodeEditor";
 import { placeholders } from "../../helpContent";
 import { useBlockScriptStore } from "@/store/BlockScriptStore";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -20,10 +19,8 @@ function URLNode({ id, data, type }: NodeProps<URLNode>) {
   const { updateNodeData } = useReactFlow();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
   const script = blockScriptStore.scripts[label];
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -77,7 +74,6 @@ function URLNode({ id, data, type }: NodeProps<URLNode>) {
         >
           <NodeHeader
             blockLabel={label}
-            disabled={elideFromDebugging}
             editable={editable}
             nodeId={id}
             totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx

@@ -4,16 +4,13 @@ import { Label } from "@/components/ui/label";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 import { helpTooltips } from "../../helpContent";
 import { type UploadNode } from "./types";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
 import { statusIsRunningOrQueued } from "@/routes/tasks/types";
 import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
 function UploadNode({ id, data }: NodeProps<UploadNode>) {
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -49,7 +46,6 @@ function UploadNode({ id, data }: NodeProps<UploadNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx

@@ -32,7 +32,6 @@ import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { ModelSelector } from "@/components/ModelSelector";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -44,10 +43,8 @@ function ValidationNode({ id, data, type }: NodeProps<ValidationNode>) {
   const { updateNodeData } = useReactFlow();
   const [facing, setFacing] = useState<"front" | "back">("front");
   const blockScriptStore = useBlockScriptStore();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
   const script = blockScriptStore.scripts[label];
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -109,7 +106,6 @@ function ValidationNode({ id, data, type }: NodeProps<ValidationNode>) {
         >
           <NodeHeader
             blockLabel={label}
-            disabled={elideFromDebugging}
             editable={editable}
             nodeId={id}
             totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx

@@ -6,7 +6,6 @@ import { helpTooltips } from "../../helpContent";
 import type { WaitNode } from "./types";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
 import { Input } from "@/components/ui/input";
-import { useDebugStore } from "@/store/useDebugStore";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
@@ -15,9 +14,7 @@ import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuer
 
 function WaitNode({ id, data, type }: NodeProps<WaitNode>) {
   const { updateNodeData } = useReactFlow();
-  const { debuggable, editable, label } = data;
+  const { editable, label } = data;
-  const debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
   const { blockLabel: urlBlockLabel } = useParams();
   const { data: workflowRun } = useWorkflowRunQuery();
   const workflowRunIsRunningOrQueued =
@@ -66,7 +63,6 @@ function WaitNode({ id, data, type }: NodeProps<WaitNode>) {
       >
         <NodeHeader
           blockLabel={label}
-          disabled={elideFromDebugging}
           editable={editable}
           nodeId={id}
           totpIdentifier={null}

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx

@@ -317,10 +317,10 @@ function WorkflowNodeLibraryPanel({
 
   return (
     <div
-      className="w-[25rem] rounded-xl border border-slate-700 bg-slate-950 p-5 shadow-xl"
+      className="h-full w-[25rem] rounded-xl border border-slate-700 bg-slate-950 p-5 shadow-xl"
       onMouseDownCapture={() => onMouseDownCapture?.()}
     >
-      <div className="space-y-4">
+      <div className="flex h-full flex-col space-y-4">
         <header className="space-y-2">
           <div className="flex justify-between">
             <h1 className="text-lg">Block Library</h1>
@@ -355,8 +355,8 @@ function WorkflowNodeLibraryPanel({
             tabIndex={0}
           />
         </div>
-        <ScrollArea>
+        <ScrollArea className="h-full flex-1">
-          <ScrollAreaViewport className="max-h-[28rem]">
+          <ScrollAreaViewport className="h-full">
             <div className="space-y-2">
               {filteredItems.length > 0 ? (
                 filteredItems.map((item) => (

skyvern-frontend/src/routes/workflows/hooks/useCreateWorkflowMutation.ts

@@ -29,7 +29,7 @@ function useCreateWorkflowMutation() {
       queryClient.invalidateQueries({
         queryKey: ["workflows"],
       });
-      navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
+      navigate(`/workflows/${response.data.workflow_permanent_id}/debug`);
     },
   });
 }