windmill-components 1.352.9 → 1.362.1

package/package/components/FlowStatusViewerInner.svelte

@@ -24,7 +24,6 @@ let { flowStateStore, retryStatus, suspendStatus } = getContext('FlowStatusViewe
 export let jobId;
 export let workspaceId = undefined;
 export let flowJobIds = undefined;
-export let job = undefined;
 //only useful when forloops are optimized and the job doesn't contain the mod id anymore
 export let innerModule = undefined;
 export let render = true;
@@ -32,29 +31,33 @@ export let isOwner = false;
 export let selectedNode = undefined;
 export let globalModuleStates;
 export let globalDurationStatuses;
+export let globalRefreshes = {};
 export let childFlow = false;
 export let reducedPolling = false;
 export let wideResults = false;
-let jobResults = [];
-let jobFailures = [];
-let forloop_selected = '';
+let jobResults = flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? [];
 let retry_selected = '';
 let timeout;
 let localModuleStates = writable({});
 let localDurationStatuses = writable({});
-let lastSize = 0;
-$: {
-    let len = (flowJobIds?.flowJobs ?? []).length;
-    if (len != lastSize) {
-        updateForloop(len);
-    }
-}
-function setModuleState(key, value) {
-    if (!deepEqual($localModuleStates[key], value)) {
-        $localModuleStates[key] = value;
-        globalModuleStates.forEach((s) => {
+export let job = undefined;
+// let lastSize = 0
+// $: {
+// 	let len = (flowJobIds?.flowJobs ?? []).length
+// 	if (len != lastSize) {
+// 		updateForloop(len)
+// 	}
+// }
+function setModuleState(key, value, force, keepType) {
+    let newValue = { ...($localModuleStates[key] ?? {}), ...value };
+    if (!deepEqual($localModuleStates[key], value) || force) {
+        ;
+        [localModuleStates, ...globalModuleStates].forEach((s) => {
             s.update((x) => {
-                x[key] = value;
+                if (keepType && (x[key]?.type == 'Success' || x[key]?.type == 'Failure')) {
+                    newValue.type = x[key].type;
+                }
+                x[key] = newValue;
                 return x;
             });
         });
@@ -83,10 +86,6 @@ function initializeByJob(modId) {
         return x;
     }));
 }
-function updateForloop(len) {
-    forloop_selected = flowJobIds?.flowJobs[len - 1] ?? '';
-    lastSize = len;
-}
 let innerModules = [];
 function updateStatus(status) {
     innerModules =
@@ -131,17 +130,59 @@ function updateInnerModules() {
                         parent_module: mod['parent_module'],
                         args: job?.args
                     };
-                    if (!deepEqual(newState, $localModuleStates[mod.id ?? ''])) {
-                        setModuleState(mod.id ?? '', newState);
-                    }
+                    setModuleState(mod.id ?? '', newState);
                 })
                     .catch((e) => {
                     console.error(`Could not load inner module for job ${mod.job}`, e);
                 });
             }
+            else if (mod.flow_jobs &&
+                (mod.type == 'Success' || mod.type == 'Failure') &&
+                !['Success', 'Failure'].includes($localModuleStates?.[mod.id ?? '']?.type)) {
+                // console.log(mod.id, 'FOO')
+                setModuleState(mod.id ?? '', {
+                    type: mod.type
+                }, true);
+            }
+            if (mod.branch_chosen) {
+                setModuleState(mod.id ?? '', {
+                    branchChosen: mod.branch_chosen.type == 'default' ? 0 : (mod.branch_chosen.branch ?? 0) + 1
+                }, true);
+            }
         });
     }
 }
+let recursiveRefresh = {};
+export async function refresh(root, loopJob) {
+    let modId = flowJobIds?.moduleId;
+    if (!loopJob) {
+        loopJob = {
+            index: $localModuleStates[modId ?? '']?.selectedForloopIndex ?? 0,
+            job: $localModuleStates[modId ?? '']?.selectedForloop ?? ''
+        };
+    }
+    let last = root ? undefined : flowJobIds?.flowJobs?.[flowJobIds?.flowJobs.length - 1];
+    Object.entries(recursiveRefresh).forEach(([key, v]) => {
+        if (modId) {
+            if ((root && key == loopJob?.job) || key == last) {
+                v(false);
+            }
+            else {
+            }
+        }
+        else {
+            v(false);
+        }
+    });
+    let njob = flowJobIds
+        ? root && modId
+            ? storedListJobs?.[loopJob.job]
+            : storedListJobs[flowJobIds.length - 1]
+        : job;
+    if (njob) {
+        dispatch('jobsLoaded', { job: njob, force: true });
+    }
+}
 let errorCount = 0;
 let notAnonynmous = false;
 async function loadJobInProgress() {
@@ -156,7 +197,7 @@ async function loadJobInProgress() {
             if (!deepEqual(job, newJob)) {
                 job = newJob;
                 job?.flow_status && updateStatus(job?.flow_status);
-                dispatch('jobsLoaded', job);
+                dispatch('jobsLoaded', { job, force: false });
             }
             errorCount = 0;
             notAnonynmous = false;
@@ -188,8 +229,9 @@ async function updateJobId() {
         if (flowJobIds) {
             let modId = flowJobIds?.moduleId ?? '';
             let common = {
-                iteration_from: $localDurationStatuses?.[modId]?.iteration_from ??
-                    Math.max(flowJobIds.flowJobs.length - 20, 0),
+                iteration_from: 
+                // $localDurationStatuses?.[modId]?.iteration_from ??
+                Math.max(flowJobIds.flowJobs.length - 20, 0),
                 iteration_total: $localDurationStatuses?.[modId]?.iteration_total ?? flowJobIds?.length
             };
             $localDurationStatuses[modId] = {
@@ -210,6 +252,18 @@ async function updateJobId() {
 }
 $: jobId && updateJobId();
 $: isListJob = flowJobIds != undefined && Array.isArray(flowJobIds?.flowJobs);
+$: flowJobIds?.moduleId && onFlowJobFlowStatus();
+function onFlowJobFlowStatus() {
+    if (globalRefreshes) {
+        let modId = flowJobIds?.moduleId;
+        if (modId) {
+            globalRefreshes[modId] = async (loopJob) => {
+                setIteration(loopJob.index, loopJob.job, false, modId ?? '');
+                refresh(true, loopJob);
+            };
+        }
+    }
+}
 onDestroy(() => {
     destroyed = true;
     timeout && clearTimeout(timeout);
@@ -223,7 +277,7 @@ function isSuccess(arg) {
         return arg == true;
     }
 }
-function onJobsLoaded(mod, job) {
+function onJobsLoaded(mod, job, force) {
     if (mod.id && (mod.flow_jobs ?? []).length == 0) {
         if (!childFlow) {
             if ($flowStateStore?.[mod.id]) {
@@ -244,7 +298,7 @@ function onJobsLoaded(mod, job) {
                 args: job.args,
                 started_at,
                 parent_module: mod['parent_module']
-            });
+            }, force);
             setDurationStatusByJob(mod.id, job.id, {
                 created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
                 started_at
@@ -260,11 +314,12 @@ function onJobsLoaded(mod, job) {
                 parent_module: mod['parent_module'],
                 duration_ms: job['duration_ms'],
                 started_at: started_at,
-                iteration: mod.iterator?.itered?.length,
+                flow_jobs: mod.flow_jobs,
+                flow_jobs_success: mod.flow_jobs_success,
                 iteration_total: mod.iterator?.itered?.length,
                 retries: mod?.failed_retries?.length
                 // retries: $flowStateStore?.raw_flow
-            });
+            }, force);
             setDurationStatusByJob(mod.id, job.id, {
                 created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
                 started_at,
@@ -273,12 +328,39 @@ function onJobsLoaded(mod, job) {
         }
     }
 }
-function innerJobLoaded(jobLoaded, j) {
+function setIteration(j, id, clicked, modId) {
+    if (modId) {
+        if (!$localModuleStates?.[modId]) {
+            $localModuleStates[modId] = {
+                type: 'InProgress',
+                args: undefined
+            };
+        }
+        let state = $localModuleStates?.[modId];
+        if (state) {
+            if (state.selectedForloop == id && clicked) {
+                setModuleState(modId, {
+                    selectedForloop: undefined,
+                    selectedForloopIndex: -1
+                }, false, true);
+            }
+            else {
+                setModuleState(modId, {
+                    selectedForloop: id,
+                    selectedForloopIndex: j
+                }, false, true);
+                clicked && refresh(true, undefined);
+            }
+        }
+    }
+}
+function innerJobLoaded(jobLoaded, j, clicked, force) {
     let modId = flowJobIds?.moduleId;
     if (modId) {
+        setIteration(j, jobLoaded.id, clicked, modId);
         if ($flowStateStore && $flowStateStore?.[modId] == undefined) {
             $flowStateStore[modId] = {
-                ...$flowStateStore[modId],
+                ...($flowStateStore[modId] ?? {}),
                 previewResult: jobLoaded.args
             };
         }
@@ -293,10 +375,9 @@ function innerJobLoaded(jobLoaded, j) {
             if (jobLoaded.type == 'QueuedJob') {
                 jobResults[j] = 'Job in progress ...';
             }
-            else {
+            else if (jobLoaded.type == 'CompletedJob') {
                 $flowStateStore[modId].previewResult[j] = jobLoaded.result;
                 jobResults[j] = jobLoaded.result;
-                jobFailures[j] = jobLoaded.success === false;
             }
         }
         let started_at = jobLoaded.started_at ? new Date(jobLoaded.started_at).getTime() : undefined;
@@ -304,34 +385,38 @@ function innerJobLoaded(jobLoaded, j) {
         let job_id = jobLoaded.id;
         initializeByJob(modId);
         if (jobLoaded.type == 'QueuedJob') {
-            setModuleState(modId, {
-                type: 'InProgress',
-                started_at,
-                logs: jobLoaded.logs,
-                job_id,
-                args: jobLoaded.args,
-                iteration: flowJobIds?.flowJobs.length,
-                iteration_total: flowJobIds?.length,
-                duration_ms: undefined
-            });
+            if ($localModuleStates[modId]?.selectedForloopIndex == j) {
+                setModuleState(modId, {
+                    started_at,
+                    logs: jobLoaded.logs,
+                    job_id,
+                    args: jobLoaded.args,
+                    flow_jobs: flowJobIds?.flowJobs,
+                    flow_jobs_success: flowJobIds?.flowJobsSuccess,
+                    iteration_total: flowJobIds?.length,
+                    duration_ms: undefined
+                }, force, true);
+            }
             setDurationStatusByJob(modId, job_id, {
                 created_at,
                 started_at
             });
         }
-        else {
-            setModuleState(modId, {
-                started_at,
-                args: jobLoaded.args,
-                type: jobLoaded.success ? 'Success' : 'Failure',
-                logs: 'All jobs completed',
-                result: jobResults,
-                job_id,
-                iteration: flowJobIds?.flowJobs.length,
-                iteration_total: flowJobIds?.length,
-                duration_ms: undefined,
-                isListJob: true
-            });
+        else if (jobLoaded.type == 'CompletedJob') {
+            if ($localModuleStates[modId]?.selectedForloopIndex == j) {
+                setModuleState(modId, {
+                    started_at,
+                    args: jobLoaded.args,
+                    result: jobLoaded.result,
+                    flow_jobs_results: jobResults,
+                    job_id,
+                    flow_jobs: flowJobIds?.flowJobs,
+                    flow_jobs_success: flowJobIds?.flowJobsSuccess,
+                    iteration_total: flowJobIds?.length,
+                    duration_ms: undefined,
+                    isListJob: true
+                }, force, true);
+            }
             setDurationStatusByJob(modId, job_id, {
                 created_at,
                 started_at,
@@ -340,34 +425,17 @@ function innerJobLoaded(jobLoaded, j) {
         }
         if (jobLoaded.job_kind == 'script' || jobLoaded.job_kind == 'preview') {
             let id = undefined;
-            if (innerModule?.type == 'forloopflow') {
+            if (innerModule?.type == 'forloopflow' && innerModule.modules.length == 1) {
                 id = innerModule?.modules?.[0]?.id;
             }
             if (id) {
-                setModuleState(id, {
-                    ...($localModuleStates[modId] ?? {}),
-                    iteration: undefined,
-                    isListJob: false,
-                    iteration_total: undefined
-                });
-                initializeByJob(id);
-                setDurationStatusByJob(id, job_id, $localDurationStatuses[modId].byJob[job_id]);
+                onJobsLoaded({ id }, jobLoaded);
             }
         }
     }
 }
 let flowTimeline;
 let rightColumnSelect = 'timeline';
-let slicedListJobIds = [];
-$: flowJobIds && !deepEqual(flowJobIds, lastFlowJobIds) && updateSlicedListJobIds();
-let lastFlowJobIds = undefined;
-function updateSlicedListJobIds() {
-    lastFlowJobIds = flowJobIds;
-    slicedListJobIds =
-        (flowJobIds?.flowJobs.length ?? 0) > 20
-            ? flowJobIds?.flowJobs?.slice($localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0) ?? []
-            : flowJobIds?.flowJobs ?? [];
-}
 function loadPreviousIters(lenToAdd) {
     let r = $localDurationStatuses[flowJobIds?.moduleId ?? ''];
     if (r.iteration_from) {
@@ -375,10 +443,14 @@ function loadPreviousIters(lenToAdd) {
         $localDurationStatuses = $localDurationStatuses;
         globalDurationStatuses.forEach((x) => x.update((x) => x));
     }
-    jobResults = [...new Array(lenToAdd), ...jobResults];
-    updateSlicedListJobIds();
+    jobResults = [
+        ...[...new Array(lenToAdd).keys()].map((x) => 'not computed or loaded yet'),
+        ...jobResults
+    ];
+    // updateSlicedListJobIds()
 }
 let stepDetail = undefined;
+let storedListJobs = {};
 </script>
 
 {#if notAnonynmous}
@@ -393,13 +465,11 @@ let stepDetail = undefined;
 			<div class="h-8" />
 		{/if} -->
 		{#if isListJob}
-			{@const lenToAdd = Math.min(
-				20,
-				$localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0
-			)}
+			{@const sliceFrom = $localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0}
+			{@const lenToAdd = Math.min(20, sliceFrom)}
 
 			{#if (flowJobIds?.flowJobs.length ?? 0) > 20 && lenToAdd > 0}
-				{@const allToAdd = (flowJobIds?.length ?? 0) - (slicedListJobIds.length ?? 0)}
+				{@const allToAdd = (flowJobIds?.length ?? 0) - sliceFrom}
 				<p class="text-tertiary italic text-xs">
 					For performance reasons, only the last 20 items are shown by default <button
 						class="text-primary underline ml-4"
@@ -408,7 +478,8 @@ let stepDetail = undefined;
 						}}
 						>Load {lenToAdd} prior
 					</button>
-					{#if allToAdd > 0}
+					{#if allToAdd > 0 && allToAdd > lenToAdd}
+						{sliceFrom}
 						<button
 							class="text-primary underline ml-4"
 							on:click={() => {
@@ -499,79 +570,70 @@ let stepDetail = undefined;
 		{/if}
 		<div class="{selected != 'sequence' ? 'hidden' : ''} max-w-7xl mx-auto">
 			{#if isListJob}
-				{@const lenToAdd = Math.min(
-					20,
-					$localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0
-				)}
+				{@const sliceFrom = $localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0}
+				{@const forloop_selected =
+					$localModuleStates?.[flowJobIds?.moduleId ?? '']?.selectedForloop}
 				<h3 class="text-md leading-6 font-bold text-tertiary border-b mb-4">
-					Embedded flows: ({flowJobIds?.flowJobs.length} items)
+					Subflows ({flowJobIds?.flowJobs.length})
 				</h3>
-				{#if (flowJobIds?.flowJobs.length ?? 0) > 20 && lenToAdd > 0}
-					{@const allToAdd = (flowJobIds?.length ?? 0) - (slicedListJobIds.length ?? 0)}
-
-					<p class="text-tertiary italic text-xs">
-						For performance reasons, only the last 20 items are shown by default <button
-							class="text-primary underline ml-4"
-							on:click={() => {
-								loadPreviousIters(lenToAdd)
-							}}
-							>Load {lenToAdd} prior
-						</button>
-						{#if allToAdd > 0}
-							<button
-								class="text-primary underline ml-4"
-								on:click={() => {
-									loadPreviousIters(allToAdd)
+				<div class="overflow-auto max-h-1/2">
+					{forloop_selected}
+					{#each flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
+						{#if render}
+							<Button
+								variant={forloop_selected === loopJobId ? 'contained' : 'border'}
+								color={flowJobIds?.flowJobsSuccess?.[j] === false
+									? 'red'
+									: forloop_selected === loopJobId
+									? 'dark'
+									: 'light'}
+								btnClasses="w-full flex justify-start"
+								on:click={async () => {
+									let storedJob = storedListJobs[j]
+									if (!storedJob) {
+										storedJob = await JobService.getJob({
+											workspace: workspaceId ?? $workspaceStore ?? '',
+											id: loopJobId,
+											noLogs: true
+										})
+										storedListJobs[j] = storedJob
+									}
+									innerJobLoaded(storedJob, j, true, false)
+								}}
+								endIcon={{
+									icon: ChevronDown,
+									classes: forloop_selected == loopJobId ? '!rotate-180' : ''
 								}}
-								>Load {allToAdd} prior
-							</button>
+							>
+								<span class="truncate font-mono">
+									#{j + 1}: {loopJobId}
+								</span>
+							</Button>
 						{/if}
-					</p>
-				{/if}
-				{#each slicedListJobIds as loopJobId, j (loopJobId)}
-					{#if render}
-						<Button
-							variant={forloop_selected === loopJobId ? 'contained' : 'border'}
-							color={jobFailures[j] === true
-								? 'red'
-								: forloop_selected === loopJobId
-								? 'dark'
-								: 'light'}
-							btnClasses="w-full flex justify-start"
-							on:click={() => {
-								if (forloop_selected == loopJobId) {
-									forloop_selected = ''
-								} else {
-									forloop_selected = loopJobId
-								}
-							}}
-							endIcon={{
-								icon: ChevronDown,
-								classes: forloop_selected == loopJobId ? '!rotate-180' : ''
-							}}
-						>
-							<span class="truncate font-mono">
-								#{($localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0) +
-									j +
-									1}: {loopJobId}
-							</span>
-						</Button>
-					{/if}
-
-					<!-- <LogId id={loopJobId} /> -->
-					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
-						<svelte:self
-							{childFlow}
-							globalModuleStates={[localModuleStates, ...globalModuleStates]}
-							globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
-							render={forloop_selected == loopJobId && selected == 'sequence' && render}
-							reducedPolling={flowJobIds?.flowJobs.length && flowJobIds?.flowJobs.length > 20}
-							{workspaceId}
-							jobId={loopJobId}
-							on:jobsLoaded={(e) => innerJobLoaded(e.detail, j)}
-						/>
-					</div>
-				{/each}
+						{#if j >= sliceFrom || forloop_selected == loopJobId}
+							<!-- <LogId id={loopJobId} /> -->
+							<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
+								<svelte:self
+									bind:refresh={recursiveRefresh[loopJobId]}
+									{globalRefreshes}
+									{childFlow}
+									job={storedListJobs[j]}
+									globalModuleStates={[localModuleStates, ...globalModuleStates]}
+									globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
+									render={forloop_selected == loopJobId && selected == 'sequence' && render}
+									reducedPolling={flowJobIds?.flowJobs.length && flowJobIds?.flowJobs.length > 20}
+									{workspaceId}
+									jobId={loopJobId}
+									on:jobsLoaded={(e) => {
+										let { job, force } = e.detail
+										storedListJobs[j] = job
+										innerJobLoaded(job, j, false, force)
+									}}
+								/>
+							</div>
+						{/if}
+					{/each}
+				</div>
 			{:else if innerModules.length > 0}
 				<ul class="w-full">
 					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
@@ -627,6 +689,8 @@ let stepDetail = undefined;
 									<!-- <LogId id={loopJobId} /> -->
 									<div class="border p-6" class:hidden={retry_selected != failedRetry}>
 										<svelte:self
+											{globalRefreshes}
+											bind:refresh={recursiveRefresh[failedRetry]}
 											{childFlow}
 											globalModuleStates={[localModuleStates, ...globalModuleStates]}
 											globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
@@ -641,6 +705,8 @@ let stepDetail = undefined;
 							{#if ['InProgress', 'Success', 'Failure'].includes(mod.type)}
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
 									<svelte:self
+										{globalRefreshes}
+										bind:refresh={recursiveRefresh[mod.job ?? '']}
 										globalModuleStates={[]}
 										globalDurationStatuses={[]}
 										render={selected == 'sequence' && render}
@@ -648,11 +714,16 @@ let stepDetail = undefined;
 										jobId={mod.job}
 										childFlow
 										on:jobsLoaded={(e) => {
-											onJobsLoaded(mod, e.detail)
+											let { force, job } = e.detail
+											onJobsLoaded(mod, job, force)
 										}}
 									/>
+								{:else if mod.flow_jobs?.length == 0 && mod.job == '00000000-0000-0000-0000-000000000000'}
+									<div class="text-secondary">no subflow (empty loop?)</div>
 								{:else}
 									<svelte:self
+										{globalRefreshes}
+										bind:refresh={recursiveRefresh[mod.job ?? '']}
 										{childFlow}
 										globalModuleStates={[localModuleStates, ...globalModuleStates]}
 										globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
@@ -664,10 +735,14 @@ let stepDetail = undefined;
 											? {
 													moduleId: mod.id,
 													flowJobs: mod.flow_jobs,
+													flowJobsSuccess: mod.flow_jobs_success,
 													length: mod.iterator?.itered?.length ?? mod.flow_jobs.length
 											  }
 											: undefined}
-										on:jobsLoaded={(e) => onJobsLoaded(mod, e.detail)}
+										on:jobsLoaded={(e) => {
+											let { job, force } = e.detail
+											onJobsLoaded(mod, job, force)
+										}}
 									/>
 								{/if}
 							{:else}
@@ -728,12 +803,20 @@ let stepDetail = undefined;
 									selectedNode = e.detail.id
 								}
 							}}
+							on:selectedIteration={(e) => {
+								let detail = e.detail
+								setModuleState(detail.moduleId, {
+									selectedForloop: detail.id,
+									selectedForloopIndex: detail.index
+								})
+								globalRefreshes[detail.moduleId]?.({ job: detail.id, index: detail.index })
+							}}
 							modules={job.raw_flow?.modules ?? []}
 							failureModule={job.raw_flow?.failure_module}
 						/>
 					</div>
 					<div
-						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0"
+						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0 h-full"
 					>
 						<Tabs bind:selected={rightColumnSelect}>
 							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
@@ -753,7 +836,7 @@ let stepDetail = undefined;
 								durationStatuses={localDurationStatuses}
 							/>
 						{:else if rightColumnSelect == 'node_status'}
-							<div class="pt-2 max-h-[80vh]">
+							<div class="pt-2 max-h-[80vh] grow flex flex-col">
 								{#if selectedNode}
 									{@const node = $localModuleStates[selectedNode]}
 
@@ -772,13 +855,31 @@ let stepDetail = undefined;
 									{:else if selectedNode == 'start'}
 										{#if job.args}
 											<div class="p-2">
-												<JobArgs args={job.args} />
+												<JobArgs
+													id={job.id}
+													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													args={job.args}
+												/>
 											</div>
 										{:else}
 											<p class="p-2 text-secondary">No arguments</p>
 										{/if}
 									{:else if node}
-										<div class="px-2 flex gap-2 min-w-0 overflow-hidden w-full">
+										{#if node.flow_jobs_results}
+											<span class="pl-1 text-tertiary"
+												>Result of step as collection of all subflows</span
+											>
+											<div class="p-2">
+												<div class="overflow-auto max-h-[200px]">
+													<DisplayResult
+														workspaceId={job?.workspace_id}
+														result={node.flow_jobs_results}
+													/>
+												</div>
+											</div>
+											<span class="pl-1 text-tertiary text-lg pt-4">Selected subflow</span>
+										{/if}
+										<div class="px-2 flex gap-2 min-w-0 w-full">
 											<ModuleStatus type={node.type} scheduled_for={node.scheduled_for} />
 											{#if node.duration_ms}
 												<Badge>
@@ -801,7 +902,11 @@ let stepDetail = undefined;
 										</div>
 										{#if !node.isListJob}
 											<div class="px-1 py-1">
-												<JobArgs args={node.args} />
+												<JobArgs
+													id={node.job_id}
+													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													args={node.args}
+												/>
 											</div>
 										{/if}
 										<FlowJobResult