Migrate to ReactFlow-based Agent Workflow Visualization

[Nkovaturient]

Description

• addresses design: agent graph generation. #34
• migrates Agent Workflow visualization system from static d3-based HTML to an interactive ReactFlow workflow.

---

What Changed

1. Frontend: ReactFlow Visualization (agent_ui/)

• New interactive React application built with Vite + TypeScript
• Dynamic graph rendering using ReactFlow library
• Dagre layout algorithm for automatic node positioning
• Features:
  • Search functionality to locate nodes
  • Interactive node/edge details panel
  • Zoom, pan, and drag capabilities
  • MiniMap for navigation
  • Dark/Light theme toggle

2. Backend: Python Integration (visualizer.py)

• Replaced d3 template system with React build deployment
• Dynamic JSON injection via window.AGENT_GRAPH_DATA
• HTTP server integration to resolve CORS restrictions [Serves on localhost:8765]
• Maintains same CLI interface (agent-wiz visualize --input <file> --open)

3. Build Configuration

• Vite config updated with base: './' for relative paths
• Package manifest (pyproject.toml) includes React dist files
• Graph loader supports runtime injection with fallback to static import

---

Key Integrations

1. ReactFlow Integration

Interactive Graph: Drag, zoom, pan, and search capabilities

• Custom Nodes: Material-UI styled nodes with icons and metadata
• Event Handlers: Click interactions open details panel
• Built-in Components: MiniMap, Controls, Background grid
• Performance: Smooth rendering for 10-100+ node graphs

2. Dagre Layout Algorithm

• Automatic hierarchical layout
• Minimizes edge crossings
• Optimized spacing for agent graphs

---

✅ Testing Instructions

Prerequisites

# Ensure virtual environment is active
cd Agent-Wiz/
python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate

# Install in editable mode
pip install -e .

Build React App

cd src/repello_agent_wiz/visualizers/agent_ui
npm install
npm run build
cd ../../../../

Test Visualization

# Test with AgentChat framework
agent-wiz visualize --input agentchat_graph.json --open

# Test with other frameworks
agent-wiz visualize --input examples/output/crewai_graph.json --open
agent-wiz visualize --input examples/output/langgraph_graph.json --open

# Expected output:
# [✓] Visualization HTML generated at: {framework}_vis/index.html
# [✓] localhost started at http://localhost:8765/index.html
# [i] Press Ctrl+C to exit
# (Browser opens automatically)

Verify Features

• ✅ Graph renders with proper layout
• ✅ All nodes and edges visible

---

🔧 Technical Details

1. HTTP Server (CORS Resolution)

• Problem: Modern browsers block ES modules via file:// protocol
• Solution: Serve files via http://localhost:8765
• Result: No CORS errors, proper module loading

Solution Implemented:

• Python HTTP server serves files on http://localhost:8765
• Background daemon thread keeps server running
• Auto-opens browser to localhost URL

---

Benefits

Aspect	Before (d3)	After (ReactFlow)
Interaction	Static SVG	Drag, zoom, pan, search
Layout	Manual positioning	Automatic (Dagre)
UI Components	Vanilla HTML/CSS	Material-UI
Data Loading	Template replacement	Dynamic injection
Browser Compatibility	Works with file://	Requires HTTP (handled)
Maintainability	Single HTML file	Modular React components
Extensibility	Hard to extend	Easy to add features

---

Checklist

• Code follows project style guidelines
• Backward compatible with existing CLI
• Documentation updated
• No breaking changes

---

Demo Video

reactflow-agent-viz.1.1.1.mov

[Aaditya-G]

@Nkovaturient please remove this file from the PR

[Aaditya-G]

@Nkovaturient can we add drag functionality, and allow the arrows to be curved, and have a little less overlap?

[Aaditya-G]

kindly address the issues.

[Nkovaturient]

can we add drag functionality, and allow the arrows to be curved, and have a little less overlap?

sure, on it.