@open-mercato/core 0.6.6-develop.6201.1.8ceb502c4b → 0.6.6-develop.6205.1.109e4b6a84

package/src/modules/catalog/backend/catalog/products/[id]/page.tsx

@@ -459,45 +459,54 @@ export default function EditCatalogProductPage({
         setVariantMediaGroups([]);
         return;
       }
-      const CONCURRENCY = 5;
-      const groups: VariantMediaGroup[] = [];
-      for (let i = 0; i < mapped.length; i += CONCURRENCY) {
-        const batch = mapped.slice(i, i + CONCURRENCY);
-        const results = await Promise.all(
-          batch.map(async (variant) => {
-            try {
-              const res = await apiCall<AttachmentListResponse>(
-                `/api/attachments?entityId=${encodeURIComponent(E.catalog.catalog_product_variant)}&recordId=${encodeURIComponent(variant.id)}`,
-              );
-              if (!res.ok) return null;
-              const mediaItems: ProductMediaItem[] = (res.result?.items ?? []).map(
-                (item) => ({
-                  id: item.id,
-                  url: item.url,
-                  fileName: item.fileName,
-                  fileSize: item.fileSize,
-                  thumbnailUrl: item.thumbnailUrl ?? undefined,
-                }),
-              );
-              if (!mediaItems.length) return null;
-              return {
-                variantId: variant.id,
-                variantName: variant.name,
-                defaultMediaId: variant.defaultMediaId,
-                items: mediaItems,
-                editUrl: `/backend/catalog/products/${id}/variants/${variant.id}`,
-              } satisfies VariantMediaGroup;
-            } catch {
-              // Non-critical: variant media is optional; gallery degrades gracefully
-              return null;
+      // Load per-variant media in the background so the product form is not blocked
+      // by the batched attachment fetches; the readonly gallery fills in once ready.
+      void (async () => {
+        try {
+          const CONCURRENCY = 5;
+          const groups: VariantMediaGroup[] = [];
+          for (let i = 0; i < mapped.length; i += CONCURRENCY) {
+            const batch = mapped.slice(i, i + CONCURRENCY);
+            const results = await Promise.all(
+              batch.map(async (variant) => {
+                try {
+                  const res = await apiCall<AttachmentListResponse>(
+                    `/api/attachments?entityId=${encodeURIComponent(E.catalog.catalog_product_variant)}&recordId=${encodeURIComponent(variant.id)}`,
+                  );
+                  if (!res.ok) return null;
+                  const mediaItems: ProductMediaItem[] = (res.result?.items ?? []).map(
+                    (item) => ({
+                      id: item.id,
+                      url: item.url,
+                      fileName: item.fileName,
+                      fileSize: item.fileSize,
+                      thumbnailUrl: item.thumbnailUrl ?? undefined,
+                    }),
+                  );
+                  if (!mediaItems.length) return null;
+                  return {
+                    variantId: variant.id,
+                    variantName: variant.name,
+                    defaultMediaId: variant.defaultMediaId,
+                    items: mediaItems,
+                    editUrl: `/backend/catalog/products/${id}/variants/${variant.id}`,
+                  } satisfies VariantMediaGroup;
+                } catch {
+                  // Non-critical: variant media is optional; gallery degrades gracefully
+                  return null;
+                }
+              }),
+            );
+            for (const result of results) {
+              if (result) groups.push(result);
             }
-          }),
-        );
-        for (const result of results) {
-          if (result) groups.push(result);
+          }
+          setVariantMediaGroups(groups);
+        } catch (err) {
+          console.error("catalog.variants.media.fetch failed", err);
+          setVariantMediaGroups([]);
         }
-      }
-      setVariantMediaGroups(groups);
+      })();
     } catch (err) {
       console.error("catalog.variants.fetch failed", err);
       setVariants([]);
@@ -635,9 +644,18 @@ export default function EditCatalogProductPage({
             : typeof record.taxRateId === "string"
               ? record.taxRateId
               : null;
-        const optionSchemaTemplate = optionSchemaId
-          ? await fetchOptionSchemaTemplate(optionSchemaId)
-          : null;
+        const [optionSchemaTemplate, attachments, conversionsRes] =
+          await Promise.all([
+            optionSchemaId
+              ? fetchOptionSchemaTemplate(optionSchemaId)
+              : Promise.resolve(null),
+            fetchAttachments(productId!),
+            apiCall<{ items?: Array<Record<string, unknown>> }>(
+              `/api/catalog/product-unit-conversions?productId=${encodeURIComponent(productId!)}&page=1&pageSize=100`,
+              undefined,
+              { fallback: { items: [] } },
+            ),
+          ]);
         const normalizedSchema = normalizeOptionSchemaRecord(
           optionSchemaTemplate?.schema,
         );
@@ -647,14 +665,6 @@ export default function EditCatalogProductPage({
         if (!optionInputs.length) {
           optionInputs = readOptionSchema(metadata);
         }
-        const [attachments, conversionsRes] = await Promise.all([
-          fetchAttachments(productId!),
-          apiCall<{ items?: Array<Record<string, unknown>> }>(
-            `/api/catalog/product-unit-conversions?productId=${encodeURIComponent(productId!)}&page=1&pageSize=100`,
-            undefined,
-            { fallback: { items: [] } },
-          ),
-        ]);
         const conversionRows = conversionsRes.ok
           ? readProductConversionRows(conversionsRes.result?.items)
           : [];

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
@@ -121,16 +131,19 @@ export function DictionariesManager() {
         : []
       const filtered = list.filter((dictionary: DictionarySummary) => dictionary.managerVisibility !== 'hidden')
       setItems(filtered)
-      if (!filtered.find((dict: DictionarySummary) => dict.id === selectedId)) {
-        setSelectedId(filtered.length ? filtered[0].id : null)
-      }
+      setSelectedId((current) => {
+        if (current && filtered.some((dict: DictionarySummary) => dict.id === current)) {
+          return current
+        }
+        return filtered.length ? filtered[0].id : null
+      })
     } catch (err) {
       console.error('Failed to load dictionaries', err)
       flash(t('dictionaries.config.error.load', 'Failed to load dictionaries.'), 'error')
     } finally {
       setLoading(false)
     }
-  }, [selectedId, t])
+  }, [t])
 
   React.useEffect(() => {
     loadDictionaries().catch(() => {})
@@ -226,31 +239,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 +303,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 +326,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 +361,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(() => {