chore: added wiring

* 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/public/locales/en-GB/titles.json

@@ -61,5 +61,7 @@
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
-	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
+	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
+	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
 }

frontend/public/locales/en/titles.json

@@ -86,5 +86,7 @@
 	"ROLE_EDIT": "SigNoz | Edit Role",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
-	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
+	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
+	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
 }

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -3,7 +3,6 @@
 	flex-direction: column;
 	flex: 1;
 	min-height: 0;
-	overflow: hidden;
 	border-radius: 4px;
 }
 

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/components/YAxisUnitSelector/__tests__/formatter.test.tsx

@@ -680,6 +680,13 @@ describe('formatUniversalUnit', () => {
 	});
 
 	describe('Datetime', () => {
+		beforeAll(() => {
+			jest.useFakeTimers().setSystemTime(new Date('2026-01-01T00:00:00Z'));
+		});
+		afterAll(() => {
+			jest.useRealTimers();
+		});
+
 		it('formats datetime units', () => {
 			expect(formatUniversalUnit(900, UniversalYAxisUnit.DATETIME_FROM_NOW)).toBe(
 				'56 years ago',

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/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.module.scss

@@ -1,7 +1,28 @@
+.filtersBar {
+	display: flex;
+	gap: var(--spacing-6);
+	align-items: center;
+	justify-content: space-between;
+}
+
+.filtersBarLeft {
+	display: flex;
+	gap: var(--spacing-6);
+	align-items: center;
+}
+
+.filtersBarSearch {
+	width: 280px;
+}
+
+.filtersBarSource {
+	width: 160px;
+}
+
 .pageError {
 	padding: var(--spacing-6) var(--spacing-8);
 	border-radius: var(--radius-2);
-	background: color-mix(in srgb, var(--bg-cherry-400) 8%, transparent);
-	color: var(--text-cherry-400);
+	background: color-mix(in srgb, var(--accent-cherry) 8%, transparent);
+	color: var(--accent-cherry);
 	font-size: var(--periscope-font-size-base);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx

@@ -1,52 +1,164 @@
 import { useMemo } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Plus, Search, X } from '@signozhq/icons';
 import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
 import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
 import { useTableParams } from 'components/TanStackTableView';
-import { Typography } from '@signozhq/ui/typography';
+import useComponentPermission from 'hooks/useComponentPermission';
+import useDebounce from 'hooks/useDebounce';
+import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs';
+import { useAppContext } from 'providers/App/App';
 
-import { LIMIT_KEY, PAGE_KEY, PAGE_SIZE } from '../constants';
-import styles from './ModelCostTabPanel.module.scss';
+import {
+	LIMIT_KEY,
+	PAGE_KEY,
+	PAGE_SIZE,
+	SEARCH_DEBOUNCE_MS,
+	SEARCH_KEY,
+	SOURCE_FILTER_OPTIONS,
+	SOURCE_FILTER_TO_IS_OVERRIDE,
+	SOURCE_KEY,
+	type SourceFilter,
+} from '../constants';
+import type { PricingRule } from '../types';
+import DeleteConfirmDialog from './components/DeleteConfirmDialog';
+import ModelCostDrawer, {
+	useModelCostDrawer,
+} from './components/ModelCostDrawer';
 import ModelCostsTable from './components/ModelCostsTable';
-import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import { useModelCostDelete } from './hooks/useModelCostDelete';
+import styles from './ModelCostTabPanel.module.scss';
 
+// "Model costs" tab: the priced-model listing, search + source filter, the add/
+// edit drawer, and pagination. Page and page size live in the URL (shareable/
+// reload-safe) and are owned by TanStackTable via enableQueryParams — this tab
+// reads them back through the same useTableParams hook so the two stay in lockstep.
 function ModelCostTabPanel(): JSX.Element {
-	const { page, limit } = useTableParams(
+	const { page, limit, setPage } = useTableParams(
 		{ page: PAGE_KEY, limit: LIMIT_KEY },
 		{ page: 1, limit: PAGE_SIZE },
 	);
 
-	// Search + source filters are intentionally omitted for now — the list API
-	// doesn't honour them yet. They'll be reintroduced here once it does.
+	const [search, setSearch] = useQueryState(
+		SEARCH_KEY,
+		parseAsString.withDefault(''),
+	);
+	const debouncedSearch = useDebounce(search, SEARCH_DEBOUNCE_MS);
+
+	const [source, setSource] = useQueryState(
+		SOURCE_KEY,
+		parseAsStringEnum<SourceFilter>(
+			SOURCE_FILTER_OPTIONS.map((option) => option.value),
+		).withDefault('all'),
+	);
+
+	const handleSearchChange = (
+		event: React.ChangeEvent<HTMLInputElement>,
+	): void => {
+		void setSearch(event.target.value || null);
+		setPage(1);
+	};
+
+	const clearSearch = (): void => {
+		void setSearch(null);
+		setPage(1);
+	};
+
+	const handleSourceChange = (value: string | string[]): void => {
+		void setSource(value as SourceFilter);
+		setPage(1);
+	};
+
+	const isOverride = SOURCE_FILTER_TO_IS_OVERRIDE[source];
+
 	const listParams: ListLLMPricingRulesParams = {
 		offset: (page - 1) * limit,
 		limit,
+		...(debouncedSearch ? { q: debouncedSearch } : {}),
+		...(isOverride !== undefined ? { isOverride } : {}),
 	};
 
-	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
+	const { data, isLoading, isError } = useListLLMPricingRules(listParams, {
+		query: {
+			enabled: search === debouncedSearch,
+		},
+	});
 
-	const rules: LlmpricingruletypesLLMPricingRuleDTO[] = useMemo(
-		() => data?.data?.items || [],
-		[data],
+	const { user } = useAppContext();
+	const [canManagePricing] = useComponentPermission(
+		['manage_llm_pricing'],
+		user.role,
 	);
+
+	const rules: PricingRule[] = useMemo(() => data?.data?.items || [], [data]);
 	const total = data?.data?.total ?? 0;
 
+	const drawer = useModelCostDrawer();
+	const deletion = useModelCostDelete();
+
 	return (
 		<>
+			<div className={styles.filtersBar}>
+				<div className={styles.filtersBarLeft}>
+					<Input
+						className={styles.filtersBarSearch}
+						placeholder="Search by model or provider"
+						value={search}
+						onChange={handleSearchChange}
+						prefix={<Search size={14} />}
+						suffix={
+							search ? (
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									prefix={<X size={14} />}
+									onClick={clearSearch}
+									aria-label="Clear search"
+									testId="model-cost-search-clear"
+								/>
+							) : undefined
+						}
+						testId="model-cost-search"
+					/>
+					<SelectSimple
+						className={styles.filtersBarSource}
+						items={SOURCE_FILTER_OPTIONS}
+						value={source}
+						onChange={handleSourceChange}
+						testId="source-filter"
+					/>
+				</div>
+				{canManagePricing && (
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={(): void => drawer.openForAdd()}
+						testId="add-model-cost-btn"
+					>
+						Add model cost
+					</Button>
+				)}
+			</div>
+
 			{isError && (
 				<div className={styles.pageError} role="alert">
 					Failed to load pricing rules. Please try again.
 				</div>
 			)}
 
-			{/* Read-only listing. Edit/Add wiring + the drawer land in the next PR. */}
 			<ModelCostsTable
 				rules={rules}
 				isLoading={isLoading}
 				total={total}
-				selectedRuleId={null}
-				canManage={false}
-				onEdit={(): void => undefined}
-				onDelete={(): void => undefined}
+				selectedRuleId={drawer.selectedRuleId}
+				canManage={canManagePricing}
+				onEdit={drawer.openForEdit}
+				onDelete={deletion.requestDelete}
 			/>
 
 			<footer>
@@ -54,6 +166,29 @@ function ModelCostTabPanel(): JSX.Element {
 					All prices per 1M tokens (USD)
 				</Typography.Text>
 			</footer>
+
+			{drawer.isOpen && (
+				<ModelCostDrawer
+					isOpen={drawer.isOpen}
+					mode={drawer.mode}
+					initialDraft={drawer.initialDraft}
+					onClose={drawer.close}
+					onSave={drawer.save}
+					isSaving={drawer.isSaving}
+					saveError={drawer.saveError}
+					canManage={canManagePricing}
+				/>
+			)}
+
+			{deletion.pendingDelete && (
+				<DeleteConfirmDialog
+					open
+					modelName={deletion.pendingDelete.modelName}
+					isDeleting={deletion.isDeleting}
+					onConfirm={deletion.confirmDelete}
+					onCancel={deletion.cancelDelete}
+				/>
+			)}
 		</>
 	);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/DeleteConfirmDialog/DeleteConfirmDialog.tsx

@@ -0,0 +1,64 @@
+import { AlertDialog } from '@signozhq/ui/alert-dialog';
+import { Button } from '@signozhq/ui/button';
+import { Trash2, X } from '@signozhq/icons';
+
+interface DeleteConfirmDialogProps {
+	open: boolean;
+	modelName: string;
+	isDeleting: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+// Confirmation step before deleting a model cost — deletion is irreversible, so
+// the destructive action is gated behind an explicit confirm. AlertDialog blocks
+// outside-click dismissal and hides the close button to force an explicit choice.
+function DeleteConfirmDialog({
+	open,
+	modelName,
+	isDeleting,
+	onConfirm,
+	onCancel,
+}: DeleteConfirmDialogProps): JSX.Element {
+	return (
+		<AlertDialog
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onCancel();
+				}
+			}}
+			width="narrow"
+			title="Delete Model Cost Data "
+			titleIcon={<Trash2 size={16} />}
+			footer={
+				<>
+					<Button
+						variant="solid"
+						color="secondary"
+						onClick={onCancel}
+						prefix={<X size={12} />}
+						testId="drawer-delete-cancel-btn"
+					>
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						loading={isDeleting}
+						onClick={onConfirm}
+						prefix={<Trash2 size={12} />}
+						testId="drawer-delete-confirm-btn"
+					>
+						Delete
+					</Button>
+				</>
+			}
+		>
+			Are you sure you want to delete <strong>{modelName}</strong>? Once deleted,
+			this action cannot be undone.
+		</AlertDialog>
+	);
+}
+
+export default DeleteConfirmDialog;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/DeleteConfirmDialog/index.ts

@@ -0,0 +1 @@
+export { default } from './DeleteConfirmDialog';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss

@@ -0,0 +1,58 @@
+.drawerSection {
+	composes: drawerSection from './shared.module.scss';
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.required {
+	composes: required from './shared.module.scss';
+}
+
+.modelCostDrawer {
+	// Uniform horizontal padding across header / body / footer. The header and
+	// footer read these dialog vars; the body (rendered in drawer-description)
+	// is set directly below.
+	--dialog-header-padding: var(--spacing-10) var(--spacing-12);
+	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
+
+	display: flex;
+	overflow-y: auto;
+
+	// The drawer body — children render inside [data-slot='drawer-description']
+	// (this is the @signozhq drawer, not antd, so .ant-drawer-body was a no-op).
+	[data-slot='drawer-description'] {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-12);
+		padding: var(--spacing-10) var(--spacing-12);
+	}
+
+	[data-slot='select-content'] {
+		width: var(--radix-select-trigger-width);
+	}
+}
+
+.title {
+	h3 {
+		margin: 0;
+		font-size: var(--periscope-font-size-medium);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	p {
+		margin: var(--spacing-2) 0 0;
+		color: var(--l3-foreground);
+		font-size: 12px;
+	}
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	// Horizontal padding is provided by the drawer-footer slot var above.
+	padding: 0;
+	width: 100%;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.tsx

@@ -0,0 +1,238 @@
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Controller, useForm } from 'react-hook-form';
+
+import PatternEditor from './components/PatternEditor';
+import PricingFields from './components/PricingFields';
+import SourceSelector from './components/SourceSelector';
+import { PROVIDER_OPTIONS } from '../../../constants';
+import styles from './ModelCostDrawer.module.scss';
+import {
+	validateModelName,
+	validatePricing,
+	validateProvider,
+} from '../../../utils';
+import type { DrawerDraft, DrawerMode } from '../../../types';
+
+interface ModelCostDrawerProps {
+	isOpen: boolean;
+	mode: DrawerMode;
+	initialDraft: DrawerDraft;
+	onClose: () => void;
+	onSave: (draft: DrawerDraft) => void;
+	isSaving: boolean;
+	saveError: string | null;
+	canManage: boolean;
+}
+
+function ModelCostDrawer({
+	isOpen,
+	mode,
+	initialDraft,
+	onClose,
+	onSave,
+	isSaving,
+	saveError,
+	canManage,
+}: ModelCostDrawerProps): JSX.Element {
+	// Default mode validates on submit, then re-validates on change — so we don't
+	// flag empty fields before the user has tried to save, but errors clear live
+	// once they start fixing them.
+	const {
+		control,
+		handleSubmit,
+		watch,
+		formState: { isDirty },
+	} = useForm<DrawerDraft>({
+		defaultValues: initialDraft,
+	});
+
+	const isOverride = watch('isOverride');
+
+	// Metadata (model id / provider / patterns / source) is editable by any
+	// manager. Pricing fields are editable only once the user picks "User
+	// override" — auto-populated pricing is managed by SigNoz. Write APIs are
+	// Admin-only, so non-managers can't edit anything.
+	const metadataReadOnly = !canManage;
+	const pricingReadOnly = !canManage || !isOverride;
+
+	// Non-managers can only view (write APIs are Admin-only), so the drawer is a
+	// read-only "View" rather than "Edit"/"Add".
+	let drawerTitle = 'Add model cost';
+	if (!canManage) {
+		drawerTitle = 'View model cost';
+	} else if (mode === 'edit') {
+		drawerTitle = 'Edit model cost';
+	}
+
+	const footer = (
+		<div className={styles.footer}>
+			<Button
+				variant="outlined"
+				color="secondary"
+				onClick={onClose}
+				testId="drawer-cancel-btn"
+			>
+				{canManage ? 'Cancel' : 'Close'}
+			</Button>
+			{canManage && (
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={handleSubmit(onSave)}
+					disabled={!isDirty}
+					loading={isSaving}
+					testId="drawer-save-btn"
+				>
+					Save
+				</Button>
+			)}
+		</div>
+	);
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			width="base"
+			className={styles.modelCostDrawer}
+			footer={footer}
+			title={drawerTitle}
+			drawerHeaderProps={{ className: styles.title }}
+		>
+			<div className={styles.drawerSection}>
+				<label htmlFor="billing-model-id">
+					Billing model ID{' '}
+					<span className={styles.required} aria-hidden="true">
+						*
+					</span>
+				</label>
+				<Controller
+					name="modelName"
+					control={control}
+					rules={{
+						validate: (value): true | string => validateModelName(value, mode),
+					}}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<Input
+								id="billing-model-id"
+								placeholder="e.g. openai:gpt-4o"
+								required
+								value={field.value}
+								disabled={mode === 'edit' || metadataReadOnly}
+								aria-invalid={!!fieldState.error}
+								onChange={(e): void => field.onChange(e.target.value)}
+								testId="drawer-model-id-input"
+							/>
+							{fieldState.error && (
+								<Typography.Text as="p" size="small" color="danger" role="alert">
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+
+			<div className={styles.drawerSection}>
+				<label htmlFor="provider-select">Provider</label>
+				<Controller
+					name="provider"
+					control={control}
+					rules={{ validate: validateProvider }}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<SelectSimple
+								id="provider-select"
+								value={field.value}
+								onChange={(value): void => field.onChange(value as string)}
+								items={PROVIDER_OPTIONS}
+								disabled={mode === 'edit' || metadataReadOnly}
+								className={styles.fullWidth}
+								withPortal={false}
+								testId="drawer-provider-select"
+							/>
+							{fieldState.error && (
+								<Typography.Text size="small" color="danger" role="alert">
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+
+			<Controller
+				name="patterns"
+				control={control}
+				render={({ field }): JSX.Element => (
+					<PatternEditor
+						patterns={field.value}
+						isReadOnly={metadataReadOnly}
+						onChange={field.onChange}
+					/>
+				)}
+			/>
+
+			{/* Source is auto vs. override — a choice only a manager can make, so
+			    there's nothing to show a read-only viewer. */}
+			{canManage && (
+				<Controller
+					name="isOverride"
+					control={control}
+					// Pricing requirements depend on this toggle, so re-validate pricing
+					// whenever the source changes (clears/sets the pricing error).
+					rules={{ deps: ['pricing'] }}
+					render={({ field }): JSX.Element => (
+						<SourceSelector
+							isOverride={field.value}
+							isReadOnly={metadataReadOnly}
+							disableAuto={mode === 'add' || !initialDraft.sourceId}
+							onChange={field.onChange}
+						/>
+					)}
+				/>
+			)}
+
+			<Controller
+				name="pricing"
+				control={control}
+				rules={{
+					validate: (value, values): true | string =>
+						validatePricing(value, values.isOverride),
+				}}
+				render={({ field, fieldState }): JSX.Element => (
+					<>
+						<PricingFields
+							pricing={field.value}
+							isReadOnly={pricingReadOnly}
+							onChange={(patch): void => field.onChange({ ...field.value, ...patch })}
+						/>
+						{fieldState.error && (
+							<Typography.Text as="p" size="small" color="danger" role="alert">
+								{fieldState.error.message}
+							</Typography.Text>
+						)}
+					</>
+				)}
+			/>
+
+			{saveError && (
+				<Typography.Text as="p" size="small" color="danger" role="alert">
+					{saveError}
+				</Typography.Text>
+			)}
+		</DrawerWrapper>
+	);
+}
+
+export default ModelCostDrawer;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss

@@ -0,0 +1,69 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.pricingField {
+	composes: pricingField from '../../shared.module.scss';
+}
+
+.cacheModeField {
+	margin-top: var(--spacing-5);
+}
+
+.extraBucketsSection {
+	margin-top: var(--spacing-7);
+	gap: var(--spacing-5);
+}
+
+.extraBucketsSectionHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.bucketRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+
+	input {
+		flex: 1 auto auto;
+		min-width: 0;
+	}
+}
+
+.bucketRowName {
+	flex: 0 0 110px;
+}
+
+.bucketAddBtn {
+	width: 100%;
+}
+
+.bucketPicker {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing-5);
+	padding: var(--spacing-6);
+	border-radius: 6px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+}
+
+.bucketPickerTitle {
+	font-size: var(--periscope-font-size-small);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--l3-foreground);
+}
+
+.bucketPickerChips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-4);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.tsx

@@ -0,0 +1,179 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+
+import { CACHE_BUCKETS, CACHE_MODE_OPTIONS } from '../../../../../constants';
+import styles from './ExtraPricingBuckets.module.scss';
+import { parsePricingAmount } from '../../../../../utils';
+import type { CacheBucketKey, DrawerDraft } from '../../../../../types';
+import { Tooltip } from 'antd';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface ExtraPricingBucketsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+function ExtraPricingBuckets({
+	pricing,
+	isReadOnly,
+	onChange,
+}: ExtraPricingBucketsProps): JSX.Element {
+	const [isExtraPricingBucketOpen, setIsExtraPricingBucketOpen] =
+		useState<boolean>(false);
+
+	// Track which buckets are shown separately from their value, so a freshly
+	// added bucket can start blank (value null) instead of being seeded to 0.
+	// Seeded from buckets that already carry a value (edit mode).
+	const [addedKeys, setAddedKeys] = useState<Set<CacheBucketKey>>(
+		() =>
+			new Set(
+				CACHE_BUCKETS.filter((b) => pricing[b.key] !== null).map((b) => b.key),
+			),
+	);
+
+	const addedBuckets = CACHE_BUCKETS.filter((b) => addedKeys.has(b.key));
+	const availableBuckets = CACHE_BUCKETS.filter((b) => !addedKeys.has(b.key));
+	const patchBucket = (key: CacheBucketKey, value: number | null): void => {
+		const patch: Partial<Pricing> = { [key]: value };
+		onChange(patch);
+	};
+
+	const addBucket = (key: CacheBucketKey): void => {
+		// Leave the value null so the field renders blank until the user types.
+		setAddedKeys((prev) => new Set(prev).add(key));
+		// Close the picker once nothing is left to add.
+		if (availableBuckets.length <= 1) {
+			setIsExtraPricingBucketOpen(false);
+		}
+	};
+
+	const removeBucket = (key: CacheBucketKey): void => {
+		setAddedKeys((prev) => {
+			const next = new Set(prev);
+			next.delete(key);
+			return next;
+		});
+		patchBucket(key, null);
+	};
+
+	return (
+		<div className={cx(styles.extraBucketsSection, styles.drawerSection)}>
+			<div className={styles.extraBucketsSectionHead}>
+				<Typography.Text as="span" size="small" color="muted">
+					Extra pricing buckets
+				</Typography.Text>
+				<Typography.Text as="span" size="small" color="muted">
+					optional
+				</Typography.Text>
+			</div>
+
+			{addedBuckets.map((bucket) => (
+				<div className={styles.bucketRow} key={bucket.key}>
+					<Typography.Text as="span" className={styles.bucketRowName}>
+						{bucket.label}
+					</Typography.Text>
+					<Input
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing[bucket.key] ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							// Clearing the field is allowed — the row stays mounted because
+							// presence is tracked in `addedKeys`, not the value. Removal is
+							// explicit via the trash button.
+							patchBucket(bucket.key, parsePricingAmount(e.target.value))
+						}
+						testId={`drawer-${bucket.testId}-cost`}
+					/>
+					<Tooltip title="Pricing per 1M tokens" placement="left">
+						<Typography.Text size="xs" color="muted">
+							1M
+						</Typography.Text>
+					</Tooltip>
+
+					{!isReadOnly && (
+						<Button
+							size="icon"
+							variant="ghost"
+							color="destructive"
+							onClick={(): void => removeBucket(bucket.key)}
+							aria-label={`Remove ${bucket.label}`}
+							data-testid={`drawer-remove-${bucket.testId}`}
+							prefix={<Trash2 size={14} />}
+						/>
+					)}
+				</div>
+			))}
+
+			{addedBuckets.length > 0 && (
+				<div className={cx(styles.pricingField, styles.cacheModeField)}>
+					<label htmlFor="cache-mode">Cache mode</label>
+					<SelectSimple
+						id="cache-mode"
+						value={pricing.cacheMode}
+						items={CACHE_MODE_OPTIONS}
+						onChange={(v): void => onChange({ cacheMode: v as CacheModeDTO })}
+						disabled={isReadOnly}
+						className={styles.fullWidth}
+						withPortal={false}
+						testId="drawer-cache-mode"
+					/>
+				</div>
+			)}
+
+			{!isReadOnly && !isExtraPricingBucketOpen && availableBuckets.length > 0 && (
+				<Button
+					variant="dashed"
+					color="secondary"
+					className={styles.bucketAddBtn}
+					prefix={<Plus size={14} />}
+					onClick={(): void => setIsExtraPricingBucketOpen(true)}
+					testId="drawer-add-bucket-btn"
+				>
+					Add pricing bucket
+				</Button>
+			)}
+
+			{!isReadOnly && isExtraPricingBucketOpen && (
+				<div className={styles.bucketPicker} data-testid="drawer-bucket-picker">
+					<div className={styles.bucketPickerTitle}>Add a pricing bucket</div>
+					<div className={styles.bucketPickerChips}>
+						{availableBuckets.map((bucket) => (
+							<Button
+								key={bucket.key}
+								variant="outlined"
+								color="secondary"
+								size="sm"
+								prefix={<Plus size={12} />}
+								onClick={(): void => addBucket(bucket.key)}
+								testId={`drawer-add-bucket-${bucket.testId}`}
+							>
+								{bucket.label}
+							</Button>
+						))}
+					</div>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setIsExtraPricingBucketOpen(false)}
+						testId="drawer-add-bucket-cancel"
+					>
+						Cancel
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ExtraPricingBuckets;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/index.ts

@@ -0,0 +1 @@
+export { default } from './ExtraPricingBuckets';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss

@@ -0,0 +1,49 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.help {
+	composes: help from '../../shared.module.scss';
+}
+
+.patternBox {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	padding: var(--spacing-6);
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+}
+
+.patternChips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-3);
+	min-height: 28px;
+}
+
+.patternChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.patternChipRemove {
+	background: transparent;
+	border: none;
+	padding: 0;
+	margin-left: 2px;
+	cursor: pointer;
+	color: inherit;
+	display: inline-flex;
+	align-items: center;
+
+	&:hover {
+		color: var(--accent-cherry);
+	}
+}
+
+.patternAdd {
+	display: flex;
+	gap: var(--spacing-3);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+import { X } from '@signozhq/icons';
+
+import styles from './PatternEditor.module.scss';
+
+interface PatternEditorProps {
+	patterns: string[];
+	isReadOnly: boolean;
+	onChange: (patterns: string[]) => void;
+}
+
+// Model-name prefix patterns as removable chips + an add input.
+function PatternEditor({
+	patterns,
+	isReadOnly,
+	onChange,
+}: PatternEditorProps): JSX.Element {
+	const [patternInput, setPatternInput] = useState<string>('');
+
+	const addPattern = (): void => {
+		const next = patternInput.trim();
+		if (!next || patterns.includes(next)) {
+			setPatternInput('');
+			return;
+		}
+		onChange([...patterns, next]);
+		setPatternInput('');
+	};
+
+	const removePattern = (pattern: string): void => {
+		onChange(patterns.filter((p) => p !== pattern));
+	};
+
+	return (
+		<div className={styles.drawerSection}>
+			<Typography.Text as="span">
+				Model name patterns{' '}
+				<Typography.Text as="span" color="muted">
+					(prefix match)
+				</Typography.Text>
+			</Typography.Text>
+			<div className={styles.patternBox}>
+				<div className={styles.patternChips}>
+					{patterns.map((pattern) => (
+						<Badge
+							key={pattern}
+							color="vanilla"
+							variant="outline"
+							className={styles.patternChip}
+						>
+							{pattern}*
+							{!isReadOnly && (
+								<button
+									type="button"
+									aria-label={`Remove pattern ${pattern}`}
+									className={styles.patternChipRemove}
+									onClick={(): void => removePattern(pattern)}
+								>
+									<X size={10} />
+								</button>
+							)}
+						</Badge>
+					))}
+				</div>
+				{!isReadOnly && (
+					<div className={styles.patternAdd}>
+						<Input
+							placeholder="Add pattern…"
+							value={patternInput}
+							onChange={(e): void => setPatternInput(e.target.value)}
+							onKeyDown={(e): void => {
+								if (e.key === 'Enter') {
+									e.preventDefault();
+									addPattern();
+								}
+							}}
+							testId="drawer-pattern-input"
+						/>
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={addPattern}
+							testId="drawer-pattern-add-btn"
+						>
+							+ Add
+						</Button>
+					</div>
+				)}
+			</div>
+			<Typography.Text as="p" size="small" color="muted">
+				Each pattern uses <strong>prefix matching</strong> against{' '}
+				<code>gen_ai.request.model</code>.
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default PatternEditor;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/index.ts

@@ -0,0 +1 @@
+export { default } from './PatternEditor';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.module.scss

@@ -0,0 +1,31 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.drawerSurface {
+	composes: drawerSurface from '../../shared.module.scss';
+}
+
+.drawerSurfaceHead {
+	composes: drawerSurfaceHead from '../../shared.module.scss';
+}
+
+.managedLabel {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.pricingField {
+	composes: pricingField from '../../shared.module.scss';
+}
+
+.required {
+	composes: required from '../../shared.module.scss';
+}
+
+.pricingGrid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--spacing-6);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.tsx

@@ -0,0 +1,91 @@
+import { Input } from '@signozhq/ui/input';
+import { Lock } from '@signozhq/icons';
+import cx from 'classnames';
+
+import ExtraPricingBuckets from '../ExtraPricingBuckets';
+import styles from './PricingFields.module.scss';
+import { parsePricingAmount } from '../../../../../utils';
+import type { DrawerDraft } from '../../../../../types';
+import { Typography } from '@signozhq/ui/typography';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface PricingFieldsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+function PricingFields({
+	pricing,
+	isReadOnly,
+	onChange,
+}: PricingFieldsProps): JSX.Element {
+	return (
+		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
+			<div className={styles.drawerSurfaceHead}>
+				<Typography.Text size="base" weight="bold">
+					Pricing (per 1M tokens, USD)
+				</Typography.Text>
+
+				{isReadOnly && (
+					<span className={styles.managedLabel} data-testid="drawer-readonly-label">
+						<Lock size={12} />
+
+						<Typography.Text color="muted">Read-only</Typography.Text>
+					</span>
+				)}
+			</div>
+			<div className={styles.pricingGrid}>
+				<div className={styles.pricingField}>
+					<label htmlFor="input-cost">
+						Input cost{' '}
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					</label>
+					<Input
+						id="input-cost"
+						type="number"
+						step={0.01}
+						required
+						value={pricing.input ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ input: parsePricingAmount(e.target.value) })
+						}
+						testId="drawer-input-cost"
+					/>
+				</div>
+				<div className={styles.pricingField}>
+					<label htmlFor="output-cost">
+						Output cost{' '}
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					</label>
+					<Input
+						id="output-cost"
+						type="number"
+						step={0.01}
+						required
+						value={pricing.output ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ output: parsePricingAmount(e.target.value) })
+						}
+						testId="drawer-output-cost"
+					/>
+				</div>
+			</div>
+
+			<ExtraPricingBuckets
+				pricing={pricing}
+				isReadOnly={isReadOnly}
+				onChange={onChange}
+			/>
+		</div>
+	);
+}
+
+export default PricingFields;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/index.ts

@@ -0,0 +1 @@
+export { default } from './PricingFields';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss

@@ -0,0 +1,115 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.drawerSurface {
+	composes: drawerSurface from '../../shared.module.scss';
+}
+
+.drawerSurfaceHead {
+	composes: drawerSurfaceHead from '../../shared.module.scss';
+}
+
+.managedLabel {
+	composes: managedLabel from '../../shared.module.scss';
+}
+
+.sourceRadioGroup {
+	--radio-group-item-border-color: var(--l2-border);
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	width: 100%;
+	.sourceRadio {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		justify-content: flex-start;
+		gap: var(--spacing-5);
+		padding: var(--spacing-5) var(--spacing-6);
+		border-radius: var(--radius-2);
+		border: 1px solid transparent;
+		background: var(--l3-background);
+		margin: 0;
+		width: 100%;
+		// Include padding + border in the 100% width so the card fits inside
+		// the SOURCE surface instead of overflowing its right edge.
+		box-sizing: border-box;
+		cursor: pointer;
+		transition:
+			background-color 0.12s ease,
+			border-color 0.12s ease;
+
+		// The radio button itself: keep it fixed-size and aligned with the title
+		// baseline (margin-top compensates for align-items: flex-start vs the
+		// title's line-box).
+		> button[role='radio'] {
+			flex: 0 0 16px;
+			width: 16px;
+			height: 16px;
+			margin-top: 3px;
+		}
+
+		// The library wraps children in a <label>. Make it grow into the
+		// remaining width and reset the .drawerSection label typography leak
+		// (set earlier in this file) so the title/desc divs use their own styles.
+		> label {
+			flex: 1 1 auto;
+			min-width: 0;
+			display: block;
+			text-align: left;
+			cursor: pointer;
+			font-size: inherit;
+			font-weight: inherit;
+			color: inherit;
+		}
+
+		// Radix RadioGroupItem renders <button data-state="checked|unchecked">.
+		// Use :has() to highlight the wrapper card when its inner button is checked.
+		&.sourceRadioAuto:has(button[data-state='checked']) {
+			background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+			border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
+		}
+
+		&.sourceRadioOverride:has(button[data-state='checked']) {
+			background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
+			border-color: color-mix(in srgb, var(--accent-amber) 30%, transparent);
+		}
+
+		&:hover {
+			background: var(--l3-background-hover);
+		}
+	}
+}
+
+.sourceRadioTitle {
+	font-weight: var(--font-weight-semibold);
+	font-size: var(--periscope-font-size-base);
+	color: var(--l1-foreground);
+}
+
+.sourceRadioDesc {
+	margin-top: 2px;
+	font-size: 12px;
+	color: var(--l3-foreground);
+}
+
+.resetConfirm {
+	margin-top: var(--spacing-6);
+	padding: var(--spacing-6);
+	border-radius: var(--radius-2);
+	background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+	border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
+
+	p {
+		margin: 0 0 var(--spacing-5);
+		font-size: 12px;
+	}
+}
+
+.resetConfirmActions {
+	display: flex;
+	gap: var(--spacing-4);
+	justify-content: flex-end;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Lock } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './SourceSelector.module.scss';
+
+interface SourceSelectorProps {
+	isOverride: boolean;
+	isReadOnly: boolean;
+	disableAuto?: boolean;
+	onChange: (isOverride: boolean) => void;
+}
+
+// Auto-populated vs user-override selector, with a confirm step before
+// discarding custom values back to defaults.
+function SourceSelector({
+	isOverride,
+	isReadOnly,
+	disableAuto = false,
+	onChange,
+}: SourceSelectorProps): JSX.Element {
+	const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
+
+	const handleSourceChange = (value: 'auto' | 'override'): void => {
+		if (value === 'auto' && isOverride) {
+			setShowResetConfirm(true);
+			return;
+		}
+		if (value === 'override' && !isOverride) {
+			onChange(true);
+		}
+	};
+
+	const confirmReset = (): void => {
+		onChange(false);
+		setShowResetConfirm(false);
+	};
+
+	return (
+		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
+			<div className={styles.drawerSurfaceHead}>
+				<Typography.Text weight="bold" size="base">
+					Source
+				</Typography.Text>
+
+				{isReadOnly && (
+					<span className={styles.managedLabel} data-testid="drawer-managed-label">
+						<Lock size={12} />
+						Managed by SigNoz
+					</span>
+				)}
+			</div>
+			<RadioGroup
+				value={isOverride ? 'override' : 'auto'}
+				onChange={(value): void => handleSourceChange(value as 'auto' | 'override')}
+				className={styles.sourceRadioGroup}
+			>
+				<RadioGroupItem
+					value="auto"
+					containerClassName={cx(styles.sourceRadio, styles.sourceRadioAuto)}
+					testId="drawer-source-auto"
+					disabled={disableAuto}
+				>
+					<div className={styles.sourceRadioTitle}>Auto-populated</div>
+					<div className={styles.sourceRadioDesc}>
+						{disableAuto
+							? 'Available once SigNoz has default pricing for this model.'
+							: 'Default pricing from SigNoz.'}
+					</div>
+				</RadioGroupItem>
+				<RadioGroupItem
+					value="override"
+					containerClassName={cx(styles.sourceRadio, styles.sourceRadioOverride)}
+					testId="drawer-source-override"
+				>
+					<div className={styles.sourceRadioTitle}>User override</div>
+					<div className={styles.sourceRadioDesc}>
+						Custom pricing. Takes precedence.
+					</div>
+				</RadioGroupItem>
+			</RadioGroup>
+			{showResetConfirm && (
+				<div className={styles.resetConfirm} aria-label="Reset to default pricing">
+					<p>
+						Reset to default pricing? Custom values will be discarded. It might take
+						24 hours for changes to take effect.
+					</p>
+					<div className={styles.resetConfirmActions}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={(): void => setShowResetConfirm(false)}
+							testId="drawer-reset-keep-btn"
+						>
+							Keep
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={confirmReset}
+							testId="drawer-reset-confirm-btn"
+						>
+							Reset
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default SourceSelector;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/index.ts

@@ -0,0 +1 @@
+export { default } from './SourceSelector';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts

@@ -0,0 +1,100 @@
+import { useCallback, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueryClient } from 'react-query';
+import {
+	getListLLMPricingRulesQueryKey,
+	useCreateOrUpdateLLMPricingRules,
+} from 'api/generated/services/llmpricingrules';
+
+import { EMPTY_DRAFT } from '../../../../constants';
+import type { DrawerDraft, DrawerMode, PricingRule } from '../../../../types';
+import { buildRulePayload, draftFromRule } from '../../../../utils';
+
+interface UseModelCostDrawerResult {
+	isOpen: boolean;
+	mode: DrawerMode;
+	initialDraft: DrawerDraft;
+	openForAdd: (prefillModelName?: string) => void;
+	openForEdit: (rule: PricingRule) => void;
+	close: () => void;
+	save: (draft: DrawerDraft) => Promise<void>;
+	isSaving: boolean;
+	saveError: string | null;
+	selectedRuleId: string | null;
+}
+
+export function useModelCostDrawer(): UseModelCostDrawerResult {
+	const queryClient = useQueryClient();
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [mode, setMode] = useState<DrawerMode>('add');
+	const [initialDraft, setInitialDraft] = useState<DrawerDraft>(EMPTY_DRAFT);
+	const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
+	const [saveError, setSaveError] = useState<string | null>(null);
+
+	const { mutateAsync: createOrUpdate, isLoading: isSaving } =
+		useCreateOrUpdateLLMPricingRules();
+
+	const invalidateList = useCallback(async (): Promise<void> => {
+		await queryClient.invalidateQueries({
+			queryKey: getListLLMPricingRulesQueryKey(),
+		});
+	}, [queryClient]);
+
+	const openForAdd = useCallback((): void => {
+		setMode('add');
+		setInitialDraft({
+			...EMPTY_DRAFT,
+			modelName: '',
+			patterns: [],
+		});
+		setSelectedRuleId(null);
+		setSaveError(null);
+		setIsOpen(true);
+	}, []);
+
+	const openForEdit = useCallback((rule: PricingRule): void => {
+		setMode('edit');
+		setInitialDraft(draftFromRule(rule));
+		setSelectedRuleId(rule.id);
+		setSaveError(null);
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback((): void => {
+		setIsOpen(false);
+		setSelectedRuleId(null);
+		setSaveError(null);
+	}, []);
+
+	const save = useCallback(
+		async (draft: DrawerDraft): Promise<void> => {
+			setSaveError(null);
+			try {
+				await createOrUpdate({
+					data: { rules: [buildRulePayload(draft)] },
+				});
+				await invalidateList();
+				setIsOpen(false);
+				setSelectedRuleId(null);
+				toast.success(mode === 'edit' ? 'Model cost updated' : 'Model cost added');
+			} catch (error) {
+				const message = error instanceof Error ? error.message : 'Save failed';
+				setSaveError(message);
+			}
+		},
+		[createOrUpdate, invalidateList, mode],
+	);
+
+	return {
+		isOpen,
+		mode,
+		initialDraft,
+		openForAdd,
+		openForEdit,
+		close,
+		save,
+		isSaving,
+		saveError,
+		selectedRuleId,
+	};
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ModelCostDrawer';
+export { useModelCostDrawer } from './hooks/useModelCostDrawer';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/shared.module.scss

@@ -0,0 +1,59 @@
+/* Shared drawer selectors used by 2+ of the model-cost drawer components. */
+/* Components pull these in via CSS-modules `composes` from their own module so */
+/* the authored class names in the TSX stay identical. */
+/* NOTE: this file is a `composes` target, so it is parsed as plain CSS (no SCSS */
+/* preprocessing). Keep it flat — no nesting, no slash-slash comments. */
+
+.drawerSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+}
+
+.drawerSection .help,
+.help {
+	margin: 0;
+}
+
+.help code {
+	padding: 1px var(--spacing-2);
+	border-radius: 3px;
+	background: var(--l3-background);
+	font-size: 10px;
+}
+
+.drawerSurface {
+	padding: var(--spacing-7);
+	border-radius: 6px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+}
+
+.drawerSurfaceHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: var(--spacing-5);
+}
+
+.managedLabel {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	font-size: var(--periscope-font-size-small);
+	color: var(--l3-foreground);
+}
+
+.required {
+	color: var(--accent-cherry);
+}
+
+.pricingField {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.pricingField input {
+	width: 100%;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss

@@ -15,6 +15,6 @@
 	justify-content: center;
 	margin-top: var(--spacing-8);
 	min-height: 400px;
-	color: var(--text-vanilla-400);
+	color: var(--l3-foreground);
 	font-size: var(--periscope-font-size-base);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/hooks/useModelCostDelete.ts

@@ -0,0 +1,66 @@
+import { useCallback, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueryClient } from 'react-query';
+import {
+	getListLLMPricingRulesQueryKey,
+	useDeleteLLMPricingRule,
+} from 'api/generated/services/llmpricingrules';
+
+import type { PricingRule } from '../../types';
+
+// The minimal slice of a rule the delete-confirm flow needs: the id to delete
+// and the model name to show in the confirmation copy.
+type PendingDelete = Pick<PricingRule, 'id' | 'modelName'>;
+
+interface UseModelCostDeleteResult {
+	requestDelete: (rule: PendingDelete) => void;
+	confirmDelete: () => Promise<void>;
+	cancelDelete: () => void;
+	pendingDelete: PendingDelete | null;
+	isDeleting: boolean;
+}
+
+// Owns the confirm-then-delete flow for a pricing rule, independent of the
+// add/edit drawer — delete is triggered from the table row menu, so this state
+// lives at the panel level rather than inside useModelCostDrawer.
+export function useModelCostDelete(): UseModelCostDeleteResult {
+	const queryClient = useQueryClient();
+	// The rule queued for deletion. Non-null drives the confirm dialog open.
+	const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(null);
+
+	const { mutateAsync: deleteRuleApi, isLoading: isDeleting } =
+		useDeleteLLMPricingRule();
+
+	const requestDelete = useCallback((rule: PendingDelete): void => {
+		setPendingDelete({ id: rule.id, modelName: rule.modelName });
+	}, []);
+
+	const cancelDelete = useCallback((): void => {
+		setPendingDelete(null);
+	}, []);
+
+	const confirmDelete = useCallback(async (): Promise<void> => {
+		if (!pendingDelete) {
+			return;
+		}
+		try {
+			await deleteRuleApi({ pathParams: { id: pendingDelete.id } });
+			await queryClient.invalidateQueries({
+				queryKey: getListLLMPricingRulesQueryKey(),
+			});
+			setPendingDelete(null);
+			toast.success('Model cost deleted');
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Delete failed';
+			toast.error(message);
+		}
+	}, [deleteRuleApi, pendingDelete, queryClient]);
+
+	return {
+		requestDelete,
+		confirmDelete,
+		cancelDelete,
+		pendingDelete,
+		isDeleting,
+	};
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts

@@ -1,6 +1,68 @@
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { CacheBucketDef, DrawerDraft } from './types';
+
 export const PAGE_SIZE = 20;
 
 export const PAGE_KEY = 'page';
 export const LIMIT_KEY = 'limit';
+export const SEARCH_KEY = 'search';
+export const SEARCH_DEBOUNCE_MS = 300;
+export const SOURCE_KEY = 'source';
 
+export type SourceFilter = 'all' | 'override' | 'auto';
+export const SOURCE_FILTER_OPTIONS: { value: SourceFilter; label: string }[] = [
+	{ value: 'all', label: 'All sources' },
+	{ value: 'override', label: 'User override' },
+	{ value: 'auto', label: 'Auto' },
+];
+
+export const SOURCE_FILTER_TO_IS_OVERRIDE: Record<
+	SourceFilter,
+	boolean | undefined
+> = {
+	all: undefined,
+	override: true,
+	auto: false,
+};
+
+// Match the page size so the skeleton reserves the same number of rows the
+// loaded page renders — otherwise the table height jumps on load.
 export const SKELETON_ROW_COUNT = PAGE_SIZE;
+
+export const PROVIDER_OPTIONS = [
+	{ value: 'OpenAI', label: 'OpenAI' },
+	{ value: 'Anthropic', label: 'Anthropic' },
+	{ value: 'Azure OpenAI', label: 'Azure OpenAI' },
+	{ value: 'Google', label: 'Google' },
+	{ value: 'Self-hosted', label: 'Self-hosted' },
+	{ value: 'Other', label: 'Other' },
+];
+
+export const CACHE_MODE_OPTIONS = [
+	{ value: CacheModeDTO.subtract, label: 'Subtract (OpenAI style)' },
+	{ value: CacheModeDTO.additive, label: 'Additive (Anthropic style)' },
+	// https://app.notion.com/p/signoz/LLM-Tokens-Cost-Calculation-330fcc6bcd19805283ccc841d596358e?source=copy_link#33efcc6bcd1980e6a187e442c6ba5996
+	{ value: CacheModeDTO.unknown, label: 'Unknown' },
+];
+
+export const CACHE_BUCKETS: CacheBucketDef[] = [
+	{ key: 'cacheRead', label: 'cache_read', testId: 'cache-read' },
+	{ key: 'cacheWrite', label: 'cache_write', testId: 'cache-write' },
+];
+
+export const EMPTY_DRAFT: DrawerDraft = {
+	id: null,
+	sourceId: null,
+	modelName: '',
+	provider: 'OpenAI',
+	patterns: [],
+	isOverride: true,
+	pricing: {
+		input: null,
+		output: null,
+		cacheMode: CacheModeDTO.unknown,
+		cacheRead: null,
+		cacheWrite: null,
+	},
+};

frontend/src/container/LLMObservability/Settings/ModelPricing/types.ts

@@ -1,4 +1,39 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	type LlmpricingruletypesLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
+
 export interface ExtraBucket {
 	key: string;
 	pricePerMillion: number;
 }
+
+export type DrawerMode = 'add' | 'edit';
+
+// Optional pricing buckets the user can add/remove. Keyed by the matching
+// DrawerDraft['pricing'] field.
+export type CacheBucketKey = 'cacheRead' | 'cacheWrite';
+
+export interface CacheBucketDef {
+	key: CacheBucketKey;
+	label: string;
+	testId: string;
+}
+
+export interface DrawerDraft {
+	id: string | null;
+	sourceId: string | null;
+	modelName: string;
+	provider: string;
+	patterns: string[];
+	isOverride: boolean;
+	pricing: {
+		input: number | null;
+		output: number | null;
+		cacheMode: CacheModeDTO;
+		cacheRead: number | null;
+		cacheWrite: number | null;
+	};
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/utils.ts

@@ -1,8 +1,19 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+	type LlmpricingruletypesLLMPricingCacheCostsDTO,
+	type LlmpricingruletypesLLMRulePricingDTO,
+	type LlmpricingruletypesUpdatableLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
-import type { ExtraBucket } from './types';
-import type { LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DrawerDraft,
+	DrawerMode,
+	ExtraBucket,
+	PricingRule,
+} from './types';
 
 dayjs.extend(relativeTime);
 
@@ -13,6 +24,19 @@ const getRelativeTime = (
 	return parsed?.isValid() ? parsed.fromNow() : '—';
 };
 
+const hasCacheValue = (value: number | null | undefined): value is number =>
+	typeof value === 'number' && value > 0;
+
+// ─── Input helpers ───────────────────────────────────────────────────────────
+
+export const parsePricingAmount = (raw: string): number | null => {
+	if (raw.trim() === '') {
+		return null;
+	}
+	const value = Number(raw);
+	return Number.isFinite(value) ? value : 0;
+};
+
 // ─── Display helpers ─────────────────────────────────────────────────────────
 
 export const formatPricePerMillion = (value: number | undefined): string => {
@@ -23,38 +47,117 @@ export const formatPricePerMillion = (value: number | undefined): string => {
 	return `$${value.toFixed(2)}`;
 };
 
-export const getExtraBuckets = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): ExtraBucket[] => {
+export const getExtraBuckets = (rule: PricingRule): ExtraBucket[] => {
 	const cache = rule.pricing?.cache;
 	if (!cache) {
 		return [];
 	}
 	const buckets: ExtraBucket[] = [];
-	if (typeof cache.read === 'number' && cache.read > 0) {
+	if (hasCacheValue(cache.read)) {
 		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
 	}
-	if (typeof cache.write === 'number' && cache.write > 0) {
+	if (hasCacheValue(cache.write)) {
 		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
 	}
 	return buckets;
 };
 
-export const getSourceLabel = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): 'Auto' | 'User override' => (rule.isOverride ? 'User override' : 'Auto');
+export const getSourceLabel = (rule: PricingRule): 'Auto' | 'User override' =>
+	rule.isOverride ? 'User override' : 'Auto';
 
-export const getRelativeLastSeen = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): string => getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
+export const getRelativeLastSeen = (rule: PricingRule): string =>
+	getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
 
 // Canonical id shown under the model name, e.g. "openai:gpt-4o". Both segments
 // are lower-cased so the id is consistently normalised (providers/models can
 // arrive with mixed casing).
-export const getCanonicalId = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): string => {
+export const getCanonicalId = (rule: PricingRule): string => {
 	const provider = rule.provider?.trim().toLowerCase() || 'unknown';
 	const model = rule.modelName?.trim().toLowerCase() || 'unknown';
 	return `${provider}:${model}`;
 };
+
+// ─── Drawer draft <-> API helpers ────────────────────────────────────────────
+
+export const draftFromRule = (rule: PricingRule): DrawerDraft => ({
+	id: rule.id,
+	sourceId: rule.sourceId ?? null,
+	modelName: rule.modelName,
+	provider: rule.provider,
+	patterns: rule.modelPattern || [],
+	isOverride: !!rule.isOverride,
+	pricing: {
+		input: rule.pricing?.input ?? 0,
+		output: rule.pricing?.output ?? 0,
+		cacheMode: rule.pricing?.cache?.mode ?? CacheModeDTO.unknown,
+		cacheRead: rule.pricing?.cache?.read ?? null,
+		cacheWrite: rule.pricing?.cache?.write ?? null,
+	},
+});
+
+const buildCacheCosts = (
+	pricing: DrawerDraft['pricing'],
+): LlmpricingruletypesLLMPricingCacheCostsDTO | undefined => {
+	const { cacheMode, cacheRead, cacheWrite } = pricing;
+	if (!hasCacheValue(cacheRead) && !hasCacheValue(cacheWrite)) {
+		return undefined;
+	}
+	return {
+		mode: cacheMode,
+		...(hasCacheValue(cacheRead) && { read: cacheRead }),
+		...(hasCacheValue(cacheWrite) && { write: cacheWrite }),
+	};
+};
+
+export const buildPricingPayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesLLMRulePricingDTO => {
+	const cache = buildCacheCosts(draft.pricing);
+	return {
+		input: draft.pricing.input ?? 0,
+		output: draft.pricing.output ?? 0,
+		...(cache && { cache }),
+	};
+};
+
+export const buildRulePayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesUpdatableLLMPricingRuleDTO => ({
+	id: draft.id || undefined,
+	sourceId: draft.sourceId || undefined,
+	modelName: draft.modelName.trim(),
+	provider: draft.provider.trim(),
+	modelPattern: draft.patterns,
+	isOverride: draft.isOverride,
+	enabled: true,
+	unit: UnitDTO.per_million_tokens,
+	pricing: buildPricingPayload(draft),
+});
+
+export const validateModelName = (
+	modelName: string,
+	mode: DrawerMode,
+): true | string =>
+	mode === 'add' && !modelName.trim() ? 'Billing model ID is required.' : true;
+
+export const validateProvider = (provider: string): true | string =>
+	provider.trim() ? true : 'Provider is required.';
+
+export const validatePricing = (
+	pricing: DrawerDraft['pricing'],
+	isOverride: boolean,
+): true | string => {
+	if (!isOverride) {
+		return true;
+	}
+	if (pricing.input === null || pricing.input <= 0) {
+		return 'Input cost must be greater than 0.';
+	}
+	if (pricing.output === null || pricing.output <= 0) {
+		return 'Output cost must be greater than 0.';
+	}
+	if ((pricing.cacheRead ?? 0) < 0 || (pricing.cacheWrite ?? 0) < 0) {
+		return 'Cache costs must be non-negative.';
+	}
+	return true;
+};

frontend/src/container/MembersSettings/MembersSettings.styles.scss

@@ -1,9 +1,14 @@
+@use '../../styles/scrollbar' as *;
+
 .members-settings-page {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
 	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
 	height: 100%;
+	overflow-y: auto;
+
+	@include custom-scrollbar;
 }
 
 .members-settings {

frontend/src/container/PanelWrapper/PiePanelWrapper.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
@@ -8,12 +8,10 @@ import { themeColors } from 'constants/theme';
 import { getPieChartClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
 import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import getLabelName from 'lib/getLabelName';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { isNaN } from 'lodash-es';
 import ContextMenu, { useCoordinates } from 'periscope/components/ContextMenu';
 
 import { PanelWrapperProps, TooltipData } from './panelWrapper.types';
+import { preparePieChartData } from './preparePieChartData';
 import { lightenColor, tooltipStyles } from './utils';
 
 import './PiePanelWrapper.styles.scss';
@@ -44,37 +42,15 @@ function PiePanelWrapper({
 		detectBounds: true,
 	});
 
-	const panelData = queryResponse.data?.payload?.data?.result || [];
-
 	const isDarkMode = useIsDarkMode();
 
-	let pieChartData: {
-		label: string;
-		value: string;
-		color: string;
-		record: any;
-	}[] = [].concat(
-		...(panelData
-			.map((d) => {
-				const label = getLabelName(d.metric, d.queryName || '', d.legend || '');
-				return {
-					label,
-					value: d?.values?.[0]?.[1],
-					record: d,
-					color:
-						widget?.customLegendColors?.[label] ||
-						generateColor(
-							label,
-							isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
-						),
-				};
-			})
-			.filter((d) => d !== undefined) as never[]),
-	);
-
-	pieChartData = pieChartData.filter(
-		(arc) =>
-			arc.value && !isNaN(parseFloat(arc.value)) && parseFloat(arc.value) > 0,
+	const pieChartData = useMemo(
+		() =>
+			preparePieChartData(queryResponse.data?.payload, {
+				customLegendColors: widget?.customLegendColors,
+				colorMap: isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
+			}),
+		[queryResponse.data?.payload, widget?.customLegendColors, isDarkMode],
 	);
 
 	let size = 0;

frontend/src/container/PanelWrapper/__tests__/preparePieChartData.test.ts

@@ -0,0 +1,185 @@
+import { themeColors } from 'constants/theme';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
+
+import { preparePieChartData } from '../preparePieChartData';
+
+const options = { colorMap: themeColors.chartcolors };
+
+/**
+ * Mirrors a query-range payload: the (possibly collapsed) time-series `result`
+ * plus the scalar table nested under `newResult` (as getQueryResults produces it).
+ */
+function makePayload(
+	result: QueryData[],
+	tables: QueryDataV3[],
+): MetricRangePayloadProps {
+	return {
+		data: {
+			result,
+			resultType: 'scalar',
+			newResult: { data: { result: tables, resultType: 'scalar' } },
+		},
+	} as MetricRangePayloadProps;
+}
+
+function tableEntry(
+	columns: NonNullable<QueryDataV3['table']>['columns'],
+	rows: NonNullable<QueryDataV3['table']>['rows'],
+	overrides: Partial<QueryDataV3> = {},
+): QueryDataV3 {
+	return {
+		queryName: 'A',
+		legend: '',
+		series: null,
+		list: null,
+		table: { columns, rows },
+		...overrides,
+	} as QueryDataV3;
+}
+
+describe('preparePieChartData', () => {
+	it('renders a slice per value column for a multi-column ClickHouse scalar', () => {
+		// SELECT count() AS col1, sum(value) AS col2 — the backend collapses the
+		// time-series result onto col1; the full data lives in the scalar table.
+		const payload = makePayload(
+			[
+				{
+					metric: {},
+					queryName: 'A',
+					legend: '',
+					values: [[0, '23399927']],
+				} as QueryData,
+			],
+			[
+				tableEntry(
+					[
+						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+					],
+					[{ data: { col1: 23399927, col2: 588691297 } }],
+				),
+			],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices).toHaveLength(2);
+		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
+			['col1', '23399927'],
+			['col2', '588691297'],
+		]);
+	});
+
+	it('prefixes the group when multiple value columns are grouped', () => {
+		const payload = makePayload(
+			[],
+			[
+				tableEntry(
+					[
+						{ name: 'env', queryName: 'A', isValueColumn: false, id: 'env' },
+						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+					],
+					[{ data: { env: 'prod', col1: 10, col2: 20 } }],
+				),
+			],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices.map((s) => s.label)).toStrictEqual([
+			'prod · col1',
+			'prod · col2',
+		]);
+		expect(slices[0].record.metric).toStrictEqual({ env: 'prod' });
+	});
+
+	it('drops non-positive and non-numeric values', () => {
+		const payload = makePayload(
+			[],
+			[
+				tableEntry(
+					[
+						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+						{ name: 'col3', queryName: 'A', isValueColumn: true, id: 'col3' },
+					],
+					[{ data: { col1: 5, col2: 0, col3: 'n/a' } }],
+				),
+			],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices.map((s) => s.label)).toStrictEqual(['col1']);
+	});
+
+	it('keeps the series path for a single value column (grouped panel)', () => {
+		// One value column → the time-series result is authoritative (one slice per
+		// group), so existing behaviour is preserved.
+		const payload = makePayload(
+			[
+				{
+					metric: { 'service.name': 'adservice' },
+					queryName: 'A',
+					legend: 'adservice',
+					values: [[0, '100']],
+				} as QueryData,
+				{
+					metric: { 'service.name': 'cartservice' },
+					queryName: 'A',
+					legend: 'cartservice',
+					values: [[0, '200']],
+				} as QueryData,
+			],
+			[
+				tableEntry(
+					[
+						{
+							name: 'service.name',
+							queryName: 'A',
+							isValueColumn: false,
+							id: 'service.name',
+						},
+						{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' },
+					],
+					[
+						{ data: { 'service.name': 'adservice', A: 100 } },
+						{ data: { 'service.name': 'cartservice', A: 200 } },
+					],
+				),
+			],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
+			['adservice', '100'],
+			['cartservice', '200'],
+		]);
+	});
+
+	it('uses the legacy series result when there is no scalar table', () => {
+		const payload = makePayload(
+			[
+				{
+					metric: { 'service.name': 'adservice' },
+					queryName: 'A',
+					legend: '{{service.name}}',
+					values: [[1000, '42']],
+				} as QueryData,
+			],
+			[],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices).toHaveLength(1);
+		expect(slices[0].value).toBe('42');
+	});
+
+	it('returns no slices for an empty payload', () => {
+		expect(preparePieChartData(undefined, options)).toStrictEqual([]);
+	});
+});

frontend/src/container/PanelWrapper/preparePieChartData.ts

@@ -0,0 +1,144 @@
+import getLabelName from 'lib/getLabelName';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { isNaN } from 'lodash-es';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
+
+export interface PieChartSlice {
+	label: string;
+	value: string;
+	color: string;
+	record: {
+		queryName: string;
+		legend?: string;
+		/** Group-by labels, used for drilldown; absent when the slice has no group. */
+		metric?: QueryData['metric'];
+	};
+}
+
+interface PreparePieChartDataOptions {
+	customLegendColors?: Record<string, string>;
+	colorMap: Record<string, string>;
+}
+
+const colorFor = (
+	label: string,
+	{ customLegendColors, colorMap }: PreparePieChartDataOptions,
+): string => customLegendColors?.[label] || generateColor(label, colorMap);
+
+const isPositive = (value: string): boolean =>
+	!!value && !isNaN(parseFloat(value)) && parseFloat(value) > 0;
+
+/**
+ * Time-series result: one slice per series, value = first datapoint. This is the
+ * original pie behaviour — kept verbatim (same label/value/colour/record) so
+ * single-value and grouped panels are unaffected.
+ */
+function slicesFromSeries(
+	result: QueryData[],
+	options: PreparePieChartDataOptions,
+): PieChartSlice[] {
+	return result
+		.filter((d) => d?.values?.[0]?.[1] !== undefined)
+		.map((d) => {
+			const label = getLabelName(d.metric, d.queryName || '', d.legend || '');
+			return {
+				label,
+				value: d.values[0][1],
+				color: colorFor(label, options),
+				record: d,
+			};
+		});
+}
+
+/**
+ * V5 scalar table: one slice per (row × value column). With more than one value
+ * column the column name keeps the slices distinct, so a ClickHouse query like
+ * `count() AS col1, sum() AS col2` renders a slice per column instead of
+ * collapsing onto the first; group-by columns become the slice label.
+ */
+function slicesFromTables(
+	tables: QueryDataV3[],
+	options: PreparePieChartDataOptions,
+): PieChartSlice[] {
+	const slices: PieChartSlice[] = [];
+
+	tables.forEach((entry) => {
+		const { table } = entry;
+		if (!table?.columns?.length || !table?.rows?.length) {
+			return;
+		}
+
+		const valueColumns = table.columns.filter((column) => column.isValueColumn);
+		if (valueColumns.length === 0) {
+			return;
+		}
+		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
+		const hasMultipleValueColumns = valueColumns.length > 1;
+
+		table.rows.forEach((row) => {
+			const groupLabel = labelColumns
+				.map((column) => row.data[column.id || column.name])
+				.filter((part) => part != null)
+				.map(String)
+				.join(', ');
+			// Drilldown filters by group-by labels; leave it undefined when there
+			// are none (e.g. a ClickHouse query) so no filterless menu is offered.
+			const metric = labelColumns.length
+				? labelColumns.reduce<Record<string, string>>((acc, column) => {
+						acc[column.name] = String(row.data[column.id || column.name]);
+						return acc;
+					}, {})
+				: undefined;
+
+			valueColumns.forEach((column) => {
+				let label: string;
+				if (hasMultipleValueColumns) {
+					label = groupLabel ? `${groupLabel} · ${column.name}` : column.name;
+				} else {
+					label = groupLabel || entry.legend || entry.queryName || '';
+				}
+
+				slices.push({
+					label,
+					value: String(row.data[column.id || column.name]),
+					color: colorFor(label, options),
+					record: { queryName: entry.queryName, legend: entry.legend, metric },
+				});
+			});
+		});
+	});
+
+	return slices;
+}
+
+/**
+ * Builds pie slices from a query-range payload, dropping non-positive/non-numeric
+ * values.
+ *
+ * A scalar response with several value columns (e.g. a ClickHouse
+ * `count() AS col1, sum() AS col2`) collapses to a single series in
+ * `data.result` — only the first value column survives. The full data is kept in
+ * the scalar table under `newResult`, so in that case slices are built from the
+ * table (one per value column). Otherwise the legacy time-series result is used,
+ * preserving existing behaviour for single-value and grouped panels.
+ */
+export function preparePieChartData(
+	payload: MetricRangePayloadProps | undefined,
+	options: PreparePieChartDataOptions,
+): PieChartSlice[] {
+	const tables = (payload?.data?.newResult?.data?.result || []).filter(
+		(entry) => entry?.table?.rows?.length,
+	);
+	const hasMultipleValueColumns = tables.some(
+		(entry) =>
+			(entry.table?.columns || []).filter((column) => column.isValueColumn)
+				.length > 1,
+	);
+
+	const slices = hasMultipleValueColumns
+		? slicesFromTables(tables, options)
+		: slicesFromSeries(payload?.data?.result || [], options);
+
+	return slices.filter((slice) => isPositive(slice.value));
+}

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.module.scss

@@ -1,7 +1,6 @@
 .rolesListingTable {
 	margin-top: 12px;
 	border-radius: 4px;
-	overflow: hidden;
 }
 
 .scrollContainer {

frontend/src/container/RolesSettings/RolesSettings.module.scss

@@ -40,6 +40,7 @@
 
 .rolesSettingsContent {
 	padding: 0 16px;
+	padding-bottom: 16px;
 }
 
 .rolesSettingsToolbar {

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;

frontend/src/utils/permission/index.ts

@@ -20,7 +20,8 @@ export type ComponentTypes =
 	| 'add_panel'
 	| 'page_pipelines'
 	| 'edit_locked_dashboard'
-	| 'add_panel_locked_dashboard';
+	| 'add_panel_locked_dashboard'
+	| 'manage_llm_pricing';
 
 export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	current_org_settings: ['ADMIN'],
@@ -42,6 +43,7 @@ export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	page_pipelines: ['ADMIN', 'EDITOR'],
 	edit_locked_dashboard: ['ADMIN', 'AUTHOR'],
 	add_panel_locked_dashboard: ['ADMIN', 'AUTHOR'],
+	manage_llm_pricing: ['ADMIN'],
 };
 
 export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {

pkg/apiserver/signozapiserver/inframonitoring.go

@@ -48,6 +48,25 @@ func (provider *provider) addInfraMonitoringRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v2/infra_monitoring/kubernetes_containers", handler.New(
+		provider.authzMiddleware.ViewAccess(provider.infraMonitoringHandler.ListContainers),
+		handler.OpenAPIDef{
+			ID:                  "ListContainers",
+			Tags:                []string{"inframonitoring"},
+			Summary:             "List Kubernetes Containers for Infra Monitoring",
+			Description:         "Returns a paginated list of Kubernetes containers with key kubeletstats metrics: CPU usage (cores), CPU request/limit utilization, memory working set, and memory request/limit utilization. Each container also reports health signals from the k8s_cluster receiver: status (kubectl-style display status derived from k8s.container.status.state + k8s.container.status.reason), restarts (absolute count from k8s.container.restarts), and ready (ready/not_ready from k8s.container.ready). The row identity is (k8s.pod.uid, k8s.container.name), stable across container restarts. Each container includes metadata attributes (k8s.container.name, k8s.pod.name, container.image.name, container.image.tag, k8s.namespace.name, k8s.node.name, k8s.cluster.name, and workload owner such as deployment/statefulset/daemonset/job). The response type is 'list' for the default (k8s.pod.uid, k8s.container.name) grouping (each row is one container with its current status and ready state) or 'grouped_list' for custom groupBy keys (each row aggregates containers in the group with per-status counts under containerCountsByStatus, per-readiness counts under containerCountsByReady, and restarts as the group sum). Status requires the optional k8s.container.status.state and k8s.container.status.reason metrics; when either is missing, status is omitted and a warning is returned while restarts and ready are still computed. Supports filtering via a filter expression, custom groupBy, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (cpu, cpuRequestUtilization, cpuLimitUtilization, memory, memoryRequestUtilization, memoryLimitUtilization) and restarts return -1 as a sentinel when no data is available for that field.",
+			Request:             new(inframonitoringtypes.PostableContainers),
+			RequestContentType:  "application/json",
+			Response:            new(inframonitoringtypes.Containers),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized},
+			Deprecated:          false,
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		})).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
 	if err := router.Handle("/api/v2/infra_monitoring/nodes", handler.New(
 		provider.authzMiddleware.ViewAccess(provider.infraMonitoringHandler.ListNodes),
 		handler.OpenAPIDef{

pkg/modules/inframonitoring/implinframonitoring/containers.go

@@ -0,0 +1,811 @@
+package implinframonitoring
+
+import (
+	"context"
+	"fmt"
+	"slices"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/querybuilder"
+	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
+	"github.com/SigNoz/signoz/pkg/types/inframonitoringtypes"
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/huandu/go-sqlbuilder"
+)
+
+// buildContainerRecords assembles the page records, merging kubeletstats
+// metrics (A-F from the querier) with the k8scluster health signals (status,
+// restarts, ready). In list mode (isContainerRowInGroupBy=true) each group is a
+// single container, so exactly one status/ready bucket is 1 and the single
+// Status/Ready fields are derived from it; otherwise they stay NoData and only
+// the per-group counts are populated.
+func buildContainerRecords(
+	isContainerRowInGroupBy bool,
+	resp *qbtypes.QueryRangeResponse,
+	pageGroups []map[string]string,
+	groupBy []qbtypes.GroupByKey,
+	metadataMap map[string]map[string]string,
+	statusCounts map[string]containerStatusCounts,
+	restartCounts map[string]int64,
+	readyCounts map[string]containerReadyCounts,
+) []inframonitoringtypes.ContainerRecord {
+	metricsMap := parseFullQueryResponse(resp, groupBy)
+
+	records := make([]inframonitoringtypes.ContainerRecord, 0, len(pageGroups))
+	for _, labels := range pageGroups {
+		compositeKey := compositeKeyFromLabels(labels, groupBy)
+
+		record := inframonitoringtypes.ContainerRecord{ // initialize with default values
+			PodUID:                   labels[podUIDAttrKey],
+			ContainerName:            labels[containerNameAttrKey],
+			Status:                   inframonitoringtypes.ContainerStatusNoData,
+			Ready:                    inframonitoringtypes.ContainerReadyNoData,
+			Restarts:                 -1,
+			CPU:                      -1,
+			CPURequestUtilization:    -1,
+			CPULimitUtilization:      -1,
+			Memory:                   -1,
+			MemoryRequestUtilization: -1,
+			MemoryLimitUtilization:   -1,
+			Meta:                     map[string]string{},
+		}
+
+		if metrics, ok := metricsMap[compositeKey]; ok {
+			if v, exists := metrics["A"]; exists {
+				record.CPU = v
+			}
+			if v, exists := metrics["B"]; exists {
+				record.CPURequestUtilization = v
+			}
+			if v, exists := metrics["C"]; exists {
+				record.CPULimitUtilization = v
+			}
+			if v, exists := metrics["D"]; exists {
+				record.Memory = v
+			}
+			if v, exists := metrics["E"]; exists {
+				record.MemoryRequestUtilization = v
+			}
+			if v, exists := metrics["F"]; exists {
+				record.MemoryLimitUtilization = v
+			}
+		}
+
+		if statusCountsForGroup, ok := statusCounts[compositeKey]; ok {
+			record.ContainerCountsByStatus = containerStatusCountsToResponse(statusCountsForGroup)
+
+			// In list mode each group is one container; the count==1 bucket identifies the status.
+			if isContainerRowInGroupBy {
+				switch {
+				case statusCountsForGroup.Running == 1:
+					record.Status = inframonitoringtypes.ContainerStatusRunning
+				case statusCountsForGroup.Waiting == 1:
+					record.Status = inframonitoringtypes.ContainerStatusWaiting
+				case statusCountsForGroup.Terminated == 1:
+					record.Status = inframonitoringtypes.ContainerStatusTerminated
+				case statusCountsForGroup.CrashLoopBackOff == 1:
+					record.Status = inframonitoringtypes.ContainerStatusCrashLoopBackOff
+				case statusCountsForGroup.ImagePullBackOff == 1:
+					record.Status = inframonitoringtypes.ContainerStatusImagePullBackOff
+				case statusCountsForGroup.ErrImagePull == 1:
+					record.Status = inframonitoringtypes.ContainerStatusErrImagePull
+				case statusCountsForGroup.CreateContainerConfigError == 1:
+					record.Status = inframonitoringtypes.ContainerStatusCreateContainerConfigError
+				case statusCountsForGroup.ContainerCreating == 1:
+					record.Status = inframonitoringtypes.ContainerStatusContainerCreating
+				case statusCountsForGroup.OOMKilled == 1:
+					record.Status = inframonitoringtypes.ContainerStatusOOMKilled
+				case statusCountsForGroup.Completed == 1:
+					record.Status = inframonitoringtypes.ContainerStatusCompleted
+				case statusCountsForGroup.Error == 1:
+					record.Status = inframonitoringtypes.ContainerStatusError
+				case statusCountsForGroup.ContainerCannotRun == 1:
+					record.Status = inframonitoringtypes.ContainerStatusContainerCannotRun
+				case statusCountsForGroup.Unknown == 1:
+					record.Status = inframonitoringtypes.ContainerStatusUnknown
+				}
+			}
+		}
+
+		// Restart count: container's own count (list mode) or group sum (grouped mode).
+		if restartCountForGroup, ok := restartCounts[compositeKey]; ok {
+			record.Restarts = restartCountForGroup
+		}
+
+		if readyCountsForGroup, ok := readyCounts[compositeKey]; ok {
+			record.ContainerCountsByReady = containerReadyCountsToResponse(readyCountsForGroup)
+
+			// In list mode each group is one container; exactly one of ready/not_ready is 1.
+			if isContainerRowInGroupBy {
+				switch {
+				case readyCountsForGroup.Ready == 1:
+					record.Ready = inframonitoringtypes.ContainerReadyReady
+				case readyCountsForGroup.NotReady == 1:
+					record.Ready = inframonitoringtypes.ContainerReadyNotReady
+				}
+			}
+		}
+
+		if attrs, ok := metadataMap[compositeKey]; ok {
+			for k, v := range attrs {
+				record.Meta[k] = v
+			}
+		}
+
+		records = append(records, record)
+	}
+	return records
+}
+
+func (m *module) getTopContainerGroups(
+	ctx context.Context,
+	orgID valuer.UUID,
+	req *inframonitoringtypes.PostableContainers,
+	metadataMap map[string]map[string]string,
+) ([]map[string]string, error) {
+	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.ContainerNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.ContainerNameAttrKey), nil
+	}
+	queryNamesForOrderBy := orderByToContainersQueryNames[orderByKey]
+	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
+
+	topReq := &qbtypes.QueryRangeRequest{
+		Start:       uint64(req.Start),
+		End:         uint64(req.End),
+		RequestType: qbtypes.RequestTypeScalar,
+		CompositeQuery: qbtypes.CompositeQuery{
+			Queries: make([]qbtypes.QueryEnvelope, 0, len(queryNamesForOrderBy)),
+		},
+	}
+
+	for _, envelope := range m.newContainersTableListQuery().CompositeQuery.Queries {
+		if !slices.Contains(queryNamesForOrderBy, envelope.GetQueryName()) {
+			continue
+		}
+		copied := envelope
+		if copied.Type == qbtypes.QueryTypeBuilder {
+			existingExpr := ""
+			if f := copied.GetFilter(); f != nil {
+				existingExpr = f.Expression
+			}
+			reqFilterExpr := ""
+			if req.Filter != nil {
+				reqFilterExpr = req.Filter.Expression
+			}
+			merged := mergeFilterExpressions(existingExpr, reqFilterExpr)
+			copied.SetFilter(&qbtypes.Filter{Expression: merged})
+			copied.SetGroupBy(req.GroupBy)
+		}
+		topReq.CompositeQuery.Queries = append(topReq.CompositeQuery.Queries, copied)
+	}
+
+	resp, err := m.querier.QueryRange(ctx, orgID, topReq)
+	if err != nil {
+		return nil, err
+	}
+
+	allMetricGroups := parseAndSortGroups(resp, rankingQueryName, req.GroupBy, req.OrderBy.Direction)
+	return paginateWithBackfill(allMetricGroups, metadataMap, req.GroupBy, req.Offset, req.Limit), nil
+}
+
+func (m *module) getContainersTableMetadata(ctx context.Context, req *inframonitoringtypes.PostableContainers) (map[string]map[string]string, error) {
+	var nonGroupByAttrs []string
+	for _, key := range containerAttrKeysForMetadata {
+		if !isKeyInGroupByAttrs(req.GroupBy, key) {
+			nonGroupByAttrs = append(nonGroupByAttrs, key)
+		}
+	}
+	return m.getMetadata(ctx, containersTableMetricNamesList, req.GroupBy, nonGroupByAttrs, req.Filter, req.Start, req.End)
+}
+
+// getPerGroupContainerStatusCountsWithReqMetricChecks gates
+// getPerGroupContainerStatusCounts on the required metrics being present. If
+// either of containerStatusMetricNamesList (k8s.container.status.state /
+// k8s.container.status.reason) has never been reported, it skips the query and
+// returns a warning instead (the status derivation needs both). Otherwise it
+// runs the query. The returned counts map is empty (never nil) when gated off.
+func (m *module) getPerGroupContainerStatusCountsWithReqMetricChecks(
+	ctx context.Context,
+	start, end int64,
+	filter *qbtypes.Filter,
+	groupBy []qbtypes.GroupByKey,
+	pageGroups []map[string]string,
+) (map[string]containerStatusCounts, *qbtypes.QueryWarnData, error) {
+	present, err := m.getMetricsExistence(ctx, containerStatusMetricNamesList)
+	if err != nil {
+		return nil, nil, err
+	}
+
+	var missing []string
+	for _, name := range containerStatusMetricNamesList {
+		if !present[name] {
+			missing = append(missing, name)
+		}
+	}
+	if len(missing) > 0 {
+		warning := &qbtypes.QueryWarnData{
+			Message: fmt.Sprintf(
+				"Container status could not be computed: required metric(s) not found: %s. "+
+					"Enable the optional k8s.container.status.state and k8s.container.status.reason "+
+					"metrics in the k8s_cluster receiver to see container statuses.",
+				strings.Join(missing, ", "),
+			),
+			Url: docLinkK8sClusterReceiver,
+		}
+		return map[string]containerStatusCounts{}, warning, nil
+	}
+
+	counts, err := m.getPerGroupContainerStatusCounts(ctx, start, end, filter, groupBy, pageGroups)
+	if err != nil {
+		return nil, nil, err
+	}
+	return counts, nil, nil
+}
+
+// getPerGroupContainerStatusCounts computes per-group counts of distinct
+// containers bucketed by their latest kubectl-style display status in window.
+// Caller must ensure the required metrics exist
+// (getPerGroupContainerStatusCountsWithReqMetricChecks).
+//
+// Row identity is (pod_uid, container_name). Pipeline:
+//
+//	state_fps / container_state:   current k8s.container.status.state per container
+//	                               (argMaxIf(state, unix_milli, value=1) — safe because a
+//	                               container always has exactly one active state).
+//	reason_fps / container_reason: highest-priority active k8s.container.status.reason per
+//	                               container (two-level: HAVING is_active=1 excludes stale
+//	                               reasons of recovered containers).
+//	container_status:              display status per container (reason > state fallback).
+//	countContainersPerStatus:      per-group uniqExactIf over distinct (pod_uid, container_name).
+//
+// Groups absent from the result map have implicit zero counts (caller default).
+func (m *module) getPerGroupContainerStatusCounts(
+	ctx context.Context,
+	start, end int64,
+	filter *qbtypes.Filter,
+	groupBy []qbtypes.GroupByKey,
+	pageGroups []map[string]string,
+) (map[string]containerStatusCounts, error) {
+	if len(pageGroups) == 0 || len(groupBy) == 0 {
+		return map[string]containerStatusCounts{}, nil
+	}
+
+	userFilterExpr := ""
+	if filter != nil {
+		userFilterExpr = filter.Expression
+	}
+	mergedFilterExpr := mergeFilterExpressions(userFilterExpr, buildPageGroupsFilterExpr(pageGroups))
+
+	samplesStartMs, flooredEndMs, tsAdjustedStart, _, localTimeSeriesTable, distributedSamplesTable, _ := alignedMetricWindow(start, end)
+	valueCol := telemetrymetrics.ValueColumnForSamplesTable(distributedSamplesTable)
+
+	// Built once; identical across the two fps CTEs (buildFilterClause hits the
+	// metadata store + parses the expression). AddWhereClause only reads it.
+	var (
+		filterClause *sqlbuilder.WhereClause
+		err          error
+	)
+	if mergedFilterExpr != "" {
+		filterClause, err = m.buildFilterClause(ctx, &qbtypes.Filter{Expression: mergedFilterExpr}, start, end)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	// ----- state_fps (carries groupBy cols) -----
+	stateFps := sqlbuilder.NewSelectBuilder()
+	stateFpsCols := []string{
+		"fingerprint",
+		fmt.Sprintf("JSONExtractString(labels, %s) AS pod_uid", stateFps.Var(podUIDAttrKey)),
+		fmt.Sprintf("JSONExtractString(labels, %s) AS container_name", stateFps.Var(containerNameAttrKey)),
+		fmt.Sprintf("JSONExtractString(labels, %s) AS state", stateFps.Var(containerStatusStateAttrKey)),
+	}
+	for _, key := range groupBy {
+		stateFpsCols = append(stateFpsCols,
+			fmt.Sprintf("JSONExtractString(labels, %s) AS %s", stateFps.Var(key.Name), quoteIdentifier(key.Name)),
+		)
+	}
+	stateFps.Select(stateFpsCols...)
+	stateFps.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, localTimeSeriesTable))
+	stateFps.Where(
+		stateFps.E("metric_name", containerStatusStateMetricName),
+		stateFps.GE("unix_milli", tsAdjustedStart),
+		stateFps.LE("unix_milli", flooredEndMs),
+	)
+	if filterClause != nil {
+		stateFps.AddWhereClause(filterClause)
+	}
+	stateFpsGroupBy := []string{"fingerprint", "pod_uid", "container_name", "state"}
+	for _, key := range groupBy {
+		stateFpsGroupBy = append(stateFpsGroupBy, quoteIdentifier(key.Name))
+	}
+	stateFps.GroupBy(stateFpsGroupBy...)
+	stateFpsSQL, stateFpsArgs := stateFps.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	// ----- container_state (current state per container; single-pass argMaxIf) -----
+	containerState := sqlbuilder.NewSelectBuilder()
+	containerStateCols := []string{
+		"fps.pod_uid AS pod_uid",
+		"fps.container_name AS container_name",
+	}
+	for _, key := range groupBy {
+		col := quoteIdentifier(key.Name)
+		containerStateCols = append(containerStateCols, fmt.Sprintf("argMax(fps.%s, samples.unix_milli) AS %s", col, col))
+	}
+	containerStateCols = append(containerStateCols,
+		fmt.Sprintf("argMaxIf(fps.state, samples.unix_milli, samples.%s = 1) AS state", valueCol),
+	)
+	containerState.Select(containerStateCols...)
+	containerState.From(fmt.Sprintf(
+		"%s.%s AS samples INNER JOIN state_fps AS fps ON samples.fingerprint = fps.fingerprint",
+		telemetrymetrics.DBName, distributedSamplesTable,
+	))
+	containerState.Where(
+		containerState.E("samples.metric_name", containerStatusStateMetricName),
+		containerState.GE("samples.unix_milli", samplesStartMs),
+		containerState.L("samples.unix_milli", flooredEndMs),
+		"fps.pod_uid != ''",
+	)
+	containerState.GroupBy("fps.pod_uid", "fps.container_name")
+	containerStateSQL, containerStateArgs := containerState.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	// ----- reason_fps -----
+	reasonFps := sqlbuilder.NewSelectBuilder()
+	reasonFps.Select(
+		"fingerprint",
+		fmt.Sprintf("JSONExtractString(labels, %s) AS pod_uid", reasonFps.Var(podUIDAttrKey)),
+		fmt.Sprintf("JSONExtractString(labels, %s) AS container_name", reasonFps.Var(containerNameAttrKey)),
+		fmt.Sprintf("JSONExtractString(labels, %s) AS reason", reasonFps.Var(containerStatusReasonAttrKey)),
+	)
+	reasonFps.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, localTimeSeriesTable))
+	reasonFps.Where(
+		reasonFps.E("metric_name", containerStatusReasonMetricName),
+		reasonFps.GE("unix_milli", tsAdjustedStart),
+		reasonFps.LE("unix_milli", flooredEndMs),
+	)
+	if filterClause != nil {
+		reasonFps.AddWhereClause(filterClause)
+	}
+	reasonFps.GroupBy("fingerprint", "pod_uid", "container_name", "reason")
+	reasonFpsSQL, reasonFpsArgs := reasonFps.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	// ----- container_reason -----
+	// Inner: latest value per (pod, container, reason) -> kills stale fingerprints
+	// from old container incarnations; keep only active (=1). Outer:
+	// highest-priority active reason per container (waiting > terminated).
+	priorityCase := "CASE fps.reason " +
+		"WHEN 'CrashLoopBackOff' THEN 8 " +
+		"WHEN 'ImagePullBackOff' THEN 7 " +
+		"WHEN 'ErrImagePull' THEN 6 " +
+		"WHEN 'CreateContainerConfigError' THEN 5 " +
+		"WHEN 'ContainerCreating' THEN 4 " +
+		"WHEN 'OOMKilled' THEN 3 " +
+		"WHEN 'Error' THEN 2 " +
+		"WHEN 'ContainerCannotRun' THEN 1 " +
+		"WHEN 'Completed' THEN 0 " +
+		"ELSE -1 END"
+	reasonInner := sqlbuilder.NewSelectBuilder()
+	reasonInner.Select(
+		"fps.pod_uid AS pod_uid",
+		"fps.container_name AS container_name",
+		"fps.reason AS reason",
+		fmt.Sprintf("argMax(samples.%s, samples.unix_milli) AS is_active", valueCol),
+		priorityCase+" AS priority",
+	)
+	reasonInner.From(fmt.Sprintf(
+		"%s.%s AS samples INNER JOIN reason_fps AS fps ON samples.fingerprint = fps.fingerprint",
+		telemetrymetrics.DBName, distributedSamplesTable,
+	))
+	reasonInner.Where(
+		reasonInner.E("samples.metric_name", containerStatusReasonMetricName),
+		reasonInner.GE("samples.unix_milli", samplesStartMs),
+		reasonInner.L("samples.unix_milli", flooredEndMs),
+		"fps.pod_uid != ''",
+	)
+	reasonInner.GroupBy("fps.pod_uid", "fps.container_name", "fps.reason")
+	reasonInner.Having("is_active = 1")
+	reasonInnerSQL, reasonInnerArgs := reasonInner.BuildWithFlavor(sqlbuilder.ClickHouse)
+	containerReasonSQL := fmt.Sprintf(
+		"SELECT pod_uid, container_name, argMax(reason, priority) AS active_reason FROM (%s) GROUP BY pod_uid, container_name",
+		reasonInnerSQL,
+	)
+
+	// ----- container_status (display status per container) -----
+	// container reason > state fallback (running/terminated/waiting).
+	displayStatusExpr := "multiIf(" +
+		"cr.active_reason != '', cr.active_reason, " +
+		"st.state = 'running', 'Running', " +
+		"st.state = 'terminated', 'Terminated', " +
+		"st.state = 'waiting', 'Waiting', " +
+		"'Unknown')"
+	containerStatusSelectCols := []string{
+		"st.pod_uid AS pod_uid",
+		"st.container_name AS container_name",
+	}
+	for _, key := range groupBy {
+		col := quoteIdentifier(key.Name)
+		containerStatusSelectCols = append(containerStatusSelectCols, fmt.Sprintf("st.%s AS %s", col, col))
+	}
+	containerStatusSelectCols = append(containerStatusSelectCols, displayStatusExpr+" AS display_status")
+	containerStatusSQL := fmt.Sprintf(
+		"SELECT %s FROM container_state AS st "+
+			"LEFT JOIN container_reason AS cr ON st.pod_uid = cr.pod_uid AND st.container_name = cr.container_name",
+		strings.Join(containerStatusSelectCols, ", "),
+	)
+
+	// ----- countContainersPerStatus (outer SELECT) -----
+	// Fixed status order; MUST match the containerStatusCounts assignment below.
+	displayStatuses := []string{
+		"Running", "Waiting", "Terminated",
+		"CrashLoopBackOff", "ImagePullBackOff", "ErrImagePull", "CreateContainerConfigError",
+		"ContainerCreating", "OOMKilled", "Completed", "Error", "ContainerCannotRun",
+		"Unknown",
+	}
+	countSelectCols := make([]string, 0, len(groupBy)+len(displayStatuses))
+	countGroupBy := make([]string, 0, len(groupBy))
+	for _, key := range groupBy {
+		col := quoteIdentifier(key.Name)
+		countSelectCols = append(countSelectCols, col)
+		countGroupBy = append(countGroupBy, col)
+	}
+	for i, st := range displayStatuses {
+		countSelectCols = append(countSelectCols,
+			fmt.Sprintf("uniqExactIf((pod_uid, container_name), display_status = '%s') AS c%d", st, i),
+		)
+	}
+	countSQL := fmt.Sprintf(
+		"SELECT %s FROM container_status GROUP BY %s",
+		strings.Join(countSelectCols, ", "),
+		strings.Join(countGroupBy, ", "),
+	)
+
+	// Combine CTEs + outer. Arg order mirrors CTE declaration order.
+	cteFragments := []string{
+		fmt.Sprintf("state_fps AS (%s)", stateFpsSQL),
+		fmt.Sprintf("container_state AS (%s)", containerStateSQL),
+		fmt.Sprintf("reason_fps AS (%s)", reasonFpsSQL),
+		fmt.Sprintf("container_reason AS (%s)", containerReasonSQL),
+		fmt.Sprintf("container_status AS (%s)", containerStatusSQL),
+	}
+	finalSQL := querybuilder.CombineCTEs(cteFragments) + countSQL
+	finalArgs := querybuilder.PrependArgs([][]any{
+		stateFpsArgs, containerStateArgs, reasonFpsArgs, reasonInnerArgs,
+	}, nil)
+
+	rows, err := m.telemetryStore.ClickhouseDB().Query(ctx, finalSQL, finalArgs...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	result := make(map[string]containerStatusCounts)
+	for rows.Next() {
+		groupVals := make([]string, len(groupBy))
+		counts := make([]uint64, len(displayStatuses))
+		scanPtrs := make([]any, 0, len(groupBy)+len(displayStatuses))
+		for i := range groupVals {
+			scanPtrs = append(scanPtrs, &groupVals[i])
+		}
+		for i := range counts {
+			scanPtrs = append(scanPtrs, &counts[i])
+		}
+		if err := rows.Scan(scanPtrs...); err != nil {
+			return nil, err
+		}
+		result[compositeKeyFromList(groupVals)] = containerStatusCounts{
+			Running:                    int(counts[0]),
+			Waiting:                    int(counts[1]),
+			Terminated:                 int(counts[2]),
+			CrashLoopBackOff:           int(counts[3]),
+			ImagePullBackOff:           int(counts[4]),
+			ErrImagePull:               int(counts[5]),
+			CreateContainerConfigError: int(counts[6]),
+			ContainerCreating:          int(counts[7]),
+			OOMKilled:                  int(counts[8]),
+			Completed:                  int(counts[9]),
+			Error:                      int(counts[10]),
+			ContainerCannotRun:         int(counts[11]),
+			Unknown:                    int(counts[12]),
+		}
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return result, nil
+}
+
+// getPerGroupContainerRestartCounts computes the absolute container restart count
+// per group from k8s.container.restarts (default-enabled, so no existence gate).
+// In list mode (groupBy contains the row identity) each group is one container ->
+// its restart count; in grouped mode it's the summed restarts across all
+// containers in the group. argMax(value, unix_milli) per (pod, container) takes
+// the current cumulative count from the latest incarnation, then sum.
+//
+//	restart_fps:        fp ↔ (pod_uid, container_name, groupBy cols) from time_series.
+//	container_restarts: INNER JOIN samples, latest restartCount per (pod, container).
+//	(outer):            per-group sum(restart_count).
+//
+// Groups absent from the result map have no data (caller default).
+func (m *module) getPerGroupContainerRestartCounts(
+	ctx context.Context,
+	start, end int64,
+	filter *qbtypes.Filter,
+	groupBy []qbtypes.GroupByKey,
+	pageGroups []map[string]string,
+) (map[string]int64, error) {
+	if len(pageGroups) == 0 || len(groupBy) == 0 {
+		return map[string]int64{}, nil
+	}
+
+	userFilterExpr := ""
+	if filter != nil {
+		userFilterExpr = filter.Expression
+	}
+	mergedFilterExpr := mergeFilterExpressions(userFilterExpr, buildPageGroupsFilterExpr(pageGroups))
+
+	samplesStartMs, flooredEndMs, tsAdjustedStart, _, localTimeSeriesTable, distributedSamplesTable, _ := alignedMetricWindow(start, end)
+	valueCol := telemetrymetrics.ValueColumnForSamplesTable(distributedSamplesTable)
+
+	var (
+		filterClause *sqlbuilder.WhereClause
+		err          error
+	)
+	if mergedFilterExpr != "" {
+		filterClause, err = m.buildFilterClause(ctx, &qbtypes.Filter{Expression: mergedFilterExpr}, start, end)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	// ----- restart_fps (carries groupBy cols) -----
+	restartFps := sqlbuilder.NewSelectBuilder()
+	restartFpsCols := []string{
+		"fingerprint",
+		fmt.Sprintf("JSONExtractString(labels, %s) AS pod_uid", restartFps.Var(podUIDAttrKey)),
+		fmt.Sprintf("JSONExtractString(labels, %s) AS container_name", restartFps.Var(containerNameAttrKey)),
+	}
+	for _, key := range groupBy {
+		restartFpsCols = append(restartFpsCols,
+			fmt.Sprintf("JSONExtractString(labels, %s) AS %s", restartFps.Var(key.Name), quoteIdentifier(key.Name)),
+		)
+	}
+	restartFps.Select(restartFpsCols...)
+	restartFps.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, localTimeSeriesTable))
+	restartFps.Where(
+		restartFps.E("metric_name", containerRestartsMetricName),
+		restartFps.GE("unix_milli", tsAdjustedStart),
+		restartFps.LE("unix_milli", flooredEndMs),
+	)
+	if filterClause != nil {
+		restartFps.AddWhereClause(filterClause)
+	}
+	restartFpsGroupBy := []string{"fingerprint", "pod_uid", "container_name"}
+	for _, key := range groupBy {
+		restartFpsGroupBy = append(restartFpsGroupBy, quoteIdentifier(key.Name))
+	}
+	restartFps.GroupBy(restartFpsGroupBy...)
+	restartFpsSQL, restartFpsArgs := restartFps.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	// ----- container_restarts (latest cumulative count per container) -----
+	containerRestarts := sqlbuilder.NewSelectBuilder()
+	containerRestartsCols := []string{
+		"fps.pod_uid AS pod_uid",
+		"fps.container_name AS container_name",
+	}
+	for _, key := range groupBy {
+		col := quoteIdentifier(key.Name)
+		containerRestartsCols = append(containerRestartsCols, fmt.Sprintf("argMax(fps.%s, samples.unix_milli) AS %s", col, col))
+	}
+	containerRestartsCols = append(containerRestartsCols, fmt.Sprintf("argMax(samples.%s, samples.unix_milli) AS restart_count", valueCol))
+	containerRestarts.Select(containerRestartsCols...)
+	containerRestarts.From(fmt.Sprintf(
+		"%s.%s AS samples INNER JOIN restart_fps AS fps ON samples.fingerprint = fps.fingerprint",
+		telemetrymetrics.DBName, distributedSamplesTable,
+	))
+	containerRestarts.Where(
+		containerRestarts.E("samples.metric_name", containerRestartsMetricName),
+		containerRestarts.GE("samples.unix_milli", samplesStartMs),
+		containerRestarts.L("samples.unix_milli", flooredEndMs),
+		"fps.pod_uid != ''",
+	)
+	containerRestarts.GroupBy("fps.pod_uid", "fps.container_name")
+	containerRestartsSQL, containerRestartsArgs := containerRestarts.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	// ----- outer: per-group sum across containers -----
+	sumSelectCols := make([]string, 0, len(groupBy)+1)
+	sumGroupBy := make([]string, 0, len(groupBy))
+	for _, key := range groupBy {
+		col := quoteIdentifier(key.Name)
+		sumSelectCols = append(sumSelectCols, col)
+		sumGroupBy = append(sumGroupBy, col)
+	}
+	sumSelectCols = append(sumSelectCols, "sum(restart_count) AS total_restarts")
+	sumSQL := fmt.Sprintf(
+		"SELECT %s FROM container_restarts GROUP BY %s",
+		strings.Join(sumSelectCols, ", "),
+		strings.Join(sumGroupBy, ", "),
+	)
+
+	cteFragments := []string{
+		fmt.Sprintf("restart_fps AS (%s)", restartFpsSQL),
+		fmt.Sprintf("container_restarts AS (%s)", containerRestartsSQL),
+	}
+	finalSQL := querybuilder.CombineCTEs(cteFragments) + sumSQL
+	finalArgs := querybuilder.PrependArgs([][]any{restartFpsArgs, containerRestartsArgs}, nil)
+
+	rows, err := m.telemetryStore.ClickhouseDB().Query(ctx, finalSQL, finalArgs...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	result := make(map[string]int64)
+	for rows.Next() {
+		groupVals := make([]string, len(groupBy))
+		var totalRestarts float64
+		scanPtrs := make([]any, 0, len(groupBy)+1)
+		for i := range groupVals {
+			scanPtrs = append(scanPtrs, &groupVals[i])
+		}
+		scanPtrs = append(scanPtrs, &totalRestarts)
+		if err := rows.Scan(scanPtrs...); err != nil {
+			return nil, err
+		}
+		result[compositeKeyFromList(groupVals)] = int64(totalRestarts)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return result, nil
+}
+
+// getPerGroupContainerReadyCounts computes per-group counts of distinct
+// containers bucketed by their latest readiness (k8s.container.ready, a single
+// 0/1 gauge per container — default-enabled, so no existence gate). ready = latest
+// value 1; not_ready = latest value < 1.
+//
+//	ready_fps:       fp ↔ (pod_uid, container_name, groupBy cols) from time_series.
+//	container_ready: INNER JOIN samples, latest ready value per (pod, container).
+//	(outer):         per-group uniqExactIf over distinct (pod_uid, container_name).
+//
+// Groups absent from the result map have no data (caller default).
+func (m *module) getPerGroupContainerReadyCounts(
+	ctx context.Context,
+	start, end int64,
+	filter *qbtypes.Filter,
+	groupBy []qbtypes.GroupByKey,
+	pageGroups []map[string]string,
+) (map[string]containerReadyCounts, error) {
+	if len(pageGroups) == 0 || len(groupBy) == 0 {
+		return map[string]containerReadyCounts{}, nil
+	}
+
+	userFilterExpr := ""
+	if filter != nil {
+		userFilterExpr = filter.Expression
+	}
+	mergedFilterExpr := mergeFilterExpressions(userFilterExpr, buildPageGroupsFilterExpr(pageGroups))
+
+	samplesStartMs, flooredEndMs, tsAdjustedStart, _, localTimeSeriesTable, distributedSamplesTable, _ := alignedMetricWindow(start, end)
+	valueCol := telemetrymetrics.ValueColumnForSamplesTable(distributedSamplesTable)
+
+	var (
+		filterClause *sqlbuilder.WhereClause
+		err          error
+	)
+	if mergedFilterExpr != "" {
+		filterClause, err = m.buildFilterClause(ctx, &qbtypes.Filter{Expression: mergedFilterExpr}, start, end)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	// ----- ready_fps (carries groupBy cols) -----
+	readyFps := sqlbuilder.NewSelectBuilder()
+	readyFpsCols := []string{
+		"fingerprint",
+		fmt.Sprintf("JSONExtractString(labels, %s) AS pod_uid", readyFps.Var(podUIDAttrKey)),
+		fmt.Sprintf("JSONExtractString(labels, %s) AS container_name", readyFps.Var(containerNameAttrKey)),
+	}
+	for _, key := range groupBy {
+		readyFpsCols = append(readyFpsCols,
+			fmt.Sprintf("JSONExtractString(labels, %s) AS %s", readyFps.Var(key.Name), quoteIdentifier(key.Name)),
+		)
+	}
+	readyFps.Select(readyFpsCols...)
+	readyFps.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, localTimeSeriesTable))
+	readyFps.Where(
+		readyFps.E("metric_name", containerReadyMetricName),
+		readyFps.GE("unix_milli", tsAdjustedStart),
+		readyFps.LE("unix_milli", flooredEndMs),
+	)
+	if filterClause != nil {
+		readyFps.AddWhereClause(filterClause)
+	}
+	readyFpsGroupBy := []string{"fingerprint", "pod_uid", "container_name"}
+	for _, key := range groupBy {
+		readyFpsGroupBy = append(readyFpsGroupBy, quoteIdentifier(key.Name))
+	}
+	readyFps.GroupBy(readyFpsGroupBy...)
+	readyFpsSQL, readyFpsArgs := readyFps.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	// ----- container_ready (latest 0/1 per container) -----
+	containerReady := sqlbuilder.NewSelectBuilder()
+	containerReadyCols := []string{
+		"fps.pod_uid AS pod_uid",
+		"fps.container_name AS container_name",
+	}
+	for _, key := range groupBy {
+		col := quoteIdentifier(key.Name)
+		containerReadyCols = append(containerReadyCols, fmt.Sprintf("argMax(fps.%s, samples.unix_milli) AS %s", col, col))
+	}
+	containerReadyCols = append(containerReadyCols, fmt.Sprintf("argMax(samples.%s, samples.unix_milli) AS ready_value", valueCol))
+	containerReady.Select(containerReadyCols...)
+	containerReady.From(fmt.Sprintf(
+		"%s.%s AS samples INNER JOIN ready_fps AS fps ON samples.fingerprint = fps.fingerprint",
+		telemetrymetrics.DBName, distributedSamplesTable,
+	))
+	containerReady.Where(
+		containerReady.E("samples.metric_name", containerReadyMetricName),
+		containerReady.GE("samples.unix_milli", samplesStartMs),
+		containerReady.L("samples.unix_milli", flooredEndMs),
+		"fps.pod_uid != ''",
+	)
+	containerReady.GroupBy("fps.pod_uid", "fps.container_name")
+	containerReadySQL, containerReadyArgs := containerReady.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	// ----- outer: per-group ready / not_ready counts over distinct containers -----
+	countSelectCols := make([]string, 0, len(groupBy)+2)
+	countGroupBy := make([]string, 0, len(groupBy))
+	for _, key := range groupBy {
+		col := quoteIdentifier(key.Name)
+		countSelectCols = append(countSelectCols, col)
+		countGroupBy = append(countGroupBy, col)
+	}
+	countSelectCols = append(countSelectCols,
+		"uniqExactIf((pod_uid, container_name), ready_value = 1) AS ready",
+		"uniqExactIf((pod_uid, container_name), ready_value < 1) AS not_ready",
+	)
+	countSQL := fmt.Sprintf(
+		"SELECT %s FROM container_ready GROUP BY %s",
+		strings.Join(countSelectCols, ", "),
+		strings.Join(countGroupBy, ", "),
+	)
+
+	cteFragments := []string{
+		fmt.Sprintf("ready_fps AS (%s)", readyFpsSQL),
+		fmt.Sprintf("container_ready AS (%s)", containerReadySQL),
+	}
+	finalSQL := querybuilder.CombineCTEs(cteFragments) + countSQL
+	finalArgs := querybuilder.PrependArgs([][]any{readyFpsArgs, containerReadyArgs}, nil)
+
+	rows, err := m.telemetryStore.ClickhouseDB().Query(ctx, finalSQL, finalArgs...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	result := make(map[string]containerReadyCounts)
+	for rows.Next() {
+		groupVals := make([]string, len(groupBy))
+		var ready, notReady uint64
+		scanPtrs := make([]any, 0, len(groupBy)+2)
+		for i := range groupVals {
+			scanPtrs = append(scanPtrs, &groupVals[i])
+		}
+		scanPtrs = append(scanPtrs, &ready, &notReady)
+		if err := rows.Scan(scanPtrs...); err != nil {
+			return nil, err
+		}
+		result[compositeKeyFromList(groupVals)] = containerReadyCounts{
+			Ready:    int(ready),
+			NotReady: int(notReady),
+		}
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return result, nil
+}

pkg/modules/inframonitoring/implinframonitoring/containers_constants.go

@@ -0,0 +1,204 @@
+package implinframonitoring
+
+import (
+	"github.com/SigNoz/signoz/pkg/types/inframonitoringtypes"
+	"github.com/SigNoz/signoz/pkg/types/metrictypes"
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+const containerNameAttrKey = inframonitoringtypes.ContainerNameAttrKey
+
+const (
+	containerStatusStateAttrKey  = "k8s.container.status.state"
+	containerStatusReasonAttrKey = "k8s.container.status.reason"
+)
+
+const (
+	containerStatusStateMetricName  = "k8s.container.status.state"
+	containerStatusReasonMetricName = "k8s.container.status.reason"
+	containerReadyMetricName        = "k8s.container.ready"
+	containerRestartsMetricName     = "k8s.container.restarts"
+)
+
+// containerStatusMetricNamesList are the metrics required to derive the
+// kubectl-style container display status. Gated by
+// getPerGroupContainerStatusCountsWithReqMetricChecks — if either is missing,
+// status is skipped and a warning is returned.
+var containerStatusMetricNamesList = []string{
+	containerStatusStateMetricName,
+	containerStatusReasonMetricName,
+}
+
+var containerNameGroupByKey = qbtypes.GroupByKey{
+	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+		Name:          containerNameAttrKey,
+		FieldContext:  telemetrytypes.FieldContextResource,
+		FieldDataType: telemetrytypes.FieldDataTypeString,
+	},
+}
+
+// containerRowGroupBy is the default row-identity groupBy for the containers
+// list: (k8s.pod.uid, k8s.container.name). Stable across container restarts.
+// podUIDGroupByKey is shared with the pods module (pods_constants.go).
+var containerRowGroupBy = []qbtypes.GroupByKey{podUIDGroupByKey, containerNameGroupByKey}
+
+// containersTableMetricNamesList are the kubeletstats metrics that carry the
+// container attributes; used for metadata resolution and the retention check.
+var containersTableMetricNamesList = []string{
+	"container.cpu.usage",
+	"k8s.container.cpu_request_utilization",
+	"k8s.container.cpu_limit_utilization",
+	"container.memory.working_set",
+	"k8s.container.memory_request_utilization",
+	"k8s.container.memory_limit_utilization",
+}
+
+var containerAttrKeysForMetadata = []string{
+	"k8s.pod.uid",
+	"k8s.container.name",
+	"k8s.pod.name",
+	"container.image.name",
+	"container.image.tag",
+	"k8s.namespace.name",
+	"k8s.node.name",
+	"k8s.deployment.name",
+	"k8s.statefulset.name",
+	"k8s.daemonset.name",
+	"k8s.job.name",
+	"k8s.cronjob.name",
+	"k8s.cluster.name",
+}
+
+var orderByToContainersQueryNames = map[string][]string{
+	inframonitoringtypes.ContainersOrderByCPU:           {"A"},
+	inframonitoringtypes.ContainersOrderByCPURequest:    {"B"},
+	inframonitoringtypes.ContainersOrderByCPULimit:      {"C"},
+	inframonitoringtypes.ContainersOrderByMemory:        {"D"},
+	inframonitoringtypes.ContainersOrderByMemoryRequest: {"E"},
+	inframonitoringtypes.ContainersOrderByMemoryLimit:   {"F"},
+}
+
+// newContainersTableListQuery builds the composite QB v5 request for the
+// containers list (kubeletstats usage/utilization). Status, restarts and ready
+// come from k8sclusterreceiver via dedicated queries (works for both list and
+// grouped_list modes), so no health query is included here.
+func (m *module) newContainersTableListQuery() *qbtypes.QueryRangeRequest {
+	queries := []qbtypes.QueryEnvelope{
+		// Query A: CPU usage (cores)
+		{
+			Type: qbtypes.QueryTypeBuilder,
+			Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Name:   "A",
+				Signal: telemetrytypes.SignalMetrics,
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "container.cpu.usage",
+						TimeAggregation:  metrictypes.TimeAggregationAvg,
+						SpaceAggregation: metrictypes.SpaceAggregationSum,
+						ReduceTo:         qbtypes.ReduceToAvg,
+					},
+				},
+				GroupBy:  containerRowGroupBy,
+				Disabled: false,
+			},
+		},
+		// Query B: CPU request utilization
+		{
+			Type: qbtypes.QueryTypeBuilder,
+			Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Name:   "B",
+				Signal: telemetrytypes.SignalMetrics,
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "k8s.container.cpu_request_utilization",
+						TimeAggregation:  metrictypes.TimeAggregationAvg,
+						SpaceAggregation: metrictypes.SpaceAggregationAvg,
+						ReduceTo:         qbtypes.ReduceToAvg,
+					},
+				},
+				GroupBy:  containerRowGroupBy,
+				Disabled: false,
+			},
+		},
+		// Query C: CPU limit utilization
+		{
+			Type: qbtypes.QueryTypeBuilder,
+			Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Name:   "C",
+				Signal: telemetrytypes.SignalMetrics,
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "k8s.container.cpu_limit_utilization",
+						TimeAggregation:  metrictypes.TimeAggregationAvg,
+						SpaceAggregation: metrictypes.SpaceAggregationAvg,
+						ReduceTo:         qbtypes.ReduceToAvg,
+					},
+				},
+				GroupBy:  containerRowGroupBy,
+				Disabled: false,
+			},
+		},
+		// Query D: Memory working set
+		{
+			Type: qbtypes.QueryTypeBuilder,
+			Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Name:   "D",
+				Signal: telemetrytypes.SignalMetrics,
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "container.memory.working_set",
+						TimeAggregation:  metrictypes.TimeAggregationAvg,
+						SpaceAggregation: metrictypes.SpaceAggregationSum,
+						ReduceTo:         qbtypes.ReduceToAvg,
+					},
+				},
+				GroupBy:  containerRowGroupBy,
+				Disabled: false,
+			},
+		},
+		// Query E: Memory request utilization
+		{
+			Type: qbtypes.QueryTypeBuilder,
+			Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Name:   "E",
+				Signal: telemetrytypes.SignalMetrics,
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "k8s.container.memory_request_utilization",
+						TimeAggregation:  metrictypes.TimeAggregationAvg,
+						SpaceAggregation: metrictypes.SpaceAggregationAvg,
+						ReduceTo:         qbtypes.ReduceToAvg,
+					},
+				},
+				GroupBy:  containerRowGroupBy,
+				Disabled: false,
+			},
+		},
+		// Query F: Memory limit utilization
+		{
+			Type: qbtypes.QueryTypeBuilder,
+			Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Name:   "F",
+				Signal: telemetrytypes.SignalMetrics,
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "k8s.container.memory_limit_utilization",
+						TimeAggregation:  metrictypes.TimeAggregationAvg,
+						SpaceAggregation: metrictypes.SpaceAggregationAvg,
+						ReduceTo:         qbtypes.ReduceToAvg,
+					},
+				},
+				GroupBy:  containerRowGroupBy,
+				Disabled: false,
+			},
+		},
+	}
+
+	return &qbtypes.QueryRangeRequest{
+		RequestType: qbtypes.RequestTypeScalar,
+		CompositeQuery: qbtypes.CompositeQuery{
+			Queries: queries,
+		},
+	}
+}

pkg/modules/inframonitoring/implinframonitoring/handler.go

@@ -94,6 +94,30 @@ func (h *handler) ListPods(rw http.ResponseWriter, req *http.Request) {
 	render.Success(rw, http.StatusOK, result)
 }
 
+func (h *handler) ListContainers(rw http.ResponseWriter, req *http.Request) {
+	claims, err := authtypes.ClaimsFromContext(req.Context())
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	var parsedReq inframonitoringtypes.PostableContainers
+	if err := binding.JSON.BindBody(req.Body, &parsedReq); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	result, err := h.module.ListContainers(req.Context(), orgID, &parsedReq)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, result)
+}
+
 func (h *handler) ListNodes(rw http.ResponseWriter, req *http.Request) {
 	claims, err := authtypes.ClaimsFromContext(req.Context())
 	if err != nil {

pkg/modules/inframonitoring/implinframonitoring/helpers.go

@@ -663,3 +663,26 @@ func (m *module) getMetadata(
 
 	return result, nil
 }
+
+// mergeQueryWarnings combines multiple query warnings into one; nil inputs are
+// skipped. The first non-nil warning is the primary; subsequent ones are folded
+// into its Warnings list.
+func mergeQueryWarnings(warnings ...*qbtypes.QueryWarnData) *qbtypes.QueryWarnData {
+	var merged *qbtypes.QueryWarnData
+	for _, w := range warnings {
+		if w == nil {
+			continue
+		}
+		if merged == nil {
+			// Copy so we don't mutate the caller's warning.
+			primary := *w
+			merged = &primary
+			continue
+		}
+		if w.Message != "" {
+			merged.Warnings = append(merged.Warnings, qbtypes.QueryWarnDataAdditional{Message: w.Message})
+		}
+		merged.Warnings = append(merged.Warnings, w.Warnings...)
+	}
+	return merged
+}

pkg/modules/inframonitoring/implinframonitoring/internaltypes.go

@@ -78,3 +78,61 @@ func (s checkSpec) getAllAttrs() []string {
 	}
 	return out
 }
+
+// containerStatusCounts holds per-group container counts bucketed by latest
+// kubectl-style display status in window. Mirrors inframonitoringtypes.ContainerCountsByStatus.
+type containerStatusCounts struct {
+	// State fallback.
+	Running    int
+	Waiting    int
+	Terminated int
+
+	// Container-level reasons.
+	CrashLoopBackOff           int
+	ImagePullBackOff           int
+	ErrImagePull               int
+	CreateContainerConfigError int
+	ContainerCreating          int
+	OOMKilled                  int
+	Completed                  int
+	Error                      int
+	ContainerCannotRun         int
+
+	Unknown int
+}
+
+// containerStatusCountsToResponse copies the internal per-group status counts
+// into the public response struct.
+func containerStatusCountsToResponse(c containerStatusCounts) inframonitoringtypes.ContainerCountsByStatus {
+	return inframonitoringtypes.ContainerCountsByStatus{
+		Running:                    c.Running,
+		Waiting:                    c.Waiting,
+		Terminated:                 c.Terminated,
+		CrashLoopBackOff:           c.CrashLoopBackOff,
+		ImagePullBackOff:           c.ImagePullBackOff,
+		ErrImagePull:               c.ErrImagePull,
+		CreateContainerConfigError: c.CreateContainerConfigError,
+		ContainerCreating:          c.ContainerCreating,
+		OOMKilled:                  c.OOMKilled,
+		Completed:                  c.Completed,
+		Error:                      c.Error,
+		ContainerCannotRun:         c.ContainerCannotRun,
+		Unknown:                    c.Unknown,
+	}
+}
+
+// containerReadyCounts holds per-group container counts bucketed by latest
+// readiness in window. Mirrors inframonitoringtypes.ContainerCountsByReady.
+type containerReadyCounts struct {
+	Ready    int
+	NotReady int
+}
+
+// containerReadyCountsToResponse copies the internal per-group ready counts
+// into the public response struct.
+func containerReadyCountsToResponse(c containerReadyCounts) inframonitoringtypes.ContainerCountsByReady {
+	return inframonitoringtypes.ContainerCountsByReady{
+		Ready:    c.Ready,
+		NotReady: c.NotReady,
+	}
+}

pkg/modules/inframonitoring/implinframonitoring/module.go

@@ -312,6 +312,94 @@ func (m *module) ListPods(ctx context.Context, orgID valuer.UUID, req *inframoni
 	return resp, nil
 }
 
+func (m *module) ListContainers(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableContainers) (*inframonitoringtypes.Containers, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListContainers")
+
+	if err := req.Validate(); err != nil {
+		return nil, err
+	}
+
+	resp := &inframonitoringtypes.Containers{}
+
+	if req.OrderBy == nil {
+		req.OrderBy = &qbtypes.OrderBy{
+			Key: qbtypes.OrderByKey{
+				TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+					Name: inframonitoringtypes.ContainersOrderByCPU,
+				},
+			},
+			Direction: qbtypes.OrderDirectionDesc,
+		}
+	}
+
+	if len(req.GroupBy) == 0 {
+		req.GroupBy = containerRowGroupBy
+		resp.Type = inframonitoringtypes.ResponseTypeList
+	} else {
+		resp.Type = inframonitoringtypes.ResponseTypeGroupedList
+	}
+
+	minFirstReportedUnixMilli, err := m.getEarliestMetricTime(ctx, containersTableMetricNamesList)
+	if err != nil {
+		return nil, err
+	}
+	if req.End < int64(minFirstReportedUnixMilli) {
+		resp.EndTimeBeforeRetention = true
+		resp.Records = []inframonitoringtypes.ContainerRecord{}
+		resp.Total = 0
+		return resp, nil
+	}
+
+	metadataMap, err := m.getContainersTableMetadata(ctx, req)
+	if err != nil {
+		return nil, err
+	}
+
+	resp.Total = len(metadataMap)
+
+	pageGroups, err := m.getTopContainerGroups(ctx, orgID, req, metadataMap)
+	if err != nil {
+		return nil, err
+	}
+
+	if len(pageGroups) == 0 {
+		resp.Records = []inframonitoringtypes.ContainerRecord{}
+		return resp, nil
+	}
+
+	filterExpr := ""
+	if req.Filter != nil {
+		filterExpr = req.Filter.Expression
+	}
+
+	fullQueryReq := buildFullQueryRequest(req.Start, req.End, filterExpr, req.GroupBy, pageGroups, m.newContainersTableListQuery())
+	queryResp, err := m.querier.QueryRange(ctx, orgID, fullQueryReq)
+	if err != nil {
+		return nil, err
+	}
+
+	statusCounts, statusWarning, err := m.getPerGroupContainerStatusCountsWithReqMetricChecks(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
+	if err != nil {
+		return nil, err
+	}
+
+	restartCounts, err := m.getPerGroupContainerRestartCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
+	if err != nil {
+		return nil, err
+	}
+
+	readyCounts, err := m.getPerGroupContainerReadyCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
+	if err != nil {
+		return nil, err
+	}
+
+	isContainerRowInGroupBy := isKeyInGroupByAttrs(req.GroupBy, podUIDAttrKey) && isKeyInGroupByAttrs(req.GroupBy, containerNameAttrKey)
+	resp.Records = buildContainerRecords(isContainerRowInGroupBy, queryResp, pageGroups, req.GroupBy, metadataMap, statusCounts, restartCounts, readyCounts)
+	resp.Warning = mergeQueryWarnings(queryResp.Warning, statusWarning)
+
+	return resp, nil
+}
+
 func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNodes) (*inframonitoringtypes.Nodes, error) {
 	ctx = m.withInfraMonitoringContext(ctx, "ListNodes")
 

pkg/modules/inframonitoring/inframonitoring.go

@@ -12,6 +12,7 @@ import (
 type Handler interface {
 	ListHosts(http.ResponseWriter, *http.Request)
 	ListPods(http.ResponseWriter, *http.Request)
+	ListContainers(http.ResponseWriter, *http.Request)
 	ListNodes(http.ResponseWriter, *http.Request)
 	ListNamespaces(http.ResponseWriter, *http.Request)
 	ListClusters(http.ResponseWriter, *http.Request)
@@ -27,6 +28,7 @@ type Module interface {
 	statsreporter.StatsCollector
 	ListHosts(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableHosts) (*inframonitoringtypes.Hosts, error)
 	ListPods(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostablePods) (*inframonitoringtypes.Pods, error)
+	ListContainers(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableContainers) (*inframonitoringtypes.Containers, error)
 	ListNodes(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNodes) (*inframonitoringtypes.Nodes, error)
 	ListNamespaces(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNamespaces) (*inframonitoringtypes.Namespaces, error)
 	ListClusters(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableClusters) (*inframonitoringtypes.Clusters, error)

pkg/types/inframonitoringtypes/containers.go

@@ -0,0 +1,148 @@
+package inframonitoringtypes
+
+import (
+	"encoding/json"
+	"slices"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+)
+
+type Containers struct {
+	Type                   ResponseType           `json:"type" required:"true"`
+	Records                []ContainerRecord      `json:"records" required:"true" nullable:"false"`
+	Total                  int                    `json:"total" required:"true"`
+	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
+	Warning                *qbtypes.QueryWarnData `json:"warning,omitempty"`
+}
+
+// ContainerCountsByStatus buckets container counts by their latest kubectl-style
+// display status in the time window (see ContainerStatus). One field per
+// derivable status. Populated in both list and grouped_list modes.
+type ContainerCountsByStatus struct {
+	// State fallback.
+	Running    int `json:"running" required:"true"`
+	Waiting    int `json:"waiting" required:"true"`
+	Terminated int `json:"terminated" required:"true"`
+
+	// Container-level reasons (k8s.container.status.reason allowlist).
+	CrashLoopBackOff           int `json:"crashLoopBackOff" required:"true"`
+	ImagePullBackOff           int `json:"imagePullBackOff" required:"true"`
+	ErrImagePull               int `json:"errImagePull" required:"true"`
+	CreateContainerConfigError int `json:"createContainerConfigError" required:"true"`
+	ContainerCreating          int `json:"containerCreating" required:"true"`
+	OOMKilled                  int `json:"oomKilled" required:"true"`
+	Completed                  int `json:"completed" required:"true"`
+	Error                      int `json:"error" required:"true"`
+	ContainerCannotRun         int `json:"containerCannotRun" required:"true"`
+
+	Unknown int `json:"unknown" required:"true"`
+}
+
+// ContainerCountsByReady buckets container counts by their latest readiness
+// (k8s.container.ready) in the time window. Populated in both modes.
+type ContainerCountsByReady struct {
+	Ready    int `json:"ready" required:"true"`
+	NotReady int `json:"notReady" required:"true"`
+}
+
+type ContainerRecord struct {
+	// Row identity: (k8s.pod.uid, k8s.container.name). Stable across container
+	// restarts (unlike container.id), globally unique, present on both receivers.
+	PodUID        string `json:"podUID" required:"true"`
+	ContainerName string `json:"containerName" required:"true"`
+
+	// Health (k8sclusterreceiver). Single value in list mode; counts in grouped_list mode.
+	Status                  ContainerStatus         `json:"status" required:"true"`
+	ContainerCountsByStatus ContainerCountsByStatus `json:"containerCountsByStatus" required:"true"`
+	Ready                   ContainerReady          `json:"ready" required:"true"`
+	ContainerCountsByReady  ContainerCountsByReady  `json:"containerCountsByReady" required:"true"`
+	// Absolute restart count: own count (list mode) or group sum (grouped mode). -1 when no data.
+	Restarts int64 `json:"restarts" required:"true"`
+
+	// Usage / utilization (kubeletstats). -1 when no data.
+	CPU                      float64 `json:"cpu" required:"true"`                      // container.cpu.usage (cores)
+	CPURequestUtilization    float64 `json:"cpuRequestUtilization" required:"true"`    // k8s.container.cpu_request_utilization
+	CPULimitUtilization      float64 `json:"cpuLimitUtilization" required:"true"`      // k8s.container.cpu_limit_utilization
+	Memory                   float64 `json:"memory" required:"true"`                   // container.memory.working_set
+	MemoryRequestUtilization float64 `json:"memoryRequestUtilization" required:"true"` // k8s.container.memory_request_utilization
+	MemoryLimitUtilization   float64 `json:"memoryLimitUtilization" required:"true"`   // k8s.container.memory_limit_utilization
+
+	Meta map[string]string `json:"meta" required:"true"`
+}
+
+// PostableContainers is the request body for the v2 containers list API.
+type PostableContainers struct {
+	Start   int64                `json:"start" required:"true"`
+	End     int64                `json:"end" required:"true"`
+	Filter  *qbtypes.Filter      `json:"filter"`
+	GroupBy []qbtypes.GroupByKey `json:"groupBy"`
+	OrderBy *qbtypes.OrderBy     `json:"orderBy"`
+	Offset  int                  `json:"offset"`
+	Limit   int                  `json:"limit" required:"true"`
+}
+
+// Validate ensures PostableContainers contains acceptable values.
+func (req *PostableContainers) Validate() error {
+	if req == nil {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "request is nil")
+	}
+
+	if req.Start <= 0 {
+		return errors.NewInvalidInputf(
+			errors.CodeInvalidInput,
+			"invalid start time %d: start must be greater than 0",
+			req.Start,
+		)
+	}
+
+	if req.End <= 0 {
+		return errors.NewInvalidInputf(
+			errors.CodeInvalidInput,
+			"invalid end time %d: end must be greater than 0",
+			req.End,
+		)
+	}
+
+	if req.Start >= req.End {
+		return errors.NewInvalidInputf(
+			errors.CodeInvalidInput,
+			"invalid time range: start (%d) must be less than end (%d)",
+			req.Start,
+			req.End,
+		)
+	}
+
+	if req.Limit < 1 || req.Limit > 5000 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "limit must be between 1 and 5000")
+	}
+
+	if req.Offset < 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "offset cannot be negative")
+	}
+
+	if req.OrderBy != nil {
+		if !slices.Contains(ContainersValidOrderByKeys, req.OrderBy.Key.Name) {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid order by key: %s", req.OrderBy.Key.Name)
+		}
+		if req.OrderBy.Direction != qbtypes.OrderDirectionAsc && req.OrderBy.Direction != qbtypes.OrderDirectionDesc {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid order by direction: %s", req.OrderBy.Direction)
+		}
+		if req.OrderBy.Key.Name == ContainerNameAttrKey && len(req.GroupBy) > 0 {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "order by '%s' is only allowed when groupBy is empty", ContainerNameAttrKey)
+		}
+	}
+
+	return nil
+}
+
+// UnmarshalJSON validates input immediately after decoding.
+func (req *PostableContainers) UnmarshalJSON(data []byte) error {
+	type raw PostableContainers
+	var decoded raw
+	if err := json.Unmarshal(data, &decoded); err != nil {
+		return err
+	}
+	*req = PostableContainers(decoded)
+	return req.Validate()
+}

pkg/types/inframonitoringtypes/containers_constants.go

@@ -0,0 +1,92 @@
+package inframonitoringtypes
+
+import "github.com/SigNoz/signoz/pkg/valuer"
+
+// ContainerStatus is the kubectl-style display status of a container, derived
+// from k8s.container.status.state (base) + k8s.container.status.reason (overlay).
+type ContainerStatus struct {
+	valuer.String
+}
+
+var (
+	// State fallback (from k8s.container.status.state).
+	ContainerStatusRunning    = ContainerStatus{valuer.NewString("Running")}
+	ContainerStatusWaiting    = ContainerStatus{valuer.NewString("Waiting")}
+	ContainerStatusTerminated = ContainerStatus{valuer.NewString("Terminated")}
+
+	// Reasons (from k8s.container.status.reason allowlist).
+	ContainerStatusCrashLoopBackOff           = ContainerStatus{valuer.NewString("CrashLoopBackOff")}
+	ContainerStatusImagePullBackOff           = ContainerStatus{valuer.NewString("ImagePullBackOff")}
+	ContainerStatusErrImagePull               = ContainerStatus{valuer.NewString("ErrImagePull")}
+	ContainerStatusCreateContainerConfigError = ContainerStatus{valuer.NewString("CreateContainerConfigError")}
+	ContainerStatusContainerCreating          = ContainerStatus{valuer.NewString("ContainerCreating")}
+	ContainerStatusOOMKilled                  = ContainerStatus{valuer.NewString("OOMKilled")}
+	ContainerStatusCompleted                  = ContainerStatus{valuer.NewString("Completed")}
+	ContainerStatusError                      = ContainerStatus{valuer.NewString("Error")}
+	ContainerStatusContainerCannotRun         = ContainerStatus{valuer.NewString("ContainerCannotRun")}
+
+	ContainerStatusUnknown = ContainerStatus{valuer.NewString("Unknown")}
+
+	// ContainerStatusNoData is the record default: no status data / metrics disabled.
+	ContainerStatusNoData = ContainerStatus{valuer.NewString("no_data")}
+)
+
+func (ContainerStatus) Enum() []any {
+	return []any{
+		ContainerStatusRunning,
+		ContainerStatusWaiting,
+		ContainerStatusTerminated,
+		ContainerStatusCrashLoopBackOff,
+		ContainerStatusImagePullBackOff,
+		ContainerStatusErrImagePull,
+		ContainerStatusCreateContainerConfigError,
+		ContainerStatusContainerCreating,
+		ContainerStatusOOMKilled,
+		ContainerStatusCompleted,
+		ContainerStatusError,
+		ContainerStatusContainerCannotRun,
+		ContainerStatusUnknown,
+		ContainerStatusNoData,
+	}
+}
+
+// ContainerReady is the latest readiness of a container (k8s.container.ready).
+type ContainerReady struct {
+	valuer.String
+}
+
+var (
+	ContainerReadyReady    = ContainerReady{valuer.NewString("ready")}
+	ContainerReadyNotReady = ContainerReady{valuer.NewString("not_ready")}
+	// ContainerReadyNoData is the record default: no readiness data.
+	ContainerReadyNoData = ContainerReady{valuer.NewString("no_data")}
+)
+
+func (ContainerReady) Enum() []any {
+	return []any{
+		ContainerReadyReady,
+		ContainerReadyNotReady,
+		ContainerReadyNoData,
+	}
+}
+
+const ContainerNameAttrKey = "k8s.container.name"
+
+const (
+	ContainersOrderByCPU           = "cpu"
+	ContainersOrderByCPURequest    = "cpu_request"
+	ContainersOrderByCPULimit      = "cpu_limit"
+	ContainersOrderByMemory        = "memory"
+	ContainersOrderByMemoryRequest = "memory_request"
+	ContainersOrderByMemoryLimit   = "memory_limit"
+)
+
+var ContainersValidOrderByKeys = []string{
+	ContainersOrderByCPU,
+	ContainersOrderByCPURequest,
+	ContainersOrderByCPULimit,
+	ContainersOrderByMemory,
+	ContainersOrderByMemoryRequest,
+	ContainersOrderByMemoryLimit,
+	ContainerNameAttrKey,
+}