Antes de la última revisión de etapa 4. Sprint 1. Previo al ajuste de look n feel de app, reportes, nombre y colores.

src/features/workspace/WorkspacePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback, useMemo } from 'react'
+import { useEffect, useRef, useState, useCallback, useMemo, useDeferredValue } from 'react'
 import { useParams, useNavigate } from '@tanstack/react-router'
 import {
   Loader2, BarChart3, Play, AlertTriangle,
@@ -23,8 +23,8 @@ type SelectedCategory = 'activity' | 'gateway' | null
 export function WorkspacePage() {
   const { processId } = useParams({ from: '/workspace/$processId' })
   const navigate = useNavigate()
-  const { currentProcess, isLoading, error, loadProcess, gateways } = useProcessStore()
-  const { isRunning, result, error: simError, selectActivity } = useSimulationStore()
+  const { currentProcess, activities, isLoading, error, loadProcess, gateways } = useProcessStore()
+  const { isRunning, resultActual, error: simError, selectActivity } = useSimulationStore()
   const { simulate } = useSimulate()
   const { toast } = useToast()
 
@@ -64,6 +64,14 @@ export function WorkspacePage() {
 
   const canSimulate = !isRunning && xorValidation.valid
 
+  // IDs de actividades marcadas como automatizables — alimenta los overlays del canvas.
+  // useDeferredValue evita re-renders en cascada mientras el usuario edita el panel.
+  const automatableElementIds = useMemo(
+    () => activities.filter((a) => a.automatable).map((a) => a.bpmnElementId),
+    [activities]
+  )
+  const deferredAutomatableIds = useDeferredValue(automatableElementIds)
+
   const handleElementClick = useCallback((
     elementId: string,
     elementName: string,
@@ -91,6 +99,8 @@ export function WorkspacePage() {
     if (simResult) navigate({ to: '/report/$processId', params: { processId } })
   }
 
+
+
   if (isLoading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
@@ -161,7 +171,7 @@ export function WorkspacePage() {
           )}
 
           {/* Ver reporte si ya hay simulación */}
-          {result && (
+          {resultActual && (
             <Button
               variant="outline"
               size="sm"
@@ -223,6 +233,7 @@ export function WorkspacePage() {
               xml={currentProcess.bpmnXml}
               onElementClick={handleElementClick}
               selectedElementId={selectedElementId}
+              automatableElementIds={deferredAutomatableIds}
               className="absolute inset-0"
             />