Align workflow-level cache settings with workflow-run-level cache se… (#3529)

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

@@ -192,6 +192,9 @@ function RunWorkflowForm({
     lsKeys.browserSessionId,
     (initialValues.browserSessionId as string | undefined) ?? null,
   );
+  const apiCredential = useApiCredential();
+  const { data: workflow } = useWorkflowQuery({ workflowPermanentId });
+
   const form = useForm<RunWorkflowFormType>({
     defaultValues: {
       ...initialValues,
@@ -203,12 +206,10 @@ function RunWorkflowForm({
       extraHttpHeaders: initialSettings.extraHttpHeaders
         ? JSON.stringify(initialSettings.extraHttpHeaders)
         : null,
-      runWithCode: false,
+      runWithCode: workflow?.generate_script ?? false,
-      aiFallback: true,
+      aiFallback: workflow?.ai_fallback ?? true,
     },
   });
-  const apiCredential = useApiCredential();
-  const { data: workflow } = useWorkflowQuery({ workflowPermanentId });
 
   useSyncFormFieldToStorage(form, "browserSessionId", lsKeys.browserSessionId);
 

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

@@ -30,7 +30,6 @@ import { useDebugStore } from "@/store/useDebugStore";
 import { useWorkflowTitleStore } from "@/store/WorkflowTitleStore";
 import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
 import { cn } from "@/util/utils";
-import { WorkflowApiResponse } from "../types/workflowTypes";
 import { CacheKeyValuesResponse } from "@/routes/workflows/types/scriptTypes";
 
 interface Dom {
@@ -44,7 +43,6 @@ type Props = {
   parametersPanelOpen: boolean;
   saving: boolean;
   showAllCode: boolean;
-  workflow: WorkflowApiResponse;
   onCacheKeyValueAccept: (cacheKeyValue: string | null) => void;
   onCacheKeyValuesBlurred: (cacheKeyValue: string | null) => void;
   onCacheKeyValuesFilter: (cacheKeyValue: string) => void;
@@ -64,7 +62,6 @@ function WorkflowHeader({
   parametersPanelOpen,
   saving,
   showAllCode,
-  workflow,
   onCacheKeyValueAccept,
   onCacheKeyValuesBlurred,
   onCacheKeyValuesFilter,
@@ -135,8 +132,7 @@ function WorkflowHeader({
         />
       </div>
       <div className="flex h-full items-center justify-end gap-4">
-        {user && workflow.generate_script && (
+        {user && (cacheKeyValues?.total_count ?? 0) > 0 && (
-          // (cacheKeyValues?.total_count ?? 0) > 0 && (
           <>
             {debugStore.isDebugMode && (
               <Button

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

@@ -854,7 +854,6 @@ function Workspace({
             workflowPanelState.content === "parameters"
           }
           showAllCode={showAllCode}
-          workflow={workflow}
           onCacheKeyValueAccept={(v) => {
             setCacheKeyValue(v ?? "");
             setCacheKeyValueFilter("");

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

@@ -7,6 +7,13 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { useEffect, useState } from "react";
 import { ProxyLocation } from "@/api/types";
 import { useQuery } from "@tanstack/react-query";
@@ -205,23 +212,46 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                           }}
                         />
                       </div>
-
+                      <div className="flex flex-col gap-4 rounded-md bg-slate-elevation5 p-4 pl-4">
-                      <div className="flex flex-col gap-4">
+                        <div className="flex flex-col gap-4">
-                        <div className="space-y-2">
+                          <div className="flex justify-between">
-                          <div className="flex items-center gap-2">
+                            <div className="flex items-center gap-2">
-                            <Label>Run Cached Code</Label>
+                              <Label>Run With</Label>
-                            <HelpTooltip content="If code has been cached, run the workflow using code for faster execution." />
+                              <HelpTooltip content="If code has been generated and saved from a previously successful run, set this to 'Code' to use that code when executing the workflow. To avoid using code, set this to 'Skyvern Agent'." />
-                            <Switch
+                            </div>
-                              className="ml-auto"
+                            <Select
-                              checked={inputs.useScriptCache}
+                              value={!inputs.useScriptCache ? "ai" : "code"}
-                              onCheckedChange={(value) => {
+                              onValueChange={(value) => {
-                                handleChange("useScriptCache", value);
+                                handleChange(
+                                  "useScriptCache",
+                                  value === "code",
+                                );
                               }}
-                            />
+                            >
+                              <SelectTrigger className="w-48">
+                                <SelectValue placeholder="Run Method" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="ai">
+                                  Skyvern Agent
+                                </SelectItem>
+                                <SelectItem value="code">Code</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+                          <div className="space-y-2">
+                            <div className="flex items-center gap-2">
+                              <Label>AI Fallback (self-healing)</Label>
+                              <HelpTooltip content="If a run with code fails, fallback to AI and regenerate the code." />
+                              <Switch
+                                className="ml-auto"
+                                checked={inputs.aiFallback}
+                                onCheckedChange={(value) => {
+                                  handleChange("aiFallback", value);
+                                }}
+                              />
+                            </div>
                           </div>
-                        </div>
-                        {/* {inputs.useScriptCache && (  .. // TODO(jdo/always-generate): put back */}
-                        <div className="flex flex-col gap-4 rounded-md bg-slate-elevation4 p-4 pl-4">
                           <div className="space-y-2">
                             <div className="flex gap-2">
                               <Label>Code Key (optional)</Label>
@@ -238,19 +268,6 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                               className="nopan text-xs"
                             />
                           </div>
-                          <div className="space-y-2">
-                            <div className="flex items-center gap-2">
-                              <Label>Fallback To AI On Failure</Label>
-                              <HelpTooltip content="If cached code fails, fallback to AI." />
-                              <Switch
-                                className="ml-auto"
-                                checked={inputs.aiFallback}
-                                onCheckedChange={(value) => {
-                                  handleChange("aiFallback", value);
-                                }}
-                              />
-                            </div>
-                          </div>
                         </div>
                         {/* )} */}
                       </div>