windmill-components 1.655.2 → 1.665.1

package/package/components/graph/nodeExtraSpace.js

@@ -0,0 +1,113 @@
+import { assetDisplaysAsInputInFlowGraph, assetDisplaysAsOutputInFlowGraph, NODE_WITH_READ_ASSET_Y_OFFSET, NODE_WITH_WRITE_ASSET_Y_OFFSET } from './renderers/nodes/AssetNode.svelte';
+import { AI_TOOL_BASE_OFFSET, AI_TOOL_ROW_OFFSET, BELOW_ADDITIONAL_OFFSET } from './renderers/nodes/AIToolNode.svelte';
+import { topologicalSort } from './graphBuilder.svelte';
+import { GROUP_HEADER_HEIGHT } from './groupEditor.svelte';
+const MAX_TOOLS_PER_ROW = 2;
+/**
+ * Pre-compute extra top/bottom space each node needs for decorations
+ * (assets, AI tools, group headers, group notes).
+ */
+export function computeNodeExtraSpace(graphNodes, opts) {
+    const extraSpace = new Map();
+    // 1. Assets
+    if (opts.showAssets) {
+        for (const node of graphNodes) {
+            const assets = node.data?.assets ?? [];
+            if (!assets.length)
+                continue;
+            const hasRead = assets.some(assetDisplaysAsInputInFlowGraph);
+            const hasWrite = assets.some(assetDisplaysAsOutputInFlowGraph);
+            if (hasRead || hasWrite) {
+                const prev = extraSpace.get(node.id) ?? { top: 0, bottom: 0, left: 0, right: 0 };
+                extraSpace.set(node.id, {
+                    ...prev,
+                    top: prev.top + (hasRead ? NODE_WITH_READ_ASSET_Y_OFFSET : 0),
+                    bottom: prev.bottom + (hasWrite ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)
+                });
+            }
+        }
+    }
+    // 2. AI tools
+    for (const node of graphNodes) {
+        const mod = node.data?.module;
+        if (!mod || mod.value?.type !== 'aiagent')
+            continue;
+        const agentActions = !opts.insertable && opts.flowModuleStates?.[node.id]?.agent_actions;
+        if (agentActions) {
+            // Execution mode: tools below
+            const totalRows = Math.ceil(agentActions.length / MAX_TOOLS_PER_ROW);
+            const space = AI_TOOL_BASE_OFFSET + AI_TOOL_ROW_OFFSET * totalRows + BELOW_ADDITIONAL_OFFSET;
+            const prev = extraSpace.get(node.id) ?? { top: 0, bottom: 0, left: 0, right: 0 };
+            extraSpace.set(node.id, { ...prev, bottom: prev.bottom + space });
+        }
+        else {
+            // Edit mode: tools above
+            const tools = mod.value.tools ?? [];
+            const totalRows = Math.ceil(tools.length / MAX_TOOLS_PER_ROW) + (opts.insertable ? 1 : 0);
+            const space = AI_TOOL_BASE_OFFSET + AI_TOOL_ROW_OFFSET * totalRows;
+            const prev = extraSpace.get(node.id) ?? { top: 0, bottom: 0, left: 0, right: 0 };
+            extraSpace.set(node.id, { ...prev, top: prev.top + space });
+        }
+    }
+    // Topological sort (reversed: top-of-graph first) — shared by group notes and group headers
+    const sortedNodes = topologicalSort(graphNodes).reverse();
+    // 3. Group notes (text above topmost node in each group note)
+    if (opts.showNotes) {
+        const groupNotes = (opts.notes ?? []).filter((n) => n.type === 'group');
+        if (groupNotes.length > 0) {
+            for (const groupNote of groupNotes) {
+                if (!groupNote.contained_node_ids?.length)
+                    continue;
+                const topmostNodeId = sortedNodes.find((node) => groupNote.contained_node_ids?.includes(node.id))?.id;
+                if (topmostNodeId) {
+                    const textHeight = opts.noteTextHeights[groupNote.id] || 60;
+                    const spacing = textHeight + 16; // padding
+                    const prev = extraSpace.get(topmostNodeId) ?? {
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0
+                    };
+                    extraSpace.set(topmostNodeId, {
+                        ...prev,
+                        top: Math.max(prev.top, spacing + prev.top)
+                    });
+                }
+            }
+        }
+    }
+    // 4. Collapsed group nodes are taller than regular nodes (header + module icons)
+    for (const node of graphNodes) {
+        if (node.id.startsWith('collapsed-group:')) {
+            const prev = extraSpace.get(node.id) ?? { top: 0, bottom: 0, left: 0, right: 0 };
+            extraSpace.set(node.id, {
+                ...prev,
+                bottom: prev.bottom + GROUP_HEADER_HEIGHT
+            });
+        }
+    }
+    // 5. Group nodes (expanded heads and collapsed) with notes need extra height
+    if (opts.showNotes) {
+        const noteHeights = opts.groupDisplayState.getNoteHeights();
+        for (const node of graphNodes) {
+            let groupId;
+            if (node.id.startsWith('group:') && !node.id.endsWith('-end')) {
+                groupId = node.id.slice('group:'.length);
+            }
+            else if (node.id.startsWith('collapsed-group:')) {
+                groupId = node.id.slice('collapsed-group:'.length);
+            }
+            if (groupId) {
+                const noteHeight = noteHeights[groupId];
+                if (noteHeight && noteHeight > 0) {
+                    const prev = extraSpace.get(node.id) ?? { top: 0, bottom: 0, left: 0, right: 0 };
+                    extraSpace.set(node.id, {
+                        ...prev,
+                        bottom: prev.bottom + noteHeight
+                    });
+                }
+            }
+        }
+    }
+    return extraSpace.size > 0 ? extraSpace : undefined;
+}

package/package/components/graph/noteColors.d.ts

@@ -12,6 +12,7 @@ export declare enum NoteColor {
 }
 export interface NoteColorConfig {
     background: string;
+    backgroundLight: string;
     outline: string;
     outlineHover: string;
     text: string;

package/package/components/graph/noteColors.js

@@ -16,70 +16,80 @@ export var NoteColor;
 export const NOTE_COLORS = {
     [NoteColor.YELLOW]: {
         background: 'bg-yellow-200 dark:bg-yellow-900',
-        outline: 'outline-yellow-300 dark:outline-yellow-600',
+        backgroundLight: 'bg-yellow-400/5 dark:bg-yellow-600/5',
+        outline: 'outline-yellow-200 dark:outline-yellow-900',
         outlineHover: 'outline-yellow-300/60 dark:outline-yellow-600/60',
         text: 'text-yellow-900 dark:text-yellow-100',
         hover: 'hover:bg-yellow-200 dark:hover:bg-yellow-800'
     },
     [NoteColor.BLUE]: {
         background: 'bg-blue-100 dark:bg-blue-950',
-        outline: 'outline-blue-300 dark:outline-blue-600',
+        backgroundLight: 'bg-blue-400/5 dark:bg-blue-600/5',
+        outline: 'outline-blue-100 dark:outline-blue-950',
         outlineHover: 'outline-blue-300/60 dark:outline-blue-600/60',
         text: 'text-blue-900 dark:text-blue-100',
         hover: 'hover:bg-blue-200 dark:hover:bg-blue-800'
     },
     [NoteColor.GREEN]: {
         background: 'bg-green-200 dark:bg-green-900',
-        outline: 'outline-green-300 dark:outline-green-600',
+        backgroundLight: 'bg-green-400/5 dark:bg-green-600/5',
+        outline: 'outline-green-200 dark:outline-green-900',
         outlineHover: 'outline-green-300/60 dark:outline-green-600/60',
         text: 'text-green-900 dark:text-green-100',
         hover: 'hover:bg-green-200 dark:hover:bg-green-800'
     },
     [NoteColor.PURPLE]: {
         background: 'bg-purple-200 dark:bg-purple-900',
-        outline: 'outline-purple-300 dark:outline-purple-600',
+        backgroundLight: 'bg-purple-400/5 dark:bg-purple-600/5',
+        outline: 'outline-purple-200 dark:outline-purple-900',
         outlineHover: 'outline-purple-300/60 dark:outline-purple-600/60',
         text: 'text-purple-900 dark:text-purple-100',
         hover: 'hover:bg-purple-200 dark:hover:bg-purple-800'
     },
     [NoteColor.PINK]: {
         background: 'bg-pink-200 dark:bg-pink-900',
-        outline: 'outline-pink-300 dark:outline-pink-600',
+        backgroundLight: 'bg-pink-400/5 dark:bg-pink-600/5',
+        outline: 'outline-pink-200 dark:outline-pink-900',
         outlineHover: 'outline-pink-300/60 dark:outline-pink-600/60',
         text: 'text-pink-900 dark:text-pink-100',
         hover: 'hover:bg-pink-200 dark:hover:bg-pink-800'
     },
     [NoteColor.ORANGE]: {
         background: 'bg-orange-200 dark:bg-orange-900',
-        outline: 'outline-orange-300 dark:outline-orange-600',
+        backgroundLight: 'bg-orange-400/5 dark:bg-orange-600/5',
+        outline: 'outline-orange-200 dark:outline-orange-900',
         outlineHover: 'outline-orange-300/60 dark:outline-orange-600/60',
         text: 'text-orange-900 dark:text-orange-100',
         hover: 'hover:bg-orange-200 dark:hover:bg-orange-800'
     },
     [NoteColor.RED]: {
         background: 'bg-red-200 dark:bg-red-900',
-        outline: 'outline-red-300 dark:outline-red-600',
+        backgroundLight: 'bg-red-400/5 dark:bg-red-600/5',
+        outline: 'outline-red-200 dark:outline-red-900',
         outlineHover: 'outline-red-300/60 dark:outline-red-600/60',
         text: 'text-red-900 dark:text-red-100',
         hover: 'hover:bg-red-200 dark:hover:bg-red-800'
     },
     [NoteColor.CYAN]: {
         background: 'bg-cyan-200 dark:bg-cyan-900',
-        outline: 'outline-cyan-300 dark:outline-cyan-600',
+        backgroundLight: 'bg-cyan-400/5 dark:bg-cyan-600/5',
+        outline: 'outline-cyan-200 dark:outline-cyan-900',
         outlineHover: 'outline-cyan-300/60 dark:outline-cyan-600/60',
         text: 'text-cyan-900 dark:text-cyan-100',
         hover: 'hover:bg-cyan-200 dark:hover:bg-cyan-800'
     },
     [NoteColor.LIME]: {
         background: 'bg-lime-200 dark:bg-lime-900',
-        outline: 'outline-lime-300 dark:outline-lime-600',
+        backgroundLight: 'bg-lime-400/5 dark:bg-lime-600/5',
+        outline: 'outline-lime-200 dark:outline-lime-900',
         outlineHover: 'outline-lime-300/60 dark:outline-lime-600/60',
         text: 'text-lime-900 dark:text-lime-100',
         hover: 'hover:bg-lime-200 dark:hover:bg-lime-800'
     },
     [NoteColor.GRAY]: {
         background: 'bg-gray-200 dark:bg-gray-800',
-        outline: 'outline-gray-300 dark:outline-gray-600',
+        backgroundLight: 'bg-gray-400/5 dark:bg-gray-600/5',
+        outline: 'outline-gray-200 dark:outline-gray-800',
         outlineHover: 'outline-gray-300/60 dark:outline-gray-600/60',
         text: 'text-gray-900 dark:text-gray-100',
         hover: 'hover:bg-gray-200 dark:hover:bg-gray-700'

package/package/components/graph/noteUtils.svelte.d.ts

@@ -18,25 +18,7 @@ export type NodeDep = {
 };
 export type NoteComputeResult = {
     noteNodes: (Node & NodeLayout)[];
-    newNodePositions: Record<string, {
-        x: number;
-        y: number;
-    }>;
-};
-export type AIToolSpacingInfo = {
-    toolNodes: (Node & NodeLayout)[];
-    toolEdges: any[];
-    newNodePositions: Record<string, {
-        x: number;
-        y: number;
-    }>;
 };
-export interface GroupNoteBounds {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
 /**
  * Extracts layout-affecting signature for change detection
  * Only includes properties that affect graph layout (structure, grouping)

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

@@ -190,59 +190,26 @@ export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChan
         }
     }
     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
+    // Find topmost node per group note for layout calculation
     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];
+            if (topmostNodeId) {
+                topMostNodesMap[groupNote.id] = topmostNodeId;
             }
-            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,
-            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
+        // Calculate position and size using node positions for group notes
         const { position, size } = isGroupNote
-            ? calculateGroupNoteLayout(note, adjustedNodes, noteTextHeights[note.id] || 60, topMostNodesMap[note.id])
+            ? calculateGroupNoteLayout(note, nodes, 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 }
@@ -261,10 +228,8 @@ export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChan
         };
         allNoteNodes.push(noteNode);
     }
-    const newNodePositions = Object.fromEntries(sortedNewNodes.map((n) => [n.id, n.position]));
     const result = {
-        noteNodes: allNoteNodes,
-        newNodePositions
+        noteNodes: allNoteNodes
     };
     // Cache the result
     computeNoteNodesCache = [

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

@@ -8,10 +8,19 @@ import { workspaceStore } from '../../../../stores';
 import FlowStatusWaitingForEvents from '../../../FlowStatusWaitingForEvents.svelte';
 import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
 import { getGraphContext } from '../../graphContext';
+import { GROUP_TOP_PADDING } from '../../compoundLayout';
 const { useDataflow, showAssets, moveManager } = getGraphContext();
-let { id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
+let { id, source, target, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
 // style,
 data } = $props();
+// Derive group boundary from source/target node IDs
+let groupBoundary = $derived.by(() => {
+    if (source.startsWith('group:') && !source.endsWith('-end'))
+        return 'top';
+    if (target.startsWith('group:') && target.endsWith('-end'))
+        return 'bottom';
+    return undefined;
+});
 let [edgePath] = $derived(getBezierPath({
     sourceX,
     sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
@@ -29,19 +38,25 @@ let completeEdge = $derived(targetY - sourceY > 100
 let waitingForEvents = $derived(data?.flowModuleStates?.[data.targetId]?.type === 'WaitingForEvents' ||
     data?.flowModuleStates?.[`${data.sourceId}-v`]?.type === 'WaitingForEvents');
 let suspendStatus = $derived(data?.suspendStatus);
-let centerY = $derived(sourceY +
-    32 +
-    (data.shouldOffsetInsertBtnDueToAssetNode && $showAssets ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0));
+let centerY = $derived(groupBoundary === 'bottom'
+    ? targetY
+    : groupBoundary === 'top'
+        ? sourceY + GROUP_TOP_PADDING / 2
+        : sourceY +
+            32 +
+            (data.shouldOffsetInsertBtnDueToAssetNode && $showAssets
+                ? NODE_WITH_WRITE_ASSET_Y_OFFSET
+                : 0));
 let isDragging = $derived(!!moveManager?.dragging);
 let draggedId = $derived(moveManager?.dragging?.moduleId);
 let isValidDropTarget = $derived(isDragging &&
     data?.insertable &&
     draggedId !== undefined &&
     !data.disableMoveIds?.includes(draggedId) &&
-    data.sourceId !== draggedId &&
-    data.targetId !== draggedId);
-let isNearestDrop = $derived(isValidDropTarget && moveManager?.nearestDropZone?.edgeId === id);
-let isAdjacentToDragged = $derived(isDragging && (data?.sourceId === draggedId || data?.targetId === draggedId));
+    source !== draggedId &&
+    target !== draggedId);
+let isNearestDrop = $derived(isValidDropTarget && moveManager?.nearestDropZone?.edgeId === id ? true : false);
+let isAdjacentToDragged = $derived(isDragging && (source === draggedId || target === draggedId));
 // Register this edge's drop zone position with the drag manager so proximity
 // detection uses the actual xyflow-computed position rather than re-deriving it.
 $effect(() => {
@@ -106,7 +121,7 @@ $effect(() => {
 				{@render dropTargetIndicator(isNearestDrop)}
 			</div>
 		</div>
-	{:else if data?.insertable && !$useDataflow && !moveManager?.movingModuleId && !isDragging}
+	{:else if data?.insertable && !groupBoundary && !$useDataflow && !moveManager?.movingModuleId && !isDragging}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}
 			style:transform="translate(-50%, -50%)"
@@ -158,7 +173,7 @@ $effect(() => {
 
 	{#if moveManager?.movingModuleId && data?.insertable}
 		<div class="edgeButtonContainer nodrag nopan" style:transform="translate(-50%, -50%)">
-			{#if !(moveManager.movingIds ?? [moveManager.movingModuleId]).some((id) => data.disableMoveIds?.includes(id))}
+			{#if !(moveManager.movingIds ?? [moveManager.movingModuleId]).some( (id) => data.disableMoveIds?.includes(id) )}
 				<button
 					title="Paste module"
 					onclick={() => {
@@ -197,7 +212,7 @@ $effect(() => {
 <BaseEdge
 	path={completeEdge}
 	{markerEnd}
-	class={$useDataflow ? 'hidden' : isAdjacentToDragged ? 'opacity-30' : ''}
+	class={$useDataflow || groupBoundary ? 'hidden' : isAdjacentToDragged ? 'opacity-30' : ''}
 	interactionWidth={0}
 	style={undefined}
 	label={undefined}

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

@@ -1,10 +1,23 @@
-<script module lang="ts">export function validateToolName(name, type) {
+<script module lang="ts">import { forbiddenIds } from '../../../flows/idUtils';
+export function getToolNameError(name, type, siblingNames) {
     if (type === 'websearch')
-        return true;
+        return undefined;
     if (type === 'mcp') {
-        return name.length > 0;
+        return name.length > 0 ? undefined : 'Tool name must not be empty';
     }
-    return /^[a-zA-Z0-9_]+$/.test(name);
+    if (!/^[a-zA-Z0-9_]+$/.test(name)) {
+        return 'Tool name must only contain letters, numbers and underscores';
+    }
+    if (forbiddenIds.includes(name)) {
+        return `'${name}' is a reserved name`;
+    }
+    if (siblingNames && siblingNames.filter((n) => n === name).length > 1) {
+        return 'Duplicate tool name';
+    }
+    return undefined;
+}
+export function validateToolName(name, type) {
+    return getToolNameError(name, type) === undefined;
 }
 export const AI_TOOL_BASE_OFFSET = 5;
 export const AI_TOOL_ROW_OFFSET = 30;
@@ -44,7 +57,6 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
     }
     const allToolNodes = [];
     const allToolEdges = [];
-    const yPosMap = {};
     for (const node of nodes) {
         if (node.type !== 'module' || node.data.module.value.type !== 'aiagent')
             continue;
@@ -97,18 +109,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
             });
         }
         const totalRows = Math.ceil(tools.length / MAX_TOOLS_PER_ROW) + (insertable ? 1 : 0); // + 1 for add tool node when insertable
-        if (agentActions) {
-            yPosMap[node.position.y] = {
-                rows: totalRows,
-                placement: 'below'
-            };
-        }
-        else {
-            yPosMap[node.position.y] = {
-                rows: totalRows,
-                placement: 'above'
-            };
-        }
+        const siblingNames = tools.map((t) => t.name);
         const toolNodes = tools.map((tool, i) => {
             let inputToolXGap = 12;
             let inputToolWidth = (ROW_WIDTH - inputToolXGap) / 2;
@@ -120,6 +121,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 data: {
                     tool: tool.name,
                     type: tool.type,
+                    nameError: getToolNameError(tool.name, tool.type, siblingNames),
                     eventHandlers,
                     moduleId: tool.id,
                     insertable,
@@ -128,13 +130,13 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 id: `${node.id}-tool-${tool.id}`,
                 width: inputToolWidth,
                 position: {
-                    x: (tools.length === 1
+                    x: tools.length === 1
                         ? (ROW_WIDTH - inputToolWidth) / 2
                         : (i + 1) % 2 === 0
                             ? inputToolWidth + inputToolXGap
                             : isLastRow && tools.length % 2 === 1
                                 ? (ROW_WIDTH - inputToolWidth) / 2
-                                : 0),
+                                : 0,
                     y: baseOffset +
                         rowOffset *
                             (agentActions
@@ -169,31 +171,9 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
             });
         }
     }
-    const sortedNewNodes = nodes
-        .filter((n) => n.type !== 'asset')
-        .map((n) => ({ id: n.id, position: $state.snapshot(n.position) }))
-        .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) {
-            // if agent actions, we need to shift the node above
-            if (yPosMap[prevYPos]?.placement === 'below') {
-                currentYOffset += AI_TOOL_BASE_OFFSET + AI_TOOL_ROW_OFFSET * yPosMap[prevYPos].rows;
-            }
-            if (yPosMap[node.position.y]?.placement === 'above') {
-                currentYOffset += AI_TOOL_BASE_OFFSET + AI_TOOL_ROW_OFFSET * yPosMap[node.position.y].rows;
-            }
-            prevYPos = node.position.y;
-        }
-        node.position.y += currentYOffset;
-    }
     let ret = {
         toolNodes: allToolNodes,
-        toolEdges: allToolEdges,
-        newNodePositions: Object.fromEntries(sortedNewNodes.map((n) => {
-            return [n.id, n.position];
-        }))
+        toolEdges: allToolEdges
     };
     computeAIToolNodesCache = {
         nodes: nodes.map(getComparableNode),
@@ -214,7 +194,7 @@ let hover = $state(false);
 let { data, id } = $props();
 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));
+let colorClasses = $derived(getNodeColorClasses(data.nameError ? 'Failure' : flowModuleState?.type, selectionManager?.getSelectedId() === data.moduleId));
 </script>
 
 <NodeWrapper nodeId={id}>
@@ -248,12 +228,7 @@ let colorClasses = $derived(getNodeColorClasses(!validateToolName(data.tool, dat
 					<Wrench size={16} class="ml-1 shrink-0" />
 				{/if}
 
-				<span
-					class={twMerge(
-						'text-3xs truncate flex-1',
-						!validateToolName(data.tool, data.type) && 'text-red-400'
-					)}
-				>
+				<span class={twMerge('text-3xs truncate flex-1', data.nameError && 'text-red-400')}>
 					{data.tool || 'Missing name'}
 				</span>
 			</button>

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

@@ -1,3 +1,4 @@
+export declare function getToolNameError(name: string, type?: string, siblingNames?: string[]): string | undefined;
 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;
@@ -10,10 +11,6 @@ export declare function getToolCallId(idx: number, agentModuleId: string, module
 export declare function computeAIToolNodes(nodes: (Node & NodeLayout)[], eventHandlers: GraphEventHandlers, insertable: boolean, flowModuleStates: Record<string, GraphModuleState> | undefined): {
     toolNodes: (Node & NodeLayout)[];
     toolEdges: Edge[];
-    newNodePositions: Record<string, {
-        x: number;
-        y: number;
-    }>;
 };
 import type { AiToolN, GraphEventHandlers, NodeLayout } from '../../graphBuilder.svelte';
 import type { Edge, Node } from '@xyflow/svelte';

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

@@ -13,7 +13,6 @@ export function computeAssetNodes(nodes) {
     const ASSETS_OVERFLOWED_NODE_WIDTH = 25;
     const allAssetNodes = [];
     const allAssetEdges = [];
-    const yPosMap = {};
     for (const node of nodes) {
         const assets = node.data.assets ?? [];
         if (!assets.length)
@@ -26,14 +25,6 @@ export function computeAssetNodes(nodes) {
         const displayedOutputAssets = outputAssets.slice(0, 3);
         const overflowedInputAssets = inputAssets.slice(3);
         const overflowedOutputAssets = outputAssets.slice(3);
-        // This allows calculating which nodes to offset on the y axis to
-        // make space for the asset nodes
-        if (inputAssets.length || outputAssets.length)
-            yPosMap[node.position.y] = yPosMap[node.position.y] ?? {};
-        if (inputAssets.length)
-            yPosMap[node.position.y].r = true;
-        if (outputAssets.length)
-            yPosMap[node.position.y].w = true;
         // All asset nodes displayed on top
         const inputAssetNodes = displayedInputAssets.map((asset, i) => {
             let inputAssetXGap = 12;
@@ -154,26 +145,9 @@ export function computeAssetNodes(nodes) {
             data: { class: '!opacity-35 dark:!opacity-25' }
         });
     }
-    // Shift all nodes to make space for the new asset nodes
-    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) {
-            if (yPosMap[prevYPos]?.w)
-                currentYOffset += NODE_WITH_WRITE_ASSET_Y_OFFSET;
-            if (yPosMap[node.position.y]?.r)
-                currentYOffset += NODE_WITH_READ_ASSET_Y_OFFSET;
-            prevYPos = node.position.y;
-        }
-        node.position.y += currentYOffset;
-    }
     let ret = {
         newAssetNodes: allAssetNodes,
-        newAssetEdges: allAssetEdges,
-        newNodePositions: Object.fromEntries(sortedNewNodes.map((n) => [n.id, n.position]))
+        newAssetEdges: allAssetEdges
     };
     computeAssetNodesCache = [clone(nodes), ret];
     return ret;

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

@@ -17,10 +17,6 @@ type NodeDep = {
 export declare function computeAssetNodes(nodes: NodeDep[]): {
     newAssetNodes: (Node & NodeLayout)[];
     newAssetEdges: Edge[];
-    newNodePositions: Record<string, {
-        x: number;
-        y: number;
-    }>;
 };
 import type { AssetN, NodeLayout } from '../../graphBuilder.svelte';
 import { type AssetWithAltAccessType } from '../../../assets/lib';