windmill-components 1.532.0 → 1.537.1

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -37,9 +37,7 @@ let moduleTest = $state(undefined);
 let testIsLoading = $state(false);
 let hover = $state(false);
 let connectingData = $state(undefined);
-let lastJob = $state(undefined);
 let outputPicker = $state(undefined);
-let historyOpen = $state(false);
 let testJob = $state(undefined);
 let outputPickerBarOpen = $state(false);
 let flowStateStore = $derived(flowEditorContext?.flowStateStore);
@@ -55,32 +53,13 @@ function updateConnectingData(id, pickableIds, flowPropPickerConfig, flowStateSt
 $effect(() => {
     updateConnectingData(id, pickableIds, $flowPropPickerConfig, flowStateStore);
 });
-function updateLastJob(flowStateStore) {
-    if (!flowStateStore ||
-        !id ||
-        flowStateStore.val[id]?.previewResult === 'never tested this far') {
-        return;
-    }
-    lastJob = {
-        id: flowStateStore.val[id]?.previewJobId ?? '',
-        result: flowStateStore.val[id]?.previewResult,
-        type: 'CompletedJob',
-        success: flowStateStore.val[id]?.previewSuccess ?? undefined
-    };
-}
-$effect(() => {
-    if (testJob && testJob.type === 'CompletedJob') {
-        lastJob = $state.snapshot(testJob);
-    }
-    else if (id) {
-        updateLastJob(flowStateStore);
-    }
-});
 let isConnectingCandidate = $derived(!!id && !!$flowPropPickerConfig && !!pickableIds && Object.keys(pickableIds).includes(id));
 const outputPickerVisible = $derived(editMode && (isConnectingCandidate || alwaysShowOutputPicker) && !!id);
 const icon_render = $derived(icon);
 const action = $derived(getAiModuleAction(id));
 let testRunDropdownOpen = $state(false);
+let outputPickerInner = $state(undefined);
+let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? false);
 </script>
 
 {#if deletable && id && editId}
@@ -145,7 +124,15 @@ let testRunDropdownOpen = $state(false);
 	{@const flowStore = flowEditorContext?.flowStore.val}
 	{@const mod = flowStore?.value ? dfsPreviousResults(id, flowStore, false)[0] : undefined}
 	{#if mod && flowStateStore?.val?.[id]}
-		<ModuleTest bind:this={moduleTest} {mod} bind:testIsLoading bind:testJob />
+		<ModuleTest
+			bind:this={moduleTest}
+			{mod}
+			bind:testIsLoading
+			bind:testJob
+			onJobDone={() => {
+				outputPickerInner?.setJobPreview?.()
+			}}
+		/>
 	{/if}
 {/if}
 
@@ -329,7 +316,6 @@ let testRunDropdownOpen = $state(false);
 							prefix={'results'}
 							connectingData={isConnecting ? connectingData : undefined}
 							{mock}
-							{lastJob}
 							{testJob}
 							moduleId={id}
 							onSelect={selectConnection}
@@ -337,12 +323,12 @@ let testRunDropdownOpen = $state(false);
 							{path}
 							{loopStatus}
 							rightMargin
-							bind:derivedHistoryOpen={historyOpen}
 							historyOffset={{ mainAxis: 12, crossAxis: -9 }}
 							clazz="p-1"
 							isLoading={testIsLoading ||
 								(id ? stepHistoryLoader?.stepStates[id]?.loadingJobs : false)}
 							initial={id ? stepHistoryLoader?.stepStates[id]?.initial : undefined}
+							bind:this={outputPickerInner}
 						/>
 					{/snippet}
 				</OutputPicker>

package/package/components/flows/map/MapItem.svelte

@@ -170,6 +170,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{bgColor}
 					{bgHoverColor}
 					label={mod.summary ||
+						(mod.value.type === 'aiagent' ? 'AI Agent' : undefined) ||
 						(mod.id === 'preprocessor'
 							? 'Preprocessor'
 							: mod.id.startsWith('failure')
@@ -194,10 +195,13 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{skipped}
 				>
 					{#snippet icon()}
-						{@const size = mod.value.type === 'script' && mod.value.path.startsWith('hub/')
-							? 20
-							: mod.value.type === "script" ? 14 : 16}
-						<FlowModuleIcon module={mod} size={size} />
+						{@const size =
+							mod.value.type === 'script' && mod.value.path.startsWith('hub/')
+								? 20
+								: mod.value.type === 'script'
+									? 14
+									: 16}
+						<FlowModuleIcon module={mod} {size} />
 					{/snippet}
 				</FlowModuleSchemaItem>
 			{/if}

package/package/components/flows/map/VirtualItem.svelte

@@ -70,7 +70,7 @@ const outputType = $derived(showJobStatus
 					{selected}
 					{hover}
 					id={id ?? ''}
-					isConnectingCandidate={true}
+					isConnectingCandidate={nodeKind !== 'result'}
 					variant="virtual"
 					type={outputType}
 					{darkMode}

package/package/components/flows/pickers/TopLevelNode.svelte

@@ -52,7 +52,7 @@ const dispatch = createEventDispatcher();
 			<GitBranch size={14} />
 			Branch to all
 		{:else if label === 'AI Agent'}
-			<BotIcon size={14} />
+			<BotIcon size={14} class="text-violet-800 dark:text-violet-400" />
 			AI Agent
 		{/if}
 	</span>

package/package/components/flows/propPicker/InputPickerInner.svelte

@@ -3,11 +3,11 @@ import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import { twMerge } from 'tailwind-merge';
 import { DollarSign, Pencil, RefreshCw, SquareFunction } from 'lucide-svelte';
 let { inputTransform, id, onEditInput } = $props();
-const { flowStore, flowStateStore, testSteps, previewArgs } = getContext('FlowEditorContext') || {};
+const { flowStore, flowStateStore, stepsInputArgs, previewArgs } = getContext('FlowEditorContext') || {};
 onMount(() => {
-    testSteps?.updateStepArgs(id, flowStateStore?.val, flowStore?.val, previewArgs?.val);
+    stepsInputArgs?.updateStepArgs(id, flowStateStore?.val, flowStore?.val, previewArgs?.val);
 });
-const input = $derived(testSteps?.getStepArgs(id));
+const input = $derived(stepsInputArgs?.getStepArgs(id));
 </script>
 
 <div class="p-4 pr-6 h-full overflow-y-auto">
@@ -29,10 +29,10 @@ const input = $derived(testSteps?.getStepArgs(id));
 			{:else if inputTransform[key].type === 'static'}
 				<DollarSign size={12} class="text-tertiary font-mono -my-1" />
 			{/if}
-			{#if testSteps?.isArgManuallySet(id, key)}
+			{#if stepsInputArgs?.isArgManuallySet(id, key)}
 				<button
 					onclick={() => {
-						testSteps?.evalArg(id, key, flowStateStore?.val, flowStore?.val, previewArgs?.val)
+						stepsInputArgs?.evalArg(id, key, flowStateStore?.val, flowStore?.val, previewArgs?.val)
 					}}
 					title="Re-evaluate input"
 					class="-my-1 ml-0.5 hover:text-primary dark:hover:text-primary dark:text-gray-500 text-gray-300"

package/package/components/flows/propPicker/OutputPickerInner.svelte

@@ -19,7 +19,7 @@ import { Pin, History, Pen, Check, X, Loader2, Pencil } from 'lucide-svelte';
 import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import StepHistory from './StepHistory.svelte';
 import { Popover } from '../../meltComponents';
-import { untrack } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { Tooltip } from '../../meltComponents';
 import DisplayResult from '../../DisplayResult.svelte';
 import OutputBadge from './OutputBadge.svelte';
@@ -27,7 +27,7 @@ import { twMerge } from 'tailwind-merge';
 import DisplayResultControlBar from '../../DisplayResultControlBar.svelte';
 import { base } from '../../../base';
 import { fade } from 'svelte/transition';
-let { lastJob = undefined, testJob = undefined, prefix = '', allowCopy = false, connectingData = undefined, mock = $bindable({ enabled: false }), moduleId = '', fullResult = false, closeOnOutsideClick = false, getLogs = false, selectedJob = $bindable(undefined), forceJson = $bindable(false), isLoading = $bindable(false), preview = $bindable(undefined), hideHeaderBar = false, simpleViewer = undefined, path = '', loopStatus = undefined, customHeight = undefined, rightMargin = false, disableMock = false, disableHistory = false, derivedHistoryOpen = $bindable(false), historyOffset = { mainAxis: 8, crossAxis: -4.5 }, clazz, copilot_fix, onSelect, onUpdateMock, onEditInput, selectionId, initial, customEmptyJobMessage } = $props();
+let { testJob, prefix = '', allowCopy = false, connectingData = undefined, mock = $bindable({ enabled: false }), moduleId = '', fullResult = false, closeOnOutsideClick = false, getLogs = false, isLoading = $bindable(false), hideHeaderBar = false, simpleViewer = undefined, path = '', loopStatus = undefined, customHeight = undefined, rightMargin = false, disableMock = false, disableHistory = false, historyOffset = { mainAxis: 8, crossAxis: -4.5 }, clazz, copilot_fix, onSelect, onUpdateMock, onEditInput, selectionId, initial, customEmptyJobMessage } = $props();
 let jsonView = $state(false);
 let clientHeight = $state(0);
 let tmpMock = $state(undefined);
@@ -36,6 +36,8 @@ let stepHistoryPopover = $state(undefined);
 let historyOpen = $state(false);
 let contentEl = $state(undefined);
 let hasOverflow = $state(false);
+let preview = $state(undefined);
+let selectedJob = $state(undefined);
 function checkOverflow() {
     if (contentEl) {
         hasOverflow = contentEl.scrollHeight > contentEl.clientHeight;
@@ -45,22 +47,18 @@ function selectJob(nJob) {
     if (nJob && (nJob.result_stream || nJob.type == 'CompletedJob')) {
         selectedJob = nJob;
     }
-    else if (job && (job.result_stream || job.type == 'CompletedJob')) {
-        selectedJob = job;
+    else if (lastJob && (lastJob.result_stream || lastJob.type == 'CompletedJob')) {
+        selectedJob = lastJob;
     }
     else {
         selectedJob = undefined;
     }
 }
 $effect(() => {
-    if (!job || !(job.result_stream || job.type == 'CompletedJob')) {
+    if (!lastJob || !(lastJob.result_stream || lastJob.type == 'CompletedJob')) {
         return;
     }
-    selectJob(job);
-    if (job.preview && mock?.enabled) {
-        preview = 'job';
-        job.preview = false;
-    }
+    selectJob(lastJob);
 });
 function togglePreview(nPrev) {
     if (!nPrev && preview === 'job') {
@@ -78,6 +76,8 @@ let displayResultJob = $state(undefined);
 let displayResultMock = $state(undefined);
 let toolbarLocationJob = $state(undefined);
 let toolbarLocationMock = $state(undefined);
+const flowEditorContext = getContext('FlowEditorContext');
+const flowStateStore = flowEditorContext?.flowStateStore;
 function updateCanEditWithDblClick(newValue) {
     canEditWithDblClick = newValue;
     if (debounceTimeout) {
@@ -129,14 +129,33 @@ function togglePin() {
         togglePreview(undefined);
     }
 }
-let mockUpdateStatus = $derived(preview === 'mock' && !mock?.enabled
+function updateLastJob() {
+    if (testJob) {
+        return testJob;
+    }
+    if (!flowStateStore ||
+        !moduleId ||
+        flowStateStore.val[moduleId]?.previewResult === 'never tested this far') {
+        return;
+    }
+    return {
+        id: flowStateStore.val[moduleId]?.previewJobId ?? '',
+        result: flowStateStore.val[moduleId]?.previewResult,
+        type: 'CompletedJob',
+        success: flowStateStore.val[moduleId]?.previewSuccess ?? undefined
+    };
+}
+const lastJob = $derived.by(updateLastJob);
+export function setJobPreview() {
+    if (mock?.enabled) {
+        preview = 'job';
+    }
+}
+const mockUpdateStatus = $derived(preview === 'mock' && !mock?.enabled
     ? 'restore'
-    : preview === 'job' && mock?.enabled && selectedJob?.type === 'CompletedJob'
+    : preview === 'job' && mock?.enabled && selectedJob?.['type'] === 'CompletedJob'
         ? 'override'
         : undefined);
-$effect(() => {
-    derivedHistoryOpen = historyOpen;
-});
 $effect(() => {
     if (displayResultJob && typeof displayResultJob.getToolbarLocation === 'function') {
         toolbarLocationJob = displayResultJob.getToolbarLocation();
@@ -159,18 +178,50 @@ $effect(() => {
         untrack(() => updateCanEditWithDblClick(newValue));
     }
 });
-let job = $derived.by(() => {
-    if (testJob) {
-        return { ...testJob, preview: testJob.type === 'CompletedJob' };
-    }
-    if (lastJob) {
-        return { ...lastJob, preview: false };
-    }
-    return undefined;
-});
 let popoverHeight = $derived(customHeight ?? (clientHeight > 0 ? clientHeight : 0));
-const isLoadingAndNotMock = $derived(isLoading && job?.result_stream === undefined && !mock?.enabled);
+// If a test job is running, we override the preview to show the test job
+const executingTestJob = $derived(testJob && testJob.type === 'QueuedJob');
+const isLoadingAndNotMock = $derived(isLoading && lastJob?.result_stream === undefined && (!mock?.enabled || executingTestJob));
 const copilot_fix_render = $derived(copilot_fix);
+export function getPreview() {
+    return preview;
+}
+async function selectJobFromHistory({ detail }) {
+    if (!detail) {
+        togglePreview(undefined);
+        return;
+    }
+    if (detail === 'mock') {
+        if (mock?.enabled) {
+            togglePreview(undefined);
+            return;
+        }
+        togglePreview('mock');
+        return;
+    }
+    if (detail.id === lastJob?.id && !mock?.enabled) {
+        togglePreview(undefined);
+        return;
+    }
+    isLoading = true;
+    try {
+        const fullJob = await detail.getFullJob();
+        if (fullJob) {
+            selectJob(fullJob);
+            togglePreview('job');
+        }
+    }
+    finally {
+        isLoading = false;
+    }
+}
+export function getHistoryOpen() {
+    return historyOpen;
+}
+export function getSelectedJob() {
+    return selectedJob;
+}
+const noHistory = $derived(loopStatus ? (loopStatus.type === 'self' ? 'isLoop' : 'isInsideLoop') : undefined);
 </script>
 
 <div
@@ -178,6 +229,7 @@ const copilot_fix_render = $derived(copilot_fix);
 	bind:clientHeight
 	style={canEditWithDblClick ? 'cursor: text;' : ''}
 >
+	<!-- Top toolbar -->
 	<div
 		class={twMerge(
 			'text-xs px-1',
@@ -193,89 +245,24 @@ const copilot_fix_render = $derived(copilot_fix);
 			)}
 		>
 			<div class="flex flex-row items-center gap-0.5">
+				<!-- History picker -->
 				{#if !disableHistory}
-					<Popover
-						bind:this={stepHistoryPopover}
-						floatingConfig={{
-							strategy: 'fixed',
-							placement: 'left-start',
-							offset: historyOffset,
-							gutter: 0 // hack to make offset effective, see https://github.com/melt-ui/melt-ui/issues/528
-						}}
-						contentClasses="w-[225px] overflow-hidden"
-						{closeOnOutsideClick}
-						usePointerDownOutside={closeOnOutsideClick}
-						disablePopup={!!connectingData || jsonView}
-						bind:isOpen={historyOpen}
-					>
-						{#snippet trigger()}
-							<Button
-								color="light"
-								size="xs2"
-								variant="contained"
-								btnClasses="bg-surface h-[27px]"
-								startIcon={{ icon: History }}
-								nonCaptureEvent
-							/>
-						{/snippet}
-						{#snippet content()}
-							<div class="rounded-[inherit]" style={`height: ${popoverHeight}px`}>
-								<StepHistory
-									{moduleId}
-									{getLogs}
-									on:select={async ({ detail }) => {
-										if (!detail) {
-											togglePreview(undefined)
-											return
-										}
-										if (detail === 'mock') {
-											if (mock?.enabled) {
-												togglePreview(undefined)
-												return
-											}
-											togglePreview('mock')
-											return
-										}
-										if (detail.id === job?.id && !mock?.enabled) {
-											togglePreview(undefined)
-											return
-										}
-
-										// Create a timeout to show loading state after 200ms
-										const loadingTimeout = setTimeout(() => {
-											isLoading = true
-										}, 200)
-
-										try {
-											const fullJob = await detail.getFullJob()
-											if (fullJob) {
-												selectJob(fullJob)
-												togglePreview('job')
-											}
-										} finally {
-											// Clear the timeout if operation completed before 200ms
-											clearTimeout(loadingTimeout)
-											isLoading = false
-										}
-									}}
-									mockValue={mock?.return_value}
-									mockEnabled={mock?.enabled}
-									{path}
-									noHistory={loopStatus
-										? loopStatus.type === 'self'
-											? 'isLoop'
-											: 'isInsideLoop'
-										: undefined}
-								/>
-							</div>
-						{/snippet}
-					</Popover>
+					{@render historyPicker()}
 				{/if}
-				{#if !isLoadingAndNotMock || mock?.enabled}
+				<!-- Badge-->
+				{#if executingTestJob}
+					<OutputBadge
+						job={testJob}
+						class={twMerge(
+							'min-w-16 min-h-[23px] text-secondary',
+							preview ? 'bg-surface shadow-sm' : ''
+						)}
+					/>
+				{:else if !isLoadingAndNotMock || mock?.enabled}
 					<div
 						class={twMerge(
 							'w-grow min-w-0 flex gap-1 items-center h-[27px] rounded-md  group',
-							preview || selectedJob?.id !== job?.id ? 'p-[2px] bg-surface-secondary' : ''
+							preview || selectedJob?.id !== lastJob?.id ? 'p-[2px] bg-surface-secondary' : ''
 						)}
 					>
 						{#if loopStatus?.type === 'self'}
@@ -311,7 +298,7 @@ const copilot_fix_render = $derived(copilot_fix);
 								job={selectedJob}
 								class={twMerge(
 									'min-w-16 text-secondary',
-									preview || selectedJob?.id !== job?.id ? 'bg-surface shadow-sm h-[23px]' : ''
+									preview || selectedJob?.id !== lastJob?.id ? 'bg-surface shadow-sm h-[23px]' : ''
 								)}
 							/>
 						{/if}
@@ -329,17 +316,9 @@ const copilot_fix_render = $derived(copilot_fix);
 							>
 						{/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}
 
+				<!-- Pin button -->
 				{#if !disableMock && !isLoadingAndNotMock}
 					<Tooltip disablePopup={mock?.enabled}>
 						<Button
@@ -368,6 +347,7 @@ const copilot_fix_render = $derived(copilot_fix);
 				{/if}
 
 				{#if jsonView}
+					<!-- Save button -->
 					<Button
 						size="xs2"
 						color="green"
@@ -388,6 +368,7 @@ const copilot_fix_render = $derived(copilot_fix);
 						}}
 						disabled={!!error || !tmpMock}
 					/>
+					<!-- Cancel button -->
 					<Button
 						size="xs2"
 						color="red"
@@ -399,7 +380,8 @@ const copilot_fix_render = $derived(copilot_fix);
 							tmpMock = undefined
 						}}
 					/>
-				{:else if mock?.enabled && !preview}
+				{:else if mock?.enabled && !preview && !executingTestJob}
+					<!-- Edit pin button -->
 					<Tooltip disablePopup={mock?.enabled}>
 						<Button
 							size="xs2"
@@ -510,6 +492,7 @@ const copilot_fix_render = $derived(copilot_fix);
 					<Loader2 class="animate-spin" />
 				</div>
 			{:else if connectingData !== undefined || simpleViewer}
+				<!-- Display data for input connections -->
 				<ObjectViewer
 					json={moduleId
 						? {
@@ -526,6 +509,7 @@ const copilot_fix_render = $derived(copilot_fix);
 					{editKey}
 				/>
 			{:else if jsonView}
+				<!-- Json editor for editing mock data -->
 				{#await import('../../JsonEditor.svelte')}
 					<Loader2 class="animate-spin" />
 				{:then Module}
@@ -549,12 +533,12 @@ const copilot_fix_render = $derived(copilot_fix);
 						class="h-full"
 					/>
 				{/await}
-			{:else if (mock?.enabled || preview == 'mock') && preview != 'job'}
+			{:else if (mock?.enabled || preview == 'mock') && preview != 'job' && !executingTestJob}
+				<!-- Display data for mock data -->
 				{#if fullResult}
 					<div class="break-words relative h-full">
 						<DisplayResult
 							bind:this={displayResultMock}
-							bind:forceJson
 							workspaceId={undefined}
 							jobId={undefined}
 							result_stream={undefined}
@@ -578,12 +562,12 @@ const copilot_fix_render = $derived(copilot_fix);
 					/>
 				{/if}
 			{:else if selectedJob != undefined && (selectedJob.result_stream || selectedJob.type == 'CompletedJob')}
+				<!-- Display data for job data -->
 				{#if fullResult}
 					<div class="break-words relative h-full">
 						{#key selectedJob}
 							<DisplayResult
 								bind:this={displayResultJob}
-								bind:forceJson
 								workspaceId={selectedJob?.workspace_id}
 								jobId={selectedJob?.id}
 								result={selectedJob?.result}
@@ -611,7 +595,7 @@ const copilot_fix_render = $derived(copilot_fix);
 						pureViewer={false}
 					/>
 				{/if}
-			{:else if !job}
+			{:else if !lastJob}
 				<div class="flex flex-col items-center justify-center h-full">
 					<p class="text-xs text-secondary">
 						{customEmptyJobMessage ?? 'Test this step to see results'}{#if !disableMock}
@@ -649,6 +633,47 @@ const copilot_fix_render = $derived(copilot_fix);
 	</button>
 {/snippet}
 
+{#snippet historyPicker()}
+	<Popover
+		bind:this={stepHistoryPopover}
+		floatingConfig={{
+			strategy: 'fixed',
+			placement: 'left-start',
+			offset: historyOffset,
+			gutter: 0 // hack to make offset effective, see https://github.com/melt-ui/melt-ui/issues/528
+		}}
+		contentClasses="w-[225px] overflow-hidden"
+		{closeOnOutsideClick}
+		usePointerDownOutside={closeOnOutsideClick}
+		disablePopup={!!connectingData || jsonView}
+		bind:isOpen={historyOpen}
+	>
+		{#snippet trigger()}
+			<Button
+				color="light"
+				size="xs2"
+				variant="contained"
+				btnClasses="bg-surface h-[27px]"
+				startIcon={{ icon: History }}
+				nonCaptureEvent
+			/>
+		{/snippet}
+		{#snippet content()}
+			<div class="rounded-[inherit]" style={`height: ${popoverHeight}px`}>
+				<StepHistory
+					{moduleId}
+					{getLogs}
+					on:select={selectJobFromHistory}
+					mockValue={mock?.return_value}
+					mockEnabled={mock?.enabled}
+					{path}
+					{noHistory}
+				/>
+			</div>
+		{/snippet}
+	</Popover>
+{/snippet}
+
 <style>
 	.dbl-click-editable {
 		cursor: text;

package/package/components/flows/propPicker/OutputPickerInner.svelte.d.ts

@@ -1,15 +1,5 @@
 import type { Job } from '../../../gen';
-type SelectedJob = ((Job | {
-    id: string;
-    result: unknown;
-    type: 'CompletedJob';
-    workspace_id: string;
-    success: boolean;
-}) & {
-    preview?: boolean;
-    result_stream?: string;
-    result?: unknown;
-}) | undefined;
+import type { OutputViewerJob } from '../types';
 interface Props {
     prefix?: string;
     allowCopy?: boolean;
@@ -22,10 +12,7 @@ interface Props {
     fullResult?: boolean;
     closeOnOutsideClick?: boolean;
     getLogs?: boolean;
-    selectedJob?: SelectedJob;
-    forceJson?: boolean;
     isLoading?: boolean;
-    preview?: 'mock' | 'job' | undefined;
     hideHeaderBar?: boolean;
     simpleViewer?: any | undefined;
     path?: string;
@@ -37,7 +24,6 @@ interface Props {
     rightMargin?: boolean;
     disableMock?: boolean;
     disableHistory?: boolean;
-    lastJob?: Job;
     testJob?: Job & {
         result_stream?: string;
     };
@@ -56,6 +42,11 @@ interface Props {
     onResetInitial?: () => void;
     customEmptyJobMessage?: string;
 }
-declare const OutputPickerInner: import("svelte").Component<Props, {}, "preview" | "forceJson" | "mock" | "isLoading" | "selectedJob" | "derivedHistoryOpen">;
+declare const OutputPickerInner: import("svelte").Component<Props, {
+    setJobPreview: () => void;
+    getPreview: () => "job" | "mock" | undefined;
+    getHistoryOpen: () => boolean;
+    getSelectedJob: () => OutputViewerJob;
+}, "mock" | "isLoading">;
 type OutputPickerInner = ReturnType<typeof OutputPickerInner>;
 export default OutputPickerInner;

package/package/components/flows/{testSteps.svelte.d.ts → stepsInputArgs.svelte.d.ts}

@@ -1,7 +1,7 @@
 import type { FlowModule, OpenFlow } from '../../gen';
 import type { FlowState } from './flowState';
 import { type PickableProperties } from './previousResults';
-export declare class TestSteps {
+export declare class StepsInputArgs {
     #private;
     constructor();
     setStepArgsManually(moduleId: string, args: Record<string, any>): void;
@@ -19,4 +19,5 @@ export declare class TestSteps {
     }, pickableProperties: PickableProperties | undefined): void;
     updateStepArgs(id: string, flowState: FlowState | undefined, flow: OpenFlow | undefined, previewArgs: Record<string, any> | undefined): void;
     removeExtraKey(moduleId: string, keys: string[]): void;
+    resetManuallyEditedArgs(): void;
 }

package/package/components/flows/{testSteps.svelte.js → stepsInputArgs.svelte.js}

@@ -1,6 +1,6 @@
 import { dfs, getPreviousModule, getStepPropPicker } from './previousResults';
 import { evalValue } from './utils';
-export class TestSteps {
+export class StepsInputArgs {
     #stepsEvaluated = $state({});
     #steps = $state({});
     constructor() { }
@@ -36,8 +36,17 @@ export class TestSteps {
         this.#stepsEvaluated[moduleId][argName] = $state.snapshot(value);
     }
     isArgManuallySet(moduleId, argName) {
-        return (JSON.stringify(this.#steps[moduleId]?.[argName]) !==
-            JSON.stringify(this.#stepsEvaluated[moduleId]?.[argName]));
+        try {
+            const stepsValue = this.#steps[moduleId]?.[argName];
+            const evaluatedValue = this.#stepsEvaluated[moduleId]?.[argName];
+            const stepsStr = JSON.stringify(stepsValue);
+            const evaluatedStr = JSON.stringify(evaluatedValue);
+            return stepsStr !== evaluatedStr;
+        }
+        catch (error) {
+            console.warn(`Error in isArgManuallySet for moduleId: ${moduleId}, argName: ${argName}`, error);
+            return this.#steps[moduleId]?.[argName] !== this.#stepsEvaluated[moduleId]?.[argName];
+        }
     }
     getManuallyEditedArgs(moduleId) {
         const manuallyEditedArgs = [];
@@ -122,4 +131,7 @@ export class TestSteps {
         });
         this.#stepsEvaluated[moduleId] = nargs;
     }
+    resetManuallyEditedArgs() {
+        this.#steps = $state.snapshot(this.#stepsEvaluated);
+    }
 }