@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

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

@@ -24,8 +24,9 @@ interface Step {
   timeout?: number
   retryPolicy?: {
     maxAttempts?: number
-    retryDelay?: number
-    backoffMultiplier?: number
+    initialIntervalMs?: number
+    backoffCoefficient?: number
+    maxIntervalMs?: number
   }
 }
 
@@ -47,6 +48,12 @@ const STEP_TYPES = [
   { value: 'WAIT_FOR_TIMER', label: 'Wait for Timer' },
 ]
 
+/**
+ * @deprecated The form editor is retired (spec section 10) — steps are authored
+ * on the canvas in `/backend/definitions/visual-editor`. This component stays
+ * exported for at least one minor release for third-party forms that embed it;
+ * it has no call site in this module any more.
+ */
 export function StepsEditor({ value = [], onChange, error }: StepsEditorProps) {
   const t = useT()
 

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

@@ -0,0 +1,205 @@
+'use client'
+
+import * as React from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { AlarmClock, CircleCheck, Route, SquareDashed, Webhook, Workflow } from 'lucide-react'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { WorkflowDefinitionData } from '../data/entities'
+
+export type WorkflowTemplateGalleryItem = {
+  id: string
+  nameKey: string
+  descriptionKey: string
+  category: string
+  icon: string
+  definition: WorkflowDefinitionData
+}
+
+type TemplatesResponse = {
+  items?: WorkflowTemplateGalleryItem[]
+  error?: string
+}
+
+export type TemplateGalleryDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSelect: (template: WorkflowTemplateGalleryItem | null) => void
+}
+
+const BLANK_CARD_ID = 'blank'
+
+const TEMPLATE_ICONS: Record<string, LucideIcon> = {
+  'check-circle': CircleCheck,
+  'webhook': Webhook,
+  'alarm-clock': AlarmClock,
+  'route': Route,
+}
+
+function resolveTemplateIcon(icon: string): LucideIcon {
+  return TEMPLATE_ICONS[icon] ?? Workflow
+}
+
+/**
+ * TemplateGalleryDialog — the "New workflow" template picker (spec
+ * 2026-07-26-workflows-ux-redesign.md section 2.1 "Templates").
+ *
+ * Lists the seeded templates from GET /api/workflows/templates as cards with
+ * a "Blank canvas" card first. Selecting a card calls `onSelect` with the
+ * chosen template (or `null` for blank canvas) and closes the dialog — the
+ * host decides whether to navigate (definitions list) or apply the template
+ * to the open canvas (visual editor).
+ *
+ * A Drawer rather than a modal: the gallery opens over the definitions list
+ * and over the canvas, and a card grid is exactly the content the maintainer
+ * wants room for. Keyboard unchanged: Escape cancels (Radix default),
+ * Cmd/Ctrl+Enter selects the active card (blank canvas until a card is focused
+ * or hovered).
+ */
+export function TemplateGalleryDialog({ open, onOpenChange, onSelect }: TemplateGalleryDialogProps) {
+  const t = useT()
+  const [templates, setTemplates] = React.useState<WorkflowTemplateGalleryItem[] | null>(null)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [loadError, setLoadError] = React.useState<string | null>(null)
+  const [activeCardId, setActiveCardId] = React.useState<string>(BLANK_CARD_ID)
+
+  const loadTemplates = React.useCallback(async () => {
+    setIsLoading(true)
+    setLoadError(null)
+    const result = await apiCall<TemplatesResponse>('/api/workflows/templates')
+    if (result.ok && Array.isArray(result.result?.items)) {
+      setTemplates(result.result.items)
+    } else {
+      setLoadError(result.result?.error || t('workflows.templates.gallery.loadFailed', 'Failed to load workflow templates'))
+    }
+    setIsLoading(false)
+  }, [t])
+
+  React.useEffect(() => {
+    if (open && templates === null && !isLoading && !loadError) {
+      void loadTemplates()
+    }
+  }, [open, templates, isLoading, loadError, loadTemplates])
+
+  React.useEffect(() => {
+    if (!open) setActiveCardId(BLANK_CARD_ID)
+  }, [open])
+
+  const handleSelect = React.useCallback((cardId: string) => {
+    if (cardId === BLANK_CARD_ID) {
+      onOpenChange(false)
+      onSelect(null)
+      return
+    }
+    const template = (templates ?? []).find((item) => item.id === cardId)
+    if (!template) return
+    onOpenChange(false)
+    onSelect(template)
+  }, [templates, onOpenChange, onSelect])
+
+  React.useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        handleSelect(activeCardId)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [open, activeCardId, handleSelect])
+
+  const cardClassName = (cardId: string) => (
+    `group relative flex w-full cursor-pointer flex-col gap-2 rounded-lg border-2 bg-background px-4 py-3 text-left transition-all hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+      activeCardId === cardId ? 'border-primary' : 'border-border hover:border-muted-foreground/30'
+    }`
+  )
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent
+        data-testid="workflow-template-gallery-drawer"
+        className="w-full max-w-none sm:w-3/5"
+        closeAriaLabel={t('workflows.templates.gallery.close', 'Close template gallery')}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{t('workflows.templates.gallery.title', 'Choose a template')}</DrawerTitle>
+          <DrawerDescription>
+            {t('workflows.templates.gallery.description', 'Start from a ready-made workflow or a blank canvas.')}
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody className="py-4">
+        {isLoading ? (
+          <LoadingMessage label={t('workflows.templates.gallery.loading', 'Loading templates...')} />
+        ) : loadError ? (
+          <ErrorMessage
+            label={t('workflows.templates.gallery.loadFailed', 'Failed to load workflow templates')}
+            description={loadError}
+            action={(
+              <Button variant="outline" size="sm" onClick={() => { void loadTemplates() }}>
+                {t('common.retry', 'Retry')}
+              </Button>
+            )}
+          />
+        ) : (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <button
+              type="button"
+              data-testid="template-card-blank"
+              onClick={() => handleSelect(BLANK_CARD_ID)}
+              onFocus={() => setActiveCardId(BLANK_CARD_ID)}
+              onMouseEnter={() => setActiveCardId(BLANK_CARD_ID)}
+              className={cardClassName(BLANK_CARD_ID)}
+            >
+              <div className="flex items-center gap-2">
+                <SquareDashed className="h-5 w-5 text-muted-foreground" aria-hidden="true" />
+                <span className="text-sm font-semibold text-foreground">
+                  {t('workflows.templates.gallery.blank.name', 'Blank canvas')}
+                </span>
+              </div>
+              <span className="text-xs text-muted-foreground">
+                {t('workflows.templates.gallery.blank.description', 'Start from scratch with an empty canvas.')}
+              </span>
+            </button>
+            {(templates ?? []).map((template) => {
+              const Icon = resolveTemplateIcon(template.icon)
+              return (
+                <button
+                  key={template.id}
+                  type="button"
+                  data-testid={`template-card-${template.id}`}
+                  onClick={() => handleSelect(template.id)}
+                  onFocus={() => setActiveCardId(template.id)}
+                  onMouseEnter={() => setActiveCardId(template.id)}
+                  className={cardClassName(template.id)}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <Icon className="h-5 w-5 shrink-0 text-muted-foreground" aria-hidden="true" />
+                      <span className="truncate text-sm font-semibold text-foreground">{t(template.nameKey)}</span>
+                    </div>
+                    <Badge variant="secondary" className="shrink-0">{template.category}</Badge>
+                  </div>
+                  <span className="text-xs text-muted-foreground">{t(template.descriptionKey)}</span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  )
+}

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

@@ -11,9 +11,10 @@ import {
   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'
+import { ConfigJsonTextarea } from './ConfigJsonTextarea'
+import { useActivityTypeOptions } from './fields/useActivityTypeOptions'
 import { millisecondTimeoutInputValue, millisecondTimeoutPatch } from '../lib/activityTimeoutFields'
 
 interface Activity {
@@ -24,8 +25,9 @@ interface Activity {
   async?: boolean
   retryPolicy?: {
     maxAttempts?: number
-    retryDelay?: number
-    backoffMultiplier?: number
+    initialIntervalMs?: number
+    backoffCoefficient?: number
+    maxIntervalMs?: number
   }
   // Milliseconds, matching the executor and the definition schema. This field
   // used to be written as `timeout` (a number) while the schema typed `timeout`
@@ -52,10 +54,20 @@ interface Transition {
 interface TransitionsEditorProps {
   value: Transition[]
   onChange: (transitions: Transition[]) => void
+  onInvalidActivityConfigsChange?: (activityLabels: string[]) => void
   steps?: any[]
   error?: string
 }
 
+function resolveActivityLabel(activity: { activityName?: string; activityId?: string } | undefined, index: number): string {
+  return activity?.activityName || activity?.activityId || String(index + 1)
+}
+
+function parseActivityConfigKey(key: string): { transitionIndex: number; activityIndex: number } {
+  const [transitionIndex, activityIndex] = key.split(':').map((part) => Number.parseInt(part, 10))
+  return { transitionIndex, activityIndex }
+}
+
 const TRIGGER_TYPES = [
   { value: 'auto', label: 'Automatic' },
   { value: 'manual', label: 'Manual' },
@@ -63,63 +75,54 @@ const TRIGGER_TYPES = [
   { value: 'timer', label: 'Timer' },
 ]
 
-const ACTIVITY_TYPES = [
-  { value: 'SEND_EMAIL', label: 'Send Email' },
-  { value: 'CALL_API', label: 'Call API' },
-  { value: 'UPDATE_ENTITY', label: 'Update Entity' },
-  { value: 'EMIT_EVENT', label: 'Emit Event' },
-  { value: 'CALL_WEBHOOK', label: 'Call Webhook' },
-  { value: 'EXECUTE_FUNCTION', label: 'Execute Function' },
-  { value: 'WAIT', label: 'Wait' },
-]
-
-type ConfigDraft = { text: string; error: string | null }
-
-export function TransitionsEditor({ value = [], onChange, steps = [], error }: TransitionsEditorProps) {
+/**
+ * @deprecated The form editor is retired (spec section 10) — routes are authored
+ * on the canvas in `/backend/definitions/visual-editor`. This component stays
+ * exported for at least one minor release for third-party forms that embed it;
+ * it has no call site in this module any more.
+ */
+export function TransitionsEditor({ value = [], onChange, onInvalidActivityConfigsChange, steps = [], error }: TransitionsEditorProps) {
   const t = useT()
-  const [configDrafts, setConfigDrafts] = React.useState<Record<string, ConfigDraft>>({})
-
-  const configDraftKey = (transition: Transition, activity: Activity) =>
-    `${transition.transitionId}:${activity.activityId}`
-
-  const handleConfigTextChange = (
-    transitionIndex: number,
-    activityIndex: number,
-    text: string,
-  ) => {
-    const transition = value[transitionIndex]
-    const activity = transition.activities?.[activityIndex]
-    if (!activity) return
-
-    let parsed: Record<string, unknown> | null = null
-    let parseError: string | null = null
-    try {
-      const candidate = JSON.parse(text) as unknown
-      if (candidate && typeof candidate === 'object' && !Array.isArray(candidate)) {
-        parsed = candidate as Record<string, unknown>
-      } else {
-        parseError = t('workflows.activities.configMustBeObject', 'Config must be a JSON object')
-      }
-    } catch (err) {
-      parseError = err instanceof Error
-        ? err.message
-        : t('workflows.activities.configInvalidJson', 'Invalid JSON')
-    }
-
-    const key = configDraftKey(transition, activity)
-    setConfigDrafts((drafts) => ({ ...drafts, [key]: { text, error: parseError } }))
-    if (parsed) updateActivity(transitionIndex, activityIndex, 'config', parsed)
-  }
-
-  const handleConfigBlur = (transition: Transition, activity: Activity) => {
-    const key = configDraftKey(transition, activity)
-    setConfigDrafts((drafts) => {
-      if (!drafts[key] || drafts[key].error) return drafts
-      const next = { ...drafts }
-      delete next[key]
+  const activityTypeOptions = useActivityTypeOptions()
+  const [invalidConfigKeys, setInvalidConfigKeys] = React.useState<ReadonlySet<string>>(() => new Set())
+  const lastReportedLabelsRef = React.useRef<string>('')
+
+  const handleConfigValidityChange = React.useCallback((transitionIndex: number, activityIndex: number, valid: boolean) => {
+    const key = `${transitionIndex}:${activityIndex}`
+    setInvalidConfigKeys((prev) => {
+      if (prev.has(key) === !valid) return prev
+      const next = new Set(prev)
+      if (valid) next.delete(key)
+      else next.add(key)
       return next
     })
-  }
+  }, [])
+
+  React.useEffect(() => {
+    setInvalidConfigKeys((prev) => {
+      const next = new Set(
+        [...prev].filter((key) => {
+          const { transitionIndex, activityIndex } = parseActivityConfigKey(key)
+          return Boolean(value[transitionIndex]?.activities?.[activityIndex])
+        }),
+      )
+      return next.size === prev.size ? prev : next
+    })
+  }, [value])
+
+  React.useEffect(() => {
+    if (!onInvalidActivityConfigsChange) return
+    const labels = [...invalidConfigKeys]
+      .map(parseActivityConfigKey)
+      .sort((left, right) => left.transitionIndex - right.transitionIndex || left.activityIndex - right.activityIndex)
+      .map(({ transitionIndex, activityIndex }) =>
+        resolveActivityLabel(value[transitionIndex]?.activities?.[activityIndex], activityIndex),
+      )
+    const serializedLabels = JSON.stringify(labels)
+    if (serializedLabels === lastReportedLabelsRef.current) return
+    lastReportedLabelsRef.current = serializedLabels
+    onInvalidActivityConfigsChange(labels)
+  }, [invalidConfigKeys, value, onInvalidActivityConfigsChange])
 
   const addTransition = () => {
     const newTransition: Transition = {
@@ -166,8 +169,9 @@ export function TransitionsEditor({ value = [], onChange, steps = [], error }: T
       async: false,
       retryPolicy: {
         maxAttempts: 3,
-        retryDelay: 1000,
-        backoffMultiplier: 2,
+        initialIntervalMs: 1000,
+        backoffCoefficient: 2,
+        maxIntervalMs: 10000,
       },
     }
     const updated = [...value]
@@ -427,10 +431,9 @@ export function TransitionsEditor({ value = [], onChange, steps = [], error }: T
 
                 <div className="space-y-2">
                   {(transition.activities || []).map((activity, activityIndex) => {
-                    const draftKey = configDraftKey(transition, activity)
-                    const configDraft = configDrafts[draftKey]
+                    const activityKey = `${transition.transitionId ?? index}:${activity.activityId || activityIndex}`
                     return (
-                      <div key={draftKey} className="p-3 border rounded-md bg-muted shadow-sm border-l-4 border-l-green-500">
+                      <div key={activityKey} className="p-3 border rounded-md bg-muted shadow-sm border-l-4 border-l-green-500">
                         <div className="space-y-2">
                         <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                           <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-2">
@@ -505,9 +508,9 @@ export function TransitionsEditor({ value = [], onChange, steps = [], error }: T
                                 <SelectValue />
                               </SelectTrigger>
                               <SelectContent>
-                                {ACTIVITY_TYPES.map((type) => (
+                                {activityTypeOptions.map((type) => (
                                   <SelectItem key={type.value} value={type.value}>
-                                    {t(`workflows.activities.types.${type.value}`)}
+                                    {type.label}
                                   </SelectItem>
                                 ))}
                               </SelectContent>
@@ -542,7 +545,7 @@ export function TransitionsEditor({ value = [], onChange, steps = [], error }: T
                           </div>
                         </div>
 
-                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                           <div>
                             <Label htmlFor={`activity-${index}-${activityIndex}-retry-attempts`} className="text-xs">
                               {t('workflows.form.maxRetryAttempts')}
@@ -550,33 +553,51 @@ export function TransitionsEditor({ value = [], onChange, steps = [], error }: T
                             <Input
                               id={`activity-${index}-${activityIndex}-retry-attempts`}
                               type="number"
+                              min="1"
+                              max="10"
                               value={activity.retryPolicy?.maxAttempts || 3}
                               onChange={(e) => updateRetryPolicy(index, activityIndex, 'maxAttempts', parseInt(e.target.value))}
                               className="mt-1 text-xs h-8"
                             />
                           </div>
                           <div>
-                            <Label htmlFor={`activity-${index}-${activityIndex}-retry-delay`} className="text-xs">
-                              {t('workflows.form.retryDelay')} (ms)
+                            <Label htmlFor={`activity-${index}-${activityIndex}-initial-interval`} className="text-xs">
+                              {t('workflows.fieldEditors.activities.initialInterval')}
                             </Label>
                             <Input
-                              id={`activity-${index}-${activityIndex}-retry-delay`}
+                              id={`activity-${index}-${activityIndex}-initial-interval`}
                               type="number"
-                              value={activity.retryPolicy?.retryDelay || 1000}
-                              onChange={(e) => updateRetryPolicy(index, activityIndex, 'retryDelay', parseInt(e.target.value))}
+                              min="0"
+                              value={activity.retryPolicy?.initialIntervalMs || 1000}
+                              onChange={(e) => updateRetryPolicy(index, activityIndex, 'initialIntervalMs', parseInt(e.target.value))}
                               className="mt-1 text-xs h-8"
                             />
                           </div>
                           <div>
                             <Label htmlFor={`activity-${index}-${activityIndex}-backoff`} className="text-xs">
-                              {t('workflows.form.backoffMultiplier')}
+                              {t('workflows.fieldEditors.activities.backoffCoefficient')}
                             </Label>
                             <Input
                               id={`activity-${index}-${activityIndex}-backoff`}
                               type="number"
                               step="0.1"
-                              value={activity.retryPolicy?.backoffMultiplier || 2}
-                              onChange={(e) => updateRetryPolicy(index, activityIndex, 'backoffMultiplier', parseFloat(e.target.value))}
+                              min="1"
+                              max="10"
+                              value={activity.retryPolicy?.backoffCoefficient || 2}
+                              onChange={(e) => updateRetryPolicy(index, activityIndex, 'backoffCoefficient', parseFloat(e.target.value))}
+                              className="mt-1 text-xs h-8"
+                            />
+                          </div>
+                          <div>
+                            <Label htmlFor={`activity-${index}-${activityIndex}-max-interval`} className="text-xs">
+                              {t('workflows.fieldEditors.activities.maxInterval')}
+                            </Label>
+                            <Input
+                              id={`activity-${index}-${activityIndex}-max-interval`}
+                              type="number"
+                              min="0"
+                              value={activity.retryPolicy?.maxIntervalMs || 10000}
+                              onChange={(e) => updateRetryPolicy(index, activityIndex, 'maxIntervalMs', parseInt(e.target.value))}
                               className="mt-1 text-xs h-8"
                             />
                           </div>
@@ -586,26 +607,14 @@ export function TransitionsEditor({ value = [], onChange, steps = [], error }: T
                           <Label htmlFor={`activity-${index}-${activityIndex}-config`} className="text-xs">
                             {t('workflows.activities.config')} (JSON)
                           </Label>
-                          <Textarea
+                          <ConfigJsonTextarea
                             id={`activity-${index}-${activityIndex}-config`}
-                            value={configDraft?.text ?? JSON.stringify(activity.config || {}, null, 2)}
-                            onChange={(e) => handleConfigTextChange(index, activityIndex, e.target.value)}
-                            onBlur={() => handleConfigBlur(transition, activity)}
-                            aria-invalid={configDraft?.error ? true : undefined}
-                            aria-describedby={configDraft?.error ? `activity-${index}-${activityIndex}-config-error` : undefined}
-                            placeholder='{"key": "value"}'
+                            value={activity.config}
+                            onChange={(config) => updateActivity(index, activityIndex, 'config', config)}
+                            onValidityChange={(valid) => handleConfigValidityChange(index, activityIndex, valid)}
                             rows={2}
                             className="mt-1 font-mono text-xs"
                           />
-                          {configDraft?.error ? (
-                            <p
-                              id={`activity-${index}-${activityIndex}-config-error`}
-                              className="mt-1 text-xs text-status-error-text"
-                              role="alert"
-                            >
-                              {configDraft.error}
-                            </p>
-                          ) : null}
                         </div>
                         </div>
                       </div>

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

@@ -0,0 +1,83 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useDialogKeyHandler } from '@open-mercato/ui/hooks/useDialogKeyHandler'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { TriggersEditor } from './TriggersEditor'
+import type { WorkflowDefinitionTrigger } from '../data/entities'
+
+export interface TriggersDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  triggers: WorkflowDefinitionTrigger[]
+  onSave: (triggers: WorkflowDefinitionTrigger[]) => void
+}
+
+/**
+ * Focused editor for a definition's triggers, opened from the START node's
+ * trigger cap (fidelity gap #5, Direction A). It replaces the detour through the
+ * five-section definition drawer: the author clicked "what starts this", so the
+ * affordance opens exactly that and nothing else.
+ *
+ * It edits a WORKING COPY so Cancel truly reverts; Save commits to the caller.
+ * Hosts the lighter inline `TriggersEditor` (Switch toggles + click-to-expand
+ * editing, no nested drawer). Cmd/Ctrl+Enter saves, Escape cancels, per the
+ * shared dialog UX contract.
+ */
+export function TriggersDialog({ open, onOpenChange, triggers, onSave }: TriggersDialogProps) {
+  const t = useT()
+  const [working, setWorking] = useState<WorkflowDefinitionTrigger[]>(triggers)
+
+  // Re-seed the working copy each time the dialog opens so a prior Cancel never
+  // leaks stale edits into the next session.
+  useEffect(() => {
+    if (open) setWorking(triggers)
+  }, [open, triggers])
+
+  const handleSave = () => {
+    onSave(working)
+    onOpenChange(false)
+  }
+
+  const handleKeyDown = useDialogKeyHandler({ onConfirm: handleSave, onCancel: () => onOpenChange(false) })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="sm:max-w-2xl max-h-[85vh] overflow-y-auto"
+        onKeyDown={handleKeyDown}
+        data-testid="workflow-triggers-dialog"
+      >
+        <DialogHeader>
+          <DialogTitle>{t('workflows.triggersDialog.title', 'Triggers')}</DialogTitle>
+          <DialogDescription>
+            {t(
+              'workflows.triggersDialog.description',
+              'What starts this workflow. Manual and API start are always available.',
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <TriggersEditor value={working} onChange={setWorking} />
+
+        <DialogFooter>
+          <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+            {t('common.cancel', 'Cancel')}
+          </Button>
+          <Button type="button" onClick={handleSave}>
+            {t('workflows.triggersDialog.save', 'Save triggers')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}