windmill-components 1.522.0 → 1.531.1

package/package/components/flows/flowInfers.js

@@ -41,6 +41,84 @@ export async function loadSchemaFromModule(module) {
             schema: schema ?? emptySchema()
         };
     }
+    else if (mod.type === 'aiagent') {
+        const schema = {
+            $schema: 'https://json-schema.org/draft/2020-12/schema',
+            properties: {
+                provider: {
+                    type: 'object',
+                    oneOf: [
+                        {
+                            type: 'object',
+                            title: 'OpenAI',
+                            properties: {
+                                kind: { type: 'string', enum: ['OpenAI'] },
+                                resource: {
+                                    type: 'object',
+                                    format: 'resource-openai'
+                                },
+                                model: {
+                                    type: 'string',
+                                    enum: ['gpt-5', 'gpt-5-mini', 'gpt-5-nano', 'gpt-4.1', 'gpt-4o', 'gpt-4o-mini']
+                                }
+                            },
+                            required: ['kind', 'resource', 'model']
+                        },
+                        {
+                            type: 'object',
+                            title: 'Anthropic',
+                            properties: {
+                                kind: { type: 'string', enum: ['Anthropic'] },
+                                resource: {
+                                    type: 'object',
+                                    format: 'resource-anthropic'
+                                },
+                                model: {
+                                    type: 'string',
+                                    enum: ['claude-sonnet-4-0', 'claude-3-7-sonnet-latest', 'claude-3-5-haiku-latest']
+                                }
+                            },
+                            required: ['kind', 'resource', 'model']
+                        }
+                    ]
+                },
+                system_prompt: {
+                    type: 'string',
+                    default: 'You are a helpful assistant'
+                },
+                user_message: {
+                    type: 'string'
+                },
+                max_completion_tokens: {
+                    type: 'number'
+                },
+                temperature: {
+                    type: 'number'
+                }
+            },
+            required: ['provider', 'model', 'system_prompt', 'user_message'],
+            type: 'object',
+            order: [
+                'provider',
+                'model',
+                'system_prompt',
+                'user_message',
+                'max_completion_tokens',
+                'temperature'
+            ]
+        };
+        let input_transforms = mod.input_transforms ?? {};
+        return {
+            input_transforms: Object.keys(schema?.properties ?? {}).reduce((accu, key) => {
+                accu[key] = input_transforms[key] ?? {
+                    type: 'static',
+                    value: undefined
+                };
+                return accu;
+            }, {}),
+            schema
+        };
+    }
     return {
         input_transforms: {},
         schema: emptySchema()

package/package/components/flows/flowState.d.ts

@@ -1,12 +1,11 @@
 import type { Schema } from '../../common';
 import type { Flow } from '../../gen';
-import type { Writable } from 'svelte/store';
+import type { StateStore } from '../../utils';
 export type FlowModuleState = {
     schema?: Schema;
     previewResult?: any;
     previewArgs?: any;
     previewJobId?: string;
-    previewWorkspaceId?: string;
     previewSuccess?: boolean;
 };
 export type FlowState = Record<string, FlowModuleState>;
@@ -15,4 +14,4 @@ export type FlowState = Record<string, FlowModuleState>;
  * It contains data loaded that are not contained in a Flow object i.e. schemas.
  * We also hold the data of the results of a test job, ran by the user.
  */
-export declare function initFlowState(flow: Flow, flowStateStore: Writable<FlowState>): Promise<void>;
+export declare function initFlowState(flow: Flow, flowStateStore: StateStore<FlowState>): Promise<void>;

package/package/components/flows/flowState.js

@@ -11,10 +11,10 @@ export async function initFlowState(flow, flowStateStore) {
     const failureModule = flow.value.failure_module
         ? await loadFlowModuleState(flow.value.failure_module)
         : emptyFlowModuleState();
-    flowStateStore.set({
+    flowStateStore.val = {
         ...modulesState,
         failure: failureModule
-    });
+    };
 }
 /**
  * mapFlowModule recursively explore the flow, following deeply nested loop and branches modules

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

@@ -1,6 +1,5 @@
 import type { Schema } from '../../common';
 import { type FlowModule, type PathFlow, type PathScript, type RawScript, type OpenFlow, type Script } from '../../gen';
-import { type Writable } from 'svelte/store';
 import type { FlowModuleState, FlowState } from './flowState';
 import type { ExtendedOpenFlow } from './types';
 import { type StateStore } from '../../utils';
@@ -16,6 +15,7 @@ export declare function createLoop(id: string, enabledAi: boolean): Promise<[Flo
 export declare function createWhileLoop(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranches(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranchAll(id: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createAiAgent(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createFlow(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function fork(flowModule: FlowModule): Promise<[FlowModule & {
     value: RawScript;
@@ -24,16 +24,16 @@ export declare function emptyModule(flowState: FlowState, fullFlow: OpenFlow, fl
 export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema | undefined, flowPath: string): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
-export declare function deleteFlowStateById(id: string, flowStateStore: Writable<FlowState>): void;
+export declare function deleteFlowStateById(id: string, flowStateStore: StateStore<FlowState>): void;
 export declare function sliceModules(modules: FlowModule[], upTo: number, idOrders: string[]): FlowModule[];
-export declare function insertNewPreprocessorModule(flowStore: StateStore<ExtendedOpenFlow>, flowStateStore: Writable<FlowState>, inlineScript?: {
+export declare function insertNewPreprocessorModule(flowStore: StateStore<ExtendedOpenFlow>, flowStateStore: StateStore<FlowState>, inlineScript?: {
     language: RawScript['language'];
 }, wsScript?: {
     path: string;
     summary: string;
     hash: string | undefined;
 }): Promise<void>;
-export declare function insertNewFailureModule(flowStore: StateStore<ExtendedOpenFlow>, flowStateStore: Writable<FlowState>, inlineScript?: {
+export declare function insertNewFailureModule(flowStore: StateStore<ExtendedOpenFlow>, flowStateStore: StateStore<FlowState>, inlineScript?: {
     language: RawScript['language'];
     subkind: 'pgsql' | 'flow';
     instructions?: string;

package/package/components/flows/flowStateUtils.svelte.js

@@ -14,7 +14,8 @@ export async function loadFlowModuleState(flowModule) {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
         if (flowModule.value.type == 'script' ||
             flowModule.value.type == 'rawscript' ||
-            flowModule.value.type == 'flow') {
+            flowModule.value.type == 'flow' ||
+            flowModule.value.type == 'aiagent') {
             flowModule.value.input_transforms = input_transforms;
         }
         return {
@@ -109,6 +110,15 @@ export async function createBranchAll(id) {
     const flowModuleState = await loadFlowModuleState(branchesFlowModules);
     return [branchesFlowModules, flowModuleState];
 }
+export async function createAiAgent(id) {
+    const aiAgentFlowModules = {
+        id,
+        value: { type: 'aiagent', tools: [], input_transforms: {} },
+        summary: 'AI Agent'
+    };
+    const flowModuleState = await loadFlowModuleState(aiAgentFlowModules);
+    return [aiAgentFlowModules, flowModuleState];
+}
 export async function createFlow(id) {
     const flowFlowModules = {
         id,
@@ -181,10 +191,7 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema, f
     return pickScript(availablePath, flowModule.summary ?? '', flowModule.id, hash);
 }
 export function deleteFlowStateById(id, flowStateStore) {
-    flowStateStore.update((fss) => {
-        delete fss[id];
-        return fss;
-    });
+    delete flowStateStore.val[id];
 }
 export function sliceModules(modules, upTo, idOrders) {
     return modules
@@ -227,10 +234,7 @@ export async function insertNewPreprocessorModule(flowStore, flowStateStore, inl
         [module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash);
     }
     flowStore.val.value.preprocessor_module = module;
-    flowStateStore.update((fss) => {
-        fss[module.id] = state;
-        return fss;
-    });
+    flowStateStore.val[module.id] = state;
 }
 export async function insertNewFailureModule(flowStore, flowStateStore, inlineScript, wsScript) {
     let module = {
@@ -250,8 +254,5 @@ export async function insertNewFailureModule(flowStore, flowStateStore, inlineSc
         [module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash);
     }
     flowStore.val.value.failure_module = module;
-    flowStateStore.update((fss) => {
-        fss[module.id] = state;
-        return fss;
-    });
+    flowStateStore.val[module.id] = state;
 }

package/package/components/flows/flowStore.d.ts

@@ -1,10 +1,9 @@
 import type { Flow, OpenFlow } from '../../gen';
-import { type Writable } from 'svelte/store';
 import { type FlowState } from './flowState';
 import type { StateStore } from '../../utils';
 export type FlowMode = 'push' | 'pull';
-export declare const importFlowStore: Writable<Flow | undefined>;
-export declare function initFlow(flow: Flow, flowStore: StateStore<Flow>, flowStateStore: Writable<FlowState>): Promise<void>;
+export declare const importFlowStore: import("svelte/store").Writable<Flow | undefined>;
+export declare function initFlow(flow: Flow, flowStore: StateStore<Flow>, flowStateStore: StateStore<FlowState>): Promise<void>;
 export declare function copyFirstStepSchema(flowState: FlowState, flowStore: StateStore<OpenFlow>): Promise<void>;
 export declare function getFirstStepSchema(flowState: FlowState, flow: OpenFlow): Promise<{
     schema: import("../../common").Schema | undefined;
@@ -14,7 +13,7 @@ export declare function getFirstStepSchema(flowState: FlowState, flow: OpenFlow)
         value: {
             language?: "deno" | "bun" | "python3" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "php" | undefined;
             path?: string | undefined;
-            type: "rawscript" | "script" | "flow" | "forloopflow" | "whileloopflow" | "branchone" | "branchall" | "identity";
+            type: "rawscript" | "script" | "flow" | "forloopflow" | "whileloopflow" | "branchone" | "branchall" | "aiagent" | "identity";
         };
     };
     connectFirstNode: () => void;

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -5,7 +5,7 @@ import { createEventDispatcher, tick } from 'svelte';
 import { getContext } from 'svelte';
 import { Play } from 'lucide-svelte';
 import { aiChatManager } from '../../copilot/chat/AIChatManager.svelte';
-let { loading = false, onRunPreview, onJobDone } = $props();
+let { loading = false, onRunPreview, onJobDone, localModuleStates = $bindable({}) } = $props();
 const { selectedId } = getContext('FlowEditorContext');
 let flowPreviewContent = $state(undefined);
 let preventEscape = $state(false);
@@ -134,6 +134,7 @@ export function getFlowPreviewContent() {
 			bind:selectedJobStepType
 			bind:branchOrIterationN
 			bind:rightColumnSelect
+			bind:localModuleStates
 			on:close={() => {
 				// keep the data in the preview content
 				deferContent = true

package/package/components/flows/header/FlowYamlEditor.svelte

@@ -47,6 +47,7 @@ function apply() {
         sendUserToast('Error parsing yaml: ' + e), true;
     }
 }
+let editorHeight = $state(0);
 </script>
 
 <Drawer on:open={reload} bind:this={drawer} size="800px">
@@ -60,7 +61,15 @@ function apply() {
 			{#await import('../../SimpleEditor.svelte')}
 				<Loader2 class="animate-spin" />
 			{:then Module}
-				<Module.default bind:this={editor} autoHeight bind:code lang="yaml" />
+				<div class="h-full w-full overflow-hidden" bind:clientHeight={editorHeight}>
+					<Module.default
+						bind:this={editor}
+						autoHeight
+						minHeight={editorHeight}
+						bind:code
+						lang="yaml"
+					/>
+				</div>
 			{/await}
 		{/if}
 	</DrawerContent>

package/package/components/flows/map/FlowGraphPreviewButton.svelte

@@ -29,7 +29,7 @@ const wide = $derived(hover || selected || flowPreviewJob || individualStepTests
 			<span transition:fade={{ duration: 100 }} class="text-xs">Test flow</span>
 		{/if}
 	</Button>
-	{#if wide && (flowPreviewJob || individualStepTests)}
+	{#if wide && flowPreviewJob}
 		<div
 			class="flex flex-row items-center shadow-sm rounded-md mt-1"
 			in:fade={{ duration: 100, delay: 200 }}

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

@@ -4,7 +4,7 @@ import Popover from '../../Popover.svelte';
 import { twMerge } from 'tailwind-merge';
 import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
 import { untrack } from 'svelte';
-let { id, flowJobs, flowJobsSuccess, selected, selectedManually, onSelectedIteration, moduleId } = $props();
+let { id, flowJobs, flowJobsSuccess, selected, selectedManually, onSelectedIteration, moduleId, showIcon = true } = $props();
 let filter = $state(undefined);
 function onKeydown(event) {
     if (event.key === 'Enter' &&
@@ -40,6 +40,7 @@ function updateItems() {
 }
 let isOpen = $state(false);
 $effect(() => {
+    filter;
     isOpen && flowJobs && untrack(() => updateItems());
 });
 </script>
@@ -99,7 +100,9 @@ $effect(() => {
 					meltElement={trigger}
 				>
 					#{selected == -1 ? '?' : selected + 1}
-					<ListFilter size={15} />
+					{#if showIcon}
+						<ListFilter size={15} />
+					{/if}
 				</MeltButton>
 			{/snippet}
 
@@ -118,7 +121,8 @@ $effect(() => {
 											class={twMerge(
 												'text-primary text-xs w-full text-left py-1 pl-2 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center',
 												items[idx].success == false ? 'text-red-400' : '',
-												'data-[highlighted]:bg-surface-hover'
+												'data-[highlighted]:bg-surface-hover',
+												items[idx].index == selected ? 'bg-surface-selected' : ''
 											)}
 											onClick={() => {
 												onSelectedIteration({

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

@@ -7,6 +7,7 @@ interface Props {
     selected: number;
     selectedManually: boolean | undefined;
     onSelectedIteration: onSelectedIteration;
+    showIcon?: boolean;
 }
 declare const FlowJobsMenu: import("svelte").Component<Props, {}, "">;
 type FlowJobsMenu = ReturnType<typeof FlowJobsMenu>;

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

@@ -2,7 +2,7 @@
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
 import { AlertTriangle, Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, SkipForward, Pin, X, Play, Loader2 } from 'lucide-svelte';
-import { createEventDispatcher, getContext, untrack } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 import IdEditorInput from '../../IdEditorInput.svelte';
@@ -50,30 +50,30 @@ function updateConnectingData(id, pickableIds, flowPropPickerConfig, flowStateSt
     connectingData =
         flowPropPickerConfig && pickableIds && Object.keys(pickableIds).includes(id)
             ? pickableIds[id]
-            : (flowStateStore?.[id]?.previewResult ?? {});
+            : (flowStateStore?.val?.[id]?.previewResult ?? {});
 }
 $effect(() => {
-    const args = [id, pickableIds, $flowPropPickerConfig, $flowStateStore];
-    untrack(() => updateConnectingData(...args));
+    updateConnectingData(id, pickableIds, $flowPropPickerConfig, flowStateStore);
 });
 function updateLastJob(flowStateStore) {
-    if (!flowStateStore || !id || flowStateStore[id]?.previewResult === 'never tested this far') {
+    if (!flowStateStore ||
+        !id ||
+        flowStateStore.val[id]?.previewResult === 'never tested this far') {
         return;
     }
     lastJob = {
-        id: flowStateStore[id]?.previewJobId ?? '',
-        result: flowStateStore[id]?.previewResult,
+        id: flowStateStore.val[id]?.previewJobId ?? '',
+        result: flowStateStore.val[id]?.previewResult,
         type: 'CompletedJob',
-        workspace_id: flowStateStore[id]?.previewWorkspaceId ?? '',
-        success: flowStateStore[id]?.previewSuccess ?? undefined
+        success: flowStateStore.val[id]?.previewSuccess ?? undefined
     };
 }
 $effect(() => {
     if (testJob && testJob.type === 'CompletedJob') {
         lastJob = $state.snapshot(testJob);
     }
-    else if (flowStateStore && $flowStateStore) {
-        untrack(() => updateLastJob($flowStateStore));
+    else if (id) {
+        updateLastJob(flowStateStore);
     }
 });
 let isConnectingCandidate = $derived(!!id && !!$flowPropPickerConfig && !!pickableIds && Object.keys(pickableIds).includes(id));
@@ -144,7 +144,7 @@ let testRunDropdownOpen = $state(false);
 {#if deletable && id && flowEditorContext?.flowStore && outputPickerVisible}
 	{@const flowStore = flowEditorContext?.flowStore.val}
 	{@const mod = flowStore?.value ? dfsPreviousResults(id, flowStore, false)[0] : undefined}
-	{#if mod && $flowStateStore?.[id]}
+	{#if mod && flowStateStore?.val?.[id]}
 		<ModuleTest bind:this={moduleTest} {mod} bind:testIsLoading bind:testJob />
 	{/if}
 {/if}

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { createEventDispatcher, getContext, tick } from 'svelte';
-import { createInlineScriptModule, createBranchAll, createBranches, createLoop, createWhileLoop, deleteFlowStateById, emptyModule, pickScript, pickFlow, insertNewPreprocessorModule } from '../flowStateUtils.svelte';
+import { createInlineScriptModule, createBranchAll, createBranches, createLoop, createWhileLoop, deleteFlowStateById, emptyModule, pickScript, pickFlow, insertNewPreprocessorModule, createAiAgent } from '../flowStateUtils.svelte';
 import { emptyFlowModuleState } from '../utils';
 import { dfs } from '../dfs';
 import { push } from '../../../history.svelte';
@@ -16,19 +16,19 @@ import { setScheduledPollSchedule } from '../../triggers';
 import { JobService } from '../../../gen';
 import { dfsByModule } from '../previousResults';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
-import { writable } from 'svelte/store';
 import FlowStickyNode from './FlowStickyNode.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
-let { sidebarSize = $bindable(undefined), disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, newFlow = false, smallErrorHandler = false, workspace = $workspaceStore, onTestUpTo, onEditInput, localModuleStates = writable({}), aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), onDelete, flowHasChanged } = $props();
+import { ModulesTestStates } from '../../modulesTest.svelte';
+let { sidebarSize = $bindable(undefined), disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, newFlow = false, smallErrorHandler = false, workspace = $workspaceStore, onTestUpTo, onEditInput, localModuleStates = {}, testModuleStates = new ModulesTestStates(), aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = $bindable({ val: {} }), onDelete, flowHasChanged } = $props();
 let flowTutorials = $state(undefined);
 const { customUi, selectedId, moving, history, flowStateStore, flowStore, pathStore } = getContext('FlowEditorContext');
 const { triggersCount, triggersState } = getContext('TriggerContext');
 const { flowPropPickerConfig } = getContext('PropPickerContext');
 export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, inlineScript) {
     push(history, flowStore.val);
-    let module = emptyModule($flowStateStore, flowStore.val, kind == 'flow');
+    let module = emptyModule(flowStateStore.val, flowStore.val, kind == 'flow');
     let state = emptyFlowModuleState();
-    $flowStateStore[module.id] = state;
+    flowStateStore.val[module.id] = state;
     if (wsFlow) {
         ;
         [module, state] = await pickFlow(wsFlow.path, wsFlow.summary, module.id);
@@ -53,10 +53,14 @@ export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsF
         ;
         [module, state] = await createBranchAll(module.id);
     }
+    else if (kind == 'aiagent') {
+        ;
+        [module, state] = await createAiAgent(module.id);
+    }
     else if (inlineScript) {
         const { language, kind, subkind, summary } = inlineScript;
         [module, state] = await createInlineScriptModule(language, kind, subkind, module.id, summary);
-        $flowStateStore[module.id] = state;
+        flowStateStore.val[module.id] = state;
         if (kind == 'trigger') {
             module.summary = 'Trigger';
         }
@@ -64,7 +68,7 @@ export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsF
             module.summary = 'Approval';
         }
     }
-    $flowStateStore[module.id] = state;
+    flowStateStore.val[module.id] = state;
     if (kind == 'approval') {
         module.suspend = { required_events: 1, timeout: 1800 };
     }
@@ -108,6 +112,9 @@ export function removeAtId(modules, id) {
             });
             mod.value.default = removeAtId(mod.value.default, id);
         }
+        else if (mod.value.type == 'aiagent') {
+            mod.value.tools = removeAtId(mod.value.tools, id);
+        }
         return mod;
     });
 }
@@ -200,18 +207,16 @@ async function loadLastJob(path, moduleId) {
             id: previousJobId[0].id
         });
         if ('result' in getJobResult) {
-            $flowStateStore[moduleId] = {
-                ...($flowStateStore[moduleId] ?? {}),
+            flowStateStore.val[moduleId] = {
+                ...(flowStateStore.val[moduleId] ?? {}),
                 previewResult: getJobResult.result,
                 previewJobId: previousJobId[0].id,
-                previewWorkspaceId: previousJobId[0].workspace_id,
                 previewSuccess: getJobResult.success
             };
             if (stepHistoryLoader) {
                 stepHistoryLoader.stepStates[moduleId].loadingJobs = false;
             }
         }
-        $flowStateStore = $flowStateStore;
     }
 }
 $effect(() => {
@@ -285,12 +290,13 @@ $effect(() => {
 			editMode
 			{onTestUpTo}
 			{onEditInput}
-			flowModuleStates={$localModuleStates}
+			flowModuleStates={localModuleStates}
+			{testModuleStates}
 			{isOwner}
 			{individualStepTests}
 			{flowJob}
 			{showJobStatus}
-			{suspendStatus}
+			suspendStatus={suspendStatus.val}
 			{flowHasChanged}
 			onDelete={(id) => {
 				dependents = getDependentComponents(id, flowStore.val)
@@ -305,7 +311,7 @@ $effect(() => {
 					}
 					refreshStateStore(flowStore)
 					onDelete?.(id)
-					delete $flowStateStore[id]
+					delete flowStateStore.val[id]
 				}
 
 				if (Object.keys(dependents).length > 0) {
@@ -343,6 +349,8 @@ $effect(() => {
 							}
 						} else if (mod.id == detail.sourceId || mod.id == detail.targetId) {
 							targetModules = modules
+						} else if (mod.id == detail.agentId && mod.value.type === 'aiagent') {
+							targetModules = mod.value.tools
 						}
 					})
 					if (flowStore.val.value.modules && Array.isArray(flowStore.val.value.modules)) {
@@ -374,7 +382,8 @@ $effect(() => {
 									})
 								}
 							} else {
-								const index = detail.index ?? 0
+								const index = (detail.agentId ? targetModules?.length : detail.index) ?? 0
+
 								await insertNewModuleAtIndex(
 									targetModules,
 									index,
@@ -417,7 +426,6 @@ $effect(() => {
 						if (['branchone', 'branchall'].includes(detail.kind)) {
 							await addBranch(targetModules[detail.index ?? 0].id)
 						}
-						$flowStateStore = $flowStateStore
 						refreshStateStore(flowStore)
 						dispatch('change')
 					}
@@ -467,9 +475,8 @@ $effect(() => {
 						mod.id = newId
 					}
 				})
-				$flowStateStore[newId] = $flowStateStore[id]
-				delete $flowStateStore[id]
-				$flowStateStore = $flowStateStore
+				flowStateStore.val[newId] = flowStateStore.val[id]
+				delete flowStateStore.val[id]
 				refreshStateStore(flowStore)
 				$selectedId = newId
 			}}

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

@@ -1,7 +1,8 @@
 import type { FlowModule, Job } from '../../../gen';
 import type { InlineScript, InsertKind } from '../../graph/graphBuilder.svelte';
 import type { GraphModuleState } from '../../graph';
-import { type Writable } from 'svelte/store';
+import { ModulesTestStates } from '../../modulesTest.svelte';
+import type { StateStore } from '../../../utils';
 interface Props {
     sidebarSize?: number | undefined;
     disableStaticInputs?: boolean;
@@ -13,7 +14,8 @@ interface Props {
     workspace?: string | undefined;
     onTestUpTo?: ((id: string) => void) | undefined;
     onEditInput?: (moduleId: string, key: string) => void;
-    localModuleStates?: Writable<Record<string, GraphModuleState>>;
+    localModuleStates?: Record<string, GraphModuleState>;
+    testModuleStates?: ModulesTestStates;
     aiChatOpen?: boolean;
     showFlowAiButton?: boolean;
     toggleAiChat?: () => void;
@@ -26,7 +28,7 @@ interface Props {
     individualStepTests?: boolean;
     flowJob?: Job | undefined;
     showJobStatus?: boolean;
-    suspendStatus?: Writable<Record<string, {
+    suspendStatus?: StateStore<Record<string, {
         job: Job;
         nb: number;
     }>>;
@@ -67,6 +69,6 @@ declare const FlowModuleSchemaMap: $$__sveltets_2_IsomorphicComponent<Props, {
     removeBranch: (id: string, index: number) => void;
     isNodeVisible: (nodeId: string) => boolean;
     setExpr: (module: FlowModule, expr: string) => void;
-}, "sidebarSize">;
+}, "suspendStatus" | "sidebarSize">;
 type FlowModuleSchemaMap = InstanceType<typeof FlowModuleSchemaMap>;
 export default FlowModuleSchemaMap;

package/package/components/flows/map/InsertModuleInner.svelte

@@ -10,6 +10,7 @@ export let funcDesc = '';
 export let disableAi = false;
 export let kind = 'script';
 export let allowTrigger = true;
+export let scriptOnly = false;
 let customUi = getContext('customUi');
 let selectedKind = kind;
 let preFilter = 'all';
@@ -58,7 +59,7 @@ shouldUsePortal={true} -->
 	</div>
 
 	<div class="flex flex-row grow min-h-0">
-		{#if kind === 'script'}
+		{#if kind === 'script' && !scriptOnly}
 			<div class="flex-none flex flex-col text-xs text-primary">
 				<TopLevelNode
 					label="Action"
@@ -130,6 +131,13 @@ shouldUsePortal={true} -->
 						dispatch('new', { kind: 'branchall' })
 					}}
 				/>
+				<TopLevelNode
+					label="AI Agent"
+					on:select={() => {
+						dispatch('close')
+						dispatch('new', { kind: 'aiagent' })
+					}}
+				/>
 			</div>
 		{/if}
 

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

@@ -17,6 +17,7 @@ declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<{
     disableAi?: boolean;
     kind?: "script" | "trigger" | "preprocessor" | "failure";
     allowTrigger?: boolean;
+    scriptOnly?: boolean;
 }, {
     insert: CustomEvent<any>;
     new: CustomEvent<any>;

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { Button } from '../../common';
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
 import IconedResourceType from '../../IconedResourceType.svelte';
-import { Building, Repeat, Square, ArrowDown, GitBranch } from 'lucide-svelte';
+import { Building, Repeat, Square, ArrowDown, GitBranch, Bot } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
 import { prettyLanguage } from '../../../common';
@@ -204,7 +204,9 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 				>
 					{#snippet icon()}
 						<div>
-							{#if mod.value.type === 'rawscript'}
+							{#if mod.value.type === 'aiagent'}
+								<Bot size={16} />
+							{:else if mod.value.type === 'rawscript'}
 								<LanguageIcon lang={mod.value.language} width={16} height={16} />
 							{:else if mod.summary == 'Terminate flow'}
 								<Square size={16} />