ai fallback toggle (#3324)

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

@@ -63,6 +63,7 @@ function Debugger() {
       : null,
     useScriptCache: workflow.generate_script,
     scriptCacheKey: workflow.cache_key,
+    aiFallback: workflow.ai_fallback,
   };
 
   const elements = getElements(

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

@@ -64,6 +64,7 @@ function WorkflowEditor() {
       : null,
     useScriptCache: workflow.generate_script,
     scriptCacheKey: workflow.cache_key,
+    aiFallback: workflow.ai_fallback,
   };
 
   const elements = getElements(

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

@@ -83,6 +83,7 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
     extraHttpHeaders: data.withWorkflowSettings ? data.extraHttpHeaders : null,
     useScriptCache: data.withWorkflowSettings ? data.useScriptCache : false,
     scriptCacheKey: data.withWorkflowSettings ? data.scriptCacheKey : null,
+    aiFallback: data.withWorkflowSettings ? data.aiFallback : false,
   });
 
   const [facing, setFacing] = useState<"front" | "back">("front");
@@ -226,38 +227,57 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                           }}
                         />
                       </div>
-                      <OrgWalled className="flex flex-col gap-4">
+                      <OrgWalled className="p-0 hover:p-0">
-                        <div className="space-y-2">
+                        <div className="flex flex-col gap-4">
-                          <div className="flex items-center gap-2">
-                            <Label>Generate Code</Label>
-                            <HelpTooltip content="Generate & use cached code for faster execution." />
-                            <Switch
-                              className="ml-auto"
-                              checked={inputs.useScriptCache}
-                              onCheckedChange={(value) => {
-                                handleChange("useScriptCache", value);
-                              }}
-                            />
-                          </div>
-                        </div>
-                        {inputs.useScriptCache && (
                           <div className="space-y-2">
-                            <div className="flex gap-2">
+                            <div className="flex items-center gap-2">
-                              <Label>Code Key (optional)</Label>
+                              <Label>Generate Code</Label>
-                              <HelpTooltip content="A static or dynamic key for directing code generation." />
+                              <HelpTooltip content="Generate & use cached code for faster execution." />
+                              <Switch
+                                className="ml-auto"
+                                checked={inputs.useScriptCache}
+                                onCheckedChange={(value) => {
+                                  handleChange("useScriptCache", value);
+                                }}
+                              />
                             </div>
-                            <WorkflowBlockInputTextarea
-                              nodeId={id}
-                              onChange={(value) => {
-                                const v = value.length ? value : null;
-                                handleChange("scriptCacheKey", v);
-                              }}
-                              value={inputs.scriptCacheKey ?? ""}
-                              placeholder={placeholders["scripts"]["scriptKey"]}
-                              className="nopan text-xs"
-                            />
                           </div>
-                        )}
+                          {inputs.useScriptCache && (
+                            <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>
+                                  <HelpTooltip content="A static or dynamic key for directing code generation." />
+                                </div>
+                                <WorkflowBlockInputTextarea
+                                  nodeId={id}
+                                  onChange={(value) => {
+                                    const v = value.length ? value : null;
+                                    handleChange("scriptCacheKey", v);
+                                  }}
+                                  value={inputs.scriptCacheKey ?? ""}
+                                  placeholder={
+                                    placeholders["scripts"]["scriptKey"]
+                                  }
+                                  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>
                       </OrgWalled>
                       <div className="space-y-2">
                         <div className="flex items-center gap-2">

skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/types.ts

@@ -14,6 +14,7 @@ export type WorkflowStartNodeData = {
   editable: boolean;
   useScriptCache: boolean;
   scriptCacheKey: string | null;
+  aiFallback: boolean;
   label: "__start_block__";
   showCode: boolean;
 };

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -705,6 +705,7 @@ function getElements(
       editable,
       useScriptCache: settings.useScriptCache,
       scriptCacheKey: settings.scriptCacheKey,
+      aiFallback: settings.aiFallback ?? false,
       label: "__start_block__",
       showCode: false,
     }),
@@ -1416,6 +1417,7 @@ function getWorkflowSettings(nodes: Array<AppNode>): WorkflowSettings {
     extraHttpHeaders: null,
     useScriptCache: false,
     scriptCacheKey: null,
+    aiFallback: false,
   };
   const startNodes = nodes.filter(isStartNode);
   const startNodeWithWorkflowSettings = startNodes.find(
@@ -1435,6 +1437,7 @@ function getWorkflowSettings(nodes: Array<AppNode>): WorkflowSettings {
       extraHttpHeaders: data.extraHttpHeaders,
       useScriptCache: data.useScriptCache,
       scriptCacheKey: data.scriptCacheKey,
+      aiFallback: data.aiFallback,
     };
   }
   return defaultSettings;

skyvern-frontend/src/routes/workflows/types/workflowTypes.ts

@@ -510,6 +510,7 @@ export type WorkflowApiResponse = {
   deleted_at: string | null;
   generate_script: boolean;
   cache_key: string | null;
+  ai_fallback: boolean | null;
 };
 
 export type WorkflowSettings = {
@@ -521,6 +522,7 @@ export type WorkflowSettings = {
   extraHttpHeaders: string | null;
   useScriptCache: boolean;
   scriptCacheKey: string | null;
+  aiFallback: boolean | null;
 };
 
 export type WorkflowModel = JsonObjectExtendable<{ model_name: string }>;

skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts

@@ -16,6 +16,7 @@ export type WorkflowCreateYAMLRequest = {
   extra_http_headers?: Record<string, string> | null;
   generate_script?: boolean;
   cache_key?: string | null;
+  ai_fallback?: boolean;
 };
 
 export type WorkflowDefinitionYAML = {

skyvern-frontend/src/store/WorkflowHasChangesStore.ts

@@ -116,6 +116,7 @@ const useWorkflowSave = () => {
         extra_http_headers: extraHttpHeaders,
         generate_script: saveData.settings.useScriptCache,
         cache_key: normalizedKey,
+        ai_fallback: saveData.settings.aiFallback ?? undefined,
         workflow_definition: {
           parameters: saveData.parameters,
           blocks: saveData.blocks,