feat(flat-leaf): add serializer

* fix: mark numeric columns as aggregation in scalar query response

* fix: make py-fmt

* fix: comments

frontend/src/constants/queryBuilderOperators.ts

@@ -6,6 +6,10 @@ import {
 import { SelectOption } from 'types/common/select';
 
 export const metricAggregateOperatorOptions: SelectOption<string, string>[] = [
+	{
+		value: MetricAggregateOperator.NOOP,
+		label: 'No aggregation',
+	},
 	{
 		value: MetricAggregateOperator.COUNT,
 		label: 'Count',

frontend/src/constants/reactQueryKeys.ts

@@ -36,6 +36,7 @@ export const REACT_QUERY_KEY = {
 	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
 	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
+	GET_TRACE_V3_FLAMEGRAPH: 'GET_TRACE_V3_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',
 	GET_DEPLOYMENT_LIST: 'GET_DEPLOYMENT_LIST',

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -1,6 +1,7 @@
 import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { deserialize } from 'lib/compositeQuery/serializer';
 import { matchPath } from 'react-router-dom';
 
 /**
@@ -294,11 +295,11 @@ function collectSharedMetadata(
 	// Query Builder state — URL-encoded JSON written by `QueryBuilderProvider`.
 	const compositeQueryRaw = params.get(QueryParams.compositeQuery);
 	if (compositeQueryRaw) {
-		try {
-			out.query = JSON.parse(decodeURIComponent(compositeQueryRaw));
-		} catch {
-			// Malformed JSON in the URL — drop silently rather than throw
-			// inside a context-collection helper.
+		// Decode through the serializer seam (handles every tier + malformed
+		// input → null); never JSON.parse the raw URL value.
+		const decodedQuery = deserialize(compositeQueryRaw);
+		if (decodedQuery) {
+			out.query = decodedQuery;
 		}
 	}
 

frontend/src/container/InfraMonitoringK8s/Clusters/constants.ts

@@ -796,7 +796,7 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDeploymentDesiredKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'avg',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
@@ -839,7 +839,7 @@ export const getClusterMetricsQueryPayload = (
 							reduceTo: ReduceOperators.LAST,
 							spaceAggregation: 'sum',
 							stepInterval: 60,
-							timeAggregation: 'avg',
+							timeAggregation: 'latest',
 						},
 					],
 					queryFormulas: [],

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -40,6 +40,7 @@ import { K8S_ENTITY_EVENTS_EXPRESSION_KEY, useEntityEvents } from './hooks';
 import { getEntityEventsQueryPayload, isEventsKeyNotFoundError } from './utils';
 
 import styles from './EntityEvents.module.scss';
+import { useTimezone } from 'providers/Timezone';
 
 interface EventDataType {
 	key: string;
@@ -167,17 +168,25 @@ function EntityEventsContent({
 		[events],
 	);
 
-	const columns: TableColumnsType<EventDataType> = [
-		{ title: 'Severity', dataIndex: 'severity', key: 'severity', width: 100 },
-		{
-			title: 'Timestamp',
-			dataIndex: 'timestamp',
-			width: 240,
-			ellipsis: true,
-			key: 'timestamp',
-		},
-		{ title: 'Body', dataIndex: 'body', key: 'body' },
-	];
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const columns: TableColumnsType<EventDataType> = useMemo(
+		() => [
+			{ title: 'Severity', dataIndex: 'severity', key: 'severity', width: 100 },
+			{
+				title: 'Timestamp',
+				dataIndex: 'timestamp',
+				width: 240,
+				ellipsis: true,
+				key: 'timestamp',
+				render: (value: string | number): string =>
+					formatTimezoneAdjustedTimestamp(
+						typeof value === 'string' ? value : value / 1e6,
+					),
+			},
+			{ title: 'Body', dataIndex: 'body', key: 'body' },
+		],
+		[formatTimezoneAdjustedTimestamp],
+	);
 
 	const handleExpandRowIcon = ({
 		expanded,

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -41,6 +41,7 @@ import { getTraceListColumns } from './traceListColumns';
 import { getEntityTracesQueryPayload } from './utils';
 
 import styles from './EntityTraces.module.scss';
+import { useTimezone } from 'providers/Timezone';
 
 interface Props {
 	timeRange: {
@@ -136,7 +137,11 @@ function EntityTracesContent({
 		[timeRange.startTime, timeRange.endTime, userExpression],
 	);
 
-	const traceListColumns = getTraceListColumns(selectedEntityTracesColumns);
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const traceListColumns = getTraceListColumns(
+		selectedEntityTracesColumns,
+		formatTimezoneAdjustedTimestamp,
+	);
 
 	const isKeyNotFound = isKeyNotFoundError(error);
 	const isDataEmpty =

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/traceListColumns.tsx

@@ -1,15 +1,14 @@
 import { TableColumnsType as ColumnsType } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import {
 	BlockLink,
 	getTraceLink,
 } from 'container/TracesExplorer/ListView/utils';
-import dayjs from 'dayjs';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { FormatTimezoneAdjustedTimestamp } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 
 const keyToLabelMap: Record<string, string> = {
 	timestamp: 'Timestamp',
@@ -59,6 +58,7 @@ const getValueForKey = (data: Record<string, any>, key: string): any => {
 
 export const getTraceListColumns = (
 	selectedColumns: BaseAutocompleteData[],
+	formatTimezoneAdjustedTimestamp: FormatTimezoneAdjustedTimestamp,
 ): ColumnsType<RowData> => {
 	const columns: ColumnsType<RowData> =
 		selectedColumns.map(({ dataType, key, type }) => ({
@@ -73,8 +73,8 @@ export const getTraceListColumns = (
 				if (primaryKey === 'timestamp') {
 					const date =
 						typeof value === 'string'
-							? dayjs(value).format(DATE_TIME_FORMATS.ISO_DATETIME_MS)
-							: dayjs(value / 1e6).format(DATE_TIME_FORMATS.ISO_DATETIME_MS);
+							? formatTimezoneAdjustedTimestamp(value)
+							: formatTimezoneAdjustedTimestamp(value / 1e6);
 
 					return (
 						<BlockLink to={getTraceLink(itemData)} openInNewTab>

frontend/src/container/InfraMonitoringK8s/Pods/constants.ts

@@ -1366,7 +1366,7 @@ export const getPodMetricsQueryPayload = (
 							orderBy: [],
 							queryName: 'B',
 							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'avg',
+							spaceAggregation: 'sum',
 							stepInterval: 60,
 							timeAggregation: 'avg',
 						},

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -35,6 +35,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
 import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
 import { normalizeTimeToMs } from 'utils/timeUtils';
+import { serialize } from 'lib/compositeQuery/serializer';
 import { v4 as uuid } from 'uuid';
 
 import AutoRefresh from '../AutoRefreshV2';
@@ -299,7 +300,7 @@ function DateTimeSelection({
 				})),
 			},
 		};
-		return encodeURIComponent(JSON.stringify(updatedCompositeQuery));
+		return serialize(updatedCompositeQuery);
 	}, [currentQuery]);
 
 	const onSelectHandler = useCallback(

frontend/src/hooks/queryBuilder/__tests__/useGetCompositeQueryParam.test.ts

@@ -0,0 +1,26 @@
+import { renderHook } from '@testing-library/react';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+
+let mockUrlQuery = new URLSearchParams();
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): URLSearchParams => mockUrlQuery,
+}));
+
+describe('useGetCompositeQueryParam', () => {
+	it('decodes a legacy compositeQuery param', () => {
+		mockUrlQuery = new URLSearchParams({
+			compositeQuery: encodeURIComponent(JSON.stringify(initialQueriesMap.logs)),
+		});
+		const { result } = renderHook(() => useGetCompositeQueryParam());
+		expect(result.current?.builder.queryData[0].dataSource).toBe('logs');
+	});
+
+	it('returns null when the param is absent', () => {
+		mockUrlQuery = new URLSearchParams();
+		const { result } = renderHook(() => useGetCompositeQueryParam());
+		expect(result.current).toBeNull();
+	});
+});

frontend/src/hooks/queryBuilder/useGetCompositeQueryParam.ts

@@ -1,12 +1,7 @@
-import { useMemo } from 'react';
-import {
-	convertAggregationToExpression,
-	convertFiltersToExpressionWithExistingQuery,
-	convertHavingToExpression,
-} from 'components/QueryBuilderV2/utils';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { deserialize } from 'lib/compositeQuery/serializer';
+import { useMemo } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export const useGetCompositeQueryParam = (): Query | null => {
@@ -14,59 +9,9 @@ export const useGetCompositeQueryParam = (): Query | null => {
 
 	return useMemo(() => {
 		const compositeQuery = urlQuery.get(QueryParams.compositeQuery);
-		let parsedCompositeQuery: Query | null = null;
-
-		try {
-			if (!compositeQuery) {
-				return null;
-			}
-
-			// MDN reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent#decoding_query_parameters_from_a_url
-			// MDN reference to support + characters using encoding - https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#preserving_plus_signs add later
-			parsedCompositeQuery = JSON.parse(
-				decodeURIComponent(compositeQuery.replace(/\+/g, ' ')),
-			);
-
-			// Convert old format to new format for each query in builder.queryData
-			if (parsedCompositeQuery?.builder?.queryData) {
-				parsedCompositeQuery.builder.queryData =
-					parsedCompositeQuery.builder.queryData.map((query) => {
-						const existingExpression = query.filter?.expression || '';
-						const convertedQuery = { ...query };
-
-						const convertedFilter = convertFiltersToExpressionWithExistingQuery(
-							query.filters || { items: [], op: 'AND' },
-							existingExpression,
-						);
-						convertedQuery.filter = convertedFilter.filter;
-						convertedQuery.filters = convertedFilter.filters;
-
-						// Convert having if needed
-						if (Array.isArray(query.having)) {
-							const convertedHaving = convertHavingToExpression(query.having);
-							convertedQuery.having = convertedHaving;
-						}
-
-						// Convert aggregation if needed
-						if (!query.aggregations && query.aggregateOperator) {
-							const convertedAggregation = convertAggregationToExpression({
-								aggregateOperator: query.aggregateOperator,
-								aggregateAttribute: query.aggregateAttribute as BaseAutocompleteData,
-								dataSource: query.dataSource,
-								timeAggregation: query.timeAggregation,
-								spaceAggregation: query.spaceAggregation,
-								reduceTo: query.reduceTo,
-								temporality: query.temporality,
-							}) as any; // Type assertion to handle union type
-							convertedQuery.aggregations = convertedAggregation;
-						}
-						return convertedQuery;
-					});
-			}
-		} catch (e) {
-			parsedCompositeQuery = null;
+		if (!compositeQuery) {
+			return null;
 		}
-
-		return parsedCompositeQuery;
+		return deserialize(compositeQuery);
 	}, [urlQuery]);
 };

frontend/src/hooks/trace/useGetTraceFlamegraphV3.tsx

@@ -0,0 +1,42 @@
+import { getFlamegraph } from 'api/generated/services/tracedetail';
+import {
+	SpantypesGettableFlamegraphTraceDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryResult } from 'react-query';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+export interface GetTraceFlamegraphV3Props {
+	traceId: string;
+	selectedSpanId?: string;
+	selectFields?: TelemetryFieldKey[];
+	enabled?: boolean;
+}
+
+const useGetTraceFlamegraphV3 = (
+	props: GetTraceFlamegraphV3Props,
+): UseQueryResult<SpantypesGettableFlamegraphTraceDTO, unknown> =>
+	useQuery({
+		queryFn: () =>
+			getFlamegraph(
+				{ traceID: props.traceId },
+				{
+					selectedSpanId: props.selectedSpanId,
+					// v5 TelemetryFieldKey and the generated DTO are runtime-identical; only
+					// the literal-union vs enum nominal types differ
+					selectFields: props.selectFields as TelemetrytypesTelemetryFieldKeyDTO[],
+				},
+			).then((res) => res.data),
+		queryKey: [
+			REACT_QUERY_KEY.GET_TRACE_V3_FLAMEGRAPH,
+			props.traceId,
+			props.selectedSpanId,
+			props.selectFields,
+		],
+		enabled: props.enabled,
+		keepPreviousData: true,
+		refetchOnWindowFocus: false,
+	});
+
+export default useGetTraceFlamegraphV3;

frontend/src/hooks/useSafeNavigate.ts

@@ -1,6 +1,7 @@
+import { deserialize } from 'lib/compositeQuery/serializer';
+import { isEqual } from 'lodash-es';
 import { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
-import { cloneDeep, isEqual } from 'lodash-es';
 import { withBasePath } from 'utils/basePath';
 
 interface NavigateOptions {
@@ -38,16 +39,20 @@ const areUrlsEffectivelySame = (url1: URL, url2: URL): boolean => {
 					return false;
 				}
 
-				const decoded1 = JSON.parse(decodeURIComponent(query1));
-				const decoded2 = JSON.parse(decodeURIComponent(query2));
+				// Decode through the serializer seam: the URL value may be in any
+				// tier (legacy JSON or a tagged format), so never JSON.parse it raw.
+				const decoded1 = deserialize(query1);
+				const decoded2 = deserialize(query2);
 
-				const filtered1 = cloneDeep(decoded1);
-				const filtered2 = cloneDeep(decoded2);
+				if (!decoded1 || !decoded2) {
+					return false;
+				}
 
-				delete filtered1.id;
-				delete filtered2.id;
+				// Ignore the volatile `id` when comparing queries.
+				const { id: _id1, ...rest1 } = decoded1;
+				const { id: _id2, ...rest2 } = decoded2;
 
-				return isEqual(filtered1, filtered2);
+				return isEqual(rest1, rest2);
 			} catch (error) {
 				console.warn('Error comparing compositeQuery:', error);
 				return false;

frontend/src/hooks/useTimezoneFormatter/useTimezoneFormatter.ts

@@ -22,11 +22,13 @@ interface CacheEntry {
 const CACHE_SIZE_LIMIT = 1000;
 const CACHE_CLEANUP_PERCENTAGE = 0.5; // Remove 50% when limit is reached
 
+export type FormatTimezoneAdjustedTimestamp = (
+	input: TimestampInput,
+	format?: string,
+) => string;
+
 function useTimezoneFormatter({ userTimezone }: { userTimezone: Timezone }): {
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string;
+	formatTimezoneAdjustedTimestamp: FormatTimezoneAdjustedTimestamp;
 } {
 	// Initialize cache using useMemo to persist between renders
 	const cache = useMemo(() => new Map<string, CacheEntry>(), []);

frontend/src/lib/compositeQuery/__tests__/__snapshots__/baseline.test.ts.snap

@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+//
+// ╔════════════════════════════════════════════════════════════════════════════╗
+// ║                        ⚠️  NEVER UPDATE THESE ⚠️                            ║
+// ╠════════════════════════════════════════════════════════════════════════════╣
+// ║  These snapshots guard URL backward compatibility. Every emitted URL       ║
+// ║  encodes a diff against these exact baselines.                             ║
+// ║                                                                            ║
+// ║  If a test fails: REVERT baseline.ts, do NOT update snapshots.             ║
+// ║  If you need a new schema: create BASELINE_V2 + new adapter prefix.        ║
+// ╚════════════════════════════════════════════════════════════════════════════╝
+
+exports[`baseline immutability snapshots LOGS_BASELINE must never change 1`] = `
+{
+  "builder": {
+    "queryData": [
+      {
+        "aggregateAttribute": {
+          "dataType": "",
+          "id": "----",
+          "key": "",
+          "type": "",
+        },
+        "aggregateOperator": null,
+        "aggregations": [
+          {
+            "expression": "count() ",
+          },
+        ],
+        "dataSource": "logs",
+        "disabled": false,
+        "expression": "A",
+        "filter": {
+          "expression": "",
+        },
+        "filters": {
+          "items": [],
+          "op": "AND",
+        },
+        "functions": [],
+        "groupBy": [],
+        "having": [],
+        "legend": "",
+        "limit": null,
+        "orderBy": [],
+        "queryName": "A",
+        "reduceTo": "avg",
+        "source": null,
+        "spaceAggregation": "sum",
+        "stepInterval": null,
+        "timeAggregation": "rate",
+      },
+    ],
+    "queryFormulas": [],
+    "queryTraceOperator": [],
+  },
+  "clickhouse_sql": [
+    {
+      "disabled": false,
+      "legend": "",
+      "name": "A",
+      "query": "",
+    },
+  ],
+  "id": "",
+  "promql": [
+    {
+      "disabled": false,
+      "legend": "",
+      "name": "A",
+      "query": "",
+    },
+  ],
+  "queryType": "builder",
+  "unit": "",
+}
+`;
+
+exports[`baseline immutability snapshots METRICS_BASELINE must never change 1`] = `
+{
+  "builder": {
+    "queryData": [
+      {
+        "aggregateAttribute": {
+          "dataType": "",
+          "id": "----",
+          "key": "",
+          "type": "",
+        },
+        "aggregateOperator": "noop",
+        "aggregations": [
+          {
+            "metricName": "",
+            "reduceTo": "avg",
+            "spaceAggregation": "sum",
+            "temporality": "",
+            "timeAggregation": "avg",
+          },
+        ],
+        "dataSource": "metrics",
+        "disabled": false,
+        "expression": "A",
+        "filter": {
+          "expression": "",
+        },
+        "filters": {
+          "items": [],
+          "op": "AND",
+        },
+        "functions": [],
+        "groupBy": [],
+        "having": [],
+        "legend": "",
+        "limit": null,
+        "orderBy": [],
+        "queryName": "A",
+        "reduceTo": "avg",
+        "source": null,
+        "spaceAggregation": "sum",
+        "stepInterval": null,
+        "timeAggregation": "rate",
+      },
+    ],
+    "queryFormulas": [],
+    "queryTraceOperator": [],
+  },
+  "clickhouse_sql": [
+    {
+      "disabled": false,
+      "legend": "",
+      "name": "A",
+      "query": "",
+    },
+  ],
+  "id": "",
+  "promql": [
+    {
+      "disabled": false,
+      "legend": "",
+      "name": "A",
+      "query": "",
+    },
+  ],
+  "queryType": "builder",
+  "unit": "",
+}
+`;
+
+exports[`baseline immutability snapshots TRACES_BASELINE must never change 1`] = `
+{
+  "builder": {
+    "queryData": [
+      {
+        "aggregateAttribute": {
+          "dataType": "",
+          "id": "----",
+          "key": "",
+          "type": "",
+        },
+        "aggregateOperator": null,
+        "aggregations": [
+          {
+            "expression": "count() ",
+          },
+        ],
+        "dataSource": "traces",
+        "disabled": false,
+        "expression": "A",
+        "filter": {
+          "expression": "",
+        },
+        "filters": {
+          "items": [],
+          "op": "AND",
+        },
+        "functions": [],
+        "groupBy": [],
+        "having": [],
+        "legend": "",
+        "limit": null,
+        "orderBy": [],
+        "queryName": "A",
+        "reduceTo": "avg",
+        "source": null,
+        "spaceAggregation": "sum",
+        "stepInterval": null,
+        "timeAggregation": "rate",
+      },
+    ],
+    "queryFormulas": [],
+    "queryTraceOperator": [],
+  },
+  "clickhouse_sql": [
+    {
+      "disabled": false,
+      "legend": "",
+      "name": "A",
+      "query": "",
+    },
+  ],
+  "id": "",
+  "promql": [
+    {
+      "disabled": false,
+      "legend": "",
+      "name": "A",
+      "query": "",
+    },
+  ],
+  "queryType": "builder",
+  "unit": "",
+}
+`;

frontend/src/lib/compositeQuery/__tests__/baseline.test.ts

@@ -0,0 +1,123 @@
+/**
+ * ╔════════════════════════════════════════════════════════════════════════════╗
+ * ║                           ⚠️  CRITICAL WARNING ⚠️                           ║
+ * ╠════════════════════════════════════════════════════════════════════════════╣
+ * ║  These baselines are FROZEN FOREVER. They must NEVER be modified.          ║
+ * ║                                                                            ║
+ * ║  WHY: Every URL ever emitted by the compositeQuery serializer encodes a    ║
+ * ║  diff against these exact baselines. Changing a single byte here silently  ║
+ * ║  BREAKS ALL EXISTING URLs — dashboards, saved views, shared links, etc.    ║
+ * ║                                                                            ║
+ * ║  If these snapshot tests fail:                                             ║
+ * ║    1. DO NOT update the snapshots                                          ║
+ * ║    2. REVERT your changes to baseline.ts immediately                       ║
+ * ║    3. If you need a new schema, create a NEW versioned baseline:           ║
+ * ║       - METRICS_BASELINE_V2, LOGS_BASELINE_V2, TRACES_BASELINE_V2          ║
+ * ║       - Create a new adapter (e.g., V2~) that uses the new baselines       ║
+ * ║       - Keep the old baselines untouched for backwards compatibility       ║
+ * ╚════════════════════════════════════════════════════════════════════════════╝
+ */
+
+import getBaselineByTag, {
+	LOGS_BASELINE,
+	METRICS_BASELINE,
+	pickBaseline,
+	TRACES_BASELINE,
+} from '../baseline';
+
+describe('baseline immutability snapshots', () => {
+	/**
+	 * ⛔ DO NOT UPDATE THIS SNAPSHOT ⛔
+	 * If this fails, you broke URL compatibility. Revert your changes.
+	 */
+	it('METRICS_BASELINE must never change', () => {
+		expect(METRICS_BASELINE).toMatchSnapshot();
+	});
+
+	/**
+	 * ⛔ DO NOT UPDATE THIS SNAPSHOT ⛔
+	 * If this fails, you broke URL compatibility. Revert your changes.
+	 */
+	it('LOGS_BASELINE must never change', () => {
+		expect(LOGS_BASELINE).toMatchSnapshot();
+	});
+
+	/**
+	 * ⛔ DO NOT UPDATE THIS SNAPSHOT ⛔
+	 * If this fails, you broke URL compatibility. Revert your changes.
+	 */
+	it('TRACES_BASELINE must never change', () => {
+		expect(TRACES_BASELINE).toMatchSnapshot();
+	});
+});
+
+describe('pickBaseline', () => {
+	it('returns metrics baseline for metrics dataSource', () => {
+		const query = {
+			builder: { queryData: [{ dataSource: 'metrics' }] },
+		} as any;
+
+		const result = pickBaseline(query);
+
+		expect(result.baseline).toBe(METRICS_BASELINE);
+		expect(result.tag).toBe('m');
+	});
+
+	it('returns logs baseline for logs dataSource', () => {
+		const query = {
+			builder: { queryData: [{ dataSource: 'logs' }] },
+		} as any;
+
+		const result = pickBaseline(query);
+
+		expect(result.baseline).toBe(LOGS_BASELINE);
+		expect(result.tag).toBe('l');
+	});
+
+	it('returns traces baseline for traces dataSource', () => {
+		const query = {
+			builder: { queryData: [{ dataSource: 'traces' }] },
+		} as any;
+
+		const result = pickBaseline(query);
+
+		expect(result.baseline).toBe(TRACES_BASELINE);
+		expect(result.tag).toBe('t');
+	});
+
+	it('defaults to metrics baseline for unknown dataSource', () => {
+		const query = {
+			builder: { queryData: [{ dataSource: 'unknown' }] },
+		} as any;
+
+		const result = pickBaseline(query);
+
+		expect(result.baseline).toBe(METRICS_BASELINE);
+		expect(result.tag).toBe('m');
+	});
+
+	it('defaults to metrics baseline when queryData is empty', () => {
+		const query = {
+			builder: { queryData: [] },
+		} as any;
+
+		const result = pickBaseline(query);
+
+		expect(result.baseline).toBe(METRICS_BASELINE);
+		expect(result.tag).toBe('m');
+	});
+});
+
+describe('getBaselineByTag', () => {
+	it('returns LOGS_BASELINE for tag "l"', () => {
+		expect(getBaselineByTag('l')).toBe(LOGS_BASELINE);
+	});
+
+	it('returns TRACES_BASELINE for tag "t"', () => {
+		expect(getBaselineByTag('t')).toBe(TRACES_BASELINE);
+	});
+
+	it('returns METRICS_BASELINE for tag "m"', () => {
+		expect(getBaselineByTag('m')).toBe(METRICS_BASELINE);
+	});
+});

frontend/src/lib/compositeQuery/__tests__/serializer.test.ts

@@ -0,0 +1,40 @@
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { deserialize, serialize } from 'lib/compositeQuery/serializer';
+
+describe('composite query serializer', () => {
+	it('serialize picks shortest format', () => {
+		const query = initialQueriesMap.metrics;
+		const serialized = serialize(query);
+		const jsonSerialized = encodeURIComponent(JSON.stringify(query));
+		// Serializer should pick a format shorter than or equal to raw JSON
+		expect(serialized.length).toBeLessThanOrEqual(jsonSerialized.length);
+		// Should use a tagged format with baseline indicator (m/l/t)
+		const usesTaggedFormat =
+			/^V1[mlt]~/.test(serialized) ||
+			/^TV[mlt]~/.test(serialized) ||
+			/^FV[mlt]~/.test(serialized) ||
+			/^FK[mlt]~/.test(serialized);
+		expect(usesTaggedFormat).toBe(true);
+	});
+
+	it('round-trips through serialize/deserialize', () => {
+		const query = initialQueriesMap.logs;
+		const decoded = deserialize(serialize(query));
+		expect(decoded?.builder.queryData[0].dataSource).toBe('logs');
+	});
+
+	it('returns null on corrupt input instead of throwing', () => {
+		expect(deserialize('%7Bnot-json')).toBeNull();
+	});
+
+	it('returns null for empty/missing value', () => {
+		expect(deserialize('')).toBeNull();
+	});
+
+	it('preserves id field through roundtrip', () => {
+		const query = { ...initialQueriesMap.metrics, id: 'test-query-uuid-123' };
+		const serialized = serialize(query);
+		const decoded = deserialize(serialized);
+		expect(decoded?.id).toBe('test-query-uuid-123');
+	});
+});

frontend/src/lib/compositeQuery/adapters/flatKeys/codec.ts

@@ -0,0 +1,166 @@
+/**
+ * Flat-keys codec: a baseline-diff serializer that shortens keys but keeps
+ * values as raw JSON. Simpler than flat-leaf — no field-aware enum compression.
+ *
+ * Wire grammar (tokens joined by `*`):
+ *   set:    <shortPath>_<escapedJSON>   e.g.  b.qd.0.ds_"logs"
+ *   delete: -<shortPath>                e.g.  -b.qd.0.ag.0.mn
+ */
+import getBaselineByTag, {
+	BaselineTag,
+	pickBaseline,
+} from 'lib/compositeQuery/baseline';
+import { INVERSE_KEY_MAP, KEY_MAP } from './maps';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+type Json = unknown;
+type PathSeg = string | number;
+
+const PAIR = '*';
+const KV = '_';
+const DEL = '-';
+
+const isIndex = (seg: string): boolean => /^\d+$/.test(seg);
+
+const isContainer = (value: Json): value is Record<string, Json> | Json[] =>
+	typeof value === 'object' && value !== null;
+
+const isEmptyContainer = (value: Json): boolean =>
+	isContainer(value) &&
+	(Array.isArray(value) ? value.length === 0 : Object.keys(value).length === 0);
+
+const isLeaf = (value: Json): boolean =>
+	!isContainer(value) || isEmptyContainer(value);
+
+const shortenSeg = (seg: PathSeg): PathSeg =>
+	typeof seg === 'number' ? seg : (KEY_MAP[seg] ?? seg);
+
+function leafMap(obj: Json): Record<string, Json> {
+	const out: Record<string, Json> = {};
+	const walk = (node: Json, segs: PathSeg[]): void => {
+		if (isLeaf(node)) {
+			out[segs.map(shortenSeg).join('.')] = node;
+			return;
+		}
+		if (Array.isArray(node)) {
+			node.forEach((value, index) => walk(value, [...segs, index]));
+			return;
+		}
+		Object.entries(node as Record<string, Json>).forEach(([key, value]) =>
+			walk(value, [...segs, key]),
+		);
+	};
+	walk(obj, []);
+	return out;
+}
+
+function escapeValue(str: string): string {
+	let escaped = str.replace(/_/g, '__').replace(/\*/g, '_s');
+	if (escaped[0] === '!') {
+		escaped = `_i${escaped.slice(1)}`;
+	}
+	return escaped;
+}
+
+const UNESCAPE: Record<string, string> = { _: '_', s: '*', i: '!' };
+
+function unescapeValue(str: string): string {
+	let out = '';
+	for (let i = 0; i < str.length; i += 1) {
+		if (str[i] === '_') {
+			const next = str[i + 1];
+			out += UNESCAPE[next] ?? next;
+			i += 1;
+		} else {
+			out += str[i];
+		}
+	}
+	return out;
+}
+
+function encodeLeaf(value: Json): string {
+	if (value === undefined) {
+		return escapeValue('null');
+	}
+	return escapeValue(JSON.stringify(value));
+}
+
+function decodeLeaf(token: string): Json {
+	return JSON.parse(unescapeValue(token));
+}
+
+function parsePath(pathStr: string): PathSeg[] {
+	return pathStr
+		.split('.')
+		.map((seg) => (isIndex(seg) ? Number(seg) : (INVERSE_KEY_MAP[seg] ?? seg)));
+}
+
+function setPath(
+	root: Record<string, Json>,
+	segs: PathSeg[],
+	value: Json,
+): void {
+	let node: Json = root;
+	for (let i = 0; i < segs.length - 1; i += 1) {
+		const seg = segs[i];
+		const container = node as Record<string | number, Json>;
+		if (!isContainer(container[seg])) {
+			container[seg] = typeof segs[i + 1] === 'number' ? [] : {};
+		}
+		node = container[seg];
+	}
+	(node as Record<string | number, Json>)[segs[segs.length - 1]] = value;
+}
+
+function rebuildFromLeaves(map: Record<string, Json>): Record<string, Json> {
+	const root: Record<string, Json> = {};
+	Object.entries(map).forEach(([path, value]) => {
+		setPath(root, parsePath(path), value);
+	});
+	return root;
+}
+
+export function encode(query: Query): { payload: string; tag: BaselineTag } {
+	const { baseline, tag } = pickBaseline(query);
+	const base = leafMap(baseline);
+	const next = leafMap(query);
+	const tokens: string[] = [];
+	Object.entries(next).forEach(([path, value]) => {
+		const baseVal = base[path];
+		const normalizedBase = baseVal === undefined ? null : baseVal;
+		const normalizedNext = value === undefined ? null : value;
+		if (
+			path in base &&
+			JSON.stringify(normalizedBase) === JSON.stringify(normalizedNext)
+		) {
+			return;
+		}
+		tokens.push(`${path}${KV}${encodeLeaf(value)}`);
+	});
+	Object.keys(base).forEach((path) => {
+		if (!(path in next)) {
+			tokens.push(`${DEL}${path}`);
+		}
+	});
+	tokens.sort();
+	return { payload: tokens.join(PAIR), tag };
+}
+
+export function decode(payload: string, tag: BaselineTag): Query {
+	const map = leafMap(getBaselineByTag(tag));
+	if (payload) {
+		payload.split(PAIR).forEach((token) => {
+			if (!token) {
+				return;
+			}
+			if (token[0] === DEL) {
+				delete map[token.slice(1)];
+				return;
+			}
+			const sep = token.indexOf(KV);
+			const path = token.slice(0, sep);
+			map[path] = decodeLeaf(token.slice(sep + 1));
+		});
+	}
+	return rebuildFromLeaves(map) as unknown as Query;
+}

frontend/src/lib/compositeQuery/adapters/flatKeys/flatKeys.test.ts

@@ -0,0 +1,100 @@
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { roundTripScenarios } from '../testing/scenarios';
+import { decodeFlatKeys, encodeFlatKeys, flatKeysAdapter } from './index';
+
+const roundTrip = (query: Query): Query =>
+	flatKeysAdapter.decode(flatKeysAdapter.encode(query));
+
+const clone = (query: Query): Query =>
+	JSON.parse(JSON.stringify(query)) as Query;
+
+describe('flatKeysAdapter', () => {
+	describe('round-trip scenarios', () => {
+		it.each(roundTripScenarios)('$name', ({ query }) => {
+			expect(roundTrip(query)).toStrictEqual(query);
+		});
+	});
+
+	describe('tag matching', () => {
+		it('tags output with FKm~/FKl~/FKt~', () => {
+			const metricsEncoded = flatKeysAdapter.encode(initialQueriesMap.metrics);
+			expect(metricsEncoded.startsWith('FKm~')).toBe(true);
+
+			const logsEncoded = flatKeysAdapter.encode(initialQueriesMap.logs);
+			expect(logsEncoded.startsWith('FKl~')).toBe(true);
+
+			const tracesEncoded = flatKeysAdapter.encode(initialQueriesMap.traces);
+			expect(tracesEncoded.startsWith('FKt~')).toBe(true);
+		});
+
+		it('matches only own tags', () => {
+			const encoded = flatKeysAdapter.encode(initialQueriesMap.metrics);
+			expect(flatKeysAdapter.matches(encoded)).toBe(true);
+			expect(flatKeysAdapter.matches('FVm~')).toBe(false);
+			expect(flatKeysAdapter.matches('%7Bnot-mine')).toBe(false);
+		});
+	});
+
+	describe('baseline behavior', () => {
+		it('uses correct baseline tag per dataSource', () => {
+			expect(encodeFlatKeys(initialQueriesMap.logs).tag).toBe('l');
+			expect(encodeFlatKeys(initialQueriesMap.traces).tag).toBe('t');
+			expect(encodeFlatKeys(initialQueriesMap.metrics).tag).toBe('m');
+		});
+
+		it('decodeFlatKeys on empty payload returns baseline', () => {
+			const decodedMetrics = decodeFlatKeys('', 'm');
+			expect(decodedMetrics.queryType).toBe('builder');
+			expect(decodedMetrics.builder.queryData[0].dataSource).toBe('metrics');
+
+			const decodedLogs = decodeFlatKeys('', 'l');
+			expect(decodedLogs.builder.queryData[0].dataSource).toBe('logs');
+		});
+	});
+
+	describe('encoding stability', () => {
+		it('identical encoding after roundtrip', () => {
+			const query = initialQueriesMap.metrics;
+			const encoded1 = flatKeysAdapter.encode(query);
+			const decoded = flatKeysAdapter.decode(encoded1);
+			const encoded2 = flatKeysAdapter.encode(decoded);
+
+			expect(encoded2).toBe(encoded1);
+		});
+
+		it('key order independent', () => {
+			const query1 = initialQueriesMap.metrics;
+			const query2 = JSON.parse(JSON.stringify(query1)) as Query;
+
+			const reordered = {
+				unit: query2.unit,
+				id: query2.id,
+				queryType: query2.queryType,
+				clickhouse_sql: query2.clickhouse_sql,
+				promql: query2.promql,
+				builder: query2.builder,
+			} as Query;
+
+			const encoded1 = flatKeysAdapter.encode(query1);
+			const encoded2 = flatKeysAdapter.encode(reordered);
+
+			expect(encoded2).toBe(encoded1);
+		});
+	});
+
+	describe('undefined handling', () => {
+		it('handles undefined values without breaking decode', () => {
+			const query = clone(initialQueriesMap.logs);
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(query.builder.queryData[0] as any).aggregateOperator = undefined;
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(query.builder.queryData[0] as any).source = undefined;
+
+			const encoded = flatKeysAdapter.encode(query);
+			const decoded = flatKeysAdapter.decode(encoded);
+			expect(decoded).not.toBeNull();
+		});
+	});
+});

frontend/src/lib/compositeQuery/adapters/flatKeys/index.ts

@@ -0,0 +1,32 @@
+import { BaselineTag } from 'lib/compositeQuery/baseline';
+import { decode, encode } from './codec';
+import { CompositeQueryAdapter } from './types';
+
+const TAG_PREFIX = 'FK';
+const TAG_SUFFIX = '~';
+
+/**
+ * Flat-keys (FK~): stores a query as a keys-only, leaf-flattened diff from the
+ * frozen baseline. Uses short keys but keeps values as raw JSON (no field-aware
+ * enum compression).
+ *
+ * Useful for benchmarking: isolates contribution of key shortening from value compression.
+ */
+export const flatKeysAdapter: CompositeQueryAdapter = {
+	name: 'flat-keys',
+	encode: (query) => {
+		const { payload, tag } = encode(query);
+		return `${TAG_PREFIX}${tag}${TAG_SUFFIX}${payload}`;
+	},
+	matches: (raw) =>
+		raw.startsWith(`${TAG_PREFIX}m${TAG_SUFFIX}`) ||
+		raw.startsWith(`${TAG_PREFIX}l${TAG_SUFFIX}`) ||
+		raw.startsWith(`${TAG_PREFIX}t${TAG_SUFFIX}`),
+	decode: (raw) => {
+		const tag = raw[2] as BaselineTag;
+		const payload = raw.slice(4);
+		return decode(payload, tag);
+	},
+};
+
+export { encode as encodeFlatKeys, decode as decodeFlatKeys } from './codec';

frontend/src/lib/compositeQuery/adapters/flatKeys/maps.ts

@@ -0,0 +1,51 @@
+/**
+ * Key shortening map for flatKeys adapter.
+ * No value compression - only key shortening.
+ */
+export const KEY_MAP: Record<string, string> = {
+	queryType: 'qt',
+	builder: 'b',
+	queryData: 'qd',
+	queryFormulas: 'qf',
+	queryTraceOperator: 'qo',
+	dataSource: 'ds',
+	queryName: 'qn',
+	aggregateOperator: 'ao',
+	aggregateAttribute: 'aa',
+	timeAggregation: 'ta',
+	spaceAggregation: 'sa',
+	filter: 'f',
+	expression: 'e',
+	aggregations: 'ag',
+	functions: 'fn',
+	filters: 'fl',
+	items: 'i',
+	disabled: 'd',
+	stepInterval: 'si',
+	having: 'h',
+	limit: 'l',
+	orderBy: 'ob',
+	groupBy: 'gb',
+	legend: 'lg',
+	reduceTo: 'rt',
+	source: 's',
+	promql: 'pq',
+	clickhouse_sql: 'cs',
+	name: 'n',
+	query: 'q',
+	key: 'k',
+	dataType: 'dt',
+	type: 't',
+	metricName: 'mn',
+	temporality: 'tp',
+	columnName: 'cn',
+	order: 'o',
+	value: 'v',
+	op: 'op',
+	isColumn: 'ic',
+	isJSON: 'ij',
+};
+
+export const INVERSE_KEY_MAP: Record<string, string> = Object.fromEntries(
+	Object.entries(KEY_MAP).map(([long, short]) => [short, long]),
+);

frontend/src/lib/compositeQuery/adapters/flatKeys/types.ts

@@ -0,0 +1,8 @@
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface CompositeQueryAdapter {
+	readonly name: string;
+	encode(query: Query): string;
+	matches(raw: string): boolean;
+	decode(raw: string): Query;
+}

frontend/src/lib/compositeQuery/adapters/flatLeaf/codec.ts

@@ -0,0 +1,197 @@
+/**
+ * Flat-leaf codec: a baseline-diff serializer that emits one token per changed
+ * scalar leaf, with no JSON wrapper characters on the wire.
+ *
+ * Both the baseline and the query are flattened to maps of
+ * `{ shortDotPath: scalarLeaf }` (arrays walked element-wise, so `queryData[0]`
+ * becomes `qd.0`). Encode diffs the two maps and emits a token per changed or
+ * removed leaf; decode replays those tokens onto the baseline map and rebuilds
+ * the nested object. Because arrays are walked element-wise, adding one filter
+ * costs a few scalar tokens instead of a whole-array JSON blob.
+ *
+ * Wire grammar (tokens joined by `*`):
+ *   set:    <shortPath>_<encodedLeaf>   e.g.  b.qd.0.ds_0
+ *   delete: -<shortPath>                e.g.  -b.qd.0.ag.0.mn
+ */
+import getBaselineByTag, {
+	BaselineTag,
+	pickBaseline,
+} from 'lib/compositeQuery/baseline';
+import {
+	FIELD_DOMAINS,
+	INVERSE_FIELD_DOMAINS,
+	INVERSE_KEY_MAP,
+	KEY_MAP,
+} from './maps';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+type Json = unknown;
+type PathSeg = string | number;
+
+const PAIR = '*';
+const KV = '_';
+const DEL = '-';
+
+const isIndex = (seg: string): boolean => /^\d+$/.test(seg);
+
+const isContainer = (value: Json): value is Record<string, Json> | Json[] =>
+	typeof value === 'object' && value !== null;
+
+const isEmptyContainer = (value: Json): boolean =>
+	isContainer(value) &&
+	(Array.isArray(value) ? value.length === 0 : Object.keys(value).length === 0);
+
+const isLeaf = (value: Json): boolean =>
+	!isContainer(value) || isEmptyContainer(value);
+
+const shortenSeg = (seg: PathSeg): PathSeg =>
+	typeof seg === 'number' ? seg : (KEY_MAP[seg] ?? seg);
+
+const lastSeg = (path: string): string => path.slice(path.lastIndexOf('.') + 1);
+
+function leafMap(obj: Json): Record<string, Json> {
+	const out: Record<string, Json> = {};
+	const walk = (node: Json, segs: PathSeg[]): void => {
+		if (isLeaf(node)) {
+			out[segs.map(shortenSeg).join('.')] = node;
+			return;
+		}
+		if (Array.isArray(node)) {
+			node.forEach((value, index) => walk(value, [...segs, index]));
+			return;
+		}
+		Object.entries(node as Record<string, Json>).forEach(([key, value]) =>
+			walk(value, [...segs, key]),
+		);
+	};
+	walk(obj, []);
+	return out;
+}
+
+function escapeValue(str: string): string {
+	let escaped = str.replace(/_/g, '__').replace(/\*/g, '_s');
+	if (escaped[0] === '!') {
+		escaped = `_i${escaped.slice(1)}`;
+	}
+	return escaped;
+}
+
+const UNESCAPE: Record<string, string> = { _: '_', s: '*', i: '!' };
+
+function unescapeValue(str: string): string {
+	let out = '';
+	for (let i = 0; i < str.length; i += 1) {
+		if (str[i] === '_') {
+			const next = str[i + 1];
+			out += UNESCAPE[next] ?? next;
+			i += 1;
+		} else {
+			out += str[i];
+		}
+	}
+	return out;
+}
+
+function encodeLeaf(value: Json, shortKey: string): string {
+	if (typeof value === 'string') {
+		const domain = FIELD_DOMAINS[shortKey];
+		if (domain?.[value] !== undefined) {
+			return String(domain[value]);
+		}
+		return escapeValue(value);
+	}
+	if (value === undefined) {
+		return '!null';
+	}
+	return `!${JSON.stringify(value)}`;
+}
+
+function decodeLeaf(token: string, shortKey: string): Json {
+	if (token[0] === '!') {
+		return JSON.parse(token.slice(1));
+	}
+	const inverse = INVERSE_FIELD_DOMAINS[shortKey];
+	if (inverse && isIndex(token)) {
+		const mapped = inverse[Number(token)];
+		if (mapped !== undefined) {
+			return mapped;
+		}
+	}
+	return unescapeValue(token);
+}
+
+function parsePath(pathStr: string): PathSeg[] {
+	return pathStr
+		.split('.')
+		.map((seg) => (isIndex(seg) ? Number(seg) : (INVERSE_KEY_MAP[seg] ?? seg)));
+}
+
+function setPath(
+	root: Record<string, Json>,
+	segs: PathSeg[],
+	value: Json,
+): void {
+	let node: Json = root;
+	for (let i = 0; i < segs.length - 1; i += 1) {
+		const seg = segs[i];
+		const container = node as Record<string | number, Json>;
+		if (!isContainer(container[seg])) {
+			container[seg] = typeof segs[i + 1] === 'number' ? [] : {};
+		}
+		node = container[seg];
+	}
+	(node as Record<string | number, Json>)[segs[segs.length - 1]] = value;
+}
+
+function rebuildFromLeaves(map: Record<string, Json>): Record<string, Json> {
+	const root: Record<string, Json> = {};
+	Object.entries(map).forEach(([path, value]) => {
+		setPath(root, parsePath(path), value);
+	});
+	return root;
+}
+
+export function encode(query: Query): { payload: string; tag: BaselineTag } {
+	const { baseline, tag } = pickBaseline(query);
+	const base = leafMap(baseline);
+	const next = leafMap(query);
+	const tokens: string[] = [];
+	Object.entries(next).forEach(([path, value]) => {
+		const baseVal = base[path];
+		const normalizedBase = baseVal === undefined ? null : baseVal;
+		const normalizedNext = value === undefined ? null : value;
+		if (
+			path in base &&
+			JSON.stringify(normalizedBase) === JSON.stringify(normalizedNext)
+		) {
+			return;
+		}
+		tokens.push(`${path}${KV}${encodeLeaf(value, lastSeg(path))}`);
+	});
+	Object.keys(base).forEach((path) => {
+		if (!(path in next)) {
+			tokens.push(`${DEL}${path}`);
+		}
+	});
+	tokens.sort();
+	return { payload: tokens.join(PAIR), tag };
+}
+
+export function decode(payload: string, tag: BaselineTag): Query {
+	const map = leafMap(getBaselineByTag(tag));
+	if (payload) {
+		payload.split(PAIR).forEach((token) => {
+			if (!token) {
+				return;
+			}
+			if (token[0] === DEL) {
+				delete map[token.slice(1)];
+				return;
+			}
+			const sep = token.indexOf(KV);
+			const path = token.slice(0, sep);
+			map[path] = decodeLeaf(token.slice(sep + 1), lastSeg(path));
+		});
+	}
+	return rebuildFromLeaves(map) as unknown as Query;
+}

frontend/src/lib/compositeQuery/adapters/flatLeaf/flatLeaf.test.ts

@@ -0,0 +1,151 @@
+import { isEqual } from 'lodash-es';
+
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { roundTripScenarios } from '../testing/scenarios';
+import { decodeFlatLeaf, encodeFlatLeaf, flatLeafAdapter } from './index';
+
+const roundTrip = (query: Query): Query =>
+	flatLeafAdapter.decode(flatLeafAdapter.encode(query));
+
+const clone = (query: Query): Query =>
+	JSON.parse(JSON.stringify(query)) as Query;
+
+describe('flatLeafAdapter', () => {
+	describe('round-trip scenarios', () => {
+		it.each(roundTripScenarios)('$name', ({ query }) => {
+			expect(roundTrip(query)).toStrictEqual(query);
+		});
+	});
+
+	describe('tag matching', () => {
+		it('tags output with FVm~/FVl~/FVt~', () => {
+			const metricsEncoded = flatLeafAdapter.encode(initialQueriesMap.metrics);
+			expect(metricsEncoded.startsWith('FVm~')).toBe(true);
+
+			const logsEncoded = flatLeafAdapter.encode(initialQueriesMap.logs);
+			expect(logsEncoded.startsWith('FVl~')).toBe(true);
+
+			const tracesEncoded = flatLeafAdapter.encode(initialQueriesMap.traces);
+			expect(tracesEncoded.startsWith('FVt~')).toBe(true);
+		});
+
+		it('matches only own tags', () => {
+			const encoded = flatLeafAdapter.encode(initialQueriesMap.metrics);
+			expect(flatLeafAdapter.matches(encoded)).toBe(true);
+			expect(flatLeafAdapter.matches('V1m~[]')).toBe(false);
+			expect(flatLeafAdapter.matches('%7Bnot-mine')).toBe(false);
+		});
+	});
+
+	describe('baseline behavior', () => {
+		it('uses correct baseline tag per dataSource', () => {
+			expect(encodeFlatLeaf(initialQueriesMap.logs).tag).toBe('l');
+			expect(encodeFlatLeaf(initialQueriesMap.traces).tag).toBe('t');
+			expect(encodeFlatLeaf(initialQueriesMap.metrics).tag).toBe('m');
+		});
+
+		it('emits no payload when query equals baseline shape', () => {
+			const { payload, tag } = encodeFlatLeaf(initialQueriesMap.logs);
+			expect(tag).toBe('l');
+			expect(decodeFlatLeaf(payload, tag)).toStrictEqual(initialQueriesMap.logs);
+		});
+
+		it('decodeFlatLeaf on empty payload returns baseline', () => {
+			const decodedMetrics = decodeFlatLeaf('', 'm');
+			expect(decodedMetrics.queryType).toBe('builder');
+			expect(decodedMetrics.builder.queryData[0].dataSource).toBe('metrics');
+
+			const decodedLogs = decodeFlatLeaf('', 'l');
+			expect(decodedLogs.builder.queryData[0].dataSource).toBe('logs');
+		});
+	});
+
+	describe('encoding stability', () => {
+		it('identical encoding after roundtrip', () => {
+			const query = initialQueriesMap.metrics;
+			const encoded1 = flatLeafAdapter.encode(query);
+			const decoded = flatLeafAdapter.decode(encoded1);
+			const encoded2 = flatLeafAdapter.encode(decoded);
+
+			expect(encoded2).toBe(encoded1);
+		});
+
+		it('key order independent', () => {
+			const query1 = initialQueriesMap.metrics;
+			const query2 = JSON.parse(JSON.stringify(query1)) as Query;
+
+			const reordered = {
+				unit: query2.unit,
+				id: query2.id,
+				queryType: query2.queryType,
+				clickhouse_sql: query2.clickhouse_sql,
+				promql: query2.promql,
+				builder: query2.builder,
+			} as Query;
+
+			const encoded1 = flatLeafAdapter.encode(query1);
+			const encoded2 = flatLeafAdapter.encode(reordered);
+
+			expect(encoded2).toBe(encoded1);
+		});
+
+		it('stable after spread/reconstruct', () => {
+			const query = { ...initialQueriesMap.metrics };
+			const encoded1 = flatLeafAdapter.encode(query);
+
+			const transformed = {
+				...query,
+				builder: {
+					...query.builder,
+					queryData: query.builder.queryData.map((item) => ({
+						...item,
+					})),
+				},
+			};
+			const encoded2 = flatLeafAdapter.encode(transformed);
+
+			expect(encoded2).toBe(encoded1);
+		});
+	});
+
+	describe('key validation', () => {
+		it('decoded query has all keys expected by replaceIncorrectObjectFields', () => {
+			const decoded = flatLeafAdapter.decode(
+				flatLeafAdapter.encode(initialQueriesMap.metrics),
+			);
+			const decodedKeys = Object.keys(decoded).sort();
+			const expectedKeys = Object.keys(initialQueriesMap.metrics).sort();
+
+			expect(decodedKeys).toStrictEqual(expectedKeys);
+		});
+	});
+
+	describe('isEqual compatibility', () => {
+		it('lodash isEqual works for decoded queries', () => {
+			const query = initialQueriesMap.metrics;
+			const encoded = flatLeafAdapter.encode(query);
+			const decoded = flatLeafAdapter.decode(encoded);
+
+			const { id: _id1, ...rest1 } = query;
+			const { id: _id2, ...rest2 } = decoded;
+
+			expect(isEqual(rest1, rest2)).toBe(true);
+		});
+	});
+
+	describe('undefined handling', () => {
+		it('handles undefined values without breaking decode', () => {
+			const query = clone(initialQueriesMap.logs);
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(query.builder.queryData[0] as any).aggregateOperator = undefined;
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(query.builder.queryData[0] as any).source = undefined;
+
+			const encoded = flatLeafAdapter.encode(query);
+			const decoded = flatLeafAdapter.decode(encoded);
+			expect(decoded).not.toBeNull();
+		});
+	});
+});

frontend/src/lib/compositeQuery/adapters/flatLeaf/index.ts

@@ -0,0 +1,30 @@
+import { BaselineTag } from 'lib/compositeQuery/baseline';
+import { decode, encode } from './codec';
+import { CompositeQueryAdapter } from './types';
+
+const TAG_PREFIX = 'FV';
+const TAG_SUFFIX = '~';
+
+/**
+ * Flat-leaf (FV~): stores a query as a field-aware, leaf-flattened diff from the
+ * frozen baseline. Uses the smart hybrid strategy — metrics or logs baseline
+ * picked by dataSource — so the tag is FVm~ (metrics) or FVl~ (logs).
+ */
+export const flatLeafAdapter: CompositeQueryAdapter = {
+	name: 'flat-leaf',
+	encode: (query) => {
+		const { payload, tag } = encode(query);
+		return `${TAG_PREFIX}${tag}${TAG_SUFFIX}${payload}`;
+	},
+	matches: (raw) =>
+		raw.startsWith(`${TAG_PREFIX}m${TAG_SUFFIX}`) ||
+		raw.startsWith(`${TAG_PREFIX}l${TAG_SUFFIX}`) ||
+		raw.startsWith(`${TAG_PREFIX}t${TAG_SUFFIX}`),
+	decode: (raw) => {
+		const tag = raw[2] as BaselineTag;
+		const payload = raw.slice(4);
+		return decode(payload, tag);
+	},
+};
+
+export { encode as encodeFlatLeaf, decode as decodeFlatLeaf } from './codec';

frontend/src/lib/compositeQuery/adapters/flatLeaf/maps.ts

@@ -0,0 +1,197 @@
+import {
+	MetrictypesSpaceAggregationDTO,
+	MetrictypesTemporalityDTO,
+	MetrictypesTimeAggregationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
+	AutocompleteType,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { EQueryType } from 'types/common/dashboard';
+import {
+	DataSource,
+	LogsAggregatorOperator,
+	MetricAggregateOperator,
+	ReduceOperators,
+	TracesAggregatorOperator,
+} from 'types/common/queryBuilder';
+
+export const KEY_MAP: Record<string, string> = {
+	queryType: 'qt',
+	builder: 'b',
+	queryData: 'qd',
+	queryFormulas: 'qf',
+	queryTraceOperator: 'qo',
+	dataSource: 'ds',
+	queryName: 'qn',
+	aggregateOperator: 'ao',
+	aggregateAttribute: 'aa',
+	timeAggregation: 'ta',
+	spaceAggregation: 'sa',
+	filter: 'f',
+	expression: 'e',
+	aggregations: 'ag',
+	functions: 'fn',
+	filters: 'fl',
+	items: 'i',
+	disabled: 'd',
+	stepInterval: 'si',
+	having: 'h',
+	limit: 'l',
+	orderBy: 'ob',
+	groupBy: 'gb',
+	legend: 'lg',
+	reduceTo: 'rt',
+	source: 's',
+	promql: 'pq',
+	clickhouse_sql: 'cs',
+	name: 'n',
+	query: 'q',
+	key: 'k',
+	dataType: 'dt',
+	type: 't',
+	metricName: 'mn',
+	temporality: 'tp',
+	columnName: 'cn',
+	order: 'o',
+	value: 'v',
+	op: 'op',
+	isColumn: 'ic',
+	isJSON: 'ij',
+};
+
+export const INVERSE_KEY_MAP: Record<string, string> = Object.fromEntries(
+	Object.entries(KEY_MAP).map(([long, short]) => [short, long]),
+);
+
+const DATA_SOURCE: Record<DataSource, number> = {
+	[DataSource.LOGS]: 0,
+	[DataSource.METRICS]: 1,
+	[DataSource.TRACES]: 2,
+};
+
+const QUERY_TYPE: Record<EQueryType, number> = {
+	[EQueryType.QUERY_BUILDER]: 0,
+	[EQueryType.PROM]: 1,
+	[EQueryType.CLICKHOUSE]: 2,
+};
+
+const REDUCE_TO: Record<ReduceOperators, number> = {
+	[ReduceOperators.LAST]: 0,
+	[ReduceOperators.SUM]: 1,
+	[ReduceOperators.AVG]: 2,
+	[ReduceOperators.MAX]: 3,
+	[ReduceOperators.MIN]: 4,
+};
+
+const TEMPORALITY: Record<MetrictypesTemporalityDTO, number> = {
+	[MetrictypesTemporalityDTO.delta]: 0,
+	[MetrictypesTemporalityDTO.cumulative]: 1,
+	[MetrictypesTemporalityDTO.unspecified]: 2,
+};
+
+const TIME_AGGREGATION: Record<MetrictypesTimeAggregationDTO, number> = {
+	[MetrictypesTimeAggregationDTO.latest]: 0,
+	[MetrictypesTimeAggregationDTO.sum]: 1,
+	[MetrictypesTimeAggregationDTO.avg]: 2,
+	[MetrictypesTimeAggregationDTO.min]: 3,
+	[MetrictypesTimeAggregationDTO.max]: 4,
+	[MetrictypesTimeAggregationDTO.count]: 5,
+	[MetrictypesTimeAggregationDTO.count_distinct]: 6,
+	[MetrictypesTimeAggregationDTO.rate]: 7,
+	[MetrictypesTimeAggregationDTO.increase]: 8,
+};
+
+const SPACE_AGGREGATION: Record<MetrictypesSpaceAggregationDTO, number> = {
+	[MetrictypesSpaceAggregationDTO.sum]: 0,
+	[MetrictypesSpaceAggregationDTO.avg]: 1,
+	[MetrictypesSpaceAggregationDTO.min]: 2,
+	[MetrictypesSpaceAggregationDTO.max]: 3,
+	[MetrictypesSpaceAggregationDTO.count]: 4,
+	[MetrictypesSpaceAggregationDTO.p50]: 5,
+	[MetrictypesSpaceAggregationDTO.p75]: 6,
+	[MetrictypesSpaceAggregationDTO.p90]: 7,
+	[MetrictypesSpaceAggregationDTO.p95]: 8,
+	[MetrictypesSpaceAggregationDTO.p99]: 9,
+};
+
+const AGGREGATE_OPERATOR: Record<
+	MetricAggregateOperator | TracesAggregatorOperator | LogsAggregatorOperator,
+	number
+> = {
+	[MetricAggregateOperator.EMPTY]: 0,
+	[MetricAggregateOperator.NOOP]: 1,
+	[MetricAggregateOperator.COUNT]: 2,
+	[MetricAggregateOperator.COUNT_DISTINCT]: 3,
+	[MetricAggregateOperator.SUM]: 4,
+	[MetricAggregateOperator.AVG]: 5,
+	[MetricAggregateOperator.MAX]: 6,
+	[MetricAggregateOperator.MIN]: 7,
+	[MetricAggregateOperator.P05]: 8,
+	[MetricAggregateOperator.P10]: 9,
+	[MetricAggregateOperator.P20]: 10,
+	[MetricAggregateOperator.P25]: 11,
+	[MetricAggregateOperator.P50]: 12,
+	[MetricAggregateOperator.P75]: 13,
+	[MetricAggregateOperator.P90]: 14,
+	[MetricAggregateOperator.P95]: 15,
+	[MetricAggregateOperator.P99]: 16,
+	[MetricAggregateOperator.RATE]: 17,
+	[MetricAggregateOperator.SUM_RATE]: 18,
+	[MetricAggregateOperator.AVG_RATE]: 19,
+	[MetricAggregateOperator.MAX_RATE]: 20,
+	[MetricAggregateOperator.MIN_RATE]: 21,
+	[MetricAggregateOperator.RATE_SUM]: 22,
+	[MetricAggregateOperator.RATE_AVG]: 23,
+	[MetricAggregateOperator.RATE_MIN]: 24,
+	[MetricAggregateOperator.RATE_MAX]: 25,
+	[MetricAggregateOperator.HIST_QUANTILE_50]: 26,
+	[MetricAggregateOperator.HIST_QUANTILE_75]: 27,
+	[MetricAggregateOperator.HIST_QUANTILE_90]: 28,
+	[MetricAggregateOperator.HIST_QUANTILE_95]: 29,
+	[MetricAggregateOperator.HIST_QUANTILE_99]: 30,
+	[MetricAggregateOperator.INCREASE]: 31,
+	[MetricAggregateOperator.LATEST]: 32,
+};
+
+const DATA_TYPE: Record<DataTypes, number> = {
+	[DataTypes.Int64]: 0,
+	[DataTypes.String]: 1,
+	[DataTypes.Float64]: 2,
+	[DataTypes.bool]: 3,
+	[DataTypes.ArrayFloat64]: 4,
+	[DataTypes.ArrayInt64]: 5,
+	[DataTypes.ArrayString]: 6,
+	[DataTypes.ArrayBool]: 7,
+	[DataTypes.EMPTY]: 8,
+};
+
+const ATTR_TYPE: Record<AutocompleteType, number> = {
+	tag: 0,
+	resource: 1,
+	'': 2,
+};
+
+export const FIELD_DOMAINS: Record<string, Record<string, number>> = {
+	ds: DATA_SOURCE,
+	qt: QUERY_TYPE,
+	rt: REDUCE_TO,
+	tp: TEMPORALITY,
+	ta: TIME_AGGREGATION,
+	sa: SPACE_AGGREGATION,
+	ao: AGGREGATE_OPERATOR,
+	dt: DATA_TYPE,
+	t: ATTR_TYPE,
+};
+
+export const INVERSE_FIELD_DOMAINS: Record<
+	string,
+	Record<number, string>
+> = Object.fromEntries(
+	Object.entries(FIELD_DOMAINS).map(([field, domain]) => [
+		field,
+		Object.fromEntries(
+			Object.entries(domain).map(([str, int]) => [int, str]),
+		) as Record<number, string>,
+	]),
+);

frontend/src/lib/compositeQuery/adapters/flatLeaf/types.ts

@@ -0,0 +1,8 @@
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface CompositeQueryAdapter {
+	readonly name: string;
+	encode(query: Query): string;
+	matches(raw: string): boolean;
+	decode(raw: string): Query;
+}

frontend/src/lib/compositeQuery/adapters/json/index.ts

@@ -0,0 +1,55 @@
+import {
+	convertAggregationToExpression,
+	convertFiltersToExpressionWithExistingQuery,
+	convertHavingToExpression,
+} from 'components/QueryBuilderV2/utils';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { CompositeQueryAdapter } from './types';
+
+function migrateLegacyFormat(parsed: Query): Query {
+	if (!parsed?.builder?.queryData) {
+		return parsed;
+	}
+	const next = parsed;
+	next.builder.queryData = parsed.builder.queryData.map((query) => {
+		const existingExpression = query.filter?.expression || '';
+		const convertedQuery = { ...query };
+
+		const convertedFilter = convertFiltersToExpressionWithExistingQuery(
+			query.filters || { items: [], op: 'AND' },
+			existingExpression,
+		);
+		convertedQuery.filter = convertedFilter.filter;
+		convertedQuery.filters = convertedFilter.filters;
+
+		if (Array.isArray(query.having)) {
+			convertedQuery.having = convertHavingToExpression(query.having);
+		}
+
+		if (!query.aggregations && query.aggregateOperator) {
+			convertedQuery.aggregations = convertAggregationToExpression({
+				aggregateOperator: query.aggregateOperator,
+				aggregateAttribute: query.aggregateAttribute as BaseAutocompleteData,
+				dataSource: query.dataSource,
+				timeAggregation: query.timeAggregation,
+				spaceAggregation: query.spaceAggregation,
+				reduceTo: query.reduceTo,
+				temporality: query.temporality,
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			}) as any;
+		}
+		return convertedQuery;
+	});
+	return next;
+}
+
+export const jsonAdapter: CompositeQueryAdapter = {
+	name: 'json(legacy)',
+	encode: (query) => encodeURIComponent(JSON.stringify(query)),
+	matches: () => true,
+	decode: (raw) => {
+		const parsed: Query = JSON.parse(decodeURIComponent(raw.replace(/\+/g, ' ')));
+		return migrateLegacyFormat(parsed);
+	},
+};

frontend/src/lib/compositeQuery/adapters/json/json.test.ts

@@ -0,0 +1,68 @@
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { jsonAdapter } from './index';
+
+const roundTrip = (query: Query): Query =>
+	jsonAdapter.decode(jsonAdapter.encode(query));
+
+describe('jsonAdapter', () => {
+	describe('round-trip', () => {
+		it.each(['metrics', 'logs', 'traces'] as const)(
+			'round-trips %s baseline preserving dataSource',
+			(source) => {
+				const query = initialQueriesMap[source];
+				const decoded = roundTrip(query);
+				expect(decoded.builder.queryData[0].dataSource).toBe(source);
+			},
+		);
+	});
+
+	describe('legacy format compatibility', () => {
+		it('encodes to legacy format (encodeURIComponent + JSON)', () => {
+			const query = initialQueriesMap.logs;
+			const encoded = jsonAdapter.encode(query);
+
+			expect(encoded).toBe(encodeURIComponent(JSON.stringify(query)));
+			expect(encoded.startsWith('%7B')).toBe(true);
+		});
+	});
+
+	describe('tag matching', () => {
+		it('matches any value (catch-all fallback)', () => {
+			expect(jsonAdapter.matches('%7B%22queryType%22%3A%22builder%22%7D')).toBe(
+				true,
+			);
+			expect(jsonAdapter.matches('z1~abc')).toBe(true);
+		});
+	});
+
+	describe('migration', () => {
+		it('migrates old format (filters -> filter.expression)', () => {
+			const legacy = {
+				queryType: 'builder',
+				builder: {
+					queryData: [
+						{
+							dataSource: 'logs',
+							queryName: 'A',
+							filters: { op: 'AND', items: [] },
+							aggregateOperator: 'count',
+							aggregateAttribute: { key: '', dataType: '', type: '' },
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				promql: [],
+				clickhouse_sql: [],
+				id: 'x',
+				unit: '',
+			};
+			const raw = encodeURIComponent(JSON.stringify(legacy));
+			const decoded = jsonAdapter.decode(raw);
+			expect(decoded.builder.queryData[0].filter).toBeDefined();
+			expect(decoded.builder.queryData[0].aggregations).toBeDefined();
+		});
+	});
+});

frontend/src/lib/compositeQuery/adapters/json/types.ts

@@ -0,0 +1,8 @@
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface CompositeQueryAdapter {
+	readonly name: string;
+	encode(query: Query): string;
+	matches(raw: string): boolean;
+	decode(raw: string): Query;
+}

frontend/src/lib/compositeQuery/adapters/testing/scenarios.ts

@@ -0,0 +1,85 @@
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+
+export interface RoundTripScenario {
+	name: string;
+	query: Query;
+}
+
+const clone = <T>(obj: T): T => JSON.parse(JSON.stringify(obj)) as T;
+
+const makePromqlQuery = (): Query => {
+	const query = clone(initialQueriesMap.metrics);
+	query.queryType = EQueryType.PROM;
+	query.promql[0].query = 'rate(http_requests_total[5m])';
+	return query;
+};
+
+const makeClickhouseQuery = (): Query => {
+	const query = clone(initialQueriesMap.metrics);
+	query.queryType = EQueryType.CLICKHOUSE;
+	query.clickhouse_sql[0].query = 'SELECT count() FROM signoz_logs';
+	return query;
+};
+
+const makeModifiedBuilderQuery = (): Query => {
+	const query = clone(initialQueriesMap.logs);
+	const qd = query.builder.queryData[0];
+	qd.aggregateOperator = 'p95';
+	qd.disabled = true;
+	qd.stepInterval = 60;
+	qd.legend = 'error rate';
+	qd.filter = { expression: "severity_text = 'ERROR'" };
+	qd.filters = {
+		op: 'AND',
+		items: [
+			{
+				key: {
+					key: 'severity_text',
+					dataType: 'string',
+					type: 'tag',
+					isColumn: false,
+					isJSON: false,
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				} as any,
+				id: 'item-1',
+				op: '=',
+				value: 'ERROR',
+			},
+		],
+	};
+	qd.orderBy = [{ columnName: 'timestamp', order: 'desc' }];
+	return query;
+};
+
+const makeQueryWithCustomId = (): Query => ({
+	...initialQueriesMap.metrics,
+	id: 'test-query-uuid-123',
+});
+
+const makeQueryWithEnumLikeLegend = (): Query => {
+	const query = clone(initialQueriesMap.metrics);
+	query.builder.queryData[0].legend = 'sum';
+	query.id = 'my-query-id';
+	return query;
+};
+
+const makeQueryWithWireDelimiters = (): Query => {
+	const query = clone(initialQueriesMap.logs);
+	query.builder.queryData[0].legend = '_a*b_*c';
+	query.builder.queryData[0].filter = { expression: '!weird = "x_y*z"' };
+	return query;
+};
+
+export const roundTripScenarios: RoundTripScenario[] = [
+	{ name: 'metrics baseline', query: initialQueriesMap.metrics },
+	{ name: 'logs baseline', query: initialQueriesMap.logs },
+	{ name: 'traces baseline', query: initialQueriesMap.traces },
+	{ name: 'promql query', query: makePromqlQuery() },
+	{ name: 'clickhouse query', query: makeClickhouseQuery() },
+	{ name: 'modified builder query', query: makeModifiedBuilderQuery() },
+	{ name: 'custom id', query: makeQueryWithCustomId() },
+	{ name: 'enum-like legend preserved', query: makeQueryWithEnumLikeLegend() },
+	{ name: 'wire delimiters in values', query: makeQueryWithWireDelimiters() },
+];

frontend/src/lib/compositeQuery/baseline.ts

@@ -0,0 +1,179 @@
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+/**
+ * Frozen canonical baselines the V-raw/TV adapters diff against. Encode stores
+ * only the diff from the chosen baseline; decode replays it onto a clone. These
+ * MUST stay byte-stable forever — changing them silently invalidates every URL
+ * already emitted against the old baseline. To evolve the schema, add NEW
+ * tagged adapters (V2~) with their own baselines rather than editing these.
+ *
+ * `id`/`unit` are empty so a real query's values round-trip as ordinary diff
+ * entries (nothing is stripped before diffing).
+ */
+
+/** Baseline for metrics queries — uses metric-style aggregations object. */
+export const METRICS_BASELINE = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				dataSource: 'metrics',
+				queryName: 'A',
+				aggregateOperator: 'noop',
+				aggregateAttribute: {
+					id: '----',
+					key: '',
+					dataType: '',
+					type: '',
+				},
+				timeAggregation: 'rate',
+				spaceAggregation: 'sum',
+				filter: { expression: '' },
+				aggregations: [
+					{
+						metricName: '',
+						temporality: '',
+						timeAggregation: 'avg',
+						spaceAggregation: 'sum',
+						reduceTo: 'avg',
+					},
+				],
+				functions: [],
+				filters: { items: [], op: 'AND' },
+				expression: 'A',
+				disabled: false,
+				stepInterval: null,
+				having: [],
+				limit: null,
+				orderBy: [],
+				groupBy: [],
+				legend: '',
+				reduceTo: 'avg',
+				source: null,
+			},
+		],
+		queryFormulas: [],
+		queryTraceOperator: [],
+	},
+	promql: [{ name: 'A', query: '', legend: '', disabled: false }],
+	clickhouse_sql: [{ name: 'A', legend: '', disabled: false, query: '' }],
+	id: '',
+	unit: '',
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as any as Query;
+
+/** Baseline for logs/traces queries — uses expression-style aggregations. */
+export const LOGS_BASELINE = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				dataSource: 'logs',
+				queryName: 'A',
+				aggregateOperator: null,
+				aggregateAttribute: {
+					id: '----',
+					key: '',
+					dataType: '',
+					type: '',
+				},
+				timeAggregation: 'rate',
+				spaceAggregation: 'sum',
+				filter: { expression: '' },
+				aggregations: [{ expression: 'count() ' }],
+				functions: [],
+				filters: { items: [], op: 'AND' },
+				expression: 'A',
+				disabled: false,
+				stepInterval: null,
+				having: [],
+				limit: null,
+				orderBy: [],
+				groupBy: [],
+				legend: '',
+				reduceTo: 'avg',
+				source: null,
+			},
+		],
+		queryFormulas: [],
+		queryTraceOperator: [],
+	},
+	promql: [{ name: 'A', query: '', legend: '', disabled: false }],
+	clickhouse_sql: [{ name: 'A', legend: '', disabled: false, query: '' }],
+	id: '',
+	unit: '',
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as any as Query;
+
+/** Baseline for traces queries — same as logs but with dataSource: traces. */
+export const TRACES_BASELINE = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				dataSource: 'traces',
+				queryName: 'A',
+				aggregateOperator: null,
+				aggregateAttribute: {
+					id: '----',
+					key: '',
+					dataType: '',
+					type: '',
+				},
+				timeAggregation: 'rate',
+				spaceAggregation: 'sum',
+				filter: { expression: '' },
+				aggregations: [{ expression: 'count() ' }],
+				functions: [],
+				filters: { items: [], op: 'AND' },
+				expression: 'A',
+				disabled: false,
+				stepInterval: null,
+				having: [],
+				limit: null,
+				orderBy: [],
+				groupBy: [],
+				legend: '',
+				reduceTo: 'avg',
+				source: null,
+			},
+		],
+		queryFormulas: [],
+		queryTraceOperator: [],
+	},
+	promql: [{ name: 'A', query: '', legend: '', disabled: false }],
+	clickhouse_sql: [{ name: 'A', legend: '', disabled: false, query: '' }],
+	id: '',
+	unit: '',
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as any as Query;
+
+/** Baseline tag indicators for URL encoding. */
+export type BaselineTag = 'm' | 'l' | 't';
+
+/** Pick optimal baseline based on query's primary dataSource. */
+export function pickBaseline(query: Query): {
+	baseline: Query;
+	tag: BaselineTag;
+} {
+	const ds = query.builder?.queryData?.[0]?.dataSource;
+	if (ds === 'logs') {
+		return { baseline: LOGS_BASELINE, tag: 'l' };
+	}
+	if (ds === 'traces') {
+		return { baseline: TRACES_BASELINE, tag: 't' };
+	}
+	return { baseline: METRICS_BASELINE, tag: 'm' };
+}
+
+function getBaselineByTag(tag: BaselineTag): Query {
+	if (tag === 'l') {
+		return LOGS_BASELINE;
+	}
+	if (tag === 't') {
+		return TRACES_BASELINE;
+	}
+	return METRICS_BASELINE;
+}
+
+export default getBaselineByTag;

frontend/src/lib/compositeQuery/serializer.ts

@@ -0,0 +1,28 @@
+import { jsonAdapter } from 'lib/compositeQuery/adapters/json';
+import { CompositeQueryAdapter } from 'lib/compositeQuery/types';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { flatKeysAdapter } from 'lib/compositeQuery/adapters/flatKeys';
+
+// Order matters for decode: most-specific (tagged) adapters first, json last
+const ADAPTERS: CompositeQueryAdapter[] = [flatKeysAdapter, jsonAdapter];
+
+/** Encode a query to the shortest available URL value. */
+export function serialize(query: Query): string {
+	return ADAPTERS.map((adapter) => adapter.encode(query)).reduce(
+		(shortest, candidate) =>
+			candidate.length < shortest.length ? candidate : shortest,
+	);
+}
+
+/** Decode a URL value back to a Query. Total: returns null on any failure. */
+export function deserialize(raw: string): Query | null {
+	if (!raw) {
+		return null;
+	}
+	try {
+		const adapter = ADAPTERS.find((item) => item.matches(raw)) ?? jsonAdapter;
+		return adapter.decode(raw);
+	} catch {
+		return null;
+	}
+}

frontend/src/lib/compositeQuery/types.ts

@@ -0,0 +1,14 @@
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+/**
+ * A serialization tier. `encode` returns the COMPLETE URL value (tag prefix
+ * included for tagged tiers). `matches` decides whether a raw value belongs to
+ * this adapter on decode. `decode` receives the COMPLETE raw value and strips
+ * its own tag.
+ */
+export interface CompositeQueryAdapter {
+	readonly name: string;
+	encode(query: Query): string;
+	matches(raw: string): boolean;
+	decode(raw: string): Query;
+}

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

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from 'react';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- searchable async select: no @signozhq/ui equivalent
+import { Select } from 'antd';
+import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
+import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
+import useDebounce from 'hooks/useDebounce';
+
+import { TELEMETRY_SIGNALS, type TelemetrySignal } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface DynamicVariableFieldsProps {
+	attribute: string;
+	signal: TelemetrySignal;
+	onChange: (patch: {
+		dynamicAttribute?: string;
+		dynamicSignal?: TelemetrySignal;
+	}) => void;
+	onPreview: (values: (string | number)[]) => void;
+}
+
+/** Dynamic-variable body: telemetry signal + field, whose live values preview. */
+function DynamicVariableFields({
+	attribute,
+	signal,
+	onChange,
+	onPreview,
+}: DynamicVariableFieldsProps): JSX.Element {
+	const [search, setSearch] = useState('');
+	const debouncedSearch = useDebounce(search, 300);
+
+	const { data: keyData, isLoading } = useGetFieldKeys({
+		signal,
+		name: debouncedSearch || undefined,
+	});
+
+	// `keys` is a Record keyed BY field name; the field names are the map keys.
+	// When the API reports the list is `complete`, search filters locally.
+	const isComplete = keyData?.data?.complete === true;
+	const options = useMemo(
+		() =>
+			Object.keys(keyData?.data?.keys ?? {}).map((name) => ({
+				label: name,
+				value: name,
+			})),
+		[keyData],
+	);
+
+	const { data: valueData } = useGetFieldValues({
+		signal,
+		name: attribute,
+		enabled: !!attribute,
+	});
+
+	useEffect(() => {
+		const payload = valueData?.data;
+		const values =
+			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
+		onPreview(values);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [valueData]);
+
+	return (
+		<>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Source</Typography.Text>
+				</div>
+				<SelectSimple
+					className={styles.sortSelect}
+					value={signal}
+					items={TELEMETRY_SIGNALS.map((s) => ({ label: s, value: s }))}
+					onChange={(value): void =>
+						onChange({ dynamicSignal: value as TelemetrySignal })
+					}
+					testId="variable-signal-select"
+				/>
+			</div>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Attribute</Typography.Text>
+				</div>
+				<Select
+					className={styles.searchSelect}
+					showSearch
+					value={attribute || undefined}
+					placeholder="Select a telemetry field"
+					loading={isLoading}
+					filterOption={isComplete}
+					onSearch={setSearch}
+					onChange={(value): void => onChange({ dynamicAttribute: value as string })}
+					options={options}
+					notFoundContent={isLoading ? 'Loading…' : 'No fields found'}
+					data-testid="variable-field-select"
+				/>
+			</div>
+		</>
+	);
+}
+
+export default DynamicVariableFields;

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

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import Editor from 'components/Editor';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import type { VariableSort } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface QueryVariableFieldsProps {
+	queryValue: string;
+	sort: VariableSort;
+	onChange: (queryValue: string) => void;
+	onPreview: (values: (string | number)[]) => void;
+	onError: (message: string | null) => void;
+}
+
+/** Query-variable body: SQL editor + "Test Run Query" that previews the values. */
+function QueryVariableFields({
+	queryValue,
+	sort,
+	onChange,
+	onPreview,
+	onError,
+}: QueryVariableFieldsProps): JSX.Element {
+	const [isRunning, setIsRunning] = useState(false);
+
+	const runTest = async (): Promise<void> => {
+		setIsRunning(true);
+		onError(null);
+		try {
+			const res = await dashboardVariablesQuery({
+				query: queryValue,
+				variables: {},
+			});
+			if (res.statusCode === 200 && res.payload) {
+				onPreview(
+					sortValues(res.payload.variableValues ?? [], sort) as (string | number)[],
+				);
+			} else {
+				onError(res.error || 'Failed to run query');
+				onPreview([]);
+			}
+		} catch (err) {
+			onError((err as Error).message || 'Failed to run query');
+			onPreview([]);
+		} finally {
+			setIsRunning(false);
+		}
+	};
+
+	return (
+		<div className={styles.queryContainer}>
+			<div className={styles.labelContainer}>
+				<Typography.Text className={styles.label}>Query</Typography.Text>
+			</div>
+			<div className={styles.editorWrap}>
+				<Editor
+					language="sql"
+					value={queryValue}
+					onChange={(value): void => onChange(value)}
+					height="240px"
+					options={{
+						fontSize: 13,
+						wordWrap: 'on',
+						lineNumbers: 'off',
+						glyphMargin: false,
+						folding: false,
+						lineDecorationsWidth: 0,
+						lineNumbersMinChars: 0,
+						minimap: { enabled: false },
+					}}
+				/>
+			</div>
+			<div className={styles.testRow}>
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					loading={isRunning}
+					disabled={!queryValue}
+					onClick={runTest}
+					testId="variable-test-run"
+				>
+					Test Run Query
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default QueryVariableFields;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss

@@ -0,0 +1,310 @@
+/* Faithful reproduction of the V1 VariableItem layout, scoped as a module and
+   built on @signozhq components where possible. antd is retained only for the
+   monaco Editor, multiline TextArea, Collapse, and searchable Selects. */
+
+.container {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px;
+}
+
+.allVariables {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.allVariablesBtn {
+	--button-height: 24px;
+	--button-padding: 0;
+	color: var(--muted-foreground);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 12px 16px 20px;
+}
+
+/* VariableItemRow */
+.row {
+	display: flex;
+	gap: 1rem;
+	margin-bottom: 0;
+}
+
+/* LabelContainer */
+.labelContainer {
+	width: 200px;
+}
+
+.label {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.column {
+	flex-direction: column;
+	gap: 8px;
+}
+
+.input,
+.textarea,
+.defaultInput {
+	padding: 6px 6px 6px 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	background: var(--l3-background);
+}
+
+.input,
+.textarea {
+	width: 100%;
+}
+
+.defaultInput {
+	width: 342px;
+}
+
+.errorText {
+	font-size: 12px;
+	color: var(--bg-amber-500);
+}
+
+/* Variable type segmented group */
+.typeSection {
+	align-items: center;
+	justify-content: space-between;
+}
+
+.typeLabelContainer {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: auto;
+}
+
+.typeBtnGroup {
+	display: grid;
+	grid-template-columns: repeat(4, max-content);
+	height: 32px;
+	flex-shrink: 0;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	background: var(--l2-background);
+	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.typeBtn {
+	--button-height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	min-width: 114px;
+	border-radius: 0;
+	color: var(--l2-foreground);
+
+	& + & {
+		border-left: 1px solid var(--l1-border);
+	}
+}
+
+.typeBtnSelected {
+	background: var(--l1-border);
+	color: var(--l1-foreground);
+}
+
+.betaTag {
+	margin-left: 4px;
+}
+
+/* Query */
+.queryContainer {
+	display: flex;
+	flex-flow: column wrap;
+	gap: 1rem;
+	min-width: 0;
+	margin-bottom: 0;
+}
+
+.editorWrap {
+	height: 240px;
+	overflow: hidden;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+}
+
+.testRow {
+	display: flex;
+	margin-top: 8px;
+}
+
+/* Custom — antd Collapse */
+.customSection {
+	margin-bottom: 0;
+}
+
+.customSection :global(.custom-collapse) {
+	width: 100%;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px 3px 0 0;
+
+	:global(.ant-collapse-item) {
+		border-bottom: none;
+	}
+
+	:global(.ant-collapse-header) {
+		align-items: center;
+		gap: 8px;
+		height: 38px;
+		padding: 12px;
+		background: var(--l3-background);
+		border-radius: 3px 3px 0 0;
+	}
+
+	:global(.ant-collapse-header-text) {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 1px 2px;
+		color: var(--bg-robin-400);
+		font-family: 'Space Mono';
+		font-size: 14px;
+		line-height: 18px;
+		border-radius: 2px;
+		background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+	}
+
+	:global(.ant-collapse-content-box) {
+		padding: 0;
+	}
+
+	:global(.comma-input) {
+		height: 109px;
+		border: none;
+	}
+}
+
+/* Textbox */
+.textboxSection {
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+
+/* Preview strip */
+.previewSection {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-height: 88px;
+	margin-bottom: 0;
+	padding-bottom: 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px;
+}
+
+.previewLabel {
+	align-self: flex-start;
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	padding: 4px 8px;
+	color: var(--bg-robin-400);
+	font-family: 'Space Mono';
+	font-size: 14px;
+	line-height: 18px;
+	border-radius: 3px 0 2px;
+	background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+}
+
+.previewValues {
+	display: flex;
+	flex-flow: wrap;
+	gap: 8px;
+	padding: 4.5px 11px;
+	overflow-y: auto;
+}
+
+.previewValues [data-slot='badge'] {
+	height: 30px;
+	align-items: center;
+	color: var(--l1-foreground);
+	font-family: 'Space Mono';
+	font-size: 14px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+}
+
+.previewError {
+	color: var(--bg-amber-500);
+}
+
+/* Sort / multi / all / default rows */
+.sortSection,
+.multiSection,
+.allOptionSection,
+.dynamicSection {
+	align-items: flex-start;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+
+.sortSection {
+	align-items: center;
+}
+
+.rowLabel {
+	width: 339px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.sortSelect {
+	width: 192px;
+}
+
+.defaultValueSection {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 1rem;
+	align-items: center;
+	margin-bottom: 0;
+}
+
+.defaultValueSection .label {
+	display: block;
+	margin-bottom: 2px;
+}
+
+.defaultValueDesc {
+	display: block;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 18px;
+	letter-spacing: -0.06px;
+}
+
+.searchSelect {
+	width: 100%;
+}
+
+/* Footer */
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 1rem;
+	margin-top: 12px;
+}

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

@@ -0,0 +1,351 @@
+import { useEffect, useState } from 'react';
+import { ArrowLeft, Check, X } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse/searchable Select: no @signozhq/ui equivalent
+import { Collapse, Input as AntdInput, Select } from 'antd';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import {
+	VARIABLE_SORTS,
+	type VariableFormModel,
+	type VariableSort,
+	type VariableType,
+} from '../variableModel';
+import DynamicVariableFields from './DynamicVariableFields';
+import QueryVariableFields from './QueryVariableFields';
+import VariableTypeSelector from './VariableTypeSelector';
+import styles from './VariableForm.module.scss';
+
+const SORT_LABEL: Record<VariableSort, string> = {
+	DISABLED: 'Disabled',
+	ASC: 'Ascending',
+	DESC: 'Descending',
+};
+
+function getNameError(name: string, existingNames: string[]): string | null {
+	if (name === '') {
+		return 'Variable name is required';
+	}
+	if (/\s/.test(name)) {
+		return 'Variable name cannot contain whitespaces';
+	}
+	if (existingNames.includes(name)) {
+		return 'Variable name already exists';
+	}
+	return null;
+}
+
+interface VariableFormProps {
+	initial: VariableFormModel;
+	/** Names of the other variables, for uniqueness validation. */
+	existingNames: string[];
+	isSaving: boolean;
+	onClose: () => void;
+	onSave: (model: VariableFormModel) => void;
+}
+
+/**
+ * In-drawer variable editor reproducing the V1 VariableItem layout, built on
+ * @signozhq components (antd kept only for the monaco editor, TextArea, Collapse
+ * and searchable selects). Master→detail: renders in place of the list.
+ */
+function VariableForm({
+	initial,
+	existingNames,
+	isSaving,
+	onClose,
+	onSave,
+}: VariableFormProps): JSX.Element {
+	const [model, setModel] = useState<VariableFormModel>(initial);
+	const [previewValues, setPreviewValues] = useState<(string | number)[]>([]);
+	const [previewError, setPreviewError] = useState<string | null>(null);
+	const [defaultValue, setDefaultValue] = useState<string>(
+		((initial.defaultValue as { value?: string })?.value ?? '') as string,
+	);
+
+	useEffect(() => {
+		setModel(initial);
+		setPreviewValues([]);
+		setPreviewError(null);
+		setDefaultValue(
+			((initial.defaultValue as { value?: string })?.value ?? '') as string,
+		);
+	}, [initial]);
+
+	const set = (patch: Partial<VariableFormModel>): void =>
+		setModel((prev) => ({ ...prev, ...patch }));
+
+	const selectType = (type: VariableType): void => {
+		set({ type });
+		setPreviewValues([]);
+		setPreviewError(null);
+	};
+
+	const onCustomChange = (value: string): void => {
+		set({ customValue: value });
+		setPreviewValues(
+			sortValues(commaValuesParser(value), model.sort) as (string | number)[],
+		);
+	};
+
+	const trimmedName = model.name.trim();
+	const nameError = getNameError(trimmedName, existingNames);
+
+	const isListType =
+		model.type === 'QUERY' || model.type === 'CUSTOM' || model.type === 'DYNAMIC';
+	const showAllOptionField = model.type === 'QUERY' || model.type === 'CUSTOM';
+
+	const handleSave = (): void => {
+		onSave({
+			...model,
+			name: trimmedName,
+			defaultValue: defaultValue ? { value: defaultValue } : undefined,
+		});
+	};
+
+	return (
+		<>
+			<div className={styles.container}>
+				<div className={styles.allVariables}>
+					<Button
+						variant="ghost"
+						color="secondary"
+						className={styles.allVariablesBtn}
+						prefix={<ArrowLeft size={14} />}
+						onClick={onClose}
+						testId="variable-form-back"
+					>
+						All variables
+					</Button>
+				</div>
+
+				<div className={styles.content}>
+					{/* Name */}
+					<div className={cx(styles.row, styles.column)}>
+						<Typography.Text className={styles.label}>Name</Typography.Text>
+						<Input
+							className={styles.input}
+							value={model.name}
+							placeholder="Unique name of the variable"
+							onChange={(e): void => set({ name: e.target.value })}
+							testId="variable-name-input"
+						/>
+						{nameError ? (
+							<Typography.Text className={styles.errorText}>
+								{nameError}
+							</Typography.Text>
+						) : null}
+					</div>
+
+					{/* Description */}
+					<div className={cx(styles.row, styles.column)}>
+						<Typography.Text className={styles.label}>Description</Typography.Text>
+						<AntdInput.TextArea
+							className={styles.textarea}
+							value={model.description}
+							placeholder="Enter a description for the variable"
+							rows={3}
+							onChange={(e): void => set({ description: e.target.value })}
+							data-testid="variable-description-input"
+						/>
+					</div>
+
+					{/* Variable Type */}
+					<VariableTypeSelector value={model.type} onChange={selectType} />
+
+					{/* Type-specific body */}
+					{model.type === 'DYNAMIC' ? (
+						<DynamicVariableFields
+							attribute={model.dynamicAttribute}
+							signal={model.dynamicSignal}
+							onChange={(patch): void => set(patch)}
+							onPreview={setPreviewValues}
+						/>
+					) : null}
+
+					{model.type === 'QUERY' ? (
+						<QueryVariableFields
+							queryValue={model.queryValue}
+							sort={model.sort}
+							onChange={(queryValue): void => set({ queryValue })}
+							onPreview={setPreviewValues}
+							onError={setPreviewError}
+						/>
+					) : null}
+
+					{model.type === 'CUSTOM' ? (
+						<div className={cx(styles.row, styles.customSection)}>
+							<Collapse
+								collapsible="header"
+								rootClassName="custom-collapse"
+								defaultActiveKey={['1']}
+								items={[
+									{
+										key: '1',
+										label: 'Options',
+										children: (
+											<AntdInput.TextArea
+												value={model.customValue}
+												placeholder="Enter options separated by commas."
+												rootClassName="comma-input"
+												onChange={(e): void => onCustomChange(e.target.value)}
+												data-testid="variable-custom-input"
+											/>
+										),
+									},
+								]}
+							/>
+						</div>
+					) : null}
+
+					{model.type === 'TEXT' ? (
+						<div className={cx(styles.row, styles.textboxSection)}>
+							<div className={styles.labelContainer}>
+								<Typography.Text className={styles.label}>
+									Default Value
+								</Typography.Text>
+							</div>
+							<Input
+								className={styles.defaultInput}
+								value={model.textValue}
+								placeholder="Enter a default value (if any)..."
+								onChange={(e): void => set({ textValue: e.target.value })}
+								testId="variable-text-input"
+							/>
+						</div>
+					) : null}
+
+					{/* Shared rows for list-type variables */}
+					{isListType ? (
+						<>
+							<div className={cx(styles.row, styles.previewSection)}>
+								<Typography.Text className={styles.previewLabel}>
+									Preview of Values
+								</Typography.Text>
+								<div className={styles.previewValues}>
+									{previewError ? (
+										<Typography.Text className={styles.previewError}>
+											{previewError}
+										</Typography.Text>
+									) : (
+										previewValues.map((value, idx) => (
+											<Badge
+												// eslint-disable-next-line react/no-array-index-key -- preview values are display-only and may contain duplicates
+												key={`${value}-${idx}`}
+												color="vanilla"
+											>
+												{value.toString()}
+											</Badge>
+										))
+									)}
+								</div>
+							</div>
+
+							<div className={cx(styles.row, styles.sortSection)}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>Sort Values</Typography.Text>
+								</div>
+								<SelectSimple
+									className={styles.sortSelect}
+									value={model.sort}
+									items={VARIABLE_SORTS.map((sort) => ({
+										label: SORT_LABEL[sort],
+										value: sort,
+									}))}
+									onChange={(value): void => set({ sort: value as VariableSort })}
+									testId="variable-sort-select"
+								/>
+							</div>
+
+							<div className={cx(styles.row, styles.multiSection)}>
+								<Typography.Text className={styles.rowLabel}>
+									Enable multiple values to be checked
+								</Typography.Text>
+								<Switch
+									value={model.multiSelect}
+									onChange={(checked): void => {
+										set({
+											multiSelect: checked,
+											showAllOption: checked ? model.showAllOption : false,
+										});
+									}}
+									testId="variable-multi-switch"
+								/>
+							</div>
+
+							{model.multiSelect && showAllOptionField ? (
+								<div className={cx(styles.row, styles.allOptionSection)}>
+									<Typography.Text className={styles.rowLabel}>
+										Include an option for ALL values
+									</Typography.Text>
+									<Switch
+										value={model.showAllOption}
+										onChange={(checked): void => set({ showAllOption: checked })}
+										testId="variable-all-switch"
+									/>
+								</div>
+							) : null}
+
+							<div className={cx(styles.row, styles.defaultValueSection)}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>
+										Default Value
+									</Typography.Text>
+									<Typography.Text className={styles.defaultValueDesc}>
+										{model.type === 'QUERY'
+											? 'Click Test Run Query to see the values or add custom value'
+											: 'Select a value from the preview values or add custom value'}
+									</Typography.Text>
+								</div>
+								<Select
+									className={styles.searchSelect}
+									showSearch
+									allowClear
+									placeholder="Select a default value"
+									value={defaultValue || undefined}
+									onChange={(value): void => setDefaultValue(value ?? '')}
+									options={previewValues.map((value) => ({
+										label: value.toString(),
+										value: value.toString(),
+									}))}
+									data-testid="variable-default-select"
+								/>
+							</div>
+						</>
+					) : null}
+				</div>
+			</div>
+
+			<div className={styles.footer}>
+				<Button
+					variant="solid"
+					color="secondary"
+					prefix={<X size={14} />}
+					onClick={onClose}
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					prefix={<Check size={14} />}
+					disabled={!!nameError}
+					loading={isSaving}
+					onClick={handleSave}
+					testId="variable-save"
+				>
+					Save Variable
+				</Button>
+			</div>
+		</>
+	);
+}
+
+export default VariableForm;

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

@@ -0,0 +1,99 @@
+import {
+	ClipboardType,
+	DatabaseZap,
+	Info,
+	LayoutList,
+	Pyramid,
+} from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import TextToolTip from 'components/TextToolTip';
+
+import type { VariableType } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface VariableTypeSelectorProps {
+	value: VariableType;
+	onChange: (type: VariableType) => void;
+}
+
+/** The segmented Dynamic / Textbox / Custom / Query type picker. */
+function VariableTypeSelector({
+	value,
+	onChange,
+}: VariableTypeSelectorProps): JSX.Element {
+	return (
+		<div className={cx(styles.row, styles.typeSection)}>
+			<div className={styles.typeLabelContainer}>
+				<Typography.Text className={styles.label}>Variable Type</Typography.Text>
+				<TextToolTip
+					text="Learn more about supported variable types"
+					url="https://signoz.io/docs/userguide/manage-variables/#supported-variable-types"
+					urlText="here"
+					useFilledIcon={false}
+					outlinedIcon={<Info size={14} />}
+				/>
+			</div>
+			<div className={styles.typeBtnGroup}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<Pyramid size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'DYNAMIC',
+					})}
+					onClick={(): void => onChange('DYNAMIC')}
+					testId="variable-type-dynamic"
+				>
+					Dynamic
+					<Badge color="robin" className={styles.betaTag}>
+						Beta
+					</Badge>
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<ClipboardType size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'TEXT',
+					})}
+					onClick={(): void => onChange('TEXT')}
+					testId="variable-type-textbox"
+				>
+					Textbox
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<LayoutList size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'CUSTOM',
+					})}
+					onClick={(): void => onChange('CUSTOM')}
+					testId="variable-type-custom"
+				>
+					Custom
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<DatabaseZap size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'QUERY',
+					})}
+					onClick={(): void => onChange('QUERY')}
+					testId="variable-type-query"
+				>
+					Query
+					<Badge color="amber" className={styles.betaTag}>
+						Not Recommended
+					</Badge>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default VariableTypeSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/Variables.module.scss

@@ -0,0 +1,101 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 20px 16px;
+}
+
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.titleRow {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.title {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.subtitle {
+	font-size: 12px;
+	color: var(--l2-foreground);
+}
+
+.empty {
+	padding: 32px;
+	text-align: center;
+	border: 1px dashed var(--l1-border);
+	border-radius: 4px;
+	color: var(--l2-foreground);
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 12px;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	background: var(--l1-background);
+}
+
+.rowMain {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
+
+.varName {
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.varDesc {
+	min-width: 0;
+	overflow: hidden;
+	font-size: 12px;
+	color: var(--l2-foreground);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.typeTag {
+	flex-shrink: 0;
+	padding: 1px 8px;
+	font-size: 11px;
+	letter-spacing: 0.04em;
+	color: var(--l2-foreground);
+	text-transform: uppercase;
+	background: var(--l2-background);
+	border-radius: 10px;
+}
+
+.rowActions {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: 2px;
+}
+
+.confirmText {
+	margin-right: 4px;
+	font-size: 12px;
+	color: var(--l2-foreground);
+}

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

@@ -0,0 +1,139 @@
+import {
+	Check,
+	ChevronDown,
+	ChevronUp,
+	PenLine,
+	Trash2,
+	X,
+} from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import type { VariableFormModel } from './variableModel';
+import styles from './Variables.module.scss';
+
+const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
+	QUERY: 'Query',
+	CUSTOM: 'Custom',
+	TEXT: 'Text',
+	DYNAMIC: 'Dynamic',
+};
+
+interface VariablesListProps {
+	variables: VariableFormModel[];
+	canEdit: boolean;
+	/** Index whose delete is awaiting inline confirmation, if any. */
+	confirmingIndex: number | null;
+	onEdit: (index: number) => void;
+	onRequestDelete: (index: number) => void;
+	onConfirmDelete: (index: number) => void;
+	onCancelDelete: () => void;
+	onMove: (from: number, to: number) => void;
+}
+
+function VariablesList({
+	variables,
+	canEdit,
+	confirmingIndex,
+	onEdit,
+	onRequestDelete,
+	onConfirmDelete,
+	onCancelDelete,
+	onMove,
+}: VariablesListProps): JSX.Element {
+	return (
+		<div className={styles.list} data-testid="variables-list">
+			{variables.map((variable, index) => (
+				<div
+					className={styles.row}
+					key={variable.name || `variable-${index}`}
+					data-testid={`variable-row-${variable.name}`}
+				>
+					<div className={styles.rowMain}>
+						<Typography.Text className={styles.varName}>
+							${variable.name}
+						</Typography.Text>
+						<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
+						{variable.description ? (
+							<Typography.Text className={styles.varDesc}>
+								{variable.description}
+							</Typography.Text>
+						) : null}
+					</div>
+
+					{canEdit && confirmingIndex === index ? (
+						<div className={styles.rowActions}>
+							<Typography.Text className={styles.confirmText}>Delete?</Typography.Text>
+							<Button
+								variant="ghost"
+								color="destructive"
+								size="icon"
+								onClick={(): void => onConfirmDelete(index)}
+								aria-label="Confirm delete"
+								testId={`variable-delete-confirm-${variable.name}`}
+							>
+								<Check size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={onCancelDelete}
+								aria-label="Cancel delete"
+							>
+								<X size={14} />
+							</Button>
+						</div>
+					) : null}
+
+					{canEdit && confirmingIndex !== index ? (
+						<div className={styles.rowActions}>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								disabled={index === 0}
+								onClick={(): void => onMove(index, index - 1)}
+								aria-label="Move up"
+							>
+								<ChevronUp size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								disabled={index === variables.length - 1}
+								onClick={(): void => onMove(index, index + 1)}
+								aria-label="Move down"
+							>
+								<ChevronDown size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={(): void => onEdit(index)}
+								aria-label="Edit variable"
+								testId={`variable-edit-${variable.name}`}
+							>
+								<PenLine size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={(): void => onRequestDelete(index)}
+								aria-label="Delete variable"
+								testId={`variable-delete-${variable.name}`}
+							>
+								<Trash2 size={14} />
+							</Button>
+						</div>
+					) : null}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default VariablesList;

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

@@ -0,0 +1,147 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useSaveVariables } from './useSaveVariables';
+import { dtoToFormModel } from './variableAdapters';
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from './variableModel';
+import VariableForm from './VariableForm/VariableForm';
+import VariablesList from './VariablesList';
+import styles from './Variables.module.scss';
+
+interface VariablesSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+/** `null` index = adding a new variable; a number = editing that row. */
+type EditingState = { index: number | null } | null;
+
+function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+	const { save, isSaving } = useSaveVariables();
+
+	const initialModels = useMemo(
+		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
+		[dashboard.spec?.variables],
+	);
+	const [variables, setVariables] = useState<VariableFormModel[]>(initialModels);
+
+	// Resync from the dashboard after a save round-trips (refetch bumps updatedAt).
+	useEffect(() => {
+		setVariables(initialModels);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboard.updatedAt]);
+
+	const [editing, setEditing] = useState<EditingState>(null);
+	const [confirmDeleteIndex, setConfirmDeleteIndex] = useState<number | null>(
+		null,
+	);
+
+	const editingModel: VariableFormModel | null = useMemo(() => {
+		if (!editing) {
+			return null;
+		}
+		return editing.index === null
+			? emptyVariableFormModel()
+			: variables[editing.index];
+	}, [editing, variables]);
+
+	const existingNames = useMemo(() => {
+		const self = editing?.index ?? null;
+		return variables.filter((_, i) => i !== self).map((v) => v.name);
+	}, [variables, editing]);
+
+	const persist = (next: VariableFormModel[]): void => {
+		setVariables(next);
+		void save(next);
+	};
+
+	const handleFormSave = (model: VariableFormModel): void => {
+		const next = [...variables];
+		if (editing?.index == null) {
+			next.push(model);
+		} else {
+			next[editing.index] = model;
+		}
+		setEditing(null);
+		persist(next);
+	};
+
+	const handleMove = (from: number, to: number): void => {
+		if (to < 0 || to >= variables.length) {
+			return;
+		}
+		const next = [...variables];
+		const [moved] = next.splice(from, 1);
+		next.splice(to, 0, moved);
+		persist(next);
+	};
+
+	const handleConfirmDelete = (index: number): void => {
+		persist(variables.filter((_, i) => i !== index));
+		setConfirmDeleteIndex(null);
+	};
+
+	// Detail view — edit/new form replaces the list in place (no modal).
+	if (editingModel) {
+		return (
+			<VariableForm
+				initial={editingModel}
+				existingNames={existingNames}
+				isSaving={isSaving}
+				onClose={(): void => setEditing(null)}
+				onSave={handleFormSave}
+			/>
+		);
+	}
+
+	// Master view — the variables list.
+	return (
+		<div className={styles.container}>
+			<div className={styles.header}>
+				<div className={styles.titleRow}>
+					<Typography.Text className={styles.title}>Variables</Typography.Text>
+					<Typography.Text className={styles.subtitle}>
+						Define variables to parameterize panel queries.
+					</Typography.Text>
+				</div>
+				{isEditable ? (
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={(): void => setEditing({ index: null })}
+						testId="add-variable"
+					>
+						New variable
+					</Button>
+				) : null}
+			</div>
+
+			{variables.length === 0 ? (
+				<div className={styles.empty}>
+					<Typography.Text>No variables defined yet.</Typography.Text>
+				</div>
+			) : (
+				<VariablesList
+					variables={variables}
+					canEdit={isEditable}
+					confirmingIndex={confirmDeleteIndex}
+					onEdit={(index): void => setEditing({ index })}
+					onRequestDelete={(index): void => setConfirmDeleteIndex(index)}
+					onConfirmDelete={handleConfirmDelete}
+					onCancelDelete={(): void => setConfirmDeleteIndex(null)}
+					onMove={handleMove}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default VariablesSettings;

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

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { toast } from '@signozhq/ui/sonner';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { formModelToDto } from './variableAdapters';
+import type { VariableFormModel } from './variableModel';
+import { buildVariablesPatch } from './variablePatchOps';
+
+interface UseSaveVariables {
+	save: (variables: VariableFormModel[]) => Promise<boolean>;
+	isSaving: boolean;
+}
+
+/**
+ * Persists the dashboard's variable list via a single `/spec/variables` patch,
+ * then refetches. Mirrors the General-settings save flow (patch → toast →
+ * refetch → surface errors).
+ */
+export function useSaveVariables(): UseSaveVariables {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+	const [isSaving, setIsSaving] = useState(false);
+
+	const save = useCallback(
+		async (variables: VariableFormModel[]): Promise<boolean> => {
+			if (!dashboardId) {
+				return false;
+			}
+			const dtos = variables.map(formModelToDto);
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, buildVariablesPatch(dtos));
+				toast.success('Variables updated');
+				refetch();
+				return true;
+			} catch (error) {
+				showErrorModal(error as APIError);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, refetch, showErrorModal],
+	);
+
+	return { save, isSaving };
+}

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

@@ -0,0 +1,153 @@
+import {
+	DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind as TextEnvelopeKind,
+	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind as ListEnvelopeKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTOKind as CustomPluginKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind as DynamicPluginKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTOKind as QueryPluginKind,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesListVariableSpecDTO,
+	DashboardtypesVariableDTO,
+	DashboardtypesVariablePluginDTO,
+	DashboardTextVariableSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	emptyVariableFormModel,
+	PLUGIN_KIND,
+	type TelemetrySignal,
+	type VariableFormModel,
+	type VariableSort,
+} from './variableModel';
+
+/** DTO envelope → flat form model (for display / editing). */
+export function dtoToFormModel(
+	dto: DashboardtypesVariableDTO,
+): VariableFormModel {
+	const base = emptyVariableFormModel();
+	const display = dto.spec?.display;
+	const common: VariableFormModel = {
+		...base,
+		name: dto.spec?.name ?? display?.name ?? '',
+		description: display?.description ?? '',
+	};
+
+	// Text variable — a distinct envelope (no list plugin).
+	if (dto.kind === TextEnvelopeKind.TextVariable) {
+		const spec = dto.spec as DashboardTextVariableSpecDTO;
+		return {
+			...common,
+			type: 'TEXT',
+			textValue: spec.value ?? '',
+			textConstant: spec.constant ?? false,
+		};
+	}
+
+	// List variable — Query / Custom / Dynamic, distinguished by plugin.kind.
+	const spec = dto.spec as DashboardtypesListVariableSpecDTO;
+	const listCommon: VariableFormModel = {
+		...common,
+		multiSelect: spec.allowMultiple ?? false,
+		showAllOption: spec.allowAllValue ?? false,
+		sort: (spec.sort as VariableSort) ?? 'DISABLED',
+		defaultValue: spec.defaultValue,
+	};
+	const plugin = spec.plugin;
+
+	if (plugin?.kind === CustomPluginKind['signoz/CustomVariable']) {
+		return {
+			...listCommon,
+			type: 'CUSTOM',
+			customValue: plugin.spec.customValue ?? '',
+		};
+	}
+	if (plugin?.kind === DynamicPluginKind['signoz/DynamicVariable']) {
+		return {
+			...listCommon,
+			type: 'DYNAMIC',
+			dynamicAttribute: plugin.spec.name ?? '',
+			dynamicSignal: (plugin.spec.signal as TelemetrySignal) ?? 'traces',
+		};
+	}
+	// Default to Query (also covers a query plugin or a missing/unknown plugin).
+	return {
+		...listCommon,
+		type: 'QUERY',
+		queryValue:
+			plugin?.kind === QueryPluginKind['signoz/QueryVariable']
+				? (plugin.spec.queryValue ?? '')
+				: '',
+	};
+}
+
+function buildPlugin(
+	model: VariableFormModel,
+): DashboardtypesVariablePluginDTO {
+	switch (model.type) {
+		case 'CUSTOM':
+			return {
+				kind: CustomPluginKind['signoz/CustomVariable'],
+				spec: { customValue: model.customValue },
+			};
+		case 'DYNAMIC':
+			return {
+				kind: DynamicPluginKind['signoz/DynamicVariable'],
+				spec: {
+					name: model.dynamicAttribute,
+					signal: model.dynamicSignal as TelemetrytypesSignalDTO,
+				},
+			};
+		case 'QUERY':
+		default:
+			return {
+				kind: QueryPluginKind['signoz/QueryVariable'],
+				spec: { queryValue: model.queryValue },
+			};
+	}
+}
+
+/** Flat form model → DTO envelope (for persistence). */
+export function formModelToDto(
+	model: VariableFormModel,
+): DashboardtypesVariableDTO {
+	const display = {
+		name: model.name,
+		description: model.description,
+		hidden: model.hidden,
+	};
+
+	if (model.type === 'TEXT') {
+		return {
+			kind: TextEnvelopeKind.TextVariable,
+			spec: {
+				name: model.name,
+				display,
+				value: model.textValue,
+				constant: model.textConstant,
+			},
+		};
+	}
+
+	return {
+		kind: ListEnvelopeKind.ListVariable,
+		spec: {
+			name: model.name,
+			display,
+			allowMultiple: model.multiSelect,
+			allowAllValue: model.showAllOption,
+			sort: model.sort,
+			defaultValue: model.defaultValue,
+			plugin: buildPlugin(model),
+		},
+	};
+}
+
+/** Maps the V2 plugin/envelope to the four UI-facing variable types. */
+export function variableTypeOf(
+	dto: DashboardtypesVariableDTO,
+): VariableFormModel['type'] {
+	return dtoToFormModel(dto).type;
+}
+
+export { PLUGIN_KIND };

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

@@ -0,0 +1,78 @@
+import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Flat, UI-friendly representation of a V2 dashboard variable. The wire format
+ * (`DashboardtypesVariableDTO`) is a nested envelope/plugin union that is awkward
+ * to bind a form to; `variableAdapters` converts between this model and the DTO.
+ */
+
+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). */
+export const ENVELOPE_KIND = {
+	LIST: 'ListVariable',
+	TEXT: 'TextVariable',
+} as const;
+
+export const PLUGIN_KIND = {
+	QUERY: 'signoz/QueryVariable',
+	CUSTOM: 'signoz/CustomVariable',
+	DYNAMIC: 'signoz/DynamicVariable',
+} as const;
+
+export const VARIABLE_SORTS: VariableSort[] = ['DISABLED', 'ASC', 'DESC'];
+
+export const TELEMETRY_SIGNALS: TelemetrySignal[] = [
+	'traces',
+	'logs',
+	'metrics',
+];
+
+export interface VariableFormModel {
+	/** Stable identifier, referenced in queries (e.g. `$name`); must be unique. */
+	name: string;
+	description: string;
+	hidden: boolean;
+	type: VariableType;
+
+	// List-variable common fields (Query / Custom / Dynamic).
+	multiSelect: boolean;
+	showAllOption: boolean;
+	sort: VariableSort;
+
+	// Type-specific.
+	queryValue: string; // QUERY
+	customValue: string; // CUSTOM
+	textValue: string; // TEXT
+	textConstant: boolean; // TEXT
+	dynamicAttribute: string; // DYNAMIC — the telemetry field name
+	dynamicSignal: TelemetrySignal; // DYNAMIC — the telemetry signal
+
+	/**
+	 * Runtime-selected default, not editable in the management tab yet; carried
+	 * through edits so saving a definition doesn't clobber it.
+	 */
+	defaultValue?: VariableDefaultValueDTO;
+}
+
+export function emptyVariableFormModel(): VariableFormModel {
+	return {
+		name: '',
+		description: '',
+		hidden: false,
+		type: 'QUERY',
+		multiSelect: false,
+		showAllOption: false,
+		sort: 'DISABLED',
+		queryValue: '',
+		customValue: '',
+		textValue: '',
+		textConstant: false,
+		dynamicAttribute: '',
+		dynamicSignal: 'traces',
+	};
+}

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

@@ -0,0 +1,22 @@
+import type {
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesVariableDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Builds the JSON-Patch to persist the dashboard's variable list. Add/edit/
+ * delete/reorder all replace the whole `/spec/variables` array in one atomic op
+ * — simpler and race-free vs per-index patches. RFC-6902 `add` on an object
+ * member sets-or-replaces, so it works whether or not `variables` already exists.
+ */
+export function buildVariablesPatch(
+	variables: DashboardtypesVariableDTO[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		{
+			op: 'add' as DashboardtypesJSONPatchOperationDTO['op'],
+			path: '/spec/variables',
+			value: variables,
+		},
+	];
+}

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

@@ -1,48 +1,39 @@
 import { useMemo } from 'react';
 
 import { Braces, Globe, Table } from '@signozhq/icons';
-import { Tabs } from '@signozhq/ui/tabs';
+import { TabItemProps, Tabs } from '@signozhq/ui/tabs';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
 import GeneralSettings from './General';
 import { SettingsTabPlaceholder } from './utils';
-
-import styles from './DashboardSettings.module.scss';
+import VariablesSettings from './Variables';
 
 interface DashboardSettingsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
-function tabLabel(icon: JSX.Element, text: string): JSX.Element {
-	return (
-		<span className={styles.tabLabel}>
-			{icon}
-			{text}
-		</span>
-	);
-}
-
 function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
-	const items = useMemo(
+	const items: TabItemProps[] = useMemo(
 		() => [
 			{
 				key: 'general',
-				label: tabLabel(<Table size={14} />, 'General'),
+				label: 'General',
 				children: <GeneralSettings dashboard={dashboard} />,
+				prefixIcon: <Table size={14} />,
 			},
 			{
 				key: 'variables',
-				label: tabLabel(<Braces size={14} />, 'Variables'),
-				children: (
-					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
-				),
+				label: 'Variables',
+				children: <VariablesSettings dashboard={dashboard} />,
+				prefixIcon: <Braces size={14} />,
 			},
 			{
 				key: 'public-dashboard',
-				label: tabLabel(<Globe size={14} />, 'Publish'),
+				label: 'Publish',
 				children: (
 					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
 				),
+				prefixIcon: <Globe size={14} />,
 			},
 		],
 		[dashboard],

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { Skeleton } from 'antd';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useGetTraceFlamegraphV3 from 'hooks/trace/useGetTraceFlamegraphV3';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
@@ -53,6 +53,9 @@ function TraceFlamegraph({
 	);
 
 	const previewFields = useTraceStore((s) => s.previewFields);
+	// Gate the fetch until prefs load, else selectFields (in the query key)
+	// repopulates and triggers a second fetch.
+	const userPrefsReady = useTraceStore((s) => s.userPreferences !== null);
 
 	// Color-by fields baseline + user-picked preview fields. De-duped by `name`,
 	// color-by entries first so their canonical metadata wins on collision.
@@ -70,17 +73,14 @@ function TraceFlamegraph({
 		data,
 		isFetching,
 		error: fetchError,
-	} = useGetTraceFlamegraph({
+	} = useGetTraceFlamegraphV3({
 		traceId,
 		selectedSpanId: selectedSpanIdForFetch,
-		limit: FLAMEGRAPH_SPAN_LIMIT,
 		selectFields: flamegraphSelectFields,
+		enabled: !!traceId && userPrefsReady,
 	});
 
-	const spans = useMemo(
-		() => data?.payload?.spans || [],
-		[data?.payload?.spans],
-	);
+	const spans = useMemo(() => data?.spans || [], [data?.spans]);
 
 	const {
 		layout,
@@ -99,8 +99,8 @@ function TraceFlamegraph({
 						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
 						onSpanClick={handleSpanClick}
 						traceMetadata={{
-							startTime: data?.payload?.startTimestampMillis || 0,
-							endTime: data?.payload?.endTimestampMillis || 0,
+							startTime: data?.startTimestampMillis || 0,
+							endTime: data?.endTimestampMillis || 0,
 						}}
 						filteredSpanIds={filteredSpanIds}
 						isFilterActive={isFilterActive}
@@ -124,7 +124,7 @@ function TraceFlamegraph({
 		if (fetchError || workerError) {
 			return <Error error={(fetchError || workerError) as any} />;
 		}
-		if (data?.payload?.spans && data.payload.spans.length === 0) {
+		if (data?.spans && data.spans.length === 0) {
 			return <div>No data found for trace {traceId}</div>;
 		}
 		return (
@@ -134,17 +134,17 @@ function TraceFlamegraph({
 				setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
 				onSpanClick={handleSpanClick}
 				traceMetadata={{
-					startTime: data?.payload?.startTimestampMillis || 0,
-					endTime: data?.payload?.endTimestampMillis || 0,
+					startTime: data?.startTimestampMillis || 0,
+					endTime: data?.endTimestampMillis || 0,
 				}}
 				filteredSpanIds={filteredSpanIds}
 				isFilterActive={isFilterActive}
 			/>
 		);
 	}, [
-		data?.payload?.endTimestampMillis,
-		data?.payload?.startTimestampMillis,
-		data?.payload?.spans,
+		data?.endTimestampMillis,
+		data?.startTimestampMillis,
+		data?.spans,
 		fetchError,
 		filteredSpanIds,
 		firstSpanAtFetchLevel,

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

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useGetTraceFlamegraphV3 from 'hooks/trace/useGetTraceFlamegraphV3';
 import { AllTheProviders } from 'tests/test-utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
 import { FLAMEGRAPH_SPAN_LIMIT } from '../constants';
 import TraceFlamegraph from '../TraceFlamegraph';
 
-jest.mock('hooks/trace/useGetTraceFlamegraph');
+jest.mock('hooks/trace/useGetTraceFlamegraphV3');
 
 // Short-circuit the worker so the test doesn't depend on layout computation.
 jest.mock('../hooks/useVisualLayoutWorker', () => ({
@@ -17,9 +17,8 @@ jest.mock('../hooks/useVisualLayoutWorker', () => ({
 	}),
 }));
 
-const mockUseGetTraceFlamegraph = useGetTraceFlamegraph as jest.MockedFunction<
-	typeof useGetTraceFlamegraph
->;
+const mockUseGetTraceFlamegraph =
+	useGetTraceFlamegraphV3 as jest.MockedFunction<typeof useGetTraceFlamegraphV3>;
 
 function renderFlamegraph(props: {
 	selectedSpan: SpanV3 | undefined;
@@ -45,7 +44,7 @@ describe('TraceFlamegraph - selectedSpanId pass-through', () => {
 	beforeEach(() => {
 		mockUseGetTraceFlamegraph.mockReset();
 		mockUseGetTraceFlamegraph.mockReturnValue({
-			data: { payload: { spans: [] } },
+			data: { spans: [] },
 			isFetching: false,
 			error: null,
 		} as never);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import {
 	computeVisualLayout,
@@ -14,12 +14,12 @@ function makeSpan(
 ): FlamegraphSpan {
 	return {
 		parentSpanId: '',
-		traceId: 'trace-1',
 		hasError: false,
-		serviceName: 'svc',
 		name: 'op',
 		level: 0,
 		event: [],
+		resource: {},
+		attributes: {},
 		...overrides,
 	};
 }

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 /** Minimal FlamegraphSpan for unit tests */
 export const MOCK_SPAN: FlamegraphSpan = {
@@ -6,12 +6,12 @@ export const MOCK_SPAN: FlamegraphSpan = {
 	durationNano: 50_000_000, // 50ms
 	spanId: 'span-1',
 	parentSpanId: '',
-	traceId: 'trace-1',
 	hasError: false,
-	serviceName: 'test-service',
 	name: 'test-span',
 	level: 0,
 	event: [],
+	resource: {},
+	attributes: {},
 };
 
 /** Nested spans structure for findSpanById tests */

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -65,37 +65,25 @@ describe('Presentation / Styling Utils', () => {
 	describe('getFlamegraphSpanGroupValue', () => {
 		it('returns resource[field.name] when present', () => {
 			const value = getFlamegraphSpanGroupValue(
-				{
-					serviceName: 'legacy',
-					resource: { 'service.name': 'svc-from-resource' },
-				},
+				{ resource: { 'service.name': 'svc-from-resource' } },
 				SERVICE_FIELD,
 			);
 			expect(value).toBe('svc-from-resource');
 		});
 
-		it('falls back to top-level serviceName for service.name when resource is empty', () => {
-			const value = getFlamegraphSpanGroupValue(
-				{ serviceName: 'svc-legacy', resource: {} },
-				SERVICE_FIELD,
-			);
-			expect(value).toBe('svc-legacy');
+		it('returns "unknown" for service.name when resource is empty', () => {
+			const value = getFlamegraphSpanGroupValue({ resource: {} }, SERVICE_FIELD);
+			expect(value).toBe('unknown');
 		});
 
 		it('returns "unknown" for non-service fields when resource is missing', () => {
-			const value = getFlamegraphSpanGroupValue(
-				{ serviceName: 'svc', resource: {} },
-				HOST_FIELD,
-			);
+			const value = getFlamegraphSpanGroupValue({ resource: {} }, HOST_FIELD);
 			expect(value).toBe('unknown');
 		});
 
 		it('reads host.name from resource when present', () => {
 			const value = getFlamegraphSpanGroupValue(
-				{
-					serviceName: 'svc',
-					resource: { 'host.name': 'host-1' },
-				},
+				{ resource: { 'host.name': 'host-1' } },
 				HOST_FIELD,
 			);
 			expect(value).toBe('host-1');

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -1,11 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 export interface ConnectorLine {
 	parentRow: number;
 	childRow: number;
 	timestampMs: number;
-	serviceName: string;
 	// Snapshot of the child span's resource so draw-time can resolve the
 	// `colorByField` group value without crossing the worker boundary.
 	resource?: Record<string, string>;
@@ -159,24 +158,8 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 		}
 	}
 
-	// Extract parentSpanId — the field may be missing at runtime when the API
-	// returns `references` instead.  Fall back to the first CHILD_OF reference.
 	function getParentId(span: FlamegraphSpan): string {
-		if (span.parentSpanId) {
-			return span.parentSpanId;
-		}
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const refs = (span as any).references as
-			| Array<{ spanId?: string; refType?: string }>
-			| undefined;
-		if (refs) {
-			for (const ref of refs) {
-				if (ref.refType === 'CHILD_OF' && ref.spanId) {
-					return ref.spanId;
-				}
-			}
-		}
-		return '';
+		return span.parentSpanId || '';
 	}
 
 	// Build children map and identify roots
@@ -480,7 +463,6 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 				parentRow,
 				childRow,
 				timestampMs: child.timestamp,
-				serviceName: child.serviceName,
 				resource: child.resource,
 			});
 		}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -1,7 +1,7 @@
 import React, { RefObject, useCallback, useMemo, useRef } from 'react';
 import { generateColorPair } from 'pages/TraceDetailsV3/utils/generateColorPair';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import { ConnectorLine } from '../computeVisualLayout';
@@ -200,7 +200,7 @@ function drawConnectorLines(args: DrawConnectorLinesArgs): void {
 		}
 
 		const groupValue = getFlamegraphSpanGroupValue(
-			{ serviceName: conn.serviceName, resource: conn.resource },
+			{ resource: conn.resource },
 			colorByField,
 		);
 		const pair = generateColorPair(groupValue);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -11,10 +11,9 @@ import {
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
 import { RESERVED_PREVIEW_KEYS } from 'pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard';
 import { getSpanAttribute } from 'pages/TraceDetailsV3/utils';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
-import { EventRect, SpanRect } from '../types';
-import { ITraceMetadata } from '../types';
+import { EventRect, ITraceMetadata, SpanRect } from '../types';
 import {
 	getFlamegraphServiceName,
 	getFlamegraphSpanGroupValue,
@@ -200,7 +199,7 @@ export function useFlamegraphHover(
 
 			if (eventRect) {
 				const { event, span } = eventRect;
-				const eventTimeMs = event.timeUnixNano / 1e6;
+				const eventTimeMs = (event.timeUnixNano ?? 0) / 1e6;
 				setHoveredEventKey(`${span.spanId}-${event.name}-${event.timeUnixNano}`);
 				setHoveredSpanId(span.spanId);
 				setTooltipContent({
@@ -220,10 +219,10 @@ export function useFlamegraphHover(
 						return isDarkMode ? pair.color : pair.colorDark;
 					})(),
 					event: {
-						name: event.name,
+						name: event.name ?? '',
 						timeOffsetMs: eventTimeMs - span.timestamp,
-						isError: event.isError,
-						attributeMap: event.attributeMap || {},
+						isError: event.isError ?? false,
+						attributeMap: (event.attributeMap as Record<string, string>) ?? {},
 					},
 				});
 				updateCursor(canvas, eventRect.span);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -5,7 +5,7 @@ import {
 	SetStateAction,
 	useEffect,
 } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { MIN_VISIBLE_SPAN_MS } from '../constants';
 import { ITraceMetadata } from '../types';

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { computeVisualLayout, VisualLayout } from '../computeVisualLayout';
 import { LayoutWorkerResponse } from '../visualLayoutWorkerTypes';

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/types.ts

@@ -1,5 +1,8 @@
+import {
+	SpantypesEventDTO as FlamegraphEvent,
+	SpantypesFlamegraphSpanDTO as FlamegraphSpan,
+} from 'api/generated/services/sigNoz.schemas';
 import { Dispatch, SetStateAction } from 'react';
-import { Event, FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
 
 import { VisualLayout } from './computeVisualLayout';
 
@@ -28,7 +31,7 @@ export interface SpanRect {
 }
 
 export interface EventRect {
-	event: Event;
+	event: FlamegraphEvent;
 	span: FlamegraphSpan;
 	cx: number;
 	cy: number;

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

@@ -7,7 +7,7 @@ import {
 	generateColorPair,
 	RESERVED_ERROR,
 } from 'pages/TraceDetailsV3/utils/generateColorPair';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import {
@@ -74,34 +74,25 @@ export function getFlamegraphRowMetrics(
 
 /**
  * Resolve the displayed service.name for a flamegraph span. Used by tooltips
- * (service identity, independent of the active colour-by field). Prefers
- * `resource['service.name']` with legacy top-level `serviceName` fallback.
+ * (service identity, independent of the active colour-by field). Reads
+ * `resource['service.name']`.
  */
 export function getFlamegraphServiceName(
-	span: Pick<FlamegraphSpan, 'serviceName' | 'resource' | 'attributes'>,
+	span: Partial<Pick<FlamegraphSpan, 'resource' | 'attributes'>>,
 ): string {
-	return getSpanAttribute(span, 'service.name') || span.serviceName || '';
+	return getSpanAttribute(span, 'service.name') || '';
 }
 
 /**
  * Resolve the value used to bucket a flamegraph span by colour for the given
- * field. Prefers `resource[field.name]` (new contract from `selectFields`).
- * For `service.name`, falls back to the legacy top-level `serviceName` when
- * resource is empty (backward-compat with backends that haven't shipped
- * `selectFields` yet). For other fields, falls back to `'unknown'`.
+ * field. Prefers `resource[field.name]` (contract from `selectFields`), falling
+ * back to `'unknown'`.
  */
 export function getFlamegraphSpanGroupValue(
-	span: Pick<FlamegraphSpan, 'serviceName' | 'resource' | 'attributes'>,
+	span: Partial<Pick<FlamegraphSpan, 'resource' | 'attributes'>>,
 	field: TelemetryFieldKey,
 ): string {
-	const fromAttribute = getSpanAttribute(span, field.name);
-	if (fromAttribute) {
-		return fromAttribute;
-	}
-	if (field.name === 'service.name') {
-		return span.serviceName || 'unknown';
-	}
-	return 'unknown';
+	return getSpanAttribute(span, field.name) || 'unknown';
 }
 
 interface GetSpanColorArgs {
@@ -296,7 +287,7 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 			return;
 		}
 
-		const eventTimeMs = event.timeUnixNano / 1e6;
+		const eventTimeMs = (event.timeUnixNano ?? 0) / 1e6;
 		const eventOffsetPercent =
 			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
 		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
@@ -306,7 +297,11 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 		// Event dots derive from the effective bar color so they track the
 		// light/dark variant the bar is rendered with.
 		const parentBarColor = isDarkMode ? color : colorDark;
-		const dotColor = getEventDotColor(parentBarColor, event.isError, isDarkMode);
+		const dotColor = getEventDotColor(
+			parentBarColor,
+			event.isError ?? false,
+			isDarkMode,
+		);
 		const eventKey = `${span.spanId}-${event.name}-${event.timeUnixNano}`;
 		const isEventHovered = hoveredEventKey === eventKey;
 		const dotSize = isEventHovered

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayoutWorkerTypes.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { VisualLayout } from './computeVisualLayout';
 

frontend/src/providers/QueryBuilder.tsx

@@ -38,6 +38,7 @@ import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQue
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { serialize } from 'lib/compositeQuery/serializer';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { createNewBuilderItemName } from 'lib/newQueryBuilder/createNewBuilderItemName';
 import { getOperatorsBySourceAndPanelType } from 'lib/newQueryBuilder/getOperatorsBySourceAndPanelType';
@@ -936,7 +937,7 @@ export function QueryBuilderProvider({
 	);
 
 	const { safeNavigate } = useSafeNavigate({
-		preventSameUrlNavigation: false,
+		preventSameUrlNavigation: true,
 	});
 
 	const redirectWithQueryBuilderData = useCallback(
@@ -990,10 +991,7 @@ export function QueryBuilderProvider({
 				);
 			}
 
-			urlQuery.set(
-				QueryParams.compositeQuery,
-				encodeURIComponent(JSON.stringify(currentGeneratedQuery)),
-			);
+			urlQuery.set(QueryParams.compositeQuery, serialize(currentGeneratedQuery));
 
 			if (searchParams) {
 				Object.keys(searchParams).forEach((param) =>

frontend/src/providers/Timezone.tsx

@@ -19,17 +19,14 @@ import {
 } from 'components/CustomTimePicker/timezoneUtils';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import useTimezoneFormatter, {
-	TimestampInput,
+	FormatTimezoneAdjustedTimestamp,
 } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 
 export interface TimezoneContextType {
 	timezone: Timezone;
 	browserTimezone: Timezone;
 	updateTimezone: (timezone: Timezone) => void;
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string;
+	formatTimezoneAdjustedTimestamp: FormatTimezoneAdjustedTimestamp;
 	isAdaptationEnabled: boolean;
 	setIsAdaptationEnabled: Dispatch<SetStateAction<boolean>>;
 }

pkg/modules/inframonitoring/implinframonitoring/module.go

@@ -10,7 +10,9 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/inframonitoringtypes"
+	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
@@ -48,6 +50,8 @@ func NewModule(
 }
 
 func (m *module) ListHosts(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableHosts) (*inframonitoringtypes.Hosts, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListHosts")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -161,6 +165,8 @@ func (m *module) ListHosts(ctx context.Context, orgID valuer.UUID, req *inframon
 }
 
 func (m *module) ListPods(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostablePods) (*inframonitoringtypes.Pods, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListPods")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -244,6 +250,8 @@ func (m *module) ListPods(ctx context.Context, orgID valuer.UUID, req *inframoni
 }
 
 func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNodes) (*inframonitoringtypes.Nodes, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListNodes")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -332,6 +340,8 @@ func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframon
 }
 
 func (m *module) ListNamespaces(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNamespaces) (*inframonitoringtypes.Namespaces, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListNamespaces")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -414,6 +424,8 @@ func (m *module) ListNamespaces(ctx context.Context, orgID valuer.UUID, req *inf
 }
 
 func (m *module) ListClusters(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableClusters) (*inframonitoringtypes.Clusters, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListClusters")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -503,6 +515,8 @@ func (m *module) ListClusters(ctx context.Context, orgID valuer.UUID, req *infra
 }
 
 func (m *module) ListVolumes(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableVolumes) (*inframonitoringtypes.Volumes, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListVolumes")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -586,6 +600,8 @@ func (m *module) ListVolumes(ctx context.Context, orgID valuer.UUID, req *infram
 }
 
 func (m *module) ListDeployments(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableDeployments) (*inframonitoringtypes.Deployments, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListDeployments")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -674,6 +690,8 @@ func (m *module) ListDeployments(ctx context.Context, orgID valuer.UUID, req *in
 }
 
 func (m *module) ListStatefulSets(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableStatefulSets) (*inframonitoringtypes.StatefulSets, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListStatefulSets")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -764,6 +782,8 @@ func (m *module) ListStatefulSets(ctx context.Context, orgID valuer.UUID, req *i
 }
 
 func (m *module) ListJobs(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableJobs) (*inframonitoringtypes.Jobs, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListJobs")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -854,6 +874,8 @@ func (m *module) ListJobs(ctx context.Context, orgID valuer.UUID, req *inframoni
 }
 
 func (m *module) ListDaemonSets(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableDaemonSets) (*inframonitoringtypes.DaemonSets, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListDaemonSets")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -942,3 +964,12 @@ func (m *module) ListDaemonSets(ctx context.Context, orgID valuer.UUID, req *inf
 
 	return resp, nil
 }
+
+func (m *module) withInfraMonitoringContext(ctx context.Context, functionName string) context.Context {
+	comments := map[string]string{
+		instrumentationtypes.TelemetrySignal:  telemetrytypes.SignalMetrics.StringValue(),
+		instrumentationtypes.CodeNamespace:    "infra-monitoring",
+		instrumentationtypes.CodeFunctionName: functionName,
+	}
+	return ctxtypes.NewContextWithCommentVals(ctx, comments)
+}

pkg/modules/tracedetail/impltracedetail/module.go

@@ -182,7 +182,7 @@ func (m *module) getFullFlamegraph(ctx context.Context, traceID string, summary
 		return nil, spantypes.ErrTraceNotFound
 	}
 	flamegraphTrace := spantypes.NewFlamegraphTraceFromStorable(fullSpans, selectFields)
-	return spantypes.NewGettableFlamegraphTrace(flamegraphTrace.GetAllLevels(), summary.Start.UnixMilli(), summary.End.UnixMilli(), false), nil
+	return spantypes.NewGettableFlamegraphTrace(flamegraphTrace.GetAllLevels(), summary.Start, summary.End, false), nil
 }
 
 // getWindowedFlamegraph returns a window of a max levels and max sampled spans per level around the selected span.
@@ -209,10 +209,6 @@ func (m *module) getWindowedFlamegraph(ctx context.Context, traceID, selectedSpa
 		return nil, err
 	}
 
-	return spantypes.NewGettableFlamegraphTrace(
-		flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans, selectFields),
-		summary.Start.UnixMilli(),
-		summary.End.UnixMilli(),
-		true,
-	), nil
+	enrichedSpans := flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans, selectFields)
+	return spantypes.NewGettableFlamegraphTrace(enrichedSpans, summary.Start, summary.End, true), nil
 }

pkg/querier/consume.go

@@ -62,7 +62,7 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 	numericColsCount := 0
 	for i, ct := range colTypes {
 		slots[i] = reflect.New(ct.ScanType()).Interface()
-		if numericKind(ct.ScanType().Kind()) {
+		if isNumericKind(ct.ScanType()) {
 			numericColsCount++
 		}
 	}
@@ -270,8 +270,14 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 	}, nil
 }
 
-func numericKind(k reflect.Kind) bool {
-	switch k {
+func isNumericKind(t reflect.Type) bool {
+	if t == nil {
+		return false
+	}
+	for t.Kind() == reflect.Ptr || t.Kind() == reflect.UnsafePointer {
+		t = t.Elem()
+	}
+	switch t.Kind() {
 	case reflect.Float32, reflect.Float64,
 		reflect.Int, reflect.Int8, reflect.Int16, reflect.Int32, reflect.Int64,
 		reflect.Uint, reflect.Uint8, reflect.Uint16, reflect.Uint32, reflect.Uint64:
@@ -290,7 +296,13 @@ func readAsScalar(rows driver.Rows, queryName string) (*qbtypes.ScalarData, erro
 	var aggIndex int64
 	for i, name := range colNames {
 		colType := qbtypes.ColumnTypeGroup
-		if aggRe.MatchString(name) {
+		// Builder queries aliases aggregation columns as __result_N (always numeric) and wraps group-by keys with toString (always string);
+		// Raw ClickHouse queries may use any aliases.
+		// Handling Builder queries, If name like __result_N -> aggregation, otherwise group-by column
+		// Handling Raw ClickHouse queries, If type is numeric -> aggregation, otherwise group-by column
+		// NOTE: For clickhouse queries, its wrong to assume that numeric columns are always aggregations, user might be grouping by on integer status_code.
+		// However, we are fine with this for now. If need arises, simplest way would be to solve this on the frontend side by asking user a mapping of column names to column types.
+		if aggRe.MatchString(name) || isNumericKind(colTypes[i].ScanType()) {
 			colType = qbtypes.ColumnTypeAggregation
 		}
 		cd[i] = &qbtypes.ColumnDescriptor{

pkg/types/spantypes/flamegraph_span.go

@@ -1,6 +1,8 @@
 package spantypes
 
 import (
+	"time"
+
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
@@ -37,11 +39,17 @@ type GettableFlamegraphTrace struct {
 	HasMore              bool                `json:"hasMore" required:"true"`
 }
 
-func NewGettableFlamegraphTrace(spans [][]*FlamegraphSpan, startMs, endMs int64, hasMore bool) *GettableFlamegraphTrace {
+func NewGettableFlamegraphTrace(spans [][]*FlamegraphSpan, start, end time.Time, hasMore bool) *GettableFlamegraphTrace {
+	// convert timestamp to millisecond since client expect that
+	for _, level := range spans {
+		for _, span := range level {
+			span.Timestamp /= 1_000_000
+		}
+	}
 	return &GettableFlamegraphTrace{
 		Spans:                spans,
-		StartTimestampMillis: startMs,
-		EndTimestampMillis:   endMs,
+		StartTimestampMillis: start.UnixMilli(),
+		EndTimestampMillis:   end.UnixMilli(),
 		HasMore:              hasMore,
 	}
 }

tests/integration/tests/dashboard/03_v2_dashboard.py

@@ -9,6 +9,28 @@ from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.types import Operation, SigNoz
 
 BASE_URL = "/api/v2/dashboards"
+# v1 list returns every dashboard regardless of schema. v2 list converts each row
+# to the perses schema and 501s if any stored dashboard isn't perses-schema, so
+# listing for cleanup against a shared DB must go through v1.
+V1_BASE_URL = "/api/v1/dashboards"
+
+
+def _wipe_all_dashboards(signoz: SigNoz, token: str) -> None:
+    response = requests.get(
+        signoz.self.host_configs["8080"].get(V1_BASE_URL),
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.OK, response.text
+    for dashboard in response.json()["data"]:
+        metadata = (dashboard.get("data") or {}).get("metadata") or {}
+        base = BASE_URL if metadata.get("schemaVersion") == "v6" else V1_BASE_URL
+        del_res = requests.delete(
+            signoz.self.host_configs["8080"].get(f"{base}/{dashboard['id']}"),
+            headers={"Authorization": f"Bearer {token}"},
+            timeout=5,
+        )
+        assert del_res.status_code == HTTPStatus.NO_CONTENT, del_res.text
 
 
 # ─── failure cases (create no dashboards) ────────────────────────────────────
@@ -258,18 +280,7 @@ def test_dashboard_v2_lifecycle(  # pylint: disable=too-many-locals,too-many-sta
     # runs, so start from a clean slate: delete every dashboard (which also clears
     # pins via the delete cascade). This test then owns the whole dashboard space
     # and asserts on global counts.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     dashboard_requests = [
         (
@@ -687,18 +698,7 @@ def test_dashboard_v2_pin_limit(
 
     # Wipe the dashboard space (see lifecycle) so the per-user pin cap this test
     # asserts against starts empty — deleting dashboards clears their pins.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     ids: list[str] = []
     for i in range(max_pinned + 1):
@@ -785,18 +785,7 @@ def test_dashboard_v2_like_escaping(
 
     # Wipe the dashboard space (see lifecycle) so the filter assertions run
     # against only the dashboards this test creates.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     dashboard_requests = [
         ("esc-pct", "Cost 50% Report"),

tests/integration/tests/querier/17_clickhouse_queries.py

@@ -0,0 +1,74 @@
+"""
+Integration tests for raw ClickHouse SQL queries in the querier.
+"""
+
+from collections.abc import Callable
+from datetime import UTC, datetime, timedelta
+from http import HTTPStatus
+
+from fixtures import querier, types
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
+
+
+def test_clickhouse_scalar_numeric_result_alias_classified_as_aggregation(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+) -> None:
+    """A numeric column aliased ``__result_0`` is classified as an aggregation."""
+    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = querier.make_query_request(
+        signoz,
+        token,
+        int((now - timedelta(hours=1)).timestamp() * 1000),
+        int(now.timestamp() * 1000),
+        [
+            {
+                "type": "clickhouse_sql",
+                "spec": {
+                    "name": "A",
+                    "query": "SELECT toFloat64(1.5) AS `__result_0`",
+                    "disabled": False,
+                },
+            }
+        ],
+        request_type=querier.RequestType.SCALAR,
+    )
+
+    assert response.status_code == HTTPStatus.OK
+    assert response.json()["status"] == "success"
+
+    columns = querier.get_scalar_columns(response.json())
+    assert len(columns) == 1
+    assert columns[0]["name"] == "__result_0"
+    assert columns[0]["columnType"] == "aggregation"
+    assert columns[0]["aggregationIndex"] == 0
+
+    response = querier.make_query_request(
+        signoz,
+        token,
+        int((now - timedelta(hours=1)).timestamp() * 1000),
+        int(now.timestamp() * 1000),
+        [
+            {
+                "type": "clickhouse_sql",
+                "spec": {
+                    "name": "A",
+                    "query": "SELECT toNullable(toFloat64(1.5)) AS value",
+                    "disabled": False,
+                },
+            }
+        ],
+        request_type=querier.RequestType.SCALAR,
+    )
+
+    assert response.status_code == HTTPStatus.OK
+    assert response.json()["status"] == "success"
+
+    columns = querier.get_scalar_columns(response.json())
+    assert len(columns) == 1
+    assert columns[0]["name"] == "value"
+    assert columns[0]["columnType"] == "aggregation"
+    assert columns[0]["aggregationIndex"] == 0