fix: show specific validation error messages instead of generic 'Invalid input data'

- Backend now returns first validation error message in 'message' field
- Both POST and PUT commander endpoints updated
- Frontend fallback to handle either message or details array format
- Users now see 'Select at least one color' instead of generic error
- Improved error response consistency across all validation errors

backend/src/routes/commanders.js

@@ -239,10 +239,12 @@ export default async function commanderRoutes(fastify, options) {
          })
        } catch (error) {
          if (error instanceof z.ZodError) {
+           const formattedErrors = formatValidationErrors(error)
+           const firstError = formattedErrors[0]?.message || 'Invalid input data'
            return reply.code(400).send({
              error: 'Validation Error',
-            message: 'Invalid input data',
-            details: formatValidationErrors(error)
+             message: firstError,
+             details: formattedErrors
            })
          } else {
            fastify.log.error('Create commander error:', error)
@@ -303,10 +305,12 @@ export default async function commanderRoutes(fastify, options) {
           })
        } catch (error) {
          if (error instanceof z.ZodError) {
+           const formattedErrors = formatValidationErrors(error)
+           const firstError = formattedErrors[0]?.message || 'Invalid input data'
            reply.code(400).send({
              error: 'Validation Error',
-            message: 'Invalid input data',
-            details: error.errors.map((e) => e.message)
+             message: firstError,
+             details: formattedErrors
            })
          } else {
            fastify.log.error('Update commander error:', error.message || error)

frontend/public/js/commanders.js

@@ -155,7 +155,16 @@ function commanderManager() {
           this.resetAddForm()
          } else {
            const errorData = await response.json()
-          this.serverError = errorData.message || 'Failed to create commander'
+           // Use message if available, otherwise extract from details array
+           if (errorData.message) {
+             this.serverError = errorData.message
+           } else if (errorData.details && Array.isArray(errorData.details)) {
+             this.serverError = errorData.details
+               .map((err) => err.message || err)
+               .join(', ')
+           } else {
+             this.serverError = 'Failed to create commander'
+           }
          }
       } catch (error) {
         console.error('Add commander error:', error)