windmill-components 1.623.1 → 1.642.0

package/package/components/FlowGraphViewerStep.svelte

@@ -12,8 +12,9 @@ import { cleanExpr, copyToClipboard } from '../utils';
 import { hubBaseUrlStore } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
-import { Copy } from 'lucide-svelte';
+import { Copy, Expand } from 'lucide-svelte';
 import HighlightTheme from './HighlightTheme.svelte';
+import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
 export let schema = undefined;
 export let stepDetail = undefined;
 export let jobScriptHash = undefined;
@@ -36,14 +37,14 @@ let codeViewer;
 						<IconedPath path={stepDetail?.value?.path ?? ''} />
 					</a>
 				</div>
-				<div class="text-2xs mb-4 mt-2">
-					<h3 class="mb-2">Step Inputs</h3>
+				<div class="text-xs mb-4 mt-2">
+					<h3 class="mb-1 text-xs font-semibold text-emphasis">Step inputs</h3>
 
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 				{#if stepDetail.value.path.startsWith('hub/')}
 					<div class="mt-6">
-						<h3 class="mb-2">Code</h3>
+						<h3 class="mb-1 mt-6 text-xs font-semibold text-emphasis">Code</h3>
 						<iframe
 							class="w-full h-full text-sm"
 							title="embedded script from hub"
@@ -54,15 +55,18 @@ let codeViewer;
 				{/if}
 			{:else if stepDetail.value.type == 'rawscript'}
 				<div class="text-2xs mb-4 mt-2">
-					<h3 class="mb-2">Step Inputs</h3>
+					<h3 class="mb-1 text-xs font-semibold text-emphasis">Step inputs</h3>
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 
-				<h3 class="mb-2">Code</h3>
-				<span class="!text-xs">
+				<div class="mb-1 mt-6 flex items-center gap-1">
+					<h3 class="text-xs font-semibold text-emphasis">Code</h3>
+					<LanguageIcon lang={stepDetail.value.language} size={14} />
+				</div>
+				<div class="!text-xs rounded-md p-2 border bg-surface-input">
 					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
-				</span>
-				<h3 class="mt-4 mb-2">Lockfile</h3>
+				</div>
+				<h3 class="mt-8 mb-1 text-xs font-normal text-primary">Lockfile</h3>
 				<div>
 					{#if stepDetail.value.lock}
 						<pre class="bg-surface-secondary text-sm p-2 h-full overflow-auto w-full"
@@ -106,7 +110,7 @@ let codeViewer;
 				{/if}
 				<span
 					class={twMerge(
-						'font-medium text-lg',
+						'font-semibold text-emphasis text-sm',
 						stepDetail.id !== 'failure' && stepDetail.id !== 'preprocessor' ? 'ml-2' : ''
 					)}
 				>
@@ -160,33 +164,39 @@ let codeViewer;
 		{:else if stepDetail.value.type == 'rawscript'}
 			{#if stepDetail.id !== 'preprocessor'}
 				<div class="text-xs">
-					<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+					<h3 class="mb-1 font-semibold mt-2 text-xs text-emphasis">Step inputs</h3>
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 			{/if}
 
 			<div>
-				<div class="mb-2 mt-4 flex justify-between items-center">
-					<h3 class="font-semibold">Code</h3>
-					<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
-						Expand
-					</Button>
+				<div class="mb-1 mt-6 flex justify-between items-center">
+					<div class="flex items-center gap-2">
+						<h3 class="font-semibold text-xs text-emphasis">Code</h3>
+						<LanguageIcon lang={stepDetail.value.language} width={14} height={14} />
+					</div>
+					<Button
+						unifiedSize="sm"
+						variant="subtle"
+						onClick={codeViewer.openDrawer}
+						startIcon={{ icon: Expand }}>Expand</Button
+					>
 				</div>
-				<div class="border p-2 rounded-md">
+				<div class="border p-2 rounded-md bg-surface-input">
 					<HighlightCode
 						language={stepDetail.value.language}
 						code={stepDetail.value.content}
 						className="whitespace-pre-wrap"
 					/>
 				</div>
-				<h3 class="mb-2 mt-4">Lockfile</h3>
+				<h3 class="mb-1 mt-6 text-xs font-semibold text-emphasis">Lockfile</h3>
 				<div>
 					{#if stepDetail.value.lock}
-						<pre class="bg-surface-secondary text-xs p-2 h-full overflow-auto w-full"
+						<pre class="bg-surface-input rounded-md border text-xs p-2 h-full overflow-auto w-full"
 							>{stepDetail.value.lock}</pre
 						>
 					{:else}
-						<p class="bg-surface-secondary text-sm p-2 rounded">
+						<p class="bg-surface-secondary text-xs italic p-2 rounded">
 							There is no lockfile for this inline script
 						</p>
 					{/if}
@@ -194,18 +204,21 @@ let codeViewer;
 			</div>
 		{:else if stepDetail.value.type == 'script'}
 			{#if stepDetail.id !== 'preprocessor'}
-				<div class="text-2xs">
-					<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+				<div class="text-xs">
+					<h3 class="mb-1 font-semibold mt-2 text-xs text-emphasis">Step inputs</h3>
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 			{/if}
 			{#if stepDetail.value.path.startsWith('hub/')}
 				<div class="flex flex-col grow">
-					<div class="mb-2 flex justify-between items-center">
-						<h3 class="font-semibold">Code</h3>
-						<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
-							Expand
-						</Button>
+					<div class="mb-1 mt-6 flex justify-between items-center">
+						<h3 class="font-semibold text-xs text-emphasis">Code</h3>
+						<Button
+							unifiedSize="sm"
+							variant="subtle"
+							onClick={codeViewer.openDrawer}
+							startIcon={{ icon: Expand }}>Expand</Button
+						>
 					</div>
 					<iframe
 						class="w-full grow text-sm h-full"
@@ -218,8 +231,8 @@ let codeViewer;
 				<FlowModuleScript path={stepDetail.value.path} hash={jobScriptHash} />
 			{/if}
 		{:else if stepDetail.value.type == 'aiagent'}
-			<div class="text-2xs">
-				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+			<div class="text-xs">
+				<h3 class="mb-1 font-semibold mt-2 text-xs text-emphasis">Step inputs</h3>
 				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 			</div>
 		{:else if stepDetail.value.type == 'forloopflow'}
@@ -227,7 +240,7 @@ let codeViewer;
 				<p class="font-medium text-secondary pb-2"> Iterator expression: </p>
 				{#if stepDetail.value.iterator.type == 'static'}
 					<ObjectViewer json={stepDetail.value.iterator.value} />
-				{:else}
+				{:else if stepDetail.value.iterator.type == 'javascript'}
 					<span class="text-xs">
 						<Highlight language={typescript} code={cleanExpr(stepDetail.value.iterator.expr)} />
 					</span>
@@ -281,11 +294,14 @@ let codeViewer;
 				{/each}
 			</div>
 		{:else if stepDetail.value.type == 'flow'}
-			<div class="text-sm mb-1 flex justify-end flex-row">
+			<div class="text-sm mb-1 flex justify-between flex-row items-center">
+				<span class="text-xs font-normal text-secondary"
+					>Flow path: <span class="text-emphasis">{stepDetail.value.path}</span>
+				</span>
 				<Button
-					size="xs2"
+					unifiedSize="sm"
 					startIcon={{ icon: Copy }}
-					color="light"
+					variant="subtle"
 					on:click={() => {
 						if (typeof stepDetail !== 'string') {
 							const val = stepDetail?.value

package/package/components/FlowHistoryJobPicker.svelte

@@ -4,6 +4,7 @@ import PopoverV2 from './meltComponents/Popover.svelte';
 import HistoricInputs from './HistoricInputs.svelte';
 import { workspaceStore } from '../stores';
 import { JobService } from '../gen';
+import { Button } from './common';
 let { path, selected = undefined, selectInitial = false, loading = $bindable(false) } = $props();
 const dispatch = createEventDispatcher();
 async function loadInitial() {
@@ -31,7 +32,7 @@ $effect(() => {
 
 <PopoverV2 closeButton={false}>
 	{#snippet trigger()}
-		<HistoryIcon size={14} />
+		<Button variant="default" startIcon={{ icon: HistoryIcon }}>History</Button>
 	{/snippet}
 	{#snippet content()}
 		<div class="p-2 h-[400px] overflow-hidden w-80 border shadow-sm">

package/package/components/FlowJobResult.svelte

@@ -3,38 +3,46 @@ import DisplayResult from './DisplayResult.svelte';
 import LogViewer from './LogViewer.svelte';
 import AiAgentLogViewer from './AIAgentLogViewer.svelte';
 import { twMerge } from 'tailwind-merge';
-let { waitingForExecutor = false, result, result_stream, logs, col = false, noBorder = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, downloadLogs = true, tagLabel = undefined, aiAgentStatus = undefined } = $props();
+let { waitingForExecutor = false, result, result_stream, logs, col = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, downloadLogs = true, tagLabel = undefined, aiAgentStatus = undefined } = $props();
 </script>
 
 <div
-	class:border={!noBorder}
 	class={twMerge(
-		'rounded-md grow bg-surface-tertiary overflow-hidden text-xs',
-		!col ? 'grid grid-cols-2' : 'flex flex-col max-h-screen gap-2 overflow-hidden'
+		'grow overflow-hidden text-xs',
+		!col ? 'grid grid-cols-2 gap-2' : 'flex flex-col max-h-screen gap-6 overflow-hidden'
 	)}
 >
-	<div class="{col ? 'max-h-1/2 grow' : 'max-h-80'} p-2 overflow-auto relative">
-		<span class="text-primary text-xs font-normal">Result</span>
-		{#if result !== undefined || result_stream !== undefined}
-			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
-		{:else if loading}
-			<Loader2 class="animate-spin" />
-		{:else}
-			<div class="text-secondary">No result (result is undefined)</div>
-		{/if}
+	<div class="relative flex flex-col gap-1">
+		<span class="text-emphasis text-xs font-semibold">Result</span>
+		<div
+			class="{col
+				? 'max-h-1/2 grow'
+				: 'max-h-80'} overflow-auto rounded-md grow min-h-0 border bg-surface-tertiary p-2"
+		>
+			{#if result !== undefined || result_stream !== undefined}
+				<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
+			{:else if loading}
+				<Loader2 class="animate-spin" />
+			{:else}
+				<div class="text-secondary">No result (result is undefined)</div>
+			{/if}
+		</div>
 	</div>
-	<div class="overflow-auto {col ? 'grow' : 'max-h-80'} relative">
+	<div class="relative flex flex-col gap-1">
+		<span class="text-emphasis text-xs font-semibold">Logs</span>
 		{#if aiAgentStatus}
-			<AiAgentLogViewer {...aiAgentStatus} {workspaceId} />
+			<AiAgentLogViewer {...aiAgentStatus} {workspaceId} noPadding />
 		{:else}
-			<LogViewer
-				{tagLabel}
-				download={downloadLogs}
-				content={logs ?? ''}
-				{jobId}
-				isLoading={waitingForExecutor}
-				{tag}
-			/>
+			<div class="rounded-md grow min-h-0 border bg-surface-tertiary overflow-hidden">
+				<LogViewer
+					{tagLabel}
+					download={downloadLogs}
+					content={logs ?? ''}
+					{jobId}
+					isLoading={waitingForExecutor}
+					{tag}
+				/>
+			</div>
 		{/if}
 	</div>
 </div>

package/package/components/FlowJobResult.svelte.d.ts

@@ -6,7 +6,6 @@ interface Props {
     result_stream?: string;
     logs: string | undefined;
     col?: boolean;
-    noBorder?: boolean;
     loading: boolean;
     filename?: string | undefined;
     jobId?: string | undefined;

package/package/components/FlowLogRow.svelte

@@ -38,7 +38,7 @@ function handleClick() {
 			{/if}
 		</div>
 		<div class="w-full leading-tight">
-			<div class={twMerge('w-full pr-2 cursor-pointer', isCurrent(id) ? 'bg-surface-hover' : '')}>
+			<div class="w-full pr-2 cursor-pointer">
 				{@render label()}
 			</div>
 		</div>

package/package/components/FlowLogViewer.svelte

@@ -217,9 +217,14 @@ $effect(() => {
     if (currentId) {
         const element = document.querySelector(`[data-nav-id="${currentId}"]`);
         if (element) {
-            ;
-            element.focus?.({ preventScroll: true });
-            element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            // Only scroll if the element is visible (not in a hidden tab)
+            const rect = element.getBoundingClientRect();
+            const isElementVisible = rect.width > 0 && rect.height > 0;
+            if (isElementVisible) {
+                ;
+                element.focus?.({ preventScroll: true });
+                element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
         }
     }
 });

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>;
-}, "jobId" | "previewArgs" | "job">;
+}, "job" | "jobId" | "previewArgs">;
 type FlowLoopIterationPreview = InstanceType<typeof FlowLoopIterationPreview>;
 export default FlowLoopIterationPreview;

package/package/components/FlowPreviewContent.svelte

@@ -7,6 +7,8 @@ import SchemaForm from './SchemaForm.svelte';
 import SchemaFormWithArgPicker from './SchemaFormWithArgPicker.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
+import FlowExecutionStatus from './runs/FlowExecutionStatus.svelte';
+import JobDetailHeader from './runs/JobDetailHeader.svelte';
 import { AlertTriangle, CornerDownLeft, Loader2, Play, RefreshCw, X } from 'lucide-svelte';
 import { emptyString, sendUserToast } from '../utils';
 import { dfs } from './flows/dfs';
@@ -19,14 +21,13 @@ import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import FlowChat from './flows/conversations/FlowChat.svelte';
 import { stateSnapshot } from '../svelte5Utils.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 { 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, suspendStatus } = $props();
 let restartBranchNames = [];
 let isRunning = $state(false);
 let jsonView = $state(false);
 let jsonEditor = $state(undefined);
 let schemaHeight = $state(0);
 let isValid = $state(true);
-let suspendStatus = $state({ val: {} });
 let isOwner = $state(false);
 export async function test(conversationId) {
     renderCount++;
@@ -204,9 +205,9 @@ export function flowHasChanged() {
 
 <svelte:window onkeydown={onKeyDown} />
 
-<div class="flex flex-col space-y-2 h-screen bg-surface px-4 py-2 w-full" id="flow-preview-content">
+<div class="flex flex-col space-y-2 h-screen bg-surface py-2 w-full" id="flow-preview-content">
 	{#if render}
-		<div class="flex flex-row w-full items-center gap-x-2">
+		<div class="flex flex-row w-full items-center gap-x-2 px-4">
 			<div class="w-8">
 				<Button
 					on:click={() => dispatch('close')}
@@ -274,41 +275,32 @@ export function flowHasChanged() {
 				</div>
 			{/if}
 		</div>
-
-		<div class="w-full flex flex-col gap-y-1">
-			{#if flowHasChanged()}
-				<div class="pt-1">
-					<div
-						class="bg-orange-200 text-orange-600 border border-orange-600 p-2 flex items-center gap-2 rounded"
-					>
-						<AlertTriangle size={14} /> Flow changed since last preview
-						<div class="flex"></div>
-					</div>
-				</div>
-			{/if}
-			<FlowProgressBar {job} bind:this={flowProgressBar} />
-		</div>
 	{/if}
 	<div
 		bind:this={scrollableDiv}
-		class="overflow-y-auto grow flex flex-col pt-4"
+		class="overflow-y-auto grow flex flex-col pt-4 px-4"
 		onscroll={(e) => handleScroll()}
 	>
 		{#if render}
 			{#if flowStore.val.value?.chat_input_enabled}
-				<div class="flex flex-row justify-center w-full">
+				<div class="flex flex-row justify-center w-full mb-6">
 					<FlowChat
 						useStreaming={shouldUseStreaming}
-						onRunFlow={async (userMessage, conversationId) => {
-							await runPreview({ user_message: userMessage }, undefined, conversationId)
+						onRunFlow={async (userMessage, conversationId, additionalInputs) => {
+							await runPreview(
+								{ user_message: userMessage, ...(additionalInputs ?? {}) },
+								undefined,
+								conversationId
+							)
 							return jobId ?? ''
 						}}
 						hideSidebar={true}
 						path={$pathStore}
+						inputSchema={flowStore.val.schema}
 					/>
 				</div>
 			{:else}
-				<div class="border-b">
+				<div>
 					<SchemaFormWithArgPicker
 						bind:this={schemaFormWithArgPicker}
 						runnableId={$initialPathStore}
@@ -384,32 +376,58 @@ export function flowHasChanged() {
 				</div>
 			{/if}
 		{/if}
-		<div class="pt-4 flex flex-col grow relative">
-			<div
-				class="absolute top-[22px] right-2 border p-1.5 hover:bg-surface-hover rounded-md center-center"
-			>
-				{#if render}
-					<FlowHistoryJobPicker
-						selectInitial={jobId == undefined}
-						on:select={(e) => {
-							if (!currentJobId) {
-								currentJobId = jobId
-							}
-							const detail = e.detail
-							jobId = detail.jobId
-							if (detail.initial && stepHistoryLoader?.flowJobInitial === undefined) {
-								stepHistoryLoader?.setFlowJobInitial(detail.initial)
-							}
-						}}
-						on:unselect={() => {
-							jobId = currentJobId
-							currentJobId = undefined
-						}}
-						path={$initialPathStore == '' ? $pathStore : $initialPathStore}
-						bind:loading={loadingHistory}
-					/>
+		<div class="pt-4 flex flex-col border-t relative">
+			{#if flowHasChanged()}
+				<div class="pb-2">
+					<div
+						class="text-xs bg-orange-100 text-orange-700 border border-orange-700/30 p-2 flex items-center gap-2 rounded"
+					>
+						<AlertTriangle size={12} /> Flow changed since last preview
+						<div class="flex"></div>
+					</div>
+				</div>
+			{/if}
+
+			<div class="w-full flex pb-2 items-start justify-between gap-4">
+				{#if job}
+					<JobDetailHeader {job} compact={true} />
+				{:else}
+					<div></div> <!-- empty div to keep the same layout -->
 				{/if}
+				<FlowHistoryJobPicker
+					selectInitial={jobId == undefined}
+					on:select={(e) => {
+						if (!currentJobId) {
+							currentJobId = jobId
+						}
+						const detail = e.detail
+						jobId = detail.jobId
+						if (detail.initial && stepHistoryLoader?.flowJobInitial === undefined) {
+							stepHistoryLoader?.setFlowJobInitial(detail.initial)
+						}
+					}}
+					on:unselect={() => {
+						jobId = currentJobId
+						currentJobId = undefined
+					}}
+					path={$initialPathStore == '' ? $pathStore : $initialPathStore}
+					bind:loading={loadingHistory}
+				/>
 			</div>
+
+			<FlowProgressBar {job} bind:this={flowProgressBar} slim textPosition="bottom" showStepId />
+
+			{#if job}
+				<div class="w-full my-6">
+					<FlowExecutionStatus
+						{job}
+						workspaceId={$workspaceStore}
+						{isOwner}
+						innerModules={job?.flow_status?.modules}
+						{suspendStatus}
+					/>
+				</div>
+			{/if}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			{#if jobId}
 				{#if stepHistoryLoader?.flowJobInitial}
@@ -431,7 +449,7 @@ export function flowHasChanged() {
 					bind:job
 					bind:localModuleStates
 					bind:localDurationStatuses
-					bind:suspendStatus
+					{suspendStatus}
 					hideDownloadInGraph={customUi?.downloadLogs === false}
 					wideResults
 					bind:flowState={flowStateStore.val}
@@ -446,13 +464,12 @@ export function flowHasChanged() {
 					bind:isOwner
 					{render}
 					{customUi}
+					showLogsWithResult
 				/>
 			{:else if loadingHistory}
 				<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-primary h-full grow"> Flow status will be displayed here </div>
 			{/if}
 		</div>
 	</div>

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

@@ -23,6 +23,10 @@ interface Props {
     customUi?: {
         tagLabel?: string | undefined;
     };
+    suspendStatus: StateStore<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -57,6 +61,6 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     getIsOwner: () => boolean;
     getJob: () => Job | undefined;
     flowHasChanged: () => boolean;
-}, "initial" | "preventEscape" | "jobId" | "scrollTop" | "job" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "selectedJobStepType" | "previewMode" | "selectedJobStepIsTopLevel" | "branchOrIterationN">;
+}, "job" | "initial" | "preventEscape" | "jobId" | "scrollTop" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "selectedJobStepType" | "previewMode" | "selectedJobStepIsTopLevel" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;