windmill-components 1.522.0 → 1.531.0

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

@@ -1,5 +1,5 @@
 <script lang="ts">import BarsStaggered from '../../icons/BarsStaggered.svelte';
-import { CheckCircle2, ChevronRight, Code, GitBranch, Repeat, Square, Zap } from 'lucide-svelte';
+import { BotIcon, CheckCircle2, ChevronRight, Code, GitBranch, Repeat, Square, Zap } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 export let label;
@@ -51,6 +51,9 @@ const dispatch = createEventDispatcher();
 		{:else if label === 'Branch to all'}
 			<GitBranch size={14} />
 			Branch to all
+		{:else if label === 'AI Agent'}
+			<BotIcon size={14} />
+			AI Agent
 		{/if}
 	</span>
 	{#if returnIcon && selected}

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

@@ -5,13 +5,14 @@ import { DollarSign, Pencil, RefreshCw, SquareFunction } from 'lucide-svelte';
 let { inputTransform, id, onEditInput } = $props();
 const { flowStore, flowStateStore, testSteps, previewArgs } = getContext('FlowEditorContext') || {};
 onMount(() => {
-    testSteps?.updateStepArgs(id, $flowStateStore, flowStore?.val, previewArgs?.val);
+    testSteps?.updateStepArgs(id, flowStateStore?.val, flowStore?.val, previewArgs?.val);
 });
-const input = $derived(testSteps?.getStepArgs(id)?.value);
+const input = $derived(testSteps?.getStepArgs(id));
 </script>
 
 <div class="p-4 pr-6 h-full overflow-y-auto">
-	<ObjectViewer json={input} {inputTransform} {metaData} {editKey} />
+	<!-- {JSON.stringify({ inputTransform, input })} -->
+	<ObjectViewer json={input} {metaData} {editKey} />
 </div>
 
 {#snippet metaData(key: string)}
@@ -31,7 +32,7 @@ const input = $derived(testSteps?.getStepArgs(id)?.value);
 			{#if testSteps?.isArgManuallySet(id, key)}
 				<button
 					onclick={() => {
-						testSteps?.evalArg(id, key, $flowStateStore, flowStore?.val, previewArgs?.val)
+						testSteps?.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/OutputBadge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import { base } from '../../../base';
 import { ExternalLink } from 'lucide-svelte';
+import { emptyString } from '../../../utils';
 export let job = undefined;
 </script>
 
@@ -22,17 +23,18 @@ export let job = undefined;
 			)}
 			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}

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

@@ -329,6 +329,15 @@ 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}
 
 				{#if !disableMock && !isLoadingAndNotMock}
@@ -418,7 +427,7 @@ const copilot_fix_render = $derived(copilot_fix);
 			</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}

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

@@ -56,6 +56,6 @@ interface Props {
     onResetInitial?: () => void;
     customEmptyJobMessage?: string;
 }
-declare const OutputPickerInner: import("svelte").Component<Props, {}, "preview" | "forceJson" | "isLoading" | "mock" | "selectedJob" | "derivedHistoryOpen">;
+declare const OutputPickerInner: import("svelte").Component<Props, {}, "preview" | "forceJson" | "mock" | "isLoading" | "selectedJob" | "derivedHistoryOpen">;
 type OutputPickerInner = ReturnType<typeof OutputPickerInner>;
 export default OutputPickerInner;

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

@@ -1,13 +1,14 @@
 import type { FlowModule, OpenFlow } from '../../gen';
 import type { FlowState } from './flowState';
 import { type PickableProperties } from './previousResults';
-import { type ModuleArgs } from './utils';
 export declare class TestSteps {
     #private;
     constructor();
     setStepArgsManually(moduleId: string, args: Record<string, any>): void;
-    getStepArgs(moduleId: string): ModuleArgs | undefined;
+    getStepArgs(moduleId: string): Record<string, any> | undefined;
+    getStepInputArgs(moduleId: string, argName: string): any | undefined;
     setStepArgs(moduleId: string, args: Record<string, any>): void;
+    setStepInputArgs(moduleId: string, argName: string, value: any): void;
     getStepArg(moduleId: string, argName: string): any | undefined;
     setEvaluatedStepArg(moduleId: string, argName: string, value: any): void;
     isArgManuallySet(moduleId: string, argName: string): boolean;

package/package/components/flows/testSteps.svelte.js

@@ -5,40 +5,43 @@ export class TestSteps {
     #steps = $state({});
     constructor() { }
     setStepArgsManually(moduleId, args) {
-        if (!this.#steps[moduleId]) {
-            this.#steps[moduleId] = { value: {} };
-        }
-        this.#steps[moduleId].value = args;
+        this.#steps[moduleId] = args;
     }
     getStepArgs(moduleId) {
         return this.#steps[moduleId];
     }
+    getStepInputArgs(moduleId, argName) {
+        return this.#steps[moduleId]?.[argName];
+    }
     setStepArgs(moduleId, args) {
+        this.#steps[moduleId] = args;
+    }
+    setStepInputArgs(moduleId, argName, value) {
         if (!this.#steps[moduleId]) {
-            this.#steps[moduleId] = { value: {} };
+            this.#steps[moduleId] = {};
         }
-        this.#steps[moduleId].value = args;
+        this.#steps[moduleId][argName] = value;
     }
     getStepArg(moduleId, argName) {
         return this.#steps[moduleId]?.[argName];
     }
     setEvaluatedStepArg(moduleId, argName, value) {
         if (!this.#steps[moduleId]) {
-            this.#steps[moduleId] = { value: {} };
+            this.#steps[moduleId] = {};
         }
         if (!this.#stepsEvaluated[moduleId]) {
-            this.#stepsEvaluated[moduleId] = { value: {} };
+            this.#stepsEvaluated[moduleId] = {};
         }
-        this.#steps[moduleId].value[argName] = $state.snapshot(value);
-        this.#stepsEvaluated[moduleId].value[argName] = $state.snapshot(value);
+        this.#steps[moduleId][argName] = $state.snapshot(value);
+        this.#stepsEvaluated[moduleId][argName] = $state.snapshot(value);
     }
     isArgManuallySet(moduleId, argName) {
-        return (JSON.stringify(this.#steps[moduleId]?.value?.[argName]) !==
-            JSON.stringify(this.#stepsEvaluated[moduleId]?.value?.[argName]));
+        return (JSON.stringify(this.#steps[moduleId]?.[argName]) !==
+            JSON.stringify(this.#stepsEvaluated[moduleId]?.[argName]));
     }
     getManuallyEditedArgs(moduleId) {
         const manuallyEditedArgs = [];
-        const moduleArgs = this.#steps[moduleId]?.value ?? {};
+        const moduleArgs = this.#steps[moduleId] ?? {};
         Object.keys(moduleArgs).forEach((argName) => {
             if (this.isArgManuallySet(moduleId, argName)) {
                 manuallyEditedArgs.push(argName);
@@ -65,8 +68,8 @@ export class TestSteps {
         const stepPropPicker = getStepPropPicker(flowState, parentModule, previousModule, moduleId, flow, previewArgs, false);
         const pickableProperties = stepPropPicker.pickableProperties;
         const argSnapshot = $state.snapshot(evalValue(argName, modules[0], pickableProperties, false));
-        this.#stepsEvaluated[moduleId].value[argName] = argSnapshot;
-        this.#steps[moduleId].value[argName] = structuredClone(argSnapshot);
+        this.#stepsEvaluated[moduleId][argName] = argSnapshot;
+        this.#steps[moduleId][argName] = structuredClone(argSnapshot);
     }
     initializeFromSchema(mod, schema, pickableProperties) {
         const args = Object.fromEntries(Object.keys(schema.properties ?? {}).map((k) => [
@@ -75,20 +78,20 @@ export class TestSteps {
         ]));
         const manuallyEditedArgs = this.getManuallyEditedArgs(mod.id);
         if (!this.#steps[mod.id]) {
-            this.#steps[mod.id] = { value: {} };
+            this.#steps[mod.id] = {};
         }
         if (!this.#stepsEvaluated[mod.id]) {
-            this.#stepsEvaluated[mod.id] = { value: {} };
+            this.#stepsEvaluated[mod.id] = {};
         }
-        this.#stepsEvaluated[mod.id].value = $state.snapshot(args);
+        this.#stepsEvaluated[mod.id] = $state.snapshot(args);
         // Preserve manually edited args
         const argsSnapshot = $state.snapshot(args);
         Object.keys(argsSnapshot).forEach((key) => {
             if (manuallyEditedArgs.includes(key)) {
-                argsSnapshot[key] = this.#steps[mod.id]?.value?.[key];
+                argsSnapshot[key] = this.#steps[mod.id]?.[key];
             }
         });
-        this.#steps[mod.id].value = argsSnapshot;
+        this.#steps[mod.id] = argsSnapshot;
     }
     updateStepArgs(id, flowState, flow, previewArgs) {
         if (!flowState || !flow) {
@@ -112,11 +115,11 @@ export class TestSteps {
             return;
         }
         const nargs = {};
-        Object.keys(this.#stepsEvaluated[moduleId]?.value ?? {}).forEach((key) => {
+        Object.keys(this.#stepsEvaluated[moduleId] ?? {}).forEach((key) => {
             if (keys.includes(key)) {
-                nargs[key] = this.#stepsEvaluated[moduleId]?.value?.[key];
+                nargs[key] = this.#stepsEvaluated[moduleId]?.[key];
             }
         });
-        this.#stepsEvaluated[moduleId].value = nargs;
+        this.#stepsEvaluated[moduleId] = nargs;
     }
 }

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

@@ -56,7 +56,7 @@ export type FlowEditorContext = {
     pathStore: Writable<string>;
     flowStore: StateStore<ExtendedOpenFlow>;
     flowInputEditorState: Writable<FlowInputEditorState>;
-    flowStateStore: Writable<FlowState>;
+    flowStateStore: StateStore<FlowState>;
     testSteps: TestSteps;
     saveDraft: () => void;
     initialPathStore: Writable<string>;

package/package/components/flows/utils.d.ts

@@ -1,13 +1,9 @@
 import { type FlowModule, type Job, type RestartedFrom, type OpenFlow } from '../../gen';
-import { type Writable } from 'svelte/store';
 import type { FlowModuleState } from './flowState';
 import { type PickableProperties } from './previousResults';
 import type { ExtendedOpenFlow } from './types';
 import type { GraphModuleState } from '../graph';
 import type { ModulesTestStates } from '../modulesTest.svelte';
-export type ModuleArgs = {
-    value: Record<string, any>;
-};
 export declare function evalValue(k: string, mod: FlowModule, pickableProperties: PickableProperties | undefined, showError: boolean): any;
 export declare function filteredContentForExport(flow: ExtendedOpenFlow): {
     summary: string;
@@ -40,4 +36,6 @@ export declare function checkIfParentLoop(flowStore: ExtendedOpenFlow, modId: st
  * Extracts job information and converts it to GraphModuleState format
  * for graph rendering
  */
-export declare function updateDerivedModuleStatesFromTestJobs(moduleId: string | undefined, moduleTestStates: ModulesTestStates | undefined, moduleStates: Writable<Record<string, GraphModuleState>> | undefined): void;
+export declare function updateDerivedModuleStatesFromTestJobs(moduleId: string | undefined, moduleTestStates: ModulesTestStates | undefined, moduleStates: Record<string, GraphModuleState> | undefined): {
+    [x: string]: GraphModuleState;
+} | undefined;

package/package/components/flows/utils.js

@@ -181,9 +181,8 @@ export function updateDerivedModuleStatesFromTestJobs(moduleId, moduleTestStates
             };
         }
     }
-    // Update the store with test job states
-    moduleStates.update((currentStates) => ({
-        ...currentStates,
+    return {
+        ...moduleStates,
         ...newStates
-    }));
+    };
 }

package/package/components/git_sync/GitSyncContext.svelte.js

@@ -386,7 +386,8 @@ export function createGitSyncContext(workspace) {
                 workspace,
                 path: hubPaths.gitSyncTest,
                 requestBody: {
-                    repo_url_resource_path: repo.git_repo_resource_path
+                    repo_url_resource_path: repo.git_repo_resource_path,
+                    init: repo.isUnsavedConnection || false
                 },
                 skipPreprocessor: true
             });

package/package/components/graph/FlowGraphV2.svelte

@@ -4,7 +4,7 @@ import { getContext, onDestroy, setContext, tick, untrack } from 'svelte';
 import { get, writable } from 'svelte/store';
 import '@xyflow/svelte/dist/base.css';
 import { SvelteFlow, ConnectionLineType, Controls, ControlButton, SvelteFlowProvider } from '@xyflow/svelte';
-import { graphBuilder, isTriggerStep } from './graphBuilder.svelte';
+import { graphBuilder, isTriggerStep, topologicalSort } from './graphBuilder.svelte';
 import ModuleNode from './renderers/nodes/ModuleNode.svelte';
 import InputNode from './renderers/nodes/InputNode.svelte';
 import BranchAllStart from './renderers/nodes/BranchAllStart.svelte';
@@ -29,16 +29,19 @@ import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte';
 import BranchOneEndNode from './renderers/nodes/branchOneEndNode.svelte';
 import { workspaceStore } from '../../stores';
 import SubflowBound from './renderers/nodes/SubflowBound.svelte';
-import { deepEqual } from 'fast-equals';
 import ViewportResizer from './ViewportResizer.svelte';
 import AssetNode, { computeAssetNodes } from './renderers/nodes/AssetNode.svelte';
 import AssetsOverflowedNode from './renderers/nodes/AssetsOverflowedNode.svelte';
+import AiToolNode, { computeAIToolNodes } from './renderers/nodes/AIToolNode.svelte';
+import NewAiToolNode from './renderers/nodes/NewAIToolNode.svelte';
+import { ChangeTracker } from '../../svelte5Utils.svelte';
+import { deepEqual } from 'fast-equals';
 let useDataflow = writable(false);
 const triggerContext = getContext('TriggerContext');
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), flowHasChanged = false } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false } = $props();
 setContext('FlowGraphContext', { selectedId, useDataflow });
 if (triggerContext && allowSimplifiedPoll) {
     if (isSimplifiable(modules)) {
@@ -63,9 +66,11 @@ function onModulesChange(modules) {
 let lastNodes = undefined;
 function layoutNodes(nodes) {
     let lastResult = lastNodes?.[1];
-    if (lastResult && nodes === lastNodes?.[0]) {
+    if (lastResult && deepEqual(nodes, lastNodes?.[0])) {
+        console.debug('layoutNodes', 'same nodes');
         return lastResult;
     }
+    console.debug('layoutNodes', nodes.length);
     let seenId = [];
     for (const n of nodes) {
         if (seenId.includes(n.id)) {
@@ -77,7 +82,7 @@ function layoutNodes(nodes) {
     const nodes2 = nodes.map((n) => {
         return { ...n, position: { x: 0, y: 0 } };
     });
-    for (const n of nodes.reverse()) {
+    for (const n of topologicalSort(nodes)) {
         const endId = n.id + '-end';
         if (nodeWidths[endId] != undefined) {
             nodeWidths[n.id] = Math.max(nodeWidths[n.id] ?? 0, nodeWidths[endId]);
@@ -111,12 +116,11 @@ function layoutNodes(nodes) {
     }
     const yOffset = insertable ? 100 : 0;
     const newNodes = dag.descendants().map((des) => ({
-        ...des.data,
         id: des.data.id,
         position: {
             x: des.x
                 ? // @ts-ignore
-                    (des.data.data.offset ?? 0) +
+                    (des.data.offset ?? 0) +
                         // @ts-ignore
                         des.x +
                         (fullSize ? fullWidth : width) / 2 -
@@ -195,14 +199,7 @@ let eventHandler = {
         onHideJobStatus?.();
     }
 };
-let lastModules = $state.snapshot(modules);
-let moduleCounter = $state(0);
-function onModulesChange2(modules) {
-    if (!deepEqual(modules, lastModules)) {
-        lastModules = $state.snapshot(modules);
-        moduleCounter++;
-    }
-}
+let moduleTracker = new ChangeTracker($state.snapshot(modules));
 let nodes = $state.raw([]);
 let edges = $state.raw([]);
 let height = $state(0);
@@ -220,9 +217,29 @@ async function updateStores() {
     if (graph.error) {
         return;
     }
-    let newGraph = graph;
-    newGraph.nodes.sort((a, b) => b.id.localeCompare(a.id));
-    [nodes, edges] = computeAssetNodes(layoutNodes(newGraph.nodes), newGraph.edges);
+    // console.log('compute')
+    let layoutedNodes = layoutNodes(Object.values(graph.nodes).map((n) => ({
+        id: n.id,
+        parentIds: n.parentIds,
+        offset: n.data.offset ?? 0
+    })));
+    let newNodes = layoutedNodes.map((n) => ({ ...n, ...graph.nodes[n.id] }));
+    let assetNodesResult = computeAssetNodes(newNodes.map((n) => ({
+        data: { assets: n.data?.assets },
+        id: n.id,
+        position: n.position
+    })));
+    newNodes = newNodes.map((n) => ({
+        ...n,
+        position: assetNodesResult.newNodePositions[n.id]
+    }));
+    let aiToolNodesResult = computeAIToolNodes(newNodes, eventHandler, insertable, flowModuleStates);
+    nodes = [
+        ...newNodes.map((n) => ({ ...n, position: aiToolNodesResult.newNodePositions[n.id] })),
+        ...assetNodesResult.newAssetNodes,
+        ...aiToolNodesResult.toolNodes
+    ];
+    edges = [...assetNodesResult.newAssetEdges, ...aiToolNodesResult.toolEdges, ...graph.edges];
     await tick();
     height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight);
 }
@@ -242,7 +259,9 @@ const nodeTypes = {
     noBranch: NoBranchNode,
     trigger: TriggersNode,
     asset: AssetNode,
-    assetsOverflowed: AssetsOverflowedNode
+    assetsOverflowed: AssetsOverflowedNode,
+    aiTool: AiToolNode,
+    newAiTool: NewAiToolNode
 };
 const edgeTypes = {
     edge: BaseEdge,
@@ -261,15 +280,16 @@ $effect(() => {
 });
 $effect(() => {
     readFieldsRecursively(modules);
-    untrack(() => onModulesChange2(modules));
+    untrack(() => moduleTracker.track($state.snapshot(modules)));
 });
 let graph = $derived.by(() => {
-    moduleCounter;
+    moduleTracker.counter;
     return graphBuilder(untrack(() => modules), {
         disableAi,
         insertable,
-        flowModuleStates,
-        selectedId: $selectedId,
+        flowModuleStates: untrack(() => flowModuleStates),
+        testModuleStates: untrack(() => testModuleStates),
+        selectedId: untrack(() => $selectedId),
         path,
         newFlow,
         cache,
@@ -283,7 +303,7 @@ let graph = $derived.by(() => {
         suspendStatus,
         flowHasChanged,
         additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
-    }, failureModule, preprocessorModule, eventHandler, success, $useDataflow, $selectedId, moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
+    }, untrack(() => failureModule), untrack(() => preprocessorModule), eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });
 $effect(() => {
     ;

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

@@ -3,6 +3,7 @@ import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
 import '@xyflow/svelte/dist/base.css';
 import { type InlineScript, type InsertKind, type onSelectedIteration } from './graphBuilder.svelte';
+import type { ModulesTestStates } from '../modulesTest.svelte';
 interface Props {
     success?: boolean | undefined;
     modules?: FlowModule[] | undefined;
@@ -12,6 +13,7 @@ interface Props {
     maxHeight?: number | undefined;
     notSelectable?: boolean;
     flowModuleStates?: Record<string, GraphModuleState> | undefined;
+    testModuleStates?: ModulesTestStates;
     selectedId?: Writable<string | undefined>;
     path?: string | undefined;
     newFlow?: boolean;
@@ -33,10 +35,10 @@ interface Props {
     individualStepTests?: boolean;
     flowJob?: Job | undefined;
     showJobStatus?: boolean;
-    suspendStatus?: Writable<Record<string, {
+    suspendStatus?: Record<string, {
         job: Job;
         nb: number;
-    }>>;
+    }>;
     onDelete?: (id: string) => void;
     onInsert?: (detail: {
         sourceId?: string;
@@ -48,6 +50,7 @@ interface Props {
         index: number;
         detail: string;
         isPreprocessor?: boolean;
+        agentId?: string;
         inlineScript?: InlineScript;
         script?: {
             path: string;