Objective:
Implement a new "Tool Executor" node within the workflow editor. This node must support dynamic input connections and include a dedicated configuration form that reuses existing UI components.
Functional Requirements:
design_system.md.I'll help you implement the "Tool Executor" node. Let me first explore the codebase to understand the existing workflow editor structure, the Agent node form, and the input data connect component.
Now let me read the Agent form (reference implementation) and the input data connect components:
Let me continue reading more of the agent form to understand the input data connect usage, and also look at the editor panel, enums, and models:
Let me continue reading the enums for CustomNodeTypes, the rest of the agent form for InputDataConnectContainer usage, and the selected input connects:
Now let me look at the workflow editor form exports and check if there's an index file:
Now I have a comprehensive understanding of the codebase. Let me implement the Tool Executor node with its form, following the existing patterns. I need to:
toolExecutorNode to the CustomNodeTypes enumNow let me add the Tool Executor node to the editor constants NODE_LIST and also add the preview image reference:
Now let me check the use-workflow-editor hook to ensure the tool executor node type is handled properly during workflow operations:
The workflow editor hook already handles node types dynamically. Now let me add processing for the Tool Executor node type in the useWorkflowEditor hook to validate its data:
Now let me check the CustomHandle component to understand how dynamic handles work:
Now I need to create a specialized Tool Executor node component that supports dynamic input handles. Let me create a new component that extends the base node with support for dynamic inputs:
Now update the Node component to use the specialized ToolExecutorNode:
Now let me update the models to include the APISelectorProps export check and ensure all the types are correctly defined:
Let me verify that the Tool Executor form properly handles the types for the selectors by checking the models:
The models look good. Now let me verify the editor playground registers the node type:
I need to add the toolExecutorNode to the nodeTypes and to the getNodeLabel function:
Now let me create an index file for the tool executor node component to make it exportable:
Now let me verify if there's a molecules index file to update:
Let me check the components index file:
Good, there is a molecules index file. Let me read it and add the tool executor node:
Now let me verify the form is using correct prop types by checking the ExecutableFunction selector props:
The implementation is complete. Let me provide a summary of all the changes made:
I have successfully implemented the "Tool Executor" node for the workflow editor. Here's a summary of the changes:
Files Created:
src/components/organisms/workflow-editor-form/tool-executor-form.tsx - The dedicated configuration form that reuses the existing InputDataConnectContainer and SelectedInputConnects components from the Agent form. It includes basic info fields (name, description), a dynamic inputs section for adding/removing input connections, and the full input data connect integration.src/components/molecules/tool-executor-node/tool-executor-node.tsx - A specialized node component that supports dynamic input handles (connections). It renders multiple target handles based on the dynamicInputs array stored in the node data, allowing users to visually connect multiple inputs.src/components/molecules/tool-executor-node/index.ts - Barrel export for the tool executor node.Files Modified:
src/enums/node-type.ts - Added toolExecutorNode = 'tool_executor_node' to the CustomNodeTypes enumsrc/components/organisms/index.ts - Added export for the new tool executor formsrc/components/molecules/index.ts - Added export for the tool executor nodesrc/components/molecules/custom-node-base/node/node.tsx - Added rendering logic for the Tool Executor node using the specialized componentsrc/app/editor/[wid]/[workflow_id]/components/editor-panel.tsx - Added the Tool Executor form to the editor panel when the node is selectedsrc/app/editor/[wid]/[workflow_id]/components/editor-playground.tsx - Registered the node type and added its labelsrc/constants/editor-constants.ts - Added Tool Executor to the NODE_LIST for drag-and-dropsrc/hooks/use-workflow-editor.ts - Added Tool Executor to the agent types set for data validationAn error occurred during deployment. Please fix:
Running build in Washington, D.C., USA (East) – iad1
Build machine configuration: 2 cores, 8 GB
Cloning github.com/Shamilawa/kaya-platform-fe-static (Branch: v0/shamilawa-52adcd0a, Commit: 9ffde0b)
Previous build caches not available.
Cloning completed: 1.166s
...
168 | mcpServers: mcpServers,
169 | rags: vectorRags ?? [],
Next.js build worker exited with code: 1 and signal: null
ELIFECYCLE Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1