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

Code before:
    // 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);
          }
        } else {
          acc.set(result.node_id, result);
        }

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

    // Transform output nodes to BlockOutput format
    setBlockOutputs(
      outputNodes.map((node) => ({
        id: node.id,
        outputSchema: {} as BlockIORootSchema,
        hardcodedValues: {
          name:
            latestCompletedResults.get(node.id)?.input_data.name || "Output",
          description:
            latestCompletedResults.get(node.id)?.input_data.description ||
            "Output from the agent",
        },
        result: latestCompletedResults.get(node.id)?.output_data || undefined,
      })),
    );
  }, [graph, executionResults]);

  if (flowRun.graphID != flow.id) {
    throw new Error(
      `FlowRunInfo can't be used with non-matching flowRun.flowID and flow.id`,
    );
  }

  const handleStopRun = useCallback(() => {
    api.stopGraphExecution(flow.id, flowRun.id);
  }, [flow.id, flowRun.id]);

  return (
    <>
      <Card {...props}>

Review comment (suggestion):
`outputSchema` isn't used in `RunnerOutputUI` so leaving it empty here. All Blocks metadata would have to be fetched otherwise.

Code after:
          }
        } 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,
        hardcodedValues: {
          name: result.input_data.name || "Output",
          description: result.input_data.description || "Output from the agent",
          value: result.input_data.value,
        },
        // Change this line to extract the array directly
        result: result.output_data?.output || undefined,
      })),
    );
  }, [api, flow.id, flow.version, flowRun.id]);

  // Fetch graph and execution data
  useEffect(() => {
    if (!isOutputOpen || blockOutputs.length > 0) {
      return;
    }

    fetchBlockResults();
  }, [isOutputOpen, blockOutputs]);

  if (flowRun.graphID != flow.id) {
    throw new Error(
      `FlowRunInfo can't be used with non-matching flowRun.flowID and flow.id`,
    );
  }

  const handleStopRun = useCallback(() => {
    api.stopGraphExecution(flow.id, flowRun.id);
  }, [flow.id, flowRun.id]);

  return (
    <>
      <Card {...props}>
        <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
          <div>
            <CardTitle>
              {flow.name} <span className="font-light">v{flow.version}</span>
            </CardTitle>