fix(builder): show colors for all statuses (#7625)

rnd/autogpt_builder/src/components/CustomNode.tsx

@@ -137,7 +137,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
   };
 
   return (
-    <div className={`custom-node dark-theme ${data.status === 'RUNNING' ? 'running' : data.status === 'COMPLETED' ? 'completed' : data.status === 'FAILED' ? 'failed' : ''}`}>
+    <div className={`custom-node dark-theme ${data.status?.toLowerCase() ?? ''}`}>
       <div className="mb-2">
         <div className="text-lg font-bold">{beautifyString(data.blockType?.replace(/Block$/, '') || data.title)}</div>
       </div>

rnd/autogpt_builder/src/components/customnode.css

@@ -175,6 +175,14 @@
   border-color: #c0392b; /* Red border for failed nodes */
 }
 
+.incomplete {
+  border-color: #9f14ab; /* Pink border for incomplete nodes */
+}
+
+.queued {
+  border-color: #25e6e6; /* Cyanic border for failed nodes */
+}
+
 .custom-switch {
   padding-left: 2px;
 }