feat(workflows): add full Workflow section — visual constructor, dashboard & execution engine #1

Open
NW wants to merge 21 commits from genspark_ai_developer into main
Owner

New Feature: Workflow Builder & Execution Engine

Database Schema (4 new tables)

  • workflows: pipeline definitions with status (draft/active/paused/archived), tags, canvas metadata
  • workflowNodes: agent/container/trigger/condition/output blocks with canvas positions
  • workflowEdges: directional connections between nodes (source→target)
  • workflowRuns: execution history with per-node status tracking & timing

Backend (server/workflows.ts + 13 tRPC endpoints)

  • Full CRUD for workflows, nodes, edges
  • Atomic canvas save (nodes + edges in one mutation)
  • BFS graph execution engine: walks from trigger nodes, executes agents/containers in order
  • Single-node test execution for individual block testing
  • Run management: start, cancel, poll status, list history
  • Aggregated workflow stats (success rate, avg duration, run counts)

Frontend — Visual Constructor

  • WorkflowCanvas: interactive drag-and-drop builder with node palette, edge drawing, pan/zoom, keyboard shortcuts, real-time run status overlays
  • WorkflowNodeBlock: kind-aware visual cards with status indicators & connection ports
  • WorkflowNodeEditModal: per-kind configuration (agent selector, Docker image/env, condition expressions, cron/webhook triggers)
  • WorkflowCreateModal: create new workflows with name, description, tags
  • WorkflowDashboard: monitoring panel with stats cards, run history timeline, per-node progress
  • Workflows page: unified list/canvas/dashboard views with tabs

Navigation & Routing

  • Added Workflows nav item (GitBranch icon) in sidebar
  • Routes: /workflows (list), /workflows/:id (dashboard+canvas)

Files Changed (12 new, 4 modified)

  • New: drizzle/schema.ts (4 tables), drizzle/0007_workflows.sql, server/workflows.ts, 6 React components
  • Modified: App.tsx, DashboardLayout.tsx, routers.ts, schema.ts
## New Feature: Workflow Builder & Execution Engine ### Database Schema (4 new tables) - **workflows**: pipeline definitions with status (draft/active/paused/archived), tags, canvas metadata - **workflowNodes**: agent/container/trigger/condition/output blocks with canvas positions - **workflowEdges**: directional connections between nodes (source→target) - **workflowRuns**: execution history with per-node status tracking & timing ### Backend (server/workflows.ts + 13 tRPC endpoints) - Full CRUD for workflows, nodes, edges - Atomic canvas save (nodes + edges in one mutation) - BFS graph execution engine: walks from trigger nodes, executes agents/containers in order - Single-node test execution for individual block testing - Run management: start, cancel, poll status, list history - Aggregated workflow stats (success rate, avg duration, run counts) ### Frontend — Visual Constructor - **WorkflowCanvas**: interactive drag-and-drop builder with node palette, edge drawing, pan/zoom, keyboard shortcuts, real-time run status overlays - **WorkflowNodeBlock**: kind-aware visual cards with status indicators & connection ports - **WorkflowNodeEditModal**: per-kind configuration (agent selector, Docker image/env, condition expressions, cron/webhook triggers) - **WorkflowCreateModal**: create new workflows with name, description, tags - **WorkflowDashboard**: monitoring panel with stats cards, run history timeline, per-node progress - **Workflows page**: unified list/canvas/dashboard views with tabs ### Navigation & Routing - Added Workflows nav item (GitBranch icon) in sidebar - Routes: /workflows (list), /workflows/:id (dashboard+canvas) ### Files Changed (12 new, 4 modified) - New: `drizzle/schema.ts` (4 tables), `drizzle/0007_workflows.sql`, `server/workflows.ts`, 6 React components - Modified: `App.tsx`, `DashboardLayout.tsx`, `routers.ts`, `schema.ts`
NW added 1 commit 2026-03-22 00:11:47 +00:00
## New Feature: Workflow Builder & Execution Engine

### Database Schema (4 new tables)
- workflows: pipeline definitions with status (draft/active/paused/archived), tags, canvas metadata
- workflowNodes: agent/container/trigger/condition/output blocks with canvas positions
- workflowEdges: directional connections between nodes (source→target)
- workflowRuns: execution history with per-node status tracking & timing

### Backend (server/workflows.ts + 13 tRPC endpoints in routers.ts)
- Full CRUD for workflows, nodes, edges
- Atomic canvas save (nodes + edges in one mutation)
- BFS graph execution engine: walks from trigger nodes, executes agents/containers in order
- Single-node test execution for individual block testing
- Run management: start, cancel, poll status, list history
- Aggregated workflow stats (success rate, avg duration, run counts)

### Frontend — Visual Constructor
- WorkflowCanvas: interactive drag-and-drop builder with:
  - Node palette sidebar (trigger/agent/container/condition/output types)
  - Agent list for quick drag-to-canvas agent nodes
  - Edge drawing between output→input ports with bezier curves
  - Pan/zoom controls + grid background
  - Keyboard shortcuts (Delete, Ctrl+S)
  - Real-time run status overlays (running/success/failed per node)
- WorkflowNodeBlock: kind-aware visual cards with status indicators & connection ports
- WorkflowNodeEditModal: per-kind configuration (agent selector, Docker image/env, condition expressions, cron/webhook triggers)
- WorkflowCreateModal: create new workflows with name, description, tags
- WorkflowDashboard: monitoring panel with stats cards, run history timeline, per-node progress bars
- Workflows page: unified list/canvas/dashboard views with tabs

### Navigation & Routing
- Added Workflows nav item (GitBranch icon) in sidebar between Agents and Tools
- Routes: /workflows (list), /workflows/:id (dashboard+canvas)

### Also includes
- fix(nodes): keep AddNodeDialog open after join + canJoin guard
NW added 4 commits 2026-03-25 11:06:55 +00:00
FIXES:
1. Canvas loading bug - nodes/edges now properly sync from server query
   using useEffect that tracks data lifecycle (prevDataKeyRef pattern)
2. Edge connections - mouseDown/mouseUp port interaction model ensures
   reliable edge creation between any port types
3. Multi-port nodes - orchestrator mode (agent with multiple outputs),
   aggregator mode (output with multiple inputs), configurable extra
   ports for any node kind
4. Distinct edge types - success (green), error (red dashed), loop
   (amber dashed), condition-true/false with proper arrow markers
5. Port labels always visible with color-coded dots matching edge types

NEW FEATURES:
- WorkflowNodeBlock: dynamic body height based on side port count,
  port type annotations (input/output), onPortMouseDown/onPortMouseUp
  separate callbacks for clean edge drawing
- WorkflowNodeEditModal: port configuration panel with +/- controls
  for extra inputs/outputs, aggregator toggle, orchestrator toggle
- WorkflowCanvas: edge drawing indicator, edge type legend in palette,
  proper bezier curves for backwards/loop edges, cyan arrow marker
- Workflows page: loading states for canvas/dashboard views, renders
  canvas immediately and syncs data asynchronously

SAMPLE WORKFLOWS (created via API):
- Gmail Registration (Browser Agent): 8 nodes, 9 edges - trigger,
  generate data, open signup, fill form, CAPTCHA condition, solve,
  submit, output with error handling edges
- Content Pipeline (Orchestrator): 6 nodes, 7 edges - webhook trigger,
  orchestrator with 3 outputs, 3 parallel agents, aggregator merge
- Error Handling & Retry Demo: 6 nodes, 8 edges - condition routing,
  retry loop-back, container export, error edges
- New ClusterTopology component: interactive SVG network diagram showing
  real-time cluster state from tRPC (nodes.list, nodes.services, agents.list)
- Manager nodes (crown icon) at top, overlay hub (goclaw-net) at center,
  worker nodes on sides, services attached to manager, agents along bottom arc
- Animated data-flow particles on edges (green for overlay, amber for services,
  dashed gray for agent connections)
- Pulse rings on active/running nodes
- Hover tooltips with detailed info (IP, Docker version, CPU, memory, role)
- Grid background, glow filters, color-coded legend and live stats
- Auto-refreshes every 15-30s matching dashboard refresh intervals
- Replaces static SWARM_IMG placeholder in Dashboard.tsx
- Live indicator shows 'live' pulse and uptime in card header
- chatStore.ts: Added TaskBoard data model (Task, TaskSubtask, TaskBoard types),
  CRUD methods (addTask, updateTaskStatus, addSubtask, removeTask, clearTasks),
  progress tracking (getTaskProgress), auto-retry logic on session errors,
  elapsed time tracking with interval timer, localStorage persistence

- TaskBoard.tsx: New interactive component with task list, expandable subtasks,
  priority badges (critical/high/medium/low), creator badges (user/orchestrator/agent),
  status cycling (pending->in_progress->completed), add task form with priority selector,
  progress bar with completion %, elapsed time display, auto-retry toggle

- Chat.tsx: Replaced single Console right panel with tabbed panel (Console + Tasks),
  tab badges showing task completion count, pulsing indicator for active console events,
  Tasks tab imports and renders TaskBoard component

- routers.ts: Added tasks router with CRUD endpoints (list, create, updateStatus,
  addSubtask, delete) backed by MySQL chatTasks table

- schema.ts: Added chatTasks table (taskId, sessionId, content, status, priority,
  createdBy, assignedTo, subtasks JSON, elapsedMs, retryCount, lastError, timestamps)

- Auto-retry: When session errors and tasks remain incomplete, orchestrator
  automatically retries after 3s with context about the TODO board
- Replaced <Input> with auto-growing <textarea> that expands as you type
- Supports multiline input: Enter inserts newline, Ctrl+Enter sends
- Single-line mode preserved: if no newlines yet, Enter still sends
- Expand/collapse button (Maximize2/Minimize2) toggles between 4-line
  max (collapsed) and 16-line max (expanded) views
- Markdown / Plain-text toggle: #MD (monospace font, markdown paste
  preserves formatting) vs T TXT (sans-serif, plain text)
- Smart paste in markdown mode: intercepts clipboard to preserve raw
  markdown text instead of browser's rich-text conversion
- Line counter badge (e.g. '15L MD') shown when multiline
- Ctrl hint label under send button for discoverability
- Placeholder updated: 'Введите команду или вопрос… (Ctrl+Enter отправить)'
- Textarea resets height after message is sent
- Removed unused Input import
NW added 1 commit 2026-03-31 23:11:19 +00:00
PHASE A COMPLETE: каждый агент теперь может жить в отдельном Docker Swarm контейнере как автономная единица.

- HTTP-сервер агента: GET /health, GET /info, POST /chat, POST /task, GET /tasks, GET /tasks/{id}, GET /memory
- Загружает конфиг из shared DB по AGENT_ID env var (model, systemPrompt, allowedTools)
- 4 горутины-воркера для параллельной обработки задач
- In-memory task queue (buffered channel, depth=100) + ring buffer последних 50 задач
- Callback URL: POST результата при завершении async задачи
- Sliding window памяти: загружает последние 20 сообщений из DB при каждом запросе
- Изолированные инструменты: агент получает только allowedTools из своей конфигурации
- Агент сам вызывает LLM напрямую через LLM_BASE_URL (не через Gateway)
- Graceful shutdown с таймаутом 15s

- 20 unit-тестов: все PASS
- Покрытие: инициализация, task queue, /health, /info, /task, /tasks, /memory, инструменты, lifecycle

- Multi-stage Go build: golang:1.23-alpine → alpine:3.21
- EXPOSE 8001, HEALTHCHECK на /health каждые 15s
- Агенты деплоятся динамически Swarm (не статический сервис в stack)

- Новые поля в таблице agents: serviceName, servicePort, containerImage, containerStatus
- SQL migration: drizzle/migrations/0006_agent_container_fields.sql

- AgentConfig + AgentRow: новые поля serviceName, servicePort, containerImage, containerStatus
- UpdateContainerStatus() — обновление статуса при деплое/остановке
- GetAgentHistory() — sliding window памяти агента из DB
- SaveHistory() — сохранение диалога агента в DB

- delegate_to_agent: реальный HTTP POST к контейнеру агента через overlay DNS
  - sync: POST /chat (ждёт ответ)
  - async: POST /task (возвращает task_id)
  - fallback: если агент не запущен — информативное сообщение
- SetDatabase() — инжекция DB для резолва адресов живых агентов

- Orchestrator инжектирует DB в Executor через SetDatabase() при инициализации
This pull request has changes conflicting with the target branch.
  • client/src/lib/chatStore.ts
  • client/src/pages/Chat.tsx
  • client/src/pages/Dashboard.tsx
  • docker/Dockerfile.agent-worker
  • docker/docker-compose.yml
  • drizzle/meta/_journal.json
  • drizzle/schema.ts
  • gateway/cmd/agent-worker/main.go
  • gateway/cmd/agent-worker/main_test.go
  • gateway/go.mod
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin genspark_ai_developer:genspark_ai_developer
git checkout genspark_ai_developer
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: UniqAI/GoClaw#1