windmill-components 1.36.2 → 1.46.1

package/components/FlowJobResult.svelte

@@ -1,22 +1,15 @@
 <script>import DisplayResult from './DisplayResult.svelte';
-import Tabs from './common/tabs/Tabs.svelte';
-import Tab from './common/tabs/Tab.svelte';
-import TabContent from './common/tabs/TabContent.svelte';
 import LogViewer from './LogViewer.svelte';
-export let job;
+export let result;
+export let logs;
 </script>
 
-{#if job}
-	<Tabs selected="results">
-		<Tab value="results">Results</Tab>
-		<Tab value="logs">Logs</Tab>
-		<svelte:fragment slot="content">
-			<TabContent value="results" class="border p-2 h-36 overflow-auto">
-				<DisplayResult result={job.result} />
-			</TabContent>
-			<TabContent value="logs" class="border h-36 overflow-auto">
-				<LogViewer content={job.logs ?? ''} isLoading={false} />
-			</TabContent>
-		</svelte:fragment>
-	</Tabs>
-{/if}
+<div class="grid grid-cols-2 shadow border border-gray-800 h-full">
+	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
+		<span class="text-gray-500">Result</span>
+		<DisplayResult {result} />
+	</div>
+	<div class="overflow-auto max-h-80 h-full relative">
+		<LogViewer content={logs ?? ''} isLoading={false} />
+	</div>
+</div>

package/components/FlowJobResult.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CompletedJob } from '../gen';
 declare const __propDef: {
     props: {
-        job: CompletedJob | undefined;
+        result: any;
+        logs: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowMetadata.svelte

@@ -0,0 +1,65 @@
+<script>import JobStatus from './JobStatus.svelte';
+import Icon from 'svelte-awesome';
+import { displayDaysAgo } from '../utils';
+import { faCalendar, faClock, faRobot, faScroll, faUser, faWind } from '@fortawesome/free-solid-svg-icons';
+export let job;
+const SMALL_ICON_SCALE = 0.7;
+</script>
+
+<div class="rounded-md p-3 bg-gray-50 shadow-sm sm:text-sm md:text-base" style="min-height: 150px;">
+	<JobStatus {job} />
+	<div>
+		<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+			Created {displayDaysAgo(job.created_at ?? '')}</span
+		>
+	</div>
+	{#if job && 'started_at' in job && job.started_at}
+		<div>
+			<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				Started {displayDaysAgo(job.started_at ?? '')}</span
+			>
+		</div>
+	{/if}
+	<div>
+		{#if job && job.parent_job}
+			{#if job.is_flow_step}
+				<Icon class="text-gray-700" data={faWind} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+					Step of flow <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
+				>
+			{:else}
+				<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+					Triggered by parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
+				>
+			{/if}
+		{:else if job && job.schedule_path}
+			<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+			<span
+				>Triggered by the schedule: <a
+					href={`/schedule/add?edit=${job.schedule_path}&isFlow=${job.job_kind == 'flow'}`}
+					>{job.schedule_path}</a
+				></span
+			>
+		{/if}
+
+		{#if (job && job.job_kind == 'flow') || job?.job_kind == 'script'}
+			{@const stem = `/${job?.job_kind}s`}
+			{@const isScript = job?.job_kind === 'script'}
+			{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
+			<div>
+				<Icon class="text-gray-700" data={faScroll} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+					<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
+				</span>
+			</div>
+		{/if}
+
+		<div>
+			<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				By {job.created_by}
+				{#if job.permissioned_as !== `u/${job.created_by}`}but permissioned as {job.permissioned_as}{/if}
+			</span>
+		</div>
+	</div>
+	<div class="text-gray-700 text-2xs pt-2">
+		run id: <a href={`/run/${job.id}?workspace=${job.workspace_id}`}>{job.id}</a>
+	</div>
+</div>

package/components/FlowMetadata.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Job } from '../gen';
+declare const __propDef: {
+    props: {
+        job: Job;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowMetadataProps = typeof __propDef.props;
+export declare type FlowMetadataEvents = typeof __propDef.events;
+export declare type FlowMetadataSlots = typeof __propDef.slots;
+export default class FlowMetadata extends SvelteComponentTyped<FlowMetadataProps, FlowMetadataEvents, FlowMetadataSlots> {
+}
+export {};

package/components/FlowModulesViewer.svelte

@@ -53,7 +53,11 @@ let open = {};
 											>
 											{#if open[i]}
 												<div class="border border-black p-2 bg-gray-50  divide-y">
-													<InputTransformsViewer inputTransforms={mod?.input_transforms} />
+													<InputTransformsViewer
+														inputTransforms={mod?.value?.input_transforms ??
+															mod?.input_transforms ??
+															{}}
+													/>
 													<div class="w-full h-full mt-6">
 														<iframe
 															style="height: 400px;"
@@ -76,15 +80,17 @@ let open = {};
 
 									{#if open[i]}
 										<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
-											<InputTransformsViewer inputTransforms={mod?.input_transforms} />
+											<InputTransformsViewer
+												inputTransforms={mod?.value?.input_transforms ??
+													mod?.input_transforms ??
+													{}}
+											/>
 											<HighlightCode
 												language={mod?.value?.language ?? 'deno'}
 												code={mod?.value?.content}
 											/>
 										</div>
 									{/if}
-								{:else if mod?.value?.type == 'flow'}
-									Flow at path {mod?.value?.path}
 								{:else if mod?.value?.type == 'forloopflow'}
 									For loop over all the elements of the list returned as a result of step {i}:
 									<svelte:self modules={mod.value.modules} />
@@ -132,7 +138,9 @@ let open = {};
 											{#if open[modules.length]}
 												<div class="border border-black p-2 bg-gray-50  divide-y">
 													<InputTransformsViewer
-														inputTransforms={failureModule?.input_transforms}
+														inputTransforms={failureModule?.value?.input_transforms ??
+															failureModule?.input_transforms ??
+															{}}
 													/>
 													<div class="w-full h-full mt-6">
 														<iframe
@@ -161,7 +169,11 @@ let open = {};
 
 									{#if open[modules.length]}
 										<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
-											<InputTransformsViewer inputTransforms={failureModule?.input_transforms} />
+											<InputTransformsViewer
+												inputTransforms={failureModule?.value?.input_transforms ??
+													failureModule?.input_transforms ??
+													{}}
+											/>
 											<HighlightCode
 												language={failureModule?.value?.language ?? 'deno'}
 												code={failureModule?.value?.content}

package/components/FlowPreviewContent.svelte

@@ -1,78 +1,95 @@
-<script>import { JobService } from '../gen';
+<script>import { Job, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { Button } from './common';
-import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
-import { flowStateStore } from './flows/flowState';
-import { mapJobResultsToFlowState } from './flows/flowStateUtils';
-import { flowStore } from './flows/flowStore';
-import { runFlowPreview, selectedIdToIndexes } from './flows/utils';
+import { dfs, flowStore } from './flows/flowStore';
+import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
+import FlowProgressBar from './flows/FlowProgressBar.svelte';
+import { flowStateStore } from './flows/flowState';
+import CapturePayload from './flows/content/CapturePayload.svelte';
+let capturePayload;
 export let previewMode;
+export let open;
 let jobId = undefined;
+let job = undefined;
 let isValid = false;
 let isRunning = false;
+let jobProgressReset;
 const { selectedId, previewArgs } = getContext('FlowEditorContext');
+const dispatch = createEventDispatcher();
+function sliceModules(modules, upTo, idOrders) {
+    return modules
+        .filter((x) => idOrders.indexOf(x.id) <= upTo)
+        .map((m) => {
+        if (m.value.type === 'forloopflow') {
+            m.value.modules = sliceModules(m.value.modules, upTo, idOrders);
+        }
+        else if (m.value.type === 'branchone') {
+            m.value.branches = m.value.branches.map((b) => {
+                b.modules = sliceModules(b.modules, upTo, idOrders);
+                return b;
+            });
+            m.value.default = sliceModules(m.value.default, upTo, idOrders);
+        }
+        else if (m.value.type === 'branchall') {
+            m.value.branches = m.value.branches.map((b) => {
+                b.modules = sliceModules(b.modules, upTo, idOrders);
+                return b;
+            });
+        }
+        return m;
+    });
+}
 function extractFlow(previewMode) {
     if (previewMode === 'whole') {
         return $flowStore;
     }
     else {
-        let [parentIndex, childIndex] = selectedIdToIndexes($selectedId);
         const flow = JSON.parse(JSON.stringify($flowStore));
-        const modules = flow.value.modules.slice(0, Number(parentIndex) + 1);
-        flow.value.modules = modules;
-        if (childIndex != undefined) {
-            console.log(modules);
-            const lastModule = modules[modules.length - 1].value;
-            if (lastModule.type === 'forloopflow') {
-                lastModule.modules = lastModule.modules.slice(0, Number(childIndex) + 1);
-            }
-            else {
-                throw Error('Excepted forloopflow module');
-            }
+        const idOrders = dfs(flow.value.modules);
+        let upToIndex = idOrders.indexOf($selectedId);
+        if (upToIndex != -1) {
+            flow.value.modules = sliceModules(flow.value.modules, upToIndex, idOrders);
         }
         return flow;
     }
 }
-const dispatch = createEventDispatcher();
 export async function runPreview(args) {
+    jobProgressReset();
     const newFlow = extractFlow(previewMode);
     jobId = await runFlowPreview(args, newFlow);
     isRunning = true;
 }
 function onKeyDown(event) {
-    switch (event.key) {
-        case 'Enter':
-            if (event.ctrlKey) {
-                event.preventDefault();
-                runPreview($previewArgs);
-            }
-            break;
-        case 'Escape':
-            dispatch('close');
-            break;
+    if (open) {
+        switch (event.key) {
+            case 'Enter':
+                if (event.ctrlKey) {
+                    event.preventDefault();
+                    runPreview($previewArgs);
+                }
+                break;
+        }
+    }
+}
+function onJobsLoaded(newJob) {
+    job = newJob;
+    if (job?.type === 'CompletedJob') {
+        isRunning = false;
     }
 }
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<CapturePayload bind:this={capturePayload} />
 
-<div class="flex divide-y flex-col space-y-2 h-screen bg-white p-6 w-full">
-	<div class="flex justify-between">
-		<div class="flex flex-row justify-center items-center ">
-			<div class="flex justify-center p-2 w-8 h-8 bg-blue-200 rounded-lg mr-2 ">
-				<Icon data={faPlay} scale={1} class="text-blue-500" />
-			</div>
+<svelte:window on:keydown={onKeyDown} />
 
-			<h3 class="text-lg leading-6 font-bold text-gray-900">
-				Test preview - {previewMode === 'upTo'
-					? `up to step ${$selectedId.split('-').join(',')}`
-					: ' whole flow'}
-			</h3>
-		</div>
+<div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
+	<div class="flex flex-row justify-between w-full items-center gap-x-1">
 		<Button
 			variant="border"
 			size="lg"
@@ -84,6 +101,30 @@ function onKeyDown(event) {
 		>
 			<Icon data={faClose} />
 		</Button>
+
+		<div class="flex flex-row justify-center items-center">
+			<div class="flex justify-center p-2 w-8 h-8 bg-blue-200 rounded-lg mr-2 ">
+				<Icon data={faPlay} scale={1} class="text-blue-500" />
+			</div>
+
+			<h3
+				class="text-lg leading-6 font-bold text-gray-900 inline-flex flex-row justify-between w-full"
+			>
+				<div>
+					Test {previewMode === 'upTo'
+						? `up to step ${$selectedId.split('-').join(',')}`
+						: ' whole flow'}
+				</div>
+			</h3>
+		</div>
+		<Button
+			btnClasses="ml-2"
+			size="sm"
+			variant="border"
+			on:click={() => {
+				capturePayload.openDrawer()
+			}}>Fill test args from payload</Button
+		>
 	</div>
 	<div class="grow pb-8 max-h-1/2 overflow-auto">
 		<SchemaForm
@@ -117,7 +158,6 @@ function onKeyDown(event) {
 		<Button
 			variant="contained"
 			endIcon={{ icon: isRunning ? faRefresh : faPlay }}
-			size="lg"
 			color="blue"
 			btnClasses="w-full"
 			disabled={!isValid}
@@ -127,17 +167,14 @@ function onKeyDown(event) {
 		</Button>
 	{/if}
 
-	<div class="h-full overflow-y-auto mb-16 grow">
+	<FlowProgressBar {job} bind:reset={jobProgressReset} class="py-4" />
+
+	<div class="h-full overflow-y-auto mb-16 pt-4 grow">
 		{#if jobId}
 			<FlowStatusViewer
+				bind:flowState={$flowStateStore}
 				{jobId}
-				on:jobsLoaded={(e) => {
-					isRunning = false
-					const parentIndex = selectedIdToIndexes($selectedId)[0]
-					const upToIndex =
-						previewMode === 'upTo' ? Number(parentIndex) + 1 : $flowStateStore.modules.length
-					mapJobResultsToFlowState(e.detail, upToIndex)
-				}}
+				on:jobsLoaded={({ detail }) => onJobsLoaded(detail)}
 			/>
 		{/if}
 	</div>

package/components/FlowPreviewContent.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         previewMode: 'upTo' | 'whole';
+        open: boolean;
         runPreview?: ((args: Record<string, any>) => Promise<void>) | undefined;
     };
     events: {

package/components/FlowStatusViewer.svelte

@@ -1,68 +1,100 @@
-<script>import { FlowStatusModule, JobService } from '../gen';
+<script>import { FlowStatusModule, Job, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import FlowJobResult from './FlowJobResult.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
-import { Button } from 'flowbite-svelte';
 import Icon from 'svelte-awesome';
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
+import { Button } from './common';
+import DisplayResult from './DisplayResult.svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
-export let forloopJobIds = undefined;
-export let jobResult = {
-    job: undefined,
-    innerJobs: [],
-    loopJobs: []
-};
+export let flowState = undefined;
+export let flowJobIds = undefined;
+export let job = undefined;
+let jobResults = [];
 let forloop_selected = '';
 let timeout;
-$: innerModules = jobResult?.job?.flow_status?.modules ?? [];
+let lastSize = 0;
+$: {
+    let len = (flowJobIds?.flowJobs ?? []).length;
+    if (len != lastSize) {
+        forloop_selected = flowJobIds?.flowJobs[len - 1] ?? '';
+        lastSize = len;
+    }
+}
+$: innerModules =
+    job?.flow_status?.modules
+        .filter((x) => x.job != jobId)
+        .concat(job?.flow_status.failure_module.type != 'WaitingForPriorSteps'
+        ? job?.flow_status.failure_module
+        : []) ?? [];
+let errorCount = 0;
 async function loadJobInProgress() {
-    const job = await JobService.getJob({
-        workspace: $workspaceStore ?? '',
-        id: jobId ?? ''
-    });
-    jobResult.job = job;
-    jobResult = jobResult;
-    if (job?.type !== 'CompletedJob') {
+    if (jobId != '00000000-0000-0000-0000-000000000000') {
+        try {
+            job = await JobService.getJob({
+                workspace: $workspaceStore ?? '',
+                id: jobId ?? ''
+            });
+            errorCount = 0;
+        }
+        catch (e) {
+            errorCount += 1;
+            console.error(e);
+        }
+    }
+    if (job?.type !== 'CompletedJob' && errorCount < 4) {
         timeout = setTimeout(() => loadJobInProgress(), 500);
     }
 }
-$: jobResult && jobResult.job?.type === 'CompletedJob' && dispatch('jobsLoaded', jobResult);
+$: job && dispatch('jobsLoaded', job);
 function updateJobId() {
-    if (jobId !== jobResult.job?.id) {
+    if (jobId !== job?.id) {
         loadJobInProgress();
     }
 }
 $: jobId && updateJobId();
+$: isListJob = flowJobIds && Array.isArray(flowJobIds?.flowJobs);
 onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
 </script>
 
-{#if jobResult.job}
-	<div class="flow-root w-full space-y-4">
+{#if job}
+	<div class="flow-root w-full space-y-4 ">
 		{#if innerModules.length > 0}
 			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
 		{/if}
-		<FlowPreviewStatus job={jobResult.job} />
-		{#if `result` in jobResult.job}
-			<FlowJobResult job={jobResult.job} />
-		{:else if jobResult.job.logs}
-			<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
-				<pre class="w-full">{jobResult.job.logs}</pre>
+		{#if isListJob}
+			<div class="w-full h-full border border-gray-600 bg-white p-1">
+				<DisplayResult result={jobResults} />
+			</div>
+		{:else}
+			<div class={innerModules.length > 0 ? 'border border-gray-400 shadow p-2' : ''}>
+				<FlowPreviewStatus {job} />
+				{#if `result` in job}
+					<div class="w-full h-full">
+						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
+					</div>
+				{:else if job.logs}
+					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+						<pre class="w-full">{job.logs}</pre>
+					</div>
+				{/if}
 			</div>
 		{/if}
 
-		{#if Array.isArray(forloopJobIds) && forloopJobIds?.length > 0 && Array.isArray(jobResult.loopJobs)}
-			<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4">
-				Loop results ({forloopJobIds.length} items)
+		{#if isListJob}
+			<h3 class="text-md leading-6 font-bold text-gray-600 border-b mb-4">
+				Embedded flows: ({flowJobIds?.flowJobs.length} items)
 			</h3>
-			{#each forloopJobIds as loopJobId, j}
+			{#each flowJobIds?.flowJobs ?? [] as loopJobId, j}
 				<Button
-					color={forloop_selected == loopJobId ? 'dark' : 'light'}
-					class="flex justify-between w-full"
+					variant={forloop_selected === loopJobId ? 'contained' : 'border'}
+					color={forloop_selected === loopJobId ? 'dark' : 'light'}
+					btnClasses="w-full flex justify-start"
 					on:click={() => {
 						if (forloop_selected == loopJobId) {
 							forloop_selected = ''
@@ -71,7 +103,9 @@ onDestroy(() => {
 						}
 					}}
 				>
-					Iteration: #{j}: {loopJobId}
+					<span class="truncate">
+						#{j + 1}: {loopJobId}
+					</span>
 
 					<Icon
 						class="ml-2"
@@ -80,7 +114,25 @@ onDestroy(() => {
 					/>
 				</Button>
 				<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
-					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
+					<svelte:self
+						{flowState}
+						jobId={loopJobId}
+						on:jobsLoaded={(e) => {
+							if (flowJobIds?.moduleId) {
+								if (flowState) {
+									if (
+										!flowState[flowJobIds.moduleId].previewResult ||
+										!Array.isArray(flowState[flowJobIds.moduleId]?.previewResult)
+									) {
+										flowState[flowJobIds.moduleId].previewResult = []
+									}
+									flowState[flowJobIds.moduleId].previewResult[j] = e.detail.result
+									flowState[flowJobIds.moduleId].previewArgs = e.detail.args
+									jobResults[j] = e.detail.result == null ? 'Job in progress ...' : e.detail.result
+								}
+							}
+						}}
+					/>
 				</div>
 			{/each}
 		{:else if innerModules.length > 0}
@@ -90,38 +142,57 @@ onDestroy(() => {
 				</h3>
 
 				{#each innerModules as mod, i}
-					<p class="text-gray-500 mb-2 w-full ">
-						{#if jobResult.job?.raw_flow?.modules && i < jobResult.job?.raw_flow?.modules.length}
+					<div class="line w-8 h-10" />
+					<h3 class="text-gray-500 mb-2 w-full">
+						{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
 							Step
 							<span class="font-medium text-gray-900">
 								{i + 1}
 							</span>
 							out of
-							<span class="font-medium text-gray-900"
-								>{jobResult.job?.raw_flow?.modules.length}</span
-							>
-							{#if jobResult.job.raw_flow?.modules[i]?.summary}
-								: <span class="font-medium text-gray-900"
-									>{jobResult.job.raw_flow?.modules[i]?.summary ?? ''}</span
-								>
+							<span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
+							{#if job.raw_flow?.modules[i]?.summary}
+								: <span class="font-medium text-gray-900">
+									{job.raw_flow?.modules[i]?.summary ?? ''}
+								</span>
 							{/if}
 						{:else}
-							<span class="font-medium text-gray-900"> Failure module </span>
+							<h3>Failure module</h3>
 						{/if}
-					</p>
-
-					<li class="w-full border p-6 space-y-2">
+					</h3>
+					<div class="line w-8 h-10" />
+					<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 						{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 							<svelte:self
+								{flowState}
 								jobId={mod.job}
-								bind:jobResult={jobResult.innerJobs[i]}
-								forloopJobIds={mod.forloop_jobs}
+								flowJobIds={mod.flow_jobs
+									? {
+											moduleId: mod.id,
+											flowJobs: mod.flow_jobs
+									  }
+									: undefined}
 								on:jobsLoaded={(e) => {
-									jobResult = jobResult
+									if (mod.id && (mod.flow_jobs ?? []).length == 0) {
+										if (flowState && flowState[mod.id]) {
+											flowState[mod.id].previewResult = e.detail.result
+											flowState[mod.id].previewArgs = e.detail.args
+										}
+									}
 								}}
 							/>
 						{:else}
-							<span>{mod.type}</span>
+							<span class="italic text-gray-600">
+								<Icon data={faHourglassHalf} class="mr-2" />
+
+								{#if mod.type == FlowStatusModule.type.WAITING_FOR_EVENT}
+									Waiting to be resumed by receivent events such as approvals
+								{:else if mod.type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
+									Waiting for prior steps to complete
+								{:else if mod.type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
+									Job is ready to be executed and will be picked up by the next available worker
+								{/if}
+							</span>
 						{/if}
 					</li>
 				{/each}
@@ -131,3 +202,9 @@ onDestroy(() => {
 {:else}
 	Job loading...
 {/if}
+
+<style>
+	.line {
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
+			no-repeat;
+	}</style>

package/components/FlowStatusViewer.svelte.d.ts

@@ -1,10 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import type { JobResult } from './flows/flowStateUtils';
+import { Job } from '../gen';
+import type { FlowState } from './flows/flowState';
 declare const __propDef: {
     props: {
         jobId: string;
-        forloopJobIds?: string[] | undefined;
-        jobResult?: JobResult | undefined;
+        flowState?: FlowState | undefined;
+        flowJobIds?: {
+            moduleId: string;
+            flowJobs: string[];
+        } | undefined;
+        job?: Job | undefined;
     };
     events: {
         jobsLoaded: CustomEvent<any>;