fix(frontend): pass group.metadata to OutputActions and OutputItem instead of empty object

fix(frontend): use stable React keys and fix Prettier formatting
- Use node.id and node_exec_id as React keys instead of array indices - Run pnpm format to pass Prettier CI check Signed-off-by: majiayu000 <1835304752@qq.com>
2026-04-08 03:00:28 -04:00 · 2026-03-31 13:23:12 +02:00 · 2026-03-31 19:01:36 +08:00 · 2026-03-31 18:05:30 +08:00 · 2026-03-21 16:37:28 +08:00
1 changed files with 43 additions and 30 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx
@@ -39,39 +39,49 @@ export const AgentOutputs = ({ flowID }: { flowID: string | null }) => {
    return outputNodes
      .map((node) => {
        const executionResults = node.data.nodeExecutionResults || [];
-        const latestResult =
-          executionResults.length > 0
-            ? executionResults[executionResults.length - 1]
-            : undefined;
-        const outputData = latestResult?.output_data?.output;

-        const renderer = globalRegistry.getRenderer(outputData);
+        const items = executionResults
+          .filter((result) => result.output_data?.output !== undefined)
+          .map((result) => {
+            const outputData = result.output_data!.output;
+            const renderer = globalRegistry.getRenderer(outputData);
+            return {
+              nodeExecID: result.node_exec_id,
+              value: outputData,
+              renderer,
+            };
+          })
+          .filter(
+            (
+              item,
+            ): item is typeof item & {
+              renderer: NonNullable<typeof item.renderer>;
+            } => item.renderer !== null,
+          );
+
+        if (items.length === 0) return null;

        return {
+          nodeID: node.id,
          metadata: {
            name: node.data.hardcodedValues?.name || "Output",
            description:
              node.data.hardcodedValues?.description || "Output from the agent",
          },
-          value: outputData ?? "No output yet",
-          renderer,
+          items,
        };
      })
-      .filter(
-        (
-          output,
-        ): output is typeof output & {
-          renderer: NonNullable<typeof output.renderer>;
-        } => output.renderer !== null,
-      );
+      .filter((group): group is NonNullable<typeof group> => group !== null);
  }, [nodes]);

  const actionItems = useMemo(() => {
-    return outputs.map((output) => ({
-      value: output.value,
-      metadata: {},
-      renderer: output.renderer,
-    }));
+    return outputs.flatMap((group) =>
+      group.items.map((item) => ({
+        value: item.value,
+        metadata: group.metadata,
+        renderer: item.renderer,
+      })),
+    );
  }, [outputs]);

  return (
@@ -116,24 +126,27 @@ export const AgentOutputs = ({ flowID }: { flowID: string | null }) => {
          <ScrollArea className="h-full overflow-auto pr-4">
            <div className="space-y-6">
              {outputs && outputs.length > 0 ? (
-                outputs.map((output, i) => (
-                  <div key={i} className="space-y-2">
+                outputs.map((group) => (
+                  <div key={group.nodeID} className="space-y-2">
                    <div>
                      <Label className="text-base font-semibold">
-                        {output.metadata.name || "Unnamed Output"}
+                        {group.metadata.name || "Unnamed Output"}
                      </Label>
-                      {output.metadata.description && (
+                      {group.metadata.description && (
                        <Label className="mt-1 block text-sm text-gray-600">
-                          {output.metadata.description}
+                          {group.metadata.description}
                        </Label>
                      )}
                    </div>

-                    <OutputItem
-                      value={output.value}
-                      metadata={{}}
-                      renderer={output.renderer}
-                    />
+                    {group.items.map((item) => (
+                      <OutputItem
+                        key={item.nodeExecID}
+                        value={item.value}
+                        metadata={group.metadata}
+                        renderer={item.renderer}
+                      />
+                    ))}
                  </div>
                ))
              ) : (
Author	SHA1	Message	Date
Zamil Majdy	b028719fb8	fix(frontend): pass group.metadata to OutputActions and OutputItem instead of empty object	2026-03-31 13:23:12 +02:00
majiayu000	db8d33bf30	fix(frontend): use stable React keys and fix Prettier formatting - Use node.id and node_exec_id as React keys instead of array indices - Run pnpm format to pass Prettier CI check Signed-off-by: majiayu000 <1835304752@qq.com>	2026-03-31 19:01:36 +08:00
majiayu000	bb16de85f7	fix(frontend): group outputs by node to avoid repeated headers Signed-off-by: majiayu000 <1835304752@qq.com>	2026-03-31 18:05:30 +08:00
majiayu000	586b10b9e3	fix(frontend): show all agent outputs instead of only the last one Change .map() to .flatMap() over all executionResults per output node, so every output produced during a run is displayed in the Agent Outputs panel, not just the final one. Fixes #9175 Signed-off-by: majiayu000 <1835304752@qq.com>	2026-03-21 16:37:28 +08:00