Add initial loading status for flow steps

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -69,6 +69,22 @@
 	} = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
 
+	// Set all modules as initial when flow-level initial becomes true
+	function setAllModulesInitial(isInitial: boolean) {
+		if (isInitial) {
+			// Set all existing modules in flowStateStore to initial: true
+			for (const moduleId in $flowStateStore) {
+				if ($flowStateStore[moduleId] && $flowStateStore[moduleId].initial === undefined) {
+					$flowStateStore[moduleId] = {
+						...$flowStateStore[moduleId],
+						initial: true
+					}
+				}
+			}
+			$flowStateStore = $flowStateStore
+		}
+	}
+
 	let renderCount: number = 0
 	let schemaFormWithArgPicker: SchemaFormWithArgPicker | undefined = undefined
 	let currentJobId: string | undefined = undefined
@@ -183,6 +199,9 @@
 
 	$: selectedJobStep !== undefined && onSelectedJobStepChange()
 
+	// When initial becomes true, mark all modules as initial
+	$: setAllModulesInitial(initial)
+
 	async function loadIndividualStepsStates() {
 		// console.log('loadIndividualStepsStates')
 		dfs(flowStore.val.value.modules, async (module) => {
@@ -214,7 +233,8 @@
 						previewResult: getJobResult.result,
 						previewJobId: previousJobId[0].id,
 						previewWorkspaceId: previousJobId[0].workspace_id,
-						previewSuccess: getJobResult.success
+						previewSuccess: getJobResult.success,
+						initial: true
 					}
 				}
 			}
@@ -531,7 +551,6 @@
 					}}
 					on:jobsLoaded={() => {
 						if (initial) {
-							console.log('loading initial steps after initial job loaded')
 							loadIndividualStepsStates()
 						}
 					}}

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -583,7 +583,8 @@
 						previewArgs: job.args,
 						previewJobId: job.id,
 						previewWorkspaceId: job.workspace_id,
-						previewSuccess: job['success']
+						previewSuccess: job['success'],
+						initial: false
 					}
 				}
 			}

frontend/src/lib/components/ModuleTest.svelte

@@ -90,6 +90,7 @@
 				$flowStateStore[mod.id].previewSuccess = testJob.success
 				$flowStateStore[mod.id].previewJobId = testJob.id
 				$flowStateStore[mod.id].previewWorkspaceId = testJob.workspace_id
+				$flowStateStore[mod.id].initial = false
 				$flowStateStore = $flowStateStore
 			}
 		}

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -819,7 +819,23 @@
 									</div>
 								</Pane>
 								{#if selected === 'test'}
-									<Pane minSize={20}>
+									<Pane minSize={20} class="relative">
+										{#if $flowStateStore[flowModule.id]?.initial}
+											<!-- svelte-ignore a11y_no_static_element_interactions -->
+											<!-- svelte-ignore a11y_click_events_have_key_events -->
+											<div
+												onclick={() => {
+													$flowStateStore[flowModule.id]!.initial = false
+												}}
+												class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
+											>
+												<div class="text-center text-primary text-sm py-2 pt-20"
+													><span class="font-bold border p-2 bg-surface-secondary rounded-md"
+														>Run loaded from history</span
+													></div
+												>
+											</div>
+										{/if}
 										<ModulePreviewResultViewer
 											lang={flowModule.value['language'] ?? 'deno'}
 											{editor}

frontend/src/lib/components/flows/flowState.ts

@@ -11,6 +11,7 @@ export type FlowModuleState = {
 	previewJobId?: string
 	previewWorkspaceId?: string
 	previewSuccess?: boolean
+	initial?: boolean
 }
 
 export type FlowState = Record<string, FlowModuleState>

frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte

@@ -413,6 +413,12 @@
 				bind:bottomBarOpen={outputPickerBarOpen}
 				{loopStatus}
 				{onEditInput}
+				initial={id ? $flowStateStore[id]?.initial : undefined}
+				onResetInitial={() => {
+					if (id) {
+						$flowStateStore[id]!.initial = false
+					}
+				}}
 			>
 				{#snippet children({ allowCopy, isConnecting, selectConnection })}
 					<OutputPickerInner

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -275,7 +275,8 @@
 					previewResult: getJobResult.result,
 					previewJobId: previousJobId[0].id,
 					previewWorkspaceId: previousJobId[0].workspace_id,
-					previewSuccess: getJobResult.success
+					previewSuccess: getJobResult.success,
+					initial: true
 				}
 			}
 			$flowStateStore = $flowStateStore

frontend/src/lib/components/flows/propPicker/OutputPicker.svelte

@@ -20,6 +20,8 @@
 		bottomBarOpen?: boolean
 		loopStatus?: { type: 'inside' | 'self'; flow: 'forloopflow' | 'whileloopflow' } | undefined
 		onEditInput?: (moduleId: string, key: string) => void
+		initial?: boolean
+		onResetInitial?: () => void
 	}
 
 	let {
@@ -33,7 +35,9 @@
 		id,
 		bottomBarOpen = $bindable(false),
 		loopStatus,
-		onEditInput
+		onEditInput,
+		initial,
+		onResetInitial
 	}: Props = $props()
 
 	const context = getContext<PropPickerContext>('PropPickerContext')
@@ -184,7 +188,7 @@
 				}}
 				bind:this={popover}
 				allowFullScreen
-				contentClasses="overflow-hidden resize"
+				contentClasses="overflow-hidden resize relative"
 				contentStyle={`width: calc(${MIN_WIDTH}px); min-width: calc(${MIN_WIDTH}px); height: calc(${MIN_HEIGHT}px); min-height: calc(${MIN_HEIGHT}px); `}
 				extraProps={{ 'data-prop-picker': true }}
 				closeOnOtherPopoverOpen
@@ -219,6 +223,22 @@
 					</AnimatedButton>
 				{/snippet}
 				{#snippet content()}
+					{#if initial}
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							onclick={() => {
+								onResetInitial?.()
+							}}
+							class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
+						>
+							<div class="text-center text-primary text-sm py-2 pt-20"
+								><span class="font-bold border p-2 bg-surface-secondary rounded-md"
+									>Run loaded from history</span
+								></div
+							>
+						</div>
+					{/if}
 					{@render children?.({
 						allowCopy: !$flowPropPickerConfig,
 						isConnecting: showConnecting,

frontend/src/lib/components/flows/utils.ts

@@ -178,7 +178,8 @@ export function codeToStaticTemplate(code?: string): string | undefined {
 export function emptyFlowModuleState(): FlowModuleState {
 	return {
 		schema: emptySchema(),
-		previewResult: NEVER_TESTED_THIS_FAR
+		previewResult: NEVER_TESTED_THIS_FAR,
+		initial: false
 	}
 }