@freighttech/ui 0.13.18

package/src/backend/detail/index.ts

@@ -0,0 +1,46 @@
+export * from './InlineEditors'
+export * from './DetailFieldsSection'
+export * from './LoadingMessage'
+export * from './ErrorMessage'
+export * from './AccessDeniedMessage'
+export * from './TabEmptyState'
+export * from './CustomDataSection'
+export * from './TagsSection'
+export { NotesSection, mapCommentSummary } from './NotesSection'
+export type { NotesSectionProps, CommentSummary, SectionAction, TabEmptyStateConfig } from './NotesSection'
+export { ActivitiesSection } from './ActivitiesSection'
+export type {
+  ActivitiesSectionProps,
+  ActivitiesDataAdapter,
+  ActivitySummary,
+  ActivityCreatePayload,
+  ActivityUpdatePayload,
+  ActivityFormBaseValues,
+  ActivityFormSubmitPayload,
+} from './ActivitiesSection'
+export { AddressesSection } from './AddressesSection'
+export type { AddressesSectionProps, AddressDataAdapter, AddressSummary } from './AddressesSection'
+export { default as AddressTiles } from './AddressTiles'
+export type { AddressInput, AddressValue as AddressTileValue, Translator as AddressTilesTranslator } from './AddressTiles'
+export { default as AddressEditor } from './AddressEditor'
+export type {
+  AddressTypeOption,
+  AddressTypesAdapter,
+  AddressEditorDraft,
+  AddressEditorField,
+} from './AddressEditor'
+export {
+  AddressView,
+  formatAddressJson,
+  formatAddressLines,
+  formatAddressString,
+} from './addressFormat'
+export type {
+  AddressFormatStrategy,
+  AddressJsonShape,
+  AddressValue as AddressFormatValue,
+} from './addressFormat'
+export * from './AttachmentMetadataDialog'
+export * from './AttachmentDeleteDialog'
+export * from './AttachmentsSection'
+export * from './AttachmentVisualPreview'

package/src/backend/devtools/UmesDevToolsPanel.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { Button } from '@freighttech/ui/primitives/button'
+import { IconButton } from '@freighttech/ui/primitives/icon-button'
+import { useUmesDevTools } from './useUmesDevTools'
+import { ExtensionPointList } from './components/ExtensionPointList'
+import { ConflictWarnings } from './components/ConflictWarnings'
+import { EnricherTiming } from './components/EnricherTiming'
+import { InterceptorActivity } from './components/InterceptorActivity'
+import { EventFlow } from './components/EventFlow'
+
+const isDevToolsEnabled = process.env.NEXT_PUBLIC_UMES_DEVTOOLS === 'true'
+
+type TabId = 'extensions' | 'conflicts' | 'timing' | 'interceptors' | 'events'
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: 'extensions', label: 'Extensions' },
+  { id: 'conflicts', label: 'Conflicts' },
+  { id: 'timing', label: 'Timing' },
+  { id: 'interceptors', label: 'Interceptors' },
+  { id: 'events', label: 'Events' },
+]
+
+export function UmesDevToolsPanel() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState<TabId>('extensions')
+  const data = useUmesDevTools(isOpen)
+
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.ctrlKey && event.shiftKey && event.key === 'U') {
+      event.preventDefault()
+      setIsOpen((prev) => !prev)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isDevToolsEnabled) return
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [handleKeyDown])
+
+  if (!isDevToolsEnabled || !isOpen) return null
+
+  const conflictCount = data.conflicts.length
+  const hasErrors = data.conflicts.some((c) => c.severity === 'error')
+
+  return (
+    <div className="fixed inset-y-0 right-0 z-[9999] flex w-[440px] flex-col border-l bg-background text-foreground shadow-lg"
+      style={{ fontSize: '13px' }}
+    >
+      {/* Header */}
+      <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5">
+        <div className="flex items-center gap-2">
+          <strong className="text-sm">UMES DevTools</strong>
+          <span className="rounded bg-blue-100 px-1.5 py-px text-[10px] font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+            {data.extensions.length} ext
+          </span>
+          {conflictCount > 0 && (
+            <span className={`rounded px-1.5 py-px text-[10px] font-semibold ${hasErrors ? 'bg-red-100 text-red-600 dark:bg-red-900/40 dark:text-red-400' : 'bg-amber-100 text-amber-600 dark:bg-amber-900/40 dark:text-amber-400'}`}>
+              {conflictCount} conflict{conflictCount !== 1 ? 's' : ''}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-auto px-2 py-0.5 text-[11px]"
+            onClick={() => data.refresh()}
+          >
+            Refresh
+          </Button>
+          <IconButton
+            type="button"
+            variant="ghost"
+            size="xs"
+            onClick={() => setIsOpen(false)}
+            aria-label="Close DevTools"
+          >
+            <span className="text-lg leading-none">&times;</span>
+          </IconButton>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex shrink-0 border-b bg-muted/50">
+        {TABS.map((tab) => (
+          <Button
+            key={tab.id}
+            type="button"
+            variant="ghost"
+            size="sm"
+            className={`h-auto flex-1 rounded-none border-b-2 px-1 py-2 text-[11px] hover:bg-transparent ${
+              activeTab === tab.id
+                ? 'border-primary font-semibold text-primary'
+                : 'border-transparent text-muted-foreground'
+            }`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </Button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto p-3 px-4">
+        {activeTab === 'extensions' && <ExtensionPointList extensions={data.extensions} />}
+        {activeTab === 'conflicts' && <ConflictWarnings conflicts={data.conflicts} />}
+        {activeTab === 'timing' && <EnricherTiming entries={data.enricherTimings} />}
+        {activeTab === 'interceptors' && <InterceptorActivity entries={data.interceptorActivity} />}
+        {activeTab === 'events' && <EventFlow entries={data.eventFlow} />}
+      </div>
+
+      {/* Footer */}
+      <div className="shrink-0 border-t bg-muted/50 px-4 py-1.5 text-center text-[10px] text-muted-foreground">
+        Ctrl+Shift+U to toggle | Dev mode only
+      </div>
+    </div>
+  )
+}

package/src/backend/devtools/components/ConflictWarnings.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import type { UmesConflict } from '@open-mercato/shared/lib/umes/devtools-types'
+
+export function ConflictWarnings({ conflicts }: { conflicts: UmesConflict[] }) {
+  if (conflicts.length === 0) {
+    return (
+      <p className="text-xs italic text-emerald-600 dark:text-emerald-400">
+        No conflicts detected
+      </p>
+    )
+  }
+
+  return (
+    <div>
+      {conflicts.map((conflict, idx) => (
+        <div
+          key={idx}
+          className={`mb-1.5 rounded border-l-[3px] p-2 text-xs ${
+            conflict.severity === 'error'
+              ? 'border-l-red-500 bg-red-50 dark:bg-red-950/30'
+              : 'border-l-amber-500 bg-amber-50 dark:bg-amber-950/30'
+          }`}
+        >
+          <div className="mb-0.5 font-semibold">
+            {conflict.severity === 'error' ? 'Error' : 'Warning'}: {conflict.type}
+          </div>
+          <div className="text-foreground/80">{conflict.message}</div>
+          <div className="mt-0.5 text-[11px] text-muted-foreground">
+            Modules: {conflict.moduleIds.join(', ')} | Target: {conflict.target}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/backend/devtools/components/EnricherTiming.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import type { EnricherTimingEntry } from '@open-mercato/shared/lib/umes/devtools-types'
+
+function getTimingClasses(ms: number): { text: string; bar: string } {
+  if (ms >= 500) return { text: 'text-red-500', bar: 'bg-red-500' }
+  if (ms >= 100) return { text: 'text-amber-500', bar: 'bg-amber-500' }
+  return { text: 'text-emerald-500', bar: 'bg-emerald-500' }
+}
+
+function getTimingBarWidth(ms: number, maxMs: number): string {
+  if (maxMs === 0) return '0%'
+  return `${Math.min(100, (ms / maxMs) * 100)}%`
+}
+
+export function EnricherTiming({ entries }: { entries: EnricherTimingEntry[] }) {
+  if (entries.length === 0) {
+    return <p className="text-xs italic text-muted-foreground">No timing data</p>
+  }
+
+  const recent = entries.slice(-20).reverse()
+  const maxMs = Math.max(...recent.map((e) => e.durationMs), 1)
+
+  return (
+    <div>
+      {recent.map((entry, idx) => {
+        const classes = getTimingClasses(entry.durationMs)
+        return (
+          <div key={idx} className="border-b border-border/50 py-1 text-xs">
+            <div className="mb-0.5 flex justify-between">
+              <span className="font-medium">{entry.enricherId}</span>
+              <span className={`font-mono font-semibold ${classes.text}`}>
+                {entry.durationMs}ms
+              </span>
+            </div>
+            <div className="h-1 overflow-hidden rounded bg-muted">
+              <div
+                className={`h-full rounded transition-[width] duration-300 ${classes.bar}`}
+                style={{ width: getTimingBarWidth(entry.durationMs, maxMs) }}
+              />
+            </div>
+            <div className="mt-px text-[11px] text-muted-foreground">
+              {entry.targetEntity} | {entry.moduleId}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/backend/devtools/components/EventFlow.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import type { EventFlowEntry } from '@open-mercato/shared/lib/umes/devtools-types'
+
+const RESULT_CLASSES: Record<string, { text: string; bg: string }> = {
+  allowed: { text: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-950/30' },
+  blocked: { text: 'text-red-600 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-950/30' },
+  error: { text: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-950/30' },
+}
+
+export function EventFlow({ entries }: { entries: EventFlowEntry[] }) {
+  if (entries.length === 0) {
+    return (
+      <p className="text-xs italic text-muted-foreground">
+        No event flow data
+      </p>
+    )
+  }
+
+  const recent = entries.slice(-15).reverse()
+
+  return (
+    <div>
+      {recent.map((entry, idx) => {
+        const classes = RESULT_CLASSES[entry.result] ?? RESULT_CLASSES.allowed
+        return (
+          <div
+            key={idx}
+            className={`mb-0.5 flex items-center justify-between rounded p-1 px-2 text-xs ${classes.bg}`}
+          >
+            <div>
+              <span className="font-medium">{entry.eventName}</span>
+              <span className="ml-1.5 text-[11px] text-muted-foreground">
+                {entry.widgetId}
+              </span>
+            </div>
+            <span className={`text-[11px] font-semibold ${classes.text}`}>
+              {entry.result}
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/backend/devtools/components/ExtensionPointList.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import type { UmesExtensionInfo } from '@open-mercato/shared/lib/umes/devtools-types'
+
+const TYPE_COLORS: Record<string, string> = {
+  enricher: 'bg-blue-500',
+  interceptor: 'bg-amber-500',
+  'component-override': 'bg-violet-500',
+  'injection-widget': 'bg-emerald-500',
+  'injection-data-widget': 'bg-cyan-500',
+}
+
+export function ExtensionPointList({ extensions }: { extensions: UmesExtensionInfo[] }) {
+  if (extensions.length === 0) {
+    return <p className="text-xs italic text-muted-foreground">No extensions registered</p>
+  }
+
+  const grouped = new Map<string, UmesExtensionInfo[]>()
+  for (const ext of extensions) {
+    const key = ext.type
+    const group = grouped.get(key) ?? []
+    group.push(ext)
+    grouped.set(key, group)
+  }
+
+  return (
+    <div>
+      {Array.from(grouped.entries()).map(([type, items]) => (
+        <div key={type} className="mb-3">
+          <div className="mb-1 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide">
+            <span className={`inline-block size-2 rounded-full ${TYPE_COLORS[type] ?? 'bg-muted-foreground'}`} />
+            {type} ({items.length})
+          </div>
+          <div className="pl-3.5">
+            {items.map((ext, idx) => (
+              <div
+                key={`${ext.id}-${idx}`}
+                className="flex items-center justify-between border-b border-border/50 py-1 text-xs"
+              >
+                <div>
+                  <span className="font-medium">{ext.id}</span>
+                  <span className="ml-1.5 text-muted-foreground">[{ext.moduleId}]</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] text-muted-foreground">{ext.target}</span>
+                  {ext.priority !== 0 && (
+                    <span className="rounded bg-muted px-1.5 py-px text-[10px] font-semibold">
+                      P{ext.priority}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/backend/devtools/components/InterceptorActivity.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import type { InterceptorActivityEntry } from '@open-mercato/shared/lib/umes/devtools-types'
+
+const RESULT_CLASSES: Record<string, { text: string; bg: string }> = {
+  allowed: { text: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-950/30' },
+  blocked: { text: 'text-red-600 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-950/30' },
+  modified: { text: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-950/30' },
+}
+
+export function InterceptorActivity({ entries }: { entries: InterceptorActivityEntry[] }) {
+  if (entries.length === 0) {
+    return (
+      <p className="text-xs italic text-muted-foreground">
+        No interceptor activity
+      </p>
+    )
+  }
+
+  const recent = entries.slice(-15).reverse()
+
+  return (
+    <div>
+      {recent.map((entry, idx) => {
+        const classes = RESULT_CLASSES[entry.result] ?? RESULT_CLASSES.allowed
+        return (
+          <div key={idx} className={`mb-1 rounded p-1.5 px-2 text-xs ${classes.bg}`}>
+            <div className="flex items-center justify-between">
+              <span className="font-medium">{entry.interceptorId}</span>
+              <span className={`text-[11px] font-semibold uppercase ${classes.text}`}>
+                {entry.result}
+              </span>
+            </div>
+            <div className="mt-0.5 text-[11px] text-muted-foreground">
+              {entry.method} {entry.route} | {entry.durationMs}ms
+              {entry.statusCode ? ` | ${entry.statusCode}` : ''}
+            </div>
+            {entry.message && (
+              <div className="mt-px text-[11px] text-muted-foreground/70">
+                {entry.message}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/backend/devtools/index.ts

@@ -0,0 +1,2 @@
+export { UmesDevToolsPanel } from './UmesDevToolsPanel'
+export { useUmesDevTools } from './useUmesDevTools'

package/src/backend/devtools/useUmesDevTools.ts

@@ -0,0 +1,188 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import type {
+  UmesDevToolsData,
+  UmesExtensionInfo,
+  UmesComponentOverrideInfo,
+} from '@open-mercato/shared/lib/umes/devtools-types'
+import { getEnricherTimingEntries } from '@open-mercato/shared/lib/umes/enricher-timing'
+import { getInterceptorActivityEntries } from '@open-mercato/shared/lib/umes/interceptor-activity'
+
+const EMPTY_DATA: UmesDevToolsData = {
+  extensions: [],
+  conflicts: [],
+  enricherTimings: [],
+  interceptorActivity: [],
+  eventFlow: [],
+  componentReplacements: [],
+}
+
+const isDev = process.env.NODE_ENV === 'development'
+
+export function useUmesDevTools(isActive = true): UmesDevToolsData & { refresh: () => void } {
+  const [data, setData] = useState<UmesDevToolsData>(EMPTY_DATA)
+
+  const refresh = useCallback(() => {
+    if (!isDev) return
+    setData(collectDevToolsData())
+  }, [])
+
+  useEffect(() => {
+    if (!isDev || !isActive) return
+    refresh()
+
+    const interval = setInterval(refresh, 3000)
+    return () => clearInterval(interval)
+  }, [refresh, isActive])
+
+  return { ...(isDev ? data : EMPTY_DATA), refresh }
+}
+
+function collectDevToolsData(): UmesDevToolsData {
+  const extensions: UmesExtensionInfo[] = []
+  const componentReplacements: UmesComponentOverrideInfo[] = []
+
+  // Collect enricher data from global registry
+  try {
+    const enricherEntries = ((globalThis as Record<string, unknown>).__openMercatoResponseEnrichers__ ?? []) as Array<{
+      moduleId: string
+      enricher: {
+        id: string
+        targetEntity: string
+        priority?: number
+        timeout?: number
+        critical?: boolean
+        cache?: unknown
+        queryEngine?: unknown
+        features?: string[]
+      }
+    }>
+    for (const entry of enricherEntries) {
+      extensions.push({
+        type: 'enricher',
+        id: entry.enricher.id,
+        moduleId: entry.moduleId,
+        target: entry.enricher.targetEntity,
+        priority: entry.enricher.priority ?? 0,
+        features: entry.enricher.features,
+        targetEntity: entry.enricher.targetEntity,
+        timeout: entry.enricher.timeout,
+        critical: entry.enricher.critical,
+        hasCacheConfig: !!entry.enricher.cache,
+        hasQueryEngineConfig: !!entry.enricher.queryEngine,
+      })
+    }
+  } catch {
+    // enricher registry not available on client
+  }
+
+  // Collect interceptor data from global registry
+  try {
+    const interceptorEntries = ((globalThis as Record<string, unknown>).__openMercatoApiInterceptors__ ?? []) as Array<{
+      moduleId: string
+      interceptor: {
+        id: string
+        targetRoute: string
+        methods: string[]
+        priority?: number
+        features?: string[]
+        before?: unknown
+        after?: unknown
+      }
+    }>
+    for (const entry of interceptorEntries) {
+      extensions.push({
+        type: 'interceptor',
+        id: entry.interceptor.id,
+        moduleId: entry.moduleId,
+        target: entry.interceptor.targetRoute,
+        priority: entry.interceptor.priority ?? 0,
+        features: entry.interceptor.features,
+        targetRoute: entry.interceptor.targetRoute,
+        methods: entry.interceptor.methods,
+        hasBefore: !!entry.interceptor.before,
+        hasAfter: !!entry.interceptor.after,
+      })
+    }
+  } catch {
+    // interceptor registry not available on client
+  }
+
+  // Collect component overrides from global registry
+  try {
+    const globalState = (globalThis as Record<string, unknown>).__openMercatoComponentRegistry__ as {
+      overrides?: Array<{
+        target: { componentId: string }
+        priority: number
+        features?: string[]
+        metadata?: { module?: string }
+        replacement?: unknown
+        wrapper?: unknown
+        propsTransform?: unknown
+      }>
+    } | undefined
+    if (globalState?.overrides) {
+      for (const override of globalState.overrides) {
+        const kind = override.replacement
+          ? 'replacement' as const
+          : override.wrapper
+            ? 'wrapper' as const
+            : 'propsTransform' as const
+        const info: UmesComponentOverrideInfo = {
+          type: 'component-override',
+          id: `${override.metadata?.module ?? 'unknown'}.${override.target.componentId}`,
+          moduleId: override.metadata?.module ?? 'unknown',
+          target: override.target.componentId,
+          priority: override.priority,
+          features: override.features,
+          componentId: override.target.componentId,
+          overrideKind: kind,
+        }
+        extensions.push(info)
+        componentReplacements.push(info)
+      }
+    }
+  } catch {
+    // component registry not available
+  }
+
+  // Collect injection widgets from global registry
+  try {
+    const tables = ((globalThis as Record<string, unknown>).__openMercatoCoreInjectionTables__ ?? []) as Array<{
+      moduleId: string
+      table: Record<string, unknown>
+    }>
+    for (const tableEntry of tables) {
+      for (const [spotId, value] of Object.entries(tableEntry.table)) {
+        const slots = Array.isArray(value) ? value : [value]
+        for (const slot of slots) {
+          const widgetId = typeof slot === 'string' ? slot : (slot as Record<string, unknown>)?.widgetId
+          const priority = typeof slot === 'object' ? ((slot as Record<string, unknown>)?.priority as number) ?? 0 : 0
+          if (widgetId) {
+            extensions.push({
+              type: 'injection-widget',
+              id: widgetId as string,
+              moduleId: tableEntry.moduleId,
+              target: spotId,
+              priority,
+              spotId,
+              hasEventHandlers: false,
+            })
+          }
+        }
+      }
+    }
+  } catch {
+    // injection tables not available
+  }
+
+  return {
+    extensions,
+    conflicts: [],
+    enricherTimings: getEnricherTimingEntries(),
+    interceptorActivity: getInterceptorActivityEntries(),
+    eventFlow: [],
+    componentReplacements,
+  }
+}