feat(frontend): improve graph validation error handling and node navigation (#11779)

### Changes 🏗️

- Enhanced error handling for graph validation failures with detailed
user feedback
- Added automatic viewport navigation to the first node with errors when
validation fails
- Improved node title display to prioritize agent_name from hardcoded
values
- Removed console.log debugging statement from OutputHandler
- Added ApiError import and improved error type handling
- Reorganized imports for better code organization

### 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] Create a graph with intentional validation errors and verify error
messages display correctly
- [x] Verify the viewport automatically navigates to the first node with
errors
- [x] Check that node titles correctly display customized names or agent
names
- [x] Test error recovery by fixing validation errors and successfully
running the graph

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

@@ -1,7 +1,8 @@
 import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
 import { usePostV1ExecuteGraphAgent } from "@/app/api/__generated__/endpoints/graphs/graphs";
-import { useToast } from "@/components/molecules/Toast/use-toast";
+
 import {
+  ApiError,
   CredentialsMetaInput,
   GraphExecutionMeta,
 } from "@/lib/autogpt-server-api";
@@ -9,6 +10,9 @@ import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
 import { useMemo, useState } from "react";
 import { uiSchema } from "../../../FlowEditor/nodes/uiSchema";
 import { isCredentialFieldSchema } from "@/components/renderers/InputRenderer/custom/CredentialField/helpers";
+import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { useReactFlow } from "@xyflow/react";
 
 export const useRunInputDialog = ({
   setIsOpen,
@@ -31,6 +35,7 @@ export const useRunInputDialog = ({
     flowVersion: parseAsInteger,
   });
   const { toast } = useToast();
+  const { setViewport } = useReactFlow();
 
   const { mutateAsync: executeGraph, isPending: isExecutingGraph } =
     usePostV1ExecuteGraphAgent({
@@ -42,13 +47,63 @@ export const useRunInputDialog = ({
           });
         },
         onError: (error) => {
-          // Reset running state on error
+          if (error instanceof ApiError && error.isGraphValidationError()) {
+            const errorData = error.response?.detail;
+            Object.entries(errorData.node_errors).forEach(
+              ([nodeId, nodeErrors]) => {
+                useNodeStore
+                  .getState()
+                  .updateNodeErrors(
+                    nodeId,
+                    nodeErrors as { [key: string]: string },
+                  );
+              },
+            );
+            toast({
+              title: errorData?.message || "Graph validation failed",
+              description:
+                "Please fix the validation errors on the highlighted nodes and try again.",
+              variant: "destructive",
+            });
+            setIsOpen(false);
+
+            const firstBackendId = Object.keys(errorData.node_errors)[0];
+
+            if (firstBackendId) {
+              const firstErrorNode = useNodeStore
+                .getState()
+                .nodes.find(
+                  (n) =>
+                    n.data.metadata?.backend_id === firstBackendId ||
+                    n.id === firstBackendId,
+                );
+
+              if (firstErrorNode) {
+                setTimeout(() => {
+                  setViewport(
+                    {
+                      x:
+                        -firstErrorNode.position.x * 0.8 +
+                        window.innerWidth / 2 -
+                        150,
+                      y: -firstErrorNode.position.y * 0.8 + 50,
+                      zoom: 0.8,
+                    },
+                    { duration: 500 },
+                  );
+                }, 50);
+              }
+            }
+          } else {
+            toast({
+              title: "Error running graph",
+              description:
+                (error as Error).message || "An unexpected error occurred.",
+              variant: "destructive",
+            });
+            setIsOpen(false);
+          }
           setIsGraphRunning(false);
-          toast({
-            title: (error.detail as string) ?? "An unexpected error occurred.",
-            description: "An unexpected error occurred.",
-            variant: "destructive",
-          });
         },
       },
     });

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx

@@ -20,11 +20,13 @@ type Props = {
 
 export const NodeHeader = ({ data, nodeId }: Props) => {
   const updateNodeData = useNodeStore((state) => state.updateNodeData);
-  const title = (data.metadata?.customized_name as string) || data.title;
+  const title =
+    (data.metadata?.customized_name as string) ||
+    data.hardcodedValues.agent_name ||
+    data.title;
+
   const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const [editedTitle, setEditedTitle] = useState(
-    beautifyString(title).replace("Block", "").trim(),
-  );
+  const [editedTitle, setEditedTitle] = useState(title);
 
   const handleTitleEdit = () => {
     updateNodeData(nodeId, {