windmill-components 1.655.2 → 1.665.1

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -41,6 +41,7 @@ import { enterpriseLicense } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import { loadSchemaFromModule } from '../flowInfers';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
+import FlowModuleDebounce from './FlowModuleDebounce.svelte';
 import {} from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { checkIfParentLoop } from '../utils.svelte';
@@ -62,7 +63,7 @@ import Modal from '../../common/modal/Modal.svelte';
 import { getLocalSetting, sendUserToast, storeLocalSetting } from '../../../utils';
 const { selectionManager, currentEditor, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, customUi, executionCount } = getContext('FlowEditorContext');
 const selectedId = $derived(selectionManager.getSelectedId());
-let { flowModule = $bindable(), failureModule = false, preprocessorModule = false, parentModule = $bindable(), previousModule, scriptKind = 'script', scriptTemplate = 'script', noEditor, enableAi, savedModule = undefined, forceTestTab = false, highlightArg = undefined, isAgentTool = false } = $props();
+let { flowModule = $bindable(), failureModule = false, preprocessorModule = false, parentModule = $bindable(), previousModule, scriptKind = 'script', scriptTemplate = 'script', noEditor, enableAi, savedModule = undefined, forceTestTab = false, highlightArg = undefined, isAgentTool = false, siblingToolNames = undefined } = $props();
 let workspaceScriptTag = $state(undefined);
 let workspaceScriptLang = $state(undefined);
 let diffMode = $state(false);
@@ -589,6 +590,7 @@ onDestroyHook(() => {
 			}}
 			bind:summary={flowModule.summary}
 			{isAgentTool}
+			{siblingToolNames}
 		>
 			{#snippet header()}
 				<FlowModuleHeader
@@ -925,8 +927,8 @@ onDestroyHook(() => {
 														{enableAi}
 														{isAgentTool}
 														allowedAiTransforms={isAgentTool && flowModule.value.type === 'aiagent'
-														? ['user_message']
-														: undefined}
+															? ['user_message']
+															: undefined}
 														helperScript={retrieveDynCodeAndLang(flowModule.value)}
 														chatInputEnabled={flowStore.val.value?.chat_input_enabled ?? false}
 													/>
@@ -969,8 +971,8 @@ onDestroyHook(() => {
 											<Tabs bind:selected={advancedSelected} wrapperClass="shrink-0">
 												<Tab
 													value="retries"
-													active={flowModule.retry !== undefined}
-													label="Retries"
+													active={flowModule.retry !== undefined || flowModule.continue_on_error}
+													label="Error handling"
 												/>
 												{#if !selectedId.includes('failure')}
 													<Tab value="runtime" label="Runtime" />
@@ -989,6 +991,11 @@ onDestroyHook(() => {
 														label="Suspend"
 													/>
 													<Tab value="sleep" active={Boolean(flowModule.sleep)} label="Sleep" />
+													<Tab
+														value="debounce"
+														active={Boolean(flowModule.debouncing?.debounce_delay_s)}
+														label="Debounce"
+													/>
 													<Tab
 														value="mock"
 														active={Boolean(flowModule.mock?.enabled)}
@@ -1010,6 +1017,22 @@ onDestroyHook(() => {
 											{/if}
 											<div class="flex-1 overflow-auto p-4">
 												{#if advancedSelected === 'retries'}
+													<Section label="Continue on error">
+														{#snippet header()}
+															<Tooltip>
+																When enabled, the flow will continue to the next step even if this step fails (after exhausting all retries, if any). This enables to process the error in a branch one for instance.
+															</Tooltip>
+														{/snippet}
+														<Toggle
+															size="xs"
+															bind:checked={flowModule.continue_on_error}
+															options={{
+																left: 'Stop on error and propagate error up',
+																right: "Continue on error with error as step's return"
+															}}
+														/>
+													</Section>
+													<div class="mt-4"></div>
 													<Section label="Retries">
 														{#snippet header()}
 															<Tooltip
@@ -1019,19 +1042,6 @@ onDestroyHook(() => {
 																maximum number of attempts as defined below.
 															</Tooltip>
 														{/snippet}
-														<Label label="After all retries attempts have been exhausted:">
-															<Toggle
-																size="xs"
-																bind:checked={flowModule.continue_on_error}
-																options={{
-																	left: 'Stop on error and propagate error up',
-																	right: "Continue on error with error as step's return",
-																	rightTooltip:
-																		'When enabled, the flow will continue to the next step after going through all the retries (if any) even if this step fails. This enables to process the error in a branch one for instance.'
-																}}
-															/>
-														</Label>
-														<div class="my-8"></div>
 														<FlowRetries bind:flowModuleRetry={flowModule.retry} bind:flowModule />
 													</Section>
 												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'concurrency'}
@@ -1175,6 +1185,10 @@ onDestroyHook(() => {
 															bind:flowModule
 														/>
 													</div>
+												{:else if advancedSelected === 'debounce'}
+													<div>
+														<FlowModuleDebounce bind:flowModule {selectedId} />
+													</div>
 												{:else if advancedSelected === 'mock'}
 													<div>
 														<FlowModuleMockTransitionMessage />

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

@@ -13,6 +13,7 @@ interface Props {
     forceTestTab?: boolean;
     highlightArg?: string;
     isAgentTool?: boolean;
+    siblingToolNames?: string[];
 }
 declare const FlowModuleComponent: import("svelte").Component<Props, {}, "flowModule" | "parentModule">;
 type FlowModuleComponent = ReturnType<typeof FlowModuleComponent>;

package/package/components/flows/content/FlowModuleDebounce.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">import { getContext } from 'svelte';
+import DebounceLimit from '../DebounceLimit.svelte';
+let { flowModule = $bindable(), selectedId } = $props();
+const { flowStateStore } = getContext('FlowEditorContext');
+let debounce_delay_s = $state(flowModule.debouncing?.debounce_delay_s);
+let debounce_key = $state(flowModule.debouncing?.debounce_key);
+let debounce_args_to_accumulate = $state(flowModule.debouncing?.debounce_args_to_accumulate);
+let max_total_debouncing_time = $state(flowModule.debouncing?.max_total_debouncing_time);
+let max_total_debounces_amount = $state(flowModule.debouncing?.max_total_debounces_amount);
+// Re-sync local state when flowModule identity changes (e.g. switching selected module)
+$effect(() => {
+    // Reading flowModule.id to track identity changes
+    flowModule.id;
+    debounce_delay_s = flowModule.debouncing?.debounce_delay_s;
+    debounce_key = flowModule.debouncing?.debounce_key;
+    debounce_args_to_accumulate = flowModule.debouncing?.debounce_args_to_accumulate;
+    max_total_debouncing_time = flowModule.debouncing?.max_total_debouncing_time;
+    max_total_debounces_amount = flowModule.debouncing?.max_total_debounces_amount;
+});
+// Write back to flowModule when local state changes
+$effect(() => {
+    if (debounce_delay_s !== undefined && debounce_delay_s > 0) {
+        flowModule.debouncing = {
+            debounce_delay_s,
+            debounce_key,
+            debounce_args_to_accumulate,
+            max_total_debouncing_time,
+            max_total_debounces_amount
+        };
+    }
+    else {
+        flowModule.debouncing = undefined;
+    }
+});
+</script>
+
+<DebounceLimit
+	bind:debounce_delay_s
+	bind:debounce_key
+	bind:debounce_args_to_accumulate
+	bind:max_total_debouncing_time
+	bind:max_total_debounces_amount
+	schema={flowStateStore.val[selectedId]?.schema}
+	placeholder={`$workspace/flow/<flow_path>-${flowModule.id}`}
+	size="xs"
+/>

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

@@ -0,0 +1,8 @@
+import type { FlowModule } from '../../../gen';
+type $$ComponentProps = {
+    flowModule: FlowModule;
+    selectedId: string;
+};
+declare const FlowModuleDebounce: import("svelte").Component<$$ComponentProps, {}, "flowModule">;
+type FlowModuleDebounce = ReturnType<typeof FlowModuleDebounce>;
+export default FlowModuleDebounce;

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -102,6 +102,12 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 							<Toggle
 								size="xs"
 								bind:checked={flowModule.stop_after_if.skip_if_stopped}
+								on:change={(event) => {
+									if (flowModule.stop_after_if && event.detail) {
+										flowModule.stop_after_if.error_message = undefined
+										raise_error_message_stop_after_if = false
+									}
+								}}
 								options={{
 									right: 'Label flow as "skipped" if stopped'
 								}}
@@ -111,13 +117,18 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 								bind:checked={raise_error_message_stop_after_if}
 								on:change={(event) => {
 									if (flowModule.stop_after_if) {
-										flowModule.stop_after_if.error_message = event.detail === false ? undefined : ''
+										if (event.detail) {
+											flowModule.stop_after_if.error_message = ''
+											flowModule.stop_after_if.skip_if_stopped = false
+										} else {
+											flowModule.stop_after_if.error_message = undefined
+										}
 									}
 								}}
 								options={{
 									right: 'Raise an error message if stopped',
 									rightTooltip:
-										'If enabled and the stop condition is met, an error message will be raised. A custom message can be provided; otherwise, a default message will be used.'
+										'If enabled and the stop condition is met, an error message will be raised. A custom message can be provided; otherwise, a default message will be used. Mutually exclusive with "Label flow as skipped".'
 								}}
 							/>
 						</div>
@@ -237,6 +248,12 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 							<Toggle
 								size="xs"
 								bind:checked={flowModule.stop_after_all_iters_if.skip_if_stopped}
+								on:change={(event) => {
+									if (flowModule.stop_after_all_iters_if && event.detail) {
+										flowModule.stop_after_all_iters_if.error_message = undefined
+										raise_error_message_stop_after_all_if = false
+									}
+								}}
 								options={{
 									right: 'Label flow as "skipped" if stopped'
 								}}
@@ -246,14 +263,18 @@ let breakableParent = $derived(checkIfBreakableParent(flowStore.val));
 								bind:checked={raise_error_message_stop_after_all_if}
 								on:change={(event) => {
 									if (flowModule.stop_after_all_iters_if) {
-										flowModule.stop_after_all_iters_if.error_message =
-											event.detail === false ? undefined : ''
+										if (event.detail) {
+											flowModule.stop_after_all_iters_if.error_message = ''
+											flowModule.stop_after_all_iters_if.skip_if_stopped = false
+										} else {
+											flowModule.stop_after_all_iters_if.error_message = undefined
+										}
 									}
 								}}
 								options={{
 									right: 'Raise an error message if stopped',
 									rightTooltip:
-										'If enabled and the stop condition is met, an error message will be raised. A custom message can be provided; otherwise, a default message will be used.'
+										'If enabled and the stop condition is met, an error message will be raised. A custom message can be provided; otherwise, a default message will be used. Mutually exclusive with "Label flow as skipped".'
 								}}
 							/>
 						</div>

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -258,6 +258,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 				{enableAi}
 				{forceTestTab}
 				{highlightArg}
+				siblingToolNames={flowModule.value.tools.map((t) => t.summary ?? '')}
 			/>
 		{/if}
 	{/each}

package/package/components/flows/content/FlowRetries.svelte

@@ -73,7 +73,7 @@ $effect(() => {
 const u32Max = 4294967295;
 </script>
 
-<div class="h-full flex flex-col gap-4">
+<div class="flex flex-col gap-4">
 	<ToggleButtonGroup
 		bind:selected={delayType}
 		class={`${disabled ? 'disabled' : ''}`}
@@ -179,6 +179,7 @@ const u32Max = 4294967295;
 		</Section>
 	{/if}
 
+	{#if delayType === 'constant' || delayType === 'exponential'}
 	<div class="flex h-[calc(100%-22px)]">
 		<div class="w-1/2 h-full overflow-auto pr-2">
 			{#if delayType === 'constant'}
@@ -259,66 +260,65 @@ const u32Max = 4294967295;
 		</div>
 		<div class="w-1/2 h-full overflow-auto pl-2">
 			{#if true}
-				{@const { attempts: cAttempts, seconds: cSeconds } = flowModuleRetry?.constant || {}}
-				{@const {
-					attempts: eAttempts,
-					seconds: eSeconds,
-					multiplier,
-					random_factor
-				} = flowModuleRetry?.exponential || {}}
-				{@const cArray = Array.from({ length: Math.min(cAttempts || 0, 100) }, () => cSeconds)}
-				{@const eArray = Array.from(
-					{ length: Math.min(eAttempts || 0, 100) },
-					(_, i) => (multiplier || 0) * (eSeconds || 0) ** (i + cArray.length + 1)
-				)}
-				{@const array = [...cArray, ...eArray]}
-				<div class="bg-surface-secondary border rounded px-4 py-2">
-					<div class="text-xs font-medium mb-2">Retry attempts</div>
-					{#if array.length > 0}
-						<table class="text-xs">
-							<thead>
+			{@const { attempts: cAttempts, seconds: cSeconds } = flowModuleRetry?.constant || {}}
+			{@const {
+				attempts: eAttempts,
+				seconds: eSeconds,
+				multiplier,
+				random_factor
+			} = flowModuleRetry?.exponential || {}}
+			{@const cArray = Array.from({ length: Math.min(cAttempts || 0, 100) }, () => cSeconds)}
+			{@const eArray = Array.from(
+				{ length: Math.min(eAttempts || 0, 100) },
+				(_, i) => (multiplier || 0) * (eSeconds || 0) ** (i + cArray.length + 1)
+			)}
+			{@const array = [...cArray, ...eArray]}
+			<div class="bg-surface-secondary border rounded px-4 py-2">
+				<div class="text-xs font-medium mb-2">Retry attempts</div>
+				{#if array.length > 0}
+					<table class="text-xs">
+						<thead>
+							<tr>
+								<td class="font-semibold pr-1 pb-1">1:</td>
+								<td class="pb-1"
+									>After {array[0]} second{array[0] === 1 ? '' : 's'}
+									{#if (random_factor ?? 0) > 0}(+/- {((array[0] ?? 0) * (random_factor ?? 0)) /
+											100}
+										seconds){/if}</td
+								>
+							</tr>
+						</thead>
+						<tbody>
+							{#each array.slice(1, 100) as delay, i}
+								{@const index = i + 2}
 								<tr>
-									<td class="font-semibold pr-1 pb-1">1:</td>
-									<td class="pb-1"
-										>After {array[0]} second{array[0] === 1 ? '' : 's'}
-										{#if (random_factor ?? 0) > 0}(+/- {((array[0] ?? 0) * (random_factor ?? 0)) /
+									<td class="font-semibold pr-1 align-top">{index}:</td>
+									<td class="pb-1 whitespace-nowrap">
+										{delay} second{delay === 1 ? '' : 's'}
+										{#if (random_factor ?? 0) > 0}(+/- {((delay ?? 0) * (random_factor ?? 0)) /
 												100}
-											seconds){/if}</td
-									>
+											seconds){/if}
+										after attempt #{index - 1}
+										{#if i > cArray.length - 2}
+											<span class="text-gray-400 pl-2">
+												({multiplier} * {eSeconds}<sup>{index}</sup>)
+											</span>
+										{/if}
+									</td>
 								</tr>
-							</thead>
-							<tbody>
-								{#each array.slice(1, 100) as delay, i}
-									{@const index = i + 2}
-									<tr>
-										<td class="font-semibold pr-1 align-top">{index}:</td>
-										<td class="pb-1 whitespace-nowrap">
-											{delay} second{delay === 1 ? '' : 's'}
-											{#if (random_factor ?? 0) > 0}(+/- {((delay ?? 0) * (random_factor ?? 0)) /
-													100}
-												seconds){/if}
-											after attempt #{index - 1}
-											{#if i > cArray.length - 2}
-												<span class="text-gray-400 pl-2">
-													({multiplier} * {eSeconds}<sup>{index}</sup>)
-												</span>
-											{/if}
-										</td>
-									</tr>
-								{/each}
-								{#if (cAttempts ?? 0) > 100 || (eAttempts ?? 0) > 100}
-									<tr>
-										<td class="font-semibold pr-1 align-top">...</td>
-										<td class="pb-1">...</td>
-									</tr>
-								{/if}
-							</tbody>
-						</table>
-					{:else}
-						<div class="text-xs">No retries</div>
-					{/if}
-				</div>
+							{/each}
+							{#if (cAttempts ?? 0) > 100 || (eAttempts ?? 0) > 100}
+								<tr>
+									<td class="font-semibold pr-1 align-top">...</td>
+									<td class="pb-1">...</td>
+								</tr>
+							{/if}
+						</tbody>
+					</table>
+				{/if}
+			</div>
 			{/if}
 		</div>
 	</div>
+	{/if}
 </div>

package/package/components/flows/content/FlowSelectionPanel.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">import FlowCard from '../common/FlowCard.svelte';
 import { Button } from '../../common';
 import DropdownV2 from '../../DropdownV2.svelte';
-import { getNoteEditorContext } from '../../graph/noteEditor.svelte';
-import { StickyNote, Move, Copy, Trash2 } from 'lucide-svelte';
-let { selectionManager, noEditor, onDeleteSelected, onDuplicateSelected, onMoveSelected, canMoveSelected = false, resolvedCount = 0 } = $props();
-const noteEditorContext = getNoteEditorContext();
-function addGroupNote() {
-    if (selectionManager.selectedIds.length > 0 && noteEditorContext?.noteEditor) {
-        // Create the group note
-        noteEditorContext.noteEditor.createGroupNote(selectionManager.selectedIds);
-    }
-}
+import { getGroupEditorContext } from '../../graph/groupEditor.svelte';
+import { Group, Move, Copy, Trash2 } from 'lucide-svelte';
+let { selectionManager, noEditor, onDeleteSelected, onDuplicateSelected, onMoveSelected, onCreateGroup, canMoveSelected = false, resolvedCount = 0 } = $props();
+const groupEditorContext = getGroupEditorContext();
+let canCreateGroup = $derived(groupEditorContext?.canCreateGroup.val ?? false);
 let menuItems = $derived([
     {
         displayName: 'Move',
@@ -36,11 +31,11 @@ let menuItems = $derived([
 	{#snippet action()}
 		<div class="flex gap-1 items-center">
 			<Button
-				onClick={addGroupNote}
-				disabled={!noteEditorContext?.noteEditor || selectionManager.selectedIds.length === 0}
-				startIcon={{ icon: StickyNote }}
+				onClick={() => onCreateGroup?.()}
+				disabled={!canCreateGroup}
+				startIcon={{ icon: Group }}
 			>
-				Create group note
+				Create group
 			</Button>
 			{#if resolvedCount > 0}
 				<DropdownV2 items={menuItems} />

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

@@ -5,6 +5,7 @@ interface Props {
     onDeleteSelected?: () => void;
     onDuplicateSelected?: () => void;
     onMoveSelected?: () => void;
+    onCreateGroup?: () => void;
     canMoveSelected?: boolean;
     resolvedCount?: number;
 }

package/package/components/flows/content/FlowSettings.svelte

@@ -380,9 +380,9 @@ let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length);
 					{#if flowStore.val.on_behalf_of_email && canPreserve}
 						&rarr; <OnBehalfOfSelector
 							targetWorkspace={$workspaceStore ?? ''}
-							targetEmail={$savedOnBehalfOfEmail}
+							targetValue={$savedOnBehalfOfEmail}
 							selected={onBehalfOfChoice}
-							onSelect={(choice, email) => {
+							onSelect={(choice, details) => {
 								onBehalfOfChoice = choice
 								if (choice === 'me') {
 									flowStore.val.on_behalf_of_email = $userStore?.email
@@ -392,15 +392,15 @@ let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length);
 									flowStore.val.on_behalf_of_email = $savedOnBehalfOfEmail
 									customOnBehalfOfEmail = ''
 									$preserveOnBehalfOf = true
-								} else if (choice === 'custom' && email) {
-									flowStore.val.on_behalf_of_email = email
-									customOnBehalfOfEmail = email
+								} else if (choice === 'custom' && details) {
+									flowStore.val.on_behalf_of_email = details.email
+									customOnBehalfOfEmail = details.email
 									$preserveOnBehalfOf = true
 								}
 							}}
 							kind="flow"
 							{canPreserve}
-							customEmail={customOnBehalfOfEmail}
+							customValue={customOnBehalfOfEmail}
 							isDeployment={false}
 						/>
 					{:else if flowStore.val.on_behalf_of_email && !canPreserve}

package/package/components/flows/content/ScriptEditorDrawer.svelte

@@ -32,7 +32,7 @@ async function saveScript() {
             script.schema = script.schema ?? emptySchema();
             try {
                 const result = await inferArgs(script.language, script.content, script.schema);
-                script.no_main_func = result?.no_main_func || undefined;
+                script.auto_kind = result?.auto_kind || undefined;
                 script.has_preprocessor = result?.has_preprocessor || undefined;
             }
             catch (error) {

package/package/components/flows/content/SuspendDrawer.svelte

@@ -32,27 +32,9 @@ let { text = 'Approval Help' } = $props();
 				render a cancel button, providing the operator with an option to cancel the step. e.g:
 				<Tabs selected="bun" class="pt-4">
 					<Tab value="bun" label="TypeScript (Bun)" />
-					<Tab value="deno" label="TypeScript (Deno)" />
 					<Tab value="python" label="Python" />
 
 					{#snippet content()}
-						<TabContent value="deno" class="p-2">
-							<HighlightCode
-								language={'deno'}
-								code={`import * as wmill from "npm:windmill-client@^1.158.2"
-    
-export async function main() {
-    const urls = await wmill.getResumeUrls("approver1")
-
-    return {
-        resume: urls['resume'],
-        cancel: urls['cancel'], 
-        default_args: {}, // optional, see below
-        enums: {} // optional, see below
-    }
-}`}
-							/>
-						</TabContent>
 						<TabContent value="bun" class="p-2">
 							<HighlightCode
 								language={'deno'}

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

@@ -19,9 +19,22 @@ function reload() {
     initialCode = code;
     editor?.setCode(code);
 }
+function validateGroups(groups) {
+    if (!groups)
+        return;
+    const seen = new Set();
+    for (const g of groups) {
+        const key = `${g.start_id}:${g.end_id}`;
+        if (seen.has(key)) {
+            throw new Error(`Duplicate group: '${g.start_id}' → '${g.end_id}'`);
+        }
+        seen.add(key);
+    }
+}
 function apply() {
     try {
         const parsed = YAML.parse(code);
+        validateGroups(parsed.value?.groups);
         if (parsed.summary && typeof parsed.summary === 'string') {
             flowStore.val.summary = parsed.summary;
         }
@@ -48,8 +61,7 @@ function apply() {
         sendUserToast('Changes applied');
     }
     catch (e) {
-        ;
-        (sendUserToast('Error parsing yaml: ' + e), true);
+        sendUserToast('Error parsing yaml: ' + e, true);
     }
 }
 let editorHeight = $state(0);
@@ -58,8 +70,12 @@ let editorHeight = $state(0);
 <Drawer on:open={reload} bind:this={drawer} size="800px">
 	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
 		{#snippet actions()}
-			<Button variant="default" unifiedSize="md" disabled={!hasChanges} on:click={reload}>Reset code</Button>
-			<Button variant="accent" unifiedSize="md" disabled={!hasChanges} on:click={apply}>Apply changes</Button>
+			<Button variant="default" unifiedSize="md" disabled={!hasChanges} on:click={reload}
+				>Reset code</Button
+			>
+			<Button variant="accent" unifiedSize="md" disabled={!hasChanges} on:click={apply}
+				>Apply changes</Button
+			>
 		{/snippet}
 
 		{#if flowStore.val}

package/package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -7,7 +7,7 @@ import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import Button from '../../common/button/Button.svelte';
 import DiffActionBar from './DiffActionBar.svelte';
 import { getNodeColorClasses, aiActionToNodeState } from '../../graph';
-let { disableAi, small, diffManager } = $props();
+let { disableAi, small, diffManager, compact = false } = $props();
 const dispatch = createEventDispatcher();
 const { selectionManager, flowStateStore, flowStore } = getContext('FlowEditorContext');
 const failureModuleId = $derived(flowStore.val?.value?.failure_module?.id);
@@ -25,6 +25,7 @@ async function insertFailureModule(inlineScript, wsScript) {
     selectionManager.selectId('failure');
     refreshStateStore(flowStore);
 }
+const smallFailureModule = $derived(!(failureModuleId && diffManager && moduleAction) && compact);
 </script>
 
 {#if flowStore.val?.value?.failure_module}
@@ -34,7 +35,7 @@ async function insertFailureModule(inlineScript, wsScript) {
 		<Button
 			variant="default"
 			unifiedSize="sm"
-			wrapperClasses={twMerge('min-w-36', small ? 'max-w-52' : 'max-w-64')}
+			wrapperClasses={compact ? undefined : twMerge('min-w-36', small ? 'max-w-52' : 'max-w-64')}
 			id="flow-editor-error-handler"
 			selected={selectionManager.getSelectedId()?.includes('failure')}
 			onClick={() => {
@@ -54,26 +55,40 @@ async function insertFailureModule(inlineScript, wsScript) {
 				/>
 			{/if}
 			<Bug size={14} class="shrink-0" />
+			{#if !smallFailureModule}
+				<div class="truncate grow min-w-0 text-center text-xs">
+					{flowStore.val.value.failure_module?.summary ||
+						(flowStore.val.value.failure_module?.value.type === 'rawscript'
+							? `${flowStore.val.value.failure_module?.value.language}`
+							: 'TBD')}
+				</div>
 
-			<div class="truncate grow min-w-0 text-center text-xs">
-				{flowStore.val.value.failure_module?.summary ||
-					(flowStore.val.value.failure_module?.value.type === 'rawscript'
-						? `${flowStore.val.value.failure_module?.value.language}`
-						: 'TBD')}
-			</div>
-
+				<button
+					title="Delete failure script"
+					type="button"
+					class="ml-1"
+					onclick={() => {
+						flowStore.val.value.failure_module = undefined
+						selectionManager.selectId('settings-metadata')
+					}}
+				>
+					<X size={12} />
+				</button>
+			{/if}
+		</Button>
+		{#if smallFailureModule}
 			<button
 				title="Delete failure script"
 				type="button"
-				class="ml-1"
+				class="absolute -top-1.5 -right-1.5 rounded-full bg-surface border border-border p-0.5 hover:bg-surface-hover"
 				onclick={() => {
 					flowStore.val.value.failure_module = undefined
 					selectionManager.selectId('settings-metadata')
 				}}
 			>
-				<X size={12} />
+				<X size={10} />
 			</button>
-		</Button>
+		{/if}
 	</div>
 {:else}
 	<!-- Index 0 is used by the tutorial to identify the first "Add step" -->
@@ -91,14 +106,17 @@ async function insertFailureModule(inlineScript, wsScript) {
 		{#snippet trigger()}
 			<Button
 				unifiedSize="sm"
-				wrapperClasses="min-w-36"
+				wrapperClasses={compact ? undefined : 'min-w-36'}
 				title={`Add failure module`}
 				variant="default"
 				id={`flow-editor-add-step-error-handler-button`}
 				nonCaptureEvent
 				startIcon={{ icon: Bug }}
+				iconOnly={compact}
 			>
-				Error Handler
+				{#if !compact}
+					Error Handler
+				{/if}
 			</Button>
 		{/snippet}
 	</InsertModulePopover>