@open-mercato/core 0.6.3-develop.3901.1.ddad60693a → 0.6.3

package/src/modules/customers/i18n/es.json

@@ -665,8 +665,34 @@
   "customers.deal_analyzer.sheet.dock": "Anclar al lado",
   "customers.deal_analyzer.sheet.title": "Analizador de negocios",
   "customers.deal_analyzer.sheet.welcomeTitle": "Analizador de negocios",
+  "customers.deals.create.associations.companiesPlaceholder": "Buscar empresas por nombre o dominio…",
+  "customers.deals.create.associations.peoplePlaceholder": "Buscar personas por nombre o correo…",
+  "customers.deals.create.back": "Volver a oportunidades",
+  "customers.deals.create.cancel": "Cancelar",
   "customers.deals.create.error": "No se pudo crear la oportunidad.",
+  "customers.deals.create.fields.datePlaceholder": "Elegir una fecha",
+  "customers.deals.create.fields.expectedCloseAt": "Fecha de cierre prevista",
+  "customers.deals.create.fields.probability": "Probabilidad",
+  "customers.deals.create.fields.stageOf": "· etapa {position} de {total}",
+  "customers.deals.create.fields.title": "Título de la oportunidad",
+  "customers.deals.create.fields.valueAmount": "Valor de la oportunidad",
+  "customers.deals.create.hints.pipelineStage": "Las etapas dependen del pipeline seleccionado",
+  "customers.deals.create.hints.probability": "0 – 100 %, usada para el valor ponderado del pipeline",
+  "customers.deals.create.hints.title": "Nombre corto y descriptivo que se muestra en las tarjetas del pipeline",
+  "customers.deals.create.hints.valueAmount": "Ingresos potenciales de esta oportunidad",
+  "customers.deals.create.sections.associations.subtitle": "Vincula personas y empresas a esta oportunidad",
+  "customers.deals.create.sections.associations.title": "Asociaciones",
+  "customers.deals.create.sections.custom.empty": "Aún no hay campos personalizados definidos para oportunidades.",
+  "customers.deals.create.sections.custom.loading": "Cargando campos personalizados…",
+  "customers.deals.create.sections.custom.manage": "Gestionar campos",
+  "customers.deals.create.sections.custom.subtitle": "{count} campos definidos para este tenant",
+  "customers.deals.create.sections.custom.title": "Atributos personalizados",
+  "customers.deals.create.sections.details.subtitle": "Información principal de la oportunidad",
   "customers.deals.create.submit": "Crear oportunidad",
+  "customers.deals.create.tips.item1": "Usa el formato nombre de la empresa + entregable corto en el título (p. ej. \"Copperleaf — Q3 Renewal\")",
+  "customers.deals.create.tips.item2": "Define la probabilidad según la etapa del pipeline: Calificación 10-25 %, Propuesta 30-50 %, Negociación 50-75 %, Contrato 75-90 %",
+  "customers.deals.create.tips.item3": "Vincula al principal responsable de la decisión como primera persona — recibe la copia (CC) por defecto en las actividades",
+  "customers.deals.create.tips.title": "Consejos para mejores oportunidades",
   "customers.deals.create.title": "Crear oportunidad",
   "customers.deals.detail.actions.apply": "Apply",
   "customers.deals.detail.actions.backToList": "Volver a los deals",

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

@@ -665,8 +665,34 @@
   "customers.deal_analyzer.sheet.dock": "Zadokuj z boku",
   "customers.deal_analyzer.sheet.title": "Analizator transakcji",
   "customers.deal_analyzer.sheet.welcomeTitle": "Analizator transakcji",
+  "customers.deals.create.associations.companiesPlaceholder": "Szukaj firm po nazwie lub domenie…",
+  "customers.deals.create.associations.peoplePlaceholder": "Szukaj osób po nazwie lub e-mailu…",
+  "customers.deals.create.back": "Powrót do szans sprzedaży",
+  "customers.deals.create.cancel": "Anuluj",
   "customers.deals.create.error": "Nie udało się utworzyć szansy.",
+  "customers.deals.create.fields.datePlaceholder": "Wybierz datę",
+  "customers.deals.create.fields.expectedCloseAt": "Przewidywana data zamknięcia",
+  "customers.deals.create.fields.probability": "Prawdopodobieństwo",
+  "customers.deals.create.fields.stageOf": "· etap {position} z {total}",
+  "customers.deals.create.fields.title": "Tytuł szansy",
+  "customers.deals.create.fields.valueAmount": "Wartość szansy",
+  "customers.deals.create.hints.pipelineStage": "Etapy zależą od wybranego lejka",
+  "customers.deals.create.hints.probability": "0 – 100%, używane do ważonej wartości lejka",
+  "customers.deals.create.hints.title": "Krótka, opisowa nazwa wyświetlana na kartach lejka",
+  "customers.deals.create.hints.valueAmount": "Potencjalny przychód z tej szansy",
+  "customers.deals.create.sections.associations.subtitle": "Powiąż osoby i firmy z tą szansą",
+  "customers.deals.create.sections.associations.title": "Powiązania",
+  "customers.deals.create.sections.custom.empty": "Nie zdefiniowano jeszcze pól niestandardowych dla szans sprzedaży.",
+  "customers.deals.create.sections.custom.loading": "Ładowanie pól niestandardowych…",
+  "customers.deals.create.sections.custom.manage": "Zarządzaj polami",
+  "customers.deals.create.sections.custom.subtitle": "{count} pól zdefiniowanych dla tego najemcy",
+  "customers.deals.create.sections.custom.title": "Atrybuty niestandardowe",
+  "customers.deals.create.sections.details.subtitle": "Podstawowe informacje o szansie",
   "customers.deals.create.submit": "Utwórz szansę",
+  "customers.deals.create.tips.item1": "Użyj w tytule formatu nazwa firmy + krótki rezultat (np. \"Copperleaf — Q3 Renewal\")",
+  "customers.deals.create.tips.item2": "Ustaw prawdopodobieństwo na podstawie etapu lejka: Kwalifikacja 10-25%, Oferta 30-50%, Negocjacje 50-75%, Umowa 75-90%",
+  "customers.deals.create.tips.item3": "Powiąż głównego decydenta jako pierwszą osobę — domyślnie otrzyma kopię (CC) e-maili przy aktywnościach",
+  "customers.deals.create.tips.title": "Wskazówki dla lepszych szans sprzedaży",
   "customers.deals.create.title": "Utwórz szansę",
   "customers.deals.detail.actions.apply": "Apply",
   "customers.deals.detail.actions.backToList": "Powrót do listy szans",

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

@@ -70,6 +70,7 @@ export type DictionarySelectLabels = {
 }
 
 export type DictionaryEntrySelectProps = {
+  id?: string
   value?: string
   onChange: (value: string | undefined) => void
   fetchOptions: () => Promise<DictionaryOption[]>
@@ -83,9 +84,17 @@ export type DictionaryEntrySelectProps = {
   disabled?: boolean
   showLabelInput?: boolean
   showManage?: boolean
+  /**
+   * When false, hides the read-only appearance preview (color swatch + icon + hex)
+   * rendered below the trigger for the currently-selected entry. Defaults to true to
+   * preserve existing behavior; set false where the host only wants a plain select
+   * (e.g. a create form that shouldn't surface dictionary styling).
+   */
+  showActiveAppearance?: boolean
 }
 
 export function DictionaryEntrySelect({
+  id,
   value,
   onChange,
   fetchOptions,
@@ -99,6 +108,7 @@ export function DictionaryEntrySelect({
   disabled: disabledProp = false,
   showLabelInput = true,
   showManage = true,
+  showActiveAppearance = true,
 }: DictionaryEntrySelectProps) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
@@ -247,6 +257,7 @@ export function DictionaryEntrySelect({
           disabled={disabled}
         >
           <SelectTrigger
+            id={id}
             className={selectClassName}
             title={activeOption?.label ?? undefined}
           >
@@ -345,7 +356,7 @@ export function DictionaryEntrySelect({
           ) : null}
         </div>
       </div>
-      {activeOption && (activeOption.icon || activeOption.color) ? (
+      {showActiveAppearance && activeOption && (activeOption.icon || activeOption.color) ? (
         <div className="flex items-center gap-2 text-xs text-muted-foreground">
           <span className="inline-flex items-center gap-2 rounded border border-dashed px-2 py-1">
             {activeOption.icon ? renderDictionaryIcon(activeOption.icon, 'h-4 w-4') : null}

package/src/modules/feature_toggles/lib/feature-flag-check.ts

@@ -62,6 +62,13 @@ const getCacheTags = (identifier: string, tenantId: string) => {
 
 export class FeatureTogglesService {
   private cacheTtlMs: number = 1 * 60 * 1000 // 1 minute
+  // Resolution cache can be disabled via env (e.g. integration tests that flip
+  // overrides rapidly between cases). The 1-minute TTL is a production
+  // optimization; under fast flag churn it can serve a stale value across
+  // override set/clear despite invalidation, so tests opt out for determinism.
+  private readonly cacheDisabled: boolean =
+    process.env.OM_FEATURE_TOGGLES_CACHE_DISABLED === '1' ||
+    process.env.OM_FEATURE_TOGGLES_CACHE_DISABLED === 'true'
   constructor(
     private readonly cache: CacheService,
     private readonly em: EntityManager
@@ -72,6 +79,7 @@ export class FeatureTogglesService {
     tenantId: string,
     result: ToggleResolutionResult,
   ) {
+    if (this.cacheDisabled) return
     const key = getIsEnabledCacheKey(identifier, tenantId)
     await runWithCacheTenant(
       tenantId,
@@ -82,10 +90,12 @@ export class FeatureTogglesService {
   private async resolveToggle(identifier: string, tenantId: string): Promise<ToggleResolutionResult> {
     const key = getIsEnabledCacheKey(identifier, tenantId)
 
-    const cached = await runWithCacheTenant(tenantId, () => this.cache.get(key))
-    if (cached) {
-      const parsed = toCachedResolution(cached)
-      if (parsed) return parsed
+    if (!this.cacheDisabled) {
+      const cached = await runWithCacheTenant(tenantId, () => this.cache.get(key))
+      if (cached) {
+        const parsed = toCachedResolution(cached)
+        if (parsed) return parsed
+      }
     }
 
     let toggle: FeatureToggle | null = null

package/src/modules/query_index/subscribers/coverage_refresh.ts

@@ -15,6 +15,12 @@ type Payload = {
 const DEFAULT_DELAY_MS = 0
 const pending = new Map<string, NodeJS.Timeout>()
 
+function forkRefreshEntityManager(em: EntityManager): EntityManager {
+  const fork = (em as unknown as { fork?: (options?: Record<string, unknown>) => EntityManager }).fork
+  if (typeof fork !== 'function') return em
+  return fork.call(em, { clear: true, freshEventManager: true, useContext: false })
+}
+
 function scopeKey(input: Payload): string {
   const entity = String(input.entityType || '')
   const tenant = input.tenantId ?? '__null__'
@@ -35,10 +41,10 @@ export default async function handle(payload: Payload, ctx: { resolve: <T = any>
   const withDeleted = payload?.withDeleted === true
   const delayMs = typeof payload?.delayMs === 'number' && payload.delayMs >= 0 ? payload.delayMs : DEFAULT_DELAY_MS
 
-  const em = ctx.resolve<EntityManager>('em')
   const key = scopeKey({ entityType, tenantId, organizationId, withDeleted })
 
   const handleRefresh = async () => {
+    const em = forkRefreshEntityManager(ctx.resolve<EntityManager>('em'))
     try {
       await refreshCoverageSnapshot(em, { entityType, tenantId, organizationId, withDeleted })
     } catch (err) {

package/src/modules/resources/i18n/de.json

@@ -199,6 +199,7 @@
   "resources.resourceTypes.errors.delete": "Ressourcentyp konnte nicht gelöscht werden.",
   "resources.resourceTypes.errors.deleteAssigned": "Dem Ressourcentyp sind Ressourcen zugewiesen.",
   "resources.resourceTypes.errors.load": "Ressourcentypen konnten nicht geladen werden.",
+  "resources.resourceTypes.errors.notFound": "Ressourcentyp nicht gefunden.",
   "resources.resourceTypes.errors.save": "Ressourcentyp konnte nicht gespeichert werden.",
   "resources.resourceTypes.form.appearance.colorClear": "Farbe entfernen",
   "resources.resourceTypes.form.appearance.colorHelp": "Wähle eine Farbe für diesen Ressourcentyp.",

package/src/modules/resources/i18n/en.json

@@ -199,6 +199,7 @@
   "resources.resourceTypes.errors.delete": "Failed to delete resource type.",
   "resources.resourceTypes.errors.deleteAssigned": "Resource type has assigned resources.",
   "resources.resourceTypes.errors.load": "Failed to load resource types.",
+  "resources.resourceTypes.errors.notFound": "Resource type not found.",
   "resources.resourceTypes.errors.save": "Failed to save resource type.",
   "resources.resourceTypes.form.appearance.colorClear": "Clear color",
   "resources.resourceTypes.form.appearance.colorHelp": "Pick a color for this resource type.",

package/src/modules/resources/i18n/es.json

@@ -199,6 +199,7 @@
   "resources.resourceTypes.errors.delete": "No se pudo eliminar el tipo de recurso.",
   "resources.resourceTypes.errors.deleteAssigned": "El tipo de recurso tiene recursos asignados.",
   "resources.resourceTypes.errors.load": "No se pudieron cargar los tipos de recurso.",
+  "resources.resourceTypes.errors.notFound": "Tipo de recurso no encontrado.",
   "resources.resourceTypes.errors.save": "No se pudo guardar el tipo de recurso.",
   "resources.resourceTypes.form.appearance.colorClear": "Quitar color",
   "resources.resourceTypes.form.appearance.colorHelp": "Elige un color para este tipo de recurso.",

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

@@ -199,6 +199,7 @@
   "resources.resourceTypes.errors.delete": "Nie udało się usunąć typu zasobu.",
   "resources.resourceTypes.errors.deleteAssigned": "Ten typ zasobu ma przypisane zasoby.",
   "resources.resourceTypes.errors.load": "Nie udało się wczytać typów zasobów.",
+  "resources.resourceTypes.errors.notFound": "Nie znaleziono typu zasobu.",
   "resources.resourceTypes.errors.save": "Nie udało się zapisać typu zasobu.",
   "resources.resourceTypes.form.appearance.colorClear": "Wyczyść kolor",
   "resources.resourceTypes.form.appearance.colorHelp": "Wybierz kolor dla tego typu zasobu.",

package/src/modules/sales/i18n/de.json

@@ -69,6 +69,7 @@
   "sales.channels.form.errors.create": "Kanal konnte nicht erstellt werden.",
   "sales.channels.form.errors.delete": "Kanal konnte nicht gelöscht werden.",
   "sales.channels.form.errors.load": "Kanal konnte nicht geladen werden.",
+  "sales.channels.form.errors.notFound": "Kanal nicht gefunden.",
   "sales.channels.form.errors.update": "Kanal konnte nicht gespeichert werden.",
   "sales.channels.form.groups.address": "Standort",
   "sales.channels.form.groups.contact": "Kontakt",
@@ -96,6 +97,7 @@
   "sales.channels.offers.errors.duplicateProduct": "Dieses Produkt hat bereits ein Angebot in diesem Kanal.",
   "sales.channels.offers.errors.load": "Angebote konnten nicht geladen werden.",
   "sales.channels.offers.errors.loadOffer": "Angebot konnte nicht geladen werden.",
+  "sales.channels.offers.errors.notFound": "Angebot nicht gefunden.",
   "sales.channels.offers.errors.priceKindDuplicate": "Jede Preisart kann nur einmal überschrieben werden.",
   "sales.channels.offers.errors.priceKindRequired": "Wähle für jede Preisüberschreibung eine Preisart.",
   "sales.channels.offers.errors.removePrice": "Preisüberschreibung konnte nicht entfernt werden.",

package/src/modules/sales/i18n/en.json

@@ -69,6 +69,7 @@
   "sales.channels.form.errors.create": "Failed to create channel.",
   "sales.channels.form.errors.delete": "Failed to delete channel.",
   "sales.channels.form.errors.load": "Failed to load channel.",
+  "sales.channels.form.errors.notFound": "Channel not found.",
   "sales.channels.form.errors.update": "Failed to save channel.",
   "sales.channels.form.groups.address": "Location",
   "sales.channels.form.groups.contact": "Contact",
@@ -96,6 +97,7 @@
   "sales.channels.offers.errors.duplicateProduct": "This product already has an offer in this channel.",
   "sales.channels.offers.errors.load": "Failed to load offers.",
   "sales.channels.offers.errors.loadOffer": "Failed to load offer.",
+  "sales.channels.offers.errors.notFound": "Offer not found.",
   "sales.channels.offers.errors.priceKindDuplicate": "Each price kind can only be overridden once.",
   "sales.channels.offers.errors.priceKindRequired": "Select a price kind for each price override.",
   "sales.channels.offers.errors.removePrice": "Failed to remove price override.",

package/src/modules/sales/i18n/es.json

@@ -69,6 +69,7 @@
   "sales.channels.form.errors.create": "No se pudo crear el canal.",
   "sales.channels.form.errors.delete": "No se pudo eliminar el canal.",
   "sales.channels.form.errors.load": "No se pudo cargar el canal.",
+  "sales.channels.form.errors.notFound": "Canal no encontrado.",
   "sales.channels.form.errors.update": "No se pudo guardar el canal.",
   "sales.channels.form.groups.address": "Ubicación",
   "sales.channels.form.groups.contact": "Contacto",
@@ -96,6 +97,7 @@
   "sales.channels.offers.errors.duplicateProduct": "Este producto ya tiene una oferta en este canal.",
   "sales.channels.offers.errors.load": "No se pudieron cargar las ofertas.",
   "sales.channels.offers.errors.loadOffer": "No se pudo cargar la oferta.",
+  "sales.channels.offers.errors.notFound": "Oferta no encontrada.",
   "sales.channels.offers.errors.priceKindDuplicate": "Cada tipo de precio solo se puede anular una vez.",
   "sales.channels.offers.errors.priceKindRequired": "Selecciona un tipo de precio para cada precio personalizado.",
   "sales.channels.offers.errors.removePrice": "No se pudo eliminar el precio personalizado.",

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

@@ -69,6 +69,7 @@
   "sales.channels.form.errors.create": "Nie udało się utworzyć kanału.",
   "sales.channels.form.errors.delete": "Nie udało się usunąć kanału.",
   "sales.channels.form.errors.load": "Nie udało się wczytać kanału.",
+  "sales.channels.form.errors.notFound": "Nie znaleziono kanału.",
   "sales.channels.form.errors.update": "Nie udało się zapisać kanału.",
   "sales.channels.form.groups.address": "Lokalizacja",
   "sales.channels.form.groups.contact": "Kontakt",
@@ -96,6 +97,7 @@
   "sales.channels.offers.errors.duplicateProduct": "Ten produkt ma już ofertę w tym kanale.",
   "sales.channels.offers.errors.load": "Nie udało się wczytać ofert.",
   "sales.channels.offers.errors.loadOffer": "Nie udało się wczytać oferty.",
+  "sales.channels.offers.errors.notFound": "Nie znaleziono oferty.",
   "sales.channels.offers.errors.priceKindDuplicate": "Każdy typ ceny można nadpisać tylko raz.",
   "sales.channels.offers.errors.priceKindRequired": "Wybierz rodzaj ceny dla każdego nadpisania.",
   "sales.channels.offers.errors.removePrice": "Nie udało się usunąć nadpisania ceny.",

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

@@ -1,32 +1,9 @@
 'use client'
 
-import { useCallback, useMemo, useEffect, useState } from 'react'
-import {
-  ReactFlow,
-  Node,
-  Edge,
-  Controls,
-  Background,
-  BackgroundVariant,
-  MiniMap,
-  Panel,
-  useNodesState,
-  useEdgesState,
-  addEdge,
-  Connection,
-  ConnectionMode,
-  MarkerType,
-} from '@xyflow/react'
-import {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode} from './nodes'
-import { WorkflowTransitionEdge } from './WorkflowTransitionEdge'
-import { STATUS_COLORS } from '../lib/status-colors'
-import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
-import { Edit3 } from 'lucide-react'
-import { useTheme } from '@open-mercato/ui/theme'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
-
-// NOTE: ReactFlow styles should be imported in the page that uses this component
-// or in a global CSS file. Import: '@xyflow/react/dist/style.css'
+import * as React from 'react'
+import dynamic from 'next/dynamic'
+import type { Node, Edge, Connection } from '@xyflow/react'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
 
 export interface WorkflowGraphProps {
   initialNodes?: Node[]
@@ -41,224 +18,51 @@ export interface WorkflowGraphProps {
   height?: string
 }
 
+const WorkflowGraphImpl = dynamic(() => import('./WorkflowGraphImpl'), {
+  ssr: false,
+  loading: () => null,
+})
+
+function WorkflowGraphPlaceholder({ height }: { height: string }) {
+  return (
+    <div
+      className="workflow-graph-container flex items-center justify-center rounded-lg border border-border bg-muted/30"
+      style={{ height }}
+    >
+      <Spinner className="h-6 w-6 text-muted-foreground" />
+    </div>
+  )
+}
+
 /**
- * WorkflowGraph - ReactFlow wrapper component for workflow visualization
+ * WorkflowGraph — lazy-loaded ReactFlow wrapper.
  *
- * Provides a graph-based view of workflow definitions with:
- * - Pan and zoom controls
- * - Background grid
- * - Mini-map for navigation
- * - Optional editing capabilities
+ * @xyflow/react is loaded via next/dynamic({ ssr: false }) so the ~12 MB
+ * package only enters the Turbopack module graph when this component
+ * actually renders.
  */
-export function WorkflowGraph({
-  initialNodes = [],
-  initialEdges = [],
-  onNodesChange: onNodesChangeProp,
-  onEdgesChange: onEdgesChangeProp,
-  onNodeClick: onNodeClickProp,
-  onEdgeClick: onEdgeClickProp,
-  onConnect: onConnectProp,
-  editable = false,
-  className = '',
-  height = '600px',
-}: WorkflowGraphProps) {
-  const t = useT()
-  // Use ReactFlow hooks for node and edge state management
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
-
-  // Get theme for dark mode support
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const backgroundDotColor = isDark ? '#374151' : '#e5e7eb'
-  const [isCompactViewport, setIsCompactViewport] = useState(false)
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const mediaQuery = window.matchMedia('(max-width: 1279px)')
-    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches)
-
-    updateViewportMode()
-    mediaQuery.addEventListener('change', updateViewportMode)
-
+export function WorkflowGraph(props: WorkflowGraphProps) {
+  const { height = '600px' } = props
+  // Track impl-chunk readiness so the loading placeholder respects the
+  // caller's `height` prop (next/dynamic's `loading` cannot access props).
+  // The browser caches the module, so the duplicate `import()` is free.
+  const [isImplReady, setIsImplReady] = React.useState(false)
+  React.useEffect(() => {
+    let cancelled = false
+    void import('./WorkflowGraphImpl').then(() => {
+      if (!cancelled) setIsImplReady(true)
+    })
     return () => {
-      mediaQuery.removeEventListener('change', updateViewportMode)
+      cancelled = true
     }
   }, [])
 
-  // Sync internal state when external state changes (e.g., when parent adds nodes)
-  useEffect(() => {
-    setNodes(initialNodes)
-  }, [initialNodes, setNodes])
-
-  useEffect(() => {
-    setEdges(initialEdges)
-  }, [initialEdges, setEdges])
-
-  // Handle connection between nodes (when user drags from one node to another)
-  const onConnect = useCallback(
-    (connection: Connection) => {
-      if (onConnectProp) {
-        // Let parent handle the connection
-        onConnectProp(connection)
-      } else {
-        // Fallback: handle internally if no parent callback
-        const newEdge = {
-          ...connection,
-          type: 'workflowTransition',
-          animated: false,
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            width: 16,
-            height: 16,
-            color: '#9ca3af',
-          },
-        }
-        setEdges((eds) => addEdge(newEdge, eds))
-      }
-    },
-    [setEdges, onConnectProp]
-  )
-
-  // Notify parent when nodes change
-  const handleNodesChange = useCallback(
-    (changes: any) => {
-      onNodesChange(changes)
-      if (onNodesChangeProp) {
-        onNodesChangeProp(changes)
-      }
-    },
-    [onNodesChange, onNodesChangeProp]
-  )
-
-  // Notify parent when edges change
-  const handleEdgesChange = useCallback(
-    (changes: any) => {
-      onEdgesChange(changes)
-      if (onEdgesChangeProp) {
-        onEdgesChangeProp(changes)
-      }
-    },
-    [onEdgesChange, onEdgesChangeProp]
-  )
-
-  // Register custom node types
-  const nodeTypes = useMemo(
-    () => ({
-      start: StartNode,
-      end: EndNode,
-      userTask: UserTaskNode,
-      automated: AutomatedNode,
-      subWorkflow: SubWorkflowNode,
-      waitForSignal: WaitForSignalNode,
-      waitForTimer: WaitForTimerNode,
-    }),
-    []
-  )
-
-  // Register custom edge types
-  const edgeTypes = useMemo(
-    () => ({
-      workflowTransition: WorkflowTransitionEdge,
-    }),
-    []
-  )
-
-  return (
-    <div className={`workflow-graph-container ${className}`} style={{ height }}>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={handleNodesChange}
-        onEdgesChange={handleEdgesChange}
-        onConnect={editable ? onConnect : undefined}
-        onNodeClick={onNodeClickProp}
-        onEdgeClick={onEdgeClickProp}
-        connectionMode={ConnectionMode.Loose}
-        fitView
-        fitViewOptions={{
-          padding: 0.2,
-          maxZoom: isCompactViewport ? 0.9 : 1,
-        }}
-        minZoom={0.1}
-        maxZoom={2}
-        defaultEdgeOptions={{
-          type: 'workflowTransition',
-          animated: false,
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            width: 16,
-            height: 16,
-            color: '#9ca3af',
-          },
-        }}
-        nodesDraggable={editable}
-        nodesConnectable={editable}
-        elementsSelectable={editable}
-        proOptions={{ hideAttribution: true }}
-      >
-        {/* Background grid for visual reference */}
-        <Background
-          variant={BackgroundVariant.Dots}
-          gap={16}
-          size={1}
-          color={backgroundDotColor}
-        />
-
-        {/* Zoom and pan controls */}
-        <Controls
-          showZoom={true}
-          showFitView={true}
-          showInteractive={false}
-          position={isCompactViewport ? 'bottom-right' : 'top-right'}
-          className={`!bg-card !border-border !shadow-md [&>button]:!bg-card [&>button]:!border-border [&>button]:!fill-foreground [&>button:hover]:!bg-muted ${isCompactViewport ? 'scale-90 origin-bottom-right' : ''}`}
-        />
-
-        {/* Mini-map for navigation in large workflows */}
-        {!isCompactViewport && (
-          <MiniMap
-            nodeStrokeWidth={3}
-            nodeColor={(node) => {
-              // Color nodes by status - using status-based colors
-              const status = (node.data?.status || 'not_started') as keyof typeof STATUS_COLORS
-              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex
-            }}
-            maskColor="rgba(0, 0, 0, 0.1)"
-            position="bottom-left"
-            className="!bg-card !border !border-border !rounded-lg"
-          />
-        )}
-
-        {/* Info panel */}
-        {!editable && !isCompactViewport && (
-          <Panel position="top-left" style={{ margin: 10 }}>
-            <div className="bg-card rounded-lg shadow-sm border border-border px-4 py-2">
-              <p className="text-sm text-muted-foreground font-medium">
-                {t('workflows.graph.visualization')}
-              </p>
-            </div>
-          </Panel>
-        )}
-
-        {editable && !isCompactViewport && (
-          <Panel position="top-left" style={{ margin: 10 }}>
-            <Alert variant="info" className="max-w-sm">
-              <Edit3 className="size-4" />
-              <AlertDescription className="font-medium">
-                {t('workflows.graph.editModeInfo')}
-              </AlertDescription>
-            </Alert>
-          </Panel>
-        )}
-      </ReactFlow>
-    </div>
-  )
+  if (!isImplReady) return <WorkflowGraphPlaceholder height={height} />
+  return <WorkflowGraphImpl {...props} />
 }
 
 /**
- * WorkflowGraphReadOnly - Read-only version for viewing workflow execution
+ * WorkflowGraphReadOnly — read-only viewer that reuses WorkflowGraph.
  */
 export function WorkflowGraphReadOnly({
   nodes,