🚀 Workflow Designer N8N-Style Enhancements

Overview

Major enhancements to ValkyrAI's workflow designer to compete with and exceed N8N's capabilities. These improvements focus on UX, IntegrationAccount management, custom module configuration, and visual polish.

✨ Completed Enhancements

1. IntegrationAccountSelector Component

File: web/typescript/valkyr_labs_com/src/components/WorkflowStudio/IntegrationAccountSelector.tsx

Features:

• Dropdown selector for existing IntegrationAccounts
• Filter by module type (EMAIL, REST, etc.)
• Filter by execModuleId
• Display account status (verified/unverified)
• Create new account button
• Error handling and retry logic
• Live account status indicators

Usage Example:

<IntegrationAccountSelector
  value={selectedAccountId}
  onChange={(id, account) => setSelectedAccountId(id)}
  moduleType="EMAIL"
  allowCreate
  onCreateNew={() => setShowCreateDialog(true)}
/>

2. CenteredConnectionDialog Component

File: web/typescript/valkyr_labs_com/src/components/WorkflowStudio/CenteredConnectionDialog.tsx

Features:

• Opens exactly where the connection is made (N8N-style!)
• Auto-adjusts position if would overflow viewport
• Smooth fade-in and scale animations
• Click outside to close
• ESC key to close
• Connection label configuration
• Trigger conditions (always/success/error)
• Advanced JEXL expression support

Key Improvements Over Old Dialog:

• ✅ Centered at connection point (not upper right)
• ✅ Better UX with backdrop and animations
• ✅ Keyboard navigation support
• ✅ Smart viewport positioning

🎯 Implementation Status

✅ Completed

1. IntegrationAccount selector component
2. Centered connection dialog
3. TypeScript type safety improvements
4. Proper use of ThorAPI generated models

🚧 Next Steps

1. Update WorkflowCanvas to Use New Dialog

// Capture mouse position during connection
const [connectionPoint, setConnectionPoint] = useState<{x: number; y: number} | null>(null);

const onConnectStart = useCallback((_e: MouseEvent, { nodeId }: { nodeId?: string }) => {
  if (nodeId && _e) {
    setConnectionPoint({ x: _e.clientX, y: _e.clientY });
  }
}, []);

// Pass position to dialog
<CenteredConnectionDialog
  show={edgeDialog.show}
  position={connectionPoint}
  onSave={applyEdgeConfig}
  onCancel={() => setEdgeDialog({ show: false })}
/>

2. Enhance Module Configuration Panels

Email Module Config:

• IntegrationAccountSelector for MailerSend/SendGrid API keys
• Template editor with variable mapping
• Recipient list builder
• Attachment handling

REST Module Config:

• IntegrationAccountSelector for API authentication
• Method selector (GET/POST/PUT/DELETE)
• Header builder with key-value pairs
• Body editor with JSON/form-data support
• Response mapping configuration

3. Custom Module Designers

Create specialized UI for each module type in ModuleDesigner/:

• EmailModuleDesigner.tsx - Email-specific configuration
• RestModuleDesigner.tsx - REST API configuration
• QbeModuleDesigner.tsx - Query builder UI
• LlmModuleDesigner.tsx - LLM prompt configuration

4. Enhanced Node Styling

N8N-style visual improvements:

• Gradient backgrounds on nodes
• Icon support for different module types
• Status indicators (running/success/error)
• Hover effects and animations
• Connection line animations
• Minimap enhancements

5. Drag-and-Drop Enhancements

• Snap-to-grid for cleaner layouts
• Smart connection suggestions
• Auto-layout algorithm
• Bulk node operations (select, move, delete)

📐 Architecture

Integration with ThorAPI

All components use ThorAPI generated models:

import type { IntegrationAccount, ExecModule, Workflow } from "@thorapi/model";
import { useGetIntegrationAccountsQuery } from "@thorapi/redux/services/IntegrationAccountService";

State Management

• Redux Toolkit for global workflow state
• Local React state for UI concerns
• RTK Query for API calls with caching

Component Hierarchy

ConsolidatedWorkflowStudio
├── NodePalette
├── WorkflowCanvas
│   ├── ReactFlow
│   ├── Custom Node Types (Task, Branch, Start, End)
│   └── CenteredConnectionDialog ✨ NEW
├── InspectorPanel
│   ├── IntegrationAccountSelector ✨ NEW
│   ├── ModuleDesigner
│   │   ├── EmailModuleDesigner (TODO)
│   │   ├── RestModuleDesigner (TODO)
│   │   └── QbeModuleDesigner (TODO)
│   └── RetryPolicyEditor
└── Console/Logs

🎨 Design System

Colors (Dark Theme)

• Background: #1d1f24
• Foreground: #e4e4e4
• Accent: #6ee7ff (cyan)
• Success: #10b981 (emerald)
• Error: #ef4444 (red)
• Warning: #f59e0b (amber)

Animations

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

🔒 Security Considerations

1. IntegrationAccount Credentials:

   • Always encrypted at rest (KMS)
   • Never expose in logs
   • Secure field handling via ThorAPI

2. JEXL Expressions:

   • Sandbox execution environment
   • Input validation
   • Rate limiting

3. API Keys:

   • Stored as encrypted IntegrationAccount
   • Rotation support
   • Audit logging

📊 Performance Optimizations

1. React.memo on expensive components
2. useCallback for event handlers
3. useMemo for derived state
4. Lazy loading for module designers
5. Virtualization for large workflow lists
6. Debounced auto-save

🧪 Testing Strategy

Unit Tests

• Component rendering
• Event handling
• State management
• API mocking

Integration Tests

• Workflow save/load
• Module configuration
• Connection creation
• Account selection

E2E Tests

• Complete workflow creation
• Module testing
• Execution verification
• Error handling

📝 Next Actions

1. Update WorkflowCanvas to use CenteredConnectionDialog
2. Create EmailModuleDesigner with IntegrationAccountSelector
3. Create RestModuleDesigner with IntegrationAccountSelector
4. Enhance node styling to match N8N aesthetic
5. Add connection animations and visual feedback
6. Implement smart suggestions for connections
7. Add keyboard shortcuts for power users
8. Create workflow templates library

🎯 Success Metrics

• Connection dialog opens at connection point
• IntegrationAccounts integrated with all modules
• Custom config UI for each module type
• Visual polish matches/exceeds N8N
• Performance remains smooth with 100+ nodes
• Users report improved workflow creation speed

📚 Documentation

• Component library docs in docs/docs/Products/ThorAPI/Component Library/
• API integration guide
• Module configuration guide
• Best practices for workflow design

---

Status: Phase 1 Complete (Core Components)
Next Phase: WorkflowCanvas Integration & Module Designers
Target Completion: Within 2 sprints