1 files changed, 77 insertions, 0 deletions
diff --git a/frontend/src/components/edges/MergedEdge.tsx b/frontend/src/components/edges/MergedEdge.tsx
new file mode 100644
index 0000000..06c2bf8
--- /dev/null
+++ b/frontend/src/components/edges/MergedEdge.tsx
@@ -0,0 +1,77 @@
+import { BaseEdge, getBezierPath } from 'reactflow';
+import type { EdgeProps } from 'reactflow';
+
+interface MergedEdgeData {
+  gradient?: string;
+  isMerged?: boolean;
+  colors?: string[];
+}
+
+const MergedEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  data,
+  markerEnd,
+}: EdgeProps<MergedEdgeData>) => {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  // If this is a merged trace, create a gradient
+  const isMerged = data?.isMerged;
+  const colors = data?.colors || [];
+  
+  if (isMerged && colors.length >= 2) {
+    const gradientId = `gradient-${id}`;
+    
+    return (
+      <>
+        <defs>
+          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+            {colors.map((color, idx) => (
+              <stop 
+                key={idx} 
+                offset={`${(idx / (colors.length - 1)) * 100}%`} 
+                stopColor={color} 
+              />
+            ))}
+          </linearGradient>
+        </defs>
+        <BaseEdge
+          id={id}
+          path={edgePath}
+          style={{
+            ...style,
+            stroke: `url(#${gradientId})`,
+            strokeWidth: 3,
+          }}
+          markerEnd={markerEnd}
+        />
+      </>
+    );
+  }
+
+  // Regular edge
+  return (
+    <BaseEdge
+      id={id}
+      path={edgePath}
+      style={style}
+      markerEnd={markerEnd}
+    />
+  );
+};
+
+export default MergedEdge;
+