windmill-components 1.677.1 → 1.695.0

package/package/components/flows/flowTree.js

@@ -0,0 +1,326 @@
+function isFlowModuleToolCandidate(tool) {
+    const toolValue = tool.value;
+    return toolValue.tool_type === undefined || toolValue.tool_type === 'flowmodule';
+}
+export function getChildModuleBranches(module) {
+    if (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow') {
+        return [module.value.modules];
+    }
+    if (module.value.type === 'branchone') {
+        return [module.value.default, ...module.value.branches.map((branch) => branch.modules)];
+    }
+    if (module.value.type === 'branchall') {
+        return module.value.branches.map((branch) => branch.modules);
+    }
+    if (module.value.type === 'aiagent' && module.value.tools) {
+        return [
+            module.value.tools.filter((tool) => isFlowModuleToolCandidate(tool))
+        ];
+    }
+    return [];
+}
+export function collectDescendantFlowModules(module) {
+    return getChildModuleBranches(module).flatMap((branch) => branch.flatMap((childModule) => [childModule, ...collectDescendantFlowModules(childModule)]));
+}
+function visitNestedFlowNodesOfModule(module, visit) {
+    if (module.value.type === 'aiagent' && module.value.tools) {
+        const tools = module.value.tools;
+        for (let toolIndex = 0; toolIndex < tools.length; toolIndex++) {
+            const tool = tools[toolIndex];
+            if (!isFlowModuleToolCandidate(tool)) {
+                continue;
+            }
+            const toolMatch = {
+                module: tool,
+                location: {
+                    type: 'aiagent',
+                    parentId: module.id,
+                    index: toolIndex
+                },
+                container: tools
+            };
+            if (visit(toolMatch) || visitNestedFlowNodesOfModule(tool, visit)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    const childBranches = getChildModuleBranches(module);
+    for (let branchIndex = 0; branchIndex < childBranches.length; branchIndex++) {
+        const branch = childBranches[branchIndex];
+        const locationBuilder = module.value.type === 'forloopflow'
+            ? (childIndex) => ({
+                type: 'forloop',
+                parentId: module.id,
+                index: childIndex
+            })
+            : module.value.type === 'whileloopflow'
+                ? (childIndex) => ({
+                    type: 'whileloop',
+                    parentId: module.id,
+                    index: childIndex
+                })
+                : module.value.type === 'branchone'
+                    ? branchIndex === 0
+                        ? (childIndex) => ({
+                            type: 'branchone-default',
+                            parentId: module.id,
+                            index: childIndex
+                        })
+                        : (childIndex) => ({
+                            type: 'branchone-branch',
+                            parentId: module.id,
+                            branchIndex: branchIndex - 1,
+                            index: childIndex
+                        })
+                    : (childIndex) => ({
+                        type: 'branchall-branch',
+                        parentId: module.id,
+                        branchIndex,
+                        index: childIndex
+                    });
+        if (visitFlowNodesInModules(branch, locationBuilder, visit)) {
+            return true;
+        }
+    }
+    return false;
+}
+function visitFlowNodesInModules(modules, locationBuilder, visit) {
+    for (let index = 0; index < modules.length; index++) {
+        const module = modules[index];
+        if (visit({
+            module,
+            location: locationBuilder(index),
+            container: modules
+        })) {
+            return true;
+        }
+        if (visitNestedFlowNodesOfModule(module, visit)) {
+            return true;
+        }
+    }
+    return false;
+}
+function findFlowNodeInModules(modules, moduleId, locationBuilder) {
+    let match = null;
+    visitFlowNodesInModules(modules, locationBuilder, (nodeMatch) => {
+        if (nodeMatch.module.id !== moduleId) {
+            return false;
+        }
+        match = nodeMatch;
+        return true;
+    });
+    return match;
+}
+/**
+ * Collect every module ID in a flow tree, including ALL aiagent tool IDs
+ * (both flowmodule and non-flowmodule like MCP).  Used for ID uniqueness
+ * validation where every tool's ID must be reserved regardless of type.
+ */
+export function collectAllFlowModuleIds(flow) {
+    const ids = [];
+    function walkModules(modules) {
+        for (const module of modules) {
+            if (module.id) {
+                ids.push(module.id);
+            }
+            if (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow') {
+                walkModules(module.value.modules);
+            }
+            else if (module.value.type === 'branchone') {
+                for (const branch of module.value.branches) {
+                    walkModules(branch.modules);
+                }
+                walkModules(module.value.default);
+            }
+            else if (module.value.type === 'branchall') {
+                for (const branch of module.value.branches) {
+                    walkModules(branch.modules);
+                }
+            }
+            else if (module.value.type === 'aiagent' && module.value.tools) {
+                walkModules(module.value.tools);
+            }
+        }
+    }
+    if (flow.modules) {
+        walkModules(flow.modules);
+    }
+    if (flow.failure_module?.id) {
+        ids.push(flow.failure_module.id);
+    }
+    if (flow.preprocessor_module?.id) {
+        ids.push(flow.preprocessor_module.id);
+    }
+    return ids;
+}
+/**
+ * Like collectAllFlowModuleIds but operates on a modules array directly
+ * (without failure_module/preprocessor_module).
+ */
+export function collectAllFlowModuleIdsFromModules(modules) {
+    return collectAllFlowModuleIds({ modules });
+}
+export function collectFlowNodes(flow) {
+    const matches = [];
+    if (flow.failure_module) {
+        matches.push({
+            module: flow.failure_module,
+            location: { type: 'failure', index: -1 }
+        });
+    }
+    if (flow.preprocessor_module) {
+        matches.push({
+            module: flow.preprocessor_module,
+            location: { type: 'preprocessor', index: -1 }
+        });
+    }
+    visitFlowNodesInModules(flow.modules ?? [], (index) => ({ type: 'root', index }), (match) => {
+        matches.push({
+            module: match.module,
+            location: match.location
+        });
+    });
+    return matches;
+}
+export function findModuleInModules(modules, moduleId) {
+    return (findFlowNodeInModules(modules, moduleId, (index) => ({ type: 'root', index }))?.module ??
+        undefined);
+}
+export function findFlowNode(flow, moduleId) {
+    if (flow.failure_module?.id === moduleId) {
+        return {
+            module: flow.failure_module,
+            location: { type: 'failure', index: -1 }
+        };
+    }
+    if (flow.preprocessor_module?.id === moduleId) {
+        return {
+            module: flow.preprocessor_module,
+            location: { type: 'preprocessor', index: -1 }
+        };
+    }
+    return findFlowNodeInModules(flow.modules ?? [], moduleId, (index) => ({ type: 'root', index }));
+}
+/**
+ * Returns the live stored module for any module id in the flow tree.
+ * This includes nested modules, AI-agent flowmodule tools, and special modules.
+ */
+export function findModuleInFlow(flow, moduleId) {
+    return findFlowNode(flow, moduleId)?.module ?? null;
+}
+export function findModuleParent(flow, moduleId) {
+    return findFlowNode(flow, moduleId)?.location ?? null;
+}
+function resolveModuleArrayByLocation(flow, location, options = {}) {
+    if (location.type === 'root') {
+        if (!flow.modules && options.createIfMissing) {
+            flow.modules = [];
+        }
+        return flow.modules ?? null;
+    }
+    const parentModule = findModuleInFlow(flow, location.parentId);
+    if (!parentModule) {
+        return null;
+    }
+    if (location.type === 'forloop' && parentModule.value.type === 'forloopflow') {
+        return parentModule.value.modules ?? null;
+    }
+    if (location.type === 'whileloop' && parentModule.value.type === 'whileloopflow') {
+        return parentModule.value.modules ?? null;
+    }
+    if (location.type === 'branchone-default' && parentModule.value.type === 'branchone') {
+        return parentModule.value.default ?? null;
+    }
+    if (location.type === 'branchone-branch' && parentModule.value.type === 'branchone') {
+        let branch = parentModule.value.branches[location.branchIndex];
+        if (!branch && options.templateFlow) {
+            const templateParent = findModuleInFlow(options.templateFlow, location.parentId);
+            const templateBranch = templateParent?.value.type === 'branchone'
+                ? templateParent.value.branches[location.branchIndex]
+                : undefined;
+            if (templateBranch) {
+                while (parentModule.value.branches.length <= location.branchIndex) {
+                    parentModule.value.branches.push({ expr: '', modules: [] });
+                }
+                parentModule.value.branches[location.branchIndex] = {
+                    ...templateBranch,
+                    modules: []
+                };
+                branch = parentModule.value.branches[location.branchIndex];
+            }
+        }
+        return branch?.modules ?? null;
+    }
+    if (location.type === 'branchall-branch' && parentModule.value.type === 'branchall') {
+        let branch = parentModule.value.branches[location.branchIndex];
+        if (!branch && options.templateFlow) {
+            const templateParent = findModuleInFlow(options.templateFlow, location.parentId);
+            const templateBranch = templateParent?.value.type === 'branchall'
+                ? templateParent.value.branches[location.branchIndex]
+                : undefined;
+            if (templateBranch) {
+                while (parentModule.value.branches.length <= location.branchIndex) {
+                    parentModule.value.branches.push({ modules: [] });
+                }
+                parentModule.value.branches[location.branchIndex] = {
+                    ...templateBranch,
+                    modules: []
+                };
+                branch = parentModule.value.branches[location.branchIndex];
+            }
+        }
+        return branch?.modules ?? null;
+    }
+    if (location.type === 'aiagent' && parentModule.value.type === 'aiagent') {
+        if (!parentModule.value.tools && options.createIfMissing) {
+            parentModule.value.tools = [];
+        }
+        return parentModule.value.tools ?? null;
+    }
+    return null;
+}
+export function getModuleArrayByLocation(flow, location) {
+    return resolveModuleArrayByLocation(flow, location);
+}
+export function ensureModuleArrayByLocation(flow, location, templateFlow) {
+    return resolveModuleArrayByLocation(flow, location, {
+        createIfMissing: true,
+        templateFlow
+    });
+}
+export function getModuleArrayContainer(flow, moduleId) {
+    const match = findFlowNode(flow, moduleId);
+    if (!match || !('container' in match)) {
+        return null;
+    }
+    return {
+        index: match.location.index,
+        modules: match.container
+    };
+}
+export function removeFlowModule(flow, moduleId) {
+    if (flow.preprocessor_module?.id === moduleId) {
+        const removed = flow.preprocessor_module;
+        flow.preprocessor_module = undefined;
+        return removed;
+    }
+    if (flow.failure_module?.id === moduleId) {
+        const removed = flow.failure_module;
+        flow.failure_module = undefined;
+        return removed;
+    }
+    const match = findFlowNode(flow, moduleId);
+    if (!match || !('container' in match)) {
+        return null;
+    }
+    const [removed] = match.container.splice(match.location.index, 1);
+    return removed ?? null;
+}
+export function replaceFlowModule(target, next) {
+    for (const key of Object.keys(target)) {
+        delete target[key];
+    }
+    Object.assign(target, next);
+    return target;
+}

package/package/components/flows/flowTree.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package/components/flows/flowTree.test.js

@@ -0,0 +1,236 @@
+import { describe, expect, it } from 'vitest';
+import { collectAllFlowModuleIds, collectAllFlowModuleIdsFromModules, collectFlowNodes, ensureModuleArrayByLocation, findFlowNode, findModuleInFlow, findModuleInModules, findModuleParent, getModuleArrayContainer, removeFlowModule, replaceFlowModule } from './flowTree';
+function makeRawModule(id) {
+    return {
+        id,
+        summary: id,
+        value: { type: 'rawscript', content: '', language: 'python3', input_transforms: {} }
+    };
+}
+function makeFlowModuleTool(module) {
+    return {
+        id: module.id,
+        summary: module.summary,
+        value: {
+            tool_type: 'flowmodule',
+            ...module.value
+        }
+    };
+}
+function makeAiAgent(id, tools) {
+    return {
+        id,
+        summary: id,
+        value: {
+            type: 'aiagent',
+            tools,
+            input_transforms: {}
+        }
+    };
+}
+function makeMcpTool(id) {
+    return {
+        id,
+        summary: id,
+        value: {
+            tool_type: 'mcp',
+            resource_path: ''
+        }
+    };
+}
+describe('flowTree', () => {
+    it('returns the root container for top-level modules', () => {
+        const first = makeRawModule('first');
+        const second = makeRawModule('second');
+        const flow = {
+            modules: [first, second]
+        };
+        expect(findModuleParent(flow, 'second')).toEqual({ type: 'root', index: 1 });
+        expect(findModuleInFlow(flow, 'second')).toBe(second);
+        expect(getModuleArrayContainer(flow, 'second')).toEqual({
+            index: 1,
+            modules: flow.modules
+        });
+    });
+    it('returns nested branch containers from the live flow tree', () => {
+        const nested = makeRawModule('nested');
+        const branch = makeRawModule('branch');
+        const flow = {
+            modules: [
+                {
+                    id: 'router',
+                    summary: 'router',
+                    value: {
+                        type: 'branchone',
+                        default: [nested],
+                        branches: [{ expr: 'true', modules: [branch] }],
+                        input_transforms: {}
+                    }
+                }
+            ]
+        };
+        expect(findModuleParent(flow, 'nested')).toEqual({
+            type: 'branchone-default',
+            parentId: 'router',
+            index: 0
+        });
+        expect(getModuleArrayContainer(flow, 'branch')).toEqual({
+            index: 0,
+            modules: ((flow.modules?.[0].value).branches[0].modules ?? [])
+        });
+    });
+    it('returns ai agent tool containers as mutable flow module arrays', () => {
+        const lookup = makeFlowModuleTool(makeRawModule('lookup_user'));
+        const sum = makeFlowModuleTool(makeRawModule('sum'));
+        const agent = makeAiAgent('agent', [lookup, sum]);
+        const agentTools = (agent.value.tools ?? []);
+        const flow = {
+            modules: [agent]
+        };
+        const match = findFlowNode(flow, 'sum');
+        const container = getModuleArrayContainer(flow, 'sum');
+        expect(match).toMatchObject({
+            location: { type: 'aiagent', parentId: 'agent', index: 1 }
+        });
+        expect(findModuleInFlow(flow, 'sum')).toBe(sum);
+        expect(container).toEqual({
+            index: 1,
+            modules: agentTools
+        });
+        container?.modules.splice(container.index, 1);
+        expect(agentTools.map((module) => module.id)).toEqual(['lookup_user']);
+    });
+    it('finds ai agent flowmodule tools inside a plain modules array', () => {
+        const tool = makeFlowModuleTool(makeRawModule('sum'));
+        const flowModules = [makeAiAgent('agent', [tool])];
+        expect(findModuleInModules(flowModules, 'sum')).toBe(tool);
+    });
+    it('skips non-flowmodule ai agent tools in module traversal', () => {
+        const lookup = makeFlowModuleTool(makeRawModule('lookup_user'));
+        const agent = makeAiAgent('agent', [lookup, makeMcpTool('search_docs')]);
+        const flow = {
+            modules: [agent]
+        };
+        expect(findModuleInModules(flow.modules ?? [], 'search_docs')).toBeUndefined();
+        expect(findModuleInFlow(flow, 'search_docs')).toBeNull();
+        expect(collectFlowNodes(flow).map((entry) => entry.module.id)).toEqual(['agent', 'lookup_user']);
+    });
+    it('returns special modules without pretending they belong to an array container', () => {
+        const failure = makeRawModule('failure');
+        const preprocessor = makeRawModule('preprocessor');
+        const flow = {
+            modules: [],
+            failure_module: failure,
+            preprocessor_module: preprocessor
+        };
+        expect(findModuleParent(flow, 'failure')).toEqual({ type: 'failure', index: -1 });
+        expect(findModuleParent(flow, 'preprocessor')).toEqual({
+            type: 'preprocessor',
+            index: -1
+        });
+        expect(findModuleInFlow(flow, 'failure')).toBe(failure);
+        expect(findModuleInFlow(flow, 'preprocessor')).toBe(preprocessor);
+        expect(getModuleArrayContainer(flow, 'failure')).toBeNull();
+        expect(getModuleArrayContainer(flow, 'preprocessor')).toBeNull();
+    });
+    it('removes nested ai agent tools from the real stored tools array', () => {
+        const lookup = makeFlowModuleTool(makeRawModule('lookup_user'));
+        const sum = makeFlowModuleTool(makeRawModule('sum'));
+        const agent = makeAiAgent('agent', [lookup, sum]);
+        const flow = {
+            modules: [agent]
+        };
+        const removed = removeFlowModule(flow, 'sum');
+        expect(removed?.id).toBe('sum');
+        expect((agent.value.tools ?? []).map((module) => module.id)).toEqual([
+            'lookup_user'
+        ]);
+    });
+    it('replaces module content while preserving the original object reference', () => {
+        const original = makeRawModule('sum');
+        const replacement = makeRawModule('sum');
+        replacement.value.content = 'updated';
+        const result = replaceFlowModule(original, replacement);
+        expect(result).toBe(original);
+        expect(original.value.content).toBe('updated');
+    });
+    it('collectAllFlowModuleIds includes all aiagent tool IDs including non-flowmodule', () => {
+        const lookup = makeFlowModuleTool(makeRawModule('lookup_user'));
+        const mcp = makeMcpTool('search_docs');
+        const agent = makeAiAgent('agent', [lookup, mcp]);
+        const failure = makeRawModule('failure');
+        const flow = {
+            modules: [makeRawModule('step_a'), agent],
+            failure_module: failure
+        };
+        const ids = collectAllFlowModuleIds(flow);
+        // Should include ALL tool IDs (both flowmodule and MCP)
+        expect(ids).toContain('step_a');
+        expect(ids).toContain('agent');
+        expect(ids).toContain('lookup_user');
+        expect(ids).toContain('search_docs');
+        expect(ids).toContain('failure');
+        expect(ids).toHaveLength(5);
+    });
+    it('collectAllFlowModuleIdsFromModules works without special modules', () => {
+        const agent = makeAiAgent('agent', [
+            makeFlowModuleTool(makeRawModule('sum')),
+            makeMcpTool('websearch')
+        ]);
+        const ids = collectAllFlowModuleIdsFromModules([agent]);
+        expect(ids).toEqual(['agent', 'sum', 'websearch']);
+    });
+    it('collectFlowNodes excludes non-flowmodule tools (MCP)', () => {
+        // Verify that collectFlowNodes still filters non-flowmodule tools
+        const lookup = makeFlowModuleTool(makeRawModule('lookup_user'));
+        const mcp = makeMcpTool('search_docs');
+        const agent = makeAiAgent('agent', [lookup, mcp]);
+        const flow = { modules: [agent] };
+        const nodeIds = collectFlowNodes(flow).map((n) => n.module.id);
+        expect(nodeIds).toContain('agent');
+        expect(nodeIds).toContain('lookup_user');
+        expect(nodeIds).not.toContain('search_docs');
+    });
+    it('recreates a missing branch container from the source flow location', () => {
+        const nested = makeRawModule('nested');
+        const beforeFlow = {
+            modules: [
+                {
+                    id: 'router',
+                    summary: 'router',
+                    value: {
+                        type: 'branchone',
+                        default: [],
+                        branches: [{ expr: 'true', modules: [nested] }],
+                        input_transforms: {}
+                    }
+                }
+            ]
+        };
+        const targetFlow = {
+            modules: [
+                {
+                    id: 'router',
+                    summary: 'router',
+                    value: {
+                        type: 'branchone',
+                        default: [],
+                        branches: [],
+                        input_transforms: {}
+                    }
+                }
+            ]
+        };
+        const recreatedContainer = ensureModuleArrayByLocation(targetFlow, {
+            type: 'branchone-branch',
+            parentId: 'router',
+            branchIndex: 0,
+            index: 0
+        }, beforeFlow);
+        expect(recreatedContainer).toEqual([]);
+        expect(((targetFlow.modules?.[0].value).branches ?? [])[0]).toMatchObject({
+            expr: 'true',
+            modules: []
+        });
+    });
+});

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

@@ -94,8 +94,7 @@ $effect(() => {
 					class={twMerge(
 						'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'
+						'flex items-center justify-center text-secondary'
 					)}
 					meltElement={trigger}
 				>
@@ -113,34 +112,41 @@ $effect(() => {
 					<div class="max-h-[300px]">
 						{#key items}
 							{#if items.length > 0}
-							<VirtualList height={300} width="100%" itemCount={items.length} itemSize={24}>
-								{#snippet header()}{/snippet}
-								{#snippet footer()}{/snippet}
-								{#snippet item({ index: idx, style })}
-									<div {style}>
-										<MenuItem
-											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',
-												items[idx].index == selected ? 'bg-surface-selected' : ''
-											)}
-											onClick={() => {
-												onSelectedIteration?.({
-													moduleId: moduleId,
-													index: items[idx].index,
-													id: items[idx].id,
-													manuallySet: true
-												})
-												menu?.close()
-											}}
-											item={childrenItem}
-										>
-											#{items[idx].index + 1}
-										</MenuItem>
-									</div>
-								{/snippet}
-							</VirtualList>
+								<VirtualList height={300} width="100%" itemCount={items.length} itemSize={24}>
+									{#snippet header()}{/snippet}
+									{#snippet footer()}{/snippet}
+									{#snippet item({ index: idx, style })}
+										<div {style}>
+											<MenuItem
+												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',
+													'data-[highlighted]:bg-surface-hover',
+													items[idx].index == selected ? 'bg-surface-selected' : ''
+												)}
+												onClick={() => {
+													onSelectedIteration?.({
+														moduleId: moduleId,
+														index: items[idx].index,
+														id: items[idx].id,
+														manuallySet: true
+													})
+													menu?.close()
+												}}
+												item={childrenItem}
+											>
+												<span
+													class="inline-block w-2 h-2 rounded-full shrink-0 {items[idx].success ===
+													true
+														? 'bg-green-500'
+														: items[idx].success === false
+															? 'bg-red-500'
+															: 'bg-yellow-400'}"
+												></span>
+												#{items[idx].index + 1}
+											</MenuItem>
+										</div>
+									{/snippet}
+								</VirtualList>
 							{:else}
 								<div class="text-xs text-tertiary py-2 px-2">No iterations</div>
 							{/if}

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

@@ -443,7 +443,7 @@ let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? fal
 			onmouseleave={() => (hover = false)}
 		>
 			{#if !isMultiSelected && (hover || selected || testRunDropdownOpen) && outputPickerVisible}
-				<div class="bg-surface rounded-md" transition:fade={{ duration: 100 }}>
+				<div class="bg-surface rounded-md" transition:fade={{ duration: 100 }} data-run-button={id}>
 					{#if !testIsLoading}
 						<Button
 							size="xs"