windmill-components 1.558.4 → 1.596.0

package/package/components/graph/renderers/nodes/AssetNode.svelte

@@ -62,7 +62,8 @@ export function computeAssetNodes(nodes) {
                                 ? (-ASSETS_OVERFLOWED_NODE_WIDTH - inputAssetXGap) / 2
                                 : 0),
                     y: READ_ASSET_Y_OFFSET
-                }
+                },
+                selectable: false
             };
         });
         // All asset nodes displayed on the bottom
@@ -93,7 +94,8 @@ export function computeAssetNodes(nodes) {
                                 ? (-ASSETS_OVERFLOWED_NODE_WIDTH - outputAssetXGap) / 2
                                 : 0),
                     y: WRITE_ASSET_Y_OFFSET
-                }
+                },
+                selectable: false
             };
         });
         const inputAssetEdges = inputAssetNodes?.map((n) => ({
@@ -173,38 +175,47 @@ export function computeAssetNodes(nodes) {
         newAssetEdges: allAssetEdges,
         newNodePositions: Object.fromEntries(sortedNewNodes.map((n) => [n.id, n.position]))
     };
-    computeAssetNodesCache = [nodes, ret];
+    computeAssetNodesCache = [clone(nodes), ret];
     return ret;
 }
 </script>
 
 <script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
 import { AlertTriangle } from 'lucide-svelte';
-import { assetEq, formatAssetKind, getAccessType } from '../../../assets/lib';
+import { assetEq, formatAssetKind, formatShortAssetPath, getAccessType } from '../../../assets/lib';
 import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 import ExploreAssetButton, { assetCanBeExplored } from '../../../ExploreAssetButton.svelte';
 import { Tooltip } from '../../../meltComponents';
-import { pluralize } from '../../../../utils';
+import { clone, pluralize } from '../../../../utils';
 import AssetGenericIcon from '../../../icons/AssetGenericIcon.svelte';
-import { NODE } from '../../util';
+import { getNodeColorClasses, NODE } from '../../util';
 import { userStore } from '../../../../stores';
 import { deepEqual } from 'fast-equals';
+import { slide } from 'svelte/transition';
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let { data } = $props();
 const isSelected = $derived(assetEq(flowGraphAssetsCtx?.val.selectedAsset, data.asset));
-const cachedResourceMetadata = $derived(flowGraphAssetsCtx?.val.resourceMetadataCache[data.asset.path]);
+const cachedResourceMetadata = $derived.by(() => {
+    if (data.asset.kind !== 'resource')
+        return undefined;
+    let truncatedPath = data.asset.path.split('/').slice(0, 3).join('/');
+    return flowGraphAssetsCtx?.val.resourceMetadataCache[truncatedPath];
+});
 const usageCount = $derived(flowGraphAssetsCtx?.val.computeAssetsCount?.(data.asset));
+const colors = $derived(getNodeColorClasses(undefined, isSelected));
 </script>
 
-<NodeWrapper>
+<NodeWrapper wrapperClass="bg-surface-secondary rounded-md">
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<Tooltip>
 			<div
 				class={twMerge(
-					'bg-surface h-6 flex items-center gap-1.5 rounded-sm text-tertiary border overflow-clip',
-					isSelected ? 'bg-surface-secondary !border-surface-inverse' : 'border-transparent'
+					'h-6 flex items-center gap-1.5 rounded-md drop-shadow-base overflow-clip transition-colors',
+					colors.outline,
+					colors.text,
+					colors.bg
 				)}
 				onmouseenter={() =>
 					flowGraphAssetsCtx && (flowGraphAssetsCtx.val.selectedAsset = data.asset)}
@@ -213,12 +224,11 @@ const usageCount = $derived(flowGraphAssetsCtx?.val.computeAssetsCount?.(data.as
 			>
 				<AssetGenericIcon
 					assetKind={data.asset.kind}
-					fill={''}
-					class="shrink-0 ml-1 fill-tertiary stroke-tertiary"
+					class="shrink-0 ml-1 {isSelected ? 'text-accent' : 'text-tertiary'}"
 					size="16px"
 				/>
 				<span class="text-3xs truncate flex-1">
-					{data.asset.path}
+					{formatShortAssetPath(data.asset)}
 				</span>
 				{#if data.asset.kind === 'resource' && cachedResourceMetadata === undefined}
 					<Tooltip class={'pr-1 flex items-center justify-center'}>
@@ -226,15 +236,17 @@ const usageCount = $derived(flowGraphAssetsCtx?.val.computeAssetsCount?.(data.as
 						<svelte:fragment slot="text">Could not find resource</svelte:fragment>
 					</Tooltip>
 				{:else if isSelected && assetCanBeExplored(data.asset, cachedResourceMetadata) && !$userStore?.operator}
-					<ExploreAssetButton
-						btnClasses="rounded-none"
-						asset={data.asset}
-						noText
-						buttonVariant="contained"
-						s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
-						dbManagerDrawer={flowGraphAssetsCtx?.val.dbManagerDrawer}
-						_resourceMetadata={cachedResourceMetadata}
-					/>
+					<div transition:slide={{ axis: 'x', duration: 100 }}>
+						<ExploreAssetButton
+							btnClasses="rounded-none"
+							asset={data.asset}
+							noText
+							buttonVariant="accent"
+							s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
+							dbManagerDrawer={flowGraphAssetsCtx?.val.dbManagerDrawer}
+							_resourceMetadata={cachedResourceMetadata}
+						/>
+					</div>
 				{/if}
 			</div>
 			<svelte:fragment slot="text">
@@ -245,9 +257,7 @@ const usageCount = $derived(flowGraphAssetsCtx?.val.computeAssetsCount?.(data.as
 					href={undefined}
 					class={twMerge(
 						'text-xs',
-						data.asset.kind === 'resource'
-							? 'text-blue-400 cursor-pointer'
-							: 'dark:text-tertiary text-tertiary-inverse'
+						data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
 					)}
 					onclick={() => {
 						if (data.asset.kind === 'resource')
@@ -256,8 +266,8 @@ const usageCount = $derived(flowGraphAssetsCtx?.val.computeAssetsCount?.(data.as
 				>
 					{data.asset.path}
 				</a><br />
-				<span class="dark:text-tertiary text-tertiary-inverse text-xs"
-					>{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
+				<span class="text-hint text-xs">
+					{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
 				>
 			</svelte:fragment>
 		</Tooltip>

package/package/components/graph/renderers/nodes/AssetsOverflowedNode.svelte

@@ -7,6 +7,7 @@ import Popover from '../../../meltComponents/Popover.svelte';
 import AssetNode from './AssetNode.svelte';
 import { getContext } from 'svelte';
 import { assetEq } from '../../../assets/lib';
+import { getNodeColorClasses } from '../../util';
 let { data } = $props();
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let isOpen = $state(false);
@@ -22,6 +23,7 @@ $effect(() => {
         wasOpenedBecauseOfExternalSelected = false;
     }
 });
+const colors = $derived(getNodeColorClasses(undefined, includesSelected));
 </script>
 
 <NodeWrapper>
@@ -32,9 +34,11 @@ $effect(() => {
 			usePointerDownOutside
 			bind:isOpen
 			class={twMerge(
-				'!w-full text-2xs font-normal bg-surface h-6 pr-0.5 flex justify-center items-center rounded-sm text-tertiary border',
-				includesSelected ? 'bg-surface-secondary border-surface-inverse' : 'border-transparent',
-				'hover:bg-surface-secondary hover:border-surface-inverse active:opacity-55'
+				'!w-full text-2xs font-normal h-6 pr-0.5 flex justify-center items-center rounded-md text-primary drop-shadow-base',
+				'hover:bg-surface-hover active:bg-surface active:opacity-80',
+				colors.bg,
+				colors.outline,
+				colors.text
 			)}
 			placement="top"
 		>

package/package/components/graph/renderers/nodes/BranchAllEndNode.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
-let { data } = $props();
+import { getGraphContext } from '../../graphContext';
+let { data, id } = $props();
+const { selectionManager } = getGraphContext();
 </script>
 
 <NodeWrapper offset={data.offset} enableSourceHandle enableTargetHandle>
@@ -10,10 +11,7 @@ let { data } = $props();
 			label={'Collect result from all branches'}
 			id={data.id}
 			selectable={true}
-			selected={false}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(data?.flowModuleState?.type, darkMode)}
+			selected={selectionManager && selectionManager.isNodeSelected(id)}
 			on:select={(e) => {
 				data?.eventHandlers?.select(e.detail)
 			}}

package/package/components/graph/renderers/nodes/BranchAllEndNode.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { BranchAllEndN } from '../../graphBuilder.svelte';
 interface Props {
     data: BranchAllEndN['data'];
+    id: string;
 }
 declare const BranchAllEndNode: import("svelte").Component<Props, {}, "">;
 type BranchAllEndNode = ReturnType<typeof BranchAllEndNode>;

package/package/components/graph/renderers/nodes/BranchAllStart.svelte

@@ -2,10 +2,9 @@
 import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
 import { X } from 'lucide-svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
-import { computeBorderStatus } from '../utils';
-let { data } = $props();
-let borderStatus = $derived(computeBorderStatus(data.branchIndex, 'branchall', data.flowModuleState));
+import { getGraphContext } from '../../graphContext';
+let { data, id } = $props();
+const { selectionManager } = getGraphContext();
 </script>
 
 <NodeWrapper offset={data.offset}>
@@ -13,12 +12,7 @@ let borderStatus = $derived(computeBorderStatus(data.branchIndex, 'branchall', d
 		<VirtualItem
 			label={data.label}
 			selectable
-			selected={false}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={borderStatus
-				? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
-				: undefined}
+			selected={selectionManager && selectionManager.isNodeSelected(id)}
 			on:select={() => {
 				setTimeout(() => data.eventHandlers.select(data.id))
 			}}

package/package/components/graph/renderers/nodes/BranchAllStart.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { BranchAllStartN } from '../../graphBuilder.svelte';
 interface Props {
     data: BranchAllStartN['data'];
+    id: string;
 }
 declare const BranchAllStart: import("svelte").Component<Props, {}, "">;
 type BranchAllStart = ReturnType<typeof BranchAllStart>;

package/package/components/graph/renderers/nodes/BranchOneStart.svelte

@@ -2,10 +2,9 @@
 import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
 import { X } from 'lucide-svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
-import { computeBorderStatus } from '../utils';
-let { data } = $props();
-let borderStatus = $derived(computeBorderStatus(data.branchIndex + 1, 'branchone', data.flowModuleState));
+import { getGraphContext } from '../../graphContext';
+const { selectionManager } = getGraphContext();
+let { data, id } = $props();
 </script>
 
 <NodeWrapper offset={data.offset}>
@@ -14,10 +13,7 @@ let borderStatus = $derived(computeBorderStatus(data.branchIndex + 1, 'branchone
 			label={data.label}
 			preLabel={data.preLabel}
 			selectable
-			selected={data.selected}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={borderStatus ? getStateColor(borderStatus, darkMode) : undefined}
+			selected={selectionManager && selectionManager.isNodeSelected(id)}
 			on:select={() => {
 				setTimeout(() => data?.eventHandlers?.select(data.id))
 			}}

package/package/components/graph/renderers/nodes/BranchOneStart.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { BranchOneStartN } from '../../graphBuilder.svelte';
 interface Props {
     data: BranchOneStartN['data'];
+    id: string;
 }
 declare const BranchOneStart: import("svelte").Component<Props, {}, "">;
 type BranchOneStart = ReturnType<typeof BranchOneStart>;

package/package/components/graph/renderers/nodes/ForLoopEndNode.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-import { getStateColor } from '../../util';
-let { data } = $props();
+import { getGraphContext } from '../../graphContext';
+let { data, id } = $props();
+const { selectionManager } = getGraphContext();
 </script>
 
 <NodeWrapper offset={data.offset}>
@@ -13,8 +14,6 @@ let { data } = $props();
 				selected={false}
 				id={data.id}
 				hideId
-				bgColor={getStateColor(undefined, darkMode)}
-				borderColor={getStateColor(data.flowModuleState?.type, darkMode)}
 				on:select={(e) => {
 					setTimeout(() => data?.eventHandlers?.select(e.detail))
 				}}
@@ -23,10 +22,8 @@ let { data } = $props();
 			<VirtualItem
 				label={'Collect result of each iteration'}
 				selectable={true}
-				selected={false}
+				selected={selectionManager && selectionManager.isNodeSelected(id)}
 				id={data.id}
-				bgColor={getStateColor(undefined, darkMode)}
-				borderColor={getStateColor(data.flowModuleState?.type, darkMode)}
 				on:select={(e) => {
 					setTimeout(() => data?.eventHandlers?.select(e.detail))
 				}}

package/package/components/graph/renderers/nodes/ForLoopEndNode.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ForLoopEndN } from '../../graphBuilder.svelte';
 interface Props {
     data: ForLoopEndN['data'];
+    id: string;
 }
 declare const ForLoopEndNode: import("svelte").Component<Props, {}, "">;
 type ForLoopEndNode = ReturnType<typeof ForLoopEndNode>;

package/package/components/graph/renderers/nodes/ForLoopStartNode.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
 import { getContext } from 'svelte';
-let { data } = $props();
+import { getGraphContext } from '../../graphContext';
+let { data, id } = $props();
+const { selectionManager } = getGraphContext();
 const propPickerContext = getContext('PropPickerContext');
 const pickablePropertiesFiltered = propPickerContext?.pickablePropertiesFiltered;
 function filterIterFromInput(inputJson) {
@@ -17,14 +18,6 @@ function filterIterFromInput(inputJson) {
     }
     return {};
 }
-function computeStatus(state) {
-    if (state?.type == 'InProgress' || state?.type == 'Success' || state?.type == 'Failure') {
-        let r = state?.flow_jobs_success?.[state?.selectedForloopIndex ?? 0];
-        if (r == undefined)
-            return 'InProgress';
-        return r ? 'Success' : 'InProgress';
-    }
-}
 function isSelectedDescendant(module, selectedId) {
     if (!selectedId)
         return 'none';
@@ -49,12 +42,9 @@ let filteredInput = $derived(filterIterFromInput($pickablePropertiesFiltered?.fl
 		<VirtualItem
 			label={data.simplifiedTriggerView ? 'For each new event' : 'Do one iteration'}
 			selectable={false}
-			selected={false}
+			selected={selectionManager && selectionManager.isNodeSelected(id)}
 			id={data.id}
 			hideId
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(computeStatus(data.flowModuleState), darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}

package/package/components/graph/renderers/nodes/ForLoopStartNode.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ForLoopStartN } from '../../graphBuilder.svelte';
 interface Props {
     data: ForLoopStartN['data'];
+    id: string;
 }
 declare const ForLoopStartNode: import("svelte").Component<Props, {}, "">;
 type ForLoopStartNode = ReturnType<typeof ForLoopStartNode>;

package/package/components/graph/renderers/nodes/InputNode.svelte

@@ -1,26 +1,37 @@
 <script lang="ts">import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
 import { getContext } from 'svelte';
+import InsertModulePopover from '../../../flows/map/InsertModulePopover.svelte';
 import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
+import DiffActionBar from '../../../flows/map/DiffActionBar.svelte';
 import { schemaToObject } from '../../../../schema';
 import { MessageSquare } from 'lucide-svelte';
+import { getGraphContext } from '../../graphContext';
+import FunnelCog from '../../../icons/FunnelCog.svelte';
 let { data } = $props();
-const { selectedId } = getContext('FlowGraphContext');
-const { previewArgs, flowStore } = getContext('FlowEditorContext') || {};
+const { selectionManager, diffManager } = getGraphContext();
+const flowEditorContext = getContext('FlowEditorContext');
+const { previewArgs, flowStore } = flowEditorContext || {};
 let topFlowInput = $derived(flowStore?.val && previewArgs && flowStore?.val?.schema
     ? schemaToObject(flowStore?.val.schema, previewArgs.val || {})
     : undefined);
 let inputLabel = $derived(data.chatInputEnabled ? 'Chat message' : 'Input');
 </script>
 
+<DiffActionBar
+	moduleId="Input"
+	moduleAction={data.moduleAction}
+	{diffManager}
+	flowStore={flowEditorContext?.flowStore}
+/>
+
 <NodeWrapper>
 	{#snippet children({ darkMode })}
 		{#if data.insertable && !data.hasPreprocessor}
-			<div class="absolute bottom-full left-0 right-0 flex center-center mb-3.5">
-				<InsertModuleButton
+			<div class="absolute bottom-full left-0 right-0 center-center mb-2.5">
+				<InsertModulePopover
 					disableAi={data.disableAi}
-					index={0}
+					allowTrigger
 					kind="preprocessor"
 					on:new={(e) => {
 						data?.eventHandlers.insert({
@@ -38,9 +49,15 @@ let inputLabel = $derived(data.chatInputEnabled ? 'Chat message' : 'Input');
 							isPreprocessor: true
 						})
 					}}
-					clazz="w-[14px] h-[14px]"
-					iconSize={10}
-				/>
+				>
+					{#snippet trigger()}
+						<InsertModuleButton
+							title={`Add preprocessor step`}
+							id={`flow-editor-add-step-0`}
+							Icon={FunnelCog}
+						/>
+					{/snippet}
+				</InsertModulePopover>
 			</div>
 		{/if}
 		<VirtualItem
@@ -48,9 +65,7 @@ let inputLabel = $derived(data.chatInputEnabled ? 'Chat message' : 'Input');
 			hideId={true}
 			label={inputLabel}
 			selectable
-			selected={$selectedId === 'Input'}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			selected={selectionManager?.isNodeSelected('Input')}
 			on:insert={(e) => {
 				setTimeout(() => data?.eventHandlers?.insert(e.detail))
 			}}
@@ -63,6 +78,7 @@ let inputLabel = $derived(data.chatInputEnabled ? 'Chat message' : 'Input');
 			cache={data.cache}
 			earlyStop={data.earlyStop}
 			editMode={data.editMode}
+			action={data.moduleAction?.action}
 			onEditInput={data.eventHandlers.editInput}
 			onTestFlow={() => {
 				data.eventHandlers.testFlow()
@@ -81,7 +97,6 @@ let inputLabel = $derived(data.chatInputEnabled ? 'Chat message' : 'Input');
 			job={data.flowJob}
 			showJobStatus={data.showJobStatus}
 			flowHasChanged={data.flowHasChanged}
-			{darkMode}
 		>
 			{#snippet icon()}
 				{#if data.chatInputEnabled}

package/package/components/graph/renderers/nodes/ModuleNode.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
-import MapItem from '../../../flows/map/MapItem.svelte';
-import { GitBranchPlus, Maximize2 } from 'lucide-svelte';
+<script lang="ts">import MapItem from '../../../flows/map/MapItem.svelte';
+import { GitBranchPlus } from 'lucide-svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
 import { jobToGraphModuleState } from '../../../modulesTest.svelte';
+import { getNoteEditorContext } from '../../noteEditor.svelte';
+import { addGroupNoteContextMenuItem } from '../../noteUtils.svelte';
 let { data } = $props();
+// Get NoteEditor context for group note creation
+const noteEditorContext = getNoteEditorContext();
 let state = $derived.by(() => {
     return data.testModuleState
         ? (jobToGraphModuleState(data.testModuleState) ?? data.flowModuleState)
@@ -25,30 +27,18 @@ let type = $derived.by(() => {
     }
     return typ;
 });
+// Define context menu items
+const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(data.id, noteEditorContext)] : []);
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper offset={data.offset} {contextMenuItems}>
 	{#snippet children({ darkMode })}
-		{#if data.module.value.type == 'flow'}
-			<button
-				title="Expand subflow"
-				class="z-50 absolute -top-[10px] right-[25px] rounded-full h-[20px] w-[20px] center-center text-primary bg-surface duration-0 hover:bg-surface-hover"
-				onclick={stopPropagation(
-					preventDefault(() => {
-						if (data.module.value.type == 'flow') {
-							data.eventHandlers.expandSubflow(data.id, data.module.value.path)
-						}
-					})
-				)}
-			>
-				<Maximize2 size={12} />
-			</button>
-		{/if}
 		<MapItem
 			moduleId={data.id}
 			mod={data.module}
 			insertable={data.insertable}
 			editMode={data.editMode}
+			moduleAction={data.moduleAction}
 			annotation={flowJobs &&
 			(data.module.value.type === 'forloopflow' || data.module.value.type === 'whileloopflow')
 				? 'Iteration: ' +
@@ -58,13 +48,7 @@ let type = $derived.by(() => {
 					'/' +
 					(state?.iteration_total ?? '?')
 				: ''}
-			bgColor={getStateColor(data.editMode ? undefined : type, darkMode, true, state?.skipped)}
-			bgHoverColor={getStateHoverColor(
-				data.editMode ? undefined : type,
-				darkMode,
-				true,
-				state?.skipped
-			)}
+			nodeState={state?.skipped ? '_Skipped' : type}
 			moving={data.moving}
 			duration_ms={state?.duration_ms}
 			retries={state?.retries}
@@ -94,9 +78,11 @@ let type = $derived.by(() => {
 			onEditInput={data.eventHandlers.editInput}
 			flowJob={data.flowJob}
 			isOwner={data.isOwner}
-			{type}
-			{darkMode}
-			skipped={state?.skipped}
+			maximizeSubflow={data.module.value.type == 'flow' && 'path' in data.module.value
+				? () => {
+						data.eventHandlers.expandSubflow(data.id, data.module.value['path'])
+					}
+				: undefined}
 		/>
 
 		<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">

package/package/components/graph/renderers/nodes/NewAIToolNode.svelte

@@ -1,43 +1,49 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
-import {} from '../../graphBuilder.svelte';
+<script lang="ts">import {} from '../../graphBuilder.svelte';
 import InsertModuleInner from '../../../flows/map/InsertModuleInner.svelte';
-import { Cross } from 'lucide-svelte';
-import PopupV2 from '../../../common/popup/PopupV2.svelte';
-import { flip, offset } from 'svelte-floating-ui/dom';
+import { Plus } from 'lucide-svelte';
+import Popover from '../../../meltComponents/Popover.svelte';
+import { Button } from '../../../common';
 let funcDesc = $state('');
 let { data } = $props();
-let floatingConfig = {
-    strategy: 'fixed',
-    // @ts-ignore
-    placement: 'bottom-center',
-    middleware: [offset(8), flip()],
-    autoUpdate: true
-};
 let open = $state(false);
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<PopupV2 bind:open {floatingConfig} target="#flow-editor">
-	{#snippet button()}
-		<button
-			title={`Add 'tool'
-			}`}
-			type="button"
-			class={twMerge(
-				'!w-full h-6 flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded'
-			)}
-			onpointerdown={() => (open = !open)}
+<Popover
+	bind:isOpen={open}
+	portal="#flow-editor"
+	contentClasses="p-2 max-w-lg h-[400px] bg-surface"
+	class="inline-block"
+	usePointerDownOutside
+	floatingConfig={{
+		placement: 'bottom',
+		strategy: 'absolute',
+		gutter: 8,
+		overflowPadding: 16,
+		flip: true,
+		fitViewport: true,
+		overlap: false
+	}}
+>
+	{#snippet trigger()}
+		<Button
+			size="xs3"
+			variant="default"
+			nonCaptureEvent
+			selected={open}
+			startIcon={{ icon: Plus }}
+			wrapperClasses="{open
+				? 'bg-surface-secondary'
+				: 'bg-surface-tertiary'} transition-colors drop-shadow-base"
+			btnClasses="gap-1 text-2xs px-1"
 		>
-			<div class="flex flex-row items-center gap-1 font-medium text-2xs">
-				<Cross size={12} />
-				tool
-			</div>
-		</button>
+			Tool
+		</Button>
 	{/snippet}
-	{#snippet children({ close })}
+	{#snippet content({ close })}
 		<InsertModuleInner
 			bind:funcDesc
-			scriptOnly
+			toolMode
 			on:close={() => {
 				close()
 			}}
@@ -71,6 +77,22 @@ let open = $state(false);
 				})
 				close()
 			}}
+			on:pickMcpTool={(e) => {
+				data.eventHandlers.insert({
+					index: -1,
+					agentId: data.agentModuleId,
+					kind: 'mcpTool'
+				})
+				close()
+			}}
+			on:pickWebsearchTool={(e) => {
+				data.eventHandlers.insert({
+					index: -1,
+					agentId: data.agentModuleId,
+					kind: 'websearchTool'
+				})
+				close()
+			}}
 		/>
 	{/snippet}
-</PopupV2>
+</Popover>

package/package/components/graph/renderers/nodes/NoBranchNode.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
 let { data } = $props();
 </script>
 
@@ -12,9 +11,6 @@ let { data } = $props();
 			hideId={true}
 			selectable={true}
 			selected={false}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(undefined, darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}