@open-mercato/core 0.6.6-develop.6198.1.0822f97cc6 → 0.6.6-develop.6204.1.30b1f58642

package/src/modules/catalog/backend/catalog/products/[productId]/variants/[variantId]/page.tsx

@@ -235,8 +235,15 @@ export default function EditVariantPage({ params }: { params?: { productId?: str
               : currentProductId
         if (resolvedProductId) setCurrentProductId(resolvedProductId)
         const metadata = typeof record.metadata === 'object' && record.metadata ? { ...(record.metadata as Record<string, unknown>) } : {}
-        const attachments = await fetchVariantAttachments(variantId!)
-        const priceDrafts = await loadVariantPrices(variantId!, priceKinds)
+        const [attachments, priceDrafts, productRes] = await Promise.all([
+          fetchVariantAttachments(variantId!),
+          loadVariantPrices(variantId!, priceKinds),
+          resolvedProductId
+            ? apiCall<ProductResponse>(
+                `/api/catalog/products?id=${encodeURIComponent(resolvedProductId)}&page=1&pageSize=1`,
+              )
+            : Promise.resolve(null),
+        ])
         const priceIdMap: Record<string, string> = {}
         const priceVersionMap: Record<string, string | null> = {}
         Object.entries(priceDrafts).forEach(([kindId, draft]) => {
@@ -250,10 +257,7 @@ export default function EditVariantPage({ params }: { params?: { productId?: str
         const customDefaults = extractCustomFieldEntries(record)
         let loadedOptionDefinitions: OptionDefinition[] = []
         if (resolvedProductId) {
-          const productRes = await apiCall<ProductResponse>(
-            `/api/catalog/products?id=${encodeURIComponent(resolvedProductId)}&page=1&pageSize=1`,
-          )
-          if (productRes.ok) {
+          if (productRes?.ok) {
             const product = Array.isArray(productRes.result?.items) ? productRes.result?.items?.[0] : undefined
             if (product) {
               setProductTitle(typeof product.title === 'string' ? product.title : '')
@@ -311,12 +315,9 @@ export default function EditVariantPage({ params }: { params?: { productId?: str
             : typeof (record as any).taxRateId === 'string'
               ? (record as any).taxRateId
               : null
-        if (variantTaxRateId) {
-          const selectedVariantTaxRate = await fetchTaxRateById(variantTaxRateId).catch(() => null)
-          if (selectedVariantTaxRate && !cancelled) {
-            setTaxRates((current) => mergeTaxRateSummaries(current, selectedVariantTaxRate))
-          }
-        }
+        // The variant's own tax rate is hydrated into the select options by the
+        // dedicated tax-rate effect (it watches initialValues.taxRateId), so it no
+        // longer needs a serial fetch inside the primary loader.
         if (!cancelled) {
           const optionValues =
             typeof record.option_values === 'object' && record.option_values
@@ -393,7 +394,7 @@ export default function EditVariantPage({ params }: { params?: { productId?: str
     }
     load()
     return () => { cancelled = true }
-  }, [variantId, t, currentProductId, fetchTaxRateById, priceKinds])
+  }, [variantId, t, currentProductId, priceKinds])
 
   const groups = React.useMemo<CrudFormGroup[]>(() => {
     const list: CrudFormGroup[] = [

package/src/modules/customers/components/detail/ActivitiesSection.tsx

@@ -204,21 +204,30 @@ export function ActivitiesSection({
         return
       }
 
-      // In legacy mode, also fetch legacy activities and merge with canonical
+      // In legacy mode, also fetch legacy activities and merge with canonical.
+      // Legacy fallback uses known page numbers, so request every page up front
+      // and resolve them together instead of awaiting each one sequentially.
+      const legacyPageNumbers = Array.from({ length: loadedPages }, (_, index) => index + 1)
+      const legacyPayloads = await Promise.all(
+        legacyPageNumbers.map((legacyPage) => {
+          const legacyParams = new URLSearchParams({
+            entityId,
+            page: String(legacyPage),
+            pageSize: '50',
+            sortField: 'occurredAt',
+            sortDir: 'desc',
+          })
+          if (dealId) legacyParams.set('dealId', dealId)
+          return readApiResultOrThrow<{ items?: ActivitySummary[]; totalPages?: number }>(
+            `/api/customers/activities?${legacyParams.toString()}`,
+          ).catch(() => ({ items: [] as ActivitySummary[], totalPages: 1 }))
+        }),
+      )
+      // Merge in page order so timeline ordering stays stable regardless of
+      // which request settles first.
       const legacyItems: InteractionSummary[] = []
       let legacyTotalPages = 1
-      for (let legacyPage = 1; legacyPage <= loadedPages; legacyPage += 1) {
-        const legacyParams = new URLSearchParams({
-          entityId,
-          page: String(legacyPage),
-          pageSize: '50',
-          sortField: 'occurredAt',
-          sortDir: 'desc',
-        })
-        if (dealId) legacyParams.set('dealId', dealId)
-        const legacyPayload = await readApiResultOrThrow<{ items?: ActivitySummary[]; totalPages?: number }>(
-          `/api/customers/activities?${legacyParams.toString()}`,
-        ).catch(() => ({ items: [] as ActivitySummary[], totalPages: 1 }))
+      for (const legacyPayload of legacyPayloads) {
         legacyItems.push(...(Array.isArray(legacyPayload?.items) ? legacyPayload.items.map(normalizeLegacyActivity) : []))
         legacyTotalPages = typeof legacyPayload?.totalPages === 'number' ? legacyPayload.totalPages : legacyTotalPages
       }

package/src/modules/customers/components/detail/ActivityHistorySection.tsx

@@ -265,17 +265,23 @@ export function ActivityHistorySection({
       let combined = canonicalItems
 
       if (!useCanonicalInteractions) {
+        // Legacy fallback uses known page numbers, so request every page in
+        // parallel (sharing the abort signal) and merge them in page order.
+        const legacyPageNumbers = Array.from({ length: loadedPages }, (_, index) => index + 1)
+        const legacyPayloads = await Promise.all(
+          legacyPageNumbers.map((legacyPage) =>
+            readApiResultOrThrow<{ items?: ActivitySummary[]; totalPages?: number }>(
+              `/api/customers/activities?entityId=${encodeURIComponent(entityId)}&page=${legacyPage}&pageSize=20&sortField=occurredAt&sortDir=desc`,
+              { signal },
+            ).catch(() => ({ items: [] as ActivitySummary[], totalPages: 1 })),
+          ),
+        )
+        if (isStale()) return
         const legacyItems: InteractionSummary[] = []
         let legacyTotalPages = 1
-        for (let legacyPage = 1; legacyPage <= loadedPages; legacyPage += 1) {
-          const legacyPayload = await readApiResultOrThrow<{ items?: ActivitySummary[]; totalPages?: number }>(
-            `/api/customers/activities?entityId=${encodeURIComponent(entityId)}&page=${legacyPage}&pageSize=20&sortField=occurredAt&sortDir=desc`,
-            { signal },
-          ).catch(() => ({ items: [] as ActivitySummary[], totalPages: 1 }))
-          if (isStale()) return
+        for (const legacyPayload of legacyPayloads) {
           legacyItems.push(...(Array.isArray(legacyPayload.items) ? legacyPayload.items.map(normalizeLegacyActivity) : []))
           legacyTotalPages = typeof legacyPayload.totalPages === 'number' ? legacyPayload.totalPages : legacyTotalPages
-          if (legacyPage >= legacyTotalPages) break
         }
         const rangeStartDate = computeRangeStart(dateRange)
         const filteredLegacy = legacyItems.filter((item) => {

package/src/modules/dictionaries/components/DictionariesManager.tsx

@@ -18,6 +18,7 @@ import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
 import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
 import { surfaceRecordConflict } from '@open-mercato/ui/backend/conflicts'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { DictionaryEntriesEditor } from './DictionaryEntriesEditor'
@@ -71,6 +72,15 @@ export function DictionariesManager() {
   const [submitting, setSubmitting] = React.useState(false)
   const [deleting, setDeleting] = React.useState<string | null>(null)
   const selectionFromQueryApplied = React.useRef(false)
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    resourceId?: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: 'dictionaries:dictionary',
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
   const inheritedManageMessage = t('dictionaries.config.error.inheritedManage', 'Inherited dictionaries must be managed at the parent organization.')
   const requestedDictionaryId = searchParams?.get('dictionaryId') ?? null
   const requestedDictionaryKey = searchParams?.get('key')?.trim().toLowerCase() ?? null
@@ -226,31 +236,56 @@ export function DictionariesManager() {
         entrySortMode: form.entrySortMode,
       }
       if (dialog.mode === 'create') {
-        const call = await apiCall<Record<string, unknown>>('/api/dictionaries', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify(payload),
+        await runMutation({
+          operation: async () => {
+            const call = await apiCall<Record<string, unknown>>('/api/dictionaries', {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(payload),
+            })
+            if (!call.ok) {
+              throw new Error(typeof call.result?.error === 'string' ? call.result.error : 'Failed to create dictionary')
+            }
+            return call
+          },
+          context: {
+            formId: 'dictionaries:dictionary',
+            resourceKind: 'dictionaries.dictionary',
+            retryLastMutation,
+          },
+          mutationPayload: payload,
         })
-        if (!call.ok) {
-          throw new Error(typeof call.result?.error === 'string' ? call.result.error : 'Failed to create dictionary')
-        }
         flash(t('dictionaries.config.success.create', 'Dictionary created.'), 'success')
       } else if (dialog.dictionary) {
-        const call = await withScopedApiRequestHeaders(
-          buildOptimisticLockHeader(dialog.dictionary.updatedAt),
-          () =>
-            apiCall<Record<string, unknown>>(`/api/dictionaries/${dialog.dictionary!.id}`, {
-              method: 'PATCH',
-              headers: { 'content-type': 'application/json' },
-              body: JSON.stringify(payload),
-            }),
-        )
-        if (!call.ok) {
-          throw Object.assign(
-            new Error(typeof call.result?.error === 'string' ? call.result.error : 'Failed to update dictionary'),
-            { status: call.status, ...(call.result && typeof call.result === 'object' ? call.result : {}) },
-          )
-        }
+        const dictionaryId = dialog.dictionary.id
+        const expectedUpdatedAt = dialog.dictionary.updatedAt
+        await runMutation({
+          operation: () =>
+            withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(expectedUpdatedAt),
+              async () => {
+                const call = await apiCall<Record<string, unknown>>(`/api/dictionaries/${dictionaryId}`, {
+                  method: 'PATCH',
+                  headers: { 'content-type': 'application/json' },
+                  body: JSON.stringify(payload),
+                })
+                if (!call.ok) {
+                  throw Object.assign(
+                    new Error(typeof call.result?.error === 'string' ? call.result.error : 'Failed to update dictionary'),
+                    { status: call.status, ...(call.result && typeof call.result === 'object' ? call.result : {}) },
+                  )
+                }
+                return call
+              },
+            ),
+          context: {
+            formId: 'dictionaries:dictionary',
+            resourceKind: 'dictionaries.dictionary',
+            resourceId: dictionaryId,
+            retryLastMutation,
+          },
+          mutationPayload: payload,
+        })
         flash(t('dictionaries.config.success.update', 'Dictionary updated.'), 'success')
       }
       closeDialog()
@@ -265,7 +300,7 @@ export function DictionariesManager() {
     } finally {
       setSubmitting(false)
     }
-  }, [closeDialog, dialog, form.description, form.entrySortMode, form.key, form.name, inheritedManageMessage, loadDictionaries, t])
+  }, [closeDialog, dialog, form.description, form.entrySortMode, form.key, form.name, inheritedManageMessage, loadDictionaries, runMutation, retryLastMutation, t])
 
   const handleDelete = React.useCallback(
     async (dictionary: DictionarySummary) => {
@@ -288,16 +323,29 @@ export function DictionariesManager() {
       if (!confirmed) return
       setDeleting(dictionary.id)
       try {
-        const call = await withScopedApiRequestHeaders(
-          buildOptimisticLockHeader(dictionary.updatedAt),
-          () => apiCall<Record<string, unknown>>(`/api/dictionaries/${dictionary.id}`, { method: 'DELETE' }),
-        )
-        if (!call.ok) {
-          throw Object.assign(
-            new Error(typeof call.result?.error === 'string' ? call.result.error : 'Failed to delete dictionary'),
-            { status: call.status, ...(call.result && typeof call.result === 'object' ? call.result : {}) },
-          )
-        }
+        await runMutation({
+          operation: () =>
+            withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(dictionary.updatedAt),
+              async () => {
+                const call = await apiCall<Record<string, unknown>>(`/api/dictionaries/${dictionary.id}`, { method: 'DELETE' })
+                if (!call.ok) {
+                  throw Object.assign(
+                    new Error(typeof call.result?.error === 'string' ? call.result.error : 'Failed to delete dictionary'),
+                    { status: call.status, ...(call.result && typeof call.result === 'object' ? call.result : {}) },
+                  )
+                }
+                return call
+              },
+            ),
+          context: {
+            formId: 'dictionaries:dictionary',
+            resourceKind: 'dictionaries.dictionary',
+            resourceId: dictionary.id,
+            retryLastMutation,
+          },
+          mutationPayload: { id: dictionary.id },
+        })
         flash(t('dictionaries.config.success.delete', 'Dictionary deleted.'), 'success')
         await loadDictionaries()
       } catch (err) {
@@ -310,7 +358,7 @@ export function DictionariesManager() {
         setDeleting(null)
       }
     },
-    [confirm, inheritedManageMessage, loadDictionaries, t],
+    [confirm, inheritedManageMessage, loadDictionaries, runMutation, retryLastMutation, t],
   )
 
   const selectedDictionary = items.find((item) => item.id === selectedId) ?? null

package/src/modules/dictionaries/components/DictionaryEntriesEditor.tsx

@@ -17,6 +17,7 @@ import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
 import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
 import { surfaceRecordConflict } from '@open-mercato/ui/backend/conflicts'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useQueryClient } from '@tanstack/react-query'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -75,6 +76,19 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
   const [errors, setErrors] = React.useState<{ value?: string; label?: string }>({})
   const [translateEntry, setTranslateEntry] = React.useState<Entry | null>(null)
   const appearance = useAppearanceState(formState.icon, formState.color)
+  const mutationContextId = React.useMemo(
+    () => `dictionaries:dictionary_entry:${dictionaryId}`,
+    [dictionaryId],
+  )
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    resourceId?: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: mutationContextId,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
 
   const resetForm = React.useCallback(() => {
     setFormState({ value: '', label: '', color: null, icon: null })
@@ -140,39 +154,64 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
         icon: appearance.icon,
       }
       if (formState.id) {
-        const call = await withScopedApiRequestHeaders(
-          buildOptimisticLockHeader(formState.updatedAt),
-          () =>
-            apiCall<Record<string, unknown>>(
-              `/api/dictionaries/${dictionaryId}/entries/${formState.id}`,
-              {
-                method: 'PATCH',
-                headers: { 'content-type': 'application/json' },
-                body: JSON.stringify(payload),
+        const entryId = formState.id
+        const expectedUpdatedAt = formState.updatedAt
+        await runMutation({
+          operation: () =>
+            withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(expectedUpdatedAt),
+              async () => {
+                const call = await apiCall<Record<string, unknown>>(
+                  `/api/dictionaries/${dictionaryId}/entries/${entryId}`,
+                  {
+                    method: 'PATCH',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify(payload),
+                  },
+                )
+                if (!call.ok) {
+                  throw Object.assign(
+                    new Error(typeof call.result?.error === 'string' ? call.result.error : 'Failed to save dictionary entry'),
+                    { status: call.status, ...(call.result && typeof call.result === 'object' ? call.result : {}) },
+                  )
+                }
+                return call
               },
             ),
-        )
-        if (!call.ok) {
-          throw Object.assign(
-            new Error(typeof call.result?.error === 'string' ? call.result.error : 'Failed to save dictionary entry'),
-            { status: call.status, ...(call.result && typeof call.result === 'object' ? call.result : {}) },
-          )
-        }
+          context: {
+            formId: mutationContextId,
+            resourceKind: 'dictionaries.dictionary_entry',
+            resourceId: entryId,
+            retryLastMutation,
+          },
+          mutationPayload: payload,
+        })
         flash(t('dictionaries.config.entries.success.update', 'Dictionary entry updated.'), 'success')
       } else {
-        const call = await apiCall<Record<string, unknown>>(
-          `/api/dictionaries/${dictionaryId}/entries`,
-          {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify(payload),
+        await runMutation({
+          operation: async () => {
+            const call = await apiCall<Record<string, unknown>>(
+              `/api/dictionaries/${dictionaryId}/entries`,
+              {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(payload),
+              },
+            )
+            if (!call.ok) {
+              throw new Error(
+                typeof call.result?.error === 'string' ? call.result.error : 'Failed to create dictionary entry',
+              )
+            }
+            return call
           },
-        )
-        if (!call.ok) {
-          throw new Error(
-            typeof call.result?.error === 'string' ? call.result.error : 'Failed to create dictionary entry',
-          )
-        }
+          context: {
+            formId: mutationContextId,
+            resourceKind: 'dictionaries.dictionary_entry',
+            retryLastMutation,
+          },
+          mutationPayload: payload,
+        })
         flash(t('dictionaries.config.entries.success.create', 'Dictionary entry created.'), 'success')
       }
       await invalidateDictionaryEntries(queryClient, dictionaryId)
@@ -190,7 +229,7 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
     } finally {
       setIsSaving(false)
     }
-  }, [appearance, dictionaryId, formState.id, formState.label, formState.updatedAt, formState.value, queryClient, readOnly, readOnlyMessage, t])
+  }, [appearance, dictionaryId, formState.id, formState.label, formState.updatedAt, formState.value, mutationContextId, queryClient, readOnly, readOnlyMessage, runMutation, retryLastMutation, t])
 
   const handleDelete = React.useCallback(
     async (entry: Entry) => {
@@ -206,29 +245,47 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
       if (!confirmDelete) return
       setIsDeleting(true)
       try {
-        const call = await withScopedApiRequestHeaders(
-          buildOptimisticLockHeader(entry.updatedAt),
-          () =>
-            apiCall<Record<string, unknown>>(
-              `/api/dictionaries/${dictionaryId}/entries/${entry.id}`,
-              { method: 'DELETE' },
+        await runMutation({
+          operation: () =>
+            withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(entry.updatedAt),
+              async () => {
+                const call = await apiCall<Record<string, unknown>>(
+                  `/api/dictionaries/${dictionaryId}/entries/${entry.id}`,
+                  { method: 'DELETE' },
+                )
+                if (!call.ok) {
+                  throw Object.assign(
+                    new Error(
+                      typeof call.result?.error === 'string' ? call.result.error : 'Failed to delete dictionary entry',
+                    ),
+                    { status: call.status, ...(call.result && typeof call.result === 'object' ? call.result : {}) },
+                  )
+                }
+                return call
+              },
             ),
-        )
-        if (!call.ok) {
-          throw new Error(
-            typeof call.result?.error === 'string' ? call.result.error : 'Failed to delete dictionary entry',
-          )
-        }
+          context: {
+            formId: mutationContextId,
+            resourceKind: 'dictionaries.dictionary_entry',
+            resourceId: entry.id,
+            retryLastMutation,
+          },
+          mutationPayload: { id: entry.id },
+        })
         await invalidateDictionaryEntries(queryClient, dictionaryId)
         flash(t('dictionaries.config.entries.success.delete', 'Dictionary entry deleted.'), 'success')
       } catch (err) {
+        if (surfaceRecordConflict(err, t)) {
+          return
+        }
         console.error('Failed to delete dictionary entry', err)
         flash(t('dictionaries.config.entries.error.delete', 'Failed to delete dictionary entry.'), 'error')
       } finally {
         setIsDeleting(false)
       }
     },
-    [confirm, dictionaryId, queryClient, readOnly, readOnlyMessage, t],
+    [confirm, dictionaryId, mutationContextId, queryClient, readOnly, readOnlyMessage, runMutation, retryLastMutation, t],
   )
 
   const tableContent = React.useMemo(() => {

package/src/modules/dictionaries/components/DictionarySelectControl.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useQueryClient } from '@tanstack/react-query'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -35,6 +36,18 @@ export function DictionarySelectControl({
   const t = useT()
   const queryClient = useQueryClient()
   const scopeVersion = useOrganizationScopeVersion()
+  const mutationContextId = React.useMemo(
+    () => `dictionaries:dictionary_entry:inline:${dictionaryId}`,
+    [dictionaryId],
+  )
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: mutationContextId,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
   const [inlineCreateEnabled, setInlineCreateEnabled] = React.useState<boolean>(allowInlineCreate)
 
   React.useEffect(() => {
@@ -110,24 +123,36 @@ export function DictionarySelectControl({
 
   const createOption = React.useCallback(
     async (input: { value: string; label?: string; color?: string | null; icon?: string | null }) => {
-      const call = await apiCall<Record<string, unknown>>(
-        `/api/dictionaries/${dictionaryId}/entries`,
-        {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({
-            value: input.value,
-            label: input.label ?? input.value,
-            color: input.color,
-            icon: input.icon,
-          }),
-        },
-      )
-      if (!call.ok) {
-        throw new Error(
-          typeof call.result?.error === 'string' ? call.result.error : 'Failed to create dictionary entry',
-        )
+      const payload = {
+        value: input.value,
+        label: input.label ?? input.value,
+        color: input.color,
+        icon: input.icon,
       }
+      const call = await runMutation({
+        operation: async () => {
+          const result = await apiCall<Record<string, unknown>>(
+            `/api/dictionaries/${dictionaryId}/entries`,
+            {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(payload),
+            },
+          )
+          if (!result.ok) {
+            throw new Error(
+              typeof result.result?.error === 'string' ? result.result.error : 'Failed to create dictionary entry',
+            )
+          }
+          return result
+        },
+        context: {
+          formId: mutationContextId,
+          resourceKind: 'dictionaries.dictionary_entry',
+          retryLastMutation,
+        },
+        mutationPayload: payload,
+      })
       await invalidateDictionaryEntries(queryClient, dictionaryId)
       return {
         value: String(call.result?.value ?? input.value),
@@ -139,7 +164,7 @@ export function DictionarySelectControl({
         icon: typeof call.result?.icon === 'string' ? call.result.icon : null,
       }
     },
-    [dictionaryId, queryClient],
+    [dictionaryId, mutationContextId, queryClient, runMutation, retryLastMutation],
   )
 
   const labels = React.useMemo(