feat(builder): Turn block border red on error (#7910)

* Turn block border red on error

* prettier

rnd/autogpt_builder/src/components/CustomNode.tsx

@@ -320,9 +320,60 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
     });
   }, [id, data, height, addNodes, deleteElements, getNode, getNextNodeId]);
 
+  const hasConfigErrors =
+    data.errors &&
+    Object.entries(data.errors).some(([_, value]) => value !== null);
+  const outputData = data.output_data;
+  const hasOutputError =
+    typeof outputData === "object" &&
+    outputData !== null &&
+    "error" in outputData;
+
+  useEffect(() => {
+    if (hasConfigErrors) {
+      const filteredErrors = Object.fromEntries(
+        Object.entries(data.errors || {}).filter(
+          ([_, value]) => value !== null,
+        ),
+      );
+      console.error(
+        "Block configuration errors for",
+        data.title,
+        ":",
+        filteredErrors,
+      );
+    }
+    if (hasOutputError) {
+      console.error(
+        "Block output contains error for",
+        data.title,
+        ":",
+        outputData.error,
+      );
+    }
+  }, [hasConfigErrors, hasOutputError, data.errors, outputData, data.title]);
+
+  const blockClasses = [
+    "custom-node",
+    "dark-theme",
+    "rounded-xl",
+    "border",
+    "bg-white/[.9]",
+    "shadow-md",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const errorClass =
+    hasConfigErrors || hasOutputError ? "border-red-500 border-2" : "";
+  const statusClass =
+    hasConfigErrors || hasOutputError
+      ? "failed"
+      : (data.status?.toLowerCase() ?? "");
+
   return (
     <div
-      className={`custom-node dark-theme rounded-xl border bg-white/[.9] shadow-md ${data.status?.toLowerCase() ?? ""}`}
+      className={`${blockClasses} ${errorClass} ${statusClass}`}
       onMouseEnter={handleHovered}
       onMouseLeave={handleMouseLeave}
       data-id={`custom-node-${id}`}