fix: include path in main error message directly

* chore: validate layout size and positioning in backend

* test: add integratino test for layout validation

* test: use assert instead of require for non blocking check

* test: use assert instead of require for non blocking check

* fix: move require to assert for actual test checks

docs/api/openapi.yml

@@ -3071,6 +3071,10 @@ components:
           items:
             $ref: '#/components/schemas/DashboardtypesListedDashboardForUserV2'
           type: array
+        reservedKeywords:
+          items:
+            type: string
+          type: array
         tags:
           items:
             $ref: '#/components/schemas/TagtypesGettableTag'
@@ -3082,6 +3086,7 @@ components:
       - dashboards
       - total
       - tags
+      - reservedKeywords
       type: object
     DashboardtypesListableDashboardV2:
       properties:
@@ -3089,6 +3094,10 @@ components:
           items:
             $ref: '#/components/schemas/DashboardtypesListedDashboardV2'
           type: array
+        reservedKeywords:
+          items:
+            type: string
+          type: array
         tags:
           items:
             $ref: '#/components/schemas/TagtypesGettableTag'
@@ -3100,6 +3109,7 @@ components:
       - dashboards
       - total
       - tags
+      - reservedKeywords
       type: object
     DashboardtypesListableDashboardView:
       properties:

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

@@ -5031,6 +5031,10 @@ export interface DashboardtypesListableDashboardForUserV2DTO {
 	 * @type array
 	 */
 	dashboards: DashboardtypesListedDashboardForUserV2DTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
 	/**
 	 * @type array
 	 */
@@ -5098,6 +5102,10 @@ export interface DashboardtypesListableDashboardV2DTO {
 	 * @type array
 	 */
 	dashboards: DashboardtypesListedDashboardV2DTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
 	/**
 	 * @type array
 	 */

frontend/src/container/MeterExplorer/Explorer/EmptyMeterSearch.module.scss

@@ -0,0 +1,8 @@
+.emptyMeterSearch {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}

frontend/src/container/MeterExplorer/Explorer/EmptyMeterSearch.tsx

@@ -0,0 +1,26 @@
+import { Empty } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './EmptyMeterSearch.module.scss';
+
+interface EmptyMeterSearchProps {
+	hasQueryResult?: boolean;
+}
+
+export default function EmptyMeterSearch({
+	hasQueryResult,
+}: EmptyMeterSearchProps): JSX.Element {
+	return (
+		<div className={styles.emptyMeterSearch}>
+			<Empty
+				description={
+					<Typography.Title level={5}>
+						{hasQueryResult
+							? 'No data'
+							: 'Select a metric and run a query to see the results'}
+					</Typography.Title>
+				}
+			/>
+		</div>
+	);
+}

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -73,34 +73,6 @@
 				margin-top: 10px;
 				margin-bottom: 20px;
 			}
-
-			.empty-meter-search {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				width: 100%;
-				height: 100%;
-			}
-
-			.time-series-view-panel {
-				border-radius: 4px;
-				border: 1px solid var(--l1-border);
-				background: var(--l2-background);
-				padding: 8px !important;
-				margin: 8px;
-			}
-
-			.time-series-container {
-				display: grid;
-				grid-template-columns: repeat(
-					auto-fit,
-					minmax(min(100%, calc(50% - 8px)), 1fr)
-				);
-				gap: 16px;
-				width: 100%;
-				height: fit-content;
-			}
 		}
 	}
 
@@ -113,22 +85,6 @@
 	padding-bottom: 80px;
 }
 
-.meter-time-series-container {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-
-	.builder-units-filter {
-		padding: 0 8px;
-		margin-bottom: 0px !important;
-
-		.builder-units-filter-label {
-			margin-bottom: 0px !important;
-			font-size: 12px;
-		}
-	}
-}
-
 .dashboards-and-alerts-popover-container {
 	display: flex;
 	gap: 16px;

frontend/src/container/MeterExplorer/Explorer/MeterLoading.module.scss

@@ -0,0 +1,18 @@
+.loadingMeter {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	height: 240px;
+	padding: var(--spacing-12) 0;
+}
+
+.loadingMeterContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.loadingGif {
+	height: 72px;
+	margin-left: calc(-1 * var(--spacing-12));
+}

frontend/src/container/MeterExplorer/Explorer/MeterLoading.tsx

@@ -0,0 +1,17 @@
+import { Typography } from '@signozhq/ui/typography';
+import { DataSource } from 'types/common/queryBuilder';
+
+import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
+
+import styles from './MeterLoading.module.scss';
+
+export default function MeterLoading(): JSX.Element {
+	return (
+		<div className={styles.loadingMeter}>
+			<div className={styles.loadingMeterContent}>
+				<img className={styles.loadingGif} src={loadingPlaneUrl} alt="wait-icon" />
+				<Typography>Retrieving your {DataSource.METRICS}</Typography>
+			</div>
+		</div>
+	);
+}

frontend/src/container/MeterExplorer/Explorer/TimeSeries.module.scss

@@ -0,0 +1,31 @@
+.meterTimeSeriesContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-5);
+	width: 100%;
+
+	:global(.builder-units-filter) {
+		padding: 0 var(--spacing-4);
+		margin-bottom: 0 !important;
+	}
+
+	:global(.builder-units-filter-label) {
+		margin-bottom: 0 !important;
+		font-size: 12px;
+	}
+}
+
+.timeSeriesContainer {
+	gap: var(--spacing-8);
+	width: 100%;
+	height: 50vh;
+	max-height: 50vh;
+	padding-right: 16px;
+	padding-left: 8px;
+}
+
+.timeSeriesViewPanel {
+	border-radius: 4px;
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
+}

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -1,27 +1,28 @@
-import { useEffect, useMemo } from 'react';
-import { useQueries } from 'react-query';
+import { useMemo, useRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { isAxiosError } from 'axios';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
-import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
-import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useErrorModal } from 'providers/ErrorModalProvider';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
-import { SuccessResponse } from 'types/api';
-import APIError from 'types/api/error';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import uPlot from 'uplot';
+
+import { buildMeterChartConfig } from './configBuilder';
+import EmptyMeterSearch from './EmptyMeterSearch';
+import MeterLoading from './MeterLoading';
+import styles from './TimeSeries.module.scss';
+import { useTimeSeriesQueries } from './useTimeSeriesQueries';
+import { useTimeSeriesTimeManagement } from './useTimeSeriesTimeManagement';
+
+const WIDGET_ID = 'meter-explorer-bar-chart';
 
 interface TimeSeriesProps {
 	onFetchingStateChange?: (isFetching: boolean) => void;
@@ -32,144 +33,124 @@ function TimeSeries({
 	onFetchingStateChange,
 	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
+	const graphRef = useRef<HTMLDivElement>(null);
+
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+	const containerDimensions = useResizeObserver(graphRef);
+
 	const {
 		selectedTime: globalSelectedTime,
 		maxTime,
 		minTime,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
-	const isValidToConvertToMs = useMemo(() => {
-		const isValid: boolean[] = [];
+	const { minTimeScale, maxTimeScale, onDragSelect } =
+		useTimeSeriesTimeManagement({
+			globalSelectedTime,
+			maxTime,
+			minTime,
+		});
 
-		currentQuery.builder.queryData.forEach(
-			({ aggregateAttribute, aggregateOperator }) => {
-				const isExistDurationNanoAttribute =
-					aggregateAttribute?.key === 'durationNano' ||
-					aggregateAttribute?.key === 'duration_nano';
-
-				const isCountOperator =
-					aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
-
-				isValid.push(!isCountOperator && isExistDurationNanoAttribute);
-			},
-		);
-
-		return isValid.every(Boolean);
-	}, [currentQuery]);
-
-	const queryPayloads = useMemo(
-		() => [stagedQuery || initialQueryMeterWithType],
-		[stagedQuery],
-	);
-
-	const { showErrorModal } = useErrorModal();
-
-	const queries = useQueries(
-		queryPayloads.map((payload, index) => ({
-			queryKey: [
-				REACT_QUERY_KEY.GET_QUERY_RANGE,
-				payload,
-				ENTITY_VERSION_V5,
-				globalSelectedTime,
-				maxTime,
-				minTime,
-				index,
-			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(
-					{
-						query: payload,
-						graphType: PANEL_TYPES.BAR,
-						selectedTime: 'GLOBAL_TIME',
-						globalSelectedInterval: globalSelectedTime,
-						params: {
-							dataSource: DataSource.METRICS,
-						},
-					},
-					ENTITY_VERSION_V5,
-					undefined,
-					signal,
-				),
-			enabled: !!payload,
-			retry: (failureCount: number, error: unknown): boolean => {
-				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-					return false;
-				}
-
-				let status: number | undefined;
-
-				if (error instanceof APIError) {
-					status = error.getHttpStatusCode();
-				} else if (isAxiosError(error)) {
-					status = error.response?.status;
-				}
-
-				if (status && status >= 400 && status < 500) {
-					return false;
-				}
-
-				return failureCount < MAX_QUERY_RETRIES;
-			},
-			onError: (error: APIError): void => {
-				showErrorModal(error);
-			},
-		})),
-	);
-
-	const isFetching = queries.some((q) => q.isFetching);
-	useEffect(() => {
-		onFetchingStateChange?.(isFetching);
-	}, [isFetching, onFetchingStateChange]);
-
-	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
-
-	const responseData = useMemo(
-		() =>
-			data.map((datapoint) =>
-				isValidToConvertToMs ? convertDataValueToMs(datapoint) : datapoint,
-			),
-		[data, isValidToConvertToMs],
-	);
+	const { responseData, isLoading, isError } = useTimeSeriesQueries({
+		stagedQuery,
+		currentQuery,
+		globalSelectedTime,
+		maxTime,
+		minTime,
+		onFetchingStateChange,
+	});
 
 	const hasMetricSelected = useMemo(
 		() => currentQuery.builder.queryData.some((q) => q.aggregateAttribute?.key),
 		[currentQuery],
 	);
 
+	const chartsData = useMemo(() => {
+		return responseData.map((response, index) => {
+			const apiResponse = response?.payload;
+
+			const config = buildMeterChartConfig({
+				id: `${WIDGET_ID}-${index}`,
+				isDarkMode,
+				currentQuery,
+				onDragSelect,
+				apiResponse,
+				timezone,
+				yAxisUnit: yAxisUnit || 'short',
+				minTimeScale,
+				maxTimeScale,
+			});
+
+			const chartData = apiResponse ? prepareChartData(apiResponse) : [];
+
+			return {
+				config,
+				chartData,
+				hasData: chartData.length > 0 && chartData[0]?.length > 0,
+			};
+		});
+	}, [
+		responseData,
+		currentQuery,
+		yAxisUnit,
+		isDarkMode,
+		onDragSelect,
+		timezone,
+		minTimeScale,
+		maxTimeScale,
+	]);
+
+	const hasAnyData = chartsData.some((chart) => chart.hasData);
+
 	return (
-		<div className="meter-time-series-container">
+		<div className={styles.meterTimeSeriesContainer}>
 			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-			<div className="time-series-container">
-				{!hasMetricSelected && <EmptyMetricsSearch />}
+			<div className={styles.timeSeriesContainer} ref={graphRef}>
+				{!hasMetricSelected && <EmptyMeterSearch />}
 				{isCancelled && hasMetricSelected && (
 					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
 				)}
+				{isLoading && hasMetricSelected && !isCancelled && <MeterLoading />}
 				{!isCancelled &&
 					hasMetricSelected &&
-					responseData.map((datapoint, index) => (
-						<div
-							className="time-series-view-panel"
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-						>
-							<TimeSeriesView
-								isFilterApplied={false}
-								isError={queries[index].isError}
-								isLoading={queries[index].isLoading}
-								data={datapoint}
-								dataSource={DataSource.METRICS}
-								yAxisUnit={yAxisUnit}
-								panelType={PANEL_TYPES.BAR}
-							/>
-						</div>
-					))}
+					!isLoading &&
+					!isError &&
+					!hasAnyData && (
+						<EmptyMeterSearch hasQueryResult={responseData[0] !== undefined} />
+					)}
+				{!isCancelled &&
+					hasMetricSelected &&
+					!isLoading &&
+					!isError &&
+					containerDimensions.width > 0 &&
+					containerDimensions.height > 0 &&
+					chartsData.map(
+						(chart, index) =>
+							chart.hasData && (
+								<div
+									className={styles.timeSeriesViewPanel}
+									// oxlint-disable-next-line react/no-array-index-key -- query responses have no stable ID
+									key={`${WIDGET_ID}-${index}`}
+								>
+									<BarChart
+										config={chart.config}
+										legendConfig={{
+											position: LegendPosition.BOTTOM,
+										}}
+										data={chart.chartData as uPlot.AlignedData}
+										width={containerDimensions.width}
+										height={containerDimensions.height}
+										isStackedBarChart
+										yAxisUnit={yAxisUnit || 'short'}
+										timezone={timezone}
+									/>
+								</div>
+							),
+					)}
 			</div>
 		</div>
 	);

frontend/src/container/MeterExplorer/Explorer/configBuilder.ts

@@ -0,0 +1,117 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import {
+	DrawStyle,
+	SelectionPreferencesSource,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { get } from 'lodash-es';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import uPlot from 'uplot';
+
+export interface MeterChartConfigProps {
+	id: string;
+	isDarkMode: boolean;
+	currentQuery: Query;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	apiResponse?: MetricRangePayloadProps;
+	timezone: Timezone;
+	yAxisUnit: string;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+}
+
+export function buildMeterChartConfig({
+	id,
+	isDarkMode,
+	currentQuery,
+	onDragSelect,
+	apiResponse,
+	timezone,
+	yAxisUnit,
+	minTimeScale,
+	maxTimeScale,
+}: MeterChartConfigProps): UPlotConfigBuilder {
+	const stepIntervals = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	) as Record<string, number>;
+	const minStepInterval = Object.keys(stepIntervals).length
+		? Math.min(...Object.values(stepIntervals))
+		: undefined;
+
+	const tzDate = (timestamp: number): Date =>
+		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+
+	const builder = new UPlotConfigBuilder({
+		id,
+		onDragSelect,
+		tzDate,
+		selectionPreferencesSource: SelectionPreferencesSource.IN_MEMORY,
+		stepInterval: minStepInterval,
+	});
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: true,
+		min: minTimeScale,
+		max: maxTimeScale,
+	});
+
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+	});
+
+	builder.addAxis({
+		scaleKey: 'x',
+		show: true,
+		side: 2,
+		isDarkMode,
+		panelType: PANEL_TYPES.BAR,
+	});
+
+	builder.addAxis({
+		scaleKey: 'y',
+		show: true,
+		side: 3,
+		isDarkMode,
+		yAxisUnit,
+		panelType: PANEL_TYPES.BAR,
+	});
+
+	if (!apiResponse?.data?.result) {
+		return builder;
+	}
+
+	const seriesCount = (apiResponse.data.result.length ?? 0) + 1;
+	builder.setBands(getInitialStackedBands(seriesCount));
+
+	apiResponse.data.result.forEach((series) => {
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '',
+			series.legend || '',
+		);
+
+		const label = getLegend(series, currentQuery, baseLabelName);
+		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
+
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			label,
+			colorMapping: {},
+			isDarkMode,
+			stepInterval: currentStepInterval,
+			metric: series.metric,
+		});
+	});
+
+	return builder;
+}

frontend/src/container/MeterExplorer/Explorer/useTimeSeriesQueries.ts

@@ -0,0 +1,146 @@
+import { useEffect, useMemo } from 'react';
+import { useQueries } from 'react-query';
+import { isAxiosError } from 'axios';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import { SuccessResponse } from 'types/api';
+import APIError from 'types/api/error';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+interface UseTimeSeriesQueriesProps {
+	stagedQuery: Query | null;
+	currentQuery: Query;
+	globalSelectedTime: Time | CustomTimeType;
+	maxTime: number;
+	minTime: number;
+	onFetchingStateChange?: (isFetching: boolean) => void;
+}
+
+interface UseTimeSeriesQueriesResult {
+	responseData: (SuccessResponse<MetricRangePayloadProps> | undefined)[];
+	isLoading: boolean;
+	isError: boolean;
+}
+
+export function useTimeSeriesQueries({
+	stagedQuery,
+	currentQuery,
+	globalSelectedTime,
+	maxTime,
+	minTime,
+	onFetchingStateChange,
+}: UseTimeSeriesQueriesProps): UseTimeSeriesQueriesResult {
+	const { showErrorModal } = useErrorModal();
+
+	const isValidToConvertToMs = useMemo(() => {
+		const isValid: boolean[] = [];
+
+		currentQuery.builder.queryData.forEach(
+			({ aggregateAttribute, aggregateOperator }) => {
+				const isExistDurationNanoAttribute =
+					aggregateAttribute?.key === 'durationNano' ||
+					aggregateAttribute?.key === 'duration_nano';
+
+				const isCountOperator =
+					aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
+
+				isValid.push(!isCountOperator && isExistDurationNanoAttribute);
+			},
+		);
+
+		return isValid.every(Boolean);
+	}, [currentQuery]);
+
+	const queryPayloads = useMemo(
+		() => [stagedQuery || initialQueryMeterWithType],
+		[stagedQuery],
+	);
+
+	const queries = useQueries(
+		queryPayloads.map((payload, index) => ({
+			queryKey: [
+				REACT_QUERY_KEY.GET_QUERY_RANGE,
+				payload,
+				ENTITY_VERSION_V5,
+				globalSelectedTime,
+				maxTime,
+				minTime,
+				index,
+			],
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(
+					{
+						query: payload,
+						graphType: PANEL_TYPES.BAR,
+						selectedTime: 'GLOBAL_TIME',
+						globalSelectedInterval: globalSelectedTime,
+						params: {
+							dataSource: DataSource.METRICS,
+						},
+					},
+					ENTITY_VERSION_V5,
+					undefined,
+					signal,
+				),
+			enabled: !!payload,
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
+				let status: number | undefined;
+
+				if (error instanceof APIError) {
+					status = error.getHttpStatusCode();
+				} else if (isAxiosError(error)) {
+					status = error.response?.status;
+				}
+
+				if (status && status >= 400 && status < 500) {
+					return false;
+				}
+
+				return failureCount < MAX_QUERY_RETRIES;
+			},
+			onError: (error: APIError): void => {
+				showErrorModal(error);
+			},
+		})),
+	);
+
+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
+	const responseData = useMemo(() => {
+		const data = queries.map(({ data }) => data) ?? [];
+		return data.map((datapoint) =>
+			isValidToConvertToMs ? convertDataValueToMs(datapoint) : datapoint,
+		);
+	}, [queries, isValidToConvertToMs]);
+
+	const isLoading = queries.some((q) => q.isLoading);
+	const isError = queries.some((q) => q.isError);
+
+	return {
+		responseData,
+		isLoading,
+		isError,
+	};
+}

frontend/src/container/MeterExplorer/Explorer/useTimeSeriesTimeManagement.ts

@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { QueryParams } from 'constants/query';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import getTimeString from 'lib/getTimeString';
+import history from 'lib/history';
+import { UpdateTimeInterval } from 'store/actions';
+import { getTimeRange } from 'utils/getTimeRange';
+
+interface UseTimeSeriesTimeManagementProps {
+	globalSelectedTime: Time | CustomTimeType;
+	maxTime: number;
+	minTime: number;
+}
+
+interface UseTimeSeriesTimeManagementResult {
+	minTimeScale: number | undefined;
+	maxTimeScale: number | undefined;
+	onDragSelect: (start: number, end: number) => void;
+}
+
+export function useTimeSeriesTimeManagement({
+	globalSelectedTime,
+	maxTime,
+	minTime,
+}: UseTimeSeriesTimeManagementProps): UseTimeSeriesTimeManagementResult {
+	const dispatch = useDispatch();
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
+
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange();
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [maxTime, minTime, globalSelectedTime]);
+
+	const onDragSelect = useCallback(
+		(start: number, end: number): void => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+
+			const { maxTime, minTime } = GetMinMax('custom', [
+				startTimestamp,
+				endTimestamp,
+			]);
+
+			urlQuery.set(QueryParams.startTime, minTime.toString());
+			urlQuery.set(QueryParams.endTime, maxTime.toString());
+			urlQuery.delete(QueryParams.relativeTime);
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+		},
+		[dispatch, location.pathname, urlQuery],
+	);
+
+	const handleBackNavigation = useCallback((): void => {
+		const searchParams = new URLSearchParams(window.location.search);
+		const startTime = searchParams.get(QueryParams.startTime);
+		const endTime = searchParams.get(QueryParams.endTime);
+		const relativeTime = searchParams.get(
+			QueryParams.relativeTime,
+		) as CustomTimeType;
+
+		if (relativeTime) {
+			dispatch(UpdateTimeInterval(relativeTime));
+		} else if (startTime && endTime && startTime !== endTime) {
+			dispatch(
+				UpdateTimeInterval('custom', [
+					parseInt(getTimeString(startTime), 10),
+					parseInt(getTimeString(endTime), 10),
+				]),
+			);
+		}
+	}, [dispatch]);
+
+	useEffect(() => {
+		window.addEventListener('popstate', handleBackNavigation);
+		return (): void => {
+			window.removeEventListener('popstate', handleBackNavigation);
+		};
+	}, [handleBackNavigation]);
+
+	return {
+		minTimeScale,
+		maxTimeScale,
+		onDragSelect,
+	};
+}

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -30,6 +30,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
+import { stackSeries } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty } from 'lodash-es';
@@ -57,6 +58,7 @@ function TimeSeriesView({
 	dataSource,
 	setWarning,
 	panelType = PANEL_TYPES.TIME_SERIES,
+	stackBarChart = false,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 
@@ -65,11 +67,23 @@ function TimeSeriesView({
 	const location = useLocation();
 	const { currentQuery } = useQueryBuilder();
 
-	const chartData = useMemo(
+	const rawChartData = useMemo(
 		() => getUPlotChartData(data?.payload),
 		[data?.payload],
 	);
 
+	const { chartData, stackedBands } = useMemo(() => {
+		if (!stackBarChart || !rawChartData || rawChartData.length < 2) {
+			return { chartData: rawChartData, stackedBands: null };
+		}
+		const noSeriesHidden = (): boolean => false;
+		const { data: stacked, bands } = stackSeries(
+			rawChartData as uPlot.AlignedData,
+			noSeriesHidden,
+		);
+		return { chartData: stacked, stackedBands: bands };
+	}, [rawChartData, stackBarChart]);
+
 	useEffect(() => {
 		if (data?.payload) {
 			setWarning?.(data?.warning);
@@ -189,7 +203,7 @@ function TimeSeriesView({
 
 	const { timezone } = useTimezone();
 
-	const chartOptions = getUPlotChartOptions({
+	const baseChartOptions = getUPlotChartOptions({
 		id: 'time-series-explorer',
 		onDragSelect,
 		yAxisUnit: yAxisUnit || '',
@@ -222,6 +236,14 @@ function TimeSeriesView({
 		},
 	});
 
+	const chartOptions = useMemo(
+		() =>
+			stackedBands
+				? { ...baseChartOptions, bands: stackedBands }
+				: baseChartOptions,
+		[baseChartOptions, stackedBands],
+	);
+
 	return (
 		<div className="time-series-view">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
@@ -282,6 +304,7 @@ interface TimeSeriesViewProps {
 	dataSource: DataSource;
 	setWarning?: Dispatch<SetStateAction<Warning | undefined>>;
 	panelType?: PANEL_TYPES;
+	stackBarChart?: boolean;
 }
 
 TimeSeriesView.defaultProps = {
@@ -290,6 +313,7 @@ TimeSeriesView.defaultProps = {
 	error: undefined,
 	setWarning: undefined,
 	panelType: PANEL_TYPES.TIME_SERIES,
+	stackBarChart: false,
 };
 
 export default TimeSeriesView;

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

@@ -52,13 +52,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
 	const { patchAsync } = useOptimisticPatch();
-	const {
-		isPickerOpen,
-		openPicker,
-		closePicker,
-		createPanel,
-		targetLayoutIndex,
-	} = useCreatePanel();
+	const { isPickerOpen, openPicker, closePicker, createPanel } =
+		useCreatePanel();
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -158,7 +153,6 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 				open={isPickerOpen}
 				onClose={closePicker}
 				onSelect={createPanel}
-				defaultLayoutIndex={targetLayoutIndex}
 			/>
 		</section>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -1,69 +1,22 @@
-.panelTypeSection {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	align-items: center;
-}
-
 .grid {
-	align-self: stretch;
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	gap: 8px;
 }
 
-.panelTypeCard {
+.typeButton {
 	display: flex;
-	flex-direction: column;
 	align-items: center;
-	border: 1px solid var(--l2-border);
-	background: var(--l2-background);
+	gap: 8px;
 	padding: 12px;
-	gap: 12px;
-	cursor: pointer;
-	font: inherit;
+	background: var(--bg-ink-400, #0b0c0e);
+	border: 1px solid var(--l1-border);
 	border-radius: 4px;
 	color: var(--l1-foreground);
-	transition:
-		transform 180ms ease,
-		border-color 180ms ease;
+	cursor: pointer;
+	text-align: left;
 
 	&:hover {
-		background-color: var(--l2-background-hover);
-		border-color: var(--bg-robin-400);
-	}
-	&:active {
-		transform: translateY(2px);
+		border-color: var(--bg-robin-500);
 	}
 }
-
-.panelTypeCardSelected {
-	border-color: var(--bg-robin-400);
-	background-color: var(--l2-background-hover);
-	box-shadow: inset 0 0 0 1px var(--bg-robin-400);
-}
-
-.footerActions {
-	display: flex;
-	align-items: flex-end;
-	justify-content: flex-end;
-	gap: 8px;
-	width: 100%;
-}
-
-.footerPicker {
-	// Take all the width left over by the (natural-width) confirm button.
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: 6px;
-	min-width: 0;
-}
-
-.pickerLabel {
-	color: var(--l3-foreground);
-	font-size: 11px;
-	font-weight: 500;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -1,135 +1,45 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Color } from '@signozhq/design-tokens';
+import { Modal } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import cx from 'classnames';
 
-import { useDashboardSections } from '../../../hooks/useDashboardSections';
 import type { PanelKind } from '../../../Panels/types/panelKind';
 import { PANEL_TYPES } from './constants';
-import SectionPicker from './SectionPicker';
-import { buildSectionOptions, resolveDefaultSectionValue } from './utils';
 import styles from './PanelTypeSelectionModal.module.scss';
-import { Plus } from '@signozhq/icons';
 
 interface PanelTypeSelectionModalProps {
 	open: boolean;
 	onClose: () => void;
-	onSelect: (panelKind: PanelKind, layoutIndex?: number) => void;
-	/** Section the picker opens on; omit → the untitled root / first section. */
-	defaultLayoutIndex?: number;
+	onSelect: (panelKind: PanelKind) => void;
 }
 
-/** Fake loader shown on the confirm button before navigating to the editor. */
-const CONFIRM_LOADER_MS = 500;
-
 function PanelTypeSelectionModal({
 	open,
 	onClose,
 	onSelect,
-	defaultLayoutIndex,
 }: PanelTypeSelectionModalProps): JSX.Element {
-	const sections = useDashboardSections();
-	const options = useMemo(() => buildSectionOptions(sections), [sections]);
-	const hasSectionPicker = options.length > 1;
-
-	const [selectedValue, setSelectedValue] = useState('');
-	const [selectedPanelKind, setSelectedPanelKind] = useState<PanelKind | null>(
-		null,
-	);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	const clearTimer = useCallback((): void => {
-		if (timerRef.current !== null) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-	}, []);
-
-	// Seed the target section on open; cancel a pending navigation on close.
-	useEffect(() => {
-		if (open) {
-			setSelectedValue(resolveDefaultSectionValue(options, defaultLayoutIndex));
-			setSelectedPanelKind(null);
-			setIsSubmitting(false);
-		} else {
-			clearTimer();
-		}
-	}, [open, options, defaultLayoutIndex, clearTimer]);
-
-	useEffect(() => clearTimer, [clearTimer]);
-
-	const handleConfirm = (): void => {
-		if (selectedPanelKind === null || isSubmitting) {
-			return;
-		}
-		setIsSubmitting(true);
-		const layoutIndex = selectedValue === '' ? undefined : Number(selectedValue);
-		timerRef.current = setTimeout(() => {
-			onSelect(selectedPanelKind, layoutIndex);
-		}, CONFIRM_LOADER_MS);
-	};
-
-	// Footer is always shown; the confirm button is disabled until a panel type is picked.
-	const footer = (
-		<div className={styles.footerActions}>
-			{hasSectionPicker && (
-				<div className={styles.footerPicker}>
-					<span className={styles.pickerLabel}>Add panel to</span>
-					<SectionPicker
-						options={options}
-						value={selectedValue}
-						onChange={setSelectedValue}
-					/>
-				</div>
-			)}
-			<Button
-				color="primary"
-				size="md"
-				disabled={selectedPanelKind === null}
-				loading={isSubmitting}
-				prefix={<Plus size={16} />}
-				onClick={handleConfirm}
-				testId="panel-type-confirm"
-			>
-				Add Panel
-			</Button>
-		</div>
-	);
-
 	return (
-		<DialogWrapper
+		<Modal
 			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title="New Panel"
-			footer={footer}
+			title="Select a panel type"
+			onCancel={onClose}
+			footer={null}
+			destroyOnClose
 		>
-			<div className={styles.panelTypeSection}>
-				<span className={styles.pickerLabel}>Select panel type</span>
-				<div className={styles.grid}>
-					{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
-						<button
-							key={panelKind}
-							type="button"
-							className={cx(styles.panelTypeCard, {
-								[styles.panelTypeCardSelected]: panelKind === selectedPanelKind,
-							})}
-							data-testid={`panel-type-${panelKind}`}
-							aria-pressed={panelKind === selectedPanelKind}
-							onClick={(): void => setSelectedPanelKind(panelKind)}
-						>
-							<Icon size={24} color={Color.BG_ROBIN_400} />
-							{label}
-						</button>
-					))}
-				</div>
+			<div className={styles.grid}>
+				{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
+					<Button
+						key={panelKind}
+						type="button"
+						variant="ghost"
+						className={styles.typeButton}
+						data-testid={`panel-type-${panelKind}`}
+						onClick={(): void => onSelect(panelKind)}
+					>
+						<Icon size={14} />
+						{label}
+					</Button>
+				))}
 			</div>
-		</DialogWrapper>
+		</Modal>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/SectionPicker.module.scss

@@ -1,55 +0,0 @@
-.select {
-	width: 100%;
-}
-
-.dropdown {
-	min-width: 260px;
-}
-
-.rootIcon {
-	color: var(--bg-robin-400);
-	flex-shrink: 0;
-}
-
-.sectionIcon {
-	color: var(--l3-foreground);
-	flex-shrink: 0;
-}
-
-.triggerValue {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	overflow: hidden;
-}
-
-.triggerLabel {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.optionRow {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	padding: 4px 0;
-}
-
-.optionText {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	overflow: hidden;
-}
-
-.optionLabel {
-	color: var(--l1-foreground);
-	line-height: 1.2;
-}
-
-.optionDescription {
-	color: var(--l3-foreground);
-	font-size: 12px;
-	line-height: 1.2;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/SectionPicker.tsx

@@ -1,65 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line signoz/no-antd-components
-import { Select } from 'antd';
-
-import type { SectionOption } from './types';
-import styles from './SectionPicker.module.scss';
-
-interface SectionPickerProps {
-	options: SectionOption[];
-	value: string;
-	onChange: (value: string) => void;
-}
-
-function SectionPicker({
-	options,
-	value,
-	onChange,
-}: SectionPickerProps): JSX.Element {
-	// `selectedLabel` (one line) shows in the trigger; `label` (two lines) in the list.
-	const selectOptions = useMemo(
-		() =>
-			options.map((option) => {
-				const iconClass = option.isRoot ? styles.rootIcon : styles.sectionIcon;
-				return {
-					value: option.value,
-					selectedLabel: (
-						<span className={styles.triggerValue}>
-							<option.Icon size={16} className={iconClass} />
-							<span className={styles.triggerLabel}>{option.label}</span>
-						</span>
-					),
-					label: (
-						<span
-							className={styles.optionRow}
-							data-testid={`panel-section-option-${option.layoutIndex}`}
-						>
-							<option.Icon size={16} className={iconClass} />
-							<span className={styles.optionText}>
-								<span className={styles.optionLabel}>{option.label}</span>
-								<span className={styles.optionDescription}>{option.description}</span>
-							</span>
-						</span>
-					),
-				};
-			}),
-		[options],
-	);
-
-	return (
-		<Select<string>
-			className={styles.select}
-			popupClassName={styles.dropdown}
-			value={value}
-			onChange={onChange}
-			data-testid="panel-section-select"
-			optionLabelProp="selectedLabel"
-			getPopupContainer={(trigger): HTMLElement =>
-				trigger.parentElement ?? document.body
-			}
-			options={selectOptions}
-		/>
-	);
-}
-
-export default SectionPicker;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -14,16 +14,3 @@ export interface PanelType {
 	/** Icon component — the consumer renders it and controls size/color/etc. */
 	Icon: ComponentType<IconProps>;
 }
-
-export interface SectionOption {
-	/** The section's `layoutIndex`, stringified for the Select value. */
-	value: string;
-	layoutIndex: number;
-	/** Section title, or "Dashboard (root)" for the untitled top-level layout. */
-	label: string;
-	/** Caption under the label. */
-	description: string;
-	/** Untitled top-level layout (has no section header). */
-	isRoot: boolean;
-	Icon: ComponentType<IconProps>;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/utils.ts

@@ -1,41 +0,0 @@
-import { LayoutDashboard, Rows2 } from '@signozhq/icons';
-
-import type { DashboardSection } from '../../../utils';
-import type { SectionOption } from './types';
-
-const ROOT_LABEL = 'Dashboard (root)';
-const ROOT_DESCRIPTION = 'Top level — no section';
-const SECTION_DESCRIPTION = 'Section';
-
-/** Maps dashboard sections to section-picker options (untitled → "root"). */
-export function buildSectionOptions(
-	sections: DashboardSection[],
-): SectionOption[] {
-	return sections.map((section) => {
-		const isRoot = !section.title;
-		return {
-			value: String(section.layoutIndex),
-			layoutIndex: section.layoutIndex,
-			label: isRoot ? ROOT_LABEL : (section.title as string),
-			description: isRoot ? ROOT_DESCRIPTION : SECTION_DESCRIPTION,
-			isRoot,
-			Icon: isRoot ? LayoutDashboard : Rows2,
-		};
-	});
-}
-
-/**
- * Picks the option the picker should open on: the section the "Add panel" was
- * triggered from when present and still valid, otherwise the first option.
- */
-export function resolveDefaultSectionValue(
-	options: SectionOption[],
-	defaultLayoutIndex: number | undefined,
-): string {
-	const fallback = options[0]?.value ?? '';
-	if (defaultLayoutIndex === undefined) {
-		return fallback;
-	}
-	const target = String(defaultLayoutIndex);
-	return options.some((option) => option.value === target) ? target : fallback;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -29,13 +29,8 @@ interface SectionProps {
 
 function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	const {
-		isPickerOpen,
-		openPicker,
-		closePicker,
-		createPanel,
-		targetLayoutIndex,
-	} = useCreatePanel();
+	const { isPickerOpen, openPicker, closePicker, createPanel } =
+		useCreatePanel();
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
@@ -146,7 +141,6 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 				open={isPickerOpen}
 				onClose={closePicker}
 				onSelect={createPanel}
-				defaultLayoutIndex={targetLayoutIndex}
 			/>
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}

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

@@ -12,10 +12,7 @@ interface UseCreatePanelResult {
 	/** Pass the target section's layout index; omit → last/new section. */
 	openPicker: (layoutIndex?: number) => void;
 	closePicker: () => void;
-	/** The section the picker was opened against — seeds its section dropdown. */
-	targetLayoutIndex: number | undefined;
-	/** `layoutIndex` overrides the opened-against target (the dropdown's choice). */
-	createPanel: (panelKind: PanelKind, layoutIndex?: number) => void;
+	createPanel: (panelKind: PanelKind) => void;
 }
 
 /**
@@ -41,23 +38,16 @@ export function useCreatePanel(): UseCreatePanelResult {
 	}, []);
 
 	const createPanel = useCallback(
-		(panelKind: PanelKind, targetIndex?: number): void => {
+		(panelKind: PanelKind): void => {
 			setIsPickerOpen(false);
 			const path = generatePath(ROUTES.DASHBOARD_PANEL_EDITOR, {
 				dashboardId,
 				panelId: NEW_PANEL_ID,
 			});
-			const target = targetIndex ?? layoutIndex;
-			safeNavigate(`${path}${newPanelSearch(panelKind, target)}`);
+			safeNavigate(`${path}${newPanelSearch(panelKind, layoutIndex)}`);
 		},
 		[safeNavigate, dashboardId, layoutIndex],
 	);
 
-	return {
-		isPickerOpen,
-		openPicker,
-		closePicker,
-		targetLayoutIndex: layoutIndex,
-		createPanel,
-	};
+	return { isPickerOpen, openPicker, closePicker, createPanel };
 }

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

@@ -1,21 +0,0 @@
-import { useMemo } from 'react';
-import { useGetDashboardV2 } from 'api/generated/services/dashboard';
-
-import { useDashboardStore } from '../store/useDashboardStore';
-import { type DashboardSection, layoutsToSections } from '../utils';
-
-/**
- * The current dashboard's sections, read from the already-loaded dashboard
- * query. The page fetches via useGetDashboardV2 keyed by id, so this reuses that
- * cache (no extra request) instead of prop-drilling the section list.
- */
-export function useDashboardSections(): DashboardSection[] {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const { data } = useGetDashboardV2({ id: dashboardId });
-	const spec = data?.data?.spec;
-
-	return useMemo(
-		() => layoutsToSections(spec?.layouts, spec?.panels),
-		[spec?.layouts, spec?.panels],
-	);
-}

pkg/modules/tag/impltag/store.go

@@ -26,6 +26,7 @@ func (s *store) List(ctx context.Context, orgID valuer.UUID, kind coretypes.Kind
 		Model(&tags).
 		Where("org_id = ?", orgID).
 		Where("kind = ?", kind).
+		OrderExpr("lower(key) ASC, lower(value) ASC").
 		Scan(ctx)
 	if err != nil {
 		return nil, err

pkg/types/dashboardtypes/dashboard_view.go

@@ -15,7 +15,7 @@ import (
 
 const (
 	DashboardViewSchemaVersion = "v1"
-	MaxDashboardViewNameLen    = 32
+	MaxDashboardViewNameLen    = 64
 )
 
 var (

pkg/types/dashboardtypes/list_filter.go

@@ -1,12 +1,29 @@
 package dashboardtypes
 
 import (
+	"slices"
+	"strings"
+
 	"github.com/SigNoz/signoz/pkg/errors"
 	qbtypesv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
 var ErrCodeDashboardListFilterInvalid = errors.MustNewCode("dashboard_list_filter_invalid")
 
+// ReservedFilterKeys returns the reserved (column-level) DSL keys the list
+// filter accepts, sorted alphabetically. The list API surfaces these so clients
+// can distinguish reserved keywords from tag keys when building filters.
+func ReservedFilterKeys() []DSLKey {
+	keys := make([]DSLKey, 0, len(ReservedOps))
+	for key := range ReservedOps {
+		keys = append(keys, key)
+	}
+	slices.SortFunc(keys, func(a, b DSLKey) int {
+		return strings.Compare(string(a), string(b))
+	})
+	return keys
+}
+
 // ReservedOps lists the operators each reserved (column-level) DSL key accepts.
 // Any non-reserved key is treated as a tag key and uses TagKeyOps.
 var ReservedOps = map[DSLKey]map[qbtypesv5.FilterOperator]struct{}{

pkg/types/dashboardtypes/list_v2.go

@@ -145,9 +145,10 @@ func newListedDashboardV2(v2 *DashboardV2) *listedDashboardV2 {
 }
 
 type ListableDashboardV2 struct {
-	Dashboards []*listedDashboardV2    `json:"dashboards" required:"true" nullable:"false"`
-	Total      int64                   `json:"total" required:"true"`
-	Tags       []*tagtypes.GettableTag `json:"tags" required:"true" nullable:"false"`
+	Dashboards       []*listedDashboardV2    `json:"dashboards" required:"true" nullable:"false"`
+	Total            int64                   `json:"total" required:"true"`
+	Tags             []*tagtypes.GettableTag `json:"tags" required:"true" nullable:"false"`
+	ReservedKeywords []DSLKey                `json:"reservedKeywords" required:"true" nullable:"false"`
 }
 
 func NewListableDashboardV2(dashboards []*StorableDashboard, total int64, tagsByEntity map[valuer.UUID][]*tagtypes.Tag, allTags []*tagtypes.Tag) (*ListableDashboardV2, error) {
@@ -160,9 +161,10 @@ func NewListableDashboardV2(dashboards []*StorableDashboard, total int64, tagsBy
 		items[i] = newListedDashboardV2(v2)
 	}
 	return &ListableDashboardV2{
-		Dashboards: items,
-		Total:      total,
-		Tags:       tagtypes.NewGettableTagsFromTags(allTags),
+		Dashboards:       items,
+		Total:            total,
+		Tags:             tagtypes.NewGettableTagsFromTags(allTags),
+		ReservedKeywords: ReservedFilterKeys(),
 	}, nil
 }
 
@@ -174,9 +176,10 @@ type listedDashboardForUserV2 struct {
 }
 
 type ListableDashboardForUserV2 struct {
-	Dashboards []*listedDashboardForUserV2 `json:"dashboards" required:"true" nullable:"false"`
-	Total      int64                       `json:"total" required:"true"`
-	Tags       []*tagtypes.GettableTag     `json:"tags" required:"true" nullable:"false"`
+	Dashboards       []*listedDashboardForUserV2 `json:"dashboards" required:"true" nullable:"false"`
+	Total            int64                       `json:"total" required:"true"`
+	Tags             []*tagtypes.GettableTag     `json:"tags" required:"true" nullable:"false"`
+	ReservedKeywords []DSLKey                    `json:"reservedKeywords" required:"true" nullable:"false"`
 }
 
 // StorableDashboardWithPinInfo is the per-row shape Store.ListForUser returns: the dashboard
@@ -200,8 +203,9 @@ func NewListableDashboardForUserV2(rows []*StorableDashboardWithPinInfo, total i
 		}
 	}
 	return &ListableDashboardForUserV2{
-		Dashboards: items,
-		Total:      total,
-		Tags:       tagtypes.NewGettableTagsFromTags(allTags),
+		Dashboards:       items,
+		Total:            total,
+		Tags:             tagtypes.NewGettableTagsFromTags(allTags),
+		ReservedKeywords: ReservedFilterKeys(),
 	}, nil
 }

pkg/types/dashboardtypes/perses_dashboard.go

@@ -4,8 +4,12 @@ import (
 	"bytes"
 	"crypto/rand"
 	"encoding/json"
+	"fmt"
+	"regexp"
+	"strconv"
 	"strings"
 	"time"
+	"unicode/utf8"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types"
@@ -134,14 +138,42 @@ func (d *DashboardV2) ErrIfNotClonable() error {
 }
 
 func (d DashboardV2) ToPostableForCloning() PostableDashboardV2 {
+	spec := d.Spec
+	spec.Display.Name = nextCloneDisplayName(spec.Display.Name)
 	return PostableDashboardV2{
 		DashboardV2MetadataBase: d.DashboardV2MetadataBase,
 		GenerateName:            true,
 		Tags:                    tagtypes.NewPostableTagsFromTags(d.Tags),
-		Spec:                    d.Spec,
+		Spec:                    spec,
 	}
 }
 
+// nextCloneDisplayName appends " - Copy" to a clone's display name, bumping an
+// existing " - Copy (n)" counter, then truncates the base to fit MaxDisplayNameLen.
+func nextCloneDisplayName(name string) string {
+	cloneCopySuffix := regexp.MustCompile(`^(.*) - Copy(?: \((\d+)\))?$`)
+
+	base, count := name, 0
+	if m := cloneCopySuffix.FindStringSubmatch(name); m != nil {
+		base = m[1]
+		count = 1 // bare " - Copy"
+		if m[2] != "" {
+			count, _ = strconv.Atoi(m[2])
+		}
+	}
+
+	suffix := " - Copy"
+	if count++; count > 1 {
+		suffix = fmt.Sprintf(" - Copy (%d)", count)
+	}
+
+	limit := max(MaxDisplayNameLen-utf8.RuneCountInString(suffix), 0)
+	if runes := []rune(base); len(runes) > limit {
+		base = strings.TrimRight(string(runes[:limit]), " ")
+	}
+	return base + suffix
+}
+
 type DashboardV2MetadataBase struct {
 	SchemaVersion string `json:"schemaVersion" required:"true"`
 	Image         string `json:"image,omitempty"`

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -5,6 +5,7 @@ import (
 	"strings"
 	"testing"
 	"time"
+	"unicode/utf8"
 
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
@@ -21,6 +22,7 @@ func newTestDashboardV2(t *testing.T, orgID valuer.UUID, source Source) *Dashboa
 	updatedAt := time.Date(2026, time.January, 2, 12, 0, 0, 0, time.UTC)
 
 	spec := DashboardSpec{
+		Display: Display{Name: "Test Dashboard"},
 		Panels: map[string]*Panel{
 			"p1": {
 				Kind: "Panel",
@@ -211,7 +213,13 @@ func TestDashboardV2ToPostableForCloning(t *testing.T) {
 	assert.True(t, postable.GenerateName, "internal name must be regenerated, not copied")
 	assert.Empty(t, postable.Name, "name must be empty so generateName can derive it")
 	assert.Equal(t, dashboard.DashboardV2MetadataBase, postable.DashboardV2MetadataBase, "schema version and image are carried over")
-	assert.Equal(t, dashboard.Spec, postable.Spec, "spec (incl. display name) is preserved verbatim")
+	assert.Equal(t, "Test Dashboard - Copy", postable.Spec.Display.Name, "clone appends a Copy suffix to the display name")
+
+	// The rest of the spec is carried over unchanged.
+	expectedSpec := dashboard.Spec
+	expectedSpec.Display.Name = "Test Dashboard - Copy"
+	assert.Equal(t, expectedSpec, postable.Spec)
+	assert.Equal(t, "Test Dashboard", dashboard.Spec.Display.Name, "the source dashboard's display name is not mutated")
 
 	require.Len(t, postable.Tags, len(dashboard.Tags))
 	for i, sourceTag := range dashboard.Tags {
@@ -220,6 +228,83 @@ func TestDashboardV2ToPostableForCloning(t *testing.T) {
 	}
 }
 
+// nextCloneDisplayName appends " - Copy", bumps an existing " - Copy (n)"
+// counter, and truncates an over-long base back to MaxDisplayNameLen while
+// keeping the suffix whole. The long cases are real-ish titles already at the
+// limit so the truncated output is legible; their literal expectations assume
+// the 128-character limit.
+func TestNextCloneDisplayName(t *testing.T) {
+	require.Equal(t, 128, MaxDisplayNameLen, "the literal expectations below are sized for a 128-character limit")
+
+	testCases := []struct {
+		scenario string
+		input    string
+		expected string
+	}{
+		{
+			scenario: "plain name gets a Copy suffix",
+			input:    "My Dashboard",
+			expected: "My Dashboard - Copy",
+		},
+		{
+			scenario: "Copy suffix bumps to (2)",
+			input:    "My Dashboard - Copy",
+			expected: "My Dashboard - Copy (2)",
+		},
+		{
+			scenario: "numbered suffix increments",
+			input:    "My Dashboard - Copy (2)",
+			expected: "My Dashboard - Copy (3)",
+		},
+		{
+			scenario: "multi-digit suffix increments",
+			input:    "svc - Copy (41)",
+			expected: "svc - Copy (42)",
+		},
+		{
+			scenario: "a name that merely contains Copy is not a suffix",
+			input:    "Copy of things",
+			expected: "Copy of things - Copy",
+		},
+		{
+			scenario: "only the trailing Copy marker is stripped",
+			input:    "Prod - Copy - Copy",
+			expected: "Prod - Copy - Copy (2)",
+		},
+		{
+			scenario: "empty name",
+			input:    "",
+			expected: " - Copy",
+		},
+		{
+			scenario: "first copy at the limit truncates the base, keeps the suffix",
+			input:    "Production Kubernetes Cluster Health: CPU, Memory, Disk I/O, and Network Saturation Across Every Namespace and Availability Zone",
+			expected: "Production Kubernetes Cluster Health: CPU, Memory, Disk I/O, and Network Saturation Across Every Namespace and Availabili - Copy",
+		},
+		{
+			scenario: "numbered copy at the limit increments then truncates",
+			input:    "API Gateway SLOs: p99 Latency, Error Budget Burn Rate, and Requests per Second by Route, Region, and Upstream Service - Copy (9)",
+			expected: "API Gateway SLOs: p99 Latency, Error Budget Burn Rate, and Requests per Second by Route, Region, and Upstream Servic - Copy (10)",
+		},
+		{
+			scenario: "truncation counts runes, not bytes (é and — are one rune each)",
+			input:    "Café Latency — p99 Response Times, Error Rates, and Saturation Across the Ordering, Kitchen, and Delivery Microservices Fleet",
+			expected: "Café Latency — p99 Response Times, Error Rates, and Saturation Across the Ordering, Kitchen, and Delivery Microservices F - Copy",
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.scenario, func(t *testing.T) {
+			require.LessOrEqual(t, utf8.RuneCountInString(testCase.input), MaxDisplayNameLen, "a saved source name never exceeds the limit")
+
+			result := nextCloneDisplayName(testCase.input)
+
+			assert.Equal(t, testCase.expected, result)
+			assert.LessOrEqual(t, utf8.RuneCountInString(result), MaxDisplayNameLen, "a clone name must fit the limit")
+		})
+	}
+}
+
 func TestDashboardV2StorableRoundTrip(t *testing.T) {
 	orgID := valuer.GenerateUUID()
 	original := newTestDashboardV2(t, orgID, SourceIntegration)

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -5,6 +5,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"slices"
+	"unicode/utf8"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
@@ -48,6 +49,9 @@ func (d *DashboardSpec) UnmarshalJSON(data []byte) error {
 // ══════════════════════════════════════════════
 
 func (d *DashboardSpec) Validate() error {
+	if err := d.Display.Validate("dashboard", "spec.display.name"); err != nil {
+		return err
+	}
 	if err := d.validateVariables(); err != nil {
 		return err
 	}
@@ -62,15 +66,23 @@ func (d *DashboardSpec) validateVariables() error {
 	seen := make(map[string]struct{}, len(d.Variables))
 	for i, v := range d.Variables {
 		var name string
+		var err error
+		// Validated here, not by decodeSpec on decode, so variable errors surface from
+		// Validate() with clean messages (not buried under the decoder's "invalid
+		// dashboard spec" wrap) and also run for programmatically built specs (cloning).
+		path := fmt.Sprintf("spec.variables[%d]", i)
 		switch s := v.Spec.(type) {
 		case *ListVariableSpec:
-			name = s.Name
+			name, err = s.Name, s.validate(path)
 		case *TextVariableSpec:
-			name = s.Name
+			name, err = s.Name, s.validate(path)
 		default:
 			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
 			return errors.NewInternalf(errors.CodeInternal, "spec.variables[%d].spec: unexpected variable spec type %T", i, v.Spec)
 		}
+		if err != nil {
+			return err
+		}
 		if _, dup := seen[name]; dup {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.variables[%d]: duplicate variable name %q", i, name)
 		}
@@ -88,6 +100,9 @@ func (d *DashboardSpec) validatePanels() error {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.panels.%s: panel must not be null", key)
 		}
 		path := fmt.Sprintf("spec.panels.%s", key)
+		if err := panel.Spec.Display.Validate("panel", path+".spec.display.name"); err != nil {
+			return err
+		}
 		panelKind := panel.Spec.Plugin.Kind
 		if len(panel.Spec.Queries) != 1 {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.spec.queries: panel must have one query", path)
@@ -138,14 +153,38 @@ func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind,
 	return nil
 }
 
-// validateLayouts rejects grid items referencing a panel that doesn't exist.
+const maxLayoutsPerDashboard = 500
+
+// validateLayouts validates the dashboard's layouts: bounded section count,
+// per-item geometry, resolvable panel references, and no panel placed twice.
+// Geometry (validateGridLayoutGeometry) needs only each layout's own data but
+// runs here so its errors can name the layout by index.
 func (d *DashboardSpec) validateLayouts() error {
+	if len(d.Layouts) > maxLayoutsPerDashboard {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts: dashboard has %d layouts; maximum is %d", len(d.Layouts), maxLayoutsPerDashboard)
+	}
+
+	// Could enforce this but skipping for now: panels in no grid item (orphans)
+	// are allowed.
+
+	// The frontend keys each grid item by its panel id, so placing one panel in
+	// two grid items collides; reject duplicate references dashboard-wide. Maps
+	// each referenced panel key to the path of the item that first placed it.
+	referencedPanels := make(map[string]string, len(d.Panels))
 	for li, layout := range d.Layouts {
 		grid, ok := layout.Spec.(*dashboard.GridLayoutSpec)
 		if !ok {
 			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
 			return errors.NewInternalf(errors.CodeInternal, "spec.layouts[%d].spec: unexpected layout spec type %T", li, layout.Spec)
 		}
+		if grid.Display != nil {
+			if n := utf8.RuneCountInString(grid.Display.Title); n > MaxDisplayNameLen {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.display.title: layout name must be at most %d characters, got %d", li, MaxDisplayNameLen, n)
+			}
+		}
+		if err := validateGridLayoutGeometry(grid, li); err != nil {
+			return err
+		}
 		for ii, item := range grid.Items {
 			path := fmt.Sprintf("spec.layouts[%d].spec.items[%d].content", li, ii)
 			if item.Content == nil {
@@ -158,6 +197,10 @@ func (d *DashboardSpec) validateLayouts() error {
 			if _, ok := d.Panels[key]; !ok {
 				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: references unknown panel %q", path, key)
 			}
+			if firstPath, dup := referencedPanels[key]; dup {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: panel %q is already placed by %s", path, key, firstPath)
+			}
+			referencedPanels[key] = path
 		}
 	}
 	return nil

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -299,19 +299,22 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 	// Layout edits
 	// ─────────────────────────────────────────────────────────────────
 
-	t.Run("move panel by editing layout x coordinate", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/x", "value": 6}]`).Apply(base)
+	t.Run("move panel by editing layout y coordinate", func(t *testing.T) {
+		// p2 fills the right half of row 0, so p1 can only move to a fresh row
+		// without tripping overlap validation.
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/y", "value": 6}]`).Apply(base)
 		require.NoError(t, err)
 		raw := jsonOf(t, out)
-		// The first item used to live at x=0, now lives at x=6.
-		assert.Contains(t, raw, `"x":6,"y":0,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
+		// The first item used to live at y=0, now lives at y=6.
+		assert.Contains(t, raw, `"x":0,"y":6,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
 	})
 
 	t.Run("resize panel by editing layout width", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 12}]`).Apply(base)
+		// p2 sits at x=6, so p1 (at x=0) can only shrink; widening it would overlap.
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 3}]`).Apply(base)
 		require.NoError(t, err)
 		raw := jsonOf(t, out)
-		assert.Contains(t, raw, `"width":12`)
+		assert.Contains(t, raw, `"width":3`)
 	})
 
 	t.Run("rename layout row title", func(t *testing.T) {
@@ -321,11 +324,12 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 	})
 
 	t.Run("append layout item", func(t *testing.T) {
-		out, err := decode(t, `[{
-			"op": "add",
-			"path": "/spec/layouts/0/spec/items/-",
-			"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
-		}]`).Apply(base)
+		// Appending needs a not-yet-placed panel, so add one in the same patch;
+		// re-placing p1 or p2 would be a duplicate reference.
+		out, err := decode(t, `[
+			{"op": "add", "path": "/spec/panels/p3", "value": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}},
+			{"op": "add", "path": "/spec/layouts/0/spec/items/-", "value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p3"}}}
+		]`).Apply(base)
 		require.NoError(t, err)
 		// Item count went 2 → 3.
 		raw := jsonOf(t, out)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -2,12 +2,14 @@ package dashboardtypes
 
 import (
 	"encoding/json"
+	"fmt"
 	"os"
 	"strings"
 	"testing"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/perses/spec/go/dashboard"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 	"k8s.io/apimachinery/pkg/util/validation"
@@ -25,19 +27,19 @@ func TestValidateBigExample(t *testing.T) {
 	data, err := os.ReadFile("testdata/perses.json")
 	require.NoError(t, err, "reading example file")
 	_, err = unmarshalDashboard(data)
-	require.NoError(t, err, "expected valid dashboard")
+	assert.NoError(t, err, "expected valid dashboard")
 }
 
 func TestValidateDashboardWithSections(t *testing.T) {
 	data, err := os.ReadFile("testdata/perses_with_sections.json")
 	require.NoError(t, err, "reading example file")
 	_, err = unmarshalDashboard(data)
-	require.NoError(t, err, "expected valid dashboard")
+	assert.NoError(t, err, "expected valid dashboard")
 }
 
 func TestInvalidateNotAJSON(t *testing.T) {
 	_, err := unmarshalDashboard([]byte("not json"))
-	require.Error(t, err, "expected error for invalid JSON")
+	assert.Error(t, err, "expected error for invalid JSON")
 }
 
 // TestUnmarshalErrorPreservesNestedMessage guards the wrap on dec.Decode in
@@ -60,11 +62,11 @@ func TestUnmarshalErrorPreservesNestedMessage(t *testing.T) {
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err)
 
-	require.Contains(t, err.Error(), "unknown panel plugin kind",
+	assert.Contains(t, err.Error(), "unknown panel plugin kind",
 		"outer wrap should not smother the inner UnmarshalJSON message")
-	require.Contains(t, err.Error(), `"NonExistentPanel"`,
+	assert.Contains(t, err.Error(), `"NonExistentPanel"`,
 		"the offending value should still appear in the error")
-	require.Contains(t, err.Error(), "allowed values:",
+	assert.Contains(t, err.Error(), "allowed values:",
 		"the allowed-values hint should still appear in the error")
 
 	assert.True(t, errors.Ast(err, errors.TypeInvalidInput),
@@ -77,7 +79,7 @@ func TestValidateEmptySpec(t *testing.T) {
 	// no variables no panels
 	data := []byte(`{}`)
 	_, err := unmarshalDashboard(data)
-	require.NoError(t, err, "expected valid")
+	assert.NoError(t, err, "expected valid")
 }
 
 func TestValidateOnlyVariables(t *testing.T) {
@@ -109,7 +111,7 @@ func TestValidateOnlyVariables(t *testing.T) {
 		"layouts": []
 	}`)
 	_, err := unmarshalDashboard(data)
-	require.NoError(t, err, "expected valid")
+	assert.NoError(t, err, "expected valid")
 }
 
 func TestInvalidateDuplicateVariableNames(t *testing.T) {
@@ -136,7 +138,7 @@ func TestInvalidateDuplicateVariableNames(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected error for duplicate variable name")
-	require.Contains(t, err.Error(), `duplicate variable name "env"`)
+	assert.Contains(t, err.Error(), `duplicate variable name "env"`)
 }
 
 func TestInvalidateVariableNameWithInvalidChars(t *testing.T) {
@@ -163,19 +165,19 @@ func TestInvalidateVariableNameWithInvalidChars(t *testing.T) {
 		t.Run(name, func(t *testing.T) {
 			_, err := unmarshalDashboard(listVarWithName(name))
 			require.Error(t, err, "expected error for invalid variable name %q", name)
-			require.Contains(t, err.Error(), "is not a correct name")
+			assert.Contains(t, err.Error(), "is not a correct name")
 		})
 	}
 	for _, name := range []string{"service", "my_var", "MY_VAR", "MixedCase9", "with-hyphen", "with.dot"} {
 		t.Run(name, func(t *testing.T) {
 			_, err := unmarshalDashboard(listVarWithName(name))
-			require.NoError(t, err, "expected valid variable name %q", name)
+			assert.NoError(t, err, "expected valid variable name %q", name)
 		})
 	}
 	t.Run("digits only", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVarWithName("123"))
 		require.Error(t, err)
-		require.Contains(t, err.Error(), "cannot contain only digits")
+		assert.Contains(t, err.Error(), "cannot contain only digits")
 	})
 }
 
@@ -199,7 +201,7 @@ func TestInvalidatePanelKey(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected error for invalid panel key")
-	require.Contains(t, err.Error(), "is not a correct name")
+	assert.Contains(t, err.Error(), "is not a correct name")
 }
 
 func TestInvalidateListVariableCrossFields(t *testing.T) {
@@ -225,30 +227,30 @@ func TestInvalidateListVariableCrossFields(t *testing.T) {
 	t.Run("customAllValue without allowAllValue", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "customAllValue": "*",`))
 		require.Error(t, err)
-		require.Contains(t, err.Error(), "customAllValue cannot be set")
+		assert.Contains(t, err.Error(), "customAllValue cannot be set")
 	})
 
 	t.Run("list defaultValue without allowMultiple", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["a", "b"],`))
 		require.Error(t, err)
-		require.Contains(t, err.Error(), "allowMultiple")
+		assert.Contains(t, err.Error(), "allowMultiple")
 	})
 
 	t.Run("single-element list default without allowMultiple", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["only"],`))
 		require.Error(t, err)
-		require.Contains(t, err.Error(), "allowMultiple")
+		assert.Contains(t, err.Error(), "allowMultiple")
 	})
 
 	t.Run("valid sort is accepted", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"sort": "alphabetical-asc",`))
-		require.NoError(t, err)
+		assert.NoError(t, err)
 	})
 
 	t.Run("unknown sort is rejected", func(t *testing.T) {
 		_, err := unmarshalDashboard(listVar(`"sort": "bogus",`))
 		require.Error(t, err)
-		require.Contains(t, err.Error(), "unknown sort")
+		assert.Contains(t, err.Error(), "unknown sort")
 	})
 }
 
@@ -275,7 +277,7 @@ func TestInvalidateEmptyVariableName(t *testing.T) {
 		t.Run(name, func(t *testing.T) {
 			_, err := unmarshalDashboard(data)
 			require.Error(t, err, "expected error for empty variable name")
-			require.Contains(t, err.Error(), "name cannot be empty")
+			assert.Contains(t, err.Error(), "name cannot be empty")
 		})
 	}
 }
@@ -414,7 +416,7 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
-			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+			assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
@@ -435,7 +437,7 @@ func TestInvalidateOneInvalidPanel(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected error for invalid panel plugin kind")
-	require.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
+	assert.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
 }
 
 func TestInvalidateLayoutPanelReferences(t *testing.T) {
@@ -488,11 +490,11 @@ func TestInvalidateLayoutPanelReferences(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard(tt.data)
 			if tt.wantContain == "" {
-				require.NoError(t, err)
+				assert.NoError(t, err)
 				return
 			}
 			require.Error(t, err)
-			require.Contains(t, err.Error(), tt.wantContain)
+			assert.Contains(t, err.Error(), tt.wantContain)
 		})
 	}
 }
@@ -570,7 +572,7 @@ func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error for unknown field")
-			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+			assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
@@ -649,7 +651,7 @@ func TestInvalidateWrongFieldTypeInPluginSpec(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected validation error")
 			if tt.wantContain != "" {
-				require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+				assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 			}
 		})
 	}
@@ -874,7 +876,7 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
-			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+			assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
@@ -907,7 +909,7 @@ func TestThresholdLabelOptional(t *testing.T) {
 
 			spec := d.Panels["p1"].Spec.Plugin.Spec.(*TimeSeriesPanelSpec)
 			require.Len(t, spec.Thresholds, 1)
-			require.Empty(t, spec.Thresholds[0].Label, "label should remain empty")
+			assert.Empty(t, spec.Thresholds[0].Label, "label should remain empty")
 		})
 	}
 }
@@ -924,7 +926,7 @@ func TestInvalidatePanelWithoutQueries(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected panel-without-queries to be rejected")
-	require.Contains(t, err.Error(), "panel must have one query")
+	assert.Contains(t, err.Error(), "panel must have one query")
 }
 
 func TestInvalidatePanelWithEmptyQueriesArray(t *testing.T) {
@@ -942,7 +944,7 @@ func TestInvalidatePanelWithEmptyQueriesArray(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected panel with explicit empty queries array to be rejected")
-	require.Contains(t, err.Error(), "panel must have one query")
+	assert.Contains(t, err.Error(), "panel must have one query")
 }
 
 // Rendering multiple data sources in a single panel is supported via
@@ -965,7 +967,7 @@ func TestInvalidatePanelWithMultipleDirectQueries(t *testing.T) {
 	}`)
 	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected panel with two top-level queries to be rejected")
-	require.Contains(t, err.Error(), "panel must have one query")
+	assert.Contains(t, err.Error(), "panel must have one query")
 }
 
 func TestValidateRequiredFields(t *testing.T) {
@@ -1053,7 +1055,7 @@ func TestValidateRequiredFields(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
-			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
+			assert.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
@@ -1081,14 +1083,14 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 	require.IsType(t, &TimeSeriesPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
 	spec := d.Panels["p1"].Spec.Plugin.Spec.(*TimeSeriesPanelSpec)
 
-	require.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
-	require.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
-	require.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
-	require.Equal(t, "none", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default none")
-	require.False(t, spec.ChartAppearance.SpanGaps.FillOnlyBelow, "expected SpanGaps.FillOnlyBelow default false")
-	require.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
-	require.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
-	require.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
+	assert.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
+	assert.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
+	assert.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
+	assert.Equal(t, "none", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default none")
+	assert.False(t, spec.ChartAppearance.SpanGaps.FillOnlyBelow, "expected SpanGaps.FillOnlyBelow default false")
+	assert.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
+	assert.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
+	assert.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
 
 	// Re-marshal the full dashboard (what we'd store in DB / return in API response)
 	// and verify the output contains the default values.
@@ -1131,8 +1133,8 @@ func TestNumberPanelDefaults(t *testing.T) {
 	spec := d.Panels["p1"].Spec.Plugin.Spec.(*NumberPanelSpec)
 
 	require.Len(t, spec.Thresholds, 1, "expected 1 threshold")
-	require.Equal(t, "above", spec.Thresholds[0].Operator.ValueOrDefault(), "expected ComparisonOperator default above")
-	require.Equal(t, "text", spec.Thresholds[0].Format.ValueOrDefault(), "expected ThresholdFormat default text")
+	assert.Equal(t, "above", spec.Thresholds[0].Operator.ValueOrDefault(), "expected ComparisonOperator default above")
+	assert.Equal(t, "text", spec.Thresholds[0].Format.ValueOrDefault(), "expected ThresholdFormat default text")
 
 	// Marshal back and verify defaults in JSON output.
 	output, err := json.Marshal(d)
@@ -1163,7 +1165,7 @@ func TestPersesFixtureStorageRoundTrip(t *testing.T) {
 	require.NoError(t, err, "map → JSON (read-back shape)")
 
 	var roundtripped DashboardSpec
-	require.NoError(t, json.Unmarshal(remarshaled, &roundtripped), "JSON → typed (the failure mode)")
+	assert.NoError(t, json.Unmarshal(remarshaled, &roundtripped), "JSON → typed (the failure mode)")
 }
 
 // TestStorageRoundTrip simulates the future DB store/load cycle:
@@ -1329,9 +1331,9 @@ func TestGenerateDashboardName(t *testing.T) {
 	for _, tt := range tests {
 		t.Run(tt.scenario, func(t *testing.T) {
 			got := generateDashboardName(tt.input)
-			require.NotEmpty(t, got)
-			require.LessOrEqual(t, len(got), 63)
-			require.Empty(t, validation.IsDNS1123Label(got), "result must be a valid DNS-1123 label")
+			assert.NotEmpty(t, got)
+			assert.LessOrEqual(t, len(got), 63)
+			assert.Empty(t, validation.IsDNS1123Label(got), "result must be a valid DNS-1123 label")
 
 			if tt.wantPrefix == "" {
 				assert.Len(t, got, dashboardNameSuffixLen, "expected the bare random suffix")
@@ -1346,8 +1348,8 @@ func TestGenerateDashboardName(t *testing.T) {
 	t.Run("prefix is truncated to leave room for the suffix", func(t *testing.T) {
 		input := strings.Repeat("a", 100)
 		got := generateDashboardName(input)
-		require.LessOrEqual(t, len(got), 63)
-		require.Empty(t, validation.IsDNS1123Label(got))
+		assert.LessOrEqual(t, len(got), 63)
+		assert.Empty(t, validation.IsDNS1123Label(got))
 		assert.Equal(t, len(got), 63, "expected the result to be padded to the max DNS-1123 length")
 	})
 
@@ -1435,10 +1437,194 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		t.Run(tc.name, func(t *testing.T) {
 			_, err := unmarshalDashboard(tc.data)
 			if tc.wantErr {
-				require.Error(t, err)
+				assert.Error(t, err)
 			} else {
-				require.NoError(t, err)
+				assert.NoError(t, err)
 			}
 		})
 	}
 }
+
+func TestValidateGridGeometry(t *testing.T) {
+	tests := []struct {
+		scenario         string
+		items            []dashboard.GridItem
+		expectErrContain string
+	}{
+		{
+			scenario:         "valid side-by-side items",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 6, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "valid full-width item",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 12, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "stacked items do not overlap",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 0, Y: 6, Width: 6, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "zero width",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 0, Height: 6}},
+			expectErrContain: "width must be at least 1",
+		},
+		{
+			scenario:         "zero height",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 0}},
+			expectErrContain: "height must be at least 1",
+		},
+		{
+			scenario:         "negative x",
+			items:            []dashboard.GridItem{{X: -1, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "x must not be negative",
+		},
+		{
+			scenario:         "negative y",
+			items:            []dashboard.GridItem{{X: 0, Y: -1, Width: 6, Height: 6}},
+			expectErrContain: "y must not be negative",
+		},
+		{
+			scenario:         "width wider than grid",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 13, Height: 6}},
+			expectErrContain: "width (13) exceeds grid width 12",
+		},
+		{
+			scenario:         "x at grid width",
+			items:            []dashboard.GridItem{{X: 12, Y: 0, Width: 1, Height: 6}},
+			expectErrContain: "x (12) must be less than grid width 12",
+		},
+		{
+			scenario:         "x plus width overflows grid",
+			items:            []dashboard.GridItem{{X: 8, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "x (8) + width (6) exceeds grid width 12",
+		},
+		{
+			scenario:         "overlapping items",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 3, Y: 3, Width: 6, Height: 6}},
+			expectErrContain: "items[0] and items[1] overlap",
+		},
+	}
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			err := validateGridLayoutGeometry(&dashboard.GridLayoutSpec{Items: test.items}, 0)
+			if test.expectErrContain == "" {
+				assert.NoError(t, err)
+				return
+			}
+			require.Error(t, err)
+			assert.Contains(t, err.Error(), test.expectErrContain)
+		})
+	}
+}
+
+func TestValidateGridItemLimit(t *testing.T) {
+	err := validateGridLayoutGeometry(&dashboard.GridLayoutSpec{Items: make([]dashboard.GridItem, maxItemsPerGridLayout+1)}, 0)
+	require.Error(t, err)
+	assert.Contains(t, err.Error(), "maximum is")
+}
+
+// Both panel refs are valid, so this errors only if geometry validation runs on
+// the unmarshal path — it does, via DashboardSpec.Validate -> validateLayouts.
+func TestInvalidateLayoutOverlapViaUnmarshal(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}},
+			"p2": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}
+		},
+		"layouts": [{"kind": "Grid", "spec": {"items": [
+			{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+			{"x": 3, "y": 3, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}}
+		]}}]
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err)
+	assert.Contains(t, err.Error(), "overlap")
+}
+
+// The frontend keys each grid item by its panel id, so the same panel placed by
+// two grid items crashes the section; the backend rejects it dashboard-wide. The
+// two items are side by side so they clear the overlap check first.
+func TestInvalidateDuplicatePanelReference(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}
+		},
+		"layouts": [{"kind": "Grid", "spec": {"items": [
+			{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+			{"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
+		]}}]
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err)
+	assert.Contains(t, err.Error(), "already placed")
+	// Both offending grid items are named.
+	assert.Contains(t, err.Error(), "spec.layouts[0].spec.items[0].content")
+	assert.Contains(t, err.Error(), "spec.layouts[0].spec.items[1].content")
+}
+
+// Every display name — dashboard, panel, variable — and the grid layout title is
+// bounded at MaxDisplayNameLen. The name is one over the limit in each case, and
+// the message reads "<json path>: <field> name must be at most ...", pairing the
+// locatable path (like the other spec errors) with a human field label.
+func TestInvalidateDisplayNameTooLong(t *testing.T) {
+	tooLong := strings.Repeat("x", MaxDisplayNameLen+1)
+	lengthMsg := fmt.Sprintf("must be at most %d characters, got %d", MaxDisplayNameLen, MaxDisplayNameLen+1)
+
+	testCases := []struct {
+		scenario      string
+		dashboardJSON string
+		expectedPath  string
+		expectedLabel string
+	}{
+		{
+			scenario:      "dashboard display name",
+			dashboardJSON: `{"display": {"name": "` + tooLong + `"}, "layouts": []}`,
+			expectedLabel: "dashboard",
+			expectedPath:  "spec.display.name",
+		},
+		{
+			scenario:      "panel display name",
+			dashboardJSON: `{"panels": {"p1": {"kind": "Panel", "spec": {"display": {"name": "` + tooLong + `"}, "plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": []}}}, "layouts": []}`,
+			expectedLabel: "panel",
+			expectedPath:  "spec.panels.p1.spec.display.name",
+		},
+		{
+			scenario:      "list variable display name",
+			dashboardJSON: `{"variables": [{"kind": "ListVariable", "spec": {"name": "svc", "display": {"name": "` + tooLong + `"}, "plugin": {"kind": "signoz/DynamicVariable", "spec": {"name": "service.name", "signal": "metrics"}}}}], "layouts": []}`,
+			expectedLabel: "variable",
+			expectedPath:  "spec.variables[0].spec.display.name",
+		},
+		{
+			scenario:      "text variable display name",
+			dashboardJSON: `{"variables": [{"kind": "TextVariable", "spec": {"name": "mytext", "value": "v", "display": {"name": "` + tooLong + `"}}}], "layouts": []}`,
+			expectedLabel: "variable",
+			expectedPath:  "spec.variables[0].spec.display.name",
+		},
+		{
+			scenario:      "layout title",
+			dashboardJSON: `{"layouts": [{"kind": "Grid", "spec": {"display": {"title": "` + tooLong + `"}, "items": []}}]}`,
+			expectedLabel: "layout",
+			expectedPath:  "spec.layouts[0].spec.display.title",
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.scenario, func(t *testing.T) {
+			_, err := unmarshalDashboard([]byte(testCase.dashboardJSON))
+			require.Error(t, err)
+			// Message is "<path>: <label> name must be at most N characters, got M".
+			want := testCase.expectedPath + ": " + testCase.expectedLabel + " name " + lengthMsg
+			assert.Equal(t, want, errors.AsJSON(err).Message)
+		})
+	}
+}
+
+// A display name at exactly the limit is accepted.
+func TestValidateDisplayNameAtMaxLength(t *testing.T) {
+	atLimit := strings.Repeat("x", MaxDisplayNameLen)
+	_, err := unmarshalDashboard([]byte(`{"display": {"name": "` + atLimit + `"}, "layouts": []}`))
+	assert.NoError(t, err)
+}

pkg/types/dashboardtypes/perses_replicas.go

@@ -5,6 +5,7 @@ import (
 	"maps"
 	"slices"
 	"strconv"
+	"unicode/utf8"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
@@ -15,11 +16,22 @@ import (
 	"github.com/swaggest/jsonschema-go"
 )
 
+// MaxDisplayNameLen bounds every human-readable display name — dashboard, panel,
+// and variable display names, plus the grid layout title.
+const MaxDisplayNameLen = 128
+
 type Display struct {
 	Name        string `json:"name" required:"true"`
 	Description string `json:"description,omitempty"`
 }
 
+func (d Display) Validate(label, path string) error {
+	if n := utf8.RuneCountInString(d.Name); n > MaxDisplayNameLen {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: %s name must be at most %d characters, got %d", path, label, MaxDisplayNameLen, n)
+	}
+	return nil
+}
+
 // ══════════════════════════════════════════════
 // Datasource
 // ══════════════════════════════════════════════
@@ -188,19 +200,25 @@ func (VariableDefaultValue) PrepareJSONSchema(s *jsonschema.Schema) error {
 }
 
 // validate mirrors perses ListVariableSpec validation (plus the digits-only name
-// check perses only applies to text variables); run by decodeSpec on unmarshal.
-func (s *ListVariableSpec) validate() error {
-	if err := common.ValidateID(s.Name); err != nil {
+// check perses only applies to text variables). path is the JSON path to this
+// variable (e.g. "spec.variables[0]") and prefixes each message. Taking a param
+// keeps it out of decodeSpec's validate() hook, so errors surface from Validate()
+// with clean messages and also run for programmatically built specs (cloning).
+func (s *ListVariableSpec) validate(path string) error {
+	if err := s.Display.Validate("variable", path+".spec.display.name"); err != nil {
 		return err
 	}
+	if err := common.ValidateID(s.Name); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s: %s", path, err.Error())
+	}
 	if _, err := strconv.Atoi(s.Name); err == nil {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "variable name cannot contain only digits")
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: variable name cannot contain only digits", path)
 	}
 	if s.CustomAllValue != "" && !s.AllowAllValue {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "customAllValue cannot be set if allowAllValue is not set to true")
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: customAllValue cannot be set if allowAllValue is not set to true", path)
 	}
 	if s.DefaultValue != nil && len(s.DefaultValue.SliceValues) > 0 && !s.AllowMultiple {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "defaultValue cannot be a list if allowMultiple is not set to true")
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: defaultValue cannot be a list if allowMultiple is not set to true", path)
 	}
 	return nil
 }
@@ -264,16 +282,21 @@ type TextVariableSpec struct {
 	Name     string  `json:"name" required:"true" minLength:"1"`
 }
 
-// validate mirrors perses TextVariableSpec validation; run by decodeSpec on unmarshal.
-func (s *TextVariableSpec) validate() error {
-	if err := common.ValidateID(s.Name); err != nil {
+// validate mirrors perses TextVariableSpec validation. path is the JSON path to
+// this variable (e.g. "spec.variables[0]") and prefixes each message. See
+// ListVariableSpec.validate for why it takes a param.
+func (s *TextVariableSpec) validate(path string) error {
+	if err := s.Display.Validate("variable", path+".spec.display.name"); err != nil {
 		return err
 	}
+	if err := common.ValidateID(s.Name); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s: %s", path, err.Error())
+	}
 	if _, err := strconv.Atoi(s.Name); err == nil {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "variable name cannot contain only digits")
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: variable name cannot contain only digits", path)
 	}
 	if s.Value == "" && s.Constant {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "value for a constant text variable cannot be empty")
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: value for a constant text variable cannot be empty", path)
 	}
 	return nil
 }
@@ -322,6 +345,55 @@ func (l *Layout) UnmarshalJSON(data []byte) error {
 	return nil
 }
 
+const (
+	gridColumnCount       = 12
+	maxItemsPerGridLayout = 100
+)
+
+// validateGridLayoutGeometry checks a single grid layout's item geometry (size,
+// position, and intra-section overlap), which Perses does not. It reads only the
+// layout's own items; layoutIndex is supplied by the caller (validateLayouts)
+// solely to name the layout in error paths.
+func validateGridLayoutGeometry(spec *dashboard.GridLayoutSpec, layoutIndex int) error {
+	if len(spec.Items) > maxItemsPerGridLayout {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items: has %d items; maximum is %d", layoutIndex, len(spec.Items), maxItemsPerGridLayout)
+	}
+	for i, item := range spec.Items {
+		// The width/x bounds keep x+width small enough not to overflow.
+		switch {
+		case item.Width < 1:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: width must be at least 1, got %d", layoutIndex, i, item.Width)
+		case item.Height < 1:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: height must be at least 1, got %d", layoutIndex, i, item.Height)
+		case item.X < 0:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x must not be negative, got %d", layoutIndex, i, item.X)
+		case item.Y < 0:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: y must not be negative, got %d", layoutIndex, i, item.Y)
+		case item.Width > gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: width (%d) exceeds grid width %d", layoutIndex, i, item.Width, gridColumnCount)
+		case item.X >= gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x (%d) must be less than grid width %d", layoutIndex, i, item.X, gridColumnCount)
+		case item.X+item.Width > gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x (%d) + width (%d) exceeds grid width %d", layoutIndex, i, item.X, item.Width, gridColumnCount)
+		}
+		// Could cap y/height but skipping for now: the grid grows vertically
+		// without limit (frontend autoSize), so "too big" has no natural bound.
+	}
+	// Two items overlap iff their rectangles intersect on both axes.
+	overlap := func(a, b dashboard.GridItem) bool {
+		return a.X < b.X+b.Width && b.X < a.X+a.Width &&
+			a.Y < b.Y+b.Height && b.Y < a.Y+a.Height
+	}
+	for i := 0; i < len(spec.Items); i++ {
+		for j := i + 1; j < len(spec.Items); j++ {
+			if overlap(spec.Items[i], spec.Items[j]) {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d] and items[%d] overlap", layoutIndex, i, j)
+			}
+		}
+	}
+	return nil
+}
+
 func (Layout) JSONSchemaOneOf() []any {
 	return []any{
 		LayoutEnvelope[dashboard.GridLayoutSpec]{Kind: string(dashboard.KindGridLayout)},

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

@@ -173,6 +173,152 @@ def test_create_rejects_too_many_tags(
     assert response.json()["error"]["code"] == "dashboard_invalid_input"
 
 
+def test_create_rejects_long_display_name(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    # Display names are bounded at 128 characters; one over must be rejected.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "long-display-name",
+            "spec": {"display": {"name": "x" * 129}},
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert (
+        "spec.display.name: dashboard name must be at most 128 characters"
+        in response.json()["error"]["message"]
+    )
+
+
+def test_create_rejects_invalid_grid_layout(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    def panel(name: str) -> dict:
+        return {
+            "kind": "Panel",
+            "spec": {
+                "display": {"name": name},
+                "plugin": {"kind": "signoz/TablePanel", "spec": {}},
+                "queries": [
+                    {
+                        "kind": "time_series",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "logs",
+                                    "aggregations": [{"expression": "count()"}],
+                                },
+                            }
+                        },
+                    }
+                ],
+            },
+        }
+
+    # Two grid items reference valid, distinct panels but share cells, so the
+    # overlap is the only violation.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-overlap",
+            "spec": {
+                "display": {"name": "Rejects Overlap"},
+                "panels": {"p1": panel("P1"), "p2": panel("P2")},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {
+                            "items": [
+                                {"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                                {"x": 3, "y": 3, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}},
+                            ]
+                        },
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "overlap" in response.json()["error"]["message"]
+
+    # One panel placed by two grid items (side by side, so they clear the overlap
+    # check first). The frontend keys grid items by panel id, so this is rejected.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-multiref",
+            "spec": {
+                "display": {"name": "Rejects Multiref"},
+                "panels": {"p1": panel("P1")},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {
+                            "items": [
+                                {"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                                {"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                            ]
+                        },
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "already placed" in response.json()["error"]["message"]
+
+    # More grid items than allowed. The item-count check runs before the
+    # panel-ref check, so content-less items suffice here.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-too-many-items",
+            "spec": {
+                "display": {"name": "Rejects Too Many"},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {"items": [{"x": 0, "y": 0, "width": 1, "height": 1} for _ in range(101)]},
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "maximum" in response.json()["error"]["message"]
+
+
 @pytest.mark.parametrize(
     "params",
     [
@@ -447,6 +593,28 @@ def test_dashboard_v2_lifecycle(  # pylint: disable=too-many-locals,too-many-sta
         "Epsilon Metrics",
         "Zeta Overview",
     }
+    # top-level tags = org-wide distinct tag set, sorted case-insensitively
+    # by (key, value). Asserting the exact list (not a set) locks in the sort.
+    assert body["data"]["tags"] == [
+        {"key": "env", "value": "dev"},
+        {"key": "env", "value": "prod"},
+        {"key": "env", "value": "staging"},
+        {"key": "team", "value": "metrics"},
+        {"key": "team", "value": "pulse"},
+        {"key": "team", "value": "storage"},
+        {"key": "tier", "value": "critical"},
+    ]
+    # reserved keywords = the filterable column-level DSL keys, sorted
+    # alphabetically. Static (independent of the dashboards), so this is the
+    # full expected set.
+    assert body["data"]["reservedKeywords"] == [
+        "created_at",
+        "created_by",
+        "description",
+        "locked",
+        "name",
+        "updated_at",
+    ]
 
     # ── stage 4: filter DSL ──────────────────────────────────────────────────
     cases = [
@@ -747,7 +915,7 @@ def test_dashboard_v2_lifecycle(  # pylint: disable=too-many-locals,too-many-sta
         "Zeta Overview",
     }
 
-    # ── stage 11: clone keeps the display name but mints a new, retrievable one ─
+    # ── stage 11: clone suffixes the display name and mints a new, retrievable one ─
     response = requests.post(
         signoz.self.host_configs["8080"].get(f"{BASE_URL}/{ids['lc-alpha']}/clone"),
         headers={"Authorization": f"Bearer {token}"},
@@ -757,7 +925,7 @@ def test_dashboard_v2_lifecycle(  # pylint: disable=too-many-locals,too-many-sta
     clone = response.json()["data"]
     assert clone["id"] != ids["lc-alpha"]
     assert clone["name"] != "lc-alpha"  # internal name is regenerated
-    assert clone["spec"]["display"]["name"] == "Alpha Overview"  # display name preserved
+    assert clone["spec"]["display"]["name"] == "Alpha Overview - Copy"  # Copy suffix appended
     assert clone["source"] == "user"
     assert clone["locked"] is False
 

tests/integration/tests/dashboard/04_v2_dashboard_view.py

@@ -82,14 +82,14 @@ def test_create_rejects_name_too_long(
 
     response = requests.post(
         signoz.self.host_configs["8080"].get(BASE_URL),
-        json={"name": "x" * 33, "data": {"version": "v1"}},
+        json={"name": "x" * 65, "data": {"version": "v1"}},
         headers={"Authorization": f"Bearer {token}"},
         timeout=5,
     )
 
     assert response.status_code == HTTPStatus.BAD_REQUEST
     assert response.json()["error"]["code"] == "dashboard_view_invalid_input"
-    assert response.json()["error"]["message"] == "name must be at most 32 characters, got 33"
+    assert response.json()["error"]["message"] == "name must be at most 64 characters, got 65"
 
 
 def test_create_rejects_wrong_schema_version(