feat: connector line ux

Add the TimelineV3 component to the sticky header of the waterfall's
right panel so timeline tick marks are visible. Add horizontal padding
to both the timeline header and span duration bars to prevent label
overflow/clipping at the edges.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

@@ -16,7 +16,7 @@ const useGetTraceFlamegraph = (
 		queryKey: [
 			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
 			props.traceId,
-			props.selectedSpanId,
+			// props.selectedSpanId,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,

frontend/src/lib/uPlotLib/utils/generateColor.ts

@@ -7,6 +7,23 @@ export function hashFn(str: string): number {
 	return hash >>> 0;
 }
 
+export function colorToRgb(color: string): string {
+	// Handle hex colors
+	const hexMatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+	if (hexMatch) {
+		return `${parseInt(hexMatch[1], 16)}, ${parseInt(
+			hexMatch[2],
+			16,
+		)}, ${parseInt(hexMatch[3], 16)}`;
+	}
+	// Handle rgb() colors
+	const rgbMatch = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(color);
+	if (rgbMatch) {
+		return `${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}`;
+	}
+	return '136, 136, 136';
+}
+
 export function generateColor(
 	key: string,
 	colorMap: Record<string, string>,

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.styles.scss

@@ -0,0 +1,28 @@
+.span-hover-card-popover {
+	.ant-popover-inner {
+		background-color: rgba(30, 30, 30, 0.95);
+		padding: 8px 12px;
+		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		border: none;
+	}
+
+	.ant-popover-inner-content {
+		padding: 0;
+	}
+}
+
+.span-hover-card-content {
+	font-family: Inter, sans-serif;
+	font-size: 12px;
+	color: #fff;
+
+	&__name {
+		font-weight: 600;
+		margin-bottom: 4px;
+	}
+
+	&__row {
+		line-height: 1.5;
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+import { Popover } from 'antd';
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { Span } from 'types/api/trace/getTraceV2';
+import { toFixed } from 'utils/toFixed';
+
+import './SpanHoverCard.styles.scss';
+
+interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+export interface SpanTooltipContentProps {
+	spanName: string;
+	color: string;
+	hasError: boolean;
+	relativeStartMs: number;
+	durationMs: number;
+}
+
+export function SpanTooltipContent({
+	spanName,
+	color,
+	hasError,
+	relativeStartMs,
+	durationMs,
+}: SpanTooltipContentProps): JSX.Element {
+	const { time: formattedDuration, timeUnitName } = convertTimeToRelevantUnit(
+		durationMs,
+	);
+
+	return (
+		<div className="span-hover-card-content">
+			<div className="span-hover-card-content__name" style={{ color }}>
+				{spanName}
+			</div>
+			<div className="span-hover-card-content__row">
+				Status: {hasError ? 'error' : 'ok'}
+			</div>
+			<div className="span-hover-card-content__row">
+				Start: {toFixed(relativeStartMs, 2)} ms
+			</div>
+			<div className="span-hover-card-content__row">
+				Duration: {toFixed(formattedDuration, 2)} {timeUnitName}
+			</div>
+		</div>
+	);
+}
+
+interface SpanHoverCardProps {
+	span: Span;
+	traceMetadata: ITraceMetadata;
+	children: ReactNode;
+}
+
+function SpanHoverCard({
+	span,
+	traceMetadata,
+	children,
+}: SpanHoverCardProps): JSX.Element {
+	const durationMs = span.durationNano / 1e6;
+	const relativeStartMs = span.timestamp - traceMetadata.startTime;
+
+	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
+	if (span.hasError) {
+		color = 'var(--bg-cherry-500)';
+	}
+
+	return (
+		<Popover
+			mouseEnterDelay={0.2}
+			content={
+				<SpanTooltipContent
+					spanName={span.name}
+					color={color}
+					hasError={span.hasError}
+					relativeStartMs={relativeStartMs}
+					durationMs={durationMs}
+				/>
+			}
+			trigger="hover"
+			rootClassName="span-hover-card-popover"
+			autoAdjustOverflow
+			arrow={false}
+		>
+			{children}
+		</Popover>
+	);
+}
+
+export default SpanHoverCard;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import TimelineV3 from 'components/TimelineV3/TimelineV3';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
+import { SpanTooltipContent } from '../SpanHoverCard/SpanHoverCard';
 import { DEFAULT_ROW_HEIGHT } from './constants';
 import { useCanvasSetup } from './hooks/useCanvasSetup';
 import { useFlamegraphDrag } from './hooks/useFlamegraphDrag';
@@ -10,8 +11,8 @@ import { useFlamegraphDraw } from './hooks/useFlamegraphDraw';
 import { useFlamegraphHover } from './hooks/useFlamegraphHover';
 import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
 import { useScrollToSpan } from './hooks/useScrollToSpan';
+import { useVisualLayoutWorker } from './hooks/useVisualLayoutWorker';
 import { FlamegraphCanvasProps, SpanRect } from './types';
-import { formatDuration } from './utils';
 
 function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 	const { spans, traceMetadata, firstSpanAtFetchLevel, onSpanClick } = props;
@@ -58,7 +59,9 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 		viewEndRef.current = traceMetadata.endTime;
 	}, [traceMetadata.startTime, traceMetadata.endTime]);
 
-	const totalHeight = spans.length * rowHeight;
+	const { layout, isComputing: _isComputing } = useVisualLayoutWorker(spans);
+
+	const totalHeight = layout.totalVisualRows * rowHeight;
 
 	const { isOverFlamegraphRef } = useFlamegraphZoom({
 		canvasRef,
@@ -112,7 +115,8 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 	const { drawFlamegraph } = useFlamegraphDraw({
 		canvasRef,
 		containerRef,
-		spans,
+		spans: layout.visualRows,
+		connectors: layout.connectors,
 		viewStartTs,
 		viewEndTs,
 		scrollTop,
@@ -125,7 +129,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 
 	useScrollToSpan({
 		firstSpanAtFetchLevel,
-		spans,
+		spans: layout.visualRows,
 		traceMetadata,
 		containerRef,
 		viewStartRef,
@@ -153,37 +157,30 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 		handleHoverMouseLeave();
 	}, [isOverFlamegraphRef, handleDragMouseLeave, handleHoverMouseLeave]);
 
-	// todo: move to a separate component/utils file
 	const tooltipElement = tooltipContent
 		? createPortal(
 				<div
+					className="span-hover-card-popover"
 					style={{
 						position: 'fixed',
 						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
 						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
 						zIndex: 1000,
 						backgroundColor: 'rgba(30, 30, 30, 0.95)',
-						color: '#fff',
 						padding: '8px 12px',
 						borderRadius: 4,
-						fontSize: 12,
-						fontFamily: 'Inter, sans-serif',
 						boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
 						pointerEvents: 'none',
 					}}
 				>
-					<div
-						style={{
-							fontWeight: 600,
-							marginBottom: 4,
-							color: tooltipContent.spanColor,
-						}}
-					>
-						{tooltipContent.spanName}
-					</div>
-					<div>Status: {tooltipContent.status}</div>
-					<div>Start: {tooltipContent.startMs.toFixed(2)} ms</div>
-					<div>Duration: {formatDuration(tooltipContent.durationMs * 1e6)}</div>
+					{/* TODO: passing each content is too much, we should use the tooltipContent object directly */}
+					<SpanTooltipContent
+						spanName={tooltipContent.spanName}
+						color={tooltipContent.spanColor}
+						hasError={tooltipContent.status === 'error'}
+						relativeStartMs={tooltipContent.startMs}
+						durationMs={tooltipContent.durationMs}
+					/>
 				</div>,
 				document.body,
 		  )

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -43,7 +43,7 @@ function TraceFlamegraph(): JSX.Element {
 
 	const { data, isFetching, error } = useGetTraceFlamegraph({
 		traceId,
-		selectedSpanId: firstSpanAtFetchLevel,
+		// selectedSpanId: firstSpanAtFetchLevel,
 	});
 
 	const flamegraphState = useMemo(() => {

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -0,0 +1,475 @@
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { computeVisualLayout } from '../computeVisualLayout';
+
+function makeSpan(
+	overrides: Partial<FlamegraphSpan> & {
+		spanId: string;
+		timestamp: number;
+		durationNano: number;
+	},
+): FlamegraphSpan {
+	return {
+		parentSpanId: '',
+		traceId: 'trace-1',
+		hasError: false,
+		serviceName: 'svc',
+		name: 'op',
+		level: 0,
+		event: [],
+		...overrides,
+	};
+}
+
+describe('computeVisualLayout', () => {
+	it('should handle empty input', () => {
+		const layout = computeVisualLayout([]);
+		expect(layout.totalVisualRows).toBe(0);
+		expect(layout.visualRows).toEqual([]);
+	});
+
+	it('should handle single root, no children — 1 visual row', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 100e6,
+		});
+		const layout = computeVisualLayout([[root]]);
+		expect(layout.totalVisualRows).toBe(1);
+		expect(layout.visualRows[0]).toEqual([root]);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+	});
+
+	it('should keep non-overlapping siblings on the same row (compact)', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 100e6,
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 200,
+			durationNano: 100e6,
+		});
+		const c = makeSpan({
+			spanId: 'c',
+			parentSpanId: 'root',
+			timestamp: 400,
+			durationNano: 100e6,
+		});
+
+		const layout = computeVisualLayout([[root], [a, b, c]]);
+
+		// root on row 0, all children on row 1
+		expect(layout.totalVisualRows).toBe(2);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['a']).toBe(1);
+		expect(layout.spanToVisualRow['b']).toBe(1);
+		expect(layout.spanToVisualRow['c']).toBe(1);
+	});
+
+	it('should pack non-overlapping siblings into shared lanes (greedy packing)', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 300e6,
+		});
+		// A and B overlap; C does not overlap with either
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 100e6, // ends at 100ms
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 50,
+			durationNano: 100e6, // starts at 50ms < 100ms end of A → overlap → lane 1
+		});
+		const c = makeSpan({
+			spanId: 'c',
+			parentSpanId: 'root',
+			timestamp: 200,
+			durationNano: 100e6, // 200 >= 100, fits lane 0 with A
+		});
+
+		const layout = computeVisualLayout([[root], [a, b, c]]);
+
+		// root on row 0, C placed first (latest) → row 1, B doesn't overlap C → row 1, A overlaps B → row 2
+		expect(layout.totalVisualRows).toBe(3);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['c']).toBe(1);
+		expect(layout.spanToVisualRow['b']).toBe(1);
+		expect(layout.spanToVisualRow['a']).toBe(2);
+	});
+
+	it('should handle full overlap — all siblings get own row', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+
+		const layout = computeVisualLayout([[root], [a, b]]);
+
+		expect(layout.totalVisualRows).toBe(3);
+		expect(layout.spanToVisualRow['a']).toBe(1);
+		expect(layout.spanToVisualRow['b']).toBe(2);
+	});
+
+	it('should stack children correctly below overlapping parents', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 300e6,
+		});
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 50,
+			durationNano: 200e6,
+		});
+		// Child of A
+		const childA = makeSpan({
+			spanId: 'childA',
+			parentSpanId: 'a',
+			timestamp: 10,
+			durationNano: 50e6,
+		});
+		// Child of B
+		const childB = makeSpan({
+			spanId: 'childB',
+			parentSpanId: 'b',
+			timestamp: 60,
+			durationNano: 50e6,
+		});
+
+		const layout = computeVisualLayout([[root], [a, b], [childA, childB]]);
+
+		// DFS processes b's subtree first (latest):
+		// root → row 0
+		// b → row 1 (parentRow 0 + 1)
+		// childB → row 2 (parentRow 1 + 1)
+		// a → try row 1 (parentRow 0 + 1), overlaps b → try row 2, overlaps childB → row 3
+		// childA → row 4 (parentRow 3 + 1)
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['b']).toBe(1);
+		expect(layout.spanToVisualRow['childB']).toBe(2);
+		expect(layout.spanToVisualRow['a']).toBe(3);
+		expect(layout.spanToVisualRow['childA']).toBe(4);
+		expect(layout.totalVisualRows).toBe(5);
+	});
+
+	it('should handle multiple roots as a sibling group', () => {
+		// Two overlapping roots
+		const r1 = makeSpan({
+			spanId: 'r1',
+			timestamp: 0,
+			durationNano: 100e6,
+		});
+		const r2 = makeSpan({
+			spanId: 'r2',
+			timestamp: 50,
+			durationNano: 100e6,
+		});
+
+		const layout = computeVisualLayout([[r1, r2]]);
+
+		expect(layout.spanToVisualRow['r1']).toBe(0);
+		expect(layout.spanToVisualRow['r2']).toBe(1);
+		expect(layout.totalVisualRows).toBe(2);
+	});
+
+	it('should produce compact layout for deep nesting without overlap', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 1000e6,
+		});
+		const child = makeSpan({
+			spanId: 'child',
+			parentSpanId: 'root',
+			timestamp: 10,
+			durationNano: 500e6,
+		});
+		const grandchild = makeSpan({
+			spanId: 'grandchild',
+			parentSpanId: 'child',
+			timestamp: 20,
+			durationNano: 200e6,
+		});
+
+		const layout = computeVisualLayout([[root], [child], [grandchild]]);
+
+		// No overlap at any level → visual rows == tree depth
+		expect(layout.totalVisualRows).toBe(3);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['child']).toBe(1);
+		expect(layout.spanToVisualRow['grandchild']).toBe(2);
+	});
+
+	it('should pack many sequential siblings into 1 row (no diagonal staircase)', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		// 6 sequential children — like checkoutservice/PlaceOrder scenario
+		const spans = [
+			makeSpan({
+				spanId: 's1',
+				parentSpanId: 'root',
+				timestamp: 3,
+				durationNano: 30e6,
+			}),
+			makeSpan({
+				spanId: 's2',
+				parentSpanId: 'root',
+				timestamp: 35,
+				durationNano: 4e6,
+			}),
+			makeSpan({
+				spanId: 's3',
+				parentSpanId: 'root',
+				timestamp: 39,
+				durationNano: 1e6,
+			}),
+			makeSpan({
+				spanId: 's4',
+				parentSpanId: 'root',
+				timestamp: 40,
+				durationNano: 4e6,
+			}),
+			makeSpan({
+				spanId: 's5',
+				parentSpanId: 'root',
+				timestamp: 44,
+				durationNano: 5e6,
+			}),
+			makeSpan({
+				spanId: 's6',
+				parentSpanId: 'root',
+				timestamp: 49,
+				durationNano: 1e6,
+			}),
+		];
+
+		const layout = computeVisualLayout([[root], spans]);
+
+		// All 6 sequential siblings should share 1 row
+		expect(layout.totalVisualRows).toBe(2);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		for (const span of spans) {
+			expect(layout.spanToVisualRow[span.spanId]).toBe(1);
+		}
+	});
+
+	it('should keep children below parents even with misparented spans', () => {
+		// Simulates the dd_sig2 bug: /route spans have parentSpanId pointing
+		// to the wrong ancestor, but they are at level 2 in the spans[][] input.
+		// Level-based packing must place them below level 1 regardless.
+		const httpGet = makeSpan({
+			spanId: 'http-get',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		const route = makeSpan({
+			spanId: 'route',
+			parentSpanId: 'some-wrong-ancestor', // misparented!
+			timestamp: 10,
+			durationNano: 200e6,
+		});
+
+		const layout = computeVisualLayout([[httpGet], [route]]);
+
+		// httpGet at level 0 → row 0, route at level 1 → row 1
+		expect(layout.spanToVisualRow['http-get']).toBe(0);
+		expect(layout.spanToVisualRow['route']).toBe(1);
+		expect(layout.totalVisualRows).toBe(2);
+	});
+
+	it('should keep parent-child pairs adjacent when sibling subtrees overlap', () => {
+		// Multiple overlapping parents each with a child — the subtree-unit
+		// guarantee means every parent→child gap should be exactly 1.
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		// Three overlapping HTTP GET children of root, each with its own /route child
+		const get1 = makeSpan({
+			spanId: 'get1',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const route1 = makeSpan({
+			spanId: 'route1',
+			parentSpanId: 'get1',
+			timestamp: 10,
+			durationNano: 180e6,
+		});
+		const get2 = makeSpan({
+			spanId: 'get2',
+			parentSpanId: 'root',
+			timestamp: 50,
+			durationNano: 200e6,
+		});
+		const route2 = makeSpan({
+			spanId: 'route2',
+			parentSpanId: 'get2',
+			timestamp: 60,
+			durationNano: 180e6,
+		});
+		const get3 = makeSpan({
+			spanId: 'get3',
+			parentSpanId: 'root',
+			timestamp: 100,
+			durationNano: 200e6,
+		});
+		const route3 = makeSpan({
+			spanId: 'route3',
+			parentSpanId: 'get3',
+			timestamp: 110,
+			durationNano: 180e6,
+		});
+
+		const layout = computeVisualLayout([
+			[root],
+			[get1, get2, get3],
+			[route1, route2, route3],
+		]);
+
+		// Each parent-child pair should have a gap of exactly 1
+		const get1Row = layout.spanToVisualRow['get1'];
+		const route1Row = layout.spanToVisualRow['route1'];
+		const get2Row = layout.spanToVisualRow['get2'];
+		const route2Row = layout.spanToVisualRow['route2'];
+		const get3Row = layout.spanToVisualRow['get3'];
+		const route3Row = layout.spanToVisualRow['route3'];
+
+		expect(route1Row - get1Row).toBe(1);
+		expect(route2Row - get2Row).toBe(1);
+		expect(route3Row - get3Row).toBe(1);
+	});
+
+	it('should handle mixed levels — overlap at level 2 but not level 1', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 1000e6,
+		});
+		// Non-overlapping children
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 400e6,
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 500,
+			durationNano: 400e6,
+		});
+		// Overlapping grandchildren under A
+		const ga1 = makeSpan({
+			spanId: 'ga1',
+			parentSpanId: 'a',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const ga2 = makeSpan({
+			spanId: 'ga2',
+			parentSpanId: 'a',
+			timestamp: 100,
+			durationNano: 200e6,
+		});
+
+		const layout = computeVisualLayout([[root], [a, b], [ga1, ga2]]);
+
+		// root → row 0
+		// a, b → row 1 (no overlap, share row)
+		// ga1 → row 2, ga2 → row 3 (overlap, expanded)
+		// b has no children, so nothing after ga2
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['a']).toBe(1);
+		expect(layout.spanToVisualRow['b']).toBe(1);
+		expect(layout.spanToVisualRow['ga2']).toBe(2);
+		expect(layout.spanToVisualRow['ga1']).toBe(3);
+		expect(layout.totalVisualRows).toBe(4);
+	});
+
+	it('should not place a span where it covers an existing connector point (Check 2)', () => {
+		// Scenario: root has 3 leaf children. Sorted latest-first: C(200), B(100), A(80).
+		//
+		// C placed at row 1 [200, 400].
+		// B overlaps C → placed at row 2 [100, 300]. Connector from row 0→2 at x=100
+		//   passes through row 1, recording connector point at (row 1, x=100).
+		// A [80, 110] does NOT overlap C's span [200, 400] at row 1 (110 < 200),
+		//   so without connector reservation A would fit at row 1.
+		//   But A's span [80, 110) contains the connector point x=100 at row 1.
+		//   Check 2 prevents this placement, pushing A further down.
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		const c = makeSpan({
+			spanId: 'c',
+			parentSpanId: 'root',
+			timestamp: 200,
+			durationNano: 200e6, // [200, 400]
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 100,
+			durationNano: 200e6, // [100, 300]
+		});
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 80,
+			durationNano: 30e6, // [80, 110]
+		});
+
+		const layout = computeVisualLayout([[root], [a, b, c]]);
+
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['c']).toBe(1); // latest, placed first
+		expect(layout.spanToVisualRow['b']).toBe(2); // overlaps C → row 2
+
+		// A would fit at row 1 by span overlap alone, but connector point at
+		// (row 1, x=100) falls within A's span [80, 110). Check 2 pushes A down.
+		const aRow = layout.spanToVisualRow['a']!;
+		expect(aRow).toBeGreaterThan(1); // must NOT be at row 1
+		expect(aRow).toBe(3); // next free row after B at row 2 (A overlaps B)
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -0,0 +1,370 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+export interface ConnectorLine {
+	parentRow: number;
+	childRow: number;
+	timestampMs: number;
+	serviceName: string;
+}
+
+export interface VisualLayout {
+	visualRows: FlamegraphSpan[][];
+	spanToVisualRow: Record<string, number>;
+	connectors: ConnectorLine[];
+	totalVisualRows: number;
+}
+
+/**
+ * Computes an overlap-safe visual layout for flamegraph spans using DFS ordering.
+ *
+ * Builds a parent→children tree from parentSpanId, then traverses in DFS pre-order.
+ * Each span is placed at parentRow+1 if free, otherwise scans upward row-by-row
+ * until finding a non-overlapping row. This keeps children visually close to their
+ * parents and avoids the BFS problem where distant siblings push children far down.
+ */
+export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
+	const spanToVisualRow = new Map<string, number>();
+	const visualRowsMap = new Map<number, FlamegraphSpan[]>();
+	let maxRow = -1;
+
+	// Per-row interval list for overlap detection
+	// Each entry: [startTime, endTime]
+	const rowIntervals = new Map<number, Array<[number, number]>>();
+
+	// function hasOverlap(row: number, startTime: number, endTime: number): boolean {
+	// 	const intervals = rowIntervals.get(row);
+	// 	if (!intervals) {
+	// 		return false;
+	// 	}
+	// 	for (const [s, e] of intervals) {
+	// 		if (startTime < e && endTime > s) {
+	// 			return true;
+	// 		}
+	// 	}
+	// 	return false;
+	// }
+
+	function addToRow(row: number, span: FlamegraphSpan): void {
+		spanToVisualRow.set(span.spanId, row);
+		let arr = visualRowsMap.get(row);
+		if (!arr) {
+			arr = [];
+			visualRowsMap.set(row, arr);
+		}
+		arr.push(span);
+
+		const startTime = span.timestamp;
+		const endTime = span.timestamp + span.durationNano / 1e6;
+		let intervals = rowIntervals.get(row);
+		if (!intervals) {
+			intervals = [];
+			rowIntervals.set(row, intervals);
+		}
+		intervals.push([startTime, endTime]);
+
+		if (row > maxRow) {
+			maxRow = row;
+		}
+	}
+
+	// Flatten all spans and build lookup + children map
+	const spanMap = new Map<string, FlamegraphSpan>();
+	const childrenMap = new Map<string, FlamegraphSpan[]>();
+	const allSpans: FlamegraphSpan[] = [];
+
+	for (const level of spans) {
+		for (const span of level) {
+			allSpans.push(span);
+			spanMap.set(span.spanId, span);
+		}
+	}
+
+	// Extract parentSpanId — the field may be missing at runtime when the API
+	// returns `references` instead.  Fall back to the first CHILD_OF reference.
+	function getParentId(span: FlamegraphSpan): string {
+		if (span.parentSpanId) {
+			return span.parentSpanId;
+		}
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const refs = (span as any).references as
+			| Array<{ spanId?: string; refType?: string }>
+			| undefined;
+		if (refs) {
+			for (const ref of refs) {
+				if (ref.refType === 'CHILD_OF' && ref.spanId) {
+					return ref.spanId;
+				}
+			}
+		}
+		return '';
+	}
+
+	// Build children map and identify roots
+	const roots: FlamegraphSpan[] = [];
+
+	for (const span of allSpans) {
+		const parentId = getParentId(span);
+		if (!parentId || !spanMap.has(parentId)) {
+			roots.push(span);
+		} else {
+			let children = childrenMap.get(parentId);
+			if (!children) {
+				children = [];
+				childrenMap.set(parentId, children);
+			}
+			children.push(span);
+		}
+	}
+
+	// Sort children by timestamp for deterministic ordering
+	for (const [, children] of childrenMap) {
+		children.sort((a, b) => b.timestamp - a.timestamp);
+	}
+
+	// --- Subtree-unit placement ---
+	// Compute each subtree's layout in isolation, then place as a unit
+	// to guarantee parent-child adjacency within subtrees.
+
+	interface ShapeEntry {
+		span: FlamegraphSpan;
+		relativeRow: number;
+	}
+
+	function hasOverlapIn(
+		intervals: Map<number, Array<[number, number]>>,
+		row: number,
+		startTime: number,
+		endTime: number,
+	): boolean {
+		const rowIntervals = intervals.get(row);
+		if (!rowIntervals) {
+			return false;
+		}
+		for (const [s, e] of rowIntervals) {
+			if (startTime < e && endTime > s) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	function addIntervalTo(
+		intervals: Map<number, Array<[number, number]>>,
+		row: number,
+		startTime: number,
+		endTime: number,
+	): void {
+		let arr = intervals.get(row);
+		if (!arr) {
+			arr = [];
+			intervals.set(row, arr);
+		}
+		arr.push([startTime, endTime]);
+	}
+
+	function hasConnectorConflict(
+		intervals: Map<number, Array<[number, number]>>,
+		row: number,
+		point: number,
+	): boolean {
+		const rowIntervals = intervals.get(row);
+		if (!rowIntervals) {
+			return false;
+		}
+		for (const [s, e] of rowIntervals) {
+			if (point >= s && point < e) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	function hasPointInSpan(
+		connectorPoints: Map<number, number[]>,
+		row: number,
+		startTime: number,
+		endTime: number,
+	): boolean {
+		const points = connectorPoints.get(row);
+		if (!points) {
+			return false;
+		}
+		for (const p of points) {
+			if (p >= startTime && p < endTime) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	function addConnectorPoint(
+		connectorPoints: Map<number, number[]>,
+		row: number,
+		point: number,
+	): void {
+		let arr = connectorPoints.get(row);
+		if (!arr) {
+			arr = [];
+			connectorPoints.set(row, arr);
+		}
+		arr.push(point);
+	}
+
+	function computeSubtreeShape(rootSpan: FlamegraphSpan): ShapeEntry[] {
+		const localIntervals = new Map<number, Array<[number, number]>>();
+		const localConnectorPoints = new Map<number, number[]>();
+		const shape: ShapeEntry[] = [];
+
+		// Place root span at relative row 0
+		const rootStart = rootSpan.timestamp;
+		const rootEnd = rootSpan.timestamp + rootSpan.durationNano / 1e6;
+		shape.push({ span: rootSpan, relativeRow: 0 });
+		addIntervalTo(localIntervals, 0, rootStart, rootEnd);
+
+		const children = childrenMap.get(rootSpan.spanId);
+		if (children) {
+			for (const child of children) {
+				const childShape = computeSubtreeShape(child);
+				const connectorX = child.timestamp;
+				const offset = findPlacement(
+					childShape,
+					1,
+					localIntervals,
+					localConnectorPoints,
+					connectorX,
+				);
+
+				// Record connector points for intermediate rows (1 to offset-1)
+				for (let r = 1; r < offset; r++) {
+					addConnectorPoint(localConnectorPoints, r, connectorX);
+				}
+
+				// Place child shape into local state at offset
+				for (const entry of childShape) {
+					const actualRow = entry.relativeRow + offset;
+					shape.push({ span: entry.span, relativeRow: actualRow });
+					const s = entry.span.timestamp;
+					const e = entry.span.timestamp + entry.span.durationNano / 1e6;
+					addIntervalTo(localIntervals, actualRow, s, e);
+				}
+			}
+		}
+
+		return shape;
+	}
+
+	function findPlacement(
+		shape: ShapeEntry[],
+		minOffset: number,
+		intervals: Map<number, Array<[number, number]>>,
+		connectorPoints?: Map<number, number[]>,
+		connectorX?: number,
+	): number {
+		// Track the first offset that passes Checks 1 & 2 as a fallback.
+		// Check 3 (connector vs span) is monotonically failing: once it fails
+		// at offset K, all offsets > K also fail (more intermediate rows).
+		// If we can't satisfy Check 3, fall back to the best offset without it.
+		let fallbackOffset = -1;
+
+		for (let offset = minOffset; ; offset++) {
+			let passesSpanChecks = true;
+
+			// Check 1: span vs span (existing)
+			for (const entry of shape) {
+				const targetRow = entry.relativeRow + offset;
+				const s = entry.span.timestamp;
+				const e = entry.span.timestamp + entry.span.durationNano / 1e6;
+				if (hasOverlapIn(intervals, targetRow, s, e)) {
+					passesSpanChecks = false;
+					break;
+				}
+			}
+
+			// Check 2: span vs existing connector points
+			if (passesSpanChecks && connectorPoints) {
+				for (const entry of shape) {
+					const targetRow = entry.relativeRow + offset;
+					const s = entry.span.timestamp;
+					const e = entry.span.timestamp + entry.span.durationNano / 1e6;
+					if (hasPointInSpan(connectorPoints, targetRow, s, e)) {
+						passesSpanChecks = false;
+						break;
+					}
+				}
+			}
+
+			if (!passesSpanChecks) {
+				continue;
+			}
+
+			// This offset passes Checks 1 & 2 — record as fallback
+			if (fallbackOffset === -1) {
+				fallbackOffset = offset;
+			}
+
+			// Check 3: new connector vs existing spans
+			if (connectorX !== undefined) {
+				let connectorClear = true;
+				for (let r = 1; r < offset; r++) {
+					if (hasConnectorConflict(intervals, r, connectorX)) {
+						connectorClear = false;
+						break;
+					}
+				}
+				if (!connectorClear) {
+					// Check 3 will fail for all larger offsets too.
+					// Fall back to the first offset that passed Checks 1 & 2.
+					return fallbackOffset;
+				}
+			}
+
+			return offset;
+		}
+	}
+
+	// Process roots sorted by timestamp
+	roots.sort((a, b) => a.timestamp - b.timestamp);
+	for (const root of roots) {
+		const shape = computeSubtreeShape(root);
+		const offset = findPlacement(shape, 0, rowIntervals);
+		for (const entry of shape) {
+			addToRow(entry.relativeRow + offset, entry.span);
+		}
+	}
+
+	// Build the visualRows array
+	const totalVisualRows = maxRow + 1;
+	const visualRows: FlamegraphSpan[][] = [];
+	for (let i = 0; i < totalVisualRows; i++) {
+		visualRows.push(visualRowsMap.get(i) || []);
+	}
+
+	// Build connector lines for parent-child pairs with row gap > 1
+	const connectors: ConnectorLine[] = [];
+	for (const [parentId, children] of childrenMap) {
+		const parentRow = spanToVisualRow.get(parentId);
+		if (parentRow === undefined) {
+			continue;
+		}
+		for (const child of children) {
+			const childRow = spanToVisualRow.get(child.spanId);
+			if (childRow === undefined || childRow - parentRow <= 1) {
+				continue;
+			}
+			connectors.push({
+				parentRow,
+				childRow,
+				timestampMs: child.timestamp,
+				serviceName: child.serviceName,
+			});
+		}
+	}
+
+	return {
+		visualRows,
+		spanToVisualRow: Object.fromEntries(spanToVisualRow),
+		connectors,
+		totalVisualRows,
+	};
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -1,6 +1,9 @@
 import React, { RefObject, useCallback, useRef } from 'react';
+import { themeColors } from 'constants/theme';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
 
+import { ConnectorLine } from '../computeVisualLayout';
 import { SpanRect } from '../types';
 import {
 	clamp,
@@ -14,6 +17,7 @@ interface UseFlamegraphDrawArgs {
 	canvasRef: RefObject<HTMLCanvasElement>;
 	containerRef: RefObject<HTMLDivElement>;
 	spans: FlamegraphSpan[][];
+	connectors: ConnectorLine[];
 	viewStartTs: number;
 	viewEndTs: number;
 	scrollTop: number;
@@ -114,6 +118,68 @@ function drawLevel(args: DrawLevelArgs): void {
 	}
 }
 
+interface DrawConnectorLinesArgs {
+	ctx: CanvasRenderingContext2D;
+	connectors: ConnectorLine[];
+	scrollTop: number;
+	viewStartTs: number;
+	timeSpan: number;
+	cssWidth: number;
+	viewportHeight: number;
+	metrics: FlamegraphRowMetrics;
+}
+
+function drawConnectorLines(args: DrawConnectorLinesArgs): void {
+	const {
+		ctx,
+		connectors,
+		scrollTop,
+		viewStartTs,
+		timeSpan,
+		cssWidth,
+		viewportHeight,
+		metrics,
+	} = args;
+
+	ctx.save();
+	ctx.lineWidth = 1;
+	ctx.globalAlpha = 0.6;
+
+	for (const conn of connectors) {
+		const xFrac = (conn.timestampMs - viewStartTs) / timeSpan;
+		if (xFrac < -0.01 || xFrac > 1.01) {
+			continue;
+		}
+
+		const parentY =
+			conn.parentRow * metrics.ROW_HEIGHT -
+			scrollTop +
+			metrics.SPAN_BAR_Y_OFFSET +
+			metrics.SPAN_BAR_HEIGHT;
+		const childY =
+			conn.childRow * metrics.ROW_HEIGHT - scrollTop + metrics.SPAN_BAR_Y_OFFSET;
+
+		// Skip if entirely outside viewport
+		if (parentY > viewportHeight || childY < 0) {
+			continue;
+		}
+
+		const color = generateColor(
+			conn.serviceName,
+			themeColors.traceDetailColorsV3,
+		);
+		ctx.strokeStyle = color;
+
+		const x = clamp(xFrac * cssWidth, 0, cssWidth);
+		ctx.beginPath();
+		ctx.moveTo(x, parentY);
+		ctx.lineTo(x, childY);
+		ctx.stroke();
+	}
+
+	ctx.restore();
+}
+
 export function useFlamegraphDraw(
 	args: UseFlamegraphDrawArgs,
 ): UseFlamegraphDrawResult {
@@ -121,6 +187,7 @@ export function useFlamegraphDraw(
 		canvasRef,
 		containerRef,
 		spans,
+		connectors,
 		viewStartTs,
 		viewEndTs,
 		scrollTop,
@@ -173,6 +240,18 @@ export function useFlamegraphDraw(
 
 		ctx.clearRect(0, 0, cssWidth, viewportHeight);
 
+		// ---- Draw connector lines (behind span bars) ----
+		drawConnectorLines({
+			ctx,
+			connectors,
+			scrollTop,
+			viewStartTs,
+			timeSpan,
+			cssWidth,
+			viewportHeight,
+			metrics,
+		});
+
 		const spanRectsArray: SpanRect[] = [];
 
 		// ---- Draw only visible levels ----
@@ -204,6 +283,7 @@ export function useFlamegraphDraw(
 		containerRef,
 		spanRectsRef,
 		spans,
+		connectors,
 		viewStartTs,
 		viewEndTs,
 		scrollTop,

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -47,6 +47,7 @@ function findSpanAtPosition(
 }
 
 export interface TooltipContent {
+	serviceName: string;
 	spanName: string;
 	status: 'ok' | 'warning' | 'error';
 	startMs: number;
@@ -139,6 +140,7 @@ export function useFlamegraphHover(
 			if (span) {
 				setHoveredSpanId(span.spanId);
 				setTooltipContent({
+					serviceName: span.serviceName || '',
 					spanName: span.name || 'unknown',
 					status: span.hasError ? 'error' : 'ok',
 					startMs: span.timestamp - traceMetadata.startTime,

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { computeVisualLayout, VisualLayout } from '../computeVisualLayout';
+import { LayoutWorkerResponse } from '../visualLayoutWorkerTypes';
+
+const EMPTY_LAYOUT: VisualLayout = {
+	visualRows: [],
+	spanToVisualRow: {},
+	connectors: [],
+	totalVisualRows: 0,
+};
+
+function computeLayoutOrEmpty(spans: FlamegraphSpan[][]): VisualLayout {
+	return spans.length ? computeVisualLayout(spans) : EMPTY_LAYOUT;
+}
+
+function createLayoutWorker(): Worker {
+	return new Worker(new URL('../visualLayout.worker.ts', import.meta.url), {
+		type: 'module',
+	});
+}
+
+export function useVisualLayoutWorker(
+	spans: FlamegraphSpan[][],
+): { layout: VisualLayout; isComputing: boolean } {
+	const [layout, setLayout] = useState<VisualLayout>(EMPTY_LAYOUT);
+	const [isComputing, setIsComputing] = useState(false);
+	const workerRef = useRef<Worker | null>(null);
+	const requestIdRef = useRef(0);
+	const fallbackRef = useRef(typeof Worker === 'undefined');
+
+	// Effect: post message to worker when spans change
+	useEffect(() => {
+		if (fallbackRef.current) {
+			setLayout(computeLayoutOrEmpty(spans));
+			return;
+		}
+
+		if (!workerRef.current) {
+			try {
+				workerRef.current = createLayoutWorker();
+			} catch {
+				fallbackRef.current = true;
+				setLayout(computeLayoutOrEmpty(spans));
+				return;
+			}
+		}
+
+		if (!spans.length) {
+			setLayout(EMPTY_LAYOUT);
+			return;
+		}
+
+		const currentId = ++requestIdRef.current;
+		setIsComputing(true);
+
+		const worker = workerRef.current;
+
+		const onMessage = (e: MessageEvent<LayoutWorkerResponse>): void => {
+			if (e.data.requestId !== requestIdRef.current) {
+				return;
+			}
+			if (e.data.type === 'result') {
+				setLayout(e.data.layout);
+			} else {
+				setLayout(computeVisualLayout(spans));
+			}
+			setIsComputing(false);
+		};
+
+		const onError = (): void => {
+			if (requestIdRef.current === currentId) {
+				setLayout(computeVisualLayout(spans));
+				setIsComputing(false);
+			}
+		};
+
+		worker.addEventListener('message', onMessage);
+		worker.addEventListener('error', onError);
+		worker.postMessage({ type: 'compute', requestId: currentId, spans });
+
+		return (): void => {
+			worker.removeEventListener('message', onMessage);
+			worker.removeEventListener('error', onError);
+		};
+	}, [spans]);
+
+	// Cleanup worker on unmount
+	useEffect(
+		() => (): void => {
+			workerRef.current?.terminate();
+		},
+		[],
+	);
+
+	return { layout, isComputing };
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayout.worker.ts

@@ -0,0 +1,26 @@
+/// <reference lib="webworker" />
+import { computeVisualLayout } from './computeVisualLayout';
+import {
+	LayoutWorkerRequest,
+	LayoutWorkerResponse,
+} from './visualLayoutWorkerTypes';
+
+self.onmessage = (event: MessageEvent<LayoutWorkerRequest>): void => {
+	const { requestId, spans } = event.data;
+	try {
+		const layout = computeVisualLayout(spans);
+		const response: LayoutWorkerResponse = {
+			type: 'result',
+			requestId,
+			layout,
+		};
+		self.postMessage(response);
+	} catch (err) {
+		const response: LayoutWorkerResponse = {
+			type: 'error',
+			requestId,
+			message: String(err),
+		};
+		self.postMessage(response);
+	}
+};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayoutWorkerTypes.ts

@@ -0,0 +1,13 @@
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { VisualLayout } from './computeVisualLayout';
+
+export interface LayoutWorkerRequest {
+	type: 'compute';
+	requestId: number;
+	spans: FlamegraphSpan[][];
+}
+
+export type LayoutWorkerResponse =
+	| { type: 'result'; requestId: number; layout: VisualLayout }
+	| { type: 'error'; requestId: number; message: string };

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -0,0 +1,297 @@
+// Modal base styles
+.add-span-to-funnel-modal {
+	&__loading-spinner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 400px;
+	}
+	&-container {
+		.ant-modal {
+			&-content,
+			&-header {
+				background: var(--bg-ink-500);
+			}
+
+			&-header {
+				border-bottom: none;
+
+				.ant-modal-title {
+					color: var(--bg-vanilla-100);
+				}
+			}
+
+			&-body {
+				padding: 14px 16px !important;
+				padding-bottom: 0 !important;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			&-footer {
+				margin-top: 0;
+				background: var(--bg-ink-400);
+				border-top: 1px solid var(--bg-slate-500);
+				padding: 16px !important;
+				.add-span-to-funnel-modal {
+					&__save-button {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						gap: 4px;
+						color: var(--bg-vanilla-100);
+						font-size: 12px;
+						font-weight: 500;
+						line-height: 24px;
+						width: 135px;
+
+						.ant-btn-icon {
+							display: flex;
+						}
+						&:disabled {
+							color: var(--bg-vanilla-400);
+							.ant-btn-icon {
+								svg {
+									stroke: var(--bg-vanilla-400);
+								}
+							}
+						}
+					}
+					&__discard-button {
+						background: var(--bg-slate-500);
+					}
+				}
+				.ant-btn {
+					border-radius: 2px;
+					padding: 4px 8px;
+					margin: 0 !important;
+					border: none;
+					box-shadow: none;
+				}
+			}
+		}
+	}
+}
+
+// Main modal styles
+.add-span-to-funnel-modal {
+	// Common button styles
+	%button-base {
+		display: flex;
+		align-items: center;
+		font-family: Inter;
+	}
+
+	// Details view styles
+	&--details {
+		.traces-funnel-details {
+			height: unset;
+
+			&__steps-config {
+				width: unset;
+				border: none;
+			}
+
+			.funnel-step-wrapper {
+				gap: 15px;
+			}
+
+			.steps-content {
+				max-height: 500px;
+			}
+		}
+	}
+
+	// Search section
+	&__search {
+		display: flex;
+		gap: 12px;
+		margin-bottom: 14px;
+		align-items: center;
+
+		&-input {
+			flex: 1;
+			padding: 6px 8px;
+			background: var(--bg-ink-300);
+
+			.ant-input-prefix {
+				height: 18px;
+				margin-inline-end: 6px;
+				svg {
+					opacity: 0.4;
+				}
+			}
+
+			&,
+			input {
+				font-family: Inter;
+				font-size: 14px;
+				line-height: 18px;
+				letter-spacing: -0.07px;
+				font-weight: 400;
+				background: var(--bg-ink-300);
+			}
+
+			input::placeholder {
+				color: var(--bg-vanilla-400);
+				opacity: 0.4;
+			}
+		}
+	}
+
+	// Create button
+	&__create-button {
+		@extend %button-base;
+		width: 153px;
+		padding: 4px 8px;
+		justify-content: center;
+		gap: 4px;
+		flex-shrink: 0;
+		border-radius: 2px;
+		background: var(--bg-slate-500);
+		border: none;
+		box-shadow: none;
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 24px;
+	}
+	.funnel-item {
+		padding: 8px 8px 12px 16px;
+		&,
+		&:first-child {
+			border-radius: 6px;
+		}
+
+		&__header {
+			line-height: 20px;
+		}
+		&__details {
+			line-height: 18px;
+		}
+	}
+
+	// List section
+	&__list {
+		max-height: 400px;
+		overflow-y: scroll;
+		.funnels-empty {
+			&__content {
+				padding: 0;
+			}
+		}
+
+		.funnels-list {
+			gap: 8px;
+
+			.funnel-item {
+				padding: 8px 16px 12px;
+
+				&__details {
+					margin-top: 8px;
+				}
+			}
+		}
+	}
+
+	&__spinner {
+		height: 400px;
+	}
+
+	// Back button
+	&__back-button {
+		@extend %button-base;
+		gap: 6px;
+		color: var(--bg-vanilla-400);
+		font-size: 14px;
+		line-height: 20px;
+		margin-bottom: 14px;
+	}
+
+	// Details section
+	&__details {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.funnel-configuration__steps {
+			padding: 0;
+
+			.funnel-step {
+				&__content .filters__service-and-span .ant-select {
+					width: 170px;
+				}
+
+				&__footer .error {
+					width: 25%;
+				}
+			}
+
+			.inter-step-config {
+				width: calc(100% - 104px);
+			}
+		}
+		.funnel-item__actions-popover {
+			display: none;
+		}
+	}
+}
+
+// Light mode styles
+.lightMode {
+	.add-span-to-funnel-modal-container {
+		.ant-modal {
+			&-content,
+			&-header {
+				background: var(--bg-vanilla-100);
+			}
+
+			&-title {
+				color: var(--bg-ink-500);
+			}
+
+			&-footer {
+				border-top-color: var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+				.add-span-to-funnel-modal__discard-button {
+					background: var(--bg-vanilla-200);
+					color: var(--bg-ink-500);
+				}
+			}
+		}
+	}
+
+	.add-span-to-funnel-modal {
+		&__search-input {
+			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--bg-ink-500);
+
+			input {
+				color: var(--bg-ink-500);
+				background: var(--bg-vanilla-100);
+
+				&::placeholder {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+
+		&__create-button {
+			background: var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+		}
+
+		&__back-button {
+			color: var(--bg-ink-500);
+
+			&:hover {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		&__details h3 {
+			color: var(--bg-ink-500);
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -0,0 +1,294 @@
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Input, Spin } from 'antd';
+import cx from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SignozModal from 'components/SignozModal/SignozModal';
+import {
+	useFunnelDetails,
+	useFunnelsList,
+} from 'hooks/TracesFunnels/useFunnels';
+import { isEqual } from 'lodash-es';
+import { ArrowLeft, Check, Plus, Search } from 'lucide-react';
+import FunnelConfiguration from 'pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration';
+import { TracesFunnelsContentRenderer } from 'pages/TracesFunnels';
+import CreateFunnel from 'pages/TracesFunnels/components/CreateFunnel/CreateFunnel';
+import { FunnelListItem } from 'pages/TracesFunnels/components/FunnelsList/FunnelsList';
+import {
+	FunnelProvider,
+	useFunnelContext,
+} from 'pages/TracesFunnels/FunnelContext';
+import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
+import { Span } from 'types/api/trace/getTraceV2';
+import { FunnelData } from 'types/api/traceFunnels';
+
+import './AddSpanToFunnelModal.styles.scss';
+
+enum ModalView {
+	LIST = 'list',
+	DETAILS = 'details',
+}
+
+function FunnelDetailsView({
+	funnel,
+	span,
+	triggerAutoSave,
+	showNotifications,
+	onChangesDetected,
+	triggerDiscard,
+}: {
+	funnel: FunnelData;
+	span: Span;
+	triggerAutoSave: boolean;
+	showNotifications: boolean;
+	onChangesDetected: (hasChanges: boolean) => void;
+	triggerDiscard: boolean;
+}): JSX.Element {
+	const { handleRestoreSteps, steps } = useFunnelContext();
+
+	// Track changes between current steps and original steps
+	useEffect(() => {
+		const hasChanges = !isEqual(steps, funnel.steps);
+		if (onChangesDetected) {
+			onChangesDetected(hasChanges);
+		}
+	}, [steps, funnel.steps, onChangesDetected]);
+
+	// Handle discard when triggered from parent
+	useEffect(() => {
+		if (triggerDiscard && funnel.steps) {
+			handleRestoreSteps(funnel.steps);
+		}
+	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
+
+	return (
+		<div className="add-span-to-funnel-modal__details">
+			<FunnelListItem
+				funnel={funnel}
+				shouldRedirectToTracesListOnDeleteSuccess={false}
+				isSpanDetailsPage
+			/>
+			<FunnelConfiguration
+				funnel={funnel}
+				isTraceDetailsPage
+				span={span}
+				triggerAutoSave={triggerAutoSave}
+				showNotifications={showNotifications}
+			/>
+		</div>
+	);
+}
+
+interface AddSpanToFunnelModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	span: Span;
+}
+
+function AddSpanToFunnelModal({
+	isOpen,
+	onClose,
+	span,
+}: AddSpanToFunnelModalProps): JSX.Element {
+	const [activeView, setActiveView] = useState<ModalView>(ModalView.LIST);
+	const [searchQuery, setSearchQuery] = useState<string>('');
+	const [selectedFunnelId, setSelectedFunnelId] = useState<string | undefined>(
+		undefined,
+	);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false);
+	const [triggerSave, setTriggerSave] = useState<boolean>(false);
+	const [isUnsavedChanges, setIsUnsavedChanges] = useState<boolean>(false);
+	const [triggerDiscard, setTriggerDiscard] = useState<boolean>(false);
+	const [isCreatedFromSpan, setIsCreatedFromSpan] = useState<boolean>(false);
+
+	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
+		setSearchQuery(e.target.value);
+	};
+
+	const { data, isLoading, isError, isFetching } = useFunnelsList();
+
+	const filteredData = useMemo(
+		() =>
+			filterFunnelsByQuery(data?.payload || [], searchQuery).sort(
+				(a, b) =>
+					new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+			),
+		[data?.payload, searchQuery],
+	);
+
+	const {
+		data: funnelDetails,
+		isLoading: isFunnelDetailsLoading,
+		isFetching: isFunnelDetailsFetching,
+	} = useFunnelDetails({
+		funnelId: selectedFunnelId,
+	});
+
+	const handleFunnelClick = (funnel: FunnelData): void => {
+		setSelectedFunnelId(funnel.funnel_id);
+		setActiveView(ModalView.DETAILS);
+		setIsCreatedFromSpan(false);
+	};
+
+	const handleBack = (): void => {
+		setActiveView(ModalView.LIST);
+		setSelectedFunnelId(undefined);
+		setIsUnsavedChanges(false);
+		setTriggerSave(false);
+		setIsCreatedFromSpan(false);
+	};
+
+	const handleCreateNewClick = (): void => {
+		setIsCreateModalOpen(true);
+	};
+
+	const handleSaveFunnel = (): void => {
+		setTriggerSave(true);
+		// Reset trigger after a brief moment to allow the save to be processed
+		setTimeout(() => {
+			setTriggerSave(false);
+			onClose();
+		}, 100);
+	};
+
+	const handleDiscard = (): void => {
+		setTriggerDiscard(true);
+		// Reset trigger after a brief moment
+		setTimeout(() => {
+			setTriggerDiscard(false);
+			onClose();
+		}, 100);
+	};
+
+	const renderListView = (): JSX.Element => (
+		<div className="add-span-to-funnel-modal">
+			{!!filteredData?.length && (
+				<div className="add-span-to-funnel-modal__search">
+					<Input
+						className="add-span-to-funnel-modal__search-input"
+						placeholder="Search by name, description, or tags..."
+						prefix={<Search size={12} />}
+						value={searchQuery}
+						onChange={handleSearch}
+					/>
+				</div>
+			)}
+			<div className="add-span-to-funnel-modal__list">
+				<OverlayScrollbar>
+					<TracesFunnelsContentRenderer
+						isError={isError}
+						isLoading={isLoading || isFetching}
+						data={filteredData || []}
+						onCreateFunnel={handleCreateNewClick}
+						onFunnelClick={(funnel: FunnelData): void => handleFunnelClick(funnel)}
+						shouldRedirectToTracesListOnDeleteSuccess={false}
+					/>
+				</OverlayScrollbar>
+			</div>
+			<CreateFunnel
+				isOpen={isCreateModalOpen}
+				onClose={(funnelId): void => {
+					if (funnelId) {
+						setSelectedFunnelId(funnelId);
+						setActiveView(ModalView.DETAILS);
+						setIsCreatedFromSpan(true);
+					}
+					setIsCreateModalOpen(false);
+				}}
+				redirectToDetails={false}
+			/>
+		</div>
+	);
+
+	const renderDetailsView = ({ span }: { span: Span }): JSX.Element => (
+		<div className="add-span-to-funnel-modal add-span-to-funnel-modal--details">
+			<Button
+				type="text"
+				className="add-span-to-funnel-modal__back-button"
+				onClick={handleBack}
+			>
+				<ArrowLeft size={14} />
+				All funnels
+			</Button>
+			<div className="traces-funnel-details">
+				<div className="traces-funnel-details__steps-config">
+					<Spin
+						className="add-span-to-funnel-modal__loading-spinner"
+						spinning={isFunnelDetailsLoading || isFunnelDetailsFetching}
+						indicator={<LoadingOutlined spin />}
+					>
+						{selectedFunnelId && funnelDetails?.payload && (
+							<FunnelProvider
+								funnelId={selectedFunnelId}
+								hasSingleStep={isCreatedFromSpan}
+							>
+								<FunnelDetailsView
+									funnel={funnelDetails.payload}
+									span={span}
+									triggerAutoSave={triggerSave}
+									showNotifications
+									onChangesDetected={setIsUnsavedChanges}
+									triggerDiscard={triggerDiscard}
+								/>
+							</FunnelProvider>
+						)}
+					</Spin>
+				</div>
+			</div>
+		</div>
+	);
+
+	return (
+		<SignozModal
+			open={isOpen}
+			onCancel={onClose}
+			width={570}
+			title="Add span to funnel"
+			className={cx('add-span-to-funnel-modal-container', {
+				'add-span-to-funnel-modal-container--details':
+					activeView === ModalView.DETAILS,
+			})}
+			footer={
+				activeView === ModalView.DETAILS
+					? [
+							<Button
+								type="default"
+								key="discard"
+								onClick={handleDiscard}
+								className="add-span-to-funnel-modal__discard-button"
+								disabled={!isUnsavedChanges}
+							>
+								Discard
+							</Button>,
+							<Button
+								key="save"
+								type="primary"
+								className="add-span-to-funnel-modal__save-button"
+								onClick={handleSaveFunnel}
+								disabled={!isUnsavedChanges}
+								icon={<Check size={14} color="var(--bg-vanilla-100)" />}
+							>
+								Save Funnel
+							</Button>,
+					  ]
+					: [
+							<Button
+								key="create"
+								type="default"
+								className="add-span-to-funnel-modal__create-button"
+								onClick={handleCreateNewClick}
+								icon={<Plus size={14} />}
+							>
+								Create new funnel
+							</Button>,
+					  ]
+			}
+		>
+			{activeView === ModalView.LIST
+				? renderListView()
+				: renderDetailsView({ span })}
+		</SignozModal>
+	);
+}
+
+export default AddSpanToFunnelModal;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

@@ -0,0 +1,39 @@
+.span-line-action-buttons {
+	display: flex;
+	position: absolute;
+	transform: translate(-50%, -50%);
+	top: 50%;
+	right: 0;
+	cursor: pointer;
+	border-radius: 2px;
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-400);
+
+	.ant-btn-default {
+		border: none;
+		box-shadow: none;
+		padding: 9px;
+		justify-content: center;
+		align-items: center;
+		display: flex;
+
+		&.active-tab {
+			background-color: var(--bg-slate-400);
+		}
+	}
+
+	.copy-span-btn {
+		border-color: var(--bg-slate-400) !important;
+	}
+}
+
+.lightMode {
+	.span-line-action-buttons {
+		border: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-400);
+
+		.copy-span-btn {
+			border-color: var(--bg-vanilla-400) !important;
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

@@ -0,0 +1,134 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
+import { render } from 'tests/test-utils';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import SpanLineActionButtons from '../index';
+
+// Mock the useCopySpanLink hook
+jest.mock('hooks/trace/useCopySpanLink');
+
+const mockSpan: Span = {
+	spanId: 'test-span-id',
+	name: 'test-span',
+	serviceName: 'test-service',
+	durationNano: 1000,
+	timestamp: 1234567890,
+	rootSpanId: 'test-root-span-id',
+	parentSpanId: 'test-parent-span-id',
+	traceId: 'test-trace-id',
+	hasError: false,
+	kind: 0,
+	references: [],
+	tagMap: {},
+	event: [],
+	rootName: 'test-root-name',
+	statusMessage: 'test-status-message',
+	statusCodeString: 'test-status-code-string',
+	spanKind: 'test-span-kind',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 0,
+	level: 0,
+};
+
+describe('SpanLineActionButtons', () => {
+	beforeEach(() => {
+		// Clear mock before each test
+		jest.clearAllMocks();
+	});
+
+	it('renders copy link button with correct icon', () => {
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: jest.fn(),
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Check if the button is rendered
+		const copyButton = screen.getByRole('button');
+		expect(copyButton).toBeInTheDocument();
+
+		// Check if the link icon is rendered
+		const linkIcon = screen.getByRole('img', { hidden: true });
+		expect(linkIcon).toHaveClass('anticon anticon-link');
+	});
+
+	it('calls onSpanCopy when copy button is clicked', () => {
+		const mockOnSpanCopy = jest.fn();
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: mockOnSpanCopy,
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Click the copy button
+		const copyButton = screen.getByRole('button');
+		fireEvent.click(copyButton);
+
+		// Verify the copy function was called
+		expect(mockOnSpanCopy).toHaveBeenCalledTimes(1);
+	});
+
+	it('applies correct styling classes', () => {
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: jest.fn(),
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Check if the main container has the correct class
+		const container = screen
+			.getByRole('button')
+			.closest('.span-line-action-buttons');
+		expect(container).toHaveClass('span-line-action-buttons');
+
+		// Check if the button has the correct class
+		const copyButton = screen.getByRole('button');
+		expect(copyButton).toHaveClass('copy-span-btn');
+	});
+
+	it('copies span link to clipboard when copy button is clicked', () => {
+		const mockSetCopy = jest.fn();
+		const mockUrlQuery = {
+			delete: jest.fn(),
+			set: jest.fn(),
+			toString: jest.fn().mockReturnValue('spanId=test-span-id'),
+		};
+		const mockPathname = '/test-path';
+		const mockLocation = {
+			origin: 'http://localhost:3000',
+		};
+
+		// Mock window.location
+		Object.defineProperty(window, 'location', {
+			value: mockLocation,
+			writable: true,
+		});
+
+		// Mock useCopySpanLink hook
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: (event: React.MouseEvent) => {
+				event.preventDefault();
+				event.stopPropagation();
+				mockUrlQuery.delete('spanId');
+				mockUrlQuery.set('spanId', mockSpan.spanId);
+				const link = `${
+					window.location.origin
+				}${mockPathname}?${mockUrlQuery.toString()}`;
+				mockSetCopy(link);
+			},
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Click the copy button
+		const copyButton = screen.getByRole('button');
+		fireEvent.click(copyButton);
+
+		// Verify the copy function was called with correct link
+		expect(mockSetCopy).toHaveBeenCalledWith(
+			'http://localhost:3000/test-path?spanId=test-span-id',
+		);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/index.tsx

@@ -0,0 +1,28 @@
+import { LinkOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import './SpanLineActionButtons.styles.scss';
+
+export interface SpanLineActionButtonsProps {
+	span: Span;
+}
+export default function SpanLineActionButtons({
+	span,
+}: SpanLineActionButtonsProps): JSX.Element {
+	const { onSpanCopy } = useCopySpanLink(span);
+
+	return (
+		<div className="span-line-action-buttons">
+			<Tooltip title="Copy Span Link">
+				<Button
+					size="small"
+					icon={<LinkOutlined size={14} />}
+					onClick={onSpanCopy}
+					className="copy-span-btn"
+				/>
+			</Tooltip>
+		</div>
+	);
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.styles.scss

@@ -0,0 +1,9 @@
+.trace-waterfall {
+	height: calc(70vh - 236px);
+
+	.loading-skeleton {
+		justify-content: center;
+		align-items: center;
+		padding: 20px;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx

@@ -0,0 +1,144 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { Skeleton } from 'antd';
+import { AxiosError } from 'axios';
+import Spinner from 'components/Spinner';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { GetTraceV2SuccessResponse, Span } from 'types/api/trace/getTraceV2';
+
+import { TraceWaterfallStates } from './constants';
+import Error from './TraceWaterfallStates/Error/Error';
+import NoData from './TraceWaterfallStates/NoData/NoData';
+import Success from './TraceWaterfallStates/Success/Success';
+
+import './TraceWaterfall.styles.scss';
+
+export interface IInterestedSpan {
+	spanId: string;
+	isUncollapsed: boolean;
+}
+
+interface ITraceWaterfallProps {
+	traceId: string;
+	uncollapsedNodes: string[];
+	traceData:
+		| SuccessResponse<GetTraceV2SuccessResponse, unknown>
+		| ErrorResponse
+		| undefined;
+	isFetchingTraceData: boolean;
+	errorFetchingTraceData: unknown;
+	interestedSpanId: IInterestedSpan;
+	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
+	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
+	selectedSpan: Span | undefined;
+	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
+	hoveredSpanId: string | null;
+	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
+}
+
+function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
+	const {
+		traceData,
+		isFetchingTraceData,
+		errorFetchingTraceData,
+		interestedSpanId,
+		traceId,
+		uncollapsedNodes,
+		setInterestedSpanId,
+		setTraceFlamegraphStatsWidth,
+		setSelectedSpan,
+		selectedSpan,
+		hoveredSpanId,
+		setHoveredSpanId,
+	} = props;
+	// get the current state of trace waterfall based on the API lifecycle
+	const traceWaterfallState = useMemo(() => {
+		if (isFetchingTraceData) {
+			if (
+				traceData &&
+				traceData.payload &&
+				traceData.payload.spans &&
+				traceData.payload.spans.length > 0
+			) {
+				return TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT;
+			}
+			return TraceWaterfallStates.LOADING;
+		}
+		if (errorFetchingTraceData) {
+			return TraceWaterfallStates.ERROR;
+		}
+		if (
+			traceData &&
+			traceData.payload &&
+			traceData.payload.spans &&
+			traceData.payload.spans.length === 0
+		) {
+			return TraceWaterfallStates.NO_DATA;
+		}
+
+		return TraceWaterfallStates.SUCCESS;
+	}, [errorFetchingTraceData, isFetchingTraceData, traceData]);
+
+	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
+	const spans = useMemo(() => traceData?.payload?.spans || [], [
+		traceData?.payload?.spans,
+	]);
+
+	// get the content based on the current state of the trace waterfall
+	const getContent = useMemo(() => {
+		switch (traceWaterfallState) {
+			case TraceWaterfallStates.LOADING:
+				return (
+					<div className="loading-skeleton">
+						<Skeleton active paragraph={{ rows: 6 }} />
+					</div>
+				);
+			case TraceWaterfallStates.ERROR:
+				return <Error error={errorFetchingTraceData as AxiosError} />;
+			case TraceWaterfallStates.NO_DATA:
+				return <NoData id={traceId} />;
+			case TraceWaterfallStates.SUCCESS:
+			case TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT:
+				return (
+					<Success
+						spans={spans}
+						traceMetadata={{
+							traceId,
+							startTime: traceData?.payload?.startTimestampMillis || 0,
+							endTime: traceData?.payload?.endTimestampMillis || 0,
+							hasMissingSpans: traceData?.payload?.hasMissingSpans || false,
+						}}
+						interestedSpanId={interestedSpanId || ''}
+						uncollapsedNodes={uncollapsedNodes}
+						setInterestedSpanId={setInterestedSpanId}
+						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
+						selectedSpan={selectedSpan}
+						setSelectedSpan={setSelectedSpan}
+						hoveredSpanId={hoveredSpanId}
+						setHoveredSpanId={setHoveredSpanId}
+					/>
+				);
+			default:
+				return <Spinner tip="Fetching the trace!" />;
+		}
+	}, [
+		errorFetchingTraceData,
+		interestedSpanId,
+		selectedSpan,
+		setInterestedSpanId,
+		setSelectedSpan,
+		setTraceFlamegraphStatsWidth,
+		spans,
+		traceData?.payload?.endTimestampMillis,
+		traceData?.payload?.hasMissingSpans,
+		traceData?.payload?.startTimestampMillis,
+		traceId,
+		traceWaterfallState,
+		uncollapsedNodes,
+		hoveredSpanId,
+		setHoveredSpanId,
+	]);
+
+	return <div className="trace-waterfall">{getContent}</div>;
+}
+
+export default TraceWaterfall;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

@@ -0,0 +1,30 @@
+.error-waterfall {
+	display: flex;
+	padding: 12px;
+	margin: 20px;
+	gap: 12px;
+	align-items: flex-start;
+	border-radius: 4px;
+	background: var(--bg-cherry-500);
+
+	.text {
+		color: var(--bg-vanilla-100);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		flex-shrink: 0;
+	}
+
+	.value {
+		color: var(--bg-vanilla-100);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx

@@ -0,0 +1,25 @@
+import { Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+
+import './Error.styles.scss';
+
+interface IErrorProps {
+	error: AxiosError;
+}
+
+function Error(props: IErrorProps): JSX.Element {
+	const { error } = props;
+
+	return (
+		<div className="error-waterfall">
+			<Typography.Text className="text">Something went wrong!</Typography.Text>
+			<Tooltip title={error?.message}>
+				<Typography.Text className="value" ellipsis>
+					{error?.message}
+				</Typography.Text>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default Error;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx

@@ -0,0 +1,12 @@
+import { Typography } from 'antd';
+
+interface INoDataProps {
+	id: string;
+}
+
+function NoData(props: INoDataProps): JSX.Element {
+	const { id } = props;
+	return <Typography.Text>No Trace found with the id: {id} </Typography.Text>;
+}
+
+export default NoData;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss

@@ -0,0 +1,60 @@
+.filter-row {
+	display: flex;
+	align-items: center;
+	padding: 16px 20px 0px 20px;
+	gap: 12px;
+
+	.query-builder-search-v2 {
+		width: 100%;
+	}
+
+	.pre-next-toggle {
+		display: flex;
+		flex-shrink: 0;
+		gap: 12px;
+
+		.ant-typography {
+			display: flex;
+			align-items: center;
+			color: var(--bg-vanilla-400);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+		}
+
+		.ant-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: none;
+		}
+	}
+
+	.no-results {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		color: var(--bg-vanilla-400);
+		font-family: 'Geist Mono';
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px; /* 150% */
+	}
+}
+
+.lightMode {
+	.filter-row {
+		.pre-next-toggle {
+			.ant-typography {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.no-results {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -0,0 +1,207 @@
+import { useCallback, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { Button, Spin, Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { uniqBy } from 'lodash-es';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { TracesAggregatorOperator } from 'types/common/queryBuilder';
+
+import { BASE_FILTER_QUERY } from './constants';
+
+import './Filters.styles.scss';
+
+function prepareQuery(filters: TagFilter, traceID: string): Query {
+	return {
+		...initialQueriesMap.traces,
+		builder: {
+			...initialQueriesMap.traces.builder,
+			queryData: [
+				{
+					...initialQueriesMap.traces.builder.queryData[0],
+					aggregateOperator: TracesAggregatorOperator.NOOP,
+					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
+					filters: {
+						...filters,
+						items: [
+							...filters.items,
+							{
+								id: '5ab8e1cf',
+								key: {
+									key: 'trace_id',
+									dataType: DataTypes.String,
+									type: '',
+									id: 'trace_id--string----true',
+								},
+								op: '=',
+								value: traceID,
+							},
+						],
+					},
+				},
+			],
+		},
+	};
+}
+
+function Filters({
+	startTime,
+	endTime,
+	traceID,
+	onFilteredSpansChange = (): void => {},
+}: {
+	startTime: number;
+	endTime: number;
+	traceID: string;
+	onFilteredSpansChange?: (spanIds: string[], isFilterActive: boolean) => void;
+}): JSX.Element {
+	const [filters, setFilters] = useState<TagFilter>(
+		BASE_FILTER_QUERY.filters || { items: [], op: 'AND' },
+	);
+	const [noData, setNoData] = useState<boolean>(false);
+	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
+	const [currentSearchedIndex, setCurrentSearchedIndex] = useState<number>(0);
+
+	const handleFilterChange = useCallback(
+		(value: TagFilter): void => {
+			if (value.items.length === 0) {
+				setFilteredSpanIds([]);
+				onFilteredSpansChange?.([], false);
+				setCurrentSearchedIndex(0);
+				setNoData(false);
+			}
+			setFilters(value);
+		},
+		[onFilteredSpansChange],
+	);
+	const { search } = useLocation();
+	const history = useHistory();
+
+	const handlePrevNext = useCallback(
+		(index: number, spanId?: string): void => {
+			const searchParams = new URLSearchParams(search);
+			if (spanId) {
+				searchParams.set('spanId', spanId);
+			} else {
+				searchParams.set('spanId', filteredSpanIds[index]);
+			}
+
+			history.replace({ search: searchParams.toString() });
+		},
+		[filteredSpanIds, history, search],
+	);
+
+	const { isFetching, error } = useGetQueryRange(
+		{
+			query: prepareQuery(filters, traceID),
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start: startTime,
+			end: endTime,
+			params: {
+				dataSource: 'traces',
+			},
+			tableParams: {
+				pagination: {
+					offset: 0,
+					limit: 200,
+				},
+				selectColumns: [
+					{
+						key: 'name',
+						dataType: 'string',
+						type: 'tag',
+						id: 'name--string--tag--true',
+						isIndexed: false,
+					},
+				],
+			},
+		},
+		DEFAULT_ENTITY_VERSION,
+		{
+			queryKey: [filters],
+			enabled: filters.items.length > 0,
+			onSuccess: (data) => {
+				const isFilterActive = filters.items.length > 0;
+				if (data?.payload.data.newResult.data.result[0].list) {
+					const uniqueSpans = uniqBy(
+						data?.payload.data.newResult.data.result[0].list,
+						'data.spanID',
+					);
+
+					const spanIds = uniqueSpans.map((val) => val.data.spanID);
+					setFilteredSpanIds(spanIds);
+					onFilteredSpansChange?.(spanIds, isFilterActive);
+					handlePrevNext(0, spanIds[0]);
+					setNoData(false);
+				} else {
+					setNoData(true);
+					setFilteredSpanIds([]);
+					onFilteredSpansChange?.([], isFilterActive);
+					setCurrentSearchedIndex(0);
+				}
+			},
+		},
+	);
+
+	return (
+		<div className="filter-row">
+			<QueryBuilderSearchV2
+				query={{
+					...BASE_FILTER_QUERY,
+					filters,
+				}}
+				onChange={handleFilterChange}
+				hideSpanScopeSelector={false}
+				skipQueryBuilderRedirect
+				selectProps={{ listHeight: 125 }}
+			/>
+			{filteredSpanIds.length > 0 && (
+				<div className="pre-next-toggle">
+					<Typography.Text>
+						{currentSearchedIndex + 1} / {filteredSpanIds.length}
+					</Typography.Text>
+					<Button
+						icon={<ChevronUp size={14} />}
+						disabled={currentSearchedIndex === 0}
+						type="text"
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex - 1);
+							setCurrentSearchedIndex((prev) => prev - 1);
+						}}
+					/>
+					<Button
+						icon={<ChevronDown size={14} />}
+						type="text"
+						disabled={currentSearchedIndex === filteredSpanIds.length - 1}
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex + 1);
+							setCurrentSearchedIndex((prev) => prev + 1);
+						}}
+					/>
+				</div>
+			)}
+			{isFetching && <Spin indicator={<LoadingOutlined spin />} size="small" />}
+			{error && (
+				<Tooltip title={(error as AxiosError)?.message || 'Something went wrong'}>
+					<InfoCircleOutlined size={14} />
+				</Tooltip>
+			)}
+			{noData && (
+				<Typography.Text className="no-results">No results found</Typography.Text>
+			)}
+		</div>
+	);
+}
+
+Filters.defaultProps = {
+	onFilteredSpansChange: undefined,
+};
+
+export default Filters;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/constants.ts

@@ -0,0 +1,38 @@
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+
+export const BASE_FILTER_QUERY: IBuilderQuery = {
+	queryName: 'A',
+	dataSource: DataSource.TRACES,
+	aggregateOperator: 'noop',
+	aggregateAttribute: {
+		id: '------false',
+		dataType: DataTypes.EMPTY,
+		key: '',
+		type: '',
+	},
+	timeAggregation: 'rate',
+	spaceAggregation: 'sum',
+	functions: [],
+	filters: {
+		items: [],
+		op: 'AND',
+	},
+	expression: 'A',
+	disabled: false,
+	stepInterval: 60,
+	having: [],
+	limit: 200,
+	orderBy: [
+		{
+			columnName: 'timestamp',
+			order: 'desc',
+		},
+	],
+	groupBy: [],
+	legend: '',
+	reduceTo: ReduceOperators.AVG,
+	offset: 0,
+	selectColumns: [],
+};

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss

@@ -0,0 +1,512 @@
+.success-content {
+	overflow-y: hidden;
+	overflow-x: hidden;
+	max-width: 100%;
+
+	.missing-spans {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 44px;
+		margin: 16px;
+		padding: 12px;
+		border-radius: 4px;
+		background: rgba(69, 104, 220, 0.1);
+
+		.left-info {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			color: var(--bg-robin-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+
+			.text {
+				color: var(--bg-robin-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+
+		.right-info {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: row-reverse;
+			gap: 8px;
+			color: var(--bg-robin-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+
+		.right-info:hover {
+			background-color: unset;
+			color: var(--bg-robin-200);
+		}
+	}
+
+	.waterfall-split-panel {
+		height: calc(70vh - 236px);
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding: 0px 20px 20px 20px;
+
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+		}
+	}
+
+	.missing-spans-waterfall {
+		height: calc(70vh - 312px);
+	}
+
+	.waterfall-split-header {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		display: flex;
+		height: 25px;
+		background-color: var(--bg-ink-500);
+
+		.sidebar-header {
+			flex-shrink: 0;
+		}
+
+		.resize-handle-header {
+			width: 4px;
+			flex-shrink: 0;
+		}
+
+		.timeline-header {
+			flex: 1;
+			overflow: hidden;
+			padding: 0 15px;
+		}
+	}
+
+	.waterfall-split-body {
+		display: flex;
+		position: relative;
+	}
+
+	.waterfall-sidebar {
+		overflow-x: auto;
+		overflow-y: hidden;
+		flex-shrink: 0;
+		border-right: 1px solid var(--bg-slate-400);
+
+		&::-webkit-scrollbar {
+			height: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-400);
+			border-radius: 4px;
+		}
+	}
+
+	.span-tree-table {
+		position: relative;
+		border-collapse: collapse;
+
+		.span-tree-row {
+			display: flex;
+			align-items: center;
+		}
+
+		.span-tree-cell {
+			display: flex;
+			width: 100%;
+			height: 28px;
+			align-items: center;
+			overflow: visible;
+			padding: 0;
+		}
+
+		.span-tree-row:hover,
+		.span-tree-row.hovered-span {
+			border-radius: 4px;
+			background: rgba(171, 189, 255, 0.06) !important;
+
+			.span-overview {
+				background: unset !important;
+			}
+		}
+	}
+
+	.sidebar-resize-handle {
+		width: 4px;
+		flex-shrink: 0;
+		cursor: col-resize;
+		user-select: none;
+		touch-action: none;
+		background: transparent;
+		transition: background 0.15s ease;
+		z-index: 1;
+
+		&:hover,
+		&:active {
+			background: rgba(35, 196, 248, 0.2);
+		}
+	}
+
+	.waterfall-timeline {
+		flex: 1;
+		position: relative;
+		overflow: hidden;
+
+		.timeline-row {
+			display: flex;
+			align-items: center;
+		}
+
+		.timeline-row:hover,
+		.timeline-row.hovered-span {
+			border-radius: 4px;
+			background: rgba(171, 189, 255, 0.06) !important;
+		}
+	}
+
+	// Shared span component styles (used in both panels)
+	.span-overview {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		height: 100%;
+		width: 100%;
+		cursor: pointer;
+		position: relative;
+		white-space: nowrap;
+
+		.tree-indent {
+			display: inline-block;
+			flex-shrink: 0;
+		}
+
+		.tree-line {
+			position: absolute;
+			background-color: var(--bg-slate-400);
+			pointer-events: none;
+		}
+
+		.tree-connector {
+			position: absolute;
+			width: 19px;
+			height: 50%;
+			border-left: 1px solid var(--bg-slate-400);
+			border-bottom: 1px solid var(--bg-slate-400);
+			border-bottom-left-radius: 6px;
+			pointer-events: none;
+		}
+
+		.tree-arrow {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 18px;
+			height: 18px;
+			flex-shrink: 0;
+			cursor: pointer;
+			color: var(--bg-vanilla-400);
+
+			&.no-children {
+				cursor: default;
+				width: 18px;
+				height: 18px;
+			}
+		}
+
+		.tree-icon {
+			display: inline-block;
+			width: 7px;
+			height: 7px;
+			border-radius: 50%;
+			flex-shrink: 0;
+			margin: 0 6px;
+
+			&.is-error {
+				box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.3);
+			}
+		}
+
+		.tree-label {
+			color: #fff;
+			font-family: 'Inter';
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 28px;
+			letter-spacing: 0.01em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			flex: 1;
+			min-width: 0;
+		}
+
+		.span-row-actions {
+			position: sticky;
+			right: 0;
+			display: flex;
+			align-items: center;
+			gap: 2px;
+			margin-left: auto;
+			padding-right: 4px;
+			padding-left: 8px;
+			flex-shrink: 0;
+			height: 100%;
+			background: linear-gradient(to left, var(--bg-ink-500) 60%, transparent);
+			z-index: 2;
+			opacity: 0;
+			pointer-events: none;
+
+			.span-action-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 22px;
+				height: 22px;
+				border-radius: 2px;
+				cursor: pointer;
+				color: var(--bg-vanilla-400);
+				background: transparent;
+				border: none;
+				padding: 0;
+
+				&:hover {
+					background: var(--bg-slate-400);
+				}
+			}
+		}
+
+		&:hover .span-row-actions {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	// Also show action buttons when hovering the tree row (parent of span-overview)
+	.span-tree-row:hover .span-row-actions,
+	.span-tree-row.hovered-span .span-row-actions {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.span-duration {
+		display: flex;
+		align-items: center;
+		height: 28px;
+		position: relative;
+		width: 100%;
+		padding: 0 15px;
+		cursor: pointer;
+
+		.span-bar {
+			position: absolute;
+			height: 18px;
+			top: 5px;
+			border-radius: 2px;
+			display: flex;
+			align-items: center;
+			padding: 0 8px;
+			overflow: hidden;
+			cursor: pointer;
+			white-space: nowrap;
+			color: rgba(0, 0, 0, 0.9);
+			background-color: var(--span-color);
+			border: 1px solid transparent;
+
+			.span-info {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				overflow: hidden;
+				z-index: 1;
+
+				.span-name {
+					font-weight: 500;
+					font-size: 11px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					flex-grow: 1;
+					min-width: 0;
+				}
+
+				.span-duration-text {
+					color: inherit;
+					opacity: 0.8;
+					font-size: 10px;
+					margin-left: 8px;
+					flex-shrink: 0;
+				}
+			}
+		}
+
+		.event-dot {
+			position: absolute;
+			top: 50%;
+			transform: translate(-50%, -50%) rotate(45deg);
+			width: 5px;
+			height: 5px;
+			background-color: var(--bg-robin-500);
+			border: 1px solid var(--bg-robin-600);
+			cursor: pointer;
+			z-index: 1;
+
+			&.error {
+				background-color: var(--bg-cherry-500);
+				border-color: var(--bg-cherry-600);
+			}
+
+			&:hover {
+				transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
+			}
+		}
+	}
+
+	// Hover state: static stripe pattern + border
+	.timeline-row:hover .span-bar,
+	.timeline-row.hovered-span .span-bar {
+		color: var(--span-color);
+		background-color: rgba(var(--span-color-rgb), 0.1);
+		border: 1px solid rgba(var(--span-color-rgb), 0.2);
+		background-image: repeating-linear-gradient(
+			-45deg,
+			transparent,
+			transparent 10px,
+			rgba(var(--span-color-rgb), 0.04) 10px,
+			rgba(var(--span-color-rgb), 0.04) 20px
+		);
+	}
+
+	// Selected state: stripe pattern + dashed border
+	.interested-span .span-bar,
+	.selected-non-matching-span .span-bar {
+		color: var(--span-color);
+		background-color: rgba(var(--span-color-rgb), 0.1);
+		border: 1px dashed var(--span-color);
+		background-image: repeating-linear-gradient(
+			-45deg,
+			transparent,
+			transparent 10px,
+			rgba(var(--span-color-rgb), 0.04) 10px,
+			rgba(var(--span-color-rgb), 0.04) 20px
+		);
+	}
+
+	// Shared state classes for both panels
+	.interested-span,
+	.selected-non-matching-span {
+		border-radius: 4px;
+		background: rgba(171, 189, 255, 0.06) !important;
+	}
+
+	.dimmed-span {
+		opacity: 0.4;
+	}
+	.highlighted-span {
+		opacity: 1;
+	}
+
+	.selected-non-matching-span {
+		.tree-label {
+			opacity: 0.5;
+		}
+	}
+}
+
+.span-dets {
+	.related-logs {
+		display: flex;
+		width: 160px;
+		padding: 4px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+		border-radius: 2px;
+		border: 1px solid var(--Slate-400, #1d212d);
+		background: var(--Slate-500, #161922);
+		box-shadow: none;
+	}
+}
+
+.lightMode {
+	.success-content {
+		.span-overview {
+			.tree-arrow {
+				color: var(--bg-ink-400);
+			}
+
+			.tree-label {
+				color: var(--bg-ink-400);
+			}
+
+			.tree-line {
+				background-color: var(--bg-vanilla-400);
+			}
+
+			.tree-connector {
+				border-color: var(--bg-vanilla-400);
+			}
+
+			.span-row-actions {
+				background: linear-gradient(to left, var(--bg-vanilla-100) 60%, transparent);
+
+				.span-action-btn {
+					color: var(--bg-ink-400);
+
+					&:hover {
+						background: var(--bg-vanilla-300);
+					}
+				}
+			}
+		}
+
+		.interested-span {
+			border-radius: 4px;
+			background: var(--bg-vanilla-300);
+		}
+
+		.span-duration .span-bar {
+			color: rgba(255, 255, 255, 0.9);
+		}
+
+		// Light mode hover/selected: span color must override the white default above
+		.timeline-row:hover .span-bar,
+		.timeline-row.hovered-span .span-bar {
+			color: var(--span-color);
+		}
+
+		.interested-span .span-bar,
+		.selected-non-matching-span .span-bar {
+			color: var(--span-color);
+		}
+
+		.waterfall-sidebar {
+			border-right: 1px solid var(--bg-vanilla-300);
+		}
+
+		.waterfall-split-header {
+			background-color: var(--bg-vanilla-200) !important;
+		}
+	}
+	.span-dets {
+		.related-logs {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-300);
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -0,0 +1,711 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import {
+	createColumnHelper,
+	flexRender,
+	getCoreRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
+import { Button, Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import TimelineV3 from 'components/TimelineV3/TimelineV3';
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { colorToRgb, generateColor } from 'lib/uPlotLib/utils/generateColor';
+import {
+	AlertCircle,
+	ArrowUpRight,
+	ChevronDown,
+	ChevronRight,
+	Link,
+	ListPlus,
+} from 'lucide-react';
+import { Span } from 'types/api/trace/getTraceV2';
+import { toFixed } from 'utils/toFixed';
+
+import SpanHoverCard from '../../../SpanHoverCard/SpanHoverCard';
+import AddSpanToFunnelModal from '../../AddSpanToFunnelModal/AddSpanToFunnelModal';
+import { IInterestedSpan } from '../../TraceWaterfall';
+import Filters from './Filters/Filters';
+
+import './Success.styles.scss';
+
+// css config
+const CONNECTOR_WIDTH = 28;
+const VERTICAL_CONNECTOR_WIDTH = 1;
+
+interface ITraceMetadata {
+	traceId: string;
+	startTime: number;
+	endTime: number;
+	hasMissingSpans: boolean;
+}
+interface ISuccessProps {
+	spans: Span[];
+	traceMetadata: ITraceMetadata;
+	interestedSpanId: IInterestedSpan;
+	uncollapsedNodes: string[];
+	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
+	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
+	selectedSpan: Span | undefined;
+	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
+	hoveredSpanId: string | null;
+	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
+}
+
+function SpanOverview({
+	span,
+	isSpanCollapsed,
+	handleCollapseUncollapse,
+	handleSpanClick,
+	selectedSpan,
+	filteredSpanIds,
+	isFilterActive,
+	traceMetadata,
+	onAddSpanToFunnel,
+}: {
+	span: Span;
+	isSpanCollapsed: boolean;
+	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
+	selectedSpan: Span | undefined;
+	handleSpanClick: (span: Span) => void;
+	filteredSpanIds: string[];
+	isFilterActive: boolean;
+	traceMetadata: ITraceMetadata;
+	onAddSpanToFunnel: (span: Span) => void;
+}): JSX.Element {
+	const isRootSpan = span.level === 0;
+	const { onSpanCopy } = useCopySpanLink(span);
+
+	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
+	if (span.hasError) {
+		color = `var(--bg-cherry-500)`;
+	}
+
+	// Smart highlighting logic
+	const isMatching =
+		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
+	const isSelected = selectedSpan?.spanId === span.spanId;
+	const isDimmed = isFilterActive && !isMatching && !isSelected;
+	const isHighlighted = isFilterActive && isMatching && !isSelected;
+	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
+
+	const indentWidth = isRootSpan ? 0 : span.level * CONNECTOR_WIDTH;
+
+	const handleFunnelClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
+		e.stopPropagation();
+		onAddSpanToFunnel(span);
+	};
+
+	return (
+		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
+			<div
+				className={cx('span-overview', {
+					'interested-span': isSelected && (!isFilterActive || isMatching),
+					'highlighted-span': isHighlighted,
+					'selected-non-matching-span': isSelectedNonMatching,
+					'dimmed-span': isDimmed,
+				})}
+				onClick={(): void => handleSpanClick(span)}
+			>
+				{/* Tree connector lines — always draw vertical lines at all ancestor levels + L-connector */}
+				{!isRootSpan &&
+					Array.from({ length: span.level }, (_, i) => {
+						const lvl = i + 1;
+						const xPos = (lvl - 1) * CONNECTOR_WIDTH + 9;
+						if (lvl < span.level) {
+							return (
+								<div
+									key={lvl}
+									className="tree-line"
+									style={{ left: xPos, top: 0, width: 1, height: '100%' }}
+								/>
+							);
+						}
+						return (
+							<div key={lvl}>
+								<div
+									className="tree-line"
+									style={{ left: xPos, top: 0, width: 1, height: '50%' }}
+								/>
+								<div className="tree-connector" style={{ left: xPos, top: 0 }} />
+							</div>
+						);
+					})}
+
+				{/* Indent spacer */}
+				<span className="tree-indent" style={{ width: `${indentWidth}px` }} />
+
+				{/* Expand/collapse arrow or leaf bullet */}
+				{span.hasChildren ? (
+					<span
+						className={cx('tree-arrow', { expanded: !isSpanCollapsed })}
+						onClick={(event): void => {
+							event.stopPropagation();
+							event.preventDefault();
+							handleCollapseUncollapse(span.spanId, !isSpanCollapsed);
+						}}
+					>
+						{isSpanCollapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
+					</span>
+				) : (
+					<span className="tree-arrow no-children" />
+				)}
+
+				{/* Colored service dot */}
+				<span
+					className={cx('tree-icon', { 'is-error': span.hasError })}
+					style={{ backgroundColor: color }}
+				/>
+
+				{/* Span name */}
+				<Typography.Text className="tree-label" ellipsis title={span.name}>
+					{span.name}
+				</Typography.Text>
+
+				{/* Action buttons — shown on hover via CSS, right-aligned */}
+				<span className="span-row-actions">
+					<Tooltip title="Copy Span Link">
+						<button type="button" className="span-action-btn" onClick={onSpanCopy}>
+							<Link size={12} />
+						</button>
+					</Tooltip>
+					<Tooltip title="Add to Trace Funnel">
+						<button
+							type="button"
+							className="span-action-btn"
+							onClick={handleFunnelClick}
+						>
+							<ListPlus size={12} />
+						</button>
+					</Tooltip>
+				</span>
+			</div>
+		</SpanHoverCard>
+	);
+}
+
+export function SpanDuration({
+	span,
+	traceMetadata,
+	handleSpanClick,
+	selectedSpan,
+	filteredSpanIds,
+	isFilterActive,
+}: {
+	span: Span;
+	traceMetadata: ITraceMetadata;
+	selectedSpan: Span | undefined;
+	handleSpanClick: (span: Span) => void;
+	filteredSpanIds: string[];
+	isFilterActive: boolean;
+}): JSX.Element {
+	const { time, timeUnitName } = convertTimeToRelevantUnit(
+		span.durationNano / 1e6,
+	);
+
+	const spread = traceMetadata.endTime - traceMetadata.startTime;
+	const leftOffset = ((span.timestamp - traceMetadata.startTime) * 1e2) / spread;
+	const width = (span.durationNano * 1e2) / (spread * 1e6);
+
+	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
+	let rgbColor = colorToRgb(color);
+
+	if (span.hasError) {
+		color = `var(--bg-cherry-500)`;
+		rgbColor = '239, 68, 68';
+	}
+
+	const isMatching =
+		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
+	const isSelected = selectedSpan?.spanId === span.spanId;
+	const isDimmed = isFilterActive && !isMatching && !isSelected;
+	const isHighlighted = isFilterActive && isMatching && !isSelected;
+	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
+
+	return (
+		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
+			<div
+				className={cx('span-duration', {
+					'interested-span': isSelected && (!isFilterActive || isMatching),
+					'highlighted-span': isHighlighted,
+					'selected-non-matching-span': isSelectedNonMatching,
+					'dimmed-span': isDimmed,
+				})}
+				onClick={(): void => handleSpanClick(span)}
+			>
+				<div
+					className="span-bar"
+					style={
+						{
+							left: `${leftOffset}%`,
+							width: `${width}%`,
+							'--span-color': color,
+							'--span-color-rgb': rgbColor,
+						} as React.CSSProperties
+					}
+				>
+					<span className="span-info">
+						<span className="span-name">{span.name}</span>
+						<span className="span-duration-text">{`${toFixed(
+							time,
+							2,
+						)} ${timeUnitName}`}</span>
+					</span>
+					{span.event?.map((event) => {
+						const eventTimeMs = event.timeUnixNano / 1e6;
+						const eventOffsetPercent =
+							((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
+						const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
+						const { isError } = event;
+						const {
+							time: evtTime,
+							timeUnitName: evtUnit,
+						} = convertTimeToRelevantUnit(eventTimeMs - span.timestamp);
+						return (
+							<Tooltip
+								key={`${span.spanId}-event-${event.name}-${event.timeUnixNano}`}
+								title={`${event.name} @ ${toFixed(evtTime, 2)} ${evtUnit}`}
+							>
+								<div
+									className={`event-dot ${isError ? 'error' : ''}`}
+									style={{
+										left: `${clampedOffset}%`,
+									}}
+								/>
+							</Tooltip>
+						);
+					})}
+				</div>
+			</div>
+		</SpanHoverCard>
+	);
+}
+
+// table config
+const columnDefHelper = createColumnHelper<Span>();
+
+const ROW_HEIGHT = 28;
+const DEFAULT_SIDEBAR_WIDTH = 450;
+const MIN_SIDEBAR_WIDTH = 240;
+const MAX_SIDEBAR_WIDTH = 900;
+const BASE_CONTENT_WIDTH = 300;
+
+function Success(props: ISuccessProps): JSX.Element {
+	const {
+		spans,
+		traceMetadata,
+		interestedSpanId,
+		uncollapsedNodes,
+		setInterestedSpanId,
+		setTraceFlamegraphStatsWidth,
+		setSelectedSpan,
+		selectedSpan,
+		hoveredSpanId,
+		setHoveredSpanId,
+	} = props;
+
+	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
+	const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
+	const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element>>();
+	const prevHoveredSpanIdRef = useRef<string | null>(null);
+
+	// Imperative DOM class toggling for hover highlights (avoids React re-renders)
+	const applyHoverClass = useCallback((spanId: string | null): void => {
+		const prev = prevHoveredSpanIdRef.current;
+		if (prev === spanId) {
+			return;
+		}
+
+		if (prev) {
+			const prevElements = document.querySelectorAll(`[data-span-id="${prev}"]`);
+			prevElements.forEach((el) => el.classList.remove('hovered-span'));
+		}
+		if (spanId) {
+			const nextElements = document.querySelectorAll(`[data-span-id="${spanId}"]`);
+			nextElements.forEach((el) => el.classList.add('hovered-span'));
+		}
+		prevHoveredSpanIdRef.current = spanId;
+	}, []);
+
+	// Handle incoming hover from flamegraph (cross-view sync)
+	useEffect(() => {
+		applyHoverClass(hoveredSpanId);
+	}, [hoveredSpanId, applyHoverClass]);
+
+	const handleRowMouseEnter = useCallback(
+		(spanId: string): void => {
+			setHoveredSpanId(spanId);
+			applyHoverClass(spanId);
+		},
+		[setHoveredSpanId, applyHoverClass],
+	);
+
+	const handleRowMouseLeave = useCallback((): void => {
+		setHoveredSpanId(null);
+		applyHoverClass(null);
+	}, [setHoveredSpanId, applyHoverClass]);
+
+	const handleFilteredSpansChange = useCallback(
+		(spanIds: string[], isActive: boolean) => {
+			setFilteredSpanIds(spanIds);
+			setIsFilterActive(isActive);
+		},
+		[],
+	);
+
+	const handleCollapseUncollapse = useCallback(
+		(spanId: string, collapse: boolean) => {
+			setInterestedSpanId({ spanId, isUncollapsed: !collapse });
+		},
+		[setInterestedSpanId],
+	);
+
+	const handleVirtualizerInstanceChanged = useCallback(
+		(instance: Virtualizer<HTMLDivElement, Element>): void => {
+			const { range } = instance;
+			// when there are less than 500 elements in the API call that means there is nothing to fetch on top and bottom so
+			// do not trigger the API call
+			if (spans.length < 500) {
+				return;
+			}
+
+			if (range?.startIndex === 0 && instance.isScrolling) {
+				// do not trigger for trace root as nothing to fetch above
+				if (spans[0].level !== 0) {
+					setInterestedSpanId({
+						spanId: spans[0].spanId,
+						isUncollapsed: false,
+					});
+				}
+				return;
+			}
+
+			if (range?.endIndex === spans.length - 1 && instance.isScrolling) {
+				setInterestedSpanId({
+					spanId: spans[spans.length - 1].spanId,
+					isUncollapsed: false,
+				});
+			}
+		},
+		[spans, setInterestedSpanId],
+	);
+
+	const [isAddSpanToFunnelModalOpen, setIsAddSpanToFunnelModalOpen] = useState(
+		false,
+	);
+	const [selectedSpanToAddToFunnel, setSelectedSpanToAddToFunnel] = useState<
+		Span | undefined
+	>(undefined);
+	const handleAddSpanToFunnel = useCallback((span: Span): void => {
+		setIsAddSpanToFunnelModalOpen(true);
+		setSelectedSpanToAddToFunnel(span);
+	}, []);
+
+	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
+
+	const handleSpanClick = useCallback(
+		(span: Span): void => {
+			setSelectedSpan(span);
+			if (span?.spanId) {
+				urlQuery.set('spanId', span?.spanId);
+			}
+
+			safeNavigate({ search: urlQuery.toString() });
+		},
+		[setSelectedSpan, urlQuery, safeNavigate],
+	);
+
+	// Left side columns using TanStack React Table (extensible for future columns)
+	const leftColumns = useMemo(
+		() => [
+			columnDefHelper.display({
+				id: 'span-name',
+				header: '',
+				cell: (cellProps): JSX.Element => (
+					<SpanOverview
+						span={cellProps.row.original}
+						handleCollapseUncollapse={handleCollapseUncollapse}
+						isSpanCollapsed={
+							!uncollapsedNodes.includes(cellProps.row.original.spanId)
+						}
+						selectedSpan={selectedSpan}
+						handleSpanClick={handleSpanClick}
+						traceMetadata={traceMetadata}
+						filteredSpanIds={filteredSpanIds}
+						isFilterActive={isFilterActive}
+						onAddSpanToFunnel={handleAddSpanToFunnel}
+					/>
+				),
+			}),
+		],
+		[
+			handleCollapseUncollapse,
+			uncollapsedNodes,
+			traceMetadata,
+			selectedSpan,
+			handleSpanClick,
+			filteredSpanIds,
+			isFilterActive,
+			handleAddSpanToFunnel,
+		],
+	);
+
+	const leftTable = useReactTable({
+		data: spans,
+		columns: leftColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
+
+	// Shared virtualizer - one instance drives both panels
+	const virtualizer = useVirtualizer({
+		count: spans.length,
+		getScrollElement: (): HTMLDivElement | null => scrollContainerRef.current,
+		estimateSize: (): number => ROW_HEIGHT,
+		overscan: 20,
+		onChange: handleVirtualizerInstanceChanged,
+	});
+
+	useEffect(() => {
+		virtualizerRef.current = virtualizer;
+	}, [virtualizer]);
+
+	// Sync sidebar width with flamegraph stats panel
+	useEffect(() => {
+		setTraceFlamegraphStatsWidth(sidebarWidth);
+	}, [sidebarWidth, setTraceFlamegraphStatsWidth]);
+
+	// Resize handle drag logic
+	const handleResizeMouseDown = useCallback(
+		(e: React.MouseEvent) => {
+			e.preventDefault();
+			const startX = e.clientX;
+			const startWidth = sidebarWidth;
+			const onMouseMove = (moveEvent: MouseEvent): void => {
+				const newWidth = Math.max(
+					MIN_SIDEBAR_WIDTH,
+					Math.min(MAX_SIDEBAR_WIDTH, startWidth + (moveEvent.clientX - startX)),
+				);
+				setSidebarWidth(newWidth);
+			};
+			const onMouseUp = (): void => {
+				document.removeEventListener('mousemove', onMouseMove);
+				document.removeEventListener('mouseup', onMouseUp);
+			};
+			document.addEventListener('mousemove', onMouseMove);
+			document.addEventListener('mouseup', onMouseUp);
+		},
+		[sidebarWidth],
+	);
+
+	// Compute max content width for sidebar horizontal scroll
+	const maxContentWidth = useMemo(() => {
+		if (spans.length === 0) {
+			return sidebarWidth;
+		}
+		const maxLevel = spans.reduce((max, span) => Math.max(max, span.level), 0);
+		return Math.max(
+			sidebarWidth,
+			maxLevel * (CONNECTOR_WIDTH + VERTICAL_CONNECTOR_WIDTH) + BASE_CONTENT_WIDTH,
+		);
+	}, [spans, sidebarWidth]);
+
+	// Scroll to interested span
+	useEffect(() => {
+		if (interestedSpanId.spanId !== '' && virtualizerRef.current) {
+			const idx = spans.findIndex(
+				(span) => span.spanId === interestedSpanId.spanId,
+			);
+			if (idx !== -1) {
+				setTimeout(() => {
+					virtualizerRef.current?.scrollToIndex(idx, {
+						align: 'center',
+						behavior: 'auto',
+					});
+				}, 400);
+
+				setSelectedSpan(spans[idx]);
+			}
+		} else {
+			setSelectedSpan((prev) => {
+				if (!prev) {
+					return spans[0];
+				}
+				return prev;
+			});
+		}
+	}, [interestedSpanId, setSelectedSpan, spans]);
+
+	const virtualItems = virtualizer.getVirtualItems();
+	const leftRows = leftTable.getRowModel().rows;
+
+	return (
+		<div className="success-content">
+			{traceMetadata.hasMissingSpans && (
+				<div className="missing-spans">
+					<section className="left-info">
+						<AlertCircle size={14} />
+						<Typography.Text className="text">
+							This trace has missing spans
+						</Typography.Text>
+					</section>
+					<Button
+						icon={<ArrowUpRight size={14} />}
+						className="right-info"
+						type="text"
+						onClick={(): WindowProxy | null =>
+							window.open(
+								'https://signoz.io/docs/userguide/traces/#missing-spans',
+								'_blank',
+							)
+						}
+					>
+						Learn More
+					</Button>
+				</div>
+			)}
+			<Filters
+				startTime={traceMetadata.startTime / 1e3}
+				endTime={traceMetadata.endTime / 1e3}
+				traceID={traceMetadata.traceId}
+				onFilteredSpansChange={handleFilteredSpansChange}
+			/>
+			<div
+				className={cx(
+					'waterfall-split-panel',
+					traceMetadata.hasMissingSpans ? 'missing-spans-waterfall' : '',
+				)}
+				ref={scrollContainerRef}
+			>
+				{/* Sticky header row */}
+				<div className="waterfall-split-header">
+					<div
+						className="sidebar-header"
+						style={{ width: sidebarWidth, flexShrink: 0 }}
+					/>
+					<div className="resize-handle-header" />
+					<div className="timeline-header">
+						<TimelineV3
+							startTimestamp={traceMetadata.startTime}
+							endTimestamp={traceMetadata.endTime}
+							timelineHeight={10}
+							offsetTimestamp={0}
+						/>
+					</div>
+				</div>
+
+				{/* Split body */}
+				<div
+					className="waterfall-split-body"
+					style={{
+						height: virtualizer.getTotalSize(),
+					}}
+				>
+					{/* Left panel - table with horizontal scroll */}
+					<div
+						className="waterfall-sidebar"
+						style={{ width: sidebarWidth, flexShrink: 0 }}
+					>
+						<table className="span-tree-table" style={{ width: maxContentWidth }}>
+							<tbody>
+								{virtualItems.map((virtualRow) => {
+									const row = leftRows[virtualRow.index];
+									const span = spans[virtualRow.index];
+									return (
+										<tr
+											key={String(virtualRow.key)}
+											data-testid={`cell-0-${span.spanId}`}
+											data-span-id={span.spanId}
+											className="span-tree-row"
+											style={{
+												position: 'absolute',
+												top: 0,
+												left: 0,
+												width: '100%',
+												height: ROW_HEIGHT,
+												transform: `translateY(${virtualRow.start}px)`,
+											}}
+											onMouseEnter={(): void => handleRowMouseEnter(span.spanId)}
+											onMouseLeave={handleRowMouseLeave}
+										>
+											{row.getVisibleCells().map((cell) => (
+												<td key={cell.id} className="span-tree-cell">
+													{flexRender(cell.column.columnDef.cell, cell.getContext())}
+												</td>
+											))}
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
+
+					{/* Resize handle */}
+					<div
+						className="sidebar-resize-handle"
+						onMouseDown={handleResizeMouseDown}
+						role="separator"
+						aria-orientation="vertical"
+					/>
+
+					{/* Right panel - timeline bars */}
+					<div className="waterfall-timeline">
+						{virtualItems.map((virtualRow) => {
+							const span = spans[virtualRow.index];
+							return (
+								<div
+									key={String(virtualRow.key)}
+									data-testid={`cell-1-${span.spanId}`}
+									data-span-id={span.spanId}
+									className="timeline-row"
+									style={{
+										position: 'absolute',
+										top: 0,
+										left: 0,
+										width: '100%',
+										height: ROW_HEIGHT,
+										transform: `translateY(${virtualRow.start}px)`,
+									}}
+									onMouseEnter={(): void => handleRowMouseEnter(span.spanId)}
+									onMouseLeave={handleRowMouseLeave}
+								>
+									<SpanDuration
+										span={span}
+										traceMetadata={traceMetadata}
+										selectedSpan={selectedSpan}
+										handleSpanClick={handleSpanClick}
+										filteredSpanIds={filteredSpanIds}
+										isFilterActive={isFilterActive}
+									/>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</div>
+			{selectedSpanToAddToFunnel && (
+				<AddSpanToFunnelModal
+					span={selectedSpanToAddToFunnel}
+					isOpen={isAddSpanToFunnelModalOpen}
+					onClose={(): void => setIsAddSpanToFunnelModalOpen(false)}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default Success;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/SpanDuration.test.tsx

@@ -0,0 +1,268 @@
+import useUrlQuery from 'hooks/useUrlQuery';
+import { fireEvent, render, screen } from 'tests/test-utils';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import { SpanDuration } from '../Success';
+
+// Constants to avoid string duplication
+const SPAN_DURATION_TEXT = '1.16 ms';
+const SPAN_DURATION_CLASS = '.span-duration';
+const INTERESTED_SPAN_CLASS = 'interested-span';
+const HIGHLIGHTED_SPAN_CLASS = 'highlighted-span';
+const DIMMED_SPAN_CLASS = 'dimmed-span';
+const SELECTED_NON_MATCHING_SPAN_CLASS = 'selected-non-matching-span';
+
+jest.mock('components/TimelineV3/TimelineV3', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+// Mock the hooks
+jest.mock('hooks/useUrlQuery');
+jest.mock('@signozhq/badge', () => ({
+	Badge: jest.fn(),
+}));
+
+const mockSpan: Span = {
+	spanId: 'test-span-id',
+	name: 'test-span',
+	serviceName: 'test-service',
+	durationNano: 1160000, // 1ms in nano
+	timestamp: 1234567890,
+	rootSpanId: 'test-root-span-id',
+	parentSpanId: 'test-parent-span-id',
+	traceId: 'test-trace-id',
+	hasError: false,
+	kind: 0,
+	references: [],
+	tagMap: {},
+	event: [],
+	rootName: 'test-root-name',
+	statusMessage: 'test-status-message',
+	statusCodeString: 'test-status-code-string',
+	spanKind: 'test-span-kind',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 0,
+	level: 0,
+};
+
+const mockTraceMetadata = {
+	traceId: 'test-trace-id',
+	startTime: 1234567000,
+	endTime: 1234569000,
+	hasMissingSpans: false,
+};
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+describe('SpanDuration', () => {
+	const mockSetSelectedSpan = jest.fn();
+	const mockUrlQuerySet = jest.fn();
+	const mockUrlQueryGet = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		// Mock URL query hook
+		(useUrlQuery as jest.Mock).mockReturnValue({
+			set: mockUrlQuerySet,
+			get: mockUrlQueryGet,
+			toString: () => 'spanId=test-span-id',
+		});
+	});
+
+	it('calls handleSpanClick when clicked', () => {
+		const mockHandleSpanClick = jest.fn();
+
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockHandleSpanClick}
+				filteredSpanIds={[]}
+				isFilterActive={false}
+			/>,
+		);
+
+		// Find and click the span duration element
+		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
+		fireEvent.click(spanElement);
+
+		// Verify handleSpanClick was called with the correct span
+		expect(mockHandleSpanClick).toHaveBeenCalledWith(mockSpan);
+	});
+
+	it('shows action buttons on hover', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[]}
+				isFilterActive={false}
+			/>,
+		);
+
+		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
+
+		// Initially, action buttons should not be visible
+		expect(screen.queryByRole('button')).not.toBeInTheDocument();
+
+		// Hover over the span
+		fireEvent.mouseEnter(spanElement);
+
+		// Action buttons should now be visible
+		expect(screen.getByRole('button')).toBeInTheDocument();
+
+		// Mouse leave should hide the buttons
+		fireEvent.mouseLeave(spanElement);
+		expect(screen.queryByRole('button')).not.toBeInTheDocument();
+	});
+
+	it('applies interested-span class when span is selected', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={mockSpan}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[]}
+				isFilterActive={false}
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
+	});
+
+	it('applies highlighted-span class when span matches filter', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[mockSpan.spanId]}
+				isFilterActive
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+	});
+
+	it('applies dimmed-span class when span does not match filter', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={['other-span-id']}
+				isFilterActive
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+	});
+
+	it('prioritizes interested-span over highlighted-span when span is selected and matches filter', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={mockSpan}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[mockSpan.spanId]}
+				isFilterActive
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
+	});
+
+	it('applies selected-non-matching-span class when span is selected but does not match filter', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={mockSpan}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={['different-span-id']}
+				isFilterActive
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
+	});
+
+	it('applies interested-span class when span is selected and no filter is active', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={mockSpan}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[]}
+				isFilterActive={false}
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
+	});
+
+	it('dims span when filter is active but no matches found', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[]} // Empty array but filter is active
+				isFilterActive // This is the key difference
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -0,0 +1,428 @@
+import React from 'react';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import Success from '../Success';
+
+// Mock the required hooks with proper typing
+const mockSafeNavigate = jest.fn() as jest.MockedFunction<
+	(params: { search: string }) => void
+>;
+const mockUrlQuery = new URLSearchParams();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('hooks/useUrlQuery', () => (): URLSearchParams => mockUrlQuery);
+
+// App provider is already handled by test-utils
+
+// React Router is already globally mocked
+
+// Mock complex external dependencies that cause provider issues
+jest.mock('components/SpanHoverCard/SpanHoverCard', () => {
+	function SpanHoverCard({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element {
+		return <div>{children}</div>;
+	}
+	SpanHoverCard.displayName = 'SpanHoverCard';
+	return SpanHoverCard;
+});
+
+// Mock the Filters component that's causing React Query issues
+jest.mock('../Filters/Filters', () => {
+	function Filters(): null {
+		return null;
+	}
+	Filters.displayName = 'Filters';
+	return Filters;
+});
+
+// Mock other potential dependencies
+jest.mock(
+	'pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal',
+	() => {
+		function AddSpanToFunnelModal(): null {
+			return null;
+		}
+		AddSpanToFunnelModal.displayName = 'AddSpanToFunnelModal';
+		return AddSpanToFunnelModal;
+	},
+);
+
+jest.mock('pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons', () => {
+	function SpanLineActionButtons(): null {
+		return null;
+	}
+	SpanLineActionButtons.displayName = 'SpanLineActionButtons';
+	return SpanLineActionButtons;
+});
+
+jest.mock('components/HttpStatusBadge/HttpStatusBadge', () => {
+	function HttpStatusBadge(): null {
+		return null;
+	}
+	HttpStatusBadge.displayName = 'HttpStatusBadge';
+	return HttpStatusBadge;
+});
+
+jest.mock('components/TimelineV3/TimelineV3', () => {
+	function TimelineV3(): null {
+		return null;
+	}
+	TimelineV3.displayName = 'TimelineV3';
+	return { __esModule: true, default: TimelineV3 };
+});
+
+// Mock other utilities that might cause issues
+jest.mock('lib/uPlotLib/utils/generateColor', () => ({
+	generateColor: (): string => '#1890ff',
+}));
+
+jest.mock('container/TraceDetail/utils', () => ({
+	convertTimeToRelevantUnit: (
+		value: number,
+	): { time: number; timeUnitName: string } => ({
+		time: value < 1000 ? value : value / 1000,
+		timeUnitName: value < 1000 ? 'ms' : 's',
+	}),
+}));
+
+jest.mock('utils/toFixed', () => ({
+	toFixed: (value: number, decimals: number): string => value.toFixed(decimals),
+}));
+
+// Mock useVirtualizer to render all items without actual virtualization
+jest.mock('@tanstack/react-virtual', () => ({
+	useVirtualizer: ({
+		count,
+	}: {
+		count: number;
+	}): {
+		getVirtualItems: () => Array<{
+			index: number;
+			key: number;
+			start: number;
+			size: number;
+		}>;
+		getTotalSize: () => number;
+		scrollToIndex: jest.Mock;
+	} => ({
+		getVirtualItems: (): Array<{
+			index: number;
+			key: number;
+			start: number;
+			size: number;
+		}> =>
+			Array.from({ length: count }, (_, i) => ({
+				index: i,
+				key: i,
+				start: i * 54,
+				size: 54,
+			})),
+		getTotalSize: (): number => count * 54,
+		scrollToIndex: jest.fn(),
+	}),
+	Virtualizer: jest.fn(),
+}));
+
+const mockTraceMetadata = {
+	traceId: 'test-trace-id',
+	startTime: 1679748225000000,
+	endTime: 1679748226000000,
+	hasMissingSpans: false,
+};
+
+const createMockSpan = (spanId: string, level = 1): Span => ({
+	spanId,
+	traceId: 'test-trace-id',
+	rootSpanId: 'span-1',
+	parentSpanId: level === 0 ? '' : 'span-1',
+	name: `Test Span ${spanId}`,
+	serviceName: 'test-service',
+	timestamp: mockTraceMetadata.startTime + level * 100000,
+	durationNano: 50000000,
+	level,
+	hasError: false,
+	kind: 1,
+	references: [],
+	tagMap: {},
+	event: [],
+	rootName: 'Test Root Span',
+	statusMessage: '',
+	statusCodeString: 'OK',
+	spanKind: 'server',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 1,
+});
+
+const mockSpans = [
+	createMockSpan('span-1', 0),
+	createMockSpan('span-2', 1),
+	createMockSpan('span-3', 1),
+];
+
+// Shared TestComponent for all tests
+function TestComponent(): JSX.Element {
+	const [selectedSpan, setSelectedSpan] = React.useState<Span | undefined>(
+		undefined,
+	);
+
+	return (
+		<Success
+			spans={mockSpans}
+			traceMetadata={mockTraceMetadata}
+			interestedSpanId={{ spanId: '', isUncollapsed: false }}
+			uncollapsedNodes={mockSpans.map((s) => s.spanId)}
+			setInterestedSpanId={jest.fn()}
+			setTraceFlamegraphStatsWidth={jest.fn()}
+			selectedSpan={selectedSpan}
+			setSelectedSpan={setSelectedSpan}
+			hoveredSpanId={null}
+			setHoveredSpanId={jest.fn()}
+		/>
+	);
+}
+
+describe('Span Click User Flows', () => {
+	const FIRST_SPAN_TEST_ID = 'cell-0-span-1';
+	const FIRST_SPAN_DURATION_TEST_ID = 'cell-1-span-1';
+	const SECOND_SPAN_TEST_ID = 'cell-0-span-2';
+	const SPAN_OVERVIEW_CLASS = '.span-overview';
+	const SPAN_DURATION_CLASS = '.span-duration';
+	const INTERESTED_SPAN_CLASS = 'interested-span';
+	const SECOND_SPAN_DURATION_TEST_ID = 'cell-1-span-2';
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		// Clear all URL parameters
+		Array.from(mockUrlQuery.keys()).forEach((key) => mockUrlQuery.delete(key));
+	});
+
+	it('clicking span updates URL with spanId parameter', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<Success
+				spans={mockSpans}
+				traceMetadata={mockTraceMetadata}
+				interestedSpanId={{ spanId: '', isUncollapsed: false }}
+				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
+				setInterestedSpanId={jest.fn()}
+				setTraceFlamegraphStatsWidth={jest.fn()}
+				selectedSpan={undefined}
+				setSelectedSpan={jest.fn()}
+				hoveredSpanId={null}
+				setHoveredSpanId={jest.fn()}
+			/>,
+			undefined,
+			{ initialRoute: '/trace' },
+		);
+
+		// Initially URL should not have spanId
+		expect(mockUrlQuery.get('spanId')).toBeNull();
+
+		// Click on the actual span element (not the wrapper)
+		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+		const spanElement = spanOverview.querySelector(
+			SPAN_OVERVIEW_CLASS,
+		) as HTMLElement;
+		await user.click(spanElement);
+
+		// Verify URL was updated with spanId
+		expect(mockUrlQuery.get('spanId')).toBe('span-1');
+		expect(mockSafeNavigate).toHaveBeenCalledWith({
+			search: expect.stringContaining('spanId=span-1'),
+		});
+	});
+
+	it('clicking span duration visually selects the span', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<TestComponent />, undefined, {
+			initialRoute: '/trace',
+		});
+
+		// Wait for initial render and selection
+		await waitFor(() => {
+			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
+			const spanDurationElement = spanDuration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+
+		// Click on span-2 to test selection change
+		const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
+		const span2DurationElement = span2Duration.querySelector(
+			SPAN_DURATION_CLASS,
+		) as HTMLElement;
+		await user.click(span2DurationElement);
+
+		// Wait for the state update and re-render
+		await waitFor(() => {
+			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
+			const spanDurationElement = spanDuration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
+			const span2DurationElement = span2Duration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+
+			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+	});
+
+	it('both click areas produce the same visual result', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<TestComponent />, undefined, {
+			initialRoute: '/trace',
+		});
+
+		// Wait for initial render and selection
+		await waitFor(() => {
+			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
+			const spanOverviewElement = spanOverview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			const spanDurationElement = spanDuration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+
+			// Initially both areas should show the same visual selection (first span is auto-selected)
+			expect(spanOverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+
+		// Click span-2 to test selection change
+		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+		const span2Element = span2Overview.querySelector(
+			SPAN_OVERVIEW_CLASS,
+		) as HTMLElement;
+		await user.click(span2Element);
+
+		// Wait for the state update and re-render
+		await waitFor(() => {
+			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
+			const spanOverviewElement = spanOverview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			const spanDurationElement = spanDuration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+
+			// Now span-2 should be selected, span-1 should not
+			expect(spanOverviewElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+
+			// Check that span-2 is selected
+			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
+			const span2OverviewElement = span2Overview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			const span2DurationElement = span2Duration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+
+			expect(span2OverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+	});
+
+	it('clicking different spans updates selection correctly', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<TestComponent />, undefined, {
+			initialRoute: '/trace',
+		});
+
+		// Wait for initial render and selection
+		await waitFor(() => {
+			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+			const span1Element = span1Overview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			expect(span1Element).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+
+		// Click second span
+		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+		const span2Element = span2Overview.querySelector(
+			SPAN_OVERVIEW_CLASS,
+		) as HTMLElement;
+		await user.click(span2Element);
+
+		// Wait for the state update and re-render
+		await waitFor(() => {
+			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+			const span1Element = span1Overview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+			const span2Element = span2Overview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+
+			// Second span should be selected, first should not
+			expect(span1Element).not.toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(span2Element).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+	});
+
+	it('preserves existing URL parameters when selecting spans', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		// Pre-populate URL with existing parameters
+		mockUrlQuery.set('existingParam', 'existingValue');
+		mockUrlQuery.set('anotherParam', 'anotherValue');
+
+		render(
+			<Success
+				spans={mockSpans}
+				traceMetadata={mockTraceMetadata}
+				interestedSpanId={{ spanId: '', isUncollapsed: false }}
+				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
+				setInterestedSpanId={jest.fn()}
+				setTraceFlamegraphStatsWidth={jest.fn()}
+				selectedSpan={undefined}
+				setSelectedSpan={jest.fn()}
+				hoveredSpanId={null}
+				setHoveredSpanId={jest.fn()}
+			/>,
+			undefined,
+			{ initialRoute: '/trace' },
+		);
+
+		// Click on the actual span element (not the wrapper)
+		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+		const spanElement = spanOverview.querySelector(
+			SPAN_OVERVIEW_CLASS,
+		) as HTMLElement;
+		await user.click(spanElement);
+
+		// Verify existing parameters are preserved and spanId is added
+		expect(mockUrlQuery.get('existingParam')).toBe('existingValue');
+		expect(mockUrlQuery.get('anotherParam')).toBe('anotherValue');
+		expect(mockUrlQuery.get('spanId')).toBe('span-1');
+
+		// Verify navigation was called with all parameters
+		expect(mockSafeNavigate).toHaveBeenCalledWith({
+			search: expect.stringMatching(
+				/existingParam=existingValue.*anotherParam=anotherValue.*spanId=span-1/,
+			),
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/constants.ts

@@ -0,0 +1,7 @@
+export enum TraceWaterfallStates {
+	LOADING = 'LOADING',
+	SUCCESS = 'SUCCESS',
+	NO_DATA = 'NO_DATA',
+	ERROR = 'ERROR',
+	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
+}

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -1,13 +1,61 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/resizable';
+import useGetTraceV2 from 'hooks/trace/useGetTraceV2';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Span, TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
 
 import TraceDetailsHeader from './TraceDetailsHeader/TraceDetailsHeader';
 import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
+import TraceWaterfall, {
+	IInterestedSpan,
+} from './TraceWaterfall/TraceWaterfall';
 
 function TraceDetailsV3(): JSX.Element {
+	const { id: traceId } = useParams<TraceDetailV2URLProps>();
+	const urlQuery = useUrlQuery();
+	const [interestedSpanId, setInterestedSpanId] = useState<IInterestedSpan>(
+		() => ({
+			spanId: urlQuery.get('spanId') || '',
+			isUncollapsed: urlQuery.get('spanId') !== '',
+		}),
+	);
+	const [
+		_traceFlamegraphStatsWidth,
+		setTraceFlamegraphStatsWidth,
+	] = useState<number>(450);
+	const [uncollapsedNodes, setUncollapsedNodes] = useState<string[]>([]);
+	const [selectedSpan, setSelectedSpan] = useState<Span>();
+	const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
+
+	useEffect(() => {
+		setInterestedSpanId({
+			spanId: urlQuery.get('spanId') || '',
+			isUncollapsed: urlQuery.get('spanId') !== '',
+		});
+	}, [urlQuery]);
+
+	const {
+		data: traceData,
+		isFetching: isFetchingTraceData,
+		error: errorFetchingTraceData,
+	} = useGetTraceV2({
+		traceId,
+		uncollapsedSpans: uncollapsedNodes,
+		selectedSpanId: interestedSpanId.spanId,
+		isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
+	});
+
+	useEffect(() => {
+		if (traceData && traceData.payload && traceData.payload.uncollapsedSpans) {
+			setUncollapsedNodes(traceData.payload.uncollapsedSpans);
+		}
+	}, [traceData]);
+
 	return (
 		<div
 			style={{
@@ -27,7 +75,20 @@ function TraceDetailsV3(): JSX.Element {
 				</ResizablePanel>
 				<ResizableHandle withHandle />
 				<ResizablePanel defaultSize={60} minSize={20}>
-					<div />
+					<TraceWaterfall
+						traceData={traceData}
+						isFetchingTraceData={isFetchingTraceData}
+						errorFetchingTraceData={errorFetchingTraceData}
+						traceId={traceId || ''}
+						interestedSpanId={interestedSpanId}
+						setInterestedSpanId={setInterestedSpanId}
+						uncollapsedNodes={uncollapsedNodes}
+						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
+						selectedSpan={selectedSpan}
+						setSelectedSpan={setSelectedSpan}
+						hoveredSpanId={hoveredSpanId}
+						setHoveredSpanId={setHoveredSpanId}
+					/>
 				</ResizablePanel>
 			</ResizablePanelGroup>
 		</div>

frontend/src/types/api/trace/getTraceFlamegraph.ts

@@ -4,7 +4,7 @@ export interface TraceDetailFlamegraphURLProps {
 
 export interface GetTraceFlamegraphPayloadProps {
 	traceId: string;
-	selectedSpanId: string;
+	selectedSpanId?: string;
 }
 
 export interface Event {