windmill-components 1.511.1 → 1.531.0

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

@@ -1,9 +1,9 @@
-import type { FlowModule, Job, RawScript, Script } from '../../gen';
+import type { FlowModule, Job, PathScript, RawScript, Script } from '../../gen';
 import { type Edge } from '@xyflow/svelte';
 import type { GraphModuleState } from './model';
 import { type AssetWithAltAccessType } from '../assets/lib';
-import type { Writable } from 'svelte/store';
-export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end';
+import type { ModulesTestStates, ModuleTestState } from '../modulesTest.svelte';
+export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end' | 'aiagent';
 export type InlineScript = {
     language: RawScript['language'];
     kind: Script['kind'];
@@ -22,6 +22,7 @@ export type onSelectedIteration = (detail: {
 }) => void;
 export type GraphEventHandlers = {
     insert: (detail: {
+        agentId?: string;
         sourceId?: string;
         targetId?: string;
         branch?: {
@@ -30,8 +31,8 @@ export type GraphEventHandlers = {
         };
         index: number;
         kind: string;
-        inlineScript?: string;
-        script?: string;
+        inlineScript?: InlineScript;
+        script?: PathScript;
         isPreprocessor?: boolean;
     }) => void;
     deleteBranch: (detail: {
@@ -70,8 +71,11 @@ export declare function buildPrefix(prefix: string | undefined, id: string): str
 export type NodeLayout = {
     id: string;
     parentIds?: string[];
+    data: {
+        offset?: number;
+    };
 } & FlowNode;
-export type FlowNode = InputN | ModuleN | BranchAllStartN | BranchAllEndN | ForLoopEndN | ForLoopStartN | ResultN | WhileLoopStartN | WhileLoopEndN | BranchOneStartN | BranchOneEndN | SubflowBoundN | NoBranchN | TriggerN | AssetN | AssetsOverflowedN;
+export type FlowNode = InputN | ModuleN | BranchAllStartN | BranchAllEndN | ForLoopEndN | ForLoopStartN | ResultN | WhileLoopStartN | WhileLoopEndN | BranchOneStartN | BranchOneEndN | SubflowBoundN | NoBranchN | TriggerN | AssetN | AssetsOverflowedN | AiToolN | NewAiToolN;
 export type InputN = {
     type: 'input2';
     data: {
@@ -100,7 +104,8 @@ export type ModuleN = {
         parentIds: string[];
         eventHandlers: GraphEventHandlers;
         moving: string | undefined;
-        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        flowModuleState: GraphModuleState | undefined;
+        testModuleState: ModuleTestState | undefined;
         insertable: boolean;
         editMode: boolean;
         flowJob: Job | undefined;
@@ -116,7 +121,7 @@ export type BranchAllStartN = {
         id: string;
         branchIndex: number;
         eventHandlers: GraphEventHandlers;
-        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        flowModuleState: GraphModuleState | undefined;
         insertable: boolean;
         branchOne: boolean;
     };
@@ -127,7 +132,7 @@ export type BranchAllEndN = {
         offset: number;
         id: string;
         eventHandlers: GraphEventHandlers;
-        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        flowModuleState: GraphModuleState | undefined;
     };
 };
 export type ForLoopEndN = {
@@ -137,7 +142,7 @@ export type ForLoopEndN = {
         id: string;
         eventHandlers: GraphEventHandlers;
         simplifiedTriggerView: boolean;
-        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        flowModuleState: GraphModuleState | undefined;
     };
 };
 export type ForLoopStartN = {
@@ -146,7 +151,7 @@ export type ForLoopStartN = {
         offset: number;
         id: string;
         eventHandlers: GraphEventHandlers;
-        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        flowModuleState: GraphModuleState | undefined;
         selectedId: string | undefined;
         editMode: boolean;
         simplifiedTriggerView: boolean;
@@ -182,7 +187,7 @@ export type BranchOneStartN = {
         offset: number;
         id: string;
         eventHandlers: GraphEventHandlers;
-        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        flowModuleState: GraphModuleState | undefined;
         selected: boolean;
         insertable: boolean;
         label: string;
@@ -197,7 +202,7 @@ export type BranchOneEndN = {
         offset: number;
         id: string;
         eventHandlers: GraphEventHandlers;
-        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        flowModuleState: GraphModuleState | undefined;
     };
 };
 export type SubflowBoundN = {
@@ -218,7 +223,7 @@ export type NoBranchN = {
         offset: number;
         id: string;
         eventHandlers: GraphEventHandlers;
-        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        flowModuleState: GraphModuleState | undefined;
         branchOne: boolean;
         label: string;
         branchIndex: number;
@@ -247,10 +252,35 @@ export type AssetsOverflowedN = {
         overflowedAssets: AssetWithAltAccessType[];
     };
 };
+export type AiToolN = {
+    type: 'aiTool';
+    data: {
+        tool: string;
+        eventHandlers: GraphEventHandlers;
+        moduleId: string;
+        insertable: boolean;
+        flowModuleStates: Record<string, GraphModuleState> | undefined;
+    };
+};
+export type NewAiToolN = {
+    type: 'newAiTool';
+    data: {
+        eventHandlers: GraphEventHandlers;
+        agentModuleId: string;
+    };
+};
+export declare function topologicalSort(nodes: {
+    id: string;
+    parentIds?: string[];
+}[]): {
+    id: string;
+    parentIds?: string[];
+}[];
 export declare function graphBuilder(modules: FlowModule[] | undefined, extra: {
     disableAi: boolean;
     insertable: boolean;
     flowModuleStates: Record<string, GraphModuleState> | undefined;
+    testModuleStates: ModulesTestStates | undefined;
     selectedId: string | undefined;
     path: string | undefined;
     newFlow: boolean;
@@ -262,14 +292,16 @@ export declare function graphBuilder(modules: FlowModule[] | undefined, extra: {
     individualStepTests: boolean;
     flowJob: Job | undefined;
     showJobStatus: boolean;
-    suspendStatus: Writable<Record<string, {
+    suspendStatus: Record<string, {
         job: Job;
         nb: number;
-    }>>;
+    }>;
     flowHasChanged: boolean;
     additionalAssetsMap?: Record<string, AssetWithAltAccessType[]>;
 }, failureModule: FlowModule | undefined, preprocessorModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined, simplifiableFlow: SimplifiableFlow | undefined, flowPathForTriggerNode: string | undefined, expandedSubflows: Record<string, FlowModule[]>): {
-    nodes: NodeLayout[];
+    nodes: {
+        [key: string]: NodeLayout;
+    };
     edges: Edge[];
     error?: string | undefined;
 };

package/package/components/graph/graphBuilder.svelte.js

@@ -12,6 +12,21 @@ export function isTriggerStep(module) {
 export function buildPrefix(prefix, id) {
     return (prefix ?? '') + id + ':';
 }
+export function topologicalSort(nodes) {
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const result = [];
+    const visited = new Set();
+    function visit(id) {
+        if (visited.has(id))
+            return;
+        visited.add(id);
+        const node = nodeMap.get(id);
+        node.parentIds?.forEach(visit);
+        result.push(node);
+    }
+    nodes.forEach((n) => visit(n.id));
+    return result.reverse();
+}
 // input2: InputNode,
 // module: ModuleNode,
 // branchAllStart: BranchAllStart,
@@ -33,12 +48,12 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
 // }
 ) {
     console.debug('Building graph');
-    const nodes = [];
-    const edges = [];
     try {
         if (!modules) {
-            return { nodes, edges };
+            return { nodes: {}, edges: [] };
         }
+        const nodes = [];
+        const edges = [];
         function addNode(module, offset) {
             const duplicated = nodes.find((n) => n.id === module.id);
             if (duplicated) {
@@ -57,7 +72,8 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     parentIds: [],
                     eventHandlers: eventHandlers,
                     moving: moving,
-                    flowModuleStates: extra.flowModuleStates,
+                    flowModuleState: extra.flowModuleStates?.[module.id],
+                    testModuleState: extra.testModuleStates?.states?.[module.id],
                     insertable: extra.insertable,
                     editMode: extra.editMode,
                     isOwner: extra.isOwner,
@@ -231,7 +247,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                 offset: currentOffset,
                                 id: module.id,
                                 eventHandlers: eventHandlers,
-                                flowModuleStates: extra.flowModuleStates
+                                flowModuleState: extra.flowModuleStates?.[module.id]
                             },
                             type: 'branchAllEnd'
                         };
@@ -245,7 +261,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                     id: module.id,
                                     branchIndex: -1,
                                     eventHandlers: eventHandlers,
-                                    flowModuleStates: extra.flowModuleStates,
+                                    flowModuleState: extra.flowModuleStates?.[module.id],
                                     branchOne: false,
                                     label: 'No branches'
                                 },
@@ -270,7 +286,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                         id: module.id,
                                         branchIndex: branchIndex,
                                         eventHandlers: eventHandlers,
-                                        flowModuleStates: extra.flowModuleStates,
+                                        flowModuleState: extra.flowModuleStates?.[module.id],
                                         insertable: extra.insertable,
                                         branchOne: false
                                     },
@@ -298,7 +314,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                 simplifiedTriggerView,
                                 eventHandlers: eventHandlers,
                                 editMode: extra.editMode,
-                                flowModuleStates: extra.flowModuleStates,
+                                flowModuleState: extra.flowModuleStates?.[module.id],
                                 selectedId: extra.selectedId
                             },
                             type: 'forLoopStart'
@@ -320,7 +336,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                 id: module.id,
                                 eventHandlers: eventHandlers,
                                 simplifiedTriggerView,
-                                flowModuleStates: extra.flowModuleStates
+                                flowModuleState: extra.flowModuleStates?.[module.id]
                             },
                             type: 'forLoopEnd'
                         };
@@ -365,7 +381,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                             data: {
                                 offset: currentOffset,
                                 eventHandlers: eventHandlers,
-                                flowModuleStates: extra.flowModuleStates,
+                                flowModuleState: extra.flowModuleStates?.[module.id],
                                 id: module.id
                             },
                             type: 'branchOneEnd'
@@ -395,7 +411,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                 eventHandlers: eventHandlers,
                                 insertable: extra.insertable,
                                 preLabel: undefined,
-                                flowModuleStates: extra.flowModuleStates,
+                                flowModuleState: extra.flowModuleStates?.[module.id],
                                 selected: false,
                                 modules: module.value.default
                             },
@@ -418,7 +434,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                     branchIndex: branchIndex,
                                     eventHandlers: eventHandlers,
                                     insertable: extra.insertable,
-                                    flowModuleStates: extra.flowModuleStates,
+                                    flowModuleState: extra.flowModuleStates?.[module.id],
                                     selected: false,
                                     modules: branch.modules
                                 },
@@ -436,7 +452,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                         let expanded = expandedSubflows[module.id];
                         if (expanded) {
                             expanded = $state.snapshot(expanded);
-                            const startId = `${module.id}-subflow-start`;
+                            const startId = `${module.id}`;
                             const idWithoutPrefix = module.id.startsWith('subflow:')
                                 ? module.id.substring(8)
                                 : module.id;
@@ -564,11 +580,11 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 });
             }
         }
-        return { nodes, edges };
+        return { nodes: Object.fromEntries(nodes.map((n) => [n.id, n])), edges };
     }
     catch (e) {
         return {
-            nodes: [],
+            nodes: {},
             edges: [],
             error: e
         };

package/package/components/graph/model.d.ts

@@ -1,5 +1,5 @@
 import type { FlowStatusModule, Job } from '../../gen';
-import type { Writable } from 'svelte/store';
+import type { StateStore } from '../../utils';
 import type { FlowState } from '../flows/flowState';
 export type ModuleHost = 'workspace' | 'inline' | 'hub';
 export type Loop = {
@@ -18,18 +18,20 @@ export type GraphModuleStates = {
     states: Record<string, GraphModuleState>;
 };
 export type DurationStatus = {
-    iteration_from?: number;
-    iteration_total?: number;
     byJob: Record<string, {
         created_at?: number;
         started_at?: number;
         duration_ms?: number;
     }>;
 };
+export type GlobalIterationBounds = {
+    iteration_from?: number;
+    iteration_total?: number;
+};
 export type FlowStatusViewerContext = {
-    flowStateStore?: Writable<FlowState>;
-    retryStatus: Writable<Record<string, number | undefined>>;
-    suspendStatus: Writable<Record<string, {
+    flowStateStore?: FlowState;
+    retryStatus: StateStore<Record<string, number | undefined>>;
+    suspendStatus: StateStore<Record<string, {
         nb: number;
         job: Job;
     }>>;
@@ -62,6 +64,7 @@ export type GraphModuleState = {
     suspend_count?: number;
     isListJob?: boolean;
     skipped?: boolean;
+    agent_actions?: FlowStatusModule['agent_actions'];
 };
 export type NestedNodes = GraphItem[];
 export declare function isNode(item: GraphItem | NestedNodes | undefined): item is Node;

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

@@ -29,7 +29,7 @@ let completeEdge = $derived(targetY - sourceY > 100
 // and handle the edge state in the graph builder
 let waitingForEvents = $derived(data?.flowModuleStates?.[data.targetId]?.type === 'WaitingForEvents' ||
     data?.flowModuleStates?.[`${data.sourceId}-v`]?.type === 'WaitingForEvents');
-const suspendStatus = $derived(data?.suspendStatus);
+let suspendStatus = $derived(data?.suspendStatus);
 </script>
 
 <EdgeLabel
@@ -130,9 +130,9 @@ const suspendStatus = $derived(data?.suspendStatus);
 					isOwner={data.isOwner}
 					light
 				/>
-			{:else if $suspendStatus && Object.keys($suspendStatus).length > 0}
+			{:else if suspendStatus && Object.keys(suspendStatus).length > 0}
 				<div class="flex gap-2 flex-col">
-					{#each Object.values($suspendStatus) as suspendCount (suspendCount.job.id)}
+					{#each Object.values(suspendStatus) as suspendCount (suspendCount.job.id)}
 						<FlowStatusWaitingForEvents
 							job={suspendCount.job}
 							workspaceId={$workspaceStore!}

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

@@ -1,5 +1,4 @@
 import { BaseEdge, type EdgeProps } from '@xyflow/svelte';
-import type { Writable } from 'svelte/store';
 import type { GraphEventHandlers } from '../../graphBuilder.svelte';
 import type { Job } from '../../../../gen';
 import type { GraphModuleState } from '../../model';
@@ -18,10 +17,10 @@ type $$ComponentProps = EdgeProps & {
         flowModuleStates: Record<string, GraphModuleState> | undefined;
         isOwner: boolean;
         flowJob: Job | undefined;
-        suspendStatus?: Writable<Record<string, {
+        suspendStatus?: Record<string, {
             job: Job;
             nb: number;
-        }>>;
+        }>;
         shouldOffsetInsertBtnDueToAssetNode?: boolean;
     };
 };

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

@@ -0,0 +1,234 @@
+<script module lang="ts">export function validateToolName(name) {
+    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_TOOL_MESSAGE_PREFIX = '_wm_ai_agent_message';
+const ROW_WIDTH = 275;
+const NEW_TOOL_NODE_WIDTH = 40;
+const MAX_TOOLS_PER_ROW = 2;
+let computeAIToolNodesCache;
+export function getToolCallId(idx, agentModuleId, moduleId) {
+    return moduleId
+        ? AI_TOOL_CALL_PREFIX + '-' + agentModuleId + '-' + idx + '-' + moduleId
+        : AI_TOOL_MESSAGE_PREFIX + '-' + agentModuleId + '-' + idx;
+}
+function getComparableNode(node) {
+    if (node.type === 'module' && node.data.module.value.type === 'aiagent') {
+        return {
+            ...node,
+            data: {
+                ...node.data,
+                module: $state.snapshot(node.data.module) // module is a proxy object so we need to snapshot to be able to compare
+            }
+        };
+    }
+    else {
+        return node;
+    }
+}
+export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleStates) {
+    if (computeAIToolNodesCache &&
+        !!flowModuleStates === computeAIToolNodesCache.hasFlowModuleStates &&
+        deepEqual(nodes.map(getComparableNode), computeAIToolNodesCache.nodes)) {
+        return computeAIToolNodesCache.ret;
+    }
+    const allToolNodes = [];
+    const allToolEdges = [];
+    const yPosMap = {};
+    for (const node of nodes) {
+        if (node.type !== 'module' || node.data.module.value.type !== 'aiagent')
+            continue;
+        // 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 ?? ''
+        }));
+        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);
+                    return {
+                        id,
+                        name: a.function_name
+                    };
+                }
+                else {
+                    return {
+                        id: getToolCallId(idx, node.id),
+                        name: 'Message'
+                    };
+                }
+            });
+        }
+        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 toolNodes = tools.map((tool, i) => {
+            let inputToolXGap = 12;
+            let inputToolWidth = (ROW_WIDTH - inputToolXGap) / 2;
+            const row = Math.floor(i / MAX_TOOLS_PER_ROW) + 1;
+            const isLastRow = insertable ? row === totalRows - 1 : row === totalRows;
+            return {
+                type: 'aiTool',
+                parentId: node.id,
+                data: {
+                    tool: tool.name,
+                    eventHandlers,
+                    moduleId: tool.id,
+                    insertable,
+                    flowModuleStates
+                },
+                id: `${node.id}-tool-${tool.id}`,
+                width: inputToolWidth,
+                position: {
+                    x: tools.length === 1
+                        ? (ROW_WIDTH - inputToolWidth) / 2
+                        : (i + 1) % 2 === 0
+                            ? inputToolWidth + inputToolXGap
+                            : isLastRow && tools.length % 2 === 1
+                                ? (ROW_WIDTH - inputToolWidth) / 2
+                                : 0,
+                    y: baseOffset +
+                        rowOffset *
+                            (agentActions
+                                ? Math.floor(i / MAX_TOOLS_PER_ROW) + 1
+                                : totalRows - Math.floor(i / MAX_TOOLS_PER_ROW))
+                }
+            };
+        });
+        const toolEdges = toolNodes?.map((n) => ({
+            id: `${n.id}-edge`,
+            source: agentActions ? (n.parentId ?? '') : (n.id ?? ''),
+            target: agentActions ? (n.id ?? '') : (n.parentId ?? ''),
+            type: 'empty',
+            data: { class: '!opacity-35 dark:!opacity-20' }
+        }));
+        allToolEdges.push(...(toolEdges ?? []));
+        allToolNodes.push(...(toolNodes ?? []));
+        if (insertable) {
+            allToolNodes.push({
+                type: 'newAiTool',
+                data: { eventHandlers, agentModuleId: node.data.module.id },
+                id: `${node.id}-tools-overflowed-in`,
+                parentId: node.id,
+                width: NEW_TOOL_NODE_WIDTH,
+                position: {
+                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2,
+                    y: baseOffset + rowOffset
+                }
+            });
+        }
+    }
+    const sortedNewNodes = clone(nodes)
+        .filter((n) => n.type !== 'asset')
+        .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];
+        }))
+    };
+    computeAIToolNodesCache = {
+        nodes: nodes.map(getComparableNode),
+        hasFlowModuleStates: !!flowModuleStates,
+        ret
+    };
+    return ret;
+}
+</script>
+
+<script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
+import { MessageCircle, Play, Wrench, X } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import { getContext } from 'svelte';
+import { clone } from '../../../../utils';
+import { getStateColor, getStateHoverColor } from '../../util';
+import { deepEqual } from 'fast-equals';
+let hover = $state(false);
+let { data } = $props();
+const { selectedId } = getContext('FlowGraphContext');
+const flowModuleState = $derived(data.flowModuleStates?.[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)}>
+			<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'
+				)}
+				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)}
+					<Play size={16} class="ml-1 shrink-0" />
+				{:else}
+					<Wrench size={16} class="ml-1 shrink-0" />
+				{/if}
+
+				<span
+					class={twMerge(
+						'text-3xs truncate flex-1',
+						!validateToolName(data.tool) && 'text-red-400'
+					)}
+				>
+					{data.tool || 'No tool 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' : ''
+					)}
+					title="Delete"
+					onclick={() => data.eventHandlers.delete({ id: data.moduleId }, '')}
+				>
+					<X size={12} strokeWidth={2} />
+				</button>
+			{/if}
+		</div>
+	{/snippet}
+</NodeWrapper>

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

@@ -0,0 +1,24 @@
+export declare function validateToolName(name: 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_TOOL_MESSAGE_PREFIX = "_wm_ai_agent_message";
+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)[];
+    toolEdges: Edge[];
+    newNodePositions: Record<string, {
+        x: number;
+        y: number;
+    }>;
+};
+import type { AiToolN, GraphEventHandlers, NodeLayout } from '../../graphBuilder.svelte';
+import type { Edge, Node } from '@xyflow/svelte';
+import type { GraphModuleState } from '../../model';
+interface Props {
+    data: AiToolN['data'];
+}
+declare const AiToolNode: import("svelte").Component<Props, {}, "">;
+type AiToolNode = ReturnType<typeof AiToolNode>;
+export default AiToolNode;