From 8627d3c5aeabfac12a9f06211f8e7db020e758f9 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 29 Apr 2026 15:53:34 +0000
Subject: [PATCH] fix: show skipped label on flow progress bar (#8973)

* fix: show skipped label on flow progress bar for skipped flows

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor: narrow is_skipped via 'in' operator on Job union

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../lib/components/flows/FlowProgressBar.svelte |  9 +++++++--
 .../components/progressBar/ProgressBar.svelte   | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/flows/FlowProgressBar.svelte b/frontend/src/lib/components/flows/FlowProgressBar.svelte
index 46fdd2bade..c7d7198856 100644
--- a/frontend/src/lib/components/flows/FlowProgressBar.svelte
+++ b/frontend/src/lib/components/flows/FlowProgressBar.svelte
@@ -33,13 +33,15 @@
 	let isWaitingForEvents = $state(false)
 	let isCanceled = $state(false)
 	let isScheduled = $state(false)
+	let isSkipped = $state(false)
 
 	let progressBar = $state<ProgressBar | undefined>(undefined)
 
 	function updateJobProgress(job: Job) {
 		// Check if job is scheduled for later
-		const isJobScheduled = Boolean('running' in job && 'scheduled_for' in job &&
-			job.scheduled_for && forLater(job.scheduled_for))
+		const isJobScheduled = Boolean(
+			'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)
+		)
 		isScheduled = isJobScheduled
 
 		const modules = job?.flow_status?.modules
@@ -113,6 +115,7 @@
 		currentStepId = newCurrentStepId
 		isWaitingForEvents = newIsWaitingForEvents
 		isCanceled = job?.canceled || false
+		isSkipped = 'is_skipped' in job && Boolean(job.is_skipped)
 	}
 
 	export function reset() {
@@ -126,6 +129,7 @@
 		isWaitingForEvents = false
 		isCanceled = false
 		isScheduled = false
+		isSkipped = false
 	}
 	$effect(() => {
 		job && updateJobProgress(job)
@@ -149,4 +153,5 @@
 	{isWaitingForEvents}
 	{isCanceled}
 	{isScheduled}
+	{isSkipped}
 />
diff --git a/frontend/src/lib/components/progressBar/ProgressBar.svelte b/frontend/src/lib/components/progressBar/ProgressBar.svelte
index fe6b7c0a77..1bf99d0e91 100644
--- a/frontend/src/lib/components/progressBar/ProgressBar.svelte
+++ b/frontend/src/lib/components/progressBar/ProgressBar.svelte
@@ -34,6 +34,8 @@
 		isCanceled?: boolean
 		// Whether the job is scheduled for later
 		isScheduled?: boolean
+		// Whether the job was skipped (early-stop labelled as skipped)
+		isSkipped?: boolean
 	}
 
 	let {
@@ -53,7 +55,8 @@
 		showStepId = false,
 		isWaitingForEvents = false,
 		isCanceled = false,
-		isScheduled = false
+		isScheduled = false,
+		isSkipped = false
 	}: Props = $props()
 	let duration = 200
 
@@ -149,13 +152,15 @@
 				: 'text-blue-700 dark:text-blue-200'}"
 		>
 			<div class={twMerge(slim ? 'text-xs' : 'text-sm', 'flex items-center gap-1')}>
-				{#if status == 'running' && !isCanceled && !isScheduled}
+				{#if status == 'running' && !isCanceled && !isScheduled && !isSkipped}
 					<Loader2 class="animate-spin" size={14} />
 				{/if}
-				{#key status + isWaitingForEvents + stepId + isCanceled + isScheduled}
+				{#key status + isWaitingForEvents + stepId + isCanceled + isScheduled + isSkipped}
 					<span in:fade={{ duration: 150 }}>
 						{#if status == 'error'}
 							Error occurred
+						{:else if isSkipped}
+							Skipped
 						{:else if status == 'done' && isCanceled}
 							Canceled
 						{:else if status == 'done'}
@@ -171,9 +176,11 @@
 						{:else if hideStepTitle}
 							{isCanceled ? 'Canceled' : 'Running'}
 						{:else if subIndexIsPercent}
-							{(isCanceled ? 'Canceled at ' : '') + `Step ${index + 1} (${subIndex !== undefined ? subIndex + '%' : ''})`}
+							{(isCanceled ? 'Canceled at ' : '') +
+								`Step ${index + 1} (${subIndex !== undefined ? subIndex + '%' : ''})`}
 						{:else}
-							{(isCanceled ? 'Canceled at ' : '') + `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
+							{(isCanceled ? 'Canceled at ' : '') +
+								`Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
 						{/if}
 					</span>
 				{/key}