Implementation:FlowiseAI Flowise AgentExecutedDataCard
| Knowledge Sources | |
|---|---|
| Domains | Agent Execution, Chat Messages |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
AgentExecutedDataCard is a memoized React component that renders a hierarchical tree visualization of an agentflow execution, displaying each node's status, icon, and detailed execution data.
Description
This component transforms a flat list of execution nodes into a nested tree structure using the buildTreeData function, which handles parent-child relationships, iteration grouping (with virtual iteration container nodes), and credential ID sanitization. The tree is rendered using MUI's RichTreeView with custom-styled tree items (CustomTreeItem) that display node-specific icons from AGENTFLOW_ICONS, status indicators (FINISHED, ERROR, INPROGRESS, STOPPED, TERMINATED), and expand/collapse controls. Each node label includes a detail button that opens a dialog with NodeExecutionDetails. The component wraps everything in an Accordion with a "Process Flow" header and an overall execution status icon.
Usage
Use this component within chat message views or agent execution monitoring interfaces to visualize the step-by-step execution trace of an agentflow, including iteration loops and node-level data inspection.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/chatmessage/AgentExecutedDataCard.jsx
- Lines: 1-711
Signature
const AgentExecutedDataCard = ({ status, execution, agentflowId, sessionId }) => {
// ...
}
export default memo(AgentExecutedDataCard)
Import
import AgentExecutedDataCard from '@/views/chatmessage/AgentExecutedDataCard'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| status | string | No | Overall execution status override (FINISHED, ERROR, INPROGRESS, STOPPED, TERMINATED) |
| execution | array | Yes | Array of execution node objects with nodeId, nodeLabel, data, previousNodeIds, and status |
| agentflowId | string | No | The ID of the agentflow being executed, passed to NodeExecutionDetails |
| sessionId | string | No | The session ID for the execution, passed to NodeExecutionDetails |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered component | JSX.Element | An Accordion containing a RichTreeView of the execution trace with expandable nodes and detail dialogs |
Usage Examples
Basic Usage
<AgentExecutedDataCard
status="FINISHED"
execution={executionNodeArray}
agentflowId="flow_abc123"
sessionId="session_xyz789"
/>