@open-mercato/core 0.5.1-develop.2949.009dcdd2d5 → 0.5.1-develop.2954.610bab2d08

package/src/modules/workflows/backend/tasks/[id]/page.tsx

@@ -5,7 +5,15 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { Separator } from '@open-mercato/ui/primitives/separator'
 import { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'
@@ -24,6 +32,10 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
   const [formData, setFormData] = React.useState<Record<string, string | number | boolean>>({})
   const [comments, setComments] = React.useState('')
   const [submitting, setSubmitting] = React.useState(false)
+  // Tracks the first required field that failed validation so we can mark the
+  // field with aria-invalid + a red ring (Radix Select can't carry HTML
+  // `required`, so we enforce constraint validation in JS instead).
+  const [invalidField, setInvalidField] = React.useState<string | null>(null)
 
   const { data: task, isLoading, error } = useQuery({
     queryKey: ['workflow-task', params.id],
@@ -45,6 +57,8 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
       ...prev,
       [fieldName]: value,
     }))
+    // Clear invalid state once the user touches the offending field.
+    if (invalidField === fieldName) setInvalidField(null)
   }
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -52,15 +66,27 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
 
     if (!task) return
 
-    // Validate required fields
+    // Validate required fields. Radix Select doesn't expose HTML `required`,
+    // so we enforce constraint validation here and surface it visually via
+    // `invalidField` + aria-invalid on the offending field.
     if (task.formSchema?.required) {
       for (const requiredField of task.formSchema.required) {
         if (!formData[requiredField] || formData[requiredField] === '') {
-          flash(t('workflows.tasks.detail.validation.requiredField', { field: requiredField }), 'error')
+          const fieldSchema = task.formSchema.properties?.[requiredField]
+          const fieldLabel = fieldSchema?.title ?? requiredField
+          flash(t('workflows.tasks.detail.validation.requiredField', { field: fieldLabel }), 'error')
+          setInvalidField(requiredField)
+          // Scroll + focus the trigger so the user sees what's missing.
+          if (typeof document !== 'undefined') {
+            const trigger = document.getElementById(requiredField)
+            trigger?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+            trigger?.focus()
+          }
           return
         }
       }
     }
+    setInvalidField(null)
 
     setSubmitting(true)
 
@@ -119,20 +145,26 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
           {fieldDescription && (
             <p className="text-xs text-muted-foreground">{fieldDescription}</p>
           )}
-          <select
-            id={fieldName}
-            value={fieldValue(fieldName)}
-            onChange={(e) => handleFieldChange(fieldName, e.target.value)}
-            required={required}
-            className={inputClasses}
+          <Select
+            value={fieldValue(fieldName) ? String(fieldValue(fieldName)) : undefined}
+            onValueChange={(value) => handleFieldChange(fieldName, value ?? '')}
           >
-            <option value="">{t('workflows.tasks.detail.form.selectOption')}</option>
-            {enumValues.map((value: any) => (
-              <option key={value} value={value}>
-                {value}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger
+              id={fieldName}
+              className={`${inputClasses} ${invalidField === fieldName ? 'ring-2 ring-status-error-border border-status-error-border' : ''}`}
+              aria-required={required}
+              aria-invalid={invalidField === fieldName ? true : undefined}
+            >
+              <SelectValue placeholder={t('workflows.tasks.detail.form.selectOption')} />
+            </SelectTrigger>
+            <SelectContent>
+              {enumValues.map((value: any) => (
+                <SelectItem key={value} value={value}>
+                  {value}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )
     }
@@ -150,13 +182,12 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
               {fieldDescription && (
                 <p className="text-xs text-muted-foreground">{fieldDescription}</p>
               )}
-              <input
+              <Input
                 type="email"
                 id={fieldName}
                 value={fieldValue(fieldName)}
                 onChange={(e) => handleFieldChange(fieldName, e.target.value)}
                 required={required}
-                className={inputClasses}
               />
             </div>
           )
@@ -212,13 +243,12 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
             {fieldDescription && (
               <p className="text-xs text-muted-foreground">{fieldDescription}</p>
             )}
-            <input
+            <Input
               type="text"
               id={fieldName}
               value={fieldValue(fieldName)}
               onChange={(e) => handleFieldChange(fieldName, e.target.value)}
               required={required}
-              className={inputClasses}
             />
           </div>
         )
@@ -234,14 +264,13 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
             {fieldDescription && (
               <p className="text-xs text-muted-foreground">{fieldDescription}</p>
             )}
-            <input
+            <Input
               type="number"
               id={fieldName}
               value={fieldValue(fieldName)}
               onChange={(e) => handleFieldChange(fieldName, e.target.value ? Number(e.target.value) : '')}
               required={required}
               step={fieldType === 'integer' ? 1 : 'any'}
-              className={inputClasses}
             />
           </div>
         )
@@ -278,13 +307,12 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
             {fieldDescription && (
               <p className="text-xs text-muted-foreground">{fieldDescription}</p>
             )}
-            <input
+            <Input
               type="text"
               id={fieldName}
               value={fieldValue(fieldName)}
               onChange={(e) => handleFieldChange(fieldName, e.target.value)}
               required={required}
-              className={inputClasses}
             />
           </div>
         )

package/src/modules/workflows/components/ActivitiesEditor.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Label } from '@open-mercato/ui/primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { Trash2, Plus, ChevronUp, ChevronDown } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -181,18 +188,21 @@ export function ActivitiesEditor({ value = [], onChange, error }: ActivitiesEdit
                   <Label htmlFor={`activity-${index}-type`} className="text-xs">
                     {t('workflows.activities.activityType')} *
                   </Label>
-                  <select
-                    id={`activity-${index}-type`}
+                  <Select
                     value={activity.activityType}
-                    onChange={(e) => updateActivity(index, 'activityType', e.target.value)}
-                    className="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+                    onValueChange={(value) => updateActivity(index, 'activityType', value)}
                   >
-                    {ACTIVITY_TYPES.map((type) => (
-                      <option key={type.value} value={type.value}>
-                        {t(`workflows.activities.types.${type.value}`)}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger id={`activity-${index}-type`} className="mt-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {ACTIVITY_TYPES.map((type) => (
+                        <SelectItem key={type.value} value={type.value}>
+                          {t(`workflows.activities.types.${type.value}`)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
                 <div>
                   <Label htmlFor={`activity-${index}-timeout`} className="text-xs">

package/src/modules/workflows/components/DefinitionTriggersEditor.tsx

@@ -6,7 +6,14 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { Label } from '@open-mercato/ui/primitives/label'
-import { Switch } from '@open-mercato/ui/primitives/switch'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import {
   Dialog,
@@ -403,14 +410,13 @@ export function DefinitionTriggersEditor({
             </div>
 
             {/* Enabled Switch */}
-            <div className="flex items-center gap-2">
-              <Switch
-                id="trigger-enabled"
-                checked={formValues.enabled}
-                onCheckedChange={checked => setFormValues(prev => ({ ...prev, enabled: checked }))}
-              />
-              <Label htmlFor="trigger-enabled">{t('workflows.triggers.fields.enabled', 'Enabled')}</Label>
-            </div>
+            <SwitchField
+              id="trigger-enabled"
+              label={t('workflows.triggers.fields.enabled', 'Enabled')}
+              flip
+              checked={formValues.enabled}
+              onCheckedChange={checked => setFormValues(prev => ({ ...prev, enabled: checked }))}
+            />
 
             {/* Filter Conditions */}
             <div className="space-y-2">
@@ -432,17 +438,21 @@ export function DefinitionTriggersEditor({
                     placeholder="status"
                     className="w-full sm:w-1/3"
                   />
-                  <select
+                  <Select
                     value={fc.operator}
-                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => updateFilterCondition(index, 'operator', e.target.value)}
-                    className="h-10 w-full sm:w-[140px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    onValueChange={(value) => updateFilterCondition(index, 'operator', value)}
                   >
-                    {FILTER_OPERATORS.map(op => (
-                      <option key={op.value} value={op.value}>
-                        {op.label}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger size="lg" className="w-full sm:w-[140px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {FILTER_OPERATORS.map(op => (
+                        <SelectItem key={op.value} value={op.value}>
+                          {op.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                   <Input
                     value={fc.value}
                     onChange={e => updateFilterCondition(index, 'value', e.target.value)}

package/src/modules/workflows/components/EdgeEditDialog.tsx

@@ -13,6 +13,13 @@ import {
 import {Button} from '@open-mercato/ui/primitives/button'
 import {Input} from '@open-mercato/ui/primitives/input'
 import {Label} from '@open-mercato/ui/primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import {Badge} from '@open-mercato/ui/primitives/badge'
 import {Separator} from '@open-mercato/ui/primitives/separator'
 import {Plus, Trash2} from 'lucide-react'
@@ -355,17 +362,17 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
             {/* Trigger Type */}
             <div className="space-y-2">
               <Label htmlFor="trigger">{t('workflows.edgeEditor.triggerType')}</Label>
-              <select
-                id="trigger"
-                value={trigger}
-                onChange={(e) => setTrigger(e.target.value)}
-                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                <option value="auto">{t('workflows.transitions.triggers.auto')}</option>
-                <option value="manual">{t('workflows.transitions.triggers.manual')}</option>
-                <option value="signal">{t('workflows.transitions.triggers.signal')}</option>
-                <option value="timer">{t('workflows.transitions.triggers.timer')}</option>
-              </select>
+              <Select value={trigger} onValueChange={(value) => setTrigger(value)}>
+                <SelectTrigger id="trigger">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto">{t('workflows.transitions.triggers.auto')}</SelectItem>
+                  <SelectItem value="manual">{t('workflows.transitions.triggers.manual')}</SelectItem>
+                  <SelectItem value="signal">{t('workflows.transitions.triggers.signal')}</SelectItem>
+                  <SelectItem value="timer">{t('workflows.transitions.triggers.timer')}</SelectItem>
+                </SelectContent>
+              </Select>
               <p className="text-xs text-muted-foreground">
                 {t(`workflows.edgeEditor.triggerDescriptions.${trigger}`)}
               </p>
@@ -483,11 +490,11 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                         <div className="px-4 pb-4 space-y-3 border-t border-gray-200 bg-white">
                           <div className="pt-3">
                             <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.ruleId')}</label>
-                            <input
+                            <Input
                               type="text"
+                              size="sm"
                               value={condition.ruleId}
                               onChange={(e) => updatePreCondition(index, 'ruleId', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                             />
                           </div>
 
@@ -635,11 +642,11 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                         <div className="px-4 pb-4 space-y-3 border-t border-gray-200 bg-white">
                           <div className="pt-3">
                             <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.ruleId')}</label>
-                            <input
+                            <Input
                               type="text"
+                              size="sm"
                               value={condition.ruleId}
                               onChange={(e) => updatePostCondition(index, 'ruleId', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                             />
                           </div>
 
@@ -772,11 +779,11 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                           {/* Activity ID */}
                           <div className="pt-3">
                             <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.activityId')} *</label>
-                            <input
+                            <Input
                               type="text"
+                              size="sm"
                               value={activity.activityId}
                               onChange={(e) => updateActivity(index, 'activityId', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                               placeholder={t('workflows.edgeEditor.activityIdPlaceholder')}
                             />
                           </div>
@@ -784,11 +791,11 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                           {/* Activity Name */}
                           <div>
                             <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.activityName')} *</label>
-                            <input
+                            <Input
                               type="text"
+                              size="sm"
                               value={activity.activityName || ''}
                               onChange={(e) => updateActivity(index, 'activityName', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                               placeholder={t('workflows.edgeEditor.activityNamePlaceholder')}
                             />
                           </div>
@@ -796,29 +803,33 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                           {/* Activity Type */}
                           <div>
                             <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.activityType')} *</label>
-                            <select
+                            <Select
                               value={activity.activityType}
-                              onChange={(e) => updateActivity(index, 'activityType', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
+                              onValueChange={(value) => updateActivity(index, 'activityType', value)}
                             >
-                              <option value="SEND_EMAIL">{t('workflows.activities.types.SEND_EMAIL')}</option>
-                              <option value="CALL_API">{t('workflows.activities.types.CALL_API')}</option>
-                              <option value="UPDATE_ENTITY">{t('workflows.activities.types.UPDATE_ENTITY')}</option>
-                              <option value="EMIT_EVENT">{t('workflows.activities.types.EMIT_EVENT')}</option>
-                              <option value="CALL_WEBHOOK">{t('workflows.activities.types.CALL_WEBHOOK')}</option>
-                              <option value="EXECUTE_FUNCTION">{t('workflows.activities.types.EXECUTE_FUNCTION')}</option>
-                              <option value="WAIT">{t('workflows.activities.types.WAIT')}</option>
-                            </select>
+                              <SelectTrigger size="sm">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="SEND_EMAIL">{t('workflows.activities.types.SEND_EMAIL')}</SelectItem>
+                                <SelectItem value="CALL_API">{t('workflows.activities.types.CALL_API')}</SelectItem>
+                                <SelectItem value="UPDATE_ENTITY">{t('workflows.activities.types.UPDATE_ENTITY')}</SelectItem>
+                                <SelectItem value="EMIT_EVENT">{t('workflows.activities.types.EMIT_EVENT')}</SelectItem>
+                                <SelectItem value="CALL_WEBHOOK">{t('workflows.activities.types.CALL_WEBHOOK')}</SelectItem>
+                                <SelectItem value="EXECUTE_FUNCTION">{t('workflows.activities.types.EXECUTE_FUNCTION')}</SelectItem>
+                                <SelectItem value="WAIT">{t('workflows.activities.types.WAIT')}</SelectItem>
+                              </SelectContent>
+                            </Select>
                           </div>
 
                           {/* Timeout */}
                           <div>
                             <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.timeout')}</label>
-                            <input
+                            <Input
                               type="text"
+                              size="sm"
                               value={activity.timeout || ''}
                               onChange={(e) => updateActivity(index, 'timeout', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                               placeholder={t('workflows.edgeEditor.timeoutPlaceholder')}
                             />
                             <p className="text-xs text-gray-500 mt-0.5">{t('workflows.edgeEditor.timeoutHint')}</p>
@@ -830,11 +841,11 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                             <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                               <div>
                                 <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.maxAttempts')}</label>
-                                <input
+                                <Input
                                   type="number"
+                                  size="sm"
                                   value={activity.retryPolicy?.maxAttempts || ''}
                                   onChange={(e) => updateActivityRetryPolicy(index, 'maxAttempts', parseInt(e.target.value) || 0)}
-                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   placeholder="3"
                                   min="1"
                                   max="10"
@@ -842,23 +853,23 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                               </div>
                               <div>
                                 <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.initialInterval')}</label>
-                                <input
+                                <Input
                                   type="number"
+                                  size="sm"
                                   value={activity.retryPolicy?.initialIntervalMs || ''}
                                   onChange={(e) => updateActivityRetryPolicy(index, 'initialIntervalMs', parseInt(e.target.value) || 0)}
-                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   placeholder="1000"
                                   min="0"
                                 />
                               </div>
                               <div>
                                 <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.backoffCoefficient')}</label>
-                                <input
+                                <Input
                                   type="number"
+                                  size="sm"
                                   step="0.1"
                                   value={activity.retryPolicy?.backoffCoefficient || ''}
                                   onChange={(e) => updateActivityRetryPolicy(index, 'backoffCoefficient', parseFloat(e.target.value) || 1)}
-                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   placeholder="2"
                                   min="1"
                                   max="10"
@@ -866,11 +877,11 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                               </div>
                               <div>
                                 <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.edgeEditor.maxInterval')}</label>
-                                <input
+                                <Input
                                   type="number"
+                                  size="sm"
                                   value={activity.retryPolicy?.maxIntervalMs || ''}
                                   onChange={(e) => updateActivityRetryPolicy(index, 'maxIntervalMs', parseInt(e.target.value) || 0)}
-                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   placeholder="10000"
                                   min="0"
                                 />