windmill-components 1.52.0 → 1.55.0

package/components/flows/content/FlowModuleWrapper.svelte

@@ -1,15 +1,16 @@
 <script>import { Script } from '../../../gen';
 import { getContext } from 'svelte';
-import FlowBranchesWrapper from './FlowBranchesWrapper.svelte';
 import FlowLoop from './FlowLoop.svelte';
 import FlowModuleComponent from './FlowModuleComponent.svelte';
 import FlowBranchAllWrapper from './FlowBranchAllWrapper.svelte';
 import FlowBranchOneWrapper from './FlowBranchOneWrapper.svelte';
-import { createInlineScriptModule, createLoop, createBranches, pickScript, createBranchAll } from '../flowStateUtils';
+import { createInlineScriptModule, pickFlow, pickScript } from '../flowStateUtils';
 import FlowInputs from './FlowInputs.svelte';
 import { flowStateStore } from '../flowState';
-import Tooltip from '../../Tooltip.svelte';
 import { Alert } from '../../common';
+import FlowInputsFlow from './FlowInputsFlow.svelte';
+import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
+import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
 const { selectedId } = getContext('FlowEditorContext');
 export let flowModule;
 // These pointers are used to easily access previewArgs of parent module, and previous module
@@ -22,8 +23,10 @@ export let previousModule = undefined;
 {#if flowModule.id === $selectedId}
 	{#if flowModule.value.type === 'forloopflow'}
 		<FlowLoop bind:mod={flowModule} {parentModule} {previousModule} />
-	{:else if flowModule.value.type === 'branchone' || flowModule.value.type === 'branchall'}
-		<FlowBranchesWrapper {previousModule} bind:flowModule {parentModule} />
+	{:else if flowModule.value.type === 'branchone'}
+		<FlowBranchesOneWrapper {previousModule} bind:flowModule />
+	{:else if flowModule.value.type === 'branchall'}
+		<FlowBranchesAllWrapper {previousModule} bind:flowModule />
 	{:else if flowModule.value.type === 'identity'}
 		{#if $selectedId == 'failure'}
 			<Alert type="info" title="Error handlers are triggered upon non recovered errors">
@@ -36,42 +39,60 @@ export let previousModule = undefined;
 			</Alert>
 		{/if}
 
-		<FlowInputs
-			shouldDisableTriggerScripts={parentModule !== undefined ||
-				previousModule !== undefined ||
-				$selectedId == 'failure'}
-			on:pick={async ({ detail }) => {
-				const { path, summary, kind } = detail
-				const [module, state] = await pickScript(path, summary, flowModule.id)
+		{#if flowModule.value.flow}
+			<FlowInputsFlow
+				failureModule={$selectedId === 'failure'}
+				on:pick={async ({ detail }) => {
+					const { path, summary } = detail
+					const [module, state] = await pickFlow(path, summary, flowModule.id)
 
-				if (kind == Script.kind.APPROVAL) {
-					module.suspend = { required_events: 1, timeout: 1800 }
-				}
+					flowModule = module
+					$flowStateStore[module.id] = state
+				}}
+			/>
+		{:else}
+			<FlowInputs
+				shouldDisableTriggerScripts={parentModule !== undefined ||
+					previousModule !== undefined ||
+					$selectedId == 'failure'}
+				on:pick={async ({ detail }) => {
+					const { path, summary, kind, hash } = detail
+					const [module, state] = await pickScript(path, summary, flowModule.id, hash)
+
+					if (kind == Script.kind.APPROVAL) {
+						module.suspend = { required_events: 1, timeout: 1800 }
+					}
 
-				flowModule = module
-				$flowStateStore[module.id] = state
-			}}
-			on:new={async ({ detail }) => {
-				const { language, kind, subkind } = detail
+					flowModule = module
+					$flowStateStore[module.id] = state
+				}}
+				on:new={async ({ detail }) => {
+					const { language, kind, subkind } = detail
 
-				const [module, state] = await createInlineScriptModule(
-					language,
-					kind,
-					subkind,
-					flowModule.id
-				)
+					const [module, state] = await createInlineScriptModule(
+						language,
+						kind,
+						subkind,
+						flowModule.id
+					)
 
-				if (kind == Script.kind.APPROVAL) {
-					module.suspend = { required_events: 1, timeout: 1800 }
-				}
+					if (kind == Script.kind.APPROVAL) {
+						module.suspend = { required_events: 1, timeout: 1800 }
+					}
 
-				flowModule = module
-				$flowStateStore[module.id] = state
-			}}
+					flowModule = module
+					$flowStateStore[module.id] = state
+				}}
+				failureModule={$selectedId === 'failure'}
+			/>
+		{/if}
+	{:else if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script' || flowModule.value.type === 'flow'}
+		<FlowModuleComponent
+			bind:flowModule
+			{parentModule}
+			{previousModule}
 			failureModule={$selectedId === 'failure'}
 		/>
-	{:else if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script'}
-		<FlowModuleComponent bind:flowModule {parentModule} {previousModule} />
 	{/if}
 {:else if flowModule.value.type === 'forloopflow'}
 	{#each flowModule.value.modules as submodule, index (index)}
@@ -83,7 +104,10 @@ export let previousModule = undefined;
 	{/each}
 {:else if flowModule.value.type === 'branchone'}
 	{#if $selectedId === `${flowModule?.id}-branch-default`}
-		<div class="p-4 text-sm truncate">Default branch</div>
+		<div class="p-2">
+			<h3 class="mb-4">Default branch</h3>
+			Nothing to configure, this is the default branch if none of the predicates are met.
+		</div>
 	{:else}
 		{#each flowModule.value.default as submodule, index}
 			<svelte:self

package/components/flows/content/FlowPathViewer.svelte

@@ -0,0 +1,20 @@
+<script>import Skeleton from '../../common/skeleton/Skeleton.svelte';
+import FlowGraphViewer from '../../FlowGraphViewer.svelte';
+import { FlowService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+export let path;
+export let noSide = false;
+let flow = undefined;
+async function loadFlow(path) {
+    flow = await FlowService.getFlowByPath({ workspace: $workspaceStore, path });
+}
+$: path && loadFlow(path);
+</script>
+
+<div class="flex flex-col flex-1 h-full overflow-auto">
+	{#if flow}
+		<FlowGraphViewer {noSide} {flow} />
+	{:else}
+		<Skeleton layout={[[40]]} />
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+        noSide?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowPathViewerProps = typeof __propDef.props;
+export type FlowPathViewerEvents = typeof __propDef.events;
+export type FlowPathViewerSlots = typeof __propDef.slots;
+export default class FlowPathViewer extends SvelteComponentTyped<FlowPathViewerProps, FlowPathViewerEvents, FlowPathViewerSlots> {
+}
+export {};

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/content/FlowSettings.svelte

@@ -6,7 +6,6 @@ import Path from '../../Path.svelte';
 import Required from '../../Required.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowSchedules from './FlowSchedules.svelte';
-import SvelteMarkdown from 'svelte-markdown';
 import Toggle from '../../Toggle.svelte';
 import { Alert } from '../../common';
 import { FlowGraph } from '../../graph';
@@ -23,7 +22,7 @@ let topHeight = 0;
 			<Tabs selected={defaultTab}>
 				<Tab value="metadata">Metadata</Tab>
 				<Tab value="schedule">Schedule</Tab>
-				<Tab value="same-worker">Same Worker</Tab>
+				<Tab value="same-worker">Shared Directory</Tab>
 				<Tab value="graph">Graph</Tab>
 
 				<svelte:fragment slot="content">
@@ -60,7 +59,7 @@ let topHeight = 0;
 							<div class="font-bold pb-1 mt-4">Description preview</div>
 							{#if $flowStore.description}
 								<div class="prose max-h-48 mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto">
-									<SvelteMarkdown source={$flowStore.description} />
+									{$flowStore.description}
 								</div>
 							{:else}
 								<div class="text-sm text-gray-500"> Enter a description to see the preview </div>
@@ -78,19 +77,16 @@ let topHeight = 0;
 					</TabContent>
 
 					<TabContent value="same-worker" class="p-4 flex flex-col">
-						<Alert
-							type="info"
-							title="Toggle Same Worker to have all steps be ran on the same worker"
-						>
-							Steps will be run one after the other on the same worker, and will share a folder at
-							`./shared` in which they can store heavier data and pass them to the next step. <br
-							/><br />Beware that the `./shared` folder is not preserved across suspends and sleeps.
+						<Alert type="info" title="Shared Directory">
+							Steps will share a folder at `./shared` in which they can store heavier data and pass
+							them to the next step. <br /><br />Beware that the `./shared` folder is not preserved
+							across suspends and sleeps.
 						</Alert>
-						<span class="my-2 text-sm font-bold">Same Worker</span>
+						<span class="my-2 text-sm font-bold">Shared Directoryr</span>
 						<Toggle
 							bind:checked={$flowStore.value.same_worker}
 							options={{
-								right: 'Same Worker'
+								right: 'Shared Directory on `./shared`'
 							}}
 						/>
 					</TabContent>

package/components/flows/flowState.js

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 import { loadFlowModuleState } from './flowStateUtils';
-import { emptyFlowModuleState, isEmptyFlowModule } from './utils';
+import { emptyFlowModuleState } from './utils';
 /**
  * flowStateStore represents the local state of each module indexed by its id.
  * It contains data loaded that are not contained in a Flow object i.e. schemas.
@@ -33,7 +33,7 @@ async function mapFlowModule(flowModule, modulesState) {
     if (value.type === 'branchone' || value.type === 'branchall') {
         await Promise.all(value.branches.map((branchModule) => mapFlowModules(branchModule.modules, modulesState)));
     }
-    if (isEmptyFlowModule(flowModule)) {
+    if (value.type === 'identity') {
         modulesState[flowModule.id] = emptyFlowModuleState();
     }
     else {

package/components/flows/flowStateUtils.d.ts

@@ -1,22 +1,26 @@
 import type { Schema } from '../../common';
-import { Script, type FlowModule, type PathScript, type RawScript } from '../../gen';
+import { Script, type FlowModule, type PathFlow, type PathScript, type RawScript } from '../../gen';
 import { type FlowModuleState } from './flowState';
 import { Mutex } from 'async-mutex';
 export declare function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState>;
 export declare const idMutex: Mutex;
 export declare function getNextId(currentKeys: string[]): string;
 export declare function nextId(): string;
-export declare function pickScript(path: string, summary: string, id: string): Promise<[FlowModule & {
+export declare function pickScript(path: string, summary: string, id: string, hash?: string): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
+export declare function pickFlow(path: string, summary: string, id: string): Promise<[FlowModule & {
+    value: PathFlow;
+}, FlowModuleState]>;
 export declare function createInlineScriptModule(language: RawScript.language, kind: Script.kind, subkind: 'pgsql' | 'flow', id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createLoop(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranches(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranchAll(id: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createFlow(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function fork(flowModule: FlowModule): Promise<[FlowModule & {
     value: RawScript;
 }, FlowModuleState]>;
-export declare function emptyModule(): FlowModule;
+export declare function emptyModule(flow?: boolean): FlowModule;
 export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;

package/components/flows/flowStateUtils.js

@@ -10,7 +10,7 @@ import { Mutex } from 'async-mutex';
 export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
-        if (flowModule.value.type == 'script' || flowModule.value.type == 'rawscript') {
+        if (flowModule.value.type == 'script' || flowModule.value.type == 'rawscript' || flowModule.value.type == 'flow') {
             flowModule.value.input_transforms = input_transforms;
         }
         return { schema, previewResult: NEVER_TESTED_THIS_FAR };
@@ -47,10 +47,18 @@ export function nextId() {
     }, 0);
     return numberToChars(max);
 }
-export async function pickScript(path, summary, id) {
+export async function pickScript(path, summary, id, hash) {
     const flowModule = {
         id,
-        value: { type: 'script', path, input_transforms: {} },
+        value: { type: 'script', path, hash, input_transforms: {} },
+        summary
+    };
+    return [flowModule, await loadFlowModuleState(flowModule)];
+}
+export async function pickFlow(path, summary, id) {
+    const flowModule = {
+        id,
+        value: { type: 'flow', path, input_transforms: {} },
         summary
     };
     return [flowModule, await loadFlowModuleState(flowModule)];
@@ -69,7 +77,7 @@ export async function createLoop(id) {
         value: {
             type: 'forloopflow',
             modules: [],
-            iterator: { type: 'javascript', expr: '' },
+            iterator: { type: 'javascript', expr: '["dynamic or static array"]' },
             skip_failures: true
         }
     };
@@ -101,6 +109,19 @@ export async function createBranchAll(id) {
     const flowModuleState = await loadFlowModuleState(branchesFlowModules);
     return [branchesFlowModules, flowModuleState];
 }
+export async function createFlow(id) {
+    const flowFlowModules = {
+        id,
+        value: {
+            type: 'flow',
+            path: '',
+            input_transforms: {},
+        },
+        summary: ''
+    };
+    const flowModuleState = await loadFlowModuleState(flowFlowModules);
+    return [flowFlowModules, flowModuleState];
+}
 export async function fork(flowModule) {
     if (flowModule.value.type !== 'script') {
         throw new Error('Can only fork a script module');
@@ -122,10 +143,10 @@ async function createInlineScriptModuleFromPath(path, id) {
         }
     };
 }
-export function emptyModule() {
+export function emptyModule(flow) {
     return {
         id: nextId(),
-        value: { type: 'identity' }
+        value: { type: 'identity', flow }
     };
 }
 export async function createScriptFromInlineScript(flowModule, suffix, schema) {
@@ -144,7 +165,7 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema) {
     const forkedDescription = wasForked ? `as a fork of ${originalScriptPath}` : '';
     const description = `This script was edited in place of flow ${flow.path} ${forkedDescription} by ${user?.username}.`;
     const availablePath = await findNextAvailablePath(path);
-    await ScriptService.createScript({
+    const hash = await ScriptService.createScript({
         workspace: get(workspaceStore),
         requestBody: {
             path: availablePath,
@@ -157,7 +178,7 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema) {
             language: flowModule.value.language
         }
     });
-    return pickScript(availablePath, flowModule.summary ?? '', flowModule.id);
+    return pickScript(availablePath, flowModule.summary ?? '', flowModule.id, hash);
 }
 export function deleteFlowStateById(id) {
     flowStateStore.update((fss) => {

package/components/flows/header/FlowImportExportMenu.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/header/FlowPreviewButtons.svelte

@@ -7,6 +7,8 @@ import { getContext } from 'svelte';
 const { selectedId } = getContext('FlowEditorContext');
 let previewOpen = false;
 let previewMode = 'whole';
+let jobId = undefined;
+let job = undefined;
 $: upToDisabled =
     [
         'settings',
@@ -17,7 +19,7 @@ $: upToDisabled =
         'inputs',
         'schedules',
         'failure'
-    ].includes($selectedId) || $selectedId.includes('branch');
+    ].includes($selectedId) || $selectedId?.includes('branch');
 </script>
 
 <div class="flex flex-row-reverse justify-between items-center gap-x-2">
@@ -51,10 +53,12 @@ $: upToDisabled =
 	{/if}
 </div>
 
-<Drawer bind:open={previewOpen} size="1200px">
+<Drawer bind:open={previewOpen} size="75%">
 	<FlowPreviewContent
 		open={previewOpen}
 		bind:previewMode
+		bind:job
+		bind:jobId
 		on:close={() => {
 			previewOpen = false
 		}}

package/components/flows/header/FlowPreviewButtons.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -8,7 +8,7 @@ import { flowStore } from '../flowStore';
 import { NEVER_TESTED_THIS_FAR } from '../utils';
 const { select, selectedId } = getContext('FlowEditorContext');
 function onToggle() {
-    if ($flowStore.value.failure_module) {
+    if ($flowStore?.value?.failure_module) {
         $flowStore.value.failure_module = undefined;
         // By default, we return to settings when disabling the failure module
         select('settings');
@@ -31,7 +31,7 @@ function onToggle() {
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	on:click={() => {
-		if ($flowStore.value.failure_module) {
+		if ($flowStore?.value?.failure_module) {
 			select('failure')
 		} else {
 			onToggle()
@@ -39,7 +39,7 @@ function onToggle() {
 	}}
 	class={classNames(
 		'border rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex flex-col overflow-x-hidden ',
-		$selectedId.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
+		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
 >
 	<div class=" flex justify-between items-center flex-wrap">
@@ -48,12 +48,12 @@ function onToggle() {
 			<span class="font-bold text-xs">Error handler</span>
 		</div>
 		<div class="-my-1">
-			<Toggle checked={Boolean($flowStore.value.failure_module)} on:change={onToggle} />
+			<Toggle checked={Boolean($flowStore?.value?.failure_module)} on:change={onToggle} />
 		</div>
 	</div>
 
 	<div class="w-full truncate block">
-		{#if Boolean($flowStore.value.failure_module)}
+		{#if Boolean($flowStore?.value?.failure_module)}
 			<span>
 				{$flowStore.value.failure_module?.summary ||
 					($flowStore.value.failure_module?.value.type === 'rawscript'

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,8 +1,10 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
+import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
 import { faBed, faRepeat, faStop, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
+import { PhoneIncoming, Repeat } from 'lucide-svelte';
 export let isFirst = false;
 export let isLast = false;
 export let hasLine = true;
@@ -35,21 +37,38 @@ const dispatch = createEventDispatcher();
 			margin
 		)}
 	>
-		<div class="absolute text-sm right-14 -bottom-3 flex flex-row gap-1">
+		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
 			{#if retry}
-				<div class="bg-white rounded border text-gray-600 px-1">
-					<Icon scale={0.8} data={faRepeat} />
-				</div>
+				<Popover notClickable>
+					<div class="bg-white rounded border text-gray-700 px-1 center-center">
+						<Repeat size={14} />
+					</div>
+					<span slot="text">Retries</span>
+				</Popover>
 			{/if}
 			{#if earlyStop}
-				<div class="bg-white rounded border text-gray-600 px-1">
-					<Icon scale={0.8} data={faStop} />
-				</div>
+				<Popover notClickable>
+					<div class="bg-white rounded border text-gray-700 px-1">
+						<Icon scale={0.8} data={faStop} />
+					</div>
+					<span slot="text">Early Stop/Break</span>
+				</Popover>
 			{/if}
-			{#if suspend || sleep}
-				<div class="bg-white rounded border text-gray-600 px-1">
-					<Icon scale={0.8} data={faBed} />
-				</div>
+			{#if sleep}
+				<Popover notClickable>
+					<div class="bg-white rounded border text-gray-700 px-1">
+						<Icon scale={0.8} data={faBed} />
+					</div>
+					<span slot="text">Sleep</span>
+				</Popover>
+			{/if}
+			{#if suspend}
+				<Popover notClickable>
+					<div class="bg-white rounded border text-gray-700 px-1 center-center">
+						<PhoneIncoming size={12} />
+					</div>
+					<span slot="text">Suspend</span>
+				</Popover>
 			{/if}
 		</div>
 		<div

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -3,7 +3,7 @@ import { createBranchAll, createBranches, createLoop, deleteFlowStateById, empty
 import { flowStateStore } from '../flowState';
 import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
 import RemoveStepConfirmationModal from '../content/RemoveStepConfirmationModal.svelte';
-import { emptyFlowModuleState, isEmptyFlowModule } from '../utils';
+import { emptyFlowModuleState } from '../utils';
 import MapItem from './MapItem.svelte';
 import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowInputsItem from './FlowInputsItem.svelte';
@@ -15,7 +15,7 @@ let indexToRemove = undefined;
 const { select } = getContext('FlowEditorContext');
 async function insertNewModuleAtIndex(index, kind) {
     await idMutex.runExclusive(async () => {
-        var module = emptyModule();
+        var module = emptyModule(kind == 'flow');
         var state = emptyFlowModuleState();
         if (kind == 'forloop') {
             ;
@@ -30,6 +30,8 @@ async function insertNewModuleAtIndex(index, kind) {
             [module, state] = await createBranchAll(module.id);
         }
         const flowModule = module;
+        if (!modules)
+            return;
         modules.splice(index, 0, flowModule);
         modules = modules;
         $flowStateStore[flowModule.id] = state;
@@ -38,6 +40,8 @@ async function insertNewModuleAtIndex(index, kind) {
 }
 function removeAtIndex(index) {
     select('settings');
+    if (!modules)
+        return;
     const [removedModule] = modules.splice(index, 1);
     modules = modules;
     const leaves = findLeaves(removedModule);
@@ -87,25 +91,27 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 			</li>
 		{/if}
 
-		{#each modules as mod, index (mod.id ?? index)}
-			<div transition:slide|local>
-				<MapItem
-					bind:mod
-					on:delete={(event) => {
-						if (event.detail.detail.shiftKey || isEmptyFlowModule(mod)) {
-							removeAtIndex(index)
-						} else {
-							indexToRemove = index
-						}
-					}}
-					on:insert={(e) => {
-						insertNewModuleAtIndex(index, e.detail)
-					}}
-				/>
-			</div>
-		{/each}
+		{#if modules}
+			{#each modules as mod, index (mod.id ?? index)}
+				<div transition:slide|local>
+					<MapItem
+						bind:mod
+						on:delete={(event) => {
+							if (event.detail.detail.shiftKey || mod.value.type === 'identity') {
+								removeAtIndex(index)
+							} else {
+								indexToRemove = index
+							}
+						}}
+						on:insert={(e) => {
+							insertNewModuleAtIndex(index, e.detail)
+						}}
+					/>
+				</div>
+			{/each}
+		{/if}
 
-		<InsertModuleButton on:new={(e) => insertNewModuleAtIndex(modules.length, e.detail)} />
+		<InsertModuleButton on:new={(e) => insertNewModuleAtIndex(modules?.length ?? 0, e.detail)} />
 	</ul>
 	{#if root}
 		<div class="sticky bottom-0 bg-gray-50 flex-none px-4 py-1 pb-2 border-t">

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

@@ -3,7 +3,7 @@ import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         root?: boolean | undefined;
-        modules: FlowModule[];
+        modules: FlowModule[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/map/FlowSettingsItem.svelte

@@ -23,7 +23,7 @@ $: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray
 				</Badge>
 			{/if}
 			{#if $flowStore.value.same_worker}
-				<Badge color="blue" baseClass="truncate">same worker</Badge>
+				<Badge color="blue" baseClass="truncate">./shared</Badge>
 			{/if}
 		</span>
 	</span>

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };