windmill-components 1.558.3 → 1.596.0

package/package/components/graph/noteUtils.svelte.js

@@ -0,0 +1,294 @@
+import { deepEqual } from 'fast-equals';
+import { calculateNodesBoundsWithOffset } from './util';
+import { MIN_NOTE_WIDTH, MIN_NOTE_HEIGHT } from './noteColors';
+import { topologicalSort } from './graphBuilder.svelte';
+import { StickyNote } from 'lucide-svelte';
+let computeNoteNodesCache;
+/**
+ * Extracts layout-affecting signature for change detection
+ * Only includes properties that affect graph layout (structure, grouping)
+ */
+export function getLayoutSignature(notes) {
+    return {
+        notesCount: notes.length,
+        noteIds: notes.map((n) => n.id).sort(),
+        // Group memberships affect layout spacing
+        groupMemberships: notes
+            .filter((note) => note.type === 'group')
+            .map((note) => ({
+            id: note.id,
+            containedIds: note.contained_node_ids?.slice().sort() || []
+        }))
+            .sort((a, b) => a.id.localeCompare(b.id))
+    };
+}
+/**
+ * Extracts property-only signature for change detection
+ * Only includes visual/content properties that don't affect layout
+ */
+export function getPropertySignature(notes) {
+    return notes
+        .map((note) => ({
+        id: note.id,
+        text: note.text,
+        color: note.color,
+        locked: note.locked || false,
+        position: { ...note.position },
+        size: { ...note.size }
+    }))
+        .sort((a, b) => a.id.localeCompare(b.id));
+}
+/**
+ * Calculates z-index values for all notes
+ * Group notes are ordered by their topmost node's hierarchy position
+ * Free notes get undefined z-index to use SvelteFlow's native behavior
+ */
+export function calculateAllNoteZIndexes(notes, nodes) {
+    const zIndexMap = {};
+    // Use topological sort to get proper hierarchy order based on parentIds relationships
+    const sortedNodes = topologicalSort(nodes).reverse();
+    // Create a mapping from node ID to its hierarchy position (topological order)
+    const nodeHierarchyMap = {};
+    sortedNodes.forEach((node, index) => {
+        nodeHierarchyMap[node.id] = index;
+    });
+    // Process each note
+    for (const note of notes) {
+        if (note.type === 'free') {
+            // Free notes use SvelteFlow's native z-index behavior (last selected on top)
+            zIndexMap[note.id] = undefined;
+        }
+        else if (note.type === 'group') {
+            // Group notes get z-index based on topmost contained node's hierarchy
+            // Since sortedNodes is in topological order, the first matching node is the topmost
+            const topmostNode = sortedNodes.find((node) => note.contained_node_ids?.includes(node.id));
+            if (topmostNode) {
+                const hierarchyPosition = nodeHierarchyMap[topmostNode.id] ?? 0;
+                // Higher hierarchy position = lower z-index (appears behind)
+                // Use negative values starting from -2000 to stay below other elements
+                zIndexMap[note.id] = hierarchyPosition - 2000;
+            }
+            else {
+                // Fallback for group notes without valid contained nodes
+                zIndexMap[note.id] = -2000;
+            }
+        }
+    }
+    return zIndexMap;
+}
+/**
+ * Calculate extra spacing needed for asset nodes of the topmost node
+ */
+function calculateExtraAssetSpacing(topmostNodeId, nodes) {
+    // Find the topmost node position
+    const topmostNode = nodes.find((n) => n.id === topmostNodeId);
+    if (!topmostNode) {
+        return 0;
+    }
+    // Find actual asset nodes for the topmost node: {topmostNodeId}-asset-in, type 'asset'
+    const assetNodes = nodes.filter((n) => n.id.startsWith(`${topmostNodeId}-asset-in-`));
+    if (assetNodes.length === 0) {
+        return 0;
+    }
+    // Calculate the spacing based on actual asset node positions
+    const assetSpacing = Math.max(...assetNodes.map((assetNode) => {
+        // Calculate how much space the asset node takes above the main node
+        return Math.max(0, -assetNode.position.y);
+    }));
+    return assetSpacing;
+}
+/**
+ * Calculate extra spacing needed for AI tool nodes of the topmost node
+ */
+function calculateExtraAIToolSpacing(topmostNodeId, nodes) {
+    // Find the topmost node position
+    const topmostNode = nodes.find((n) => n.id === topmostNodeId);
+    if (!topmostNode) {
+        return 0;
+    }
+    // Find actual AI tool nodes for the topmost node: {topmostNodeId}-tool-, type 'aiTool'
+    const toolNodes = nodes.filter((n) => n.id.startsWith(`${topmostNodeId}-tool-`));
+    if (toolNodes.length === 0) {
+        return 0;
+    }
+    // Calculate the spacing based on actual AI tool node positions
+    const toolSpacing = Math.max(...toolNodes.map((toolNode) => {
+        // Calculate how much space the tool node takes above/below the main node
+        return Math.max(0, -toolNode.position.y);
+    }));
+    return toolSpacing;
+}
+/**
+ * Calculate position and size for group notes based on contained nodes
+ */
+function calculateGroupNoteLayout(note, nodes, textHeight = 60, topMostNodeId) {
+    if (note.type !== 'group' || !note.contained_node_ids?.length) {
+        return {
+            position: note.position ?? { x: 0, y: 0 },
+            size: note.size ?? { width: MIN_NOTE_WIDTH, height: MIN_NOTE_HEIGHT }
+        };
+    }
+    const containedNodes = nodes.filter((node) => note.contained_node_ids?.includes(node.id));
+    if (containedNodes.length === 0) {
+        return {
+            position: note.position ?? { x: 0, y: 0 },
+            size: note.size ?? { width: MIN_NOTE_WIDTH, height: MIN_NOTE_HEIGHT }
+        };
+    }
+    const bounds = calculateNodesBoundsWithOffset(note.contained_node_ids || [], nodes.map((n) => ({
+        id: n.id,
+        position: n.position,
+        data: { offset: n.offset ?? 0 },
+        type: n.type ?? ''
+    })));
+    const padding = 16;
+    // Calculate extra spacing for asset nodes and AI tool nodes of the topmost node
+    const extraAssetSpacing = topMostNodeId ? calculateExtraAssetSpacing(topMostNodeId, nodes) : 0;
+    const extraAIToolSpacing = topMostNodeId ? calculateExtraAIToolSpacing(topMostNodeId, nodes) : 0;
+    const totalTextHeight = textHeight + extraAssetSpacing + extraAIToolSpacing;
+    return {
+        position: {
+            x: bounds.minX - padding,
+            y: bounds.minY - totalTextHeight - padding
+        },
+        size: {
+            width: bounds.maxX - bounds.minX + 2 * padding,
+            height: bounds.maxY - bounds.minY + totalTextHeight + 2 * padding
+        }
+    };
+}
+/**
+ * Create common data object for note nodes
+ */
+function createNoteData(note, onTextHeightChange, isGroupNote, editMode) {
+    return {
+        noteId: note.id,
+        text: note.text,
+        color: note.color,
+        locked: note.locked || false,
+        isGroupNote,
+        editMode,
+        ...(isGroupNote && { containedNodeIds: note.contained_node_ids || [] }),
+        onTextHeightChange: (textHeight) => {
+            onTextHeightChange(note.id, textHeight);
+        }
+    };
+}
+/**
+ * Main function to compute note nodes and adjust nodes position based on group notes
+ */
+export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChange, editMode = false, noteEditorContext) {
+    // Check cache first
+    if (computeNoteNodesCache &&
+        deepEqual(nodes, computeNoteNodesCache[0]) &&
+        deepEqual(notes, computeNoteNodesCache[1]) &&
+        deepEqual(noteTextHeights, computeNoteNodesCache[2])) {
+        return computeNoteNodesCache[3];
+    }
+    if (editMode) {
+        if (noteEditorContext?.noteEditor?.isAvailable()) {
+            noteEditorContext.noteEditor.cleanupGroupNotes(nodes);
+        }
+    }
+    const allNoteNodes = [];
+    // Build a map of Y positions that need extra spacing for group notes
+    const yPosMap = {}; // Y position -> spacing needed
+    // Group notes that need spacing
+    const groupNotes = notes.filter((n) => n.type === 'group');
+    const topMostNodesMap = {};
+    const sortedNodes = topologicalSort(nodes).reverse();
+    for (const groupNote of groupNotes) {
+        if (groupNote.contained_node_ids?.length) {
+            const topmostNodeId = sortedNodes.find((node) => groupNote.contained_node_ids?.includes(node.id))?.id;
+            const topmostNode = nodes.find((node) => node.id === topmostNodeId);
+            if (topmostNode) {
+                const textHeight = noteTextHeights[groupNote.id] || 60;
+                const spacing = textHeight + 16; // padding
+                // Mark this Y position as needing spacing
+                yPosMap[topmostNode.position.y] = Math.max(yPosMap[topmostNode.position.y] || 0, spacing);
+                topMostNodesMap[groupNote.id] = topmostNode.id;
+            }
+        }
+    }
+    // Calculate new positions for nodes (offset by group notes)
+    const sortedNewNodes = nodes
+        .map((n) => ({ position: { ...n.position }, id: n.id }))
+        .sort((a, b) => a.position.y - b.position.y);
+    let currentYOffset = 0;
+    let prevYPos = NaN;
+    for (const node of sortedNewNodes) {
+        if (node.position.y !== prevYPos) {
+            // Add spacing for group notes at this Y level
+            if (yPosMap[node.position.y]) {
+                currentYOffset += yPosMap[node.position.y];
+            }
+            prevYPos = node.position.y;
+        }
+        node.position.y += currentYOffset;
+    }
+    // Create note nodes AFTER calculating adjusted node positions
+    // For group notes, we need to use the adjusted node positions
+    const adjustedNodes = sortedNewNodes.map((n) => {
+        const origNode = nodes.find((orig) => orig.id === n.id);
+        return {
+            ...n,
+            data: origNode?.data,
+            offset: origNode?.offset,
+            type: origNode?.type
+        };
+    });
+    // Calculate all z-indexes at once using hierarchy information
+    const noteZIndexes = calculateAllNoteZIndexes(notes, nodes);
+    for (const note of notes) {
+        const isGroupNote = note.type === 'group';
+        const zIndex = noteZIndexes[note.id];
+        // Calculate position and size using adjusted node positions for group notes
+        const { position, size } = isGroupNote
+            ? calculateGroupNoteLayout(note, adjustedNodes, noteTextHeights[note.id] || 60, topMostNodesMap[note.id])
+            : {
+                position: note.position ?? { x: 0, y: 0 },
+                size: note.size ?? { width: MIN_NOTE_WIDTH, height: MIN_NOTE_HEIGHT }
+            };
+        // Create the note node
+        const noteNode = {
+            id: note.id,
+            type: 'note', // Note nodes are handled specially
+            position,
+            width: size.width,
+            height: size.height,
+            zIndex,
+            draggable: isGroupNote ? false : editMode && !note.locked,
+            selectable: false,
+            data: createNoteData(note, onTextHeightChange, isGroupNote, editMode)
+        };
+        allNoteNodes.push(noteNode);
+    }
+    const newNodePositions = Object.fromEntries(sortedNewNodes.map((n) => [n.id, n.position]));
+    const result = {
+        noteNodes: allNoteNodes,
+        newNodePositions
+    };
+    // Cache the result
+    computeNoteNodesCache = [
+        structuredClone($state.snapshot(nodes)),
+        structuredClone($state.snapshot(notes)),
+        structuredClone($state.snapshot(noteTextHeights)),
+        result
+    ];
+    return result;
+}
+export function addGroupNoteContextMenuItem(nodeId, noteEditorContext) {
+    const isDisabled = !noteEditorContext?.noteEditor ||
+        (noteEditorContext?.noteEditor?.isNodeOnlyMemberOfGroupNote(nodeId) ?? false);
+    return {
+        id: 'add-group-note',
+        label: 'Add note',
+        icon: StickyNote,
+        disabled: isDisabled,
+        onClick: () => {
+            if (noteEditorContext?.noteEditor && !isDisabled) {
+                noteEditorContext.noteEditor.createGroupNote([nodeId]);
+            }
+        }
+    };
+}

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -1,13 +1,14 @@
-<script lang="ts">import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
+<script lang="ts">import InsertModulePopover from '../../../flows/map/InsertModulePopover.svelte';
 import { getBezierPath, BaseEdge, EdgeLabel } from '@xyflow/svelte';
 import { ClipboardCopy, Hourglass } from 'lucide-svelte';
-import { getContext } from 'svelte';
 import { getStraightLinePath } from '../utils';
 import { twMerge } from 'tailwind-merge';
 import { NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../nodes/AssetNode.svelte';
 import { workspaceStore } from '../../../../stores';
 import FlowStatusWaitingForEvents from '../../../FlowStatusWaitingForEvents.svelte';
-const { useDataflow } = getContext('FlowGraphContext');
+import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
+import { getGraphContext } from '../../graphContext';
+const { useDataflow, showAssets } = getGraphContext();
 let { 
 // id,
 sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
@@ -34,20 +35,56 @@ let suspendStatus = $derived(data?.suspendStatus);
 
 <EdgeLabel
 	x={sourceX}
-	y={sourceY + 28 + (data.shouldOffsetInsertBtnDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
+	y={sourceY +
+		32 +
+		(data.shouldOffsetInsertBtnDueToAssetNode && $showAssets ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
 	class="base-edge"
 	style=""
 >
-	{#if data?.insertable && !$useDataflow && !data?.moving && !waitingForEvents}
+	{#if waitingForEvents && data.flowJob && data.flowJob.type === 'QueuedJob'}
+		<div
+			class="px-2 py-0.5 rounded-md bg-surface shadow-md text-violet-700 dark:text-violet-400 text-xs flex items-center gap-1"
+		>
+			<Hourglass size={12} />
+			<div class="flex">
+				<span class="dot">.</span>
+				<span class="dot">.</span>
+				<span class="dot">.</span>
+			</div>
+		</div>
+		<div
+			class={'fixed top-1/2 -translate-y-1/2 left-[170px] h-fit w-fit rounded-md bg-surface flex items-center justify-center p-2 ml-2 shadow-md'}
+		>
+			{#if data?.flowJob && data.flowJob.flow_status?.modules?.[data.flowJob.flow_status?.step]?.type === 'WaitingForEvents'}
+				<FlowStatusWaitingForEvents
+					job={data.flowJob}
+					workspaceId={$workspaceStore!}
+					isOwner={data.isOwner}
+					light
+				/>
+			{:else if suspendStatus && Object.keys(suspendStatus).length > 0}
+				<div class="flex gap-2 flex-col">
+					{#each Object.values(suspendStatus) as suspendCount (suspendCount.job.id)}
+						<FlowStatusWaitingForEvents
+							job={suspendCount.job}
+							workspaceId={$workspaceStore!}
+							isOwner={data.isOwner}
+							light
+						/>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{:else if data?.insertable && !$useDataflow && !data?.moving}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}
 			style:transform="translate(-50%, -50%)"
 		>
 			<!-- <pre class="text-2xs">A{JSON.stringify(data.branch)}, {data.sourceId}, {data.targetId}</pre> -->
 			<!-- {data.targetId} B -->
-			<InsertModuleButton
+			<InsertModulePopover
 				disableAi={data.disableAi}
-				index={data.index ?? 0}
+				allowTrigger={data.index == 0}
 				on:new={(e) => {
 					data?.eventHandlers.insert({
 						sourceId: data.sourceId,
@@ -79,7 +116,12 @@ let suspendStatus = $derived(data?.suspendStatus);
 						flow: e.detail
 					})
 				}}
-			/>
+				gutter={0}
+			>
+				{#snippet trigger()}
+					<InsertModuleButton title={`Add step`} id={`flow-editor-add-step-${data.index ?? 0}`} />
+				{/snippet}
+			</InsertModulePopover>
 		</div>
 	{/if}
 
@@ -109,42 +151,6 @@ let suspendStatus = $derived(data?.suspendStatus);
 			{/if}
 		</div>
 	{/if}
-
-	{#if waitingForEvents && data.flowJob && data.flowJob.type === 'QueuedJob'}
-		<div
-			class="px-2 py-0.5 rounded-md bg-surface shadow-md text-violet-700 dark:text-violet-400 text-xs flex items-center gap-1"
-		>
-			<Hourglass size={12} />
-			<div class="flex">
-				<span class="dot">.</span>
-				<span class="dot">.</span>
-				<span class="dot">.</span>
-			</div>
-		</div>
-		<div
-			class={'fixed top-1/2 -translate-y-1/2 left-[170px] h-fit w-fit rounded-md bg-surface flex items-center justify-center p-2 ml-2 shadow-md'}
-		>
-			{#if data?.flowJob && data.flowJob.flow_status?.modules?.[data.flowJob.flow_status?.step]?.type === 'WaitingForEvents'}
-				<FlowStatusWaitingForEvents
-					job={data.flowJob}
-					workspaceId={$workspaceStore!}
-					isOwner={data.isOwner}
-					light
-				/>
-			{:else if suspendStatus && Object.keys(suspendStatus).length > 0}
-				<div class="flex gap-2 flex-col">
-					{#each Object.values(suspendStatus) as suspendCount (suspendCount.job.id)}
-						<FlowStatusWaitingForEvents
-							job={suspendCount.job}
-							workspaceId={$workspaceStore!}
-							isOwner={data.isOwner}
-							light
-						/>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
 </EdgeLabel>
 
 <BaseEdge

package/package/components/graph/renderers/edges/EmptyEdge.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">import { getBezierPath, BaseEdge } from '@xyflow/svelte';
-import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import { getGraphContext } from '../../graphContext';
 let { sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd = undefined, data = {} } = $props();
-const { useDataflow } = getContext('FlowGraphContext');
+const { useDataflow } = getGraphContext();
 let [edgePath] = $derived(getBezierPath({
     sourceX,
     sourceY,
@@ -17,5 +17,6 @@ let [edgePath] = $derived(getBezierPath({
 <BaseEdge
 	path={edgePath}
 	{markerEnd}
-	class={twMerge($useDataflow ? 'hidden' : '', data.class ?? '')}
+	class={twMerge($useDataflow ? 'hidden' : '', 'pointer-events-none', data.class ?? '')}
+	interactionWidth={0}
 />

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

@@ -1,11 +1,18 @@
-<script module lang="ts">export function validateToolName(name) {
+<script module lang="ts">export function validateToolName(name, type) {
+    if (type === 'websearch')
+        return true;
+    if (type === 'mcp') {
+        return name.length > 0;
+    }
     return /^[a-zA-Z0-9_]+$/.test(name);
 }
 export const AI_TOOL_BASE_OFFSET = 5;
 export const AI_TOOL_ROW_OFFSET = 30;
 export const BELOW_ADDITIONAL_OFFSET = 19;
 export const AI_TOOL_CALL_PREFIX = '_wm_ai_agent_tool_call';
+export const AI_MCP_TOOL_CALL_PREFIX = '_wm_ai_mcp_tool_call';
 export const AI_TOOL_MESSAGE_PREFIX = '_wm_ai_agent_message';
+export const AI_WEBSEARCH_PREFIX = '_wm_ai_websearch';
 const ROW_WIDTH = 275;
 const NEW_TOOL_NODE_WIDTH = 50;
 const MAX_TOOLS_PER_ROW = 2;
@@ -44,23 +51,43 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
         // by default we assume we will show tools above
         let baseOffset = -AI_TOOL_BASE_OFFSET;
         let rowOffset = -AI_TOOL_ROW_OFFSET;
-        let tools = node.data.module.value.tools.map((t) => ({
-            id: t.id,
-            name: t.summary ?? ''
-        }));
+        let tools = node.data.module.value.tools.map((t, idx) => {
+            // Handle FlowModule, MCP, and Websearch tools
+            const toolType = t.value.tool_type === 'mcp'
+                ? 'mcp'
+                : t.value.tool_type === 'websearch'
+                    ? 'websearch'
+                    : t.value.tool_type === 'flowmodule'
+                        ? t.value.type
+                        : undefined;
+            return {
+                id: t.id,
+                name: t.summary ?? '',
+                type: toolType
+            };
+        });
         const agentActions = !insertable && flowModuleStates?.[node.id]?.agent_actions;
         if (agentActions) {
             // should show tools below
             baseOffset = BELOW_ADDITIONAL_OFFSET + AI_TOOL_BASE_OFFSET;
             rowOffset = AI_TOOL_ROW_OFFSET;
             tools = agentActions.map((a, idx) => {
-                if (a.type === 'tool_call') {
-                    const id = getToolCallId(idx, node.id, a.module_id);
+                if (a.type === 'tool_call' || a.type === 'mcp_tool_call') {
+                    const id = a.type === 'tool_call'
+                        ? getToolCallId(idx, node.id, a.module_id)
+                        : AI_MCP_TOOL_CALL_PREFIX + '-' + node.id + '-' + idx;
                     return {
                         id,
                         name: a.function_name
                     };
                 }
+                else if (a.type === 'web_search') {
+                    return {
+                        id: AI_WEBSEARCH_PREFIX + '-' + node.id + '-' + idx,
+                        name: 'Web Search',
+                        type: 'websearch'
+                    };
+                }
                 else {
                     return {
                         id: getToolCallId(idx, node.id),
@@ -92,6 +119,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 parentId: node.id,
                 data: {
                     tool: tool.name,
+                    type: tool.type,
                     eventHandlers,
                     moduleId: tool.id,
                     insertable,
@@ -112,7 +140,8 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                             (agentActions
                                 ? Math.floor(i / MAX_TOOLS_PER_ROW) + 1
                                 : totalRows - Math.floor(i / MAX_TOOLS_PER_ROW))
-                }
+                },
+                selectable: false
             };
         });
         const toolEdges = toolNodes?.map((n) => ({
@@ -120,7 +149,8 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
             source: agentActions ? (n.parentId ?? '') : (n.id ?? ''),
             target: agentActions ? (n.id ?? '') : (n.parentId ?? ''),
             type: 'empty',
-            data: { class: '!opacity-35 dark:!opacity-20' }
+            data: { class: '!opacity-35 dark:!opacity-20' },
+            selectable: false
         }));
         allToolEdges.push(...(toolEdges ?? []));
         allToolNodes.push(...(toolNodes ?? []));
@@ -134,7 +164,8 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 position: {
                     x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2 + node.data.offset,
                     y: baseOffset + rowOffset
-                }
+                },
+                selectable: false
             });
         }
     }
@@ -174,36 +205,43 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
 </script>
 
 <script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
-import { MessageCircle, Play, Wrench, X } from 'lucide-svelte';
+import { Globe, MessageCircle, Play, Plug, Wrench, X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-import { getContext } from 'svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
+import { getNodeColorClasses } from '../../util';
 import { deepEqual } from 'fast-equals';
+import { getGraphContext } from '../../graphContext';
 let hover = $state(false);
 let { data } = $props();
-const { selectedId } = getContext('FlowGraphContext');
+const { selectionManager } = getGraphContext();
 const flowModuleState = $derived(data.flowModuleStates?.[data.moduleId]);
+let colorClasses = $derived(getNodeColorClasses(!validateToolName(data.tool, data.type) ? 'Failure' : flowModuleState?.type, selectionManager?.getSelectedId() === data.moduleId));
 </script>
 
 <NodeWrapper>
 	{#snippet children({ darkMode })}
-		{@const bgColor = getStateColor(flowModuleState?.type, darkMode, true, false)}
-		{@const bgHoverColor = getStateHoverColor(flowModuleState?.type, darkMode, true, false)}
-
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="relative" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
+		<div
+			class="relative bg-surface-secondary rounded-md"
+			onmouseenter={() => (hover = true)}
+			onmouseleave={() => (hover = false)}
+		>
 			<button
 				class={twMerge(
-					'text-left bg-surface h-6 flex items-center gap-1.5 rounded-sm text-secondary overflow-clip w-full outline-offset-0 outline-slate-500 dark:outline-gray-400',
-					$selectedId === data.moduleId ? 'outline outline-1' : 'active:outline active:outline-1'
+					'text-left h-6 flex items-center gap-1.5 rounded-md overflow-clip w-full outline-offset-0 drop-shadow-base',
+					colorClasses.outline,
+					colorClasses.text,
+					colorClasses.bg
 				)}
-				style={`background-color: ${hover ? bgHoverColor : bgColor};`}
 				onclick={() => data.eventHandlers.select(data.moduleId)}
 			>
 				{#if data.moduleId.startsWith(AI_TOOL_MESSAGE_PREFIX)}
 					<MessageCircle size={16} class="ml-1 shrink-0" />
-				{:else if data.moduleId.startsWith(AI_TOOL_CALL_PREFIX)}
+				{:else if data.moduleId.startsWith(AI_TOOL_CALL_PREFIX) || data.moduleId.startsWith(AI_MCP_TOOL_CALL_PREFIX)}
 					<Play size={16} class="ml-1 shrink-0" />
+				{:else if data.type === 'websearch'}
+					<Globe size={16} class="ml-1 shrink-0" />
+				{:else if data.type === 'mcp'}
+					<Plug size={16} class="ml-1 shrink-0" />
 				{:else}
 					<Wrench size={16} class="ml-1 shrink-0" />
 				{/if}
@@ -211,17 +249,17 @@ const flowModuleState = $derived(data.flowModuleStates?.[data.moduleId]);
 				<span
 					class={twMerge(
 						'text-3xs truncate flex-1',
-						!validateToolName(data.tool) && 'text-red-400'
+						!validateToolName(data.tool, data.type) && 'text-red-400'
 					)}
 				>
-					{data.tool || 'No tool name'}
+					{data.tool || 'Missing name'}
 				</span>
 			</button>
 			{#if data.insertable}
 				<button
 					class={twMerge(
 						'absolute -top-[8px] -right-[8px] rounded-full h-[16px] w-[16px] center-center text-secondary outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-red-400 hover:text-white !hidden',
-						$selectedId === data.moduleId || hover ? '!flex' : ''
+						selectionManager?.getSelectedId() === data.moduleId || hover ? '!flex' : ''
 					)}
 					title="Delete"
 					onclick={() => data.eventHandlers.delete({ id: data.moduleId }, '')}

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

@@ -1,9 +1,11 @@
-export declare function validateToolName(name: string): boolean;
+export declare function validateToolName(name: string, type?: string): boolean;
 export declare const AI_TOOL_BASE_OFFSET = 5;
 export declare const AI_TOOL_ROW_OFFSET = 30;
 export declare const BELOW_ADDITIONAL_OFFSET = 19;
 export declare const AI_TOOL_CALL_PREFIX = "_wm_ai_agent_tool_call";
+export declare const AI_MCP_TOOL_CALL_PREFIX = "_wm_ai_mcp_tool_call";
 export declare const AI_TOOL_MESSAGE_PREFIX = "_wm_ai_agent_message";
+export declare const AI_WEBSEARCH_PREFIX = "_wm_ai_websearch";
 export declare function getToolCallId(idx: number, agentModuleId: string, moduleId?: string): string;
 export declare function computeAIToolNodes(nodes: (Node & NodeLayout)[], eventHandlers: GraphEventHandlers, insertable: boolean, flowModuleStates: Record<string, GraphModuleState> | undefined): {
     toolNodes: (Node & NodeLayout)[];