From 664dc91bf5d22d2f33d003b443f07b46a37999e7 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 28 Feb 2026 16:45:29 -0500
Subject: [PATCH] Dynamically color special DOT nodes by shape in applyTheme

Add colorSpecialNodes() that injects fill/border/font colors based on
node shape (teal for Mdiamond/Msquare, amber for hexagon/diamond),
removing the need to hardcode colors in workflow DOT data.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/arc-web/app/routes/run-overview.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/arc-web/app/routes/run-overview.tsx b/apps/arc-web/app/routes/run-overview.tsx
index 4818a8e2f..ffa271b00 100644
--- a/apps/arc-web/app/routes/run-overview.tsx
+++ b/apps/arc-web/app/routes/run-overview.tsx
@@ -65,8 +65,22 @@ const THEME_ATTRS = `
     ]
 `;
 
+function colorSpecialNodes(dot: string): string {
+  // Mdiamond / Msquare → teal start/exit nodes
+  dot = dot.replace(
+    /(\bshape\s*=\s*M(?:diamond|square)\b[^\]]*)\]/g,
+    '$1, fillcolor="#0d4f4f", color="#14b8a6", fontcolor="#5eead4"]',
+  );
+  // hexagon / diamond (but not Mdiamond) → amber gate nodes
+  dot = dot.replace(
+    /(\bshape\s*=\s*(?:hexagon|(?<!M)diamond)\b[^\]]*)\]/g,
+    '$1, fillcolor="#1a2030", color="#f59e0b", fontcolor="#fbbf24"]',
+  );
+  return dot;
+}
+
 function applyTheme(dot: string): string {
-  return dot.replace(/\{/, `{\n${THEME_ATTRS}\n`);
+  return colorSpecialNodes(dot.replace(/\{/, `{\n${THEME_ATTRS}\n`));
 }
 
 function stripGraphTitle(svg: SVGSVGElement) {