Refine builder canvas actions

Author: gaursagar21

pkg/validation/validation.go

@@ -137,12 +137,12 @@ func (v *Validator) Validate(ctx context.Context, def *enginev1.WorkflowDefiniti
 			if !has {
 				if !field.Optional {
 					addErr(stepID, "input_bindings."+inName, "missing_required_input",
-						fmt.Sprintf("step %q: action input %q is required but has no binding — connect a value or provide a constant", stepID, inName))
+						"required input is not connected — connect a value or provide a constant")
 				}
 				continue
 			}
 
-			srcType, srcDesc := v.bindingType(stepID, inName, b, inputTypes, actionShapes, stepsByID, addEdge, addErr)
+			srcType, _ := v.bindingType(stepID, inName, b, inputTypes, actionShapes, stepsByID, addEdge, addErr)
 			if srcType == "" {
 				continue
 			}
@@ -156,7 +156,7 @@ func (v *Validator) Validate(ctx context.Context, def *enginev1.WorkflowDefiniti
 
 			if !enumStringCompatible && !types.CompatibleWithSystem(expType, srcType, v.Types) {
 				addErr(stepID, "input_bindings."+inName, "binding_type_mismatch",
-					fmt.Sprintf("input %q expects type %q but is bound to %s which has type %q", inName, expType, srcDesc, srcType))
+					fmt.Sprintf("type mismatch: expected %q, got %q", expType, srcType))
 			}
 		}
 
@@ -166,7 +166,7 @@ func (v *Validator) Validate(ctx context.Context, def *enginev1.WorkflowDefiniti
 			for inName := range st.GetInputBindings() {
 				if _, ok := shape.Inputs[inName]; !ok {
 					addErr(stepID, "input_bindings."+inName, "unknown_action_input",
-						fmt.Sprintf("step %q: action %q has no input named %q — check for typos", stepID, st.GetActionRef(), inName))
+						"not a recognized input for this action — check for typos")
 				}
 			}
 		}
@@ -236,14 +236,14 @@ func (v *Validator) Validate(ctx context.Context, def *enginev1.WorkflowDefiniti
 			wout := outputByName[p.GetWorkflowOutputName()]
 			if wout == nil {
 				addErr(stepID, path+".workflow_output_name", "unknown_workflow_output",
-					fmt.Sprintf("step %q produces into workflow output %q which is not declared — add it to workflow_outputs or fix the name", stepID, p.GetWorkflowOutputName()))
+					"produces into a workflow output that is not declared — add it to workflow_outputs or fix the name")
 				continue
 			}
 
 			outField, ok := shape.Outputs[p.GetStepOutputName()]
 			if !ok {
 				addErr(stepID, path+".step_output_name", "unknown_step_output",
-					fmt.Sprintf("step %q has no output named %q — check step_output_name in produces", stepID, p.GetStepOutputName()))
+					"produces from a step output that doesn't exist — check step_output_name")
 				continue
 			}
 
@@ -433,7 +433,7 @@ func (v *Validator) bindingType(
 		t, ok := inputTypes[name]
 		if !ok {
 			addErr(stepID, "input_bindings."+inputName, "unknown_workflow_input",
-				fmt.Sprintf("input %q is bound to workflow input %q which does not exist — check the workflow's declared inputs", inputName, name))
+				"bound to a workflow input that doesn't exist — check the workflow's declared inputs")
 			return "", ""
 		}
 		return t, "workflow_input." + name
@@ -447,19 +447,19 @@ func (v *Validator) bindingType(
 		srcStep := stepsByID[ref.GetStepId()]
 		if srcStep == nil {
 			addErr(stepID, "input_bindings."+inputName, "unknown_step",
-				fmt.Sprintf("input %q is bound to step %q which does not exist — check the step_id", inputName, ref.GetStepId()))
+				"bound to a step that doesn't exist")
 			return "", ""
 		}
 		srcShape, ok := actionShapes[ref.GetStepId()]
 		if !ok {
 			addErr(stepID, "input_bindings."+inputName, "unknown_action_ref",
-				fmt.Sprintf("cannot type-check binding: step %q has an unknown action", ref.GetStepId()))
+				"source step has an unknown action — cannot type-check this binding")
 			return "", ""
 		}
 		out, ok := srcShape.Outputs[ref.GetOutputName()]
 		if !ok {
 			addErr(stepID, "input_bindings."+inputName, "unknown_step_output",
-				fmt.Sprintf("input %q is bound to step %q output %q which does not exist — check the output_name", inputName, ref.GetStepId(), ref.GetOutputName()))
+				"bound to a step output that doesn't exist")
 			return "", ""
 		}
 		addEdge(ref.GetStepId(), stepID)

ui/src/app/workflows/[id]/page.tsx

@@ -291,7 +291,62 @@ function InspectorPanelIcon({ className }: { className?: string }) {
   );
 }
 
-function ErrorsPanel({ errors }: { errors: string[] }) {
+/** Maps a structured ValidationError to a user-friendly message string. */
+function friendlyValidationMessage(e: { code: string; bindingPath: string; message: string }): string {
+  // Extract the leaf field name from paths like "input_bindings.ticket_details"
+  const field = e.bindingPath.includes(".") ? e.bindingPath.split(".").slice(1).join(".") : "";
+  const q = (s: string) => s ? `"${s}"` : "";
+  switch (e.code) {
+    case "missing_required_input":
+      return `${q(field)} must be connected`;
+    case "binding_type_mismatch":
+      return `${q(field)} has an incompatible type`;
+    case "unknown_action_input":
+      return `${q(field)} is not a recognized input`;
+    case "unknown_workflow_input":
+      return `${q(field)} references a workflow input that doesn't exist`;
+    case "unknown_step_output":
+      return field === "when"
+        ? "Condition references a step output that doesn't exist"
+        : `${q(field)} references a step output that doesn't exist`;
+    case "unknown_step":
+      return `${q(field)} references a step that doesn't exist`;
+    case "unknown_action_ref":
+      return "Unknown action type";
+    case "cycle_detected":
+      return "Circular dependency detected";
+    case "duplicate_step_id":
+      return "Duplicate step ID";
+    case "when_not_bool":
+      return "Condition must evaluate to true/false";
+    case "invalid_when":
+      return "Invalid condition";
+    case "invalid_enum_value":
+      return "Invalid enum value in condition";
+    case "unknown_workflow_output":
+      return "References a workflow output that doesn't exist";
+    case "workflow_output_type_mismatch":
+      return "Output type doesn't match the workflow output";
+    case "required_workflow_output_unsatisfied":
+      return `Required output ${q(field)} has no producers`;
+    case "conditional_output_incomplete_branch":
+      return `Required output ${q(field)} is not produced for all cases`;
+    case "workflow_output_multiple_producers":
+      return "Multiple steps unconditionally produce the same output";
+    default:
+      return e.message;
+  }
+}
+
+function ValidationErrorsPanel({
+  validationErrors,
+  definition,
+  onJump,
+}: {
+  validationErrors: import("@/gen/engine/v1/engine_pb").ValidationError[];
+  definition: import("@/gen/engine/v1/engine_pb").WorkflowDefinition | null;
+  onJump: (stepId: string) => void;
+}) {
   const [expanded, setExpanded] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -304,28 +359,64 @@ function ErrorsPanel({ errors }: { errors: string[] }) {
     return () => document.removeEventListener("click", onClick);
   }, [expanded]);
 
-  if (errors.length === 0) return null;
+  if (validationErrors.length === 0) return null;
+
+  // Build stepId → label map for display
+  const stepLabelById = new Map<string, string>();
+  for (const st of definition?.steps ?? []) {
+    stepLabelById.set(st.stepId, st.name || st.stepId);
+  }
+
   return (
-    <div className="relative ml-1 shrink-0" ref={ref}>
+    <div className="relative shrink-0" ref={ref}>
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
-        className="flex items-center gap-1.5 rounded-lg border border-red-300 bg-red-50 px-2 py-1.5 text-red-800 transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/60 dark:text-red-200 dark:hover:bg-red-900/50"
+        className="flex items-center gap-1 rounded border border-red-200 bg-red-50 px-2 py-1.5 text-red-700 transition-colors hover:bg-red-100 dark:border-red-800/50 dark:bg-red-950/30 dark:text-red-400 dark:hover:bg-red-900/40"
         aria-expanded={expanded}
-        aria-label={`${errors.length} error(s)`}
+        aria-label={`${validationErrors.length} validation error(s)`}
       >
-        <AlertIcon className="h-4 w-4" />
-        <span className="text-xs font-semibold">{errors.length}</span>
+        <AlertIcon className="h-3.5 w-3.5" />
+        <span className="text-xs font-semibold">{validationErrors.length}</span>
       </button>
       {expanded ? (
-        <div className="absolute right-0 top-full z-50 mt-1.5 max-h-72 w-[min(26rem,calc(100vw-2rem))] overflow-auto rounded-lg border border-red-200 bg-white py-2 shadow-lg dark:border-red-900/50 dark:bg-zinc-950">
-          <div className="px-3 pb-2 text-xs font-semibold text-red-700 dark:text-red-300">Errors</div>
-          <ul className="space-y-1 px-3">
-            {errors.map((e, i) => (
-              <li key={i} className="break-words rounded bg-red-50/80 py-2 px-2.5 text-sm text-red-900 dark:bg-red-950/40 dark:text-red-100">
-                {e}
-              </li>
-            ))}
+        <div className="absolute right-0 top-full z-50 mt-1.5 w-[min(28rem,calc(100vw-2rem))] overflow-hidden rounded-lg border border-red-200 bg-white shadow-lg dark:border-red-900/50 dark:bg-zinc-950">
+          <div className="border-b border-red-100 px-3 py-2 text-[11px] font-semibold text-red-700 dark:border-red-900/50 dark:text-red-300">
+            {validationErrors.length} validation error{validationErrors.length !== 1 ? "s" : ""}
+          </div>
+          <ul className="max-h-80 overflow-auto py-1.5">
+            {validationErrors.map((e, i) => {
+              const stepLabel = e.stepId ? (stepLabelById.get(e.stepId) ?? e.stepId) : null;
+              const msg = friendlyValidationMessage(e);
+              const clickable = !!e.stepId;
+              return (
+                <li key={i}>
+                  <button
+                    type="button"
+                    disabled={!clickable}
+                    onClick={() => {
+                      if (e.stepId) {
+                        onJump(e.stepId);
+                        setExpanded(false);
+                      }
+                    }}
+                    className={[
+                      "w-full px-3 py-2 text-left transition-colors",
+                      clickable
+                        ? "cursor-pointer hover:bg-red-50/60 dark:hover:bg-red-950/30"
+                        : "cursor-default",
+                    ].join(" ")}
+                  >
+                    {stepLabel ? (
+                      <div className="mb-0.5 text-[10px] font-medium text-zinc-500 dark:text-zinc-400">
+                        {stepLabel}
+                      </div>
+                    ) : null}
+                    <div className="text-xs text-red-800 dark:text-red-200">{msg}</div>
+                  </button>
+                </li>
+              );
+            })}
           </ul>
         </div>
       ) : null}
@@ -349,7 +440,7 @@ export default function WorkflowBuilderPage({
   const [edges, setEdges] = useEdgesState<Edge>([]);
   const [errors, setErrors] = useState<string[]>([]);
   const [validationErrors, setValidationErrors] = useState<
-    { stepId?: string; message: string }[]
+    import("@/gen/engine/v1/engine_pb").ValidationError[]
   >([]);
   const [status, setStatus] = useState<
     "idle" | "loading" | "saving" | "validating"
@@ -1213,13 +1304,10 @@ export default function WorkflowBuilderPage({
         create(ValidateRequestSchema, { definition })
       );
       if (!resp.runnable) {
-        const errs = resp.errors.map((e) => (e.stepId ? `Step ${e.stepId}: ` : "") + e.message);
-        setErrors(errs);
-        setValidationErrors(
-          resp.errors.map((e) => ({ stepId: e.stepId || undefined, message: e.message }))
-        );
+        setValidationErrors(resp.errors);
+        setErrors(resp.errors.map((e) => friendlyValidationMessage(e)));
         setLastValidateOk(false);
-        const first = resp.errors[0];
+        const first = resp.errors.find((e) => e.stepId);
         setFirstValidationErrorStepId(first?.stepId ?? null);
         return;
       }
@@ -1573,14 +1661,12 @@ export default function WorkflowBuilderPage({
           </button>
           <button
             className={[
-              "flex min-w-[80px] items-center justify-center gap-1.5 rounded border px-3 py-1.5 text-xs font-medium transition-colors",
+              "flex min-w-[80px] items-center justify-center gap-1.5 rounded px-3 py-1.5 text-xs font-semibold transition-colors",
               status === "validating"
-                ? "cursor-wait border-zinc-200 bg-zinc-50 text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900"
+                ? "cursor-wait bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900"
                 : validateSuccessAt
-                  ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800/50 dark:bg-emerald-950/30 dark:text-emerald-400"
-                  : errors.length > 0 && lastValidateOk === false
-                    ? "border-red-200 bg-red-50 text-red-700 dark:border-red-800/50 dark:bg-red-950/30 dark:text-red-400"
-                    : "border-zinc-200 text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800",
+                  ? "bg-emerald-600 text-white dark:bg-emerald-500"
+                  : "bg-zinc-200 text-zinc-500 hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-600",
             ].join(" ")}
             onClick={() => void validate()}
             disabled={status !== "idle"}
@@ -1589,13 +1675,21 @@ export default function WorkflowBuilderPage({
               <SpinnerIcon className="h-3.5 w-3.5" />
             ) : validateSuccessAt ? (
               <CheckIcon className="h-3.5 w-3.5" />
-            ) : errors.length > 0 && lastValidateOk === false ? (
-              <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-              </svg>
             ) : null}
-            {status === "validating" ? "Checking…" : validateSuccessAt ? "Valid" : errors.length > 0 && lastValidateOk === false ? "Errors" : "Validate"}
+            {status === "validating" ? "Checking…" : validateSuccessAt ? "Valid" : "Validate"}
           </button>
+          <ValidationErrorsPanel
+            validationErrors={validationErrors}
+            definition={definition}
+            onJump={(stepId) => {
+              setShowRightPanel(true);
+              setSelectedStepId(stepId);
+              // Scroll canvas to the erroring node
+              setTimeout(() => {
+                rf?.fitView({ nodes: [{ id: stepId }], padding: 0.35, duration: 350 });
+              }, 50);
+            }}
+          />
           <button
             className={[
               "flex min-w-[72px] items-center justify-center gap-1.5 rounded px-3 py-1.5 text-xs font-semibold transition-colors",
@@ -1639,15 +1733,7 @@ export default function WorkflowBuilderPage({
                     ? "bg-emerald-50/70 dark:bg-emerald-950/30"
                     : "bg-zinc-50/60 dark:bg-zinc-900/30",
               operationStatusClass,
-              firstValidationErrorStepId ? "cursor-pointer hover:bg-zinc-100/80 dark:hover:bg-zinc-900/60" : "",
             ].join(" ")}
-            onClick={() => {
-              if (firstValidationErrorStepId) {
-                setShowRightPanel(true);
-                setSelectedStepId(firstValidationErrorStepId);
-              }
-            }}
-            role={firstValidationErrorStepId ? "button" : undefined}
           >
             <span
               className={[
@@ -1662,11 +1748,6 @@ export default function WorkflowBuilderPage({
               ].join(" ")}
             />
             <span className="truncate">{operationStatusText}</span>
-            {errors.length > 0 && lastValidateOk === false ? (
-              <span className="ml-1 shrink-0 text-[10px] text-zinc-500 dark:text-zinc-400">
-                (click to jump to first error)
-              </span>
-            ) : null}
           </div>
         ) : null}
 
@@ -2528,7 +2609,7 @@ function StepInspector({
   onSetOptionalConstBinding: (inputName: string, jsValue: unknown) => void;
   onClearOptionalBinding: (inputName: string) => void;
   onSetOptionalSourceBinding: (inputName: string, sourceKey: string) => void;
-  validationErrors: { stepId?: string; message: string }[];
+  validationErrors: import("@/gen/engine/v1/engine_pb").ValidationError[];
 }) {
   const [tab, setTab] = useState<"inputs" | "outputs" | "when" | "advanced">("inputs");
   const [showActions, setShowActions] = useState(false);
@@ -2709,24 +2790,6 @@ function StepInspector({
                 Input Bindings
               </div>
             </div>
-            {/* Per-step validation messages */}
-            {validationErrors && validationErrors.length > 0 ? (
-              <div className="mt-2 space-y-1.5">
-                {validationErrors
-                  .filter((ve) => !ve.stepId || ve.stepId === selectedStep.stepId)
-                  .map((ve, idx: number) => (
-                    <div
-                      key={`${ve.stepId ?? "workflow"}:${idx}`}
-                      className="flex items-start gap-1 text-[11px] text-red-600 dark:text-red-300"
-                    >
-                      <span className="mt-[3px] inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-red-500" />
-                      <span className="leading-snug">
-                        {ve.message}
-                      </span>
-                    </div>
-                  ))}
-              </div>
-            ) : null}
             <div className="mt-2 space-y-1.5">
               {Object.entries(selectedStep.inputBindings ?? {})
                 .filter(([name]) => name !== "...")  // strip sentinel