A0 visual flows

[TerminallyLazy]

Summary

Adds a visual agent orchestration layer to Agent Zero using React Flow, enabling users to build, save, and execute multi-agent workflows through a drag-and-drop canvas. Agents can run in parallel, with conditional routing and real-time
progress visibility.

• Full React Flow canvas modal with 5 node types (Input, Agent, Parallel Group, Condition, Output)
• Flow execution engine with topological graph walking, parallel branches, and condition evaluation
• Real-time per-node progress tracking showing current tool/activity and elapsed time
• Flow persistence API (save/load/delete to usr/flows/)
• 4 built-in templates: Parallel Orchestration, Sequential Pipeline, Deep Research, Agent Swarm
• Flow group accordion in the sidebar chat list for organizing flow-spawned contexts
• Animated edge states and node status indicators during execution

Architecture

Backend (Python)

File	Purpose
python/helpers/flow_engine.py	Core engine — FlowRun state tracker, FlowEngine graph walker with Kahn's algorithm, parallel branch execution via asyncio.gather, condition evaluation, real-time progress via AgentContext log
introspection
python/api/flow_execute.py	Start flow on background thread via DeferredTask
python/api/flow_status.py	Poll node states, outputs, and live progress
python/api/flow_stop.py	Cancel running flow
python/api/flow_save.py / flow_load.py / flow_list.py / flow_delete.py	Flow CRUD to usr/flows/
python/api/flow_template_list.py	List built-in templates from flow_templates/
python/api/flow_result.py	Send flow output to active chat context
python/api/flow_group_remove.py	Remove all contexts from a flow run group

Frontend (Alpine.js + React)

File	Purpose
orchestrator.html	Modal shell — flow list, template browser, canvas container, node inspector, output panel, full CSS
orchestrator-store.js	Alpine store — flow CRUD, execution polling, React bridge dispatch
orchestrator-bridge.js	Bidirectional custom DOM events between Alpine and React
react/OrchestrationCanvas.js	React Flow canvas — 5 custom node components, drag-and-drop palette, connection validation with cycle detection, live status/progress rendering
chats-store.js	Flow group partitioning, accordion toggle with immutable state updates
chats-list.html	Flow group accordion UI with x-if for reliable Alpine reactivity

Templates (flow_templates/)

Template	Description
parallel-orchestration.json	3 agents (analytical, creative, practical) → summarize merge
sequential-pipeline.json	Linear chain: researcher → analyst → writer
deep-research.json	3 parallel researchers → synthesizer → quality gate → optional revision
agent-swarm.json	5 specialists (planner, researcher, critic, creative, technical) → orchestrator

Key Design Decisions

Explicit parallel branches: Parallel group nodes declare a branches array listing which successors run concurrently. Non-branch successors (e.g., synthesizers) wait for the merged output. This prevents the graph walker from
incorrectly running downstream consumers as parallel branches.

Real-time progress via log introspection: Rather than adding a new progress reporting mechanism, the engine queries each running node's AgentContext.log for the latest log entry — extracting tool name, heading text, and elapsed
time. This piggybacks on the existing agent logging infrastructure with zero changes to the agent core.

React Flow without a build step: The canvas uses htm (tagged template literals) + dynamic ESM imports from esm.sh CDN, avoiding any build tooling. React and Alpine communicate through custom DOM events on #react-flow-root.

x-if over x-show for accordion: Alpine's x-show inside x-for iterations can fail to toggle visibility when the iterated object is replaced via immutable updates. Using x-if (which adds/removes DOM) is more reliable for
accordion patterns.