feat: add traversed/not-traversed visual states to DiagramEdge

Add green solid edges for traversed paths and dashed gray for
not-traversed when execution overlay is active. Includes green
arrowhead marker and overlay threading through CompoundNode and
ErrorSection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/components/ProcessDiagram/ProcessDiagram.tsx

@@ -53,6 +53,7 @@ export function ProcessDiagram({
   knownRouteIds,
   className,
   diagramLayout,
+  executionOverlay,
 }: ProcessDiagramProps) {
   // Route stack for drill-down navigation
   const [routeStack, setRouteStack] = useState<string[]>([routeId]);
@@ -209,14 +210,29 @@ export function ProcessDiagram({
           >
             <polygon points="0 0, 8 3, 0 6" fill="#9CA3AF" />
           </marker>
+          <marker
+            id="arrowhead-green"
+            markerWidth="8"
+            markerHeight="6"
+            refX="7"
+            refY="3"
+            orient="auto"
+          >
+            <polygon points="0 0, 8 3, 0 6" fill="#3D7C47" />
+          </marker>
         </defs>
 
         <g style={{ transform: zoom.transform, transformOrigin: '0 0' }}>
           {/* Main section top-level edges (not inside compounds) */}
           <g className="edges">
-            {mainSection.edges.filter(e => topLevelEdge(e, mainSection.nodes)).map((edge, i) => (
-              <DiagramEdge key={`${edge.sourceId}-${edge.targetId}-${i}`} edge={edge} />
-            ))}
+            {mainSection.edges.filter(e => topLevelEdge(e, mainSection.nodes)).map((edge, i) => {
+              const isTraversed = executionOverlay
+                ? (executionOverlay.has(edge.sourceId) && executionOverlay.has(edge.targetId))
+                : undefined;
+              return (
+                <DiagramEdge key={`${edge.sourceId}-${edge.targetId}-${i}`} edge={edge} traversed={isTraversed} />
+              );
+            })}
           </g>
 
           {/* Main section nodes */}
@@ -231,6 +247,7 @@ export function ProcessDiagram({
                     selectedNodeId={selectedNodeId}
                     hoveredNodeId={toolbar.hoveredNodeId}
                     nodeConfigs={nodeConfigs}
+                    executionOverlay={executionOverlay}
                     onNodeClick={handleNodeClick}
                     onNodeDoubleClick={handleNodeDoubleClick}
                     onNodeEnter={toolbar.onNodeEnter}
@@ -265,6 +282,7 @@ export function ProcessDiagram({
               selectedNodeId={selectedNodeId}
               hoveredNodeId={toolbar.hoveredNodeId}
               nodeConfigs={nodeConfigs}
+              executionOverlay={executionOverlay}
               onNodeClick={handleNodeClick}
               onNodeDoubleClick={handleNodeDoubleClick}
               onNodeEnter={toolbar.onNodeEnter}