windmill-components 1.531.1 → 1.537.1

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>

package/package/components/ModulePreviewResultViewer.svelte

@@ -7,18 +7,16 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getContext } from 'svelte';
 import { getStringError } from './copilot/chat/utils';
 import AiAgentLogViewer from './AIAgentLogViewer.svelte';
-let { lang, editor, diffEditor, loopStatus = undefined, lastJob = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
-const { testSteps } = getContext('FlowEditorContext');
-let selectedJob = $state(undefined);
-let preview = $state(undefined);
+let { lang, editor, diffEditor, loopStatus = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
+const { stepsInputArgs } = getContext('FlowEditorContext');
 let jobProgressReset = $state(() => { });
-$effect(() => {
-    if (preview != undefined && testJob) {
-        preview = undefined;
-    }
-});
-let forceJson = $state(false);
+let outputPickerInner = $state(undefined);
+export function getOutputPickerInner() {
+    return outputPickerInner;
+}
+const selectedJob = $derived.by(() => outputPickerInner?.getSelectedJob?.() ?? undefined);
 const logJob = $derived(testJob ?? selectedJob);
+const preview = $derived.by(() => outputPickerInner?.getPreview?.());
 </script>
 
 <Splitpanes horizontal>
@@ -33,7 +31,6 @@ const logJob = $derived(testJob ?? selectedJob);
 		{/if}
 
 		<OutputPickerInner
-			{lastJob}
 			{testJob}
 			fullResult
 			moduleId={mod.id}
@@ -41,24 +38,22 @@ const logJob = $derived(testJob ?? selectedJob);
 			getLogs
 			{onUpdateMock}
 			mock={mod.mock}
-			bind:forceJson
-			bind:selectedJob
 			isLoading={testIsLoading || loadingJob}
-			bind:preview
 			path={`path` in mod.value ? mod.value.path : ''}
 			{loopStatus}
 			{disableMock}
 			{disableHistory}
+			bind:this={outputPickerInner}
 		>
 			{#snippet copilot_fix()}
-				{#if lang && editor && diffEditor && testSteps.getStepArgs(mod.id) && selectedJob?.type === 'CompletedJob' && !selectedJob.success && getStringError(selectedJob.result)}
+				{#if lang && editor && diffEditor && stepsInputArgs.getStepArgs(mod.id) && selectedJob?.type === 'CompletedJob' && !selectedJob.success && getStringError(selectedJob.result)}
 					<ScriptFix {lang} />
 				{/if}
 			{/snippet}
 		</OutputPickerInner>
 	</Pane>
 	<Pane size={35} minSize={10}>
-		{#if (mod.mock?.enabled && preview != 'job') || preview == 'mock'}
+		{#if (mod.mock?.enabled && preview !== 'job' && testJob?.type !== 'QueuedJob') || preview === 'mock'}
 			<LogViewer
 				small
 				content={undefined}
@@ -82,9 +77,9 @@ const logJob = $derived(testJob ?? selectedJob);
 				jobId={logJob?.id}
 				duration={logJob?.['duration_ms']}
 				mem={logJob?.['mem_peak']}
-				content={logJob?.logs}
+				content={logJob?.['logs']}
 				isLoading={(testIsLoading && logJob?.['running'] == false) || loadingJob}
-				tag={logJob?.tag}
+				tag={logJob?.['tag']}
 				{tagLabel}
 			/>
 		{/if}

package/package/components/ModuleTest.svelte

@@ -5,17 +5,17 @@ import { getContext } from 'svelte';
 import JobLoader, {} from './JobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import { loadSchemaFromModule } from './flows/flowInfers';
-let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined) } = $props();
-const { flowStore, flowStateStore, pathStore, testSteps, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
+let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), onJobDone } = $props();
+const { flowStore, flowStateStore, pathStore, stepsInputArgs, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
 let jobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
 export function runTestWithStepArgs() {
-    runTest(testSteps.getStepArgs(mod.id));
+    runTest(stepsInputArgs.getStepArgs(mod.id));
 }
 export function loadArgsAndRunTest() {
-    testSteps?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
-    runTest(testSteps.getStepArgs(mod.id));
+    stepsInputArgs?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
+    runTest(stepsInputArgs.getStepArgs(mod.id));
 }
 export async function runTest(args) {
     // Not defined if JobProgressBar not loaded
@@ -92,6 +92,7 @@ function jobDone(testJob) {
     if (modulesTestStates.states[mod.id]) {
         modulesTestStates.states[mod.id].testJob = testJob;
     }
+    onJobDone?.();
 }
 export function cancelJob() {
     modulesTestStates.states[mod.id]?.cancel?.();
@@ -129,7 +130,10 @@ modulesTestStates.states[mod.id] = {
 			}
 		}
 	}
-	bind:job={modulesTestStates.states[mod.id].testJob}
+	bind:job={
+		() => modulesTestStates.states[mod.id]?.testJob,
+		(v) => modulesTestStates.states[mod.id] && (modulesTestStates.states[mod.id].testJob = v)
+	}
 	loadPlaceholderJobOnStart={{
 		type: 'QueuedJob',
 		id: '',

package/package/components/ModuleTest.svelte.d.ts

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

package/package/components/OktaSetting.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">import CollapseLink from './CollapseLink.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 let { value = $bindable() } = $props();
+let lastValues = { domain: undefined, custom: undefined };
 function changeDomain(domain, custom) {
     if (value) {
         let baseUrl = custom ? `https://${domain}` : `https://${domain}.okta.com`;
@@ -25,8 +27,11 @@ function changeDomain(domain, custom) {
     }
 }
 let enabled = $derived(value != undefined);
-$effect(() => {
-    changeDomain(value?.['domain'], value?.['custom']);
+$effect.pre(() => {
+    if (value?.['domain'] != lastValues.domain || value?.['custom'] != lastValues.custom) {
+        lastValues = { domain: value?.['domain'], custom: value?.['custom'] };
+        untrack(() => changeDomain(value?.['domain'], value?.['custom']));
+    }
 });
 </script>
 

package/package/components/Portal.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import { tick } from 'svelte'
 
 	export function portal(el, options) {
@@ -50,13 +50,17 @@
 
 <script>
 	/**
-	 * DOM Element or CSS Selector
-	 * @type { HTMLElement|string}
+	 * @typedef {Object} Props
+	 * @property { HTMLElement|string} [target] - DOM Element or CSS Selector
+	 * @property {any} [name]
+	 * @property {string|undefined} [class]
+	 * @property {import('svelte').Snippet} [children]
 	 */
-	export let target = 'body'
-	export let name = undefined
+
+	/** @type {Props} */
+	let { target = 'body', name = undefined, class: clazz = undefined, children } = $props()
 </script>
 
-<div use:portal={{ target, name }} hidden class={$$props.class}>
-	<slot />
+<div use:portal={{ target, name }} hidden class={clazz}>
+	{@render children?.()}
 </div>