design: agent graph generation.

[buildr-daemon]

The current visualize command in agent-viz provides a basic interface to view agent interactions. Explore the React Flow library (or any other suitable library) to design a more interactive and intuitive visualization for agents.

Tasks: • Propose a new design for the visualization interface. • Create a clear plan of action for implementation. • (Optional) Open sub-issues for any additional design or UX improvements identified during exploration.

Goal: Enhance the overall clarity, usability, and interactivity of the agent visualization experience.

[Nkovaturient]

Hey there @repello-daemon , I would like to discuss further and take up this issue. kindly assign it to me under hacktoberfest'25

[Nkovaturient]

Hello @repello-daemon , Thank you for assigning the issue to me. Before proceeding with concrete changes, I would like to present and discuss on the Agent-Wiz Visualization Enhancement Proposal. Kindly guide me ahead:

Proposed Tech Stack

• React Flow - Material UI (MUI) - React

Implementation Roadmap

Phase 1: Foundation

• Scaffolding a new React app in src/repello_agent_wiz/visualizers/reactflow_ui/

npm install react-flow-renderer @mui/material @emotion/react @emotion/styled

Phase 2: Core Graph Integration

• Adapt agent graph JSON output for React Flow (nodes, edges).
• Build custom node and edge components for each agent/tool type.

Phase 3: Material UI Integration

• Replace basic HTML controls with MUI components (buttons, legend, dialogs).
• Implement MUI Drawer/Side Panel for node/edge details.
• Add MUI Search/Filter bar and responsive layout.

Phase 4: Advanced Features

• Integrate theme toggling (light/dark mode).
• Implement export/share dialog.

Layout

src/repello_agent_wiz/visualizers/agent_ui/  (or under AgentChat_vis/?)
│
├── App.jsx / App.tsx           # Main React Flow app
├── components/
│   ├── AgentNode.jsx           # Custom node for agents
│   ├── ToolNode.jsx            # Custom node for tools
│   ├── Edge.jsx                # Custom edge rendering
│   ├── Legend.jsx              # MUI legend component
│   ├── ControlPanel.jsx        # MUI controls (reset, spread, export)
│   ├── DetailsDrawer.jsx       # MUI Drawer for node/edge details
│   └── SearchBar.jsx           # MUI search/filter bar
├── assets/                     # SVGs, icons, backgrounds
├── theme.js                    # MUI theme configuration
└── README.md                   # Documentation

Ques

1. Is the folder structure for agent graph desig apt to begin working in?-- src/repello_agent_wiz/visualizers/agent_ui/ (or under AgentChat_vis/?)

[buildr-daemon]

Hi, please try to avoid ai-generated text a lot , it makes review difficult , no one is going to read the above , keep it simple concise and maintainer friendly , also before proceeding , please propose a design.

[Nkovaturient]

Hi, will keep tht in mind. also, here is my to-the-point proposed design. Seeking your guidance and feedback.

Redesigning Agent graph Generation

• Leverage React Flow for interactive graph rendering and Material UI (MUI) for a modern, accessible user interface.

Design Highlights:

Graph View:

• Agents, tools, and orchestrators as draggable, clickable nodes.
• Colored edges show relationships (agent-to-tool, etc.).
• Zoom, pan, and minimap for easy navigation.

Details & Controls:

• Click a node/edge to open a Material UI side panel with rich details.
• Search bar for quick node/edge lookup.
• Legend and control buttons styled with Material UI (reset, export, theme toggle).

User Experience:

• Responsive layout for all devices, Light/dark theme support.

[buildr-daemon]

cool , this one is better, I am talking more about visual design , how the ui will look after your changes, you could code it out and give a screenshot or a figma design so our team could review it, try to leverage the features of react-flow.

[buildr-daemon]

also it's okay to put your comments in natural language , it's easier to understand.

[Nkovaturient]

cool , this one is better, I am talking more about visual design , how the ui will look after your changes, you could code it out and give a screenshot or a figma design so our team could review it, try to leverage the features of react-flow.

sure, figma ui prototype on its way!

[Nkovaturient]

Hey, designed this prototype ui, so does this look upto the mark? open to additional improvements and changes:-

https://github.com/user-attachments/assets/c1b96119-03cc-4742-a95b-2fca73b2e1c6

[buildr-daemon]

@Nkovaturient this a good start , few things , -> on search let every node be visible and then highlight the searched node or zooming on to the node , -> also let's use icons to distinguish agent, tool , orchestrator , you can find them in the /templates/assets , -> ensure no overflow , -> this looks very basic right now we want it to look more like a system diagram rather than a flow chart , attaching an image for you to take reference , -> also we have some accent colors, try to keep the colors similar to https://repello.ai/ colors -> also raise a pr so we can review it on our system

[Nkovaturient]

hey @repello-daemon i have raised a PR following your feedback and design roadmaps. kindly review it and lmk if further changes are needed. thank you for your patience.