windmill-components 1.655.1 → 1.665.0

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

@@ -6,7 +6,7 @@ import { nextId, copyId } from '../flowModuleNextId';
 import { push } from '../../../history.svelte';
 import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
 import Portal from '../../Portal.svelte';
-import { getDependentComponents } from '../flowExplorer';
+import { getAllModules, getDependentComponents } from '../flowExplorer';
 import { locateModules, groupByParent } from '../multiSelectUtils';
 import { workspaceStore } from '../../../stores';
 import { copilotInfo } from '../../../aiStore';
@@ -24,6 +24,9 @@ import { ModulesTestStates } from '../../modulesTest.svelte';
 import { flowModuleToAgentTool, createMcpTool, createWebsearchTool, createAiAgentTool, SPECIAL_TOOL_KINDS, agentToolToFlowModule } from '../agentToolUtils';
 import { loadFlowModuleState } from '../flowStateUtils.svelte';
 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';
 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();
@@ -31,6 +34,8 @@ const { triggersCount, triggersState } = getContext('TriggerContext');
 const { flowPropPickerConfig } = getContext('PropPickerContext');
 // Get NoteEditor context for note position updates
 const noteEditorContext = getNoteEditorContext();
+const proxy = new GroupedModulesProxy(flowStore);
+const groupDisplayState = new GroupDisplayState(() => flowStore.val.value?.groups ?? []);
 $effect(() => {
     if (!moveManager.movingModuleId)
         return;
@@ -42,8 +47,8 @@ $effect(() => {
     document.addEventListener('keydown', onKeyDown, true);
     return () => document.removeEventListener('keydown', onKeyDown, true);
 });
-export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, inlineScript, toolKind) {
-    push(history, flowStore.val);
+/** Create a new FlowModule without inserting it into any array */
+async function createNewModule(kind, wsScript, wsFlow, inlineScript) {
     let module = emptyModule(flowStateStore.val, flowStore.val, kind == 'flow');
     let state = emptyFlowModuleState();
     flowStateStore.val[module.id] = state;
@@ -100,6 +105,11 @@ export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsF
         module.summary = 'Terminate flow';
         module.stop_after_if = { skip_if_stopped: false, expr: 'true' };
     }
+    return module;
+}
+export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, inlineScript, toolKind) {
+    push(history, flowStore.val);
+    const module = await createNewModule(kind, wsScript, wsFlow, inlineScript);
     if (!modules)
         return [module];
     if (toolKind === 'mcpTool') {
@@ -128,7 +138,7 @@ export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsF
         return modules;
     }
     else {
-        // Standard FlowModule insertion (existing behavior)
+        // Standard FlowModule insertion
         modules.splice(index, 0, module);
         return modules;
     }
@@ -178,6 +188,8 @@ export function removeAtId(modules, id) {
 }
 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);
@@ -224,6 +236,11 @@ export function removeBranch(id, index) {
 }
 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 graph = $state(undefined);
 let noteMode = $state(false);
 let diffManager = $derived(getDiffManager());
@@ -250,23 +267,44 @@ export function deleteMultiple(ids) {
             }
         }
     }
+    const opts = { displayState: groupDisplayState };
+    const { emptiedGroups, duplicateGroups, commit } = proxy.prepareMutation((tree) => {
+        for (const id of ids) {
+            const found = findInStructure(tree, id);
+            if (found)
+                found.parentChildren.splice(found.index, 1);
+        }
+    }, opts);
+    const affectedGroups = [...emptiedGroups, ...duplicateGroups];
     const cb = () => {
         push(history, flowStore.val);
+        commit({ removeDuplicates: duplicateGroups.length > 0 });
         for (const id of ids) {
-            removeAtId(flowStore.val.value.modules, id);
             delete flowStateStore.val[id];
         }
         selectionManager.clearSelection();
         refreshStateStore(flowStore);
     };
-    if (Object.keys(allDeps).length > 0) {
-        dependents = allDeps;
-        deleteCallback = cb;
+    const proceed = () => {
+        if (Object.keys(allDeps).length > 0) {
+            dependents = allDeps;
+            deleteCallback = cb;
+        }
+        else {
+            cb();
+        }
+    };
+    if (affectedGroups.length > 0) {
+        affectedGroupsPending = affectedGroups;
+        affectedGroupsActionLabel = 'delete';
+        affectedGroupsAction = proceed;
     }
     else {
-        cb();
+        proceed();
     }
 }
+// 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) {
     const locations = locateModules(ids, flowStore.val.value.modules);
     const groups = groupByParent(locations);
@@ -300,6 +338,9 @@ export function duplicateMultiple(ids) {
 export function moveMultiple(ids) {
     moveManager.toggleMovingMultiple(ids);
 }
+export function createGroup(ids) {
+    graph?.createGroupFromSelection(ids);
+}
 const dispatch = createEventDispatcher();
 export function setExpr(module, expr) {
     if (module.value.type == 'forloopflow') {
@@ -377,12 +418,47 @@ $effect(() => {
 			</div>
 		{/each}
 	</ConfirmationModal>
+
+	<ConfirmationModal
+		title={affectedGroupsPending.length === 1 ? 'Remove group?' : 'Remove groups?'}
+		confirmationText={affectedGroupsActionLabel === 'delete' ? 'Delete step' : 'Move step'}
+		open={affectedGroupsPending.length > 0}
+		on:confirmed={() => {
+			affectedGroupsAction?.()
+			affectedGroupsPending = []
+			affectedGroupsAction = undefined
+			affectedGroupsCancel = undefined
+		}}
+		on:canceled={() => {
+			affectedGroupsCancel?.()
+			affectedGroupsPending = []
+			affectedGroupsAction = undefined
+			affectedGroupsCancel = undefined
+		}}
+	>
+		{#if affectedGroupsPending.length === 1}
+			{@const group = affectedGroupsPending[0]}
+			<p
+				>The group{group.summary ? ` "${group.summary}"` : ''} will be removed (empty or duplicate).
+				Are you sure you want to {affectedGroupsActionLabel} 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}
+					<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>
+		{/if}
+	</ConfirmationModal>
 </Portal>
-<div class="flex flex-col h-full relative -pt-1">
+<div class="flex flex-col h-full relative -pt-1" bind:clientWidth={flowPaneWidth}>
 	<div
 		class={`z-50 absolute inline-flex flex-col gap-2 top-3 left-1/2 -translate-x-1/2 flex-initial  items-center transition-colors duration-[400ms] ease-linear bg-surface-100`}
 	>
 		<FlowStickyNode
+			compact={compactTopbar}
 			{disableAi}
 			{showFlowAiButton}
 			{disableSettings}
@@ -412,8 +488,12 @@ $effect(() => {
 			{moveManager}
 			maxHeight={minHeight}
 			modules={flowStore.val.value.modules}
+			groupedModules={proxy.items}
+			groupError={proxy.error}
+			{groupDisplayState}
 			{noteMode}
 			notes={flowStore.val.value.notes}
+			groups={flowStore.val.value.groups}
 			preprocessorModule={flowStore.val.value?.preprocessor_module}
 			failureModule={flowStore.val.value?.failure_module}
 			currentInputSchema={flowStore.val.schema}
@@ -433,159 +513,274 @@ $effect(() => {
 			chatInputEnabled={Boolean(flowStore.val.value?.chat_input_enabled)}
 			onDelete={(id) => {
 				dependents = getDependentComponents(id, flowStore.val)
-				const cb = () => {
-					push(history, flowStore.val)
-					if (id === 'preprocessor') {
+
+				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 {
-						selectNextId(id)
-						removeAtId(flowStore.val.value.modules, id)
+						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]
 				}
 
-				if (Object.keys(dependents).length > 0) {
-					deleteCallback = cb
+				const proceed = () => {
+					if (Object.keys(dependents).length > 0) {
+						deleteCallback = cb
+					} else {
+						cb()
+					}
+				}
+
+				if (affectedGroups.length > 0) {
+					affectedGroupsPending = affectedGroups
+					affectedGroupsActionLabel = 'delete'
+					affectedGroupsAction = proceed
 				} else {
-					cb()
+					proceed()
 				}
 			}}
 			onInsert={async (detail) => {
-				{
-					let originalModules
-					let targetModules
-					if (
-						detail.sourceId == 'Input' ||
-						detail.targetId == 'Result' ||
-						detail.kind == 'trigger'
-					) {
-						targetModules = flowStore.val.value.modules
-					}
+				if (!flowStore.val.value.modules || !Array.isArray(flowStore.val.value.modules)) return
+				await tick()
 
-					dfs(flowStore.val.value.modules, (mod, modules, branches) => {
-						if (mod.id == moveManager.movingModuleId) {
-							originalModules = modules
-						}
-						if (detail.branch) {
-							if (mod.id == detail.branch.rootId) {
-								targetModules = branches[detail.branch.branch]
-							}
-						} 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
+				// --- MOVE ---
+				if (moveManager.movingModuleId) {
+					const movedIds = moveManager.movingIds ?? [moveManager.movingModuleId]
+					const movingId = moveManager.movingModuleId
+
+					let mutated = false
+					const moveOpts = { displayState: groupDisplayState }
+					const { emptiedGroups, duplicateGroups, commit } = proxy.prepareMutation((tree) => {
+						let originalModules: FlowStructureNode[] | undefined
+						let targetModules: FlowStructureNode[] | undefined
+
+						if (detail.sourceId == 'Input' || detail.targetId == 'Result') {
+							targetModules = tree
 						}
-					})
-					if (flowStore.val.value.modules && Array.isArray(flowStore.val.value.modules)) {
-						await tick()
-						if (moveManager.movingModuleId) {
-							push(history, flowStore.val)
-							if (!originalModules || !targetModules) {
-								moveManager.clearMoving()
-								return
-							}
-							if (moveManager.movingIds && moveManager.movingIds.length > 1) {
-								// Multi-move: splice out all moving modules from their parent, insert at target
-								const firstIndex = originalModules.findIndex(
-									(m) => m.id === moveManager.movingIds?.[0]
-								)
-								const removedModules = originalModules.splice(
-									firstIndex,
-									moveManager.movingIds.length
-								)
-								let insertIndex = detail.index
-								if (originalModules === targetModules && firstIndex < detail.index) {
-									insertIndex -= moveManager.movingIds.length
-								}
-								targetModules.splice(insertIndex, 0, ...removedModules)
-								selectionManager.selectByIds(removedModules.map((m) => m.id))
-							} else {
-								let indexToRemove = originalModules.findIndex((m) => moveManager.movingModuleId == m.id)
-								let [removedModule] = originalModules.splice(indexToRemove, 1)
-								// When moving within the same array, removal shifts subsequent indices down by 1
-								let insertIndex = detail.index
-								if (originalModules === targetModules && indexToRemove < detail.index) {
-									insertIndex -= 1
-								}
-								targetModules.splice(insertIndex, 0, removedModule)
-								selectionManager.selectId(removedModule.id)
+						dfsStructure(tree, (node, parentArray) => {
+							if (matchStructureNode(node, movingId)) originalModules = parentArray
+							if (detail.branch && matchStructureNode(node, detail.branch.rootId)) {
+								targetModules = node.branches[detail.branch.branch]?.children
+							} else if (
+								matchStructureNode(node, detail.sourceId ?? '') ||
+								matchStructureNode(node, detail.targetId ?? '')
+							) {
+								targetModules = parentArray
 							}
-							moveManager.clearMoving()
-						} else {
-							if (detail.isPreprocessor) {
-								await insertNewPreprocessorModule(
-									flowStore,
-									flowStateStore,
-									detail.inlineScript,
-									detail.script
-								)
-								selectionManager.selectId('preprocessor')
+						})
 
-								if (detail.inlineScript?.instructions) {
-									dispatch('generateStep', {
-										moduleId: 'preprocessor',
-										lang: detail.inlineScript?.language,
-										instructions: detail.inlineScript?.instructions
-									})
-								}
-							} else {
-								const index = (detail.agentId ? targetModules?.length : detail.index) ?? 0
-								const toolKind: SpecialToolKind | 'flowmoduleTool' | undefined = detail.agentId
-									? (SPECIAL_TOOL_KINDS as readonly string[]).includes(detail.kind)
-										? (detail.kind as SpecialToolKind)
-										: 'flowmoduleTool'
-									: undefined
-
-								await insertNewModuleAtIndex(
-									targetModules,
-									index,
-									detail.kind,
-									detail.script,
-									detail.flow,
-									detail.inlineScript,
-									toolKind
-								)
-								const id = targetModules[index].id
-								selectionManager.selectId(id)
-
-								if (detail.inlineScript?.instructions) {
-									dispatch('generateStep', {
-										moduleId: id,
-										lang: detail.inlineScript?.language,
-										instructions: detail.inlineScript?.instructions
-									})
-								}
-								if (detail.kind == 'trigger') {
-									await insertNewModuleAtIndex(
-										targetModules,
-										index + 1,
-										'forloop',
-										undefined,
-										undefined,
-										undefined
-									)
-									setExpr(targetModules[index + 1], `results.${id}`)
-									setScheduledPollSchedule(triggersState, triggersCount)
-								}
+						if (!originalModules || !targetModules) return
 
-								if (detail.flow?.path) {
-									loadLastJob(detail.flow.path, id)
-								} else if (detail.script?.path) {
-									loadLastJob(detail.script?.path, id)
-								}
+						if (movedIds.length > 1) {
+							const firstIndex = originalModules.findIndex((m) =>
+								matchStructureNode(m, movedIds[0])
+							)
+							if (firstIndex < 0) return
+							const removedModules = originalModules.splice(firstIndex, movedIds.length)
+							let insertIndex = detail.index
+							if (originalModules === targetModules && firstIndex < detail.index) {
+								insertIndex -= movedIds.length
 							}
+							targetModules.splice(insertIndex, 0, ...removedModules)
+						} else {
+							const indexToRemove = originalModules.findIndex((m) =>
+								matchStructureNode(m, movingId)
+							)
+							if (indexToRemove < 0) return
+							const [removed] = originalModules.splice(indexToRemove, 1)
+							let insertIndex = detail.index
+							if (originalModules === targetModules && indexToRemove < detail.index)
+								insertIndex -= 1
+							targetModules.splice(insertIndex, 0, removed)
 						}
+						mutated = true
+					}, moveOpts)
 
-						if (['branchone', 'branchall'].includes(detail.kind)) {
-							await addBranch(targetModules[detail.index ?? 0].id)
+					if (!mutated) {
+						moveManager.clearMoving()
+						return
+					}
+
+					const affectedGroups = [...emptiedGroups, ...duplicateGroups]
+
+					const doMove = () => {
+						push(history, flowStore.val)
+						commit({ removeDuplicates: duplicateGroups.length > 0 })
+						if (movedIds.length > 1) {
+							selectionManager.selectByIds(movedIds)
+						} else {
+							selectionManager.selectId(movingId)
 						}
+						moveManager.clearMoving()
 						refreshStateStore(flowStore)
 						dispatch('change')
 					}
+
+					if (affectedGroups.length > 0) {
+						affectedGroupsPending = affectedGroups
+						affectedGroupsActionLabel = 'move'
+						affectedGroupsAction = doMove
+						affectedGroupsCancel = () => moveManager.clearMoving()
+					} else {
+						doMove()
+					}
+					return
+				}
+
+				// --- INSERT ---
+				if (detail.isPreprocessor) {
+					await insertNewPreprocessorModule(
+						flowStore,
+						flowStateStore,
+						detail.inlineScript,
+						detail.script
+					)
+					selectionManager.selectId('preprocessor')
+					if (detail.inlineScript?.instructions) {
+						dispatch('generateStep', {
+							moduleId: 'preprocessor',
+							lang: detail.inlineScript?.language,
+							instructions: detail.inlineScript?.instructions
+						})
+					}
+					refreshStateStore(flowStore)
+					dispatch('change')
+					return
+				}
+
+				push(history, flowStore.val)
+
+				const isAgentInsert = !!detail.agentId
+				const toolKind: SpecialToolKind | 'flowmoduleTool' | undefined = isAgentInsert
+					? (SPECIAL_TOOL_KINDS as readonly string[]).includes(detail.kind)
+						? (detail.kind as SpecialToolKind)
+						: 'flowmoduleTool'
+					: undefined
+
+				// 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
+					)
+					if (agentMod && (agentMod.value as any).tools) {
+						const tools = (agentMod.value as any).tools as AgentTool[]
+						await insertNewModuleAtIndex(
+							tools,
+							tools.length,
+							detail.kind as InsertKind,
+							detail.script,
+							detail.flow ? { path: detail.flow.path, summary: detail.flow.summary } : undefined,
+							detail.inlineScript,
+							toolKind
+						)
+						const id = tools[tools.length - 1].id
+						selectionManager.selectId(id)
+					}
+					refreshStateStore(flowStore)
+					dispatch('change')
+					return
+				}
+
+				// Regular module insert: create the module, then insert a leaf node via tree mutation
+				const module = await createNewModule(
+					detail.kind as InsertKind,
+					detail.script,
+					detail.flow ? { path: detail.flow.path, summary: detail.flow.summary } : undefined,
+					detail.inlineScript
+				)
+				const index = detail.index ?? 0
+				const extraModules: FlowModule[] = [module]
+
+				// For trigger inserts, also create the forloop module
+				let loopModule: FlowModule | undefined
+				if (detail.kind == 'trigger') {
+					loopModule = await createNewModule('forloop')
+					setExpr(loopModule, `results.${module.id}`)
+					extraModules.push(loopModule)
 				}
+
+				proxy.applyTreeMutation(
+					(tree) => {
+						// Find target array in the snapshot
+						let targetArray: FlowStructureNode[] | undefined
+						if (
+							detail.sourceId == 'Input' ||
+							detail.targetId == 'Result' ||
+							detail.kind == 'trigger'
+						) {
+							targetArray = tree
+						}
+						dfsStructure(tree, (node, parentArray) => {
+							if (detail.branch && matchStructureNode(node, detail.branch.rootId)) {
+								targetArray = node.branches[detail.branch.branch]?.children
+							} else if (
+								matchStructureNode(node, detail.sourceId ?? '') ||
+								matchStructureNode(node, detail.targetId ?? '')
+							) {
+								targetArray = parentArray
+							}
+						})
+						if (!targetArray) targetArray = tree
+
+						// Insert the structure node (correct kind for containers like branchone/branchall)
+						targetArray.splice(index, 0, moduleToStructureNode(module))
+
+						// For trigger: also insert the forloop node after it
+						if (loopModule) {
+							targetArray.splice(index + 1, 0, moduleToStructureNode(loopModule))
+						}
+					},
+					{ extraModules, displayState: groupDisplayState }
+				)
+
+				selectionManager.selectId(module.id)
+
+				if (detail.inlineScript?.instructions) {
+					dispatch('generateStep', {
+						moduleId: module.id,
+						lang: detail.inlineScript?.language,
+						instructions: detail.inlineScript?.instructions
+					})
+				}
+				if (detail.kind == 'trigger') {
+					setScheduledPollSchedule(triggersState, triggersCount)
+				}
+				if (detail.flow?.path) {
+					loadLastJob(detail.flow.path, module.id)
+				} else if (detail.script?.path) {
+					loadLastJob(detail.script?.path, module.id)
+				}
+
+				if (['branchone', 'branchall'].includes(detail.kind)) {
+					await addBranch(module.id)
+				}
+				refreshStateStore(flowStore)
+				dispatch('change')
 			}}
 			onNewBranch={async (id) => {
 				if (id) {
@@ -631,6 +826,17 @@ $effect(() => {
 						mod.id = newId
 					}
 				})
+				const groups = flowStore.val.value.groups
+				if (groups) {
+					for (const group of groups) {
+						if (group.start_id === id) {
+							group.start_id = newId
+						}
+						if (group.end_id === id) {
+							group.end_id = newId
+						}
+					}
+				}
 				flowStateStore.val[newId] = flowStateStore.val[id]
 				delete flowStateStore.val[id]
 				refreshStateStore(flowStore)

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

@@ -96,6 +96,7 @@ declare const FlowModuleSchemaMap: $$__sveltets_2_IsomorphicComponent<Props, {
     deleteMultiple: (ids: string[]) => void;
     duplicateMultiple: (ids: string[]) => void;
     moveMultiple: (ids: string[]) => void;
+    createGroup: (ids: string[]) => void;
     setExpr: (module: FlowModule, expr: string) => void;
 }, "suspendStatus" | "sidebarSize">;
 type FlowModuleSchemaMap = InstanceType<typeof FlowModuleSchemaMap>;

package/package/components/flows/map/FlowStickyNode.svelte

@@ -6,30 +6,38 @@ import AIButton from '../../copilot/chat/AIButton.svelte';
 import Popover from '../../Popover.svelte';
 import Button from '../../common/button/Button.svelte';
 import { AIBtnClasses } from '../../copilot/chat/AIButtonStyle';
-let { disableSettings, disableStaticInputs, smallErrorHandler, aiChatOpen, showFlowAiButton, toggleAiChat, noteMode, toggleNoteMode, disableAi, diffManager } = $props();
+let { disableSettings, disableStaticInputs, smallErrorHandler, aiChatOpen, showFlowAiButton, toggleAiChat, noteMode, toggleNoteMode, disableAi, diffManager, compact = false } = $props();
 const { selectionManager, flowStore } = getContext('FlowEditorContext');
 const selectedId = $derived(selectionManager.getSelectedId());
 </script>
 
 <div class="flex flex-row gap-2 p-1 rounded-md bg-surface">
 	{#if !disableSettings}
-		<Button
-			unifiedSize="sm"
-			wrapperClasses="min-w-36"
-			startIcon={{ icon: Settings }}
-			selected={selectedId?.startsWith('settings')}
-			variant="default"
-			title="Settings"
-			onClick={() => selectionManager.selectId('settings')}
-		>
-			Settings
-			{#if flowStore.val.value.same_worker}
-				<Badge color="blue" wrapperClass="max-h-[18px]">./shared</Badge>
-			{/if}
-		</Button>
+		<Popover>
+			<Button
+				unifiedSize="sm"
+				wrapperClasses={compact ? undefined : 'min-w-36'}
+				startIcon={{ icon: Settings }}
+				selected={selectedId?.startsWith('settings')}
+				variant="default"
+				title="Settings"
+				iconOnly={compact && !flowStore.val.value.same_worker}
+				onClick={() => selectionManager.selectId('settings')}
+			>
+				{#if !compact}
+					Settings
+				{/if}
+				{#if flowStore.val.value.same_worker}
+					<Badge color="blue" wrapperClass="max-h-[18px]">./shared</Badge>
+				{/if}
+			</Button>
+			{#snippet text()}
+				Settings
+			{/snippet}
+		</Popover>
 	{/if}
 	<Popover>
-		<FlowErrorHandlerItem {disableAi} small={smallErrorHandler} {diffManager} on:generateStep />
+		<FlowErrorHandlerItem {disableAi} small={smallErrorHandler} {compact} {diffManager} on:generateStep />
 		{#snippet text()}
 			Error Handler
 		{/snippet}