workflow run sequential key frontend (#3511)

skyvern-frontend/src/routes/workflows/components/WorkflowVisualComparisonDrawer.tsx

@@ -128,6 +128,7 @@ function getWorkflowElements(version: WorkflowVersion) {
     scriptCacheKey: version.cache_key,
     aiFallback: version.ai_fallback ?? true,
     runSequentially: version.run_sequentially ?? false,
+    sequentialKey: version.sequential_key ?? null,
   };
 
   return getElements(

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

@@ -65,6 +65,7 @@ function Debugger() {
     scriptCacheKey: workflow.cache_key,
     aiFallback: workflow.ai_fallback ?? true,
     runSequentially: workflow.run_sequentially ?? false,
+    sequentialKey: workflow.sequential_key ?? null,
   };
 
   const elements = getElements(

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

@@ -66,6 +66,7 @@ function WorkflowEditor() {
     scriptCacheKey: workflow.cache_key,
     aiFallback: workflow.ai_fallback ?? true,
     runSequentially: workflow.run_sequentially ?? false,
+    sequentialKey: workflow.sequential_key ?? null,
   };
 
   const elements = getElements(

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

@@ -687,6 +687,7 @@ function Workspace({
       scriptCacheKey: selectedVersion.cache_key,
       aiFallback: selectedVersion.ai_fallback ?? true,
       runSequentially: selectedVersion.run_sequentially ?? false,
+      sequentialKey: selectedVersion.sequential_key ?? null,
     };
 
     const elements = getElements(

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

@@ -183,4 +183,5 @@ export const placeholders = {
   scripts: {
     scriptKey: "my-{{param1}}-{{param2}}-key",
   },
+  sequentialKey: "my-{{param1}}-{{param2}}-sequential",
 };

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

@@ -76,6 +76,7 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
     scriptCacheKey: data.withWorkflowSettings ? data.scriptCacheKey : null,
     aiFallback: data.withWorkflowSettings ? data.aiFallback : true,
     runSequentially: data.withWorkflowSettings ? data.runSequentially : false,
+    sequentialKey: data.withWorkflowSettings ? data.sequentialKey : null,
   });
 
   const [facing, setFacing] = useState<"front" | "back">("front");
@@ -253,18 +254,40 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
                         </div>
                         {/* )} */}
                       </div>
-                      <div className="space-y-2">
+                      <div className="flex flex-col gap-4">
-                        <div className="flex items-center gap-2">
+                        <div className="space-y-2">
-                          <Label>Run Sequentially</Label>
+                          <div className="flex items-center gap-2">
-                          <HelpTooltip content="Run the workflow in a sequential order" />
+                            <Label>Run Sequentially</Label>
-                          <Switch
+                            <HelpTooltip content="Run the workflow in a sequential order" />
-                            className="ml-auto"
+                            <Switch
-                            checked={inputs.runSequentially}
+                              className="ml-auto"
-                            onCheckedChange={(value) => {
+                              checked={inputs.runSequentially}
-                              handleChange("runSequentially", value);
+                              onCheckedChange={(value) => {
-                            }}
+                                handleChange("runSequentially", value);
-                          />
+                              }}
+                            />
+                          </div>
                         </div>
+                        {inputs.runSequentially && (
+                          <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>Sequential Key (optional)</Label>
+                                <HelpTooltip content="A static or dynamic key for directing sequential workflow execution." />
+                              </div>
+                              <WorkflowBlockInputTextarea
+                                nodeId={id}
+                                onChange={(value) => {
+                                  const v = value.length ? value : null;
+                                  handleChange("sequentialKey", v);
+                                }}
+                                value={inputs.sequentialKey ?? ""}
+                                placeholder={placeholders["sequentialKey"]}
+                                className="nopan text-xs"
+                              />
+                            </div>
+                          </div>
+                        )}
                       </div>
                       <div className="space-y-2">
                         <div className="flex items-center gap-2">

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

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

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

@@ -154,6 +154,7 @@ function getWorkflowElements(version: WorkflowVersion) {
     scriptCacheKey: version.cache_key,
     aiFallback: version.ai_fallback ?? true,
     runSequentially: version.run_sequentially ?? false,
+    sequentialKey: version.sequential_key ?? null,
   };
 
   // Deep clone the blocks to ensure complete isolation from main editor

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

@@ -709,6 +709,7 @@ function getElements(
       label: "__start_block__",
       showCode: false,
       runSequentially: settings.runSequentially,
+      sequentialKey: settings.sequentialKey,
     }),
   );
 
@@ -1420,6 +1421,7 @@ function getWorkflowSettings(nodes: Array<AppNode>): WorkflowSettings {
     scriptCacheKey: null,
     aiFallback: true,
     runSequentially: false,
+    sequentialKey: null,
   };
   const startNodes = nodes.filter(isStartNode);
   const startNodeWithWorkflowSettings = startNodes.find(
@@ -1441,6 +1443,7 @@ function getWorkflowSettings(nodes: Array<AppNode>): WorkflowSettings {
       scriptCacheKey: data.scriptCacheKey,
       aiFallback: data.aiFallback,
       runSequentially: data.runSequentially,
+      sequentialKey: data.sequentialKey,
     };
   }
   return defaultSettings;
@@ -2134,6 +2137,7 @@ function convert(workflow: WorkflowApiResponse): WorkflowCreateYAMLRequest {
     cache_key: workflow.cache_key,
     ai_fallback: workflow.ai_fallback ?? undefined,
     run_sequentially: workflow.run_sequentially ?? undefined,
+    sequential_key: workflow.sequential_key ?? undefined,
   };
 }
 

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

@@ -531,6 +531,7 @@ export type WorkflowApiResponse = {
   cache_key: string | null;
   ai_fallback: boolean | null;
   run_sequentially: boolean | null;
+  sequential_key: string | null;
 };
 
 export type WorkflowSettings = {
@@ -544,6 +545,7 @@ export type WorkflowSettings = {
   scriptCacheKey: string | null;
   aiFallback: boolean | null;
   runSequentially: boolean;
+  sequentialKey: string | null;
 };
 
 export type WorkflowModel = JsonObjectExtendable<{ model_name: string }>;

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

@@ -18,6 +18,7 @@ export type WorkflowCreateYAMLRequest = {
   cache_key?: string | null;
   ai_fallback?: boolean;
   run_sequentially?: boolean;
+  sequential_key?: string | null;
 };
 
 export type WorkflowDefinitionYAML = {

skyvern-frontend/src/store/WorkflowHasChangesStore.ts

@@ -123,6 +123,7 @@ const useWorkflowSave = () => {
         },
         is_saved_task: saveData.workflow.is_saved_task,
         run_sequentially: saveData.settings.runSequentially,
+        sequential_key: saveData.settings.sequentialKey,
       };
 
       const yaml = convertToYAML(requestBody);