feat: add node configuration types, rich variable input component, no…

[TejaBudumuru3]

Pull Request: Workflow Engine UI & Execution Fixes

Overview

This PR addresses several critical bugs across the workflow engine, ranging from UX issues in the canvas to data interpolation failures in the executor. The fixes ensure that multi-branch nodes, rich text inputs, and edge connections behave predictably, while also cleaning up the trigger selection UI.

Changes Included

1. Canvas & Edge Routing Fixes

• Dynamic Output Pins (BaseNode.tsx): Refactored the node UI to dynamically query the node configuration registry (getNodeConfig) at runtime. Nodes like the Data Filter now accurately render context-aware multi-branch pins (e.g., Unique and Duplicates) instead of blindly defaulting to a single Output handle.
• Edge Connection Bug (page.tsx): Fixed a major bug where clicking the + button on a specific branch (like Duplicates) would incorrectly connect the new edge to the first (Unique) pin. The sourceHandleId is now properly passed and preserved through the onAddChild callback for database-loaded nodes.
• Floating Label CSS (BaseNode.tsx): Adjusted the transform on output pin labels to translate(100%, -150%), nudging them slightly upward so they no longer aggressively overlap with the SVG edges.

2. Variable Panel & Data Mapping

• Empty Wire Unwrapping (variable-panel.tsx): Fixed a crash in the Data Mapping sidebar. Previously, if a Data Filter discarded 100% of its data, the "Kept Data" wire was empty, which broke the UI's attempt to unwrap the internal .json object properties. The logic now safely checks if the output is a 2D array and unwraps data correctly regardless of empty wires, restoring normal headers (name, email) instead of "0", "1".
• Visual Column Mapper (ConfigModal.tsx): Replaced the standard HTML <input> in the column_mapper field type with <RichVariableInput />. Mapped columns (like in the Google Sheets node) will now beautifully render interactive colored variable pills instead of raw template strings ({{uuid.email}}).

3. Rich Text Editor Stability

• Cursor Jumping & Line Breaks (RichVariableInput.tsx): Completely overhauled the contentEditable sync logic.
  • Wrote a custom getEditorRawString() parser to deeply intercept and normalize browser-injected <div> and <br> elements into proper \n characters, allowing for true multi-line variable inputs.
  • Prevented the cursor from snapping back to index 0 while typing by strictly comparing the editor's current raw string against incoming prop updates before overwriting the DOM.

4. Backend Execution & API

• Webhook Context Injection (executor.ts): Fixed a critical execution loop bug where Webhook triggers were silently dropping their payload. Webhook metadata is now explicitly injected into executedNodeOutputs before execution begins, allowing downstream nodes to successfully interpolate webhook variables.
• Ghost Triggers Removed (userRoutes.ts): Cleaned up the /getAvailableTriggers endpoint by strictly filtering for where: { type: 'webhook' }. This prevents accidental "Action" nodes (like Gmail/Google Sheets) from appearing in the Trigger selection dropdown due to legacy database entries.

5. General UX Improvements

• Silenced Empty Workflow Errors (page.tsx): Removed the aggressive red error toast that fired immediately upon creating a new workflow. The UI now gracefully recognizes an empty Trigger state and peacefully mounts the dotted trigger-placeholder node on the canvas.

Testing Steps

1. Create a new workflow (verify no red error toast appears).
2. Select Webhook trigger (verify Google Sheets/Gmail are gone from the dropdown).
3. Connect a Data Filter node and verify both Unique and Duplicates output pins are visible.
4. Click the + button specifically on the Duplicates pin and add a Gmail node (verify the edge routes perfectly from the bottom pin).
5. Open the Gmail node configuration and type a multi-line message containing variables (verify the cursor does not jump and line breaks are respected).
6. Execute the workflow and verify the Webhook payload safely maps into the final nodes.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: bee1a96a-dc54-4024-95a1-7116458fa2fd

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Vamsi-o]

Good work