windmill-components 1.389.3 → 1.394.4

package/package/components/copilot/prompts/editPrompt.js

@@ -5,7 +5,7 @@ export const EDIT_PROMPT = {
             "prompt": "Here's my python3 code: \n```python\n{code}\n```\n<contextual_information>\nYou have to write a function in python called \"main\". Specify the parameter types. Do not call the main function. You should generally return the result.\nThe \"main\" function cannot be async. If you need to use async code, you can use the asyncio library.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. For Windmill to correctly detect the resources to be passed, the resource type name has to be exactly as specified in the following list:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nYou need to define the type of the resources that are needed before the main function, but only include them if they are actually needed to achieve the function purpose.\nThe resource type name has to be exactly as specified (has to be IN LOEWRCASE). If the type name conflicts with any imported methods, you have to rename the imported method with the conflicting name.\n<contextual_information>\nMy instructions: {description}"
         },
         "deno": {
-            "prompt": "Here's my TypeScript code in a deno running environment:\n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
+            "prompt": "Here's my TypeScript code in a deno running environment:\n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe resource type name has to be exactly as specified.\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\nNaming conventions are guidelines, but follow the user's naming choices in the existing code.\n</contextual_information>\nMy instructions: {description}"
         },
         "go": {
             "prompt": "Here's my go code: \n```go\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be \"inner\"\n</contextual_information>\nMy instructions: {description}"
@@ -35,10 +35,10 @@ export const EDIT_PROMPT = {
             "prompt": "Here's my powershell code: \n```powershell\n{code}\n```\n<contextual_information>\nArguments can be obtained by calling the param function on the first line like that: `param($ParamName1, $ParamName2 = \"default value\", [{type}]$ParamName3, ...)`\n</contextual_information>\nMy instructions: {description}"
         },
         "nativets": {
-            "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
+            "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\nNaming conventions are guidelines, but follow the user's naming choices in the existing code.\n</contextual_information>\nMy instructions: {description}"
         },
         "bun": {
-            "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nMy instructions: {description}"
+            "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\nNaming conventions are guidelines, but follow the user's naming choices in the existing code.\n</contextual_information>\nMy instructions: {description}"
         },
         "php": {
             "prompt": "Here's my php code: \n```php\n{code}\n```\n<contextual_information>\nYou have to write a function in php called \"main\". Specify the parameter types. Do not call the main function. You should generally return the result. The script must start with `<?php`.\nYou can take as parameters resources which are classes containing credentials or configuration information. For Windmill to correctly detect the resources to be passed, the resource type name has to be exactly as specified in the following list:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nYou need to define the type of the resources that are needed before the main function, but only include them if they are actually needed to achieve the function purpose.\nBefore defining each type, check if the class already exists using class_exists.\nThe resource type name has to be exactly as specified.\nIf you need to import libraries, you need to specify them as comments in the following manner before the main function:\n```\n// require:\n// mylibrary/mylibrary\n// myotherlibrary/myotherlibrary@optionalversion\n```\nNo need to require autoload, it is already done.\n<contextual_information>\nMy instructions: {description}"

package/package/components/copilot/prompts/fix.yaml

@@ -45,6 +45,7 @@ prompts:
       {resourceTypes}
       </resourceTypes>
       Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Naming conventions are guidelines, but follow the user's naming choices in the existing code.
       </contextual_information>
       I get the following error: {error}
       Fix my code.
@@ -161,6 +162,7 @@ prompts:
       {resourceTypes}
       </resourceTypes>
       Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Naming conventions are guidelines, but follow the user's naming choices in the existing code.
       </contextual_information>
       I get the following error: {error}
       Fix my code.
@@ -179,6 +181,7 @@ prompts:
       {resourceTypes}
       </resourceTypes>
       Only define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      Naming conventions are guidelines, but follow the user's naming choices in the existing code.
       </contextual_information>
       I get the following error: {error}
       Fix my code.

package/package/components/copilot/prompts/fixPrompt.js

@@ -5,7 +5,7 @@ export const FIX_PROMPT = {
             "prompt": "Here's my python3 code: \n```python\n{code}\n```\n<contextual_information>\nYou have to write a function in python called \"main\". Specify the parameter types. Do not call the main function. You should generally return the result.\nThe \"main\" function cannot be async. If you need to use async code, you can use the asyncio library.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. For Windmill to correctly detect the resources to be passed, the resource type name has to be exactly as specified in the following list:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nYou need to define the type of the resources that are needed before the main function, but only include them if they are actually needed to achieve the function purpose.\nThe resource type name has to be exactly as specified (has to be IN LOEWRCASE). If the type name conflicts with any imported methods, you have to rename the imported method with the conflicting name.\n<contextual_information>\nI get the following error: {error}\nFix my code."
         },
         "deno": {
-            "prompt": "Here's my TypeScript code in a deno running environment:\n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
+            "prompt": "Here's my TypeScript code in a deno running environment:\n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\nNaming conventions are guidelines, but follow the user's naming choices in the existing code.\n</contextual_information>\nI get the following error: {error}\nFix my code."
         },
         "go": {
             "prompt": "Here's my go code: \n```go\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be \"inner\"\n</contextual_information>\nI get the following error: {error}\nFix my code."
@@ -35,10 +35,10 @@ export const FIX_PROMPT = {
             "prompt": "Here's my powershell code: \n```powershell\n{code}\n```\n<contextual_information>\nArguments can be obtained by calling the param function on the first line like that: `param($ParamName1, $ParamName2 = \"default value\", [{type}]$ParamName3, ...)`\n</contextual_information>\nI get the following error: {error}\nFix my code."
         },
         "nativets": {
-            "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
+            "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\". \nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\nNaming conventions are guidelines, but follow the user's naming choices in the existing code.\n</contextual_information>\nI get the following error: {error}\nFix my code."
         },
         "bun": {
-            "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\n</contextual_information>\nI get the following error: {error}\nFix my code."
+            "prompt": "Here's my TypeScript code: \n```typescript\n{code}\n```\n<contextual_information>\nWe have to export a \"main\" function like this: \"export async function main(...)\" and specify the parameter types but do not call it. You should generally return the result.\nIf needed, the standard fetch method is available globally, do not import it.\nYou can take as parameters resources which are dictionaries containing credentials or configuration information. Name the resource parameters like this: \"{resource_type}Resource\".\nThe following resource types are available:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nOnly define the type for resources that are actually needed to achieve the function purpose. The resource type name has to be exactly as specified. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.\nNaming conventions are guidelines, but follow the user's naming choices in the existing code.\n</contextual_information>\nI get the following error: {error}\nFix my code."
         },
         "php": {
             "prompt": "Here's my php code: \n```php\n{code}\n```\n<contextual_information>\nYou have to write a function in php called \"main\". Specify the parameter types. Do not call the main function. You should generally return the result. The script must start with `<?php`.\nYou can take as parameters resources which are classes containing credentials or configuration information. For Windmill to correctly detect the resources to be passed, the resource type name has to be exactly as specified in the following list:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nYou need to define the type of the resources that are needed before the main function, but only include them if they are actually needed to achieve the function purpose.\nBefore defining each type, check if the class already exists using class_exists.\nThe resource type name has to be exactly as specified.\nIf you need to import libraries, you need to specify them as comments in the following manner before the main function:\n```\n// require:\n// mylibrary/mylibrary\n// myotherlibrary/myotherlibrary@optionalversion\n```\nNo need to require autoload, it is already done.\n<contextual_information>\nI get the following error: {error}\nFix my code."

package/package/components/details/ClipboardPanel.svelte

@@ -9,6 +9,7 @@ export let title = undefined;
 {/if}
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="px-2 py-1 border flex items-center cursor-pointer bg-surface-secondary text-primary justify-between rounded-md"
 	on:click={(e) => {

package/package/components/flows/content/DynamicInputHelpBox.svelte

@@ -26,7 +26,10 @@ $: opened = false;
 	>
 		Single JavaScript expression. The following functions and objects are available:
 		<ul class="ml-4">
-			<li><b>{'results.<id>'}</b>: the result of step at id 'id'</li>
+			<li
+				><b>{'results.<id>'}</b>: the result of step at id 'id' (use <b>{'results?.<id>'}</b> if id may
+				not exist because branch was not chosen)</li
+			>
 			<li><b>flow_input</b>: the object containing the flow input arguments</li>
 			<li><b>params</b>: the object containing the current step static values</li>
 			<li>

package/package/components/flows/content/FlowConstants.svelte

@@ -19,8 +19,8 @@ $: resources = Object.fromEntries(scriptModules
         let schema = $flowStateStore[m.id]?.schema;
         let val = undefined;
         const [k, inputTransform] = x;
-        const v = schema.properties[k];
-        if (v.format?.includes('resource') &&
+        const v = schema?.properties[k];
+        if (v?.format?.includes('resource') &&
             inputTransform.type === 'static' &&
             (inputTransform.value === '' ||
                 inputTransform.value === undefined ||
@@ -41,7 +41,7 @@ $: steps = scriptModules
     Object.entries(v.input_transforms)
         .filter((x) => {
         const shouldDisplay = hideOptional
-            ? $flowStateStore[m.id]?.schema.required?.includes(x[0])
+            ? $flowStateStore[m.id]?.schema?.required?.includes(x[0])
             : true;
         return x[1].type == 'static' && shouldDisplay;
     })

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -28,7 +28,7 @@ async function initWarnings() {
             $flowInputsStore = {};
         }
         $flowInputsStore[module?.id] = {
-            flowStepWarnings: await initFlowStepWarnings(module.value, $flowStateStore?.[module?.id]?.schema ?? {}, dfs($flowStore.value.modules, (fm) => fm.id))
+            flowStepWarnings: await initFlowStepWarnings(module.value, $flowStateStore?.[module?.id]?.schema, dfs($flowStore.value.modules, (fm) => fm.id))
         };
     }
 }

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

@@ -150,7 +150,7 @@ function onSelectedIdChange() {
 }
 let debouncedWarning = debounce((argName) => {
     if ($flowInputsStore) {
-        computeFlowStepWarning(argName, flowModule.value, $flowInputsStore[flowModule.id].flowStepWarnings ?? {}, $flowStateStore[$selectedId]?.schema ?? {}, dfs($flowStore?.value?.modules ?? [], (fm) => fm.id) ?? []).then((flowStepWarnings) => {
+        computeFlowStepWarning(argName, flowModule.value, $flowInputsStore[flowModule.id].flowStepWarnings ?? {}, $flowStateStore[$selectedId]?.schema, dfs($flowStore?.value?.modules ?? [], (fm) => fm.id) ?? []).then((flowStepWarnings) => {
             $flowInputsStore[flowModule.id].flowStepWarnings = flowStepWarnings;
         });
     }
@@ -204,7 +204,6 @@ function setFlowInput(argName) {
 							flowModule,
 							$selectedId,
 							$flowStateStore[flowModule.id].schema,
-							$flowStore,
 							$pathStore
 						)
 						flowModule = module
@@ -450,6 +449,7 @@ function setFlowInput(argName) {
 															using `$args[name_of_arg]`</Tooltip
 														>
 													</svelte:fragment>
+													<!-- svelte-ignore a11y-autofocus -->
 													<input
 														type="text"
 														autofocus

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -1,21 +1,15 @@
 <script>import Button from '../../common/button/Button.svelte';
-import { WorkerService } from '../../../gen';
+import {} from '../../../gen';
 import { createEventDispatcher, getContext } from 'svelte';
 import { Bed, Database, Gauge, GitFork, Pen, PhoneIncoming, Repeat, Save, Square, Voicemail } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 import { sendUserToast } from '../../../utils';
-import { workerTags } from '../../../stores';
 import { getLatestHashForScript } from '../../../scripts';
+import FlowModuleWorkerTagSelect from './FlowModuleWorkerTagSelect.svelte';
 export let module;
-const { scriptEditorDrawer, flowStore, selectedId } = getContext('FlowEditorContext');
+const { scriptEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 let customUi = getContext('customUi');
-loadWorkerGroups();
-async function loadWorkerGroups() {
-    if (!$workerTags) {
-        $workerTags = await WorkerService.getCustomTags();
-    }
-}
 $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 </script>
 
@@ -114,6 +108,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 				Edit {#if module.value.hash != undefined} (locked hash){/if}
 			</Button>
 		{/if}
+		<FlowModuleWorkerTagSelect bind:tag={module.value.tag_override} />
 		{#if customUi?.scriptFork != false}
 			<Button
 				size="xs"
@@ -128,42 +123,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 	{/if}
 	<div class="px-0.5" />
 	{#if module.value.type === 'rawscript'}
-		{#if $workerTags}
-			{#if $workerTags?.length > 0}
-				<div class="w-40">
-					{#if $flowStore.tag == undefined}
-						<select
-							placeholder="Tag"
-							bind:value={module.value.tag}
-							on:change={(e) => {
-								if (module.value.type === 'rawscript') {
-									if (module.value.tag == '') {
-										module.value.tag = undefined
-									}
-								}
-							}}
-						>
-							{#if module.value.tag}
-								<option value="">reset to default</option>
-							{:else}
-								<option value="" disabled selected>Tag</option>
-							{/if}
-							{#each $workerTags ?? [] as tag (tag)}
-								<option value={tag}>{tag}</option>
-							{/each}
-						</select>
-					{:else}
-						<button
-							title="Worker Group is defined at the flow level"
-							class="w-full text-left items-center font-normal p-1 border text-xs rounded"
-							on:click={() => ($selectedId = 'settings-worker-group')}
-						>
-							Flow's WG: {$flowStore.tag}
-						</button>
-					{/if}
-				</div>
-			{/if}
-		{/if}
+		<FlowModuleWorkerTagSelect bind:tag={module.value.tag} />
 		<Button
 			size="xs"
 			color="light"

package/package/components/flows/content/FlowModuleWorkerTagSelect.svelte

@@ -0,0 +1,47 @@
+<script>import { getContext } from 'svelte';
+import { workerTags } from '../../../stores';
+import { WorkerService } from '../../../gen';
+export let tag;
+const { flowStore, selectedId } = getContext('FlowEditorContext');
+loadWorkerGroups();
+async function loadWorkerGroups() {
+    if (!$workerTags) {
+        $workerTags = await WorkerService.getCustomTags();
+    }
+}
+</script>
+
+{#if $workerTags}
+	{#if $workerTags?.length > 0}
+		<div class="w-40">
+			{#if $flowStore.tag == undefined}
+				<select
+					placeholder="Tag"
+					bind:value={tag}
+					on:change={(e) => {
+						if (tag == '') {
+							tag = undefined
+						}
+					}}
+				>
+					{#if tag}
+						<option value="">reset to default</option>
+					{:else}
+						<option value="" disabled selected>Tag</option>
+					{/if}
+					{#each $workerTags ?? [] as tag (tag)}
+						<option value={tag}>{tag}</option>
+					{/each}
+				</select>
+			{:else}
+				<button
+					title="Worker Group is defined at the flow level"
+					class="w-full text-left items-center font-normal p-1 border text-xs rounded"
+					on:click={() => ($selectedId = 'settings-worker-group')}
+				>
+					Flow's WG: {$flowStore.tag}
+				</button>
+			{/if}
+		</div>
+	{/if}
+{/if}

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        tag: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowModuleWorkerTagSelectProps = typeof __propDef.props;
+export type FlowModuleWorkerTagSelectEvents = typeof __propDef.events;
+export type FlowModuleWorkerTagSelectSlots = typeof __propDef.slots;
+export default class FlowModuleWorkerTagSelect extends SvelteComponent<FlowModuleWorkerTagSelectProps, FlowModuleWorkerTagSelectEvents, FlowModuleWorkerTagSelectSlots> {
+}
+export {};

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

@@ -37,6 +37,7 @@ let dirtyPath = false;
 <div class="h-full overflow-hidden">
 	<FlowCard {noEditor} title="Settings">
 		<div class="h-full flex-1">
+			<!-- svelte-ignore a11y-autofocus -->
 			<Tabs bind:selected={$selectedId}>
 				<Tab value="settings-metadata">Metadata</Tab>
 				{#if !noEditor && customUi?.settingsTabs?.schedule != false}

package/package/components/flows/flowModuleNextId.js

@@ -4,7 +4,7 @@ import { charsToNumber, numberToChars } from './idUtils';
 export function nextId(flowState, fullFlow) {
     const allIds = dfs(fullFlow.value.modules, (fm) => fm.id);
     const max = allIds.concat(Object.keys(flowState)).reduce((acc, key) => {
-        if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
+        if (key.length >= 4) {
             return acc;
         }
         else {

package/package/components/flows/flowState.d.ts

@@ -3,7 +3,7 @@ import type { Schema } from '../../common';
 import type { Flow } from '../../gen';
 import type { Writable } from 'svelte/store';
 export type FlowModuleState = {
-    schema: Schema;
+    schema?: Schema;
     previewResult?: any;
     previewArgs?: any;
 };

package/package/components/flows/flowStateUtils.d.ts

@@ -20,7 +20,7 @@ export declare function fork(flowModule: FlowModule): Promise<[FlowModule & {
     value: RawScript;
 }, FlowModuleState]>;
 export declare function emptyModule(flowState: FlowState, fullFlow: OpenFlow, flow?: boolean): FlowModule;
-export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema, flow: OpenFlow, flowPath: string): Promise<[FlowModule & {
+export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema | undefined, flowPath: string): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
 export declare function deleteFlowStateById(id: string, flowStateStore: Writable<FlowState>): void;

package/package/components/flows/flowStateUtils.js

@@ -142,7 +142,7 @@ export function emptyModule(flowState, fullFlow, flow) {
         value: { type: 'identity', flow }
     };
 }
-export async function createScriptFromInlineScript(flowModule, suffix, schema, flow, flowPath) {
+export async function createScriptFromInlineScript(flowModule, suffix, schema, flowPath) {
     const user = get(userStore);
     if (flowModule.value.type != 'rawscript') {
         throw new Error("Can't create script from non-inline script");

package/package/components/flows/flowStore.d.ts

@@ -6,3 +6,4 @@ export type FlowMode = 'push' | 'pull';
 export declare const importFlowStore: Writable<Flow | undefined>;
 export declare function initFlow(flow: Flow, flowStore: Writable<Flow>, flowStateStore: Writable<FlowState>): Promise<void>;
 export declare function copyFirstStepSchema(flowState: FlowState, flowStore: Writable<OpenFlow>): Promise<void>;
+export declare function replaceId(expr: string, id: string, newId: string): string;

package/package/components/flows/flowStore.js

@@ -23,3 +23,8 @@ export async function copyFirstStepSchema(flowState, flowStore) {
         return flow;
     });
 }
+export function replaceId(expr, id, newId) {
+    return expr
+        .replaceAll(`results.${id}`, `results.${newId}`)
+        .replaceAll(`results?.${id}`, `results?.${newId}`);
+}

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

@@ -3,7 +3,6 @@ import { createEventDispatcher } from 'svelte';
 import { ListFilter } from 'lucide-svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
 const dispatch = createEventDispatcher();
-export let open = undefined;
 export let index;
 export let flowJobs;
 export let flowJobsSuccess;

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

@@ -1,7 +1,6 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        open?: boolean | undefined;
         index: number;
         flowJobs: string[] | undefined;
         flowJobsSuccess: (boolean | undefined)[] | undefined;

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

@@ -1,10 +1,17 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { AlertTriangle, Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
+import { AlertTriangle, Bed, Database, Gauge, Move, Pencil, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
+import { get } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
+import IdEditorInput from '../../IdEditorInput.svelte';
+import { dfs } from '../dfs';
+import { Drawer } from '../../common';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import { getDependeeAndDependentComponents } from '../flowExplorer';
+import { replaceId } from '../flowStore';
 export let selected = false;
 export let deletable = false;
 export let retry = false;
@@ -22,20 +29,84 @@ export let concurrency = false;
 export let retries = undefined;
 export let warningMessage = undefined;
 const { flowInputsStore } = getContext('FlowGraphContext');
+const flowEditorContext = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
+let editId = false;
+let newId = id ?? '';
+let hover = false;
 </script>
 
+{#if deletable && id && editId}
+	{@const flowStore = flowEditorContext?.flowStore ? get(flowEditorContext?.flowStore) : undefined}
+	{@const getDeps = getDependeeAndDependentComponents(
+		id,
+		flowStore?.value.modules ?? [],
+		flowStore?.value.failure_module
+	)}
+	<Drawer bind:open={editId}>
+		<DrawerContent title="Edit Step Id {id}" on:close={() => (editId = false)}>
+			<div>
+				<IdEditorInput
+					buttonText="Edit Id "
+					btnClasses="!ml-1"
+					label=""
+					initialId={id}
+					acceptUnderScores
+					reservedIds={dfs(flowStore?.value.modules ?? [], (x) => x.id)}
+					bind:value={newId}
+					on:save={(e) => {
+						dispatch('changeId', { id, newId: e.detail, deps: getDeps?.dependents ?? {} })
+						editId = false
+					}}
+					on:close={() => {
+						editId = false
+					}}
+				/>
+				<div class="mt-8">
+					<h3>Step Inputs Replacements</h3>
+					<div class="text-2xs text-tertiary pt-0.5">
+						Replace all occurrences of `results.<span class="font-bold">{id}</span>` with{' '}
+						results.<span class="font-bold">{newId}</span> in the step inputs of all steps that depend
+						on it.
+					</div>
+					<div class="pt-8 flex flex-col gap-y-4">
+						{#if Object.keys(getDeps?.dependents ?? {})?.length > 0}
+							{#each Object.entries(getDeps?.dependents ?? {}) as dependents}
+								<div>
+									<h4>{dependents[0]}</h4>
+									<div>
+										{#each dependents?.[1] as d}
+											<div>
+												<span class="font-mono text-sm">{d}</span> &rightarrow;
+												<span class="font-mono text-sm">{replaceId(d, id, newId)}</span>
+											</div>
+										{/each}
+									</div>
+								</div>
+							{/each}
+						{:else}
+							<div class="text-2xs text-tertiary"> No dependents </div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</DrawerContent>
+	</Drawer>
+{/if}
+
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={classNames(
 		'w-full module flex rounded-sm cursor-pointer',
-		selected ? 'outline outline-offset-1 outline-2  outline-gray-600 dark:outline-gray-400' : '',
+		selected ? 'outline outline-offset-0  outline-2  outline-slate-500 dark:outline-gray-400' : '',
 		'flex relative',
 		$copilotCurrentStepStore === id ? 'z-[901]' : ''
 	)}
 	style="width: 275px; height: 34px; background-color: {bgColor};"
+	on:mouseenter={() => (hover = true)}
+	on:mouseleave={() => (hover = false)}
 	on:click
 >
 	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
@@ -46,7 +117,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					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} />
+					<Repeat size={12} />
 				</div>
 				<svelte:fragment slot="text">Retries</svelte:fragment>
 			</Popover>
@@ -58,7 +129,7 @@ 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"
 				>
-					<Gauge size={14} />
+					<Gauge size={12} />
 				</div>
 				<svelte:fragment slot="text">Concurrency Limits</svelte:fragment>
 			</Popover>
@@ -69,7 +140,7 @@ 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"
 				>
-					<Database size={14} />
+					<Database size={12} />
 				</div>
 				<svelte:fragment slot="text">Cached</svelte:fragment>
 			</Popover>
@@ -80,7 +151,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<Square size={14} />
+					<Square size={12} />
 				</div>
 				<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 			</Popover>
@@ -91,7 +162,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<PhoneIncoming size={14} />
+					<PhoneIncoming size={12} />
 				</div>
 				<svelte:fragment slot="text">Suspend</svelte:fragment>
 			</Popover>
@@ -102,7 +173,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<Bed size={14} />
+					<Bed size={12} />
 				</div>
 				<svelte:fragment slot="text">Sleep</svelte:fragment>
 			</Popover>
@@ -113,7 +184,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
-					<Voicemail size={14} />
+					<Voicemail size={12} />
 				</div>
 				<svelte:fragment slot="text">Mocked</svelte:fragment>
 			</Popover>
@@ -122,36 +193,49 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 
 	<div
 		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
-			border border-gray-400 dark:border-gray-600 p-2 text-2xs module text-primary"
+	 p-2 text-2xs module text-primary"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
 		{/if}
 		<div class="truncate" class:font-bold={bold}>{label}</div>
-		<div class="flex items-center space-x-2">
+		<div class="flex items-center relative">
 			{#if id}
 				<Badge color="indigo">{id}</Badge>
+
+				{#if deletable}
+					<button
+						class="absolute -left-[20px] z-10 h-[20px] rounded-l rounded-t rounded-s w-[20px] trash center-center text-secondary bg-surface duration-150 hover:bg-blue-400 {editId
+							? '!bg-blue-400'
+							: ''} hover:text-white
+hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
+						on:click|preventDefault|stopPropagation={(event) => (editId = !editId)}
+						title="Edit Id"><Pencil size={14} /></button
+					>
+				{/if}
 			{/if}
 		</div>
 	</div>
 	{#if deletable}
 		<button
-			class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary
-	border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white
-	hover:border-red-700 {selected ? '' : '!hidden'}"
+			class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
+	outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-150 hover:bg-red-400 hover:text-white
+	 {hover || selected ? '' : '!hidden'}"
+			title="Delete"
 			on:click|preventDefault|stopPropagation={(event) =>
 				dispatch('delete', { event, id, type: modType })}
 		>
-			<X class="mx-[3px]" size={14} strokeWidth={2} />
+			<X class="mx-[3px]" size={12} strokeWidth={2} />
 		</button>
 
 		<button
-			class="absolute -top-[10px] right-[35px] rounded-full h-[20px] w-[20px] trash center-center text-primary
-border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-blue-400 hover:text-white
-hover:border-blue-700 {selected ? '' : '!hidden'}"
+			class="absolute -top-[10px] right-[60px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
+outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-150 hover:bg-blue-400 hover:text-white
+ {hover ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
+			title="Move"
 		>
-			<Move class="mx-[3px]" size={14} strokeWidth={2} />
+			<Move class="mx-[3px]" size={12} strokeWidth={2} />
 		</button>
 
 		{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}

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

@@ -20,6 +20,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        changeId: CustomEvent<any>;
         delete: CustomEvent<any>;
         move: CustomEvent<any>;
     } & {