windmill-components 1.309.7 → 1.352.0

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

@@ -39,7 +39,8 @@ import Label from '../../Label.svelte';
 import { enterpriseLicense } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import { loadSchemaFromModule } from '../flowInfers';
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft } = getContext('FlowEditorContext');
+import { initRequiredInputFilled, setRequiredInputFilled } from '../utils';
+const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, flowInputsStore } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
 export let parentModule = undefined;
@@ -53,7 +54,6 @@ let diffEditor;
 let modulePreview;
 let websocketAlive = {
     pyright: false,
-    black: false,
     deno: false,
     go: false,
     ruff: false,
@@ -111,6 +111,11 @@ async function reload(flowModule) {
         validCode = true;
         if (inputTransformSchemaForm) {
             inputTransformSchemaForm.setArgs(input_transforms);
+            if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
+                $flowInputsStore[flowModule?.id] = {
+                    requiredInputsFilled: initRequiredInputFilled(flowModule.value, schema ?? {})
+                };
+            }
         }
         else {
             if (flowModule.value.type == 'rawscript' ||
@@ -151,6 +156,15 @@ afterUpdate(() => {
 let forceReload = 0;
 let editorPanelSize = noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50;
 let editorSettingsPanelSize = 100 - editorPanelSize;
+function setFlowInput(argName) {
+    if ($flowInputsStore && $flowInputsStore?.[flowModule.id] === undefined) {
+        $flowInputsStore[flowModule.id] = {};
+    }
+    if ($flowInputsStore) {
+        const requiredInputsFilled = setRequiredInputFilled(argName, flowModule.value, $flowInputsStore[flowModule.id].requiredInputsFilled ?? {}, $flowStateStore[$selectedId]?.schema);
+        $flowInputsStore[flowModule.id].requiredInputsFilled = requiredInputsFilled;
+    }
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -235,7 +249,7 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 								{#key flowModule.id}
 									<Editor
 										folding
-										path={flowModule.value.path}
+										path={$pathStore + '/' + flowModule.id}
 										bind:websocketAlive
 										bind:this={editor}
 										class="h-full relative"
@@ -284,7 +298,11 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 							{#if !noEditor}
 								<div class="border-t">
 									{#key forceReload}
-										<FlowModuleScript path={flowModule.value.path} hash={flowModule.value.hash} />
+										<FlowModuleScript
+											showAllCode={false}
+											path={flowModule.value.path}
+											hash={flowModule.value.hash}
+										/>
 									{/key}
 								</div>
 							{/if}
@@ -315,6 +333,10 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 											bind:args={flowModule.value.input_transforms}
 											extraLib={stepPropPicker.extraLib}
 											{enableAi}
+											on:changeArg={(e) => {
+												const { argName } = e.detail
+												setFlowInput(argName)
+											}}
 										/>
 									</PropPickerWrapper>
 								</div>
@@ -416,11 +438,21 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 														bind:seconds={flowModule.value.concurrency_time_window_s}
 													/>
 												</Label>
-												<Label label="Custom concurrency key">
-													<div class="text-tertiary text-xs"
-														>Custom concurrency keys can only be set as the setting of a workspace
-														script</div
-													>
+												<Label label="Custom concurrency key (optional)">
+													<svelte:fragment slot="header">
+														<Tooltip>
+															Concurrency keys are global, you can have them be workspace specific
+															using the variable `$workspace`. You can also use an argument's value
+															using `$args[name_of_arg]`</Tooltip
+														>
+													</svelte:fragment>
+													<input
+														type="text"
+														autofocus
+														disabled={!$enterpriseLicense}
+														bind:value={flowModule.value.custom_concurrency_key}
+														placeholder={`$workspace/script/${$pathStore}-$args[foo]`}
+													/>
 												</Label>
 											{:else}
 												<Alert type="warning" title="Limitation" size="xs">

package/package/components/flows/content/FlowModuleScript.svelte

@@ -1,11 +1,16 @@
 <script>import HighlightCode from '../../HighlightCode.svelte';
+import TimeAgo from '../../TimeAgo.svelte';
 import { ScriptService } from '../../../gen';
 import { getScriptByPath } from '../../../scripts';
 import { workspaceStore } from '../../../stores';
 export let path;
 export let hash = undefined;
+export let showDate = false;
+export let showAllCode = true;
 let code;
 let language;
+let lock = undefined;
+let date = undefined;
 let notFound = false;
 async function loadCode(path, hash) {
     try {
@@ -15,6 +20,8 @@ async function loadCode(path, hash) {
             : await getScriptByPath(path);
         code = script.content;
         language = script.language;
+        lock = script.lock;
+        date = script.created_at;
     }
     catch (e) {
         notFound = true;
@@ -22,12 +29,44 @@ async function loadCode(path, hash) {
     }
 }
 $: path && loadCode(path, hash);
+function toggleShowAll() {
+    showAllCode = !showAllCode;
+}
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
+	{#if showDate && date}
+		<span class="text-xs text-tertiary mb-4"><TimeAgo {date} /></span>
+	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
-	{:else}
+	{:else if showAllCode}
 		<HighlightCode {language} {code} />
+	{:else}
+		<div class="code-container h-full">
+			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />
+		</div>
+		<button on:click={toggleShowAll}>Show all</button>
+	{/if}
+
+	{#if lock}
+		<h3 class="mb-2 mt-6">Lock</h3>
+		<pre class="bg-surface-secondary text-xs p-2 overflow-auto w-full">{lock}</pre>
 	{/if}
 </div>
+
+<style>
+	.code-container {
+		position: relative;
+		overflow: hidden;
+	}
+	.code-container::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100px;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(var(--color-surface)));
+		pointer-events: none;
+	}</style>

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

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         path: string;
         hash?: string | undefined;
+        showDate?: boolean | undefined;
+        showAllCode?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -1,8 +1,7 @@
-<script>import SchemaEditor from '../../SchemaEditor.svelte';
-import Toggle from '../../Toggle.svelte';
+<script>import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import InputTransformForm from '../../InputTransformForm.svelte';
-import { getContext } from 'svelte';
+import { getContext, tick } from 'svelte';
 import { Alert, Tab, Tabs } from '../../common';
 import { GroupService } from '../../../gen';
 import { emptySchema, emptyString } from '../../../utils';
@@ -12,6 +11,8 @@ import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import Section from '../../Section.svelte';
 import Label from '../../Label.svelte';
 import SuspendDrawer from './SuspendDrawer.svelte';
+import EditableSchemaDrawer from '../../schema/EditableSchemaDrawer.svelte';
+import AddProperty from '../../schema/AddProperty.svelte';
 const { selectedId, flowStateStore } = getContext('FlowEditorContext');
 const result = $flowStateStore[$selectedId]?.previewResult ?? {};
 let editor = undefined;
@@ -36,39 +37,40 @@ $: {
         loadGroups();
     }
 }
+let jsonView = false;
 </script>
 
 <Section label="Suspend/Approval/Prompt" class="w-full">
+	<svelte:fragment slot="action">
+		<SuspendDrawer text="Approval/Prompt helpers" />
+	</svelte:fragment>
 	<svelte:fragment slot="header">
-		<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_approval">
-			If defined, at the end of the step, the flow will be suspended until it receives external
-			requests to be resumed or canceled. This is most useful to implement approval steps but can be
-			used flexibly for other purposes.
-		</Tooltip>
-		<div class="ml-4">
-			<div class="flex">
-				<SuspendDrawer text="Approval/Prompt helpers" />
-			</div>
+		<div class="flex flex-row items-center gap-2">
+			<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_approval">
+				If defined, at the end of the step, the flow will be suspended until it receives external
+				requests to be resumed or canceled. This is most useful to implement approval steps but can
+				be used flexibly for other purposes.
+			</Tooltip>
+			<Toggle
+				size="xs"
+				checked={isSuspendEnabled}
+				on:change={() => {
+					if (isSuspendEnabled && flowModule.suspend != undefined) {
+						flowModule.suspend = undefined
+					} else {
+						flowModule.suspend = {
+							required_events: 1,
+							timeout: 1800
+						}
+					}
+				}}
+				options={{
+					right: 'Suspend flow execution until events/approvals received'
+				}}
+			/>
 		</div>
 	</svelte:fragment>
 
-	<Toggle
-		checked={isSuspendEnabled}
-		on:change={() => {
-			if (isSuspendEnabled && flowModule.suspend != undefined) {
-				flowModule.suspend = undefined
-			} else {
-				flowModule.suspend = {
-					required_events: 1,
-					timeout: 1800
-				}
-			}
-		}}
-		options={{
-			right: 'Suspend flow execution until events/approvals received'
-		}}
-	/>
-
 	<div class="overflow-x-auto scrollbar-hidden">
 		<Tabs bind:selected={suspendTabSelected}>
 			<Tab size="xs" value="core" disabled={!isSuspendEnabled}>
@@ -179,46 +181,84 @@ $: {
 			{/if}
 		</div>
 	{:else}
-		<div class="flex flex-col mt-4 gap-4">
-			{#if flowModule.suspend}
-				{#if emptyString($enterpriseLicense)}
-					<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
-				{/if}
+		<div class="grid grid-cols-4 mt-4 gap-8">
+			<div class="col-span-2">
+				{#if flowModule?.suspend?.resume_form}
+					<EditableSchemaDrawer
+						bind:schema={flowModule.suspend.resume_form.schema}
+						on:change={(e) => {
+							const schema = e.detail
 
-				<div class="flex gap-4">
-					<Toggle
-						checked={Boolean(flowModule.suspend.resume_form)}
-						options={{
-							right: 'Add a form to the approval page'
+							// If the schema is empty, remove the form
+							if (Object.keys(schema?.properties ?? {}).length === 0) {
+								tick().then(() => {
+									if (!flowModule.suspend) return
+									flowModule.suspend.resume_form = undefined
+								})
+							}
 						}}
-						disabled={emptyString($enterpriseLicense)}
-						on:change={(e) => {
-							if (flowModule.suspend) {
-								if (e.detail) {
+						{jsonView}
+					/>
+				{:else if emptyString($enterpriseLicense)}
+					<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
+				{:else}
+					<div class="flex flex-col items-end mb-2 w-full">
+						<Toggle
+							checked={false}
+							label="JSON View"
+							size="xs"
+							options={{
+								right: 'JSON Editor',
+								rightTooltip:
+									'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+							}}
+							lightMode
+							on:change={() => {
+								if (flowModule.suspend) {
 									flowModule.suspend.resume_form = {
 										schema: emptySchema()
 									}
-								} else {
-									flowModule.suspend.resume_form = undefined
+								}
+								jsonView = true
+							}}
+						/>
+					</div>
+					<AddProperty
+						on:change={(e) => {
+							jsonView = false
+							if (flowModule.suspend) {
+								flowModule.suspend.resume_form = {
+									schema: e.detail
 								}
 							}
 						}}
+						schema={{}}
 					/>
-					<div class="flex">
-						<SuspendDrawer text="Default args & Dynamic enums help" />
+				{/if}
+			</div>
+			<div class="col-span-2 flex flex-col gap-4">
+				{#if flowModule.suspend}
+					{#if emptyString($enterpriseLicense)}
+						<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
+					{/if}
+
+					<div class="flex flex-col gap-2">
+						<div class="flex">
+							<SuspendDrawer text="Default args & Dynamic enums help" />
+						</div>
 					</div>
-				</div>
-			{/if}
-			{#if flowModule.suspend?.resume_form}
-				<Toggle
-					bind:checked={flowModule.suspend.hide_cancel}
-					size="xs"
-					options={{
-						right: 'Hide cancel button on approval page'
-					}}
-				/>
-				<SchemaEditor bind:schema={flowModule.suspend.resume_form.schema} />
-			{/if}
+				{/if}
+				{#if flowModule.suspend}
+					<Toggle
+						bind:checked={flowModule.suspend.hide_cancel}
+						size="xs"
+						options={{
+							right: 'Hide cancel button on approval page'
+						}}
+						disabled={!Boolean(flowModule?.suspend?.resume_form)}
+					/>
+				{/if}
+			</div>
 		</div>
 	{/if}
 </Section>

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

@@ -11,10 +11,11 @@ import FlowInputsFlow from './FlowInputsFlow.svelte';
 import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
 import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
 import FlowWhileLoop from './FlowWhileLoop.svelte';
+import { initRequiredInputFilled } from '../utils';
 export let flowModule;
 export let noEditor = false;
 export let enableAi = false;
-const { selectedId, schedule, flowStateStore } = getContext('FlowEditorContext');
+const { selectedId, schedule, flowStateStore, flowInputsStore } = getContext('FlowEditorContext');
 let scriptKind = 'script';
 let scriptTemplate = 'script';
 // These pointers are used to easily access previewArgs of parent module, and previous module
@@ -39,6 +40,11 @@ async function createModuleFromScript(path, summary, kind, hash) {
     }
     flowModule = module;
     $flowStateStore[module.id] = state;
+    if ($flowInputsStore) {
+        $flowInputsStore[module?.id] = {
+            requiredInputsFilled: initRequiredInputFilled(module?.value, $flowStateStore[module?.id]?.schema)
+        };
+    }
 }
 </script>
 
@@ -112,6 +118,15 @@ async function createModuleFromScript(path, summary, kind, hash) {
 
 					flowModule = module
 					$flowStateStore[module.id] = state
+
+					if ($flowInputsStore) {
+						$flowInputsStore[module.id] = {
+							requiredInputsFilled: initRequiredInputFilled(
+								module.value,
+								$flowStateStore[module.id].schema
+							)
+						}
+					}
 				}}
 				failureModule={$selectedId === 'failure'}
 			/>

package/package/components/flows/content/FlowSchedules.svelte

@@ -8,6 +8,7 @@ import ScheduleEditor from '../../ScheduleEditor.svelte';
 import { ScheduleService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { Calendar } from 'lucide-svelte';
+import Label from '../../Label.svelte';
 const { schedule, flowStore, initialPath } = getContext('FlowEditorContext');
 let schedules = undefined;
 async function loadSchedules() {
@@ -26,15 +27,17 @@ let scheduleEditor;
 $: initialPath && loadSchedules();
 </script>
 
-<div class="w-full py-2">
+<div class="w-full flex flex-col gap-4 mb-4">
 	<!-- svelte-ignore a11y-autofocus -->
-	<input
-		autofocus
-		type="text"
-		placeholder="Schedule summary"
-		class="text-sm w-full font-semibold mb-4"
-		bind:value={$schedule.summary}
-	/>
+	<Label label="Summary">
+		<input
+			autofocus
+			type="text"
+			placeholder="Short summary to be displayed when listed"
+			class="text-sm w-full"
+			bind:value={$schedule.summary}
+		/>
+	</Label>
 </div>
 
 <CronInput bind:schedule={$schedule.cron} bind:timezone={$schedule.timezone} />

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

@@ -7,7 +7,6 @@ import { inferArgs } from '../../../infer';
 import { workspaceStore } from '../../../stores';
 import { Loader2, Save, DiffIcon } from 'lucide-svelte';
 import { cleanValueProperties, emptySchema, orderedJsonStringify, sendUserToast } from '../../../utils';
-import { cloneDeep } from 'lodash';
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
 let scriptEditorDrawer;
@@ -19,7 +18,7 @@ export async function openDrawer(hash, cb) {
         workspace: $workspaceStore,
         hash
     });
-    savedScript = cloneDeep(script);
+    savedScript = structuredClone(script);
     callback = cb;
 }
 let callback = undefined;
@@ -30,10 +29,11 @@ async function saveScript() {
         try {
             script.schema = script.schema ?? emptySchema();
             try {
-                await inferArgs(script.language, script.content, script.schema);
+                const noMainFunc = await inferArgs(script.language, script.content, script.schema);
+                script.no_main_func = noMainFunc || undefined;
             }
             catch (error) {
-                sendUserToast(`Impossible to infer the schema. Assuming this is a script without main function`, true);
+                sendUserToast(`Could not parse code, are you sure it is valid?`, true);
             }
             await ScriptService.createScript({
                 workspace: $workspaceStore,
@@ -47,7 +47,7 @@ async function saveScript() {
                     lock: undefined
                 }
             });
-            savedScript = cloneDeep(script);
+            savedScript = structuredClone(script);
             callback?.();
         }
         catch (error) {
@@ -185,7 +185,7 @@ async function checkForUnsavedChanges() {
 						button: {
 							text: 'Restore to saved',
 							onClick: () => {
-								script = cloneDeep(savedScript)
+								script = structuredClone(savedScript)
 								diffDrawer.closeDrawer()
 							}
 						}

package/package/components/flows/flowExplorer.js

@@ -49,7 +49,10 @@ function filterDependentComponents(modules, id) {
         : Object.fromEntries(modules
             .map((mod) => [
             mod.id,
-            getModuleExprs(mod).filter((expr) => expr.includes(`results.${id}`))
+            getModuleExprs(mod).filter((expr) => {
+                const pattern = new RegExp(`\\bresults\\.${id}(?:\\b|\\.)`);
+                return pattern.test(expr);
+            })
         ])
             .filter((x) => x[1].length > 0));
 }

package/package/components/flows/flowStateUtils.js

@@ -16,7 +16,10 @@ export async function loadFlowModuleState(flowModule) {
             flowModule.value.type == 'flow') {
             flowModule.value.input_transforms = input_transforms;
         }
-        return { schema, previewResult: NEVER_TESTED_THIS_FAR };
+        return {
+            schema,
+            previewResult: NEVER_TESTED_THIS_FAR
+        };
     }
     catch (e) {
         console.debug(e);

package/package/components/flows/map/FlowConstantsItem.svelte

@@ -2,7 +2,7 @@
 import { classNames } from '../../../utils';
 import { DollarSign } from 'lucide-svelte';
 const { selectedId } = getContext('FlowEditorContext');
-$: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface  text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface  text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900 dark:bg-white/5 dark:outline-slate-800/60 dark:border-gray-400' : '');
 </script>
 
 <button on:click={() => ($selectedId = 'constants')} class={settingsClass}>

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

@@ -44,7 +44,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 		'z-10',
 		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',
 		'border transition-colors duration-[400ms] ease-linear rounded-sm px-2 py-1 bg-surface text-sm flex justify-between items-center flex-row overflow-x-hidden relative',
-		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
+		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900 dark:outline-slate-900/0 dark:bg-surface-secondary dark:border-gray-400' : ''
 	)}
 	style={small ? 'min-width: 200px' : 'min-width: 275px'}
 >

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

@@ -1,7 +1,7 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
+import { AlertTriangle, Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
 export let selected = false;
@@ -18,6 +18,8 @@ export let label;
 export let modType = undefined;
 export let bgColor = '';
 export let concurrency = false;
+export let retries = undefined;
+const { flowInputsStore } = getContext('FlowGraphContext');
 const dispatch = createEventDispatcher();
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
 </script>
@@ -41,11 +43,13 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
+					{#if retries}<span class="text-red-400 mr-2">{retries}</span>{/if}
 					<Repeat size={14} />
 				</div>
 				<svelte:fragment slot="text">Retries</svelte:fragment>
 			</Popover>
 		{/if}
+
 		{#if concurrency}
 			<Popover notClickable>
 				<div
@@ -113,6 +117,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 			</Popover>
 		{/if}
 	</div>
+
 	<div
 		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 			border border-gray-400 p-2 text-2xs module text-primary"
@@ -147,6 +152,19 @@ hover:border-blue-700 {selected ? '' : '!hidden'}"
 		>
 			<Move class="mx-[3px]" size={14} strokeWidth={2} />
 		</button>
+
+		{#if id && !Object.values($flowInputsStore?.[id]?.requiredInputsFilled || {}).every(Boolean)}
+			<div class="absolute -top-[10px] -left-[10px]">
+				<Popover>
+					<svelte:fragment slot="text">At least one required input is not set.</svelte:fragment>
+					<div
+						class="flex items-center justify-center h-full w-full rounded-md p-0.5 border border-yellow-600 text-yellow-600 bg-yellow-100 duration-150 hover:bg-yellow-300"
+					>
+						<AlertTriangle size={14} strokeWidth={2} />
+					</div>
+				</Popover>
+			</div>
+		{/if}
 	{/if}
 </div>
 

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

@@ -15,6 +15,7 @@ declare const __propDef: {
         modType?: string | undefined;
         bgColor?: string | undefined;
         concurrency?: boolean | undefined;
+        retries?: number | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -22,7 +22,7 @@ export let disableTutorials = false;
 export let disableAi = false;
 export let smallErrorHandler = false;
 let flowTutorials = undefined;
-const { selectedId, moving, history, flowStateStore, flowStore } = getContext('FlowEditorContext');
+const { selectedId, moving, history, flowStateStore, flowStore, flowInputsStore } = getContext('FlowEditorContext');
 async function insertNewModuleAtIndex(modules, index, kind, wsScript) {
     push(history, $flowStore);
     var module = emptyModule($flowStateStore, $flowStore, kind == 'flow');
@@ -195,6 +195,7 @@ const dispatch = createEventDispatcher();
 			maxHeight={minHeight}
 			modules={$flowStore.value?.modules}
 			{selectedId}
+			{flowInputsStore}
 			on:delete={({ detail }) => {
 				let e = detail.detail
 				dependents = getDependentComponents(e.id, $flowStore)
@@ -202,6 +203,10 @@ const dispatch = createEventDispatcher();
 					push(history, $flowStore)
 					selectNextId(e.id)
 					removeAtId($flowStore.value.modules, e.id)
+
+					if ($flowInputsStore) {
+						delete $flowInputsStore[e.id]
+					}
 					$flowStore = $flowStore
 				}
 

package/package/components/flows/map/FlowSettingsItem.svelte

@@ -4,7 +4,7 @@ import { Badge } from '../../common';
 import { SlidersHorizontal } from 'lucide-svelte';
 const { selectedId, flowStore } = getContext('FlowEditorContext');
 $: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
-    ? 'outline outline-offset-1 outline-2  outline-slate-900'
+    ? 'outline outline-offset-1 outline-2  outline-slate-900 dark:bg-white/5 dark:outline-slate-800/60 dark:border-gray-400'
     : '');
 </script>