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

2025-08-15 20:32:55 -04:00
parent fc55729257
commit 618fba5371
33 changed files with 237 additions and 159 deletions
--- a/skyvern-frontend/src/routes/discover/WorkflowTemplates.tsx
+++ b/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`);
              }}
            />
          );
--- a/skyvern-frontend/src/routes/workflows/ImportWorkflowButton.tsx
+++ b/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({
--- a/skyvern-frontend/src/routes/workflows/WorkflowPage.tsx
+++ b/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>
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/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>
--- a/skyvern-frontend/src/routes/workflows/Workflows.tsx
+++ b/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`,
                                    );
                                  }}
                                >
--- a/skyvern-frontend/src/routes/workflows/debugger/DebuggerRunTimeline.tsx
+++ b/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>
-            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 className="flex h-full w-full flex-col items-center justify-around gap-4">
+          {getStarted === null && <div>This is going to be awesome! 🤗</div>}
+          {steps.map((step, index) => (
+            <Step key={index} n={index + 1}>
+              {step}
+            </Step>
+          ))}
        </div>
      </div>
    );
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/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 hasForLoopNode ? 24 : 104;
+    return 24;
  };

  useOnChange(debugStore.isDebugMode, (newValue) => {
--- a/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
+++ b/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
-              size="lg"
-              variant={debugStore.isDebugMode ? "default" : "tertiary"}
-              disabled={workflowRunIsRunningOrQueued}
-              onClick={() => {
-                if (debugStore.isDebugMode) {
-                  navigate(`/workflows/${workflowPermanentId}/edit`);
-                } else {
-                  navigate(`/workflows/${workflowPermanentId}/debug`);
-                }
-              }}
-            >
-              <Crosshair1Icon className="mr-2 h-6 w-6" />
-              {debugStore.isDebugMode ? "End Debugging" : "Start Debugging"}
-            </Button>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant={debugStore.isDebugMode ? "default" : "tertiary"}
+                    className="size-10"
+                    disabled={workflowRunIsRunningOrQueued}
+                    onClick={() => {
+                      if (debugStore.isDebugMode) {
+                        navigate(`/workflows/${workflowPermanentId}/edit`);
+                      } else {
+                        navigate(`/workflows/${workflowPermanentId}/debug`);
+                      }
+                    }}
+                  >
+                    {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>
--- a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
+++ b/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]"
-          style={{ zIndex: rankedItems.dropdown ?? 2 }}
+          className="absolute right-6 top-[8.5rem]"
+          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")}
        >
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
+++ b/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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx
+++ b/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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx
+++ b/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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileUploadNode/FileUploadNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx
+++ b/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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx
+++ b/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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx
+++ b/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">
-                        <div className="flex gap-2">
-                          <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." />
+                      {inputs.useScriptCache && (
+                        <div className="space-y-2">
+                          <div className="flex gap-2">
+                            <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">
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
+++ b/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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/Taskv2Node/Taskv2Node.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/URLNode/URLNode.tsx
+++ b/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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx
+++ b/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}
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx
+++ b/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 debugStore = useDebugStore();
-  const elideFromDebugging = debugStore.isDebugMode && !debuggable;
+  const { editable, label } = data;
  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}
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx
+++ b/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>
-          <ScrollAreaViewport className="max-h-[28rem]">
+        <ScrollArea className="h-full flex-1">
+          <ScrollAreaViewport className="h-full">
            <div className="space-y-2">
              {filteredItems.length > 0 ? (
                filteredItems.map((item) => (
--- a/skyvern-frontend/src/routes/workflows/hooks/useCreateWorkflowMutation.ts
+++ b/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`);
    },
  });
 }