windmill-components 1.542.5 → 1.555.0

package/package/components/FlowLogViewer.svelte

@@ -10,7 +10,8 @@ import BarsStaggered from './icons/BarsStaggered.svelte';
 import { updateLinks } from '../keyboardChain';
 import FlowLogRow from './FlowLogRow.svelte';
 import { Tooltip } from './meltComponents';
-let { modules, localModuleStates, rootJob, flowStatus, expandedRows, allExpanded, showResultsInputs, toggleExpanded, toggleExpandAll, workspaceId, render, level = 0, flowId = 'root', onSelectedIteration, getSelectedIteration, flowSummary, mode = 'flow', currentId, navigationChain = $bindable(), select } = $props();
+import FlowTimelineBar from './FlowTimelineBar.svelte';
+let { modules, localModuleStates, rootJob, expandedRows, allExpanded, showResultsInputs, toggleExpanded, toggleExpandAll, workspaceId, render, level = 0, flowId = 'root', onSelectedIteration, getSelectedIteration, flowSummary, mode = 'flow', currentId, navigationChain = $bindable(), select, timelineMin: timelineMinAbsolute, timelineTotal: timelineTotalAbsolute, timelineItems, timelineNow, timelineAvailableWidths = $bindable(), timelinelWidth, showTimeline = true } = $props();
 function getJobLink(jobId) {
     if (!jobId)
         return '';
@@ -28,6 +29,8 @@ function getStatusColor(status) {
     return status ? statusColors[status] : 'text-gray-400';
 }
 function getFlowStatus(job) {
+    if (!job)
+        return undefined;
     if (job.type === 'CompletedJob') {
         return job.success ? 'Success' : 'Failure';
     }
@@ -39,7 +42,7 @@ function getFlowStatus(job) {
     }
 }
 function getStepProgress(job, totalSteps) {
-    if (totalSteps === 0)
+    if (!job || totalSteps === 0)
         return '';
     const stepWord = mode === 'aiagent' ? 'action' : 'step';
     // If flow is completed, show total steps
@@ -122,6 +125,8 @@ function findParentsOfErrors(modules) {
 }
 // Get flow info for display
 const flowInfo = $derived.by(() => {
+    if (!rootJob)
+        return undefined;
     const parentsWithErrors = findParentsOfErrors(modules);
     return {
         jobId: rootJob.id,
@@ -135,6 +140,7 @@ const flowInfo = $derived.by(() => {
     };
 });
 let subloopNavigationChains = $state({});
+let useRelativeTimeline = $state(false);
 function buildNavigationLinks() {
     const items = [];
     // Flow header (always first)
@@ -143,7 +149,10 @@ function buildNavigationLinks() {
         return { [`flow-${flowId}`]: { upId: null, downId: null } };
     }
     // Flow input (if exists and shown)
-    if (showResultsInputs && flowInfo.inputs && Object.keys(flowInfo.inputs).length > 0) {
+    if (showResultsInputs &&
+        flowInfo &&
+        flowInfo.inputs &&
+        Object.keys(flowInfo.inputs).length > 0) {
         items.push(`flow-${flowId}-input`);
     }
     // Add modules in order
@@ -176,7 +185,10 @@ function buildNavigationLinks() {
         }
     });
     // Flow result (if exists and shown)
-    if (showResultsInputs && flowInfo.result !== undefined && rootJob.type === 'CompletedJob') {
+    if (showResultsInputs &&
+        flowInfo &&
+        flowInfo.result !== undefined &&
+        rootJob?.type === 'CompletedJob') {
         items.push(`flow-${flowId}-result`);
     }
     // Convert items to navigation links
@@ -227,6 +239,14 @@ function getSubflows(module) {
         });
     }
     else if (module.value.type === 'branchall' || module.value.type === 'branchone') {
+        // Add default branch for branchone
+        if (module.value.type === 'branchone') {
+            subflows.push({
+                modules: module.value.default,
+                label: 'default',
+                flowId: `${module.id}-subflow-default`
+            });
+        }
         // Add all branches
         for (let i = 0; i < module.value.branches.length; i++) {
             const branch = module.value.branches[i];
@@ -236,17 +256,75 @@ function getSubflows(module) {
                 flowId: `${module.id}-subflow-${i}`
             });
         }
-        // Add default branch for branchone
-        if (module.value.type === 'branchone') {
-            subflows.push({
-                modules: module.value.default,
-                label: 'default',
-                flowId: `${module.id}-subflow-default`
-            });
-        }
     }
     return subflows;
 }
+const { timelineMin, timelineTotal } = $derived({
+    timelineMin: useRelativeTimeline && rootJob?.started_at
+        ? new Date(rootJob.started_at).getTime()
+        : timelineMinAbsolute,
+    timelineTotal: useRelativeTimeline && rootJob?.['duration_ms']
+        ? rootJob['duration_ms']
+        : timelineTotalAbsolute
+});
+function getSubflowJob(moduleId, idx, branchChosen, moduleType) {
+    // if a branch is chosen, ignore the other branches
+    if (branchChosen !== undefined && branchChosen !== idx) {
+        return undefined;
+    }
+    const jobType = localModuleStates[moduleId]?.type === 'Failure' ||
+        localModuleStates[moduleId]?.type === 'Success'
+        ? 'CompletedJob'
+        : 'QueuedJob';
+    let jobId = localModuleStates[moduleId]?.job_id;
+    let timelineItem = timelineItems?.[moduleId]?.find((item) => item.id === jobId);
+    let success = localModuleStates[moduleId]?.type === 'Success';
+    let result = localModuleStates[moduleId]?.result;
+    // if the subflow is part of a loop or branchAll
+    if (localModuleStates[moduleId]?.flow_jobs) {
+        const index = moduleType === 'forloopflow' || moduleType === 'whileloopflow'
+            ? (localModuleStates[moduleId]?.selectedForloopIndex ?? idx)
+            : idx;
+        jobId = localModuleStates[moduleId]?.flow_jobs[index];
+        timelineItem = timelineItems?.[moduleId]?.find((item) => item.id === jobId);
+        result = localModuleStates[moduleId]?.flow_jobs_results?.[index];
+        success = localModuleStates[moduleId]?.flow_jobs_success?.[index] ?? false;
+    }
+    return {
+        id: jobId,
+        type: jobType,
+        logs: localModuleStates[moduleId]?.logs,
+        result: result,
+        args: localModuleStates[moduleId]?.args,
+        success: success,
+        started_at: timelineItem?.started_at,
+        created_at: timelineItem?.created_at,
+        duration_ms: timelineItem?.duration_ms
+    };
+}
+function getSelectedIndex(moduleId, moduleItems) {
+    if (!moduleItems || !localModuleStates[moduleId])
+        return undefined;
+    const idToFind = localModuleStates[moduleId].selectedForloop ?? localModuleStates[moduleId].job_id;
+    const index = moduleItems?.findIndex((item) => item.id === idToFind);
+    if (index === -1) {
+        return undefined;
+    }
+    return index;
+}
+function isJobFailure(jobId, moduleId) {
+    if (!moduleId) {
+        return rootJob?.type === 'CompletedJob' && rootJob?.['success'] === false;
+    }
+    // if a jobId is provided, check the flow_jobs_success array for a specific job
+    if (localModuleStates[moduleId]?.flow_jobs_success && !!jobId) {
+        const index = localModuleStates[moduleId]?.flow_jobs?.indexOf(jobId);
+        if (index !== undefined && index >= 0) {
+            return localModuleStates[moduleId]?.flow_jobs_success?.[index] === false;
+        }
+    }
+    return localModuleStates[moduleId]?.type === 'Failure';
+}
 </script>
 
 {#if render}
@@ -258,6 +336,20 @@ function getSubflows(module) {
 				{/snippet}
 				<Keyboard size={16} class="text-tertiary" />
 			</Tooltip>
+			<div class="flex items-center gap-2 whitespace-nowrap">
+				<label for="showTimeline" class="text-xs text-tertiary hover:text-primary transition-colors"
+					>Show timeline</label
+				>
+				<div class="flex-shrink-0">
+					<input
+						type="checkbox"
+						name="showTimeline"
+						id="showTimeline"
+						bind:checked={showTimeline}
+						class="w-3 h-4 accent-primary -my-1"
+					/>
+				</div>
+			</div>
 			<div class="flex items-center gap-2 whitespace-nowrap">
 				<label
 					for="showResultsInputs"
@@ -292,27 +384,60 @@ function getSubflows(module) {
 		<FlowLogRow
 			id={`flow-${flowId}`}
 			isCollapsible={level > 0}
-			isRunning={rootJob.type === 'QueuedJob'}
+			isRunning={rootJob?.type === 'QueuedJob'}
 			{isCurrent}
 			{isExpanded}
 			{toggleExpanded}
-			class={rootJob.type === undefined ? 'opacity-50' : ''}
+			class={rootJob?.type === undefined ? 'opacity-50' : ''}
 			{select}
 		>
 			{#snippet label()}
 				<div class="flex items-center gap-2">
 					<!-- Flow icon -->
-					{@render flowIcon(level == 0 ? getFlowStatus(rootJob) : flowStatus, flowInfo.hasErrors)}
+					{@render flowIcon(getFlowStatus(rootJob), flowInfo?.hasErrors)}
 
-					<div class="text-xs text-left font-mono grow min-w-0">
+					<div class="text-xs text-left font-mono">
 						{mode === 'aiagent' ? 'AI Agent' : level == 0 ? 'Flow' : 'Subflow'}
-						{#if flowInfo.label}
+						{#if flowInfo?.label}
 							: {flowInfo.label}
 						{/if}
 						<span class="text-tertiary">{getStepProgress(rootJob, modules.length)}</span>
 					</div>
 
-					{#if flowInfo.jobId}
+					<div
+						class="min-w-min grow group"
+						bind:clientWidth={
+							() => timelineAvailableWidths[flowId] ?? 0,
+							(v) => (timelineAvailableWidths[flowId] = v)
+						}
+					>
+						{#if timelineItems && showTimeline && timelineMin != undefined && timelineTotal}
+							{@const moduleItems = [
+								{
+									started_at: rootJob?.started_at
+										? new Date(rootJob.started_at).getTime()
+										: undefined,
+									duration_ms: rootJob?.['duration_ms'] ?? timelineTotal,
+									id: flowId
+								}
+							]}
+							<FlowTimelineBar
+								total={timelineTotal}
+								min={timelineMin}
+								items={moduleItems}
+								now={timelineNow}
+								{timelinelWidth}
+								showZoomButtons={level > 0 && isExpanded(`flow-${flowId}`)}
+								onZoom={() => {
+									useRelativeTimeline = !useRelativeTimeline
+								}}
+								zoom={useRelativeTimeline ? 'in' : 'out'}
+								isJobFailure={(id) => isJobFailure(id)}
+							/>
+						{/if}
+					</div>
+
+					{#if flowInfo?.jobId}
 						<a
 							href={getJobLink(flowInfo.jobId)}
 							class="text-xs text-gray-400 hover:text-primary pl-1"
@@ -326,10 +451,10 @@ function getSubflows(module) {
 				</div>
 			{/snippet}
 
-			{#if level === 0 || isExpanded(`flow-${flowId}`, rootJob.type === 'QueuedJob')}
+			{#if level === 0 || isExpanded(`flow-${flowId}`, rootJob?.type === 'QueuedJob')}
 				<div class="mb-2 transition-all duration-200 ease-in-out w-full">
 					<!-- Flow logs -->
-					{#if flowInfo.logs}
+					{#if flowInfo?.logs}
 						<LogViewer
 							content={flowInfo.logs}
 							jobId={flowInfo.jobId}
@@ -346,7 +471,7 @@ function getSubflows(module) {
 					<!-- Flow steps - nested as children -->
 					<ul class="w-full font-mono text-xs bg-surface-secondary list-none border-l">
 						<!-- Flow inputs as first row entry -->
-						{#if showResultsInputs && flowInfo.inputs && Object.keys(flowInfo.inputs).length > 0}
+						{#if showResultsInputs && flowInfo?.inputs && Object.keys(flowInfo.inputs).length > 0}
 							<FlowLogRow
 								id={`flow-${flowId}-input`}
 								isCollapsible={true}
@@ -379,6 +504,12 @@ function getSubflows(module) {
 								{@const isRunning = status === 'InProgress' || status === 'WaitingForExecutor'}
 								{@const hasEmptySubflowValue = hasEmptySubflow(module.id, module.value.type)}
 								{@const isCollapsible = !hasEmptySubflowValue}
+								{@const jobId = localModuleStates[module.id]?.job_id}
+								{@const moduleItems = timelineItems?.[module.id]}
+								{@const branchChosen =
+									module.value.type === 'branchone'
+										? (localModuleStates[module.id]?.branchChosen ?? 0)
+										: undefined}
 								<FlowLogRow
 									id={module.id}
 									{isCollapsible}
@@ -400,12 +531,12 @@ function getSubflows(module) {
 													: ''
 											)}
 										>
-											<div class="flex items-center gap-2 grow min-w-0">
+											<div class="flex items-center gap-2">
 												<!-- Step icon -->
 												{@render stepIcon(
 													module.value.type,
 													status as FlowStatusModule['type'],
-													flowInfo.parentsWithErrors.has(module.id)
+													flowInfo?.parentsWithErrors.has(module.id)
 												)}
 
 												<div class="flex items-center gap-2">
@@ -447,7 +578,7 @@ function getSubflows(module) {
 													</span>
 													{#if !hasEmptySubflowValue && localModuleStates[module.id]?.flow_jobs && (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow')}
 														<span
-															class="text-xs font-mono font-medium inline-flex items-center grow min-w-0 -my-2"
+															class="text-xs font-mono font-medium inline-flex items-center -my-2"
 														>
 															<button onclick={(e) => e.stopPropagation()}>
 																<FlowJobsMenu
@@ -470,49 +601,78 @@ function getSubflows(module) {
 												</div>
 											</div>
 
-											{#if isLeafStep}
-												{@const jobId = localModuleStates[module.id]?.job_id}
-												{#if jobId}
-													<a
-														href={getJobLink(jobId ?? '')}
-														class="text-xs text-gray-400 hover:text-primary pl-1"
-														target="_blank"
-														rel="noopener noreferrer"
-													>
-														<ExternalLink size={12} />
-													</a>
+											<div
+												class="min-w-min grow {isLeafStep ? 'mr-2' : 'mr-6'} min-h-2"
+												bind:clientWidth={
+													() => timelineAvailableWidths[module.id] ?? 0,
+													(v) => (timelineAvailableWidths[module.id] = v)
+												}
+											>
+												{#if timelineMin != undefined && timelineTotal && moduleItems && showTimeline}
+													<FlowTimelineBar
+														total={timelineTotal}
+														min={timelineMin}
+														items={moduleItems ?? []}
+														now={timelineNow}
+														{timelinelWidth}
+														onSelectIteration={(id) => {
+															if (
+																module.value.type !== 'forloopflow' &&
+																module.value.type !== 'whileloopflow'
+															) {
+																return
+															}
+															const index =
+																localModuleStates[module.id]?.flow_jobs?.indexOf(id) ?? undefined
+															if (index !== undefined) {
+																onSelectedIteration?.({
+																	id,
+																	index,
+																	manuallySet: true,
+																	moduleId: module.id
+																})
+															}
+														}}
+														showIterations={localModuleStates[module.id]?.flow_jobs}
+														selectedIndex={getSelectedIndex(module.id, moduleItems)}
+														idToIterationIndex={(id) => {
+															return localModuleStates[module.id]?.flow_jobs?.indexOf(id)
+														}}
+														isJobFailure={() => isJobFailure(undefined, module.id)}
+													/>
 												{/if}
+											</div>
+
+											{#if isLeafStep && jobId}
+												<a
+													href={getJobLink(jobId ?? '')}
+													class="text-xs text-gray-400 hover:text-primary pl-1"
+													target="_blank"
+													rel="noopener noreferrer"
+												>
+													<ExternalLink size={12} />
+												</a>
 											{/if}
 										</div>
 									{/snippet}
 
 									{#if isCollapsible && isExpanded(module.id, isRunning)}
-										{@const args = localModuleStates[module.id]?.args}
-										{@const logs = localModuleStates[module.id]?.logs}
-										{@const result = localModuleStates[module.id]?.result}
-										{@const jobId = localModuleStates[module.id]?.job_id}
+										{@const subflows = getSubflows(module)}
 										<div class="my-1 transition-all duration-200 ease-in-out border-l">
 											<!-- Show child steps if they exist -->
-											{#each getSubflows(module) as subflow}
-												{@const subflowJob = {
-													id: jobId,
-													type:
-														localModuleStates[module.id]?.type === 'Failure' ||
-														localModuleStates[module.id]?.type === 'Success'
-															? 'CompletedJob'
-															: ('QueuedJob' as Job['type']),
-													logs,
-													result,
-													args,
-													success: localModuleStates[module.id]?.type === 'Success'
-												}}
+											{#each subflows as subflow, idx}
+												{@const subflowJob = getSubflowJob(
+													module.id,
+													idx,
+													branchChosen,
+													module.value.type
+												)}
 												<div class="border-l mb-2">
 													<!-- Recursively render child steps using FlowLogViewer -->
 													<FlowLogViewer
 														modules={subflow.modules}
 														{localModuleStates}
 														rootJob={subflowJob}
-														flowStatus={localModuleStates[module.id]?.type}
 														{expandedRows}
 														{allExpanded}
 														{showResultsInputs}
@@ -528,11 +688,22 @@ function getSubflows(module) {
 														{currentId}
 														bind:navigationChain={subloopNavigationChains[subflow.flowId]}
 														{select}
+														{timelineNow}
+														{timelineMin}
+														{timelineTotal}
+														{timelineItems}
+														bind:timelineAvailableWidths
+														{timelinelWidth}
+														{showTimeline}
 													/>
 												</div>
 											{/each}
 
-											{#if getSubflows(module).length === 0}
+											{#if subflows.length === 0}
+												{@const args = localModuleStates[module.id]?.args}
+												{@const logs = localModuleStates[module.id]?.logs}
+												{@const result = localModuleStates[module.id]?.result}
+												{@const jobId = localModuleStates[module.id]?.job_id}
 												<!-- Show input arguments -->
 												{#if showResultsInputs && isLeafStep && args && Object.keys(args).length > 0}
 													<FlowLogRow
@@ -626,7 +797,7 @@ function getSubflows(module) {
 						{/if}
 
 						<!-- Flow result as last row entry -->
-						{#if showResultsInputs && flowInfo.result !== undefined && rootJob.type === 'CompletedJob'}
+						{#if showResultsInputs && flowInfo?.result !== undefined && rootJob?.type === 'CompletedJob'}
 							<FlowLogRow
 								id={`flow-${flowId}-result`}
 								isCollapsible={true}
@@ -652,7 +823,7 @@ function getSubflows(module) {
 	</ul>
 {/if}
 
-{#snippet flowIcon(status: FlowStatusModule['type'] | undefined, hasErrors: boolean)}
+{#snippet flowIcon(status: FlowStatusModule['type'] | undefined, hasErrors: boolean | undefined)}
 	{@const colorClass = getStatusColor(status)}
 	<div class="relative flex items-center">
 		<BarsStaggered
@@ -671,7 +842,7 @@ function getSubflows(module) {
 {#snippet stepIcon(
 	stepType: string | undefined,
 	status: FlowStatusModule['type'] | undefined,
-	hasErrors: boolean
+	hasErrors: boolean | undefined
 )}
 	{@const colorClass = getStatusColor(status)}
 	{@const animationClass = status === 'InProgress' ? 'animate-pulse' : ''}

package/package/components/FlowLogViewer.svelte.d.ts

@@ -1,13 +1,12 @@
 import FlowLogViewer from './FlowLogViewer.svelte';
-import type { FlowModule, FlowStatusModule, Job } from '../gen';
+import type { FlowModule, Job } from '../gen';
 import type { GraphModuleState } from './graph/model';
 import type { NavigationChain } from '../keyboardChain';
 type RootJobData = Partial<Job>;
 interface Props {
     modules: FlowModule[];
     localModuleStates: Record<string, GraphModuleState>;
-    rootJob: RootJobData;
-    flowStatus: FlowStatusModule['type'] | undefined;
+    rootJob: RootJobData | undefined;
     expandedRows: Record<string, boolean>;
     allExpanded?: boolean;
     showResultsInputs?: boolean;
@@ -17,7 +16,7 @@ interface Props {
     render: boolean;
     level?: number;
     flowId: string;
-    onSelectedIteration: (detail: {
+    onSelectedIteration?: (detail: {
         id: string;
         index: number;
         manuallySet: true;
@@ -32,7 +31,19 @@ interface Props {
     currentId?: string | null;
     navigationChain?: NavigationChain;
     select: (id: string) => void;
+    timelineMin?: number;
+    timelineTotal?: number;
+    timelineItems?: Record<string, Array<{
+        created_at?: number;
+        started_at?: number;
+        duration_ms?: number;
+        id: string;
+    }>>;
+    timelineNow: number;
+    timelineAvailableWidths: Record<string, number>;
+    timelinelWidth: number;
+    showTimeline?: boolean;
 }
-declare const FlowLogViewer: import("svelte").Component<Props, {}, "navigationChain">;
+declare const FlowLogViewer: import("svelte").Component<Props, {}, "navigationChain" | "timelineAvailableWidths">;
 type FlowLogViewer = ReturnType<typeof FlowLogViewer>;
 export default FlowLogViewer;

package/package/components/FlowLogViewerWrapper.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">import FlowLogViewer from './FlowLogViewer.svelte';
-import { untrack } from 'svelte';
+import { TimelineCompute } from '../timelineCompute.svelte';
+import { onMount, untrack } from 'svelte';
 import { ChangeTracker } from '../svelte5Utils.svelte';
 import { readFieldsRecursively } from '../utils';
-let { job, localModuleStates, workspaceId, render, onSelectedIteration, mode = 'flow' } = $props();
+import OnChange from './common/OnChange.svelte';
+let { job, localModuleStates, localDurationStatuses, workspaceId, render, onSelectedIteration, mode = 'flow' } = $props();
 // State for tracking expanded rows - using Record to allow explicit control
 let expandedRows = $state({});
 let allExpanded = $state(false);
@@ -10,6 +12,19 @@ let showResultsInputs = $state(true);
 // Keyboard navigation state - incremental like expandedRows
 let currentId = $state('flow-root');
 let navigationChain = $state({});
+// Timeline state
+let timelineCompute = $state(undefined);
+onMount(() => {
+    timelineCompute = new TimelineCompute(modules.map((m) => m.id), localDurationStatuses ?? {}, job.type === 'CompletedJob');
+    return () => {
+        timelineCompute?.destroy();
+    };
+});
+// Derived timeline values
+const timelineMin = $derived(timelineCompute?.min ?? undefined);
+const timelineTotal = $derived(timelineCompute?.total ?? undefined);
+const timelineItems = $derived(timelineCompute?.items ?? undefined);
+const timelineNow = $derived(timelineCompute?.now ?? Date.now());
 let moduleTracker = new ChangeTracker($state.snapshot(job.raw_flow?.modules ?? []));
 $effect(() => {
     readFieldsRecursively(job.raw_flow?.modules ?? []);
@@ -64,8 +79,41 @@ function handleKeydown(event) {
 function select(id) {
     currentId = id;
 }
+let timelineAvailableWidths = $state({});
+let lastJobId = $state(job.id);
+const timelinelWidth = $derived.by(() => {
+    const widths = Object.values(timelineAvailableWidths);
+    return widths.length > 0 ? Math.max(Math.min(...widths) - 12, 0) : 0;
+});
+function updateJobId() {
+    if (job.id !== lastJobId) {
+        lastJobId = job.id;
+        navigationChain = {};
+        timelineAvailableWidths = {};
+        currentId = 'flow-root';
+        showResultsInputs = true;
+        timelineCompute?.reset();
+    }
+}
+$effect.pre(() => {
+    job.id;
+    untrack(() => {
+        job.id && updateJobId();
+    });
+});
 </script>
 
+<OnChange
+	key={localDurationStatuses}
+	onChange={() => {
+		timelineCompute?.updateInputs(
+			modules.map((m) => m.id),
+			localDurationStatuses ?? {},
+			job.type === 'CompletedJob'
+		)
+	}}
+/>
+
 <div
 	class="w-full rounded-md overflow-hidden border focus:border-gray-400 dark:focus:border-gray-400"
 	role="tree"
@@ -86,10 +134,15 @@ function select(id) {
 		{render}
 		{getSelectedIteration}
 		flowId="root"
-		flowStatus={undefined}
 		{mode}
 		{currentId}
 		bind:navigationChain
 		{select}
+		{timelineMin}
+		{timelineTotal}
+		{timelineItems}
+		{timelineNow}
+		bind:timelineAvailableWidths
+		{timelinelWidth}
 	/>
 </div>

package/package/components/FlowLogViewerWrapper.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Job } from '../gen';
-import type { GraphModuleState } from './graph';
+import type { DurationStatus, GraphModuleState } from './graph';
 interface Props {
     job: Partial<Job>;
-    localModuleStates: Record<string, GraphModuleState>;
+    localDurationStatuses?: Record<string, DurationStatus>;
     workspaceId: string | undefined;
     render: boolean;
-    onSelectedIteration: (detail: {
+    localModuleStates: Record<string, GraphModuleState>;
+    onSelectedIteration?: (detail: {
         id: string;
         index: number;
         manuallySet: true;

package/package/components/FlowLoopIterationPreview.svelte

@@ -43,14 +43,14 @@ export const whileLoopSchema = {
 };
 let selectedJobStep = $state(undefined);
 let isRunning = $state(false);
-let jobProgressReset = $state(undefined);
+let progressBar = $state(undefined);
 export function test() {
     runPreview(previewArgs, undefined);
 }
 const { flowStateStore, pathStore } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 export async function runPreview(args, restartedFrom) {
-    jobProgressReset?.();
+    progressBar?.reset();
     const newFlow = { value: { modules }, summary: '' };
     jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
     isRunning = true;
@@ -129,7 +129,7 @@ $effect(() => {
 		<div></div>
 	</div>
 	<div class="w-full flex flex-col gap-y-1">
-		<FlowProgressBar {job} bind:reset={jobProgressReset} />
+		<FlowProgressBar {job} bind:this={progressBar} />
 	</div>
 	<div class="overflow-y-auto grow pr-4">
 		<div class="max-h-1/2 overflow-auto border-b">
@@ -144,7 +144,7 @@ $effect(() => {
 		<div class="pt-4 grow">
 			{#if jobId}
 				<FlowStatusViewer
-					bind:flowStateStore={flowStateStore.val}
+					bind:flowState={flowStateStore.val}
 					{jobId}
 					onJobsLoaded={({ job: newJob }) => {
 						job = newJob

package/package/components/FlowLoopIterationPreview.svelte.d.ts

@@ -30,6 +30,6 @@ declare const FlowLoopIterationPreview: $$__sveltets_2_IsomorphicComponent<Props
     whileLoopSchema: Schema;
     test: () => void;
     runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
-}, "job" | "previewArgs" | "jobId">;
+}, "job" | "jobId" | "previewArgs">;
 type FlowLoopIterationPreview = InstanceType<typeof FlowLoopIterationPreview>;
 export default FlowLoopIterationPreview;