windmill-components 1.542.5 → 1.550.0

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -12,7 +12,7 @@ import MultiSelect from './select/MultiSelect.svelte';
 import { FlowService, JobService, ScriptService, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
 import { hubBaseUrlStore } from '../stores';
-import { CheckCircle2, Loader2, RotateCw, XCircle, RefreshCcw } from 'lucide-svelte';
+import { CheckCircle2, Loader2, RotateCw, XCircle } from 'lucide-svelte';
 import { hubPaths } from '../hub';
 import { isCloudHosted } from '../cloud';
 const slackRecoveryHandler = hubPaths.slackRecoveryHandler;
@@ -24,9 +24,8 @@ const teamsSuccessHandler = hubPaths.teamsSuccessHandler;
 let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable('custom'), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip, } = $props();
 let customHandlerSchema = $state();
 let slackHandlerSchema = $state();
-let isFetching = $state(false);
-let teams_channels = $state([]);
 let teams_team_name = $state(undefined);
+let teams_team_id = $state(undefined);
 let workspaceConnectedToSlack = $state(undefined);
 let workspaceConnectedToTeams = $state(undefined);
 let connectionTestJob = $state();
@@ -42,7 +41,6 @@ async function loadSlackResources() {
     }
 }
 async function loadTeamsResources() {
-    isFetching = true;
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     if (!emptyString(settings.teams_team_name) && !emptyString(settings.teams_team_id)) {
         workspaceConnectedToTeams = true;
@@ -52,11 +50,8 @@ async function loadTeamsResources() {
     }
     if (workspaceConnectedToTeams) {
         teams_team_name = settings.teams_team_name;
-        teams_channels = await WorkspaceService.listAvailableTeamsChannels({
-            workspace: $workspaceStore
-        });
+        teams_team_id = settings.teams_team_id;
     }
-    isFetching = false;
 }
 async function sendMessage(channel, platform) {
     const testJobFunction = platform === 'slack'
@@ -447,24 +442,23 @@ $effect(() => {
 				<ChannelSelector
 					containerClass="flex-grow"
 					minWidth="200px"
-					placeholder="Select Teams channel"
-					channels={teams_channels}
+					placeholder="Search Teams channels"
+					teamId={teams_team_id}
 					bind:selectedChannel={
 						() =>
 							handlerExtraArgs['channel']
-								? teams_channels.find((ch) => ch.channel_id === handlerExtraArgs['channel'])
+								? {
+										channel_id: handlerExtraArgs['channel'],
+										channel_name: handlerExtraArgs['channel_name']
+									}
 								: undefined,
-						(channel) => (handlerExtraArgs['channel'] = channel?.channel_id)
+						(channel) => {
+							handlerExtraArgs['channel'] = channel?.channel_id;
+							handlerExtraArgs['channel_name'] = channel?.channel_name;
+						}
 					}
+					onError={(e) => sendUserToast('Failed to load channels: ' + e.message, true)}
 				/>
-				<div class="flex-shrink-0">
-					<button
-						onclick={loadTeamsResources}
-						class="flex items-center gap-1 p-1.5 rounded hover:bg-surface-hover focus:bg-surface-hover"
-					>
-						<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
-					</button>
-				</div>
 			</div>
 		</div>
 		<div class="flex flex-row gap-2 pb-4">

package/package/components/FlowHistoryJobPicker.svelte

@@ -7,8 +7,10 @@ import { JobService } from '../gen';
 export let path;
 export let selected = undefined;
 export let selectInitial = false;
+export let loading = false;
 const dispatch = createEventDispatcher();
 async function loadInitial() {
+    loading = true;
     let jobs = await JobService.listJobs({
         workspace: $workspaceStore,
         scriptPathExact: path,
@@ -24,6 +26,7 @@ async function loadInitial() {
     else {
         dispatch('nohistory');
     }
+    loading = false;
 }
 $: $workspaceStore && loadInitial();
 </script>

package/package/components/FlowHistoryJobPicker.svelte.d.ts

@@ -15,6 +15,7 @@ declare const FlowHistoryJobPicker: $$__sveltets_2_IsomorphicComponent<{
     path: string;
     selected?: string | undefined;
     selectInitial?: boolean;
+    loading?: boolean;
 }, {
     select: CustomEvent<any>;
     unselect: CustomEvent<any>;

package/package/components/FlowJobResult.svelte

@@ -7,11 +7,11 @@ let { waitingForExecutor = false, result, result_stream, logs, col = false, noBo
 
 <div
 	class:border={!noBorder}
-	class="grid {!col
-		? 'grid-cols-2'
-		: 'grid-rows-2 max-h-screen'} shadow border border-tertiary-inverse grow overflow-hidden"
+	class="{!col
+		? 'grid grid-cols-2'
+		: 'flex flex-col max-h-screen gap-4'} shadow border border-tertiary-inverse grow overflow-hidden"
 >
-	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
+	<div class="bg-surface {col ? 'max-h-1/2 grow' : 'max-h-80'} p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>
 		{#if result !== undefined || result_stream !== undefined}
 			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
@@ -21,7 +21,7 @@ let { waitingForExecutor = false, result, result_stream, logs, col = false, noBo
 			<div class="text-gray-400">No result (result is undefined)</div>
 		{/if}
 	</div>
-	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
+	<div class="overflow-auto {col ? 'grow' : 'max-h-80'} relative">
 		{#if aiAgentStatus}
 			<AiAgentLogViewer {...aiAgentStatus} {workspaceId} />
 		{:else}

package/package/components/FlowLogRow.svelte

@@ -17,7 +17,7 @@ function handleClick() {
 >
 	<button
 		class={twMerge(
-			'py-1 leading-tight w-full flex items-center justify-left text-xs text-tertiary hover:text-primary ',
+			'py-1 leading-tight w-full flex items-center justify-left text-xs text-tertiary hover:text-primary hover:bg-surface-hover ',
 			isCurrent(id) ? 'bg-surface-hover text-primary' : '',
 			className
 		)}
@@ -44,7 +44,7 @@ function handleClick() {
 		</div>
 	</button>
 
-	{#if isExpanded(id) || !isCollapsible}
+	{#if isExpanded(id, isRunning) || !isCollapsible}
 		<div class="my-1 transition-all duration-200 ease-in-out">
 			<div class="pl-4">
 				{@render children()}

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;