johndoe6345789 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

..

requirements.txt

feat(workflowui): create visual workflow editor with n8n-like UI

2026-01-23 01:47:21 +00:00

server.py

feat(workflowui): create visual workflow editor with n8n-like UI

2026-01-23 01:47:21 +00:00