windmill-components 1.352.9 → 1.362.1

package/package/components/flows/map/FlowJobsMenu.svelte

@@ -0,0 +1,69 @@
+<script>import { Menu } from '../../common';
+import { createEventDispatcher } from 'svelte';
+import { ListFilter } from 'lucide-svelte';
+const dispatch = createEventDispatcher();
+export let open = undefined;
+export let index;
+export let flowJobs;
+export let flowJobsSuccess;
+export let selected;
+let filter = undefined;
+function onKeydown(event) {
+    if (event.key === 'Enter' &&
+        filter != undefined &&
+        flowJobs &&
+        filter < flowJobs.length &&
+        filter > 0) {
+        event.preventDefault();
+        dispatch('selectedIteration', { index: filter - 1, id: flowJobs[filter - 1] });
+    }
+}
+</script>
+
+<Menu
+	transitionDuration={0}
+	pointerDown
+	bind:show={open}
+	noMinW
+	placement="bottom-center"
+	let:close
+>
+	<button
+		title="Pick an interation"
+		slot="trigger"
+		id={`flow-editor-iteration picker-${index}`}
+		type="button"
+		class=" text-xs bg-surface border-[1px] border-gray-300 dark:border-gray-500 focus:outline-none
+		hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-sm w-[40px] gap-1 h-[20px]
+		flex items-center justify-center {flowJobsSuccess?.[selected] == false
+			? 'text-red-400'
+			: 'text-secondary'}"
+	>
+		#{selected == -1 ? '?' : selected + 1}
+		<ListFilter size={15} />
+	</button>
+	<div id="flow-editor-insert-module">
+		<div class="font-mono divide-y text-xs w-full text-secondary max-h-[200px] overflow-auto">
+			<input autofocus type="number" bind:value={filter} on:keydown={onKeydown} />
+			{#each flowJobs ?? [] as id, idx (id)}
+				{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
+					<button
+						class="w-full text-left py-1 pl-2 min-w-20 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
+							idx
+						] == false
+							? 'text-red-400'
+							: ''}"
+						on:pointerdown={() => {
+							close()
+							dispatch('selectedIteration', { index: idx, id })
+						}}
+						role="menuitem"
+						tabindex="-1"
+					>
+						#{idx + 1}
+					</button>
+				{/if}
+			{/each}
+		</div>
+	</div>
+</Menu>

package/package/components/flows/map/FlowJobsMenu.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        index: number;
+        flowJobs: string[] | undefined;
+        flowJobsSuccess: (boolean | undefined)[] | undefined;
+        selected: number;
+    };
+    events: {
+        selectedIteration: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowJobsMenuProps = typeof __propDef.props;
+export type FlowJobsMenuEvents = typeof __propDef.events;
+export type FlowJobsMenuSlots = typeof __propDef.slots;
+export default class FlowJobsMenu extends SvelteComponent<FlowJobsMenuProps, FlowJobsMenuEvents, FlowJobsMenuSlots> {
+}
+export {};

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

@@ -19,6 +19,7 @@ export let modType = undefined;
 export let bgColor = '';
 export let concurrency = false;
 export let retries = undefined;
+export let warningMessage = undefined;
 const { flowInputsStore } = getContext('FlowGraphContext');
 const dispatch = createEventDispatcher();
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
@@ -29,7 +30,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 <div
 	class={classNames(
 		'w-full module flex rounded-sm cursor-pointer',
-		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
+		selected ? 'outline outline-offset-1 outline-2  outline-gray-600 dark:outline-gray-400' : '',
 		'flex relative',
 		$copilotCurrentStepStore === id ? 'z-[901]' : ''
 	)}
@@ -120,7 +121,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 
 	<div
 		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
-			border border-gray-400 p-2 text-2xs module text-primary"
+			border border-gray-400 dark:border-gray-600 p-2 text-2xs module text-primary"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
@@ -153,10 +154,12 @@ hover:border-blue-700 {selected ? '' : '!hidden'}"
 			<Move class="mx-[3px]" size={14} strokeWidth={2} />
 		</button>
 
-		{#if id && !Object.values($flowInputsStore?.[id]?.requiredInputsFilled || {}).every(Boolean)}
+		{#if (id && !Object.values($flowInputsStore?.[id]?.requiredInputsFilled || {}).every(Boolean)) || Boolean(warningMessage)}
 			<div class="absolute -top-[10px] -left-[10px]">
 				<Popover>
-					<svelte:fragment slot="text">At least one required input is not set.</svelte:fragment>
+					<svelte:fragment slot="text"
+						>{warningMessage ?? 'At least one required input is not set.'}
+					</svelte:fragment>
 					<div
 						class="flex items-center justify-center h-full w-full rounded-md p-0.5 border border-yellow-600 text-yellow-600 bg-yellow-100 duration-150 hover:bg-yellow-300"
 					>

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

@@ -16,6 +16,7 @@ declare const __propDef: {
         bgColor?: string | undefined;
         concurrency?: boolean | undefined;
         retries?: number | undefined;
+        warningMessage?: string | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -8,6 +8,7 @@ import InsertModuleButton from './InsertModuleButton.svelte';
 import { prettyLanguage } from '../../../common';
 import { msToSec } from '../../../utils';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
+import FlowJobsMenu from './FlowJobsMenu.svelte';
 export let mod;
 export let trigger;
 export let insertable;
@@ -21,6 +22,7 @@ export let duration_ms = undefined;
 export let disableAi = false;
 export let wrapperId = undefined;
 export let retries = undefined;
+export let flowJobs;
 $: idx = modules.findIndex((m) => m.id === mod.id);
 const { selectedId } = getContext('FlowGraphContext');
 const dispatch = createEventDispatcher();
@@ -96,6 +98,19 @@ let openMenu2 = undefined;
 				{annotation}
 			</div>
 		{/if}
+		{#if flowJobs && !insertable}
+			<div class="absolute z-10 right-8 -top-5">
+				<FlowJobsMenu
+					on:selectedIteration={(e) => {
+						dispatch('selectedIteration', e.detail)
+					}}
+					flowJobsSuccess={flowJobs.flowJobsSuccess}
+					flowJobs={flowJobs.flowJobs}
+					selected={flowJobs.selected}
+					index={idx}
+				/>
+			</div>
+		{/if}
 
 		<div class={moving == mod.id ? 'opacity-50' : ''}>
 			{#if mod.value.type === 'forloopflow' || mod.value.type === 'whileloopflow'}
@@ -111,6 +126,11 @@ let openMenu2 = undefined;
 					on:click={() => dispatch('select', mod.id)}
 					{...itemProps}
 					{bgColor}
+					warningMessage={mod?.value?.type === 'forloopflow' &&
+					mod?.value?.iterator?.type === 'javascript' &&
+					mod?.value?.iterator?.expr === ''
+						? 'Iterator expression is empty'
+						: ''}
 				>
 					<div slot="icon">
 						<Repeat size={16} />

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

@@ -15,6 +15,11 @@ declare const __propDef: {
         disableAi?: boolean | undefined;
         wrapperId?: string | undefined;
         retries?: number | undefined;
+        flowJobs: {
+            flowJobs: string[];
+            selected: number;
+            flowJobsSuccess: (boolean | undefined)[];
+        } | undefined;
     };
     events: {
         delete: CustomEvent<CustomEvent<MouseEvent>>;
@@ -35,6 +40,10 @@ declare const __propDef: {
         move: CustomEvent<{
             module: FlowModule;
         } | undefined>;
+        selectedIteration: CustomEvent<{
+            index: number;
+            id: string;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -19,6 +19,7 @@ export let moving = undefined;
 export let center = true;
 export let disableAi = false;
 export let wrapperNode = undefined;
+export let borderColor = undefined;
 const dispatch = createEventDispatcher();
 let openMenu = false;
 let triggerOpenMenu = false;
@@ -36,7 +37,7 @@ const { drawerStore: copilotDrawerStore, currentStepStore: copilotCurrentStepSto
 				}
 			}}
 			type="button"
-			class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
+			class="text-primary bg-surface border mx-[1px] 'border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
 		>
 			<X class="m-[5px]" size={15} />
 		</button>
@@ -64,9 +65,10 @@ const { drawerStore: copilotDrawerStore, currentStepStore: copilotCurrentStepSto
 	id={`flow-editor-virtual-${label}`}
 >
 	<div
+		style={borderColor ? `border-color: ${borderColor};` : ''}
 		class="flex gap-1 justify-between {center
 			? 'items-center'
-			: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400"
+			: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400 dark:border-gray-600"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />

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

@@ -19,6 +19,7 @@ declare const __propDef: {
         center?: boolean | undefined;
         disableAi?: boolean | undefined;
         wrapperNode?: FlowModule | undefined;
+        borderColor?: string | undefined;
     };
     events: {
         insert: CustomEvent<{

package/package/components/flows/previousResults.d.ts

@@ -12,6 +12,15 @@ type StepPropPicker = {
 };
 export declare function dfs(id: string | undefined, flow: OpenFlow, getParents?: boolean): FlowModule[];
 export declare function getPreviousIds(id: string, flow: OpenFlow, include_node: boolean): string[];
+export declare function getFailureStepPropPicker(flowState: FlowState, flow: OpenFlow, args: any): {
+    pickableProperties: {
+        flow_input: Object;
+        priorIds: any;
+        previousId: undefined;
+        hasResume: boolean;
+    };
+    extraLib: string;
+};
 export declare function getStepPropPicker(flowState: FlowState, parentModule: FlowModule | undefined, previousModule: FlowModule | undefined, id: string, flow: OpenFlow, args: any, include_node: boolean): StepPropPicker;
 export declare function buildExtraLib(flowInput: Record<string, any>, results: Record<string, any>, resume: boolean): string;
 export {};

package/package/components/flows/previousResults.js

@@ -30,21 +30,22 @@ function getFlowInput(parentModules, flowState, args, schema) {
     const topFlowInput = schemaToObject(schema, args);
     const parentState = parentModule ? flowState[parentModule.id] : undefined;
     if (parentState && parentModule) {
-        if (parentState.previewArgs) {
+        if (parentState.previewArgs &&
+            !(parentModule.value?.type === 'forloopflow' && parentModule.value?.modules?.length === 1)) {
             return { ...topFlowInput, ...parentState.previewArgs };
         }
         else {
             let parentFlowInput = getFlowInput(parentModules, flowState, args, schema);
             if (parentModule.value.type === 'forloopflow') {
                 let parentFlowInputIter = { ...parentFlowInput };
-                if (parentFlowInputIter.hasOwnProperty("iter")) {
-                    parentFlowInputIter["iter_parent"] = parentFlowInputIter["iter"];
-                    delete parentFlowInputIter["iter"];
+                if (parentFlowInputIter.hasOwnProperty('iter')) {
+                    parentFlowInputIter['iter_parent'] = parentFlowInputIter['iter'];
+                    delete parentFlowInputIter['iter'];
                 }
                 let topFlowInputIter = { ...topFlowInput };
-                if (topFlowInputIter.hasOwnProperty("iter")) {
-                    topFlowInputIter["iter_parent"] = topFlowInputIter["iter"];
-                    delete topFlowInputIter["iter"];
+                if (topFlowInputIter.hasOwnProperty('iter')) {
+                    topFlowInputIter['iter_parent'] = topFlowInputIter['iter'];
+                    delete topFlowInputIter['iter'];
                 }
                 return {
                     ...topFlowInputIter,
@@ -52,7 +53,7 @@ function getFlowInput(parentModules, flowState, args, schema) {
                     iter: {
                         value: "Iteration's value",
                         index: "Iteration's index"
-                    },
+                    }
                 };
             }
             else {
@@ -83,6 +84,39 @@ export function getPreviousIds(id, flow, include_node) {
     })
         .flat();
 }
+export function getFailureStepPropPicker(flowState, flow, args) {
+    const allIds = flow.value.modules.map((x) => x.id);
+    let priorIds = Object.fromEntries(allIds.map((id) => [id, flowState[id]?.previewResult ?? {}]).reverse());
+    const flowInput = getFlowInput(dfs(flow.value.modules[0].id, flow), flowState, args, flow.schema);
+    return {
+        pickableProperties: {
+            flow_input: schemaToObject(flow.schema, args),
+            priorIds: priorIds,
+            previousId: undefined,
+            hasResume: false
+        },
+        extraLib: `
+/**
+* Error object
+*/
+declare const error: {
+	message: string
+	name: string
+	stack: string
+}
+
+/**
+* result by id
+*/
+declare const results = ${JSON.stringify(priorIds)}
+
+/**
+* flow input as an object
+*/
+declare const flow_input = ${JSON.stringify(flowInput)};
+		`
+    };
+}
 export function getStepPropPicker(flowState, parentModule, previousModule, id, flow, args, include_node) {
     const flowInput = getFlowInput(dfs(parentModule?.id, flow), flowState, args, flow.schema);
     const previousIds = getPreviousIds(id, flow, include_node);

package/package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -10,6 +10,7 @@ import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
 export let pickableProperties;
 export let result = undefined;
+export let flow_input = undefined;
 export let error = false;
 export let displayContext = true;
 export let notSelectable = false;
@@ -52,6 +53,7 @@ setContext('PropPickerWrapper', {
 			{#if result}
 				<PropPickerResult
 					{result}
+					{flow_input}
 					on:select={({ detail }) => {
 						if (!notSelectable && !$propPickerConfig) {
 							sendUserToast('Set cursor within an input or click on the plug first', true)

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

@@ -17,6 +17,7 @@ declare const __propDef: {
     props: {
         pickableProperties: PickableProperties | undefined;
         result?: any;
+        flow_input?: any;
         error?: boolean | undefined;
         displayContext?: boolean | undefined;
         notSelectable?: boolean | undefined;

package/package/components/flows/types.d.ts

@@ -29,5 +29,5 @@ export type FlowEditorContext = {
     testStepStore: Writable<Record<string, any>>;
     saveDraft: () => void;
     initialPath: string;
-    flowInputsStore: Writable<FlowInput | undefined>;
+    flowInputsStore: Writable<FlowInput>;
 };

package/package/components/graph/FlowGraph.svelte

@@ -54,6 +54,7 @@ $: {
 }
 $: rebuildOnChange && triggerRebuild();
 let oldRebuildOnChange = rebuildOnChange ? JSON.parse(JSON.stringify(rebuildOnChange)) : undefined;
+let darkMode = false;
 function triggerRebuild() {
     if (!deepEqual(oldRebuildOnChange, rebuildOnChange)) {
         oldRebuildOnChange = JSON.parse(JSON.stringify(rebuildOnChange));
@@ -75,12 +76,12 @@ async function createGraph() {
             return;
         }
         nestedNodes = nodes = [];
-        nestedNodes.push(createVirtualNode(getParentIds(), 'Input', modules, undefined, undefined, 0, 0, true, undefined, undefined, 'Input'));
+        nestedNodes.push(createVirtualNode(getParentIds(), 'Input', modules, undefined, undefined, 0, 0, true, undefined, undefined, 'Input', undefined, undefined));
         modules.forEach((m, i) => {
             const item = getConvertedFlowModule(m, undefined, undefined, 0, i + 1 == modules?.length, modules);
             item && nestedNodes.push(item);
         });
-        nestedNodes.push(createVirtualNode(getParentIds(), 'Result', undefined, undefined, undefined, 0, modules.length, true, undefined, undefined, undefined));
+        nestedNodes.push(createVirtualNode(getParentIds(), 'Result', undefined, undefined, undefined, 0, modules.length, true, undefined, undefined, undefined, success == undefined ? undefined : success ? 'Success' : 'Failure', undefined));
         if (!flowModuleStates) {
             if (failureModule)
                 nestedNodes.push(createErrorHandler(failureModule));
@@ -89,7 +90,7 @@ async function createGraph() {
             Object.entries(flowModuleStates ?? [])
                 .filter(([k, v]) => k.startsWith('failure'))
                 .forEach(([k, v]) => {
-                nestedNodes.push(createErrorHandler({ id: k }, v.parent_module));
+                nestedNodes.push(createErrorHandler({ id: k }, v.parent_module, k));
             });
         }
         const flatNodes = flattenNestedNodes(nestedNodes);
@@ -109,7 +110,8 @@ async function createGraph() {
                         id: `dep-${pid}-${$selectedId}`,
                         source: pid,
                         target: $selectedId,
-                        labelBgColor: 'white',
+                        labelBgColor: darkMode ? '#999' : 'white',
+                        edgeColor: darkMode ? 'white' : 'black',
                         arrow: false,
                         animate: true,
                         noHandle: true,
@@ -124,7 +126,8 @@ async function createGraph() {
                         id: `dep-${pid}-${$selectedId}`,
                         source: $selectedId,
                         target: pid,
-                        labelBgColor: 'white',
+                        labelBgColor: darkMode ? '#999' : 'white',
+                        edgeColor: darkMode ? 'white' : 'black',
                         arrow: false,
                         animate: true,
                         noHandle: true,
@@ -169,7 +172,7 @@ function getConvertedFlowModule(module, parent, edgeLabel, loopDepth, insertable
         }));
         return flowModuleToBranch(module, modules, branches, [], parent, loopDepth, true);
     }
-    return flowModuleToNode(parentIds, module, edgeLabel, undefined, loopDepth, insertableEnd, false, modules, wrapper);
+    return flowModuleToNode(parentIds, module, edgeLabel, undefined, loopDepth, insertableEnd, false, modules, wrapper, undefined);
 }
 function getParentIds(items = undefined) {
     if (typeof items == 'string') {
@@ -190,18 +193,11 @@ function getParentIds(items = undefined) {
     }
     return [];
 }
-function getResultColor() {
-    const isDark = document.documentElement.classList.contains('dark');
-    switch (success) {
-        case true:
-            return getStateColor('Success');
-        case false:
-            return getStateColor('Failure');
-        default:
-            return isDark ? '#2e3440' : '#fff';
+function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, insertableEnd, branchable, modules, wrapper, flowJobs) {
+    let type = flowModuleStates?.[mod.id]?.type;
+    if (!type && flowJobs) {
+        type = 'InProgress';
     }
-}
-function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, insertableEnd, branchable, modules, wrapper = undefined) {
     return {
         type: 'node',
         id: mod.id,
@@ -217,12 +213,13 @@ function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, inse
                     branchable,
                     retries: flowModuleStates?.[mod.id]?.retries,
                     duration_ms: flowModuleStates?.[mod.id]?.duration_ms,
-                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
-                    annotation,
+                    bgColor: getStateColor(type, darkMode),
+                    annotation: annotation,
                     modules,
                     moving,
                     disableAi,
-                    wrapperId: wrapper?.id
+                    wrapperId: wrapper?.id,
+                    flowJobs
                 },
                 cb: (e, detail) => {
                     if (e == 'delete') {
@@ -245,6 +242,9 @@ function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, inse
                     else if (e == 'move') {
                         dispatch('move', { module: mod, modules });
                     }
+                    else if (e == 'selectedIteration') {
+                        dispatch('selectedIteration', { ...detail, moduleId: mod.id });
+                    }
                 }
             }
         },
@@ -258,39 +258,69 @@ function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, inse
     };
 }
 function flowModuleToLoop(modules, module, parent, loopDepth) {
+    let state = flowModuleStates?.[module.id];
     const loop = {
         type: 'loop',
         items: [
-            flowModuleToNode(getParentIds(parent), module, undefined, flowModuleStates?.[module.id]?.iteration
-                ? 'Iteration ' +
-                    flowModuleStates?.[module.id]?.iteration +
-                    '/' +
-                    (flowModuleStates?.[module.id]?.iteration_total ?? '?')
-                : '', loopDepth, false, false, modules)
+            flowModuleToNode(getParentIds(parent), module, undefined, state?.flow_jobs
+                ? 'iterations ' + state?.flow_jobs?.length + '/' + (state?.iteration_total ?? '?')
+                : '', loopDepth, false, false, modules, undefined, state?.flow_jobs
+                ? {
+                    flowJobs: state?.flow_jobs,
+                    selected: state?.selectedForloopIndex ?? -1,
+                    flowJobsSuccess: state?.flow_jobs_success
+                }
+                : undefined)
         ]
     };
     const innerModules = module.value.modules;
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Do one iteration`, innerModules, undefined, 1000, loopDepth + 1, 0, false, undefined, undefined, undefined, true, module));
+    let borderStatus = undefined;
+    let success = state?.flow_jobs_success?.[state?.selectedForloopIndex ?? 0];
+    if (success != undefined) {
+        borderStatus = success ? 'Success' : 'Failure';
+    }
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Do one iteration`, innerModules, undefined, 1000, loopDepth + 1, 0, false, undefined, undefined, undefined, undefined, borderStatus, true, module));
     innerModules.forEach((innerModule, i) => {
         const item = getConvertedFlowModule(innerModule, loop.items, undefined, loopDepth + 1, i + 1 == innerModules?.length, innerModules, module);
         item && loop.items.push(item);
     });
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect result of each iteration`, modules, undefined, 1000, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id, undefined));
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect result of each iteration`, modules, undefined, 1000, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id, undefined, undefined, flowModuleStates?.[module.id]?.type));
     return loop;
 }
 function flowModuleToBranch(module, modules, branches, edgesLabel, parent = undefined, loopDepth, branchall) {
     const wrapper = JSON.parse(JSON.stringify(module));
-    const node = flowModuleToNode(getParentIds(parent), module, undefined, undefined, loopDepth, false, true, modules);
+    const node = flowModuleToNode(getParentIds(parent), module, undefined, undefined, loopDepth, false, true, modules, undefined, undefined);
     const bitems = [];
     const branchParent = [node.id];
     if (branches.length == 0) {
         bitems.push([
-            createVirtualNode(branchParent, 'No branches', undefined, undefined, 0, loopDepth, 0, false, undefined, undefined, undefined)
+            createVirtualNode(branchParent, 'No branches', undefined, undefined, 0, loopDepth, 0, false, undefined, undefined, undefined, undefined, undefined)
         ]);
     }
     branches.forEach(({ summary, modules, removable }, i) => {
         const items = [];
-        items.push(createVirtualNode(branchParent, summary, modules, edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined, undefined, undefined, false, wrapper));
+        let borderStatus = undefined;
+        if (module.value.type == 'branchall' || module.value.type == 'forloopflow') {
+            let flow_jobs_success = flowModuleStates?.[module.id]?.flow_jobs_success;
+            if (!flow_jobs_success) {
+                borderStatus = 'WaitingForPriorSteps';
+            }
+            else {
+                let status = flow_jobs_success?.[i];
+                if (status == undefined) {
+                    borderStatus = 'WaitingForExecutor';
+                }
+                else {
+                    borderStatus = status ? 'Success' : 'Failure';
+                }
+            }
+        }
+        else if (module.value.type == 'branchone') {
+            if (flowModuleStates?.[module.id]?.branchChosen == i) {
+                borderStatus = flowModuleStates?.[module.id]?.type;
+            }
+        }
+        items.push(createVirtualNode(branchParent, summary, modules, edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined, undefined, undefined, undefined, borderStatus, false, wrapper));
         if (modules.length) {
             modules.forEach((innerModule, j) => {
                 const item = getConvertedFlowModule(innerModule, items, undefined, loopDepth, j + 1 == modules?.length, modules, module);
@@ -302,7 +332,7 @@ function flowModuleToBranch(module, modules, branches, edgesLabel, parent = unde
     return {
         type: 'branch',
         node,
-        nodeEnd: createVirtualNode(bitems.map((i) => getParentIds(i)).flat(), branchall ? 'Collect result of each branch' : 'Result of the chosen branch', modules, undefined, 0, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id, undefined),
+        nodeEnd: createVirtualNode(bitems.map((i) => getParentIds(i)).flat(), branchall ? 'Collect result of each branch' : 'Result of the chosen branch', modules, undefined, 0, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id, undefined, undefined, flowModuleStates?.[module.id]?.type),
         items: bitems
     };
 }
@@ -418,8 +448,15 @@ function createEdges(nodes) {
     });
     return edges;
 }
-function createVirtualNode(parentIds, label, modules, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid, fixed_id, center = true, wrapperNode = undefined) {
+function createVirtualNode(parentIds, label, modules, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid, fixed_id, module_status, borderStatus, center = true, wrapperNode = undefined) {
     const id = fixed_id ?? -idGenerator.next().value - 2 + (offset ?? 0);
+    let bgColor;
+    if (module_status) {
+        bgColor = getStateColor(module_status, darkMode);
+    }
+    else {
+        bgColor = darkMode ? '#2e3440' : '#dfe6ee';
+    }
     return {
         type: 'node',
         id: id.toString(),
@@ -436,11 +473,10 @@ function createVirtualNode(parentIds, label, modules, edgeLabel, offset, loopDep
                     label,
                     insertable,
                     modules,
-                    bgColor: label == 'Result'
-                        ? getResultColor()
-                        : document.documentElement.classList.contains('dark')
-                            ? '#2e3440'
-                            : '#dfe6ee',
+                    bgColor,
+                    borderColor: borderStatus
+                        ? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
+                        : undefined,
                     selected: $selectedId == label,
                     index,
                     selectable,
@@ -476,8 +512,10 @@ function createVirtualNode(parentIds, label, modules, edgeLabel, offset, loopDep
         loopDepth
     };
 }
-function createErrorHandler(mod, parent_module) {
-    const nId = (-idGenerator.next().value - 1 + 1100).toString();
+function createErrorHandler(mod, parent_module, customNodeId) {
+    // When needed, we can add a custom node id to the error handler
+    // used for nested error handlers in for loop for example
+    const nId = customNodeId ?? 'failure';
     parent_module && (errorHandlers[parent_module] = nId);
     let label = 'Error handler';
     return {
@@ -491,7 +529,7 @@ function createErrorHandler(mod, parent_module) {
                     label,
                     insertable: false,
                     modules: undefined,
-                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
+                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type, darkMode),
                     selected: $selectedId == mod.id,
                     index: 0,
                     selectable: true,
@@ -522,7 +560,7 @@ onMount(() => {
 });
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver bind:darkMode on:change={onThemeChange} />
 
 <!-- {JSON.stringify(flowModuleStates)} -->
 <div

package/package/components/graph/FlowGraph.svelte.d.ts

@@ -28,6 +28,7 @@ declare const __propDef: {
         insert: CustomEvent<any>;
         newBranch: CustomEvent<any>;
         move: CustomEvent<any>;
+        selectedIteration: CustomEvent<any>;
         deleteBranch: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;