various Validation Block buffs (#3919)

skyvern-frontend/src/routes/workflows/editor/nodes/components/MicroDropdown.tsx

@@ -61,7 +61,7 @@ function MicroDropdown({ selections, selected, onChange }: Props) {
     <div ref={dropdownRef} className="relative inline-block">
       <div className="flex items-center gap-1">
         <div
-          className="relative inline-flex p-0 text-xs text-slate-400"
+          className="relative inline-flex p-0 text-xs text-[#00d2ff]"
           onClick={() => {
             if (!isOpen && dropdownRef.current) {
               const rect = dropdownRef.current.getBoundingClientRect();

skyvern-frontend/src/routes/workflows/editor/nodes/components/NodeHeader.tsx

@@ -6,6 +6,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { getClient } from "@/api/AxiosClient";
 import { ProxyLocation, Status } from "@/api/types";
+import { NoticeMe } from "@/components/NoticeMe";
 import { StatusBadge } from "@/components/StatusBadge";
 import { toast } from "@/components/ui/use-toast";
 import { useLogging } from "@/hooks/useLogging";
@@ -531,24 +532,26 @@ function NodeHeader({
                 <span className="text-xs text-slate-400">
                   {transmutations.blockTitle}
                 </span>
-                <MicroDropdown
-                  selections={[
-                    transmutations.self,
-                    ...transmutations.others.map((t) => t.label),
-                  ]}
-                  selected={transmutations.self}
-                  onChange={(label) => {
-                    const transmutation = transmutations.others.find(
-                      (t) => t.label === label,
-                    );
+                <NoticeMe trigger="viewport">
+                  <MicroDropdown
+                    selections={[
+                      transmutations.self,
+                      ...transmutations.others.map((t) => t.label),
+                    ]}
+                    selected={transmutations.self}
+                    onChange={(label) => {
+                      const transmutation = transmutations.others.find(
+                        (t) => t.label === label,
+                      );
 
-                    if (!transmutation) {
-                      return;
-                    }
+                      if (!transmutation) {
+                        return;
+                      }
 
-                    transmuteNodeCallback(nodeId, transmutation.nodeName);
-                  }}
-                />
+                      transmuteNodeCallback(nodeId, transmutation.nodeName);
+                    }}
+                  />
+                </NoticeMe>
               </div>
             ) : (
               <span className="text-xs text-slate-400">{blockTitle}</span>

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx

@@ -84,8 +84,8 @@ const nodeLibraryItems: Array<{
         className="size-6"
       />
     ),
-    title: "Validation Block",
-    description: "Validate completion criteria",
+    title: "AI or Human Validation",
+    description: "Have an AI or Human validate the state of the screen",
   },
   /**
    * The Human Interaction block can be had via a transmutation of the