@open-mercato/ui 0.6.6-develop.6465.1.019f0fb26f → 0.6.6-develop.6472.1.1673e7e66b

package/src/backend/CrudForm.tsx

@@ -97,6 +97,7 @@ import { dispatchBackendMutationError } from './injection/mutationEvents'
 import { VersionHistoryAction } from './version-history/VersionHistoryAction'
 import { parseBooleanWithDefault } from '@open-mercato/shared/lib/boolean'
 import { cn } from '@open-mercato/shared/lib/utils'
+import { createLogger } from '@open-mercato/shared/lib/logger'
 import { useInjectionDataWidgets } from './injection/useInjectionDataWidgets'
 import { CollapsibleGroup, type CollapsibleGroupHandle } from './crud/CollapsibleGroup'
 import { SortableGroupHandleProvider, type SortableGroupHandleProps } from './crud/SortableGroupHandle'
@@ -110,6 +111,8 @@ import { RichEditor, type RichEditorLabels } from '../primitives/rich-editor'
 import MarkdownField from './inputs/MarkdownField'
 
 // Stable empty options array to avoid creating a new [] every render
+const logger = createLogger('ui').child({ component: 'CrudForm' })
+
 const EMPTY_OPTIONS: CrudFieldOption[] = []
 // Sentinel for the optional-Select clear affordance. Radix Select forbids
 // empty-string item values, so we use a stable non-empty token that maps to
@@ -1106,7 +1109,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           Object.entries(transformed as Record<string, unknown>).map(([key, value]) => [key, String(value)]),
         )
       } catch (err) {
-        console.error('[CrudForm] Error in transformValidation:', err)
+        logger.error('Error in transformValidation', { err })
         return fieldErrors
       }
     },
@@ -1186,7 +1189,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       void triggerInjectionEvent('onAppEvent', valuesRef.current as TValues, injectionContextRef.current, {
         appEvent: customEvent.detail,
       }).catch((err) => {
-        console.error('[CrudForm] Error in onAppEvent:', err)
+        logger.error('Error in onAppEvent', { err })
       })
     }
     window.addEventListener('om:event', handleEvent as EventListener)
@@ -1201,7 +1204,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       void triggerInjectionEvent('onVisibilityChange', valuesRef.current as TValues, injectionContextRef.current, {
         visible: document.visibilityState === 'visible',
       }).catch((err) => {
-        console.error('[CrudForm] Error in onVisibilityChange:', err)
+        logger.error('Error in onVisibilityChange', { err })
       })
     }
     document.addEventListener('visibilitychange', emitVisibility)
@@ -1325,7 +1328,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           }
           injectionRequestHeaders = result.requestHeaders
         } catch (err) {
-          console.error('[CrudForm] Error in onBeforeDelete:', err)
+          logger.error('Error in onBeforeDelete', { err })
           flash(t('ui.forms.flash.saveBlocked', 'Save blocked by validation'), 'error')
           return
         }
@@ -1336,7 +1339,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         try {
           await triggerInjectionEvent('onDelete', deletePayload, injectionContext)
         } catch (err) {
-          console.error('[CrudForm] Error in onDelete:', err)
+          logger.error('Error in onDelete', { err })
           flash(t('ui.forms.flash.saveBlocked', 'Save blocked by validation'), 'error')
           return
         }
@@ -1359,7 +1362,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         try {
           await triggerInjectionEvent('onAfterDelete', deletePayload, injectionContext)
         } catch (err) {
-          console.error('[CrudForm] Error in onAfterDelete:', err)
+          logger.error('Error in onAfterDelete', { err })
         }
       }
       try { flash(deleteSuccessMessage, 'success') } catch {}
@@ -1372,7 +1375,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         try {
           await triggerInjectionEvent('onDeleteError', deletePayload, injectionContext, { error: err })
         } catch (hookError) {
-          console.error('[CrudForm] Error in onDeleteError:', hookError)
+          logger.error('Error in onDeleteError', { err: hookError })
         }
       }
       try {
@@ -2000,7 +2003,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       const targetIndex = cloned.findIndex((group) => group.id === definition.group)
       const index = targetIndex >= 0 ? targetIndex : fallbackIndex
       if (targetIndex < 0 && process.env.NODE_ENV !== 'production') {
-        console.warn(`[CrudForm] Injected field "${definition.id}" targets group "${definition.group}" which does not exist. Appended to last group.`)
+        logger.warn('Injected field targets a group that does not exist; appended to last group', { fieldId: definition.id, group: definition.group })
       }
       if (index < 0) continue
       const fieldEntries = cloned[index].fields ?? []
@@ -2380,7 +2383,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         flash(message.text, message.severity)
       }
     }).catch((err) => {
-      console.error('[CrudForm] Error in onFieldChange:', err)
+      logger.error('Error in onFieldChange', { err })
     })
   }, [embedded, extendedInjectionEventsEnabled, flash, t, trackDirtyWhenEmbedded, translateValidationMessage, triggerInjectionEvent, updateEditedFieldMarker])
 
@@ -2501,7 +2504,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         dirtyBaselineValuesRef.current = { ...(transformed as Record<string, unknown>) }
         setValues(transformed as CrudFormValues<TValues>)
       } catch (err) {
-        console.error('[CrudForm] Error in transformDisplayData:', err)
+        logger.error('Error in transformDisplayData', { err })
       }
     }
     void run()
@@ -2647,7 +2650,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     }
     if (Object.keys(requiredErrors).length) {
       if (process.env.NODE_ENV !== 'production') {
-        console.debug('[crud-form] Required field errors prevented submit', requiredErrors)
+        logger.debug('Required field errors prevented submit', { requiredErrors })
       }
       const transformedErrors = await transformValidationErrors(requiredErrors)
       setErrors(transformedErrors)
@@ -2724,7 +2727,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           if (path) fieldErrors[path] = issue.message
         })
         if (process.env.NODE_ENV !== 'production') {
-          console.debug('[crud-form] Schema validation failed', res.error.issues)
+          logger.debug('Schema validation failed', { issues: res.error.issues })
         }
         const transformedErrors = await transformValidationErrors(fieldErrors)
         setErrors(translateValidationErrors(transformedErrors))
@@ -2760,7 +2763,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           }
         }
       } catch (err) {
-        console.error('[CrudForm] Error in transformFormData:', err)
+        logger.error('Error in transformFormData', { err })
       }
     }
 
@@ -2799,7 +2802,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         }
         injectionRequestHeaders = result.requestHeaders
       } catch (err) {
-        console.error('[CrudForm] Error in onBeforeSave:', err)
+        logger.error('Error in onBeforeSave', { err })
         flash(t('ui.forms.flash.saveBlocked', 'Save blocked by validation'), 'error')
         setPending(false)
         return
@@ -2834,7 +2837,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       try {
         await triggerInjectionEvent('onSave', submitValues, injectionContext)
       } catch (err) {
-        console.error('[CrudForm] Error in onSave:', err)
+        logger.error('Error in onSave', { err })
         flash(t('ui.forms.flash.saveBlocked', 'Save blocked by validation'), 'error')
         setPending(false)
         return
@@ -2861,7 +2864,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         try {
           await triggerInjectionEvent('onAfterSave', submitValues, injectionContext)
         } catch (err) {
-          console.error('[CrudForm] Error in onAfterSave:', err)
+          logger.error('Error in onAfterSave', { err })
         }
       }
 
@@ -2903,7 +2906,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         const transformedErrors = await transformValidationErrors(combinedFieldErrors)
         setErrors(translateValidationErrors(transformedErrors))
         if (process.env.NODE_ENV !== 'production') {
-          console.debug('[crud-form] Submission failed with field errors', transformedErrors)
+          logger.debug('Submission failed with field errors', { fieldErrors: transformedErrors })
         }
       }
 

package/src/backend/DataTable.tsx

@@ -92,6 +92,9 @@ import {
   useSortable,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui').child({ component: 'DataTable' })
 
 let refreshScheduled = false
 
@@ -276,7 +279,7 @@ export type DataTableProps<T> = {
    * bridge. The bridge is provided for one minor version; legacy callers SHOULD
    * migrate to the tree shape — see the spec
    * `.ai/specs/implemented/2026-05-10-crm-list-filter-redesign.md` "Migration & Backward
-   * Compatibility" section and `RELEASE_NOTES.md`.
+   * Compatibility" section and `UPGRADE_NOTES.md`.
    *
    * When the legacy flat shape is detected, DataTable converts it to a tree via
    * `flatToTree` for internal rendering and converts any user edits back via
@@ -393,7 +396,7 @@ function collectUniqueById<T extends { id: string }>(
     if (!entry.id) continue
     if (byId.has(entry.id)) {
       if (process.env.NODE_ENV !== 'production') {
-        console.warn(`[UMES] Duplicate injected ${warningScope} id "${entry.id}" detected. Keeping the first entry.`)
+        logger.warn('Duplicate injected id detected; keeping the first entry', { scope: warningScope, id: entry.id })
       }
       continue
     }
@@ -1057,12 +1060,7 @@ export function DataTable<T>({
     }
     if (!legacyAdvancedFilterWarnedRef.current && process.env.NODE_ENV !== 'production') {
       legacyAdvancedFilterWarnedRef.current = true
-      // eslint-disable-next-line no-console
-      console.warn(
-        '[DataTable] `advancedFilter.value` was passed as the legacy `AdvancedFilterState` shape. ' +
-        'This bridge will be removed in the next minor version — migrate to the tree shape ' +
-        '(`AdvancedFilterTree`, see `@open-mercato/shared/lib/query/advanced-filter-tree`).',
-      )
+      logger.warn('advancedFilter.value was passed as the legacy AdvancedFilterState shape. This bridge will be removed in the next minor version — migrate to the tree shape (AdvancedFilterTree, see @open-mercato/shared/lib/query/advanced-filter-tree).')
     }
     const legacy = advancedFilterInput as Extract<typeof advancedFilterInput, { value: AdvancedFilterState }>
     return {
@@ -1775,8 +1773,7 @@ export function DataTable<T>({
           : {}),
       }
       if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.debug('[DataTable] perspective payload', payload)
+        logger.debug('Perspective payload', { payload })
       }
       const existing = input.perspectiveId
         ? perspectiveData?.perspectives.find((p) => p.id === input.perspectiveId) ?? null

package/src/backend/JsonDisplay.tsx

@@ -4,6 +4,9 @@ import * as React from 'react'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { Button } from '../primitives/button'
 import { Check, Copy, ChevronRight, ChevronDown } from 'lucide-react'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui')
 
 type JsonDisplayProps = {
   data: unknown
@@ -51,7 +54,7 @@ export function JsonDisplay({
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     } catch (err) {
-      console.error('Failed to copy to clipboard:', err)
+      logger.error('Failed to copy to clipboard', { err })
     }
   }, [jsonString])
 

package/src/backend/__tests__/component-replacement.test.tsx

@@ -238,7 +238,7 @@ describe('component replacement', () => {
     expect(screen.queryByText('low:picked')).toBeNull()
     expect(screen.getByText('high:picked')).toBeInTheDocument()
     expect(warnSpy).toHaveBeenCalledWith(
-      `[UMES] Multiple replacements registered for "${componentId}". Highest-priority replacement is applied.`,
+      expect.stringContaining(`Multiple replacements registered; highest-priority replacement is applied component=useRegisteredComponent componentId=${componentId}`),
     )
     warnSpy.mockRestore()
   })

package/src/backend/confirm-dialog/useConfirmDialog.tsx

@@ -1,6 +1,9 @@
 "use client";
 import * as React from "react";
 import { ConfirmDialog } from "./ConfirmDialog";
+import { createLogger } from "@open-mercato/shared/lib/logger";
+
+const logger = createLogger("ui");
 
 function DialogMountTracker({ trackerRef }: { trackerRef: React.MutableRefObject<boolean> }) {
   React.useEffect(() => {
@@ -82,9 +85,7 @@ export function useConfirmDialog(): UseConfirmDialogReturn {
           process.env.NODE_ENV === "development" &&
           !isDialogElementRenderedRef.current
         ) {
-          console.warn(
-            "useConfirmDialog: confirm() was called but ConfirmDialogElement is not rendered. Add {ConfirmDialogElement} to your JSX."
-          );
+          logger.warn("useConfirmDialog: confirm() was called but ConfirmDialogElement is not rendered. Add {ConfirmDialogElement} to your JSX.");
         }
 
         // If dialog is already open or a previous interaction is still

package/src/backend/dashboard/DashboardScreen.tsx

@@ -14,6 +14,9 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { InjectionSpot } from '../injection/InjectionSpot'
 import { WidgetDataBatchProvider } from './widgetData'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui').child({ component: 'DashboardScreen' })
 
 type DashboardWidgetSize = 'sm' | 'md' | 'lg'
 
@@ -147,7 +150,7 @@ export function DashboardScreen() {
         setSettingsId(null)
       }
     } catch (err) {
-      console.error('Failed to load dashboard layout', err)
+      logger.error('Failed to load dashboard layout', { err })
       if (getDashboardWidgets().length === 0) {
         setHasRegisteredWidgets(false)
         setLayout([])
@@ -237,7 +240,7 @@ export function DashboardScreen() {
         if (!call.ok) throw new Error(`Failed with status ${call.status}`)
         setError(null)
       } catch (err) {
-        console.error('Failed to save layout', err)
+        logger.error('Failed to save layout', { err })
         setError(t('dashboard.saveError'))
       } finally {
         adjustSaving(-1)
@@ -256,7 +259,7 @@ export function DashboardScreen() {
       if (!call.ok) throw new Error(`Failed with status ${call.status}`)
       setError(null)
     } catch (err) {
-      console.error('Failed to update widget settings', err)
+      logger.error('Failed to update widget settings', { err })
       setError(t('dashboard.saveError'))
     } finally {
       adjustSaving(-1)
@@ -574,7 +577,7 @@ function DashboardWidgetCard({
       })
       .catch((err) => {
         if (cancelled) return
-        console.error('Failed to load widget module', err)
+        logger.error('Failed to load widget module', { err })
         setLoadError(t('dashboard.widget.loadError'))
         setLoading(false)
       })
@@ -615,7 +618,7 @@ function DashboardWidgetCard({
       try {
         return module.hydrateSettings(raw)
       } catch (err) {
-        console.warn('Failed to hydrate widget settings', err)
+        logger.warn('Failed to hydrate widget settings', { err })
         return raw
       }
     }
@@ -628,7 +631,7 @@ function DashboardWidgetCard({
       try {
         raw = module.dehydrateSettings(next as never)
       } catch (err) {
-        console.warn('Failed to dehydrate widget settings', err)
+        logger.warn('Failed to dehydrate widget settings', { err })
       }
     }
     onSettingsChange(raw)

package/src/backend/dashboard/widgetRegistry.ts

@@ -1,6 +1,9 @@
 import type { ModuleDashboardWidgetEntry } from '@open-mercato/shared/modules/registry'
 import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboard/widgets'
 import { applyDashboardWidgetOverridesToEntries } from '@open-mercato/shared/modules/overrides'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui')
 
 type Entry = ModuleDashboardWidgetEntry
 type LoadedWidgetModule = DashboardWidgetModule<any>
@@ -21,7 +24,7 @@ function resolveRegistrationWaiters(entries: Entry[]) {
 
 export function registerDashboardWidgets(entries: Entry[]) {
   if (_dashboardWidgetEntries !== null && process.env.NODE_ENV === 'development') {
-    console.debug('[Bootstrap] Dashboard widgets re-registered (this may occur during HMR)')
+    logger.debug('Dashboard widgets re-registered (this may occur during HMR)')
   }
   _dashboardWidgetEntries = applyDashboardWidgetOverridesToEntries(entries)
   entriesPromise = Promise.resolve(_dashboardWidgetEntries)

package/src/backend/detail/CustomDataSection.tsx

@@ -31,6 +31,9 @@ import { cn } from '@open-mercato/shared/lib/utils'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
 import { MarkdownPreview } from '../markdown'
 import { useRegisteredComponent } from '../injection/useRegisteredComponent'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui').child({ component: 'CustomDataSection' })
 
 const isTestEnv =
   typeof process !== 'undefined' &&
@@ -536,7 +539,7 @@ function CustomDataSectionImpl({
                   displays[option.value] = { label: option.label, href }
                 })
               } catch (error) {
-                console.debug('[CustomDataSection] Failed to load remote options for field', field.id, error)
+                logger.debug('Failed to load remote options for field', { fieldId: field.id, err: error })
               }
             }
 
@@ -552,7 +555,7 @@ function CustomDataSectionImpl({
                 const fetchedDisplays = await fetchRelationRecordDisplays(definition.optionsUrl!, relation, unresolvedIds, abortController.signal)
                 Object.assign(displays, fetchedDisplays)
               } catch (error) {
-                console.debug('[CustomDataSection] Failed to fetch relation record displays for field', field.id, error)
+                logger.debug('Failed to fetch relation record displays for field', { fieldId: field.id, err: error })
                 unresolvedIds.forEach((relationId) => {
                   if (!displays[relationId]) {
                     displays[relationId] = {

package/src/backend/detail/InlineEditors.tsx

@@ -20,6 +20,9 @@ import { format } from 'date-fns/format'
 import { LoadingMessage } from './LoadingMessage'
 import { mapCrudServerErrorToFormErrors } from '../utils/serverErrors'
 import { MarkdownPreview } from '../markdown'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui')
 
 function resolveInlineErrorMessage(err: unknown, fallbackMessage: string): string {
   const { message, fieldErrors } = mapCrudServerErrorToFormErrors(err)
@@ -791,7 +794,7 @@ export function InlineSelectEditor({
       setEditing(false)
     } catch (err) {
       const message = err instanceof Error ? err.message : t('ui.detail.inline.error', 'Failed to save value.')
-      console.error(message, err)
+      logger.error(message, { err })
     } finally {
       setSaving(false)
     }

package/src/backend/detail/TagsSection.tsx

@@ -8,6 +8,9 @@ import { DataLoader } from '@open-mercato/ui/primitives/DataLoader'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
 import { useRegisteredComponent } from '../injection/useRegisteredComponent'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui')
 
 export type TagOption = {
   id: string
@@ -135,7 +138,7 @@ function TagsSectionImpl({
         syncFetchedOptions(fetched)
         return fetched.map((tag) => tag.label)
       } catch (err) {
-        console.error('tags.section.loadSuggestions', err)
+        logger.error('Failed to load tag suggestions', { err })
         return []
       }
     },

package/src/backend/injection/InjectionSpot.tsx

@@ -16,6 +16,9 @@ import {
   type LoadedInjectionWidget,
 } from '@open-mercato/shared/modules/widgets/injection-loader'
 import { getWidgetSharedState } from './WidgetSharedState'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui').child({ component: 'InjectionSpot' })
 
 export type InjectionSpotProps<TContext = unknown, TData = unknown> = {
   spotId: InjectionSpotId
@@ -125,14 +128,14 @@ export function useInjectionWidgets<TContext = unknown>(
                 await widget.module.eventHandlers.onLoad(widgetContext)
                 onEventRef.current?.('onLoad', widget.widgetId)
               } catch (err) {
-                console.error(`[InjectionSpot] Error in onLoad for widget ${widget.widgetId}:`, err)
+                logger.error('Error in onLoad for widget', { widgetId: widget.widgetId, err })
               }
             }
           }
         }
       } catch (err) {
         if (!mounted) return
-        console.error(`[InjectionSpot] Failed to load widgets for spot ${spotId}:`, err)
+        logger.error('Failed to load widgets for spot', { spotId, err })
         setError(err instanceof Error ? err.message : String(err))
       } finally {
         if (mounted) setLoading(false)
@@ -182,7 +185,7 @@ export function InjectionSpot<TContext = unknown, TData = unknown>({
   }
 
   if (effectiveError) {
-    console.error(`[InjectionSpot] Error loading widgets for spot ${spotId}:`, effectiveError)
+    logger.error('Error loading widgets for spot', { spotId, err: effectiveError })
     return null
   }
 
@@ -241,7 +244,7 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
           }))
         )
       } catch (err) {
-        console.error(`[useInjectionSpotEvents] Failed to load widgets for spot ${spotId}:`, err)
+        logger.error('Failed to load widgets for spot', { hook: 'useInjectionSpotEvents', spotId, err })
       }
     }
     load()
@@ -358,7 +361,7 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
               pipelineData = handlerResult as TData
             }
           } catch (err) {
-            console.error(`[useInjectionSpotEvents] Error in ${event} for widget ${widget.widgetId}:`, err)
+            logger.error('Error in event handler for widget', { hook: 'useInjectionSpotEvents', event, widgetId: widget.widgetId, err })
           }
         }
         return { ok: true, data: pipelineData, applyToForm }
@@ -404,7 +407,7 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
             if (event === 'onBeforeSave') {
               const normalized = normalizeBeforeSave(result as WidgetBeforeSaveResult)
               if (!normalized.ok) {
-                console.log(`[useInjectionSpotEvents] Widget ${widget.widgetId} prevented ${event}`)
+                logger.info('Widget prevented event', { hook: 'useInjectionSpotEvents', widgetId: widget.widgetId, event })
                 return normalized
               }
               if (normalized.requestHeaders && Object.keys(normalized.requestHeaders).length > 0) {
@@ -415,7 +418,7 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
             if (event === 'onBeforeDelete') {
               const normalized = normalizeBeforeDelete(result as WidgetBeforeDeleteResult)
               if (!normalized.ok) {
-                console.log(`[useInjectionSpotEvents] Widget ${widget.widgetId} prevented ${event}`)
+                logger.info('Widget prevented event', { hook: 'useInjectionSpotEvents', widgetId: widget.widgetId, event })
                 return normalized
               }
               if (normalized.requestHeaders && Object.keys(normalized.requestHeaders).length > 0) {
@@ -442,7 +445,7 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
               }
             }
           } catch (err) {
-            console.error(`[useInjectionSpotEvents] Error in ${event} for widget ${widget.widgetId}:`, err)
+            logger.error('Error in event handler for widget', { hook: 'useInjectionSpotEvents', event, widgetId: widget.widgetId, err })
             if (event === 'onBeforeSave' || event === 'onBeforeDelete' || event === 'onBeforeNavigate') {
               const message =
                 err instanceof Error

package/src/backend/injection/eventBridge.ts

@@ -2,6 +2,9 @@
 import { useEffect, useRef } from 'react'
 import type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'
 import { APP_EVENT_DOM_NAME } from './useAppEvent'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui').child({ component: 'EventBridge' })
 
 const SSE_ENDPOINT = '/api/events/stream'
 const HEARTBEAT_TIMEOUT = 45_000 // Expect heartbeat every 30s, allow 45s grace
@@ -60,7 +63,7 @@ export function useEventBridge(): void {
     function resetHeartbeatTimer() {
       if (heartbeatTimer.current) clearTimeout(heartbeatTimer.current)
       heartbeatTimer.current = setTimeout(() => {
-        console.warn('[EventBridge] Heartbeat timeout — reconnecting')
+        logger.warn('Heartbeat timeout — reconnecting')
         disconnect()
         scheduleReconnect()
       }, HEARTBEAT_TIMEOUT)

package/src/backend/injection/useGuardedMutation.ts

@@ -6,6 +6,9 @@ import { GLOBAL_MUTATION_INJECTION_SPOT_ID, dispatchBackendMutationError } from
 import { withScopedApiRequestHeaders } from '../utils/apiCall'
 import { surfaceRecordConflict } from '../conflicts'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui').child({ component: 'useGuardedMutation' })
 
 type GuardedMutationContext = Record<string, unknown>
 
@@ -83,7 +86,7 @@ export function useGuardedMutation<TContext extends GuardedMutationContext>({
       try {
         await triggerEvent('onAfterSave', payload, context)
       } catch (error) {
-        console.error('[useGuardedMutation] Error in onAfterSave injection event:', error)
+        logger.error('Error in onAfterSave injection event', { err: error })
       }
 
       return result

package/src/backend/injection/useInjectionDataWidgets.ts

@@ -8,6 +8,9 @@ import {
   subscribeToInjectionRegistryChanges,
   type LoadedInjectionDataWidget,
 } from '@open-mercato/shared/modules/widgets/injection-loader'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui').child({ component: 'useInjectionDataWidgets' })
 
 export function useInjectionDataWidgets(spotId: InjectionSpotId): {
   widgets: LoadedInjectionDataWidget[]
@@ -40,7 +43,7 @@ export function useInjectionDataWidgets(spotId: InjectionSpotId): {
         setWidgets(loaded)
       } catch (loadError) {
         if (!mounted) return
-        console.error(`[useInjectionDataWidgets] Failed to load widgets for spot ${spotId}:`, loadError)
+        logger.error('Failed to load widgets for spot', { spotId, err: loadError })
         setError(loadError instanceof Error ? loadError.message : String(loadError))
         setWidgets([])
       } finally {

package/src/backend/injection/useRegisteredComponent.tsx

@@ -4,6 +4,9 @@ import * as React from 'react'
 import type { ComponentType } from 'react'
 import { getComponentEntry, getComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'
 import { useOverrideUserFeatures } from './ComponentOverrideProvider'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui').child({ component: 'useRegisteredComponent' })
 
 class ReplacementErrorBoundary extends React.Component<
   { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode },
@@ -38,7 +41,7 @@ export function useRegisteredComponent<TProps>(
     const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null
     if (!original) {
       if (process.env.NODE_ENV !== 'production' && !fallback) {
-        console.warn(`[UMES] Component "${componentId}" is not registered.`)
+        logger.warn('Component is not registered', { componentId })
       }
       const Missing = () => null
       return Missing as ComponentType<TProps>
@@ -46,9 +49,7 @@ export function useRegisteredComponent<TProps>(
     const overrides = getComponentOverrides(componentId, userFeatures)
     const replacementOverrides = overrides.filter((override) => 'replacement' in override)
     if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {
-      console.warn(
-        `[UMES] Multiple replacements registered for "${componentId}". Highest-priority replacement is applied.`,
-      )
+      logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })
     }
 
     let replacement: ComponentType<TProps> | null = null
@@ -78,10 +79,7 @@ export function useRegisteredComponent<TProps>(
       ) {
         const validation = replacementOverride.propsSchema.safeParse(transformed)
         if (!validation.success) {
-          console.error(
-            `[UMES] Props schema validation failed for replacement "${componentId}" from module "${replacementOverride.metadata?.module ?? 'unknown'}"`,
-            validation.error.format(),
-          )
+          logger.error('Props schema validation failed for replacement', { componentId, module: replacementOverride.metadata?.module ?? 'unknown', issues: validation.error.format() })
           return Fallback
         }
       }
@@ -90,7 +88,7 @@ export function useRegisteredComponent<TProps>(
           fallback={Fallback}
           onError={(error) => {
             const replacementModule = overrides.find((override) => 'replacement' in override)?.metadata?.module ?? 'unknown'
-            console.error(`[UMES] Component replacement failed for "${componentId}" from module "${replacementModule}"`, error)
+            logger.error('Component replacement failed', { componentId, module: replacementModule, err: error })
           }}
         >
           {React.createElement(wrapped as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)}

package/src/backend/injection/widgetRegistry.ts

@@ -1,6 +1,9 @@
 import type { ModuleInjectionWidgetEntry } from '@open-mercato/shared/modules/registry'
 import type { InjectionWidgetModule } from '@open-mercato/shared/modules/widgets/injection'
 import { applyInjectionWidgetOverridesToEntries } from '@open-mercato/shared/modules/overrides'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('ui')
 
 type Entry = ModuleInjectionWidgetEntry
 
@@ -9,7 +12,7 @@ let _injectionWidgetEntries: Entry[] | null = null
 
 export function registerInjectionWidgets(entries: Entry[]) {
   if (_injectionWidgetEntries !== null && process.env.NODE_ENV === 'development') {
-    console.debug('[Bootstrap] Injection widgets re-registered (this may occur during HMR)')
+    logger.debug('Injection widgets re-registered (this may occur during HMR)')
   }
   _injectionWidgetEntries = applyInjectionWidgetOverridesToEntries(entries)
 }