Skip to content

AgentExecutionDetails¶

AgentExecutionDetails renders the results of each execution step as expandable sections. Each step shows a status indicator, execution duration, and the step result or error. The component is used inside AgentChat and can be used standalone in custom layouts.

Import¶

import { AgentExecutionDetails } from "@modernpath/agent-ui-react";

Props¶

Name	Type	Required	Default	Description
`data`	`any`	Yes	--	Execution details object. Expected to contain a `steps` array where each step has `title`, `status`, `durationMs`, and optionally `result` and `error` fields.

Expected Data Shape¶

interface ExecutionDetailsData {
  steps: Array<{
    /** Display title of the step */
    title: string;
    /** Execution status */
    status: "pending" | "running" | "completed" | "failed" | "skipped";
    /** Duration in milliseconds */
    durationMs?: number;
    /** Step result (any JSON-serializable value) */
    result?: unknown;
    /** Error message if the step failed */
    error?: string;
  }>;
}

Features¶

Status Indicators¶

Each step displays a colored status badge:

Status	Color	Description
`pending`	Gray	Step has not started
`running`	Blue	Step is currently executing
`completed`	Green	Step finished successfully
`failed`	Red	Step encountered an error
`skipped`	Yellow	Step was skipped

Timing Display¶

When durationMs is present, the component shows the execution time formatted as milliseconds or seconds (e.g., 1.2s or 450ms).

Expandable Results¶

Each step is rendered as a collapsible section. Clicking the step header expands it to reveal:

The step result rendered as formatted JSON
The step error message (if status is "failed")

Empty State¶

If data is null, undefined, or contains no steps, the component renders nothing.

Usage¶

Basic Execution Details¶

import { AgentExecutionDetails } from "@modernpath/agent-ui-react";

const executionData = {
  steps: [
    {
      title: "Retrieve knowledge base documents",
      status: "completed",
      durationMs: 1200,
      result: { documentsFound: 3, topScore: 0.92 },
    },
    {
      title: "Call telemetry API",
      status: "completed",
      durationMs: 3400,
      result: { dataPoints: 288, avgTemp: 21.5 },
    },
    {
      title: "Generate recommendation",
      status: "completed",
      durationMs: 2100,
      result: { recommendation: "Adjust setpoint to 22C" },
    },
  ],
};

function ExecutionView() {
  return <AgentExecutionDetails data={executionData} />;
}

With Failed Steps¶

const executionWithError = {
  steps: [
    {
      title: "Fetch sensor data",
      status: "completed",
      durationMs: 800,
      result: { sensors: 12 },
    },
    {
      title: "Run anomaly detection",
      status: "failed",
      durationMs: 5000,
      error: "Timeout: anomaly detection service did not respond within 5s",
    },
    {
      title: "Generate report",
      status: "skipped",
    },
  ],
};

function FailedExecution() {
  return <AgentExecutionDetails data={executionWithError} />;
}

Alongside Plan Steps¶

import {
  AgentPlanSteps,
  AgentExecutionDetails,
} from "@modernpath/agent-ui-react";

function FullExecutionView({ response }: { response: any }) {
  return (
    <div>
      <h3>Plan</h3>
      <AgentPlanSteps plan={response.plan} />

      <h3>Execution</h3>
      <AgentExecutionDetails data={response.executionDetails} />

      <h3>Answer</h3>
      <p>{response.answer}</p>
    </div>
  );
}

AgentPlanSteps -- companion component for plan visualization
AgentChat -- uses AgentExecutionDetails internally when showExecutionDetails is true
TraceTimeline -- more detailed span-level execution view