windmill-components 1.642.0 → 1.655.0

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

@@ -1,8 +1,9 @@
 <script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
 import Popover from '../../Popover.svelte';
+import DropdownV2 from '../../DropdownV2.svelte';
 import { classNames } from '../../../utils';
-import { Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, SkipForward, Pin, X, Play, Loader2, TriangleAlert, Timer, Maximize2 } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { Bed, Database, Gauge, EllipsisVertical, PhoneIncoming, Repeat, Square, SkipForward, Pin, X, Play, Loader2, TriangleAlert, Timer, Maximize2 } from 'lucide-svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 import IdEditorInput from '../../IdEditorInput.svelte';
@@ -21,7 +22,8 @@ import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import { getNodeColorClasses, aiActionToNodeState } from '../../graph';
 import DiffActionBar from './DiffActionBar.svelte';
 import { getGraphContext } from '../../graph/graphContext';
-let { selected = false, deletable = false, moduleAction = undefined, retry = false, cache = false, earlyStop = false, skip = false, suspend = false, sleep = false, mock = { enabled: false }, bold = false, id = undefined, label, path = '', modType = undefined, nodeState, concurrency = false, debouncing = false, retries = undefined, warningMessage = undefined, isTrigger = false, editMode = false, alwaysShowOutputPicker = false, loopStatus = undefined, icon, onTestUpTo, inputTransform, onUpdateMock, onEditInput, flowJob, enableTestRun = false, maximizeSubflow = undefined } = $props();
+import MoveHandleButton from '../../graph/MoveHandleButton.svelte';
+let { selected = false, deletable = false, moduleAction = undefined, retry = false, cache = false, earlyStop = false, skip = false, suspend = false, sleep = false, mock = { enabled: false }, bold = false, id = undefined, label, path = '', nodeState, concurrency = false, debouncing = false, retries = undefined, warningMessage = undefined, isTrigger = false, editMode = false, alwaysShowOutputPicker = false, loopStatus = undefined, icon, onTestUpTo, inputTransform, onUpdateMock, onEditInput, flowJob, enableTestRun = false, maximizeSubflow = undefined, menuItems = undefined } = $props();
 // AI action colors take priority over execution state
 let effectiveState = $derived(aiActionToNodeState(moduleAction?.action) ?? nodeState);
 let colorClasses = $derived(getNodeColorClasses(effectiveState, selected));
@@ -30,6 +32,9 @@ const flowInputsStore = flowEditorContext?.flowInputsStore;
 const flowStore = flowEditorContext?.flowStore;
 const flowGraphContext = getGraphContext();
 const diffManager = flowGraphContext?.diffManager;
+const moveManager = flowGraphContext?.moveManager;
+// Hide per-node action buttons when multiple nodes are selected (multi-select mode)
+let isMultiSelected = $derived((flowGraphContext?.selectionManager?.selectedIds?.length ?? 0) > 1);
 let pickableIds = $state(undefined);
 const dispatch = createEventDispatcher();
 const propPickerContext = getContext('PropPickerContext');
@@ -39,7 +44,7 @@ $effect(() => {
     pickableIds = $pickablePropertiesFiltered?.priorIds;
 });
 let editId = $state(false);
-let newId = $state(id ?? '');
+let newId = $state(untrack(() => id) ?? '');
 let moduleTest = $state(undefined);
 let testIsLoading = $state(false);
 let hover = $state(false);
@@ -47,6 +52,7 @@ let connectingData = $state(undefined);
 let outputPicker = $state(undefined);
 let testJob = $state(undefined);
 let outputPickerBarOpen = $state(false);
+let dropdownOpen = $state(false);
 let flowStateStore = $derived(flowEditorContext?.flowStateStore);
 let stepHistoryLoader = getStepHistoryLoaderContext();
 function updateConnectingData(id, pickableIds, flowPropPickerConfig, flowStateStore) {
@@ -61,7 +67,8 @@ $effect(() => {
     updateConnectingData(id, pickableIds, $flowPropPickerConfig, flowStateStore);
 });
 let isConnectingCandidate = $derived(!!id && !!$flowPropPickerConfig && !!pickableIds && Object.keys(pickableIds).includes(id));
-const outputPickerVisible = $derived(editMode && (isConnectingCandidate || alwaysShowOutputPicker) && !!id);
+let isDragging = $derived(!!moveManager?.dragging);
+const outputPickerVisible = $derived(editMode && (isConnectingCandidate || alwaysShowOutputPicker) && !!id && !isDragging);
 const icon_render = $derived(icon);
 let testRunDropdownOpen = $state(false);
 let outputPickerInner = $state(undefined);
@@ -299,6 +306,7 @@ let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? fal
 				{deletable}
 				{bold}
 				bind:editId
+				disableEditId={isMultiSelected}
 				{hover}
 				{colorClasses}
 			>
@@ -307,7 +315,7 @@ let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? fal
 				{/snippet}
 			</FlowModuleSchemaItemViewer>
 
-			{#if outputPickerVisible}
+			{#if outputPickerVisible && !isMultiSelected}
 				<OutputPicker
 					bind:this={outputPicker}
 					{selected}
@@ -345,54 +353,11 @@ let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? fal
 			{/if}
 		</div>
 
-		{#if deletable}
+		{#if deletable && !isDragging}
 			{#if maximizeSubflow !== undefined}
 				{@render buttonMaximizeSubflow?.()}
 			{/if}
 
-			{#if id !== 'preprocessor'}
-				<!-- The `style="will-change: transform;"` fixes a bug in Safari where the close and move
-			 		 and delete buttons would get clipped (unless an animation is running) -->
-				<div
-					class={twMerge('absolute -translate-y-[100%] top-2 right-4 h-7 p-1 min-w-7')}
-					style="will-change: transform;"
-				>
-					<button
-						class={twMerge(
-							'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary',
-							hover || selected ? 'block' : '!hidden',
-							'shadow-md rounded-md',
-							'group-hover:block'
-						)}
-						onclick={stopPropagation(preventDefault((event) => dispatch('move')))}
-						title="Move"
-					>
-						<Move size={12} />
-					</button>
-				</div>
-			{/if}
-
-			<div
-				class="absolute -translate-y-[100%] top-2 -right-2 h-7 p-1 min-w-7"
-				style="will-change: transform;"
-			>
-				<button
-					class={twMerge(
-						'trash center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-red-400 hover:text-white p-1',
-						selected || hover ? 'block' : '!hidden',
-						'group-hover:block',
-						'shadow-md rounded-md'
-					)}
-					title="Delete"
-					onclick={stopPropagation(
-						preventDefault((event) => dispatch('delete', { id, type: modType }))
-					)}
-					onpointerdown={stopPropagation(preventDefault(() => {}))}
-				>
-					<X size={12} />
-				</button>
-			</div>
-
 			{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}
 				<Popover
 					style="will-change: transform;"
@@ -422,19 +387,65 @@ let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? fal
 					<TriangleAlert size={12} strokeWidth={2} />
 				</Popover>
 			{/if}
+
+			{#if !isMultiSelected && id !== 'preprocessor' && moveManager && id}
+				<div
+					class="absolute -translate-y-[100%] top-2 right-5 h-7 p-1 min-w-7"
+					style="will-change: transform;"
+				>
+					<MoveHandleButton
+						{moveManager}
+						moduleId={id}
+						singleNode
+						visible={hover || selected || dropdownOpen}
+						onClickMove={() => dispatch('move')}
+						class="trash group-hover:block"
+					/>
+				</div>
+			{/if}
+
+			{#if !isMultiSelected && menuItems && menuItems.length > 0}
+				<div
+					class="absolute -translate-y-[100%] top-2 -right-2 h-7 p-1 min-w-7"
+					style="will-change: transform;"
+				>
+					<DropdownV2
+						items={menuItems}
+						placement="bottom-end"
+						bind:open={dropdownOpen}
+						fixedHeight={false}
+						usePointerDownOutside
+					>
+						{#snippet buttonReplacement()}
+							<button
+								class={twMerge(
+									'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary',
+									hover || selected || dropdownOpen ? 'block' : '!hidden',
+									'shadow-md rounded-md',
+									'group-hover:block'
+								)}
+								onpointerdown={stopPropagation(preventDefault(() => {}))}
+								title="Actions"
+							>
+								<EllipsisVertical size={12} />
+							</button>
+						{/snippet}
+					</DropdownV2>
+				</div>
+			{/if}
 		{:else if maximizeSubflow !== undefined}
 			{@render buttonMaximizeSubflow?.()}
 		{/if}
 	</div>
 
-	{#if editMode && enableTestRun && flowJob?.type !== 'QueuedJob'}
+	{#if editMode && enableTestRun && flowJob?.type !== 'QueuedJob' && !isDragging}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="absolute top-1/2 -translate-y-1/2 -translate-x-[100%] -left-[0] flex items-center w-fit px-1 h-9 min-w-9"
 			onmouseenter={() => (hover = true)}
 			onmouseleave={() => (hover = false)}
 		>
-			{#if (hover || selected || testRunDropdownOpen) && outputPickerVisible}
+			{#if !isMultiSelected && (hover || selected || testRunDropdownOpen) && outputPickerVisible}
 				<div transition:fade={{ duration: 100 }}>
 					{#if !testIsLoading}
 						<Button
@@ -486,13 +497,13 @@ let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? fal
 </div>
 
 {#snippet buttonMaximizeSubflow()}
-	<div class="absolute -translate-y-[100%] top-2 right-10 h-7 p-1">
+	<div class="absolute -translate-y-[100%] top-2 right-12 h-7 p-1">
 		<button
 			title="Expand subflow"
 			class={twMerge(
 				'center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary p-1',
 				'shadow-md rounded-md',
-				hover || selected ? 'opacity-100' : 'opacity-50'
+				!isMultiSelected && (hover || selected) ? 'opacity-100' : 'opacity-50'
 			)}
 			onclick={(e) => {
 				e.stopPropagation()

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

@@ -1,3 +1,4 @@
+import { type Item } from '../../../utils';
 import type { Job } from '../../../gen';
 import { type FlowNodeState } from '../../graph';
 import type { ModuleActionInfo } from '../flowDiff';
@@ -19,7 +20,6 @@ interface Props {
     id?: string | undefined;
     label: string;
     path?: string;
-    modType?: string | undefined;
     nodeState?: FlowNodeState;
     concurrency?: boolean;
     debouncing?: boolean;
@@ -44,6 +44,7 @@ interface Props {
     isOwner?: boolean;
     enableTestRun?: boolean;
     maximizeSubflow?: () => void;
+    menuItems?: Item[];
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -62,7 +63,6 @@ declare const FlowModuleSchemaItem: $$__sveltets_2_IsomorphicComponent<Props, {
     changeId: CustomEvent<any>;
     pointerdown: CustomEvent<any>;
     move: CustomEvent<any>;
-    delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/package/components/flows/map/FlowModuleSchemaItemViewer.svelte

@@ -5,7 +5,7 @@ import { slide } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 let iconWidth = $state(0);
 let idBadgeWidth = $state(undefined);
-let { label = '', path = '', id = '', deletable = false, bold = false, editId = $bindable(false), hover = false, colorClasses, icon, onclick } = $props();
+let { label = '', path = '', id = '', deletable = false, bold = false, editId = $bindable(false), disableEditId = false, hover = false, colorClasses, icon, onclick } = $props();
 let marginLeft = $derived(Math.max(iconWidth ?? 0, idBadgeWidth ?? 0) * 2 + 32);
 </script>
 
@@ -46,16 +46,18 @@ let marginLeft = $derived(Math.max(iconWidth ?? 0, idBadgeWidth ?? 0) * 2 + 32);
 				)}
 				baseClass={twMerge('!px-1')}
 				title={id}
-				clickable
-				onclick={(e) => {
-					e?.preventDefault()
-					e?.stopPropagation()
-					editId = !editId
-					onclick?.()
-				}}
+				clickable={!disableEditId}
+				onclick={disableEditId
+					? undefined
+					: (e) => {
+							e?.preventDefault()
+							e?.stopPropagation()
+							editId = !editId
+							onclick?.()
+						}}
 			>
 				<span class="max-w-full text-2xs truncate flex items-center">
-					{#if editId || (hover && deletable)}
+					{#if !disableEditId && (editId || (hover && deletable))}
 						<span transition:slide={{ axis: 'x', duration: 100 }}>
 							<Pencil size={10} class="mr-1" />
 						</span>

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

@@ -6,6 +6,7 @@ interface Props {
     deletable?: boolean;
     bold?: boolean;
     editId?: boolean;
+    disableEditId?: boolean;
     hover?: boolean;
     colorClasses?: FlowNodeColorClasses;
     icon?: import('svelte').Snippet;

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

@@ -2,10 +2,12 @@
 import { createInlineScriptModule, createBranchAll, createBranches, createLoop, createWhileLoop, deleteFlowStateById, emptyModule, pickScript, pickFlow, insertNewPreprocessorModule, createAiAgent } from '../flowStateUtils.svelte';
 import { emptyFlowModuleState } from '../utils.svelte';
 import { dfs } from '../dfs';
+import { nextId, copyId } from '../flowModuleNextId';
 import { push } from '../../../history.svelte';
 import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
 import Portal from '../../Portal.svelte';
 import { getDependentComponents } from '../flowExplorer';
+import { locateModules, groupByParent } from '../multiSelectUtils';
 import { workspaceStore } from '../../../stores';
 import { copilotInfo } from '../../../aiStore';
 import FlowTutorials from '../../FlowTutorials.svelte';
@@ -14,6 +16,7 @@ import { replaceId } from '../flowStore.svelte';
 import { setScheduledPollSchedule } from '../../triggers';
 import { JobService } from '../../../gen';
 import { dfsByModule } from '../previousResults';
+import { MoveManager } from '../../graph/moveManager.svelte';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import FlowStickyNode from './FlowStickyNode.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
@@ -22,11 +25,23 @@ import { flowModuleToAgentTool, createMcpTool, createWebsearchTool, createAiAgen
 import { loadFlowModuleState } from '../flowStateUtils.svelte';
 import { getNoteEditorContext } from '../../graph/noteEditor.svelte';
 let { sidebarSize = $bindable(undefined), disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, newFlow = false, smallErrorHandler = false, workspace = $workspaceStore, onTestUpTo, onEditInput, localModuleStates = {}, testModuleStates = new ModulesTestStates(), aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = $bindable({ val: {} }), onDelete, flowHasChanged } = $props();
-const { customUi, selectionManager, moving, history, flowStateStore, flowStore, pathStore } = getContext('FlowEditorContext');
+const { customUi, selectionManager, history, flowStateStore, flowStore, pathStore } = getContext('FlowEditorContext');
+const moveManager = new MoveManager();
 const { triggersCount, triggersState } = getContext('TriggerContext');
 const { flowPropPickerConfig } = getContext('PropPickerContext');
 // Get NoteEditor context for note position updates
 const noteEditorContext = getNoteEditorContext();
+$effect(() => {
+    if (!moveManager.movingModuleId)
+        return;
+    function onKeyDown(e) {
+        if (e.key === 'Escape') {
+            moveManager.clearMoving();
+        }
+    }
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+});
 export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, inlineScript, toolKind) {
     push(history, flowStore.val);
     let module = emptyModule(flowStateStore.val, flowStore.val, kind == 'flow');
@@ -224,6 +239,67 @@ export function enableNotes() {
 function toggleNoteMode() {
     noteMode = !noteMode;
 }
+export function deleteMultiple(ids) {
+    const deletingSet = new Set(ids);
+    const allDeps = {};
+    for (const id of ids) {
+        const deps = getDependentComponents(id, flowStore.val);
+        for (const [depId, exprs] of Object.entries(deps)) {
+            if (!deletingSet.has(depId)) {
+                allDeps[depId] = [...(allDeps[depId] ?? []), ...exprs];
+            }
+        }
+    }
+    const cb = () => {
+        push(history, flowStore.val);
+        for (const id of ids) {
+            removeAtId(flowStore.val.value.modules, id);
+            delete flowStateStore.val[id];
+        }
+        selectionManager.clearSelection();
+        refreshStateStore(flowStore);
+    };
+    if (Object.keys(allDeps).length > 0) {
+        dependents = allDeps;
+        deleteCallback = cb;
+    }
+    else {
+        cb();
+    }
+}
+export function duplicateMultiple(ids) {
+    const locations = locateModules(ids, flowStore.val.value.modules);
+    const groups = groupByParent(locations);
+    push(history, flowStore.val);
+    const allCloneIds = [];
+    for (const group of groups) {
+        const sorted = [...group].sort((a, b) => a.index - b.index);
+        const parentArr = sorted[0].parentArray;
+        const lastIndex = sorted[sorted.length - 1].index;
+        const clones = [];
+        for (const loc of sorted) {
+            const original = parentArr[loc.index];
+            const clone = $state.snapshot(original);
+            clone.id = copyId(original.id, flowStateStore.val, flowStore.val);
+            flowStateStore.val[clone.id] = emptyFlowModuleState();
+            dfs([clone], (mod) => {
+                if (mod.id !== clone.id) {
+                    const newModId = nextId(flowStateStore.val, flowStore.val);
+                    mod.id = newModId;
+                    flowStateStore.val[newModId] = emptyFlowModuleState();
+                }
+            });
+            clones.push(clone);
+            allCloneIds.push(clone.id);
+        }
+        parentArr.splice(lastIndex + 1, 0, ...clones);
+    }
+    refreshStateStore(flowStore);
+    selectionManager.selectByIds(allCloneIds);
+}
+export function moveMultiple(ids) {
+    moveManager.toggleMovingMultiple(ids);
+}
 const dispatch = createEventDispatcher();
 export function setExpr(module, expr) {
     if (module.value.type == 'forloopflow') {
@@ -333,7 +409,7 @@ $effect(() => {
 			insertable
 			scroll
 			{minHeight}
-			moving={$moving?.id}
+			{moveManager}
 			maxHeight={minHeight}
 			modules={flowStore.val.value.modules}
 			{noteMode}
@@ -390,8 +466,7 @@ $effect(() => {
 					}
 
 					dfs(flowStore.val.value.modules, (mod, modules, branches) => {
-						// console.log('mod', mod.id, $moving?.id, detail, branches)
-						if (mod.id == $moving?.id) {
+						if (mod.id == moveManager.movingModuleId) {
 							originalModules = modules
 						}
 						if (detail.branch) {
@@ -406,15 +481,39 @@ $effect(() => {
 					})
 					if (flowStore.val.value.modules && Array.isArray(flowStore.val.value.modules)) {
 						await tick()
-						if ($moving) {
-							// console.log('modules', modules, movingModules, movingModule)
+						if (moveManager.movingModuleId) {
 							push(history, flowStore.val)
-							let indexToRemove = originalModules.findIndex((m) => $moving?.id == m.id)
-
-							let [removedModule] = originalModules.splice(indexToRemove, 1)
-							targetModules.splice(detail.index, 0, removedModule)
-							selectionManager.selectId(removedModule.id)
-							$moving = undefined
+							if (!originalModules || !targetModules) {
+								moveManager.clearMoving()
+								return
+							}
+							if (moveManager.movingIds && moveManager.movingIds.length > 1) {
+								// Multi-move: splice out all moving modules from their parent, insert at target
+								const firstIndex = originalModules.findIndex(
+									(m) => m.id === moveManager.movingIds?.[0]
+								)
+								const removedModules = originalModules.splice(
+									firstIndex,
+									moveManager.movingIds.length
+								)
+								let insertIndex = detail.index
+								if (originalModules === targetModules && firstIndex < detail.index) {
+									insertIndex -= moveManager.movingIds.length
+								}
+								targetModules.splice(insertIndex, 0, ...removedModules)
+								selectionManager.selectByIds(removedModules.map((m) => m.id))
+							} else {
+								let indexToRemove = originalModules.findIndex((m) => moveManager.movingModuleId == m.id)
+								let [removedModule] = originalModules.splice(indexToRemove, 1)
+								// When moving within the same array, removal shifts subsequent indices down by 1
+								let insertIndex = detail.index
+								if (originalModules === targetModules && indexToRemove < detail.index) {
+									insertIndex -= 1
+								}
+								targetModules.splice(insertIndex, 0, removedModule)
+								selectionManager.selectId(removedModule.id)
+							}
+							moveManager.clearMoving()
 						} else {
 							if (detail.isPreprocessor) {
 								await insertNewPreprocessorModule(
@@ -545,11 +644,42 @@ $effect(() => {
 				}
 			}}
 			onMove={(id) => {
-				if (!$moving || $moving.id !== id) {
-					$moving = { id }
-				} else {
-					$moving = undefined
-				}
+				moveManager.toggleMoving(id)
+			}}
+			onDuplicate={(id) => {
+				let targetModules: FlowModule[] | undefined
+				let targetIndex: number = -1
+
+				dfs(flowStore.val.value.modules, (mod, modules) => {
+					const idx = modules.findIndex((m) => m.id === id)
+					if (idx !== -1) {
+						targetModules = modules
+						targetIndex = idx
+					}
+				})
+
+				if (!targetModules || targetIndex === -1) return
+
+				push(history, flowStore.val)
+
+				const original = targetModules[targetIndex]
+				const clone: FlowModule = $state.snapshot(original)
+
+				// Assign copy id to the clone, and fresh ids to nested modules
+				clone.id = copyId(original.id, flowStateStore.val, flowStore.val)
+				flowStateStore.val[clone.id] = emptyFlowModuleState()
+
+				dfs([clone], (mod) => {
+					if (mod.id !== clone.id) {
+						const newModId = nextId(flowStateStore.val, flowStore.val)
+						mod.id = newModId
+						flowStateStore.val[newModId] = emptyFlowModuleState()
+					}
+				})
+
+				targetModules.splice(targetIndex + 1, 0, clone)
+				refreshStateStore(flowStore)
+				selectionManager.selectId(clone.id)
 			}}
 			onUpdateMock={(detail) => {
 				let module = findModuleById(detail.id)
@@ -569,6 +699,10 @@ $effect(() => {
 				}
 			}}
 			multiSelectEnabled
+			movingIds={moveManager.movingIds}
+			onDeleteMultiple={deleteMultiple}
+			onDuplicateMultiple={duplicateMultiple}
+			onMoveMultiple={moveMultiple}
 		/>
 	</div>
 </div>

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

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

package/package/components/flows/map/InsertModuleInner.svelte

@@ -2,7 +2,7 @@
 let refreshCount = $state({ val: 0 });
 </script>
 
-<script lang="ts">import { createEventDispatcher, getContext } from 'svelte';
+<script lang="ts">import { createEventDispatcher, getContext, untrack } from 'svelte';
 import StepGenQuick from '../../copilot/StepGenQuick.svelte';
 import FlowInputsQuick from '../content/FlowInputsQuick.svelte';
 import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
@@ -11,7 +11,7 @@ import RefreshButton from '../../common/button/RefreshButton.svelte';
 const dispatch = createEventDispatcher();
 let { stop = false, funcDesc = $bindable(''), disableAi = false, kind = 'script', allowTrigger = true, toolMode = false } = $props();
 let customUi = getContext('customUi');
-let selectedKind = $state(kind);
+let selectedKind = $state(untrack(() => kind));
 let preFilter = $state('all');
 let loading = $state(false);
 let small = $derived(kind === 'preprocessor' || kind === 'failure');
@@ -47,7 +47,6 @@ let displayPath = $derived(width > 650 || height > 400);
 		{/if}
 		<RefreshButton
 			size="sm"
-			light
 			{loading}
 			onClick={() => {
 				refreshCount.val += 1
@@ -160,27 +159,53 @@ let displayPath = $derived(width > 650 || height > 400);
 							}}
 						/>
 					{/if}
+					<TopLevelNode
+						label="AI Sandbox"
+						selected={selectedKind === 'aisandbox'}
+						onSelect={() => {
+							selectedKind = 'aisandbox'
+						}}
+					/>
 				{/if}
 			</div>
 		{/if}
 
-		<FlowInputsQuick
-			{selectedKind}
-			bind:loading
-			filter={funcDesc}
-			{disableAi}
-			{funcDesc}
-			{kind}
-			bind:owners
-			on:close={() => {
-				dispatch('close')
-			}}
-			on:new
-			on:pickScript
-			on:pickFlow
-			{preFilter}
-			{displayPath}
-			refreshCount={refreshCount.val}
-		/>
+		{#if selectedKind === 'aisandbox'}
+			<div class="h-full overflow-auto grow min-w-0 p-2 gap-1 flex flex-col">
+				<TopLevelNode
+					label="Claude Code"
+					onSelect={() => {
+						dispatch('close')
+						dispatch('new', {
+							kind: 'script',
+							inlineScript: {
+								language: 'bun',
+								kind: 'script',
+								subkind: 'claudesandbox'
+							}
+						})
+					}}
+				/>
+			</div>
+		{:else}
+			<FlowInputsQuick
+				{selectedKind}
+				bind:loading
+				filter={funcDesc}
+				{disableAi}
+				{funcDesc}
+				{kind}
+				bind:owners
+				on:close={() => {
+					dispatch('close')
+				}}
+				on:new
+				on:pickScript
+				on:pickFlow
+				{preFilter}
+				{displayPath}
+				refreshCount={refreshCount.val}
+			/>
+		{/if}
 	</div>
 </div>