Merge branch 'main' into feat/quick-filters-use-field-api

* feat(dashboard-v2): build V5 variables payload from selection

Add buildVariablesPayload, a pure builder mapping a dashboard's variable
definitions + runtime selection into the V5 query-range `variables` map
({ name: { type, value } }). Mirrors V1 getDashboardVariables: maps the
QUERY/CUSTOM/TEXT/DYNAMIC UI types to wire types, collapses a multi-select
dynamic ALL to the __all__ sentinel, falls back to configured defaults, and
omits empties. buildQueryRangeRequest now accepts a `variables` arg (defaults
to {}) instead of hardcoding an empty map.

* feat(dashboard-v2): add resolvedVariables store channel

Add a transient (non-persisted) resolvedVariables map to the variable-selection
slice, keyed by dashboardId, with a setResolvedVariables setter and a
selectResolvedVariables selector. This is the published-to-store channel the
panel query reads from, mirroring the edit-context publish pattern so the
dashboard spec is not threaded down the panel tree.

* feat(dashboard-v2): substitute variable selection into panel queries

Add useResolvedVariables, which derives the variable definitions from the spec,
reads the runtime selection from the store, builds the V5 payload, and publishes
it via setResolvedVariables. DashboardContainer calls it once. usePanelQuery
reads selectResolvedVariables(dashboardId) and threads it into the request and
the query key, so each panel (and the editor preview) substitutes the bar's
selected values and refetches when a selection changes.

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -11,6 +11,7 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import { isKeyMatch } from './utils';
+import { CheckedState } from '../../types';
 
 export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
 export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
@@ -148,6 +149,7 @@ export function applyCheckboxToggle({
 	value,
 	checked,
 	isOnlyOrAllClicked,
+	previousState,
 }: {
 	currentQuery: Query;
 	activeQueryIndex: number;
@@ -157,6 +159,7 @@ export function applyCheckboxToggle({
 	value: string;
 	checked: boolean;
 	isOnlyOrAllClicked: boolean;
+	previousState?: CheckedState;
 }): Query {
 	const activeItems =
 		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
@@ -216,49 +219,119 @@ export function applyCheckboxToggle({
 			);
 			if (currentFilter) {
 				const runningOperator = currentFilter?.op;
-				switch (runningOperator) {
-					case 'in':
-						if (checked) {
-							// if it's an IN operator then if we are checking another value it get's added to the
-							// filter clause. example -  key IN [value1, currentSelectedValue]
-							if (isArray(currentFilter.value)) {
-								const newFilter = {
-									...currentFilter,
-									value: [...currentFilter.value, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else {
-								// if the current state wasn't an array we make it one and add our value
-								const newFilter = {
-									...currentFilter,
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							}
-						} else if (!checked) {
-							// if we are removing some value when the running operator is IN we filter.
-							// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
-							if (isArray(currentFilter.value)) {
-								const newFilter = {
-									...currentFilter,
-									value: currentFilter.value.filter((val) => val !== value),
-								};
 
-								if (newFilter.value.length === 0) {
+				// Indeterminate items get added to the existing operator (in or not in)
+				if (previousState === 'indeterminate') {
+					if (isArray(currentFilter.value)) {
+						const newFilter = {
+							...currentFilter,
+							value: [...currentFilter.value, value],
+						};
+						query.filters.items = query.filters.items.map((item) => {
+							if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+								return newFilter;
+							}
+							return item;
+						});
+					} else {
+						const newFilter = {
+							...currentFilter,
+							value: [currentFilter.value as string, value],
+						};
+						query.filters.items = query.filters.items.map((item) => {
+							if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+								return newFilter;
+							}
+							return item;
+						});
+					}
+				} else {
+					switch (runningOperator) {
+						case 'in':
+							if (checked) {
+								// if it's an IN operator then if we are checking another value it get's added to the
+								// filter clause. example -  key IN [value1, currentSelectedValue]
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: [...currentFilter.value, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								} else {
+									// if the current state wasn't an array we make it one and add our value
+									const newFilter = {
+										...currentFilter,
+										value: [currentFilter.value as string, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else if (!checked) {
+								// if we are removing some value when the running operator is IN we filter.
+								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: currentFilter.value.filter((val) => val !== value),
+									};
+
+									if (newFilter.value.length === 0) {
+										query.filters.items = query.filters.items.filter(
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+										);
+									} else {
+										query.filters.items = query.filters.items.map((item) => {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+												return newFilter;
+											}
+											return item;
+										});
+									}
+								} else {
+									// if not an array remove the whole thing altogether!
 									query.filters.items = query.filters.items.filter(
 										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
+								}
+							}
+							break;
+						case 'nin':
+						case 'not in': {
+							// NOT IN means "exclude these values"
+							// Check if value is currently in the exclusion list
+							const isValueInFilter = isArray(currentFilter.value)
+								? currentFilter.value.includes(value)
+								: currentFilter.value === value;
+
+							if (!checked || !isValueInFilter) {
+								// Add to NOT IN when:
+								// - checked=false (user explicitly unchecked to exclude)
+								// - checked=true but value not in filter (clicking "other" value to exclude)
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: [...currentFilter.value, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
 								} else {
+									const newFilter = {
+										...currentFilter,
+										value: [currentFilter.value as string, value],
+									};
 									query.filters.items = query.filters.items.map((item) => {
 										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
@@ -267,125 +340,90 @@ export function applyCheckboxToggle({
 									});
 								}
 							} else {
-								// if not an array remove the whole thing altogether!
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-						}
-						break;
-					case 'nin':
-					case 'not in':
-						// if the current running operator is NIN then when unchecking the value it gets
-						// added to the clause like key NIN [value1 , currentUnselectedValue]
-						if (!checked) {
-							// in case of array add the currentUnselectedValue to the list.
-							if (isArray(currentFilter.value)) {
-								const newFilter = {
-									...currentFilter,
-									value: [...currentFilter.value, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
+								// Remove from NOT IN when value IS in filter and checked=true
+								// (user wants to include this value back)
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: currentFilter.value.filter((val) => val !== value),
+									};
+									if (newFilter.value.length === 0) {
+										query.filters.items = query.filters.items.filter(
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+										);
+										if (query.filter?.expression) {
+											query.filter.expression = removeKeysFromExpression(
+												query.filter.expression,
+												[filter.attributeKey.key],
+											);
+										}
+									} else {
+										query.filters.items = query.filters.items.map((item) => {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+												return newFilter;
+											}
+											return item;
+										});
 									}
-									return item;
-								});
-							} else {
-								// in case of not an array make it one!
-								const newFilter = {
-									...currentFilter,
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							}
-						} else if (checked) {
-							// opposite of above!
-							if (isArray(currentFilter.value)) {
-								const newFilter = {
-									...currentFilter,
-									value: currentFilter.value.filter((val) => val !== value),
-								};
-								if (newFilter.value.length === 0) {
-									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-									);
-									if (query.filter?.expression) {
+								} else {
+									const newFilter = {
+										...currentFilter,
+										value: currentFilter.value === value ? null : currentFilter.value,
+									};
+									if (newFilter.value === null && query.filter?.expression) {
 										query.filter.expression = removeKeysFromExpression(
 											query.filter.expression,
 											[filter.attributeKey.key],
 										);
 									}
-								} else {
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								}
-							} else {
-								const newFilter = {
-									...currentFilter,
-									value: currentFilter.value === value ? null : currentFilter.value,
-								};
-								if (newFilter.value === null && query.filter?.expression) {
-									query.filter.expression = removeKeysFromExpression(
-										query.filter.expression,
-										[filter.attributeKey.key],
+									query.filters.items = query.filters.items.filter(
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
 								}
+							}
+							break;
+						}
+						case '=':
+							if (checked) {
+								const newFilter = {
+									...currentFilter,
+									op: getOperatorValue(OPERATORS.IN),
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							} else if (!checked) {
 								query.filters.items = query.filters.items.filter(
 									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
 							}
-						}
-						break;
-					case '=':
-						if (checked) {
-							const newFilter = {
-								...currentFilter,
-								op: getOperatorValue(OPERATORS.IN),
-								value: [currentFilter.value as string, value],
-							};
-							query.filters.items = query.filters.items.map((item) => {
-								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-									return newFilter;
-								}
-								return item;
-							});
-						} else if (!checked) {
-							query.filters.items = query.filters.items.filter(
-								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-							);
-						}
-						break;
-					case '!=':
-						if (!checked) {
-							const newFilter = {
-								...currentFilter,
-								op: getNotInOperator(source),
-								value: [currentFilter.value as string, value],
-							};
-							query.filters.items = query.filters.items.map((item) => {
-								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-									return newFilter;
-								}
-								return item;
-							});
-						} else if (checked) {
-							query.filters.items = query.filters.items.filter(
-								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-							);
-						}
-						break;
-					default:
-						break;
+							break;
+						case '!=':
+							if (!checked) {
+								const newFilter = {
+									...currentFilter,
+									op: getNotInOperator(source),
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							} else if (checked) {
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
+							}
+							break;
+						default:
+							break;
+					}
 				}
 			}
 		} else {

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterActions.ts

@@ -10,6 +10,7 @@ import {
 	applyCheckboxToggle,
 	clearFilterFromQuery,
 } from './checkboxFilterQuery';
+import { CheckedState } from '../../types';
 
 interface UseCheckboxFilterActionsProps {
 	filter: IQuickFiltersConfig;
@@ -24,6 +25,7 @@ interface UseCheckboxFilterActionsReturn {
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
+		previousState?: CheckedState,
 	) => void;
 	onClear: () => void;
 }
@@ -53,6 +55,7 @@ function useCheckboxFilterActions({
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
+		previousState?: CheckedState,
 	): void => {
 		dispatch(
 			applyCheckboxToggle({
@@ -64,6 +67,7 @@ function useCheckboxFilterActions({
 				value,
 				checked,
 				isOnlyOrAllClicked,
+				previousState,
 			}),
 		);
 	};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.existingQuery.test.tsx

@@ -0,0 +1,302 @@
+import { screen } from '@testing-library/react';
+import { server, rest } from 'mocks-server/server';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../types';
+
+import CheckboxFilterV2 from './CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	setupServer,
+} from './CheckboxFilterV2.testUtils';
+
+const USE_FIELD_APIS_AUTO_DERIVE = {
+	...DEFAULT_USE_FIELD_APIS,
+	existingQuery: undefined,
+};
+
+setupServer();
+
+describe('CheckboxFilterV2 - existingQuery calculation', () => {
+	const captureExistingQuery = (): Promise<string | null> =>
+		new Promise((resolve) => {
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					const existingQuery = req.url.searchParams.get('existingQuery');
+					resolve(existingQuery);
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues: [],
+									stringValues: ['test'],
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+		});
+
+	describe('useFieldApis.existingQuery takes precedence', () => {
+		it('uses useFieldApis.existingQuery when provided', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'custom.query = "value"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'should.be.ignored = "yes"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe('custom.query = "value"');
+		});
+
+		it('returns undefined when useFieldApis.existingQuery is null', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: null,
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'should.be.ignored = "yes"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBeNull();
+		});
+	});
+
+	describe('V5 filter.expression preferred over V3 filters.items', () => {
+		it('uses V5 filter.expression when both exist', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'from-v3-items',
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'v5.expression = "preferred"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe('v5.expression = "preferred"');
+		});
+
+		it('uses V5 filter.expression when no V3 items exist', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'only.v5 = "expression"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe('only.v5 = "expression"');
+		});
+	});
+
+	describe('V3 filters.items fallback', () => {
+		it('converts V3 filters.items to expression when no V5 expression exists', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'api-service',
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe("service.name = 'api-service'");
+		});
+
+		it('converts multiple V3 filters.items with AND operator', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'api',
+												},
+												{
+													key: { key: 'env', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'prod',
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe("service.name = 'api' AND env = 'prod'");
+		});
+
+		it('returns undefined when no filters exist', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBeNull();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.interactions.test.tsx

@@ -0,0 +1,494 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { server, rest } from 'mocks-server/server';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../types';
+
+import CheckboxFilterV2 from './CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	getFilterFromCall,
+	mockFieldsValuesAPI,
+	renderWithFilter,
+	setupServer,
+} from './CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - interactions', () => {
+	describe('search functionality', () => {
+		it('filters values based on search text', async () => {
+			const user = userEvent.setup();
+
+			let searchTextReceived = '';
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					searchTextReceived = req.url.searchParams.get('searchText') || '';
+
+					const values =
+						searchTextReceived === ''
+							? ['production', 'staging', 'development']
+							: ['production'];
+
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues: [],
+									stringValues: values,
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'prod');
+
+			await waitFor(() => {
+				expect(searchTextReceived).toBe('prod');
+			});
+
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId('checkbox-value-row-staging'),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('filters values via search while preserving existingQuery context', async () => {
+			const user = userEvent.setup();
+
+			let requestCount = 0;
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					requestCount += 1;
+					const searchText = req.url.searchParams.get('searchText') || '';
+
+					if (requestCount === 1) {
+						return res(
+							ctx.status(200),
+							ctx.json({
+								status: 'success',
+								data: {
+									values: {
+										relatedValues: ['production'],
+										stringValues: ['staging', 'development'],
+										numberValues: [],
+									},
+								},
+							}),
+						);
+					}
+
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues: searchText === 'prod' ? ['production'] : [],
+									stringValues: searchText === 'prod' ? ['production'] : ['staging'],
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'prod');
+
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId('checkbox-value-row-staging'),
+				).not.toBeInTheDocument();
+			});
+
+			expect(
+				screen.getByTestId('checkbox-value-row-production'),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe('header interactions', () => {
+		it('collapses when header clicked on open filter', async () => {
+			const user = userEvent.setup();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			const header = screen.getByTestId('checkbox-filter-header');
+			expect(header).toHaveAttribute('data-state', 'open');
+
+			await user.click(header);
+
+			expect(header).toHaveAttribute('data-state', 'closed');
+			expect(
+				screen.queryByTestId('checkbox-value-row-production'),
+			).not.toBeInTheDocument();
+		});
+
+		it('expands when header clicked on closed filter', async () => {
+			const user = userEvent.setup();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={{ ...DEFAULT_FILTER, defaultOpen: false }}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const header = screen.getByTestId('checkbox-filter-header');
+			expect(header).toHaveAttribute('data-state', 'closed');
+
+			await user.click(header);
+
+			expect(header).toHaveAttribute('data-state', 'open');
+			await screen.findByTestId('checkbox-value-row-production');
+		});
+	});
+
+	describe('show more functionality', () => {
+		it('shows "Show More..." when more than 10 values', async () => {
+			const values = Array.from(
+				{ length: 15 },
+				(_, i) => `value-${String(i).padStart(2, '0')}`,
+			);
+			mockFieldsValuesAPI({ stringValues: values });
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-value-00');
+
+			expect(screen.getByTestId('checkbox-filter-show-more')).toBeInTheDocument();
+
+			expect(
+				screen.queryByTestId('checkbox-value-row-value-10'),
+			).not.toBeInTheDocument();
+		});
+
+		it('loads more values when "Show More..." clicked', async () => {
+			const user = userEvent.setup();
+
+			const values = Array.from(
+				{ length: 15 },
+				(_, i) => `value-${String(i).padStart(2, '0')}`,
+			);
+			mockFieldsValuesAPI({ stringValues: values });
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-value-00');
+
+			await user.click(screen.getByTestId('checkbox-filter-show-more'));
+
+			await screen.findByTestId('checkbox-value-row-value-10');
+			expect(
+				screen.getByTestId('checkbox-value-row-value-14'),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe('clear functionality', () => {
+		it('shows clear button when filter is open and has filter applied', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
+		});
+
+		it('hides clear button when no filter applied for attribute', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+
+		it('calls onFilterChange when clear clicked', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+					onFilterChange={onFilterChange}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onFilterChange).toHaveBeenCalled();
+		});
+	});
+
+	describe('value row interactions', () => {
+		it('calls onFilterChange when checkbox value clicked', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+					onFilterChange={onFilterChange}
+				/>,
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+
+			await user.click(within(productionRow).getByText('production'));
+
+			expect(onFilterChange).toHaveBeenCalled();
+		});
+
+		it('accumulates both values in NOT IN when toggling indeterminate (related) then unchecked (other)', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				relatedValues: ['valueA'],
+				stringValues: ['valueB'],
+			});
+
+			// Step 1: Start with no filter, toggle indeterminate A
+			const { unmount } = renderWithFilter(onFilterChange);
+
+			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
+			expect(rowA).toHaveAttribute('data-state', 'indeterminate');
+
+			await user.click(within(rowA).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const firstFilter = getFilterFromCall(onFilterChange);
+			expect(firstFilter?.op).toBe('not in');
+			expect(firstFilter?.value).toBe('valueA');
+
+			unmount();
+
+			// Step 2: Re-render with updated query (NOT IN valueA), toggle unchecked B
+			onFilterChange.mockClear();
+			renderWithFilter(onFilterChange, { op: 'not in', value: ['valueA'] });
+
+			const rowB = await screen.findByTestId('checkbox-value-row-valueB');
+			expect(rowB).toHaveAttribute('data-state', 'unchecked');
+
+			await user.click(within(rowB).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const secondFilter = getFilterFromCall(onFilterChange);
+			expect(secondFilter?.op).toBe('not in');
+			expect(secondFilter?.value).toStrictEqual(['valueA', 'valueB']);
+		});
+
+		it('accumulates both values in IN when toggling indeterminate (related) then unchecked (other)', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				relatedValues: ['valueA'],
+				stringValues: ['valueB'],
+			});
+
+			// Start with IN filter for valueA
+			renderWithFilter(onFilterChange, { op: 'in', value: ['valueA'] });
+
+			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
+			expect(rowA).toHaveAttribute('data-state', 'checked');
+
+			const rowB = screen.getByTestId('checkbox-value-row-valueB');
+			expect(rowB).toHaveAttribute('data-state', 'unchecked');
+
+			// Toggle B (unchecked -> should add to IN)
+			await user.click(within(rowB).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const filter = getFilterFromCall(onFilterChange);
+			expect(filter?.op).toBe('in');
+			expect(filter?.value).toStrictEqual(['valueA', 'valueB']);
+		});
+	});
+
+	describe('custom renderer', () => {
+		it('uses customRendererForValue when provided', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			const customRenderer = (value: string): JSX.Element => (
+				<span data-testid="custom-rendered">{`ENV: ${value}`}</span>
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={{ ...DEFAULT_FILTER, customRendererForValue: customRenderer }}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('custom-rendered');
+			expect(screen.getByText('ENV: production')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.itemRules.test.tsx

@@ -0,0 +1,485 @@
+import { screen, within } from '@testing-library/react';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../types';
+
+import CheckboxFilterV2 from './CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	mockFieldsValuesAPI,
+	setupServer,
+} from './CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - item rules', () => {
+	describe('no existing query', () => {
+		it('all values show as checked with no badge when no query exists', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(within(productionRow).getByText('production')).toBeInTheDocument();
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+			expect(stagingRow).toHaveAttribute('data-state', 'checked');
+
+			expect(screen.queryByTestId('badge-related')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('badge-other')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('with existing query (related values)', () => {
+		it('shows "Related" badge with indeterminate state for values in relatedValues', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['production'],
+				stringValues: ['staging', 'development'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(within(productionRow).getByText('production')).toBeInTheDocument();
+
+			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
+			expect(productionRow).toHaveAttribute('data-state', 'indeterminate');
+
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
+		});
+
+		it('shows "Other" badge for values not in relatedValues', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['production'],
+				stringValues: ['staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const stagingRow = await screen.findByTestId('checkbox-value-row-staging');
+			expect(within(stagingRow).getByText('staging')).toBeInTheDocument();
+
+			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
+		});
+
+		it('shows "Related" badge with indeterminate when hasFilterForThisKey=true and isInRelatedValues=true (Rule 5)', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['production', 'staging'],
+				stringValues: ['development'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+			expect(stagingRow).toHaveAttribute('data-state', 'indeterminate');
+			expect(within(stagingRow).getByTestId('badge-related')).toBeInTheDocument();
+		});
+	});
+
+	describe('selected values with IN operator', () => {
+		it('shows checked state with no badge for IN-selected values', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+			expect(
+				within(productionRow).queryByTestId(/^badge-/),
+			).not.toBeInTheDocument();
+
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
+		});
+	});
+
+	describe('selected values with NOT IN operator', () => {
+		it('shows "Not in" badge with unchecked state for NOT_IN-selected values', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'not in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(productionRow).toHaveAttribute('data-state', 'unchecked');
+			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
+
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
+			expect(within(stagingRow).getByTestId('badge-other')).toBeInTheDocument();
+		});
+	});
+
+	describe('ordering by orderIndex', () => {
+		it('orders selected values (orderIndex 0) before related (orderIndex 1) before other (orderIndex 2)', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['related-value'],
+				stringValues: ['other-value', 'selected-value'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['selected-value'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-selected-value');
+
+			const allRows = screen.getAllByTestId(/^checkbox-value-row-/);
+			const values = allRows.map((row) =>
+				row.getAttribute('data-testid')?.replace('checkbox-value-row-', ''),
+			);
+
+			expect(values[0]).toBe('selected-value');
+			expect(values[1]).toBe('related-value');
+			expect(values[2]).toBe('other-value');
+		});
+
+		it('sorts alphabetically within same orderIndex', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['zebra', 'alpha', 'mike'],
+				stringValues: [],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-alpha');
+
+			const allRows = screen.getAllByTestId(/^checkbox-value-row-/);
+			const values = allRows.map((row) =>
+				row.getAttribute('data-testid')?.replace('checkbox-value-row-', ''),
+			);
+
+			expect(values).toStrictEqual(['alpha', 'mike', 'zebra']);
+		});
+	});
+
+	describe('mixed state scenarios', () => {
+		it('handles mixed state: IN-selected + related + other in same list', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['related-env'],
+				stringValues: ['other-env', 'selected-env'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['selected-env'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const selectedRow = await screen.findByTestId(
+				'checkbox-value-row-selected-env',
+			);
+			expect(selectedRow).toHaveAttribute('data-state', 'checked');
+			expect(within(selectedRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
+
+			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
+			expect(relatedRow).toHaveAttribute('data-state', 'indeterminate');
+			expect(within(relatedRow).getByTestId('badge-related')).toBeInTheDocument();
+
+			const otherRow = screen.getByTestId('checkbox-value-row-other-env');
+			expect(otherRow).toHaveAttribute('data-state', 'unchecked');
+			expect(within(otherRow).getByTestId('badge-other')).toBeInTheDocument();
+		});
+
+		it('handles NOT_IN-selected alongside related values', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['related-env'],
+				stringValues: ['other-env', 'excluded-env'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'not in',
+													value: ['excluded-env'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const excludedRow = await screen.findByTestId(
+				'checkbox-value-row-excluded-env',
+			);
+			expect(excludedRow).toHaveAttribute('data-state', 'unchecked');
+			expect(within(excludedRow).getByTestId('badge-not_in')).toBeInTheDocument();
+
+			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
+			expect(relatedRow).toHaveAttribute('data-state', 'indeterminate');
+			expect(within(relatedRow).getByTestId('badge-related')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.module.scss

@@ -0,0 +1,91 @@
+.checkboxFilter {
+	display: flex;
+	flex-direction: column;
+	padding: var(--spacing-6);
+	gap: var(--spacing-6);
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.search {
+	--input-background: var(--l2-background);
+	--input-hover-background: var(--l2-background);
+	--input-focus-background: var(--l2-background);
+	--input-border-color: var(--l2-border);
+	--input-focus-border-color: var(--l2-border);
+}
+
+.searchSpinner {
+	color: var(--l2-foreground);
+	animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.values {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.loadingMore {
+	align-self: center;
+}
+
+.noData {
+	align-self: center;
+}
+
+.showMore {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.showMoreText {
+	color: var(--accent-primary);
+	cursor: pointer;
+}
+
+.goToDocs {
+	display: flex;
+	flex-direction: column;
+	gap: 44px;
+}
+
+.goToDocsContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	margin-top: var(--spacing-2);
+}
+
+.goToDocsMessage {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.goToDocsButton {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	cursor: pointer;
+	margin: 0 0 var(--spacing-2);
+	padding: 0;
+}
+
+.goToDocsButtonText {
+	color: var(--bg-robin-400);
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.states.test.tsx

@@ -0,0 +1,207 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { server, rest } from 'mocks-server/server';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../types';
+
+import CheckboxFilterV2 from './CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	mockFieldsValuesAPI,
+	mockFieldsValuesAPILoading,
+	setupServer,
+} from './CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - states', () => {
+	describe('loading states', () => {
+		it('shows skeleton while loading initial data', async () => {
+			mockFieldsValuesAPILoading();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			expect(screen.getByTestId('checkbox-filter-v2')).toBeInTheDocument();
+			await waitFor(() => {
+				expect(
+					screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('shows skeleton when initially closed filter is opened for the first time', async () => {
+			const user = userEvent.setup();
+			mockFieldsValuesAPILoading();
+
+			const closedFilter = { ...DEFAULT_FILTER, defaultOpen: false };
+
+			render(
+				<CheckboxFilterV2
+					filter={closedFilter}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			// Filter starts closed - no skeleton, no content
+			expect(
+				screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('checkbox-filter-empty'),
+			).not.toBeInTheDocument();
+
+			// Click header to open
+			const header = screen.getByTestId('checkbox-filter-header');
+			await user.click(header);
+
+			// Should show skeleton while loading, NOT "No values found"
+			await waitFor(() => {
+				expect(
+					screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
+				).toBeInTheDocument();
+			});
+			expect(
+				screen.queryByTestId('checkbox-filter-empty'),
+			).not.toBeInTheDocument();
+		});
+
+		it('shows search spinner when fetching after initial load', async () => {
+			const user = userEvent.setup();
+
+			let requestCount = 0;
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					requestCount += 1;
+					if (requestCount === 1) {
+						return res(
+							ctx.status(200),
+							ctx.json({
+								status: 'success',
+								data: {
+									values: {
+										relatedValues: [],
+										stringValues: ['production', 'staging'],
+										numberValues: [],
+									},
+								},
+							}),
+						);
+					}
+					return res(ctx.delay(10000));
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'prod');
+
+			await waitFor(() => {
+				expect(
+					screen.getByTestId('checkbox-filter-search-loading'),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('empty states', () => {
+		it('shows "No values found" when API returns empty arrays', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: [],
+				stringValues: [],
+				numberValues: [],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const emptySection = await screen.findByTestId('checkbox-filter-empty');
+			expect(emptySection).toBeInTheDocument();
+		});
+	});
+
+	describe('value rendering', () => {
+		it('renders values from API response', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging', 'development'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
+			expect(
+				screen.getByTestId('checkbox-value-row-development'),
+			).toBeInTheDocument();
+		});
+
+		it('renders number values converted to strings', async () => {
+			mockFieldsValuesAPI({
+				numberValues: [200, 404, 500],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const row200 = await screen.findByTestId('checkbox-value-row-200');
+			expect(within(row200).getByText('200')).toBeInTheDocument();
+			expect(
+				within(screen.getByTestId('checkbox-value-row-404')).getByText('404'),
+			).toBeInTheDocument();
+			expect(
+				within(screen.getByTestId('checkbox-value-row-500')).getByText('500'),
+			).toBeInTheDocument();
+		});
+
+		it('filters null/undefined values from response', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['valid', null, '', undefined as unknown as string],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const validRow = await screen.findByTestId('checkbox-value-row-valid');
+			expect(within(validRow).getByText('valid')).toBeInTheDocument();
+			expect(screen.queryAllByTestId(/^checkbox-value-row-/)).toHaveLength(1);
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -0,0 +1,126 @@
+import { render, RenderResult } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+
+import {
+	FiltersType,
+	IQuickFiltersConfig,
+	QuickFilterCheckboxUseFieldApis,
+	QuickFiltersSource,
+} from '../../../types';
+import CheckboxFilterV2 from './CheckboxFilterV2';
+
+export const DEFAULT_FILTER: IQuickFiltersConfig = {
+	type: FiltersType.CHECKBOX,
+	title: 'Environment',
+	attributeKey: {
+		key: 'deployment.environment',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	dataSource: DataSource.TRACES,
+	defaultOpen: true,
+};
+
+export const DEFAULT_USE_FIELD_APIS: QuickFilterCheckboxUseFieldApis = {
+	startUnixMilli: 1700000000000,
+	endUnixMilli: 1700003600000,
+	existingQuery: null,
+};
+
+export function mockFieldsValuesAPI(response: {
+	relatedValues?: (string | null)[];
+	stringValues?: (string | null)[];
+	numberValues?: (number | null)[];
+}): void {
+	server.use(
+		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						values: {
+							relatedValues: response.relatedValues ?? [],
+							stringValues: response.stringValues ?? [],
+							numberValues: response.numberValues ?? [],
+						},
+					},
+				}),
+			),
+		),
+	);
+}
+
+export function mockFieldsValuesAPILoading(): void {
+	server.use(
+		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
+			res(ctx.delay(10000)),
+		),
+	);
+}
+
+export function setupServer(): void {
+	beforeAll(() => server.listen({ onUnhandledRequest: 'bypass' }));
+	afterEach(() => server.resetHandlers());
+	afterAll(() => server.close());
+}
+
+export interface FilterItemConfig {
+	op: string;
+	value: string | string[];
+}
+
+export function renderWithFilter(
+	onFilterChange: jest.Mock,
+	filterItem?: FilterItemConfig,
+): RenderResult {
+	const items: TagFilterItem[] = filterItem
+		? [
+				{
+					key: { key: 'deployment.environment' },
+					op: filterItem.op,
+					value: filterItem.value,
+				} as TagFilterItem,
+			]
+		: [];
+
+	return render(
+		<CheckboxFilterV2
+			filter={DEFAULT_FILTER}
+			source={QuickFiltersSource.TRACES_EXPLORER}
+			useFieldApis={{
+				...DEFAULT_USE_FIELD_APIS,
+				existingQuery: 'service.name = "api"',
+			}}
+			onFilterChange={onFilterChange}
+		/>,
+		undefined,
+		{
+			queryBuilderOverrides: {
+				currentQuery: {
+					builder: {
+						queryData: [
+							{
+								filters: { items, op: 'AND' },
+								filter: { expression: 'service.name = "api"' },
+							},
+						],
+					},
+				},
+			} as never,
+		},
+	);
+}
+
+export function getFilterFromCall(
+	onFilterChange: jest.Mock,
+	callIndex = 0,
+): TagFilterItem | undefined {
+	const query = onFilterChange.mock.calls[callIndex]?.[0] as Query | undefined;
+	return query?.builder.queryData[0]?.filters?.items?.find(
+		(item) => item.key?.key === 'deployment.environment',
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Skeleton } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { LoaderCircle } from '@signozhq/icons';
+import {
+	IQuickFiltersConfig,
+	QuickFilterCheckboxUseFieldApis,
+	QuickFiltersSource,
+} from 'components/QuickFilters/types';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
+import useActiveQueryIndex from '../useActiveQueryIndex';
+import useCheckboxDisclosure from '../useCheckboxDisclosure';
+import useCheckboxFilterActions from '../useCheckboxFilterActions';
+import useCheckboxFilterState from '../useCheckboxFilterState';
+import { useFieldValues } from './useFieldValues';
+import { useExistingQuery } from './useExistingQuery';
+import { isKeyMatch } from '../utils';
+
+import { CheckboxFilterV2Header } from './CheckboxFilterV2Header';
+import { CheckboxFilterV2ValueRow } from './CheckboxFilterV2ValueRow';
+import { useSectionedValues } from './useSectionedValues';
+
+import styles from './CheckboxFilterV2.module.scss';
+
+interface CheckboxFilterV2Props {
+	filter: IQuickFiltersConfig;
+	source: QuickFiltersSource;
+	onFilterChange?: (query: Query) => void;
+	useFieldApis: QuickFilterCheckboxUseFieldApis;
+}
+
+export default function CheckboxFilterV2(
+	props: CheckboxFilterV2Props,
+): JSX.Element {
+	const { source, filter, onFilterChange, useFieldApis } = props;
+	const [searchText, setSearchText] = useState<string>('');
+	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
+
+	const { currentQuery } = useQueryBuilder();
+	const activeQueryIndex = useActiveQueryIndex(source);
+
+	const {
+		isOpen,
+		isSomeFilterPresentForCurrentAttribute,
+		visibleItemsCount,
+		onToggleOpen,
+		onShowMore,
+	} = useCheckboxDisclosure({ filter, activeQueryIndex });
+
+	// Auto-preserve open state when filter is present
+	useEffect(() => {
+		if (isSomeFilterPresentForCurrentAttribute && userToggleState === null) {
+			setUserToggleState(true);
+		}
+	}, [isSomeFilterPresentForCurrentAttribute, userToggleState]);
+
+	const { existingQuery, hasExistingQuery } = useExistingQuery({
+		useFieldApis,
+		activeQueryIndex,
+	});
+
+	const { relatedValues, allValues, isLoading, isFetching } = useFieldValues({
+		filter,
+		searchText,
+		existingQuery,
+		metricNamespace: useFieldApis.metricNamespace,
+		startUnixMilli: useFieldApis.startUnixMilli,
+		endUnixMilli: useFieldApis.endUnixMilli,
+		enabled: isOpen,
+	});
+
+	// Track if initial load completed (don't show skeleton after first load)
+	// Must track if loading ever started, otherwise hasLoadedOnce gets set
+	// immediately on first render when query is disabled (isLoading=false)
+	const hasLoadedOnce = useRef(false);
+	const wasLoading = useRef(false);
+	if (isLoading) {
+		wasLoading.current = true;
+	}
+	if (!isLoading && wasLoading.current && !hasLoadedOnce.current) {
+		hasLoadedOnce.current = true;
+	}
+
+	// Combine for state derivation
+	const attributeValues = useMemo(() => {
+		const combined = [...relatedValues, ...allValues];
+		return [...new Set(combined)];
+	}, [relatedValues, allValues]);
+
+	const { currentFilterState, isFilterDisabled, isMultipleValuesTrueForTheKey } =
+		useCheckboxFilterState({ filter, attributeValues, activeQueryIndex });
+
+	const { onChange, onClear } = useCheckboxFilterActions({
+		filter,
+		source,
+		attributeValues,
+		activeQueryIndex,
+		onFilterChange,
+	});
+
+	const setSearchTextDebounced = useDebouncedFn((...args) => {
+		setSearchText(args[0] as string);
+	}, DEBOUNCE_DELAY);
+
+	const currentFilterOp = useMemo(() => {
+		const filterSync = currentQuery?.builder.queryData?.[
+			activeQueryIndex
+		]?.filters?.items.find((item) =>
+			isKeyMatch(item.key?.key, filter.attributeKey.key),
+		);
+		return filterSync?.op;
+	}, [
+		currentQuery?.builder.queryData,
+		activeQueryIndex,
+		filter.attributeKey.key,
+	]);
+
+	const isNotInOperator = NON_SELECTED_OPERATORS.includes(currentFilterOp || '');
+
+	const { sectionedItems, totalCount } = useSectionedValues({
+		relatedValues,
+		allValues,
+		currentFilterState,
+		isSomeFilterPresentForCurrentAttribute,
+		isNotInOperator,
+		hasExistingQuery,
+		searchText,
+		visibleItemsCount,
+	});
+
+	return (
+		<div className={styles.checkboxFilter} data-testid="checkbox-filter-v2">
+			<CheckboxFilterV2Header
+				title={filter.title}
+				isOpen={isOpen}
+				showClearAll={!!attributeValues.length}
+				onToggleOpen={onToggleOpen}
+				onClear={onClear}
+				isSomeFilterPresentForCurrentAttribute={
+					isSomeFilterPresentForCurrentAttribute
+				}
+			/>
+			{isOpen && isLoading && !hasLoadedOnce.current && (
+				<section>
+					<Skeleton paragraph={{ rows: 4 }} />
+				</section>
+			)}
+			{isOpen && (!isLoading || hasLoadedOnce.current) && (
+				<>
+					<section className={styles.search}>
+						<Input
+							placeholder="Filter values"
+							onChange={(e): void => setSearchTextDebounced(e.target.value)}
+							disabled={isFilterDisabled}
+							data-testid="checkbox-filter-search"
+							suffix={
+								isFetching ? (
+									<LoaderCircle
+										size={14}
+										className={styles.searchSpinner}
+										data-testid="checkbox-filter-search-loading"
+									/>
+								) : null
+							}
+						/>
+					</section>
+
+					{totalCount > 0 && (
+						<section className={styles.values}>
+							{sectionedItems.map(({ value, badge, checkedState }) => {
+								const isChecked = checkedState === 'checked';
+
+								return (
+									<CheckboxFilterV2ValueRow
+										key={value}
+										value={value}
+										checkedState={checkedState}
+										disabled={isFilterDisabled}
+										title={filter.title}
+										badge={badge}
+										onlyButtonLabel={
+											isSomeFilterPresentForCurrentAttribute
+												? isChecked && !isMultipleValuesTrueForTheKey
+													? 'All'
+													: 'Only'
+												: 'Only'
+										}
+										customRendererForValue={filter.customRendererForValue}
+										onCheckboxChange={(checked, previousState): void =>
+											onChange(value, checked, false, previousState)
+										}
+										onOnlyOrAllClick={(): void => onChange(value, isChecked, true)}
+									/>
+								);
+							})}
+						</section>
+					)}
+
+					{totalCount === 0 && hasLoadedOnce.current && (
+						<section className={styles.noData} data-testid="checkbox-filter-empty">
+							<Typography.Text>No values found</Typography.Text>
+						</section>
+					)}
+
+					{visibleItemsCount < totalCount && (
+						<section className={styles.showMore}>
+							<Typography.Text
+								className={styles.showMoreText}
+								onClick={onShowMore}
+								data-testid="checkbox-filter-show-more"
+							>
+								Show More...
+							</Typography.Text>
+						</section>
+					)}
+				</>
+			)}
+		</div>
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.module.scss

@@ -0,0 +1,33 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	cursor: pointer;
+}
+
+.leftAction {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+}
+
+.title {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+	text-transform: capitalize;
+}
+
+.rightAction {
+	display: flex;
+	align-items: center;
+	min-width: 48px;
+}
+
+.clearAll {
+	font-size: 12px;
+	color: var(--accent-primary);
+	cursor: pointer;
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.test.tsx

@@ -0,0 +1,156 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CheckboxFilterV2Header } from './CheckboxFilterV2Header';
+
+describe('CheckboxFilterV2Header', () => {
+	const defaultProps = {
+		title: 'Environment',
+		isOpen: false,
+		showClearAll: true,
+		isSomeFilterPresentForCurrentAttribute: true,
+		onToggleOpen: jest.fn(),
+		onClear: jest.fn(),
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('collapsed state', () => {
+		it('renders title', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
+
+			expect(screen.getByText('Environment')).toBeInTheDocument();
+		});
+
+		it('sets data-state="closed" when collapsed', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
+
+			const header = screen.getByTestId('checkbox-filter-header');
+			expect(header).toHaveAttribute('data-state', 'closed');
+		});
+
+		it('does not show clear button when collapsed', () => {
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen={false} showClearAll />,
+			);
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('expanded state', () => {
+		it('sets data-state="open" when expanded', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen />);
+
+			const header = screen.getByTestId('checkbox-filter-header');
+			expect(header).toHaveAttribute('data-state', 'open');
+		});
+
+		it('shows clear button when expanded + showClearAll=true', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll />);
+
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
+			expect(screen.getByText('Clear')).toBeInTheDocument();
+		});
+
+		it('hides clear button when showClearAll=false', () => {
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll={false} />,
+			);
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+
+		it('hides clear button when no filter present for attribute', () => {
+			render(
+				<CheckboxFilterV2Header
+					{...defaultProps}
+					isOpen
+					showClearAll
+					isSomeFilterPresentForCurrentAttribute={false}
+				/>,
+			);
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('interactions', () => {
+		it('calls onToggleOpen on header click', async () => {
+			const user = userEvent.setup();
+			const onToggleOpen = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-header'));
+
+			expect(onToggleOpen).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onToggleOpen on Enter key', async () => {
+			const user = userEvent.setup();
+			const onToggleOpen = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
+			);
+
+			screen.getByTestId('checkbox-filter-header').focus();
+			await user.keyboard('{Enter}');
+
+			expect(onToggleOpen).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onToggleOpen on Space key', async () => {
+			const user = userEvent.setup();
+			const onToggleOpen = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
+			);
+
+			screen.getByTestId('checkbox-filter-header').focus();
+			await user.keyboard(' ');
+
+			expect(onToggleOpen).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onClear on clear button click', async () => {
+			const user = userEvent.setup();
+			const onClear = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen onClear={onClear} />,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onClear).toHaveBeenCalledTimes(1);
+		});
+
+		it('clear button click does not trigger onToggleOpen', async () => {
+			const user = userEvent.setup();
+			const onToggleOpen = jest.fn();
+			const onClear = jest.fn();
+			render(
+				<CheckboxFilterV2Header
+					{...defaultProps}
+					isOpen
+					onToggleOpen={onToggleOpen}
+					onClear={onClear}
+				/>,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onClear).toHaveBeenCalledTimes(1);
+			expect(onToggleOpen).not.toHaveBeenCalled();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx

@@ -0,0 +1,62 @@
+import { Typography } from '@signozhq/ui/typography';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+
+import styles from './CheckboxFilterV2Header.module.scss';
+
+interface CheckboxFilterHeaderProps {
+	title: string;
+	isOpen: boolean;
+	showClearAll: boolean;
+	onToggleOpen: () => void;
+	onClear: () => void;
+	isSomeFilterPresentForCurrentAttribute: boolean;
+}
+
+export function CheckboxFilterV2Header({
+	title,
+	isOpen,
+	showClearAll,
+	onToggleOpen,
+	onClear,
+	isSomeFilterPresentForCurrentAttribute,
+}: CheckboxFilterHeaderProps): JSX.Element {
+	return (
+		<section
+			role="button"
+			tabIndex={0}
+			className={styles.header}
+			onClick={onToggleOpen}
+			onKeyDown={(e): void => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					onToggleOpen();
+				}
+			}}
+			data-testid="checkbox-filter-header"
+			data-state={isOpen ? 'open' : 'closed'}
+		>
+			<section className={styles.leftAction}>
+				{isOpen ? (
+					<ChevronDown size={13} cursor="pointer" />
+				) : (
+					<ChevronRight size={13} cursor="pointer" />
+				)}
+				<Typography.Text className={styles.title}>{title}</Typography.Text>
+			</section>
+			<section className={styles.rightAction}>
+				{isOpen && showClearAll && isSomeFilterPresentForCurrentAttribute && (
+					<Typography.Text
+						className={styles.clearAll}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							onClear();
+						}}
+						data-testid="checkbox-filter-clear-all"
+					>
+						Clear
+					</Typography.Text>
+				)}
+			</section>
+		</section>
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.module.scss

@@ -0,0 +1,166 @@
+.valueRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	min-height: 24px;
+}
+
+.checkbox {
+	display: inline-flex;
+	align-items: center;
+}
+
+.valueButton {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	align-items: center;
+	gap: var(--spacing-2);
+	width: calc(100% - 24px);
+	cursor: pointer;
+}
+
+.content {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.valueLabel {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.actions {
+	display: grid;
+	align-items: center;
+	justify-items: end;
+
+	// Stack badge / only / toggle in a single cell so the crossfade overlaps
+	// instead of laying them side-by-side mid-transition.
+	> * {
+		grid-area: 1 / 1;
+	}
+}
+
+.badge {
+	display: inline-flex;
+	align-items: center;
+	opacity: 1;
+	transition:
+		opacity 0.16s ease,
+		display 0.16s allow-discrete;
+}
+
+.onlyButton {
+	display: none;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transform: translateX(4px);
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease,
+		display 0.16s allow-discrete;
+	--button-height: 21px;
+	--button-padding: var(--spacing-5);
+
+	&:hover {
+		background-color: unset;
+	}
+}
+
+.toggleButton {
+	display: none;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transform: translateX(4px);
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease,
+		display 0.16s allow-discrete;
+	--button-height: 21px;
+	--button-padding: var(--spacing-5);
+
+	&:hover {
+		background-color: unset;
+	}
+}
+
+.isDisabled {
+	cursor: not-allowed;
+
+	.valueLabel {
+		color: var(--l3-foreground);
+	}
+
+	.onlyButton {
+		cursor: not-allowed;
+		color: var(--l3-foreground);
+	}
+
+	.toggleButton {
+		cursor: not-allowed;
+		color: var(--l3-foreground);
+	}
+}
+
+.valueButton:hover {
+	.onlyButton {
+		display: flex;
+		opacity: 1;
+		transform: translateX(0);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateX(4px);
+		}
+	}
+
+	.badge {
+		display: none;
+		opacity: 0;
+	}
+}
+
+.checkbox:hover ~ .valueButton {
+	.toggleButton {
+		display: flex;
+		opacity: 1;
+		transform: translateX(0);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateX(4px);
+		}
+	}
+
+	.badge {
+		display: none;
+		opacity: 0;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.badge,
+	.onlyButton,
+	.toggleButton {
+		transition: none;
+	}
+}
+
+.indicatorFalse {
+	width: 2px;
+	height: 11px;
+	border-radius: 2px;
+	background: var(--danger-background);
+}
+
+.indicatorTrue {
+	width: 2px;
+	height: 11px;
+	border-radius: 2px;
+	background: var(--bg-forest-500);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.test.tsx

@@ -0,0 +1,318 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { BadgeConfig } from './itemRules';
+import { CheckedState } from '../../../types';
+import { CheckboxFilterV2ValueRow } from './CheckboxFilterV2ValueRow';
+
+describe('CheckboxFilterV2ValueRow', () => {
+	const defaultProps = {
+		value: 'production',
+		checkedState: 'unchecked' as CheckedState,
+		disabled: false,
+		title: 'Environment',
+		onlyButtonLabel: 'Only',
+		onCheckboxChange: jest.fn(),
+		onOnlyOrAllClick: jest.fn(),
+		badge: null as BadgeConfig | null,
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('checked states', () => {
+		it('sets data-state="unchecked" for unchecked state', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="unchecked" />,
+			);
+
+			const row = screen.getByTestId('checkbox-value-row-production');
+			expect(row).toHaveAttribute('data-state', 'unchecked');
+		});
+
+		it('sets data-state="checked" for checked state', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="checked" />,
+			);
+
+			const row = screen.getByTestId('checkbox-value-row-production');
+			expect(row).toHaveAttribute('data-state', 'checked');
+		});
+
+		it('sets data-state="indeterminate" for indeterminate state', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="indeterminate" />,
+			);
+
+			const row = screen.getByTestId('checkbox-value-row-production');
+			expect(row).toHaveAttribute('data-state', 'indeterminate');
+		});
+	});
+
+	describe('badge variations', () => {
+		it('renders no badge when badge=null', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} badge={null} />);
+
+			expect(screen.queryByTestId(/^badge-/)).not.toBeInTheDocument();
+		});
+
+		it('renders "Not in" warning badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					badge={{ key: 'not_in', label: 'Not in', color: 'warning' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
+			expect(screen.getByText('Not in')).toBeInTheDocument();
+		});
+
+		it('renders "Related" robin badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					badge={{ key: 'related', label: 'Related', color: 'robin' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
+			expect(screen.getByText('Related')).toBeInTheDocument();
+		});
+
+		it('renders "Other" secondary badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					badge={{ key: 'other', label: 'Other', color: 'secondary' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
+			expect(screen.getByText('Other')).toBeInTheDocument();
+		});
+	});
+
+	describe('only/all button label', () => {
+		it('shows "Only" label by default', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} onlyButtonLabel="Only" />,
+			);
+
+			expect(screen.getByText('Only')).toBeInTheDocument();
+		});
+
+		it('shows "All" label when appropriate', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} onlyButtonLabel="All" />);
+
+			expect(screen.getByText('All')).toBeInTheDocument();
+		});
+	});
+
+	describe('disabled state', () => {
+		it('sets data-disabled=true when disabled', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} disabled />);
+
+			const row = screen.getByTestId('checkbox-value-row-production');
+			expect(row).toHaveAttribute('data-disabled', 'true');
+		});
+
+		it('does not call onOnlyOrAllClick when disabled + clicked', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					disabled
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			await user.click(screen.getByText('production'));
+
+			expect(onOnlyOrAllClick).not.toHaveBeenCalled();
+		});
+
+		it('does not call onOnlyOrAllClick on keydown when disabled', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					disabled
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			screen.getByText('production').focus();
+			await user.keyboard('{Enter}');
+
+			expect(onOnlyOrAllClick).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('special value indicators', () => {
+		it('renders row for "true" value', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} value="true" />);
+
+			expect(screen.getByTestId('checkbox-value-row-true')).toBeInTheDocument();
+			expect(screen.getByText('true')).toBeInTheDocument();
+		});
+
+		it('renders row for "false" value', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} value="false" />);
+
+			expect(screen.getByTestId('checkbox-value-row-false')).toBeInTheDocument();
+			expect(screen.getByText('false')).toBeInTheDocument();
+		});
+
+		it('renders row for regular values', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} value="production" />);
+
+			expect(
+				screen.getByTestId('checkbox-value-row-production'),
+			).toBeInTheDocument();
+			expect(screen.getByText('production')).toBeInTheDocument();
+		});
+	});
+
+	describe('interactions', () => {
+		it('renders checkbox with correct testId', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="unchecked" />,
+			);
+
+			expect(
+				screen.getByTestId('checkbox-Environment-production'),
+			).toBeInTheDocument();
+		});
+
+		it('calls onOnlyOrAllClick on value text click', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			await user.click(screen.getByText('production'));
+
+			expect(onOnlyOrAllClick).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onOnlyOrAllClick on Enter key', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			const valueButton = screen
+				.getByText('production')
+				.closest('[role="button"]');
+			await user.tab();
+			await user.tab();
+			if (valueButton && document.activeElement === valueButton) {
+				await user.keyboard('{Enter}');
+			}
+
+			expect(onOnlyOrAllClick).toHaveBeenCalled();
+		});
+
+		it('calls onOnlyOrAllClick on Space key', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			const valueButton = screen
+				.getByText('production')
+				.closest('[role="button"]');
+			await user.tab();
+			await user.tab();
+			if (valueButton && document.activeElement === valueButton) {
+				await user.keyboard(' ');
+			}
+
+			expect(onOnlyOrAllClick).toHaveBeenCalled();
+		});
+
+		it('shows Toggle button', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} />);
+
+			expect(screen.getByText('Toggle')).toBeInTheDocument();
+		});
+	});
+
+	describe('custom renderer', () => {
+		it('uses customRendererForValue when provided', () => {
+			const customRenderer = (value: string): JSX.Element => (
+				<span data-testid="custom-render">{`Custom: ${value}`}</span>
+			);
+
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					customRendererForValue={customRenderer}
+				/>,
+			);
+
+			expect(screen.getByTestId('custom-render')).toBeInTheDocument();
+			expect(screen.getByText('Custom: production')).toBeInTheDocument();
+		});
+
+		it('shows default value text when no custom renderer', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} />);
+
+			expect(screen.getByText('production')).toBeInTheDocument();
+		});
+	});
+
+	describe('state combinations', () => {
+		it('checked + not_in badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					checkedState="unchecked"
+					badge={{ key: 'not_in', label: 'Not in', color: 'warning' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
+		});
+
+		it('indeterminate + related badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					checkedState="indeterminate"
+					badge={{ key: 'related', label: 'Related', color: 'robin' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
+		});
+
+		it('disabled + badge still shows badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					disabled
+					badge={{ key: 'other', label: 'Other', color: 'secondary' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.tsx

@@ -0,0 +1,118 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Checkbox } from '@signozhq/ui/checkbox';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import { BadgeConfig } from './itemRules';
+import { CheckedState } from '../../../types';
+import styles from './CheckboxFilterV2ValueRow.module.scss';
+
+interface ValueRowProps {
+	value: string;
+	checkedState: CheckedState;
+	disabled: boolean;
+	title: string;
+	onlyButtonLabel: string;
+	customRendererForValue?: (value: string) => JSX.Element;
+	onCheckboxChange: (checked: boolean, previousState: CheckedState) => void;
+	onOnlyOrAllClick: () => void;
+	badge: BadgeConfig | null;
+}
+
+function toCheckboxValue(state: CheckedState): boolean | 'indeterminate' {
+	if (state === 'indeterminate') {
+		return 'indeterminate';
+	}
+	return state === 'checked';
+}
+
+const INDICATOR_CLASS_MAP = {
+	false: styles.indicatorFalse,
+	true: styles.indicatorTrue,
+} as Record<string, string>;
+
+export function CheckboxFilterV2ValueRow({
+	value,
+	checkedState,
+	disabled,
+	title,
+	onlyButtonLabel,
+	customRendererForValue,
+	onCheckboxChange,
+	onOnlyOrAllClick,
+	badge,
+}: ValueRowProps): JSX.Element {
+	const indicatorClass = INDICATOR_CLASS_MAP[value];
+
+	return (
+		<div
+			className={styles.valueRow}
+			data-testid={`checkbox-value-row-${value}`}
+			data-state={checkedState}
+			data-disabled={disabled}
+		>
+			<div className={styles.checkbox}>
+				<Checkbox
+					onChange={(isChecked): void =>
+						onCheckboxChange(isChecked === true, checkedState)
+					}
+					value={toCheckboxValue(checkedState)}
+					disabled={disabled}
+					color="primary"
+					testId={`checkbox-${title}-${value}`}
+				/>
+			</div>
+
+			<div
+				role="button"
+				tabIndex={disabled ? -1 : 0}
+				className={cx(styles.valueButton, disabled && styles.isDisabled)}
+				onClick={(): void => {
+					if (disabled) {
+						return;
+					}
+					onOnlyOrAllClick();
+				}}
+				onKeyDown={(e): void => {
+					if (disabled) {
+						return;
+					}
+					if (e.key === 'Enter' || e.key === ' ') {
+						onOnlyOrAllClick();
+					}
+				}}
+			>
+				<div className={styles.content}>
+					{indicatorClass && <div className={indicatorClass} />}
+					{customRendererForValue ? (
+						customRendererForValue(value)
+					) : (
+						<Typography.Text title={value} className={styles.valueLabel}>
+							{value}
+						</Typography.Text>
+					)}
+				</div>
+
+				<div className={styles.actions}>
+					{badge && (
+						<Badge
+							variant="outline"
+							color={badge.color}
+							className={styles.badge}
+							testId={`badge-${badge.key}`}
+						>
+							{badge.label}
+						</Badge>
+					)}
+					<Button variant="ghost" color="secondary" className={styles.onlyButton}>
+						{onlyButtonLabel}
+					</Button>
+					<Button variant="ghost" color="secondary" className={styles.toggleButton}>
+						Toggle
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.test.ts

@@ -0,0 +1,146 @@
+import { deriveItemConfig, ItemContext } from './itemRules';
+
+describe('itemRules', () => {
+	describe('deriveItemConfig', () => {
+		it('no query at all → orderIndex 0, no badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: true,
+				isNotInOperator: false,
+				hasExistingQuery: false,
+				hasFilterForThisKey: false,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.orderIndex).toBe(0);
+			expect(result.badge).toBeNull();
+		});
+
+		it('selected + IN operator → orderIndex 0, no badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: true,
+				isInRelatedValues: true,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.orderIndex).toBe(0);
+			expect(result.badge).toBeNull();
+		});
+
+		it('selected + NOT IN operator → orderIndex 0, not_in badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: true,
+				isInRelatedValues: false,
+				isNotInOperator: true,
+				hasExistingQuery: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.orderIndex).toBe(0);
+			expect(result.badge).toStrictEqual({
+				key: 'not_in',
+				label: 'Not in',
+				color: 'warning',
+			});
+		});
+
+		it('has query, no filter for this key, in related → orderIndex 1, related badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: true,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: false,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.orderIndex).toBe(1);
+			expect(result.badge).toStrictEqual({
+				key: 'related',
+				label: 'Related',
+				color: 'robin',
+			});
+		});
+
+		it('has query, has filter for this key, in related → orderIndex 1, related badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: true,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.orderIndex).toBe(1);
+			expect(result.badge).toStrictEqual({
+				key: 'related',
+				label: 'Related',
+				color: 'robin',
+			});
+		});
+
+		it('has query, not in related → orderIndex 2, other badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: false,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: false,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.orderIndex).toBe(2);
+			expect(result.badge).toStrictEqual({
+				key: 'other',
+				label: 'Other',
+				color: 'secondary',
+			});
+		});
+
+		it('has query + filter for key, not selected, not in related → orderIndex 2, other badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: false,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.orderIndex).toBe(2);
+			expect(result.badge).toStrictEqual({
+				key: 'other',
+				label: 'Other',
+				color: 'secondary',
+			});
+		});
+
+		it('no query but has filter for key, not selected → fallback to checked (DEFAULT_CONFIG)', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: false,
+				isNotInOperator: false,
+				hasExistingQuery: false,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.orderIndex).toBe(0);
+			expect(result.badge).toBeNull();
+			expect(result.checkedState).toBe('checked');
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -0,0 +1,109 @@
+import { CheckedState } from '../../../types';
+
+export interface BadgeConfig {
+	key: string;
+	label: string;
+	color: 'robin' | 'warning' | 'secondary';
+}
+
+export interface ItemConfig {
+	orderIndex: number;
+	badge: BadgeConfig | null;
+	checkedState: CheckedState;
+}
+
+export interface ItemContext {
+	isSelectedOnFilter: boolean;
+	isInRelatedValues: boolean;
+	isNotInOperator: boolean;
+	hasExistingQuery: boolean;
+	hasFilterForThisKey: boolean;
+}
+
+export interface DerivedItem extends ItemConfig {
+	value: string;
+}
+
+interface ItemRule {
+	condition: (ctx: ItemContext) => boolean;
+	config: ItemConfig;
+}
+
+const ITEM_RULES: ItemRule[] = [
+	{
+		condition: (ctx): boolean =>
+			!ctx.hasExistingQuery && !ctx.hasFilterForThisKey,
+		config: { orderIndex: 0, badge: null, checkedState: 'checked' },
+	},
+	{
+		condition: (ctx): boolean => ctx.isSelectedOnFilter && ctx.isNotInOperator,
+		config: {
+			orderIndex: 0,
+			badge: { key: 'not_in', label: 'Not in', color: 'warning' },
+			checkedState: 'unchecked',
+		},
+	},
+	{
+		condition: (ctx): boolean => ctx.isSelectedOnFilter && !ctx.isNotInOperator,
+		config: { orderIndex: 0, badge: null, checkedState: 'checked' },
+	},
+	{
+		condition: (ctx): boolean =>
+			ctx.hasExistingQuery && !ctx.hasFilterForThisKey && ctx.isInRelatedValues,
+		config: {
+			orderIndex: 1,
+			badge: { key: 'related', label: 'Related', color: 'robin' },
+			checkedState: 'indeterminate',
+		},
+	},
+	{
+		condition: (ctx): boolean =>
+			ctx.hasExistingQuery && ctx.hasFilterForThisKey && ctx.isInRelatedValues,
+		config: {
+			orderIndex: 1,
+			badge: { key: 'related', label: 'Related', color: 'robin' },
+			checkedState: 'indeterminate',
+		},
+	},
+	{
+		condition: (ctx): boolean => ctx.hasExistingQuery,
+		config: {
+			orderIndex: 2,
+			badge: { key: 'other', label: 'Other', color: 'secondary' },
+			checkedState: 'unchecked',
+		},
+	},
+];
+
+// Fallback when no rule matches
+const DEFAULT_CONFIG: ItemConfig = {
+	orderIndex: 0,
+	badge: null,
+	checkedState: 'checked',
+};
+
+export function deriveItemConfig(ctx: ItemContext): ItemConfig {
+	for (const rule of ITEM_RULES) {
+		if (rule.condition(ctx)) {
+			return rule.config;
+		}
+	}
+	return DEFAULT_CONFIG;
+}
+
+export function deriveItems(
+	values: string[],
+	relatedSet: Set<string>,
+	selectedOnFilterSet: Set<string>,
+	ctx: Omit<ItemContext, 'isSelectedOnFilter' | 'isInRelatedValues'>,
+): DerivedItem[] {
+	return values.map((value) => {
+		const itemCtx: ItemContext = {
+			...ctx,
+			isSelectedOnFilter: selectedOnFilterSet.has(value),
+			isInRelatedValues: relatedSet.has(value),
+		};
+		const config = deriveItemConfig(itemCtx);
+		return { value, ...config };
+	});
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useExistingQuery.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { QuickFilterCheckboxUseFieldApis } from 'components/QuickFilters/types';
+
+interface UseExistingQueryParams {
+	useFieldApis: QuickFilterCheckboxUseFieldApis;
+	activeQueryIndex: number;
+}
+
+interface UseExistingQueryResult {
+	existingQuery: string | undefined;
+	hasExistingQuery: boolean;
+}
+
+export function useExistingQuery({
+	useFieldApis,
+	activeQueryIndex,
+}: UseExistingQueryParams): UseExistingQueryResult {
+	const { currentQuery } = useQueryBuilder();
+
+	const existingQuery = useMemo(() => {
+		if (useFieldApis.existingQuery === null) {
+			return undefined;
+		}
+
+		if (useFieldApis.existingQuery) {
+			return useFieldApis.existingQuery;
+		}
+
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+
+		// Prefer V5 filter.expression
+		if (queryData?.filter?.expression) {
+			return queryData.filter.expression;
+		}
+
+		// Fall back to V3 filters.items
+		if (queryData?.filters?.items?.length) {
+			return convertFiltersToExpression(queryData.filters).expression;
+		}
+
+		return undefined;
+	}, [
+		useFieldApis.existingQuery,
+		currentQuery.builder.queryData,
+		activeQueryIndex,
+	]);
+
+	// Check if ANY filters exist in query (V3 items or V5 expression)
+	// This is separate from existingQuery because existingQuery can be explicitly
+	// disabled (null) while filters still exist in the query for UI purposes
+	const hasExistingQuery = useMemo(() => {
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+		const hasV3Items = (queryData?.filters?.items?.length ?? 0) > 0;
+		const hasV5Expression = !!queryData?.filter?.expression;
+		return hasV3Items || hasV5Expression || !!existingQuery;
+	}, [currentQuery.builder.queryData, activeQueryIndex, existingQuery]);
+
+	return { existingQuery, hasExistingQuery };
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -0,0 +1,97 @@
+import { useMemo } from 'react';
+import { useGetFieldsValues } from 'api/generated/services/fields';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { IQuickFiltersConfig } from 'components/QuickFilters/types';
+import { DataSource } from 'types/common/queryBuilder';
+import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
+
+interface UseFieldValuesProps {
+	filter: IQuickFiltersConfig;
+	searchText: string;
+	existingQuery?: string;
+	metricNamespace?: string;
+	startUnixMilli?: number;
+	endUnixMilli?: number;
+	enabled: boolean;
+}
+
+interface UseFieldValuesReturn {
+	relatedValues: string[];
+	allValues: string[];
+	isLoading: boolean;
+	isFetching: boolean;
+}
+
+const DATA_SOURCE_TO_SIGNAL: Record<DataSource, TelemetrytypesSignalDTO> = {
+	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
+	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
+	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,
+};
+
+export function useFieldValues({
+	filter,
+	searchText,
+	existingQuery,
+	metricNamespace,
+	startUnixMilli,
+	endUnixMilli,
+	enabled,
+}: UseFieldValuesProps): UseFieldValuesReturn {
+	const { data, isLoading, isFetching } = useGetFieldsValues(
+		{
+			signal: filter.dataSource
+				? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
+				: undefined,
+			name: filter.attributeKey.key,
+			searchText,
+			existingQuery,
+			metricNamespace,
+			startUnixMilli,
+			// This field does not affect the backend but I wanted to keep it here
+			// in case we add the support in the future
+			endUnixMilli,
+		},
+		{
+			query: {
+				enabled,
+				cacheTime: FIELD_API_CACHE_TIME,
+				keepPreviousData: true,
+			},
+		},
+	);
+
+	const relatedValues: string[] = useMemo(() => {
+		const values = data?.data?.values;
+		if (!values) {
+			return [];
+		}
+
+		return (
+			values.relatedValues?.filter(
+				(value): value is string =>
+					value !== null && value !== undefined && value !== '',
+			) || []
+		);
+	}, [data]);
+
+	const allValues: string[] = useMemo(() => {
+		const values = data?.data?.values;
+		if (!values) {
+			return [];
+		}
+
+		const stringValues =
+			values.stringValues?.filter(
+				(value): value is string =>
+					value !== null && value !== undefined && value !== '',
+			) || [];
+		const numberValues =
+			values.numberValues
+				?.filter((value): value is number => value !== null && value !== undefined)
+				.map((value) => value.toString()) || [];
+
+		return [...stringValues, ...numberValues];
+	}, [data]);
+
+	return { relatedValues, allValues, isLoading, isFetching };
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useSectionedValues.test.ts

@@ -0,0 +1,115 @@
+import { renderHook } from '@testing-library/react';
+
+import { useSectionedValues } from './useSectionedValues';
+
+describe('useSectionedValues', () => {
+	const baseInput = {
+		relatedValues: ['val1', 'val2'],
+		allValues: ['val1', 'val2', 'val3'],
+		currentFilterState: {},
+		isSomeFilterPresentForCurrentAttribute: false,
+		isNotInOperator: false,
+		hasExistingQuery: false,
+		searchText: '',
+		visibleItemsCount: 10,
+	};
+
+	it('no query at all → all items orderIndex 0, no badges', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				hasExistingQuery: false,
+				isSomeFilterPresentForCurrentAttribute: false,
+			}),
+		);
+
+		expect(result.current.sectionedItems).toHaveLength(3);
+		result.current.sectionedItems.forEach((item) => {
+			expect(item.orderIndex).toBe(0);
+			expect(item.badge).toBeNull();
+		});
+	});
+
+	it('has query, no filter for key → related values get related badge', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				hasExistingQuery: true,
+				isSomeFilterPresentForCurrentAttribute: false,
+			}),
+		);
+
+		const relatedItems = result.current.sectionedItems.filter(
+			(item) => item.value === 'val1' || item.value === 'val2',
+		);
+		const otherItems = result.current.sectionedItems.filter(
+			(item) => item.value === 'val3',
+		);
+
+		// Related values should have related badge
+		relatedItems.forEach((item) => {
+			expect(item.orderIndex).toBe(1);
+			expect(item.badge?.key).toBe('related');
+		});
+
+		// Other values should have other badge
+		otherItems.forEach((item) => {
+			expect(item.orderIndex).toBe(2);
+			expect(item.badge?.key).toBe('other');
+		});
+	});
+
+	it('has query + filter for key, selected value → selected at top, no badge', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				hasExistingQuery: true,
+				isSomeFilterPresentForCurrentAttribute: true,
+				currentFilterState: { val1: true, val2: false, val3: false },
+			}),
+		);
+
+		const selectedItem = result.current.sectionedItems.find(
+			(item) => item.value === 'val1',
+		);
+
+		expect(selectedItem?.orderIndex).toBe(0);
+		expect(selectedItem?.badge).toBeNull();
+	});
+
+	it('has query + filter for key, NOT IN operator → not_in values get badge', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				hasExistingQuery: true,
+				isSomeFilterPresentForCurrentAttribute: true,
+				isNotInOperator: true,
+				currentFilterState: { val1: false, val2: true, val3: true },
+			}),
+		);
+
+		// val1 is unchecked + NOT IN = excluded
+		const excludedItem = result.current.sectionedItems.find(
+			(item) => item.value === 'val1',
+		);
+
+		expect(excludedItem?.orderIndex).toBe(0);
+		expect(excludedItem?.badge?.key).toBe('not_in');
+	});
+
+	it('items with same orderIndex sorted alphabetically', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				relatedValues: ['zebra', 'apple', 'mango'],
+				allValues: ['zebra', 'apple', 'mango'],
+				hasExistingQuery: false,
+				isSomeFilterPresentForCurrentAttribute: false,
+			}),
+		);
+
+		// All items have orderIndex 0, should be sorted alphabetically
+		const values = result.current.sectionedItems.map((item) => item.value);
+		expect(values).toStrictEqual(['apple', 'mango', 'zebra']);
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useSectionedValues.ts

@@ -0,0 +1,97 @@
+import { useMemo } from 'react';
+
+import { BadgeConfig, deriveItems } from './itemRules';
+import { CheckedState } from '../../../types';
+
+interface SectionedValuesInput {
+	relatedValues: string[];
+	allValues: string[];
+	currentFilterState: Record<string, boolean>;
+	isSomeFilterPresentForCurrentAttribute: boolean;
+	isNotInOperator: boolean;
+	hasExistingQuery: boolean;
+	searchText: string;
+	visibleItemsCount: number;
+}
+
+export interface SectionedItem {
+	value: string;
+	orderIndex: number;
+	badge: BadgeConfig | null;
+	checkedState: CheckedState;
+}
+
+interface SectionedValuesOutput {
+	sectionedItems: SectionedItem[];
+	totalCount: number;
+}
+
+export function useSectionedValues({
+	relatedValues,
+	allValues,
+	currentFilterState,
+	isSomeFilterPresentForCurrentAttribute,
+	isNotInOperator,
+	hasExistingQuery,
+	searchText,
+	visibleItemsCount,
+}: SectionedValuesInput): SectionedValuesOutput {
+	const items = useMemo(() => {
+		const allUniqueValues = Array.from(new Set([...relatedValues, ...allValues]));
+
+		// When searching, only use allValues (API filtered)
+		const valuesToProcess = searchText ? allValues : allUniqueValues;
+
+		// Build selected set based on operator
+		// Only populate when filter exists for this key
+		const selectedSet = new Set<string>();
+		if (isSomeFilterPresentForCurrentAttribute) {
+			for (const [val, isChecked] of Object.entries(currentFilterState)) {
+				if (isNotInOperator) {
+					// NOT IN: unchecked = explicitly excluded
+					if (!isChecked) {
+						selectedSet.add(val);
+					}
+				} else {
+					// IN: checked = explicitly selected
+					if (isChecked) {
+						selectedSet.add(val);
+					}
+				}
+			}
+		}
+
+		// Always include selected values at top - they may not be in API response
+		// (e.g., NOT IN filter excludes them from results)
+		const finalValues = [
+			...new Set([...Array.from(selectedSet), ...valuesToProcess]),
+		];
+
+		const relatedSet = new Set(relatedValues);
+
+		const derived = deriveItems(finalValues, relatedSet, selectedSet, {
+			isNotInOperator,
+			hasExistingQuery,
+			hasFilterForThisKey: isSomeFilterPresentForCurrentAttribute,
+		});
+
+		return derived.sort(
+			(a, b) => a.orderIndex - b.orderIndex || a.value.localeCompare(b.value),
+		);
+	}, [
+		relatedValues,
+		allValues,
+		currentFilterState,
+		isSomeFilterPresentForCurrentAttribute,
+		isNotInOperator,
+		hasExistingQuery,
+		searchText,
+	]);
+
+	const sectionedItems = useMemo(
+		() => items.slice(0, visibleItemsCount),
+		[items, visibleItemsCount],
+	);
+
+	return { sectionedItems, totalCount: items.length };
+}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -32,6 +32,7 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { USER_ROLES } from 'types/roles';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
+import CheckboxV2 from './FilterRenderers/Checkbox/v2/CheckboxFilterV2';
 import Duration from './FilterRenderers/Duration/Duration';
 import Slider from './FilterRenderers/Slider/Slider';
 import useFilterConfig from './hooks/useFilterConfig';
@@ -51,6 +52,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		signal,
 		showFilterCollapse = true,
 		showQueryName = true,
+		useFieldApis,
 	} = props;
 	const { user } = useAppContext();
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -297,21 +299,45 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				{filterConfig.map((filter) => {
 					switch (filter.type) {
 						case FiltersType.CHECKBOX:
-							return (
+							return useFieldApis ? (
+								<CheckboxV2
+									key={filter.attributeKey.key}
+									source={source}
+									filter={filter}
+									onFilterChange={onFilterChange}
+									useFieldApis={useFieldApis}
+								/>
+							) : (
 								<Checkbox
+									key={filter.attributeKey.key}
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
 								/>
 							);
 						case FiltersType.DURATION:
-							return <Duration filter={filter} onFilterChange={onFilterChange} />;
+							return (
+								<Duration
+									key={filter.attributeKey.key}
+									filter={filter}
+									onFilterChange={onFilterChange}
+								/>
+							);
 						case FiltersType.SLIDER:
-							return <Slider />;
+							return <Slider key={filter.attributeKey.key} />;
 						// eslint-disable-next-line sonarjs/no-duplicated-branches
 						default:
-							return (
+							return useFieldApis ? (
+								<CheckboxV2
+									key={filter.attributeKey.key}
+									source={source}
+									filter={filter}
+									onFilterChange={onFilterChange}
+									useFieldApis={useFieldApis}
+								/>
+							) : (
 								<Checkbox
+									key={filter.attributeKey.key}
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
@@ -381,4 +407,5 @@ QuickFilters.defaultProps = {
 	config: [],
 	showFilterCollapse: true,
 	showQueryName: true,
+	useFieldApis: undefined,
 };

frontend/src/components/QuickFilters/types.ts

@@ -26,6 +26,11 @@ export enum SignalType {
 	METER_EXPLORER = 'meter',
 }
 
+/**
+ * Missing export from signozhq/ui/checkbox, TODO(H4ad): Add and remove this type definition
+ */
+export type CheckedState = 'checked' | 'unchecked' | 'indeterminate';
+
 export interface IQuickFiltersConfig {
 	type: FiltersType;
 	title: string;
@@ -46,6 +51,7 @@ export interface IQuickFiltersProps {
 	className?: string;
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
+	useFieldApis?: QuickFilterCheckboxUseFieldApis;
 }
 
 export enum QuickFiltersSource {
@@ -56,3 +62,19 @@ export enum QuickFiltersSource {
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
 }
+
+/**
+ * Opt-in: fetch values from the /v1/fields/values API instead of /v3/autocomplete/attribute_values
+ */
+export type QuickFilterCheckboxUseFieldApis = {
+	startUnixMilli: number;
+	endUnixMilli: number;
+	/**
+	 * If you didn't specify a string, we automatically try to extract this from the currentQuery,
+	 * from the filter.expression or filter.items.
+	 *
+	 * Use null to ignore/disable this behavior.
+	 */
+	existingQuery?: string | null;
+	metricNamespace?: string;
+};

frontend/src/constants/queryCacheTime.ts

@@ -1,3 +1,5 @@
 export const DASHBOARD_CACHE_TIME = 30_000;
 // keep it low or zero, otherwise, when enabled auto-refresh, this causes OOM due to accumulated queries in cache
 export const DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED = 0;
+
+export const FIELD_API_CACHE_TIME = 60_000;

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -9,7 +9,10 @@ import { FeatureKeys } from 'constants/features';
 import K8sBaseDetails from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
 import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
+import {
+	InfraMonitoringEntity,
+	METRIC_NAMESPACE_BY_ENTITY,
+} from 'container/InfraMonitoringK8s/constants';
 import {
 	useInfraMonitoringFiltersK8s,
 	useInfraMonitoringPageListing,
@@ -17,6 +20,8 @@ import {
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useAppContext } from 'providers/App/App';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
@@ -57,6 +62,17 @@ function Hosts(): JSX.Element {
 		entityVersion: '',
 	});
 
+	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
+	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
+	const { startUnixMilli, endUnixMilli } = useMemo(() => {
+		const { minTime, maxTime } = getMinMaxTime();
+		return {
+			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedTime, getMinMaxTime]);
+
 	// Track previous urlFilters to only sync when the value actually changes
 	// (not when handleChangeQueryData changes due to query updates)
 	const prevUrlFiltersRef = useRef<string | null>(null);
@@ -155,6 +171,12 @@ function Hosts(): JSX.Element {
 								config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
+								useFieldApis={{
+									metricNamespace:
+										METRIC_NAMESPACE_BY_ENTITY[InfraMonitoringEntity.HOSTS],
+									startUnixMilli,
+									endUnixMilli,
+								}}
 							/>
 						</div>
 					)}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as Sentry from '@sentry/react';
-import { Button, CollapseProps } from 'antd';
-import { Collapse, Tooltip } from 'antd';
+import { Button, Collapse, CollapseProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
-import { QuickFiltersSource } from 'components/QuickFilters/types';
+import {
+	QuickFilterCheckboxUseFieldApis,
+	QuickFiltersSource,
+} from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -23,6 +25,8 @@ import {
 	Workflow,
 } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { FeatureKeys } from '../../constants/features';
@@ -38,7 +42,9 @@ import {
 	GetPodsQuickFiltersConfig,
 	GetStatefulsetsQuickFiltersConfig,
 	GetVolumesQuickFiltersConfig,
+	InfraMonitoringEntity,
 	K8sCategories,
+	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
 import K8sDaemonSetsList from './DaemonSets/K8sDaemonSetsList';
 import K8sDeploymentsList from './Deployments/K8sDeploymentsList';
@@ -98,6 +104,26 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
 			?.active || false;
 
+	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
+	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
+	const { startUnixMilli, endUnixMilli } = useMemo(() => {
+		const { minTime, maxTime } = getMinMaxTime();
+		return {
+			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedTime, getMinMaxTime]);
+
+	const getUseFieldApis = useCallback(
+		(entity: InfraMonitoringEntity): QuickFilterCheckboxUseFieldApis => ({
+			metricNamespace: METRIC_NAMESPACE_BY_ENTITY[entity],
+			startUnixMilli,
+			endUnixMilli,
+		}),
+		[startUnixMilli, endUnixMilli],
+	);
+
 	const handleFilterChange = (query: Query): void => {
 		// update the current query with the new filters
 		// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
@@ -139,6 +165,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.PODS)}
 				/>
 			),
 		},
@@ -155,6 +182,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.NODES)}
 				/>
 			),
 		},
@@ -171,6 +199,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.NAMESPACES)}
 				/>
 			),
 		},
@@ -187,6 +216,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.CLUSTERS)}
 				/>
 			),
 		},
@@ -203,6 +233,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.DEPLOYMENTS)}
 				/>
 			),
 		},
@@ -219,6 +250,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.JOBS)}
 				/>
 			),
 		},
@@ -235,6 +267,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.DAEMONSETS)}
 				/>
 			),
 		},
@@ -251,6 +284,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.STATEFULSETS)}
 				/>
 			),
 		},
@@ -267,6 +301,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
+					useFieldApis={getUseFieldApis(InfraMonitoringEntity.VOLUMES)}
 				/>
 			),
 		},

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -21,6 +21,21 @@ export enum InfraMonitoringEntity {
 	VOLUMES = 'volumes',
 }
 
+export const METRIC_NAMESPACE_BY_ENTITY: Record<InfraMonitoringEntity, string> =
+	{
+		[InfraMonitoringEntity.HOSTS]: 'system.',
+		[InfraMonitoringEntity.PODS]: 'k8s.pod.',
+		[InfraMonitoringEntity.NODES]: 'k8s.node.',
+		[InfraMonitoringEntity.NAMESPACES]: 'k8s.pod.',
+		[InfraMonitoringEntity.CLUSTERS]: 'k8s.node.',
+		[InfraMonitoringEntity.DEPLOYMENTS]: 'k8s.',
+		[InfraMonitoringEntity.STATEFULSETS]: 'k8s.',
+		[InfraMonitoringEntity.DAEMONSETS]: 'k8s.',
+		[InfraMonitoringEntity.CONTAINERS]: 'k8s.pod.',
+		[InfraMonitoringEntity.JOBS]: 'k8s.',
+		[InfraMonitoringEntity.VOLUMES]: 'k8s.volume.',
+	};
+
 export enum VIEWS {
 	METRICS = 'metrics',
 	LOGS = 'logs',

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/useResolvedVariables.test.tsx

@@ -0,0 +1,67 @@
+import { renderHook } from '@testing-library/react';
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	DashboardtypesVariableDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { selectResolvedVariables } from '../../store/slices/variableSelectionSlice';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useResolvedVariables } from '../useResolvedVariables';
+
+// A text variable is the simplest envelope (no list plugin); the builder's full
+// type/value matrix is covered in buildVariablesPayload.test.ts. The envelope is
+// cast at the boundary — its kind discriminant is the literal 'TextVariable'.
+function textVariable(name: string, value: string): DashboardtypesVariableDTO {
+	return {
+		kind: 'TextVariable',
+		spec: { name, value, display: { name } },
+	} as unknown as DashboardtypesVariableDTO;
+}
+
+function dashboard(
+	id: string,
+	variables: DashboardtypesVariableDTO[],
+): DashboardtypesGettableDashboardV2DTO {
+	return {
+		id,
+		spec: { variables },
+	} as unknown as DashboardtypesGettableDashboardV2DTO;
+}
+
+describe('useResolvedVariables', () => {
+	afterEach(() => {
+		useDashboardStore.setState({ variableValues: {}, resolvedVariables: {} });
+	});
+
+	it('publishes the resolved V5 payload for the dashboard to the store', () => {
+		renderHook(() =>
+			useResolvedVariables(dashboard('d1', [textVariable('env', 'prod')])),
+		);
+
+		expect(
+			selectResolvedVariables('d1')(useDashboardStore.getState()),
+		).toStrictEqual({ env: { type: 'text', value: 'prod' } });
+	});
+
+	it('reflects the runtime selection over the configured default', () => {
+		useDashboardStore
+			.getState()
+			.setVariableValues('d2', { env: { value: 'staging', allSelected: false } });
+
+		renderHook(() =>
+			useResolvedVariables(dashboard('d2', [textVariable('env', 'prod')])),
+		);
+
+		expect(
+			selectResolvedVariables('d2')(useDashboardStore.getState()),
+		).toStrictEqual({ env: { type: 'text', value: 'staging' } });
+	});
+
+	it('publishes an empty payload when the dashboard has no variables', () => {
+		renderHook(() => useResolvedVariables(dashboard('d3', [])));
+
+		expect(
+			selectResolvedVariables('d3')(useDashboardStore.getState()),
+		).toStrictEqual({});
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery.ts

@@ -17,6 +17,8 @@ import type { PanelPagination, PanelQueryData } from '../queryV5/types';
 import { getRawResults } from '../queryV5/v5ResponseData';
 import { getBuilderQueries } from '../Panels/utils/getBuilderQueries';
 import { PANEL_KIND_TO_PANEL_TYPE } from '../Panels/types/panelKind';
+import { selectResolvedVariables } from '../store/slices/variableSelectionSlice';
+import { useDashboardStore } from '../store/useDashboardStore';
 import { resolvePanelTimeWindow } from './resolvePanelTimeWindow';
 import { useGetQueryRangeV5 } from './useGetQueryRangeV5';
 
@@ -65,8 +67,9 @@ export interface UsePanelQueryResult {
 /**
  * Fetches query-range data for a V2 panel over the pure-V5 contract: builds the request DTO
  * from the panel's perses queries (no V1 `Query` intermediary), reads global time from Redux,
- * and posts via `useGetQueryRangeV5`. Variable substitution is deferred until V2 has its own
- * variable plumbing. Renderers consume the raw response through the `queryV5` prep utils.
+ * substitutes the dashboard's resolved variable values (published to the store by
+ * `useResolvedVariables`), and posts via `useGetQueryRangeV5`. Renderers consume the raw
+ * response through the `queryV5` prep utils.
  */
 export function usePanelQuery({
 	panel,
@@ -105,6 +108,11 @@ export function usePanelQuery({
 		minTime,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
+	// Resolved variable values for this dashboard, published by useResolvedVariables.
+	// Substituted into the request and keyed into the cache so a selection change refetches.
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const variables = useDashboardStore(selectResolvedVariables(dashboardId));
+
 	// `visualization` exists only on variants that declare it — read via `in` narrowing over the
 	// generated union (no cast). `fillSpans` (TimeSeries/Bar only) → formatOptions.fillGaps.
 	const pluginSpec = panel.spec.plugin.spec;
@@ -141,8 +149,19 @@ export function usePanelQuery({
 				endMs,
 				fillGaps,
 				pagination: isPaginated ? { offset, limit: pageSize } : undefined,
+				variables,
 			}),
-		[queries, panelType, startMs, endMs, fillGaps, isPaginated, offset, pageSize],
+		[
+			queries,
+			panelType,
+			startMs,
+			endMs,
+			fillGaps,
+			isPaginated,
+			offset,
+			pageSize,
+			variables,
+		],
 	);
 
 	const legendMap = useMemo(() => extractLegendMap(queries), [queries]);
@@ -167,6 +186,8 @@ export function usePanelQuery({
 			// Each page is its own cache entry (0/default for non-paged kinds).
 			offset,
 			pageSize,
+			// Variable selection changes the request, so it must re-key the cache (refetch).
+			variables,
 		],
 		[
 			panelId,
@@ -182,6 +203,7 @@ export function usePanelQuery({
 			queries,
 			offset,
 			pageSize,
+			variables,
 		],
 	);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useResolvedVariables.ts

@@ -0,0 +1,42 @@
+import { useEffect, useMemo } from 'react';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters';
+import { buildVariablesPayload } from '../queryV5/buildVariablesPayload';
+import { selectVariableValues } from '../store/slices/variableSelectionSlice';
+import { useDashboardStore } from '../store/useDashboardStore';
+
+/**
+ * Resolves the dashboard's variable selection into the V5 query payload and
+ * publishes it to the store, so `usePanelQuery` reads it by dashboardId without
+ * the spec being threaded through the panel tree (the `setEditContext` pattern).
+ *
+ * Definitions come from the spec; values come from the runtime selection (seeded
+ * by the variable bar). Re-publishes whenever either changes, which re-keys the
+ * panel queries and triggers a refetch with the new values.
+ */
+export function useResolvedVariables(
+	dashboard: DashboardtypesGettableDashboardV2DTO,
+): void {
+	const dashboardId = dashboard.id ?? '';
+
+	const definitions = useMemo(
+		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
+		[dashboard.spec?.variables],
+	);
+
+	const selection = useDashboardStore(selectVariableValues(dashboardId));
+	const setResolvedVariables = useDashboardStore((s) => s.setResolvedVariables);
+
+	const resolved = useMemo(
+		() => buildVariablesPayload(definitions, selection),
+		[definitions, selection],
+	);
+
+	useEffect(() => {
+		if (!dashboardId) {
+			return;
+		}
+		setResolvedVariables(dashboardId, resolved);
+	}, [dashboardId, resolved, setResolvedVariables]);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -7,6 +7,7 @@ import { useAppContext } from 'providers/App/App';
 
 import DashboardPageToolbar from './DashboardPageToolbar';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
+import { useResolvedVariables } from './hooks/useResolvedVariables';
 import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 import DashboardPageHeader from './components/DashboardPageHeader/DashboardPageHeader';
@@ -50,6 +51,10 @@ function DashboardContainer({
 		setEditContext,
 	]);
 
+	// Resolve the variable selection into the V5 query payload and publish it to
+	// the store, so each panel's query substitutes the bar's selected values.
+	useResolvedVariables(dashboard);
+
 	const spec = dashboard.spec;
 	const image = dashboard.image || Base64Icons[0];
 	const name = spec.display.name;

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/__tests__/buildVariablesPayload.test.ts

@@ -0,0 +1,103 @@
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+	type VariableType,
+} from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableSelectionMap } from '../../VariablesBar/selectionTypes';
+import { buildVariablesPayload } from '../buildVariablesPayload';
+
+function variable(
+	name: string,
+	type: VariableType,
+	overrides: Partial<VariableFormModel> = {},
+): VariableFormModel {
+	return { ...emptyVariableFormModel(), name, type, ...overrides };
+}
+
+describe('buildVariablesPayload', () => {
+	it('returns an empty map when there are no definitions', () => {
+		expect(buildVariablesPayload([], {})).toStrictEqual({});
+	});
+
+	it('maps each UI variable type to its V5 wire type', () => {
+		const definitions = [
+			variable('q', 'QUERY'),
+			variable('c', 'CUSTOM'),
+			variable('t', 'TEXT'),
+			variable('d', 'DYNAMIC'),
+		];
+		const selection: VariableSelectionMap = {
+			q: { value: 'a', allSelected: false },
+			c: { value: 'b', allSelected: false },
+			t: { value: 'c', allSelected: false },
+			d: { value: 'e', allSelected: false },
+		};
+		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
+			q: { type: 'query', value: 'a' },
+			c: { type: 'custom', value: 'b' },
+			t: { type: 'text', value: 'c' },
+			d: { type: 'dynamic', value: 'e' },
+		});
+	});
+
+	it('passes a multi-select array value through verbatim', () => {
+		const definitions = [variable('svc', 'QUERY', { multiSelect: true })];
+		const selection: VariableSelectionMap = {
+			svc: { value: ['a', 'b'], allSelected: false },
+		};
+		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
+			svc: { type: 'query', value: ['a', 'b'] },
+		});
+	});
+
+	it('collapses a multi-select dynamic ALL selection to the __all__ sentinel', () => {
+		const definitions = [variable('pod', 'DYNAMIC', { multiSelect: true })];
+		const selection: VariableSelectionMap = {
+			pod: { value: null, allSelected: true },
+		};
+		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
+			pod: { type: 'dynamic', value: '__all__' },
+		});
+	});
+
+	it('does NOT collapse a query ALL selection — it sends the full value array', () => {
+		const definitions = [variable('svc', 'QUERY', { multiSelect: true })];
+		const selection: VariableSelectionMap = {
+			svc: { value: ['a', 'b'], allSelected: true },
+		};
+		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
+			svc: { type: 'query', value: ['a', 'b'] },
+		});
+	});
+
+	it('falls back to a text variable configured value when unselected', () => {
+		const definitions = [variable('env', 'TEXT', { textValue: 'prod' })];
+		expect(buildVariablesPayload(definitions, {})).toStrictEqual({
+			env: { type: 'text', value: 'prod' },
+		});
+	});
+
+	it('falls back to a list variable configured default when unselected', () => {
+		const definitions = [
+			variable('region', 'QUERY', {
+				defaultValue: { value: 'us-east' },
+			} as unknown as Partial<VariableFormModel>),
+		];
+		expect(buildVariablesPayload(definitions, {})).toStrictEqual({
+			region: { type: 'query', value: 'us-east' },
+		});
+	});
+
+	it('omits a variable with no selection and no default', () => {
+		const definitions = [variable('q', 'QUERY')];
+		expect(buildVariablesPayload(definitions, {})).toStrictEqual({});
+	});
+
+	it('omits an unnamed variable', () => {
+		const definitions = [variable('', 'QUERY')];
+		const selection: VariableSelectionMap = {
+			'': { value: 'x', allSelected: false },
+		};
+		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({});
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest.ts

@@ -6,6 +6,7 @@ import type {
 	Querybuildertypesv5PromQueryDTO,
 	Querybuildertypesv5QueryEnvelopeDTO,
 	Querybuildertypesv5QueryRangeRequestDTO,
+	Querybuildertypesv5QueryRangeRequestDTOVariables,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	Querybuildertypesv5QueryEnvelopeBuilderDTOType,
@@ -202,11 +203,13 @@ export interface BuildQueryRangeRequestArgs {
 	fillGaps?: boolean;
 	/** Server-side paging for raw/list panels, written onto the builder queries' `offset`/`limit`. */
 	pagination?: { offset: number; limit: number };
+	/** Runtime variable values (name → {type,value}) substituted server-side; built by `buildVariablesPayload`. */
+	variables?: Querybuildertypesv5QueryRangeRequestDTOVariables;
 }
 
 /**
  * Builds the V5 query-range request DTO directly from the panel's perses queries (no V1 `Query`
- * intermediary). Variables are absent (`variables: {}`) until V2 grows its own variable plumbing.
+ * intermediary). `variables` carries the runtime selection (empty when the dashboard has none).
  */
 export function buildQueryRangeRequest({
 	queries,
@@ -215,6 +218,7 @@ export function buildQueryRangeRequest({
 	endMs,
 	fillGaps = false,
 	pagination,
+	variables = {},
 }: BuildQueryRangeRequestArgs): Querybuildertypesv5QueryRangeRequestDTO {
 	let envelopes = toQueryEnvelopes(queries);
 	if (panelType === PANEL_TYPES.BAR) {
@@ -234,7 +238,7 @@ export function buildQueryRangeRequest({
 			formatTableResultForUI: panelType === PANEL_TYPES.TABLE,
 			fillGaps,
 		},
-		variables: {},
+		variables,
 	};
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/buildVariablesPayload.ts

@@ -0,0 +1,105 @@
+import type {
+	Querybuildertypesv5QueryRangeRequestDTOVariables,
+	Querybuildertypesv5VariableItemDTOValue,
+} from 'api/generated/services/sigNoz.schemas';
+import { Querybuildertypesv5VariableTypeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type {
+	VariableFormModel,
+	VariableType,
+} from '../DashboardSettings/Variables/variableFormModel';
+import type {
+	SelectedVariableValue,
+	VariableSelection,
+	VariableSelectionMap,
+} from '../VariablesBar/selectionTypes';
+
+/**
+ * Backend sentinel for "every value selected" on a multi-select dynamic variable.
+ * V1 parity (`getDashboardVariables`): only dynamic vars collapse to `__all__`;
+ * query/custom multi-selects send the full value array instead. Lowercase — the
+ * URL/store `__ALL__` sentinel is a separate serialization concern.
+ */
+const ALL_VALUES_SENTINEL = '__all__';
+
+/** UI variable grouping → the V5 wire `variables[].type`. */
+const VARIABLE_TYPE_TO_DTO: Record<
+	VariableType,
+	Querybuildertypesv5VariableTypeDTO
+> = {
+	QUERY: Querybuildertypesv5VariableTypeDTO.query,
+	CUSTOM: Querybuildertypesv5VariableTypeDTO.custom,
+	TEXT: Querybuildertypesv5VariableTypeDTO.text,
+	DYNAMIC: Querybuildertypesv5VariableTypeDTO.dynamic,
+};
+
+/** The variable's configured default, used when nothing is selected yet. */
+function configuredDefault(
+	definition: VariableFormModel,
+): SelectedVariableValue | undefined {
+	if (definition.type === 'TEXT') {
+		return definition.textValue || undefined;
+	}
+	return (
+		definition.defaultValue as { value?: SelectedVariableValue } | undefined
+	)?.value;
+}
+
+/**
+ * Resolves the wire value for one variable: the dynamic "ALL" sentinel, else the
+ * user's selection, else the configured default. Returns `undefined` when there
+ * is nothing meaningful to send (the variable is then omitted from the payload).
+ */
+function resolveValue(
+	definition: VariableFormModel,
+	selection: VariableSelection | undefined,
+): Querybuildertypesv5VariableItemDTOValue | undefined {
+	if (
+		definition.type === 'DYNAMIC' &&
+		definition.multiSelect &&
+		selection?.allSelected
+	) {
+		return ALL_VALUES_SENTINEL;
+	}
+
+	const selected = selection?.value;
+	const hasSelection =
+		selected !== null &&
+		selected !== undefined &&
+		!(typeof selected === 'string' && selected === '');
+	if (hasSelection) {
+		return selected as Querybuildertypesv5VariableItemDTOValue;
+	}
+
+	const fallback = configuredDefault(definition);
+	return fallback == null
+		? undefined
+		: (fallback as Querybuildertypesv5VariableItemDTOValue);
+}
+
+/**
+ * Builds the V5 `variables` map from the dashboard's variable definitions and the
+ * runtime selection, so a panel query substitutes the values the user picked in
+ * the variable bar (V1 parity with `getDashboardVariables` + the V5 prep). The
+ * definition list supplies the wire `type` (the selection map carries only values).
+ */
+export function buildVariablesPayload(
+	definitions: VariableFormModel[],
+	selection: VariableSelectionMap,
+): Querybuildertypesv5QueryRangeRequestDTOVariables {
+	const payload: Querybuildertypesv5QueryRangeRequestDTOVariables = {};
+	definitions.forEach((definition) => {
+		if (!definition.name) {
+			return;
+		}
+		const value = resolveValue(definition, selection[definition.name]);
+		if (value === undefined) {
+			return;
+		}
+		payload[definition.name] = {
+			type: VARIABLE_TYPE_TO_DTO[definition.type],
+			value,
+		};
+	});
+	return payload;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/variableSelectionSlice.ts

@@ -1,3 +1,4 @@
+import type { Querybuildertypesv5QueryRangeRequestDTOVariables } from 'api/generated/services/sigNoz.schemas';
 import type { StateCreator } from 'zustand';
 
 import type {
@@ -12,9 +13,19 @@ import type { DashboardStore } from '../useDashboardStore';
  * localStorage (mirrored to the URL by the bar for shareable links); it is
  * deliberately NOT part of the dashboard spec, so selecting a value never
  * patches the dashboard.
+ *
+ * `resolvedVariables` is the same selection resolved into the V5 query payload
+ * shape (`{ name: { type, value } }`), published by `useResolvedVariables` so
+ * `usePanelQuery` reads it without threading the dashboard spec down the tree
+ * (the edit-context publish pattern). Transient — not persisted (it is derived
+ * from `variableValues` + the spec on every load).
  */
 export interface VariableSelectionSlice {
 	variableValues: Record<string, VariableSelectionMap>;
+	resolvedVariables: Record<
+		string,
+		Querybuildertypesv5QueryRangeRequestDTOVariables
+	>;
 	setVariableValue: (
 		dashboardId: string,
 		name: string,
@@ -22,6 +33,11 @@ export interface VariableSelectionSlice {
 	) => void;
 	/** Bulk set (used to seed from URL/localStorage/defaults on load). */
 	setVariableValues: (dashboardId: string, values: VariableSelectionMap) => void;
+	/** Publish the resolved V5 variables payload for a dashboard. */
+	setResolvedVariables: (
+		dashboardId: string,
+		variables: Querybuildertypesv5QueryRangeRequestDTOVariables,
+	) => void;
 }
 
 export const createVariableSelectionSlice: StateCreator<
@@ -31,6 +47,7 @@ export const createVariableSelectionSlice: StateCreator<
 	VariableSelectionSlice
 > = (set, get) => ({
 	variableValues: {},
+	resolvedVariables: {},
 	setVariableValue: (dashboardId, name, selection): void => {
 		const { variableValues } = get();
 		set({
@@ -46,6 +63,12 @@ export const createVariableSelectionSlice: StateCreator<
 			variableValues: { ...variableValues, [dashboardId]: values },
 		});
 	},
+	setResolvedVariables: (dashboardId, variables): void => {
+		const { resolvedVariables } = get();
+		set({
+			resolvedVariables: { ...resolvedVariables, [dashboardId]: variables },
+		});
+	},
 });
 
 /**
@@ -60,3 +83,13 @@ export const selectVariableValues =
 	(dashboardId: string) =>
 	(state: DashboardStore): VariableSelectionMap =>
 		state.variableValues[dashboardId] ?? EMPTY_SELECTION_MAP;
+
+/** Stable empty payload — same rationale as {@link EMPTY_SELECTION_MAP}. */
+const EMPTY_RESOLVED_VARIABLES: Querybuildertypesv5QueryRangeRequestDTOVariables =
+	{};
+
+/** Selector: the resolved V5 variables payload for a dashboard (empty if none). */
+export const selectResolvedVariables =
+	(dashboardId: string) =>
+	(state: DashboardStore): Querybuildertypesv5QueryRangeRequestDTOVariables =>
+		state.resolvedVariables[dashboardId] ?? EMPTY_RESOLVED_VARIABLES;