feat(frontend): implement agent outputs viewer and improve UI/UX in new builder (#11421)

This PR introduces several improvements to the new builder experience:

**1. Agent Outputs Feature** ✨
- Implemented a new `AgentOutputs` component that displays execution
outputs from OUTPUT blocks
- Added a slide-out sheet UI to view agent outputs with proper
formatting
- Integrated with existing output renderers from the library view
- Shows output block names, descriptions, and rendered values
- Added beta badge to indicate feature is still experimental

**2. UI/UX Improvements** 🎨
- Fixed graph loading spinner color from violet to neutral zinc for
better consistency
- Adjusted node shadow styling for better visual hierarchy (reduced
shadow when not selected)
- Fixed credential field button spacing to prevent layout overflow
- Improved array editor widget delete button positioning
- Added proper link handling for integration redirects (opens in new
tab)
- Fixed object editor to handle null values gracefully

**3. Performance & State Management** 🚀
- Fixed race condition in run input dialog by awaiting execution before
closing
- Added proper history initialization after graph loads
- Added `outputSchema` to graph store for tracking output blocks
- Fixed search bar to maintain query state properly
- Added automatic fit view on graph load for better initial viewport

**4. Build Actions Bar** 🔧
- Reduced padding for more compact appearance
- Enabled/disabled Agent Outputs button based on presence of output
blocks
- Removed loading icon from manual run button when not executing

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Created and executed an agent with OUTPUT blocks to verify outputs
display correctly
- [x] Tested output viewer with different data types (text, JSON,
images, etc.)
- [x] Verified credential field layouts don't overflow in constrained
spaces
  - [x] Tested array editor delete functionality and button positioning
- [x] Confirmed graph loads with proper fit view and history
initialization
  - [x] Tested run input dialog closes only after execution starts
  - [x] Verified integration links open in new tabs
  - [x] Tested object editor with null values

Author: Abhi1992002

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/BuilderActions.tsx

@@ -9,7 +9,7 @@ export const BuilderActions = memo(() => {
     flowID: parseAsString,
   });
   return (
-    <div className="absolute bottom-4 left-[50%] z-[100] flex -translate-x-1/2 items-center gap-4 rounded-full bg-white p-2 px-4 shadow-lg">
+    <div className="absolute bottom-4 left-[50%] z-[100] flex -translate-x-1/2 items-center gap-4 rounded-full bg-white p-2 px-2 shadow-lg">
       <AgentOutputs flowID={flowID} />
       <RunGraph flowID={flowID} />
       <ScheduleGraph flowID={flowID} />

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx

@@ -4,25 +4,138 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/__legacy__/ui/sheet";
 import { BuilderActionButton } from "../BuilderActionButton";
 import { BookOpenIcon } from "@phosphor-icons/react";
+import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
+import { useShallow } from "zustand/react/shallow";
+import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
+import { BlockUIType } from "@/app/(platform)/build/components/types";
+import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
+import { Label } from "@/components/__legacy__/ui/label";
+import { useMemo } from "react";
+import {
+  globalRegistry,
+  OutputItem,
+  OutputActions,
+} from "@/app/(platform)/library/agents/[id]/components/AgentRunsView/components/OutputRenderers";
 
 export const AgentOutputs = ({ flowID }: { flowID: string | null }) => {
+  const hasOutputs = useGraphStore(useShallow((state) => state.hasOutputs));
+  const nodes = useNodeStore(useShallow((state) => state.nodes));
+
+  const outputs = useMemo(() => {
+    const outputNodes = nodes.filter(
+      (node) => node.data.uiType === BlockUIType.OUTPUT,
+    );
+
+    return outputNodes
+      .map((node) => {
+        const executionResult = node.data.nodeExecutionResult;
+        const outputData = executionResult?.output_data?.output;
+
+        const renderer = globalRegistry.getRenderer(outputData);
+
+        return {
+          metadata: {
+            name: node.data.hardcodedValues?.name || "Output",
+            description:
+              node.data.hardcodedValues?.description || "Output from the agent",
+          },
+          value: outputData ?? "No output yet",
+          renderer,
+        };
+      })
+      .filter(
+        (
+          output,
+        ): output is typeof output & {
+          renderer: NonNullable<typeof output.renderer>;
+        } => output.renderer !== null,
+      );
+  }, [nodes]);
+
+  const actionItems = useMemo(() => {
+    return outputs.map((output) => ({
+      value: output.value,
+      metadata: {},
+      renderer: output.renderer,
+    }));
+  }, [outputs]);
+
   return (
-    <>
+    <Sheet>
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            {/* Todo: Implement Agent Outputs */}
-            <BuilderActionButton disabled={!flowID}>
-              <BookOpenIcon className="size-6" />
-            </BuilderActionButton>
+            <SheetTrigger asChild>
+              <BuilderActionButton disabled={!flowID || !hasOutputs()}>
+                <BookOpenIcon className="size-6" />
+              </BuilderActionButton>
+            </SheetTrigger>
           </TooltipTrigger>
           <TooltipContent>
             <p>Agent Outputs</p>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
-    </>
+      <SheetContent className="flex h-full w-full flex-col overflow-hidden sm:max-w-[600px]">
+        <SheetHeader className="px-2 py-2">
+          <div className="flex items-center justify-between">
+            <div>
+              <SheetTitle className="text-xl">Run Outputs</SheetTitle>
+              <SheetDescription className="mt-1 text-sm text-muted-foreground">
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="rounded-md bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+                    Beta
+                  </span>
+                  <span>This feature is in beta and may contain bugs</span>
+                </span>
+              </SheetDescription>
+            </div>
+            {outputs.length > 0 && <OutputActions items={actionItems} />}
+          </div>
+        </SheetHeader>
+        <div className="flex-grow overflow-y-auto px-2 py-2">
+          <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">
+                    <div>
+                      <Label className="text-base font-semibold">
+                        {output.metadata.name || "Unnamed Output"}
+                      </Label>
+                      {output.metadata.description && (
+                        <Label className="mt-1 block text-sm text-gray-600">
+                          {output.metadata.description}
+                        </Label>
+                      )}
+                    </div>
+
+                    <OutputItem
+                      value={output.value}
+                      metadata={{}}
+                      renderer={output.renderer}
+                    />
+                  </div>
+                ))
+              ) : (
+                <div className="flex h-full items-center justify-center text-gray-500">
+                  <p>No output blocks available.</p>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+      </SheetContent>
+    </Sheet>
   );
 };

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx

@@ -105,7 +105,9 @@ export const RunInputDialog = ({
                   onClick={handleManualRun}
                   loading={isExecutingGraph}
                 >
-                  <PlayIcon className="size-5 transition-transform group-hover:scale-110" />
+                  {!isExecutingGraph && (
+                    <PlayIcon className="size-5 transition-transform group-hover:scale-110" />
+                  )}
                   <span className="font-semibold">Manual Run</span>
                 </Button>
               )}

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts

@@ -78,13 +78,13 @@ export const useRunInputDialog = ({
     return dynamicUiSchema;
   }, [credentialsSchema]);
 
-  const handleManualRun = () => {
-    setIsOpen(false);
-    executeGraph({
+  const handleManualRun = async () => {
+    await executeGraph({
       graphId: flowID ?? "",
       graphVersion: flowVersion || null,
       data: { inputs: inputValues, credentials_inputs: credentialValues },
     });
+    setIsOpen(false);
   };
 
   const handleInputChange = (inputValues: Record<string, any>) => {