windmill-components 1.503.3 → 1.503.4

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

@@ -1,6 +1,26 @@
 import { type Job, type RestartedFrom } from '../gen';
 import { type Writable } from 'svelte/store';
 import type { DurationStatus, GraphModuleState } from './graph';
+interface Props {
+    previewMode: 'upTo' | 'whole';
+    open: boolean;
+    preventEscape?: boolean;
+    jobId?: string | undefined;
+    job?: Job | undefined;
+    initial?: boolean;
+    selectedJobStep?: string | undefined;
+    selectedJobStepIsTopLevel?: boolean | undefined;
+    selectedJobStepType?: 'single' | 'forloop' | 'branchall';
+    rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states';
+    branchOrIterationN?: number;
+    scrollTop?: number;
+    localModuleStates?: Writable<Record<string, GraphModuleState>>;
+    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
+    onRunPreview?: () => void;
+    render?: boolean;
+    onJobDone?: () => void;
+    upToId?: string | undefined;
+}
 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> & {
         $$bindings?: Bindings;
@@ -14,24 +34,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<{
-    previewMode: "upTo" | "whole";
-    open: boolean;
-    preventEscape?: boolean;
-    jobId?: string | undefined;
-    job?: Job | undefined;
-    selectedJobStep?: string | undefined;
-    selectedJobStepIsTopLevel?: boolean | undefined;
-    selectedJobStepType?: "single" | "forloop" | "branchall";
-    rightColumnSelect?: "timeline" | "node_status" | "node_definition" | "user_states";
-    branchOrIterationN?: number;
-    scrollTop?: number;
-    localModuleStates?: Writable<Record<string, GraphModuleState>>;
-    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
-    test?: () => void;
-    runPreview?: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
-    refresh?: () => void;
-}, {
+declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     openTriggers: CustomEvent<any>;
     close: CustomEvent<any>;
 } & {
@@ -40,6 +43,17 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<{
     test: () => void;
     runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
     refresh: () => void;
-}, string>;
+    cancelTest: () => Promise<void>;
+    getLocalModuleStates: () => Writable<Record<string, GraphModuleState>>;
+    getLocalDurationStatuses: () => Writable<Record<string, DurationStatus>>;
+    getSuspendStatus: () => Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
+    getIsRunning: () => boolean;
+    getIsOwner: () => boolean;
+    getJob: () => Job | undefined;
+    flowHasChanged: () => boolean;
+}, "initial" | "preventEscape" | "job" | "jobId" | "scrollTop" | "localDurationStatuses" | "localModuleStates" | "rightColumnSelect" | "previewMode" | "selectedJobStep" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;

package/package/components/FlowPreviewResult.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">import { Badge, Loader2 } from 'lucide-svelte';
+import FlowJobResult from './FlowJobResult.svelte';
+import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
+import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
+import { emptyString } from '../utils';
+let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDurationStatuses, innerModules, suspendStatus, hideJobId, extra } = $props();
+</script>
+
+<FlowPreviewStatus {job} {hideJobId} {extra} />
+
+{#if !job}
+	<div>
+		<Loader2 class="animate-spin" />
+	</div>
+{:else if `result` in job}
+	{#if !hideFlowResult}
+		<div class="w-full h-full">
+			<FlowJobResult
+				workspaceId={job?.workspace_id}
+				jobId={job?.id}
+				tag={job?.tag}
+				loading={job['running'] == true}
+				result={job.result}
+				logs={job.logs}
+				durationStates={localDurationStatuses}
+				downloadLogs={!hideDownloadLogs}
+			/>
+		</div>
+	{/if}
+{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === 'WaitingForEvents'}
+	<FlowStatusWaitingForEvents {workspaceId} {job} {isOwner} />
+{:else if $suspendStatus && Object.keys($suspendStatus).length > 0}
+	<div class="flex gap-2 flex-col">
+		{#each Object.values($suspendStatus) as suspendCount (suspendCount.job.id)}
+			<div>
+				<div class="text-sm">
+					Flow suspended, waiting for {suspendCount.nb} events
+				</div>
+				<FlowStatusWaitingForEvents job={suspendCount.job} {workspaceId} {isOwner} />
+			</div>
+		{/each}
+	</div>
+{:else if job.logs}
+	<div
+		class="text-xs p-4 bg-surface-secondary overflow-auto max-h-80 border border-tertiary-inverse"
+	>
+		<pre class="w-full">{job.logs}</pre>
+	</div>
+{:else if innerModules?.length > 0}
+	<div class="flex flex-col gap-1">
+		{#each innerModules as mod, i (mod.id)}
+			{#if mod.type == 'InProgress'}
+				{@const rawMod = job.raw_flow?.modules[i]}
+
+				<div
+					><span class="inline-flex gap-1"
+						><Badge color="indigo">{mod.id}</Badge>
+						<span class="font-medium text-primary">
+							{#if !emptyString(rawMod?.summary)}
+								{rawMod?.summary ?? ''}
+							{:else if rawMod?.value.type == 'script'}
+								{rawMod.value.path ?? ''}
+							{:else if rawMod?.value.type}
+								{rawMod?.value.type}
+							{/if}
+						</span>
+
+						<Loader2 class="animate-spin" /></span
+					></div
+				>
+			{/if}
+		{/each}
+	</div>
+{/if}

package/package/components/FlowPreviewResult.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { FlowStatusModule, Job } from '../gen';
+import type { DurationStatus } from './graph';
+import type { Writable } from 'svelte/store';
+interface Props {
+    job: Job;
+    workspaceId: string | undefined;
+    isOwner: boolean;
+    hideFlowResult: boolean;
+    hideDownloadLogs: boolean;
+    localDurationStatuses: Writable<Record<string, DurationStatus>>;
+    innerModules: FlowStatusModule[];
+    suspendStatus: Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
+    hideJobId?: boolean;
+    extra?: import('svelte').Snippet;
+}
+declare const FlowPreviewResult: import("svelte").Component<Props, {}, "">;
+type FlowPreviewResult = ReturnType<typeof FlowPreviewResult>;
+export default FlowPreviewResult;

package/package/components/FlowStatusViewer.svelte

@@ -20,9 +20,10 @@ export let wideResults = false;
 export let localModuleStates = writable({});
 export let localDurationStatuses = writable({});
 export let job = undefined;
+export let render = true;
+export let suspendStatus = writable({});
 let lastJobId = jobId;
 let retryStatus = writable({});
-let suspendStatus = writable({});
 setContext('FlowStatusViewer', {
     flowStateStore,
     suspendStatus,
@@ -72,4 +73,5 @@ $: jobId && updateJobId();
 	{isOwner}
 	{wideResults}
 	bind:rightColumnSelect
+	{render}
 />

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -33,6 +33,8 @@ declare const FlowStatusViewer: $$__sveltets_2_IsomorphicComponent<{
     localModuleStates?: Writable<Record<string, GraphModuleState>>;
     localDurationStatuses?: Writable<Record<string, DurationStatus>>;
     job?: Job | undefined;
+    render?: boolean;
+    suspendStatus?: Writable<{}>;
 }, {
     start: CustomEvent<any>;
     done: CustomEvent<any>;

package/package/components/FlowStatusViewerInner.svelte

@@ -2,7 +2,6 @@
 import { workspaceStore } from '../stores';
 import { base } from '../base';
 import FlowJobResult from './FlowJobResult.svelte';
-import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import { createEventDispatcher, getContext, tick } from 'svelte';
 import { onDestroy } from 'svelte';
@@ -10,10 +9,9 @@ import { Badge, Button, Skeleton, Tab } from './common';
 import Tabs from './common/tabs/Tabs.svelte';
 import {} from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
-import { emptyString, isScriptPreview, msToSec, truncateRev } from '../utils';
+import { isScriptPreview, msToSec, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
-import { ChevronDown, Hourglass, Loader2 } from 'lucide-svelte';
-import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
+import { ChevronDown, Hourglass } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
 import FlowTimeline from './FlowTimeline.svelte';
 import { dfs } from './flows/dfs';
@@ -22,8 +20,9 @@ import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 import { buildPrefix } from './graph/graphBuilder.svelte';
+import FlowPreviewResult from './FlowPreviewResult.svelte';
 const dispatch = createEventDispatcher();
-let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs } = getContext('FlowStatusViewer');
+let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
 export let jobId;
 export let initialJob = undefined;
 export let workspaceId = undefined;
@@ -739,71 +738,17 @@ let subflowsSize = 500;
 			{/if}
 		{:else if render}
 			<div class={'border rounded-md shadow p-2'}>
-				<FlowPreviewStatus {job} />
-				{#if !job}
-					<div>
-						<Loader2 class="animate-spin" />
-					</div>
-				{:else if `result` in job}
-					{#if !hideFlowResult}
-						<div class="w-full h-full">
-							<FlowJobResult
-								workspaceId={job?.workspace_id}
-								jobId={job?.id}
-								tag={job?.tag}
-								loading={job['running'] == true}
-								result={job.result}
-								logs={job.logs}
-								durationStates={localDurationStatuses}
-								downloadLogs={!hideDownloadLogs}
-							/>
-						</div>
-					{/if}
-				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === 'WaitingForEvents'}
-					<FlowStatusWaitingForEvents {workspaceId} {job} {isOwner} />
-				{:else if $suspendStatus && Object.keys($suspendStatus).length > 0}
-					<div class="flex gap-2 flex-col">
-						{#each Object.values($suspendStatus) as suspendCount (suspendCount.job.id)}
-							<div>
-								<div class="text-sm">
-									Flow suspended, waiting for {suspendCount.nb} events
-								</div>
-								<FlowStatusWaitingForEvents job={suspendCount.job} {workspaceId} {isOwner} />
-							</div>
-						{/each}
-					</div>
-				{:else if job.logs}
-					<div
-						class="text-xs p-4 bg-surface-secondary overflow-auto max-h-80 border border-tertiary-inverse"
-					>
-						<pre class="w-full">{job.logs}</pre>
-					</div>
-				{:else if innerModules?.length > 0}
-					<div class="flex flex-col gap-1">
-						{#each innerModules as mod, i (mod.id)}
-							{#if mod.type == 'InProgress'}
-								{@const rawMod = job.raw_flow?.modules[i]}
-
-								<div
-									><span class="inline-flex gap-1"
-										><Badge color="indigo">{mod.id}</Badge>
-										<span class="font-medium text-primary">
-											{#if !emptyString(rawMod?.summary)}
-												{rawMod?.summary ?? ''}
-											{:else if rawMod?.value.type == 'script'}
-												{rawMod.value.path ?? ''}
-											{:else if rawMod?.value.type}
-												{rawMod?.value.type}
-											{/if}
-										</span>
-
-										<Loader2 class="animate-spin" /></span
-									></div
-								>
-							{/if}
-						{/each}
-					</div>
-				{/if}
+				<FlowPreviewResult
+					{job}
+					{workspaceId}
+					{isOwner}
+					{hideFlowResult}
+					{hideDownloadLogs}
+					{localDurationStatuses}
+					{innerModules}
+					{suspendStatus}
+					{hideJobId}
+				/>
 			</div>
 		{/if}
 		{#if render}

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -10,6 +10,7 @@ import SchemaForm from './SchemaForm.svelte';
 export let isOwner;
 export let workspaceId;
 export let job;
+export let light = false;
 let default_payload = {};
 let resumeUrl = undefined;
 let cancelUrl = undefined;
@@ -104,9 +105,11 @@ async function continu(approve) {
 </script>
 
 <div class="w-full h-full mt-2 text-sm text-tertiary">
-	<p>Waiting to be resumed</p>
+	{#if !light}
+		<p>Waiting to be resumed</p>
+	{/if}
 	{#if description != undefined}
-		<DisplayResult {workspaceId} noControls result={description} language={job?.language}/>
+		<DisplayResult {workspaceId} noControls result={description} language={job?.language} />
 	{/if}
 	<div>
 		{#if isOwner || resumeUrl}

package/package/components/FlowStatusWaitingForEvents.svelte.d.ts

@@ -16,6 +16,7 @@ declare const FlowStatusWaitingForEvents: $$__sveltets_2_IsomorphicComponent<{
     isOwner: boolean;
     workspaceId: string | undefined;
     job: Job;
+    light?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/package/components/FlowWrapper.svelte

@@ -2,6 +2,9 @@
 import FlowBuilder from './FlowBuilder.svelte';
 let { flowStore: oldFlowStore, disableAi, light, ...props } = $props();
 let flowStore = $state(oldFlowStore);
+$effect(() => {
+    flowStore = oldFlowStore;
+});
 let trialRender = $state(true);
 if (light) {
     setTimeout(() => {

package/package/components/ModuleTest.svelte

@@ -1,15 +1,11 @@
-<script lang="ts" module>"use strict";
-let testModulesState = $state({});
-</script>
-
 <script lang="ts">import { ScriptService } from '../gen';
 import { workspaceStore } from '../stores';
 import { getScriptByPath } from '../scripts';
-import { getContext, onMount } from 'svelte';
+import { getContext } from 'svelte';
 import TestJobLoader from './TestJobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined) } = $props();
-const { flowStore, flowStateStore, pathStore, testSteps, previewArgs } = getContext('FlowEditorContext');
+const { flowStore, flowStateStore, pathStore, testSteps, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
 let testJobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
@@ -24,10 +20,13 @@ export async function runTest(args) {
     // Not defined if JobProgressBar not loaded
     if (jobProgressReset)
         jobProgressReset();
-    testModulesState[mod.id].cancel = async () => {
-        await testJobLoader?.cancelJob();
-        testJob = undefined;
-    };
+    if (modulesTestStates.states[mod.id]) {
+        modulesTestStates.states[mod.id].cancel = async () => {
+            await testJobLoader?.cancelJob();
+            modulesTestStates.states[mod.id].testJob = undefined;
+        };
+        modulesTestStates.runTestCb?.(mod.id);
+    }
     const val = mod.value;
     // let jobId: string | undefined = undefined
     if (val.type == 'rawscript') {
@@ -57,21 +56,24 @@ function jobDone() {
         }
         stepHistoryLoader?.resetInitial(mod.id);
     }
-    testJob = undefined;
+    modulesTestStates.states[mod.id].testJob = undefined;
 }
 export function cancelJob() {
-    testModulesState[mod.id]?.cancel?.();
+    modulesTestStates.states[mod.id]?.cancel?.();
 }
 $effect(() => {
-    testIsLoading = testModulesState[mod.id]?.loading ?? false;
+    // Update testIsLoading to read the state from parent components
+    testIsLoading = modulesTestStates.states[mod.id]?.loading ?? false;
 });
-onMount(() => {
-    const modId = mod.id;
-    testModulesState[modId] = {
-        ...(testModulesState[modId] ?? { loading: false, instances: 0 }),
-        loading: testIsLoading
-    };
+$effect(() => {
+    // Update testJob to read the state from parent components
+    testJob = modulesTestStates.states[mod.id]?.testJob;
 });
+modulesTestStates.states[mod.id] = {
+    ...(modulesTestStates.states[mod.id] ?? { loading: false }),
+    loading: testIsLoading,
+    testJob: testJob
+};
 </script>
 
 <TestJobLoader
@@ -80,16 +82,16 @@ onMount(() => {
 	bind:scriptProgress
 	bind:this={testJobLoader}
 	bind:isLoading={
-		() => testModulesState[mod.id]?.loading ?? false,
+		() => modulesTestStates.states[mod.id]?.loading ?? false,
 		(v) => {
 			let newLoading = v ?? false
-			if (testModulesState[mod.id]?.loading !== newLoading) {
-				testModulesState[mod.id] = {
-					...(testModulesState[mod.id] ?? {}),
+			if (modulesTestStates.states[mod.id]?.loading !== newLoading) {
+				modulesTestStates.states[mod.id] = {
+					...(modulesTestStates.states[mod.id] ?? {}),
 					loading: newLoading
 				}
 			}
 		}
 	}
-	bind:job={testJob}
+	bind:job={modulesTestStates.states[mod.id].testJob}
 />

package/package/components/ScriptWrapper.svelte

@@ -2,6 +2,9 @@
 import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
 let { script: oldScript, disableAi, ...props } = $props();
 let script = $state(oldScript);
+$effect(() => {
+    script = oldScript;
+});
 </script>
 
 <AiChatLayout noPadding {disableAi}>

package/package/components/common/button/Button.svelte

@@ -10,7 +10,7 @@ import { createTooltip } from '@melt-ui/svelte';
 import { conditionalMelt } from '../../../utils';
 import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
-let { id = '', aiId = undefined, aiDescription = undefined, size = 'md', spacingSize = size, color = 'blue', variant = 'contained', btnClasses = '', wrapperClasses = '', wrapperStyle = '', disabled = false, href = undefined, target = undefined, iconOnly = false, loadUntilNav = false, clickableWhileLoading = false, element = $bindable(undefined), nonCaptureEvent = false, propagateEvent = false, loading = $bindable(false), title = undefined, style = '', download = undefined, startIcon = undefined, endIcon = undefined, shortCut = undefined, tooltipPopover = undefined, dropdownBtnClasses = '', dropdownItems = undefined, hideDropdown = false, children, tooltip, ...rest } = $props();
+let { id = '', aiId = undefined, aiDescription = undefined, size = 'md', spacingSize = size, color = 'blue', variant = 'contained', btnClasses = '', wrapperClasses = '', wrapperStyle = '', disabled = false, href = undefined, target = undefined, iconOnly = false, loadUntilNav = false, clickableWhileLoading = false, element = $bindable(undefined), nonCaptureEvent = false, propagateEvent = false, loading = $bindable(false), title = undefined, style = '', download = undefined, startIcon = undefined, endIcon = undefined, shortCut = undefined, tooltipPopover = undefined, dropdownBtnClasses = '', dropdownItems = undefined, hideDropdown = false, children, tooltip, dropdownOpen = $bindable(false), ...rest } = $props();
 function computeDropdowns(menuItems) {
     const items = typeof menuItems === 'function' ? menuItems() : menuItems;
     return items.map((item) => ({
@@ -225,6 +225,7 @@ $effect(() => {
 			usePointerDownOutside
 			on:open={() => dispatch('dropdownOpen', true)}
 			on:close={() => dispatch('dropdownOpen', false)}
+			bind:open={dropdownOpen}
 		>
 			{#snippet buttonReplacement()}
 				<div

package/package/components/common/button/Button.svelte.d.ts

@@ -51,6 +51,7 @@ interface Props {
     children?: import('svelte').Snippet;
     tooltip?: import('svelte').Snippet;
     [key: string]: any;
+    dropdownOpen?: boolean;
 }
 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> & {
@@ -73,6 +74,6 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<Props, {
 }, {}, {
     focus: () => void;
     click: () => void;
-}, "element" | "loading">;
+}, "element" | "loading" | "dropdownOpen">;
 type Button = InstanceType<typeof Button>;
 export default Button;

package/package/components/flows/FlowEditor.svelte

@@ -9,8 +9,11 @@ import FlowAIChat from '../copilot/chat/flow/FlowAIChat.svelte';
 import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 const { flowStore } = getContext('FlowEditorContext');
-let { loading, disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, disabledFlowInputs = false, smallErrorHandler = false, newFlow = false, savedFlow = undefined, onDeployTrigger = () => { }, onTestUpTo = undefined, onEditInput = undefined, forceTestTab, highlightArg, aiChatOpen, showFlowAiButton, toggleAiChat, onRunPreview = () => { } } = $props();
+let { loading, disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, disabledFlowInputs = false, smallErrorHandler = false, newFlow = false, savedFlow = undefined, onDeployTrigger = () => { }, onTestUpTo = undefined, onEditInput = undefined, forceTestTab, highlightArg, localModuleStates = writable({}), aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, localDurationStatuses, suspendStatus, showJobStatus, onDelete, flowHasChanged } = $props();
 let flowModuleSchemaMap = $state();
+export function isNodeVisible(nodeId) {
+    return flowModuleSchemaMap?.isNodeVisible(nodeId) ?? false;
+}
 setContext('PropPickerContext', {
     flowPropPickerConfig: writable(undefined),
     pickablePropertiesFiltered: writable(undefined)
@@ -58,9 +61,22 @@ onDestroy(() => {
 						}}
 						{onTestUpTo}
 						{onEditInput}
+						{localModuleStates}
 						{aiChatOpen}
 						{showFlowAiButton}
 						{toggleAiChat}
+						{isOwner}
+						{onTestFlow}
+						{isRunning}
+						{onCancelTestFlow}
+						{onOpenPreview}
+						{onHideJobStatus}
+						{individualStepTests}
+						flowJob={job}
+						{showJobStatus}
+						{suspendStatus}
+						{onDelete}
+						{flowHasChanged}
 					/>
 				{/if}
 			</div>
@@ -83,7 +99,12 @@ onDestroy(() => {
 					{onDeployTrigger}
 					{forceTestTab}
 					{highlightArg}
-					{onRunPreview}
+					{onTestFlow}
+					{job}
+					{isOwner}
+					{localDurationStatuses}
+					{suspendStatus}
+					onOpenDetails={onOpenPreview}
 				/>
 			{/if}
 		</Pane>

package/package/components/flows/FlowEditor.svelte.d.ts

@@ -1,5 +1,7 @@
-import type { Flow } from '../../gen';
+import { type Writable } from 'svelte/store';
+import type { Flow, Job } from '../../gen';
 import type { Trigger } from '../triggers/utils';
+import type { DurationStatus, GraphModuleState } from '../graph';
 interface Props {
     loading: boolean;
     disableStaticInputs?: boolean;
@@ -20,7 +22,23 @@ interface Props {
     aiChatOpen?: boolean;
     showFlowAiButton?: boolean;
     toggleAiChat?: () => void;
-    onRunPreview?: () => void;
+    localModuleStates?: Writable<Record<string, GraphModuleState>>;
+    isOwner?: boolean;
+    onTestFlow?: () => void;
+    isRunning?: boolean;
+    onCancelTestFlow?: () => void;
+    onOpenPreview?: () => void;
+    onHideJobStatus?: () => void;
+    individualStepTests?: boolean;
+    job?: Job;
+    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
+    suspendStatus?: Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
+    showJobStatus?: boolean;
+    onDelete?: (id: string) => void;
+    flowHasChanged?: boolean;
 }
 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> & {
@@ -41,6 +59,8 @@ declare const FlowEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     testWithArgs: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {
+    isNodeVisible: (nodeId: string) => boolean;
+}, "">;
 type FlowEditor = InstanceType<typeof FlowEditor>;
 export default FlowEditor;

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -9,7 +9,8 @@ import { insertNewPreprocessorModule } from '../flowStateUtils.svelte';
 import TriggersEditor from '../../triggers/TriggersEditor.svelte';
 import { handleSelectTriggerFromKind } from '../../triggers/utils';
 import { computeMissingInputWarnings } from '../missingInputWarnings';
-let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onRunPreview } = $props();
+import FlowResult from './FlowResult.svelte';
+let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onTestFlow, job, isOwner, localDurationStatuses, suspendStatus, onOpenDetails } = $props();
 const { selectedId, flowStore, flowStateStore, flowInputsStore, pathStore, initialPathStore, fakeInitialPath, previewArgs, flowInputEditorState } = getContext('FlowEditorContext');
 const { showCaptureHint, triggersState, triggersCount } = getContext('TriggerContext');
 function checkDup(modules) {
@@ -39,10 +40,10 @@ $effect(() => {
 			showCaptureHint.set(true)
 		}}
 		on:applyArgs
-		{onRunPreview}
+		{onTestFlow}
 	/>
 {:else if $selectedId === 'Result'}
-	<p class="p-4 text-secondary">The result of the flow will be the result of the last node.</p>
+	<FlowResult {noEditor} {job} {isOwner} {localDurationStatuses} {suspendStatus} {onOpenDetails} />
 {:else if $selectedId === 'constants'}
 	<FlowConstants {noEditor} />
 {:else if $selectedId === 'failure'}

package/package/components/flows/content/FlowEditorPanel.svelte.d.ts

@@ -1,5 +1,7 @@
-import type { Flow } from '../../../gen';
+import type { Flow, Job } from '../../../gen';
 import { type Trigger } from '../../triggers/utils';
+import type { Writable } from 'svelte/store';
+import type { DurationStatus } from '../../graph';
 interface Props {
     noEditor?: boolean;
     enableAi?: boolean;
@@ -11,7 +13,15 @@ interface Props {
     onDeployTrigger?: (trigger: Trigger) => void;
     forceTestTab?: Record<string, boolean>;
     highlightArg?: Record<string, string | undefined>;
-    onRunPreview?: () => void;
+    onTestFlow?: () => void;
+    job?: Job;
+    isOwner?: boolean;
+    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
+    suspendStatus?: Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
+    onOpenDetails?: () => void;
 }
 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> & {

package/package/components/flows/content/FlowInput.svelte

@@ -21,7 +21,7 @@ import SideBarTab from '../../meltComponents/SideBarTab.svelte';
 import CaptureTable from '../../triggers/CaptureTable.svelte';
 import { isObjectTooBig } from '../../../utils';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
-let { noEditor, disabled, onRunPreview } = $props();
+let { noEditor, disabled, onTestFlow } = $props();
 const { flowStore, previewArgs, pathStore, initialPathStore, fakeInitialPath, flowInputEditorState } = getContext('FlowEditorContext');
 let addPropertyV2 = $state(undefined);
 let previewSchema = $state(undefined);
@@ -159,7 +159,7 @@ function runPreview() {
     if (previewArguments) {
         previewArgs.val = structuredClone($state.snapshot(previewArguments));
     }
-    onRunPreview?.();
+    onTestFlow?.();
 }
 function updatePreviewSchemaAndArgs(payload) {
     if (isObjectTooBig(payload)) {