windmill-components 1.511.1 → 1.531.0

package/package/components/flows/content/FlowResult.svelte

@@ -2,11 +2,11 @@
 import { workspaceStore } from '../../../stores';
 import FlowCard from '../common/FlowCard.svelte';
 import Button from '../../common/button/Button.svelte';
-let { job, isOwner, localDurationStatuses, suspendStatus, noEditor, onOpenDetails } = $props();
+let { job, isOwner, suspendStatus, noEditor, onOpenDetails } = $props();
 </script>
 
 <FlowCard {noEditor} title="Flow result">
-	{#if job && isOwner !== undefined && localDurationStatuses && suspendStatus}
+	{#if job && isOwner !== undefined && suspendStatus}
 		<div class="px-4 py-2">
 			<FlowPreviewResult
 				{job}
@@ -14,7 +14,6 @@ let { job, isOwner, localDurationStatuses, suspendStatus, noEditor, onOpenDetail
 				{isOwner}
 				hideFlowResult={false}
 				hideDownloadLogs={false}
-				{localDurationStatuses}
 				innerModules={[]}
 				{suspendStatus}
 				{extra}

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

@@ -1,11 +1,9 @@
-import type { DurationStatus } from '../../graph';
 import type { Job } from '../../../gen';
-import type { Writable } from 'svelte/store';
+import type { StateStore } from '../../../utils';
 interface Props {
     job?: Job;
     isOwner?: boolean;
-    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
-    suspendStatus?: Writable<Record<string, {
+    suspendStatus?: StateStore<Record<string, {
         job: Job;
         nb: number;
     }>>;

package/package/components/flows/content/FlowWhileLoop.svelte

@@ -21,7 +21,7 @@ let selected = $state('early-stop');
 let previewOpen = $state(false);
 let jobId = $state(undefined);
 let job = $state(undefined);
-let previewIterationArgs = $derived($flowStateStore[mod.id]?.previewArgs ?? {});
+let previewIterationArgs = $derived(flowStateStore.val[mod.id]?.previewArgs ?? {});
 </script>
 
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">

package/package/components/flows/dfs.d.ts

@@ -1,2 +1,4 @@
 import type { FlowModule } from '../../gen';
-export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule, modules: FlowModule[], branches: FlowModule[][]) => T): T[];
+export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule, modules: FlowModule[], branches: FlowModule[][]) => T, { skipToolNodes }?: {
+    skipToolNodes?: boolean;
+}): T[];

package/package/components/flows/dfs.js

@@ -1,4 +1,4 @@
-export function dfs(modules, f) {
+export function dfs(modules, f, { skipToolNodes = false } = {}) {
     let result = [];
     for (const module of modules) {
         if (module.value.type == 'forloopflow' || module.value.type == 'whileloopflow') {
@@ -19,6 +19,10 @@ export function dfs(modules, f) {
                 result = result.concat(dfs(branch, f));
             }
         }
+        else if (module.value.type == 'aiagent' && !skipToolNodes) {
+            result = result.concat(f(module, modules, [module.value.tools]));
+            result = result.concat(dfs(module.value.tools, f));
+        }
         else {
             result.push(f(module, modules, []));
         }

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/idUtils.js

@@ -12,7 +12,8 @@ export const forbiddenIds = [
     'new',
     'in',
     'failure',
-    'preprocessor'
+    'preprocessor',
+    'as'
 ];
 export function numberToChars(n) {
     if (n < 0) {

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));
@@ -101,11 +101,11 @@ let testRunDropdownOpen = $state(false);
 					acceptUnderScores
 					reservedIds={dfs(flowStore?.val?.value.modules ?? [], (x) => x.id)}
 					bind:value={newId}
-					on:save={(e) => {
-						dispatch('changeId', { id, newId: e.detail, deps: getDeps?.dependents ?? {} })
+					onSave={({ oldId, newId }) => {
+						dispatch('changeId', { id: oldId, newId, deps: getDeps?.dependents ?? {} })
 						editId = false
 					}}
-					on:close={() => {
+					onClose={() => {
 						editId = false
 					}}
 				/>
@@ -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,6 +311,7 @@ $effect(() => {
 					}
 					refreshStateStore(flowStore)
 					onDelete?.(id)
+					delete flowStateStore.val[id]
 				}
 
 				if (Object.keys(dependents).length > 0) {
@@ -342,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)) {
@@ -373,7 +382,8 @@ $effect(() => {
 									})
 								}
 							} else {
-								const index = detail.index ?? 0
+								const index = (detail.agentId ? targetModules?.length : detail.index) ?? 0
+
 								await insertNewModuleAtIndex(
 									targetModules,
 									index,
@@ -416,7 +426,6 @@ $effect(() => {
 						if (['branchone', 'branchall'].includes(detail.kind)) {
 							await addBranch(targetModules[detail.index ?? 0].id)
 						}
-						$flowStateStore = $flowStateStore
 						refreshStateStore(flowStore)
 						dispatch('change')
 					}
@@ -433,6 +442,7 @@ $effect(() => {
 			}}
 			onChangeId={(detail) => {
 				let { id, newId, deps } = detail
+
 				dfs(flowStore.val.value.modules, (mod) => {
 					if (deps[mod.id]) {
 						deps[mod.id].forEach((dep) => {
@@ -465,6 +475,8 @@ $effect(() => {
 						mod.id = newId
 					}
 				})
+				flowStateStore.val[newId] = flowStateStore.val[id]
+				delete flowStateStore.val[id]
 				refreshStateStore(flowStore)
 				$selectedId = newId
 			}}