@open-mercato/core 0.6.7 → 0.6.8-develop.6875.1.871a4afc94

package/src/modules/wms/i18n/pl.json

@@ -166,6 +166,7 @@
   "wms.backend.dashboard.firstRun.actions.addLocations": "Dodaj lokalizacje",
   "wms.backend.dashboard.firstRun.actions.createWarehouse": "Utwórz magazyn",
   "wms.backend.dashboard.firstRun.actions.receiveStock": "Przyjmij pierwszy towar",
+  "wms.backend.dashboard.firstRun.description": "Utwórz magazyn, dodaj lokalizacje składowania, a następnie przyjmij pierwszy towar, aby rozpocząć śledzenie zapasów.",
   "wms.backend.dashboard.firstRun.noLocations.description": "Magazyn jest skonfigurowany — dodaj przynajmniej jedną lokalizację składowania, aby móc przyjmować towar.",
   "wms.backend.dashboard.firstRun.noLocations.title": "Dodaj lokalizacje składowania",
   "wms.backend.dashboard.firstRun.title": "Skonfiguruj swój magazyn",
@@ -580,6 +581,7 @@
   "wms.backend.inventory.release.dialog.submit": "Zwolnij rezerwację",
   "wms.backend.inventory.release.dialog.title": "Zwolnij rezerwację",
   "wms.backend.inventory.release.errors.balanceIntegrityViolation": "Błąd integralności salda — uruchom \"mercato wms verify-balances --repair\" aby zdiagnozować i naprawić dryf przed ponowieniem.",
+  "wms.backend.inventory.release.errors.missingReservation": "Brakuje kontekstu rezerwacji. Zamknij okno dialogowe i spróbuj ponownie z tabeli rezerwacji.",
   "wms.backend.inventory.release.errors.submit": "Nie udało się zwolnić rezerwacji.",
   "wms.backend.inventory.release.flash.success": "Rezerwacja zwolniona",
   "wms.backend.inventory.release.form.notes": "Notatki",

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

@@ -288,7 +288,7 @@ export default function EditWorkflowDefinitionPage() {
     <Page>
       <PageBody>
         {isCodeOnly && (
-          <Alert variant="info" className="mb-4">
+          <Alert status="information" className="mb-4">
             <AlertDescription className="flex items-center justify-between">
               <span>{t('workflows.source.code.readonlyBanner')}</span>
               <Button variant="outline" size="sm" onClick={handleCustomize}>
@@ -298,7 +298,7 @@ export default function EditWorkflowDefinitionPage() {
           </Alert>
         )}
         {isCodeOverride && (
-          <Alert variant="warning" className="mb-4">
+          <Alert status="warning" className="mb-4">
             <AlertDescription className="flex items-center justify-between">
               <span>{t('workflows.source.code_override.banner')}</span>
               <Button variant="outline" size="sm" onClick={handleResetToCode}>

package/src/modules/workflows/backend/definitions/create/page.tsx

@@ -53,7 +53,7 @@ export default function CreateWorkflowDefinitionPage() {
   return (
     <Page>
       <PageBody>
-        <Alert variant="info" icon={<Zap aria-hidden="true" />} className="mb-6">
+        <Alert status="information" icon={<Zap aria-hidden="true" />} className="mb-6">
           <AlertTitle>{t('workflows.create.eventTriggersTitle')}</AlertTitle>
           <AlertDescription>
             {t('workflows.create.eventTriggersDescription')}

package/src/modules/workflows/backend/definitions/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from 'react'
+import { extensionPoints } from '@open-mercato/core/modules/workflows/extension-points'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
@@ -429,7 +430,7 @@ export default function WorkflowDefinitionsListPage() {
           onFiltersClear={handleFiltersClear}
           onRowClick={(row) => router.push(`/backend/definitions/visual-editor?id=${row.id}`)}
           perspective={{
-            tableId: 'workflows.definitions.list',
+            tableId: extensionPoints.hosts.definitionsTable.tableId,
           }}
           emptyState={(
             <ListEmptyState
@@ -452,7 +453,7 @@ export default function WorkflowDefinitionsListPage() {
               <Button variant="outline" onClick={() => setDeleteTarget(null)}>
                 {t('common.cancel')}
               </Button>
-              <Button variant="destructive" onClick={confirmDelete}>
+              <Button variant="destructive-solid" onClick={confirmDelete}>
                 <Trash2/>
                 {t('common.delete')}
               </Button>

package/src/modules/workflows/backend/definitions/visual-editor/page.tsx

@@ -11,6 +11,7 @@ import { useState, useCallback, useEffect } from 'react'
 import { useRouter, useSearchParams, usePathname } from 'next/navigation'
 import { graphToDefinition, definitionToGraph, validateWorkflowGraph, generateStepId, generateTransitionId, appendWorkflowEdge, ValidationError } from '../../../lib/graph-utils'
 import { performDeleteEdgeFlow, performDeleteNodeFlow } from '../../../lib/visual-editor-delete-flow'
+import { humanizeDefinitionIssuePath } from '../../../lib/format-validation-error'
 import { workflowDefinitionDataSchema } from '../../../data/validators'
 import { Page } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -357,11 +358,19 @@ export default function VisualEditorPage() {
       triggers: triggers.length > 0 ? triggers : undefined,
     }
 
-    // Run Zod schema validation before saving
+    // Run Zod schema validation before saving. Report every issue, not just the
+    // first: a save rejected for one missing activity field used to look like
+    // "nothing happened" once the operator fixed that field and hit a second
+    // one (#4232). Paths are humanized (steps.2.activities.0.config.endpoint →
+    // step 3 › activity 1 › endpoint) so the message points at the node to open.
     const schemaResult = workflowDefinitionDataSchema.safeParse(definitionData)
     if (!schemaResult.success) {
-      const firstIssue = schemaResult.error.issues[0]
-      flash(`Schema error: ${firstIssue.path.join('.')} - ${firstIssue.message}`, 'error')
+      const issues = schemaResult.error.issues
+      const described = issues
+        .slice(0, 3)
+        .map((issue) => `${humanizeDefinitionIssuePath(issue.path)}: ${issue.message}`)
+      const suffix = issues.length > described.length ? ` (+${issues.length - described.length} more)` : ''
+      flash(`Cannot save — ${described.join('; ')}${suffix}`, 'error')
       return
     }
 
@@ -679,7 +688,7 @@ export default function VisualEditorPage() {
           </DialogHeader>
           <DialogFooter>
             <Button variant="outline" onClick={() => setShowClearConfirm(false)}>{t('common.cancel', 'Cancel')}</Button>
-            <Button variant="destructive" onClick={confirmClear}>{t('common.clear', 'Clear')}</Button>
+            <Button variant="destructive-solid" onClick={confirmClear}>{t('common.clear', 'Clear')}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -828,12 +837,12 @@ export default function VisualEditorPage() {
       {(isCodeOnly || isCodeOverride) && (
         <div className="shrink-0 border-b border-border bg-background px-3 py-2 md:px-6 md:py-3">
           {isCodeOnly && (
-            <Alert variant="info">
+            <Alert status="information">
               <AlertTitle>{t('workflows.source.code.readonlyBanner')}</AlertTitle>
             </Alert>
           )}
           {isCodeOverride && (
-            <Alert variant="warning">
+            <Alert status="warning">
               <AlertTitle>{t('workflows.source.code_override.banner')}</AlertTitle>
             </Alert>
           )}
@@ -1161,7 +1170,7 @@ export default function VisualEditorPage() {
               </div>
 
               {/* Instructions */}
-              <Alert variant="info" className="mt-6">
+              <Alert status="information" className="mt-6">
                 <AlertTitle className="text-xs">{t('workflows.visualEditor.howToUse', 'How to use:')}</AlertTitle>
                 <div className="mt-2">
                   <ul className="list-inside list-disc space-y-1 text-xs">

package/src/modules/workflows/backend/instances/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from 'react'
+import { extensionPoints } from '@open-mercato/core/modules/workflows/extension-points'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
@@ -147,19 +148,19 @@ export default function WorkflowInstancesListPage() {
   const getStatusBadgeClass = (status: WorkflowInstance['status']) => {
     switch (status) {
       case 'RUNNING':
-        return 'bg-blue-100 text-blue-800'
+        return 'bg-status-info-bg text-status-info-text'
       case 'PAUSED':
-        return 'bg-yellow-100 text-yellow-800'
+        return 'bg-status-warning-bg text-status-warning-text'
       case 'COMPLETED':
-        return 'bg-green-100 text-green-800'
+        return 'bg-status-success-bg text-status-success-text'
       case 'FAILED':
-        return 'bg-red-100 text-red-800'
+        return 'bg-status-error-bg text-status-error-text'
       case 'CANCELLED':
         return 'bg-muted text-foreground'
       case 'COMPENSATING':
-        return 'bg-orange-100 text-orange-800'
+        return 'bg-status-warning-bg text-status-warning-text'
       case 'COMPENSATED':
-        return 'bg-purple-100 text-purple-800'
+        return 'bg-status-neutral-bg text-status-neutral-text'
       default:
         return 'bg-muted text-muted-foreground'
     }
@@ -267,7 +268,7 @@ export default function WorkflowInstancesListPage() {
       header: t('workflows.instances.fields.retryCount'),
       accessorKey: 'retryCount',
       cell: ({ row }) => (
-        <span className={`text-sm ${row.original.retryCount > 0 ? 'text-orange-600 font-medium' : 'text-muted-foreground'}`}>
+        <span className={`text-sm ${row.original.retryCount > 0 ? 'text-status-warning-text font-medium' : 'text-muted-foreground'}`}>
           {row.original.retryCount}
         </span>
       ),
@@ -310,7 +311,7 @@ export default function WorkflowInstancesListPage() {
       <Page>
         <PageBody>
           <div className="p-8 text-center">
-            <p className="text-red-600">{t('workflows.instances.messages.loadFailed')}</p>
+            <p className="text-status-error-text">{t('workflows.instances.messages.loadFailed')}</p>
             <Button onClick={() => queryClient.invalidateQueries({ queryKey: ['workflow-instances'] })} className="mt-4">
               {t('common.retry')}
             </Button>
@@ -332,7 +333,7 @@ export default function WorkflowInstancesListPage() {
           onFiltersApply={handleFiltersApply}
           onFiltersClear={handleFiltersClear}
           perspective={{
-            tableId: 'workflows.instances.list',
+            tableId: extensionPoints.hosts.instancesTable.tableId,
           }}
           pagination={{ page, pageSize, total, totalPages, onPageChange: setPage }}
         />

package/src/modules/workflows/backend/tasks/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from 'react'
+import { extensionPoints } from '@open-mercato/core/modules/workflows/extension-points'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
@@ -134,11 +135,11 @@ export default function UserTasksListPage() {
   const getStatusBadgeClass = (status: UserTaskStatus) => {
     switch (status) {
       case 'PENDING':
-        return 'bg-yellow-100 text-yellow-800'
+        return 'bg-status-warning-bg text-status-warning-text'
       case 'IN_PROGRESS':
-        return 'bg-blue-100 text-blue-800'
+        return 'bg-status-info-bg text-status-info-text'
       case 'COMPLETED':
-        return 'bg-green-100 text-green-800'
+        return 'bg-status-success-bg text-status-success-text'
       case 'CANCELLED':
         return 'bg-muted text-foreground'
       default:
@@ -206,7 +207,7 @@ export default function UserTasksListPage() {
             </div>
           )}
           {isOverdue(row.original) && (
-            <div className="text-xs text-red-600 font-medium mt-1">
+            <div className="text-xs text-status-error-text font-medium mt-1">
               {t('workflows.tasks.overdue')}
             </div>
           )}
@@ -258,7 +259,7 @@ export default function UserTasksListPage() {
         const dueDate = new Date(row.original.dueDate)
         const overdue = isOverdue(row.original)
         return (
-          <div className={`text-sm ${overdue ? 'text-red-600 font-medium' : 'text-foreground'}`}>
+          <div className={`text-sm ${overdue ? 'text-status-error-text font-medium' : 'text-foreground'}`}>
             {dueDate.toLocaleString()}
           </div>
         )
@@ -319,7 +320,7 @@ export default function UserTasksListPage() {
       <Page>
         <PageBody>
           <div className="p-8 text-center">
-            <p className="text-red-600">{t('workflows.tasks.messages.loadFailed')}</p>
+            <p className="text-status-error-text">{t('workflows.tasks.messages.loadFailed')}</p>
             <Button onClick={() => queryClient.invalidateQueries({ queryKey: ['workflow-tasks'] })} className="mt-4">
               {t('common.retry')}
             </Button>
@@ -341,7 +342,7 @@ export default function UserTasksListPage() {
           onFiltersApply={handleFiltersApply}
           onFiltersClear={handleFiltersClear}
           perspective={{
-            tableId: 'workflows.tasks.list',
+            tableId: extensionPoints.hosts.tasksTable.tableId,
           }}
           pagination={{ page, pageSize, total, totalPages, onPageChange: setPage }}
         />

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

@@ -26,7 +26,11 @@ interface Activity {
     retryDelay?: number
     backoffMultiplier?: number
   }
-  timeout?: number
+  // Milliseconds, matching the executor and the definition schema. This field
+  // used to be written as `timeout` (a number) while the schema typed `timeout`
+  // as an ISO 8601 string, so saving a timeout from this editor failed
+  // validation outright (#4424).
+  timeoutMs?: number
   compensation?: Record<string, any>
 }
 
@@ -46,8 +50,59 @@ const ACTIVITY_TYPES = [
   { value: 'WAIT', label: 'Wait' },
 ]
 
+/**
+ * Per-activity draft of the raw JSON config text (#4234).
+ *
+ * The config textarea used to be controlled directly by
+ * `JSON.stringify(activity.config)`, and its onChange dropped anything that
+ * did not parse. Every intermediate keystroke of a hand edit is invalid JSON,
+ * so the state never advanced and React re-rendered the previous serialized
+ * value — the field read as frozen/non-editable right after a config was
+ * pasted. Keeping the raw text locally lets the user type freely; the parsed
+ * object is propagated whenever the text is valid, and an inline error is shown
+ * while it is not.
+ */
+type ConfigDraft = { text: string; error: string | null }
+
+function serializeConfig(config: Record<string, unknown> | undefined): string {
+  return JSON.stringify(config ?? {}, null, 2)
+}
+
 export function ActivitiesEditor({ value = [], onChange, error }: ActivitiesEditorProps) {
   const t = useT()
+  const [configDrafts, setConfigDrafts] = React.useState<Record<number, ConfigDraft>>({})
+
+  const configTextFor = (index: number, activity: Activity): string =>
+    configDrafts[index]?.text ?? serializeConfig(activity.config)
+
+  const handleConfigTextChange = (index: number, text: string) => {
+    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')
+    }
+
+    setConfigDrafts((drafts) => ({ ...drafts, [index]: { text, error: parseError } }))
+    if (parsed) updateActivity(index, 'config', parsed)
+  }
+
+  // Drop the raw draft once the field loses focus and its content is valid, so
+  // the textarea goes back to mirroring the canonical (re-formatted) config.
+  const handleConfigBlur = (index: number) => {
+    setConfigDrafts((drafts) => {
+      if (!drafts[index] || drafts[index].error) return drafts
+      const next = { ...drafts }
+      delete next[index]
+      return next
+    })
+  }
 
   const addActivity = () => {
     const newActivity: Activity = {
@@ -85,6 +140,18 @@ export function ActivitiesEditor({ value = [], onChange, error }: ActivitiesEdit
 
   const removeActivity = (index: number) => {
     onChange(value.filter((_, i) => i !== index))
+    // Keep the index-keyed drafts aligned with the re-indexed activities:
+    // drop the removed row's draft and shift every later draft down by one,
+    // otherwise a pending (invalid) draft would render over a different row.
+    setConfigDrafts((drafts) => {
+      const next: Record<number, ConfigDraft> = {}
+      for (const key of Object.keys(drafts)) {
+        const i = Number(key)
+        if (i === index) continue
+        next[i > index ? i - 1 : i] = drafts[i]
+      }
+      return next
+    })
   }
 
   const moveActivity = (index: number, direction: 'up' | 'down') => {
@@ -96,6 +163,18 @@ export function ActivitiesEditor({ value = [], onChange, error }: ActivitiesEdit
     updated[index] = updated[newIndex]
     updated[newIndex] = temp
     onChange(updated)
+    // Swap the two rows' drafts too, so an in-progress edit follows its activity.
+    setConfigDrafts((drafts) => {
+      if (!(index in drafts) && !(newIndex in drafts)) return drafts
+      const next = { ...drafts }
+      const atIndex = drafts[index]
+      const atNew = drafts[newIndex]
+      if (atNew !== undefined) next[index] = atNew
+      else delete next[index]
+      if (atIndex !== undefined) next[newIndex] = atIndex
+      else delete next[newIndex]
+      return next
+    })
   }
 
   return (
@@ -105,7 +184,7 @@ export function ActivitiesEditor({ value = [], onChange, error }: ActivitiesEdit
           <p className="text-sm text-muted-foreground">
             {t('workflows.form.descriptions.activities')}
           </p>
-          {error && <p className="text-sm text-red-600 mt-1">{error}</p>}
+          {error && <p className="text-sm text-status-error-text mt-1">{error}</p>}
         </div>
         <Button type="button" onClick={addActivity} variant="outline" size="sm" className="w-full sm:w-auto">
           <Plus className="h-4 w-4 mr-1" />
@@ -178,7 +257,7 @@ export function ActivitiesEditor({ value = [], onChange, error }: ActivitiesEdit
                     onClick={() => removeActivity(index)}
                     title={t('common.delete')}
                   >
-                    <Trash2 className="h-4 w-4 text-red-600" />
+                    <Trash2 className="h-4 w-4 text-destructive" />
                   </Button>
                 </div>
               </div>
@@ -211,8 +290,8 @@ export function ActivitiesEditor({ value = [], onChange, error }: ActivitiesEdit
                   <Input
                     id={`activity-${index}-timeout`}
                     type="number"
-                    value={activity.timeout || ''}
-                    onChange={(e) => updateActivity(index, 'timeout', e.target.value ? parseInt(e.target.value) : undefined)}
+                    value={activity.timeoutMs || ''}
+                    onChange={(e) => updateActivity(index, 'timeoutMs', e.target.value ? parseInt(e.target.value) : undefined)}
                     placeholder="30000"
                     className="mt-1"
                   />
@@ -318,19 +397,24 @@ export function ActivitiesEditor({ value = [], onChange, error }: ActivitiesEdit
                 </Label>
                 <Textarea
                   id={`activity-${index}-config`}
-                  value={JSON.stringify(activity.config || {}, null, 2)}
-                  onChange={(e) => {
-                    try {
-                      const parsed = JSON.parse(e.target.value)
-                      updateActivity(index, 'config', parsed)
-                    } catch {
-                      // Invalid JSON, don't update
-                    }
-                  }}
+                  value={configTextFor(index, activity)}
+                  onChange={(e) => handleConfigTextChange(index, e.target.value)}
+                  onBlur={() => handleConfigBlur(index)}
+                  aria-invalid={configDrafts[index]?.error ? true : undefined}
+                  aria-describedby={configDrafts[index]?.error ? `activity-${index}-config-error` : undefined}
                   placeholder='{"key": "value"}'
                   rows={3}
                   className="mt-1 font-mono text-xs"
                 />
+                {configDrafts[index]?.error ? (
+                  <p
+                    id={`activity-${index}-config-error`}
+                    className="mt-1 text-xs text-status-error-text"
+                    role="alert"
+                  >
+                    {configDrafts[index]?.error}
+                  </p>
+                ) : null}
               </div>
               )}
             </div>

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

@@ -287,7 +287,7 @@ export function BusinessRulesSelector({
                         </Badge>
                       )}
                       {rule.enabled ? (
-                        <Badge variant="default" className="bg-emerald-500 text-xs">
+                        <Badge variant="default" className="bg-status-success-solid text-status-success-solid-foreground text-xs">
                           Enabled
                         </Badge>
                       ) : (

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

@@ -285,7 +285,7 @@ export function DefinitionTriggersEditor({
       <div className="rounded-lg border bg-card p-3 md:p-4">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
           <div className="flex items-center gap-2">
-            <Zap className="w-5 h-5 text-amber-500" />
+            <Zap className="w-5 h-5 text-status-warning-icon" />
             <h3 className="text-sm font-semibold uppercase text-muted-foreground">
               {t('workflows.triggers.title', 'Event Triggers')}
             </h3>
@@ -301,7 +301,7 @@ export function DefinitionTriggersEditor({
         </p>
 
         {value.length === 0 ? (
-          <Alert variant="info">
+          <Alert status="information">
             <AlertTitle>{t('workflows.triggers.empty.title', 'No triggers configured')}</AlertTitle>
             <AlertDescription>
               {t('workflows.triggers.empty.description', 'Click "Add Trigger" to create an event trigger that automatically starts this workflow.')}
@@ -567,7 +567,7 @@ export function DefinitionTriggersEditor({
               {t('common.cancel', 'Cancel')}
             </Button>
             <Button
-              variant="destructive"
+              variant="destructive-solid"
               onClick={() => deleteConfirmId && handleDelete(deleteConfirmId)}
             >
               {t('common.delete', 'Delete')}

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

@@ -241,9 +241,8 @@ export function EdgeEditDialogCrudForm({ edge, isOpen, onClose, onSave, onDelete
             extraActions={
               <Button
                 type="button"
-                variant="outline"
+                variant="destructive"
                 onClick={handleDelete}
-                className="text-red-600 border-red-200 hover:bg-red-50"
               >
                 <Trash2 className="size-4 mr-2" />
                 Delete Transition

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

@@ -540,7 +540,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
 
         <div className="space-y-4">
           {!isEditable ? (
-            <Alert variant="info">
+            <Alert status="information">
               <AlertDescription>
                 {t('workflows.nodeEditor.endStepsNotEditable')}
               </AlertDescription>
@@ -548,7 +548,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
           ) : isStartNode ? (
             <div className="space-y-4">
               {/* Info Alert for START nodes */}
-              <Alert variant="info">
+              <Alert status="information">
                 <AlertDescription>
                   {t('workflows.nodeEditor.startStepsInfo')}
                 </AlertDescription>
@@ -691,7 +691,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
 
                     {/* JSON Schema Format Notice */}
                     {isJsonSchemaFormat && (
-                      <Alert variant="info" className="mb-3">
+                      <Alert status="information" className="mb-3">
                         <AlertDescription>
                           {t('workflows.nodeEditor.jsonSchemaFormat')}
                         </AlertDescription>

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

@@ -115,7 +115,7 @@ export function NodeEditDialogCrudForm({ node, isOpen, onClose, onSave, onDelete
           column: 1,
           bare: true,
           component: () => (
-            <Alert variant="info">
+            <Alert status="information">
               <AlertDescription>
                 End nodes cannot be edited. They mark the completion of the workflow.
               </AlertDescription>
@@ -133,7 +133,7 @@ export function NodeEditDialogCrudForm({ node, isOpen, onClose, onSave, onDelete
           column: 1,
           bare: true,
           component: () => (
-            <Alert variant="info" className="mb-4">
+            <Alert status="information" className="mb-4">
               <AlertDescription>
                 Start nodes mark the beginning of the workflow. You can define pre-conditions that must pass before the workflow can be started.
               </AlertDescription>
@@ -474,7 +474,7 @@ export function NodeEditDialogCrudForm({ node, isOpen, onClose, onSave, onDelete
         <div className="flex-1 overflow-y-auto min-h-0 px-6">
           {/* JSON Schema Conversion Warning */}
           {showJsonSchemaWarning && (
-            <Alert variant="info" className="mb-4">
+            <Alert status="information" className="mb-4">
               <AlertDescription className="text-xs">
                 This form uses JSON Schema format. Fields have been converted for visual editing.
                 When you save, it will be converted to the simplified format. To preserve the original JSON Schema,
@@ -494,9 +494,8 @@ export function NodeEditDialogCrudForm({ node, isOpen, onClose, onSave, onDelete
               canDelete ? (
                 <Button
                   type="button"
-                  variant="outline"
+                  variant="destructive"
                   onClick={handleDelete}
-                  className="text-red-600 border-red-200 hover:bg-red-50"
                 >
                   <Trash2 className="size-4 mr-2" />
                   Delete Step

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

@@ -89,7 +89,7 @@ export function StepsEditor({ value = [], onChange, error }: StepsEditorProps) {
           <p className="text-sm text-muted-foreground">
             {t('workflows.form.descriptions.steps')}
           </p>
-          {error && <p className="text-sm text-red-600 mt-1">{error}</p>}
+          {error && <p className="text-sm text-status-error-text mt-1">{error}</p>}
         </div>
         <Button type="button" onClick={addStep} variant="outline" size="sm" className="w-full sm:w-auto">
           <Plus className="h-4 w-4 mr-1" />
@@ -162,7 +162,7 @@ export function StepsEditor({ value = [], onChange, error }: StepsEditorProps) {
                     onClick={() => removeStep(index)}
                     title={t('common.delete')}
                   >
-                    <Trash2 className="h-4 w-4 text-red-600" />
+                    <Trash2 className="h-4 w-4 text-destructive" />
                   </Button>
                 </div>
               </div>