flow nits

frontend/src/lib/components/JobLoader.svelte

@@ -44,6 +44,7 @@
 		jobUpdateLastFetch?: Date | undefined
 		toastError?: boolean
 		onlyResult?: boolean
+		loadPlaceholderJobOnStart?: Job
 		// If you want to find out progress of subjobs of a flow, check job.flow_status.progress
 		scriptProgress?: number | undefined
 
@@ -60,6 +61,7 @@
 		jobUpdateLastFetch = $bindable(undefined),
 		toastError = false,
 		onlyResult = false,
+		loadPlaceholderJobOnStart = undefined,
 		scriptProgress = $bindable(undefined),
 		noLogs = false,
 		children
@@ -326,7 +328,11 @@
 		syncIteration = 0
 		errorIteration = 0
 		currentId = testId
-		job = undefined
+		if (loadPlaceholderJobOnStart) {
+			job = structuredClone(loadPlaceholderJobOnStart)
+		} else {
+			job = undefined
+		}
 		startedWatchingJob = Date.now()
 
 		// Clean up any existing SSE connection
@@ -564,7 +570,7 @@
 		if (isCurrentJob(id)) {
 			try {
 				// First load the job to get initial state
-				if (!job && !onlyResult) {
+				if ((!job || job.id == '') && !onlyResult) {
 					job = await JobService.getJob({
 						workspace: workspace!,
 						id,

frontend/src/lib/components/ModulePreviewResultViewer.svelte

@@ -51,6 +51,12 @@
 	let preview: 'mock' | 'job' | undefined = $state(undefined)
 	let jobProgressReset: () => void = $state(() => {})
 
+	$effect(() => {
+		if (preview != undefined && testJob) {
+			preview = undefined
+		}
+	})
+
 	let forceJson = $state(false)
 
 	const logJob = $derived(testJob ?? selectedJob)

frontend/src/lib/components/ModuleTest.svelte

@@ -146,4 +146,16 @@
 		}
 	}
 	bind:job={modulesTestStates.states[mod.id].testJob}
+	loadPlaceholderJobOnStart={{
+		type: 'QueuedJob',
+		id: '',
+		running: false,
+		canceled: false,
+		job_kind: 'preview',
+		permissioned_as: '',
+		is_flow_step: false,
+		email: '',
+		visible_to_owner: true,
+		tag: ''
+	}}
 />

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

@@ -3,6 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import { base } from '$lib/base'
 	import { ExternalLink } from 'lucide-svelte'
+	import { emptyString } from '$lib/utils'
 
 	export let job:
 		| Job
@@ -28,17 +29,18 @@
 			)}
 			title={'success' in job && job.success ? 'Success' : 'Failed'}
 		></div>
-
 		<span class="text-xs truncate" dir="rtl" title={`job id: ${job.id}`}>
 			{job.id.slice(-5)}
 		</span>
-		<a
-			target="_blank"
-			href="{base}/run/{job.id}?workspace={job.workspace_id}"
-			class="text-right float-right text-gray-300 group-hover:text-gray-400 transition-all duration-200 dark:text-gray-500 dark:group-hover:text-gray-300"
-			title="See run detail in a new tab"
-		>
-			<ExternalLink size={12} />
-		</a>
+		{#if !emptyString(job.id)}
+			<a
+				target="_blank"
+				href="{base}/run/{job.id}?workspace={job.workspace_id}"
+				class="text-right float-right text-gray-300 group-hover:text-gray-400 transition-all duration-200 dark:text-gray-500 dark:group-hover:text-gray-300"
+				title="See run detail in a new tab"
+			>
+				<ExternalLink size={12} />
+			</a>
+		{/if}
 	</div>
 {/if}

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

@@ -433,6 +433,15 @@
 							>
 						{/if}
 					</div>
+				{:else if testJob}
+					<!-- {JSON.stringify(testJob)} -->
+					<OutputBadge
+						job={testJob}
+						class={twMerge(
+							'min-w-16 text-secondary',
+							preview || testJob?.id !== job?.id ? 'bg-surface shadow-sm h-[23px]' : ''
+						)}
+					/>
 				{/if}
 
 				{#if !disableMock && !isLoadingAndNotMock}
@@ -522,7 +531,7 @@
 			</div>
 
 			<div class="px-2">
-				{#if selectedJob && 'result' in selectedJob && displayResultJob && toolbarLocationJob === 'external'}
+				{#if selectedJob && displayResultJob && toolbarLocationJob === 'external'}
 					<DisplayResultControlBar
 						workspaceId={selectedJob.workspace_id}
 						jobId={selectedJob.id}