windmill-components 1.532.0 → 1.542.4

package/package/components/flows/content/FlowInput.svelte

@@ -19,14 +19,14 @@ import CaptureButton from '../../triggers/CaptureButton.svelte';
 import { getFullPath, setNestedProperty, getNestedProperty, schemaFromDiff, computeDiff, applyDiff } from '../../schema/schemaUtils.svelte';
 import SideBarTab from '../../meltComponents/SideBarTab.svelte';
 import CaptureTable from '../../triggers/CaptureTable.svelte';
-import { isObjectTooBig } from '../../../utils';
+import { isObjectTooBig, readFieldsRecursively } from '../../../utils';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
-let { noEditor, disabled, onTestFlow } = $props();
+import { deepEqual } from 'fast-equals';
+let { noEditor, disabled, onTestFlow, previewOpen } = $props();
 const { flowStore, previewArgs, pathStore, initialPathStore, fakeInitialPath, flowInputEditorState } = getContext('FlowEditorContext');
 let addPropertyV2 = $state(undefined);
 let previewSchema = $state(undefined);
 let payloadData = undefined;
-let previewArguments = $state(previewArgs.val);
 let dropdownItems = $state([]);
 let diff = $state({});
 let editPanelSize = $state($flowInputEditorState?.editPanelSize ?? 0);
@@ -35,8 +35,8 @@ let runDisabled = $state(false);
 let editableSchemaForm = $state(undefined);
 let savedPreviewArgs = $state(undefined);
 let isValid = $state(true);
-let dynSelectCode = $state(undefined);
-let dynSelectLang = $state(undefined);
+let dynCode = $state(undefined);
+let dynLang = $state(undefined);
 function updateEditPanelSize(size) {
     if (!$flowInputEditorState)
         return;
@@ -148,7 +148,9 @@ function schemaFromPayload(payloadData) {
 }
 function handleKeydown(event) {
     if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-        runPreview();
+        if (!previewOpen) {
+            runPreview();
+        }
     }
     else if (event.key === 'Enter' && previewSchema && !preventEnter) {
         applySchemaAndArgs();
@@ -158,9 +160,6 @@ function handleKeydown(event) {
     }
 }
 function runPreview() {
-    if (previewArguments) {
-        previewArgs.val = structuredClone($state.snapshot(previewArguments));
-    }
     onTestFlow?.();
 }
 function updatePreviewSchemaAndArgs(payload) {
@@ -198,8 +197,8 @@ async function updatePreviewSchema(newSchema) {
 }
 async function applySchemaAndArgs() {
     flowStore.val.schema = applyDiff(flowStore.val.schema, diff);
-    if (previewArguments) {
-        savedPreviewArgs = structuredClone($state.snapshot(previewArguments));
+    if (previewArgs.val) {
+        savedPreviewArgs = structuredClone($state.snapshot(previewArgs.val));
     }
     updatePreviewSchemaAndArgs(undefined);
     if ($flowInputEditorState) {
@@ -208,11 +207,13 @@ async function applySchemaAndArgs() {
 }
 function updatePreviewArguments(payloadData) {
     if (!payloadData) {
-        previewArguments = savedPreviewArgs;
+        if (savedPreviewArgs) {
+            previewArgs.val = savedPreviewArgs;
+        }
         return;
     }
-    savedPreviewArgs = structuredClone($state.snapshot(previewArguments));
-    previewArguments = structuredClone($state.snapshot(payloadData));
+    savedPreviewArgs = structuredClone($state.snapshot(previewArgs.val));
+    previewArgs.val = structuredClone($state.snapshot(payloadData));
 }
 let tabButtonWidth = 0;
 let connectFirstNode = $state(() => { });
@@ -267,10 +268,17 @@ function handleChange(arg, currentSchema, diffSchema, updateCurrentSchema) {
 }
 function resetArgs() {
     if (!previewSchema) {
-        // previewArguments = undefined
         savedPreviewArgs = undefined;
     }
 }
+$effect(() => {
+    if (!previewArgs && savedPreviewArgs != undefined) {
+        readFieldsRecursively(flowStore.val.schema);
+        untrack(() => {
+            resetArgs();
+        });
+    }
+});
 let historicInputs = $state(undefined);
 let captureTable = $state(undefined);
 let savedInputsPicker = $state(undefined);
@@ -295,17 +303,14 @@ function resetSelected() {
 				bind:this={editableSchemaForm}
 				bind:schema={flowStore.val.schema}
 				isFlowInput
-				on:edit={(e) => {
-					addPropertyV2?.openDrawer(e.detail)
-				}}
 				on:delete={(e) => {
 					addPropertyV2?.handleDeleteArgument([e.detail])
 				}}
-				showDynSelectOpt
+				showDynOpt
 				displayWebhookWarning
 				editTab={$flowInputEditorState?.selectedTab}
 				{previewSchema}
-				bind:args={previewArguments}
+				bind:args={previewArgs.val}
 				bind:editPanelSize={
 					() => {
 						return editPanelSize
@@ -331,19 +336,17 @@ function resetSelected() {
 					})
 				}}
 				shouldDispatchChanges={true}
-				on:change={() => {
-					previewArguments = previewArguments
+				onChange={() => {
 					if (!previewSchema) {
-						savedPreviewArgs = structuredClone($state.snapshot(previewArguments))
+						let args = $state.snapshot(previewArgs.val)
+						if (!deepEqual(args, savedPreviewArgs)) {
+							savedPreviewArgs = args
+						}
 					}
-					refreshStateStore(flowStore)
-				}}
-				on:schemaChange={() => {
-					resetArgs()
 				}}
 				bind:isValid
-				bind:dynSelectCode
-				bind:dynSelectLang
+				bind:dynCode
+				bind:dynLang
 			>
 				{#snippet openEditTab()}
 					<div class={twMerge('flex flex-row divide-x', ButtonType.ColorVariants.blue.divider)}>
@@ -408,15 +411,9 @@ function resetSelected() {
 						<AddPropertyV2
 							bind:schema={flowStore.val.schema}
 							bind:this={addPropertyV2}
-							on:change={() => {
-								refreshStateStore(flowStore)
-								if (editableSchemaForm) {
-									editableSchemaForm.updateJson()
-								}
-							}}
-							on:addNew={(e) => {
+							onAddNew={(argName) => {
 								handleEditSchema('inputEditor')
-								editableSchemaForm?.openField(e.detail)
+								editableSchemaForm?.openField(argName)
 								refreshStateStore(flowStore)
 							}}
 						>
@@ -493,7 +490,7 @@ function resetSelected() {
 								on:isEditing={(e) => {
 									preventEnter = e.detail
 								}}
-								previewArgs={previewArguments}
+								previewArgs={previewArgs.val}
 								{isValid}
 								limitPayloadSize
 								bind:this={savedInputsPicker}
@@ -516,7 +513,7 @@ function resetSelected() {
 								on:select={(e) => {
 									updatePreviewSchemaAndArgs(e.detail ?? undefined)
 								}}
-								selected={!!previewArguments}
+								selected={!!previewArgs.val}
 								bind:this={jsonInputs}
 							/>
 						</FlowInputEditor>

package/package/components/flows/content/FlowInput.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     noEditor: boolean;
     disabled: boolean;
     onTestFlow?: () => void;
+    previewOpen: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/content/FlowLoop.svelte

@@ -20,10 +20,17 @@ import FlowModuleSkip from './FlowModuleSkip.svelte';
 import FlowPlugConnect from '../../FlowPlugConnect.svelte';
 import PropPickerWrapper, { CONNECT } from '../propPicker/PropPickerWrapper.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 const { previewArgs, flowStateStore, flowStore, currentEditor } = getContext('FlowEditorContext');
 let { mod = $bindable(), parentModule, previousModule, noEditor, enableAi = false } = $props();
 let editor = $state(undefined);
 let selected = $state('early-stop');
+// UI Intent handling for AI tool control
+useUiIntent(`forloopflow-${mod.id}`, {
+    openTab: (tab) => {
+        selected = tab;
+    }
+});
 const { flowPropPickerConfig } = getContext('PropPickerContext');
 flowPropPickerConfig.set(undefined);
 let stepPropPicker = $derived(getStepPropPicker(flowStateStore.val, parentModule, previousModule, mod.id, flowStore.val, previewArgs.val, false));

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -30,7 +30,7 @@ import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
 import FlowModuleMockTransitionMessage from './FlowModuleMockTransitionMessage.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { SecondsInput } from '../../common';
-import DiffEditor from '../../DiffEditor.svelte';
+import DiffEditor, {} from '../../DiffEditor.svelte';
 import FlowModuleTimeout from './FlowModuleTimeout.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -41,18 +41,29 @@ import { enterpriseLicense } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import { loadSchemaFromModule } from '../flowInfers';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
-import { JobService } from '../../../gen';
+import {} from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { checkIfParentLoop } from '../utils';
 import ModulePreviewResultViewer from '../../ModulePreviewResultViewer.svelte';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import AssetsDropdownButton from '../../assets/AssetsDropdownButton.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
+import { editor as meditor } from 'monaco-editor';
 const { selectedId, currentEditor, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, customUi, executionCount } = getContext('FlowEditorContext');
 let { flowModule = $bindable(), failureModule = false, preprocessorModule = false, parentModule = $bindable(), previousModule, scriptKind = 'script', scriptTemplate = 'script', noEditor, enableAi, savedModule = undefined, forceTestTab = false, highlightArg = undefined, isAgentTool = false } = $props();
 let workspaceScriptTag = $state(undefined);
 let workspaceScriptLang = $state(undefined);
 let diffMode = $state(false);
+let diffButtons = $state([
+    {
+        text: 'Quit diff mode',
+        color: 'red',
+        onClick: () => {
+            hideDiffMode();
+        }
+    }
+]);
 let editor = $state();
 let diffEditor = $state();
 let modulePreview = $state();
@@ -69,11 +80,16 @@ let advancedRuntimeSelected = $state('concurrency');
 let s3Kind = $state('s3_client');
 let validCode = $state(true);
 let width = $state(1200);
-let lastJob = $state(undefined);
 let testJob = $state(undefined);
 let testIsLoading = $state(false);
 let scriptProgress = $state(undefined);
 let assets = $derived((flowModule.value.type === 'rawscript' && flowModule.value.assets) || []);
+// UI Intent handling for AI tool control
+useUiIntent(`flow-${flowModule.id}`, {
+    openTab: (tab) => {
+        selectAdvanced(tab);
+    }
+});
 function onModulesChange(savedModule, flowModule) {
     // console.log('onModulesChange', savedModule, flowModule)
     return savedModule?.value?.type === 'rawscript' &&
@@ -138,41 +154,16 @@ let forceReload = $state(0);
 let editorPanelSize = $state(noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50);
 let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize));
 let stepHistoryLoader = getStepHistoryLoaderContext();
-let lastJobId = undefined;
 function onSelectedIdChange() {
     if (!flowStateStore?.val?.[$selectedId]?.schema && flowModule) {
         reload(flowModule);
     }
-    lastJobId = undefined;
-}
-async function getLastJob() {
-    if (!flowStateStore ||
-        !flowModule.id ||
-        flowStateStore.val[flowModule.id]?.previewResult === 'never tested this far' ||
-        !flowStateStore.val[flowModule.id]?.previewJobId) {
-        return;
-    }
-    if (lastJobId == flowStateStore.val[flowModule.id]?.previewJobId ||
-        lastJob?.id == flowStateStore.val[flowModule.id]?.previewJobId ||
-        flowStateStore.val[flowModule.id]?.previewSuccess == undefined) {
-        return;
-    }
-    lastJobId = flowStateStore.val[flowModule.id]?.previewJobId;
-    const job = await JobService.getJob({
-        workspace: $workspaceStore ?? '',
-        id: flowStateStore.val[flowModule.id]?.previewJobId ?? '',
-        noCode: true
-    });
-    if (job && job.type === 'CompletedJob') {
-        lastJobId = flowStateStore.val[flowModule.id]?.previewJobId;
-        lastJob = job;
-    }
 }
 let leftPanelSize = $state(0);
 function showDiffMode() {
     diffMode = true;
     diffEditor?.setOriginal((savedModule?.value).content ?? '');
-    diffEditor?.setModified(editor?.getCode() ?? '');
+    diffEditor?.setModifiedModel(editor?.getModel());
     diffEditor?.show();
     editor?.hide();
 }
@@ -188,14 +179,6 @@ let stepPropPicker = $derived($executionCount != undefined && failureModule
 $effect.pre(() => {
     $selectedId && untrack(() => onSelectedIdChange());
 });
-$effect(() => {
-    if (testJob && testJob.type === 'CompletedJob') {
-        lastJob = $state.snapshot(testJob);
-    }
-    else if ($workspaceStore && $pathStore && flowModule?.id && flowStateStore) {
-        untrack(() => getLastJob());
-    }
-});
 let parentLoop = $derived(flowStore.val && flowModule ? checkIfParentLoop(flowStore.val, flowModule.id) : undefined);
 $effect(() => {
     if (selected === 'test') {
@@ -214,7 +197,13 @@ $effect(() => {
             showDiffMode,
             hideDiffMode,
             diffMode,
-            lastDeployedCode
+            lastDeployedCode,
+            setDiffOriginal: (code) => {
+                diffEditor?.setOriginal(code ?? '');
+            },
+            setDiffButtons: (buttons) => {
+                diffButtons = buttons;
+            }
         });
 });
 onDestroy(() => {
@@ -234,6 +223,10 @@ $effect(() => {
     }
 });
 let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.value.language : undefined);
+let modulePreviewResultViewer = $state(undefined);
+function onJobDone() {
+    modulePreviewResultViewer?.getOutputPickerInner()?.setJobPreview();
+}
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -395,13 +388,12 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 											<DiffEditor
 												open={false}
 												bind:this={diffEditor}
+												modifiedModel={editor?.getModel() as meditor.ITextModel}
 												automaticLayout
 												fixedOverflowWidgets
 												defaultLang={scriptLangToEditorLang(flowModule.value.language)}
-												class="h-full"
-												showButtons={diffMode}
-												showHistoryButton={false}
-												on:hideDiffMode={hideDiffMode}
+												className="h-full"
+												buttons={diffMode ? diffButtons : []}
 											/>
 										{/key}
 									{/if}
@@ -508,6 +500,7 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 												bind:testIsLoading
 												bind:scriptProgress
 												focusArg={highlightArg}
+												{onJobDone}
 											/>
 										{:else if selected === 'advanced'}
 											<Tabs bind:selected={advancedSelected}>
@@ -571,7 +564,7 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 															</Tooltip>
 														</div>
 														<div class="my-8"></div>
-														<FlowRetries bind:flowModuleRetry={flowModule.retry} />
+														<FlowRetries bind:flowModuleRetry={flowModule.retry} bind:flowModule />
 													</Section>
 												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'concurrency'}
 													<Section label="Concurrency limits" class="flex flex-col gap-4" eeOnly>
@@ -633,7 +626,10 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 													</Section>
 												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'timeout'}
 													<div>
-														<FlowModuleTimeout bind:flowModule />
+														<FlowModuleTimeout
+															previousModuleId={previousModule?.id}
+															bind:flowModule
+														/>
 													</div>
 												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'priority'}
 													<Section label="Priority" class="flex flex-col gap-4">
@@ -812,15 +808,15 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 												flowModule = flowModule
 												refreshStateStore(flowStore)
 											}}
-											{lastJob}
-											{scriptProgress}
 											{testJob}
+											{scriptProgress}
 											mod={flowModule}
 											{testIsLoading}
 											disableMock={preprocessorModule || failureModule}
 											disableHistory={failureModule}
 											loadingJob={stepHistoryLoader?.stepStates[flowModule.id]?.loadingJobs}
 											tagLabel={customUi?.tagLabel}
+											bind:this={modulePreviewResultViewer}
 										/>
 									</Pane>
 								{/if}

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -11,40 +11,50 @@ const { flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext
 let { flowModule = $bindable() } = $props();
 let editor = $state(undefined);
 let stepPropPicker = $derived(getStepPropPicker(flowStateStore.val, undefined, undefined, flowModule.id, flowStore.val, previewArgs.val, false));
-function checkIfParentLoop(flowStoreValue) {
+function checkIfBreakableParent(flowStoreValue) {
     const flow = JSON.parse(JSON.stringify(flowStoreValue));
     const parents = dfs(flowModule.id, flow, true);
     for (const parent of parents.slice(1)) {
         if (parent.value.type === 'forloopflow' || parent.value.type === 'whileloopflow') {
-            return parent.id;
+            return { stepId: parent.id, isParallel: parent.value.parallel ?? false, type: 'loop' };
+        }
+        else if (parent.value.type === 'branchall' && parent.value.parallel) {
+            return { stepId: parent.id, isParallel: true, type: 'branchall' };
         }
     }
     return null;
 }
 let raise_error_message_stop_after_all_if = $state(flowModule.stop_after_all_iters_if?.error_message !== undefined);
 let raise_error_message_stop_after_if = $state(flowModule.stop_after_if?.error_message !== undefined);
-let isLoop = $derived(flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow');
+let { isLoop, isParallelLoop } = $derived(flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow'
+    ? { isLoop: true, isParallelLoop: flowModule.value.parallel ?? false }
+    : { isLoop: false, isParallelLoop: false });
 let isBranchAll = $derived(flowModule.value.type === 'branchall');
 let isStopAfterIfEnabled = $derived(Boolean(flowModule.stop_after_if));
 let isStopAfterAllIterationsEnabled = $derived(Boolean(flowModule.stop_after_all_iters_if));
 let result = $derived(flowStateStore.val[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR);
-let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
+let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 </script>
 
 <div class="flex flex-col items-start space-y-2">
-	{#if !isBranchAll}
+	{#if !isBranchAll && !isParallelLoop}
 		<Section
 			label={(isLoop
 				? 'Break loop'
-				: parentLoopId
-					? 'Break parent loop module ' + parentLoopId
+				: breakableParent
+					? breakableParent.isParallel
+						? breakableParent.type === 'loop'
+							? 'Skip rest of steps in iteration'
+							: 'Skip rest of steps in branch'
+						: 'Break parent loop module ' + breakableParent.stepId
 					: 'Stop flow early') + (isLoop ? ' (evaluated after each iteration)' : '')}
 			class="w-full"
 		>
 			{#snippet header()}
 				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
 					If defined, at the end of the step, the predicate expression will be evaluated to decide
-					if the flow should stop early or break if inside a for/while loop.
+					if the flow should stop early, skip rest of steps in iteration/branch if inside a parallel
+					for loop or branch all, or break if inside a for/while loop or branch all.
 				</Tooltip>
 			{/snippet}
 
@@ -64,8 +74,12 @@ let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 				options={{
 					right: isLoop
 						? 'Break loop'
-						: parentLoopId
-							? 'Break parent loop module'
+						: breakableParent
+							? breakableParent.isParallel
+								? breakableParent.type === 'loop'
+									? 'Skip rest of steps in iteration'
+									: 'Skip rest of steps in branch'
+								: 'Break parent loop module'
 							: 'Stop flow if condition met'
 				}}
 			/>
@@ -83,7 +97,7 @@ let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 								? result
 								: undefined
 						: result}
-					{#if !parentLoopId && !isLoop}
+					{#if !breakableParent && !isLoop}
 						<div class="flex flex-col gap-2">
 							<Toggle
 								size="xs"
@@ -140,15 +154,17 @@ let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 						</PropPickerWrapper>
 					</div>
 				{:else}
-					{#if !parentLoopId && !isLoop}
+					{#if !breakableParent && !isLoop}
 						<div class="flex flex-col gap-2">
 							<Toggle
+								disabled
 								size="xs"
 								options={{
 									right: 'Label flow as "skipped" if stopped'
 								}}
 							/>
 							<Toggle
+								disabled
 								size="xs"
 								options={{
 									right: 'Raise an error message if stopped'
@@ -165,7 +181,13 @@ let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 
 	{#if isLoop || isBranchAll}
 		<Section
-			label={(parentLoopId ? 'Break parent loop module ' + parentLoopId : 'Stop flow early') +
+			label={(breakableParent
+				? breakableParent.isParallel
+					? breakableParent.type === 'loop'
+						? 'Skip rest of steps in iteration'
+						: 'Skip rest of steps in branch'
+					: 'Break parent loop module ' + breakableParent.stepId
+				: 'Stop flow early') +
 				(isBranchAll
 					? ' (evaluated after all branches have been run)'
 					: ' (evaluated after all iterations)')}
@@ -174,7 +196,8 @@ let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 			{#snippet header()}
 				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
 					If defined, at the end of the step, the predicate expression will be evaluated to decide
-					if the flow should stop early or break if inside a for/while loop.
+					if the flow should stop early, skip rest of steps in iteration/branch if inside a parallel
+					for loop or branch all, or break if inside a for/while loop or branch all.
 				</Tooltip>
 			{/snippet}
 
@@ -192,7 +215,14 @@ let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 					}
 				}}
 				options={{
-					right: (parentLoopId ? 'Break parent loop module' : 'Stop flow') + ' if condition met'
+					right:
+						(breakableParent
+							? breakableParent.isParallel
+								? breakableParent.type === 'loop'
+									? 'Skip rest of steps in iteration'
+									: 'Skip rest of steps in branch'
+								: 'Break parent loop module ' + breakableParent.stepId
+							: 'Stop flow') + ' if condition met'
 				}}
 			/>
 
@@ -202,7 +232,7 @@ let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 					: 'bg-surface-secondary'}"
 			>
 				{#if flowModule.stop_after_all_iters_if}
-					{#if !parentLoopId}
+					{#if !breakableParent}
 						<div class="flex flex-col gap-2">
 							<Toggle
 								size="xs"
@@ -258,7 +288,7 @@ let parentLoopId = $derived(checkIfParentLoop(flowStore.val));
 						</PropPickerWrapper>
 					</div>
 				{:else}
-					{#if !parentLoopId}
+					{#if !breakableParent}
 						<div class="flex flex-col gap-2">
 							<Toggle
 								disabled

package/package/components/flows/content/FlowModuleScript.svelte

@@ -101,7 +101,7 @@ $effect.pre(() => {
 				{:then Module}
 					<Module.default
 						open={true}
-						class="h-screen"
+						className="h-screen"
 						readOnly
 						automaticLayout
 						defaultLang={scriptLangToEditorLang(language)}

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -7,13 +7,15 @@ import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import { SecondsInput } from '../../common';
 import Section from '../../Section.svelte';
 import Label from '../../Label.svelte';
+import { getStepPropPicker } from '../previousResults';
 let { flowModule = $bindable(), previousModuleId } = $props();
-const { selectedId, flowStateStore } = getContext('FlowEditorContext');
+const { selectedId, flowStore, flowStateStore, previewArgs } = getContext('FlowEditorContext');
 let schema = $state(emptySchema());
 schema.properties['sleep'] = {
     type: 'number'
 };
 let editor = $state(undefined);
+let stepPropPicker = $derived(getStepPropPicker(flowStateStore.val, undefined, undefined, flowModule.id, flowStore.val, previewArgs.val, false));
 const result = flowStateStore.val[$selectedId]?.previewResult ?? {};
 let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 </script>
@@ -47,6 +49,7 @@ let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 			<div class="border">
 				<PropPickerWrapper
 					noFlowPlugConnect={true}
+					flow_input={stepPropPicker.pickableProperties.flow_input}
 					notSelectable
 					{result}
 					displayContext={false}

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import Toggle from '../../Toggle.svelte';
+<script lang="ts">import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import InputTransformForm from '../../InputTransformForm.svelte';
 import { getContext, tick, untrack } from 'svelte';
@@ -32,13 +31,25 @@ async function loadGroups() {
         }
     };
 }
-run(() => {
+$effect(() => {
     if ($workspaceStore && allUserGroups.length === 0) {
         untrack(() => {
             loadGroups();
         });
     }
 });
+$effect(() => {
+    // If the schema is empty, remove the form
+    if (Object.keys(flowModule?.suspend?.resume_form?.schema?.properties ?? {}).length === 0) {
+        untrack(() => {
+            tick().then(() => {
+                if (!flowModule.suspend)
+                    return;
+                flowModule.suspend.resume_form = undefined;
+            });
+        });
+    }
+});
 let jsonView = $state(false);
 </script>
 
@@ -216,21 +227,7 @@ let jsonView = $state(false);
 		<div class="grid grid-cols-4 mt-4 gap-8">
 			<div class="col-span-2">
 				{#if flowModule?.suspend?.resume_form}
-					<EditableSchemaDrawer
-						bind:schema={flowModule.suspend.resume_form.schema}
-						on:change={(e) => {
-							const schema = e.detail
-
-							// If the schema is empty, remove the form
-							if (Object.keys(schema?.properties ?? {}).length === 0) {
-								tick().then(() => {
-									if (!flowModule.suspend) return
-									flowModule.suspend.resume_form = undefined
-								})
-							}
-						}}
-						{jsonView}
-					/>
+					<EditableSchemaDrawer bind:schema={flowModule.suspend.resume_form.schema} {jsonView} />
 				{:else if emptyString($enterpriseLicense)}
 					<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
 				{:else}