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

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

@@ -4,7 +4,15 @@ import {Node} from '@xyflow/react'
 import {useEffect, useState} from 'react'
 import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle} from '@open-mercato/ui/primitives/dialog'
 import {Button} from '@open-mercato/ui/primitives/button'
+import {Input} from '@open-mercato/ui/primitives/input'
 import {Badge} from '@open-mercato/ui/primitives/badge'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import {Alert, AlertDescription} from '@open-mercato/ui/primitives/alert'
 import {ChevronDown, Info, Plus, Trash2} from 'lucide-react'
 import {sanitizeId} from '../lib/graph-utils'
@@ -507,12 +515,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                 <label className="block text-sm font-medium text-gray-700 mb-1">
                   {t('workflows.form.stepName')} *
                 </label>
-                <input
+                <Input
                   type="text"
                   value={stepName}
                   onChange={(e) => setStepName(e.target.value)}
                   placeholder={t('workflows.form.placeholders.stepName')}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                   autoFocus
                 />
                 <p className="text-xs text-gray-500 mt-1">
@@ -542,12 +549,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                 <label className="block text-sm font-medium text-gray-700 mb-1">
                   {t('workflows.form.timeout')}
                 </label>
-                <input
+                <Input
                   type="text"
                   value={timeout}
                   onChange={(e) => setTimeout(e.target.value)}
                   placeholder={t('workflows.form.placeholders.timeout')}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                 />
                 <p className="text-xs text-gray-500 mt-1">
                   {t('workflows.form.descriptions.timeout')}
@@ -567,12 +573,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       {t('workflows.form.assignedTo')}
                     </label>
-                    <input
+                    <Input
                       type="text"
                       value={assignedTo}
                       onChange={(e) => setAssignedTo(e.target.value)}
                       placeholder={t('workflows.form.placeholders.userId')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.assignedTo')}
@@ -583,12 +588,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       {t('workflows.form.assignedToRoles')}
                     </label>
-                    <input
+                    <Input
                       type="text"
                       value={assignedToRoles}
                       onChange={(e) => setAssignedToRoles(e.target.value)}
                       placeholder={t('workflows.form.placeholders.roles')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.assignedToRoles')}
@@ -599,12 +603,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       {t('workflows.form.formKey')}
                     </label>
-                    <input
+                    <Input
                       type="text"
                       value={formKey}
                       onChange={(e) => setFormKey(e.target.value)}
                       placeholder={t('workflows.form.placeholders.formKey')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.formKey')}
@@ -686,11 +689,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                 {/* Field Name */}
                                 <div className="pt-3">
                                   <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.fieldName')} *</label>
-                                  <input
+                                  <Input
                                     type="text"
+                                    size="sm"
                                     value={field.name}
                                     onChange={(e) => updateFormField(index, 'name', 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.form.placeholders.fieldName')}
                                   />
                                   <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.fieldName')}</p>
@@ -699,11 +702,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                 {/* Field Label */}
                                 <div>
                                   <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.fieldLabel')} *</label>
-                                  <input
+                                  <Input
                                     type="text"
+                                    size="sm"
                                     value={field.label}
                                     onChange={(e) => updateFormField(index, 'label', 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.form.placeholders.fieldLabel')}
                                   />
                                   <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.fieldLabel')}</p>
@@ -712,34 +715,38 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                 {/* Field Type */}
                                 <div>
                                   <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.fieldType')} *</label>
-                                  <select
+                                  <Select
                                     value={field.type}
-                                    onChange={(e) => updateFormField(index, 'type', 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) => updateFormField(index, 'type', value)}
                                   >
-                                    <option value="text">{t('workflows.form.fieldTypes.text')}</option>
-                                    <option value="number">{t('workflows.form.fieldTypes.number')}</option>
-                                    <option value="email">{t('workflows.form.fieldTypes.email')}</option>
-                                    <option value="tel">{t('workflows.form.fieldTypes.tel')}</option>
-                                    <option value="url">{t('workflows.form.fieldTypes.url')}</option>
-                                    <option value="textarea">{t('workflows.form.fieldTypes.textarea')}</option>
-                                    <option value="select">{t('workflows.form.fieldTypes.select')}</option>
-                                    <option value="radio">{t('workflows.form.fieldTypes.radio')}</option>
-                                    <option value="checkbox">{t('workflows.form.fieldTypes.checkbox')}</option>
-                                    <option value="date">{t('workflows.form.fieldTypes.date')}</option>
-                                    <option value="time">{t('workflows.form.fieldTypes.time')}</option>
-                                    <option value="datetime-local">{t('workflows.form.fieldTypes.datetime-local')}</option>
-                                  </select>
+                                    <SelectTrigger size="sm">
+                                      <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      <SelectItem value="text">{t('workflows.form.fieldTypes.text')}</SelectItem>
+                                      <SelectItem value="number">{t('workflows.form.fieldTypes.number')}</SelectItem>
+                                      <SelectItem value="email">{t('workflows.form.fieldTypes.email')}</SelectItem>
+                                      <SelectItem value="tel">{t('workflows.form.fieldTypes.tel')}</SelectItem>
+                                      <SelectItem value="url">{t('workflows.form.fieldTypes.url')}</SelectItem>
+                                      <SelectItem value="textarea">{t('workflows.form.fieldTypes.textarea')}</SelectItem>
+                                      <SelectItem value="select">{t('workflows.form.fieldTypes.select')}</SelectItem>
+                                      <SelectItem value="radio">{t('workflows.form.fieldTypes.radio')}</SelectItem>
+                                      <SelectItem value="checkbox">{t('workflows.form.fieldTypes.checkbox')}</SelectItem>
+                                      <SelectItem value="date">{t('workflows.form.fieldTypes.date')}</SelectItem>
+                                      <SelectItem value="time">{t('workflows.form.fieldTypes.time')}</SelectItem>
+                                      <SelectItem value="datetime-local">{t('workflows.form.fieldTypes.datetime-local')}</SelectItem>
+                                    </SelectContent>
+                                  </Select>
                                 </div>
 
                                 {/* Placeholder */}
                                 <div>
                                   <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.placeholder')}</label>
-                                  <input
+                                  <Input
                                     type="text"
+                                    size="sm"
                                     value={field.placeholder || ''}
                                     onChange={(e) => updateFormField(index, 'placeholder', 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.form.placeholders.placeholder')}
                                   />
                                 </div>
@@ -747,11 +754,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                 {/* Default Value */}
                                 <div>
                                   <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.defaultValue')}</label>
-                                  <input
+                                  <Input
                                     type="text"
+                                    size="sm"
                                     value={field.defaultValue || ''}
                                     onChange={(e) => updateFormField(index, 'defaultValue', 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.form.placeholders.defaultValue')}
                                   />
                                 </div>
@@ -760,11 +767,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                 {(field.type === 'select' || field.type === 'radio') && (
                                   <div>
                                     <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.options')}</label>
-                                    <input
+                                    <Input
                                       type="text"
+                                      size="sm"
                                       value={field.options?.join(', ') || ''}
                                       onChange={(e) => updateFormField(index, 'options', e.target.value.split(',').map(o => o.trim()).filter(Boolean))}
-                                      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.form.placeholders.options')}
                                     />
                                     <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.options')}</p>
@@ -896,15 +903,15 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   <label className="block text-xs font-medium text-gray-700 mb-1">
                                     {t('workflows.form.activityId')} *
                                   </label>
-                                  <input
+                                  <Input
                                     type="text"
+                                    size="sm"
                                     value={activity.activityId}
                                     onChange={(e) => {
                                       const updated = [...stepActivities]
                                       updated[index].activityId = e.target.value
                                       setStepActivities(updated)
                                     }}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring"
                                     placeholder={t('workflows.form.placeholders.activityId')}
                                   />
                                 </div>
@@ -914,15 +921,15 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   <label className="block text-xs font-medium text-gray-700 mb-1">
                                     {t('workflows.form.activityName')} *
                                   </label>
-                                  <input
+                                  <Input
                                     type="text"
+                                    size="sm"
                                     value={activity.activityName || ''}
                                     onChange={(e) => {
                                       const updated = [...stepActivities]
                                       updated[index].activityName = e.target.value
                                       setStepActivities(updated)
                                     }}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring"
                                     placeholder={t('workflows.form.placeholders.activityName')}
                                   />
                                 </div>
@@ -932,22 +939,26 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   <label className="block text-xs font-medium text-gray-700 mb-1">
                                     {t('workflows.form.activityType')} *
                                   </label>
-                                  <select
+                                  <Select
                                     value={activity.activityType}
-                                    onChange={(e) => {
+                                    onValueChange={(value) => {
                                       const updated = [...stepActivities]
-                                      updated[index].activityType = e.target.value
+                                      updated[index].activityType = value
                                       setStepActivities(updated)
                                     }}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring"
                                   >
-                                    <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>
-                                  </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>
+                                    </SelectContent>
+                                  </Select>
                                 </div>
 
                                 {/* Timeout */}
@@ -955,15 +966,15 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   <label className="block text-xs font-medium text-gray-700 mb-1">
                                     {t('workflows.form.timeout')}
                                   </label>
-                                  <input
+                                  <Input
                                     type="text"
+                                    size="sm"
                                     value={activity.timeoutMs || ''}
                                     onChange={(e) => {
                                       const updated = [...stepActivities]
                                       updated[index].timeoutMs = e.target.value ? parseInt(e.target.value) : undefined
                                       setStepActivities(updated)
                                     }}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring"
                                     placeholder={t('workflows.form.placeholders.timeoutMs')}
                                   />
                                   <p className="text-xs text-gray-500 mt-1">{t('workflows.form.descriptions.timeoutMs')}</p>
@@ -977,8 +988,9 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                     <div>
                                       <label className="block text-xs text-gray-600 mb-1">{t('workflows.form.maxAttempts')}</label>
-                                      <input
+                                      <Input
                                         type="number"
+                                        size="sm"
                                         value={activity.retryPolicy?.maxAttempts || 1}
                                         onChange={(e) => {
                                           const updated = [...stepActivities]
@@ -988,13 +1000,13 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                         }}
                                         min="1"
                                         max="10"
-                                        className="w-full px-2 py-1 border border-gray-300 rounded text-xs"
                                       />
                                     </div>
                                     <div>
                                       <label className="block text-xs text-gray-600 mb-1">{t('workflows.form.initialInterval')}</label>
-                                      <input
+                                      <Input
                                         type="number"
+                                        size="sm"
                                         value={activity.retryPolicy?.initialIntervalMs || 1000}
                                         onChange={(e) => {
                                           const updated = [...stepActivities]
@@ -1002,13 +1014,13 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                           updated[index].retryPolicy.initialIntervalMs = parseInt(e.target.value) || 1000
                                           setStepActivities(updated)
                                         }}
-                                        className="w-full px-2 py-1 border border-gray-300 rounded text-xs"
                                       />
                                     </div>
                                     <div>
                                       <label className="block text-xs text-gray-600 mb-1">{t('workflows.form.backoffCoefficient')}</label>
-                                      <input
+                                      <Input
                                         type="number"
+                                        size="sm"
                                         step="0.1"
                                         value={activity.retryPolicy?.backoffCoefficient || 2}
                                         onChange={(e) => {
@@ -1017,13 +1029,13 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                           updated[index].retryPolicy.backoffCoefficient = parseFloat(e.target.value) || 2
                                           setStepActivities(updated)
                                         }}
-                                        className="w-full px-2 py-1 border border-gray-300 rounded text-xs"
                                       />
                                     </div>
                                     <div>
                                       <label className="block text-xs text-gray-600 mb-1">{t('workflows.form.maxInterval')}</label>
-                                      <input
+                                      <Input
                                         type="number"
+                                        size="sm"
                                         value={activity.retryPolicy?.maxIntervalMs || 60000}
                                         onChange={(e) => {
                                           const updated = [...stepActivities]
@@ -1031,7 +1043,6 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                           updated[index].retryPolicy.maxIntervalMs = parseInt(e.target.value) || 60000
                                           setStepActivities(updated)
                                         }}
-                                        className="w-full px-2 py-1 border border-gray-300 rounded text-xs"
                                       />
                                     </div>
                                   </div>
@@ -1113,12 +1124,12 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                       {t('workflows.form.workflowToInvoke')} *
                     </label>
                     <div className="flex gap-2">
-                      <input
+                      <Input
                         type="text"
                         value={subWorkflowId}
                         onChange={(e) => setSubWorkflowId(e.target.value)}
                         placeholder={t('workflows.form.placeholders.subWorkflowId')}
-                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
+                        className="flex-1"
                         readOnly
                       />
                       <Button
@@ -1138,12 +1149,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       {t('workflows.form.version')}
                     </label>
-                    <input
+                    <Input
                       type="number"
                       value={subWorkflowVersion}
                       onChange={(e) => setSubWorkflowVersion(e.target.value)}
                       placeholder={t('workflows.form.placeholders.version')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.subWorkflowVersion')}
@@ -1180,7 +1190,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                         {inputMappings.map((mapping, index) => (
                           <div key={index} className="flex gap-2 items-start">
                             <div className="flex-1">
-                              <input
+                              <Input
                                 type="text"
                                 value={mapping.key}
                                 onChange={(e) => {
@@ -1189,13 +1199,12 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   setInputMappings(newMappings)
                                 }}
                                 placeholder={t('workflows.form.placeholders.childKey')}
-                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus-visible:ring-2 focus-visible:ring-ring"
                               />
                               <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.childKey')}</p>
                             </div>
                             <span className="text-gray-400 mt-2">→</span>
                             <div className="flex-1">
-                              <input
+                              <Input
                                 type="text"
                                 value={mapping.value}
                                 onChange={(e) => {
@@ -1204,7 +1213,6 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   setInputMappings(newMappings)
                                 }}
                                 placeholder={t('workflows.form.placeholders.parentPath')}
-                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus-visible:ring-2 focus-visible:ring-ring"
                               />
                               <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.parentPath')}</p>
                             </div>
@@ -1255,7 +1263,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                         {outputMappings.map((mapping, index) => (
                           <div key={index} className="flex gap-2 items-start">
                             <div className="flex-1">
-                              <input
+                              <Input
                                 type="text"
                                 value={mapping.key}
                                 onChange={(e) => {
@@ -1264,13 +1272,12 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   setOutputMappings(newMappings)
                                 }}
                                 placeholder={t('workflows.form.placeholders.parentKey')}
-                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus-visible:ring-2 focus-visible:ring-ring"
                               />
                               <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.parentKey')}</p>
                             </div>
                             <span className="text-gray-400 mt-2">←</span>
                             <div className="flex-1">
-                              <input
+                              <Input
                                 type="text"
                                 value={mapping.value}
                                 onChange={(e) => {
@@ -1279,7 +1286,6 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   setOutputMappings(newMappings)
                                 }}
                                 placeholder={t('workflows.form.placeholders.childPath')}
-                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus-visible:ring-2 focus-visible:ring-ring"
                               />
                               <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.childPath')}</p>
                             </div>
@@ -1315,12 +1321,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       {t('workflows.form.signalName')} *
                     </label>
-                    <input
+                    <Input
                       type="text"
                       value={signalName}
                       onChange={(e) => setSignalName(e.target.value)}
                       placeholder={t('workflows.form.placeholders.signalName')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.signalName')}
@@ -1331,12 +1336,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                     <label className="block text-sm font-medium text-gray-700 mb-1">
                       {t('workflows.form.timeout')}
                     </label>
-                    <input
+                    <Input
                       type="text"
                       value={signalTimeout}
                       onChange={(e) => setSignalTimeout(e.target.value)}
                       placeholder={t('workflows.form.placeholders.signalTimeout')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.signalTimeout')}

package/src/modules/workflows/components/StepsEditor.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'
@@ -165,18 +172,21 @@ export function StepsEditor({ value = [], onChange, error }: StepsEditorProps) {
                   <Label htmlFor={`step-${index}-type`} className="text-xs">
                     {t('workflows.steps.stepType')} *
                   </Label>
-                  <select
-                    id={`step-${index}-type`}
+                  <Select
                     value={step.stepType}
-                    onChange={(e) => updateStep(index, 'stepType', e.target.value)}
-                    className="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+                    onValueChange={(value) => updateStep(index, 'stepType', value)}
                   >
-                    {STEP_TYPES.map((type) => (
-                      <option key={type.value} value={type.value}>
-                        {t(`workflows.steps.types.${type.value}`)}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger id={`step-${index}-type`} className="mt-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {STEP_TYPES.map((type) => (
+                        <SelectItem key={type.value} value={type.value}>
+                          {t(`workflows.steps.types.${type.value}`)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
                 <div>
                   <Label htmlFor={`step-${index}-timeout`} className="text-xs">