chore: self review change

Assisted-by: Claude Opus 5.5

frontend/src/pages/TraceDetailsV3/EntityMetadata/EntityMetadataItem.tsx

@@ -5,18 +5,23 @@ import { Typography } from '@signozhq/ui/typography';
 import styles from './EntityMetadataItem.module.scss';
 
 interface EntityMetadataItemProps {
-	tooltip: string;
+	tooltip: ReactNode;
+	tooltipClassName?: string;
 	icon?: ReactNode;
 	children: ReactNode;
 }
 
 function EntityMetadataItem({
 	tooltip,
+	tooltipClassName,
 	icon,
 	children,
 }: EntityMetadataItemProps): JSX.Element {
 	return (
-		<TooltipSimple title={tooltip}>
+		<TooltipSimple
+			title={tooltip}
+			tooltipContentProps={{ className: tooltipClassName }}
+		>
 			<span className={styles.item}>
 				{icon}
 				<Typography.Text as="span">{children}</Typography.Text>
@@ -27,6 +32,7 @@ function EntityMetadataItem({
 
 EntityMetadataItem.defaultProps = {
 	icon: null,
+	tooltipClassName: undefined,
 };
 
 export default EntityMetadataItem;

frontend/src/pages/TraceDetailsV3/EntityMetadata/EntityMetadataRow.module.scss

@@ -8,3 +8,16 @@
 	// Keep Typography.Text at the row's size (it reads this var, not inherited font-size).
 	--typography-font-size: var(--periscope-font-size-base);
 }
+
+.tokenTooltip {
+	composes: tooltipBody from '../shared.module.scss';
+	min-width: 160px;
+}
+
+.tokenTooltipTitle {
+	padding-bottom: var(--spacing-4);
+}
+
+.tokenTooltipContent {
+	composes: tooltipContent from '../shared.module.scss';
+}

frontend/src/pages/TraceDetailsV3/EntityMetadata/EntityMetadataRow.tsx

@@ -1,10 +1,13 @@
-import { CalendarClock, Server, Timer } from '@signozhq/icons';
+import { CalendarClock, Coins, Landmark, Server, Timer } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import cx from 'classnames';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 
+import { formatCost, formatTokens } from '../utils/genAi';
+import type { SpantypesTraceAITokensDTO } from 'api/generated/services/sigNoz.schemas';
 import EntityMetadataItem from './EntityMetadataItem';
+import TokenUsageTooltip from './TokenUsageTooltip';
 
 import styles from './EntityMetadataRow.module.scss';
 
@@ -16,6 +19,8 @@ interface EntityMetadataRowProps {
 	execTimePercent?: number;
 	timestamp?: string;
 	statusCode?: string | number;
+	tokens?: SpantypesTraceAITokensDTO;
+	cost?: number;
 }
 
 const ICON_SIZE = 14;
@@ -32,6 +37,8 @@ function EntityMetadataRow({
 	execTimePercent,
 	timestamp,
 	statusCode,
+	tokens,
+	cost,
 }: EntityMetadataRowProps): JSX.Element {
 	const entityLabel = entity === 'trace' ? 'Trace' : 'Span';
 	const durationTooltip =
@@ -91,6 +98,25 @@ function EntityMetadataRow({
 					<HttpStatusBadge statusCode={statusCode} />
 				</EntityMetadataItem>
 			)}
+
+			{tokens && (tokens.input > 0 || tokens.output > 0) && (
+				<EntityMetadataItem
+					tooltip={<TokenUsageTooltip tokens={tokens} />}
+					tooltipClassName={styles.tokenTooltipContent}
+					icon={<Coins size={ICON_SIZE} />}
+				>
+					Tokens: {formatTokens(tokens.input)} → {formatTokens(tokens.output)}
+				</EntityMetadataItem>
+			)}
+
+			{cost !== undefined && (
+				<EntityMetadataItem
+					tooltip="Total cost"
+					icon={<Landmark size={ICON_SIZE} />}
+				>
+					Cost — {formatCost(cost)}
+				</EntityMetadataItem>
+			)}
 		</div>
 	);
 }
@@ -102,6 +128,8 @@ EntityMetadataRow.defaultProps = {
 	execTimePercent: undefined,
 	timestamp: undefined,
 	statusCode: undefined,
+	tokens: undefined,
+	cost: undefined,
 };
 
 export default EntityMetadataRow;

frontend/src/pages/TraceDetailsV3/EntityMetadata/TokenUsageTooltip.tsx

@@ -0,0 +1,34 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import TokenBreakdown from '../TraceTooltip/TokenBreakdown';
+import type { SpantypesTraceAITokensDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './EntityMetadataRow.module.scss';
+
+interface TokenUsageTooltipProps {
+	tokens: SpantypesTraceAITokensDTO;
+}
+
+function TokenUsageTooltip({ tokens }: TokenUsageTooltipProps): JSX.Element {
+	const { input, output, cacheRead, cacheWrite } = tokens;
+
+	return (
+		<div className={styles.tokenTooltip}>
+			<Typography.Text
+				size="small"
+				weight="medium"
+				className={styles.tokenTooltipTitle}
+			>
+				Usage Breakdown
+			</Typography.Text>
+			<TokenBreakdown
+				input={input}
+				output={output}
+				cacheRead={cacheRead}
+				cacheWrite={cacheWrite}
+			/>
+		</div>
+	);
+}
+
+export default TokenUsageTooltip;

frontend/src/pages/TraceDetailsV3/SpanHintBadge/SpanHintBadge.tsx

@@ -0,0 +1,37 @@
+import { CSSProperties } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import { getAiSpanKind } from '../utils/genAi';
+import { AI_SPAN_BADGES } from './constants';
+
+interface SpanHintBadgeProps {
+	span: SpanV3;
+}
+
+function SpanHintBadge({ span }: SpanHintBadgeProps): JSX.Element | null {
+	const aiSpanKind = getAiSpanKind(span);
+
+	if (aiSpanKind) {
+		const { label, color } = AI_SPAN_BADGES[aiSpanKind];
+		return (
+			<Badge
+				variant="outline"
+				// The outline variant derives text, fill and border from this color.
+				style={{ '--badge-background': color } as CSSProperties}
+				data-testid={`span-hint-badge-${aiSpanKind}`}
+			>
+				{label}
+			</Badge>
+		);
+	}
+
+	if (!span.response_status_code) {
+		return null;
+	}
+
+	return <HttpStatusBadge statusCode={span.response_status_code} />;
+}
+
+export default SpanHintBadge;

frontend/src/pages/TraceDetailsV3/SpanHintBadge/__tests__/SpanHintBadge.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import SpanHintBadge from '../SpanHintBadge';
+
+const spanWith = (
+	attributes: Record<string, string | number>,
+	responseStatusCode = '',
+): SpanV3 =>
+	({
+		attributes,
+		resource: {},
+		response_status_code: responseStatusCode,
+	}) as unknown as SpanV3;
+
+describe('SpanHintBadge', () => {
+	it.each([
+		[{ 'gen_ai.request.model': 'gpt-4o' }, 'LLM'],
+		[{ 'gen_ai.tool.name': 'search' }, 'TOOL'],
+		[{ 'gen_ai.agent.name': 'planner' }, 'AGENT'],
+	])('shows only the AI badge for %p', (attributes, label) => {
+		render(<SpanHintBadge span={spanWith(attributes, '200')} />);
+
+		expect(screen.getByText(label)).toBeInTheDocument();
+		expect(screen.queryByText('200')).not.toBeInTheDocument();
+	});
+
+	it('falls back to the HTTP status code for non-AI spans', () => {
+		render(<SpanHintBadge span={spanWith({}, '503')} />);
+
+		expect(screen.getByText('503')).toBeInTheDocument();
+	});
+
+	it('renders nothing for a non-AI span without a status code', () => {
+		const { container } = render(<SpanHintBadge span={spanWith({})} />);
+
+		expect(container).toBeEmptyDOMElement();
+	});
+});

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

@@ -0,0 +1,10 @@
+import { AiSpanKind } from '../utils/genAi';
+
+export const AI_SPAN_BADGES: Record<
+	AiSpanKind,
+	{ label: string; color: string }
+> = {
+	[AiSpanKind.Llm]: { label: 'LLM', color: 'rgba(155, 255, 0, 1)' },
+	[AiSpanKind.Tool]: { label: 'TOOL', color: 'rgba(255, 209, 0, 1)' },
+	[AiSpanKind.Agent]: { label: 'AGENT', color: 'rgba(255, 10, 138, 1)' },
+};

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

@@ -9,40 +9,24 @@
 }
 
 .popover {
+	composes: tooltipContent from '../shared.module.scss';
 	// Hover card may be rendered while the SpanDetailsPanel is docked as
 	// a FloatingPanel (z-index 999); bump above the default tooltip z-index.
 	--tooltip-z-index: 1000;
-	background-color: var(--l1-background);
-	padding: 8px 12px;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	border: 1px solid var(--l2-border);
-	color: var(--l1-foreground);
 }
 
 .content {
-	font-size: 12px;
-	color: var(--l1-foreground);
+	composes: tooltipBody from '../shared.module.scss';
+	width: 223px;
 }
 
-.name {
-	font-weight: 600;
-	margin-bottom: 4px;
+.title {
+	composes: tooltipTitle from '../shared.module.scss';
 }
 
-.row {
-	line-height: 1.5;
-	color: var(--l2-foreground);
-}
-
-.preview {
-	// container for additional preview rows
-}
-
-.previewKey {
-	color: var(--l2-foreground);
-}
-
-.previewValue {
-	color: var(--l1-foreground);
+.header {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding-bottom: var(--spacing-4);
 }

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

@@ -4,6 +4,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
 import { convertTimeToRelevantUnit } from 'utils/traceUtils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
@@ -12,6 +13,11 @@ import { useMemo } from 'react';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { toFixed } from 'utils/toFixed';
 
+import { getSpanAiDetails, SpanAiDetails } from './aiUsage';
+import SpanUsageBreakdown from './SpanUsageBreakdown';
+import TooltipRow from '../TraceTooltip/TooltipRow';
+import TooltipSection from '../TraceTooltip/TooltipSection';
+
 import styles from './SpanHoverCard.module.scss';
 
 /**
@@ -38,6 +44,7 @@ export interface SpanTooltipContentProps {
 	relativeStartMs: number;
 	durationMs: number;
 	previewRows?: SpanPreviewRow[];
+	ai?: SpanAiDetails;
 }
 
 export function SpanTooltipContent({
@@ -47,33 +54,46 @@ export function SpanTooltipContent({
 	relativeStartMs,
 	durationMs,
 	previewRows,
+	ai,
 }: SpanTooltipContentProps): JSX.Element {
 	const { time: formattedDuration, timeUnitName } =
 		convertTimeToRelevantUnit(durationMs);
 
 	return (
 		<div className={styles.content}>
-			<div className={styles.name} style={{ color }}>
-				{spanName}
-			</div>
-			<div className={styles.row}>status: {hasError ? 'error' : 'ok'}</div>
-			<div className={styles.row}>start: {toFixed(relativeStartMs, 2)} ms</div>
-			<div className={styles.row}>
-				duration: {toFixed(formattedDuration, 2)} {timeUnitName}
+			<div className={styles.header}>
+				<Typography.Text className={styles.title} style={{ color }}>
+					{spanName}
+				</Typography.Text>
+				{ai?.usage && (
+					<Typography.Text size="small" weight="medium">
+						Usage Breakdown
+					</Typography.Text>
+				)}
 			</div>
+			{ai?.usage && <SpanUsageBreakdown usage={ai.usage} />}
+			<TooltipSection>
+				{ai?.model && <TooltipRow label="model" value={ai.model} />}
+				{ai?.toolName && <TooltipRow label="tool" value={ai.toolName} />}
+				{ai?.agentName && <TooltipRow label="agent" value={ai.agentName} />}
+				<TooltipRow label="status" value={hasError ? 'error' : 'ok'} />
+				<TooltipRow label="start" value={`${toFixed(relativeStartMs, 2)} ms`} />
+				<TooltipRow
+					label="duration"
+					value={`${toFixed(formattedDuration, 2)} ${timeUnitName}`}
+				/>
+			</TooltipSection>
 			{previewRows && previewRows.length > 0 && (
-				<div className={styles.preview}>
+				<TooltipSection>
 					{previewRows.map((row) => (
-						<div
+						<TooltipRow
 							key={row.key}
-							className={styles.row}
-							data-testid={`span-hover-card-preview-${row.key}`}
-						>
-							<span className={styles.previewKey}>{row.key}:</span>{' '}
-							<span className={styles.previewValue}>{row.value}</span>
-						</div>
+							label={row.key}
+							value={row.value}
+							testId={`span-hover-card-preview-${row.key}`}
+						/>
 					))}
-				</div>
+				</TooltipSection>
 			)}
 		</div>
 	);
@@ -137,6 +157,7 @@ export function SpanHoverCard({
 				relativeStartMs: span.timestamp - traceStartTime,
 				durationMs: span.duration_nano / 1e6,
 				previewRows,
+				ai: getSpanAiDetails(span),
 			},
 		};
 	}, [

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

@@ -0,0 +1,37 @@
+import { formatCost } from '../utils/genAi';
+import { SpanAiUsage } from './aiUsage';
+import TokenBreakdown from '../TraceTooltip/TokenBreakdown';
+import TooltipRow from '../TraceTooltip/TooltipRow';
+import TooltipSection from '../TraceTooltip/TooltipSection';
+
+interface SpanUsageBreakdownProps {
+	usage: SpanAiUsage;
+}
+
+function SpanUsageBreakdown({ usage }: SpanUsageBreakdownProps): JSX.Element {
+	const {
+		inputTokens,
+		outputTokens,
+		cacheReadTokens,
+		cacheCreationTokens,
+		cost,
+	} = usage;
+
+	return (
+		<>
+			<TokenBreakdown
+				input={inputTokens}
+				output={outputTokens}
+				cacheRead={cacheReadTokens}
+				cacheWrite={cacheCreationTokens}
+			/>
+			{cost !== undefined && (
+				<TooltipSection>
+					<TooltipRow label="cost" value={formatCost(cost)} />
+				</TooltipSection>
+			)}
+		</>
+	);
+}
+
+export default SpanUsageBreakdown;

frontend/src/pages/TraceDetailsV3/SpanHoverCard/__tests__/SpanTooltipContent.test.tsx

@@ -0,0 +1,143 @@
+import { render, screen } from '@testing-library/react';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import { getSpanAiDetails } from '../aiUsage';
+import { SpanTooltipContent } from '../SpanHoverCard';
+
+const baseProps = {
+	spanName: 'chat gpt-4o',
+	color: '#fff',
+	hasError: false,
+	relativeStartMs: 268,
+	durationMs: 1110,
+};
+
+const spanWith = (attributes: Record<string, string | number>): SpanV3 =>
+	({ attributes, resource: {} }) as unknown as SpanV3;
+
+describe('getSpanAiDetails', () => {
+	it('returns undefined for a span without gen_ai attributes', () => {
+		expect(getSpanAiDetails(spanWith({ 'http.method': 'GET' }))).toBeUndefined();
+	});
+
+	it('reads model, tool, agent, token usage and cost', () => {
+		expect(
+			getSpanAiDetails(
+				spanWith({
+					'gen_ai.request.model': 'gpt-4o',
+					'gen_ai.tool.name': 'search',
+					'gen_ai.agent.name': 'planner',
+					'gen_ai.usage.input_tokens': '120',
+					'gen_ai.usage.output_tokens': 30,
+					'signoz.gen_ai.usage.tokens.cost': '0.00000056',
+				}),
+			),
+		).toStrictEqual({
+			model: 'gpt-4o',
+			toolName: 'search',
+			agentName: 'planner',
+			usage: {
+				inputTokens: 120,
+				outputTokens: 30,
+				cacheReadTokens: undefined,
+				cacheCreationTokens: undefined,
+				cost: 0.00000056,
+			},
+		});
+	});
+});
+
+describe('SpanTooltipContent', () => {
+	it('renders status, start and duration for a non-AI span', () => {
+		render(<SpanTooltipContent {...baseProps} />);
+
+		expect(screen.getByText('chat gpt-4o')).toBeInTheDocument();
+		expect(screen.getByText('ok')).toBeInTheDocument();
+		expect(screen.getByText('268 ms')).toBeInTheDocument();
+		expect(screen.getByText('1.11 s')).toBeInTheDocument();
+		expect(screen.queryByText('Usage Breakdown')).not.toBeInTheDocument();
+	});
+
+	it('renders raw input, cache and output tokens with cost', () => {
+		render(
+			<SpanTooltipContent
+				{...baseProps}
+				ai={{
+					model: 'gpt-4o',
+					usage: {
+						inputTokens: 1000,
+						outputTokens: 200,
+						cacheReadTokens: 600,
+						cacheCreationTokens: 100,
+						cost: 0.00000056,
+					},
+				}}
+			/>,
+		);
+
+		expect(screen.getByText('Usage Breakdown')).toBeInTheDocument();
+		expect(screen.getByText('Input')).toBeInTheDocument();
+		expect(screen.getByText('1,000')).toBeInTheDocument();
+		expect(screen.getByText('Cache')).toBeInTheDocument();
+		expect(screen.getByText('Cache read')).toBeInTheDocument();
+		expect(screen.getByText('600')).toBeInTheDocument();
+		expect(screen.getByText('Cache write')).toBeInTheDocument();
+		expect(screen.getByText('100')).toBeInTheDocument();
+		expect(screen.getByText('Output')).toBeInTheDocument();
+		expect(screen.getByText('200')).toBeInTheDocument();
+		// Raw values only: no derived input or total usage.
+		expect(screen.queryByText('1,700')).not.toBeInTheDocument();
+		expect(screen.queryByText('1,200')).not.toBeInTheDocument();
+		expect(screen.getByText('$ 0.00000056')).toBeInTheDocument();
+	});
+
+	it('hides a zero cache row, and the cache group when both are zero', () => {
+		const { rerender } = render(
+			<SpanTooltipContent
+				{...baseProps}
+				ai={{
+					usage: {
+						inputTokens: 194,
+						outputTokens: 32,
+						cacheReadTokens: 50,
+						cacheCreationTokens: 0,
+					},
+				}}
+			/>,
+		);
+
+		expect(screen.getByText('Cache read')).toBeInTheDocument();
+		expect(screen.queryByText('Cache write')).not.toBeInTheDocument();
+
+		rerender(
+			<SpanTooltipContent
+				{...baseProps}
+				ai={{
+					usage: {
+						inputTokens: 194,
+						outputTokens: 32,
+						cacheReadTokens: 0,
+						cacheCreationTokens: 0,
+					},
+				}}
+			/>,
+		);
+
+		expect(screen.queryByText('Cache')).not.toBeInTheDocument();
+		expect(screen.queryByText('Cache read')).not.toBeInTheDocument();
+	});
+
+	it('hides cache rows and cost when the attributes are absent', () => {
+		render(
+			<SpanTooltipContent
+				{...baseProps}
+				ai={{ usage: { inputTokens: 10, outputTokens: 5 } }}
+			/>,
+		);
+
+		expect(screen.queryByText('Cache')).not.toBeInTheDocument();
+		expect(screen.queryByText('Cache read')).not.toBeInTheDocument();
+		expect(screen.queryByText('Cache write')).not.toBeInTheDocument();
+		expect(screen.queryByText('cost')).not.toBeInTheDocument();
+	});
+});

frontend/src/pages/TraceDetailsV3/SpanHoverCard/aiUsage.ts

@@ -0,0 +1,64 @@
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import { GEN_AI_KEYS, getGenAiValue } from '../utils/genAi';
+
+export interface SpanAiUsage {
+	inputTokens?: number;
+	outputTokens?: number;
+	cacheReadTokens?: number;
+	cacheCreationTokens?: number;
+	cost?: number;
+}
+
+export interface SpanAiDetails {
+	model?: string;
+	toolName?: string;
+	agentName?: string;
+	usage?: SpanAiUsage;
+}
+
+function getGenAiAttributeAsString(
+	span: SpanV3,
+	key: string,
+): string | undefined {
+	const value = getGenAiValue(span, key);
+	return value === undefined ? undefined : String(value);
+}
+
+function getGenAiAttributeAsNumber(
+	span: SpanV3,
+	key: string,
+): number | undefined {
+	const value = getGenAiValue(span, key);
+	if (value === undefined) {
+		return undefined;
+	}
+	const parsed = Number(value);
+	return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+export function getSpanAiDetails(span: SpanV3): SpanAiDetails | undefined {
+	const usage: SpanAiUsage = {
+		inputTokens: getGenAiAttributeAsNumber(span, GEN_AI_KEYS.inputTokens),
+		outputTokens: getGenAiAttributeAsNumber(span, GEN_AI_KEYS.outputTokens),
+		cacheReadTokens: getGenAiAttributeAsNumber(span, GEN_AI_KEYS.cacheReadTokens),
+		cacheCreationTokens: getGenAiAttributeAsNumber(
+			span,
+			GEN_AI_KEYS.cacheCreationTokens,
+		),
+		cost: getGenAiAttributeAsNumber(span, GEN_AI_KEYS.cost),
+	};
+	const hasUsage =
+		usage.inputTokens !== undefined || usage.outputTokens !== undefined;
+
+	const details: SpanAiDetails = {
+		model: getGenAiAttributeAsString(span, GEN_AI_KEYS.requestModel),
+		toolName: getGenAiAttributeAsString(span, GEN_AI_KEYS.toolName),
+		agentName: getGenAiAttributeAsString(span, GEN_AI_KEYS.agentName),
+		usage: hasUsage ? usage : undefined,
+	};
+
+	return details.model || details.toolName || details.agentName || hasUsage
+		? details
+		: undefined;
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -195,6 +195,8 @@ function TraceDetailsHeader({
 								DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS,
 							)}
 							statusCode={traceSummary.rootSpanStatusCode}
+							tokens={traceSummary.ai?.tokens}
+							cost={traceSummary.ai?.totalCost}
 						/>
 					) : (
 						<DetailsLoader />

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/TraceDetailsHeader.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import type { SpantypesGettableTraceSummaryDTO } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { render } from 'tests/test-utils';
 
@@ -176,9 +177,19 @@ describe('TraceDetailsHeader – trace metadata row', () => {
 		hasMissingSpans: false,
 		totalSpansCount: 42,
 		totalErrorSpansCount: 0,
+		ai: {
+			tokens: {
+				input: 12040,
+				output: 3110,
+				cacheRead: 0,
+				cacheWrite: 0,
+				reasoning: 0,
+			},
+			totalCost: 0.0421,
+		},
 	};
 
-	const mockSummary = (data?: typeof traceMetadata): void => {
+	const mockSummary = (data?: SpantypesGettableTraceSummaryDTO): void => {
 		jest.mocked(useTraceSummary).mockReturnValue({ data, isLoading: false });
 	};
 
@@ -201,6 +212,36 @@ describe('TraceDetailsHeader – trace metadata row', () => {
 		expect(screen.getByText(duration)).toBeInTheDocument();
 	});
 
+	it('renders AI tokens and cost when the summary has them', () => {
+		mockSummary(traceMetadata);
+		render(<TraceDetailsHeader {...baseProps} showTraceDetailsHeaderOptions />);
+
+		expect(screen.getByText('Tokens: 12,040 → 3,110')).toBeInTheDocument();
+		expect(screen.getByText('Cost — $ 0.0421')).toBeInTheDocument();
+	});
+
+	it('omits AI tokens and cost when the summary has no ai field', () => {
+		mockSummary({ ...traceMetadata, ai: undefined });
+		render(<TraceDetailsHeader {...baseProps} showTraceDetailsHeaderOptions />);
+
+		expect(screen.queryByText(/^Tokens:/)).not.toBeInTheDocument();
+		expect(screen.queryByText(/^Cost —/)).not.toBeInTheDocument();
+	});
+
+	it('omits AI tokens when input and output are both zero', () => {
+		mockSummary({
+			...traceMetadata,
+			ai: {
+				...traceMetadata.ai,
+				tokens: { ...traceMetadata.ai.tokens, input: 0, output: 0 },
+			},
+		});
+		render(<TraceDetailsHeader {...baseProps} showTraceDetailsHeaderOptions />);
+
+		expect(screen.queryByText(/^Tokens:/)).not.toBeInTheDocument();
+		expect(screen.getByText('Cost — $ 0.0421')).toBeInTheDocument();
+	});
+
 	it('is shown by default and can be hidden / shown again via the Trace options menu', async () => {
 		const user = userEvent.setup({ delay: null });
 		mockSummary(traceMetadata);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.module.scss

@@ -30,13 +30,9 @@
 // lives here. Shares visual treatment with the waterfall hover popover
 // but is positioned `fixed` instead of anchored.
 .tooltip {
+	composes: tooltipSurface from '../shared.module.scss';
 	position: fixed;
 	z-index: 1000;
 	pointer-events: none;
-	background-color: var(--l1-background);
-	padding: 8px 12px;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	border: 1px solid var(--l2-border);
 	color: var(--l1-foreground);
 }

frontend/src/pages/TraceDetailsV3/TraceTooltip/TokenBreakdown.tsx

@@ -0,0 +1,59 @@
+import { formatTokens } from '../utils/genAi';
+import TooltipRow from './TooltipRow';
+import TooltipSection from './TooltipSection';
+
+interface TokenBreakdownProps {
+	input?: number;
+	output?: number;
+	cacheRead?: number;
+	cacheWrite?: number;
+}
+
+function TokenBreakdown({
+	input,
+	output,
+	cacheRead,
+	cacheWrite,
+}: TokenBreakdownProps): JSX.Element {
+	const showCacheRead = !!cacheRead;
+	const showCacheWrite = !!cacheWrite;
+
+	return (
+		<>
+			{input !== undefined && (
+				<TooltipSection>
+					<TooltipRow label="Input" value={formatTokens(input)} isHeading />
+				</TooltipSection>
+			)}
+			{(showCacheRead || showCacheWrite) && (
+				<TooltipSection>
+					<TooltipRow label="Cache" isHeading />
+					{showCacheRead && (
+						<TooltipRow label="Cache read" value={formatTokens(cacheRead)} isNested />
+					)}
+					{showCacheWrite && (
+						<TooltipRow
+							label="Cache write"
+							value={formatTokens(cacheWrite)}
+							isNested
+						/>
+					)}
+				</TooltipSection>
+			)}
+			{output !== undefined && (
+				<TooltipSection>
+					<TooltipRow label="Output" value={formatTokens(output)} isHeading />
+				</TooltipSection>
+			)}
+		</>
+	);
+}
+
+TokenBreakdown.defaultProps = {
+	input: undefined,
+	output: undefined,
+	cacheRead: undefined,
+	cacheWrite: undefined,
+};
+
+export default TokenBreakdown;

frontend/src/pages/TraceDetailsV3/TraceTooltip/TooltipRow.tsx

@@ -0,0 +1,42 @@
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './TraceTooltip.module.scss';
+
+interface TooltipRowProps {
+	label: string;
+	value?: string;
+	isNested?: boolean;
+	isHeading?: boolean;
+	testId?: string;
+}
+
+function TooltipRow({
+	label,
+	value,
+	isNested,
+	isHeading,
+	testId,
+}: TooltipRowProps): JSX.Element {
+	return (
+		<div
+			className={cx(styles.row, isNested && styles.nestedRow)}
+			data-testid={testId}
+		>
+			<Typography.Text
+				size="small"
+				color={isHeading ? undefined : 'muted'}
+				truncate={1}
+			>
+				{label}
+			</Typography.Text>
+			{value !== undefined && (
+				<Typography.Text size="small" truncate={1} className={styles.rowValue}>
+					{value}
+				</Typography.Text>
+			)}
+		</div>
+	);
+}
+
+export default TooltipRow;

frontend/src/pages/TraceDetailsV3/TraceTooltip/TooltipSection.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+import styles from './TraceTooltip.module.scss';
+
+interface TooltipSectionProps {
+	children: ReactNode;
+}
+
+function TooltipSection({ children }: TooltipSectionProps): JSX.Element {
+	return <div className={styles.section}>{children}</div>;
+}
+
+export default TooltipSection;

frontend/src/pages/TraceDetailsV3/TraceTooltip/TraceTooltip.module.scss

@@ -0,0 +1,41 @@
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-2) 0;
+	border-top: 1px solid;
+	border-image: linear-gradient(
+			90deg,
+			var(--l3-background-transparent),
+			var(--l3-border),
+			var(--l3-background-transparent)
+		)
+		1;
+
+	&:first-child {
+		padding-top: 0;
+		border-top: none;
+	}
+
+	&:last-child {
+		padding-bottom: 0;
+	}
+}
+
+.row {
+	display: flex;
+	justify-content: space-between;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.nestedRow {
+	padding-left: var(--spacing-6);
+}
+
+.rowValue {
+	flex-shrink: 0;
+	max-width: 60%;
+	text-align: right;
+	font-variant-numeric: tabular-nums;
+}

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

@@ -217,8 +217,9 @@
 .statusCell {
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: flex-start;
 	cursor: pointer;
+	padding-left: var(--spacing-2);
 
 	--badge-border-radius: 2px;
 	--badge-padding: 3px 6px;
@@ -408,6 +409,11 @@
 	}
 }
 
+.aiSpanIcon {
+	flex-shrink: 0;
+	margin: 0 var(--spacing-2);
+}
+
 .treeLabel {
 	color: var(--l1-foreground);
 	font-family: 'Inter';

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

@@ -25,7 +25,6 @@ import {
 } from '@tanstack/react-table';
 import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import cx from 'classnames';
-import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import TimelineV3 from 'components/TimelineV3/TimelineV3';
 import { convertTimeToRelevantUnit } from 'utils/traceUtils';
 import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
@@ -33,7 +32,13 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { colorToRgb } from 'lib/uPlotLib/utils/generateColor';
-import { ChevronDown, ChevronRight, Link, ListPlus } from '@signozhq/icons';
+import {
+	ChevronDown,
+	ChevronRight,
+	Link,
+	ListPlus,
+	Sparkle,
+} from '@signozhq/icons';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
 import { resolveSpanColor } from 'pages/TraceDetailsV3/utils';
 import { useBoundaryPagination } from 'pages/TraceDetailsV3/TraceWaterfall/hooks/useBoundaryPagination';
@@ -44,6 +49,8 @@ import { toFixed } from 'utils/toFixed';
 
 import { EventTooltipContent } from '../../../SpanHoverCard/EventTooltipContent';
 import { SpanHoverCard } from '../../../SpanHoverCard/SpanHoverCard';
+import SpanHintBadge from '../../../SpanHintBadge/SpanHintBadge';
+import { isAiSpan } from '../../../utils/genAi';
 import AddSpanToFunnelModal from '../../AddSpanToFunnelModal/AddSpanToFunnelModal';
 import { IInterestedSpan } from '../../types';
 
@@ -328,14 +335,23 @@ const SpanOverview = memo(function SpanOverview({
 			</span>
 
 			{/* Colored service dot */}
-			<span
-				className={cx(styles.treeIcon, { [styles.hasError]: span.has_error })}
-				style={
-					{
-						'--service-dot-color': effectiveColor,
-					} as React.CSSProperties
-				}
-			/>
+			{isAiSpan(span) ? (
+				<Sparkle
+					size={10}
+					color={effectiveColor}
+					fill={effectiveColor}
+					className={styles.aiSpanIcon}
+				/>
+			) : (
+				<span
+					className={cx(styles.treeIcon, { [styles.hasError]: span.has_error })}
+					style={
+						{
+							'--service-dot-color': effectiveColor,
+						} as React.CSSProperties
+					}
+				/>
+			)}
 
 			{/* Span name + service name */}
 			<span className={styles.treeLabel}>
@@ -971,9 +987,7 @@ function Success(props: ISuccessProps): JSX.Element {
 									onMouseLeave={(): void => applyHoverClass(null)}
 									onClick={(): void => handleSpanClick(span)}
 								>
-									{span.response_status_code && (
-										<HttpStatusBadge statusCode={span.response_status_code} />
-									)}
+									<SpanHintBadge span={span} />
 								</div>
 							);
 						})}

frontend/src/pages/TraceDetailsV3/shared.module.scss

@@ -0,0 +1,45 @@
+/* Figma `dark/shadow-dropdown` popover surface, shared by every trace-details
+   tooltip so they look the same. */
+
+/* Plain CSS only (no SCSS syntax): other modules `composes` from this file. */
+
+/* For plain elements, e.g. the flamegraph's cursor-following portal. */
+.tooltipSurface {
+	background-color: color-mix(in srgb, var(--l3-background) 60%, transparent);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	padding: var(--spacing-4);
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(20px);
+}
+
+/* For @signozhq/ui Tooltip content: it paints both the bubble and the arrow
+   from these variables. */
+.tooltipContent {
+	--tooltip-background: color-mix(
+		in srgb,
+		var(--l3-background) 60%,
+		transparent
+	);
+	--tooltip-border-color: var(--l2-border);
+	--tooltip-border-radius: var(--radius-2);
+	--tooltip-padding: var(--spacing-4);
+	--tooltip-box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(20px);
+}
+
+.tooltipBody {
+	display: flex;
+	flex-direction: column;
+	letter-spacing: var(--paragraph-small-400-letter-spacing);
+	color: var(--l1-foreground-hover);
+}
+
+.tooltipTitle {
+	--typography-font-family: var(--code-small-500-font-family);
+	--typography-font-size: var(--code-small-500-font-size);
+	--typography-font-weight: var(--code-small-500-font-weight);
+	--typography-line-height: var(--code-small-500-line-height);
+	letter-spacing: var(--code-small-500-letter-spacing);
+	word-break: break-all;
+}

frontend/src/pages/TraceDetailsV3/utils/__tests__/genAi.test.ts

@@ -0,0 +1,32 @@
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import { AiSpanKind, getAiSpanKind, isAiSpan } from '../genAi';
+
+const spanWith = (attributes: Record<string, string | number>): SpanV3 =>
+	({ attributes, resource: {} }) as unknown as SpanV3;
+
+describe('getAiSpanKind', () => {
+	it.each<[Record<string, string | number>, AiSpanKind]>([
+		[{ 'gen_ai.request.model': 'gpt-4o' }, AiSpanKind.Llm],
+		[{ 'gen_ai.usage.input_tokens': 0 }, AiSpanKind.Llm],
+		[{ 'gen_ai.usage.reasoning.output_tokens': 12 }, AiSpanKind.Llm],
+		[{ 'gen_ai.tool.name': 'search' }, AiSpanKind.Tool],
+		[{ 'gen_ai.agent.name': 'planner' }, AiSpanKind.Agent],
+		[
+			{ 'gen_ai.tool.name': 'search', 'gen_ai.request.model': 'gpt-4o' },
+			AiSpanKind.Tool,
+		],
+		[
+			{ 'gen_ai.agent.name': 'planner', 'gen_ai.usage.input_tokens': 10 },
+			AiSpanKind.Agent,
+		],
+	])('classifies %p as %s', (attributes, kind) => {
+		expect(getAiSpanKind(spanWith(attributes))).toBe(kind);
+	});
+
+	it('returns undefined for non-AI spans and empty values', () => {
+		expect(getAiSpanKind(spanWith({ 'http.method': 'GET' }))).toBeUndefined();
+		expect(getAiSpanKind(spanWith({ 'gen_ai.tool.name': '' }))).toBeUndefined();
+		expect(isAiSpan(spanWith({}))).toBe(false);
+	});
+});

frontend/src/pages/TraceDetailsV3/utils/genAi.ts

@@ -0,0 +1,67 @@
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+export const GEN_AI_KEYS = {
+	requestModel: 'gen_ai.request.model',
+	toolName: 'gen_ai.tool.name',
+	agentName: 'gen_ai.agent.name',
+	inputTokens: 'gen_ai.usage.input_tokens',
+	outputTokens: 'gen_ai.usage.output_tokens',
+	cacheReadTokens: 'gen_ai.usage.cache_read.input_tokens',
+	cacheCreationTokens: 'gen_ai.usage.cache_creation.input_tokens',
+	reasoningTokens: 'gen_ai.usage.reasoning.output_tokens',
+	cost: 'signoz.gen_ai.usage.tokens.cost',
+} as const;
+
+export enum AiSpanKind {
+	Llm = 'llm',
+	Tool = 'tool',
+	Agent = 'agent',
+}
+
+const LLM_KEYS = [
+	GEN_AI_KEYS.requestModel,
+	GEN_AI_KEYS.inputTokens,
+	GEN_AI_KEYS.outputTokens,
+	GEN_AI_KEYS.cacheReadTokens,
+	GEN_AI_KEYS.cacheCreationTokens,
+	GEN_AI_KEYS.reasoningTokens,
+];
+
+/** Keeps numeric 0, which `getSpanAttribute`'s `||` chain drops. */
+export function getGenAiValue(
+	span: SpanV3,
+	key: string,
+): string | number | boolean | undefined {
+	const value = span.attributes?.[key] ?? span.resource?.[key];
+	return value === '' ? undefined : value;
+}
+
+function hasAttribute(span: SpanV3, key: string): boolean {
+	return getGenAiValue(span, key) !== undefined;
+}
+
+/** Tool and agent spans may also carry model or usage keys, so they win over LLM. */
+export function getAiSpanKind(span: SpanV3): AiSpanKind | undefined {
+	if (hasAttribute(span, GEN_AI_KEYS.toolName)) {
+		return AiSpanKind.Tool;
+	}
+	if (hasAttribute(span, GEN_AI_KEYS.agentName)) {
+		return AiSpanKind.Agent;
+	}
+	if (LLM_KEYS.some((key) => hasAttribute(span, key))) {
+		return AiSpanKind.Llm;
+	}
+	return undefined;
+}
+
+export function isAiSpan(span: SpanV3): boolean {
+	return getAiSpanKind(span) !== undefined;
+}
+
+export function formatTokens(value: number): string {
+	return value.toLocaleString('en-US');
+}
+
+export function formatCost(value: number): string {
+	return `$ ${value.toLocaleString('en-US', { maximumFractionDigits: 10 })}`;
+}