test(query-builder): type the QueryBuilderSearchV2 field values mock

#### Description
- Adds `@SigNoz/nerve` as code owner for the AI Assistant frontend
(`container/AIAssistant`, `hooks/aiAssistant`, `pages/AIAssistantPage`).

#### Issues closed by this PR

#### Screenshots / Screen Recordings

#### Additional Information
- `@SigNoz/nerve` has no write access to this repo, so GitHub ignores it
as an owner until an org admin grants it. // @therealpandey

---------

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

.github/CODEOWNERS

@@ -302,3 +302,8 @@ go.mod @therealpandey
 /frontend/.storybook/ @H4ad
 /frontend/src/storybook/ @H4ad
 /.claude/skills/signoz-page-story/ @H4ad
+
+## AI Assistant
+/frontend/src/container/AIAssistant/ @SigNoz/nerve @SigNoz/frontend-maintainers
+/frontend/src/hooks/aiAssistant/ @SigNoz/nerve @SigNoz/frontend-maintainers
+/frontend/src/pages/AIAssistantPage/ @SigNoz/nerve @SigNoz/frontend-maintainers

.github/workflows/e2eci.yaml

@@ -47,7 +47,7 @@ jobs:
       - name: node
         uses: actions/setup-node@v4
         with:
-          node-version: "22"
+          node-version: lts/*
       - name: install-pnpm
         uses: pnpm/action-setup@v6
         with:
@@ -67,7 +67,7 @@ jobs:
       matrix:
         project:
           - chromium
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shard: [1, 2, 3, 4]
     needs: changes
     if: needs.changes.outputs.e2e == 'true'
     runs-on: ubuntu-latest
@@ -105,7 +105,7 @@ jobs:
       - name: node
         uses: actions/setup-node@v4
         with:
-          node-version: "22"
+          node-version: lts/*
       - name: install-pnpm
         uses: pnpm/action-setup@v6
         with:
@@ -162,7 +162,7 @@ jobs:
       - name: playwright-test
         run: |
           cd tests/e2e && \
-            pnpm playwright test --project=${{ matrix.project }} --shard=${{ matrix.shard }}/10
+            pnpm playwright test --project=${{ matrix.project }} --shard=${{ matrix.shard }}/4
       - name: teardown-stack
         if: always()
         run: |

frontend/.storybook/preview.tsx

@@ -143,7 +143,12 @@ const preview: Preview = {
 						'Logs',
 						['Explorer', 'Live Tail', 'Pipelines', 'Settings'],
 						'Traces',
-						['Explorer', 'Trace Details', 'Funnel Details'],
+						[
+							'Explorer',
+							['Overview', 'Span Drawer'],
+							'Trace Details',
+							'Funnel Details',
+						],
 						'Metrics',
 						['Explorer'],
 						'Infrastructure',

frontend/src/api/pipeline/post.ts

@@ -4,10 +4,17 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { Pipeline } from 'types/api/pipeline/def';
 import { Props } from 'types/api/pipeline/post';
+import { toLegacyTagFilter } from 'utils/fieldContext';
 
 const post = async (props: Props): Promise<SuccessResponseV2<Pipeline>> => {
 	try {
-		const response = await axios.post('/logs/pipelines', props.data);
+		const response = await axios.post('/logs/pipelines', {
+			...props.data,
+			pipelines: props.data.pipelines.map((pipeline) => ({
+				...pipeline,
+				filter: toLegacyTagFilter(pipeline.filter),
+			})),
+		});
 
 		return {
 			httpStatusCode: response.status,

frontend/src/api/pipeline/preview.ts

@@ -1,6 +1,7 @@
 import axios from 'api';
 import { ILog } from 'types/api/logs/log';
 import { PipelineData } from 'types/api/pipeline/def';
+import { toLegacyTagFilter } from 'utils/fieldContext';
 
 export interface PipelineSimulationRequest {
 	logs: ILog[];
@@ -15,7 +16,13 @@ const simulatePipelineProcessing = async (
 	requestBody: PipelineSimulationRequest,
 ): Promise<PipelineSimulationResponse> =>
 	axios
-		.post('/logs/pipelines/preview', requestBody)
+		.post('/logs/pipelines/preview', {
+			...requestBody,
+			pipelines: requestBody.pipelines.map((pipeline) => ({
+				...pipeline,
+				filter: toLegacyTagFilter(pipeline.filter),
+			})),
+		})
 		.then((res) => res.data.data);
 
 export default simulatePipelineProcessing;

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -129,7 +129,7 @@ function CeleryOverviewConfigOptions(): JSX.Element {
 		{
 			placeholder: 'Service Name',
 			queryParam: QueryParams.service,
-			filterType: 'serviceName',
+			filterType: 'service.name',
 		},
 		{
 			placeholder: 'Span Name',

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,23 +1,19 @@
 import { useQuery } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
 import type { DefaultOptionType } from 'antd/es/select';
-import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
-import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
+import { getFieldValueSuggestions } from 'api/querySuggestions/getFieldValueSuggestions';
+import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { AppState } from 'store/reducers';
+import { toFieldValues } from 'hooks/querySuggestions/useFieldValuesSuggestion';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
+import { DATA_SOURCE_TO_SIGNAL, DataSource } from 'types/common/queryBuilder';
+import { getValuesForDataType } from 'utils/fieldValues';
 
 export interface Filters {
 	searchText: string;
 	attributeKey: string | string[];
-	aggregateOperator?: string;
 	dataSource?: DataSource;
-	aggregateAttribute?: string;
+	metricName?: string;
 	filterAttributeKeyDataType?: DataTypes;
-	tagType?: string;
 }
 
 export interface GetAllFiltersResponse {
@@ -29,54 +25,38 @@ export function useGetAllFilters(props: Filters): GetAllFiltersResponse {
 	const {
 		searchText,
 		attributeKey,
-		aggregateOperator,
 		dataSource,
-		aggregateAttribute,
+		metricName,
 		filterAttributeKeyDataType,
-		tagType,
 	} = props;
 
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
 	const { data, isLoading } = useQuery(
 		[
 			REACT_QUERY_KEY.GET_ATTRIBUTE_VALUES,
+			dataSource,
+			metricName,
 			attributeKey,
 			searchText,
-			minTime,
-			maxTime,
 		],
 		async () => {
 			const keys = Array.isArray(attributeKey) ? attributeKey : [attributeKey];
 
 			const responses = await Promise.all(
 				keys.map((key) =>
-					getAttributesValues({
-						aggregateOperator: aggregateOperator || 'noop',
-						dataSource: dataSource || DataSource.TRACES,
-						aggregateAttribute: aggregateAttribute || '',
-						attributeKey: key,
+					getFieldValueSuggestions({
+						signal: DATA_SOURCE_TO_SIGNAL[dataSource || DataSource.TRACES],
+						name: key,
 						searchText: searchText ?? '',
-						filterAttributeKeyDataType:
-							filterAttributeKeyDataType || DataTypes.String,
-						tagType: tagType || 'tag',
+						metricName,
 					}),
 				),
 			);
 
 			const uniqueValues = [
 				...new Set(
-					responses.flatMap(({ payload }) => {
-						if (!payload) {
-							return [];
-						}
-
-						const dataType = filterAttributeKeyDataType || DataTypes.String;
-						const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-						return key ? payload[key] || [] : [];
-					}),
+					responses.flatMap((response) =>
+						getValuesForDataType(toFieldValues(response), filterAttributeKeyDataType),
+					),
 				),
 			];
 
@@ -85,6 +65,7 @@ export function useGetAllFilters(props: Filters): GetAllFiltersResponse {
 				value: val,
 			}));
 		},
+		{ staleTime: FIELD_API_CACHE_TIME },
 	);
 
 	return { options: data ?? [], isFetching: isLoading };

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -73,11 +73,9 @@ export default function CeleryTaskGraphGrid({
 
 	const { options } = useCeleryFilterOptions(
 		'worker',
-		'rate',
 		DataSource.METRICS,
 		'flower_task_runtime_seconds_sum',
 		DataTypes.String,
-		'tag',
 	);
 	const isDarkMode = useIsDarkMode();
 

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -8,11 +8,9 @@ import { useGetAllFilters } from './CeleryTaskConfigOptions/useGetCeleryFilters'
 
 export const useCeleryFilterOptions = (
 	type: string | string[],
-	aggregateOperator?: string,
 	dataSource?: DataSource,
-	aggregateAttribute?: string,
+	metricName?: string,
 	filterAttributeKeyDataType?: DataTypes,
-	tagType?: string,
 ): {
 	searchText: string;
 	handleSearch: (value: string) => void;
@@ -23,11 +21,9 @@ export const useCeleryFilterOptions = (
 	const { isFetching, options } = useGetAllFilters({
 		attributeKey: type,
 		searchText,
-		aggregateOperator,
 		dataSource,
-		aggregateAttribute,
+		metricName,
 		filterAttributeKeyDataType,
-		tagType,
 	});
 	const handleDebouncedSearch = useDebouncedFn((searchText): void => {
 		setSearchText(searchText as string);

frontend/src/components/DetailsPanel/DetailsPanelDrawer.module.scss

@@ -0,0 +1,17 @@
+.drawer {
+	overflow: hidden;
+	border-color: var(--l2-border);
+	background: var(--l2-background);
+	box-shadow: -4px 10px 16px 2px var(--l1-shadow);
+
+	&:focus,
+	&:focus-visible {
+		outline: none;
+	}
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -1,7 +0,0 @@
-.details-panel-drawer {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
-}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -1,12 +1,15 @@
-import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Drawer, DrawerContent } from '@signozhq/ui/drawer';
+import cx from 'classnames';
+import { AnimatePresence } from 'motion/react';
 
-import './DetailsPanelDrawer.styles.scss';
+import styles from './DetailsPanelDrawer.module.scss';
 
 interface DetailsPanelDrawerProps {
 	isOpen: boolean;
 	onClose: () => void;
 	children: React.ReactNode;
 	className?: string;
+	testId?: string;
 }
 
 function DetailsPanelDrawer({
@@ -14,22 +17,41 @@ function DetailsPanelDrawer({
 	onClose,
 	children,
 	className,
+	testId,
 }: DetailsPanelDrawerProps): JSX.Element {
 	return (
-		<DrawerWrapper
+		<Drawer
 			open={isOpen}
 			onOpenChange={(open): void => {
 				if (!open) {
 					onClose();
 				}
 			}}
-			direction="right"
-			showOverlay={false}
-			className={`details-panel-drawer ${className || ''}`}
+			modal={false}
 		>
-			<div className="details-panel-drawer__body">{children}</div>
-		</DrawerWrapper>
+			<AnimatePresence>
+				{isOpen && (
+					<DrawerContent
+						forceMount
+						direction="right"
+						width="extra-wide"
+						showOverlay={false}
+						// Outside presses are left to the page, which knows what counts as inside.
+						onInteractOutside={(e): void => e.preventDefault()}
+						className={cx(styles.drawer, className)}
+						testId={testId}
+					>
+						<div className={styles.body}>{children}</div>
+					</DrawerContent>
+				)}
+			</AnimatePresence>
+		</Drawer>
 	);
 }
 
+DetailsPanelDrawer.defaultProps = {
+	className: undefined,
+	testId: undefined,
+};
+
 export default DetailsPanelDrawer;

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -18,6 +18,7 @@ function InputWithLabel({
 	className,
 	closeIcon,
 	disabled,
+	sanitize,
 }: {
 	label: string;
 	initialValue?: string | number | null;
@@ -29,14 +30,17 @@ function InputWithLabel({
 	className?: string;
 	closeIcon?: React.ReactNode;
 	disabled?: boolean;
+	/** Rewrites the typed value before it is shown and reported. */
+	sanitize?: (value: string) => string;
 }): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>(
 		initialValue ? initialValue.toString() : '',
 	);
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		setInputValue(e.target.value);
-		onChange?.(e.target.value);
+		const value = sanitize ? sanitize(e.target.value) : e.target.value;
+		setInputValue(value);
+		onChange?.(value);
 	};
 
 	return (
@@ -78,6 +82,7 @@ InputWithLabel.defaultProps = {
 	initialValue: undefined,
 	className: undefined,
 	closeIcon: undefined,
+	sanitize: undefined,
 };
 
 export default InputWithLabel;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -26,6 +26,7 @@ import {
 	RAW_QUERY_FIELDS,
 	resolveQueryBuilderFields,
 } from '../../queryBuilderFields.utils';
+import { parseLimit, sanitizeLimit } from '../../utils';
 
 import BucketOptions from './BucketOptions/BucketOptions';
 import HavingFilter from './HavingFilter/HavingFilter';
@@ -278,7 +279,7 @@ function QueryAddOns({
 
 	const handleChangeLimit = useCallback(
 		(value: string) => {
-			handleChangeQueryData('limit', Number(value) || null);
+			handleChangeQueryData('limit', parseLimit(value));
 		},
 		[handleChangeQueryData],
 	);
@@ -374,6 +375,7 @@ function QueryAddOns({
 									label="Limit"
 									type="number"
 									onChange={handleChangeLimit}
+									sanitize={sanitizeLimit}
 									initialValue={query?.limit ?? undefined}
 									placeholder={placeholderOf(QueryBuilderField.Limit)}
 									onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -169,8 +169,15 @@ describe('QueryAddOns', () => {
 		expect(screen.getByTestId('limit-content')).toBeInTheDocument();
 		expect(input.value).toBe('5');
 
-		fireEvent.change(input, { target: { value: '10' } });
-		expect(mockHandleChangeQueryData).toHaveBeenCalledWith('limit', 10);
+		const user = userEvent.setup();
+		await user.clear(input);
+		await user.type(input, '10');
+		expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith('limit', 10);
+
+		await user.clear(input);
+		await user.type(input, '-5');
+		expect(input.value).toBe('5');
+		expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith('limit', 5);
 	});
 
 	it.each([

frontend/src/components/QueryBuilderV2/__tests__/utils.test.ts

@@ -12,10 +12,62 @@ import {
 	convertExpressionToFilters,
 	convertFiltersToExpression,
 	convertFiltersToExpressionWithExistingQuery,
+	convertHavingToExpression,
 	formatValueForExpression,
+	parseLimit,
 	removeKeysFromExpression,
+	sanitizeLimit,
 } from '../utils';
 
+describe('convertHavingToExpression', () => {
+	it.each([
+		['COUNT()', 'count() > 5'],
+		['COUNT_DISTINCT(service.name)', 'count_distinct(service.name) > 5'],
+		['P99(duration_nano)', 'p99(duration_nano) > 5'],
+		['SUM(http.Request.Size)', 'sum(http.Request.Size) > 5'],
+		['count()', 'count() > 5'],
+	])('references %s by its lower-case function', (columnName, expected) => {
+		expect(
+			convertHavingToExpression([{ columnName, op: '>', value: 5 }]),
+		).toStrictEqual({ expression: expected });
+	});
+
+	it('joins several conditions and formats list values', () => {
+		expect(
+			convertHavingToExpression([
+				{ columnName: 'COUNT()', op: '>', value: 5 },
+				{ columnName: 'COUNT()', op: 'NOT IN', value: [1, 2] },
+			]),
+		).toStrictEqual({ expression: 'count() > 5 AND count() NOT IN [1, 2]' });
+	});
+});
+
+describe('sanitizeLimit', () => {
+	it.each([
+		['10', '10'],
+		['-10', '10'],
+		['2.5', '25'],
+		['1e3', '13'],
+		['', ''],
+	])('sanitizes %j to %j', (value, expected) => {
+		expect(sanitizeLimit(value)).toBe(expected);
+	});
+});
+
+describe('parseLimit', () => {
+	it.each([
+		['10', 10],
+		['1', 1],
+		['', null],
+		['0', null],
+		['-5', null],
+		['2.5', null],
+		['abc', null],
+	])('parses %j as %j', (value, expected) => {
+		expect(parseLimit(value)).toBe(expected);
+	});
+});
+
 describe('convertFiltersToExpression', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();

frontend/src/components/QueryBuilderV2/utils.ts

@@ -840,6 +840,16 @@ export const appendAndClause = (
 	return hasTopLevelOr ? `(${base}) AND ${clause}` : `${base} AND ${clause}`;
 };
 
+/** Strips everything but digits, so a limit input can't hold a sign or decimal. */
+export const sanitizeLimit = (value: string): string =>
+	value.replace(/\D/g, '');
+
+/** A query or formula limit: a positive integer, otherwise none. */
+export const parseLimit = (value: string): number | null => {
+	const limit = Number(value);
+	return Number.isInteger(limit) && limit > 0 ? limit : null;
+};
+
 /**
  * Convert old having format to new having format
  * @param having - Array of old having objects with columnName, op, and value
@@ -871,7 +881,14 @@ export const convertHavingToExpression = (
 				formattedValue = String(value);
 			}
 
-			return `${columnName} ${op} ${formattedValue}`;
+			// The old having filter upper-cased the function (`COUNT()`); v5 only
+			// resolves the aggregation's own lower-case expression.
+			const reference = columnName.replace(
+				/^\s*([A-Za-z_]\w*)\(/,
+				(_, fn: string) => `${fn.toLowerCase()}(`,
+			);
+
+			return `${reference} ${op} ${formattedValue}`;
 		})
 		.filter((expression) => expression !== ''); // Remove empty expressions
 

frontend/src/components/QuickFilters/utils.tsx

@@ -1,5 +1,5 @@
-import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { fieldContextToAttributeType } from 'utils/fieldContext';
 import { fieldDataTypeToDataType } from 'utils/fieldDataType';
 
 import { FiltersType, IQuickFiltersConfig } from './types';
@@ -14,19 +14,6 @@ const FILTER_TYPE_MAP: Record<string, FiltersType> = {
 	duration_nano: FiltersType.DURATION,
 };
 
-// The map below exists only for the old v3 attribute-values fetch
-// (useCheckboxFilterValues), the sole reader of attributeKey.dataType/type.
-// Once the values fetch moves to fields/values, remove this and reduce
-// attributeKey to { id, key }.
-
-const FIELD_CONTEXT_TO_ATTRIBUTE_TYPE: Record<string, string> = {
-	[TelemetrytypesFieldContextDTO.attribute]: 'tag',
-	[TelemetrytypesFieldContextDTO.resource]: 'resource',
-};
-
-const mapFieldContext = (fieldContext?: string): string =>
-	(fieldContext && FIELD_CONTEXT_TO_ATTRIBUTE_TYPE[fieldContext]) || '';
-
 const getFilterName = (str: string): string => {
 	if (FILTER_TITLE_MAP[str]) {
 		return FILTER_TITLE_MAP[str];
@@ -61,11 +48,15 @@ export const getFilterConfig = (
 			({
 				type: getFilterType(att),
 				title: getFilterName(att.name),
+				// The type mapping below exists only for the old v3 attribute-values fetch
+				// (useCheckboxFilterValues), the sole reader of attributeKey.dataType/type.
+				// Once the values fetch moves to fields/values, remove this and reduce
+				// attributeKey to { id, key }.
 				attributeKey: {
 					id: att.name,
 					key: att.name,
 					dataType: fieldDataTypeToDataType(att.fieldDataType),
-					type: mapFieldContext(att.fieldContext),
+					type: fieldContextToAttributeType(att.fieldContext),
 				},
 				defaultOpen: index < 2,
 			}) as IQuickFiltersConfig,

frontend/src/components/TanStackTableView/useRowNavigation.ts

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+export type UseRowNavigationParams<TData> = {
+	rows: TData[];
+	activeIndex: number;
+	onNavigate: (row: TData, index: number) => void;
+};
+
+export type UseRowNavigationResult = {
+	goToPrev: () => void;
+	goToNext: () => void;
+	isPrevDisabled: boolean;
+	isNextDisabled: boolean;
+};
+
+/** Steps the active row through the loaded rows; stops at either end. */
+export function useRowNavigation<TData>({
+	rows,
+	activeIndex,
+	onNavigate,
+}: UseRowNavigationParams<TData>): UseRowNavigationResult {
+	const isPrevDisabled = activeIndex <= 0;
+	const isNextDisabled = activeIndex < 0 || activeIndex >= rows.length - 1;
+
+	const goToPrev = useCallback((): void => {
+		if (!isPrevDisabled) {
+			onNavigate(rows[activeIndex - 1], activeIndex - 1);
+		}
+	}, [isPrevDisabled, onNavigate, rows, activeIndex]);
+
+	const goToNext = useCallback((): void => {
+		if (!isNextDisabled) {
+			onNavigate(rows[activeIndex + 1], activeIndex + 1);
+		}
+	}, [isNextDisabled, onNavigate, rows, activeIndex]);
+
+	return { goToPrev, goToNext, isPrevDisabled, isNextDisabled };
+}

frontend/src/constants/localStorage.ts

@@ -46,4 +46,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	TRACES_SPAN_DRAWER_ENABLED = 'TRACES_SPAN_DRAWER_ENABLED',
 }

frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx

@@ -26,6 +26,7 @@ import {
 } from 'api/ai-assistant/chat';
 import ROUTES from 'constants/routes';
 import { QueryParams } from 'constants/query';
+import { buildExplorerNavigationUrl } from 'utils/buildExplorerNavigationUrl';
 import { openInNewTab } from 'utils/navigation';
 import {
 	ArchiveRestore,
@@ -47,6 +48,10 @@ import { AIAssistantEvents, SuggestedPromptCategory } from '../../events';
 import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
 
+import {
+	getPanelTypeForRequestType,
+	requestTypeFromActionQuery,
+} from './utils/getPanelTypeForRequestType';
 import { openSavedViewByKey } from './utils/openSavedView';
 import {
 	isSavedViewOpenAction,
@@ -333,6 +338,11 @@ function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 		);
 		return;
 	}
+	// Read before toUrlCompositeQuery, which drops the requestType envelope.
+	const panelType = getPanelTypeForRequestType(
+		requestTypeFromActionQuery(action.query),
+		action.signal,
+	);
 	const normalized = withDerivedFilterExpressions(urlQuery as unknown as Query);
 	// eslint-disable-next-line no-console
 	console.log('[apply_filter] normalized', normalized);
@@ -342,7 +352,9 @@ function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 		normalized.builder.queryData.forEach((q, i) => {
 			deps.handleSetQueryData(i, q);
 		});
-		deps.redirectWithQueryBuilderData(normalized);
+		deps.redirectWithQueryBuilderData(normalized, {
+			[QueryParams.panelTypes]: panelType,
+		});
 		return;
 	}
 	const base = explorerRouteForSignal(action.signal);
@@ -353,8 +365,10 @@ function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 	}
 	// eslint-disable-next-line no-console
 	console.log('[apply_filter] off-page → navigate', base);
-	const encoded = encodeURIComponent(JSON.stringify(normalized));
-	navigate(`${base}?${QueryParams.compositeQuery}=${encoded}`);
+	const url = buildExplorerNavigationUrl(base, normalized, {
+		[QueryParams.panelTypes]: panelType,
+	});
+	navigate(url);
 }
 
 /** Picks the right rollback API call for a given action kind. */
@@ -613,6 +627,7 @@ export default function ActionsSection({
 							disabled={isSuccess}
 							loading={isLoading}
 							aria-label={action.label}
+							testId={`ai-action-chip-${action.kind}`}
 							prefix={icon}
 						>
 							<span className={styles.chipLabel}>{action.label}</span>

frontend/src/container/AIAssistant/components/ActionsSection/__tests__/ActionsSection.test.tsx

@@ -1,7 +1,16 @@
 import { undoExecution } from 'api/ai-assistant/chat';
 import type { MessageActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { MessageActionKindDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import {
+	ApplyFilterSignalDTO,
+	MessageActionKindDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { getCurrentLocation } from 'lib/router/navigation';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { QueryBuilderContextType } from 'types/common/queryBuilder';
 
 import ActionsSection from '../ActionsSection';
 
@@ -28,6 +37,37 @@ function renderUndoChip(): HTMLElement {
 	return screen.getByRole('button', { name: 'Undo change' });
 }
 
+// Labels differ per test: auto-applied filters are deduped module-wide by label.
+function countByServiceAction(label: string): MessageActionDTO {
+	return {
+		kind: MessageActionKindDTO.apply_filter,
+		label,
+		signal: ApplyFilterSignalDTO.logs,
+		query: {
+			requestType: Querybuildertypesv5RequestTypeDTO.scalar,
+			compositeQuery: {
+				queries: [
+					{
+						type: 'builder_query',
+						spec: {
+							name: 'A',
+							signal: 'logs',
+							aggregations: [{ expression: 'count()' }],
+							groupBy: [{ name: 'service.name' }],
+						},
+					},
+				],
+			},
+		},
+	};
+}
+
+function currentPanelTypesParam(): string | null {
+	return new URLSearchParams(getCurrentLocation().search).get(
+		QueryParams.panelTypes,
+	);
+}
+
 describe('ActionsSection rollback chip', () => {
 	beforeEach(() => {
 		mockUndo.mockReset();
@@ -81,3 +121,52 @@ describe('ActionsSection rollback chip', () => {
 		).resolves.toBeInTheDocument();
 	});
 });
+
+describe('ActionsSection apply_filter', () => {
+	it('opens the explorer in the Table view when the chip is clicked from another page', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(
+			<ActionsSection
+				actions={[countByServiceAction('Open in Logs Explorer')]}
+				messageId="message-1"
+			/>,
+			undefined,
+			{ initialRoute: ROUTES.HOME },
+		);
+
+		await user.click(screen.getByTestId('ai-action-chip-apply_filter'));
+
+		await waitFor(() =>
+			expect(getCurrentLocation().pathname).toBe(ROUTES.LOGS_EXPLORER),
+		);
+		expect(currentPanelTypesParam()).toBe(JSON.stringify(PANEL_TYPES.TABLE));
+	});
+
+	it('switches the open explorer to the Table view when applied on it', async () => {
+		const redirectWithQueryBuilderData = jest.fn() as jest.MockedFunction<
+			QueryBuilderContextType['redirectWithQueryBuilderData']
+		>;
+		const handleSetQueryData = jest.fn() as jest.MockedFunction<
+			QueryBuilderContextType['handleSetQueryData']
+		>;
+		render(
+			<ActionsSection
+				actions={[countByServiceAction('Apply on Logs Explorer')]}
+				messageId="message-2"
+			/>,
+			undefined,
+			{
+				initialRoute: ROUTES.LOGS_EXPLORER,
+				queryBuilderOverrides: { redirectWithQueryBuilderData, handleSetQueryData },
+			},
+		);
+
+		await waitFor(() =>
+			expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1),
+		);
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
+			expect.objectContaining({ builder: expect.anything() }),
+			{ [QueryParams.panelTypes]: PANEL_TYPES.TABLE },
+		);
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/getPanelTypeForRequestType.test.ts

@@ -0,0 +1,106 @@
+import { ApplyFilterSignalDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+import {
+	getPanelTypeForRequestType,
+	requestTypeFromActionQuery,
+} from '../getPanelTypeForRequestType';
+
+describe('getPanelTypeForRequestType', () => {
+	it.each([
+		[
+			Querybuildertypesv5RequestTypeDTO.scalar,
+			ApplyFilterSignalDTO.logs,
+			PANEL_TYPES.TABLE,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.time_series,
+			ApplyFilterSignalDTO.logs,
+			PANEL_TYPES.TIME_SERIES,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.raw,
+			ApplyFilterSignalDTO.logs,
+			PANEL_TYPES.LIST,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.trace,
+			ApplyFilterSignalDTO.traces,
+			PANEL_TYPES.TRACE,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.trace,
+			ApplyFilterSignalDTO.logs,
+			PANEL_TYPES.LIST,
+		],
+		[
+			Querybuildertypesv5RequestTypeDTO.trace,
+			ApplyFilterSignalDTO.metrics,
+			PANEL_TYPES.LIST,
+		],
+	])('maps %s on the %s signal to the %s view', (requestType, signal, view) => {
+		expect(getPanelTypeForRequestType(requestType, signal)).toBe(view);
+	});
+
+	it.each([
+		undefined,
+		null,
+		'',
+		Querybuildertypesv5RequestTypeDTO.raw_stream,
+		Querybuildertypesv5RequestTypeDTO.heatmap,
+		'distribution',
+		'nonsense',
+		'toString',
+		'constructor',
+		42,
+		{},
+	])(
+		'falls back to the List view for unmapped or invalid requestType (%p)',
+		(value) => {
+			expect(getPanelTypeForRequestType(value, ApplyFilterSignalDTO.traces)).toBe(
+				PANEL_TYPES.LIST,
+			);
+		},
+	);
+});
+
+describe('requestTypeFromActionQuery', () => {
+	it('reads the requestType envelope field and returns undefined when absent', () => {
+		expect(
+			requestTypeFromActionQuery({
+				requestType: 'scalar',
+				schemaVersion: 'v5',
+				compositeQuery: { queries: [] },
+			}),
+		).toBe('scalar');
+		expect(requestTypeFromActionQuery({})).toBeUndefined();
+		expect(requestTypeFromActionQuery(null)).toBeUndefined();
+		expect(requestTypeFromActionQuery(undefined)).toBeUndefined();
+	});
+
+	it('maps a grouped count() payload to the Table view', () => {
+		const query = {
+			requestType: 'scalar',
+			schemaVersion: 'v5',
+			compositeQuery: {
+				queries: [
+					{
+						type: 'builder_query',
+						spec: {
+							signal: 'logs',
+							aggregations: [{ expression: 'count()' }],
+							groupBy: [{ name: 'service.name' }],
+						},
+					},
+				],
+			},
+		};
+		expect(
+			getPanelTypeForRequestType(
+				requestTypeFromActionQuery(query),
+				ApplyFilterSignalDTO.logs,
+			),
+		).toBe(PANEL_TYPES.TABLE);
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/utils/getPanelTypeForRequestType.ts

@@ -0,0 +1,30 @@
+import {
+	ApplyFilterSignalDTO,
+	type MessageActionDTOQuery,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+export function getPanelTypeForRequestType(
+	requestType: unknown,
+	signal: ApplyFilterSignalDTO,
+): PANEL_TYPES {
+	switch (requestType) {
+		case Querybuildertypesv5RequestTypeDTO.scalar:
+			return PANEL_TYPES.TABLE;
+		case Querybuildertypesv5RequestTypeDTO.time_series:
+			return PANEL_TYPES.TIME_SERIES;
+		case Querybuildertypesv5RequestTypeDTO.trace:
+			return signal === ApplyFilterSignalDTO.traces
+				? PANEL_TYPES.TRACE
+				: PANEL_TYPES.LIST;
+		default:
+			return PANEL_TYPES.LIST;
+	}
+}
+
+export function requestTypeFromActionQuery(
+	query: MessageActionDTOQuery | undefined,
+): unknown {
+	return query?.requestType;
+}

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -10,7 +10,6 @@ import {
 	userEvent,
 	waitFor,
 } from 'tests/test-utils';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { pipelineApiResponseMockData } from '../mocks/pipeline';
 import PipelineListsView from '../PipelineListsView';
@@ -85,7 +84,7 @@ jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
 }));
 
 const BASE_URL = ENVIRONMENT.baseURL;
-const attributeKeysURL = `${BASE_URL}/api/v3/filter_suggestions`;
+const fieldKeysURL = `${BASE_URL}/api/v1/fields/keys`;
 
 describe('PipelinePage container test', () => {
 	beforeAll(() => {
@@ -339,42 +338,41 @@ describe('PipelinePage container test', () => {
 		expect(screen.queryAllByText('source = nginx')).toHaveLength(2);
 
 		server.use(
-			rest.get(attributeKeysURL, (_req, res, ctx) =>
+			rest.get(fieldKeysURL, (_req, res, ctx) =>
 				res(
 					ctx.status(200),
 					ctx.json({
 						status: 'success',
 						data: {
-							attributes: [
-								{
-									key: 'otelServiceName',
-									dataType: DataTypes.String,
-									type: 'tag',
-									isColumn: false,
-									isJSON: false,
-								},
-								{
-									key: 'service.name',
-									dataType: DataTypes.String,
-									type: 'resource',
-									isColumn: false,
-									isJSON: false,
-								},
-								{
-									key: 'service.instance.id',
-									dataType: DataTypes.String,
-									type: 'resource',
-									isColumn: false,
-									isJSON: false,
-								},
-								{
-									key: 'service.name',
-									dataType: DataTypes.String,
-									type: 'tag',
-									isColumn: false,
-									isJSON: false,
-								},
-							],
+							complete: true,
+							keys: {
+								otelServiceName: [
+									{
+										name: 'otelServiceName',
+										fieldContext: 'attribute',
+										fieldDataType: 'string',
+									},
+								],
+								'service.name': [
+									{
+										name: 'service.name',
+										fieldContext: 'resource',
+										fieldDataType: 'string',
+									},
+									{
+										name: 'service.name',
+										fieldContext: 'attribute',
+										fieldDataType: 'string',
+									},
+								],
+								'service.instance.id': [
+									{
+										name: 'service.instance.id',
+										fieldContext: 'resource',
+										fieldDataType: 'string',
+									},
+								],
+							},
 						},
 					}),
 				),

frontend/src/container/QueryBuilder/components/Formula/Formula.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import { Col, Input, Row, Select } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import BucketOptions from 'components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions';
+import { parseLimit, sanitizeLimit } from 'components/QueryBuilderV2/utils';
 import { LEGEND } from 'constants/global';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 // ** Hooks
@@ -171,7 +172,8 @@ export function Formula({
 								<InputWithLabel
 									label="Limit"
 									type="number"
-									onChange={(value): void => handleChangeLimit(Number(value))}
+									onChange={(value): void => handleChangeLimit(parseLimit(value))}
+									sanitize={sanitizeLimit}
 									initialValue={formula?.limit ?? undefined}
 									placeholder="Enter limit"
 								/>

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -12,7 +12,6 @@ import { type RefSelectProps, Select, Spin } from 'antd';
 import { Pill } from '@signozhq/ui/pill';
 import cx from 'classnames';
 import {
-	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
 	OperatorConfigKeys,
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
@@ -22,23 +21,14 @@ import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
-import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
-import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
 import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
 import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useRunQueryWithFilterItems } from 'hooks/queryBuilder/useRunQueryWithFilterItems';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
+import { useFieldValuesSuggestion } from 'hooks/querySuggestions/useFieldValuesSuggestion';
 import useDebounceValue from 'hooks/useDebounce';
-import {
-	cloneDeep,
-	isArray,
-	isEmpty,
-	isEqual,
-	isObject,
-	isUndefined,
-	unset,
-} from 'lodash-es';
+import { isArray, isEmpty, isEqual, isObject, isUndefined } from 'lodash-es';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import {
 	BaseAutocompleteData,
@@ -48,7 +38,13 @@ import {
 	IBuilderQuery,
 	TagFilter,
 } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
+import {
+	DATA_SOURCE_TO_SIGNAL,
+	DataSource,
+	QUERY_SOURCE_TO_FIELD_SOURCE,
+} from 'types/common/queryBuilder';
+import { attributeTypeToFieldContext } from 'utils/fieldContext';
+import { getValuesForDataType } from 'utils/fieldValues';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
@@ -61,7 +57,8 @@ import {
 	getTagToken,
 	isInNInOperator,
 } from './utils';
-import { filterByOperatorConfig } from '../utils';
+import { toAttributeKey } from '../GroupByFilter/utils';
+import { filterByOperatorConfig, getMetricNameForQuery } from '../utils';
 import QueryBuilderSearchDropdown from './QueryBuilderSearchDropdown';
 import SpanScopeSelector from './SpanScopeSelector';
 import Suggestions from './Suggestions';
@@ -186,70 +183,15 @@ function QueryBuilderSearchV2(
 		[query.dataSource],
 	);
 
-	const memoizedSearchParams = useMemo(
-		() => [
-			searchValue,
-			query.dataSource,
-			query.aggregateOperator,
-			query.aggregateAttribute?.key,
-		],
-		[
-			searchValue,
-			query.dataSource,
-			query.aggregateOperator,
-			query.aggregateAttribute?.key,
-		],
-	);
-
-	const queryFiltersWithoutId = useMemo(
-		() => ({
-			...query.filters,
-			items: query.filters?.items.map((item) => {
-				const filterWithoutId = cloneDeep(item);
-				unset(filterWithoutId, 'id');
-				return filterWithoutId;
-			}),
-		}),
-		[query.filters],
-	);
-
-	const memoizedSuggestionsParams = useMemo(
-		() => [searchValue, query.dataSource, queryFiltersWithoutId],
-		[query.dataSource, queryFiltersWithoutId, searchValue],
-	);
-
-	const memoizedValueParams = useMemo(
-		() => [
-			query.aggregateOperator,
-			query.dataSource,
-			query.aggregateAttribute?.key,
-			currentFilterItem?.key?.key || '',
-			currentFilterItem?.key?.dataType,
-			currentFilterItem?.key?.type ?? '',
-			isArray(currentFilterItem?.value)
-				? currentFilterItem?.value?.[currentFilterItem.value.length - 1]
-				: currentFilterItem?.value,
-		],
-		[
-			query.aggregateOperator,
-			query.dataSource,
-			query.aggregateAttribute?.key,
-			currentFilterItem?.key?.key,
-			currentFilterItem?.key?.dataType,
-			currentFilterItem?.key?.type,
-			currentFilterItem?.value,
-		],
-	);
-
-	const searchParams = useDebounceValue(memoizedSearchParams, DEBOUNCE_DELAY);
-
-	const valueParams = useDebounceValue(memoizedValueParams, DEBOUNCE_DELAY);
-
-	const suggestionsParams = useDebounceValue(
-		memoizedSuggestionsParams,
+	const debouncedKeySearchText = useDebounceValue(
+		searchValue?.split(' ')[0] ?? '',
 		DEBOUNCE_DELAY,
 	);
 
+	const valueSearchText = isArray(currentFilterItem?.value)
+		? String(currentFilterItem?.value?.[currentFilterItem.value.length - 1] ?? '')
+		: currentFilterItem?.value?.toString() || '';
+
 	const isQueryEnabled = useMemo(() => {
 		if (currentState === DropdownState.ATTRIBUTE_KEY) {
 			return query.dataSource === DataSource.METRICS
@@ -262,53 +204,58 @@ function QueryBuilderSearchV2(
 
 	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
-	const { data, isFetching } = useGetAggregateKeys(
+	const signal = DATA_SOURCE_TO_SIGNAL[query.dataSource];
+	const source = QUERY_SOURCE_TO_FIELD_SOURCE[query.source ?? ''];
+	const metricName = getMetricNameForQuery(query);
+
+	const { data: fieldKeys, isFetching } = useFieldKeysSuggestion(
 		{
-			searchText: searchValue?.split(' ')[0],
-			dataSource: query.dataSource,
-			aggregateOperator: query.aggregateOperator || '',
-			aggregateAttribute: query.aggregateAttribute?.key || '',
-			tagType: query.aggregateAttribute?.type ?? null,
+			signal,
+			source,
+			metricName,
+			fieldContext: attributeTypeToFieldContext(query.aggregateAttribute?.type),
+			searchText: debouncedKeySearchText,
 		},
+		query.builderQueryType,
 		{
-			queryKey: [searchParams],
-			enabled: isQueryEnabled && !isLogsDataSource && !hardcodedAttributeKeys,
+			enabled: isQueryEnabled && !hardcodedAttributeKeys,
+			keepPreviousData: true,
 		},
 	);
 
-	const { data: suggestionsData, isFetching: isFetchingSuggestions } =
-		useGetAttributeSuggestions(
-			{
-				searchText: searchValue?.split(' ')[0],
-				dataSource: query.dataSource,
-				filters: query.filters || { items: [], op: 'AND' },
-			},
-			{
-				queryKey: [suggestionsParams],
-				enabled: isQueryEnabled && isLogsDataSource,
-			},
-		);
+	const attributeKeys = useMemo(
+		() => (fieldKeys ?? []).map(toAttributeKey),
+		[fieldKeys],
+	);
 
-	const { data: attributeValues, isFetching: isFetchingAttributeValues } =
-		useGetAggregateValues(
-			{
-				aggregateOperator: query.aggregateOperator || '',
-				dataSource: query.dataSource,
-				aggregateAttribute: query.aggregateAttribute?.key || '',
-				attributeKey: currentFilterItem?.key?.key || '',
-				filterAttributeKeyDataType:
-					currentFilterItem?.key?.dataType ?? DataTypes.EMPTY,
-				tagType: currentFilterItem?.key?.type ?? '',
-				searchText: isArray(currentFilterItem?.value)
-					? String(currentFilterItem?.value?.[currentFilterItem.value.length - 1]) ||
-						''
-					: currentFilterItem?.value?.toString() || '',
-			},
-			{
-				enabled: currentState === DropdownState.ATTRIBUTE_VALUE,
-				queryKey: [valueParams],
-			},
-		);
+	const fieldValuesConfig = useMemo(
+		() => ({
+			signal,
+			source,
+			metricName,
+			name: currentFilterItem?.key?.key || '',
+			fieldContext: attributeTypeToFieldContext(currentFilterItem?.key?.type),
+			searchText: valueSearchText,
+		}),
+		[
+			signal,
+			source,
+			metricName,
+			currentFilterItem?.key?.key,
+			currentFilterItem?.key?.type,
+			valueSearchText,
+		],
+	);
+
+	const debouncedFieldValuesConfig = useDebounceValue(
+		fieldValuesConfig,
+		DEBOUNCE_DELAY,
+	);
+
+	const { data: fieldValues, isFetching: isFetchingAttributeValues } =
+		useFieldValuesSuggestion(debouncedFieldValuesConfig, query.builderQueryType, {
+			enabled: currentState === DropdownState.ATTRIBUTE_VALUE,
+		});
 
 	const handleDropdownSelect = useCallback(
 		(value: string) => {
@@ -533,15 +480,13 @@ function QueryBuilderSearchV2(
 		if (tagKey && isUndefined(currentFilterItem?.key)) {
 			let currentRunningAttributeKey;
 			const isSuggestedKeyInAutocomplete =
-				suggestionsData?.payload?.attributes?.some(
-					(value) => value.key === tagKey.split(' ')[0],
-				);
+				isLogsDataSource &&
+				attributeKeys.some((value) => value.key === tagKey.split(' ')[0]);
 
 			if (isSuggestedKeyInAutocomplete) {
-				const allAttributesMatchingTheKey =
-					suggestionsData?.payload?.attributes?.filter(
-						(value) => value.key === tagKey.split(' ')[0],
-					) || [];
+				const allAttributesMatchingTheKey = attributeKeys.filter(
+					(value) => value.key === tagKey.split(' ')[0],
+				);
 
 				if (allAttributesMatchingTheKey?.length === 1) {
 					[currentRunningAttributeKey] = allAttributesMatchingTheKey;
@@ -648,9 +593,10 @@ function QueryBuilderSearchV2(
 		currentFilterItem,
 		currentFilterItem?.key,
 		currentFilterItem?.op,
-		suggestionsData?.payload?.attributes,
+		attributeKeys,
+		isLogsDataSource,
 		searchValue,
-		isFetchingSuggestions,
+		isFetching,
 		currentState,
 	]);
 
@@ -662,9 +608,7 @@ function QueryBuilderSearchV2(
 				// add the user typed option in the dropdown to select that and move ahead irrespective of the matches and all
 				setDropdownOptions([
 					...(!isEmpty(tagKey) &&
-					!suggestionsData?.payload?.attributes?.some((val) =>
-						isEqual(val.key, tagKey),
-					)
+					!attributeKeys.some((val) => isEqual(val.key, tagKey))
 						? [
 								{
 									label: tagKey,
@@ -676,10 +620,10 @@ function QueryBuilderSearchV2(
 								},
 							]
 						: []),
-					...(suggestionsData?.payload?.attributes?.map((key) => ({
+					...attributeKeys.map((key) => ({
 						label: key.key,
 						value: key,
-					})) || []),
+					})),
 				]);
 			} else if (hardcodedAttributeKeys) {
 				const filteredKeys = hardcodedAttributeKeys.filter((key) =>
@@ -697,7 +641,7 @@ function QueryBuilderSearchV2(
 				setDropdownOptions([
 					// Add user typed option if it doesn't exist in the payload
 					...(tagKey.trim().length > 0 &&
-					!data?.payload?.attributeKeys?.some((val) => val.key === tagKey)
+					!attributeKeys.some((val) => val.key === tagKey)
 						? [
 								{
 									label: tagKey,
@@ -710,10 +654,10 @@ function QueryBuilderSearchV2(
 							]
 						: []),
 					// Map existing attribute keys from payload
-					...(data?.payload?.attributeKeys?.map((key) => ({
+					...attributeKeys.map((key) => ({
 						label: key.key,
 						value: key,
-					})) || []),
+					})),
 				]);
 			}
 		}
@@ -778,10 +722,10 @@ function QueryBuilderSearchV2(
 				values.push(tagValue);
 			}
 
-			if (attributeValues?.payload) {
-				const dataType = currentFilterItem?.key?.dataType || DataTypes.String;
-				const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-				values.push(...(attributeValues?.payload?.[key] || []));
+			if (fieldValues) {
+				values.push(
+					...getValuesForDataType(fieldValues, currentFilterItem?.key?.dataType),
+				);
 
 				// here we want to suggest the variable name matching with the key here, we will go over the dynamic variables for the keys
 				const variableName = dashboardDynamicVariables.find(
@@ -805,13 +749,12 @@ function QueryBuilderSearchV2(
 		}
 	}, [
 		hardcodedAttributeKeys,
-		attributeValues?.payload,
+		fieldValues,
 		currentFilterItem?.key?.dataType,
 		currentState,
-		data?.payload?.attributeKeys,
+		attributeKeys,
 		isLogsDataSource,
 		searchValue,
-		suggestionsData?.payload?.attributes,
 		operatorConfigKey,
 		currentFilterItem?.key?.key,
 		dashboardDynamicVariables,
@@ -880,8 +823,8 @@ function QueryBuilderSearchV2(
 	}, [deregisterShortcut, isLastQuery, registerShortcut]);
 
 	const loading = useMemo(
-		() => isFetching || isFetchingAttributeValues || isFetchingSuggestions,
-		[isFetching, isFetchingAttributeValues, isFetchingSuggestions],
+		() => isFetching || isFetchingAttributeValues,
+		[isFetching, isFetchingAttributeValues],
 	);
 
 	const isMetricsDataSource = useMemo(
@@ -991,7 +934,7 @@ function QueryBuilderSearchV2(
 							setTags((prev) => [...prev, ...(val.items as ITag[])]);
 						}}
 						searchValue={searchValue}
-						exampleQueries={suggestionsData?.payload?.example_queries || []}
+						exampleQueries={[]}
 						tags={tags}
 						currentFilterItem={currentFilterItem}
 						isLogsDataSource={isLogsDataSource}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/__test__/QueryBuilderSearchV2.test.tsx

@@ -5,9 +5,12 @@ import {
 	initialQueriesMap,
 	initialQueryBuilderFormValues,
 } from 'constants/queryBuilder';
+import { TelemetrytypesTelemetryFieldValuesDTO } from 'api/generated/services/sigNoz.schemas';
 import { DynamicVariableSuggestion } from 'providers/Dashboard/store/dynamicVariableSuggestions';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { FieldDataType, TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 import QueryBuilderSearchV2 from '../QueryBuilderSearchV2';
@@ -88,57 +91,31 @@ const renderWithContext = (props = {}): RenderResult => {
 const getSearchCombobox = (): HTMLElement =>
 	within(screen.getByTestId('qb-search-select')).getByRole('combobox');
 
-// Constants to fix linter errors
-const TYPE_TAG = 'tag';
-const IS_COLUMN_FALSE = false;
-const IS_JSON_FALSE = false;
-
-const mockAggregateKeysData = {
-	payload: {
-		attributeKeys: [
-			{
-				key: 'http.status',
-				dataType: DataTypes.String,
-				type: TYPE_TAG,
-				id: 'http.status--string--tag--false',
-			},
-			{
-				key: 'service.name',
-				dataType: DataTypes.String,
-				type: TYPE_TAG,
-				isColumn: IS_COLUMN_FALSE,
-				isJSON: IS_JSON_FALSE,
-				id: 'service.name--string--tag--false',
-			},
-			{
-				key: 'unmapped.attribute',
-				dataType: 'not-a-real-data-type' as unknown as DataTypes,
-				type: TYPE_TAG,
-				isColumn: IS_COLUMN_FALSE,
-				isJSON: IS_JSON_FALSE,
-				id: 'unmapped.attribute--String--tag--false',
-			},
-		],
+const mockFieldKeys: TelemetryFieldKey[] = [
+	{ name: 'http.status', fieldContext: 'attribute', fieldDataType: 'string' },
+	{ name: 'service.name', fieldContext: 'attribute', fieldDataType: 'string' },
+	{
+		name: 'unmapped.attribute',
+		fieldContext: 'attribute',
+		fieldDataType: 'not-a-real-data-type' as FieldDataType,
 	},
-};
+];
 
-jest.mock('hooks/queryBuilder/useGetAggregateKeys', () => ({
-	useGetAggregateKeys: jest.fn(() => ({
-		data: mockAggregateKeysData,
+jest.mock('hooks/querySuggestions/useFieldKeysSuggestion', () => ({
+	useFieldKeysSuggestion: jest.fn(() => ({
+		data: mockFieldKeys,
 		isFetching: false,
 	})),
 }));
 
-const mockAggregateValuesData = {
-	payload: {
-		stringAttributeValues: ['200', '404', '500'],
-		numberAttributeValues: [200, 404, 500],
-	},
+const mockFieldValues: TelemetrytypesTelemetryFieldValuesDTO = {
+	stringValues: ['200', '404', '500'],
+	numberValues: [200, 404, 500],
 };
 
-jest.mock('hooks/queryBuilder/useGetAggregateValues', () => ({
-	useGetAggregateValues: jest.fn(() => ({
-		data: mockAggregateValuesData,
+jest.mock('hooks/querySuggestions/useFieldValuesSuggestion', () => ({
+	useFieldValuesSuggestion: jest.fn(() => ({
+		data: mockFieldValues,
 		isFetching: false,
 	})),
 }));
@@ -196,7 +173,11 @@ describe('Suggestion Key -> Operator -> Value Flow', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: 'http.status' }),
+						key: expect.objectContaining({
+							key: 'http.status',
+							type: 'attribute',
+							dataType: 'string',
+						}),
 						op: '=',
 						value: '200',
 					}),
@@ -292,7 +273,7 @@ describe('Filter chips', () => {
 					key: {
 						key: 'http.status',
 						dataType: DataTypes.String,
-						type: TYPE_TAG,
+						type: 'tag',
 						id: 'http.status--string--tag--false',
 					},
 					op: '=',
@@ -332,3 +313,33 @@ describe('Filter chips', () => {
 		expect(getSearchCombobox()).toHaveDisplayValue(CHIP_LABEL);
 	});
 });
+
+describe('Key fetch context', () => {
+	it('limits keys to the aggregate attribute context, as the resource filter needs', () => {
+		renderWithContext({
+			query: {
+				...defaultProps.query,
+				aggregateAttribute: {
+					...defaultProps.query.aggregateAttribute,
+					type: 'resource',
+				},
+			},
+		});
+
+		expect(useFieldKeysSuggestion).toHaveBeenLastCalledWith(
+			expect.objectContaining({ fieldContext: 'resource' }),
+			undefined,
+			expect.anything(),
+		);
+	});
+
+	it('fetches keys from every context when the aggregate attribute has no type', () => {
+		renderWithContext();
+
+		expect(useFieldKeysSuggestion).toHaveBeenLastCalledWith(
+			expect.objectContaining({ fieldContext: undefined }),
+			undefined,
+			expect.anything(),
+		);
+	});
+});

frontend/src/container/TracesExplorer/ListView/ListView.module.scss

@@ -6,3 +6,7 @@
 	height: calc(100vh - 240px);
 	min-height: 400px;
 }
+
+.drawerScope {
+	display: contents;
+}

frontend/src/container/TracesExplorer/ListView/__tests__/SpanDrawerNavigation.test.tsx

@@ -0,0 +1,113 @@
+import remove from 'api/browser/localstorage/remove';
+import set from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { server } from 'mocks-server/server';
+import { screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { mockSuccess, mockTraceSummary, renderListView } from './testUtils';
+
+// globalTime starts with loading:true, which gates the list query. Force just that
+// slice's loading to false so the query fires; every other selector is untouched.
+jest.mock('react-redux', () => {
+	const actual = jest.requireActual('react-redux');
+	return {
+		...actual,
+		useSelector: (selector: (state: unknown) => unknown): unknown => {
+			const result = actual.useSelector(selector);
+			if (result && typeof result === 'object' && 'loading' in result) {
+				return { ...result, loading: false };
+			}
+			return result;
+		},
+	};
+});
+
+// List columns come from the options menu (server-synced preferences). Pin them
+// so the expected columns render, independent of that API.
+jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
+	__esModule: true,
+	default: (): unknown => ({
+		options: {
+			selectColumns: [
+				{ name: 'service.name', fieldContext: 'resource' },
+				{ name: 'name', fieldContext: 'span' },
+				{ name: 'duration_nano', fieldContext: 'span' },
+				{ name: 'http_method', fieldContext: 'span' },
+				{ name: 'response_status_code', fieldContext: 'span' },
+				{ name: 'http.route', fieldContext: 'attribute' },
+				{ name: 'cache.hit', fieldContext: 'attribute' },
+			],
+		},
+		config: { addColumn: { onRemove: jest.fn() } },
+	}),
+}));
+
+describe('Traces ListView - span drawer navigation', () => {
+	beforeEach(() => {
+		set(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED, 'true');
+		mockSuccess();
+		mockTraceSummary({});
+	});
+
+	afterEach(() => {
+		remove(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED);
+		server.resetHandlers();
+	});
+
+	it('opens the clicked span and steps through rows with the arrow keys', async () => {
+		const user = userEvent.setup();
+		renderListView();
+
+		await user.click(await screen.findByText('HTTP GET'));
+
+		const drawer = await screen.findByTestId('span-details-drawer');
+		expect(within(drawer).getByText('HTTP GET')).toBeInTheDocument();
+		expect(within(drawer).getByTestId('span-details-trace-id')).toHaveTextContent(
+			'0000000000000000344ded1387b08a7e',
+		);
+
+		await user.keyboard('{ArrowDown}');
+		await expect(
+			within(drawer).findByText('authenticate_check_db'),
+		).resolves.toBeInTheDocument();
+
+		await user.keyboard('{ArrowUp}');
+		await expect(
+			within(drawer).findByText('HTTP GET'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('closes the drawer', async () => {
+		const user = userEvent.setup();
+		renderListView();
+
+		await user.click(await screen.findByText('HTTP GET'));
+		await screen.findByTestId('span-details-drawer');
+
+		await user.click(screen.getByTestId('span-drawer-close'));
+
+		await waitFor(() =>
+			expect(screen.queryByTestId('span-details-drawer')).not.toBeInTheDocument(),
+		);
+	});
+
+	it('stays open on a press in the drawer or the list, and closes on one outside', async () => {
+		const user = userEvent.setup();
+		renderListView();
+
+		await user.click(await screen.findByText('HTTP GET'));
+		const drawer = await screen.findByTestId('span-details-drawer');
+
+		await user.click(drawer);
+		// Hovering re-renders the row, so the press needs a fresh query.
+		await user.hover(screen.getByText('authenticate_check_db'));
+		await user.click(screen.getByText('authenticate_check_db'));
+		await expect(
+			within(drawer).findByText('authenticate_check_db'),
+		).resolves.toBeInTheDocument();
+
+		await user.click(document.body);
+		await waitFor(() =>
+			expect(screen.queryByTestId('span-details-drawer')).not.toBeInTheDocument(),
+		);
+	});
+});

frontend/src/container/TracesExplorer/ListView/__tests__/SpanDrawerTraceBounds.test.tsx

@@ -0,0 +1,192 @@
+import remove from 'api/browser/localstorage/remove';
+import set from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
+import {
+	FIVE_MINUTES_IN_MS,
+	listResponse,
+	listRows,
+	mockSuccess,
+	mockTraceSummary,
+	QUERY_RANGE_URL,
+	renderListView,
+	TraceBounds,
+} from './testUtils';
+
+// globalTime starts with loading:true, which gates the list query. Force just that
+// slice's loading to false so the query fires; every other selector is untouched.
+jest.mock('react-redux', () => {
+	const actual = jest.requireActual('react-redux');
+	return {
+		...actual,
+		useSelector: (selector: (state: unknown) => unknown): unknown => {
+			const result = actual.useSelector(selector);
+			if (result && typeof result === 'object' && 'loading' in result) {
+				return { ...result, loading: false };
+			}
+			return result;
+		},
+	};
+});
+
+// List columns come from the options menu (server-synced preferences). Pin them
+// so the expected columns render, independent of that API.
+jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
+	__esModule: true,
+	default: (): unknown => ({
+		options: {
+			selectColumns: [
+				{ name: 'service.name', fieldContext: 'resource' },
+				{ name: 'name', fieldContext: 'span' },
+				{ name: 'duration_nano', fieldContext: 'span' },
+				{ name: 'http_method', fieldContext: 'span' },
+				{ name: 'response_status_code', fieldContext: 'span' },
+				{ name: 'http.route', fieldContext: 'attribute' },
+				{ name: 'cache.hit', fieldContext: 'attribute' },
+			],
+		},
+		config: { addColumn: { onRemove: jest.fn() } },
+	}),
+}));
+
+describe('Traces ListView - span drawer trace bounds', () => {
+	beforeEach(() => {
+		set(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED, 'true');
+		mockSuccess();
+		mockTraceSummary({});
+	});
+
+	afterEach(() => {
+		remove(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED);
+		server.resetHandlers();
+	});
+
+	it('requests span logs over whole milliseconds', async () => {
+		const logsRequests: QueryRangeRequestV5[] = [];
+		server.use(
+			rest.post(QUERY_RANGE_URL, async (req, res, ctx) => {
+				const body = await req.json<QueryRangeRequestV5>();
+				const spec = body.compositeQuery.queries[0]?.spec;
+				if (spec && 'signal' in spec && spec.signal === 'logs') {
+					logsRequests.push(body);
+					// No logs, so no context queries follow to outlive the test.
+					return res(ctx.status(200), ctx.json(listResponse([])));
+				}
+				return res(ctx.status(200), ctx.json(listResponse(listRows)));
+			}),
+		);
+		const user = userEvent.setup();
+		renderListView();
+
+		// Its 790.94939 ms duration makes the span window end mid-millisecond.
+		await user.click(await screen.findByText('authenticate_check_db'));
+
+		await waitFor(() => expect(logsRequests.length).toBeGreaterThan(0));
+		logsRequests.forEach(({ start, end }) => {
+			expect(Number.isInteger(start)).toBe(true);
+			expect(Number.isInteger(end)).toBe(true);
+		});
+	});
+
+	it('reads the trace bounds from the trace summary', async () => {
+		const bounds: TraceBounds = {
+			'0000000000000000344ded1387b08a7e': {
+				start: Date.parse('2024-07-19T08:39:58.700Z'),
+				end: Date.parse('2024-07-19T08:39:58.900Z'),
+			},
+			a364a8e15af3e9a8c866e0528db8b637: {
+				start: Date.parse('2024-07-19T08:39:59.900Z'),
+				end: Date.parse('2024-07-19T08:40:01.000Z'),
+			},
+		};
+		mockTraceSummary(bounds);
+		const logsRequests: {
+			traceId: string;
+			isTraceWide: boolean;
+			start: number;
+			end: number;
+		}[] = [];
+		server.use(
+			rest.post(QUERY_RANGE_URL, async (req, res, ctx) => {
+				const body = await req.json<QueryRangeRequestV5>();
+				const spec = body.compositeQuery.queries[0]?.spec;
+				if (spec && 'signal' in spec && spec.signal === 'logs') {
+					const traceId =
+						Object.keys(bounds).find((id) => spec.filter?.expression?.includes(id)) ??
+						'';
+					// The payload carries the window in µs.
+					logsRequests.push({
+						traceId,
+						isTraceWide: !spec.filter?.expression?.includes('span_id'),
+						start: body.start / 1e3,
+						end: body.end / 1e3,
+					});
+					return res(ctx.status(200), ctx.json(listResponse([])));
+				}
+				return res(ctx.status(200), ctx.json(listResponse(listRows)));
+			}),
+		);
+		const user = userEvent.setup();
+		renderListView();
+
+		await user.click(await screen.findByText('HTTP GET'));
+		const drawer = await screen.findByTestId('span-details-drawer');
+		await expect(
+			within(drawer).findByText(/of total exec time/),
+		).resolves.toBeInTheDocument();
+
+		// The next span is in another trace, so it needs that trace's bounds.
+		// Both its span logs and its trace-wide check must land before the test ends.
+		await user.keyboard('{ArrowDown}');
+		await waitFor(() =>
+			expect(
+				logsRequests
+					.filter(({ traceId }) => traceId === 'a364a8e15af3e9a8c866e0528db8b637')
+					.map(({ isTraceWide }) => isTraceWide),
+			).toStrictEqual(expect.arrayContaining([false, true])),
+		);
+
+		// Logs wait for the bounds: no request ever goes out with another window.
+		logsRequests.forEach(({ traceId, start, end }) => {
+			expect(start).toBe(bounds[traceId].start - FIVE_MINUTES_IN_MS);
+			expect(end).toBe(bounds[traceId].end + FIVE_MINUTES_IN_MS);
+		});
+	});
+
+	it('speaks only for the span when the trace has no summary', async () => {
+		const logsFilters: string[] = [];
+		server.use(
+			rest.post(QUERY_RANGE_URL, async (req, res, ctx) => {
+				const body = await req.json<QueryRangeRequestV5>();
+				const spec = body.compositeQuery.queries[0]?.spec;
+				if (spec && 'signal' in spec && spec.signal === 'logs') {
+					logsFilters.push(spec.filter?.expression ?? '');
+					return res(ctx.status(200), ctx.json(listResponse([])));
+				}
+				return res(ctx.status(200), ctx.json(listResponse(listRows)));
+			}),
+		);
+		const user = userEvent.setup();
+		renderListView();
+
+		await user.click(await screen.findByText('HTTP GET'));
+		const drawer = await screen.findByTestId('span-details-drawer');
+
+		await user.click(within(drawer).getByRole('tab', { name: /logs/i }));
+		await expect(
+			within(drawer).findByText('No logs found for this span.'),
+		).resolves.toBeInTheDocument();
+		// Checked once the 404 has settled; before it, exec time is absent anyway.
+		expect(
+			within(drawer).queryByText(/of total exec time/),
+		).not.toBeInTheDocument();
+		// No trace-wide check: every logs request is scoped to the span.
+		expect(logsFilters.length).toBeGreaterThan(0);
+		logsFilters.forEach((expression) => {
+			expect(expression).toContain('span_id');
+		});
+	});
+});

frontend/src/container/TracesExplorer/ListView/__tests__/testUtils.tsx

@@ -0,0 +1,110 @@
+import { ENVIRONMENT } from 'constants/env';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import ListView from '../index';
+
+const BASE_URL = ENVIRONMENT.baseURL;
+export const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
+
+export const listRows = [
+	{
+		timestamp: '2024-07-19T08:39:58.735245Z',
+		data: {
+			name: 'HTTP GET',
+			duration_nano: 55306000,
+			http_method: 'GET',
+			response_status_code: '200',
+			span_id: '772c4d29dd9076ac',
+			trace_id: '0000000000000000344ded1387b08a7e',
+			attributes: { 'http.route': '/api/cart', 'cache.hit': false },
+			resource: { 'service.name': 'frontend' },
+		},
+	},
+	{
+		timestamp: '2024-07-19T08:39:59.949129915Z',
+		data: {
+			name: 'authenticate_check_db',
+			duration_nano: 790949390,
+			// empty status fields to assert the "-" cell
+			http_method: '',
+			response_status_code: '',
+			span_id: '5704353737b6778e',
+			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
+			attributes: {},
+			resource: { 'service.name': 'demo-app' },
+		},
+	},
+];
+
+export const listResponse = (rows: unknown[]): Record<string, unknown> => ({
+	data: { type: 'raw', data: { results: [{ queryName: 'A', rows }] } },
+});
+
+export const TRACE_SUMMARY_URL = `${BASE_URL}/api/v1/traces/:traceId/summary`;
+export const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
+
+export type TraceBounds = Record<string, { start: number; end: number }>;
+
+// Traces missing from `bounds` get a 404, like a trace with no summary row.
+export const mockTraceSummary = (bounds: TraceBounds): void => {
+	server.use(
+		rest.get(TRACE_SUMMARY_URL, (req, res, ctx) => {
+			const traceBounds = bounds[req.params.traceId as string];
+			if (!traceBounds) {
+				return res(ctx.status(404), ctx.json({ status: 'error' }));
+			}
+			return res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						startTimestampMillis: traceBounds.start,
+						endTimestampMillis: traceBounds.end,
+						hasMissingSpans: false,
+						rootServiceEntryPoint: '',
+						rootServiceName: '',
+						rootSpanStatusCode: '',
+						totalErrorSpansCount: 0,
+						totalSpansCount: 1,
+					},
+				}),
+			);
+		}),
+	);
+};
+
+export const mockSuccess = (rows: unknown[] = listRows): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(listResponse(rows))),
+		),
+	);
+};
+
+export const renderListView = (
+	stagedQuery: Query = initialQueriesMap.traces,
+): ReturnType<typeof render> =>
+	render(
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
+			<ListView
+				isFilterApplied={false}
+				setWarning={jest.fn()}
+				setIsLoadingQueries={jest.fn()}
+			/>
+		</VirtuosoMockContext.Provider>,
+		{},
+		{
+			initialRoute: '/traces-explorer',
+			queryBuilderOverrides: {
+				panelType: PANEL_TYPES.LIST,
+				stagedQuery,
+				currentQuery: stagedQuery,
+				redirectWithQueryBuilderData: jest.fn(),
+			} as any,
+		},
+	);

frontend/src/container/TracesExplorer/ListView/index.data.test.tsx

@@ -1,17 +1,20 @@
-import { ENVIRONMENT } from 'constants/env';
 import {
 	initialQueriesMap,
 	initialQueryBuilderFormTraceOperatorValues,
-	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, screen } from 'tests/test-utils';
+import { screen } from 'tests/test-utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
 
-import ListView from './index';
+import {
+	listResponse,
+	listRows,
+	mockSuccess,
+	QUERY_RANGE_URL,
+	renderListView,
+} from './__tests__/testUtils';
 
 // globalTime starts with loading:true, which gates the list query. Force just that
 // slice's loading to false so the query fires; every other selector is untouched.
@@ -49,74 +52,6 @@ jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
 	}),
 }));
 
-const BASE_URL = ENVIRONMENT.baseURL;
-const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
-
-const listRows = [
-	{
-		timestamp: '2024-07-19T08:39:58.735245Z',
-		data: {
-			name: 'HTTP GET',
-			duration_nano: 55306000,
-			http_method: 'GET',
-			response_status_code: '200',
-			span_id: '772c4d29dd9076ac',
-			trace_id: '0000000000000000344ded1387b08a7e',
-			attributes: { 'http.route': '/api/cart', 'cache.hit': false },
-			resource: { 'service.name': 'frontend' },
-		},
-	},
-	{
-		timestamp: '2024-07-19T08:39:59.949129915Z',
-		data: {
-			name: 'authenticate_check_db',
-			duration_nano: 790949390,
-			// empty status fields to assert the "-" cell
-			http_method: '',
-			response_status_code: '',
-			span_id: '5704353737b6778e',
-			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
-			attributes: {},
-			resource: { 'service.name': 'demo-app' },
-		},
-	},
-];
-
-const listResponse = (rows: unknown[]): Record<string, unknown> => ({
-	data: { type: 'raw', data: { results: [{ queryName: 'A', rows }] } },
-});
-
-const mockSuccess = (rows: unknown[] = listRows): void => {
-	server.use(
-		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(listResponse(rows))),
-		),
-	);
-};
-
-const renderListView = (
-	stagedQuery: Query = initialQueriesMap.traces,
-): ReturnType<typeof render> =>
-	render(
-		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
-			<ListView
-				isFilterApplied={false}
-				setWarning={jest.fn()}
-				setIsLoadingQueries={jest.fn()}
-			/>
-		</VirtuosoMockContext.Provider>,
-		{},
-		{
-			initialRoute: '/traces-explorer',
-			queryBuilderOverrides: {
-				panelType: PANEL_TYPES.LIST,
-				stagedQuery,
-				currentQuery: stagedQuery,
-				redirectWithQueryBuilderData: jest.fn(),
-			} as any,
-		},
-	);
-
 describe('Traces ListView - Data Loaded', () => {
 	afterEach(() => {
 		server.resetHandlers();

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -29,6 +29,8 @@ import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
+import SpanDrawer from 'container/TracesExplorer/SpanDrawer/SpanDrawer';
+import { useSpanDrawer } from 'container/TracesExplorer/SpanDrawer/useSpanDrawer';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
@@ -202,6 +204,8 @@ function ListView({
 		[queryTableData],
 	);
 
+	const { tableProps, drawerProps, onPressInside } = useSpanDrawer(rows);
+
 	const handleColumnOrderChange = useCallback(
 		(cols: TableColumnDef<TracesTableRow>[]): void => {
 			config?.addColumn?.onReorder(cols.map((c) => c.id));
@@ -253,20 +257,26 @@ function ListView({
 				/>
 			</div>
 
-			<TracesTable
-				data={rows}
-				columns={columns}
-				columnStorageKey={LOCALSTORAGE.TRACES_LIST_COLUMNS}
-				panelType="LIST"
-				getRowHref={getTraceLink}
-				isLoading={isLoading}
-				isFetching={isFetching}
-				isError={isError}
-				error={error}
-				isFilterApplied={isFilterApplied}
-				onColumnOrderChange={handleColumnOrderChange}
-				onColumnRemove={config?.addColumn?.onRemove}
-			/>
+			{/* A press in the table or the drawer (a portal) keeps the drawer open. */}
+			<div className={styles.drawerScope} onPointerDownCapture={onPressInside}>
+				<TracesTable
+					data={rows}
+					columns={columns}
+					columnStorageKey={LOCALSTORAGE.TRACES_LIST_COLUMNS}
+					panelType="LIST"
+					getRowHref={getTraceLink}
+					{...tableProps}
+					isLoading={isLoading}
+					isFetching={isFetching}
+					isError={isError}
+					error={error}
+					isFilterApplied={isFilterApplied}
+					onColumnOrderChange={handleColumnOrderChange}
+					onColumnRemove={config?.addColumn?.onRemove}
+				/>
+
+				{drawerProps && <SpanDrawer {...drawerProps} />}
+			</div>
 		</div>
 	);
 }

frontend/src/container/TracesExplorer/SpanDrawer/SpanDrawer.tsx

@@ -0,0 +1,112 @@
+import { useMemo } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { ButtonGroup } from '@signozhq/ui/button-group';
+import { ChevronDown, ChevronUp, CornerUpRight } from '@signozhq/icons';
+import { useGetTraceSummary } from 'api/generated/services/tracedetail';
+import { HeaderAction } from 'components/DetailsPanel';
+import type { UseRowNavigationResult } from 'components/TanStackTableView/useRowNavigation';
+import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { SpanDetailVariant } from 'pages/TraceDetailsV3/SpanDetailsPanel/constants';
+import SpanDetailsPanel from 'pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel';
+import { openInNewTab } from 'utils/navigation';
+
+import { useArrowKeyNavigation } from './useArrowKeyNavigation';
+import { toSpanV3 } from './utils';
+
+export type SpanDrawerProps = {
+	row: TracesTableRow | null;
+	onClose: () => void;
+	navigation: UseRowNavigationResult;
+};
+
+function SpanDrawer({
+	row,
+	onClose,
+	navigation,
+}: SpanDrawerProps): JSX.Element {
+	const { goToPrev, goToNext, isPrevDisabled, isNextDisabled } = navigation;
+	const isOpen = row !== null;
+
+	useArrowKeyNavigation({ enabled: isOpen, onPrev: goToPrev, onNext: goToNext });
+
+	const panelState = useMemo(
+		() => ({ isOpen, open: (): void => {}, close: onClose }),
+		[isOpen, onClose],
+	);
+
+	const headerActions = useMemo((): HeaderAction[] => {
+		if (!row) {
+			return [];
+		}
+		return [
+			{
+				key: 'view-full-trace',
+				component: (
+					<Button
+						variant="outlined"
+						color="secondary"
+						size="md"
+						prefix={<CornerUpRight />}
+						onClick={(): void => openInNewTab(getTraceLink(row))}
+						testId="span-drawer-view-full-trace"
+					>
+						View full trace
+					</Button>
+				),
+			},
+			{
+				key: 'nav',
+				component: (
+					<ButtonGroup
+						variant="outlined"
+						color="secondary"
+						size="md"
+						testId="span-drawer-nav"
+						items={[
+							{
+								value: 'prev',
+								icon: <ChevronUp />,
+								ariaLabel: 'Previous span',
+								onClick: goToPrev,
+								disabled: isPrevDisabled,
+								disabledTooltip: 'No previous span on this page',
+							},
+							{
+								value: 'next',
+								icon: <ChevronDown />,
+								ariaLabel: 'Next span',
+								onClick: goToNext,
+								disabled: isNextDisabled,
+								disabledTooltip: 'No next span on this page',
+							},
+						]}
+					/>
+				),
+			},
+		];
+	}, [row, goToPrev, goToNext, isPrevDisabled, isNextDisabled]);
+
+	const span = useMemo(() => (row ? toSpanV3(row) : undefined), [row]);
+
+	const traceId = span?.trace_id ?? '';
+	const { data: traceSummary, isLoading: isTraceBoundsLoading } =
+		useGetTraceSummary(
+			{ traceID: traceId },
+			{ query: { enabled: !!traceId, retry: false } },
+		);
+
+	return (
+		<SpanDetailsPanel
+			panelState={panelState}
+			selectedSpan={span}
+			variant={SpanDetailVariant.DRAWER}
+			headerActions={headerActions}
+			traceStartTime={traceSummary?.data?.startTimestampMillis}
+			traceEndTime={traceSummary?.data?.endTimestampMillis}
+			isTraceBoundsLoading={isTraceBoundsLoading}
+		/>
+	);
+}
+
+export default SpanDrawer;

frontend/src/container/TracesExplorer/SpanDrawer/__tests__/useArrowKeyNavigation.test.ts

@@ -0,0 +1,39 @@
+import { renderHook } from 'tests/test-utils';
+
+import { useArrowKeyNavigation } from '../useArrowKeyNavigation';
+
+const pressArrowDown = ({ handled }: { handled: boolean }): void => {
+	const event = new KeyboardEvent('keydown', {
+		key: 'ArrowDown',
+		bubbles: true,
+		cancelable: true,
+	});
+	if (handled) {
+		event.preventDefault();
+	}
+	document.body.dispatchEvent(event);
+};
+
+describe('useArrowKeyNavigation', () => {
+	it('steps to the next span on ArrowDown', () => {
+		const onNext = jest.fn() as jest.MockedFunction<() => void>;
+		renderHook(() =>
+			useArrowKeyNavigation({ enabled: true, onPrev: jest.fn(), onNext }),
+		);
+
+		pressArrowDown({ handled: false });
+
+		expect(onNext).toHaveBeenCalledTimes(1);
+	});
+
+	it('ignores a key that a focused menu already handled', () => {
+		const onNext = jest.fn() as jest.MockedFunction<() => void>;
+		renderHook(() =>
+			useArrowKeyNavigation({ enabled: true, onPrev: jest.fn(), onNext }),
+		);
+
+		pressArrowDown({ handled: true });
+
+		expect(onNext).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/TracesExplorer/SpanDrawer/__tests__/useSpanDrawer.test.ts

@@ -0,0 +1,35 @@
+import { act, renderHook } from 'tests/test-utils';
+import remove from 'api/browser/localstorage/remove';
+import set from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
+
+import { useSpanDrawer } from '../useSpanDrawer';
+
+const rows: TracesTableRow[] = [{ id: 'span-a' }, { id: 'span-b' }];
+
+describe('useSpanDrawer', () => {
+	beforeEach(() => {
+		set(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED, 'true');
+	});
+
+	afterEach(() => {
+		remove(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED);
+	});
+
+	it('does not reopen a span that a refetch dropped and a later one brings back', () => {
+		const { result, rerender } = renderHook(
+			({ current }: { current: TracesTableRow[] }) => useSpanDrawer(current),
+			{ initialProps: { current: rows } },
+		);
+
+		act(() => result.current.tableProps.onRowClick?.(rows[1]));
+		expect(result.current.drawerProps?.row).toBe(rows[1]);
+
+		rerender({ current: [rows[0]] });
+		expect(result.current.drawerProps?.row).toBeNull();
+
+		rerender({ current: rows });
+		expect(result.current.drawerProps?.row).toBeNull();
+	});
+});

frontend/src/container/TracesExplorer/SpanDrawer/__tests__/utils.test.ts

@@ -0,0 +1,74 @@
+import { toSpanV3 } from '../utils';
+
+describe('toSpanV3', () => {
+	const row = {
+		id: '772c4d29dd9076ac',
+		span_id: '772c4d29dd9076ac',
+		timestamp: '2024-07-19T08:39:58.735Z',
+		resource: { 'service.name': 'frontend' },
+		events: [
+			{
+				name: 'exception',
+				timeUnixNano: 1721378398735000000,
+				attributes: { 'exception.type': 'Error' },
+			},
+		],
+		links: [{ traceId: 'a364a8e15af3e9a8', spanId: '5704353737b6778e' }],
+	};
+
+	it('reshapes a list row into the span the details panel reads', () => {
+		const span = toSpanV3(row);
+
+		expect(span.timestamp).toBe(Date.UTC(2024, 6, 19, 8, 39, 58, 735));
+		expect(span['service.name']).toBe('frontend');
+		expect(span.events).toStrictEqual([
+			{
+				name: 'exception',
+				timeUnixNano: 1721378398735000000,
+				attributeMap: { 'exception.type': 'Error' },
+				isError: false,
+			},
+		]);
+		expect((span as unknown as { references: unknown }).references).toStrictEqual(
+			row.links,
+		);
+	});
+
+	it('drops the parent from the linked spans', () => {
+		const link = { traceId: 'a364a8e15af3e9a8', spanId: '5704353737b6778e' };
+		const parent = { traceId: '1f2e3d4c5b6a7980', spanId: '0aa1bb2cc3dd4ee5' };
+		const span = toSpanV3({
+			...row,
+			trace_id: parent.traceId,
+			parent_span_id: parent.spanId,
+			links: [parent, link, { ...parent, traceId: link.traceId }],
+		});
+
+		expect((span as unknown as { references: unknown }).references).toStrictEqual(
+			[link, { ...parent, traceId: link.traceId }],
+		);
+	});
+
+	it('drops the empty parent ref of a root span', () => {
+		const span = toSpanV3({
+			...row,
+			trace_id: 'a364a8e15af3e9a8',
+			parent_span_id: '',
+			links: [{ traceId: 'a364a8e15af3e9a8' }],
+		});
+
+		expect((span as unknown as { references: unknown }).references).toStrictEqual(
+			[],
+		);
+	});
+
+	it('defaults missing events, links and service name', () => {
+		const span = toSpanV3({ id: 'x', timestamp: row.timestamp });
+
+		expect(span.events).toStrictEqual([]);
+		expect(span['service.name']).toBe('');
+		expect((span as unknown as { references: unknown }).references).toStrictEqual(
+			[],
+		);
+	});
+});

frontend/src/container/TracesExplorer/SpanDrawer/useArrowKeyNavigation.ts

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+const EDITABLE_TARGET = 'input, textarea, [contenteditable="true"], .cm-editor';
+
+type UseArrowKeyNavigationParams = {
+	enabled: boolean;
+	onPrev: () => void;
+	onNext: () => void;
+};
+
+export function useArrowKeyNavigation({
+	enabled,
+	onPrev,
+	onNext,
+}: UseArrowKeyNavigationParams): void {
+	useEffect(() => {
+		if (!enabled) {
+			return undefined;
+		}
+
+		const handleKeyDown = (e: KeyboardEvent): void => {
+			// A focused menu or listbox already used the key.
+			if (e.defaultPrevented) {
+				return;
+			}
+			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+				return;
+			}
+			if (e.target instanceof Element && e.target.closest(EDITABLE_TARGET)) {
+				return;
+			}
+			if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				onPrev();
+			} else if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				onNext();
+			}
+		};
+
+		document.addEventListener('keydown', handleKeyDown);
+		return (): void => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [enabled, onPrev, onNext]);
+}

frontend/src/container/TracesExplorer/SpanDrawer/useSpanDrawer.ts

@@ -0,0 +1,87 @@
+import { PointerEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { useRowNavigation } from 'components/TanStackTableView/useRowNavigation';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import type { TracesTableProps } from 'container/TracesExplorer/TracesTable/TracesTable';
+import { useCloseOnOutsidePress } from 'hooks/useCloseOnOutsidePress';
+
+import type { SpanDrawerProps } from './SpanDrawer';
+import { isSpanDrawerEnabled } from './utils';
+
+type ActiveSpan = { id: string; index: number };
+
+type UseSpanDrawerResult = {
+	tableProps: Pick<
+		TracesTableProps,
+		'onRowClick' | 'isRowActive' | 'activeRowIndex'
+	>;
+	/** Null while the drawer flag is off. */
+	drawerProps: SpanDrawerProps | null;
+	/** `onPointerDownCapture` for the area a press keeps the drawer open in. */
+	onPressInside: (event: PointerEvent) => void;
+};
+
+export function useSpanDrawer(rows: TracesTableRow[]): UseSpanDrawerResult {
+	const [isEnabled] = useState(isSpanDrawerEnabled);
+	// The index lets navigation step past a duplicate span; the id survives a refetch.
+	const [activeSpan, setActiveSpan] = useState<ActiveSpan | null>(null);
+
+	const activeRowIndex = useMemo(() => {
+		if (!activeSpan) {
+			return -1;
+		}
+		return rows[activeSpan.index]?.id === activeSpan.id
+			? activeSpan.index
+			: rows.findIndex((row) => row.id === activeSpan.id);
+	}, [rows, activeSpan]);
+
+	const isRowActive = useCallback(
+		(row: TracesTableRow): boolean => row === rows[activeRowIndex],
+		[rows, activeRowIndex],
+	);
+
+	const handleNavigate = useCallback(
+		(row: TracesTableRow, index: number): void => {
+			setActiveSpan({ id: row.id, index });
+		},
+		[],
+	);
+
+	const selectRow = useCallback(
+		(row: TracesTableRow): void => handleNavigate(row, rows.indexOf(row)),
+		[handleNavigate, rows],
+	);
+
+	const clearActiveSpan = useCallback((): void => setActiveSpan(null), []);
+
+	// A refetch can drop the open span; forget it so a later page can't reopen it.
+	useEffect(() => {
+		if (activeSpan && activeRowIndex === -1) {
+			setActiveSpan(null);
+		}
+	}, [activeSpan, activeRowIndex]);
+
+	const onPressInside = useCloseOnOutsidePress(
+		isEnabled && activeRowIndex !== -1,
+		clearActiveSpan,
+	);
+
+	const navigation = useRowNavigation({
+		rows,
+		activeIndex: activeRowIndex,
+		onNavigate: handleNavigate,
+	});
+
+	if (!isEnabled) {
+		return { tableProps: {}, drawerProps: null, onPressInside };
+	}
+
+	return {
+		tableProps: { onRowClick: selectRow, isRowActive, activeRowIndex },
+		drawerProps: {
+			row: rows[activeRowIndex] ?? null,
+			onClose: clearActiveSpan,
+			navigation,
+		},
+		onPressInside,
+	};
+}

frontend/src/container/TracesExplorer/SpanDrawer/utils.ts

@@ -0,0 +1,46 @@
+import get from 'api/browser/localstorage/get';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+/** Off by default; set `TRACES_SPAN_DRAWER_ENABLED` to `true` in localStorage to try it. */
+export const isSpanDrawerEnabled = (): boolean =>
+	get(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED) === 'true';
+
+type ListSpanEvent = {
+	name: string;
+	timeUnixNano: number;
+	attributes?: Record<string, string>;
+	isError?: boolean;
+};
+
+type ListSpanLink = { traceId: string; spanId: string };
+
+/**
+ * The list API returns a span in a different shape from the trace API the
+ * details panel was built on: an ISO timestamp, `attributes` on events, and
+ * `links` in place of `references`.
+ */
+export const toSpanV3 = (row: TracesTableRow): SpanV3 => {
+	const resource = (row.resource ?? {}) as Record<string, string>;
+	const events = (row.events ?? []) as ListSpanEvent[];
+	const links = (row.links ?? []) as ListSpanLink[];
+
+	return {
+		...row,
+		timestamp: new Date(row.timestamp as string).getTime(),
+		'service.name': resource['service.name'] ?? '',
+		events: events.map(({ attributes, isError, ...event }) => ({
+			...event,
+			attributeMap: attributes ?? {},
+			isError: isError ?? false,
+		})),
+		// The list API drops `refType`, so the parent ref is matched by id. A root
+		// span's parent ref has no span id.
+		references: links.filter(
+			(link) =>
+				!!link.spanId &&
+				(link.spanId !== row.parent_span_id || link.traceId !== row.trace_id),
+		),
+	} as unknown as SpanV3;
+};

frontend/src/container/TracesExplorer/TracesTable/TracesTable.tsx

@@ -24,6 +24,10 @@ export type TracesTableProps = {
 	panelType: PanelTypeKeys;
 	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
 	getRowHref: (row: TracesTableRow) => string;
+	/** Replaces the default row click, which opens the trace detail page. */
+	onRowClick?: (row: TracesTableRow) => void;
+	isRowActive?: (row: TracesTableRow) => boolean;
+	activeRowIndex?: number;
 	isLoading: boolean;
 	isFetching: boolean;
 	isError: boolean;
@@ -41,6 +45,9 @@ function TracesTable({
 	respectColumnOrder = false,
 	panelType,
 	getRowHref,
+	onRowClick,
+	isRowActive,
+	activeRowIndex,
 	isLoading,
 	isFetching,
 	isError,
@@ -57,9 +64,13 @@ function TracesTable({
 
 	const handleRowClick = useCallback(
 		(row: TracesTableRow): void => {
+			if (onRowClick) {
+				onRowClick(row);
+				return;
+			}
 			navigate(getRowHref(row));
 		},
-		[navigate, getRowHref],
+		[onRowClick, navigate, getRowHref],
 	);
 
 	const handleRowClickNewTab = useCallback(
@@ -97,6 +108,8 @@ function TracesTable({
 						onColumnRemove={onColumnRemove}
 						onRowClick={handleRowClick}
 						onRowClickNewTab={handleRowClickNewTab}
+						isRowActive={isRowActive}
+						activeRowIndex={activeRowIndex}
 						getRowTestId={(row): string => `traces-table-row-${row.id}`}
 						testId={`traces-table-${panelType.toLowerCase()}`}
 					/>
@@ -109,6 +122,9 @@ function TracesTable({
 TracesTable.defaultProps = {
 	columnStorageKey: undefined,
 	respectColumnOrder: false,
+	onRowClick: undefined,
+	isRowActive: undefined,
+	activeRowIndex: undefined,
 	onColumnOrderChange: undefined,
 	onColumnRemove: undefined,
 	cellTypographySize: 'medium',

frontend/src/hooks/__tests__/useCloseOnOutsidePress.test.tsx

@@ -0,0 +1,107 @@
+import { createPortal } from 'react-dom';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import { useCloseOnOutsidePress } from '../useCloseOnOutsidePress';
+
+function Harness({
+	enabled = true,
+	onClose,
+}: {
+	enabled?: boolean;
+	onClose: () => void;
+}): JSX.Element {
+	const onPressInside = useCloseOnOutsidePress(enabled, onClose);
+	return (
+		<>
+			<div onPointerDownCapture={onPressInside}>
+				<button type="button" data-testid="inside">
+					inside
+				</button>
+				<button
+					type="button"
+					data-testid="inside-stops"
+					onPointerDown={(e): void => e.stopPropagation()}
+				>
+					inside, stops propagation
+				</button>
+				{createPortal(
+					<button type="button" data-testid="inside-portal">
+						portal
+					</button>,
+					document.body,
+				)}
+			</div>
+			<button type="button" data-testid="outside">
+				outside
+			</button>
+			<button
+				type="button"
+				data-testid="outside-stops"
+				onPointerDown={(e): void => e.stopPropagation()}
+			>
+				outside, stops propagation
+			</button>
+		</>
+	);
+}
+
+const flush = (): Promise<void> =>
+	new Promise((resolve) => {
+		setTimeout(resolve);
+	});
+
+describe('useCloseOnOutsidePress', () => {
+	it('closes on a press outside', async () => {
+		const onClose = jest.fn() as jest.MockedFunction<() => void>;
+		render(<Harness onClose={onClose} />);
+
+		await userEvent.click(screen.getByTestId('outside'));
+		await flush();
+
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it('stays open on a press inside, portals included', async () => {
+		const onClose = jest.fn() as jest.MockedFunction<() => void>;
+		render(<Harness onClose={onClose} />);
+
+		await userEvent.click(screen.getByTestId('inside'));
+		await userEvent.click(screen.getByTestId('inside-portal'));
+		await flush();
+
+		expect(onClose).not.toHaveBeenCalled();
+	});
+
+	it('closes when the outside element stops propagation', async () => {
+		const onClose = jest.fn() as jest.MockedFunction<() => void>;
+		render(<Harness onClose={onClose} />);
+
+		await userEvent.click(screen.getByTestId('outside-stops'));
+		await flush();
+
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it('closes on the first outside press after an inside press stops propagation', async () => {
+		const onClose = jest.fn() as jest.MockedFunction<() => void>;
+		render(<Harness onClose={onClose} />);
+
+		await userEvent.click(screen.getByTestId('inside-stops'));
+		await flush();
+		expect(onClose).not.toHaveBeenCalled();
+
+		await userEvent.click(screen.getByTestId('outside'));
+		await flush();
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it('does nothing while disabled', async () => {
+		const onClose = jest.fn() as jest.MockedFunction<() => void>;
+		render(<Harness enabled={false} onClose={onClose} />);
+
+		await userEvent.click(screen.getByTestId('outside'));
+		await flush();
+
+		expect(onClose).not.toHaveBeenCalled();
+	});
+});

frontend/src/hooks/useCloseOnOutsidePress.ts

@@ -0,0 +1,51 @@
+import {
+	PointerEvent as ReactPointerEvent,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
+
+/**
+ * Calls `onClose` on any press outside the elements given the returned handler as
+ * `onPointerDownCapture`. Menus and dialogs rendered in portals still count as
+ * inside: React events follow the component tree.
+ *
+ * The document listener runs in the capture phase, so an outside element that
+ * stops propagation still closes. It runs before React marks the press, so the
+ * check waits for the dispatch to finish.
+ */
+export function useCloseOnOutsidePress(
+	enabled: boolean,
+	onClose: () => void,
+): (event: ReactPointerEvent) => void {
+	const insidePress = useRef<Event | null>(null);
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+
+	useEffect(() => {
+		if (!enabled) {
+			return undefined;
+		}
+		const timeouts = new Set<ReturnType<typeof setTimeout>>();
+
+		const handlePointerDown = (event: PointerEvent): void => {
+			const timeout = setTimeout(() => {
+				timeouts.delete(timeout);
+				if (insidePress.current !== event) {
+					onCloseRef.current();
+				}
+			});
+			timeouts.add(timeout);
+		};
+
+		document.addEventListener('pointerdown', handlePointerDown, true);
+		return (): void => {
+			document.removeEventListener('pointerdown', handlePointerDown, true);
+			timeouts.forEach(clearTimeout);
+		};
+	}, [enabled]);
+
+	return useCallback((event: ReactPointerEvent): void => {
+		insidePress.current = event.nativeEvent;
+	}, []);
+}

frontend/src/pages/AllErrors/stories/AllErrors.stories.mocks.tsx

@@ -24,7 +24,6 @@ import { fieldValuesResponse } from '@/storybook/msw/__story_mockdata__/fields';
 import {
 	EXCEPTION_CATALOGUE_SIZE,
 	EXCEPTION_QUICK_FILTER_CAP,
-	exceptionAttributeKeysResponse,
 	exceptionAttributeValuesResponse,
 	exceptionFieldKeysResponse,
 	exceptionQuickFiltersResponse,
@@ -58,7 +57,7 @@ export const exceptionsMocks = defineStoryMocks({
 		filterKeys: choiceControl<ResponseState>('Filter keys', {
 			group: FILTERS,
 			description:
-				'How `/autocomplete/attribute_keys` answers when the resource filter opens, apart from the page-wide Data control.',
+				'How `/fields/keys` answers when the resource filter opens, apart from the page-wide Data control.',
 			options: RESPONSE_STATES,
 			value: 'loaded',
 		}),
@@ -95,7 +94,7 @@ export const exceptionsMocks = defineStoryMocks({
 
 		rest.get(
 			'http://localhost/api/v1/fields/keys',
-			response.json((req) =>
+			respondWith(values.filterKeys, (req) =>
 				exceptionFieldKeysResponse(req.url.searchParams.get('searchText')),
 			),
 		),
@@ -109,23 +108,6 @@ export const exceptionsMocks = defineStoryMocks({
 				),
 			),
 		),
-
-		rest.get(
-			'http://localhost/api/v3/autocomplete/attribute_keys',
-			respondWith(values.filterKeys, (req) =>
-				exceptionAttributeKeysResponse(req.url.searchParams.get('searchText')),
-			),
-		),
-
-		rest.get(
-			'http://localhost/api/v3/autocomplete/attribute_values',
-			response.json((req) =>
-				exceptionAttributeValuesResponse(
-					req.url.searchParams.get('attributeKey'),
-					req.url.searchParams.get('searchText'),
-				),
-			),
-		),
 	],
 	effect: (values) => {
 		set(LOCALSTORAGE.SHOW_EXCEPTIONS_QUICK_FILTERS, String(values.filterPanel));

frontend/src/pages/AllErrors/stories/__story_mockdata__/exceptions.ts

@@ -17,7 +17,6 @@ import type {
 import {
 	type BaseAutocompleteData,
 	DataTypes,
-	type IQueryAutocompleteResponse,
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import type { Exception, Order, OrderBy } from 'types/api/errors/getAll';
 import type { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
@@ -311,21 +310,6 @@ const ATTRIBUTE_KEYS: BaseAutocompleteData[] = [
 	{ key: 'cloud.region', dataType: DataTypes.String, type: 'resource' },
 ];
 
-export const exceptionAttributeKeysResponse = (
-	searchText: string | null,
-): { status: string; data: IQueryAutocompleteResponse } => {
-	const search = (searchText ?? '').toLowerCase();
-
-	return {
-		status: 'success',
-		data: {
-			attributeKeys: ATTRIBUTE_KEYS.filter(({ key }) =>
-				key.toLowerCase().includes(search),
-			),
-		},
-	};
-};
-
 /** The quick filter settings panel lists its "other filters" from `/fields/keys`. */
 export const exceptionFieldKeysResponse = (
 	searchText: string | null,

frontend/src/pages/MessagingQueues/CeleryTask/stories/CeleryTask.stories.mocks.tsx

@@ -9,6 +9,7 @@ import type { QueryRangePayload } from 'types/api/metrics/getQueryRange';
 
 import { choiceControl, countControl } from '@/storybook/controls/controls';
 import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+import { fieldValuesResponse } from '@/storybook/msw/__story_mockdata__/fields';
 
 import {
 	attributeValuesResponse,
@@ -77,28 +78,18 @@ export const celeryTaskMocks = defineStoryMocks({
 			rest.post('http://localhost/api/v4/query_range', queryRange),
 
 			rest.get(
-				'http://localhost/api/v3/autocomplete/attribute_values',
+				'http://localhost/api/v1/fields/values',
 				response.json((req) => {
-					const attributeKey = req.url.searchParams.get('attributeKey') ?? '';
-					const values_ = attributeValuesResponse(
-						attributeKey,
-						req.url.searchParams.get('searchText') ?? '',
+					const name = req.url.searchParams.get('name') ?? '';
+					const found =
+						attributeValuesResponse(
+							name,
+							req.url.searchParams.get('searchText') ?? '',
+						).data.stringAttributeValues ?? [];
+
+					return fieldValuesResponse(
+						name === 'worker' ? found.slice(0, values.workers) : found,
 					);
-
-					if (attributeKey !== 'worker') {
-						return values_;
-					}
-
-					return {
-						...values_,
-						data: {
-							...values_.data,
-							stringAttributeValues: (values_.data.stringAttributeValues ?? []).slice(
-								0,
-								values.workers,
-							),
-						},
-					};
 				}),
 			),
 		];

frontend/src/pages/MessagingQueues/Overview/stories/Overview.stories.mocks.tsx

@@ -13,6 +13,7 @@ import {
 	toggleControl,
 } from '@/storybook/controls/controls';
 import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+import { fieldValuesResponse } from '@/storybook/msw/__story_mockdata__/fields';
 
 import {
 	attributeValuesResponse,
@@ -91,11 +92,13 @@ export const queueOverviewMocks = defineStoryMocks({
 			rest.post('http://localhost/api/v4/query_range', queryRange),
 
 			rest.get(
-				'http://localhost/api/v3/autocomplete/attribute_values',
+				'http://localhost/api/v1/fields/values',
 				response.json((req) =>
-					attributeValuesResponse(
-						req.url.searchParams.get('attributeKey') ?? '',
-						req.url.searchParams.get('searchText') ?? '',
+					fieldValuesResponse(
+						attributeValuesResponse(
+							req.url.searchParams.get('name') ?? '',
+							req.url.searchParams.get('searchText') ?? '',
+						).data.stringAttributeValues ?? [],
 					),
 				),
 			),

frontend/src/pages/MessagingQueues/stories/__story_mockdata__/messagingQueues.ts

@@ -82,15 +82,15 @@ const CELERY_TASKS = [
 const CELERY_WORKERS = ['worker-a', 'worker-b', 'worker-c'];
 
 /**
- * Values per autocomplete attribute key. The kafka config selects and both
- * celery filter rows read the same v3 endpoint, so one map answers for all of
+ * Values per attribute key. The kafka config selects read the v3 endpoint and
+ * the celery filter rows read `/fields/values`, so one map answers for all of
  * them; a key nobody seeded answers empty rather than 501.
  */
 const ATTRIBUTE_VALUES: Record<string, string[]> = {
 	group: CONSUMER_GROUPS,
 	topic: TOPICS,
 	partition: PARTITIONS,
-	serviceName: KAFKA_SERVICES,
+	'service.name': KAFKA_SERVICES,
 	name: [
 		'order-events send',
 		'order-events process',

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/Events/Events.tsx

@@ -13,7 +13,8 @@ import styles from './Events.module.scss';
 
 interface IEventsTableProps {
 	span: SpanV3;
-	startTime: number;
+	/** Trace start; the "since trace start" offset is hidden without it. */
+	startTime?: number;
 	isSearchVisible: boolean;
 }
 
@@ -80,17 +81,19 @@ function EventsTable(props: IEventsTableProps): JSX.Element {
 														<Typography.Text className={styles.attributeKey}>
 															Start Time
 														</Typography.Text>
-														<div className={styles.timestampContainer}>
-															<Typography.Text className={styles.attributeValue}>
-																{getYAxisFormattedValue(
-																	`${(timeUnixNano || 0) / 1e6 - startTime}`,
-																	'ms',
-																)}
-															</Typography.Text>
-															<Typography.Text className={styles.timestampText}>
-																since trace start
-															</Typography.Text>
-														</div>
+														{startTime !== undefined && (
+															<div className={styles.timestampContainer}>
+																<Typography.Text className={styles.attributeValue}>
+																	{getYAxisFormattedValue(
+																		`${(timeUnixNano || 0) / 1e6 - startTime}`,
+																		'ms',
+																	)}
+																</Typography.Text>
+																<Typography.Text className={styles.timestampText}>
+																	since trace start
+																</Typography.Text>
+															</div>
+														)}
 														<div className={styles.timestampContainer}>
 															<Typography.Text className={styles.attributeValue}>
 																{getYAxisFormattedValue(

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/Events/__tests__/Events.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from 'tests/test-utils';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import Events from '../Events';
+
+const SPAN_START_MS = 1_700_000_000_000;
+
+const span = {
+	span_id: 'span-1',
+	trace_id: 'trace-1',
+	name: 'checkout',
+	timestamp: SPAN_START_MS,
+	duration_nano: 50_000_000,
+	events: [
+		{
+			name: 'cache miss',
+			timeUnixNano: (SPAN_START_MS + 3) * 1e6,
+			attributeMap: {},
+			isError: false,
+		},
+	],
+} as unknown as SpanV3;
+
+describe('Events', () => {
+	it('shows the offset from the trace start when it is known', () => {
+		render(<Events span={span} startTime={SPAN_START_MS - 10} isSearchVisible />);
+
+		expect(screen.getByText('since trace start')).toBeInTheDocument();
+		expect(screen.getByText('since span start')).toBeInTheDocument();
+	});
+
+	it('shows only the offset from the span start without a trace start', () => {
+		render(<Events span={span} isSearchVisible />);
+
+		expect(screen.queryByText('since trace start')).not.toBeInTheDocument();
+		expect(screen.getByText('since span start')).toBeInTheDocument();
+	});
+});

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

@@ -110,3 +110,15 @@
 		scrollbar-width: none;
 	}
 }
+
+.drawerPanel {
+	.panelBody,
+	.logsFooter,
+	:global(.pretty-view__search-wrapper) {
+		background: var(--l2-background);
+	}
+
+	:global(.pretty-view__search-input) {
+		background: var(--l2-background) !important;
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -3,6 +3,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Tabs, type TabsItemProps } from '@signozhq/ui/tabs';
 import { Bookmark, ChartColumnBig, List, ScrollText } from '@signozhq/icons';
 import { Skeleton } from 'antd';
+import cx from 'classnames';
 import { DetailsHeader, DetailsPanelDrawer } from 'components/DetailsPanel';
 import { HeaderAction } from 'components/DetailsPanel/DetailsHeader/DetailsHeader';
 import { DetailsPanelState } from 'components/DetailsPanel/types';
@@ -49,6 +50,7 @@ import OpenInLogsExplorer from './SpanLogs/OpenInLogsExplorer';
 import SpanLogs from './SpanLogs/SpanLogs';
 import { useSpanContextLogs } from './SpanLogs/useSpanContextLogs';
 import SpanAIMessages from './SpanAIMessages/SpanAIMessages';
+import SpanDrawerHeader from './SpanDrawerHeader';
 import SpanSummary from './SpanSummary';
 
 import styles from './SpanDetailsPanel.module.scss';
@@ -58,8 +60,12 @@ interface SpanDetailsPanelProps {
 	selectedSpan: SpanV3 | undefined;
 	variant?: SpanDetailVariant;
 	onVariantChange?: (variant: SpanDetailVariant) => void;
+	/** Page-specific actions, shown before the dock mode switcher. */
+	headerActions?: HeaderAction[];
 	traceStartTime?: number;
 	traceEndTime?: number;
+	/** The trace bounds are still being fetched; logs wait for them. */
+	isTraceBoundsLoading?: boolean;
 }
 
 // At/above this panel width the summary moves inside the Overview tab (bottom
@@ -73,10 +79,12 @@ function SpanDetailsContent({
 	selectedSpan,
 	traceStartTime,
 	traceEndTime,
+	isTraceBoundsLoading = false,
 }: {
 	selectedSpan: SpanV3;
 	traceStartTime?: number;
 	traceEndTime?: number;
+	isTraceBoundsLoading?: boolean;
 }): JSX.Element {
 	const [bodyRef, { width: bodyWidth }] = useMeasure<HTMLDivElement>();
 	const spanAttributeActions = useSpanAttributeActions();
@@ -168,6 +176,31 @@ function SpanDetailsContent({
 	// 	[spanAttributeActions, setCopy],
 	// );
 
+	// Without trace bounds the panel speaks only for the span: its own logs
+	// window, and no trace-wide logs check.
+	const hasTraceBounds = !!traceStartTime && !!traceEndTime;
+	const logsTimeRange = useMemo(
+		() =>
+			traceStartTime && traceEndTime
+				? {
+						startTime: traceStartTime - FIVE_MINUTES_IN_MS,
+						endTime: traceEndTime + FIVE_MINUTES_IN_MS,
+					}
+				: {
+						startTime: selectedSpan.timestamp - FIVE_MINUTES_IN_MS,
+						// query_range rejects a fractional end.
+						endTime:
+							Math.ceil(selectedSpan.timestamp + selectedSpan.duration_nano / 1e6) +
+							FIVE_MINUTES_IN_MS,
+					},
+		[
+			traceStartTime,
+			traceEndTime,
+			selectedSpan.timestamp,
+			selectedSpan.duration_nano,
+		],
+	);
+
 	const {
 		logs,
 		isLoading: isLogsLoading,
@@ -178,11 +211,9 @@ function SpanDetailsContent({
 	} = useSpanContextLogs({
 		traceId: selectedSpan.trace_id,
 		spanId: selectedSpan.span_id,
-		timeRange: {
-			startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
-			endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
-		},
-		isDrawerOpen: true,
+		timeRange: logsTimeRange,
+		checkTraceLogs: hasTraceBounds,
+		enabled: !isTraceBoundsLoading,
 	});
 
 	const infraMetadata = useMemo(() => {
@@ -201,8 +232,7 @@ function SpanDetailsContent({
 	}, [selectedSpan]);
 
 	const handleExplorerPageRedirect = useCallback((): void => {
-		const startTimeMs = (traceStartTime || 0) - FIVE_MINUTES_IN_MS;
-		const endTimeMs = (traceEndTime || 0) + FIVE_MINUTES_IN_MS;
+		const { startTime: startTimeMs, endTime: endTimeMs } = logsTimeRange;
 
 		const traceIdFilter = {
 			op: 'AND',
@@ -244,14 +274,15 @@ function SpanDetailsContent({
 		searchParams.set(QueryParams.endTime, endTimeMs.toString());
 
 		openInNewTab(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`);
-	}, [selectedSpan.trace_id, traceStartTime, traceEndTime]);
+	}, [selectedSpan.trace_id, logsTimeRange]);
 
 	const emptyLogsStateConfig = useMemo(
 		() => ({
 			...getEmptyLogsListConfig(() => {}),
+			...(!hasTraceBounds && { title: 'No logs found for this span.' }),
 			showClearFiltersButton: false,
 		}),
-		[],
+		[hasTraceBounds],
 	);
 
 	// const keyAttributes = useMemo(() => {
@@ -321,11 +352,7 @@ function SpanDetailsContent({
 					</Badge>
 				) : undefined,
 			children: (
-				<Events
-					span={selectedSpan}
-					startTime={traceStartTime || 0}
-					isSearchVisible
-				/>
+				<Events span={selectedSpan} startTime={traceStartTime} isSearchVisible />
 			),
 		},
 		{
@@ -336,10 +363,7 @@ function SpanDetailsContent({
 				<SpanLogs
 					traceId={selectedSpan.trace_id}
 					spanId={selectedSpan.span_id}
-					timeRange={{
-						startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
-						endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
-					}}
+					timeRange={logsTimeRange}
 					logs={logs}
 					isLoading={isLogsLoading}
 					isError={isLogsError}
@@ -394,7 +418,10 @@ function SpanDetailsContent({
 			    with the panel's bottom edge — always visible, never scrolls. */}
 			{activeTab === 'logs' && (
 				<div className={styles.logsFooter}>
-					<OpenInLogsExplorer onClick={handleExplorerPageRedirect} />
+					<OpenInLogsExplorer
+						onClick={handleExplorerPageRedirect}
+						disabled={isTraceBoundsLoading}
+					/>
 				</div>
 			)}
 		</>
@@ -406,11 +433,14 @@ function SpanDetailsPanel({
 	selectedSpan,
 	variant = SpanDetailVariant.DIALOG,
 	onVariantChange,
+	headerActions: pageHeaderActions,
 	traceStartTime,
 	traceEndTime,
+	isTraceBoundsLoading,
 }: SpanDetailsPanelProps): JSX.Element {
 	const headerActions = useMemo((): HeaderAction[] => {
 		const actions: HeaderAction[] = [
+			...(pageHeaderActions ?? []),
 			// TODO: Add back when driven through separate config for different pages
 			// {
 			// 	key: 'view-full-trace',
@@ -440,7 +470,7 @@ function SpanDetailsPanel({
 		}
 
 		return actions;
-	}, [variant, onVariantChange]);
+	}, [pageHeaderActions, variant, onVariantChange]);
 
 	const PANEL_WIDTH = SPAN_DETAILS_PANEL_MIN_WIDTH;
 	const PANEL_MARGIN_RIGHT = 20;
@@ -449,19 +479,28 @@ function SpanDetailsPanel({
 
 	const content = (
 		<>
-			<DetailsHeader
-				title="Span details"
-				onClose={panelState.close}
-				actions={headerActions}
-				className={
-					variant === SpanDetailVariant.DIALOG ? 'floating-panel__drag-handle' : ''
-				}
-			/>
+			{variant === SpanDetailVariant.DRAWER ? (
+				<SpanDrawerHeader
+					title="Span details"
+					onClose={panelState.close}
+					actions={headerActions}
+				/>
+			) : (
+				<DetailsHeader
+					title="Span details"
+					onClose={panelState.close}
+					actions={headerActions}
+					className={
+						variant === SpanDetailVariant.DIALOG ? 'floating-panel__drag-handle' : ''
+					}
+				/>
+			)}
 			{selectedSpan ? (
 				<SpanDetailsContent
 					selectedSpan={selectedSpan}
 					traceStartTime={traceStartTime}
 					traceEndTime={traceEndTime}
+					isTraceBoundsLoading={isTraceBoundsLoading}
 				/>
 			) : (
 				<div className={styles.panelBody}>
@@ -483,7 +522,8 @@ function SpanDetailsPanel({
 			<DetailsPanelDrawer
 				isOpen={panelState.isOpen}
 				onClose={panelState.close}
-				className={styles.panel}
+				className={cx(styles.panel, styles.drawerPanel)}
+				testId="span-details-drawer"
 			>
 				{content}
 			</DetailsPanelDrawer>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDrawerHeader.module.scss

@@ -0,0 +1,33 @@
+.header {
+	box-sizing: border-box;
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: var(--spacing-4);
+	height: 48px;
+	padding: 0 var(--spacing-8) 0 var(--spacing-4);
+	border-bottom: 1px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.divider {
+	height: 16px;
+	margin-inline: 0 var(--spacing-4);
+}
+
+.title {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 14px;
+	color: var(--l1-foreground);
+}
+
+.actions {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: var(--spacing-4);
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDrawerHeader.tsx

@@ -0,0 +1,43 @@
+import { Button } from '@signozhq/ui/button';
+import { Divider } from '@signozhq/ui/divider';
+import { X } from '@signozhq/icons';
+import type { HeaderAction } from 'components/DetailsPanel';
+
+import styles from './SpanDrawerHeader.module.scss';
+
+interface SpanDrawerHeaderProps {
+	title: string;
+	onClose: () => void;
+	actions: HeaderAction[];
+}
+
+function SpanDrawerHeader({
+	title,
+	onClose,
+	actions,
+}: SpanDrawerHeaderProps): JSX.Element {
+	return (
+		<div className={styles.header}>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="md"
+				icon
+				aria-label="Close"
+				onClick={onClose}
+				testId="span-drawer-close"
+			>
+				<X />
+			</Button>
+			<Divider type="vertical" className={styles.divider} />
+			<span className={styles.title}>{title}</span>
+			<div className={styles.actions}>
+				{actions.map((action) => (
+					<div key={action.key}>{action.component}</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+export default SpanDrawerHeader;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanLogs/OpenInLogsExplorer.tsx

@@ -3,17 +3,23 @@ import { Compass } from '@signozhq/icons';
 
 interface OpenInLogsExplorerProps {
 	onClick: () => void;
+	disabled?: boolean;
 }
 
 // Opens the full Logs Explorer (new tab) filtered to this span's trace.
 // Placement/alignment is the caller's responsibility.
-function OpenInLogsExplorer({ onClick }: OpenInLogsExplorerProps): JSX.Element {
+function OpenInLogsExplorer({
+	onClick,
+	disabled,
+}: OpenInLogsExplorerProps): JSX.Element {
 	return (
 		<Button
 			variant="solid"
 			color="secondary"
 			size="md"
 			onClick={onClick}
+			disabled={disabled}
+			disabledTooltip="Loading the trace's time range"
 			prefix={<Compass size={16} />}
 			testId="open-in-explorer-button"
 		>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanLogs/useSpanContextLogs.ts

@@ -20,7 +20,8 @@ interface UseSpanContextLogsProps {
 		startTime: number;
 		endTime: number;
 	};
-	isDrawerOpen?: boolean;
+	checkTraceLogs?: boolean;
+	enabled?: boolean;
 }
 
 interface UseSpanContextLogsReturn {
@@ -112,7 +113,8 @@ export const useSpanContextLogs = ({
 	traceId,
 	spanId,
 	timeRange,
-	isDrawerOpen = true,
+	checkTraceLogs = true,
+	enabled = true,
 }: UseSpanContextLogsProps): UseSpanContextLogsReturn => {
 	const [allLogs, setAllLogs] = useState<ILog[]>([]);
 	const [spanLogIds, setSpanLogIds] = useState<Set<string>>(new Set());
@@ -142,7 +144,7 @@ export const useSpanContextLogs = ({
 			timeRange.endTime,
 		],
 		queryFn: () => GetMetricQueryRange(spanQueryPayload, ENTITY_VERSION_V5),
-		enabled: !!traceId && !!spanId,
+		enabled: enabled && !!traceId && !!spanId,
 		staleTime: FIVE_MINUTES_IN_MS,
 	});
 
@@ -311,7 +313,11 @@ export const useSpanContextLogs = ({
 		],
 		queryFn: () =>
 			GetMetricQueryRange(traceOnlyQueryPayload as any, ENTITY_VERSION_V5),
-		enabled: isDrawerOpen && !!traceOnlyQueryPayload && spanLogs.length === 0,
+		enabled:
+			enabled &&
+			checkTraceLogs &&
+			!!traceOnlyQueryPayload &&
+			spanLogs.length === 0,
 		staleTime: FIVE_MINUTES_IN_MS,
 	});
 
@@ -332,7 +338,7 @@ export const useSpanContextLogs = ({
 
 	return {
 		logs: allLogs,
-		isLoading: isSpanLoading && spanLogs.length === 0,
+		isLoading: (!enabled || isSpanLoading) && spanLogs.length === 0,
 		isError: isSpanError,
 		isFetching: isSpanFetching || isBeforeFetching || isAfterFetching,
 		spanLogIds,

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/TraceIdField.module.scss

@@ -1,7 +1,21 @@
 .traceId {
-	color: var(--accent-primary);
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-1);
+	min-width: 0;
+
+	// Sized to the icon, so the copy button sits flush against the id.
+	--button-padding: 2px;
+	--button-height: auto;
+	--button-width: auto;
+}
+
+// A block, since overflow and text-overflow do not apply to the inline span
+// Typography.Text renders.
+.value {
+	display: block;
+	min-width: 0;
+	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	white-space: nowrap;
-	display: block;
 }

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/TraceIdField.tsx

@@ -1,11 +1,5 @@
-import { useCopyToClipboard } from 'react-use';
-import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
-import { toast } from '@signozhq/ui/sonner';
-import { AppLink } from 'lib/router/AppLink';
-import { matchRoute } from 'lib/router/matchRoute';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import ROUTES from 'constants/routes';
+import { Typography } from '@signozhq/ui/typography';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
 import styles from './TraceIdField.module.scss';
@@ -14,51 +8,20 @@ interface TraceIdFieldProps {
 	span: SpanV3;
 }
 
-/**
- * Renders a span's trace id. When the user is already on the trace detail
- * page for this trace, clicking the id copies it to the clipboard (the
- * "navigate" affordance would be a no-op). Otherwise, falls back to the
- * existing link to the trace detail page.
- */
 export function TraceIdField({ span }: TraceIdFieldProps): JSX.Element {
-	const { pathname } = useAppLocation();
-	const match = matchRoute<'id'>(pathname, ROUTES.TRACE_DETAIL, { exact: true });
-	const [, setCopy] = useCopyToClipboard();
-
-	const isCurrentTrace = match?.params.id === span.trace_id;
-
-	if (isCurrentTrace) {
-		const handleCopy = (): void => {
-			setCopy(span.trace_id);
-			toast.success('Trace ID copied to clipboard', {
-				position: 'top-right',
-			});
-		};
-
-		return (
-			<Tooltip title="Click to copy trace ID">
-				<Button
-					size="md"
-					variant="link"
-					color="secondary"
-					maxWidth="100%"
-					onClick={handleCopy}
-				>
-					{span.trace_id}
-				</Button>
-			</Tooltip>
-		);
-	}
-
 	return (
-		<AppLink
-			to={{
-				pathname: `/trace/${span.trace_id}`,
-				search: window.location.search,
-			}}
-			className={styles.traceId}
-		>
-			{span.trace_id}
-		</AppLink>
+		<div className={styles.traceId}>
+			<span className={styles.value} title={span.trace_id}>
+				<Typography.Text testId="span-details-trace-id">
+					{span.trace_id}
+				</Typography.Text>
+			</span>
+			<CopyButton
+				value={span.trace_id}
+				size={12}
+				ariaLabel="Copy trace ID"
+				testId="span-details-copy-trace-id"
+			/>
+		</div>
 	);
 }

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

@@ -33,6 +33,13 @@
 	flex-shrink: 0;
 }
 
+.aiDot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--accent-primary);
+}
+
 .filterSection {
 	display: flex;
 	align-items: center;

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

@@ -137,7 +137,7 @@ function TraceDetailsHeader({
 							badgeValue={traceID}
 							maxCharacters={100}
 						/>
-						<TraceDetailsTabs />
+						<TraceDetailsTabs hasAiSummary={!!traceSummary?.ai} />
 					</div>
 				)}
 				{isOverview && showTraceDetailsHeaderOptions && traceSummary && (

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

@@ -8,20 +8,13 @@ import { useTraceDetailsTab } from '../hooks/useTraceDetailsTab';
 
 import styles from './TraceDetailsHeader.module.scss';
 
-const TAB_ITEMS = [
-	{
-		value: TraceDetailsTab.Overview,
-		label: 'Overview',
-		testId: 'trace-details-tab-overview',
-	},
-	{
-		value: TraceDetailsTab.Thread,
-		label: 'Thread',
-		testId: 'trace-details-tab-thread',
-	},
-];
+interface TraceDetailsTabsProps {
+	hasAiSummary: boolean;
+}
 
-function TraceDetailsTabs(): JSX.Element {
+function TraceDetailsTabs({
+	hasAiSummary,
+}: TraceDetailsTabsProps): JSX.Element {
 	const { id: traceId = '' } = useAppParams<'id'>();
 	const [tab, setTab] = useTraceDetailsTab();
 	const logTraceEvent = useTraceDetailLogEvent('v3', traceId);
@@ -35,6 +28,26 @@ function TraceDetailsTabs(): JSX.Element {
 		void setTab(value as TraceDetailsTab, { history: 'push' });
 	};
 
+	const items = [
+		{
+			value: TraceDetailsTab.Overview,
+			label: 'Overview',
+			testId: 'trace-details-tab-overview',
+		},
+		{
+			value: TraceDetailsTab.Thread,
+			label: 'Thread',
+			testId: 'trace-details-tab-thread',
+			suffix: hasAiSummary ? (
+				<span
+					className={styles.aiDot}
+					aria-hidden
+					data-testid="trace-details-tab-thread-ai-dot"
+				/>
+			) : undefined,
+		},
+	];
+
 	return (
 		<div className={styles.tabs}>
 			<ToggleGroup
@@ -44,7 +57,7 @@ function TraceDetailsTabs(): JSX.Element {
 				value={tab}
 				onChange={handleChange}
 				size="sm"
-				items={TAB_ITEMS}
+				items={items}
 			/>
 		</div>
 	);

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

@@ -394,6 +394,27 @@ describe('TraceDetailsHeader – tabs', () => {
 		expect(screen.getByText(metadataText)).toBeInTheDocument();
 	});
 
+	it('shows the AI dot on the Thread tab only when the summary has an AI block', () => {
+		renderHeader();
+		expect(
+			screen.queryByTestId('trace-details-tab-thread-ai-dot'),
+		).not.toBeInTheDocument();
+
+		jest.mocked(useTraceSummary).mockReturnValue({
+			data: {
+				...SUMMARY,
+				ai: {
+					tokens: { input: 1, output: 1, cacheRead: 0, cacheWrite: 0, reasoning: 0 },
+				},
+			},
+			isLoading: false,
+		});
+		renderHeader();
+		expect(
+			screen.getByTestId('trace-details-tab-thread-ai-dot'),
+		).toBeInTheDocument();
+	});
+
 	it('clears the filter result when switching to the Thread tab', async () => {
 		const user = userEvent.setup({ delay: null });
 		renderHeader();

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/ThreadSpanDetails.tsx

@@ -34,7 +34,8 @@ function ThreadSpanDetails({
 	const [width, setWidth] = useState(RIGHT_DOCK_MIN);
 	const [height, setHeight] = useState(BOTTOM_DOCK_DEFAULT);
 	const { id: traceId = '' } = useAppParams<'id'>();
-	const { data: traceSummary } = useTraceSummary(traceId);
+	const { data: traceSummary, isLoading: isTraceSummaryLoading } =
+		useTraceSummary(traceId);
 
 	const panel = (
 		<SpanDetailsPanel
@@ -44,6 +45,7 @@ function ThreadSpanDetails({
 			onVariantChange={onVariantChange}
 			traceStartTime={traceSummary?.startTimestampMillis}
 			traceEndTime={traceSummary?.endTimestampMillis}
+			isTraceBoundsLoading={isTraceSummaryLoading}
 		/>
 	);
 

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/TraceDetailsThread.tsx

@@ -9,7 +9,7 @@ import { useSpanDetailVariant } from '../hooks/useSpanDetailVariant';
 import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
 import { useTraceDetailsTab } from '../hooks/useTraceDetailsTab';
 import { SpanDetailVariant } from '../SpanDetailsPanel/constants';
-import { useThreadDataLoadedEvent } from './hooks/useThreadDataLoadedEvent';
+import { useThreadLoadedEvents } from './hooks/useThreadLoadedEvents';
 import { useThreadSpanSelection } from './hooks/useThreadSpanSelection';
 import { useThreadView } from './hooks/useThreadView';
 import { useTraceThread } from './hooks/useTraceThread';
@@ -30,10 +30,12 @@ const INITIAL_LOADER_COUNT = 4;
 interface TraceDetailsThreadProps {
 	// Owned by the page so the load event fires once per trace, not per tab visit.
 	dataLoadedFiredForRef: MutableRefObject<string>;
+	threadEmptyFiredForRef: MutableRefObject<string>;
 }
 
 function TraceDetailsThread({
 	dataLoadedFiredForRef,
+	threadEmptyFiredForRef,
 }: TraceDetailsThreadProps): JSX.Element {
 	const { id: traceId } = useAppParams<'id'>();
 	const [, setTab] = useTraceDetailsTab();
@@ -68,17 +70,24 @@ function TraceDetailsThread({
 	const interestedSpanIndex = spans.findIndex(
 		(span) => span.span_id === interestedSpanId,
 	);
+	const hasNoThread =
+		!isLoading &&
+		interestedSpanStatus !== InterestedSpanStatus.NotFound &&
+		(isError || spans.length === 0);
 
 	const selectedSpan = spans.find((span) => span.span_id === selectedSpanId);
 	const [spanDetailVariant, setSpanDetailVariant] = useSpanDetailVariant();
 	const isBottomDocked = spanDetailVariant === SpanDetailVariant.DOCKED;
 
 	const logTraceEvent = useTraceDetailLogEvent('v3', traceId || '');
-	useThreadDataLoadedEvent({
+	useThreadLoadedEvents({
 		traceId: traceId || '',
+		interestedSpanId,
 		hasSpans: spans.length > 0,
+		hasNoThread,
 		spanPanelVariant: spanDetailVariant,
-		firedForRef: dataLoadedFiredForRef,
+		dataLoadedFiredForRef,
+		threadEmptyFiredForRef,
 		logTraceEvent,
 	});
 	useSpanDetailsOpenedEvent({
@@ -96,10 +105,6 @@ function TraceDetailsThread({
 			onVariantChange={setSpanDetailVariant}
 		/>
 	);
-	const hasNoThread =
-		!isLoading &&
-		interestedSpanStatus !== InterestedSpanStatus.NotFound &&
-		(isError || spans.length === 0);
 
 	const renderBody = (): JSX.Element => {
 		if (isLoading) {

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/__tests__/threadLoadedEventsTestUtils.tsx

@@ -0,0 +1,135 @@
+import { MutableRefObject, ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import {
+	GetTraceSummary200,
+	SpantypesGettableTraceSummaryDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getGetTraceSummaryQueryKey } from 'api/generated/services/tracedetail';
+import { rest, server } from 'mocks-server/server';
+import { renderHook, waitFor } from 'tests/test-utils';
+
+import { TraceDetailLogEvent } from '../../../hooks/useTraceDetailLogEvent';
+import { SpanDetailVariant } from '../../../SpanDetailsPanel/constants';
+import { useThreadLoadedEvents } from '../useThreadLoadedEvents';
+
+const BASE_SUMMARY: SpantypesGettableTraceSummaryDTO = {
+	startTimestampMillis: 1_000,
+	endTimestampMillis: 4_000,
+	totalSpansCount: 12,
+	totalErrorSpansCount: 2,
+	hasMissingSpans: true,
+	rootServiceEntryPoint: 'POST /chat',
+	rootServiceName: 'agent',
+	rootSpanStatusCode: 'STATUS_CODE_ERROR',
+};
+
+const SUMMARIES: Record<string, SpantypesGettableTraceSummaryDTO> = {
+	'trace-ai': {
+		...BASE_SUMMARY,
+		ai: {
+			tokens: {
+				input: 1_200,
+				output: 300,
+				cacheRead: 50,
+				cacheWrite: 10,
+				reasoning: 40,
+			},
+			totalCost: 0.0123,
+		},
+	},
+	'trace-ai-next': {
+		...BASE_SUMMARY,
+		endTimestampMillis: 1_500,
+		totalSpansCount: 4,
+		ai: {
+			tokens: { input: 80, output: 20, cacheRead: 0, cacheWrite: 0, reasoning: 0 },
+			totalCost: 0.0004,
+		},
+	},
+	'trace-no-ai': BASE_SUMMARY,
+};
+
+export interface ThreadLoadedEventsProps {
+	traceId: string;
+	hasSpans?: boolean;
+	hasNoThread?: boolean;
+	interestedSpanId?: string;
+	spanPanelVariant?: SpanDetailVariant;
+}
+
+interface RenderOptions {
+	dataLoadedFiredForRef?: MutableRefObject<string>;
+	threadEmptyFiredForRef?: MutableRefObject<string>;
+	queryClient?: QueryClient;
+}
+
+interface RenderResult {
+	logTraceEvent: jest.MockedFunction<TraceDetailLogEvent>;
+	rerender: (props: ThreadLoadedEventsProps) => void;
+	unmount: () => void;
+	queryClient: QueryClient;
+}
+
+/** Serves the fixture summaries and returns the trace ids requested, in order. */
+export function mockTraceSummaries(): string[] {
+	const requests: string[] = [];
+	server.use(
+		rest.get('*/api/v1/traces/:traceId/summary', (req, res, ctx) => {
+			requests.push(req.params.traceId as string);
+			const body: GetTraceSummary200 = {
+				status: 'success',
+				data: SUMMARIES[req.params.traceId as string],
+			};
+			return res(ctx.status(200), ctx.json(body));
+		}),
+	);
+	return requests;
+}
+
+export function renderThreadLoadedEvents(
+	initialProps: ThreadLoadedEventsProps,
+	{
+		dataLoadedFiredForRef = { current: '' },
+		threadEmptyFiredForRef = { current: '' },
+		queryClient = new QueryClient({
+			defaultOptions: { queries: { retry: false } },
+		}),
+	}: RenderOptions = {},
+): RenderResult {
+	const logTraceEvent = jest.fn() as jest.MockedFunction<TraceDetailLogEvent>;
+	const wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+	const { rerender, unmount } = renderHook(
+		({
+			traceId,
+			hasSpans = false,
+			hasNoThread = false,
+			interestedSpanId,
+			spanPanelVariant = SpanDetailVariant.DOCKED_RIGHT,
+		}: ThreadLoadedEventsProps) =>
+			useThreadLoadedEvents({
+				traceId,
+				interestedSpanId,
+				hasSpans,
+				hasNoThread,
+				spanPanelVariant,
+				dataLoadedFiredForRef,
+				threadEmptyFiredForRef,
+				logTraceEvent,
+			}),
+		{ initialProps, wrapper },
+	);
+	return { logTraceEvent, rerender, unmount, queryClient };
+}
+
+export async function waitForSummary(
+	queryClient: QueryClient,
+	traceId: string,
+): Promise<void> {
+	await waitFor(() =>
+		expect(
+			queryClient.getQueryData(getGetTraceSummaryQueryKey({ traceID: traceId })),
+		).toBeDefined(),
+	);
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/__tests__/useThreadDataLoadedEvent.test.tsx

@@ -1,174 +0,0 @@
-import { MutableRefObject, ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import {
-	GetTraceSummary200,
-	SpantypesGettableTraceSummaryDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { getGetTraceSummaryQueryKey } from 'api/generated/services/tracedetail';
-import { rest, server } from 'mocks-server/server';
-import { renderHook, waitFor } from 'tests/test-utils';
-
-import { TraceDetailsTab } from '../../../constants';
-import { TraceDetailEvents } from '../../../events';
-import { TraceDetailLogEvent } from '../../../hooks/useTraceDetailLogEvent';
-import { SpanDetailVariant } from '../../../SpanDetailsPanel/constants';
-import { useThreadDataLoadedEvent } from '../useThreadDataLoadedEvent';
-
-const SUMMARIES: Record<string, SpantypesGettableTraceSummaryDTO> = {
-	'trace-a': {
-		startTimestampMillis: 1_000,
-		endTimestampMillis: 4_000,
-		totalSpansCount: 12,
-		totalErrorSpansCount: 2,
-		hasMissingSpans: false,
-		rootServiceEntryPoint: 'POST /chat',
-		rootServiceName: 'agent',
-		rootSpanStatusCode: 'STATUS_CODE_ERROR',
-	},
-	'trace-b': {
-		startTimestampMillis: 5_000,
-		endTimestampMillis: 5_500,
-		totalSpansCount: 3,
-		totalErrorSpansCount: 0,
-		hasMissingSpans: false,
-		rootServiceEntryPoint: 'POST /chat',
-		rootServiceName: 'agent',
-		rootSpanStatusCode: 'STATUS_CODE_OK',
-	},
-};
-
-interface HookProps {
-	traceId: string;
-	hasSpans: boolean;
-	spanPanelVariant?: SpanDetailVariant;
-}
-
-function renderDataLoadedEvent(
-	initialProps: HookProps,
-	firedForRef: MutableRefObject<string> = { current: '' },
-): {
-	logTraceEvent: jest.MockedFunction<TraceDetailLogEvent>;
-	rerender: (props: HookProps) => void;
-	queryClient: QueryClient;
-} {
-	const logTraceEvent = jest.fn() as jest.MockedFunction<TraceDetailLogEvent>;
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-	const wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
-		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-	);
-	const { rerender } = renderHook(
-		({ traceId, hasSpans, spanPanelVariant }: HookProps) =>
-			useThreadDataLoadedEvent({
-				traceId,
-				hasSpans,
-				spanPanelVariant: spanPanelVariant ?? SpanDetailVariant.DOCKED_RIGHT,
-				firedForRef,
-				logTraceEvent,
-			}),
-		{ initialProps, wrapper },
-	);
-	return { logTraceEvent, rerender, queryClient };
-}
-
-describe('useThreadDataLoadedEvent', () => {
-	beforeEach(() => {
-		server.use(
-			rest.get('*/api/v1/traces/:traceId/summary', (req, res, ctx) => {
-				const body: GetTraceSummary200 = {
-					status: 'success',
-					data: SUMMARIES[req.params.traceId as string],
-				};
-				return res(ctx.status(200), ctx.json(body));
-			}),
-		);
-	});
-
-	it('waits for the trace summary, then reports it as a thread load', async () => {
-		const { logTraceEvent } = renderDataLoadedEvent({
-			traceId: 'trace-a',
-			hasSpans: true,
-		});
-
-		expect(logTraceEvent).not.toHaveBeenCalled();
-
-		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
-		expect(logTraceEvent).toHaveBeenCalledWith(TraceDetailEvents.DataLoaded, {
-			detailsTab: TraceDetailsTab.Thread,
-			totalSpansCount: 12,
-			traceDurationMs: 3_000,
-			hadErrors: true,
-			spanPanelVariant: SpanDetailVariant.DOCKED_RIGHT,
-		});
-	});
-
-	it('waits for the thread spans even when the summary is already loaded', async () => {
-		const { logTraceEvent, rerender, queryClient } = renderDataLoadedEvent({
-			traceId: 'trace-a',
-			hasSpans: false,
-		});
-		await waitFor(() =>
-			expect(
-				queryClient.getQueryData(
-					getGetTraceSummaryQueryKey({ traceID: 'trace-a' }),
-				),
-			).toBeDefined(),
-		);
-		rerender({ traceId: 'trace-a', hasSpans: false });
-
-		expect(logTraceEvent).not.toHaveBeenCalled();
-
-		rerender({ traceId: 'trace-a', hasSpans: true });
-
-		expect(logTraceEvent).toHaveBeenCalledTimes(1);
-	});
-
-	it('reports a trace once, including when the tab is visited again', async () => {
-		const firedForRef = { current: '' };
-		const firstVisit = renderDataLoadedEvent(
-			{ traceId: 'trace-a', hasSpans: true },
-			firedForRef,
-		);
-		await waitFor(() =>
-			expect(firstVisit.logTraceEvent).toHaveBeenCalledTimes(1),
-		);
-		firstVisit.rerender({
-			traceId: 'trace-a',
-			hasSpans: true,
-			spanPanelVariant: SpanDetailVariant.DOCKED,
-		});
-
-		const secondVisit = renderDataLoadedEvent(
-			{ traceId: 'trace-a', hasSpans: true },
-			firedForRef,
-		);
-		await waitFor(() =>
-			expect(
-				secondVisit.queryClient.getQueryData(
-					getGetTraceSummaryQueryKey({ traceID: 'trace-a' }),
-				),
-			).toBeDefined(),
-		);
-		secondVisit.rerender({ traceId: 'trace-a', hasSpans: true });
-
-		expect(firstVisit.logTraceEvent).toHaveBeenCalledTimes(1);
-		expect(secondVisit.logTraceEvent).not.toHaveBeenCalled();
-	});
-
-	it('reports the next trace with its own summary', async () => {
-		const { logTraceEvent, rerender } = renderDataLoadedEvent({
-			traceId: 'trace-a',
-			hasSpans: true,
-		});
-		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
-
-		rerender({ traceId: 'trace-b', hasSpans: true });
-
-		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(2));
-		expect(logTraceEvent).toHaveBeenLastCalledWith(
-			TraceDetailEvents.DataLoaded,
-			expect.objectContaining({ totalSpansCount: 3, traceDurationMs: 500 }),
-		);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/__tests__/useThreadLoadedEvents.dataLoaded.test.tsx

@@ -0,0 +1,111 @@
+import { waitFor } from 'tests/test-utils';
+
+import { TraceDetailsTab } from '../../../constants';
+import { TraceDetailEvents } from '../../../events';
+import { SpanDetailVariant } from '../../../SpanDetailsPanel/constants';
+import {
+	mockTraceSummaries,
+	renderThreadLoadedEvents,
+	ThreadLoadedEventsProps,
+	waitForSummary,
+} from './threadLoadedEventsTestUtils';
+
+describe('useThreadLoadedEvents: data loaded', () => {
+	beforeEach(() => {
+		mockTraceSummaries();
+	});
+
+	it('waits for the trace summary, then reports it as a thread load', async () => {
+		const { logTraceEvent } = renderThreadLoadedEvents({
+			traceId: 'trace-ai',
+			hasSpans: true,
+		});
+
+		expect(logTraceEvent).not.toHaveBeenCalled();
+
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
+		expect(logTraceEvent).toHaveBeenCalledWith(TraceDetailEvents.DataLoaded, {
+			detailsTab: TraceDetailsTab.Thread,
+			totalSpansCount: 12,
+			traceDurationMs: 3_000,
+			hadErrors: true,
+			spanPanelVariant: SpanDetailVariant.DOCKED_RIGHT,
+		});
+	});
+
+	it('waits for the thread spans even when the summary is already loaded', async () => {
+		const { logTraceEvent, rerender, queryClient } = renderThreadLoadedEvents({
+			traceId: 'trace-ai',
+		});
+		await waitForSummary(queryClient, 'trace-ai');
+		rerender({ traceId: 'trace-ai' });
+
+		expect(logTraceEvent).not.toHaveBeenCalled();
+
+		rerender({ traceId: 'trace-ai', hasSpans: true });
+
+		expect(logTraceEvent).toHaveBeenCalledTimes(1);
+	});
+
+	it('reports a trace once, including when the tab is visited again', async () => {
+		const dataLoadedFiredForRef = { current: '' };
+		const props: ThreadLoadedEventsProps = {
+			traceId: 'trace-ai',
+			hasSpans: true,
+		};
+		const firstVisit = renderThreadLoadedEvents(props, { dataLoadedFiredForRef });
+		await waitFor(() =>
+			expect(firstVisit.logTraceEvent).toHaveBeenCalledTimes(1),
+		);
+		firstVisit.rerender({
+			...props,
+			spanPanelVariant: SpanDetailVariant.DOCKED,
+		});
+
+		const secondVisit = renderThreadLoadedEvents(props, {
+			dataLoadedFiredForRef,
+		});
+		await waitForSummary(secondVisit.queryClient, 'trace-ai');
+		secondVisit.rerender(props);
+
+		expect(firstVisit.logTraceEvent).toHaveBeenCalledTimes(1);
+		expect(secondVisit.logTraceEvent).not.toHaveBeenCalled();
+	});
+
+	it('reports the next trace with its own summary', async () => {
+		const { logTraceEvent, rerender } = renderThreadLoadedEvents({
+			traceId: 'trace-ai',
+			hasSpans: true,
+		});
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
+
+		rerender({ traceId: 'trace-ai-next', hasSpans: true });
+
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(2));
+		expect(logTraceEvent).toHaveBeenLastCalledWith(
+			TraceDetailEvents.DataLoaded,
+			expect.objectContaining({ totalSpansCount: 4, traceDurationMs: 500 }),
+		);
+	});
+
+	it('also reports an empty thread, once each, when an errored thread still holds spans', async () => {
+		const props: ThreadLoadedEventsProps = {
+			traceId: 'trace-ai',
+			hasSpans: true,
+			hasNoThread: true,
+		};
+		const { logTraceEvent, rerender } = renderThreadLoadedEvents(props);
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(2));
+		rerender(props);
+
+		expect(logTraceEvent).toHaveBeenCalledTimes(2);
+		expect(logTraceEvent).toHaveBeenCalledWith(
+			TraceDetailEvents.DataLoaded,
+			expect.any(Object),
+		);
+		expect(logTraceEvent).toHaveBeenCalledWith(
+			TraceDetailEvents.ThreadEmptyWithAiSummary,
+			expect.any(Object),
+		);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/__tests__/useThreadLoadedEvents.threadEmpty.test.tsx

@@ -0,0 +1,114 @@
+import { waitFor } from 'tests/test-utils';
+
+import { TraceDetailsTab } from '../../../constants';
+import { TraceDetailEvents } from '../../../events';
+import {
+	mockTraceSummaries,
+	renderThreadLoadedEvents,
+	ThreadLoadedEventsProps,
+	waitForSummary,
+} from './threadLoadedEventsTestUtils';
+
+describe('useThreadLoadedEvents: thread empty with AI summary', () => {
+	let summaryRequests: string[];
+
+	beforeEach(() => {
+		summaryRequests = mockTraceSummaries();
+	});
+
+	it('reports the trace summary when the thread is empty but the summary has AI usage', async () => {
+		const { logTraceEvent } = renderThreadLoadedEvents({
+			traceId: 'trace-ai',
+			hasNoThread: true,
+			interestedSpanId: 'span-1',
+		});
+
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
+		expect(logTraceEvent).toHaveBeenCalledWith(
+			TraceDetailEvents.ThreadEmptyWithAiSummary,
+			{
+				detailsTab: TraceDetailsTab.Thread,
+				spanId: 'span-1',
+				rootServiceName: 'agent',
+				rootServiceEntryPoint: 'POST /chat',
+				totalSpansCount: 12,
+				traceDurationMs: 3_000,
+				hadErrors: true,
+				hasMissingSpans: true,
+				inputTokens: 1_200,
+				outputTokens: 300,
+				cacheReadTokens: 50,
+				cacheWriteTokens: 10,
+				reasoningTokens: 40,
+				totalCost: 0.0123,
+			},
+		);
+	});
+
+	it('does not report when the summary has no AI usage', async () => {
+		const props: ThreadLoadedEventsProps = {
+			traceId: 'trace-no-ai',
+			hasNoThread: true,
+		};
+		const { logTraceEvent, rerender, queryClient } =
+			renderThreadLoadedEvents(props);
+		await waitForSummary(queryClient, 'trace-no-ai');
+		rerender(props);
+
+		expect(logTraceEvent).not.toHaveBeenCalled();
+	});
+
+	it('waits until the thread is known to be empty', async () => {
+		const { logTraceEvent, rerender, queryClient } = renderThreadLoadedEvents({
+			traceId: 'trace-ai',
+		});
+		await waitForSummary(queryClient, 'trace-ai');
+		rerender({ traceId: 'trace-ai' });
+
+		expect(logTraceEvent).not.toHaveBeenCalled();
+
+		rerender({ traceId: 'trace-ai', hasNoThread: true });
+
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
+	});
+
+	it('reports once per trace and reuses the loaded summary when the tab is visited again', async () => {
+		const threadEmptyFiredForRef = { current: '' };
+		const props: ThreadLoadedEventsProps = {
+			traceId: 'trace-ai',
+			hasNoThread: true,
+		};
+		const first = renderThreadLoadedEvents(props, { threadEmptyFiredForRef });
+		await waitFor(() => expect(first.logTraceEvent).toHaveBeenCalledTimes(1));
+		first.unmount();
+
+		const second = renderThreadLoadedEvents(props, {
+			threadEmptyFiredForRef,
+			queryClient: first.queryClient,
+		});
+
+		expect(second.queryClient.isFetching()).toBe(0);
+		expect(summaryRequests).toStrictEqual(['trace-ai']);
+		expect(second.logTraceEvent).not.toHaveBeenCalled();
+	});
+
+	it('reports the next trace with its own summary', async () => {
+		const { logTraceEvent, rerender } = renderThreadLoadedEvents({
+			traceId: 'trace-ai',
+			hasNoThread: true,
+		});
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(1));
+
+		rerender({ traceId: 'trace-ai-next', hasNoThread: true });
+
+		await waitFor(() => expect(logTraceEvent).toHaveBeenCalledTimes(2));
+		expect(logTraceEvent).toHaveBeenLastCalledWith(
+			TraceDetailEvents.ThreadEmptyWithAiSummary,
+			expect.objectContaining({
+				totalSpansCount: 4,
+				inputTokens: 80,
+				totalCost: 0.0004,
+			}),
+		);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/useThreadDataLoadedEvent.ts

@@ -1,45 +0,0 @@
-import { MutableRefObject, useEffect } from 'react';
-import { useGetTraceSummary } from 'api/generated/services/tracedetail';
-
-import { TraceDetailsTab } from '../../constants';
-import { TraceDetailEventKeys, TraceDetailEvents } from '../../events';
-import { TraceDetailLogEvent } from '../../hooks/useTraceDetailLogEvent';
-import { SpanDetailVariant } from '../../SpanDetailsPanel/constants';
-
-interface ThreadDataLoadedEventArgs {
-	traceId: string;
-	hasSpans: boolean;
-	spanPanelVariant: SpanDetailVariant;
-	firedForRef: MutableRefObject<string>;
-	logTraceEvent: TraceDetailLogEvent;
-}
-
-export function useThreadDataLoadedEvent({
-	traceId,
-	hasSpans,
-	spanPanelVariant,
-	firedForRef,
-	logTraceEvent,
-}: ThreadDataLoadedEventArgs): void {
-	// No keepPreviousData: a previous trace's summary must not be reported for this one.
-	const { data } = useGetTraceSummary(
-		{ traceID: traceId },
-		{ query: { enabled: !!traceId, refetchOnMount: false } },
-	);
-	const summary = data?.data;
-
-	useEffect(() => {
-		if (!traceId || firedForRef.current === traceId || !hasSpans || !summary) {
-			return;
-		}
-		firedForRef.current = traceId;
-		logTraceEvent(TraceDetailEvents.DataLoaded, {
-			[TraceDetailEventKeys.DetailsTab]: TraceDetailsTab.Thread,
-			[TraceDetailEventKeys.TotalSpansCount]: summary.totalSpansCount,
-			[TraceDetailEventKeys.TraceDurationMs]:
-				summary.endTimestampMillis - summary.startTimestampMillis,
-			[TraceDetailEventKeys.HadErrors]: summary.totalErrorSpansCount > 0,
-			[TraceDetailEventKeys.SpanPanelVariant]: spanPanelVariant,
-		});
-	}, [traceId, hasSpans, summary, spanPanelVariant, firedForRef, logTraceEvent]);
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/hooks/useThreadLoadedEvents.ts

@@ -0,0 +1,70 @@
+import { MutableRefObject, useEffect } from 'react';
+import { useGetTraceSummary } from 'api/generated/services/tracedetail';
+
+import { TraceDetailEvents } from '../../events';
+import { TraceDetailLogEvent } from '../../hooks/useTraceDetailLogEvent';
+import { SpanDetailVariant } from '../../SpanDetailsPanel/constants';
+import {
+	getThreadDataLoadedEventAttributes,
+	getThreadEmptyWithAiEventAttributes,
+} from '../utils';
+
+interface ThreadLoadedEventsArgs {
+	traceId: string;
+	interestedSpanId?: string;
+	hasSpans: boolean;
+	hasNoThread: boolean;
+	spanPanelVariant: SpanDetailVariant;
+	dataLoadedFiredForRef: MutableRefObject<string>;
+	threadEmptyFiredForRef: MutableRefObject<string>;
+	logTraceEvent: TraceDetailLogEvent;
+}
+
+export function useThreadLoadedEvents({
+	traceId,
+	interestedSpanId,
+	hasSpans,
+	hasNoThread,
+	spanPanelVariant,
+	dataLoadedFiredForRef,
+	threadEmptyFiredForRef,
+	logTraceEvent,
+}: ThreadLoadedEventsArgs): void {
+	// No keepPreviousData: a previous trace's summary must not be reported for this one.
+	const { data } = useGetTraceSummary(
+		{ traceID: traceId },
+		{ query: { enabled: !!traceId, refetchOnMount: false } },
+	);
+	const summary = data?.data;
+
+	useEffect(() => {
+		if (!traceId || !summary) {
+			return;
+		}
+		// Not exclusive: an errored thread can still hold spans, so each event keeps its own ref.
+		if (hasSpans && dataLoadedFiredForRef.current !== traceId) {
+			dataLoadedFiredForRef.current = traceId;
+			logTraceEvent(
+				TraceDetailEvents.DataLoaded,
+				getThreadDataLoadedEventAttributes(summary, spanPanelVariant),
+			);
+		}
+		if (hasNoThread && summary.ai && threadEmptyFiredForRef.current !== traceId) {
+			threadEmptyFiredForRef.current = traceId;
+			logTraceEvent(
+				TraceDetailEvents.ThreadEmptyWithAiSummary,
+				getThreadEmptyWithAiEventAttributes(summary, interestedSpanId),
+			);
+		}
+	}, [
+		traceId,
+		interestedSpanId,
+		hasSpans,
+		hasNoThread,
+		summary,
+		spanPanelVariant,
+		dataLoadedFiredForRef,
+		threadEmptyFiredForRef,
+		logTraceEvent,
+	]);
+}

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

@@ -1,7 +1,13 @@
-import type { SpantypesThreadSpanDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	SpantypesGettableTraceSummaryDTO,
+	SpantypesThreadSpanDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { isAxiosError } from 'axios';
 
 import { collectToolCallKeys } from '../AIThreadMessage/utils';
+import { TraceDetailsTab } from '../constants';
+import { TraceDetailEventKeys } from '../events';
+import { SpanDetailVariant } from '../SpanDetailsPanel/constants';
 import { InterestedSpanStatus, ThreadSpan } from './types';
 
 /** Derives SpanV3's `timestamp` and `service.name`, as the waterfall does. */
@@ -47,3 +53,44 @@ export function getInterestedSpanStatus(
 		? InterestedSpanStatus.Found
 		: InterestedSpanStatus.NoIOMessages;
 }
+
+function getThreadSummaryAttributes(
+	summary: SpantypesGettableTraceSummaryDTO,
+): Record<string, unknown> {
+	return {
+		[TraceDetailEventKeys.DetailsTab]: TraceDetailsTab.Thread,
+		[TraceDetailEventKeys.TotalSpansCount]: summary.totalSpansCount,
+		[TraceDetailEventKeys.TraceDurationMs]:
+			summary.endTimestampMillis - summary.startTimestampMillis,
+		[TraceDetailEventKeys.HadErrors]: summary.totalErrorSpansCount > 0,
+	};
+}
+
+export function getThreadDataLoadedEventAttributes(
+	summary: SpantypesGettableTraceSummaryDTO,
+	spanPanelVariant: SpanDetailVariant,
+): Record<string, unknown> {
+	return {
+		...getThreadSummaryAttributes(summary),
+		[TraceDetailEventKeys.SpanPanelVariant]: spanPanelVariant,
+	};
+}
+
+export function getThreadEmptyWithAiEventAttributes(
+	summary: SpantypesGettableTraceSummaryDTO,
+	interestedSpanId: string | undefined,
+): Record<string, unknown> {
+	return {
+		...getThreadSummaryAttributes(summary),
+		[TraceDetailEventKeys.SpanId]: interestedSpanId,
+		[TraceDetailEventKeys.RootServiceName]: summary.rootServiceName,
+		[TraceDetailEventKeys.RootServiceEntryPoint]: summary.rootServiceEntryPoint,
+		[TraceDetailEventKeys.HasMissingSpans]: summary.hasMissingSpans,
+		[TraceDetailEventKeys.InputTokens]: summary.ai?.tokens.input,
+		[TraceDetailEventKeys.OutputTokens]: summary.ai?.tokens.output,
+		[TraceDetailEventKeys.CacheReadTokens]: summary.ai?.tokens.cacheRead,
+		[TraceDetailEventKeys.CacheWriteTokens]: summary.ai?.tokens.cacheWrite,
+		[TraceDetailEventKeys.ReasoningTokens]: summary.ai?.tokens.reasoning,
+		[TraceDetailEventKeys.TotalCost]: summary.ai?.totalCost,
+	};
+}

frontend/src/pages/TraceDetailsV3/events.ts

@@ -14,6 +14,7 @@ export enum TraceDetailEvents {
 	SpanPercentileAttributeChanged = 'Trace Detail: Span percentile attribute changed',
 	SpanDetailsOpened = 'Trace Detail: Span details opened',
 	DetailsTabChanged = 'Trace Detail: Details tab changed',
+	ThreadEmptyWithAiSummary = 'Trace Detail: Thread empty with AI summary',
 }
 
 export enum TraceDetailEventKeys {
@@ -48,6 +49,16 @@ export enum TraceDetailEventKeys {
 	Selected = 'selected',
 	// Data loaded / span details opened: which tab the user is on
 	DetailsTab = 'detailsTab',
+	// Thread empty with AI summary (reuses SpanId, DetailsTab, TotalSpansCount, TraceDurationMs, HadErrors)
+	RootServiceName = 'rootServiceName',
+	RootServiceEntryPoint = 'rootServiceEntryPoint',
+	HasMissingSpans = 'hasMissingSpans',
+	InputTokens = 'inputTokens',
+	OutputTokens = 'outputTokens',
+	CacheReadTokens = 'cacheReadTokens',
+	CacheWriteTokens = 'cacheWriteTokens',
+	ReasoningTokens = 'reasoningTokens',
+	TotalCost = 'totalCost',
 }
 
 export type TraceDetailView = 'v2' | 'v3';

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -17,6 +17,7 @@ function TraceDetailsV3(): JSX.Element {
 	// between traces (the route component stays mounted) re-fires it once each.
 	const dataLoadedFiredForRef = useRef<string>('');
 	const threadDataLoadedFiredForRef = useRef<string>('');
+	const threadEmptyFiredForRef = useRef<string>('');
 
 	const handleFilteredSpansChange = useCallback(
 		(spanIds: string[], isActive: boolean): void => {
@@ -40,7 +41,10 @@ function TraceDetailsV3(): JSX.Element {
 					dataLoadedFiredForRef={dataLoadedFiredForRef}
 				/>
 			) : (
-				<TraceDetailsThread dataLoadedFiredForRef={threadDataLoadedFiredForRef} />
+				<TraceDetailsThread
+					dataLoadedFiredForRef={threadDataLoadedFiredForRef}
+					threadEmptyFiredForRef={threadEmptyFiredForRef}
+				/>
 			)}
 		</TraceDetailsWrapper>
 	);

frontend/src/pages/TraceDetailsV3/stories/TraceDetailsV3.stories.mocks.tsx

@@ -13,7 +13,7 @@ import type { SpantypesPostableTraceAggregationsDTO } from 'api/generated/servic
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import { screen, userEvent, within } from 'storybook/test';
-import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
+import type { QueryRangeRequestV5, RawRow } from 'types/api/v5/queryRange';
 
 import {
 	choiceControl,
@@ -150,6 +150,12 @@ export const traceDetailsMocks = defineStoryMocks({
 			value: 8,
 			max: 20,
 		}),
+		traceOnlyLogs: toggleControl('Logs only on the trace', {
+			group: PANEL,
+			description:
+				'The span has no logs of its own but the trace does, which is the Logs tab\'s "view logs for the current trace" state.',
+			value: false,
+		}),
 		exportState: choiceControl<ExportState>('Trace export', {
 			group: EXPORT,
 			description:
@@ -165,6 +171,12 @@ export const traceDetailsMocks = defineStoryMocks({
 			errors: values.errors,
 			traceStart: traceStartOf(),
 		};
+		const spanLogRowsFor = (body: QueryRangeRequestV5): RawRow[] => {
+			const scope = spanLogScopeOf(body);
+			const count =
+				values.traceOnlyLogs && scope !== 'trace' ? 0 : values.spanLogs;
+			return spanLogRows(count, trace, scope);
+		};
 
 		return [
 			rest.post('http://localhost/api/v1/export_raw_data', (_req, res, ctx) => {
@@ -266,9 +278,7 @@ export const traceDetailsMocks = defineStoryMocks({
 
 					if (requestType === 'raw') {
 						return queryRangeV5RawResponse(
-							signalOf(body) === 'logs'
-								? spanLogRows(values.spanLogs, trace, spanLogScopeOf(body))
-								: spanMatchRows(trace),
+							signalOf(body) === 'logs' ? spanLogRowsFor(body) : spanMatchRows(trace),
 						);
 					}
 

frontend/src/pages/TraceDetailsV3/stories/TraceDetailsV3.stories.tsx

@@ -17,7 +17,6 @@ import {
 	focusSpanIndex,
 	scenarioSpanCount,
 	spanIdAt,
-	STORY_TRACE_ID,
 } from './__story_mockdata__/traceDetails';
 import {
 	openRowMenu,
@@ -249,18 +248,35 @@ export const SpanPercentileOpen: Story = {
 	},
 };
 
-/** The span's trace id clicked in the panel, which copies it. */
-export const TraceIdCopiedToast: Story = {
+/** The span has no logs of its own but its trace does, so the Logs tab points to the trace's. */
+export const SpanPanelTraceOnlyLogs: Story = {
+	args: { traceOnlyLogs: true },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByRole('tab', { name: /Logs/ }, untilLoaded),
+		);
+		await expect(
+			await within(canvasElement).findByText(
+				'No logs found for selected span. View logs for the current trace.',
+				undefined,
+				untilLoaded,
+			),
+		).toBeVisible();
+	},
+};
+
+/** The span panel's trace id copied with its copy button, which turns into a check. */
+export const TraceIdCopied: Story = {
 	play: async ({ canvasElement }): Promise<void> => {
 		await userEvent.click(
 			await within(canvasElement).findByRole(
 				'button',
-				{ name: STORY_TRACE_ID },
+				{ name: 'Copy trace ID' },
 				untilLoaded,
 			),
 		);
 		await expect(
-			await screen.findByText('Trace ID copied to clipboard'),
+			await within(canvasElement).findByRole('button', { name: 'Copied' }),
 		).toBeVisible();
 	},
 };

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx

@@ -149,7 +149,7 @@ function FunnelStep({
 									<FilterSelect
 										placeholder="Select Service"
 										queryParam={QueryParams.service}
-										filterType="serviceName"
+										filterType="service.name"
 										shouldSetQueryParams={false}
 										values={stepData.service_name}
 										isMultiple={false}

frontend/src/pages/TracesFunnelDetails/stories/TracesFunnelDetails.stories.mocks.tsx

@@ -3,15 +3,19 @@
  * Do not hand-edit: regenerate instead.
  */
 
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
 import { rest } from 'msw';
 
 import { choiceControl, countControl } from '@/storybook/controls/controls';
 import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
 import {
-	attributeKeysResponse,
-	attributeValuesResponse,
-} from '@/storybook/msw/__story_mockdata__/attributes';
+	fieldKeysResponse,
+	fieldValuesResponse,
+} from '@/storybook/msw/__story_mockdata__/fields';
 
 import {
 	FUNNEL_ID,
@@ -41,13 +45,9 @@ const CONVERSION: Record<DropOff, number> = {
 
 const ENTERED = 24_000;
 
-const STEP_FILTER_KEYS = [
-	'service.name',
-	'name',
-	'http.status_code',
-	'deployment.environment',
-	'hasError',
-];
+const STEP_RESOURCE_KEYS = ['service.name', 'deployment.environment'];
+
+const STEP_ATTRIBUTE_KEYS = ['name', 'http.status_code', 'hasError'];
 
 const STEP_FILTER_VALUES: Record<string, string[]> = {
 	'service.name': ['frontend', 'checkout', 'payment', 'shipping'],
@@ -115,20 +115,44 @@ export const tracesFunnelDetailsMocks = defineStoryMocks({
 				'http://localhost/api/v1/trace-funnels/analytics/error-traces',
 				response.json(() => funnelErrorTracesResponse(values.traces)),
 			),
-			// The `Where` box on every step is the trace query builder, which reads
-			// its suggestions as soon as the step renders.
+			// The `Where` box on every step reads its suggestions as soon as the step
+			// renders, and the service and span name selects read `service.name` and
+			// `name` from the same values endpoint.
 			rest.get(
-				'http://localhost/api/v3/autocomplete/attribute_keys',
-				response.json(() => attributeKeysResponse(STEP_FILTER_KEYS)),
+				'http://localhost/api/v1/fields/keys',
+				response.json(() => {
+					const signal = TelemetrytypesSignalDTO.traces;
+					const resource = fieldKeysResponse(STEP_RESOURCE_KEYS, {
+						signal,
+						fieldContext: TelemetrytypesFieldContextDTO.resource,
+					});
+					const attribute = fieldKeysResponse(STEP_ATTRIBUTE_KEYS, {
+						signal,
+						fieldContext: TelemetrytypesFieldContextDTO.attribute,
+					});
+
+					return {
+						...resource,
+						data: {
+							...resource.data,
+							keys: { ...resource.data.keys, ...attribute.data.keys },
+						},
+					};
+				}),
 			),
 			rest.get(
-				'http://localhost/api/v3/autocomplete/attribute_values',
-				response.json((req) =>
-					attributeValuesResponse(
-						STEP_FILTER_VALUES[req.url.searchParams.get('attributeKey') ?? ''] ?? [],
-						req.url.searchParams.get('searchText') ?? '',
-					),
-				),
+				'http://localhost/api/v1/fields/values',
+				response.json((req) => {
+					const searchText = (
+						req.url.searchParams.get('searchText') ?? ''
+					).toLowerCase();
+
+					return fieldValuesResponse(
+						(STEP_FILTER_VALUES[req.url.searchParams.get('name') ?? ''] ?? []).filter(
+							(value) => value.toLowerCase().includes(searchText),
+						),
+					);
+				}),
 			),
 		];
 	},

frontend/src/pages/TracesModulePage/stories/TracesModulePage.stories.mocks.tsx

@@ -4,9 +4,14 @@
  */
 
 import { rest } from 'msw';
+import remove from 'api/browser/localstorage/remove';
+import set from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { USER_PREFERENCES } from 'constants/userPreferences';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import { spanPercentilesResponse } from 'pages/TraceDetailsV3/stories/__story_mockdata__/traceDetails';
 import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
 import { explorerViewToPanelType } from 'utils/explorerUtils';
 
@@ -27,6 +32,10 @@ import {
 import {
 	exportDashboardsResponse,
 	savedTraceViewsResponse,
+	SPAN_LOGS_STATES,
+	spanLogRows,
+	spanLogScopeOf,
+	type SpanLogsState,
 	traceAttributeValuesResponse,
 	traceFieldKeysResponse,
 	traceFieldValues,
@@ -34,8 +43,11 @@ import {
 	traceQuickFiltersResponse,
 	traceRootSpanRows,
 	traceSpanRows,
+	TRACE_SUMMARY_STATES,
+	traceSummaryResponse,
 	TRACES_EXPLORER_VIEWS,
 	TRACES_TABS,
+	type TraceSummaryState,
 	type TracesTab,
 } from './__story_mockdata__/traces';
 
@@ -65,6 +77,8 @@ const tracesRoute = ({ tab, view }: RouteValues): string => {
 interface RawQuerySpec {
 	limit?: number;
 	offset?: number;
+	signal?: string;
+	filter?: { expression?: string };
 }
 
 const rawSpecOf = (body: QueryRangeRequestV5): RawQuerySpec => {
@@ -73,6 +87,9 @@ const rawSpecOf = (body: QueryRangeRequestV5): RawQuerySpec => {
 	return spec as RawQuerySpec;
 };
 
+// The summary has no window of its own; its bounds wrap the span the list showed.
+const listWindow = { start: 0, end: 0 };
+
 export const tracesMocks = defineStoryMocks({
 	controls: {
 		tab: choiceControl<TracesTab>('Tab', {
@@ -102,6 +119,26 @@ export const tracesMocks = defineStoryMocks({
 				'Answers 503 on the spans of the services that fail, which is what the status column and the error colouring read.',
 			value: true,
 		}),
+		spanDrawer: toggleControl('Span drawer', {
+			group: LIST,
+			description:
+				'The `TRACES_SPAN_DRAWER_ENABLED` localStorage flag the span drawer ships behind. Off, a row click opens the trace page.',
+			value: false,
+		}),
+		traceSummary: choiceControl<TraceSummaryState>('Trace summary', {
+			group: LIST,
+			description:
+				'What the span drawer gets for the trace start and end. Not found falls back to span-only logs; loading holds the logs tab.',
+			options: TRACE_SUMMARY_STATES,
+			value: 'found',
+		}),
+		spanLogs: choiceControl<SpanLogsState>('Span logs', {
+			group: LIST,
+			description:
+				"What the span drawer's Logs tab gets. `span`: the span's logs with context either side; `trace only`: none for the span but some for the trace; `none`; `loading` and `error` hold or fail only the log queries.",
+			options: SPAN_LOGS_STATES,
+			value: 'span',
+		}),
 		warning: toggleControl('Query warning', {
 			group: LIST,
 			description: 'Attaches a warning to the response, next to the toolbar.',
@@ -169,6 +206,96 @@ export const tracesMocks = defineStoryMocks({
 			response.json(exportDashboardsResponse),
 		),
 
+		rest.post(
+			'http://localhost/api/v1/span_percentile',
+			response.json(spanPercentilesResponse),
+		),
+
+		// Answers on its own control rather than the Data one, so the drawer's
+		// fallback and waiting states are reachable with the list loaded.
+		rest.get(
+			'http://localhost/api/v1/traces/:traceId/summary',
+			(req, res, ctx) => {
+				if (values.traceSummary === 'loading') {
+					return res(ctx.delay('infinite'));
+				}
+				const summary =
+					values.traceSummary === 'found'
+						? traceSummaryResponse({
+								traceId: String(req.params.traceId),
+								count: values.spans,
+								...listWindow,
+							})
+						: null;
+
+				return summary
+					? res(ctx.status(200), ctx.json(summary))
+					: res(ctx.status(404), ctx.json({ status: 'error' }));
+			},
+		),
+
+		// The drawer's percentile panel dereferences this preference without a guard.
+		rest.get(
+			'http://localhost/api/v1/user/preferences/:name',
+			response.json((req) => ({
+				status: 'success',
+				data: {
+					name: String(req.params.name),
+					description: 'storybook',
+					valueType: 'array',
+					defaultValue: [],
+					allowedValues: [],
+					allowedScopes: ['user'],
+					value:
+						String(req.params.name) ===
+						USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES
+							? ['service.name']
+							: [],
+				},
+			})),
+		),
+
+		// The drawer's log queries answer on their own control, so they can hang or
+		// fail with the list loaded. Anything else falls through to the next handler.
+		rest.post('http://localhost/api/v5/query_range', async (req, res, ctx) => {
+			const body = (await req.json()) as QueryRangeRequestV5;
+			const { signal, filter } = rawSpecOf(body);
+			if (signal !== 'logs') {
+				return undefined;
+			}
+			if (values.spanLogs === 'loading') {
+				return res(ctx.delay('infinite'));
+			}
+			if (values.spanLogs === 'error') {
+				return res(
+					ctx.status(500),
+					ctx.json({ status: 'error', error: 'storybook logs failure' }),
+				);
+			}
+
+			const expression = filter?.expression ?? '';
+			const scope = spanLogScopeOf(expression);
+			const answers =
+				values.spanLogs === 'span' ||
+				(values.spanLogs === 'trace only' && scope === 'trace');
+
+			return res(
+				ctx.status(200),
+				ctx.json(
+					queryRangeV5RawResponse(
+						answers
+							? spanLogRows({
+									scope,
+									expression,
+									startMicros: body.start,
+									endMicros: body.end,
+								})
+							: [],
+					),
+				),
+			);
+		}),
+
 		rest.post(
 			'http://localhost/api/v5/query_range',
 			response.json(async (req) => {
@@ -195,6 +322,9 @@ export const tracesMocks = defineStoryMocks({
 					: undefined;
 
 				if (requestType === 'raw' || requestType === 'trace') {
+					listWindow.start = start;
+					listWindow.end = end;
+
 					return queryRangeV5RawResponse(
 						requestType === 'trace' ? traceRootSpanRows(rows) : traceSpanRows(rows),
 						{
@@ -232,4 +362,11 @@ export const tracesMocks = defineStoryMocks({
 		),
 	],
 	config: (values) => ({ route: tracesRoute(values) }),
+	effect: (values) => {
+		if (values.spanDrawer) {
+			set(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED, 'true');
+		} else {
+			remove(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED);
+		}
+	},
 });

frontend/src/pages/TracesModulePage/stories/TracesModulePage.stories.tsx

@@ -25,7 +25,7 @@ const pageStory = storyMocks(tracesMocks, { layout: 'app' });
  * Route: `/traces-explorer`.
  */
 const meta = {
-	title: 'Pages/Traces/Explorer',
+	title: 'Pages/Traces/Explorer/Overview',
 	tags: ['play'],
 	component: TracesModulePage,
 	...pageStory,

frontend/src/pages/TracesModulePage/stories/__story_mockdata__/traces.ts

@@ -17,6 +17,7 @@ import {
 } from 'api/generated/services/sigNoz.schemas';
 import type {
 	GetQuickFilters200,
+	GetTraceSummary200,
 	ListSavedViews200,
 	TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -173,6 +174,22 @@ const flatSpanRows = ({
 		};
 	});
 
+/** The list API's event shape: `attributes`, where the trace API says `attributeMap`. */
+const exceptionEvent = (
+	timestamp: string,
+): {
+	name: string;
+	timeUnixNano: number;
+	attributes: Record<string, string>;
+} => ({
+	name: 'exception',
+	timeUnixNano: new Date(timestamp).getTime() * 1_000_000,
+	attributes: {
+		'exception.type': 'UpstreamTimeoutError',
+		'exception.message': 'upstream did not answer within 1s',
+	},
+});
+
 /** The List view returns every span field, with resource and attribute fields nested in maps. */
 export const traceSpanRows = (options: SpanRowsOptions): RawRow[] =>
 	flatSpanRows(options).map(
@@ -182,6 +199,10 @@ export const traceSpanRows = (options: SpanRowsOptions): RawRow[] =>
 				...data,
 				attributes: {},
 				resource: { 'service.name': serviceName },
+				events: data.has_error ? [exceptionEvent(timestamp)] : [],
+				links: data.has_error
+					? [{ traceId: traceIdAt(0), spanId: spanIdAt(0) }]
+					: [],
 			},
 		}),
 	);
@@ -196,6 +217,122 @@ export const traceRootSpanRows = (options: SpanRowsOptions): RawRow[] =>
 		},
 	}));
 
+export const TRACE_SUMMARY_STATES = ['found', 'not found', 'loading'] as const;
+
+export type TraceSummaryState = (typeof TRACE_SUMMARY_STATES)[number];
+
+const TRACE_PADDING_MS = 250;
+
+/** Null for a trace the list never showed. */
+export const traceSummaryResponse = ({
+	traceId,
+	count,
+	start,
+	end,
+}: Pick<SpanRowsOptions, 'count' | 'start' | 'end'> & {
+	traceId: string;
+}): GetTraceSummary200 | null => {
+	const index = rowWindow({ count, offset: 0, limit: count }).find(
+		(i) => traceIdAt(i) === traceId,
+	);
+	if (index === undefined) {
+		return null;
+	}
+	const spanStart = new Date(timestampAt(index, start, end)).getTime();
+	const span = SPANS[index % SPANS.length];
+
+	return {
+		status: 'success',
+		data: {
+			startTimestampMillis: spanStart - TRACE_PADDING_MS,
+			endTimestampMillis: spanStart + span.durationMs + TRACE_PADDING_MS,
+			rootServiceName: SPANS[0].service,
+			rootServiceEntryPoint: SPANS[0].operation,
+			rootSpanStatusCode: '200',
+			totalSpansCount: SPANS.length,
+			totalErrorSpansCount: SPANS.filter(({ failing }) => failing).length,
+			hasMissingSpans: false,
+		},
+	};
+};
+
+export const SPAN_LOGS_STATES = [
+	'span',
+	'trace only',
+	'none',
+	'loading',
+	'error',
+] as const;
+
+export type SpanLogsState = (typeof SPAN_LOGS_STATES)[number];
+
+/**
+ * Which of the drawer's log queries is asking: the span's own logs, the context
+ * either side of them, or the whole trace when the span has none.
+ */
+export type SpanLogScope = 'span' | 'before' | 'after' | 'trace';
+
+export const spanLogScopeOf = (expression: string): SpanLogScope => {
+	if (expression.includes('span_id')) {
+		return 'span';
+	}
+	if (expression.includes('id <')) {
+		return 'before';
+	}
+	return expression.includes('id >') ? 'after' : 'trace';
+};
+
+const SPAN_LOG_BODIES = [
+	'request received',
+	'cache miss, querying orders',
+	'payment provider timed out',
+	'response sent',
+];
+
+const CONTEXT_OFFSET_MS: Record<SpanLogScope, number> = {
+	before: -60_000,
+	span: 0,
+	after: 60_000,
+	trace: 0,
+};
+
+/**
+ * Log rows for one of the drawer's queries, placed in the middle of the window
+ * it asked for. The span-log queries send that window in microseconds.
+ */
+export const spanLogRows = ({
+	scope,
+	expression,
+	startMicros,
+	endMicros,
+}: {
+	scope: SpanLogScope;
+	expression: string;
+	startMicros: number;
+	endMicros: number;
+}): RawRow[] => {
+	const traceId = expression.match(/trace_id = '([^']+)'/)?.[1] ?? '';
+	const spanId = expression.match(/span_id = '([^']+)'/)?.[1] ?? '';
+	const middle = (startMicros + endMicros) / 2 / 1e3;
+
+	return SPAN_LOG_BODIES.map((body, index) => ({
+		timestamp: new Date(
+			middle + CONTEXT_OFFSET_MS[scope] + index * 100,
+		).toISOString(),
+		data: {
+			body,
+			id: `storybook-${scope}-log-${index + 1}`,
+			trace_id: traceId,
+			span_id: scope === 'span' ? spanId : '',
+			severity_text: index === 2 ? 'ERROR' : 'INFO',
+			severity_number: index === 2 ? 17 : 9,
+			attributes_string: {},
+			resources_string: { 'service.name': SPANS[0].service },
+			scope_name: '',
+		},
+	}));
+};
+
 const { resource, attribute } = TelemetrytypesFieldContextDTO;
 const { string: stringType, bool } = TelemetrytypesFieldDataTypeDTO;
 

frontend/src/pages/TracesModulePage/stories/spanDrawer/SpanDrawer.stories.tsx

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+
+import { tracesMocks } from '../TracesModulePage.stories.mocks';
+
+import TracesModulePage from '../../TracesModulePage';
+
+type TracesArgs = PageStoryArgs<typeof tracesMocks>;
+
+const pageStory = storyMocks(tracesMocks, { layout: 'app' });
+
+/**
+ * The span details drawer the explorer list opens on a row, one story per state
+ * of its trace summary and its Logs tab. Every story opens the same failing
+ * span; the Trace summary and Span logs controls pick what the drawer gets.
+ *
+ * Route: `/traces-explorer`.
+ */
+const meta = {
+	title: 'Pages/Traces/Explorer/Span Drawer',
+	tags: ['play'],
+	component: TracesModulePage,
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+	args: { spanDrawer: true },
+} satisfies Meta<TracesArgs>;
+
+export default meta;
+
+type Story = StoryObj<TracesArgs>;
+
+/** The page fetches before it renders its rows, which outlasts the 1s default. */
+const untilLoaded = { timeout: 15_000 };
+
+// The quick filters list the same span name, so the row is found by its test
+// id; the table renders its rows a few at a time, so it waits for this one.
+const openDrawer = async (): Promise<HTMLElement> => {
+	const row = await waitFor((): HTMLElement => {
+		const match = screen
+			.getAllByTestId(/^traces-table-row-/)
+			.find((candidate) => candidate.textContent?.includes('POST /api/orders'));
+
+		expect(match).toBeDefined();
+
+		return match as HTMLElement;
+	}, untilLoaded);
+
+	await userEvent.click(within(row).getByText('POST /api/orders'));
+
+	return screen.findByTestId('span-details-drawer');
+};
+
+const openLogsTab = async (): Promise<HTMLElement> => {
+	const drawer = await openDrawer();
+
+	await userEvent.click(within(drawer).getByRole('tab', { name: /Logs/ }));
+
+	return drawer;
+};
+
+/**
+ * The drawer on a failing span: its summary with % exec time, attributes, the
+ * exception event and a linked span, with up and down stepping through the page.
+ */
+export const Default: Story = {
+	play: async ({ mount }): Promise<void> => {
+		await mount();
+		const drawer = await openDrawer();
+
+		await expect(
+			await within(drawer).findByText(
+				/of total exec time/,
+				undefined,
+				untilLoaded,
+			),
+		).toBeVisible();
+	},
+};
+
+/** The Logs tab with the span's logs, between the logs just before and after them. */
+export const Logs: Story = {
+	args: { spanLogs: 'span' },
+	play: async ({ mount }): Promise<void> => {
+		await mount();
+		const drawer = await openLogsTab();
+
+		await expect(
+			(
+				await within(drawer).findAllByText(
+					/payment provider timed out/,
+					undefined,
+					untilLoaded,
+				)
+			)[0],
+		).toBeVisible();
+	},
+};
+
+/** The span has no logs of its own but its trace does, so the tab points to the trace's. */
+export const TraceOnlyLogs: Story = {
+	args: { spanLogs: 'trace only' },
+	play: async ({ mount }): Promise<void> => {
+		await mount();
+		const drawer = await openLogsTab();
+
+		await expect(
+			await within(drawer).findByText(
+				'No logs found for selected span. View logs for the current trace.',
+				undefined,
+				untilLoaded,
+			),
+		).toBeVisible();
+	},
+};
+
+/** Neither the span nor its trace has logs. */
+export const NoLogs: Story = {
+	args: { spanLogs: 'none' },
+	play: async ({ mount }): Promise<void> => {
+		await mount();
+		const drawer = await openLogsTab();
+
+		await expect(
+			await within(drawer).findByText(
+				'No logs found for this trace.',
+				undefined,
+				untilLoaded,
+			),
+		).toBeVisible();
+	},
+};
+
+/**
+ * The trace summary 404s, so the drawer speaks only for the span: no % exec
+ * time, logs over the span's own window and no trace-wide logs check.
+ */
+export const WithoutTraceSummary: Story = {
+	args: { traceSummary: 'not found', spanLogs: 'none' },
+	// The deliberate 404 is the state under test.
+	parameters: { allowConsoleErrors: true },
+	play: async ({ mount }): Promise<void> => {
+		await mount();
+		const drawer = await openLogsTab();
+
+		await expect(
+			await within(drawer).findByText(
+				'No logs found for this span.',
+				undefined,
+				untilLoaded,
+			),
+		).toBeVisible();
+		await expect(
+			within(drawer).queryByText(/of total exec time/),
+		).not.toBeInTheDocument();
+	},
+};
+
+/** The trace summary never answers: the Logs tab waits and its explorer link is off. */
+export const TraceSummaryLoading: Story = {
+	args: { traceSummary: 'loading' },
+	play: async ({ mount }): Promise<void> => {
+		await mount();
+		await openLogsTab();
+
+		await expect(
+			await screen.findByTestId('open-in-explorer-button'),
+		).toHaveAttribute('aria-disabled', 'true');
+	},
+};
+
+/** The log queries fail while the rest of the drawer renders. */
+export const LogsError: Story = {
+	args: { spanLogs: 'error' },
+	// The deliberate 500 is the state under test.
+	parameters: { allowConsoleErrors: true },
+	play: async ({ mount }): Promise<void> => {
+		await mount();
+		const drawer = await openLogsTab();
+
+		await expect(
+			await within(drawer).findByText(
+				/Something went wrong/,
+				undefined,
+				untilLoaded,
+			),
+		).toBeVisible();
+	},
+};

frontend/src/providers/QueryBuilder.tsx

@@ -475,12 +475,17 @@ export function QueryBuilderProvider({
 	const createNewBuilderQuery = useCallback(
 		(queries: IBuilderQuery[]): IBuilderQuery => {
 			const existNames = queries.map((item) => item.queryName);
+			// Hosts without a fixed data source (the panel editor) continue the
+			// previous query's signal rather than resetting to metrics.
+			const previous = queries[queries.length - 1];
 			const initialBuilderQuery =
-				initialQueryBuilderFormValuesMap[initialDataSource || DataSource.METRICS];
+				initialQueryBuilderFormValuesMap[
+					initialDataSource || previous?.dataSource || DataSource.METRICS
+				];
 
 			const newQuery: IBuilderQuery = {
 				...initialBuilderQuery,
-				source: queries?.[0]?.source || '',
+				source: previous?.source || '',
 				builderQueryType: queries?.[0]?.builderQueryType,
 				queryName: createNewBuilderItemName({ existNames, sourceNames: alphabet }),
 				expression: createNewBuilderItemName({

frontend/src/providers/__tests__/QueryBuilder.createNewBuilderQuery.dataSource.test.tsx

@@ -0,0 +1,104 @@
+import {
+	initialQueriesMap,
+	initialQueryBuilderFormValuesMap,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { act, AllTheProviders, renderHook } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+const renderQueryBuilder = (
+	initialQuery: Query,
+): ReturnType<
+	typeof renderHook<ReturnType<typeof useQueryBuilder>, unknown>
+> => {
+	const hook = renderHook(() => useQueryBuilder(), {
+		wrapper: AllTheProviders,
+	});
+
+	act(() => {
+		hook.result.current.initQueryBuilderData(initialQuery);
+	});
+
+	return hook;
+};
+
+describe('createNewBuilderQuery data source', () => {
+	it.each([DataSource.LOGS, DataSource.TRACES, DataSource.METRICS])(
+		'continues the previous %s query when the host fixes no data source',
+		(dataSource) => {
+			const { result } = renderQueryBuilder(initialQueriesMap[dataSource]);
+
+			act(() => {
+				result.current.addNewBuilderQuery();
+			});
+
+			const [, added] = result.current.currentQuery.builder.queryData;
+			expect(added.dataSource).toBe(dataSource);
+			expect(added.aggregations).toStrictEqual(
+				initialQueryBuilderFormValuesMap[dataSource].aggregations,
+			);
+		},
+	);
+
+	it('follows the last query when queries mix signals', () => {
+		const { result } = renderQueryBuilder(initialQueriesMap.logs);
+		act(() => {
+			result.current.addNewBuilderQuery();
+		});
+		act(() => {
+			result.current.handleSetQueryData(1, {
+				...initialQueryBuilderFormValuesMap.traces,
+				queryName: 'B',
+				expression: 'B',
+			});
+		});
+
+		act(() => {
+			result.current.addNewBuilderQuery();
+		});
+
+		expect(result.current.currentQuery.builder.queryData[2].dataSource).toBe(
+			DataSource.TRACES,
+		);
+	});
+
+	it('takes the source from the last query, not the first', () => {
+		const [metricsQuery] = initialQueriesMap.metrics.builder.queryData;
+		const { result } = renderQueryBuilder({
+			...initialQueriesMap.metrics,
+			builder: {
+				...initialQueriesMap.metrics.builder,
+				queryData: [
+					{ ...metricsQuery, source: '' },
+					{ ...metricsQuery, queryName: 'B', expression: 'B', source: 'meter' },
+				],
+			},
+		});
+
+		act(() => {
+			result.current.addNewBuilderQuery();
+		});
+
+		expect(result.current.currentQuery.builder.queryData[2]).toMatchObject({
+			dataSource: DataSource.METRICS,
+			source: 'meter',
+		});
+	});
+
+	it('uses the host’s fixed data source over the previous query', () => {
+		const { result } = renderQueryBuilder(initialQueriesMap.metrics);
+		act(() => {
+			result.current.handleSetConfig(PANEL_TYPES.TIME_SERIES, DataSource.LOGS);
+		});
+
+		act(() => {
+			result.current.addNewBuilderQuery();
+		});
+
+		expect(result.current.currentQuery.builder.queryData[1].dataSource).toBe(
+			DataSource.LOGS,
+		);
+	});
+});

frontend/src/utils/__tests__/buildExplorerNavigationUrl.test.ts

@@ -1,6 +1,7 @@
 import ROUTES from 'constants/routes';
 import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
 
 import { buildExplorerNavigationUrl } from '../buildExplorerNavigationUrl';
 
@@ -19,4 +20,14 @@ describe('buildExplorerNavigationUrl', () => {
 		expect(url).toContain(`${QueryParams.compositeQuery}=`);
 		expect(url).toContain(`${QueryParams.viewKey}=`);
 	});
+
+	it('JSON-encodes panelTypes so the explorer opens the right view', () => {
+		const url = buildExplorerNavigationUrl(
+			ROUTES.LOGS_EXPLORER,
+			initialQueriesMap[DataSource.LOGS],
+			{ [QueryParams.panelTypes]: PANEL_TYPES.TABLE },
+		);
+
+		expect(url).toContain(`${QueryParams.panelTypes}=%22table%22`);
+	});
 });

frontend/src/utils/__tests__/fieldContext.test.ts

@@ -0,0 +1,30 @@
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { toLegacyTagFilter } from '../fieldContext';
+
+const item = (type: string): TagFilter['items'][number] => ({
+	id: type,
+	key: { key: 'k', dataType: DataTypes.String, type },
+	op: '=',
+	value: 'v',
+});
+
+describe('toLegacyTagFilter', () => {
+	it('sends attribute keys as tag and leaves every other type as is', () => {
+		const filter: TagFilter = {
+			op: 'AND',
+			items: [
+				item('attribute'),
+				item('resource'),
+				item('tag'),
+				item(''),
+				item('spanSearchScope'),
+			],
+		};
+
+		expect(toLegacyTagFilter(filter).items.map((i) => i.key?.type)).toStrictEqual(
+			['tag', 'resource', 'tag', '', 'spanSearchScope'],
+		);
+	});
+});

frontend/src/utils/fieldContext.ts

@@ -0,0 +1,37 @@
+import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import type { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+// Legacy filter builders read `tag` / `resource`; any other context is a top-level field there.
+const FIELD_CONTEXT_TO_ATTRIBUTE_TYPE: Record<string, string> = {
+	[TelemetrytypesFieldContextDTO.attribute]: 'tag',
+	[TelemetrytypesFieldContextDTO.resource]: 'resource',
+};
+
+const ATTRIBUTE_TYPE_TO_FIELD_CONTEXT: Record<
+	string,
+	TelemetrytypesFieldContextDTO
+> = {
+	tag: TelemetrytypesFieldContextDTO.attribute,
+	attribute: TelemetrytypesFieldContextDTO.attribute,
+	resource: TelemetrytypesFieldContextDTO.resource,
+};
+
+export const fieldContextToAttributeType = (fieldContext?: string): string =>
+	(fieldContext && FIELD_CONTEXT_TO_ATTRIBUTE_TYPE[fieldContext]) || '';
+
+export const attributeTypeToFieldContext = (
+	type?: string | null,
+): TelemetrytypesFieldContextDTO | undefined =>
+	type ? ATTRIBUTE_TYPE_TO_FIELD_CONTEXT[type] : undefined;
+
+export const toLegacyTagFilter = (filter: TagFilter): TagFilter =>
+	filter && {
+		...filter,
+		items: (filter.items ?? []).map((item) => ({
+			...item,
+			key: item.key && {
+				...item.key,
+				type: FIELD_CONTEXT_TO_ATTRIBUTE_TYPE[item.key.type ?? ''] ?? item.key.type,
+			},
+		})),
+	};

frontend/src/utils/fieldValues.ts

@@ -0,0 +1,21 @@
+import { TelemetrytypesTelemetryFieldValuesDTO } from 'api/generated/services/sigNoz.schemas';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+// Numbers and bools stay raw so tags keep their value type.
+export const getValuesForDataType = (
+	values: TelemetrytypesTelemetryFieldValuesDTO | undefined,
+	dataType: DataTypes | undefined,
+): string[] => {
+	switch (dataType) {
+		case DataTypes.Int64:
+		case DataTypes.Float64:
+		case DataTypes.ArrayInt64:
+		case DataTypes.ArrayFloat64:
+			return (values?.numberValues ?? []) as unknown as string[];
+		case DataTypes.bool:
+		case DataTypes.ArrayBool:
+			return (values?.boolValues ?? []) as unknown as string[];
+		default:
+			return values?.stringValues ?? [];
+	}
+};

pkg/modules/llmpricingrule/impllmpricingrule/module.go

@@ -4,9 +4,13 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"log/slog"
+	"maps"
+	"sync"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/llmpricingrule"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
@@ -22,12 +26,14 @@ import (
 const unmappedModelsLookback = time.Hour
 
 type module struct {
-	store   llmpricingruletypes.Store
-	querier querier.Querier
+	store                  llmpricingruletypes.Store
+	querier                querier.Querier
+	telemetryMetadataStore telemetrytypes.MetadataStore
+	logger                 *slog.Logger
 }
 
-func NewModule(store llmpricingruletypes.Store, querier querier.Querier) llmpricingrule.Module {
-	return &module{store: store, querier: querier}
+func NewModule(store llmpricingruletypes.Store, querier querier.Querier, telemetryMetadataStore telemetrytypes.MetadataStore, providerSettings factory.ProviderSettings) llmpricingrule.Module {
+	return &module{store: store, querier: querier, telemetryMetadataStore: telemetryMetadataStore, logger: providerSettings.Logger}
 }
 
 func (module *module) List(ctx context.Context, orgID valuer.UUID, offset, limit int, search string, isOverride *bool) ([]*llmpricingruletypes.LLMPricingRule, int, error) {
@@ -51,13 +57,47 @@ func (module *module) ListUnmappedModels(ctx context.Context, orgID valuer.UUID)
 		return nil, err
 	}
 
-	unmapped := make([]*llmpricingruletypes.UnmappedModel, 0, len(models))
-	for _, m := range models {
-		if !llmpricingruletypes.ModelMatchesAnyRule(m.ModelName, rules) {
-			unmapped = append(unmapped, m)
+	return llmpricingruletypes.UnmappedModels(models, rules), nil
+}
+
+// Collect keeps the rule counts even when ClickHouse is unreachable: the
+// counts that depend on it are skipped so the reporter retains their last value.
+// Models come from the traces tag table rather than a span scan, so the
+// unmapped count covers the metadata lookback instead of the last hour.
+func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[string]any, error) {
+	rules, err := module.listAllRules(ctx, orgID)
+	if err != nil {
+		return nil, err
+	}
+	stats := llmpricingruletypes.NewStatsFromRules(rules)
+
+	selectors := aiobservabilitytypes.StatsFieldValueSelectors(time.Now())
+	results := make([]*telemetrytypes.TelemetryFieldValues, len(selectors))
+	var lookups sync.WaitGroup
+	for i, selector := range selectors {
+		lookups.Go(func() {
+			fieldValues, _, err := module.telemetryMetadataStore.GetAllValues(ctx, orgID, selector)
+			if err != nil {
+				module.logger.DebugContext(ctx, "failed to collect gen_ai attribute stats", slog.String("key", selector.Name), errors.Attr(err))
+				return
+			}
+			results[i] = fieldValues
+		})
+	}
+	lookups.Wait()
+
+	values := make(map[string]*telemetrytypes.TelemetryFieldValues, len(selectors))
+	for i, selector := range selectors {
+		if results[i] != nil {
+			values[selector.Name] = results[i]
 		}
 	}
-	return unmapped, nil
+	maps.Copy(stats, aiobservabilitytypes.NewStatsFromFieldValues(values))
+	if models := values[aiobservabilitytypes.GenAIRequestModel]; models != nil {
+		maps.Copy(stats, llmpricingruletypes.NewStatsFromModels(models.StringValues, rules))
+	}
+
+	return stats, nil
 }
 
 // CreateOrUpdate saves a batch of pricing rules. isOverride decides how a rule

pkg/modules/llmpricingrule/llmpricingrule.go

@@ -5,6 +5,7 @@ import (
 	"net/http"
 
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
+	"github.com/SigNoz/signoz/pkg/statsreporter"
 	"github.com/SigNoz/signoz/pkg/types/llmpricingruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
@@ -13,6 +14,8 @@ type Module interface {
 	// Since this module interacts with OpAMP, it must implement the AgentFeature interface.
 	agentConf.AgentFeature
 
+	statsreporter.StatsCollector
+
 	List(ctx context.Context, orgID valuer.UUID, offset, limit int, search string, isOverride *bool) ([]*llmpricingruletypes.LLMPricingRule, int, error)
 	Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*llmpricingruletypes.LLMPricingRule, error)
 	CreateOrUpdate(ctx context.Context, orgID valuer.UUID, userEmail string, rules []*llmpricingruletypes.UpdatableLLMPricingRule) (err error)

pkg/signoz/module.go

@@ -164,7 +164,7 @@ func NewModules(
 		CloudIntegration:     cloudIntegrationModule,
 		TraceDetail:          impltracedetail.NewModule(impltracedetail.NewTraceStore(telemetryStore, telemetryMetadataStore, schemaMetadataStore, fl), providerSettings, config.TraceDetail),
 		SpanMapper:           spanMapper,
-		LLMPricingRule:       impllmpricingrule.NewModule(impllmpricingrule.NewStore(sqlstore), querier),
+		LLMPricingRule:       impllmpricingrule.NewModule(impllmpricingrule.NewStore(sqlstore), querier, telemetryMetadataStore, providerSettings),
 		Tag:                  tagModule,
 	}
 }

pkg/signoz/signoz.go

@@ -572,6 +572,7 @@ func New(
 		cloudIntegrationModule,
 		modules.LogsPipeline,
 		modules.InfraMonitoring,
+		modules.LLMPricingRule,
 		querier,
 		authz,
 	}

pkg/telemetrystore/clickhousetelemetrystore/provider.go

@@ -20,6 +20,9 @@ var (
 	ErrCodeUnknownIdentifier = errors.MustNewCode("unknown_identifier")
 	ErrCodeIllegalArgument   = errors.MustNewCode("illegal_argument")
 
+	ErrCodeDistributedSubqueryDenied = errors.MustNewCode("distributed_subquery_denied")
+	ErrCodeDecimalOverflow           = errors.MustNewCode("decimal_overflow")
+
 	ErrCodeQueryCanceled   = errors.MustNewCode("query_canceled")
 	ErrCodeQueryTimeout    = errors.MustNewCode("query_timeout")
 	ErrCodeExecutionFailed = errors.MustNewCode("execution_failed")
@@ -72,6 +75,18 @@ var clickHouseExceptionWrappers = map[chproto.Error]func(cause error, ex *clickh
 	chproto.ErrTooLessArgumentsForFunction: func(cause error, ex *clickhouse.Exception) error {
 		return errors.WrapInvalidInputf(cause, ErrCodeIllegalArgument, "too few arguments to function: %s", ex.Message)
 	},
+	chproto.ErrBadGet: func(cause error, ex *clickhouse.Exception) error {
+		return errors.WrapInvalidInputf(cause, ErrCodeIllegalArgument, "parameter of the wrong type: %s", ex.Message).
+			WithSuggestions("write numeric function parameters in the type the function expects, for example 1.0 rather than 1 where it takes a Float64")
+	},
+	chproto.ErrDistributedInJoinSubqueryDenied: func(cause error, ex *clickhouse.Exception) error {
+		return errors.WrapInvalidInputf(cause, ErrCodeDistributedSubqueryDenied, "IN or JOIN subquery over a distributed table is not allowed: %s", ex.Message).
+			WithSuggestions("use GLOBAL IN or GLOBAL JOIN for the subquery")
+	},
+	chproto.ErrDecimalOverflow: func(cause error, ex *clickhouse.Exception) error {
+		return errors.WrapInvalidInputf(cause, ErrCodeDecimalOverflow, "decimal overflow: %s", ex.Message).
+			WithSuggestions("cast the Decimal values to Float64, or to a wider Decimal such as Decimal128, before the arithmetic")
+	},
 }
 
 type provider struct {

pkg/types/aiobservabilitytypes/stats.go

@@ -0,0 +1,55 @@
+package aiobservabilitytypes
+
+import (
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+const (
+	// statsLookback reaches into the previous day; the metadata store rounds
+	// the start down to a day boundary.
+	statsLookback = 24 * time.Hour
+	// statsModelValuesLimit caps the model list, which also feeds the
+	// unmapped model count. One value is enough for the other keys.
+	statsModelValuesLimit = 100
+)
+
+// statsAttributeKeys are the gen_ai span attributes whose recent presence the
+// stats reporter tracks under telemetry.traces.<key>.exists.
+var statsAttributeKeys = []string{GenAIRequestModel, GenAIToolName, GenAIAgentName}
+
+// StatsFieldValueSelectors look up each tracked attribute's string values
+// since the start of the previous day.
+func StatsFieldValueSelectors(now time.Time) []*telemetrytypes.FieldValueSelector {
+	selectors := make([]*telemetrytypes.FieldValueSelector, 0, len(statsAttributeKeys))
+	for _, key := range statsAttributeKeys {
+		limit := 1
+		if key == GenAIRequestModel {
+			limit = statsModelValuesLimit
+		}
+		selectors = append(selectors, &telemetrytypes.FieldValueSelector{
+			FieldKeySelector: &telemetrytypes.FieldKeySelector{
+				StartUnixMilli: now.Add(-statsLookback).UnixMilli(),
+				Signal:         telemetrytypes.SignalTraces,
+				FieldContext:   telemetrytypes.FieldContextAttribute,
+				FieldDataType:  telemetrytypes.FieldDataTypeString,
+				Name:           key,
+			},
+			Limit: limit,
+		})
+	}
+	return selectors
+}
+
+// NewStatsFromFieldValues reports whether each looked-up key had a value. Keys
+// absent from values are left out, so a failed lookup never reports false.
+func NewStatsFromFieldValues(values map[string]*telemetrytypes.TelemetryFieldValues) map[string]any {
+	stats := make(map[string]any, len(values))
+	for _, key := range statsAttributeKeys {
+		if fieldValues := values[key]; fieldValues != nil {
+			stats["telemetry.traces."+key+".exists"] = len(fieldValues.StringValues) > 0
+		}
+	}
+	return stats
+}

pkg/types/aiobservabilitytypes/stats_test.go

@@ -0,0 +1,73 @@
+package aiobservabilitytypes
+
+import (
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+func TestNewStatsFromFieldValues(t *testing.T) {
+	testCases := []struct {
+		name   string
+		values map[string]*telemetrytypes.TelemetryFieldValues
+		want   map[string]any
+	}{
+		{
+			name: "NoLookups_NothingReported",
+			want: map[string]any{},
+		},
+		{
+			name: "EveryKeySeen_AllTrue",
+			values: map[string]*telemetrytypes.TelemetryFieldValues{
+				GenAIRequestModel: {StringValues: []string{"gpt-5-nano"}},
+				GenAIToolName:     {StringValues: []string{"search"}},
+				GenAIAgentName:    {StringValues: []string{"planner"}},
+			},
+			want: map[string]any{
+				"telemetry.traces.gen_ai.request.model.exists": true,
+				"telemetry.traces.gen_ai.tool.name.exists":     true,
+				"telemetry.traces.gen_ai.agent.name.exists":    true,
+			},
+		},
+		{
+			name: "EmptyAndMissingLookups_OnlyLookedUpKeysReported",
+			values: map[string]*telemetrytypes.TelemetryFieldValues{
+				GenAIRequestModel:  {StringValues: []string{"gpt-5-nano"}},
+				GenAIToolName:      {},
+				GenAIOperationName: {StringValues: []string{"chat"}},
+			},
+			want: map[string]any{
+				"telemetry.traces.gen_ai.request.model.exists": true,
+				"telemetry.traces.gen_ai.tool.name.exists":     false,
+			},
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			assert.Equal(t, testCase.want, NewStatsFromFieldValues(testCase.values))
+		})
+	}
+}
+
+func TestStatsFieldValueSelectors(t *testing.T) {
+	now := time.Date(2026, 11, 3, 10, 0, 0, 0, time.UTC)
+
+	selectors := StatsFieldValueSelectors(now)
+
+	require.Len(t, selectors, 3)
+	for _, selector := range selectors {
+		assert.Equal(t, now.Add(-24*time.Hour).UnixMilli(), selector.StartUnixMilli, selector.Name)
+		assert.Equal(t, telemetrytypes.SignalTraces, selector.Signal, selector.Name)
+		assert.Equal(t, telemetrytypes.FieldContextAttribute, selector.FieldContext, selector.Name)
+		assert.Equal(t, telemetrytypes.FieldDataTypeString, selector.FieldDataType, selector.Name)
+	}
+	assert.Equal(t, GenAIRequestModel, selectors[0].Name)
+	assert.Equal(t, 100, selectors[0].Limit)
+	assert.Equal(t, 1, selectors[1].Limit)
+	assert.Equal(t, 1, selectors[2].Limit)
+}

pkg/types/dashboardtypes/perses_dashboard_stats.go

@@ -1,6 +1,7 @@
 package dashboardtypes
 
 import (
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
@@ -10,6 +11,7 @@ const (
 	statKeyPanelTracesCount  = "dashboard.panels.traces.count"
 	statKeyPanelMetricsCount = "dashboard.panels.metrics.count"
 	statKeyPanelLogsCount    = "dashboard.panels.logs.count"
+	statKeyPanelAICount      = "dashboard.panels.ai.count"
 )
 
 // panelSignalStatKeys maps a builder query's signal to the stat it contributes
@@ -22,14 +24,17 @@ var panelSignalStatKeys = map[telemetrytypes.Signal]string{
 }
 
 // NewStatsFromStorableDashboards reports the stats of stored dashboards. Rows that
-// do not decode as v2 contribute to dashboard.count only.
+// do not decode as v2 contribute to dashboard.count only. System dashboards are
+// provisioned into every org, so they are left out of every count.
 func NewStatsFromStorableDashboards(dashboards []*StorableDashboard) map[string]any {
-	stats := newPanelStats()
+	stats := newStats()
 
 	for _, dashboard := range dashboards {
-		if dashboard == nil {
+		if dashboard == nil || dashboard.Source == SourceSystem {
 			continue
 		}
+		incrementStat(stats, statKeyDashboardCount)
+
 		dashboardV2, err := dashboard.ToDashboardV2(nil)
 		if err != nil {
 			continue
@@ -37,7 +42,6 @@ func NewStatsFromStorableDashboards(dashboards []*StorableDashboard) map[string]
 		addPanelStats(&dashboardV2.Spec, stats)
 	}
 
-	stats[statKeyDashboardCount] = int64(len(dashboards))
 	return stats
 }
 
@@ -45,24 +49,26 @@ func NewStatsFromStorableDashboards(dashboards []*StorableDashboard) map[string]
 // created, straight off the postable spec — the create path has no reason to make
 // a storable round-trip just to be counted.
 func NewStatsFromPostableDashboardV2(postable PostableDashboardV2) map[string]any {
-	stats := newPanelStats()
+	stats := newStats()
+	stats[statKeyDashboardCount] = int64(1)
 	addPanelStats(&postable.Spec, stats)
 
-	stats[statKeyDashboardCount] = int64(1)
 	return stats
 }
 
-func newPanelStats() map[string]any {
+func newStats() map[string]any {
 	return map[string]any{
+		statKeyDashboardCount:    int64(0),
 		statKeyPanelCount:        int64(0),
 		statKeyPanelTracesCount:  int64(0),
 		statKeyPanelMetricsCount: int64(0),
 		statKeyPanelLogsCount:    int64(0),
+		statKeyPanelAICount:      int64(0),
 	}
 }
 
 // addPanelStats counts the panels of a v2 spec, and each panel's queries against
-// the signal they read.
+// the signal they read. AI queries count only towards the AI stat.
 func addPanelStats(spec *DashboardSpec, stats map[string]any) {
 	for _, panel := range spec.Panels {
 		if panel == nil {
@@ -76,6 +82,10 @@ func addPanelStats(spec *DashboardSpec, stats map[string]any) {
 				continue
 			}
 			for _, envelope := range composite.Queries {
+				if envelope.Type == qb.QueryTypeBuilderAI {
+					incrementStat(stats, statKeyPanelAICount)
+					continue
+				}
 				if key, ok := panelSignalStatKeys[envelope.GetSignal()]; ok {
 					incrementStat(stats, key)
 				}

pkg/types/dashboardtypes/perses_dashboard_stats_test.go

@@ -117,20 +117,60 @@ func TestNewStatsFromStorableDashboardsCountsCompositeSubQueries(t *testing.T) {
 	assert.Equal(t, int64(1), stats[statKeyPanelLogsCount])
 }
 
-// An AI builder query is always a traces query, so it counts towards traces.
-func TestNewStatsFromStorableDashboardsCountsAIBuilderQueries(t *testing.T) {
-	aiBuilder := `{
+func statsAIBuilderQuery() string {
+	return `{
 		"kind": "time_series",
 		"spec": {"plugin": {"kind": "signoz/AIBuilderQuery", "spec": {"name": "A", "aggregations": [{"expression": "count()"}]}}}
 	}`
-	dashboard := newStatsStorableV2(t, `"p1": `+statsPanel(aiBuilder))
+}
+
+// An AI builder query reads traces but counts only towards the AI stat.
+func TestNewStatsFromStorableDashboardsCountsAIBuilderQueries(t *testing.T) {
+	dashboard := newStatsStorableV2(t, `"p1": `+statsPanel(statsAIBuilderQuery()))
 
 	stats := NewStatsFromStorableDashboards([]*StorableDashboard{dashboard})
 
 	assert.Equal(t, int64(1), stats[statKeyPanelCount])
-	assert.Equal(t, int64(1), stats[statKeyPanelTracesCount])
+	assert.Equal(t, int64(0), stats[statKeyPanelTracesCount])
 	assert.Equal(t, int64(0), stats[statKeyPanelMetricsCount])
 	assert.Equal(t, int64(0), stats[statKeyPanelLogsCount])
+	assert.Equal(t, int64(1), stats[statKeyPanelAICount])
+}
+
+func TestNewStatsFromStorableDashboardsCountsAICompositeSubQueries(t *testing.T) {
+	composite := `{
+		"kind": "time_series",
+		"spec": {"plugin": {"kind": "signoz/CompositeQuery", "spec": {"queries": [
+			{"type": "builder_ai_query", "spec": {"name": "A", "aggregations": [{"expression": "count()"}]}},
+			{"type": "builder_query", "spec": ` + statsBuilderQuerySpec("B", "logs") + `}
+		]}}}
+	}`
+	dashboard := newStatsStorableV2(t, `
+		"p1": `+statsPanel(composite)+`,
+		"p2": `+statsPanel(statsAIBuilderQuery())+`
+	`)
+
+	stats := NewStatsFromStorableDashboards([]*StorableDashboard{dashboard})
+
+	assert.Equal(t, int64(2), stats[statKeyPanelCount])
+	assert.Equal(t, int64(2), stats[statKeyPanelAICount])
+	assert.Equal(t, int64(0), stats[statKeyPanelTracesCount])
+	assert.Equal(t, int64(1), stats[statKeyPanelLogsCount])
+}
+
+func TestNewStatsFromStorableDashboardsSkipsSystemDashboards(t *testing.T) {
+	system := newStatsStorableV2(t, `"p1": `+statsPanel(statsAIBuilderQuery()))
+	system.Source = SourceSystem
+	system.Name = SystemDashboardNamePrefix + "overview"
+	user := newStatsStorableV2(t, `"p1": `+statsPanel(statsBuilderQuery("logs")))
+
+	stats := NewStatsFromStorableDashboards([]*StorableDashboard{system, user})
+
+	assert.Equal(t, int64(1), stats[statKeyDashboardCount])
+	assert.Equal(t, int64(1), stats[statKeyPanelCount])
+	assert.Equal(t, int64(0), stats[statKeyPanelTracesCount])
+	assert.Equal(t, int64(0), stats[statKeyPanelAICount])
+	assert.Equal(t, int64(1), stats[statKeyPanelLogsCount])
 }
 
 // promql and clickhouse queries carry no signal, so they land in the panel total
@@ -215,6 +255,17 @@ func TestNewStatsFromPostableDashboardV2(t *testing.T) {
 	assert.Equal(t, int64(1), stats[statKeyPanelLogsCount])
 	assert.Equal(t, int64(1), stats[statKeyPanelTracesCount])
 	assert.Equal(t, int64(0), stats[statKeyPanelMetricsCount])
+	assert.Equal(t, int64(0), stats[statKeyPanelAICount])
+}
+
+func TestNewStatsFromPostableDashboardV2CountsAIBuilderQueries(t *testing.T) {
+	postable := newStatsPostableV2(t, `"p1": `+statsPanel(statsAIBuilderQuery()))
+
+	stats := NewStatsFromPostableDashboardV2(postable)
+
+	assert.Equal(t, int64(1), stats[statKeyDashboardCount])
+	assert.Equal(t, int64(1), stats[statKeyPanelCount])
+	assert.Equal(t, int64(1), stats[statKeyPanelAICount])
 }
 
 func TestNewStatsFromPostableDashboardV2WithNoPanels(t *testing.T) {
@@ -233,4 +284,5 @@ func TestNewStatsFromStorableDashboardsWithNoDashboards(t *testing.T) {
 	assert.Equal(t, int64(0), stats[statKeyPanelTracesCount])
 	assert.Equal(t, int64(0), stats[statKeyPanelMetricsCount])
 	assert.Equal(t, int64(0), stats[statKeyPanelLogsCount])
+	assert.Equal(t, int64(0), stats[statKeyPanelAICount])
 }

pkg/types/llmpricingruletypes/pricing.go

@@ -277,3 +277,13 @@ func ModelMatchesAnyRule(model string, rules []*LLMPricingRule) bool {
 	}
 	return false
 }
+
+func UnmappedModels(models []*UnmappedModel, rules []*LLMPricingRule) []*UnmappedModel {
+	unmapped := make([]*UnmappedModel, 0, len(models))
+	for _, model := range models {
+		if !ModelMatchesAnyRule(model.ModelName, rules) {
+			unmapped = append(unmapped, model)
+		}
+	}
+	return unmapped
+}

pkg/types/llmpricingruletypes/stats.go

@@ -0,0 +1,31 @@
+package llmpricingruletypes
+
+// NewStatsFromRules reports the rules users added themselves and the synced
+// defaults users pinned.
+func NewStatsFromRules(rules []*LLMPricingRule) map[string]any {
+	custom, overrides := int64(0), int64(0)
+	for _, rule := range rules {
+		switch {
+		case rule.SourceID == nil:
+			custom++
+		case rule.IsOverride:
+			overrides++
+		}
+	}
+
+	return map[string]any{
+		"llmpricingrule.custom.count":   custom,
+		"llmpricingrule.override.count": overrides,
+	}
+}
+
+func NewStatsFromModels(models []string, rules []*LLMPricingRule) map[string]any {
+	unmapped := int64(0)
+	for _, model := range models {
+		if !ModelMatchesAnyRule(model, rules) {
+			unmapped++
+		}
+	}
+
+	return map[string]any{"llmpricingrule.unmapped_model.count": unmapped}
+}

pkg/types/llmpricingruletypes/stats_test.go

@@ -0,0 +1,65 @@
+package llmpricingruletypes
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+func TestNewStatsFromRules(t *testing.T) {
+	sourceID := valuer.GenerateUUID()
+
+	testCases := []struct {
+		name  string
+		rules []*LLMPricingRule
+		want  map[string]any
+	}{
+		{
+			name: "NoRules",
+			want: map[string]any{
+				"llmpricingrule.custom.count":   int64(0),
+				"llmpricingrule.override.count": int64(0),
+			},
+		},
+		{
+			name: "CustomPinnedAndSyncedRules_CountedSeparately",
+			rules: []*LLMPricingRule{
+				{IsOverride: true},
+				{IsOverride: false},
+				{SourceID: &sourceID, IsOverride: true},
+				{SourceID: &sourceID, IsOverride: false},
+			},
+			want: map[string]any{
+				"llmpricingrule.custom.count":   int64(2),
+				"llmpricingrule.override.count": int64(1),
+			},
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			assert.Equal(t, testCase.want, NewStatsFromRules(testCase.rules))
+		})
+	}
+}
+
+func TestNewStatsFromModels(t *testing.T) {
+	rules := []*LLMPricingRule{{ModelPattern: StringSlice{"gpt-*"}}}
+
+	testCases := []struct {
+		name   string
+		models []string
+		want   int64
+	}{
+		{name: "NoModels", want: 0},
+		{name: "PricedAndUnpricedModels_UnpricedCounted", models: []string{"gpt-5-nano", "claude-haiku-5-5", "gemini-3"}, want: 2},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			assert.Equal(t, map[string]any{"llmpricingrule.unmapped_model.count": testCase.want}, NewStatsFromModels(testCase.models, rules))
+		})
+	}
+}