Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/components/monitor/FlowRunInfo.tsx (TypeScript)

Code before:
import moment from "moment/moment";
import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
import RunnerOutputUI, { BlockOutput } from "../runner-ui/RunnerOutputUI";

export const FlowRunInfo: React.FC<
  React.HTMLAttributes<HTMLDivElement> & {
    flow: GraphMeta;
    flowRun: FlowRun;
  }
> = ({ flow, flowRun, ...props }) => {
  const [isOutputOpen, setIsOutputOpen] = useState(false);
  const [graph, setGraph] = useState<Graph | null>(null);
  const [executionResults, setExecutionResults] = useState<
    NodeExecutionResult[] | null
  >(null);
  const [blockOutputs, setBlockOutputs] = useState<BlockOutput[]>([]);
  const api = useMemo(() => new AutoGPTServerAPI(), []);

  // Fetch graph and execution data
  useEffect(() => {
    api.getGraph(flow.id, flow.version).then((graph) => {
      setGraph(graph);
    });
    api.getGraphExecutionInfo(flow.id, flowRun.id).then((executions) => {
      setExecutionResults(executions);
    });
  }, [api]);

  useEffect(() => {
    if (!graph || !executionResults) {
      return;
    }

    // Filter nodes to only get output blocks
    const outputNodes = graph.nodes.filter(
      (node) => node.block_id === "363ae599-353e-4804-937e-b2ee3cef3da4",
    );

    // Create a map of the latest COMPLETED execution results by node_id
    const latestCompletedResults = executionResults
      .filter((result) => result.status === "COMPLETED")
      .reduce((acc, result) => {
        const existing = acc.get(result.node_id);

        // Compare dates if there's an existing result
        if (existing) {
          const existingDate = existing.end_time || existing.add_time;
          const currentDate = result.end_time || result.add_time;

          if (currentDate > existingDate) {
            acc.set(result.node_id, result);

Review comment (suggestion):
I had to get executions info because `flowRun.nodeExecutionResults` is always `undefined`

Code after:
import { ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
import moment from "moment/moment";
import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
import RunnerOutputUI, { BlockOutput } from "../runner-ui/RunnerOutputUI";

export const FlowRunInfo: React.FC<
  React.HTMLAttributes<HTMLDivElement> & {
    flow: GraphMeta;
    flowRun: FlowRun;
  }
> = ({ flow, flowRun, ...props }) => {
  const [isOutputOpen, setIsOutputOpen] = useState(false);
  const [blockOutputs, setBlockOutputs] = useState<BlockOutput[]>([]);
  const api = useMemo(() => new AutoGPTServerAPI(), []);

  const fetchBlockResults = useCallback(async () => {
    const executionResults = await api.getGraphExecutionInfo(
      flow.id,
      flowRun.id,
    );

    // Create a map of the latest COMPLETED execution results of output nodes by node_id
    const latestCompletedResults = executionResults
      .filter(
        (result) =>
          result.status === "COMPLETED" &&
          result.block_id === SpecialBlockID.OUTPUT,
      )
      .reduce((acc, result) => {
        const existing = acc.get(result.node_id);

        // Compare dates if there's an existing result
        if (existing) {
          const existingDate = existing.end_time || existing.add_time;
          const currentDate = result.end_time || result.add_time;

          if (currentDate > existingDate) {
            acc.set(result.node_id, result);
          }
        } else {
          acc.set(result.node_id, result);
        }

        return acc;
      }, new Map<string, NodeExecutionResult>());

    // Transform results to BlockOutput format
    setBlockOutputs(
      Array.from(latestCompletedResults.values()).map((result) => ({
        id: result.node_id,
        type: "output" as const,