windmill-components 1.677.1 → 1.687.0

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

@@ -6,7 +6,6 @@ import { nextId, copyId } from '../flowModuleNextId';
 import { push } from '../../../history.svelte';
 import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
 import Portal from '../../Portal.svelte';
-import { getAllModules, getDependentComponents } from '../flowExplorer';
 import { locateModules, groupByParent } from '../multiSelectUtils';
 import { workspaceStore } from '../../../stores';
 import { copilotInfo } from '../../../aiStore';
@@ -15,18 +14,19 @@ import FlowGraphV2 from '../../graph/FlowGraphV2.svelte';
 import { replaceId } from '../flowStore.svelte';
 import { setScheduledPollSchedule } from '../../triggers';
 import { JobService } from '../../../gen';
-import { dfsByModule } from '../previousResults';
+import { findModuleInFlow } from '../flowTree';
 import { MoveManager } from '../../graph/moveManager.svelte';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import FlowStickyNode from './FlowStickyNode.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import { ModulesTestStates } from '../../modulesTest.svelte';
-import { flowModuleToAgentTool, createMcpTool, createWebsearchTool, createAiAgentTool, SPECIAL_TOOL_KINDS, agentToolToFlowModule, removeAgentToolByIdDeep } from '../agentToolUtils';
+import { flowModuleToAgentTool, createMcpTool, createWebsearchTool, createAiAgentTool, SPECIAL_TOOL_KINDS, agentToolToFlowModule } from '../agentToolUtils';
 import { loadFlowModuleState } from '../flowStateUtils.svelte';
+import { executeDeletePlan, prepareDeleteRequest } from '../flowDeleteController';
 import { getNoteEditorContext } from '../../graph/noteEditor.svelte';
 import { GroupedModulesProxy } from '../../graph/groupedModulesProxy.svelte';
 import { GroupDisplayState } from '../../graph/groupEditor.svelte';
-import { matchStructureNode, dfsStructure, findInStructure, moduleToStructureNode } from '../../graph/flowStructure';
+import { matchStructureNode, dfsStructure, moduleToStructureNode } from '../../graph/flowStructure';
 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();
 const { customUi, selectionManager, history, flowStateStore, flowStore, pathStore } = getContext('FlowEditorContext');
 const moveManager = new MoveManager();
@@ -143,67 +143,12 @@ export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsF
         return modules;
     }
 }
-/**
- * Helper function to remove an AgentTool by id from the tools array
- * Tools are always leaf nodes, so we just need to delete their state directly
- */
-function removeAgentToolById(tools, id) {
-    const index = tools.findIndex((tool) => tool.id === id);
-    if (index != -1) {
-        const [removed] = tools.splice(index, 1);
-        deleteFlowStateById(removed.id, flowStateStore);
-    }
-    return tools;
-}
-export function removeAtId(modules, id) {
-    const index = modules.findIndex((mod) => mod.id == id);
-    if (index != -1) {
-        const [removed] = modules.splice(index, 1);
-        const leaves = dfs([removed], (mod) => mod.id);
-        leaves.forEach((leafId) => deleteFlowStateById(leafId, flowStateStore));
-        return modules;
-    }
-    return modules.map((mod) => {
-        if (mod.value.type == 'forloopflow' || mod.value.type == 'whileloopflow') {
-            mod.value.modules = removeAtId(mod.value.modules, id);
-        }
-        else if (mod.value.type == 'branchall') {
-            mod.value.branches = mod.value.branches.map((branch) => {
-                branch.modules = removeAtId(branch.modules, id);
-                return branch;
-            });
-        }
-        else if (mod.value.type == 'branchone') {
-            mod.value.branches = mod.value.branches.map((branch) => {
-                branch.modules = removeAtId(branch.modules, id);
-                return branch;
-            });
-            mod.value.default = removeAtId(mod.value.default, id);
-        }
-        else if (mod.value.type == 'aiagent') {
-            mod.value.tools = removeAgentToolById(mod.value.tools, id);
-        }
-        return mod;
-    });
-}
 let sidebarMode = 'graph';
 let minHeight = $state(0);
 let flowPaneWidth = $state(0);
-let compactTopbar = $derived(flowPaneWidth < 700);
-export function selectNextId(id) {
-    if (flowStore.val.value.modules) {
-        let allIds = dfs(flowStore.val.value.modules, (mod) => mod.id);
-        if (allIds.length > 1) {
-            const idx = allIds.indexOf(id);
-            selectionManager.selectId(idx == 0 ? allIds[0] : allIds[idx - 1]);
-        }
-        else {
-            selectionManager.selectId('settings-metadata');
-        }
-    }
-}
+let compactTopbar = $derived(flowPaneWidth < 800);
 function findModuleById(id) {
-    return dfsByModule(id, flowStore.val.value.modules)[0];
+    return findModuleInFlow(flowStore.val.value, id);
 }
 export async function addBranch(id) {
     push(history, flowStore.val);
@@ -234,13 +179,8 @@ export function removeBranch(id, index) {
         module.value.branches.splice(index - offset, 1);
     }
 }
-let deleteCallback = $state(undefined);
-let dependents = $state({});
-/** Confirmation gate for actions that would empty or duplicate groups */
-let affectedGroupsPending = $state([]);
-let affectedGroupsAction = $state(undefined);
-let affectedGroupsCancel = $state(undefined);
-let affectedGroupsActionLabel = $state('delete');
+let pendingDeleteConfirmation = $state(undefined);
+let pendingGroupAction = $state(undefined);
 let graph = $state(undefined);
 let noteMode = $state(false);
 let diffManager = $derived(getDiffManager());
@@ -256,74 +196,48 @@ export function enableNotes() {
 function toggleNoteMode() {
     noteMode = !noteMode;
 }
-export function deleteMultiple(ids) {
-    const structureIds = [];
-    const toolIds = [];
-    for (const id of ids) {
-        if (findInStructure(proxy.items, id)) {
-            structureIds.push(id);
-        }
-        else {
-            toolIds.push(id);
-        }
-    }
-    const deletingSet = new Set(ids);
-    const allDeps = {};
-    for (const id of ids) {
-        const deps = getDependentComponents(id, flowStore.val);
-        for (const [depId, exprs] of Object.entries(deps)) {
-            if (!deletingSet.has(depId)) {
-                allDeps[depId] = [...(allDeps[depId] ?? []), ...exprs];
-            }
-        }
+function applyDeletePlan(plan) {
+    executeDeletePlan(plan, {
+        history,
+        flowStore,
+        flowStateStore,
+        selectionManager,
+        onDelete
+    });
+}
+function requestDelete(ids) {
+    const request = prepareDeleteRequest({
+        ids,
+        flow: flowStore.val,
+        tree: proxy.items,
+        proxy,
+        displayState: groupDisplayState
+    });
+    if (!request) {
+        return;
     }
-    const opts = { displayState: groupDisplayState };
-    const { emptiedGroups, duplicateGroups, commit } = structureIds.length > 0
-        ? proxy.prepareMutation((tree) => {
-            for (const id of structureIds) {
-                const found = findInStructure(tree, id);
-                if (found)
-                    found.parentChildren.splice(found.index, 1);
-            }
-        }, opts)
-        : {
-            emptiedGroups: [],
-            duplicateGroups: [],
-            commit: () => { }
-        };
-    const affectedGroups = [...emptiedGroups, ...duplicateGroups];
-    const cb = () => {
-        push(history, flowStore.val);
-        commit({ removeDuplicates: duplicateGroups.length > 0 });
-        for (const id of toolIds) {
-            removeAgentToolByIdDeep(flowStore.val.value.modules, id, (removed) => {
-                deleteFlowStateById(removed.id, flowStateStore);
-            });
-        }
-        for (const id of ids) {
-            delete flowStateStore.val[id];
-        }
-        selectionManager.clearSelection();
-        refreshStateStore(flowStore);
-    };
     const proceed = () => {
-        if (Object.keys(allDeps).length > 0) {
-            dependents = allDeps;
-            deleteCallback = cb;
+        if (request.needsDependencyConfirmation) {
+            pendingDeleteConfirmation = { plan: request.plan };
         }
         else {
-            cb();
+            applyDeletePlan(request.plan);
         }
     };
-    if (affectedGroups.length > 0) {
-        affectedGroupsPending = affectedGroups;
-        affectedGroupsActionLabel = 'delete';
-        affectedGroupsAction = proceed;
+    if ((request.plan.structureDelete?.affectedGroups.length ?? 0) > 0) {
+        pendingGroupAction = {
+            groups: request.plan.structureDelete.affectedGroups,
+            label: 'delete',
+            confirm: proceed
+        };
     }
     else {
         proceed();
     }
 }
+export function deleteMultiple(ids) {
+    requestDelete(ids);
+}
 // Operates directly on the flat module array (not the structure tree).
 // Cloned modules are inserted after the originals, intentionally outside any group.
 export function duplicateMultiple(ids) {
@@ -397,7 +311,8 @@ async function loadLastJob(path, moduleId) {
                 ...(flowStateStore.val[moduleId] ?? {}),
                 previewResult: getJobResult.result,
                 previewJobId: previousJobId[0].id,
-                previewSuccess: getJobResult.success
+                previewSuccess: getJobResult.success,
+                previewLogs: getJobResult['logs']
             };
             if (stepHistoryLoader) {
                 stepHistoryLoader.stepStates[moduleId].loadingJobs = false;
@@ -414,21 +329,21 @@ $effect(() => {
 	<ConfirmationModal
 		title="Confirm deleting step with dependents"
 		confirmationText="Delete step"
-		open={Boolean(deleteCallback)}
+		open={Boolean(pendingDeleteConfirmation)}
 		on:confirmed={() => {
-			if (deleteCallback) {
-				deleteCallback()
-				deleteCallback = undefined
+			if (pendingDeleteConfirmation) {
+				applyDeletePlan(pendingDeleteConfirmation.plan)
+				pendingDeleteConfirmation = undefined
 			}
 		}}
 		on:canceled={() => {
-			deleteCallback = undefined
+			pendingDeleteConfirmation = undefined
 		}}
 	>
 		<div class="text-primary pb-2"
 			>Found the following steps that will require changes after this step is deleted:</div
 		>
-		{#each Object.entries(dependents) as [k, v]}
+		{#each Object.entries(pendingDeleteConfirmation?.plan.dependents ?? {}) as [k, v]}
 			<div class="pb-3">
 				<h3 class="text-secondary font-semibold">{k}</h3>
 				<ul class="text-sm">
@@ -441,36 +356,32 @@ $effect(() => {
 	</ConfirmationModal>
 
 	<ConfirmationModal
-		title={affectedGroupsPending.length === 1 ? 'Remove group?' : 'Remove groups?'}
-		confirmationText={affectedGroupsActionLabel === 'delete' ? 'Delete step' : 'Move step'}
-		open={affectedGroupsPending.length > 0}
+		title={pendingGroupAction?.groups.length === 1 ? 'Remove group?' : 'Remove groups?'}
+		confirmationText={pendingGroupAction?.label === 'delete' ? 'Delete step' : 'Move step'}
+		open={Boolean(pendingGroupAction)}
 		on:confirmed={() => {
-			affectedGroupsAction?.()
-			affectedGroupsPending = []
-			affectedGroupsAction = undefined
-			affectedGroupsCancel = undefined
+			pendingGroupAction?.confirm()
+			pendingGroupAction = undefined
 		}}
 		on:canceled={() => {
-			affectedGroupsCancel?.()
-			affectedGroupsPending = []
-			affectedGroupsAction = undefined
-			affectedGroupsCancel = undefined
+			pendingGroupAction?.cancel?.()
+			pendingGroupAction = undefined
 		}}
 	>
-		{#if affectedGroupsPending.length === 1}
-			{@const group = affectedGroupsPending[0]}
+		{#if pendingGroupAction?.groups.length === 1}
+			{@const group = pendingGroupAction.groups[0]}
 			<p
 				>The group{group.summary ? ` "${group.summary}"` : ''} will be removed (empty or duplicate).
-				Are you sure you want to {affectedGroupsActionLabel} the step?</p
+				Are you sure you want to {pendingGroupAction.label} the step?</p
 			>
 		{:else}
 			<p>The following groups will be removed (empty or duplicate):</p>
 			<ul class="list-disc pl-4 mt-1">
-				{#each affectedGroupsPending as group}
+				{#each pendingGroupAction?.groups ?? [] as group}
 					<li>{group.summary || `${group.start_id} → ${group.end_id}`}</li>
 				{/each}
 			</ul>
-			<p class="mt-2">Are you sure you want to {affectedGroupsActionLabel} the step?</p>
+			<p class="mt-2">Are you sure you want to {pendingGroupAction?.label} the step?</p>
 		{/if}
 	</ConfirmationModal>
 </Portal>
@@ -532,78 +443,7 @@ $effect(() => {
 			suspendStatus={suspendStatus.val}
 			{flowHasChanged}
 			chatInputEnabled={Boolean(flowStore.val.value?.chat_input_enabled)}
-			onDelete={(id) => {
-				dependents = getDependentComponents(id, flowStore.val)
-
-				if (id === 'preprocessor') {
-					const cb = () => {
-						push(history, flowStore.val)
-						selectionManager.selectId('Input')
-						flowStore.val.value.preprocessor_module = undefined
-						refreshStateStore(flowStore)
-						onDelete?.(id)
-						delete flowStateStore.val[id]
-					}
-					if (Object.keys(dependents).length > 0) {
-						deleteCallback = cb
-					} else {
-						cb()
-					}
-					return
-				}
-
-				if (!findInStructure(proxy.items, id)) {
-					const cb = () => {
-						push(history, flowStore.val)
-						selectNextId(id)
-						const removed = removeAgentToolByIdDeep(flowStore.val.value.modules, id, (tool) => {
-							deleteFlowStateById(tool.id, flowStateStore)
-						})
-						if (!removed) return
-						refreshStateStore(flowStore)
-						onDelete?.(id)
-					}
-					if (Object.keys(dependents).length > 0) {
-						deleteCallback = cb
-					} else {
-						cb()
-					}
-					return
-				}
-
-				const dsOpts = { displayState: groupDisplayState }
-				const { emptiedGroups, duplicateGroups, commit } = proxy.prepareMutation((tree) => {
-					const found = findInStructure(tree, id)
-					if (found) found.parentChildren.splice(found.index, 1)
-				}, dsOpts)
-
-				const affectedGroups = [...emptiedGroups, ...duplicateGroups]
-
-				const cb = () => {
-					push(history, flowStore.val)
-					selectNextId(id)
-					commit({ removeDuplicates: duplicateGroups.length > 0 })
-					refreshStateStore(flowStore)
-					onDelete?.(id)
-					delete flowStateStore.val[id]
-				}
-
-				const proceed = () => {
-					if (Object.keys(dependents).length > 0) {
-						deleteCallback = cb
-					} else {
-						cb()
-					}
-				}
-
-				if (affectedGroups.length > 0) {
-					affectedGroupsPending = affectedGroups
-					affectedGroupsActionLabel = 'delete'
-					affectedGroupsAction = proceed
-				} else {
-					proceed()
-				}
-			}}
+			onDelete={(id) => requestDelete([id])}
 			onInsert={async (detail) => {
 				if (!flowStore.val.value.modules || !Array.isArray(flowStore.val.value.modules)) return
 				await tick()
@@ -682,10 +522,12 @@ $effect(() => {
 					}
 
 					if (affectedGroups.length > 0) {
-						affectedGroupsPending = affectedGroups
-						affectedGroupsActionLabel = 'move'
-						affectedGroupsAction = doMove
-						affectedGroupsCancel = () => moveManager.clearMoving()
+						pendingGroupAction = {
+							groups: affectedGroups,
+							label: 'move',
+							confirm: doMove,
+							cancel: () => moveManager.clearMoving()
+						}
 					} else {
 						doMove()
 					}
@@ -724,9 +566,7 @@ $effect(() => {
 
 				// Agent tool inserts operate on the FlowModule's tools array directly
 				if (isAgentInsert) {
-					const agentMod = getAllModules(flowStore.val.value.modules).find(
-						(m) => m.id === detail.agentId
-					)
+					const agentMod = findModuleInFlow(flowStore.val.value, detail.agentId!)
 					if (agentMod && (agentMod.value as any).tools) {
 						const tools = (agentMod.value as any).tools as AgentTool[]
 						await insertNewModuleAtIndex(
@@ -929,6 +769,9 @@ $effect(() => {
 			}}
 			onUpdateMock={(detail) => {
 				let module = findModuleById(detail.id)
+				if (!module) {
+					throw new Error(`Node ${detail.id} not found`)
+				}
 				module.mock = $state.snapshot(detail.mock)
 				refreshStateStore(flowStore)
 			}}

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

@@ -64,8 +64,6 @@ declare const FlowModuleSchemaMap: $$__sveltets_2_IsomorphicComponent<Props, {
         path: string;
         summary: string;
     }, inlineScript?: InlineScript, toolKind?: SpecialToolKind | "flowmoduleTool") => Promise<FlowModule[] | AgentTool[]>;
-    removeAtId: (modules: FlowModule[], id: string) => FlowModule[];
-    selectNextId: (id: any) => void;
     addBranch: (id: string) => Promise<void>;
     removeBranch: (id: string, index: number) => void;
     isNodeVisible: (nodeId: string) => boolean;

package/package/components/flows/pickers/PickHubScriptQuick.svelte

@@ -21,7 +21,7 @@ let listHubScriptsCached = createCache(async ({ filter, kind, appFilter }) => {
 
 <script lang="ts">import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { Skeleton } from '../../common';
-import { classNames, createCache, sendUserToast } from '../../../utils';
+import { classNames, createCache } from '../../../utils';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import { IntegrationService, ScriptService } from '../../../gen';
 import { Circle, ExternalLink } from 'lucide-svelte';
@@ -86,7 +86,7 @@ async function handlePickScript(item) {
             await ScriptService.pickHubScriptByPath({ path: item.path });
         }
         catch (error) {
-            sendUserToast('Failed to call ScriptService.pickHubScriptByPath: ' + error, 'error');
+            console.error('Failed to track hub script pick:', error);
             // Don't block the flow if tracking fails
         }
     }

package/package/components/flows/previousResults.js

@@ -1,5 +1,5 @@
 import { schemaToObject } from '../../schema';
-import { getAllSubmodules, getSubModules } from './flowExplorer';
+import { collectDescendantFlowModules, getChildModuleBranches, getModuleArrayContainer } from './flowTree';
 export function dfs(id, flow, getParents = true) {
     return dfsByModule(id, flow.value.modules, getParents);
 }
@@ -14,7 +14,7 @@ export function dfsByModule(id, modules, getParents = true) {
                     return getParents ? [module] : modules.slice(0, i + 1).reverse();
                 }
                 else {
-                    const submodules = getSubModules(module);
+                    const submodules = getChildModuleBranches(module);
                     if (submodules) {
                         let found = rec(id, submodules);
                         if (found) {
@@ -85,9 +85,7 @@ export function getPreviousIds(id, flow, include_node) {
     }
     return df
         .map((x) => {
-        let submodules = getAllSubmodules(x)
-            .flat()
-            .map((x) => x.id);
+        let submodules = collectDescendantFlowModules(x).map((submodule) => submodule.id);
         if (submodules.includes(id)) {
             return [x.id];
         }
@@ -264,42 +262,16 @@ export function filterNestedObject(obj, nestedKeys) {
  * based on the same logic used in FlowModuleWrapper.svelte
  */
 export function getPreviousModule(moduleId, flow) {
-    function searchInModules(modules) {
-        for (let i = 0; i < modules.length; i++) {
-            const module = modules[i];
-            if (module.id === moduleId) {
-                // Found the module, return previous module ID if it exists
-                return i > 0 ? modules[i - 1] : undefined;
-            }
-            // Search in submodules based on module type
-            if (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow') {
-                const result = searchInModules(module.value.modules);
-                if (result !== null)
-                    return result;
-            }
-            else if (module.value.type === 'branchone') {
-                // Search in default branch
-                const defaultResult = searchInModules(module.value.default);
-                if (defaultResult !== null)
-                    return defaultResult;
-                // Search in each branch
-                for (const branch of module.value.branches) {
-                    const branchResult = searchInModules(branch.modules);
-                    if (branchResult !== null)
-                        return branchResult;
-                }
-            }
-            else if (module.value.type === 'branchall') {
-                // Search in each branch
-                for (const branch of module.value.branches) {
-                    const branchResult = searchInModules(branch.modules);
-                    if (branchResult !== null)
-                        return branchResult;
-                }
-            }
+    const container = getModuleArrayContainer(flow.value, moduleId);
+    if (!container || container.index === 0) {
+        return undefined;
+    }
+    for (let i = container.index - 1; i >= 0; i--) {
+        const mod = container.modules[i];
+        const toolType = mod.value?.tool_type;
+        if (toolType === undefined || toolType === 'flowmodule') {
+            return mod;
         }
-        return null; // Continue searching (module not found in this branch)
     }
-    const result = searchInModules(flow.value.modules);
-    return result === null ? undefined : result;
+    return undefined;
 }

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

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

package/package/components/flows/previousResults.test.js

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+import { dfsByModule, getPreviousIds, getPreviousModule } from './previousResults';
+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: {}
+        }
+    };
+}
+describe('previousResults', () => {
+    it('returns real ai agent tools when walking parent chains', () => {
+        const setup = makeRawModule('setup');
+        const lookup = makeFlowModuleTool(makeRawModule('lookup_user'));
+        const sum = makeFlowModuleTool(makeRawModule('sum'));
+        const agent = makeAiAgent('agent', [lookup, sum]);
+        const path = dfsByModule('sum', [setup, agent]);
+        expect(path).toEqual([sum, agent]);
+        expect(path[0]).toBe(sum);
+    });
+    it('keeps previous-id ordering for ai agent flowmodule tools', () => {
+        const setup = makeRawModule('setup');
+        const lookup = makeFlowModuleTool(makeRawModule('lookup_user'));
+        const sum = makeFlowModuleTool(makeRawModule('sum'));
+        const agent = makeAiAgent('agent', [lookup, sum]);
+        const flow = {
+            summary: 'Flow',
+            value: {
+                modules: [setup, agent]
+            }
+        };
+        expect(dfsByModule('sum', flow.value.modules, false).map((module) => module.id)).toEqual([
+            'sum',
+            'lookup_user',
+            'setup'
+        ]);
+        expect(getPreviousIds('sum', flow, false)).toEqual(['lookup_user', 'setup']);
+        expect(getPreviousModule('sum', flow)?.id).toBe('lookup_user');
+    });
+});

package/package/components/flows/propPicker/OutputPicker.svelte

@@ -27,7 +27,7 @@ export function toggleOpen(forceOpen = false) {
     if (popover?.isOpened() && !forceOpen) {
         popover?.close();
     }
-    else {
+    else if (!popover?.isOpened()) {
         popover?.open();
     }
 }
@@ -148,6 +148,7 @@ onMount(() => {
 					flip: false
 				}}
 				usePointerDownOutside
+				excludeSelectors={`[data-run-button="${id}"]`}
 				closeOnOutsideClick={false}
 				on:click={(e) => {
 					e.preventDefault()