diff --git a/ui/src/components/ProcessDiagram/ErrorSection.tsx b/ui/src/components/ProcessDiagram/ErrorSection.tsx index fad5c970..2ed3200a 100644 --- a/ui/src/components/ProcessDiagram/ErrorSection.tsx +++ b/ui/src/components/ProcessDiagram/ErrorSection.tsx @@ -42,6 +42,20 @@ export function ErrorSection({ onNodeClick, onNodeDoubleClick, onNodeEnter, onNodeLeave, }: ErrorSectionProps) { const color = VARIANT_COLORS[section.variant ?? 'error'] ?? VARIANT_COLORS.error; + + // Check if any node in this section was executed (has overlay entry) + const wasTriggered = useMemo(() => { + if (!executionOverlay || executionOverlay.size === 0) return false; + function checkNodes(nodes: DiagramNodeType[]): boolean { + for (const n of nodes) { + if (n.id && executionOverlay!.has(n.id)) return true; + if (n.children && checkNodes(n.children)) return true; + } + return false; + } + return checkNodes(section.nodes); + }, [executionOverlay, section.nodes]); + const boxHeight = useMemo(() => { let maxY = 0; for (const n of section.nodes) { @@ -65,28 +79,41 @@ export function ErrorSection({ {section.label} - {/* Divider line */} + {/* Divider line — solid when triggered */} - {/* Subtle red tint background — sized to actual content */} + {/* Background — stronger when this handler was triggered during execution */} + {wasTriggered && ( + + )} {/* Content group with margin from top-left */}