windmill-components 1.558.3 → 1.596.0

package/package/components/FlowMetadata.svelte

@@ -13,13 +13,13 @@ let { job, scheduleEditor } = $props();
 </script>
 
 <div
-	class="rounded-md p-3 bg-surface-secondary shadow-sm sm:text-sm md:text-base overflow-x-auto"
+	class="rounded-md p-4 bg-surface-secondary overflow-x-auto text-xs text-primary font-normal flex flex-col gap-1"
 	style="min-height: 150px;"
 >
 	<JobStatus {job} />
 	<div class="flex flex-row gap-2 items-center">
-		<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
-		<span class="text-2xs text-secondary whitespace-nowrap">
+		<Clock size={SMALL_ICON_SIZE} class="min-w-3.5" />
+		<span class="whitespace-nowrap">
 			{#if job['success'] != undefined}
 				Received job: {displayDate(job.created_at ?? '')}
 			{:else}
@@ -29,8 +29,8 @@ let { job, scheduleEditor } = $props();
 		</span>
 	</div>
 	{#if job && 'started_at' in job && job.started_at}
-		<div class="flex flex-row gap-2 items-center text-sm">
-			<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+		<div class="flex flex-row gap-2 items-center">
+			<Clock size={SMALL_ICON_SIZE} class="min-w-3.5" />
 			<span class="whitespace-nowrap">
 				Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
 				<Tooltip small>{job?.started_at}</Tooltip>
@@ -38,17 +38,17 @@ let { job, scheduleEditor } = $props();
 		</div>
 	{/if}
 	{#if job && job['mem_peak']}
-		<div class="flex flex-row gap-2 items-center text-sm">
+		<div class="flex flex-row gap-2 items-center">
 			<MemoryStick size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 			<span> Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span>
 		</div>
 	{/if}
-	<div>
+	<div class="text-xs text-primary font-normal flex flex-col gap-1">
 		{#if job && job.parent_job}
 			{#if job.is_flow_step}
-				<div class="flex flex-row gap-2 items-center text-sm">
-					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
-					<span class="whitespace-nowrap text-sm">
+				<div class="flex flex-row gap-2 items-center">
+					<BarsStaggered size={SMALL_ICON_SIZE} class="min-w-3.5" />
+					<span class="whitespace-nowrap">
 						Step of flow
 						<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
 							{truncateRev(job.parent_job, 18)}
@@ -56,8 +56,8 @@ let { job, scheduleEditor } = $props();
 					</span>
 				</div>
 			{:else}
-				<div class="flex flex-row gap-2 items-center text-sm">
-					<Bot size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+				<div class="flex flex-row gap-2 items-center">
+					<Bot size={SMALL_ICON_SIZE} class="min-w-3.5" />
 					<span class="whitespace-nowrap">
 						Triggered by parent
 						<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
@@ -67,8 +67,8 @@ let { job, scheduleEditor } = $props();
 				</div>
 			{/if}
 		{:else if job && job.schedule_path}
-			<div class="flex flex-row gap-2 w-full items-center text-sm">
-				<Calendar size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+			<div class="flex flex-row gap-2 w-full items-center">
+				<Calendar size={SMALL_ICON_SIZE} class="min-w-3.5" />
 				<span class="whitespace-nowrap">
 					Schedule:
 					<!-- svelte-ignore a11y_invalid_attribute -->
@@ -90,18 +90,18 @@ let { job, scheduleEditor } = $props();
 			{@const viewHref = `${base}/${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
 			<div class="flex flex-row gap-2 items-center">
 				{#if isScript}
-					<Code2 size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+					<Code2 size={SMALL_ICON_SIZE} class="min-w-3.5" />
 				{:else}
-					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary" />
+					<BarsStaggered size={SMALL_ICON_SIZE} />
 				{/if}
-				<span class="truncate text-sm">
+				<span class="truncate">
 					<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
 				</span>
 			</div>
 		{/if}
 
-		<div class="flex items-center gap-2 text-sm">
-			<User size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+		<div class="flex items-center gap-2">
+			<User size={SMALL_ICON_SIZE} class="min-w-3.5" />
 
 			<span>
 				By {truncateRev(

package/package/components/FlowPlugConnect.svelte

@@ -9,12 +9,10 @@ export let wrapperClasses = '';
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
 	<Button
-		variant="border"
-		color="light"
-		size="xs2"
+		variant="default"
 		btnClasses={twMerge(
-			connecting ? 'text-blue-500' : 'text-tertiary',
-			'group/plug-btn overflow-clip flex p-0'
+			connecting ? 'text-accent' : '',
+			'bg-surface hover:bg-surface-hover group/plug-btn overflow-clip flex p-0'
 		)}
 		on:click
 		{...id ? { id } : {}}

package/package/components/FlowPreviewContent.svelte

@@ -1,15 +1,13 @@
-<script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { JobService } from '../gen';
+<script lang="ts">import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { Badge, Button } from './common';
-import Popover from './meltComponents/Popover.svelte';
 import { createEventDispatcher, getContext, untrack } from 'svelte';
-import { runFlowPreview } from './flows/utils';
+import { runFlowPreview } from './flows/utils.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SchemaFormWithArgPicker from './SchemaFormWithArgPicker.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import { AlertTriangle, ArrowRight, CornerDownLeft, Loader2, Play, RefreshCw, X } from 'lucide-svelte';
+import { AlertTriangle, CornerDownLeft, Loader2, Play, RefreshCw, X } from 'lucide-svelte';
 import { emptyString, sendUserToast } from '../utils';
 import { dfs } from './flows/dfs';
 import { sliceModules } from './flows/flowStateUtils.svelte';
@@ -18,9 +16,9 @@ import Toggle from './Toggle.svelte';
 import JsonInputs from './JsonInputs.svelte';
 import FlowHistoryJobPicker from './FlowHistoryJobPicker.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
-import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
+import FlowChat from './flows/conversations/FlowChat.svelte';
 import { stateSnapshot } from '../svelte5Utils.svelte';
-import FlowChatInterface from './flows/conversations/FlowChatInterface.svelte';
+import FlowRestartButton from './FlowRestartButton.svelte';
 let { previewMode = $bindable(), open, preventEscape = $bindable(false), jobId = $bindable(undefined), job = $bindable(undefined), initial = $bindable(false), selectedJobStep = $bindable(undefined), selectedJobStepIsTopLevel = $bindable(undefined), selectedJobStepType = $bindable('single'), rightColumnSelect = $bindable('timeline'), branchOrIterationN = $bindable(0), scrollTop = $bindable(0), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), onRunPreview, render = false, onJobDone, upToId = undefined } = $props();
 let restartBranchNames = [];
 let isRunning = $state(false);
@@ -30,11 +28,11 @@ let schemaHeight = $state(0);
 let isValid = $state(true);
 let suspendStatus = $state({ val: {} });
 let isOwner = $state(false);
-export async function test() {
+export async function test(conversationId) {
     renderCount++;
-    return await runPreview(previewArgs.val, undefined);
+    return await runPreview(previewArgs.val, undefined, conversationId);
 }
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPathStore, fakeInitialPath, customUi, executionCount } = $state(getContext('FlowEditorContext'));
+const { selectionManager, previewArgs, flowStateStore, flowStore, pathStore, initialPathStore, fakeInitialPath, customUi, executionCount } = $state(getContext('FlowEditorContext'));
 const dispatch = createEventDispatcher();
 let renderCount = $state(0);
 let schemaFormWithArgPicker = $state(undefined);
@@ -42,15 +40,21 @@ let currentJobId = $state(undefined);
 let stepHistoryLoader = getStepHistoryLoaderContext();
 let flowProgressBar = $state(undefined);
 let loadingHistory = $state(false);
+let shouldUseStreaming = $derived.by(() => {
+    const modules = flowStore.val.value?.modules;
+    const lastModule = modules && modules.length > 0 ? modules[modules.length - 1] : undefined;
+    return (lastModule?.value?.type === 'aiagent' &&
+        lastModule?.value?.input_transforms?.streaming?.type === 'static' &&
+        lastModule?.value?.input_transforms?.streaming?.value === true);
+});
 function extractFlow(previewMode) {
-    const previewFlow = aiChatManager.flowAiChatHelpers?.getPreviewFlow();
     if (previewMode === 'whole') {
-        return previewFlow ?? flowStore.val;
+        return flowStore.val;
     }
     else {
-        const flow = previewFlow ?? stateSnapshot(flowStore).val;
+        const flow = stateSnapshot(flowStore).val;
         const idOrders = dfs(flow.value.modules, (x) => x.id);
-        let upToIndex = idOrders.indexOf(upToId ?? $selectedId);
+        let upToIndex = idOrders.indexOf(upToId ?? selectionManager.getSelectedId() ?? '');
         if (upToIndex != -1) {
             flow.value.modules = sliceModules(flow.value.modules, upToIndex, idOrders);
         }
@@ -58,7 +62,7 @@ function extractFlow(previewMode) {
     }
 }
 let lastPreviewFlow = $state(undefined);
-export async function runPreview(args, restartedFrom) {
+export async function runPreview(args, restartedFrom, conversationId) {
     let newJobId = undefined;
     if (stepHistoryLoader?.flowJobInitial !== false) {
         stepHistoryLoader?.setFlowJobInitial(false);
@@ -67,7 +71,7 @@ export async function runPreview(args, restartedFrom) {
         lastPreviewFlow = JSON.stringify(flowStore.val);
         flowProgressBar?.reset();
         const newFlow = extractFlow(previewMode);
-        newJobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
+        newJobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom, conversationId);
         jobId = newJobId;
         isRunning = true;
         if (inputSelected) {
@@ -208,8 +212,8 @@ export function flowHasChanged() {
 					on:click={() => dispatch('close')}
 					startIcon={{ icon: X }}
 					iconOnly
-					size="sm"
-					color="light"
+					unifiedSize="md"
+					variant="default"
 					btnClasses="hover:bg-surface-hover  bg-surface-secondaryw-8 h-8 rounded-full p-0"
 				/>
 			</div>
@@ -217,11 +221,12 @@ export function flowHasChanged() {
 			{#if isRunning}
 				<div class="mx-auto">
 					<Button
-						color="red"
+						variant="accent"
+						destructive
 						on:click={async () => {
 							cancelTest()
 						}}
-						size="sm"
+						unifiedSize="md"
 						btnClasses="w-full max-w-lg"
 						loading={true}
 						clickableWhileLoading
@@ -230,108 +235,26 @@ export function flowHasChanged() {
 					</Button>
 				</div>
 			{:else}
-				<div class="grow justify-center flex flex-row gap-4">
-					{#if jobId !== undefined && selectedJobStep !== undefined && selectedJobStepIsTopLevel && aiChatManager.flowAiChatHelpers?.getModuleAction(selectedJobStep) !== 'removed'}
-						{#if selectedJobStepType == 'single'}
-							<Button
-								size="xs"
-								color="light"
-								variant="border"
-								title={`Re-start this flow from step ${selectedJobStep} (included).`}
-								on:click={() => {
-									runPreview(previewArgs.val, {
-										flow_job_id: jobId,
-										step_id: selectedJobStep,
-										branch_or_iteration_n: 0
-									})
-								}}
-								startIcon={{ icon: Play }}
-							>
-								Re-start from
-								<Badge baseClass="ml-1" color="indigo">
-									{selectedJobStep}
-								</Badge>
-							</Button>
-						{:else}
-							<Popover
-								floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
-								contentClasses="p-4"
-							>
-								{#snippet button()}
-									<Button
-										title={`Re-start this flow from step ${selectedJobStep} (included).`}
-										variant="border"
-										color="blue"
-										startIcon={{ icon: RefreshCw }}
-										on:click={() => {
-											runPreview(previewArgs.val, {
-												flow_job_id: jobId,
-												step_id: selectedJobStep,
-												branch_or_iteration_n: 0
-											})
-										}}
-										nonCaptureEvent={true}
-									>
-										Re-start from
-										<Badge baseClass="ml-1" color="indigo">
-											{selectedJobStep}
-										</Badge>
-									</Button>
-								{/snippet}
-								{#snippet content()}
-									<label class="block text-primary p-4">
-										<div class="pb-1 text-sm text-secondary"
-											>{selectedJobStepType == 'forloop'
-												? 'From iteration #:'
-												: 'From branch:'}</div
-										>
-										<div class="flex w-full">
-											{#if selectedJobStepType === 'forloop'}
-												<input
-													type="number"
-													min="0"
-													bind:value={branchOrIterationN}
-													class="!w-32 grow"
-													onclick={stopPropagation(() => {})}
-												/>
-											{:else}
-												<select
-													bind:value={branchOrIterationN}
-													class="!w-32 grow"
-													onclick={stopPropagation(() => {})}
-												>
-													{#each restartBranchNames as [branchIdx, branchName]}
-														<option value={branchIdx}>{branchName}</option>
-													{/each}
-												</select>
-											{/if}
-											<Button
-												size="xs"
-												color="blue"
-												buttonType="button"
-												btnClasses="!p-1 !w-[34px] !ml-1"
-												aria-label="Restart flow"
-												on:click|once={() => {
-													runPreview(previewArgs.val, {
-														flow_job_id: jobId,
-														step_id: selectedJobStep,
-														branch_or_iteration_n: branchOrIterationN
-													})
-												}}
-											>
-												<ArrowRight size={18} />
-											</Button>
-										</div>
-									</label>
-								{/snippet}
-							</Popover>
-						{/if}
+				<div class="grow justify-center flex flex-row gap-2">
+					{#if jobId !== undefined && selectedJobStep !== undefined && selectedJobStepIsTopLevel}
+						<FlowRestartButton
+							{jobId}
+							{selectedJobStep}
+							{selectedJobStepType}
+							{restartBranchNames}
+							onRestart={(stepId, branchOrIterationN) => {
+								runPreview(previewArgs.val, {
+									flow_job_id: jobId,
+									step_id: stepId,
+									branch_or_iteration_n: branchOrIterationN
+								})
+							}}
+						/>
 					{/if}
 					{#if !flowStore.val.value?.chat_input_enabled}
 						<Button
-							variant="contained"
+							variant="accent"
 							startIcon={{ icon: isRunning ? RefreshCw : Play }}
-							color="dark"
 							size="sm"
 							btnClasses="w-full max-w-lg"
 							on:click={() => runPreview(previewArgs.val, undefined)}
@@ -341,7 +264,7 @@ export function flowHasChanged() {
 							{#if previewMode == 'upTo'}
 								Test up to
 								<Badge baseClass="ml-1" color="indigo">
-									{$selectedId}
+									{selectionManager.getSelectedId()}
 								</Badge>
 							{:else}
 								Test flow
@@ -374,15 +297,14 @@ export function flowHasChanged() {
 		{#if render}
 			{#if flowStore.val.value?.chat_input_enabled}
 				<div class="flex flex-row justify-center w-full">
-					<FlowChatInterface
-						onRunFlow={async (userMessage, _conversationId) => {
-							await runPreview({ user_message: userMessage }, undefined)
+					<FlowChat
+						useStreaming={shouldUseStreaming}
+						onRunFlow={async (userMessage, conversationId) => {
+							await runPreview({ user_message: userMessage }, undefined, conversationId)
 							return jobId ?? ''
 						}}
-						createConversation={async () => {
-							const newConversationId = crypto.randomUUID()
-							return newConversationId
-						}}
+						hideSidebar={true}
+						path={$pathStore}
 					/>
 				</div>
 			{:else}
@@ -408,7 +330,6 @@ export function flowHasChanged() {
 							<div class="flex flex-row gap-2">
 								<Toggle
 									bind:checked={jsonView}
-									label="JSON View"
 									size="xs"
 									options={{
 										right: 'JSON',
@@ -527,11 +448,11 @@ export function flowHasChanged() {
 					{customUi}
 				/>
 			{:else if loadingHistory}
-				<div class="italic text-tertiary h-full grow mx-auto flex flex-row items-center gap-2">
+				<div class="italic text-primary h-full grow mx-auto flex flex-row items-center gap-2">
 					<Loader2 class="animate-spin" /> <span> Loading history... </span>
 				</div>
 			{:else}
-				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
+				<div class="italic text-primary h-full grow"> Flow status will be displayed here </div>
 			{/if}
 		</div>
 	</div>

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -43,8 +43,8 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    test: () => Promise<string | undefined>;
-    runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<string | undefined>;
+    test: (conversationId?: string) => Promise<string | undefined>;
+    runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined, conversationId?: string | undefined) => Promise<string | undefined>;
     refresh: () => void;
     cancelTest: () => Promise<void>;
     getLocalModuleStates: () => Record<string, GraphModuleState>;
@@ -57,6 +57,6 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     getIsOwner: () => boolean;
     getJob: () => Job | undefined;
     flowHasChanged: () => boolean;
-}, "initial" | "preventEscape" | "job" | "jobId" | "scrollTop" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
+}, "initial" | "preventEscape" | "jobId" | "scrollTop" | "job" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "selectedJobStepType" | "previewMode" | "selectedJobStepIsTopLevel" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;

package/package/components/FlowPreviewResult.svelte

@@ -5,6 +5,10 @@ import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
 import { emptyString } from '../utils';
 import Badge from './common/badge/Badge.svelte';
 let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, innerModules, suspendStatus, hideJobId, extra, result_streams } = $props();
+// Sometimes the approval form is duplicated but I can't reproduce the issue
+// This is a temporary debug log to try to catch it when it happens
+// (See the #each below)
+$effect(() => console.log('suspendStatusVal', Object.entries(suspendStatus.val || {}).map(([k, v]) => [k, v.job.id])));
 </script>
 
 <FlowPreviewStatus {job} {hideJobId} {extra} />

package/package/components/FlowRestartButton.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">import { Badge, Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
+import { Play, RefreshCw } from 'lucide-svelte';
+import { FlowService, JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { emptyString, sendUserToast } from '../utils';
+import { goto } from '../navigation';
+let { jobId, selectedJobStep, selectedJobStepType, restartBranchNames = [], flowPath = undefined, disabled = false, enterpriseOnly = false, variant = 'default', unifiedSize = 'md', onRestart } = $props();
+let branchOrIterationN = $state(0);
+let selectedVersionMode = $state('run');
+let customFlowVersion = $state(undefined);
+let flowVersions = $state([]);
+let loadingVersions = $state(false);
+async function restartFlow(stepId, branchOrIterationN, flowVersion) {
+    let run = await JobService.restartFlowAtStep({
+        workspace: $workspaceStore,
+        id: jobId,
+        requestBody: {
+            step_id: stepId,
+            branch_or_iteration_n: branchOrIterationN,
+            flow_version: flowVersion
+        }
+    });
+    await goto('/run/' + run + '?workspace=' + $workspaceStore);
+}
+async function loadFlowVersions() {
+    if (!flowPath || loadingVersions)
+        return;
+    loadingVersions = true;
+    try {
+        flowVersions = await FlowService.getFlowHistory({
+            workspace: $workspaceStore,
+            path: flowPath
+        });
+        if (flowVersions.length > 0 && customFlowVersion === undefined) {
+            customFlowVersion = flowVersions[0].id;
+        }
+    }
+    catch (e) {
+        sendUserToast('Failed to load flow versions', true);
+    }
+    finally {
+        loadingVersions = false;
+    }
+}
+function getFlowVersionForRestart() {
+    if (selectedVersionMode === 'run') {
+        return undefined; // use run version
+    }
+    else if (selectedVersionMode === 'custom') {
+        return customFlowVersion;
+    }
+    return undefined;
+}
+function handleRestart() {
+    if (onRestart) {
+        onRestart(selectedJobStep, branchOrIterationN, getFlowVersionForRestart());
+    }
+    else {
+        const flowVersion = getFlowVersionForRestart();
+        restartFlow(selectedJobStep, branchOrIterationN, flowVersion);
+    }
+}
+</script>
+
+{#snippet flowVersionSelector()}
+	<label>
+		<div class="pb-1 text-xs font-semibold text-emphasis">Flow version</div>
+		<div class="flex flex-col gap-2">
+			<select
+				bind:value={selectedVersionMode}
+				class="grow"
+				onchange={() => {
+					if (selectedVersionMode === 'custom' && flowVersions.length === 0) {
+						loadFlowVersions()
+					}
+				}}
+			>
+				<option value="run">Run version</option>
+				<option value="custom">Specific version</option>
+			</select>
+
+			{#if selectedVersionMode === 'custom'}
+				{#if loadingVersions}
+					<div class="text-xs text-secondary">Loading versions...</div>
+				{:else if flowVersions.length > 0}
+					<select bind:value={customFlowVersion} class="grow text-xs">
+						{#each flowVersions as version}
+							<option value={version.id}>
+								{#if emptyString(version.deployment_msg)}Version {version.id}{:else}{version.deployment_msg}{/if}
+								- {new Date(version.created_at).toLocaleString()}
+							</option>
+						{/each}
+					</select>
+				{:else}
+					<div class="text-xs text-tertiary">No versions available</div>
+				{/if}
+			{/if}
+		</div>
+	</label>
+{/snippet}
+{#snippet singleRestartButton()}
+	<Button
+		title={`Re-start this flow from step ${selectedJobStep} (included).${enterpriseOnly ? ' This is a feature only available in enterprise edition.' : ''}`}
+		{variant}
+		{unifiedSize}
+		{disabled}
+		startIcon={{ icon: Play }}
+		nonCaptureEvent={!!flowPath}
+		onClick={() => {
+			if (!flowPath) {
+				handleRestart()
+			}
+		}}
+	>
+		Re-start from
+		<Badge baseClass="ml-1" color="indigo">
+			{selectedJobStep}
+		</Badge>
+		{#if enterpriseOnly && disabled}
+			(EE)
+		{/if}
+	</Button>
+{/snippet}
+
+{#if selectedJobStepType === 'single'}
+	{#if !flowPath}
+		{@render singleRestartButton()}
+	{:else}
+		<Popover
+			floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
+			disablePopup={!flowPath}
+		>
+			{#snippet trigger()}
+				{@render singleRestartButton()}
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col gap-4 text-primary p-4 min-w-64">
+					{@render flowVersionSelector()}
+
+					<Button variant="accent" onClick={handleRestart}>Restart</Button>
+				</div>
+			{/snippet}
+		</Popover>
+	{/if}
+{:else}
+	<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}>
+		{#snippet trigger()}
+			<Button
+				title={`Re-start this flow from step ${selectedJobStep} (included).${enterpriseOnly ? ' This is a feature only available in enterprise edition.' : ''}`}
+				{variant}
+				{unifiedSize}
+				{disabled}
+				startIcon={{ icon: RefreshCw }}
+				nonCaptureEvent={true}
+			>
+				Re-start from
+				<Badge baseClass="ml-1" color="indigo">
+					{selectedJobStep}
+				</Badge>
+				{#if enterpriseOnly && disabled}
+					(EE)
+				{/if}
+			</Button>
+		{/snippet}
+		{#snippet content()}
+			<div class="flex flex-col gap-4 text-primary p-4 min-w-64">
+				<label>
+					<div class="pb-1 text-xs font-semibold text-emphasis"
+						>{selectedJobStepType == 'forloop' ? 'From iteration #' : 'From branch'}</div
+					>
+					<div class="flex w-full gap-2">
+						{#if selectedJobStepType === 'forloop'}
+							<input type="number" min="0" bind:value={branchOrIterationN} class="!w-32 grow" />
+						{:else}
+							<select bind:value={branchOrIterationN} class="!w-32 grow">
+								{#each restartBranchNames as [branchIdx, branchName]}
+									<option value={branchIdx}>{branchName}</option>
+								{/each}
+							</select>
+						{/if}
+					</div>
+				</label>
+
+				{#if flowPath}
+					{@render flowVersionSelector()}
+				{/if}
+				<Button variant="accent" onClick={handleRestart}>Restart</Button>
+			</div>
+		{/snippet}
+	</Popover>
+{/if}

package/package/components/FlowRestartButton.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    jobId: string;
+    selectedJobStep: string;
+    selectedJobStepType: 'single' | 'forloop' | 'branchall';
+    restartBranchNames?: [number, string][];
+    flowPath?: string;
+    disabled?: boolean;
+    enterpriseOnly?: boolean;
+    variant?: 'default' | 'accent';
+    unifiedSize?: 'xs' | 'sm' | 'md' | 'lg';
+    onRestart?: (stepId: string, branchOrIterationN: number, flowVersion?: number) => void;
+}
+declare const FlowRestartButton: import("svelte").Component<Props, {}, "">;
+type FlowRestartButton = ReturnType<typeof FlowRestartButton>;
+export default FlowRestartButton;