test(llm-attribute-mapping): unit and integration tests

docs/api/openapi.yml

@@ -2437,6 +2437,17 @@ components:
         url:
           type: string
       type: object
+    DashboardTextVariableSpec:
+      properties:
+        constant:
+          type: boolean
+        display:
+          $ref: '#/components/schemas/VariableDisplay'
+        name:
+          type: string
+        value:
+          type: string
+      type: object
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2801,15 +2812,9 @@ components:
             type: string
           nullable: true
           type: object
-        mode:
-          $ref: '#/components/schemas/DashboardtypesLegendMode'
         position:
           $ref: '#/components/schemas/DashboardtypesLegendPosition'
       type: object
-    DashboardtypesLegendMode:
-      enum:
-      - list
-      type: string
     DashboardtypesLegendPosition:
       enum:
       - bottom
@@ -2860,25 +2865,15 @@ components:
         display:
           $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
-          minLength: 1
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesVariablePlugin'
         sort:
-          $ref: '#/components/schemas/DashboardtypesListVariableSpecSort'
+          nullable: true
+          type: string
       required:
-      - name
+      - display
       type: object
-    DashboardtypesListVariableSpecSort:
-      enum:
-      - none
-      - alphabetical-asc
-      - alphabetical-desc
-      - numerical-asc
-      - numerical-desc
-      - alphabetical-ci-asc
-      - alphabetical-ci-desc
-      type: string
     DashboardtypesListableDashboardForUserV2:
       properties:
         dashboards:
@@ -3388,13 +3383,8 @@ components:
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:
-          description: The maximum gap size to connect when fillOnlyBelow is true.
-            Gaps larger than this duration are left disconnected.
           type: string
         fillOnlyBelow:
-          description: Controls whether lines connect across null values. When false
-            (default), all gaps are connected. When true, only gaps smaller than fillLessThan
-            are connected.
           type: boolean
       type: object
     DashboardtypesStorableDashboardData:
@@ -3442,20 +3432,6 @@ components:
       - color
       - columnName
       type: object
-    DashboardtypesTextVariableSpec:
-      properties:
-        constant:
-          type: boolean
-        display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
-        name:
-          minLength: 1
-          type: string
-        value:
-          type: string
-      required:
-      - name
-      type: object
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -3475,6 +3451,7 @@ components:
       required:
       - value
       - color
+      - label
       type: object
     DashboardtypesTimePreference:
       enum:
@@ -3559,11 +3536,23 @@ components:
       discriminator:
         mapping:
           ListVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
+          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+      type: object
+    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
+      properties:
+        kind:
+          enum:
+          - TextVariable
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardTextVariableSpec'
+      required:
+      - kind
+      - spec
       type: object
     DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec:
       properties:
@@ -3577,18 +3566,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec:
-      properties:
-        kind:
-          enum:
-          - TextVariable
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesTextVariableSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesVariablePlugin:
       discriminator:
         mapping:
@@ -7674,6 +7651,15 @@ components:
       type: object
     VariableDefaultValue:
       type: object
+    VariableDisplay:
+      properties:
+        description:
+          type: string
+        hidden:
+          type: boolean
+        name:
+          type: string
+      type: object
     ZeustypesGettableHost:
       properties:
         hosts:

frontend/src/AppRoutes/pageComponents.ts

@@ -330,3 +330,10 @@ export const AIAssistantPage = Loadable(
 			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
 		),
 );
+
+export const LLMObservabilityAttributeMappingPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "LLM Observability Attribute Mapping Page" */ 'pages/LLMObservabilityAttributeMapping'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -22,6 +22,7 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
+	LLMObservabilityAttributeMappingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -505,6 +506,13 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		exact: true,
+		component: LLMObservabilityAttributeMappingPage,
+		key: 'LLM_OBSERVABILITY_ATTRIBUTE_MAPPING',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3154,6 +3154,37 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
+export interface VariableDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	hidden?: boolean;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
+export interface DashboardTextVariableSpecDTO {
+	/**
+	 * @type boolean
+	 */
+	constant?: boolean;
+	display?: VariableDisplayDTO;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	value?: string;
+}
+
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -3185,9 +3216,6 @@ export interface DashboardtypesPanelFormattingDTO {
 	unit?: string;
 }
 
-export enum DashboardtypesLegendModeDTO {
-	list = 'list',
-}
 export enum DashboardtypesLegendPositionDTO {
 	bottom = 'bottom',
 	right = 'right',
@@ -3207,7 +3235,6 @@ export interface DashboardtypesLegendDTO {
 	 * @type object,null
 	 */
 	customColors?: DashboardtypesLegendDTOCustomColors;
-	mode?: DashboardtypesLegendModeDTO;
 	position?: DashboardtypesLegendPositionDTO;
 }
 
@@ -3219,7 +3246,7 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	/**
 	 * @type string
 	 */
-	label?: string;
+	label: string;
 	/**
 	 * @type string
 	 */
@@ -3884,12 +3911,10 @@ export enum DashboardtypesLineStyleDTO {
 export interface DashboardtypesSpanGapsDTO {
 	/**
 	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
 	 */
 	fillLessThan?: string;
 	/**
 	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
 	 */
 	fillOnlyBelow?: boolean;
 }
@@ -4521,15 +4546,6 @@ export type DashboardtypesVariablePluginDTO =
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTO
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTO;
 
-export enum DashboardtypesListVariableSpecSortDTO {
-	none = 'none',
-	'alphabetical-asc' = 'alphabetical-asc',
-	'alphabetical-desc' = 'alphabetical-desc',
-	'numerical-asc' = 'numerical-asc',
-	'numerical-desc' = 'numerical-desc',
-	'alphabetical-ci-asc' = 'alphabetical-ci-asc',
-	'alphabetical-ci-desc' = 'alphabetical-ci-desc',
-}
 export interface DashboardtypesListVariableSpecDTO {
 	/**
 	 * @type boolean
@@ -4548,14 +4564,16 @@ export interface DashboardtypesListVariableSpecDTO {
 	 */
 	customAllValue?: string;
 	defaultValue?: VariableDefaultValueDTO;
-	display?: DashboardtypesDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
-	 * @minLength 1
 	 */
-	name: string;
+	name?: string;
 	plugin?: DashboardtypesVariablePluginDTO;
-	sort?: DashboardtypesListVariableSpecSortDTO;
+	/**
+	 * @type string,null
+	 */
+	sort?: string | null;
 }
 
 export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO {
@@ -4567,38 +4585,21 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesTextVariableSpecDTO {
-	/**
-	 * @type boolean
-	 */
-	constant?: boolean;
-	display?: DashboardtypesDisplayDTO;
-	/**
-	 * @type string
-	 * @minLength 1
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	value?: string;
-}
-
-export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO {
+export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind;
-	spec: DashboardtypesTextVariableSpecDTO;
+	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
+	spec: DashboardTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**

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

@@ -1,29 +1,67 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
 import { Input } from '@signozhq/ui/input';
-import { Skeleton } from 'antd';
+import { Button, Skeleton } from 'antd';
+import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
+import { OPERATORS } from 'constants/antlrQueryConstants';
+import {
+	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { cloneDeep, isArray, isFunction } from 'lodash-es';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
 
-import CheckboxFilterHeader from './CheckboxFilterHeader';
-import CheckboxValueRow from './CheckboxValueRow';
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
-import useActiveQueryIndex from './useActiveQueryIndex';
-import useCheckboxDisclosure from './useCheckboxDisclosure';
-import useCheckboxFilterActions from './useCheckboxFilterActions';
-import useCheckboxFilterState from './useCheckboxFilterState';
-import useCheckboxFilterValues from './useCheckboxFilterValues';
+import { isKeyMatch } from './utils';
 
 import './Checkbox.styles.scss';
 
+const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
+const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
+
 const SOURCES_WITH_EMPTY_STATE_ENABLED = [QuickFiltersSource.LOGS_EXPLORER];
 
+// Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
+const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
+
+/**
+ * Returns the correct NOT_IN operator value based on source.
+ * InfraMonitoring backend expects 'nin', others expect 'not in'.
+ */
+function getNotInOperator(source: QuickFiltersSource): string {
+	if (SOURCES_WITH_SHORT_OPERATORS.includes(source)) {
+		return 'nin';
+	}
+	return getOperatorValue('NOT_IN');
+}
+
+function setDefaultValues(
+	values: string[],
+	trueOrFalse: boolean,
+): Record<string, boolean> {
+	const defaultState: Record<string, boolean> = {};
+	values.forEach((val) => {
+		defaultState[val] = trueOrFalse;
+	});
+	return defaultState;
+}
 interface ICheckboxProps {
 	filter: IQuickFiltersConfig;
 	source: QuickFiltersSource;
@@ -34,39 +72,194 @@ interface ICheckboxProps {
 export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const { source, filter, onFilterChange } = props;
 	const [searchText, setSearchText] = useState<string>('');
-
-	const activeQueryIndex = useActiveQueryIndex(source);
+	// null = no user action, true = user opened, false = user closed
+	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
+	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(10);
 
 	const {
-		isOpen,
+		lastUsedQuery,
+		currentQuery,
+		redirectWithQueryBuilderData,
+		panelType,
+	} = useQueryBuilder();
+
+	// Determine if we're in ListView mode
+	const isListView = panelType === PANEL_TYPES.LIST;
+	// In ListView mode, use index 0 for most sources; for TRACES_EXPLORER, use lastUsedQuery
+	// Otherwise use lastUsedQuery for non-ListView modes
+	const activeQueryIndex = useMemo(() => {
+		if (isListView) {
+			return source === QuickFiltersSource.TRACES_EXPLORER
+				? lastUsedQuery || 0
+				: 0;
+		}
+		return lastUsedQuery || 0;
+	}, [isListView, source, lastUsedQuery]);
+
+	// Check if this filter has active filters in the query
+	const isSomeFilterPresentForCurrentAttribute = useMemo(
+		() =>
+			currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items?.some(
+				(item) => isKeyMatch(item.key?.key, filter.attributeKey.key),
+			),
+		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
+	);
+
+	// Derive isOpen from filter state + user action
+	const isOpen = useMemo(() => {
+		// If user explicitly toggled, respect that
+		if (userToggleState !== null) {
+			return userToggleState;
+		}
+
+		// Auto-open if this filter has active filters in the query
+		if (isSomeFilterPresentForCurrentAttribute) {
+			return true;
+		}
+
+		// Otherwise use default behavior (first 2 filters open)
+		return filter.defaultOpen;
+	}, [
+		userToggleState,
 		isSomeFilterPresentForCurrentAttribute,
-		visibleItemsCount,
-		onToggleOpen,
-		onShowMore,
-	} = useCheckboxDisclosure({ filter, activeQueryIndex });
+		filter.defaultOpen,
+	]);
 
-	const { attributeValues, isLoading } = useCheckboxFilterValues({
-		filter,
-		source,
-		searchText,
-		isOpen,
-	});
+	const { data, isLoading } = useGetAggregateValues(
+		{
+			aggregateOperator: filter.aggregateOperator || 'noop',
+			dataSource: filter.dataSource || DataSource.LOGS,
+			aggregateAttribute: filter.aggregateAttribute || '',
+			attributeKey: filter.attributeKey.key,
+			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
+			tagType: filter.attributeKey.type || '',
+			searchText: searchText ?? '',
+		},
+		{
+			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
+			keepPreviousData: true,
+		},
+	);
 
-	const { currentFilterState, isFilterDisabled, isMultipleValuesTrueForTheKey } =
-		useCheckboxFilterState({ filter, attributeValues, activeQueryIndex });
+	const { data: keyValueSuggestions, isLoading: isLoadingKeyValueSuggestions } =
+		useGetQueryKeyValueSuggestions({
+			key: filter.attributeKey.key,
+			signal: filter.dataSource || DataSource.LOGS,
+			signalSource: 'meter',
+			options: {
+				enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
+				keepPreviousData: true,
+			},
+		});
 
-	const { onChange, onClear } = useCheckboxFilterActions({
-		filter,
-		source,
-		attributeValues,
-		activeQueryIndex,
-		onFilterChange,
-	});
+	const attributeValues: string[] = useMemo(() => {
+		const dataType = filter.attributeKey.dataType || DataTypes.String;
+
+		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
+			// Process the response data
+			const responseData = keyValueSuggestions?.data as any;
+			const values = responseData.data?.values || {};
+			const stringValues = values.stringValues || [];
+			const numberValues = values.numberValues || [];
+
+			// Generate options from string values - explicitly handle empty strings
+			const stringOptions = stringValues
+				// Strict filtering for empty string - we'll handle it as a special case if needed
+				.filter(
+					(value: string | null | undefined): value is string =>
+						value !== null && value !== undefined && value !== '',
+				);
+
+			// Generate options from number values
+			const numberOptions = numberValues
+				.filter(
+					(value: number | null | undefined): value is number =>
+						value !== null && value !== undefined,
+				)
+				.map((value: number) => value.toString());
+
+			// Combine all options and make sure we don't have duplicate labels
+			return [...stringOptions, ...numberOptions];
+		}
+
+		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
+		return (data?.payload?.[key] || []).filter(
+			(val) => val !== undefined && val !== null,
+		);
+	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
 
 	const setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
 	}, DEBOUNCE_DELAY);
 
+	// derive the state of each filter key here in the renderer itself and keep it in sync with current query
+	// also we need to keep a note of last focussed query.
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const currentFilterState = useMemo(() => {
+		let filterState: Record<string, boolean> = setDefaultValues(
+			attributeValues,
+			false,
+		);
+		const filterSync = currentQuery?.builder.queryData?.[
+			activeQueryIndex
+		]?.filters?.items.find((item) =>
+			isKeyMatch(item.key?.key, filter.attributeKey.key),
+		);
+
+		if (filterSync) {
+			if (SELECTED_OPERATORS.includes(filterSync.op)) {
+				if (isArray(filterSync.value)) {
+					filterSync.value.forEach((val) => {
+						filterState[String(val)] = true;
+					});
+				} else if (typeof filterSync.value === 'string') {
+					filterState[filterSync.value] = true;
+				} else if (typeof filterSync.value === 'boolean') {
+					filterState[String(filterSync.value)] = true;
+				} else if (typeof filterSync.value === 'number') {
+					filterState[String(filterSync.value)] = true;
+				}
+			} else if (NON_SELECTED_OPERATORS.includes(filterSync.op)) {
+				filterState = setDefaultValues(attributeValues, true);
+				if (isArray(filterSync.value)) {
+					filterSync.value.forEach((val) => {
+						filterState[String(val)] = false;
+					});
+				} else if (typeof filterSync.value === 'string') {
+					filterState[filterSync.value] = false;
+				} else if (typeof filterSync.value === 'boolean') {
+					filterState[String(filterSync.value)] = false;
+				} else if (typeof filterSync.value === 'number') {
+					filterState[String(filterSync.value)] = false;
+				}
+			}
+		} else {
+			filterState = setDefaultValues(attributeValues, true);
+		}
+		return filterState;
+	}, [
+		attributeValues,
+		currentQuery?.builder.queryData,
+		filter.attributeKey,
+		activeQueryIndex,
+	]);
+
+	// disable the filter when there are multiple entries of the same attribute key present in the filter bar
+	const isFilterDisabled = useMemo(
+		() =>
+			(currentQuery?.builder?.queryData?.[
+				activeQueryIndex
+			]?.filters?.items?.filter((item) =>
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
+			)?.length || 0) > 1,
+
+		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
+	);
+
+	// variable to check if the current filter has multiple values to its name in the key op value section
+	const isMultipleValuesTrueForTheKey =
+		Object.values(currentFilterState).filter((val) => val).length > 1;
+
 	// Sort checked items to the top, then unchecked items
 	const currentAttributeKeys = useMemo(() => {
 		const checkedValues = attributeValues.filter(
@@ -84,6 +277,293 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		[currentAttributeKeys, currentFilterState],
 	);
 
+	const handleClearFilterAttribute = (): void => {
+		const preparedQuery: Query = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: currentQuery.builder.queryData.map((item, idx) => ({
+					...item,
+					filter: {
+						expression: removeKeysFromExpression(item.filter?.expression ?? '', [
+							filter.attributeKey.key,
+						]),
+					},
+					filters: {
+						...item.filters,
+						items:
+							idx === activeQueryIndex
+								? item.filters?.items?.filter(
+										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
+									) || []
+								: [...(item.filters?.items || [])],
+						op: item.filters?.op || 'AND',
+					},
+				})),
+			},
+		};
+
+		if (onFilterChange && isFunction(onFilterChange)) {
+			onFilterChange(preparedQuery);
+		} else {
+			redirectWithQueryBuilderData(preparedQuery);
+		}
+	};
+
+	const onChange = (
+		value: string,
+		checked: boolean,
+		isOnlyOrAllClicked: boolean,
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+	): void => {
+		const query = cloneDeep(currentQuery.builder.queryData?.[activeQueryIndex]);
+
+		// if only or all are clicked we do not need to worry about anything just override whatever we have
+		// by either adding a new IN operator value clause in case of ONLY or remove everything we have for ALL.
+		if (isOnlyOrAllClicked && query?.filters?.items) {
+			const isOnlyOrAll = isSomeFilterPresentForCurrentAttribute
+				? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+					? 'All'
+					: 'Only'
+				: 'Only';
+			query.filters.items = query.filters.items.filter(
+				(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
+			);
+
+			if (query.filter?.expression) {
+				query.filter.expression = removeKeysFromExpression(
+					query.filter.expression,
+					[filter.attributeKey.key],
+				);
+			}
+
+			if (isOnlyOrAll === 'Only') {
+				const newFilterItem: TagFilterItem = {
+					id: uuid(),
+					op: getOperatorValue(OPERATORS.IN),
+					key: filter.attributeKey,
+					value,
+				};
+				query.filters.items = [...query.filters.items, newFilterItem];
+			}
+		} else if (query?.filters?.items) {
+			if (
+				query.filters?.items?.some((item) =>
+					isKeyMatch(item.key?.key, filter.attributeKey.key),
+				)
+			) {
+				// if there is already a running filter for the current attribute key then
+				// we split the cases by which particular operator is present right now!
+				const currentFilter = query.filters?.items?.find((q) =>
+					isKeyMatch(q.key?.key, filter.attributeKey.key),
+				);
+				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) {
+										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':
+							// 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;
+										}
+										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) {
+											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: 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 {
+				// case  - when there is no filter for the current key that means all are selected right now.
+				const newFilterItem: TagFilterItem = {
+					id: uuid(),
+					op: getNotInOperator(source),
+					key: filter.attributeKey,
+					value,
+				};
+				query.filters.items = [...query.filters.items, newFilterItem];
+			}
+		}
+		const finalQuery = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					...currentQuery.builder.queryData.map((q, idx) => {
+						if (idx === activeQueryIndex) {
+							return query;
+						}
+						return q;
+					}),
+				],
+			},
+		};
+
+		if (onFilterChange && isFunction(onFilterChange)) {
+			onFilterChange(finalQuery);
+		} else {
+			redirectWithQueryBuilderData(finalQuery);
+		}
+	};
+
 	const isEmptyStateWithDocsEnabled =
 		SOURCES_WITH_EMPTY_STATE_ENABLED.includes(source) &&
 		!searchText &&
@@ -91,19 +571,48 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 
 	return (
 		<div className="checkbox-filter">
-			<CheckboxFilterHeader
-				title={filter.title}
-				isOpen={isOpen}
-				showClearAll={!!attributeValues.length}
-				onToggleOpen={onToggleOpen}
-				onClear={onClear}
-			/>
-			{isOpen && isLoading && !attributeValues.length && (
-				<section className="loading">
-					<Skeleton paragraph={{ rows: 4 }} />
+			<section
+				className="filter-header-checkbox"
+				onClick={(): void => {
+					if (isOpen) {
+						setUserToggleState(false);
+						setVisibleItemsCount(10);
+					} else {
+						setUserToggleState(true);
+					}
+				}}
+			>
+				<section className="left-action">
+					{isOpen ? (
+						<ChevronDown size={13} cursor="pointer" />
+					) : (
+						<ChevronRight size={13} cursor="pointer" />
+					)}
+					<Typography.Text className="title">{filter.title}</Typography.Text>
 				</section>
-			)}
-			{isOpen && !isLoading && (
+				<section className="right-action">
+					{isOpen && !!attributeValues.length && (
+						<Typography.Text
+							className="clear-all"
+							onClick={(e): void => {
+								e.stopPropagation();
+								e.preventDefault();
+								handleClearFilterAttribute();
+							}}
+						>
+							Clear All
+						</Typography.Text>
+					)}
+				</section>
+			</section>
+			{isOpen &&
+				(isLoading || isLoadingKeyValueSuggestions) &&
+				!attributeValues.length && (
+					<section className="loading">
+						<Skeleton paragraph={{ rows: 4 }} />
+					</section>
+				)}
+			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
 						<section className="search">
@@ -125,24 +634,48 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											data-testid="filter-separator"
 										/>
 									)}
-									<CheckboxValueRow
-										value={value}
-										checked={currentFilterState[value]}
-										disabled={isFilterDisabled}
-										title={filter.title}
-										onlyButtonLabel={
-											isSomeFilterPresentForCurrentAttribute
-												? currentFilterState[value] && !isMultipleValuesTrueForTheKey
-													? 'All'
-													: 'Only'
-												: 'Only'
-										}
-										customRendererForValue={filter.customRendererForValue}
-										onCheckboxChange={(checked): void => onChange(value, checked, false)}
-										onOnlyOrAllClick={(): void =>
-											onChange(value, currentFilterState[value], true)
-										}
-									/>
+									<div className="value">
+										<Checkbox
+											onChange={(checked): void =>
+												onChange(value, checked === true, false)
+											}
+											value={currentFilterState[value]}
+											disabled={isFilterDisabled}
+											className="check-box"
+										/>
+
+										<div
+											className={cx(
+												'checkbox-value-section',
+												isFilterDisabled ? 'filter-disabled' : '',
+											)}
+											onClick={(): void => {
+												if (isFilterDisabled) {
+													return;
+												}
+												onChange(value, currentFilterState[value], true);
+											}}
+										>
+											<div className={`${filter.title} label-${value}`} />
+											{filter.customRendererForValue ? (
+												filter.customRendererForValue(value)
+											) : (
+												<Typography.Text className="value-string" truncate={1}>
+													{String(value)}
+												</Typography.Text>
+											)}
+											<Button type="text" className="only-btn">
+												{isSomeFilterPresentForCurrentAttribute
+													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+														? 'All'
+														: 'Only'
+													: 'Only'}
+											</Button>
+											<Button type="text" className="toggle-btn">
+												Toggle
+											</Button>
+										</div>
+									</div>
 								</Fragment>
 							))}
 						</section>
@@ -155,7 +688,10 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 					{visibleItemsCount < attributeValues?.length && (
 						<section className="show-more">
-							<Typography.Text className="show-more-text" onClick={onShowMore}>
+							<Typography.Text
+								className="show-more-text"
+								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
+							>
 								Show More...
 							</Typography.Text>
 						</section>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxFilterHeader.tsx

@@ -1,47 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-
-interface CheckboxFilterHeaderProps {
-	title: string;
-	isOpen: boolean;
-	showClearAll: boolean;
-	onToggleOpen: () => void;
-	onClear: () => void;
-}
-
-function CheckboxFilterHeader({
-	title,
-	isOpen,
-	showClearAll,
-	onToggleOpen,
-	onClear,
-}: CheckboxFilterHeaderProps): JSX.Element {
-	return (
-		<section className="filter-header-checkbox" onClick={onToggleOpen}>
-			<section className="left-action">
-				{isOpen ? (
-					<ChevronDown size={13} cursor="pointer" />
-				) : (
-					<ChevronRight size={13} cursor="pointer" />
-				)}
-				<Typography.Text className="title">{title}</Typography.Text>
-			</section>
-			<section className="right-action">
-				{isOpen && showClearAll && (
-					<Typography.Text
-						className="clear-all"
-						onClick={(e): void => {
-							e.stopPropagation();
-							e.preventDefault();
-							onClear();
-						}}
-					>
-						Clear All
-					</Typography.Text>
-				)}
-			</section>
-		</section>
-	);
-}
-
-export default CheckboxFilterHeader;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx

@@ -1,68 +0,0 @@
-import { Button } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-interface CheckboxValueRowProps {
-	value: string;
-	checked: boolean;
-	disabled: boolean;
-	title: string;
-	onlyButtonLabel: string;
-	customRendererForValue?: (value: string) => JSX.Element;
-	onCheckboxChange: (checked: boolean) => void;
-	onOnlyOrAllClick: () => void;
-}
-
-function CheckboxValueRow({
-	value,
-	checked,
-	disabled,
-	title,
-	onlyButtonLabel,
-	customRendererForValue,
-	onCheckboxChange,
-	onOnlyOrAllClick,
-}: CheckboxValueRowProps): JSX.Element {
-	return (
-		<div className="value">
-			<Checkbox
-				onChange={(isChecked): void => onCheckboxChange(isChecked === true)}
-				value={checked}
-				disabled={disabled}
-				className="check-box"
-			/>
-
-			<div
-				className={cx('checkbox-value-section', disabled ? 'filter-disabled' : '')}
-				onClick={(): void => {
-					if (disabled) {
-						return;
-					}
-					onOnlyOrAllClick();
-				}}
-			>
-				<div className={`${title} label-${value}`} />
-				{customRendererForValue ? (
-					customRendererForValue(value)
-				) : (
-					<Typography.Text className="value-string" truncate={1}>
-						{String(value)}
-					</Typography.Text>
-				)}
-				<Button type="text" className="only-btn">
-					{onlyButtonLabel}
-				</Button>
-				<Button type="text" className="toggle-btn">
-					Toggle
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-CheckboxValueRow.defaultProps = {
-	customRendererForValue: undefined,
-};
-
-export default CheckboxValueRow;

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

@@ -1,417 +0,0 @@
-/* eslint-disable sonarjs/no-identical-functions */
-import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
-import {
-	IQuickFiltersConfig,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
-import { OPERATORS } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { cloneDeep, isArray } from 'lodash-es';
-import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-import { v4 as uuid } from 'uuid';
-
-import { isKeyMatch } from './utils';
-
-export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
-export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
-
-// Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
-const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
-
-/**
- * Returns the correct NOT_IN operator value based on source.
- * InfraMonitoring backend expects 'nin', others expect 'not in'.
- */
-export function getNotInOperator(source: QuickFiltersSource): string {
-	if (SOURCES_WITH_SHORT_OPERATORS.includes(source)) {
-		return 'nin';
-	}
-	return getOperatorValue('NOT_IN');
-}
-
-function setDefaultValues(
-	values: string[],
-	trueOrFalse: boolean,
-): Record<string, boolean> {
-	const defaultState: Record<string, boolean> = {};
-	values.forEach((val) => {
-		defaultState[val] = trueOrFalse;
-	});
-	return defaultState;
-}
-
-/**
- * Derives the checked/unchecked state for each attribute value by reading the
- * active filter clause for this attribute key out of the query.
- *
- * - No matching clause -> every value is checked (all selected).
- * - IN / `=` clause     -> only the listed values are checked.
- * - NOT IN / `!=` clause -> every value is checked except the excluded ones.
- */
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function deriveCheckboxState({
-	attributeValues,
-	filterItems,
-	filterKey,
-}: {
-	attributeValues: string[];
-	filterItems: TagFilterItem[] | undefined;
-	filterKey: string;
-}): Record<string, boolean> {
-	let filterState: Record<string, boolean> = setDefaultValues(
-		attributeValues,
-		false,
-	);
-	const filterSync = filterItems?.find((item) =>
-		isKeyMatch(item.key?.key, filterKey),
-	);
-
-	if (filterSync) {
-		if (SELECTED_OPERATORS.includes(filterSync.op)) {
-			if (isArray(filterSync.value)) {
-				filterSync.value.forEach((val) => {
-					filterState[String(val)] = true;
-				});
-			} else if (typeof filterSync.value === 'string') {
-				filterState[filterSync.value] = true;
-			} else if (typeof filterSync.value === 'boolean') {
-				filterState[String(filterSync.value)] = true;
-			} else if (typeof filterSync.value === 'number') {
-				filterState[String(filterSync.value)] = true;
-			}
-		} else if (NON_SELECTED_OPERATORS.includes(filterSync.op)) {
-			filterState = setDefaultValues(attributeValues, true);
-			if (isArray(filterSync.value)) {
-				filterSync.value.forEach((val) => {
-					filterState[String(val)] = false;
-				});
-			} else if (typeof filterSync.value === 'string') {
-				filterState[filterSync.value] = false;
-			} else if (typeof filterSync.value === 'boolean') {
-				filterState[String(filterSync.value)] = false;
-			} else if (typeof filterSync.value === 'number') {
-				filterState[String(filterSync.value)] = false;
-			}
-		}
-	} else {
-		filterState = setDefaultValues(attributeValues, true);
-	}
-	return filterState;
-}
-
-/**
- * Returns a new query with every clause for this attribute key removed, both
- * from the structured filter items and the raw filter expression.
- */
-export function clearFilterFromQuery({
-	currentQuery,
-	filter,
-	activeQueryIndex,
-}: {
-	currentQuery: Query;
-	filter: IQuickFiltersConfig;
-	activeQueryIndex: number;
-}): Query {
-	return {
-		...currentQuery,
-		builder: {
-			...currentQuery.builder,
-			queryData: currentQuery.builder.queryData.map((item, idx) => ({
-				...item,
-				filter: {
-					expression: removeKeysFromExpression(item.filter?.expression ?? '', [
-						filter.attributeKey.key,
-					]),
-				},
-				filters: {
-					...item.filters,
-					items:
-						idx === activeQueryIndex
-							? item.filters?.items?.filter(
-									(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
-								) || []
-							: [...(item.filters?.items || [])],
-					op: item.filters?.op || 'AND',
-				},
-			})),
-		},
-	};
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function applyCheckboxToggle({
-	currentQuery,
-	activeQueryIndex,
-	filter,
-	source,
-	attributeValues,
-	value,
-	checked,
-	isOnlyOrAllClicked,
-}: {
-	currentQuery: Query;
-	activeQueryIndex: number;
-	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
-	attributeValues: string[];
-	value: string;
-	checked: boolean;
-	isOnlyOrAllClicked: boolean;
-}): Query {
-	const activeItems =
-		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
-
-	const isSomeFilterPresentForCurrentAttribute = !!activeItems?.some((item) =>
-		isKeyMatch(item.key?.key, filter.attributeKey.key),
-	);
-
-	const currentFilterState = deriveCheckboxState({
-		attributeValues,
-		filterItems: activeItems,
-		filterKey: filter.attributeKey.key,
-	});
-
-	const isMultipleValuesTrueForTheKey =
-		Object.values(currentFilterState).filter((val) => val).length > 1;
-
-	const query = cloneDeep(currentQuery.builder.queryData?.[activeQueryIndex]);
-
-	// if only or all are clicked we do not need to worry about anything just override whatever we have
-	// by either adding a new IN operator value clause in case of ONLY or remove everything we have for ALL.
-	if (isOnlyOrAllClicked && query?.filters?.items) {
-		const isOnlyOrAll = isSomeFilterPresentForCurrentAttribute
-			? currentFilterState[value] && !isMultipleValuesTrueForTheKey
-				? 'All'
-				: 'Only'
-			: 'Only';
-		query.filters.items = query.filters.items.filter(
-			(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
-		);
-
-		if (query.filter?.expression) {
-			query.filter.expression = removeKeysFromExpression(query.filter.expression, [
-				filter.attributeKey.key,
-			]);
-		}
-
-		if (isOnlyOrAll === 'Only') {
-			const newFilterItem: TagFilterItem = {
-				id: uuid(),
-				op: getOperatorValue(OPERATORS.IN),
-				key: filter.attributeKey,
-				value,
-			};
-			query.filters.items = [...query.filters.items, newFilterItem];
-		}
-	} else if (query?.filters?.items) {
-		if (
-			query.filters?.items?.some((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
-			)
-		) {
-			// if there is already a running filter for the current attribute key then
-			// we split the cases by which particular operator is present right now!
-			const currentFilter = query.filters?.items?.find((q) =>
-				isKeyMatch(q.key?.key, filter.attributeKey.key),
-			);
-			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) {
-									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':
-						// 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;
-									}
-									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) {
-										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: 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 {
-			// case  - when there is no filter for the current key that means all are selected right now.
-			const newFilterItem: TagFilterItem = {
-				id: uuid(),
-				op: getNotInOperator(source),
-				key: filter.attributeKey,
-				value,
-			};
-			query.filters.items = [...query.filters.items, newFilterItem];
-		}
-	}
-
-	return {
-		...currentQuery,
-		builder: {
-			...currentQuery.builder,
-			queryData: [
-				...currentQuery.builder.queryData.map((q, idx) => {
-					if (idx === activeQueryIndex) {
-						return query;
-					}
-					return q;
-				}),
-			],
-		},
-	};
-}

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

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import { QuickFiltersSource } from 'components/QuickFilters/types';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-
-/**
- * Resolves which query-builder query index the checkbox filter reads from and
- * writes to.
- *
- * In ListView most sources use index 0; TRACES_EXPLORER and every non-ListView
- * mode track the last focused query.
- */
-function useActiveQueryIndex(source: QuickFiltersSource): number {
-	const { lastUsedQuery, panelType } = useQueryBuilder();
-	const isListView = panelType === PANEL_TYPES.LIST;
-
-	return useMemo(() => {
-		if (isListView) {
-			return source === QuickFiltersSource.TRACES_EXPLORER
-				? lastUsedQuery || 0
-				: 0;
-		}
-		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
-}
-
-export default useActiveQueryIndex;

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

@@ -1,90 +0,0 @@
-import { useMemo, useState } from 'react';
-import { IQuickFiltersConfig } from 'components/QuickFilters/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-
-import { isKeyMatch } from './utils';
-
-const DEFAULT_VISIBLE_ITEMS_COUNT = 10;
-
-interface UseCheckboxDisclosureProps {
-	filter: IQuickFiltersConfig;
-	activeQueryIndex: number;
-}
-
-interface UseCheckboxDisclosureReturn {
-	isOpen: boolean;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-	visibleItemsCount: number;
-	onToggleOpen: () => void;
-	onShowMore: () => void;
-}
-
-/**
- * Owns the open/collapsed state of a checkbox filter section and how many
- * values are visible.
- *
- * Auto-opens when the query already has a clause for this attribute, otherwise
- * falls back to `filter.defaultOpen`. An explicit user toggle always wins.
- * Collapsing resets the visible count.
- */
-function useCheckboxDisclosure({
-	filter,
-	activeQueryIndex,
-}: UseCheckboxDisclosureProps): UseCheckboxDisclosureReturn {
-	const { currentQuery } = useQueryBuilder();
-	// null = no user action, true = user opened, false = user closed
-	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
-	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(
-		DEFAULT_VISIBLE_ITEMS_COUNT,
-	);
-
-	const isSomeFilterPresentForCurrentAttribute = useMemo(
-		() =>
-			!!currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items?.some(
-				(item) => isKeyMatch(item.key?.key, filter.attributeKey.key),
-			),
-		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
-	);
-
-	const isOpen = useMemo(() => {
-		// If user explicitly toggled, respect that
-		if (userToggleState !== null) {
-			return userToggleState;
-		}
-
-		// Auto-open if this filter has active filters in the query
-		if (isSomeFilterPresentForCurrentAttribute) {
-			return true;
-		}
-
-		// Otherwise use default behavior (first 2 filters open)
-		return filter.defaultOpen;
-	}, [
-		userToggleState,
-		isSomeFilterPresentForCurrentAttribute,
-		filter.defaultOpen,
-	]);
-
-	const onToggleOpen = (): void => {
-		if (isOpen) {
-			setUserToggleState(false);
-			setVisibleItemsCount(DEFAULT_VISIBLE_ITEMS_COUNT);
-		} else {
-			setUserToggleState(true);
-		}
-	};
-
-	const onShowMore = (): void => {
-		setVisibleItemsCount((prev) => prev + DEFAULT_VISIBLE_ITEMS_COUNT);
-	};
-
-	return {
-		isOpen,
-		isSomeFilterPresentForCurrentAttribute,
-		visibleItemsCount,
-		onToggleOpen,
-		onShowMore,
-	};
-}
-
-export default useCheckboxDisclosure;

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

@@ -1,78 +0,0 @@
-import {
-	IQuickFiltersConfig,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isFunction } from 'lodash-es';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	applyCheckboxToggle,
-	clearFilterFromQuery,
-} from './checkboxFilterQuery';
-
-interface UseCheckboxFilterActionsProps {
-	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
-	attributeValues: string[];
-	activeQueryIndex: number;
-	onFilterChange?: ((query: Query) => void) | null;
-}
-
-interface UseCheckboxFilterActionsReturn {
-	onChange: (
-		value: string,
-		checked: boolean,
-		isOnlyOrAllClicked: boolean,
-	) => void;
-	onClear: () => void;
-}
-
-/**
- * Wires the pure checkbox query algebra to query-builder dispatch: the
- * caller-provided `onFilterChange` when present, otherwise a URL redirect.
- */
-function useCheckboxFilterActions({
-	filter,
-	source,
-	attributeValues,
-	activeQueryIndex,
-	onFilterChange,
-}: UseCheckboxFilterActionsProps): UseCheckboxFilterActionsReturn {
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-
-	const dispatch = (query: Query): void => {
-		if (onFilterChange && isFunction(onFilterChange)) {
-			onFilterChange(query);
-		} else {
-			redirectWithQueryBuilderData(query);
-		}
-	};
-
-	const onChange = (
-		value: string,
-		checked: boolean,
-		isOnlyOrAllClicked: boolean,
-	): void => {
-		dispatch(
-			applyCheckboxToggle({
-				currentQuery,
-				activeQueryIndex,
-				filter,
-				source,
-				attributeValues,
-				value,
-				checked,
-				isOnlyOrAllClicked,
-			}),
-		);
-	};
-
-	const onClear = (): void => {
-		dispatch(clearFilterFromQuery({ currentQuery, filter, activeQueryIndex }));
-	};
-
-	return { onChange, onClear };
-}
-
-export default useCheckboxFilterActions;

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

@@ -1,71 +0,0 @@
-import { useMemo } from 'react';
-import { IQuickFiltersConfig } from 'components/QuickFilters/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-
-import { deriveCheckboxState } from './checkboxFilterQuery';
-import { isKeyMatch } from './utils';
-
-interface UseCheckboxFilterStateProps {
-	filter: IQuickFiltersConfig;
-	attributeValues: string[];
-	activeQueryIndex: number;
-}
-
-interface UseCheckboxFilterStateReturn {
-	currentFilterState: Record<string, boolean>;
-	isFilterDisabled: boolean;
-	isMultipleValuesTrueForTheKey: boolean;
-}
-
-/**
- * Reads the active query and derives the per-value checked state for this
- * attribute, whether the filter is disabled (same key used more than once in
- * the filter bar), and whether more than one value is currently selected.
- */
-function useCheckboxFilterState({
-	filter,
-	attributeValues,
-	activeQueryIndex,
-}: UseCheckboxFilterStateProps): UseCheckboxFilterStateReturn {
-	const { currentQuery } = useQueryBuilder();
-
-	// derive the state of each filter key here and keep it in sync with current query
-	const currentFilterState = useMemo(
-		() =>
-			deriveCheckboxState({
-				attributeValues,
-				filterItems:
-					currentQuery?.builder.queryData?.[activeQueryIndex]?.filters?.items,
-				filterKey: filter.attributeKey.key,
-			}),
-		[
-			attributeValues,
-			currentQuery?.builder.queryData,
-			filter.attributeKey,
-			activeQueryIndex,
-		],
-	);
-
-	// disable the filter when there are multiple entries of the same attribute key present in the filter bar
-	const isFilterDisabled = useMemo(
-		() =>
-			(currentQuery?.builder?.queryData?.[
-				activeQueryIndex
-			]?.filters?.items?.filter((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
-			)?.length || 0) > 1,
-		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
-	);
-
-	// whether the current filter has multiple values to its name in the key op value section
-	const isMultipleValuesTrueForTheKey =
-		Object.values(currentFilterState).filter((val) => val).length > 1;
-
-	return {
-		currentFilterState,
-		isFilterDisabled,
-		isMultipleValuesTrueForTheKey,
-	};
-}
-
-export default useCheckboxFilterState;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterValues.tsx

@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-import {
-	IQuickFiltersConfig,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
-import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
-import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
-import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
-
-interface UseCheckboxFilterValuesProps {
-	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
-	searchText: string;
-	isOpen: boolean;
-}
-
-interface UseCheckboxFilterValuesReturn {
-	attributeValues: string[];
-	isLoading: boolean;
-}
-
-function useCheckboxFilterValues({
-	filter,
-	source,
-	searchText,
-	isOpen,
-}: UseCheckboxFilterValuesProps): UseCheckboxFilterValuesReturn {
-	const { data, isLoading } = useGetAggregateValues(
-		{
-			aggregateOperator: filter.aggregateOperator || 'noop',
-			dataSource: filter.dataSource || DataSource.LOGS,
-			aggregateAttribute: filter.aggregateAttribute || '',
-			attributeKey: filter.attributeKey.key,
-			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
-			tagType: filter.attributeKey.type || '',
-			searchText: searchText ?? '',
-		},
-		{
-			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
-			keepPreviousData: true,
-		},
-	);
-
-	const { data: keyValueSuggestions, isLoading: isLoadingKeyValueSuggestions } =
-		useGetQueryKeyValueSuggestions({
-			key: filter.attributeKey.key,
-			signal: filter.dataSource || DataSource.LOGS,
-			signalSource: 'meter',
-			options: {
-				enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
-				keepPreviousData: true,
-			},
-		});
-
-	const attributeValues: string[] = useMemo(() => {
-		const dataType = filter.attributeKey.dataType || DataTypes.String;
-
-		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
-			// Process the response data
-			const responseData = keyValueSuggestions?.data as any;
-			const values = responseData.data?.values || {};
-			const stringValues = values.stringValues || [];
-			const numberValues = values.numberValues || [];
-
-			// Generate options from string values - explicitly handle empty strings
-			const stringOptions = stringValues
-				// Strict filtering for empty string - we'll handle it as a special case if needed
-				.filter(
-					(value: string | null | undefined): value is string =>
-						value !== null && value !== undefined && value !== '',
-				);
-
-			// Generate options from number values
-			const numberOptions = numberValues
-				.filter(
-					(value: number | null | undefined): value is number =>
-						value !== null && value !== undefined,
-				)
-				.map((value: number) => value.toString());
-
-			// Combine all options and make sure we don't have duplicate labels
-			return [...stringOptions, ...numberOptions];
-		}
-
-		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-		return (data?.payload?.[key] || []).filter(
-			(val) => val !== undefined && val !== null,
-		);
-	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
-
-	return {
-		attributeValues,
-		isLoading: isLoading || isLoadingKeyValueSuggestions,
-	};
-}
-
-export default useCheckboxFilterValues;

frontend/src/constants/routes.ts

@@ -91,6 +91,8 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
+	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING:
+		'/llm-observability/settings/attribute-mapping',
 } as const;
 
 export default ROUTES;

frontend/src/container/LLMObservabilityAttributeMapping/AttributeMappingHeader.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@signozhq/ui/button';
+
+interface AttributeMappingHeaderProps {
+	isDirty: boolean;
+	isSaving: boolean;
+	onDiscard: () => void;
+	onSave: () => void;
+}
+
+function AttributeMappingHeader({
+	isDirty,
+	isSaving,
+	onDiscard,
+	onSave,
+}: AttributeMappingHeaderProps): JSX.Element {
+	return (
+		<header className="page-header">
+			<div className="page-header__title">
+				<h1>Attribute Mapping</h1>
+				<p>Configure source-to-target attribute remapping for LLM traces</p>
+			</div>
+			<div className="page-header__actions">
+				{isDirty && (
+					<span className="page-header__unsaved" data-testid="unsaved-changes">
+						Unsaved changes
+					</span>
+				)}
+				<Button
+					variant="outlined"
+					color="secondary"
+					onClick={onDiscard}
+					disabled={!isDirty || isSaving}
+					testId="discard-changes-btn"
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={onSave}
+					loading={isSaving}
+					disabled={!isDirty || isSaving}
+					testId="save-changes-btn"
+				>
+					{isSaving ? 'Saving…' : 'Save changes'}
+				</Button>
+			</div>
+		</header>
+	);
+}
+
+export default AttributeMappingHeader;

frontend/src/container/LLMObservabilityAttributeMapping/ConditionKeyList.tsx

@@ -0,0 +1,90 @@
+import { Button } from '@signozhq/ui/button';
+import { Plus, X } from '@signozhq/icons';
+
+import KeySearchInput from './KeySearchInput';
+import { FieldContextValue } from './types';
+
+interface ConditionKeyListProps {
+	label: string;
+	labelHint?: string;
+	keys: string[];
+	placeholder: string;
+	addLabel: string;
+	testIdPrefix: string;
+	fieldContext: FieldContextValue;
+	onChange: (keys: string[]) => void;
+}
+
+// Editor for one list of condition keys (the group's span-attribute or
+// resource gating keys). Substring "contains" match, order irrelevant.
+function ConditionKeyList({
+	label,
+	labelHint,
+	keys,
+	placeholder,
+	addLabel,
+	testIdPrefix,
+	fieldContext,
+	onChange,
+}: ConditionKeyListProps): JSX.Element {
+	const updateKey = (index: number, value: string): void => {
+		onChange(keys.map((key, i) => (i === index ? value : key)));
+	};
+
+	const addKey = (): void => {
+		onChange([...keys, '']);
+	};
+
+	const removeKey = (index: number): void => {
+		onChange(keys.filter((_, i) => i !== index));
+	};
+
+	return (
+		<div className="group-form__field">
+			<span className="group-form__label">
+				{label}
+				{labelHint && <span className="group-form__label-hint"> {labelHint}</span>}
+			</span>
+
+			{keys.length > 0 && (
+				<div className="group-form__keys">
+					{keys.map((key, index) => (
+						// eslint-disable-next-line react/no-array-index-key
+						<div className="group-form__key" key={index}>
+							<KeySearchInput
+								className="group-form__key-input"
+								placeholder={placeholder}
+								value={key}
+								fieldContext={fieldContext}
+								onChange={(next): void => updateKey(index, next)}
+								testId={`${testIdPrefix}-${index}`}
+							/>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								aria-label="Remove key"
+								onClick={(): void => removeKey(index)}
+								testId={`${testIdPrefix}-remove-${index}`}
+							>
+								<X size={14} />
+							</Button>
+						</div>
+					))}
+				</div>
+			)}
+
+			<Button
+				variant="dashed"
+				color="secondary"
+				prefix={<Plus size={14} />}
+				onClick={addKey}
+				testId={`${testIdPrefix}-add`}
+			>
+				{addLabel}
+			</Button>
+		</div>
+	);
+}
+
+export default ConditionKeyList;

frontend/src/container/LLMObservabilityAttributeMapping/GroupFormDrawer.styles.scss

@@ -0,0 +1,76 @@
+.group-form {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 4px 0;
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		&--row {
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+		}
+	}
+
+	&__label {
+		font-size: 12px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__label-hint {
+		font-weight: 400;
+		text-transform: none;
+		letter-spacing: normal;
+	}
+
+	&__hint {
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__keys {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__key {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__key-input {
+		flex: 1;
+		font-family: 'Geist Mono', monospace;
+	}
+
+	&__error {
+		padding: 10px 12px;
+		border-radius: 4px;
+		background: rgba(229, 72, 77, 0.1);
+		color: var(--bg-cherry-400);
+		font-size: 13px;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		gap: 8px;
+	}
+
+	&__footer-actions {
+		display: flex;
+		gap: 8px;
+		margin-left: auto;
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/GroupFormDrawer.tsx

@@ -0,0 +1,148 @@
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { Switch } from '@signozhq/ui/switch';
+import { Trash2 } from '@signozhq/icons';
+
+import ConditionKeyList from './ConditionKeyList';
+import { FieldContext, GroupDraft, MapperDraftMode } from './types';
+import { isGroupDraftValid } from './utils';
+
+import './GroupFormDrawer.styles.scss';
+
+interface GroupFormDrawerProps {
+	isOpen: boolean;
+	mode: MapperDraftMode;
+	draft: GroupDraft;
+	setDraft: (next: GroupDraft) => void;
+	onClose: () => void;
+	onSave: () => void;
+	onDelete: () => void;
+	isSaving: boolean;
+	isDeleting: boolean;
+	saveError: string | null;
+}
+
+function GroupFormDrawer({
+	isOpen,
+	mode,
+	draft,
+	setDraft,
+	onClose,
+	onSave,
+	onDelete,
+	isSaving,
+	isDeleting,
+	saveError,
+}: GroupFormDrawerProps): JSX.Element {
+	const isEdit = mode === 'edit';
+	const isValid = isGroupDraftValid(draft);
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			title={isEdit ? 'Edit group' : 'New group'}
+			subTitle="A group gates which spans its mappings run on"
+			width="wide"
+			testId="group-form-drawer"
+			footer={
+				<div className="group-form__footer">
+					{isEdit && (
+						<Button
+							variant="ghost"
+							color="destructive"
+							prefix={<Trash2 size={14} />}
+							onClick={onDelete}
+							disabled={isDeleting}
+							testId="group-form-delete"
+						>
+							{isDeleting ? 'Deleting…' : 'Delete'}
+						</Button>
+					)}
+					<div className="group-form__footer-actions">
+						<Button
+							variant="ghost"
+							color="secondary"
+							onClick={onClose}
+							testId="group-form-cancel"
+						>
+							Cancel
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={onSave}
+							disabled={!isValid || isSaving}
+							testId="group-form-save"
+						>
+							{/* eslint-disable-next-line no-nested-ternary */}
+							{isSaving ? 'Saving…' : isEdit ? 'Save group' : 'Create group'}
+						</Button>
+					</div>
+				</div>
+			}
+		>
+			<div className="group-form">
+				<div className="group-form__field">
+					<span className="group-form__label">Group name</span>
+					<Input
+						placeholder="e.g. OpenAI gateway"
+						value={draft.name}
+						onChange={(event): void =>
+							setDraft({ ...draft, name: event.target.value })
+						}
+						testId="group-form-name"
+					/>
+				</div>
+
+				<div className="group-form__field group-form__field--row">
+					<span className="group-form__label">Enabled</span>
+					<Switch
+						value={draft.enabled}
+						onChange={(checked): void => setDraft({ ...draft, enabled: checked })}
+						testId="group-form-enabled"
+					/>
+				</div>
+
+				<ConditionKeyList
+					label="Condition · span attribute keys"
+					labelHint="· runs when a span attribute key contains any of these"
+					keys={draft.attributes}
+					placeholder="e.g. gen_ai."
+					addLabel="Add attribute key"
+					testIdPrefix="group-form-attribute"
+					fieldContext={FieldContext.attribute}
+					onChange={(attributes): void => setDraft({ ...draft, attributes })}
+				/>
+
+				<ConditionKeyList
+					label="Condition · resource keys"
+					labelHint="· or when a resource key contains any of these"
+					keys={draft.resource}
+					placeholder="e.g. service.name"
+					addLabel="Add resource key"
+					testIdPrefix="group-form-resource"
+					fieldContext={FieldContext.resource}
+					onChange={(resource): void => setDraft({ ...draft, resource })}
+				/>
+
+				<span className="group-form__hint">
+					Leave both empty to run this group on every span.
+				</span>
+
+				{saveError && (
+					<div className="group-form__error" role="alert">
+						{saveError}
+					</div>
+				)}
+			</div>
+		</DrawerWrapper>
+	);
+}
+
+export default GroupFormDrawer;

frontend/src/container/LLMObservabilityAttributeMapping/IndexBadge.tsx

@@ -0,0 +1,10 @@
+interface IndexBadgeProps {
+	index: number;
+}
+
+// Small positional badge mirroring the Pipelines list ordering chip.
+function IndexBadge({ index }: IndexBadgeProps): JSX.Element {
+	return <span className="am-index-badge">{index + 1}</span>;
+}
+
+export default IndexBadge;

frontend/src/container/LLMObservabilityAttributeMapping/KeySearchInput.styles.scss

@@ -0,0 +1,51 @@
+.key-search {
+	position: relative;
+	flex: 1;
+	min-width: 0;
+
+	&__dropdown {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		z-index: 20;
+		min-width: 100%;
+		width: max-content;
+		max-width: 420px;
+		max-height: 240px;
+		overflow-x: hidden;
+		overflow-y: auto;
+		padding: 4px;
+		border: 1px solid var(--bg-slate-400, rgba(255, 255, 255, 0.12));
+		border-radius: 6px;
+		background: var(--bg-ink-400, #121317);
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+
+		&--empty {
+			padding: 8px 10px;
+			font-size: 12px;
+			color: var(--bg-vanilla-400);
+		}
+	}
+
+	&__option {
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		padding: 6px 10px;
+		border: none;
+		border-radius: 3px;
+		background: transparent;
+		color: var(--bg-vanilla-100);
+		font-family: 'Geist Mono', monospace;
+		font-size: 12px;
+		text-align: left;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		cursor: pointer;
+
+		&:hover {
+			background: var(--bg-slate-400, rgba(255, 255, 255, 0.08));
+		}
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/KeySearchInput.tsx

@@ -0,0 +1,112 @@
+import { useMemo, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { useGetFieldsKeys } from 'api/generated/services/fields';
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+import useDebounce from 'hooks/useDebounce';
+
+import { FieldContext, FieldContextValue } from './types';
+
+import './KeySearchInput.styles.scss';
+
+const SUGGESTION_LIMIT = 50;
+const DEBOUNCE_MS = 300;
+
+interface KeySearchInputProps {
+	value: string;
+	fieldContext: FieldContextValue;
+	placeholder?: string;
+	className?: string;
+	disabled?: boolean;
+	testId?: string;
+	onChange: (value: string) => void;
+}
+
+// Maps the mapper's attribute/resource context to the fields-endpoint context.
+function toFieldsContext(
+	context: FieldContextValue,
+): TelemetrytypesFieldContextDTO {
+	return context === FieldContext.resource
+		? TelemetrytypesFieldContextDTO.resource
+		: TelemetrytypesFieldContextDTO.attribute;
+}
+
+// Free-text input with span/resource key suggestions from /api/v1/fields/keys
+// (signal=traces). Typing keeps the custom value; suggestions are assistive.
+function KeySearchInput({
+	value,
+	fieldContext,
+	placeholder,
+	className,
+	disabled,
+	testId,
+	onChange,
+}: KeySearchInputProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const debouncedSearch = useDebounce(value, DEBOUNCE_MS);
+
+	const { data, isFetching } = useGetFieldsKeys(
+		{
+			signal: TelemetrytypesSignalDTO.traces,
+			fieldContext: toFieldsContext(fieldContext),
+			searchText: debouncedSearch,
+			limit: SUGGESTION_LIMIT,
+		},
+		{ query: { enabled: isOpen && !disabled, keepPreviousData: true } },
+	);
+
+	const suggestions = useMemo(() => {
+		const keys = data?.data?.keys ?? {};
+		return Object.keys(keys)
+			.filter((key) => key !== value)
+			.slice(0, SUGGESTION_LIMIT);
+	}, [data, value]);
+
+	return (
+		<div className={cx('key-search', className)}>
+			<Input
+				placeholder={placeholder}
+				value={value}
+				disabled={disabled}
+				autoComplete="off"
+				onChange={(event): void => {
+					onChange(event.target.value);
+					setIsOpen(true);
+				}}
+				onFocus={(): void => setIsOpen(true)}
+				onBlur={(): void => setIsOpen(false)}
+				testId={testId}
+			/>
+			{isOpen && suggestions.length > 0 && (
+				<div className="key-search__dropdown" data-testid={`${testId}-dropdown`}>
+					{suggestions.map((name) => (
+						<button
+							type="button"
+							key={name}
+							className="key-search__option"
+							// onMouseDown (not onClick) so selection runs before the input blur.
+							onMouseDown={(event): void => {
+								event.preventDefault();
+								onChange(name);
+								setIsOpen(false);
+							}}
+							data-testid={`${testId}-option-${name}`}
+						>
+							{name}
+						</button>
+					))}
+				</div>
+			)}
+			{isOpen && isFetching && suggestions.length === 0 && (
+				<div className="key-search__dropdown key-search__dropdown--empty">
+					Searching…
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default KeySearchInput;

frontend/src/container/LLMObservabilityAttributeMapping/LLMObservabilityAttributeMapping.styles.scss

@@ -0,0 +1,183 @@
+.llm-observability-attribute-mapping {
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.page-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 16px;
+
+		&__title {
+			h1 {
+				margin: 0;
+				font-size: 18px;
+				font-weight: 600;
+			}
+
+			p {
+				margin: 4px 0 0;
+				font-size: 13px;
+				color: var(--bg-vanilla-400);
+			}
+		}
+
+		&__actions {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		&__unsaved {
+			font-size: 13px;
+			color: var(--bg-amber-400);
+		}
+	}
+
+	.page-error {
+		padding: 12px 16px;
+		border-radius: 4px;
+		background: var(--bg-cherry-500-opacity-10, rgba(229, 72, 77, 0.1));
+		color: var(--bg-cherry-400);
+		font-size: 13px;
+	}
+
+	.page-footer {
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	.muted {
+		color: var(--bg-vanilla-400);
+	}
+
+	.am-index-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 22px;
+		height: 22px;
+		padding: 0 6px;
+		border-radius: 999px;
+		background: var(--bg-robin-500);
+		color: var(--bg-vanilla-100);
+		font-size: 12px;
+		font-weight: 600;
+	}
+
+	.am-row-actions {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.am-add-row {
+		align-self: flex-start;
+	}
+
+	.groups-table__wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.am-table {
+		&__empty {
+			padding: 24px 12px;
+			text-align: center;
+			color: var(--bg-vanilla-400);
+			font-size: 13px;
+		}
+	}
+
+	.groups-table {
+		&__name {
+			font-weight: 600;
+		}
+
+		&__name-cell {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		&__sub-row > td {
+			padding: 0 16px 12px;
+			background: var(--bg-ink-400, rgba(255, 255, 255, 0.02));
+		}
+
+		&__filters {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+
+		&__filter {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			font-size: 13px;
+		}
+
+		&__filter-key {
+			font-family: 'Geist Mono', monospace;
+		}
+
+		&__edited {
+			display: flex;
+			flex-direction: column;
+			font-size: 12px;
+		}
+	}
+
+	.mappers-table__wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		margin: 4px 0;
+	}
+
+	.mappers-table {
+		margin: 4px 0;
+
+		&__target {
+			font-family: 'Geist Mono', monospace;
+			font-weight: 600;
+		}
+
+		&__sources {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 6px;
+		}
+
+		&__source-chip {
+			display: inline-flex;
+			align-items: center;
+			max-width: 220px;
+			padding: 2px 8px;
+			border: 1px solid var(--bg-slate-400, rgba(255, 255, 255, 0.12));
+			border-radius: 6px;
+			background: var(--bg-ink-300, rgba(255, 255, 255, 0.04));
+			font-family: 'Geist Mono', monospace;
+			font-size: 12px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&__source-more {
+			font-size: 12px;
+			white-space: nowrap;
+		}
+
+		&__error {
+			padding: 12px;
+			font-size: 13px;
+			color: var(--bg-cherry-400);
+		}
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+
+import AttributeMappingHeader from './AttributeMappingHeader';
+import GroupFormDrawer from './GroupFormDrawer';
+import MapperGroupsTable from './MapperGroupsTable';
+import { useAttributeMappingStore } from './useAttributeMappingStore';
+import { useGroupFormDrawer } from './useGroupFormDrawer';
+
+import './LLMObservabilityAttributeMapping.styles.scss';
+
+function LLMObservabilityAttributeMapping(): JSX.Element {
+	const store = useAttributeMappingStore();
+	const groupDrawer = useGroupFormDrawer();
+
+	const handleGroupSave = useCallback((): void => {
+		store.upsertGroup(groupDrawer.draft);
+		groupDrawer.close();
+	}, [store, groupDrawer]);
+
+	const handleGroupDelete = useCallback((): void => {
+		if (groupDrawer.draft.id) {
+			store.removeGroup(groupDrawer.draft.id);
+		}
+		groupDrawer.close();
+	}, [store, groupDrawer]);
+
+	return (
+		<div
+			className="llm-observability-attribute-mapping"
+			data-testid="llm-observability-attribute-mapping-page"
+		>
+			<AttributeMappingHeader
+				isDirty={store.isDirty}
+				isSaving={store.isSaving}
+				onDiscard={store.discard}
+				onSave={store.save}
+			/>
+
+			{store.saveError && (
+				<div className="page-error" role="alert">
+					{store.saveError}
+				</div>
+			)}
+
+			{store.isError && (
+				<div className="page-error" role="alert">
+					Failed to load mapping groups. Please try again.
+				</div>
+			)}
+
+			<MapperGroupsTable
+				store={store}
+				onEditGroup={groupDrawer.openForEdit}
+				onAddGroup={groupDrawer.openForAdd}
+			/>
+
+			<footer className="page-footer">
+				Showing {store.groups.length} group{store.groups.length === 1 ? '' : 's'}
+			</footer>
+
+			<GroupFormDrawer
+				isOpen={groupDrawer.isOpen}
+				mode={groupDrawer.mode}
+				draft={groupDrawer.draft}
+				setDraft={groupDrawer.setDraft}
+				onClose={groupDrawer.close}
+				onSave={handleGroupSave}
+				onDelete={handleGroupDelete}
+				isSaving={false}
+				isDeleting={false}
+				saveError={null}
+			/>
+		</div>
+	);
+}
+
+export default LLMObservabilityAttributeMapping;

frontend/src/container/LLMObservabilityAttributeMapping/MapperFormDrawer.styles.scss

@@ -0,0 +1,104 @@
+.mapper-form {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 4px 0;
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__label {
+		font-size: 12px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__label-hint {
+		font-weight: 400;
+		text-transform: none;
+		letter-spacing: normal;
+	}
+
+	&__hint {
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__sources {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__source {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__source-handle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 4px;
+		border: none;
+		background: transparent;
+		color: var(--bg-vanilla-400);
+		cursor: grab;
+		touch-action: none;
+		user-select: none;
+
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&__source-index {
+		width: 20px;
+		text-align: center;
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__source-input {
+		flex: 1;
+		min-width: 0;
+		font-family: 'Geist Mono', monospace;
+	}
+
+	&__source-select {
+		flex: 0 0 auto;
+		width: 120px;
+	}
+
+	&__field-context {
+		width: 200px;
+	}
+
+	&__error {
+		padding: 10px 12px;
+		border-radius: 4px;
+		background: rgba(229, 72, 77, 0.1);
+		color: var(--bg-cherry-400);
+		font-size: 13px;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		gap: 8px;
+	}
+
+	&__footer-actions {
+		display: flex;
+		gap: 8px;
+		margin-left: auto;
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/MapperFormDrawer.tsx

@@ -0,0 +1,267 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { SelectSimple } from '@signozhq/ui/select';
+import {
+	closestCenter,
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+	arrayMove,
+	SortableContext,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { v4 as uuid } from 'uuid';
+
+import KeySearchInput from './KeySearchInput';
+import SourceAttributeRow from './SourceAttributeRow';
+import {
+	FieldContext,
+	FieldContextValue,
+	MapperDraft,
+	MapperDraftMode,
+	SourceConfig,
+} from './types';
+import { createEmptySource, isMapperDraftValid } from './utils';
+
+import './MapperFormDrawer.styles.scss';
+
+const FIELD_CONTEXT_OPTIONS = [
+	{ value: FieldContext.attribute, label: 'Span attribute' },
+	{ value: FieldContext.resource, label: 'Resource' },
+];
+
+interface MapperFormDrawerProps {
+	isOpen: boolean;
+	mode: MapperDraftMode;
+	draft: MapperDraft;
+	setDraft: (next: MapperDraft) => void;
+	onClose: () => void;
+	onSave: () => void;
+	onDelete: () => void;
+	isSaving: boolean;
+	isDeleting: boolean;
+	saveError: string | null;
+}
+
+function MapperFormDrawer({
+	isOpen,
+	mode,
+	draft,
+	setDraft,
+	onClose,
+	onSave,
+	onDelete,
+	isSaving,
+	isDeleting,
+	saveError,
+}: MapperFormDrawerProps): JSX.Element {
+	const isEdit = mode === 'edit';
+	const isValid = isMapperDraftValid(draft);
+
+	// Stable per-row ids for the sortable list. These are UI-only (never sent to
+	// the API and excluded from the draft), so dnd-kit can track rows reliably
+	// even though sources are stored as a plain array. Re-seeded each time the
+	// drawer opens; kept in lockstep with the sources array on add/remove/drag.
+	const [rowIds, setRowIds] = useState<string[]>([]);
+	const wasOpen = useRef(false);
+
+	useEffect(() => {
+		if (isOpen && !wasOpen.current) {
+			setRowIds(draft.sources.map(() => uuid()));
+		}
+		wasOpen.current = isOpen;
+		// Only re-seed on the closed→open transition.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isOpen]);
+
+	const sourceIds = draft.sources.map(
+		(_, index) => rowIds[index] ?? `pending-${index}`,
+	);
+
+	// 5px activation distance so clicking into the input never starts a drag.
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+	);
+
+	const updateSource = (index: number, patch: Partial<SourceConfig>): void => {
+		const sources = draft.sources.map((source, i) =>
+			i === index ? { ...source, ...patch } : source,
+		);
+		setDraft({ ...draft, sources });
+	};
+
+	const addSource = (): void => {
+		setDraft({ ...draft, sources: [...draft.sources, createEmptySource()] });
+		setRowIds((prev) => [...prev, uuid()]);
+	};
+
+	const removeSource = (index: number): void => {
+		const sources = draft.sources.filter((_, i) => i !== index);
+		if (sources.length === 0) {
+			setDraft({ ...draft, sources: [createEmptySource()] });
+			setRowIds([uuid()]);
+			return;
+		}
+		setDraft({ ...draft, sources });
+		setRowIds((prev) => prev.filter((_, i) => i !== index));
+	};
+
+	const handleDragEnd = (event: DragEndEvent): void => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) {
+			return;
+		}
+		const from = sourceIds.indexOf(String(active.id));
+		const to = sourceIds.indexOf(String(over.id));
+		if (from === -1 || to === -1) {
+			return;
+		}
+		setDraft({ ...draft, sources: arrayMove(draft.sources, from, to) });
+		setRowIds((prev) => arrayMove(prev, from, to));
+	};
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			title={isEdit ? 'Edit mapping' : 'New custom mapping'}
+			subTitle="Map source attributes onto a canonical target attribute"
+			width="wide"
+			testId="mapper-form-drawer"
+			footer={
+				<div className="mapper-form__footer">
+					{isEdit && (
+						<Button
+							variant="ghost"
+							color="destructive"
+							prefix={<Trash2 size={14} />}
+							onClick={onDelete}
+							disabled={isDeleting}
+							testId="mapper-form-delete"
+						>
+							{isDeleting ? 'Deleting…' : 'Delete'}
+						</Button>
+					)}
+					<div className="mapper-form__footer-actions">
+						<Button
+							variant="ghost"
+							color="secondary"
+							onClick={onClose}
+							testId="mapper-form-cancel"
+						>
+							Cancel
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={onSave}
+							disabled={!isValid || isSaving}
+							testId="mapper-form-save"
+						>
+							{/* eslint-disable-next-line no-nested-ternary */}
+							{isSaving ? 'Saving…' : isEdit ? 'Save mapping' : 'Create mapping'}
+						</Button>
+					</div>
+				</div>
+			}
+		>
+			<div className="mapper-form">
+				<div className="mapper-form__field">
+					<span className="mapper-form__label">Target attribute</span>
+					<KeySearchInput
+						placeholder="e.g. gen_ai.content.prompt"
+						value={draft.name}
+						fieldContext={draft.fieldContext}
+						disabled={isEdit}
+						onChange={(name): void => setDraft({ ...draft, name })}
+						testId="mapper-form-target"
+					/>
+					{isEdit && (
+						<span className="mapper-form__hint">
+							The target attribute can&apos;t be changed after creation.
+						</span>
+					)}
+				</div>
+
+				<div className="mapper-form__field">
+					<span className="mapper-form__label">Write target to</span>
+					<SelectSimple
+						className="mapper-form__field-context"
+						items={FIELD_CONTEXT_OPTIONS}
+						value={draft.fieldContext}
+						withPortal={false}
+						onChange={(next): void =>
+							setDraft({ ...draft, fieldContext: next as FieldContextValue })
+						}
+						testId="mapper-form-field-context"
+					/>
+					<span className="mapper-form__hint">
+						Where the standardized attribute is written.
+					</span>
+				</div>
+
+				<div className="mapper-form__field">
+					<span className="mapper-form__label">
+						Source attributes
+						<span className="mapper-form__label-hint">
+							{' '}
+							· priority: top → bottom · drag to reorder
+						</span>
+					</span>
+
+					<DndContext
+						sensors={sensors}
+						collisionDetection={closestCenter}
+						modifiers={[restrictToVerticalAxis]}
+						onDragEnd={handleDragEnd}
+					>
+						<SortableContext items={sourceIds} strategy={verticalListSortingStrategy}>
+							<div className="mapper-form__sources">
+								{draft.sources.map((source, index) => (
+									<SourceAttributeRow
+										key={sourceIds[index]}
+										id={sourceIds[index]}
+										index={index}
+										value={source}
+										canRemove={draft.sources.length > 1}
+										onChange={updateSource}
+										onRemove={removeSource}
+									/>
+								))}
+							</div>
+						</SortableContext>
+					</DndContext>
+
+					<Button
+						variant="dashed"
+						color="secondary"
+						prefix={<Plus size={14} />}
+						onClick={addSource}
+						testId="mapper-form-add-source"
+					>
+						Add another source
+					</Button>
+				</div>
+
+				{saveError && (
+					<div className="mapper-form__error" role="alert">
+						{saveError}
+					</div>
+				)}
+			</div>
+		</DrawerWrapper>
+	);
+}
+
+export default MapperFormDrawer;

frontend/src/container/LLMObservabilityAttributeMapping/MapperGroupsTable.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Switch } from '@signozhq/ui/switch';
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@signozhq/ui/table';
+import {
+	ChevronDown,
+	ChevronRight,
+	Pencil,
+	Plus,
+	Trash2,
+} from '@signozhq/icons';
+
+import MappersTable from './MappersTable';
+import { DraftGroup } from './types';
+import { AttributeMappingStore } from './useAttributeMappingStore';
+import { conditionFiltersFromGroup } from './utils';
+
+const COLUMN_COUNT = 4;
+
+interface MapperGroupsTableProps {
+	store: AttributeMappingStore;
+	onEditGroup: (group: DraftGroup) => void;
+	onAddGroup: () => void;
+}
+
+function FiltersCell({ group }: { group: DraftGroup }): JSX.Element {
+	const filters = conditionFiltersFromGroup(group);
+	if (filters.length === 0) {
+		return <span className="muted">No condition · always runs</span>;
+	}
+
+	return (
+		<div
+			className="groups-table__filters"
+			data-testid={`group-filters-${group.localId}`}
+		>
+			{filters.map((filter) => (
+				<div
+					className="groups-table__filter"
+					key={`${filter.context}:${filter.key}`}
+				>
+					<Badge
+						color={filter.context === 'resource' ? 'amber' : 'robin'}
+						variant="outline"
+					>
+						{filter.context}
+					</Badge>
+					<span className="groups-table__filter-key">contains {filter.key}</span>
+				</div>
+			))}
+		</div>
+	);
+}
+
+interface GroupRowProps {
+	group: DraftGroup;
+	store: AttributeMappingStore;
+	isExpanded: boolean;
+	onToggleExpand: (localId: string) => void;
+	onEditGroup: (group: DraftGroup) => void;
+}
+
+function GroupRow({
+	group,
+	store,
+	isExpanded,
+	onToggleExpand,
+	onEditGroup,
+}: GroupRowProps): JSX.Element {
+	return (
+		<>
+			<TableRow data-testid={`group-row-${group.localId}`}>
+				<TableCell>
+					<div className="groups-table__name-cell">
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="icon"
+							aria-label={isExpanded ? 'Collapse group' : 'Expand group'}
+							onClick={(): void => onToggleExpand(group.localId)}
+							testId={`group-expand-${group.localId}`}
+						>
+							{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+						</Button>
+						<span
+							className="groups-table__name"
+							data-testid={`group-name-${group.localId}`}
+						>
+							{group.name}
+						</span>
+					</div>
+				</TableCell>
+				<TableCell>
+					<FiltersCell group={group} />
+				</TableCell>
+				<TableCell>
+					<span className="muted">{group.mappers.length} mappings</span>
+				</TableCell>
+				<TableCell>
+					<div className="am-row-actions">
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="icon"
+							aria-label="Edit group"
+							onClick={(): void => onEditGroup(group)}
+							testId={`group-edit-${group.localId}`}
+						>
+							<Pencil size={14} />
+						</Button>
+						<Button
+							variant="ghost"
+							color="destructive"
+							size="icon"
+							aria-label="Delete group"
+							onClick={(): void => store.removeGroup(group.localId)}
+							testId={`group-delete-${group.localId}`}
+						>
+							<Trash2 size={14} />
+						</Button>
+						<Switch
+							value={group.enabled}
+							onChange={(checked): void => store.toggleGroup(group.localId, checked)}
+							testId={`group-enabled-${group.localId}`}
+						/>
+					</div>
+				</TableCell>
+			</TableRow>
+			{isExpanded && (
+				<TableRow className="groups-table__sub-row">
+					<TableCell colSpan={COLUMN_COUNT}>
+						<MappersTable group={group} store={store} />
+					</TableCell>
+				</TableRow>
+			)}
+		</>
+	);
+}
+
+function MapperGroupsTable({
+	store,
+	onEditGroup,
+	onAddGroup,
+}: MapperGroupsTableProps): JSX.Element {
+	const [expandedId, setExpandedId] = useState<string | null>(null);
+
+	const toggleExpand = (localId: string): void => {
+		setExpandedId((current) => (current === localId ? null : localId));
+	};
+
+	return (
+		<div className="groups-table__wrapper">
+			<Table testId="mapper-groups-table" className="am-table">
+				<TableHeader>
+					<TableRow>
+						<TableHead>Group name</TableHead>
+						<TableHead>Filters</TableHead>
+						<TableHead>Mappings</TableHead>
+						<TableHead>Actions</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{store.isLoading && store.groups.length === 0 && (
+						<TableRow>
+							<TableCell colSpan={COLUMN_COUNT} className="am-table__empty">
+								Loading groups…
+							</TableCell>
+						</TableRow>
+					)}
+					{!store.isLoading && store.groups.length === 0 && (
+						<TableRow>
+							<TableCell colSpan={COLUMN_COUNT} className="am-table__empty">
+								No mapping groups yet.
+							</TableCell>
+						</TableRow>
+					)}
+					{store.groups.map((group) => (
+						<GroupRow
+							key={group.localId}
+							group={group}
+							store={store}
+							isExpanded={expandedId === group.localId}
+							onToggleExpand={toggleExpand}
+							onEditGroup={onEditGroup}
+						/>
+					))}
+				</TableBody>
+			</Table>
+
+			<Button
+				variant="ghost"
+				color="primary"
+				prefix={<Plus size={14} />}
+				className="am-add-row"
+				onClick={onAddGroup}
+				testId="add-group-row"
+			>
+				Add a new group
+			</Button>
+		</div>
+	);
+}
+
+export default MapperGroupsTable;

frontend/src/container/LLMObservabilityAttributeMapping/MappersTable.tsx

@@ -0,0 +1,208 @@
+import { useCallback } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Switch } from '@signozhq/ui/switch';
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@signozhq/ui/table';
+import { Pencil, Plus, Trash2 } from '@signozhq/icons';
+
+import IndexBadge from './IndexBadge';
+import MapperFormDrawer from './MapperFormDrawer';
+import { DraftGroup, DraftMapper, FieldContext } from './types';
+import { AttributeMappingStore } from './useAttributeMappingStore';
+import { useMapperFormDrawer } from './useMapperFormDrawer';
+
+const MAX_VISIBLE_SOURCES = 3;
+const COLUMN_COUNT = 5;
+
+interface MappersTableProps {
+	group: DraftGroup;
+	store: AttributeMappingStore;
+}
+
+function SourcesCell({ mapper }: { mapper: DraftMapper }): JSX.Element {
+	if (mapper.sources.length === 0) {
+		return <span className="muted">—</span>;
+	}
+
+	const visible = mapper.sources.slice(0, MAX_VISIBLE_SOURCES);
+	const remaining = mapper.sources.length - visible.length;
+
+	return (
+		<div
+			className="mappers-table__sources"
+			data-testid={`mapper-sources-${mapper.localId}`}
+		>
+			{visible.map((source) => (
+				<span
+					className="mappers-table__source-chip"
+					key={`${source.context}:${source.key}`}
+					title={source.key}
+				>
+					{source.key}
+				</span>
+			))}
+			{remaining > 0 && (
+				<span className="mappers-table__source-more muted">+{remaining} more</span>
+			)}
+		</div>
+	);
+}
+
+interface MapperRowProps {
+	mapper: DraftMapper;
+	index: number;
+	onEdit: (mapper: DraftMapper) => void;
+	onDelete: (mapperLocalId: string) => void;
+	onToggle: (mapperLocalId: string, enabled: boolean) => void;
+}
+
+function MapperRow({
+	mapper,
+	index,
+	onEdit,
+	onDelete,
+	onToggle,
+}: MapperRowProps): JSX.Element {
+	return (
+		<TableRow data-testid={`mapper-row-${mapper.localId}`}>
+			<TableCell>
+				<IndexBadge index={index} />
+			</TableCell>
+			<TableCell>
+				<span
+					className="mappers-table__target"
+					data-testid={`mapper-target-${mapper.localId}`}
+				>
+					{mapper.name}
+				</span>
+			</TableCell>
+			<TableCell>
+				<SourcesCell mapper={mapper} />
+			</TableCell>
+			<TableCell>
+				<Badge
+					color={mapper.fieldContext === FieldContext.resource ? 'amber' : 'robin'}
+					variant="outline"
+				>
+					{mapper.fieldContext}
+				</Badge>
+			</TableCell>
+			<TableCell>
+				<div className="am-row-actions">
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Edit mapping"
+						onClick={(): void => onEdit(mapper)}
+						testId={`mapper-edit-${mapper.localId}`}
+					>
+						<Pencil size={14} />
+					</Button>
+					<Button
+						variant="ghost"
+						color="destructive"
+						size="icon"
+						aria-label="Delete mapping"
+						onClick={(): void => onDelete(mapper.localId)}
+						testId={`mapper-delete-${mapper.localId}`}
+					>
+						<Trash2 size={14} />
+					</Button>
+					<Switch
+						value={mapper.enabled}
+						onChange={(checked): void => onToggle(mapper.localId, checked)}
+						testId={`mapper-enabled-${mapper.localId}`}
+					/>
+				</div>
+			</TableCell>
+		</TableRow>
+	);
+}
+
+function MappersTable({ group, store }: MappersTableProps): JSX.Element {
+	const drawer = useMapperFormDrawer();
+
+	const handleSave = useCallback((): void => {
+		store.upsertMapper(group.localId, drawer.draft);
+		drawer.close();
+	}, [store, group.localId, drawer]);
+
+	const handleDelete = useCallback((): void => {
+		if (drawer.draft.id) {
+			store.removeMapper(group.localId, drawer.draft.id);
+		}
+		drawer.close();
+	}, [store, group.localId, drawer]);
+
+	return (
+		<div className="mappers-table__wrapper">
+			<Table testId={`mappers-table-${group.localId}`} className="am-table">
+				<TableHeader>
+					<TableRow>
+						<TableHead>#</TableHead>
+						<TableHead>Target</TableHead>
+						<TableHead>Sources</TableHead>
+						<TableHead>Writes to</TableHead>
+						<TableHead>Actions</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{group.mappers.length === 0 && (
+						<TableRow>
+							<TableCell colSpan={COLUMN_COUNT} className="am-table__empty">
+								No mappings in this group yet.
+							</TableCell>
+						</TableRow>
+					)}
+					{group.mappers.map((mapper, index) => (
+						<MapperRow
+							key={mapper.localId}
+							mapper={mapper}
+							index={index}
+							onEdit={drawer.openForEdit}
+							onDelete={(localId): void => store.removeMapper(group.localId, localId)}
+							onToggle={(localId, enabled): void =>
+								store.toggleMapper(group.localId, localId, enabled)
+							}
+						/>
+					))}
+				</TableBody>
+			</Table>
+
+			<Button
+				variant="ghost"
+				color="primary"
+				size="sm"
+				prefix={<Plus size={14} />}
+				className="am-add-row"
+				onClick={drawer.openForAdd}
+				testId={`add-mapper-${group.localId}`}
+			>
+				Add mapping
+			</Button>
+
+			<MapperFormDrawer
+				isOpen={drawer.isOpen}
+				mode={drawer.mode}
+				draft={drawer.draft}
+				setDraft={drawer.setDraft}
+				onClose={drawer.close}
+				onSave={handleSave}
+				onDelete={handleDelete}
+				isSaving={false}
+				isDeleting={false}
+				saveError={null}
+			/>
+		</div>
+	);
+}
+
+export default MappersTable;

frontend/src/container/LLMObservabilityAttributeMapping/SourceAttributeRow.tsx

@@ -0,0 +1,115 @@
+import { Button } from '@signozhq/ui/button';
+import { SelectSimple } from '@signozhq/ui/select';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, X } from '@signozhq/icons';
+
+import KeySearchInput from './KeySearchInput';
+import {
+	FieldContext,
+	FieldContextValue,
+	MapperOperation,
+	MapperOperationValue,
+	SourceConfig,
+} from './types';
+
+const CONTEXT_OPTIONS = [
+	{ value: FieldContext.attribute, label: 'Attribute' },
+	{ value: FieldContext.resource, label: 'Resource' },
+];
+
+const OPERATION_OPTIONS = [
+	{ value: MapperOperation.move, label: 'Move' },
+	{ value: MapperOperation.copy, label: 'Copy' },
+];
+
+interface SourceAttributeRowProps {
+	id: string;
+	index: number;
+	value: SourceConfig;
+	canRemove: boolean;
+	onChange: (index: number, patch: Partial<SourceConfig>) => void;
+	onRemove: (index: number) => void;
+}
+
+// A single draggable source row. Order = priority (top wins). Each source can
+// be read from a span attribute or the resource, and moved (delete source) or
+// copied (keep source). Only the grip is a drag handle.
+function SourceAttributeRow({
+	id,
+	index,
+	value,
+	canRemove,
+	onChange,
+	onRemove,
+}: SourceAttributeRowProps): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id });
+
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? 0.6 : 1,
+	};
+
+	return (
+		<div className="mapper-form__source" ref={setNodeRef} style={style}>
+			<div
+				className="mapper-form__source-handle"
+				data-testid={`mapper-form-source-handle-${index}`}
+				{...attributes}
+				{...listeners}
+			>
+				<GripVertical size={14} />
+			</div>
+			<span className="mapper-form__source-index">{index + 1}</span>
+			<KeySearchInput
+				className="mapper-form__source-input"
+				placeholder="Source attribute key"
+				value={value.key}
+				fieldContext={value.context}
+				onChange={(key): void => onChange(index, { key })}
+				testId={`mapper-form-source-${index}`}
+			/>
+			<SelectSimple
+				className="mapper-form__source-select"
+				items={CONTEXT_OPTIONS}
+				value={value.context}
+				withPortal={false}
+				onChange={(next): void =>
+					onChange(index, { context: next as FieldContextValue })
+				}
+				testId={`mapper-form-source-context-${index}`}
+			/>
+			<SelectSimple
+				className="mapper-form__source-select"
+				items={OPERATION_OPTIONS}
+				value={value.operation}
+				withPortal={false}
+				onChange={(next): void =>
+					onChange(index, { operation: next as MapperOperationValue })
+				}
+				testId={`mapper-form-source-operation-${index}`}
+			/>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="icon"
+				aria-label="Remove source"
+				disabled={!canRemove}
+				onClick={(): void => onRemove(index)}
+				testId={`mapper-form-source-remove-${index}`}
+			>
+				<X size={14} />
+			</Button>
+		</div>
+	);
+}
+
+export default SourceAttributeRow;

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/ConditionKeyList.test.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import ConditionKeyList from '../ConditionKeyList';
+import { FieldContext } from '../types';
+
+const FIELDS_ENDPOINT = '*/api/v1/fields/keys';
+
+function Harness({ initial = [] as string[] }): JSX.Element {
+	const [keys, setKeys] = useState<string[]>(initial);
+	return (
+		<ConditionKeyList
+			label="Attributes"
+			keys={keys}
+			placeholder="key"
+			addLabel="Add attribute key"
+			testIdPrefix="cond"
+			fieldContext={FieldContext.attribute}
+			onChange={setKeys}
+		/>
+	);
+}
+
+describe('ConditionKeyList', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(FIELDS_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ status: 'success', data: { complete: true, keys: {} } }),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders no key rows and only the add button when empty', () => {
+		render(<Harness />);
+		expect(screen.queryByTestId('cond-0')).not.toBeInTheDocument();
+		expect(screen.getByTestId('cond-add')).toBeInTheDocument();
+	});
+
+	it('adds a key row when the add button is clicked', () => {
+		render(<Harness />);
+		fireEvent.click(screen.getByTestId('cond-add'));
+		expect(screen.getByTestId('cond-0')).toBeInTheDocument();
+	});
+
+	it('removes a key row when its remove button is clicked', () => {
+		render(<Harness initial={['gen_ai.', 'llm.']} />);
+
+		expect(screen.getByTestId('cond-0')).toBeInTheDocument();
+		expect(screen.getByTestId('cond-1')).toBeInTheDocument();
+
+		fireEvent.click(screen.getByTestId('cond-remove-1'));
+
+		expect(screen.queryByTestId('cond-1')).not.toBeInTheDocument();
+		expect(screen.getByTestId('cond-0')).toBeInTheDocument();
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/KeySearchInput.test.tsx

@@ -0,0 +1,123 @@
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+
+import KeySearchInput from '../KeySearchInput';
+import { FieldContext } from '../types';
+
+const FIELDS_ENDPOINT = '*/api/v1/fields/keys';
+
+const mockKeysResponse = {
+	status: 'success',
+	data: {
+		complete: true,
+		keys: {
+			'gen_ai.request.model': [
+				{ name: 'gen_ai.request.model', fieldContext: 'attribute' },
+			],
+			'llm.model': [{ name: 'llm.model', fieldContext: 'attribute' }],
+		},
+	},
+};
+
+describe('KeySearchInput', () => {
+	let lastRequestParams: Record<string, string | null> = {};
+
+	beforeEach(() => {
+		lastRequestParams = {};
+		server.use(
+			rest.get(FIELDS_ENDPOINT, (req, res, ctx) => {
+				lastRequestParams = {
+					signal: req.url.searchParams.get('signal'),
+					fieldContext: req.url.searchParams.get('fieldContext'),
+					searchText: req.url.searchParams.get('searchText'),
+				};
+				return res(ctx.status(200), ctx.json(mockKeysResponse));
+			}),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('does not show suggestions until the input is focused', () => {
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.attribute}
+				onChange={jest.fn()}
+				testId="key"
+			/>,
+		);
+
+		expect(screen.queryByTestId('key-dropdown')).not.toBeInTheDocument();
+	});
+
+	it('shows suggestions on focus and selecting one calls onChange with the key', async () => {
+		const onChange = jest.fn();
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.attribute}
+				onChange={onChange}
+				testId="key"
+			/>,
+		);
+
+		fireEvent.focus(screen.getByTestId('key'));
+
+		const option = await screen.findByTestId('key-option-gen_ai.request.model');
+		fireEvent.mouseDown(option);
+
+		expect(onChange).toHaveBeenCalledWith('gen_ai.request.model');
+	});
+
+	it('queries traces with the resource context when fieldContext is resource', async () => {
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.resource}
+				onChange={jest.fn()}
+				testId="key"
+			/>,
+		);
+
+		fireEvent.focus(screen.getByTestId('key'));
+
+		await waitFor(() => expect(lastRequestParams.fieldContext).toBe('resource'));
+		expect(lastRequestParams.signal).toBe('traces');
+	});
+
+	it('accepts free text typed by the user (custom key)', () => {
+		const onChange = jest.fn();
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.attribute}
+				onChange={onChange}
+				testId="key"
+			/>,
+		);
+
+		fireEvent.change(screen.getByTestId('key'), {
+			target: { value: 'my.custom.key' },
+		});
+
+		expect(onChange).toHaveBeenCalledWith('my.custom.key');
+	});
+
+	it('does not query while disabled', () => {
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.attribute}
+				disabled
+				onChange={jest.fn()}
+				testId="key"
+			/>,
+		);
+
+		fireEvent.focus(screen.getByTestId('key'));
+		expect(screen.queryByTestId('key-dropdown')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/LLMObservabilityAttributeMapping.test.tsx

@@ -0,0 +1,72 @@
+import { SpantypesSpanMapperGroupDTO } from 'api/generated/services/sigNoz.schemas';
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import LLMObservabilityAttributeMapping from '../LLMObservabilityAttributeMapping';
+
+const GROUPS_ENDPOINT = '*/api/v1/span_mapper_groups';
+const MAPPERS_ENDPOINT = '*/api/v1/span_mapper_groups/:groupId/span_mappers';
+
+const mockGroups: SpantypesSpanMapperGroupDTO[] = [
+	{
+		id: 'group-openai',
+		orgId: 'org-1',
+		name: 'OpenAI gateway',
+		enabled: true,
+		condition: { attributes: ['gen_ai.'], resource: [] },
+		updatedBy: 'gaurav.tewari@signoz.io',
+		updatedAt: '2026-06-10T09:30:00Z',
+	},
+];
+
+describe('LLMObservabilityAttributeMapping', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(MAPPERS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: { items: [] } })),
+			),
+			rest.get(GROUPS_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ status: 'success', data: { items: mockGroups } }),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders the page header and the group row', async () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		await screen.findByTestId('group-name-group-openai');
+		expect(screen.getByText('Attribute Mapping')).toBeInTheDocument();
+		expect(screen.getByText('OpenAI gateway')).toBeInTheDocument();
+	});
+
+	it('opens the group drawer in Add mode with empty name', async () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		await screen.findByTestId('group-name-group-openai');
+		fireEvent.click(screen.getByTestId('add-group-row'));
+
+		const input = (await screen.findByTestId(
+			'group-form-name',
+		)) as HTMLInputElement;
+		expect(input.value).toBe('');
+	});
+
+	it('opens the group drawer in Edit mode prefilled with the group name', async () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		await screen.findByTestId('group-name-group-openai');
+		fireEvent.click(screen.getByTestId('group-edit-group-openai'));
+
+		const input = (await screen.findByTestId(
+			'group-form-name',
+		)) as HTMLInputElement;
+		expect(input.value).toBe('OpenAI gateway');
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/MapperFormDrawer.test.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import MapperFormDrawer from '../MapperFormDrawer';
+import {
+	FieldContext,
+	MapperDraft,
+	MapperDraftMode,
+	MapperOperation,
+} from '../types';
+import { EMPTY_MAPPER_DRAFT } from '../utils';
+
+const FIELDS_ENDPOINT = '*/api/v1/fields/keys';
+
+const filledDraft: MapperDraft = {
+	id: null,
+	name: 'gen_ai.request.model',
+	fieldContext: FieldContext.attribute,
+	sources: [
+		{
+			key: 'llm.model',
+			context: FieldContext.attribute,
+			operation: MapperOperation.move,
+		},
+	],
+	enabled: true,
+};
+
+interface HarnessProps {
+	initialDraft?: MapperDraft;
+	mode?: MapperDraftMode;
+	onSave?: () => void;
+	onDelete?: () => void;
+}
+
+function Harness({
+	initialDraft = EMPTY_MAPPER_DRAFT,
+	mode = 'add',
+	onSave = jest.fn(),
+	onDelete = jest.fn(),
+}: HarnessProps): JSX.Element {
+	const [draft, setDraft] = useState<MapperDraft>(initialDraft);
+	return (
+		<MapperFormDrawer
+			isOpen
+			mode={mode}
+			draft={draft}
+			setDraft={setDraft}
+			onClose={jest.fn()}
+			onSave={onSave}
+			onDelete={onDelete}
+			isSaving={false}
+			isDeleting={false}
+			saveError={null}
+		/>
+	);
+}
+
+describe('MapperFormDrawer', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(FIELDS_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ status: 'success', data: { complete: true, keys: {} } }),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('disables Create when the target/sources are empty', () => {
+		render(<Harness />);
+		expect(screen.getByTestId('mapper-form-save')).toBeDisabled();
+	});
+
+	it('enables Create with a target and a source key, and calls onSave', () => {
+		const onSave = jest.fn();
+		render(<Harness initialDraft={filledDraft} onSave={onSave} />);
+
+		const save = screen.getByTestId('mapper-form-save');
+		expect(save).not.toBeDisabled();
+
+		fireEvent.click(save);
+		expect(onSave).toHaveBeenCalledTimes(1);
+	});
+
+	it('adds a source row when "Add another source" is clicked', () => {
+		render(<Harness initialDraft={filledDraft} />);
+
+		expect(screen.queryByTestId('mapper-form-source-1')).not.toBeInTheDocument();
+		fireEvent.click(screen.getByTestId('mapper-form-add-source'));
+		expect(screen.getByTestId('mapper-form-source-1')).toBeInTheDocument();
+	});
+
+	it('makes the target read-only in edit mode and shows delete', () => {
+		const onDelete = jest.fn();
+		render(
+			<Harness
+				initialDraft={{ ...filledDraft, id: 'local-mapper-1' }}
+				mode="edit"
+				onDelete={onDelete}
+			/>,
+		);
+
+		expect(screen.getByTestId('mapper-form-target')).toBeDisabled();
+
+		fireEvent.click(screen.getByTestId('mapper-form-delete'));
+		expect(onDelete).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/saveDraft.test.ts

@@ -0,0 +1,146 @@
+import { persistDraft, SaveMutations } from '../saveDraft';
+import {
+	DraftGroup,
+	DraftMapper,
+	FieldContext,
+	MapperOperation,
+} from '../types';
+
+function mapper(over: Partial<DraftMapper>): DraftMapper {
+	return {
+		localId: 'm',
+		serverId: 'm',
+		name: 'm',
+		fieldContext: FieldContext.attribute,
+		sources: [
+			{
+				key: 'x',
+				context: FieldContext.attribute,
+				operation: MapperOperation.move,
+			},
+		],
+		enabled: true,
+		...over,
+	};
+}
+
+function group(over: Partial<DraftGroup>): DraftGroup {
+	return {
+		localId: 'g',
+		serverId: 'g',
+		name: 'g',
+		attributes: [],
+		resource: [],
+		enabled: true,
+		mappers: [],
+		...over,
+	};
+}
+
+interface RecordedCalls {
+	createGroup: unknown[];
+	updateGroup: [string, unknown][];
+	deleteGroup: string[];
+	createMapper: [string, unknown][];
+	updateMapper: [string, string, unknown][];
+	deleteMapper: [string, string][];
+}
+
+function makeMutations(): { calls: RecordedCalls; mutations: SaveMutations } {
+	const calls: RecordedCalls = {
+		createGroup: [],
+		updateGroup: [],
+		deleteGroup: [],
+		createMapper: [],
+		updateMapper: [],
+		deleteMapper: [],
+	};
+	const mutations: SaveMutations = {
+		createGroup: async (data): Promise<string> => {
+			calls.createGroup.push(data);
+			return 'new-group-id';
+		},
+		updateGroup: async (id, data): Promise<void> => {
+			calls.updateGroup.push([id, data]);
+		},
+		deleteGroup: async (id): Promise<void> => {
+			calls.deleteGroup.push(id);
+		},
+		createMapper: async (gid, data): Promise<void> => {
+			calls.createMapper.push([gid, data]);
+		},
+		updateMapper: async (gid, mid, data): Promise<void> => {
+			calls.updateMapper.push([gid, mid, data]);
+		},
+		deleteMapper: async (gid, mid): Promise<void> => {
+			calls.deleteMapper.push([gid, mid]);
+		},
+	};
+	return { calls, mutations };
+}
+
+describe('persistDraft', () => {
+	it('issues the minimal set of create/update/delete calls', async () => {
+		const snapshot: DraftGroup[] = [
+			group({
+				localId: 'g1',
+				serverId: 'g1',
+				name: 'G1',
+				mappers: [
+					mapper({ localId: 'm1', serverId: 'm1', name: 'keep' }),
+					mapper({ localId: 'mdel', serverId: 'mdel', name: 'del' }),
+				],
+			}),
+			group({ localId: 'g2', serverId: 'g2', name: 'G2' }),
+		];
+
+		const draft: DraftGroup[] = [
+			group({
+				localId: 'g1',
+				serverId: 'g1',
+				name: 'G1-renamed', // changed -> update
+				mappers: [
+					mapper({ localId: 'm1', serverId: 'm1', name: 'keep' }), // unchanged
+					mapper({ localId: 'local-mapper-x', serverId: null, name: 'fresh' }), // new
+				],
+			}),
+			// g2 removed -> delete
+			group({
+				localId: 'local-group-y',
+				serverId: null,
+				name: 'G3',
+				mappers: [
+					mapper({ localId: 'local-mapper-z', serverId: null, name: 'g3map' }),
+				],
+			}),
+		];
+
+		const { calls, mutations } = makeMutations();
+		await persistDraft(snapshot, draft, mutations);
+
+		expect(calls.deleteGroup).toStrictEqual(['g2']);
+		expect(calls.updateGroup.map(([id]) => id)).toStrictEqual(['g1']);
+		expect(calls.deleteMapper).toStrictEqual([['g1', 'mdel']]);
+		// no-op mapper is not updated
+		expect(calls.updateMapper).toStrictEqual([]);
+		// new group created once, then its mapper created under the returned id
+		expect(calls.createGroup).toHaveLength(1);
+		const createMapperGroupIds = calls.createMapper.map(([gid]) => gid).sort();
+		expect(createMapperGroupIds).toStrictEqual(['g1', 'new-group-id']);
+	});
+
+	it('does nothing when the draft equals the snapshot', async () => {
+		const snapshot: DraftGroup[] = [group({ localId: 'g1', serverId: 'g1' })];
+		const draft: DraftGroup[] = [group({ localId: 'g1', serverId: 'g1' })];
+
+		const { calls, mutations } = makeMutations();
+		await persistDraft(snapshot, draft, mutations);
+
+		expect(calls.createGroup).toHaveLength(0);
+		expect(calls.updateGroup).toHaveLength(0);
+		expect(calls.deleteGroup).toHaveLength(0);
+		expect(calls.createMapper).toHaveLength(0);
+		expect(calls.updateMapper).toHaveLength(0);
+		expect(calls.deleteMapper).toHaveLength(0);
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/utils.test.ts

@@ -0,0 +1,330 @@
+import {
+	DraftGroup,
+	FieldContext,
+	Mapper,
+	MapperDraft,
+	MapperGroup,
+	MapperOperation,
+	SourceConfig,
+} from '../types';
+import {
+	buildDraftGroup,
+	buildDraftMapper,
+	buildPostableGroup,
+	buildPostableMapper,
+	buildUpdatableMapper,
+	cleanKeys,
+	conditionFiltersFromGroup,
+	EMPTY_GROUP_DRAFT,
+	EMPTY_MAPPER_DRAFT,
+	formatTimestamp,
+	getMapperSources,
+	groupDraftFromNode,
+	isGroupDraftValid,
+	isMapperDraftValid,
+	mapperDraftFromNode,
+	nodeFromGroupDraft,
+	nodeFromMapperDraft,
+} from '../utils';
+
+function src(
+	key: string,
+	operation = MapperOperation.copy,
+	context = FieldContext.attribute,
+): SourceConfig {
+	return { key, context, operation };
+}
+
+function mapperDraft(over: Partial<MapperDraft>): MapperDraft {
+	return {
+		id: null,
+		name: 'target',
+		fieldContext: FieldContext.attribute,
+		sources: [src('a')],
+		enabled: true,
+		...over,
+	};
+}
+
+const mapper: Mapper = {
+	id: 'm1',
+	group_id: 'g1',
+	name: 'gen_ai.request.model',
+	enabled: true,
+	fieldContext: FieldContext.attribute,
+	config: {
+		sources: [
+			{
+				key: 'low',
+				context: FieldContext.attribute,
+				operation: MapperOperation.copy,
+				priority: 1,
+			},
+			{
+				key: 'high',
+				context: FieldContext.resource,
+				operation: MapperOperation.move,
+				priority: 3,
+			},
+			{
+				key: 'mid',
+				context: FieldContext.attribute,
+				operation: MapperOperation.copy,
+				priority: 2,
+			},
+		],
+	},
+};
+
+const group: MapperGroup = {
+	id: 'g1',
+	orgId: 'org1',
+	name: 'OpenAI',
+	enabled: true,
+	condition: { attributes: ['gen_ai.', 'llm.'], resource: [] },
+};
+
+describe('attribute-mapping utils', () => {
+	describe('cleanKeys', () => {
+		it('trims, drops empties, and de-duplicates preserving order', () => {
+			expect(cleanKeys([' a ', '', 'b', 'a', '  '])).toStrictEqual(['a', 'b']);
+		});
+	});
+
+	describe('getMapperSources', () => {
+		it('returns sources sorted by priority descending, preserving context/operation', () => {
+			expect(getMapperSources(mapper)).toStrictEqual([
+				{
+					key: 'high',
+					context: FieldContext.resource,
+					operation: MapperOperation.move,
+				},
+				{
+					key: 'mid',
+					context: FieldContext.attribute,
+					operation: MapperOperation.copy,
+				},
+				{
+					key: 'low',
+					context: FieldContext.attribute,
+					operation: MapperOperation.copy,
+				},
+			]);
+		});
+
+		it('returns empty array when there are no sources', () => {
+			expect(
+				getMapperSources({ ...mapper, config: { sources: null } }),
+			).toStrictEqual([]);
+		});
+	});
+
+	describe('conditionFiltersFromGroup', () => {
+		it('lists attribute clauses first, then resource clauses', () => {
+			expect(
+				conditionFiltersFromGroup({
+					attributes: ['gen_ai.', 'llm.'],
+					resource: ['service.name'],
+				}),
+			).toStrictEqual([
+				{ context: 'attribute', key: 'gen_ai.' },
+				{ context: 'attribute', key: 'llm.' },
+				{ context: 'resource', key: 'service.name' },
+			]);
+		});
+	});
+
+	describe('formatTimestamp', () => {
+		it('renders a dash for missing timestamps', () => {
+			expect(formatTimestamp(undefined)).toBe('—');
+		});
+	});
+
+	describe('draft-tree builders', () => {
+		it('builds a draft mapper node carrying server id, fieldContext and sources', () => {
+			expect(buildDraftMapper(mapper)).toStrictEqual({
+				localId: 'm1',
+				serverId: 'm1',
+				name: 'gen_ai.request.model',
+				fieldContext: FieldContext.attribute,
+				sources: [
+					{
+						key: 'high',
+						context: FieldContext.resource,
+						operation: MapperOperation.move,
+					},
+					{
+						key: 'mid',
+						context: FieldContext.attribute,
+						operation: MapperOperation.copy,
+					},
+					{
+						key: 'low',
+						context: FieldContext.attribute,
+						operation: MapperOperation.copy,
+					},
+				],
+				enabled: true,
+			});
+		});
+
+		it('builds a draft group node with nested mappers', () => {
+			const node = buildDraftGroup(group, [mapper]);
+			expect(node.localId).toBe('g1');
+			expect(node.attributes).toStrictEqual(['gen_ai.', 'llm.']);
+			expect(node.mappers).toHaveLength(1);
+			expect(node.mappers[0].localId).toBe('m1');
+		});
+	});
+
+	describe('node <-> form conversions', () => {
+		const node: DraftGroup = {
+			localId: 'g1',
+			serverId: 'g1',
+			name: 'OpenAI',
+			attributes: ['gen_ai.'],
+			resource: ['service.name'],
+			enabled: true,
+			mappers: [],
+		};
+
+		it('builds a form draft from a group node', () => {
+			expect(groupDraftFromNode(node)).toStrictEqual({
+				id: 'g1',
+				name: 'OpenAI',
+				attributes: ['gen_ai.'],
+				resource: ['service.name'],
+				enabled: true,
+			});
+		});
+
+		it('updates an existing group node, preserving its ids and mappers', () => {
+			const existing = { ...node, mappers: [buildDraftMapper(mapper)] };
+			const updated = nodeFromGroupDraft(
+				{
+					id: 'g1',
+					name: '  Renamed  ',
+					attributes: ['a', '', 'a'],
+					resource: ['service.name', ''],
+					enabled: false,
+				},
+				existing,
+			);
+			expect(updated.serverId).toBe('g1');
+			expect(updated.name).toBe('Renamed');
+			expect(updated.attributes).toStrictEqual(['a']);
+			expect(updated.resource).toStrictEqual(['service.name']);
+			expect(updated.mappers).toHaveLength(1);
+		});
+
+		it('round-trips a mapper node through the form and de-dups sources by key', () => {
+			const draft = mapperDraftFromNode(buildDraftMapper(mapper));
+			expect(draft.id).toBe('m1');
+			expect(draft.fieldContext).toBe(FieldContext.attribute);
+
+			const created = nodeFromMapperDraft(
+				mapperDraft({
+					id: null,
+					sources: [src('a', MapperOperation.move), src(' '), src('a'), src('b')],
+				}),
+			);
+			expect(created.serverId).toBeNull();
+			expect(created.localId).toMatch(/^local-mapper-/);
+			expect(created.sources).toStrictEqual([
+				{
+					key: 'a',
+					context: FieldContext.attribute,
+					operation: MapperOperation.move,
+				},
+				{
+					key: 'b',
+					context: FieldContext.attribute,
+					operation: MapperOperation.copy,
+				},
+			]);
+		});
+	});
+
+	describe('validation', () => {
+		it('validates a mapper draft (name + at least one keyed source)', () => {
+			expect(isMapperDraftValid(EMPTY_MAPPER_DRAFT)).toBe(false);
+			expect(
+				isMapperDraftValid(mapperDraft({ name: 'x', sources: [src(' ')] })),
+			).toBe(false);
+			expect(
+				isMapperDraftValid(mapperDraft({ name: 'x', sources: [src('a')] })),
+			).toBe(true);
+		});
+
+		it('validates a group draft (name only)', () => {
+			expect(isGroupDraftValid(EMPTY_GROUP_DRAFT)).toBe(false);
+			expect(
+				isGroupDraftValid({
+					id: null,
+					name: 'g',
+					attributes: [],
+					resource: [],
+					enabled: true,
+				}),
+			).toBe(true);
+		});
+	});
+
+	describe('API payload builders', () => {
+		it('derives descending priorities and carries per-source context/operation', () => {
+			const payload = buildPostableMapper(
+				mapperDraft({
+					name: ' target ',
+					fieldContext: FieldContext.resource,
+					sources: [
+						src('a', MapperOperation.move),
+						src('b', MapperOperation.copy, FieldContext.resource),
+					],
+				}),
+			);
+			expect(payload.name).toBe('target');
+			expect(payload.fieldContext).toBe(FieldContext.resource);
+			expect(payload.config.sources).toStrictEqual([
+				{
+					key: 'a',
+					context: FieldContext.attribute,
+					operation: MapperOperation.move,
+					priority: 2,
+				},
+				{
+					key: 'b',
+					context: FieldContext.resource,
+					operation: MapperOperation.copy,
+					priority: 1,
+				},
+			]);
+		});
+
+		it('omits name on the mapper update payload (immutable target)', () => {
+			const payload = buildUpdatableMapper(
+				mapperDraft({
+					id: 'm1',
+					enabled: false,
+					fieldContext: FieldContext.resource,
+				}),
+			);
+			expect(payload).not.toHaveProperty('name');
+			expect(payload.enabled).toBe(false);
+			expect(payload.fieldContext).toBe(FieldContext.resource);
+		});
+
+		it('cleans both attribute and resource condition keys', () => {
+			const payload = buildPostableGroup({
+				id: null,
+				name: 'g',
+				attributes: ['gen_ai.', '', 'gen_ai.'],
+				resource: ['service.name', '  ', 'service.name'],
+				enabled: true,
+			});
+			expect(payload.condition).toStrictEqual({
+				attributes: ['gen_ai.'],
+				resource: ['service.name'],
+			});
+		});
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/saveDraft.ts

@@ -0,0 +1,185 @@
+import {
+	SpantypesPostableSpanMapperDTO,
+	SpantypesPostableSpanMapperGroupDTO,
+	SpantypesUpdatableSpanMapperDTO,
+	SpantypesUpdatableSpanMapperGroupDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { DraftGroup, DraftMapper, SourceConfig } from './types';
+import {
+	buildPostableGroup,
+	buildPostableMapper,
+	buildUpdatableGroup,
+	buildUpdatableMapper,
+} from './utils';
+
+// Thin persistence surface the store wires to the generated mutations.
+// createGroup returns the new server id so its mappers can be created under it.
+export interface SaveMutations {
+	createGroup: (data: SpantypesPostableSpanMapperGroupDTO) => Promise<string>;
+	updateGroup: (
+		groupId: string,
+		data: SpantypesUpdatableSpanMapperGroupDTO,
+	) => Promise<void>;
+	deleteGroup: (groupId: string) => Promise<void>;
+	createMapper: (
+		groupId: string,
+		data: SpantypesPostableSpanMapperDTO,
+	) => Promise<void>;
+	updateMapper: (
+		groupId: string,
+		mapperId: string,
+		data: SpantypesUpdatableSpanMapperDTO,
+	) => Promise<void>;
+	deleteMapper: (groupId: string, mapperId: string) => Promise<void>;
+}
+
+function arraysEqual(a: string[], b: string[]): boolean {
+	return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+
+function sourcesEqual(a: SourceConfig[], b: SourceConfig[]): boolean {
+	return (
+		a.length === b.length &&
+		a.every(
+			(source, index) =>
+				source.key === b[index].key &&
+				source.context === b[index].context &&
+				source.operation === b[index].operation,
+		)
+	);
+}
+
+function groupChanged(snapshot: DraftGroup, draft: DraftGroup): boolean {
+	return (
+		snapshot.name !== draft.name ||
+		snapshot.enabled !== draft.enabled ||
+		!arraysEqual(snapshot.attributes, draft.attributes) ||
+		!arraysEqual(snapshot.resource, draft.resource)
+	);
+}
+
+function mapperChanged(snapshot: DraftMapper, draft: DraftMapper): boolean {
+	return (
+		snapshot.enabled !== draft.enabled ||
+		snapshot.fieldContext !== draft.fieldContext ||
+		!sourcesEqual(snapshot.sources, draft.sources)
+	);
+}
+
+function groupDraftOf(
+	node: DraftGroup,
+): Parameters<typeof buildPostableGroup>[0] {
+	return {
+		id: node.serverId,
+		name: node.name,
+		attributes: node.attributes,
+		resource: node.resource,
+		enabled: node.enabled,
+	};
+}
+
+function mapperDraftOf(
+	node: DraftMapper,
+): Parameters<typeof buildPostableMapper>[0] {
+	return {
+		id: node.serverId,
+		name: node.name,
+		fieldContext: node.fieldContext,
+		sources: node.sources,
+		enabled: node.enabled,
+	};
+}
+
+async function persistMappers(
+	groupServerId: string,
+	snapshotMappers: DraftMapper[],
+	draftMappers: DraftMapper[],
+	m: SaveMutations,
+): Promise<void> {
+	const snapById = new Map(
+		snapshotMappers
+			.filter((mapper) => mapper.serverId)
+			.map((mapper) => [mapper.serverId as string, mapper]),
+	);
+	const draftServerIds = new Set(
+		draftMappers
+			.filter((mapper) => mapper.serverId)
+			.map((mapper) => mapper.serverId as string),
+	);
+
+	// Deleted mappers.
+	await Promise.all(
+		snapshotMappers
+			.filter((mapper) => mapper.serverId && !draftServerIds.has(mapper.serverId))
+			.map((mapper) => m.deleteMapper(groupServerId, mapper.serverId as string)),
+	);
+
+	// Created + updated mappers (sequential to keep ordering deterministic).
+	for (const mapper of draftMappers) {
+		if (!mapper.serverId) {
+			// eslint-disable-next-line no-await-in-loop
+			await m.createMapper(
+				groupServerId,
+				buildPostableMapper(mapperDraftOf(mapper)),
+			);
+		} else {
+			const snap = snapById.get(mapper.serverId);
+			if (!snap || mapperChanged(snap, mapper)) {
+				// eslint-disable-next-line no-await-in-loop
+				await m.updateMapper(
+					groupServerId,
+					mapper.serverId,
+					buildUpdatableMapper(mapperDraftOf(mapper)),
+				);
+			}
+		}
+	}
+}
+
+// Diffs the staged tree against the server snapshot and issues the minimal set
+// of create/update/delete calls to reconcile them.
+export async function persistDraft(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+	m: SaveMutations,
+): Promise<void> {
+	const snapById = new Map(
+		snapshot
+			.filter((group) => group.serverId)
+			.map((group) => [group.serverId as string, group]),
+	);
+	const draftServerIds = new Set(
+		draft
+			.filter((group) => group.serverId)
+			.map((group) => group.serverId as string),
+	);
+
+	// Deleted groups (cascades mappers server-side).
+	await Promise.all(
+		snapshot
+			.filter((group) => group.serverId && !draftServerIds.has(group.serverId))
+			.map((group) => m.deleteGroup(group.serverId as string)),
+	);
+
+	for (const group of draft) {
+		if (!group.serverId) {
+			// eslint-disable-next-line no-await-in-loop
+			const newId = await m.createGroup(buildPostableGroup(groupDraftOf(group)));
+			// eslint-disable-next-line no-await-in-loop
+			await persistMappers(newId, [], group.mappers, m);
+			continue;
+		}
+
+		const snap = snapById.get(group.serverId);
+		if (!snap || groupChanged(snap, group)) {
+			// eslint-disable-next-line no-await-in-loop
+			await m.updateGroup(
+				group.serverId,
+				buildUpdatableGroup(groupDraftOf(group)),
+			);
+		}
+		// eslint-disable-next-line no-await-in-loop
+		await persistMappers(group.serverId, snap?.mappers ?? [], group.mappers, m);
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/types.ts

@@ -0,0 +1,84 @@
+import {
+	SpantypesFieldContextDTO,
+	SpantypesSpanMapperConfigDTO,
+	SpantypesSpanMapperDTO,
+	SpantypesSpanMapperGroupConditionDTO,
+	SpantypesSpanMapperGroupDTO,
+	SpantypesSpanMapperOperationDTO,
+	SpantypesSpanMapperSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type MapperGroup = SpantypesSpanMapperGroupDTO;
+export type MapperGroupCondition =
+	NonNullable<SpantypesSpanMapperGroupConditionDTO>;
+export type Mapper = SpantypesSpanMapperDTO;
+export type MapperConfig = SpantypesSpanMapperConfigDTO;
+export type MapperSource = SpantypesSpanMapperSourceDTO;
+
+export const FieldContext = SpantypesFieldContextDTO;
+export const MapperOperation = SpantypesSpanMapperOperationDTO;
+
+export type FieldContextValue = SpantypesFieldContextDTO;
+export type MapperOperationValue = SpantypesSpanMapperOperationDTO;
+
+// A single human-readable condition clause shown in the group's Filters column.
+export interface ConditionFilter {
+	context: 'attribute' | 'resource';
+	key: string;
+}
+
+export type MapperDraftMode = 'add' | 'edit';
+
+// One source candidate. `context` is where the key is read from (span
+// attribute or resource); `operation` is move (delete source) or copy (keep).
+// Priority is implicit in list order (top wins), derived on save.
+export interface SourceConfig {
+	key: string;
+	context: SpantypesFieldContextDTO;
+	operation: SpantypesSpanMapperOperationDTO;
+}
+
+// Editable form state for a mapper. `sources` is ordered highest priority
+// first; `fieldContext` is where the standardized target is written.
+export interface MapperDraft {
+	id: string | null;
+	name: string;
+	fieldContext: SpantypesFieldContextDTO;
+	sources: SourceConfig[];
+	enabled: boolean;
+}
+
+// Editable form state for a group. The group runs when a span carries a
+// span-attribute key matching `attributes` OR a resource key matching
+// `resource` (plain substring match).
+export interface GroupDraft {
+	id: string | null;
+	name: string;
+	attributes: string[];
+	resource: string[];
+	enabled: boolean;
+}
+
+// Working-copy node for a mapper. `localId` is a stable client key (the server
+// id once persisted, or a temporary id for not-yet-saved rows). `serverId` is
+// null until the row has been persisted.
+export interface DraftMapper {
+	localId: string;
+	serverId: string | null;
+	name: string;
+	fieldContext: SpantypesFieldContextDTO;
+	sources: SourceConfig[];
+	enabled: boolean;
+}
+
+// Working-copy node for a group, holding its mappers inline so the whole tree
+// can be staged locally and diffed against the server snapshot on save.
+export interface DraftGroup {
+	localId: string;
+	serverId: string | null;
+	name: string;
+	attributes: string[];
+	resource: string[];
+	enabled: boolean;
+	mappers: DraftMapper[];
+}

frontend/src/container/LLMObservabilityAttributeMapping/useAttributeMappingStore.ts

@@ -0,0 +1,287 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueries, useQueryClient } from 'react-query';
+import {
+	getListSpanMappersQueryOptions,
+	useCreateSpanMapper,
+	useCreateSpanMapperGroup,
+	useDeleteSpanMapper,
+	useDeleteSpanMapperGroup,
+	useListSpanMapperGroups,
+	useUpdateSpanMapper,
+	useUpdateSpanMapperGroup,
+} from 'api/generated/services/spanmapper';
+
+import { persistDraft, SaveMutations } from './saveDraft';
+import {
+	DraftGroup,
+	GroupDraft,
+	Mapper,
+	MapperDraft,
+	MapperGroup,
+} from './types';
+import {
+	buildDraftGroup,
+	nodeFromGroupDraft,
+	nodeFromMapperDraft,
+} from './utils';
+
+const GROUPS_KEY_PREFIX = '/api/v1/span_mapper_groups';
+
+function clone(groups: DraftGroup[]): DraftGroup[] {
+	return JSON.parse(JSON.stringify(groups)) as DraftGroup[];
+}
+
+export interface AttributeMappingStore {
+	groups: DraftGroup[];
+	isLoading: boolean;
+	isError: boolean;
+	isDirty: boolean;
+	isSaving: boolean;
+	saveError: string | null;
+	upsertGroup: (draft: GroupDraft) => void;
+	removeGroup: (localId: string) => void;
+	toggleGroup: (localId: string, enabled: boolean) => void;
+	upsertMapper: (groupLocalId: string, draft: MapperDraft) => void;
+	removeMapper: (groupLocalId: string, mapperLocalId: string) => void;
+	toggleMapper: (
+		groupLocalId: string,
+		mapperLocalId: string,
+		enabled: boolean,
+	) => void;
+	save: () => Promise<void>;
+	discard: () => void;
+}
+
+export function useAttributeMappingStore(): AttributeMappingStore {
+	const queryClient = useQueryClient();
+
+	const groupsQuery = useListSpanMapperGroups();
+	const serverGroups: MapperGroup[] = useMemo(
+		() => groupsQuery.data?.data?.items ?? [],
+		[groupsQuery.data],
+	);
+
+	const mapperQueries = useQueries(
+		serverGroups.map((group) =>
+			getListSpanMappersQueryOptions({ groupId: group.id }),
+		),
+	);
+
+	const mappersReady = mapperQueries.every((query) => !query.isLoading);
+	const ready = !groupsQuery.isLoading && mappersReady;
+
+	// Stable signature so the snapshot only rebuilds when server data changes.
+	const dataSignature = useMemo(
+		() =>
+			JSON.stringify(serverGroups) +
+			JSON.stringify(mapperQueries.map((query) => query.data?.data?.items ?? [])),
+		[serverGroups, mapperQueries],
+	);
+
+	const snapshot = useMemo<DraftGroup[]>(() => {
+		if (!ready) {
+			return [];
+		}
+		return serverGroups.map((group, index) =>
+			buildDraftGroup(
+				group,
+				(mapperQueries[index]?.data?.data?.items ?? []) as unknown as Mapper[],
+			),
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ready, dataSignature]);
+
+	const [draft, setDraft] = useState<DraftGroup[] | null>(null);
+
+	// Initialise the working copy once data is ready (and re-init after a save
+	// clears it). Never clobbers in-flight edits — only runs when draft is null.
+	useEffect(() => {
+		if (ready && draft === null) {
+			setDraft(clone(snapshot));
+		}
+	}, [ready, draft, snapshot]);
+
+	const [isSaving, setIsSaving] = useState(false);
+	const [saveError, setSaveError] = useState<string | null>(null);
+
+	const { mutateAsync: createGroup } = useCreateSpanMapperGroup();
+	const { mutateAsync: updateGroup } = useUpdateSpanMapperGroup();
+	const { mutateAsync: deleteGroup } = useDeleteSpanMapperGroup();
+	const { mutateAsync: createMapper } = useCreateSpanMapper();
+	const { mutateAsync: updateMapper } = useUpdateSpanMapper();
+	const { mutateAsync: deleteMapper } = useDeleteSpanMapper();
+
+	const mutations: SaveMutations = useMemo(
+		() => ({
+			createGroup: async (data): Promise<string> => {
+				const result = await createGroup({ data });
+				return result.data.id;
+			},
+			updateGroup: async (groupId, data): Promise<void> => {
+				await updateGroup({ pathParams: { groupId }, data });
+			},
+			deleteGroup: async (groupId): Promise<void> => {
+				await deleteGroup({ pathParams: { groupId } });
+			},
+			createMapper: async (groupId, data): Promise<void> => {
+				await createMapper({ pathParams: { groupId }, data });
+			},
+			updateMapper: async (groupId, mapperId, data): Promise<void> => {
+				await updateMapper({ pathParams: { groupId, mapperId }, data });
+			},
+			deleteMapper: async (groupId, mapperId): Promise<void> => {
+				await deleteMapper({ pathParams: { groupId, mapperId } });
+			},
+		}),
+		[
+			createGroup,
+			updateGroup,
+			deleteGroup,
+			createMapper,
+			updateMapper,
+			deleteMapper,
+		],
+	);
+
+	const upsertGroup = useCallback((groupDraft: GroupDraft): void => {
+		setDraft((prev) => {
+			const groups = prev ?? [];
+			if (groupDraft.id) {
+				return groups.map((group) =>
+					group.localId === groupDraft.id
+						? nodeFromGroupDraft(groupDraft, group)
+						: group,
+				);
+			}
+			return [...groups, nodeFromGroupDraft(groupDraft)];
+		});
+	}, []);
+
+	const removeGroup = useCallback((localId: string): void => {
+		setDraft((prev) => (prev ?? []).filter((group) => group.localId !== localId));
+	}, []);
+
+	const toggleGroup = useCallback((localId: string, enabled: boolean): void => {
+		setDraft((prev) =>
+			(prev ?? []).map((group) =>
+				group.localId === localId ? { ...group, enabled } : group,
+			),
+		);
+	}, []);
+
+	const upsertMapper = useCallback(
+		(groupLocalId: string, mapperDraft: MapperDraft): void => {
+			setDraft((prev) =>
+				(prev ?? []).map((group) => {
+					if (group.localId !== groupLocalId) {
+						return group;
+					}
+					if (mapperDraft.id) {
+						return {
+							...group,
+							mappers: group.mappers.map((mapper) =>
+								mapper.localId === mapperDraft.id
+									? nodeFromMapperDraft(mapperDraft, mapper)
+									: mapper,
+							),
+						};
+					}
+					return {
+						...group,
+						mappers: [...group.mappers, nodeFromMapperDraft(mapperDraft)],
+					};
+				}),
+			);
+		},
+		[],
+	);
+
+	const removeMapper = useCallback(
+		(groupLocalId: string, mapperLocalId: string): void => {
+			setDraft((prev) =>
+				(prev ?? []).map((group) =>
+					group.localId === groupLocalId
+						? {
+								...group,
+								mappers: group.mappers.filter(
+									(mapper) => mapper.localId !== mapperLocalId,
+								),
+							}
+						: group,
+				),
+			);
+		},
+		[],
+	);
+
+	const toggleMapper = useCallback(
+		(groupLocalId: string, mapperLocalId: string, enabled: boolean): void => {
+			setDraft((prev) =>
+				(prev ?? []).map((group) =>
+					group.localId === groupLocalId
+						? {
+								...group,
+								mappers: group.mappers.map((mapper) =>
+									mapper.localId === mapperLocalId ? { ...mapper, enabled } : mapper,
+								),
+							}
+						: group,
+				),
+			);
+		},
+		[],
+	);
+
+	const discard = useCallback((): void => {
+		setSaveError(null);
+		setDraft(clone(snapshot));
+	}, [snapshot]);
+
+	const save = useCallback(async (): Promise<void> => {
+		if (!draft) {
+			return;
+		}
+		setIsSaving(true);
+		setSaveError(null);
+		try {
+			await persistDraft(snapshot, draft, mutations);
+			await queryClient.invalidateQueries({
+				predicate: (query) =>
+					typeof query.queryKey?.[0] === 'string' &&
+					(query.queryKey[0] as string).startsWith(GROUPS_KEY_PREFIX),
+			});
+			// Re-initialise the working copy from the freshly-fetched server data.
+			setDraft(null);
+			toast.success('Attribute mapping changes saved');
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Save failed';
+			setSaveError(message);
+			toast.error(`Failed to save changes: ${message}`);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [draft, snapshot, mutations, queryClient]);
+
+	const isDirty = useMemo(
+		() => draft !== null && JSON.stringify(draft) !== JSON.stringify(snapshot),
+		[draft, snapshot],
+	);
+
+	return {
+		groups: draft ?? [],
+		isLoading: !ready || draft === null,
+		isError: groupsQuery.isError,
+		isDirty,
+		isSaving,
+		saveError,
+		upsertGroup,
+		removeGroup,
+		toggleGroup,
+		upsertMapper,
+		removeMapper,
+		toggleMapper,
+		save,
+		discard,
+	};
+}

frontend/src/container/LLMObservabilityAttributeMapping/useGroupFormDrawer.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+
+import { DraftGroup, GroupDraft, MapperDraftMode } from './types';
+import { EMPTY_GROUP_DRAFT, groupDraftFromNode } from './utils';
+
+interface UseGroupFormDrawerResult {
+	isOpen: boolean;
+	mode: MapperDraftMode;
+	draft: GroupDraft;
+	setDraft: (next: GroupDraft) => void;
+	openForAdd: () => void;
+	openForEdit: (group: DraftGroup) => void;
+	close: () => void;
+}
+
+// Form state for the group drawer. Persistence is staged through the store,
+// so this hook only owns open/draft/mode.
+export function useGroupFormDrawer(): UseGroupFormDrawerResult {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [mode, setMode] = useState<MapperDraftMode>('add');
+	const [draft, setDraft] = useState<GroupDraft>(EMPTY_GROUP_DRAFT);
+
+	const openForAdd = useCallback((): void => {
+		setMode('add');
+		setDraft(EMPTY_GROUP_DRAFT);
+		setIsOpen(true);
+	}, []);
+
+	const openForEdit = useCallback((group: DraftGroup): void => {
+		setMode('edit');
+		setDraft(groupDraftFromNode(group));
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback((): void => {
+		setIsOpen(false);
+	}, []);
+
+	return { isOpen, mode, draft, setDraft, openForAdd, openForEdit, close };
+}

frontend/src/container/LLMObservabilityAttributeMapping/useMapperFormDrawer.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+
+import { DraftMapper, MapperDraft, MapperDraftMode } from './types';
+import { EMPTY_MAPPER_DRAFT, mapperDraftFromNode } from './utils';
+
+interface UseMapperFormDrawerResult {
+	isOpen: boolean;
+	mode: MapperDraftMode;
+	draft: MapperDraft;
+	setDraft: (next: MapperDraft) => void;
+	openForAdd: () => void;
+	openForEdit: (mapper: DraftMapper) => void;
+	close: () => void;
+}
+
+// Form state for the mapper drawer. Persistence is staged through the store,
+// so this hook only owns open/draft/mode.
+export function useMapperFormDrawer(): UseMapperFormDrawerResult {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [mode, setMode] = useState<MapperDraftMode>('add');
+	const [draft, setDraft] = useState<MapperDraft>(EMPTY_MAPPER_DRAFT);
+
+	const openForAdd = useCallback((): void => {
+		setMode('add');
+		setDraft(EMPTY_MAPPER_DRAFT);
+		setIsOpen(true);
+	}, []);
+
+	const openForEdit = useCallback((mapper: DraftMapper): void => {
+		setMode('edit');
+		setDraft(mapperDraftFromNode(mapper));
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback((): void => {
+		setIsOpen(false);
+	}, []);
+
+	return { isOpen, mode, draft, setDraft, openForAdd, openForEdit, close };
+}

frontend/src/container/LLMObservabilityAttributeMapping/utils.ts

@@ -0,0 +1,262 @@
+import {
+	SpantypesPostableSpanMapperDTO,
+	SpantypesPostableSpanMapperGroupDTO,
+	SpantypesUpdatableSpanMapperDTO,
+	SpantypesUpdatableSpanMapperGroupDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import dayjs from 'dayjs';
+import { v4 as uuid } from 'uuid';
+
+import {
+	ConditionFilter,
+	DraftGroup,
+	DraftMapper,
+	FieldContext,
+	GroupDraft,
+	Mapper,
+	MapperDraft,
+	MapperGroup,
+	MapperOperation,
+	SourceConfig,
+} from './types';
+
+// Client-side id for not-yet-persisted rows. Prefixed so it never collides
+// with a server UUID and is easy to spot in logs.
+export function genLocalId(prefix: 'group' | 'mapper'): string {
+	return `local-${prefix}-${uuid()}`;
+}
+
+// Trimmed, de-duplicated, non-empty keys preserving input order.
+export function cleanKeys(keys: string[]): string[] {
+	const seen = new Set<string>();
+	const result: string[] = [];
+	keys.forEach((raw) => {
+		const key = raw.trim();
+		if (key && !seen.has(key)) {
+			seen.add(key);
+			result.push(key);
+		}
+	});
+	return result;
+}
+
+// Display clauses for a group's staged condition keys (span attribute keys
+// first, then resource keys).
+export function conditionFiltersFromGroup(group: {
+	attributes: string[];
+	resource: string[];
+}): ConditionFilter[] {
+	return [
+		...group.attributes.map((key) => ({ context: 'attribute' as const, key })),
+		...group.resource.map((key) => ({ context: 'resource' as const, key })),
+	];
+}
+
+// Source configs for a mapper, highest priority first (first match wins at
+// evaluation time).
+export function getMapperSources(mapper: Mapper): SourceConfig[] {
+	const sources = mapper.config?.sources ?? [];
+	return [...sources]
+		.sort((a, b) => b.priority - a.priority)
+		.map((source) => ({
+			key: source.key,
+			context: source.context,
+			operation: source.operation,
+		}));
+}
+
+// A blank source row. New sources default to `move` so the original key is
+// removed once standardized (the PRD default — minimizes duplication).
+export function createEmptySource(): SourceConfig {
+	return {
+		key: '',
+		context: FieldContext.attribute,
+		operation: MapperOperation.move,
+	};
+}
+
+export function formatTimestamp(iso?: string): string {
+	if (!iso) {
+		return '—';
+	}
+	return dayjs(iso).format('MMM D, YYYY HH:mm');
+}
+
+export const EMPTY_MAPPER_DRAFT: MapperDraft = {
+	id: null,
+	name: '',
+	fieldContext: FieldContext.attribute,
+	sources: [createEmptySource()],
+	enabled: true,
+};
+
+// Trimmed, de-duplicated (by key), non-empty sources in priority order,
+// preserving each source's context and operation.
+export function getCleanSources(draft: MapperDraft): SourceConfig[] {
+	const seen = new Set<string>();
+	const result: SourceConfig[] = [];
+	draft.sources.forEach((source) => {
+		const key = source.key.trim();
+		if (key && !seen.has(key)) {
+			seen.add(key);
+			result.push({ ...source, key });
+		}
+	});
+	return result;
+}
+
+export function isMapperDraftValid(draft: MapperDraft): boolean {
+	return draft.name.trim().length > 0 && getCleanSources(draft).length > 0;
+}
+
+// Priority is derived from list order so the first row wins.
+function buildSources(
+	draft: MapperDraft,
+): SpantypesPostableSpanMapperDTO['config']['sources'] {
+	const sources = getCleanSources(draft);
+	return sources.map((source, index) => ({
+		key: source.key,
+		context: source.context,
+		operation: source.operation,
+		priority: sources.length - index,
+	}));
+}
+
+export function buildPostableMapper(
+	draft: MapperDraft,
+): SpantypesPostableSpanMapperDTO {
+	return {
+		name: draft.name.trim(),
+		fieldContext: draft.fieldContext,
+		enabled: draft.enabled,
+		config: { sources: buildSources(draft) },
+	};
+}
+
+// The target name is immutable on update (UpdatableSpanMapper has no name).
+export function buildUpdatableMapper(
+	draft: MapperDraft,
+): SpantypesUpdatableSpanMapperDTO {
+	return {
+		fieldContext: draft.fieldContext,
+		enabled: draft.enabled,
+		config: { sources: buildSources(draft) },
+	};
+}
+
+export const EMPTY_GROUP_DRAFT: GroupDraft = {
+	id: null,
+	name: '',
+	attributes: [''],
+	resource: [],
+	enabled: true,
+};
+
+export function isGroupDraftValid(draft: GroupDraft): boolean {
+	return draft.name.trim().length > 0;
+}
+
+export function buildPostableGroup(
+	draft: GroupDraft,
+): SpantypesPostableSpanMapperGroupDTO {
+	return {
+		name: draft.name.trim(),
+		enabled: draft.enabled,
+		condition: {
+			attributes: cleanKeys(draft.attributes),
+			resource: cleanKeys(draft.resource),
+		},
+	};
+}
+
+// A full group payload is also a valid partial-update payload (all updatable
+// fields are present), so we reuse the postable builder.
+export function buildUpdatableGroup(
+	draft: GroupDraft,
+): SpantypesUpdatableSpanMapperGroupDTO {
+	return buildPostableGroup(draft);
+}
+
+// ---- working-copy (draft tree) helpers ----
+
+export function buildDraftMapper(mapper: Mapper): DraftMapper {
+	return {
+		localId: mapper.id,
+		serverId: mapper.id,
+		name: mapper.name,
+		fieldContext: mapper.fieldContext,
+		sources: getMapperSources(mapper),
+		enabled: mapper.enabled,
+	};
+}
+
+export function buildDraftGroup(
+	group: MapperGroup,
+	mappers: Mapper[],
+): DraftGroup {
+	return {
+		localId: group.id,
+		serverId: group.id,
+		name: group.name,
+		attributes: group.condition?.attributes ?? [],
+		resource: group.condition?.resource ?? [],
+		enabled: group.enabled,
+		mappers: mappers.map(buildDraftMapper),
+	};
+}
+
+// DraftGroup -> editable form state (id carries the localId).
+export function groupDraftFromNode(group: DraftGroup): GroupDraft {
+	return {
+		id: group.localId,
+		name: group.name,
+		attributes: group.attributes.length > 0 ? group.attributes : [''],
+		resource: group.resource,
+		enabled: group.enabled,
+	};
+}
+
+// DraftMapper -> editable form state (id carries the localId).
+export function mapperDraftFromNode(mapper: DraftMapper): MapperDraft {
+	return {
+		id: mapper.localId,
+		name: mapper.name,
+		fieldContext: mapper.fieldContext,
+		sources:
+			mapper.sources.length > 0
+				? mapper.sources.map((source) => ({ ...source }))
+				: [createEmptySource()],
+		enabled: mapper.enabled,
+	};
+}
+
+// Form state -> working-copy node. Reuses cleanKeys/getCleanSourceKeys so the
+// staged tree already holds normalized values.
+export function nodeFromGroupDraft(
+	draft: GroupDraft,
+	existing?: DraftGroup,
+): DraftGroup {
+	return {
+		localId: existing?.localId ?? genLocalId('group'),
+		serverId: existing?.serverId ?? null,
+		name: draft.name.trim(),
+		attributes: cleanKeys(draft.attributes),
+		resource: cleanKeys(draft.resource),
+		enabled: draft.enabled,
+		mappers: existing?.mappers ?? [],
+	};
+}
+
+export function nodeFromMapperDraft(
+	draft: MapperDraft,
+	existing?: DraftMapper,
+): DraftMapper {
+	return {
+		localId: existing?.localId ?? genLocalId('mapper'),
+		serverId: existing?.serverId ?? null,
+		name: draft.name.trim(),
+		fieldContext: draft.fieldContext,
+		sources: getCleanSources(draft),
+		enabled: draft.enabled,
+	};
+}

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -206,6 +206,7 @@ export const routesToSkip = [
 	ROUTES.METER,
 	ROUTES.METER_EXPLORER_VIEWS,
 	ROUTES.SOMETHING_WENT_WRONG,
+	ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/QueryVariableFields.tsx

@@ -2,16 +2,15 @@ import { useState } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { DashboardtypesListVariableSpecSortDTO as VariableSortDTO } from 'api/generated/services/sigNoz.schemas';
 import Editor from 'components/Editor';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
 
-import { sortDirectionOf } from '../variableModel';
+import type { VariableSort } from '../variableModel';
 import styles from './VariableForm.module.scss';
 
 interface QueryVariableFieldsProps {
 	queryValue: string;
-	sort: VariableSortDTO;
+	sort: VariableSort;
 	onChange: (queryValue: string) => void;
 	onPreview: (values: (string | number)[]) => void;
 	onError: (message: string | null) => void;
@@ -37,10 +36,7 @@ function QueryVariableFields({
 			});
 			if (res.statusCode === 200 && res.payload) {
 				onPreview(
-					sortValues(res.payload.variableValues ?? [], sortDirectionOf(sort)) as (
-						| string
-						| number
-					)[],
+					sortValues(res.payload.variableValues ?? [], sort) as (string | number)[],
 				);
 			} else {
 				onError(res.error || 'Failed to run query');

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.tsx

@@ -12,12 +12,10 @@ import { Collapse, Input as AntdInput, Select } from 'antd';
 import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
 
-import { DashboardtypesListVariableSpecSortDTO as VariableSortDTO } from 'api/generated/services/sigNoz.schemas';
-
 import {
-	sortDirectionOf,
 	VARIABLE_SORTS,
 	type VariableFormModel,
+	type VariableSort,
 	type VariableType,
 } from '../variableModel';
 import DynamicVariableFields from './DynamicVariableFields';
@@ -25,16 +23,10 @@ import QueryVariableFields from './QueryVariableFields';
 import VariableTypeSelector from './VariableTypeSelector';
 import styles from './VariableForm.module.scss';
 
-const SORT_LABEL: Record<VariableSortDTO, string> = {
-	[VariableSortDTO.none]: 'Disabled',
-	[VariableSortDTO['alphabetical-asc']]: 'Alphabetical (asc)',
-	[VariableSortDTO['alphabetical-desc']]: 'Alphabetical (desc)',
-	[VariableSortDTO['numerical-asc']]: 'Numerical (asc)',
-	[VariableSortDTO['numerical-desc']]: 'Numerical (desc)',
-	[VariableSortDTO['alphabetical-ci-asc']]:
-		'Alphabetical, case-insensitive (asc)',
-	[VariableSortDTO['alphabetical-ci-desc']]:
-		'Alphabetical, case-insensitive (desc)',
+const SORT_LABEL: Record<VariableSort, string> = {
+	DISABLED: 'Disabled',
+	ASC: 'Ascending',
+	DESC: 'Descending',
 };
 
 function getNameError(name: string, existingNames: string[]): string | null {
@@ -99,10 +91,7 @@ function VariableForm({
 	const onCustomChange = (value: string): void => {
 		set({ customValue: value });
 		setPreviewValues(
-			sortValues(commaValuesParser(value), sortDirectionOf(model.sort)) as (
-				| string
-				| number
-			)[],
+			sortValues(commaValuesParser(value), model.sort) as (string | number)[],
 		);
 	};
 
@@ -270,7 +259,7 @@ function VariableForm({
 										label: SORT_LABEL[sort],
 										value: sort,
 									}))}
-									onChange={(value): void => set({ sort: value as VariableSortDTO })}
+									onChange={(value): void => set({ sort: value as VariableSort })}
 									testId="variable-sort-select"
 								/>
 							</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -1,17 +1,16 @@
 import {
-	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind as TextEnvelopeKind,
+	DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind as TextEnvelopeKind,
 	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind as ListEnvelopeKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTOKind as CustomPluginKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind as DynamicPluginKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTOKind as QueryPluginKind,
-	DashboardtypesListVariableSpecSortDTO as VariableSortDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type {
 	DashboardtypesListVariableSpecDTO,
 	DashboardtypesVariableDTO,
 	DashboardtypesVariablePluginDTO,
-	DashboardtypesTextVariableSpecDTO,
+	DashboardTextVariableSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
 import {
@@ -19,6 +18,7 @@ import {
 	PLUGIN_KIND,
 	type TelemetrySignal,
 	type VariableFormModel,
+	type VariableSort,
 } from './variableModel';
 
 /** DTO envelope → flat form model (for display / editing). */
@@ -35,7 +35,7 @@ export function dtoToFormModel(
 
 	// Text variable — a distinct envelope (no list plugin).
 	if (dto.kind === TextEnvelopeKind.TextVariable) {
-		const spec = dto.spec as DashboardtypesTextVariableSpecDTO;
+		const spec = dto.spec as DashboardTextVariableSpecDTO;
 		return {
 			...common,
 			type: 'TEXT',
@@ -50,7 +50,7 @@ export function dtoToFormModel(
 		...common,
 		multiSelect: spec.allowMultiple ?? false,
 		showAllOption: spec.allowAllValue ?? false,
-		sort: spec.sort ?? VariableSortDTO.none,
+		sort: (spec.sort as VariableSort) ?? 'DISABLED',
 		defaultValue: spec.defaultValue,
 	};
 	const plugin = spec.plugin;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableModel.ts

@@ -1,6 +1,4 @@
-import { DashboardtypesListVariableSpecSortDTO as VariableSortDTO } from 'api/generated/services/sigNoz.schemas';
 import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
-import type { TSortVariableValuesType } from 'types/api/dashboard/getAll';
 
 /**
  * Flat, UI-friendly representation of a V2 dashboard variable. The wire format
@@ -10,6 +8,8 @@ import type { TSortVariableValuesType } from 'types/api/dashboard/getAll';
 
 export type VariableType = 'QUERY' | 'CUSTOM' | 'TEXT' | 'DYNAMIC';
 
+export type VariableSort = 'DISABLED' | 'ASC' | 'DESC';
+
 export type TelemetrySignal = 'traces' | 'logs' | 'metrics';
 
 /** Wire `kind` discriminators (string values of the generated enums). */
@@ -24,20 +24,7 @@ export const PLUGIN_KIND = {
 	DYNAMIC: 'signoz/DynamicVariable',
 } as const;
 
-export const VARIABLE_SORTS: VariableSortDTO[] = Object.values(VariableSortDTO);
-
-/** Direction the preview sorter should apply for a given wire sort value. */
-export function sortDirectionOf(
-	sort: VariableSortDTO,
-): TSortVariableValuesType {
-	if (sort.endsWith('-asc')) {
-		return 'ASC';
-	}
-	if (sort.endsWith('-desc')) {
-		return 'DESC';
-	}
-	return 'DISABLED';
-}
+export const VARIABLE_SORTS: VariableSort[] = ['DISABLED', 'ASC', 'DESC'];
 
 export const TELEMETRY_SIGNALS: TelemetrySignal[] = [
 	'traces',
@@ -55,7 +42,7 @@ export interface VariableFormModel {
 	// List-variable common fields (Query / Custom / Dynamic).
 	multiSelect: boolean;
 	showAllOption: boolean;
-	sort: VariableSortDTO;
+	sort: VariableSort;
 
 	// Type-specific.
 	queryValue: string; // QUERY
@@ -80,7 +67,7 @@ export function emptyVariableFormModel(): VariableFormModel {
 		type: 'QUERY',
 		multiSelect: false,
 		showAllOption: false,
-		sort: VariableSortDTO.none,
+		sort: 'DISABLED',
 		queryValue: '',
 		customValue: '',
 		textValue: '',

frontend/src/pages/LLMObservabilityAttributeMapping/index.tsx

@@ -0,0 +1,7 @@
+import LLMObservabilityAttributeMapping from 'container/LLMObservabilityAttributeMapping/LLMObservabilityAttributeMapping';
+
+function LLMObservabilityAttributeMappingPage(): JSX.Element {
+	return <LLMObservabilityAttributeMapping />;
+}
+
+export default LLMObservabilityAttributeMappingPage;

frontend/src/types/api/alerts/convert.ts

@@ -69,24 +69,19 @@ function stripUndefinedLabels(
 export function toPostableRuleDTO(
 	local: PostableAlertRuleV2,
 ): RuletypesPostableRuleDTO {
-	const payload: Record<keyof RuletypesPostableRuleDTO, any> = {
+	const payload = {
 		alert: local.alert,
 		alertType: toAlertTypeDTO(local.alertType),
 		ruleType: toRuleTypeDTO(local.ruleType),
 		condition: local.condition,
 		annotations: local.annotations,
 		labels: stripUndefinedLabels(local.labels),
-		evalWindow: (local as unknown as RuletypesPostableRuleDTO).evalWindow,
-		frequency: (local as unknown as RuletypesPostableRuleDTO).frequency,
-		preferredChannels: (local as unknown as RuletypesPostableRuleDTO)
-			.preferredChannels,
 		notificationSettings: local.notificationSettings,
 		evaluation: local.evaluation,
 		schemaVersion: local.schemaVersion,
 		source: local.source,
 		version: local.version,
 		disabled: local.disabled,
-		description: (local as unknown as RuletypesPostableRuleDTO).description,
 	};
 	return payload as unknown as RuletypesPostableRuleDTO;
 }
@@ -94,7 +89,7 @@ export function toPostableRuleDTO(
 export function toPostableRuleDTOFromAlertDef(
 	local: AlertDef,
 ): RuletypesPostableRuleDTO {
-	const payload: Record<keyof RuletypesPostableRuleDTO, any> = {
+	const payload = {
 		alert: local.alert,
 		alertType: toAlertTypeDTO(local.alertType),
 		ruleType: toRuleTypeDTO(local.ruleType),
@@ -104,16 +99,11 @@ export function toPostableRuleDTOFromAlertDef(
 		evalWindow: local.evalWindow,
 		frequency: local.frequency,
 		preferredChannels: local.preferredChannels,
-		notificationSettings: (local as unknown as RuletypesPostableRuleDTO)
-			.notificationSettings,
-		evaluation: (local as unknown as RuletypesPostableRuleDTO).evaluation,
-		schemaVersion: (local as unknown as RuletypesPostableRuleDTO).schemaVersion,
 		source: local.source,
 		version: local.version,
 		disabled: local.disabled,
-		description: (local as unknown as RuletypesPostableRuleDTO).description,
 	};
-	return payload;
+	return payload as unknown as RuletypesPostableRuleDTO;
 }
 
 export function fromRuleDTOToPostableRuleV2(

frontend/src/utils/permission/index.ts

@@ -136,4 +136,5 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
+	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: ['ADMIN', 'EDITOR', 'VIEWER'],
 };

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -38,7 +38,7 @@ func newTestDashboardV2(t *testing.T, orgID valuer.UUID, source Source) *Dashboa
 								FillMode:          FillModeSolid,
 								SpanGaps:          SpanGaps{FillLessThan: valuer.MustParseTextDuration("60s")},
 							},
-							Legend: Legend{Position: LegendPositionBottom, Mode: LegendModeList},
+							Legend: Legend{Position: LegendPositionBottom},
 						},
 					},
 					Queries: []Query{

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -48,42 +48,7 @@ func (d *DashboardSpec) UnmarshalJSON(data []byte) error {
 // ══════════════════════════════════════════════
 
 func (d *DashboardSpec) Validate() error {
-	if err := d.validateVariables(); err != nil {
-		return err
-	}
-	if err := d.validatePanels(); err != nil {
-		return err
-	}
-	return d.validateLayouts()
-}
-
-// validateVariables rejects two variables sharing the same name.
-func (d *DashboardSpec) validateVariables() error {
-	seen := make(map[string]struct{}, len(d.Variables))
-	for i, v := range d.Variables {
-		var name string
-		switch s := v.Spec.(type) {
-		case *ListVariableSpec:
-			name = s.Name
-		case *TextVariableSpec:
-			name = s.Name
-		default:
-			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
-			return errors.NewInternalf(errors.CodeInternal, "spec.variables[%d].spec: unexpected variable spec type %T", i, v.Spec)
-		}
-		if _, dup := seen[name]; dup {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.variables[%d]: duplicate variable name %q", i, name)
-		}
-		seen[name] = struct{}{}
-	}
-	return nil
-}
-
-func (d *DashboardSpec) validatePanels() error {
 	for key, panel := range d.Panels {
-		if err := common.ValidateID(key); err != nil {
-			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "spec.panels: %s", err.Error())
-		}
 		if panel == nil {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.panels.%s: panel must not be null", key)
 		}
@@ -104,13 +69,6 @@ func (d *DashboardSpec) validatePanels() error {
 }
 
 func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
-	compositeSubQueryTypeToPluginKind := map[qb.QueryType]QueryPluginKind{
-		qb.QueryTypeBuilder:       QueryKindBuilder,
-		qb.QueryTypeFormula:       QueryKindFormula,
-		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
-		qb.QueryTypePromQL:        QueryKindPromQL,
-		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
-	}
 	if !slices.Contains(allowed, plugin.Kind) {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
 			"%s: query kind %q is not supported by panel kind %q", path, plugin.Kind, panelKind)
@@ -138,35 +96,12 @@ func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind,
 	return nil
 }
 
-// validateLayouts rejects grid items referencing a panel that doesn't exist.
-func (d *DashboardSpec) validateLayouts() error {
-	for li, layout := range d.Layouts {
-		grid, ok := layout.Spec.(*dashboard.GridLayoutSpec)
-		if !ok {
-			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
-			return errors.NewInternalf(errors.CodeInternal, "spec.layouts[%d].spec: unexpected layout spec type %T", li, layout.Spec)
-		}
-		for ii, item := range grid.Items {
-			path := fmt.Sprintf("spec.layouts[%d].spec.items[%d].content", li, ii)
-			if item.Content == nil {
-				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: content reference is required", path)
-			}
-			key, err := panelKeyFromRef(item.Content.Path, item.Content.Ref, path)
-			if err != nil {
-				return err
-			}
-			if _, ok := d.Panels[key]; !ok {
-				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: references unknown panel %q", path, key)
-			}
-		}
+var (
+	compositeSubQueryTypeToPluginKind = map[qb.QueryType]QueryPluginKind{
+		qb.QueryTypeBuilder:       QueryKindBuilder,
+		qb.QueryTypeFormula:       QueryKindFormula,
+		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
+		qb.QueryTypePromQL:        QueryKindPromQL,
+		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
 	}
-	return nil
-}
-
-// panelKeyFromRef extracts <key> from a "#/spec/panels/<key>" content ref.
-func panelKeyFromRef(refPath []string, ref string, path string) (string, error) {
-	if len(refPath) != 3 || refPath[0] != "spec" || refPath[1] != "panels" {
-		return "", errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: %q must reference a panel as \"#/spec/panels/<key>\"", path, ref)
-	}
-	return refPath[2], nil
-}
+)

pkg/types/dashboardtypes/perses_dashboard_patch.go

@@ -73,7 +73,7 @@ func (p PatchableDashboardV2) Apply(existing *DashboardV2) (*UpdatableDashboardV
 	}
 	patched, err := p.patch.ApplyWithOptions(raw, &jsonpatch.ApplyOptions{AllowMissingPathOnRemove: true, EnsurePathExistsOnAdd: true})
 	if err != nil {
-		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard").WithAdditional(err.Error())
+		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard")
 	}
 	out := &UpdatableDashboardV2{}
 	if err := json.Unmarshal(patched, out); err != nil {

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -405,7 +405,6 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 		out, err := decode(t, `[
 			{"op": "replace", "path": "/spec/display/name", "value": "Multi-step"},
 			{"op": "remove",  "path": "/spec/panels/p2"},
-			{"op": "remove",  "path": "/spec/layouts/0/spec/items/1"},
 			{"op": "add",     "path": "/tags/-", "value": {"key": "env", "value": "staging"}}
 		]`).Apply(base)
 		require.NoError(t, err)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -112,174 +112,6 @@ func TestValidateOnlyVariables(t *testing.T) {
 	require.NoError(t, err, "expected valid")
 }
 
-func TestInvalidateDuplicateVariableNames(t *testing.T) {
-	data := []byte(`{
-		"variables": [
-			{
-				"kind": "TextVariable",
-				"spec": {"name": "env", "value": "prod"}
-			},
-			{
-				"kind": "ListVariable",
-				"spec": {
-					"name": "env",
-					"allowAllValue": false,
-					"allowMultiple": false,
-					"plugin": {
-						"kind": "signoz/DynamicVariable",
-						"spec": {"name": "service.name", "signal": "metrics"}
-					}
-				}
-			}
-		],
-		"layouts": []
-	}`)
-	_, err := unmarshalDashboard(data)
-	require.Error(t, err, "expected error for duplicate variable name")
-	require.Contains(t, err.Error(), `duplicate variable name "env"`)
-}
-
-func TestInvalidateVariableNameWithInvalidChars(t *testing.T) {
-	listVarWithName := func(name string) []byte {
-		return []byte(`{
-			"variables": [
-				{
-					"kind": "ListVariable",
-					"spec": {
-						"name": "` + name + `",
-						"allowAllValue": false,
-						"allowMultiple": false,
-						"plugin": {
-							"kind": "signoz/DynamicVariable",
-							"spec": {"name": "service.name", "signal": "metrics"}
-						}
-					}
-				}
-			],
-			"layouts": []
-		}`)
-	}
-	for _, name := range []string{"my var", "cost$", "bad!", "a/b"} {
-		t.Run(name, func(t *testing.T) {
-			_, err := unmarshalDashboard(listVarWithName(name))
-			require.Error(t, err, "expected error for invalid variable name %q", name)
-			require.Contains(t, err.Error(), "is not a correct name")
-		})
-	}
-	for _, name := range []string{"service", "my_var", "MY_VAR", "MixedCase9", "with-hyphen", "with.dot"} {
-		t.Run(name, func(t *testing.T) {
-			_, err := unmarshalDashboard(listVarWithName(name))
-			require.NoError(t, err, "expected valid variable name %q", name)
-		})
-	}
-	t.Run("digits only", func(t *testing.T) {
-		_, err := unmarshalDashboard(listVarWithName("123"))
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "cannot contain only digits")
-	})
-}
-
-func TestInvalidatePanelKey(t *testing.T) {
-	data := []byte(`{
-		"panels": {
-			"bad key!": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
-					"queries": [{
-						"kind": "time_series",
-						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-							"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]
-						}}}
-					}]
-				}
-			}
-		},
-		"layouts": []
-	}`)
-	_, err := unmarshalDashboard(data)
-	require.Error(t, err, "expected error for invalid panel key")
-	require.Contains(t, err.Error(), "is not a correct name")
-}
-
-func TestInvalidateListVariableCrossFields(t *testing.T) {
-	listVar := func(specFields string) []byte {
-		return []byte(`{
-			"variables": [
-				{
-					"kind": "ListVariable",
-					"spec": {
-						"name": "service",
-						` + specFields + `
-						"plugin": {
-							"kind": "signoz/DynamicVariable",
-							"spec": {"name": "service.name", "signal": "metrics"}
-						}
-					}
-				}
-			],
-			"layouts": []
-		}`)
-	}
-
-	t.Run("customAllValue without allowAllValue", func(t *testing.T) {
-		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "customAllValue": "*",`))
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "customAllValue cannot be set")
-	})
-
-	t.Run("list defaultValue without allowMultiple", func(t *testing.T) {
-		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["a", "b"],`))
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "allowMultiple")
-	})
-
-	t.Run("single-element list default without allowMultiple", func(t *testing.T) {
-		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["only"],`))
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "allowMultiple")
-	})
-
-	t.Run("valid sort is accepted", func(t *testing.T) {
-		_, err := unmarshalDashboard(listVar(`"sort": "alphabetical-asc",`))
-		require.NoError(t, err)
-	})
-
-	t.Run("unknown sort is rejected", func(t *testing.T) {
-		_, err := unmarshalDashboard(listVar(`"sort": "bogus",`))
-		require.Error(t, err)
-		require.Contains(t, err.Error(), "unknown sort")
-	})
-}
-
-func TestInvalidateEmptyVariableName(t *testing.T) {
-	cases := map[string][]byte{
-		"text variable": []byte(`{
-			"variables": [{"kind": "TextVariable", "spec": {"name": "", "value": "x"}}],
-			"layouts": []
-		}`),
-		"list variable": []byte(`{
-			"variables": [{
-				"kind": "ListVariable",
-				"spec": {
-					"name": "",
-					"allowAllValue": false,
-					"allowMultiple": false,
-					"plugin": {"kind": "signoz/DynamicVariable", "spec": {"name": "service.name", "signal": "metrics"}}
-				}
-			}],
-			"layouts": []
-		}`),
-	}
-	for name, data := range cases {
-		t.Run(name, func(t *testing.T) {
-			_, err := unmarshalDashboard(data)
-			require.Error(t, err, "expected error for empty variable name")
-			require.Contains(t, err.Error(), "name cannot be empty")
-		})
-	}
-}
-
 func TestInvalidateUnknownPluginKind(t *testing.T) {
 	tests := []struct {
 		name        string
@@ -438,65 +270,6 @@ func TestInvalidateOneInvalidPanel(t *testing.T) {
 	require.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
 }
 
-func TestInvalidateLayoutPanelReferences(t *testing.T) {
-	validPanels := `"panels": {
-		"p1": {
-			"kind": "Panel",
-			"spec": {
-				"plugin": {"kind": "signoz/TablePanel", "spec": {}},
-				"queries": [{
-					"kind": "time_series",
-					"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
-						"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]
-					}}}
-				}]
-			}
-		}
-	}`
-	layout := func(items string) []byte {
-		return []byte(`{` + validPanels + `, "layouts": [{"kind": "Grid", "spec": {"items": [` + items + `]}}]}`)
-	}
-
-	tests := []struct {
-		name        string
-		data        []byte
-		wantContain string
-	}{
-		{
-			name:        "reference to unknown panel",
-			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/ghost"}}`),
-			wantContain: `references unknown panel "ghost"`,
-		},
-		{
-			name:        "reference not pointing at a panel",
-			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/variables/p1"}}`),
-			wantContain: "must reference a panel",
-		},
-		{
-			name:        "reference missing spec prefix",
-			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/panels/p1"}}`),
-			wantContain: "must reference a panel",
-		},
-		{
-			name:        "valid reference",
-			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}`),
-			wantContain: "",
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			_, err := unmarshalDashboard(tt.data)
-			if tt.wantContain == "" {
-				require.NoError(t, err)
-				return
-			}
-			require.Error(t, err)
-			require.Contains(t, err.Error(), tt.wantContain)
-		})
-	}
-}
-
 func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 	tests := []struct {
 		name        string
@@ -796,24 +569,6 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 			}`,
 			wantContain: "legend position",
 		},
-		{
-			name: "bad legend mode",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {
-								"kind": "signoz/BarChartPanel",
-								"spec": {"legend": {"mode": "grid"}}
-							}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "legend mode",
-		},
 		{
 			name: "bad threshold format",
 			data: `{
@@ -879,39 +634,6 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 	}
 }
 
-// Label on ThresholdWithLabel is optional — the backend never reads it, so a
-// threshold with an omitted or empty label must validate cleanly.
-func TestThresholdLabelOptional(t *testing.T) {
-	for _, tt := range []struct {
-		name      string
-		threshold string
-	}{
-		{name: "label omitted", threshold: `{"value": 100, "color": "Red"}`},
-		{name: "label empty", threshold: `{"value": 100, "color": "Red", "label": ""}`},
-	} {
-		t.Run(tt.name, func(t *testing.T) {
-			data := []byte(`{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {"thresholds": [` + tt.threshold + `]}},
-							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
-						}
-					}
-				},
-				"layouts": []
-			}`)
-			d, err := unmarshalDashboard(data)
-			require.NoError(t, err, "threshold without a label should validate")
-
-			spec := d.Panels["p1"].Spec.Plugin.Spec.(*TimeSeriesPanelSpec)
-			require.Len(t, spec.Thresholds, 1)
-			require.Empty(t, spec.Thresholds[0].Label, "label should remain empty")
-		})
-	}
-}
-
 func TestInvalidatePanelWithoutQueries(t *testing.T) {
 	data := []byte(`{
 		"panels": {
@@ -1027,6 +749,11 @@ func TestValidateRequiredFields(t *testing.T) {
 			data:        wrapPanel("signoz/TimeSeriesPanel", `{"thresholds": [{"value": 100, "label": "high", "color": ""}]}`),
 			wantContain: "Color",
 		},
+		{
+			name:        "ThresholdWithLabel missing label",
+			data:        wrapPanel("signoz/TimeSeriesPanel", `{"thresholds": [{"value": 100, "color": "Red", "label": ""}]}`),
+			wantContain: "Label",
+		},
 		{
 			name:        "ComparisonThreshold missing value",
 			data:        wrapPanel("signoz/NumberPanel", `{"thresholds": [{"operator": "above", "format": "text", "color": "Red"}]}`),
@@ -1084,11 +811,10 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 	require.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
 	require.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
 	require.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
-	require.Equal(t, "none", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default none")
+	require.Equal(t, "solid", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default solid")
 	require.False(t, spec.ChartAppearance.SpanGaps.FillOnlyBelow, "expected SpanGaps.FillOnlyBelow default false")
 	require.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
 	require.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
-	require.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
 
 	// Re-marshal the full dashboard (what we'd store in DB / return in API response)
 	// and verify the output contains the default values.
@@ -1099,10 +825,9 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 		"decimalPrecision":  `"2"`,
 		"lineInterpolation": `"spline"`,
 		"lineStyle":         `"solid"`,
-		"fillMode":          `"none"`,
+		"fillMode":          `"solid"`,
 		"timePreference":    `"global_time"`,
 		"position":          `"bottom"`,
-		"mode":              `"list"`,
 	} {
 		assert.Contains(t, outputStr, `"`+field+`":`+want, "expected stored/response JSON to contain %s:%s", field, want)
 	}
@@ -1205,7 +930,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	assert.Equal(t, "2", tsSpec.Formatting.DecimalPrecision.ValueOrDefault())
 	assert.Equal(t, "spline", tsSpec.ChartAppearance.LineInterpolation.ValueOrDefault())
 	assert.Equal(t, "solid", tsSpec.ChartAppearance.LineStyle.ValueOrDefault())
-	assert.Equal(t, "none", tsSpec.ChartAppearance.FillMode.ValueOrDefault())
+	assert.Equal(t, "solid", tsSpec.ChartAppearance.FillMode.ValueOrDefault())
 	assert.Equal(t, "global_time", tsSpec.Visualization.TimePreference.ValueOrDefault())
 	assert.Equal(t, "bottom", tsSpec.Legend.Position.ValueOrDefault())
 	numSpec := d.Panels["p2"].Spec.Plugin.Spec.(*NumberPanelSpec)
@@ -1225,7 +950,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	assert.Equal(t, "2", tsLoaded.Formatting.DecimalPrecision.ValueOrDefault(), "after load")
 	assert.Equal(t, "spline", tsLoaded.ChartAppearance.LineInterpolation.ValueOrDefault(), "after load")
 	assert.Equal(t, "solid", tsLoaded.ChartAppearance.LineStyle.ValueOrDefault(), "after load")
-	assert.Equal(t, "none", tsLoaded.ChartAppearance.FillMode.ValueOrDefault(), "after load")
+	assert.Equal(t, "solid", tsLoaded.ChartAppearance.FillMode.ValueOrDefault(), "after load")
 	assert.Equal(t, "global_time", tsLoaded.Visualization.TimePreference.ValueOrDefault(), "after load")
 	assert.Equal(t, "bottom", tsLoaded.Legend.Position.ValueOrDefault(), "after load")
 	numLoaded := loaded.Panels["p2"].Spec.Plugin.Spec.(*NumberPanelSpec)
@@ -1241,7 +966,7 @@ func TestStorageRoundTrip(t *testing.T) {
 		"decimalPrecision":  `"2"`,
 		"lineInterpolation": `"spline"`,
 		"lineStyle":         `"solid"`,
-		"fillMode":          `"none"`,
+		"fillMode":          `"solid"`,
 		"timePreference":    `"global_time"`,
 		"position":          `"bottom"`,
 		"format":            `"text"`,

pkg/types/dashboardtypes/perses_drift_test.go

@@ -30,7 +30,6 @@ func TestDashboardSpecMatchesPerses(t *testing.T) {
 		{"DatasourceSpec", typeOf[DatasourceSpec](), typeOf[datasource.Spec]()},
 		{"Variable", typeOf[Variable](), typeOf[dashboard.Variable]()},
 		{"ListVariableSpec", typeOf[ListVariableSpec](), typeOf[dashboard.ListVariableSpec]()},
-		{"TextVariableSpec", typeOf[TextVariableSpec](), typeOf[dashboard.TextVariableSpec]()},
 		{"Layout", typeOf[Layout](), typeOf[dashboard.Layout]()},
 	}
 

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -51,7 +51,7 @@ func (p *PanelPlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = PanelPluginKind(kind)
-	p.Spec = *spec
+	p.Spec = spec
 	return nil
 }
 
@@ -110,7 +110,7 @@ func (p *QueryPlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = QueryPluginKind(kind)
-	p.Spec = *spec
+	p.Spec = spec
 	return nil
 }
 
@@ -165,7 +165,7 @@ func (p *VariablePlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = VariablePluginKind(kind)
-	p.Spec = *spec
+	p.Spec = spec
 	return nil
 }
 
@@ -215,7 +215,7 @@ func (p *DatasourcePlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = DatasourcePluginKind(kind)
-	p.Spec = *spec
+	p.Spec = spec
 	return nil
 }
 
@@ -297,7 +297,8 @@ func extractKindAndSpec(data []byte) (string, []byte, error) {
 	return head.Kind, head.Spec, nil
 }
 
-func decodeSpec[T any](specJSON []byte, target T, kind string) (*T, error) {
+// decodeSpec strict-decodes a spec JSON into target and runs struct-tag validation (go-playground/validator).
+func decodeSpec(specJSON []byte, target any, kind string) (any, error) {
 	if len(specJSON) == 0 {
 		return nil, errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "kind %q: spec is required", kind)
 	}
@@ -309,12 +310,7 @@ func decodeSpec[T any](specJSON []byte, target T, kind string) (*T, error) {
 	if err := validator.New().Struct(target); err != nil {
 		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: spec failed validation", kind)
 	}
-	if v, ok := any(target).(interface{ validate() error }); ok {
-		if err := v.validate(); err != nil {
-			return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: %s", kind, err.Error())
-		}
-	}
-	return &target, nil
+	return target, nil
 }
 
 // signozDiscriminatorKey is the extension key that signoz.attachDiscriminators

pkg/types/dashboardtypes/perses_replicas.go

@@ -4,11 +4,9 @@ import (
 	"encoding/json"
 	"maps"
 	"slices"
-	"strconv"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/perses/spec/go/common"
 	"github.com/perses/spec/go/dashboard"
 	"github.com/perses/spec/go/dashboard/variable"
@@ -86,7 +84,7 @@ type QuerySpec struct {
 // ══════════════════════════════════════════════
 
 // Variable is the list/text sum type. Spec is set to *ListVariableSpec or
-// *TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
+// *dashboard.TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
 // discriminated oneOf (see JSONSchemaOneOf).
 type Variable struct {
 	Kind variable.Kind `json:"kind" required:"true"`
@@ -96,7 +94,7 @@ type Variable struct {
 func (Variable) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
 		string(variable.KindList): schemaRef("DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec"),
-		string(variable.KindText): schemaRef("DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec"),
+		string(variable.KindText): schemaRef("DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec"),
 	})
 }
 
@@ -112,14 +110,14 @@ func (v *Variable) UnmarshalJSON(data []byte) error {
 			return err
 		}
 		v.Kind = variable.KindList
-		v.Spec = *spec
+		v.Spec = spec
 	case string(variable.KindText):
-		spec, err := decodeSpec(specJSON, new(TextVariableSpec), kind)
+		spec, err := decodeSpec(specJSON, new(dashboard.TextVariableSpec), kind)
 		if err != nil {
 			return err
 		}
 		v.Kind = variable.KindText
-		v.Spec = *spec
+		v.Spec = spec
 	default:
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown variable kind %q; allowed values: %s", kind, allowedValuesForKind([]variable.Kind{variable.KindList, variable.KindText}))
 	}
@@ -129,7 +127,7 @@ func (v *Variable) UnmarshalJSON(data []byte) error {
 func (Variable) JSONSchemaOneOf() []any {
 	return []any{
 		VariableEnvelope[ListVariableSpec]{Kind: string(variable.KindList)},
-		VariableEnvelope[TextVariableSpec]{Kind: string(variable.KindText)},
+		VariableEnvelope[dashboard.TextVariableSpec]{Kind: string(variable.KindText)},
 	}
 }
 
@@ -145,106 +143,15 @@ func (v VariableEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ListVariableSpec mirrors dashboard.ListVariableSpec (variable.ListSpec
 // fields + Name) but with a typed VariablePlugin replacing common.Plugin.
 type ListVariableSpec struct {
-	Display         *Display               `json:"display,omitempty"`
+	Display         Display                `json:"display" required:"true"`
 	DefaultValue    *variable.DefaultValue `json:"defaultValue,omitempty"`
 	AllowAllValue   bool                   `json:"allowAllValue"`
 	AllowMultiple   bool                   `json:"allowMultiple"`
 	CustomAllValue  string                 `json:"customAllValue,omitempty"`
 	CapturingRegexp string                 `json:"capturingRegexp,omitempty"`
-	Sort            ListVariableSpecSort   `json:"sort,omitzero"`
+	Sort            *variable.Sort         `json:"sort,omitempty"`
 	Plugin          VariablePlugin         `json:"plugin"`
-	Name            string                 `json:"name" required:"true" minLength:"1"`
-}
-
-// validate mirrors perses ListVariableSpec validation (plus the digits-only name
-// check perses only applies to text variables); run by decodeSpec on unmarshal.
-func (s *ListVariableSpec) validate() error {
-	if err := common.ValidateID(s.Name); err != nil {
-		return err
-	}
-	if _, err := strconv.Atoi(s.Name); err == nil {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "variable name cannot contain only digits")
-	}
-	if s.CustomAllValue != "" && !s.AllowAllValue {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "customAllValue cannot be set if allowAllValue is not set to true")
-	}
-	if s.DefaultValue != nil && len(s.DefaultValue.SliceValues) > 0 && !s.AllowMultiple {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "defaultValue cannot be a list if allowMultiple is not set to true")
-	}
-	return nil
-}
-
-// ListVariableSpecSort is the value-list sort method, mirrored from Perses as a
-// stable enum so the allowed values surface in the generated OpenAPI schema.
-type ListVariableSpecSort struct{ valuer.String }
-
-var (
-	SortNone                            = ListVariableSpecSort{valuer.NewString("none")}
-	SortAlphabeticalAsc                 = ListVariableSpecSort{valuer.NewString("alphabetical-asc")}
-	SortAlphabeticalDesc                = ListVariableSpecSort{valuer.NewString("alphabetical-desc")}
-	SortNumericalAsc                    = ListVariableSpecSort{valuer.NewString("numerical-asc")}
-	SortNumericalDesc                   = ListVariableSpecSort{valuer.NewString("numerical-desc")}
-	SortAlphabeticalCaseInsensitiveAsc  = ListVariableSpecSort{valuer.NewString("alphabetical-ci-asc")}
-	SortAlphabeticalCaseInsensitiveDesc = ListVariableSpecSort{valuer.NewString("alphabetical-ci-desc")}
-)
-
-func (ListVariableSpecSort) Enum() []any {
-	return []any{
-		SortNone,
-		SortAlphabeticalAsc,
-		SortAlphabeticalDesc,
-		SortNumericalAsc,
-		SortNumericalDesc,
-		SortAlphabeticalCaseInsensitiveAsc,
-		SortAlphabeticalCaseInsensitiveDesc,
-	}
-}
-
-func (s ListVariableSpecSort) IsValid() bool {
-	return slices.ContainsFunc(s.Enum(), func(v any) bool { return v == s })
-}
-
-// UnmarshalJSON validates against the enum on decode (valuer.String alone
-// accepts any string). An empty value is allowed and means "no sort", matching
-// Perses.
-func (s *ListVariableSpecSort) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid sort: must be a string, one of `none`, `alphabetical-asc`, `alphabetical-desc`, `numerical-asc`, `numerical-desc`, `alphabetical-ci-asc`, or `alphabetical-ci-desc`")
-	}
-	if v == "" {
-		*s = ListVariableSpecSort{}
-		return nil
-	}
-	sort := ListVariableSpecSort{valuer.NewString(v)}
-	if !sort.IsValid() {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown sort %q: must be `none`, `alphabetical-asc`, `alphabetical-desc`, `numerical-asc`, `numerical-desc`, `alphabetical-ci-asc`, or `alphabetical-ci-desc`", v)
-	}
-	*s = sort
-	return nil
-}
-
-// TextVariableSpec replicates dashboard.TextVariableSpec so name can carry the
-// required/non-empty schema tags perses leaves off.
-type TextVariableSpec struct {
-	Display  *Display `json:"display,omitempty"`
-	Value    string   `json:"value"`
-	Constant bool     `json:"constant,omitempty"`
-	Name     string   `json:"name" required:"true" minLength:"1"`
-}
-
-// validate mirrors perses TextVariableSpec validation; run by decodeSpec on unmarshal.
-func (s *TextVariableSpec) validate() error {
-	if err := common.ValidateID(s.Name); err != nil {
-		return err
-	}
-	if _, err := strconv.Atoi(s.Name); err == nil {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "variable name cannot contain only digits")
-	}
-	if s.Value == "" && s.Constant {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "value for a constant text variable cannot be empty")
-	}
-	return nil
+	Name            string                 `json:"name"`
 }
 
 // ══════════════════════════════════════════════
@@ -287,7 +194,7 @@ func (l *Layout) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	l.Kind = dashboard.LayoutKind(kind)
-	l.Spec = *spec
+	l.Spec = spec
 	return nil
 }
 

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -241,7 +241,6 @@ type TableFormatting struct {
 
 type Legend struct {
 	Position     LegendPosition    `json:"position"`
-	Mode         LegendMode        `json:"mode"`
 	CustomColors map[string]string `json:"customColors"`
 }
 
@@ -249,7 +248,7 @@ type ThresholdWithLabel struct {
 	Value float64 `json:"value" validate:"required" required:"true"`
 	Unit  string  `json:"unit"`
 	Color string  `json:"color" validate:"required" required:"true"`
-	Label string  `json:"label"`
+	Label string  `json:"label" validate:"required" required:"true"`
 }
 
 type ComparisonThreshold struct {
@@ -359,47 +358,6 @@ func (l *LegendPosition) UnmarshalJSON(data []byte) error {
 	}
 }
 
-type LegendMode struct{ valuer.String }
-
-var (
-	LegendModeList  = LegendMode{valuer.NewString("list")} // default
-	LegendModeTable = LegendMode{valuer.NewString("table")}
-)
-
-func (LegendMode) Enum() []any {
-	return []any{LegendModeList} // others are not supported in UI yet
-}
-
-func (m LegendMode) ValueOrDefault() string {
-	if m.IsZero() {
-		return LegendModeList.StringValue()
-	}
-	return m.StringValue()
-}
-
-func (m LegendMode) MarshalJSON() ([]byte, error) {
-	return json.Marshal(m.ValueOrDefault())
-}
-
-func (m *LegendMode) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid legend mode: must be a string, one of `list` or `table`")
-	}
-	if v == "" {
-		*m = LegendModeList
-		return nil
-	}
-	lm := LegendMode{valuer.NewString(v)}
-	switch lm {
-	case LegendModeList, LegendModeTable:
-		*m = lm
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid legend mode %q: must be `list` or `table`", v)
-	}
-}
-
 type ThresholdFormat struct{ valuer.String }
 
 var (
@@ -576,9 +534,9 @@ func (ls *LineStyle) UnmarshalJSON(data []byte) error {
 type FillMode struct{ valuer.String }
 
 var (
-	FillModeSolid    = FillMode{valuer.NewString("solid")}
+	FillModeSolid    = FillMode{valuer.NewString("solid")} // default
 	FillModeGradient = FillMode{valuer.NewString("gradient")}
-	FillModeNone     = FillMode{valuer.NewString("none")} // default
+	FillModeNone     = FillMode{valuer.NewString("none")}
 )
 
 func (FillMode) Enum() []any {
@@ -587,7 +545,7 @@ func (FillMode) Enum() []any {
 
 func (fm FillMode) ValueOrDefault() string {
 	if fm.IsZero() {
-		return FillModeNone.StringValue()
+		return FillModeSolid.StringValue()
 	}
 	return fm.StringValue()
 }
@@ -602,7 +560,7 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fill mode: must be a string, one of `solid`, `gradient`, or `none`")
 	}
 	if v == "" {
-		*fm = FillModeNone
+		*fm = FillModeSolid
 		return nil
 	}
 	val := FillMode{valuer.NewString(v)}
@@ -615,9 +573,12 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 	}
 }
 
+// SpanGaps controls whether lines connect across null values.
+// When FillOnlyBelow is false (default), all gaps are connected.
+// When FillOnlyBelow is true, only gaps smaller than FillLessThan are connected.
 type SpanGaps struct {
-	FillOnlyBelow bool                `json:"fillOnlyBelow" description:"Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected."`
-	FillLessThan  valuer.TextDuration `json:"fillLessThan" description:"The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected."`
+	FillOnlyBelow bool                `json:"fillOnlyBelow"`
+	FillLessThan  valuer.TextDuration `json:"fillLessThan"`
 }
 
 type PrecisionOption struct{ valuer.String }