windmill-components 1.532.0 → 1.537.1

package/package/components/Editor.svelte

@@ -107,7 +107,7 @@ import AIChatInlineWidget from './copilot/chat/AIChatInlineWidget.svelte';
 import { writable } from 'svelte/store';
 import { formatResourceTypes } from './copilot/chat/script/core';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
-import { editorPositionMap, readFieldsRecursively } from '../utils';
+import { editorPositionMap } from '../utils';
 import { extToLang, langToExt } from '../editorLangUtils';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { getDbSchemas } from './apps/components/display/dbtable/utils';
@@ -406,8 +406,7 @@ function addSqlTypeCompletions() {
     });
 }
 let sqlSchemaCompletor = undefined;
-async function updateSchema() {
-    const newSchemaRes = lang === 'graphql' ? args?.api : args?.database;
+async function updateSchema(newSchemaRes) {
     if (typeof newSchemaRes === 'string') {
         const resourcePath = newSchemaRes.replace('$res:', '');
         dbSchema = $dbSchemas[resourcePath];
@@ -530,7 +529,16 @@ let showInlineAIChat = $state(false);
 let inlineAIChatSelection = $state(null);
 let selectedCode = $state('');
 export function reviewAndApplyCode(code, applyAll = false) {
-    aiChatEditorHandler?.reviewAndApply(code, applyAll);
+    aiChatEditorHandler?.reviewChanges(code, { applyAll, mode: 'apply' });
+}
+export function reviewAppliedCode(originalCode, opts) {
+    aiChatEditorHandler?.reviewChanges(originalCode, {
+        mode: 'revert',
+        onFinishedReview: opts?.onFinishedReview
+    });
+}
+export function getAiChatEditorHandler() {
+    return aiChatEditorHandler;
 }
 function addChatHandler(editor) {
     try {
@@ -1322,10 +1330,13 @@ $effect(() => {
         ? untrack(() => addSqlTypeCompletions())
         : sqlTypeCompletor?.dispose();
 });
+let lastArg = undefined;
 $effect(() => {
-    console.log('updating schema', lang, $dbSchemas);
-    readFieldsRecursively(args);
-    lang && $dbSchemas && untrack(() => updateSchema());
+    let newArg = lang === 'graphql' ? args?.api : args?.database;
+    if (newArg !== lastArg) {
+        lastArg = newArg;
+        $dbSchemas && untrack(() => updateSchema(newArg));
+    }
 });
 $effect(() => {
     console.log('updating db schema completions', dbSchema, lang);
@@ -1396,10 +1407,20 @@ $effect(() => {
 {#if $reviewingChanges}
 	<GlobalReviewButtons
 		onAcceptAll={() => {
-			aiChatEditorHandler?.acceptAll()
+			const mode = aiChatEditorHandler?.getReviewMode?.()
+			if (mode === 'revert') {
+				aiChatEditorHandler?.keepAll()
+			} else {
+				aiChatEditorHandler?.acceptAll()
+			}
 		}}
 		onRejectAll={() => {
-			aiChatEditorHandler?.rejectAll()
+			const mode = aiChatEditorHandler?.getReviewMode?.()
+			if (mode === 'revert') {
+				aiChatEditorHandler?.revertAll()
+			} else {
+				aiChatEditorHandler?.rejectAll()
+			}
 		}}
 	/>
 {/if}

package/package/components/Editor.svelte.d.ts

@@ -4,6 +4,7 @@ import { type Preview } from '../gen';
 import type { Text } from 'yjs';
 import { editor as meditor, type IDisposable } from 'monaco-editor';
 import { type DepsToGet } from '../ata/index';
+import { AIChatEditorHandler } from './copilot/chat/monaco-adapter';
 interface Props {
     code?: string;
     cmdEnterAction?: (() => void) | undefined;
@@ -73,6 +74,10 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     format: () => Promise<void>;
     getScriptLang: () => string | undefined;
     reviewAndApplyCode: (code: string, applyAll?: boolean) => void;
+    reviewAppliedCode: (originalCode: string, opts?: {
+        onFinishedReview?: () => void;
+    }) => void;
+    getAiChatEditorHandler: () => AIChatEditorHandler | undefined;
     reloadWebsocket: () => Promise<void>;
     fetchPackageDeps: (deps: DepsToGet) => Promise<void>;
     addAction: (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;

package/package/components/FlowBuilder.svelte

@@ -33,7 +33,7 @@ import DeployButton from './DeployButton.svelte';
 import { deployTriggers, filterDraftTriggers, handleSelectTriggerFromKind } from './triggers/utils';
 import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte';
 import { Triggers } from './triggers/triggers.svelte';
-import { TestSteps } from './flows/testSteps.svelte';
+import { StepsInputArgs } from './flows/stepsInputArgs.svelte';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
@@ -440,7 +440,7 @@ const flowInputEditorStateStore = writable({
     editPanelSize: 0,
     payloadData: undefined
 });
-const testSteps = new TestSteps();
+const stepsInputArgs = new StepsInputArgs();
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
@@ -458,7 +458,7 @@ setContext('FlowEditorContext', {
     flowStateStore,
     flowStore,
     pathStore,
-    testSteps,
+    stepsInputArgs,
     saveDraft,
     initialPathStore,
     fakeInitialPath,
@@ -909,6 +909,8 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						bind:this={flowPreviewButtons}
 						{loading}
 						onRunPreview={() => {
+							// Reset manually edited args inputs when running a preview
+							stepsInputArgs.resetManuallyEditedArgs()
 							modulesTestStates.hideJobsInGraph()
 							localModuleStates = {}
 							showJobStatus = true
@@ -950,7 +952,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					{newFlow}
 					on:applyArgs={(ev) => {
 						if (ev.detail.kind === 'preprocessor') {
-							testSteps.setStepArgs('preprocessor', ev.detail.args ?? {})
+							stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
 							$selectedIdStore = 'preprocessor'
 						}
 					}}
@@ -998,6 +1000,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						delete modulesTestStates.states[id]
 					}}
 					{flowHasChanged}
+					previewOpen={flowPreviewButtons?.getPreviewOpen()}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>

package/package/components/FlowPreviewContent.svelte

@@ -67,7 +67,7 @@ export async function runPreview(args, restartedFrom) {
         jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
         isRunning = true;
         if (inputSelected) {
-            savedArgs = previewArgs.val;
+            savedArgs = $state.snapshot(previewArgs.val);
             inputSelected = undefined;
         }
         onRunPreview?.();
@@ -92,7 +92,7 @@ function onKeyDown(event) {
                 if (preventEscape) {
                     selectInput(undefined);
                     event.preventDefault();
-                    event.stopPropagation;
+                    event.stopPropagation();
                 }
                 break;
         }
@@ -423,7 +423,7 @@ export function flowHasChanged() {
 									schema={flowStore.val.schema}
 									bind:args={previewArgs.val}
 									on:change={() => {
-										savedArgs = previewArgs.val
+										savedArgs = $state.snapshot(previewArgs.val)
 									}}
 									bind:isValid
 									helperScript={flowStore.val.schema?.['x-windmill-dyn-select-code'] &&

package/package/components/FlowStatusViewer.svelte

@@ -43,6 +43,8 @@ let refreshGlobal = async (moduleId, clear, root) => {
 let updateGlobalRefresh = (moduleId, updateFn) => {
     globalRefreshes[moduleId] = [...(globalRefreshes[moduleId] ?? []), updateFn];
 };
+let storedToolCallJobs = $state({});
+let toolCallIndicesToLoad = $state([]);
 </script>
 
 <FlowStatusViewerInner
@@ -74,4 +76,30 @@ let updateGlobalRefresh = (moduleId, updateFn) => {
 	isNodeSelected={true}
 	{refreshGlobal}
 	{updateGlobalRefresh}
+	toolCallStore={{
+		getStoredToolCallJob: (storeKey: string) => storedToolCallJobs[storeKey],
+		setStoredToolCallJob: (storeKey: string, job: Job) => {
+			storedToolCallJobs[storeKey] = job
+		},
+		getLocalToolCallJobs: (prefix: string) => {
+			// we return a map from tool call index to job
+			// to do so, we filter the storedToolCallJobs object by the prefix and we make sure what's left in the key is a tool call index: 2 part of format agentModuleId-toolCallIndex
+			// and not a further nested tool call index
+			return Object.fromEntries(
+				Object.entries(storedToolCallJobs)
+					.filter(
+						([key]) => key.startsWith(prefix) && key.replace(prefix, '').split('-').length === 2
+					)
+					.map(([key, job]) => [Number(key.replace(prefix, '').split('-').pop()), job])
+			)
+		},
+		isToolCallToBeLoaded: (storeKey: string) => {
+			return toolCallIndicesToLoad.includes(storeKey)
+		},
+		addToolCallToLoad: (storeKey: string) => {
+			if (!toolCallIndicesToLoad.includes(storeKey)) {
+				toolCallIndicesToLoad.push(storeKey)
+			}
+		}
+	}}
 />

package/package/components/FlowStatusViewerInner.svelte

@@ -16,6 +16,7 @@ import { ChevronDown, Hourglass } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
 import FlowTimeline from './FlowTimeline.svelte';
 import { dfs } from './flows/dfs';
+import { dfs as dfsPreviousResults } from './flows/previousResults';
 import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
@@ -28,7 +29,7 @@ import JobLoader from './JobLoader.svelte';
 import { writable } from 'svelte/store';
 import { AI_TOOL_CALL_PREFIX, AI_TOOL_MESSAGE_PREFIX, getToolCallId } from './graph/renderers/nodes/AIToolNode.svelte';
 let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
-let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], globalIterationBounds, updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], globalIterationBounds, updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined, toolCallStore } = $props();
 let getTopModuleStates = $derived(topModuleStates ?? localModuleStates);
 let resultStreams = $state({});
 if (onResultStreamUpdate == undefined) {
@@ -660,9 +661,7 @@ function loadPreviousIters(innerKey, lenToAdd) {
 }
 let stepDetail = $state(undefined);
 let storedListJobs = $state({});
-let storedToolCallJobs = $state({});
 let selectedToolCall = $state(undefined);
-let toolCallIndicesToLoad = $state([]);
 let wrapperHeight = $state(0);
 function removeFailureNode(id, parent_module) {
     if (id?.startsWith('failure-') && parent_module) {
@@ -689,7 +688,7 @@ function allModulesForTimeline(modules, expandedSubflows) {
             }
             let nprefix = buildPrefix(prefix, oid);
             return fms
-                ? rec(dfs(fms, (x) => x.id.startsWith('subflow:') ? x.id : buildSubflowKey(x.id, nprefix)), nprefix)
+                ? rec(dfs(fms, (x) => (x.id.startsWith('subflow:') ? x.id : buildSubflowKey(x.id, nprefix)), { skipToolNodes: true }), nprefix)
                 : [];
         }));
     }
@@ -734,6 +733,11 @@ async function onSelectedIteration(detail) {
             selectedForLoopSetManually: false
         });
     }
+    if (selectedNode?.startsWith(AI_TOOL_CALL_PREFIX)) {
+        const [, agentModuleId, toolCallIndex, _] = selectedNode.split('-');
+        const parentLoopsPrefix = getParentLoopsPrefix(agentModuleId);
+        toolCallStore?.addToolCallToLoad(parentLoopsPrefix + agentModuleId + '-' + toolCallIndex);
+    }
 }
 $effect(() => {
     flowJobIds?.moduleId && untrack(() => onFlowModuleId());
@@ -761,6 +765,27 @@ $effect(() => {
 let selected = $derived(isListJob ? 'sequence' : 'graph');
 let animateLogsTab = $state(false);
 let noLogs = $derived(graphTabOpen && !isNodeSelected);
+/**
+ * Returns a string like "forloopmodid1-{iter1}-forloopmodid2-{iter2}-forloopmodid3-{iter3}-"
+ * that can be used to prefix tool call store keys for nested tool calls.
+ */
+function getParentLoopsPrefix(modId) {
+    if (job?.raw_flow) {
+        const indices = [];
+        const parents = dfsPreviousResults(modId, { value: job?.raw_flow, summary: '' }, true);
+        for (const parent of parents) {
+            if (parent.value.type === 'forloopflow' || parent.value.type === 'whileloopflow') {
+                const state = localModuleStates[parent.id];
+                if (state?.selectedForloopIndex !== undefined) {
+                    indices.push(parent.id + '-' + state.selectedForloopIndex.toString());
+                }
+            }
+        }
+        indices.reverse();
+        return indices.length > 0 ? indices.join('-') + '-' : '';
+    }
+    return '';
+}
 </script>
 
 <JobLoader workspaceOverride={workspaceId} {noLogs} noCode bind:this={jobLoader} />
@@ -895,6 +920,10 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 							{@const forloopIsSelected =
 								forloop_selected == loopJobId ||
 								(innerModule?.type != 'forloopflow' && innerModule?.type != 'whileloopflow')}
+							{@const forLoopStoreKeyPrefix =
+								innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow'
+									? (flowJobIds?.moduleId ?? '') + '-' + j + '-'
+									: ''}
 							<!-- <LogId id={loopJobId} /> -->
 							<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 								<FlowStatusViewerInner
@@ -929,6 +958,18 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 									graphTabOpen={selected == 'graph' && graphTabOpen}
 									isNodeSelected={forloop_selected == loopJobId}
 									{globalIterationBounds}
+									toolCallStore={{
+										getStoredToolCallJob: (storeKey: string) =>
+											toolCallStore?.getStoredToolCallJob(forLoopStoreKeyPrefix + storeKey),
+										setStoredToolCallJob: (storeKey: string, job: Job) =>
+											toolCallStore?.setStoredToolCallJob(forLoopStoreKeyPrefix + storeKey, job),
+										getLocalToolCallJobs: (prefix: string) =>
+											toolCallStore?.getLocalToolCallJobs(forLoopStoreKeyPrefix + prefix) ?? {},
+										addToolCallToLoad: (storeKey: string) =>
+											toolCallStore?.addToolCallToLoad(forLoopStoreKeyPrefix + storeKey),
+										isToolCallToBeLoaded: (storeKey: string) =>
+											toolCallStore?.isToolCallToBeLoaded(forLoopStoreKeyPrefix + storeKey) ?? false
+									}}
 								/>
 							</div>
 						{/if}
@@ -1088,12 +1129,17 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 										graphTabOpen={selected == 'graph' && graphTabOpen}
 										isNodeSelected={localModuleStates?.[selectedNode ?? '']?.job_id == mod.job}
 										{globalIterationBounds}
+										{toolCallStore}
 									/>
-									{#if mod.agent_actions && mod.agent_actions.length > 0}
+									{#if mod.agent_actions && mod.agent_actions.length > 0 && mod.id}
+										{@const storeKeyPrefix = getParentLoopsPrefix(mod.id)}
 										{#each mod.agent_actions as agentAction, j}
-											{#if agentAction.type === 'tool_call' && mod.id}
+											{#if agentAction.type === 'tool_call'}
 												{@const toolCallId = getToolCallId(j, mod.id, agentAction.module_id)}
-												{@const isSelected = selectedToolCall === j}
+												{@const localToolCallKey = mod.id + '-' + j}
+												{@const storeKey = storeKeyPrefix + localToolCallKey}
+												{@const storedToolCallJob = toolCallStore?.getStoredToolCallJob(storeKey)}
+												{@const isSelected = localToolCallKey === selectedToolCall}
 												<Button
 													variant={isSelected ? 'contained' : 'border'}
 													color={mod.agent_actions_success?.[j] === false
@@ -1103,10 +1149,10 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 															: 'light'}
 													btnClasses="w-full flex justify-start"
 													on:click={async () => {
-														if (selectedToolCall == j) {
+														if (isSelected) {
 															selectedToolCall = undefined
 														} else {
-															selectedToolCall = j
+															selectedToolCall = localToolCallKey
 														}
 													}}
 													endIcon={{
@@ -1118,7 +1164,7 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 														Tool call: {agentAction.function_name}
 													</span>
 												</Button>
-												{#if isSelected || storedToolCallJobs[j] || toolCallIndicesToLoad.includes(j)}
+												{#if isSelected || storedToolCallJob || toolCallStore?.isToolCallToBeLoaded(storeKey)}
 													<FlowStatusViewerInner
 														topModuleStates={getTopModuleStates}
 														{refreshGlobal}
@@ -1136,11 +1182,11 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 														{subflowParentsDurationStatuses}
 														{isSelectedBranch}
 														jobId={agentAction.job_id}
-														job={storedToolCallJobs[j]}
-														initialJob={storedToolCallJobs[j]}
+														job={storedToolCallJob}
+														initialJob={storedToolCallJob}
 														{reducedPolling}
 														onJobsLoaded={({ job, force }) => {
-															storedToolCallJobs[j] = job
+															toolCallStore?.setStoredToolCallJob(storeKey, job)
 															onJobsLoadedInner({ id: toolCallId } as FlowStatusModule, job, force)
 														}}
 														loadExtraLogs={(logs) => {
@@ -1231,11 +1277,11 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 										stepDetail = mod
 										selectedNode = e
 										if (e.startsWith(AI_TOOL_CALL_PREFIX)) {
-											const [_prefix, _agentModuleId, j, _toolModuleId] = e.split('-')
+											const [_prefix, agentModuleId, j, _toolModuleId] = e.split('-')
+											const parentLoopsPrefix = getParentLoopsPrefix(agentModuleId)
 											const jIdx = Number(j)
-											if (!toolCallIndicesToLoad.includes(jIdx)) {
-												toolCallIndicesToLoad.push(jIdx)
-											}
+											const storeKey = parentLoopsPrefix + agentModuleId + '-' + jIdx
+											toolCallStore?.addToolCallToLoad(storeKey)
 										}
 									}
 								} else {
@@ -1325,6 +1371,7 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 											stepDetail && typeof stepDetail !== 'string' ? stepDetail : undefined}
 										{@const agentTools =
 											module && module.value.type === 'aiagent' ? module.value.tools : undefined}
+										{@const parentLoopsPrefix = getParentLoopsPrefix(module?.id ?? '')}
 										{#if node.flow_jobs_results}
 											<span class="pl-1 text-tertiary"
 												>Result of step as collection of all subflows</span
@@ -1389,7 +1436,7 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 											logs={node.logs}
 											downloadLogs={!hideDownloadLogs}
 											aiAgentStatus={agentTools &&
-											node.job_id &&
+											node?.job_id &&
 											(node.type === 'Success' || node.type === 'Failure')
 												? {
 														tools: agentTools,
@@ -1401,9 +1448,14 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 															success: node.type === 'Success',
 															type: 'CompletedJob'
 														},
-														storedToolCallJobs,
+														storedToolCallJobs: module
+															? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
+															: undefined,
 														onToolJobLoaded: (job, idx) => {
-															storedToolCallJobs[idx] = job
+															if (module) {
+																const storeKey = parentLoopsPrefix + module.id + '-' + idx
+																toolCallStore?.setStoredToolCallJob(storeKey, job)
+															}
 														}
 													}
 												: undefined}

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -57,6 +57,13 @@ interface Props {
     onDone?: ({ job }: {
         job: CompletedJob;
     }) => void;
+    toolCallStore?: {
+        getStoredToolCallJob: (storeKey: string) => Job | undefined;
+        setStoredToolCallJob: (storeKey: string, job: Job) => void;
+        getLocalToolCallJobs: (prefix: string) => Record<number, Job>;
+        isToolCallToBeLoaded: (storeKey: string) => boolean;
+        addToolCallToLoad: (storeKey: string) => void;
+    };
 }
 declare const FlowStatusViewerInner: import("svelte").Component<Props, {}, "job" | "localModuleStates" | "selectedNode" | "rightColumnSelect" | "localDurationStatuses">;
 type FlowStatusViewerInner = ReturnType<typeof FlowStatusViewerInner>;

package/package/components/ModulePreview.svelte

@@ -4,7 +4,7 @@ import Button from './common/button/Button.svelte';
 import ModulePreviewForm from './ModulePreviewForm.svelte';
 import ModuleTest from './ModuleTest.svelte';
 import { getContext } from 'svelte';
-let { mod, schema, pickableProperties, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), focusArg = undefined } = $props();
+let { mod, schema, pickableProperties, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), focusArg = undefined, onJobDone } = $props();
 const { flowStore } = getContext('FlowEditorContext');
 let moduleTest = $state();
 export function runTestWithStepArgs() {
@@ -19,6 +19,7 @@ export function runTestWithStepArgs() {
 	bind:testIsLoading
 	bind:scriptProgress
 	bind:this={moduleTest}
+	{onJobDone}
 />
 
 <div class="p-4">

package/package/components/ModulePreview.svelte.d.ts

@@ -12,6 +12,7 @@ interface Props {
     noEditor?: boolean;
     scriptProgress?: any;
     focusArg?: string;
+    onJobDone?: () => void;
 }
 declare const ModulePreview: import("svelte").Component<Props, {
     runTestWithStepArgs: () => void;

package/package/components/ModulePreviewForm.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">import { allTrue, sendUserToast } from '../utils';
+<script lang="ts">import { allTrue } from '../utils';
 import { RefreshCw } from 'lucide-svelte';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
-import { getContext, onMount, untrack } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { evalValue } from './flows/utils';
 import { getResourceTypes } from './resourceTypesStore';
 import { twMerge } from 'tailwind-merge';
 let { schema, mod, pickableProperties, isValid = $bindable(true), autofocus = false, focusArg = undefined } = $props();
-const { testSteps, flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
+const { stepsInputArgs, flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
 let inputCheck = $state({});
 $effect(() => {
     isValid = allTrue(inputCheck) ?? false;
@@ -17,11 +17,11 @@ $effect(() => {
     let lkeys = Object.keys(schema?.properties ?? {});
     if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
         keys = lkeys;
-        untrack(() => testSteps?.removeExtraKey(mod.id, keys));
+        untrack(() => stepsInputArgs?.removeExtraKey(mod.id, keys));
     }
 });
 function plugIt(argName) {
-    testSteps?.setEvaluatedStepArg(mod.id, argName, $state.snapshot(evalValue(argName, mod, pickableProperties, true)));
+    stepsInputArgs?.setEvaluatedStepArg(mod.id, argName, $state.snapshot(evalValue(argName, mod, pickableProperties, true)));
 }
 let editor = $state({});
 // Animation and highlighting for focusArg
@@ -53,70 +53,77 @@ async function loadResourceTypes() {
     resourceTypes = await getResourceTypes();
 }
 loadResourceTypes();
-onMount(() => {
-    if (!testSteps) {
-        sendUserToast('testSteps module not initialized. Preview will not work.', true);
+let initialized = $state(false);
+$effect.pre(() => {
+    if (!initialized) {
+        if (stepsInputArgs) {
+            stepsInputArgs?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
+            initialized = true;
+        }
     }
-    testSteps?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
 });
 </script>
 
 <div class="w-full pt-2" data-popover>
-	{#if keys.length > 0}
-		{#each keys as argName, i (argName)}
-			{#if Object.keys(schema.properties ?? {}).includes(argName)}
-				<div
-					class={twMerge(
-						'flex gap-2',
-						animateArg === argName && 'animate-pulse ring-2 ring-offset-2 ring-blue-500 rounded'
-					)}
-					data-arg={argName}
-				>
-					{#if schema?.properties?.[argName]}
-						<ArgInput
-							{resourceTypes}
-							minW={false}
-							autofocus={autofocus && !focusArg && i == 0}
-							label={argName}
-							description={schema.properties[argName].description}
-							bind:value={
-								() => testSteps?.getStepInputArgs(mod.id, argName),
-								(v) => testSteps?.setStepInputArgs(mod.id, argName, v)
-							}
-							type={schema.properties[argName].type}
-							oneOf={schema.properties[argName].oneOf}
-							required={schema?.required?.includes(argName)}
-							pattern={schema.properties[argName].pattern}
-							bind:editor={editor[argName]}
-							bind:valid={inputCheck[argName]}
-							defaultValue={schema.properties[argName].default}
-							enum_={schema.properties[argName].enum}
-							format={schema.properties[argName].format}
-							contentEncoding={schema.properties[argName].contentEncoding}
-							properties={schema.properties[argName].properties}
-							nestedRequired={schema.properties[argName].required}
-							itemsType={schema.properties[argName].items}
-							extra={schema.properties[argName]}
-							nullable={schema.properties[argName].nullable}
-							title={schema.properties[argName].title}
-							placeholder={schema.properties[argName].placeholder}
-						/>
-					{/if}
-					{#if testSteps?.isArgManuallySet(mod.id, argName)}
-						<div class="pt-6 mt-0.5">
-							<Button
-								on:click={() => {
-									plugIt(argName)
-								}}
-								size="sm"
-								variant="border"
-								color="light"
-								title="Re-evaluate input step"><RefreshCw size={14} /></Button
-							>
-						</div>
-					{/if}
-				</div>
-			{/if}
-		{/each}
+	{#if initialized}
+		{#if keys.length > 0}
+			{#each keys as argName, i (argName)}
+				{#if Object.keys(schema.properties ?? {}).includes(argName)}
+					<div
+						class={twMerge(
+							'flex gap-2',
+							animateArg === argName && 'animate-pulse ring-2 ring-offset-2 ring-blue-500 rounded'
+						)}
+						data-arg={argName}
+					>
+						{#if schema?.properties?.[argName]}
+							<ArgInput
+								{resourceTypes}
+								minW={false}
+								autofocus={autofocus && !focusArg && i == 0}
+								label={argName}
+								description={schema.properties[argName].description}
+								bind:value={
+									() => stepsInputArgs?.getStepInputArgs(mod.id, argName),
+									(v) => stepsInputArgs?.setStepInputArgs(mod.id, argName, v)
+								}
+								type={schema.properties[argName].type}
+								oneOf={schema.properties[argName].oneOf}
+								required={schema?.required?.includes(argName)}
+								pattern={schema.properties[argName].pattern}
+								bind:editor={editor[argName]}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								enum_={schema.properties[argName].enum}
+								format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								nestedRequired={schema.properties[argName].required}
+								itemsType={schema.properties[argName].items}
+								extra={schema.properties[argName]}
+								nullable={schema.properties[argName].nullable}
+								title={schema.properties[argName].title}
+								placeholder={schema.properties[argName].placeholder}
+							/>
+						{/if}
+						{#if stepsInputArgs?.isArgManuallySet(mod.id, argName)}
+							<div class="pt-6 mt-0.5">
+								<Button
+									on:click={() => {
+										plugIt(argName)
+									}}
+									size="sm"
+									variant="border"
+									color="light"
+									title="Re-evaluate input step"><RefreshCw size={14} /></Button
+								>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			{/each}
+		{/if}
+	{:else}
+		<div class="text-center text-sm text-tertiary"> Loading test step arguments... </div>
 	{/if}
 </div>