|
|
a2b7f70f06
|
feat(workflowui): create visual workflow editor with n8n-like UI
New WorkflowUI project: Production-grade visual workflow editor built with
modern tech stack for MetaBuilder's DAG executor system.
### Frontend Stack
- Next.js 14 (server-side rendering, API routes)
- React 18 with TypeScript strict mode
- Redux + Redux Toolkit (centralized state management)
- React Flow (DAG visualization and manipulation)
- FakeMUI (Material UI compatible components)
- SCSS (scoped component styling)
- IndexedDB with Dexie (offline-first storage)
### Backend Stack
- Flask (lightweight Python backend)
- SQLAlchemy (ORM for persistence)
- CORS support for cross-origin requests
- RESTful API for workflow CRUD
### Architecture
- Offline-first with IndexedDB storage
- Sync queue for changes when offline
- Redux store for centralized state
- React Flow for visual DAG editing
- Multi-tenant support throughout
### Components
- Dashboard: List and manage workflows
- Editor: Visual DAG editor with canvas controls
- Node Library: Browse and add node types
- Properties Panel: Edit node parameters
- Execution History: View past executions
- Node Types: Playwright testing, Storybook documentation
### Database
- IndexedDB with 5 tables: workflows, executions, nodeTypes, drafts, syncQueue
- Indexes for fast queries: tenantId, name, category
- Sync queue for offline changes
### API Endpoints
- Workflows CRUD
- Node registry
- Workflow execution
- Execution history
- Workflow validation
- Health checks
### Features
- Drag-and-drop node creation
- Visual connection drawing
- Zoom, pan, minimap controls
- Undo/redo support
- Auto-layout algorithms
- Workflow validation (DAG constraints)
- Export/import workflows
- Version control integration
### Structure
```
workflowui/
├── src/
│ ├── app/ # Next.js pages
│ ├── components/ # React components
│ ├── store/ # Redux slices
│ ├── services/ # API services
│ ├── db/ # IndexedDB operations
│ ├── types/ # TypeScript definitions
│ ├── utils/ # Utilities
│ └── styles/ # Global styles
├── backend/ # Flask server
├── stories/ # Storybook components
├── workflows/ # Example workflows
└── scripts/ # Build/setup scripts
```
### Development
- Hot reload with Next.js dev server
- Redux DevTools integration
- Storybook for component development
- TypeScript strict mode
- Jest testing framework
### Production Ready
- Optimized builds
- Code splitting
- Performance monitoring
- Error tracking
- Multi-tenant isolation
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
2026-01-23 01:47:21 +00:00 |
|
