From a383b9bcf41b62691bd6c950b388d25526301215 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 30 Mar 2026 10:42:35 +0200
Subject: [PATCH] feat: add red pulse effect to failed processor badges in
 diagram overlay

Failed processor nodes now show expanding/fading red rings around the
error badge (same SMIL animation pattern as the teal hasTraceData pulse).
Two staggered circles expand from r=6 to r=14 over 1.5s, making failures
immediately visible in complex route diagrams.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/ProcessDiagram/DiagramNode.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/ui/src/components/ProcessDiagram/DiagramNode.tsx b/ui/src/components/ProcessDiagram/DiagramNode.tsx
index 4ede627c..18e4dae1 100644
--- a/ui/src/components/ProcessDiagram/DiagramNode.tsx
+++ b/ui/src/components/ProcessDiagram/DiagramNode.tsx
@@ -193,6 +193,14 @@ export function DiagramNode({
       )}
       {isFailed && (
         <>
+          <circle cx={w - 10} cy={TOP_BAR_HEIGHT + 8} r={6} fill="none" stroke="#C0392B" strokeWidth={2} opacity={0.5}>
+            <animate attributeName="r" values="6;14" dur="1.5s" repeatCount="indefinite" />
+            <animate attributeName="opacity" values="0.5;0" dur="1.5s" repeatCount="indefinite" />
+          </circle>
+          <circle cx={w - 10} cy={TOP_BAR_HEIGHT + 8} r={6} fill="none" stroke="#C0392B" strokeWidth={2} opacity={0.5}>
+            <animate attributeName="r" values="6;14" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
+            <animate attributeName="opacity" values="0.5;0" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
+          </circle>
           <circle cx={w - 10} cy={TOP_BAR_HEIGHT + 8} r={6} fill="#C0392B" />
           <path
             d={`M${w - 10} ${TOP_BAR_HEIGHT + 5} v4 M${w - 10} ${TOP_BAR_HEIGHT + 10.5} v0.5`}