feat(dashboard-v2): wire sections into grid layout + container

* feat(auth): validate reset password token on page load before showing form

* fix(auth): distinct error copy for expired vs invalid token; skip 401 rotation on verify endpoint

* fix(auth): use endsWith for orval-generated endpoint guards in interceptorRejected

* Revert "fix(auth): use endsWith for orval-generated endpoint guards in interceptorRejected"

This reverts commit 00aa23b8fc.

.github/CODEOWNERS

@@ -169,3 +169,22 @@ go.mod @therealpandey
 ## Dashboard V2
 /frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
 /frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend
+
+## Infrastructure Monitoring
+/frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend
+/frontend/src/container/InfraMonitoringHosts/ @SigNoz/pulse-frontend
+/frontend/src/container/InfraMonitoringK8s/ @SigNoz/pulse-frontend
+
+## Alerts
+/frontend/src/pages/AlertList/ @SigNoz/pulse-frontend
+/frontend/src/pages/AlertDetails/ @SigNoz/pulse-frontend
+/frontend/src/pages/CreateAlert/ @SigNoz/pulse-frontend
+/frontend/src/pages/EditRules/ @SigNoz/pulse-frontend
+/frontend/src/container/AlertHistory/ @SigNoz/pulse-frontend
+/frontend/src/container/CreateAlertRule/ @SigNoz/pulse-frontend
+/frontend/src/container/CreateAlertV2/ @SigNoz/pulse-frontend
+/frontend/src/container/EditAlertV2/ @SigNoz/pulse-frontend
+/frontend/src/container/FormAlertRules/ @SigNoz/pulse-frontend
+/frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
+/frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
+/frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend

conf/example.yaml

@@ -64,16 +64,16 @@ web:
   settings:
     posthog:
       # Whether to enable PostHog in web.
-      enabled: true
+      enabled: false
     appcues:
       # Whether to enable Appcues in web.
-      enabled: true
+      enabled: false
     sentry:
       # Whether to enable Sentry in web.
-      enabled: true
+      enabled: false
     pylon:
       # Whether to enable Pylon in web.
-      enabled: true
+      enabled: false
 
 ##################### Cache #####################
 cache:

frontend/src/api/index.ts

@@ -120,7 +120,8 @@ export const interceptorRejected = async (
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
 				) &&
-				response.config.url !== '/authz/check'
+				response.config.url !== '/authz/check' &&
+				response.config.url !== '/api/v2/reset_password_tokens/verify'
 			) {
 				try {
 					const accessToken = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN);

frontend/src/assets/Icons/solid-x-circle.svg

@@ -1 +0,0 @@
-<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4062_7291)" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M7 12.833A5.833 5.833 0 107 1.167a5.833 5.833 0 000 11.666z" fill="#E5484D" stroke="#E5484D"/><path d="M8.75 5.25l-3.5 3.5M5.25 5.25l3.5 3.5" stroke="#121317"/></g><defs><clipPath id="prefix__clip0_4062_7291"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -196,7 +196,11 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
+			button = (
+				<Tooltip title={alertValidationMessage}>
+					<span>{button}</span>
+				</Tooltip>
+			);
 		}
 		return button;
 	}, [
@@ -224,7 +228,11 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
+			button = (
+				<Tooltip title={alertValidationMessage}>
+					<span>{button}</span>
+				</Tooltip>
+			);
 		}
 		return button;
 	}, [

frontend/src/container/DashboardContainerV2/DashboardContainerV2.module.scss

@@ -0,0 +1,11 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.body {
+	flex: 1;
+	padding: 12px 24px;
+	overflow: auto;
+}

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/SettingsDrawer.styles.scss

@@ -0,0 +1,43 @@
+.settings-container-root {
+	.ant-drawer-wrapper-body {
+		border-left: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+		.ant-drawer-header {
+			height: 48px;
+			border-bottom: 1px solid var(--l1-border);
+			padding: 14px 14px 14px 11px;
+
+			.ant-drawer-header-title {
+				gap: 16px;
+
+				.ant-drawer-title {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+					padding-left: 16px;
+					border-left: 1px solid var(--l1-border);
+				}
+
+				.ant-drawer-close {
+					height: 16px;
+					width: 16px;
+					margin-inline-end: 0px !important;
+				}
+			}
+		}
+
+		.ant-drawer-body {
+			padding: 16px;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
+		}
+	}
+}

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/index.tsx

@@ -0,0 +1,34 @@
+import { memo, PropsWithChildren, ReactElement } from 'react';
+import { Drawer } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import './SettingsDrawer.styles.scss';
+
+type SettingsDrawerProps = PropsWithChildren<{
+	drawerTitle: string;
+	isOpen: boolean;
+	onClose: () => void;
+}>;
+
+function SettingsDrawer({
+	children,
+	drawerTitle,
+	isOpen,
+	onClose,
+}: SettingsDrawerProps): JSX.Element {
+	return (
+		<Drawer
+			title={drawerTitle}
+			placement="right"
+			width="50%"
+			onClose={onClose}
+			open={isOpen}
+			rootClassName="settings-container-root"
+		>
+			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
+			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
+		</Drawer>
+	);
+}
+
+export default memo(SettingsDrawer);

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/index.tsx

@@ -0,0 +1,395 @@
+import { useEffect, useMemo, useState } from 'react';
+import { FullScreenHandle } from 'react-full-screen';
+import { useTranslation } from 'react-i18next';
+import { useCopyToClipboard } from 'react-use';
+import {
+	Check,
+	ClipboardCopy,
+	Ellipsis,
+	FileJson,
+	Fullscreen,
+	Globe,
+	LockKeyhole,
+	PenLine,
+	Plus,
+	X,
+} from '@signozhq/icons';
+import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
+import { toast } from '@signozhq/ui/sonner';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import {
+	lockDashboardV2,
+	patchDashboardV2,
+	unlockDashboardV2,
+} from 'api/generated/services/dashboard';
+import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
+import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
+import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { isEmpty } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { USER_ROLES } from 'types/roles';
+
+import { Base64Icons } from '../../DashboardContainer/DashboardSettings/General/utils';
+import DashboardSettingsV2 from '../DashboardSettings';
+import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
+import SettingsDrawer from './SettingsDrawer';
+
+import '../../DashboardContainer/DashboardDescription/Description.styles.scss';
+
+import type { V2Dashboard } from '../utils';
+
+interface DashboardDescriptionV2Props {
+	dashboard: V2Dashboard | undefined;
+	handle: FullScreenHandle;
+	onRefetch: () => void;
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function DashboardDescriptionV2(props: DashboardDescriptionV2Props): JSX.Element {
+	const { dashboard, handle, onRefetch } = props;
+
+	const id = dashboard?.id ?? '';
+	const isDashboardLocked = !!dashboard?.locked;
+
+	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
+		useState<boolean>(false);
+
+	const title = dashboard?.spec?.display?.name ?? '';
+	const description = dashboard?.spec?.display?.description ?? '';
+	const image = dashboard?.image || Base64Icons[0];
+	const tags = useMemo(
+		() =>
+			(dashboard?.tags ?? []).map((t) =>
+				t.key === t.value ? t.key : `${t.key}:${t.value}`,
+			),
+		[dashboard?.tags],
+	);
+
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+
+	const { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
+	const [isDashboardSettingsOpen, setIsDashbordSettingsOpen] =
+		useState<boolean>(false);
+	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
+		useState<boolean>(false);
+
+	const isAuthor =
+		!!user?.email && !!dashboard?.createdBy && dashboard.createdBy === user.email;
+	const addPanelPermission = !isDashboardLocked;
+	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
+	const isPublicDashboard = false;
+
+	const { showErrorModal } = useErrorModal();
+	const { t } = useTranslation(['dashboard', 'common']);
+
+	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
+
+	useEffect(() => {
+		if (dashboard) {setUpdatedTitle(title);}
+	}, [dashboard, title]);
+
+	const handleLockDashboardToggle = async (): Promise<void> => {
+		if (!id) {return;}
+		setIsDashbordSettingsOpen(false);
+		try {
+			if (isDashboardLocked) {
+				await unlockDashboardV2({ id });
+				toast.success('Dashboard unlocked');
+			} else {
+				await lockDashboardV2({ id });
+				toast.success('Dashboard locked');
+			}
+			onRefetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		}
+	};
+
+	const onNameChangeHandler = async (): Promise<void> => {
+		const trimmed = updatedTitle.trim();
+		if (!id || !trimmed || trimmed === title) {
+			setIsRenameDashboardOpen(false);
+			return;
+		}
+		try {
+			setIsRenameLoading(true);
+			const patch: DashboardtypesJSONPatchOperationDTO[] = [
+				{
+					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+					path: '/spec/display/name',
+					value: trimmed,
+				},
+			];
+			await patchDashboardV2({ id }, patch);
+			toast.success('Dashboard renamed successfully');
+			setIsRenameDashboardOpen(false);
+			onRefetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setIsRenameDashboardOpen(true);
+		} finally {
+			setIsRenameLoading(false);
+		}
+	};
+
+	const onEmptyWidgetHandler = (): void => {
+		logEvent('Dashboard Detail V2: Add new panel clicked', {
+			dashboardId: id,
+		});
+		toast.info('V2 panel editor coming next');
+	};
+
+	const [state, setCopy] = useCopyToClipboard();
+
+	useEffect(() => {
+		if (state.error) {
+			toast.error(t('something_went_wrong', { ns: 'common' }));
+		}
+		if (state.value) {
+			toast.success(t('success', { ns: 'common' }));
+		}
+	}, [state.error, state.value, t]);
+
+	const dashboardDataJSON = (): string =>
+		JSON.stringify(dashboard ?? {}, null, 2);
+
+	const exportJSON = (): void => {
+		const blob = new Blob([dashboardDataJSON()], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = `${title || 'dashboard'}.json`;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+	};
+
+	const onConfigureClick = (): void => {
+		setIsSettingsDrawerOpen(true);
+	};
+
+	const onSettingsDrawerClose = (): void => {
+		setIsSettingsDrawerOpen(false);
+	};
+
+	return (
+		<Card className="dashboard-description-container">
+			<DashboardHeader title={title} image={image} />
+			<section className="dashboard-details">
+				<div className="left-section">
+					<img src={image} alt="dashboard-img" className="dashboard-img" />
+					<Tooltip title={title.length > 30 ? title : ''}>
+						<Typography.Text
+							className="dashboard-title"
+							data-testid="dashboard-title"
+						>
+							{title}
+						</Typography.Text>
+					</Tooltip>
+
+					{isPublicDashboard && (
+						<Tooltip title="This dashboard is publicly accessible">
+							<Globe size={14} className="public-dashboard-icon" />
+						</Tooltip>
+					)}
+
+					{isDashboardLocked && (
+						<Tooltip title="This dashboard is locked">
+							<LockKeyhole size={14} className="lock-dashboard-icon" />
+						</Tooltip>
+					)}
+				</div>
+				<div className="right-section">
+					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+					<Popover
+						open={isDashboardSettingsOpen}
+						arrow={false}
+						onOpenChange={(visible): void => setIsDashbordSettingsOpen(visible)}
+						rootClassName="dashboard-settings"
+						content={
+							<div className="menu-content">
+								<section className="section-1">
+									{(isAuthor || user.role === USER_ROLES.ADMIN) && (
+										<Tooltip
+											title={
+												dashboard?.createdBy === 'integration' &&
+												'Dashboards created by integrations cannot be unlocked'
+											}
+										>
+											<Button
+												type="text"
+												icon={<LockKeyhole size={14} />}
+												disabled={dashboard?.createdBy === 'integration'}
+												onClick={handleLockDashboardToggle}
+												data-testid="lock-unlock-dashboard"
+											>
+												{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
+											</Button>
+										</Tooltip>
+									)}
+
+									{!isDashboardLocked && editDashboard && (
+										<Button
+											type="text"
+											icon={<PenLine size={14} />}
+											onClick={(): void => {
+												setIsRenameDashboardOpen(true);
+												setIsDashbordSettingsOpen(false);
+											}}
+										>
+											Rename
+										</Button>
+									)}
+
+									<Button
+										type="text"
+										icon={<Fullscreen size={14} />}
+										onClick={handle.enter}
+									>
+										Full screen
+									</Button>
+								</section>
+								<section className="section-2">
+									<Button
+										type="text"
+										icon={<FileJson size={14} />}
+										onClick={(): void => {
+											exportJSON();
+											setIsDashbordSettingsOpen(false);
+										}}
+									>
+										Export JSON
+									</Button>
+									<Button
+										type="text"
+										icon={<ClipboardCopy size={14} />}
+										onClick={(): void => {
+											setCopy(dashboardDataJSON());
+											setIsDashbordSettingsOpen(false);
+										}}
+									>
+										Copy as JSON
+									</Button>
+								</section>
+								<section className="delete-dashboard">
+									<DeleteButton
+										createdBy={dashboard?.createdBy || ''}
+										name={title}
+										id={id}
+										isLocked={isDashboardLocked}
+										routeToListPage
+									/>
+								</section>
+							</div>
+						}
+						trigger="click"
+						placement="bottomRight"
+					>
+						<Button
+							icon={<Ellipsis size={14} />}
+							type="text"
+							className="icons"
+							data-testid="options"
+						/>
+					</Popover>
+					{!isDashboardLocked && editDashboard && (
+						<>
+							<Button
+								type="text"
+								className="configure-button"
+								icon={<ConfigureIcon />}
+								data-testid="show-drawer"
+								onClick={onConfigureClick}
+							>
+								Configure
+							</Button>
+							<SettingsDrawer
+								drawerTitle="Dashboard Configuration"
+								isOpen={isSettingsDrawerOpen}
+								onClose={onSettingsDrawerClose}
+							>
+								<DashboardSettingsV2
+									dashboard={dashboard}
+									onRefetch={onRefetch}
+								/>
+							</SettingsDrawer>
+						</>
+					)}
+					{!isDashboardLocked && addPanelPermission && (
+						<Button
+							className="add-panel-btn"
+							onClick={onEmptyWidgetHandler}
+							icon={<Plus size="md" />}
+							type="primary"
+							data-testid="add-panel-header"
+						>
+							New Panel
+						</Button>
+					)}
+				</div>
+			</section>
+			{tags.length > 0 && (
+				<div className="dashboard-tags">
+					{tags.map((tag) => (
+						<Tag key={tag} className="tag">
+							{tag}
+						</Tag>
+					))}
+				</div>
+			)}
+			{!isEmpty(description) && (
+				<section className="dashboard-description-section">{description}</section>
+			)}
+
+			<Modal
+				open={isRenameDashboardOpen}
+				title="Rename Dashboard"
+				onOk={onNameChangeHandler}
+				onCancel={(): void => {
+					setIsRenameDashboardOpen(false);
+				}}
+				rootClassName="rename-dashboard"
+				footer={
+					<div className="dashboard-rename">
+						<Button
+							type="primary"
+							icon={<Check size={14} />}
+							className="rename-btn"
+							onClick={onNameChangeHandler}
+							disabled={isRenameLoading}
+						>
+							Rename Dashboard
+						</Button>
+						<Button
+							type="text"
+							icon={<X size={14} />}
+							className="cancel-btn"
+							onClick={(): void => setIsRenameDashboardOpen(false)}
+						>
+							Cancel
+						</Button>
+					</div>
+				}
+			>
+				<div className="dashboard-content">
+					<Typography.Text className="name-text">Enter a new name</Typography.Text>
+					<Input
+						data-testid="dashboard-name"
+						className="dashboard-name-input"
+						value={updatedTitle}
+						onChange={(e): void => setUpdatedTitle(e.target.value)}
+					/>
+				</div>
+			</Modal>
+		</Card>
+	);
+}
+
+export default DashboardDescriptionV2;

frontend/src/container/DashboardContainerV2/DashboardSettings/General/GeneralSettings.module.scss

@@ -0,0 +1,227 @@
+.overviewContent {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.overviewSettings {
+	border-radius: 3px;
+	border: 1px solid var(--l1-border);
+	padding: 16px !important;
+}
+
+.crossPanelSyncGroup {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.crossPanelSyncSectionTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.crossPanelSyncSectionHeader {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	align-self: flex-start;
+}
+
+.crossPanelSyncInfoIcon {
+	cursor: help;
+	color: var(--l3-foreground);
+}
+
+.crossPanelSyncTooltipContent {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	max-width: 300px;
+}
+
+.crossPanelSyncTooltipTitle {
+	font-size: 14px;
+}
+
+.crossPanelSyncTooltipDescription {
+	font-size: 12px;
+	line-height: 1.5;
+}
+
+.crossPanelSyncTooltipDocLink {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--primary-background);
+	font-size: 12px;
+	margin-top: 4px;
+}
+
+.crossPanelSyncRow {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 16px;
+
+	& + & {
+		padding-top: 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+.crossPanelSyncInfo {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.crossPanelSyncTitle {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.crossPanelSyncDescription {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.nameIconInput {
+	display: flex;
+}
+
+.dashboardImageInput {
+	:global(.ant-select-selector) {
+		display: flex;
+		width: 32px;
+		height: 32px;
+		padding: 6px;
+		justify-content: center;
+		align-items: center;
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l3-background) !important;
+
+		:global(.ant-select-selection-item) {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&:global(.ant-select-dropdown) {
+		padding: 0px !important;
+	}
+
+	:global(.ant-select-item) {
+		padding: 0px;
+		align-items: center;
+		justify-content: center;
+
+		:global(.ant-select-item-option-content) {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}
+
+.listItemImage {
+	height: 16px;
+	width: 16px;
+}
+
+.dashboardNameInput {
+	border-radius: 0px 2px 2px 0px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.dashboardName {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+	margin-bottom: 0.5rem;
+}
+
+.descriptionTextArea {
+	padding: 6px 6px 6px 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.overviewSettingsFooter {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: -webkit-fill-available;
+	padding: 12px 16px 12px 0px;
+	position: fixed;
+	bottom: 0;
+	height: 32px;
+	border-top: 1px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.unsaved {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.unsavedDot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50px;
+	background: var(--primary-background);
+	box-shadow: 0px 0px 6px 0px
+		color-mix(in srgb, var(--primary-background) 40%, transparent);
+}
+
+.unsavedChanges {
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: -0.07px;
+}
+
+.footerActionBtns {
+	display: flex;
+	gap: 8px;
+}
+
+.discardBtn {
+	margin: '16px 0';
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}
+
+.saveBtn {
+	margin: 0px !important;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}

frontend/src/container/DashboardContainerV2/DashboardSettings/General/index.tsx

@@ -0,0 +1,363 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
+import { Col, Input, Radio, Select, Space, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
+import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
+import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
+import {
+	DashboardCursorSync,
+	SyncTooltipFilterMode,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { isEqual } from 'lodash-es';
+import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type {
+	DashboardtypesJSONPatchOperationDTO,
+	TagtypesPostableTagDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { toast } from '@signozhq/ui/sonner';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import styles from './GeneralSettings.module.scss';
+import { Button } from './styles';
+import { Base64Icons } from './utils';
+import logEvent from 'api/common/logEvent';
+import { Events } from 'constants/events';
+import { getAbsoluteUrl } from 'utils/basePath';
+
+import type { V2Dashboard } from '../../utils';
+
+const { Option } = Select;
+
+interface Props {
+	dashboard: V2Dashboard | undefined;
+	onRefetch: () => void;
+}
+
+// Convert V2 tags ({key, value}[]) into "key:value" strings for the V1
+// AddTags component (which expects string[]), and back on save.
+//
+// V2 tags require both `key` and `value` to be non-empty server-side
+// (returns `tag_invalid_value` otherwise). To preserve the V1 single-word
+// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
+// collapsed back to just `x` for display.
+function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
+	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
+}
+
+function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
+	return tagStrings
+		.map((s) => {
+			const trimmed = s.trim();
+			const idx = trimmed.indexOf(':');
+			if (idx === -1) {
+				return { key: trimmed, value: trimmed };
+			}
+			const key = trimmed.slice(0, idx).trim();
+			const value = trimmed.slice(idx + 1).trim();
+			return { key, value: value || key };
+		})
+		.filter((t) => t.key.length > 0);
+}
+
+function GeneralDashboardSettingsV2({
+	dashboard,
+	onRefetch,
+}: Props): JSX.Element {
+	const id = dashboard?.id ?? '';
+
+	const [cursorSyncMode, setCursorSyncMode] = useDashboardCursorSyncMode(id);
+	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
+		useSyncTooltipFilterMode(id);
+
+	const title = dashboard?.spec?.display?.name ?? '';
+	const description = dashboard?.spec?.display?.description ?? '';
+	const image = dashboard?.image || Base64Icons[0];
+	const tagsAsStrings = useMemo(
+		() => tagsToStrings(dashboard?.tags ?? []),
+		[dashboard?.tags],
+	);
+
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
+	const [updatedDescription, setUpdatedDescription] =
+		useState<string>(description);
+	const [updatedImage, setUpdatedImage] = useState<string>(image);
+	const [isSaving, setIsSaving] = useState<boolean>(false);
+	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
+		useState<number>(0);
+
+	const { t } = useTranslation('common');
+	const { showErrorModal } = useErrorModal();
+
+	// Sync state when dashboard refetches after a save
+	useEffect(() => {
+		setUpdatedTitle(title);
+		setUpdatedDescription(description);
+		setUpdatedImage(image);
+		setUpdatedTags(tagsAsStrings);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboard?.updatedAt]);
+
+	const buildPatch = (): DashboardtypesJSONPatchOperationDTO[] => {
+		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+		const replace = (
+			path: string,
+			value: unknown,
+		): DashboardtypesJSONPatchOperationDTO => ({
+			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+			path,
+			value,
+		});
+
+		if (updatedTitle !== title) {
+			ops.push(replace('/spec/display/name', updatedTitle));
+		}
+		if (updatedDescription !== description) {
+			ops.push(replace('/spec/display/description', updatedDescription));
+		}
+		if (updatedImage !== image) {
+			ops.push(replace('/image', updatedImage));
+		}
+		if (!isEqual(updatedTags, tagsAsStrings)) {
+			ops.push(replace('/tags', stringsToTags(updatedTags)));
+		}
+		return ops;
+	};
+
+	const onSaveHandler = async (): Promise<void> => {
+		if (!id) {
+			return;
+		}
+		const ops = buildPatch();
+		if (ops.length === 0) {
+			return;
+		}
+
+		try {
+			setIsSaving(true);
+			await patchDashboardV2({ id }, ops);
+			toast.success('Dashboard updated');
+			onRefetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	useEffect(() => {
+		let n = 0;
+		const initialValues = [title, description, tagsAsStrings, image];
+		const updatedValues = [
+			updatedTitle,
+			updatedDescription,
+			updatedTags,
+			updatedImage,
+		];
+		initialValues.forEach((val, index) => {
+			if (!isEqual(val, updatedValues[index])) {
+				n += 1;
+			}
+		});
+		setNumberOfUnsavedChanges(n);
+	}, [
+		description,
+		image,
+		tagsAsStrings,
+		title,
+		updatedDescription,
+		updatedImage,
+		updatedTags,
+		updatedTitle,
+	]);
+
+	const discardHandler = (): void => {
+		setUpdatedTitle(title);
+		setUpdatedImage(image);
+		setUpdatedTags(tagsAsStrings);
+		setUpdatedDescription(description);
+	};
+
+	return (
+		<div className={styles.overviewContent}>
+			<Col className={styles.overviewSettings}>
+				<Space
+					direction="vertical"
+					style={{
+						width: '100%',
+						display: 'flex',
+						flexDirection: 'column',
+						gap: '21px',
+					}}
+				>
+					<div>
+						<Typography className={styles.dashboardName}>Dashboard Name</Typography>
+						<section className={styles.nameIconInput}>
+							<Select
+								defaultActiveFirstOption
+								data-testid="dashboard-image"
+								suffixIcon={null}
+								rootClassName={styles.dashboardImageInput}
+								value={updatedImage}
+								onChange={(value: string): void => setUpdatedImage(value)}
+							>
+								{Base64Icons.map((icon) => (
+									<Option value={icon} key={icon}>
+										<img
+											src={icon}
+											alt="dashboard-icon"
+											className={styles.listItemImage}
+										/>
+									</Option>
+								))}
+							</Select>
+							<Input
+								data-testid="dashboard-name"
+								className={styles.dashboardNameInput}
+								value={updatedTitle}
+								onChange={(e): void => setUpdatedTitle(e.target.value)}
+							/>
+						</section>
+					</div>
+
+					<div>
+						<Typography className={styles.dashboardName}>Description</Typography>
+						<Input.TextArea
+							data-testid="dashboard-desc"
+							rows={6}
+							value={updatedDescription}
+							className={styles.descriptionTextArea}
+							onChange={(e): void => setUpdatedDescription(e.target.value)}
+						/>
+					</div>
+					<div>
+						<Typography className={styles.dashboardName}>Tags</Typography>
+						<AddTags tags={updatedTags} setTags={setUpdatedTags} />
+					</div>
+				</Space>
+			</Col>
+			<Col className={`${styles.overviewSettings} ${styles.crossPanelSyncGroup}`}>
+				<div className={styles.crossPanelSyncSectionHeader}>
+					<Typography.Text className={styles.crossPanelSyncSectionTitle}>
+						Cross-Panel Sync
+					</Typography.Text>
+					<Tooltip
+						title={
+							<div className={styles.crossPanelSyncTooltipContent}>
+								<strong className={styles.crossPanelSyncTooltipTitle}>
+									Cross-Panel Sync
+								</strong>
+								<span className={styles.crossPanelSyncTooltipDescription}>
+									Sync crosshair and tooltip across all the dashboard panels
+								</span>
+								<a
+									href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
+									target="_blank"
+									rel="noopener noreferrer"
+									className={styles.crossPanelSyncTooltipDocLink}
+								>
+									Learn more
+									<ExternalLink size={12} />
+								</a>
+							</div>
+						}
+						placement="top"
+						mouseEnterDelay={0.5}
+					>
+						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
+					</Tooltip>
+				</div>
+				<div className={styles.crossPanelSyncRow}>
+					<div className={styles.crossPanelSyncInfo}>
+						<Typography.Text className={styles.crossPanelSyncTitle}>
+							Sync Mode
+						</Typography.Text>
+						<Typography.Text className={styles.crossPanelSyncDescription}>
+							Sync crosshair and tooltip across all the dashboard panels
+						</Typography.Text>
+					</div>
+					<Radio.Group
+						value={cursorSyncMode}
+						onChange={(e): void => {
+							setCursorSyncMode(e.target.value as DashboardCursorSync);
+						}}
+					>
+						<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
+						<Radio.Button value={DashboardCursorSync.Crosshair}>
+							Crosshair
+						</Radio.Button>
+						<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
+					</Radio.Group>
+				</div>
+				{cursorSyncMode === DashboardCursorSync.Tooltip && (
+					<div className={styles.crossPanelSyncRow}>
+						<div className={styles.crossPanelSyncInfo}>
+							<Typography.Text className={styles.crossPanelSyncTitle}>
+								Synced Tooltip Series
+							</Typography.Text>
+							<Typography.Text className={styles.crossPanelSyncDescription}>
+								Show only series that intersect on group-by, or every series with the
+								matching ones highlighted
+							</Typography.Text>
+						</div>
+						<Radio.Group
+							value={syncTooltipFilterMode}
+							onChange={(e): void => {
+								logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
+									path: getAbsoluteUrl(window.location.pathname),
+									mode: e.target.value,
+								});
+								setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
+							}}
+						>
+							<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
+							<Radio.Button value={SyncTooltipFilterMode.Filtered}>
+								Filtered
+							</Radio.Button>
+						</Radio.Group>
+					</div>
+				)}
+			</Col>
+			{numberOfUnsavedChanges > 0 && (
+				<div className={styles.overviewSettingsFooter}>
+					<div className={styles.unsaved}>
+						<div className={styles.unsavedDot} />
+						<Typography.Text className={styles.unsavedChanges}>
+							{numberOfUnsavedChanges} unsaved change
+							{numberOfUnsavedChanges > 1 && 's'}
+						</Typography.Text>
+					</div>
+					<div className={styles.footerActionBtns}>
+						<Button
+							disabled={isSaving}
+							icon={<X size={14} />}
+							onClick={discardHandler}
+							type="text"
+							className={styles.discardBtn}
+						>
+							Discard
+						</Button>
+						<Button
+							style={{ margin: '16px 0' }}
+							disabled={isSaving}
+							loading={isSaving}
+							icon={<Check size={14} />}
+							data-testid="save-dashboard-config"
+							onClick={onSaveHandler}
+							type="primary"
+							className={styles.saveBtn}
+						>
+							{t('save')}
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default GeneralDashboardSettingsV2;

frontend/src/container/DashboardContainerV2/DashboardSettings/General/styles.ts

@@ -0,0 +1,20 @@
+import { Button as ButtonComponent, Drawer } from 'antd';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	margin-top: 0.5rem;
+`;
+
+export const Button = styled(ButtonComponent)`
+	&&& {
+		display: flex;
+		align-items: center;
+	}
+`;
+
+export const DrawerContainer = styled(Drawer)`
+	.ant-drawer-header {
+		padding: 0;
+		border: none;
+	}
+`;

frontend/src/container/DashboardContainerV2/DashboardSettings/index.tsx

@@ -0,0 +1,67 @@
+import { Button, Empty, Tabs } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Braces, Globe, Table } from '@signozhq/icons';
+
+import '../../DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss';
+
+import GeneralDashboardSettingsV2 from './General';
+import type { V2Dashboard } from '../utils';
+
+interface Props {
+	dashboard: V2Dashboard | undefined;
+	onRefetch: () => void;
+}
+
+function Placeholder({ message }: { message: string }): JSX.Element {
+	return (
+		<div style={{ padding: 24 }}>
+			<Empty
+				image={Empty.PRESENTED_IMAGE_SIMPLE}
+				description={<Typography.Text>{message}</Typography.Text>}
+			/>
+		</div>
+	);
+}
+
+function DashboardSettingsV2({ dashboard, onRefetch }: Props): JSX.Element {
+	const items = [
+		{
+			label: (
+				<Button type="text" icon={<Table size={14} />}>
+					General
+				</Button>
+			),
+			key: 'general',
+			children: (
+				<GeneralDashboardSettingsV2
+					dashboard={dashboard}
+					onRefetch={onRefetch}
+				/>
+			),
+		},
+		{
+			label: (
+				<Button type="text" icon={<Braces size={14} />}>
+					Variables
+				</Button>
+			),
+			key: 'variables',
+			children: <Placeholder message="V2 dashboard variables coming next." />,
+		},
+		{
+			label: (
+				<Button type="text" icon={<Globe size={14} />}>
+					Publish
+				</Button>
+			),
+			key: 'public-dashboard',
+			children: (
+				<Placeholder message="V2 public dashboard publishing coming next." />
+			),
+		},
+	];
+
+	return <Tabs items={items} />;
+}
+
+export default DashboardSettingsV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/GridCardLayoutV2.module.scss

@@ -0,0 +1,4 @@
+.emptyState {
+	padding: 48px;
+	text-align: center;
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelActionsMenu/PanelActionsMenu.module.scss

@@ -0,0 +1,16 @@
+.trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	background: transparent;
+	border: none;
+	border-radius: 2px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
+	}
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -0,0 +1,95 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import type { DashboardSectionV2 } from '../../../utils';
+import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
+import type { DeletePanelArgs } from '../hooks/useDeletePanel';
+import styles from './PanelActionsMenu.module.scss';
+
+interface Props {
+	panelId: string;
+	currentLayoutIndex: number;
+	sections: DashboardSectionV2[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+}
+
+function PanelActionsMenu({
+	panelId,
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
+	const items = useMemo<MenuItem[]>(() => {
+		const result: MenuItem[] = [];
+
+		if (onMovePanel) {
+			const targets = sections.filter(
+				(s) => s.title && s.layoutIndex !== currentLayoutIndex,
+			);
+			if (targets.length === 0) {
+				result.push({
+					key: 'move',
+					label: 'Move to section',
+					icon: <FolderInput size={14} />,
+					disabled: true,
+				});
+			} else {
+				result.push({
+					key: 'move',
+					label: 'Move to section',
+					icon: <FolderInput size={14} />,
+					children: targets.map((s) => ({
+						key: `move-${s.layoutIndex}`,
+						label: s.title,
+						onClick: (): void =>
+							onMovePanel({
+								panelId,
+								fromLayoutIndex: currentLayoutIndex,
+								toLayoutIndex: s.layoutIndex,
+							}),
+					})),
+				});
+			}
+		}
+
+		if (onDeletePanel) {
+			if (result.length > 0) {
+				result.push({ type: 'divider' });
+			}
+			result.push({
+				key: 'delete-panel',
+				danger: true,
+				icon: <Trash2 size={14} />,
+				label: 'Delete panel',
+				onClick: (): void =>
+					onDeletePanel({ panelId, layoutIndex: currentLayoutIndex }),
+			});
+		}
+
+		return result;
+	}, [sections, currentLayoutIndex, panelId, onMovePanel, onDeletePanel]);
+
+	return (
+		<DropdownMenuSimple menu={{ items }}>
+			<button
+				type="button"
+				className={styles.trigger}
+				aria-label="Panel actions"
+				data-testid={`panel-actions-${panelId}`}
+				// Stop pointer/mouse down from reaching the RGL drag handle this
+				// button lives inside, so opening the menu never starts a panel drag.
+				onPointerDown={(e): void => e.stopPropagation()}
+				onMouseDown={(e): void => e.stopPropagation()}
+				onClick={(e): void => e.stopPropagation()}
+			>
+				<EllipsisVertical size={14} />
+			</button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default PanelActionsMenu;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelTypeSelectionModalV2/PanelTypeSelectionModalV2.module.scss

@@ -0,0 +1,22 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 8px;
+}
+
+.typeButton {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px;
+	background: var(--bg-ink-400, #0b0c0e);
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	border-radius: 4px;
+	color: var(--bg-vanilla-100, #fff);
+	cursor: pointer;
+	text-align: left;
+
+	&:hover {
+		border-color: var(--bg-robin-500);
+	}
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelTypeSelectionModalV2/PanelTypeSelectionModalV2.tsx

@@ -0,0 +1,82 @@
+import { Modal } from 'antd';
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
+
+import styles from './PanelTypeSelectionModalV2.module.scss';
+
+interface PanelType {
+	pluginKind: string;
+	label: string;
+	icon: JSX.Element;
+}
+
+const PANEL_TYPES: PanelType[] = [
+	{
+		pluginKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		icon: <ChartLine size={16} />,
+	},
+	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
+	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
+	{
+		pluginKind: 'signoz/BarChartPanel',
+		label: 'Bar Chart',
+		icon: <BarChart size={16} />,
+	},
+	{
+		pluginKind: 'signoz/PieChartPanel',
+		label: 'Pie Chart',
+		icon: <ChartPie size={16} />,
+	},
+	{
+		pluginKind: 'signoz/HistogramPanel',
+		label: 'Histogram',
+		icon: <BarChart size={16} />,
+	},
+	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
+];
+
+interface Props {
+	open: boolean;
+	onClose: () => void;
+	onSelect: (pluginKind: string) => void;
+}
+
+function PanelTypeSelectionModalV2({
+	open,
+	onClose,
+	onSelect,
+}: Props): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Select a panel type"
+			onCancel={onClose}
+			footer={null}
+			destroyOnClose
+		>
+			<div className={styles.grid}>
+				{PANEL_TYPES.map((type) => (
+					<button
+						key={type.pluginKind}
+						type="button"
+						className={styles.typeButton}
+						data-testid={`panel-type-${type.pluginKind}`}
+						onClick={(): void => onSelect(type.pluginKind)}
+					>
+						{type.icon}
+						{type.label}
+					</button>
+				))}
+			</div>
+		</Modal>
+	);
+}
+
+export default PanelTypeSelectionModalV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelV2/PanelV2.module.scss

@@ -0,0 +1,52 @@
+.panel {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	background: var(--bg-ink-400, #0b0c0e);
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--bg-slate-400, #1d212d);
+	cursor: grab;
+}
+
+.headerLeft {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+
+.headerTitle {
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.badge {
+	margin-inline-end: 0;
+}
+
+.body {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 12px;
+	color: var(--bg-vanilla-400, #8993ae);
+	font-size: 12px;
+	text-align: center;
+}
+
+.bodyKind {
+	margin-bottom: 6px;
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelV2/PanelV2.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react';
+import { Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import { EllipsisVertical } from '@signozhq/icons';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSectionV2 } from '../../../utils';
+import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
+import type { DeletePanelArgs } from '../hooks/useDeletePanel';
+import PanelActionsMenu from '../PanelActionsMenu/PanelActionsMenu';
+import styles from './PanelV2.module.scss';
+
+interface Props {
+	panel: DashboardtypesPanelDTO | undefined;
+	panelId: string;
+	/**
+	 * Placeholder: true once this panel's section enters the viewport. The panel
+	 * query-loading implementation (later PR) will consume this to lazily fetch
+	 * data. Currently unused on purpose.
+	 */
+	isVisible?: boolean;
+	/** Section actions — present only in editable sectioned mode. */
+	currentLayoutIndex?: number;
+	sections?: DashboardSectionV2[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+}
+
+function PanelV2({
+	panel,
+	panelId,
+	isVisible,
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
+	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
+	const description = panel?.spec?.display?.description;
+	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
+	const queryCount = panel?.spec?.queries?.length ?? 0;
+
+	const headerTitle = useMemo(() => {
+		if (!description) {
+			return name;
+		}
+		return (
+			<Tooltip title={description}>
+				<span>{name}</span>
+			</Tooltip>
+		);
+	}, [name, description]);
+
+	return (
+		<div
+			className={styles.panel}
+			data-panel-visible={isVisible ? 'true' : 'false'}
+		>
+			<div className={`${styles.header} panel-drag-handle`}>
+				<div className={styles.headerLeft}>
+					<Typography.Text className={styles.headerTitle}>
+						{headerTitle}
+					</Typography.Text>
+					<Badge className={styles.badge}>{kind}</Badge>
+				</div>
+				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
+					<PanelActionsMenu
+						panelId={panelId}
+						currentLayoutIndex={currentLayoutIndex}
+						sections={sections ?? []}
+						onMovePanel={onMovePanel}
+						onDeletePanel={onDeletePanel}
+					/>
+				) : (
+					<EllipsisVertical size={14} />
+				)}
+			</div>
+
+			<div className={styles.body}>
+				<div>
+					<div className={styles.bodyKind}>{kind} panel</div>
+					<div>
+						{queryCount} {queryCount === 1 ? 'query' : 'queries'} · chart rendering
+						coming next
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default PanelV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/hooks/useAddPanelToSection.ts

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+import { v4 as uuid } from 'uuid';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import {
+	addPanelToSectionOps,
+	createDefaultPanel,
+	panelRef,
+} from '../../../patchOps';
+import type { DashboardSectionV2 } from '../../../utils';
+
+interface Params {
+	sections: DashboardSectionV2[];
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+export interface AddPanelArgs {
+	layoutIndex: number;
+	pluginKind: string;
+}
+
+/**
+ * Creates a new panel and places its item ref at the bottom of the target
+ * section, as one atomic patch. Structure-only: the panel is a valid minimal
+ * placeholder (its query is filled in once the panel editor lands).
+ */
+export function useAddPanelToSection({
+	sections,
+	dashboardId,
+	onRefetch,
+}: Params): (args: AddPanelArgs) => Promise<void> {
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const target = sections.find((s) => s.layoutIndex === layoutIndex);
+			if (!target) {
+				return;
+			}
+
+			const panelId = uuid();
+			const nextY = target.items.reduce(
+				(max, i) => Math.max(max, i.y + i.height),
+				0,
+			);
+
+			try {
+				await patchDashboardV2(
+					{ id: dashboardId },
+					addPanelToSectionOps({
+						panelId,
+						panel: createDefaultPanel(pluginKind),
+						layoutIndex,
+						item: {
+							x: 0,
+							y: nextY,
+							width: 6,
+							height: 6,
+							content: { $ref: panelRef(panelId) },
+						},
+					}),
+				);
+				onRefetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, onRefetch, showErrorModal],
+	);
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/hooks/useDeletePanel.ts

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { removePanelOp, replaceSectionItemsOp } from '../../../patchOps';
+import type { DashboardSectionV2 } from '../../../utils';
+
+interface Params {
+	sections: DashboardSectionV2[];
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+export interface DeletePanelArgs {
+	panelId: string;
+	layoutIndex: number;
+}
+
+/**
+ * Removes a panel: drops its item ref from the section's items and deletes the
+ * panel from `spec.panels`, as one atomic patch.
+ */
+export function useDeletePanel({
+	sections,
+	dashboardId,
+	onRefetch,
+}: Params): (args: DeletePanelArgs) => Promise<void> {
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({ panelId, layoutIndex }: DeletePanelArgs): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const section = sections.find((s) => s.layoutIndex === layoutIndex);
+			if (!section) {
+				return;
+			}
+
+			const nextItems = section.items.filter((i) => i.id !== panelId);
+			try {
+				await patchDashboardV2({ id: dashboardId }, [
+					replaceSectionItemsOp(layoutIndex, nextItems),
+					removePanelOp(panelId),
+				]);
+				onRefetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, onRefetch, showErrorModal],
+	);
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/hooks/useMovePanelToSection.ts

@@ -0,0 +1,80 @@
+import { useCallback } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { movePanelBetweenSectionsOps } from '../../../patchOps';
+import type { DashboardSectionV2 } from '../../../utils';
+
+export interface MovePanelArgs {
+	panelId: string;
+	fromLayoutIndex: number;
+	toLayoutIndex: number;
+}
+
+interface Params {
+	sections: DashboardSectionV2[];
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+/**
+ * Relocates a panel's item ref from one section to another. The panel itself
+ * stays in `spec.panels`; only the grid item moves, dropped into a free row at
+ * the bottom of the target section. Persisted as one atomic patch.
+ */
+export function useMovePanelToSection({
+	sections,
+	dashboardId,
+	onRefetch,
+}: Params): (args: MovePanelArgs) => Promise<void> {
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({
+			panelId,
+			fromLayoutIndex,
+			toLayoutIndex,
+		}: MovePanelArgs): Promise<void> => {
+			if (!dashboardId || fromLayoutIndex === toLayoutIndex) {
+				return;
+			}
+
+			const source = sections.find((s) => s.layoutIndex === fromLayoutIndex);
+			const target = sections.find((s) => s.layoutIndex === toLayoutIndex);
+			if (!source || !target) {
+				return;
+			}
+
+			const moved = source.items.find((i) => i.id === panelId);
+			if (!moved) {
+				return;
+			}
+
+			const sourceItems = source.items.filter((i) => i.id !== panelId);
+			// Place at a fresh row at the bottom of the target section.
+			const nextY = target.items.reduce(
+				(max, i) => Math.max(max, i.y + i.height),
+				0,
+			);
+			const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
+
+			try {
+				await patchDashboardV2(
+					{ id: dashboardId },
+					movePanelBetweenSectionsOps({
+						sourceIndex: fromLayoutIndex,
+						sourceItems,
+						targetIndex: toLayoutIndex,
+						targetItems,
+					}),
+				);
+				onRefetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, onRefetch, showErrorModal],
+	);
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/AddSectionControl/AddSectionControl.module.scss

@@ -0,0 +1,17 @@
+.addButton {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	margin-top: 8px;
+	padding: 8px 12px;
+	background: transparent;
+	border: 1px dashed var(--bg-slate-400, #1d212d);
+	border-radius: 4px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		border-color: var(--bg-robin-500);
+		color: var(--bg-vanilla-100, #fff);
+	}
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/AddSectionControl/AddSectionControl.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSectionV2 } from '../../../utils';
+import { useAddSection } from '../hooks/useAddSection';
+import { useFirstSectionMigration } from '../hooks/useFirstSectionMigration';
+import FirstSectionMigrationModal from '../FirstSectionMigrationModal';
+import styles from './AddSectionControl.module.scss';
+
+const DEFAULT_SECTION_TITLE = 'New section';
+
+interface Props {
+	sections: DashboardSectionV2[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+	dashboardId: string | undefined;
+	isSectioned: boolean;
+	onRefetch: () => void;
+}
+
+function AddSectionControl({
+	sections,
+	layouts,
+	dashboardId,
+	isSectioned,
+	onRefetch,
+}: Props): JSX.Element {
+	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
+	const { addSection } = useAddSection({ layouts, dashboardId, onRefetch });
+	const { migrate, isSaving } = useFirstSectionMigration({
+		sections,
+		dashboardId,
+		onRefetch,
+	});
+
+	// Free-flowing dashboard with existing panels → must migrate before sections
+	// can coexist (every panel must belong to a section once any exists).
+	const needsMigration =
+		!isSectioned && sections.some((s) => s.items.length > 0);
+
+	const handleClick = (): void => {
+		if (needsMigration) {
+			setIsMigrationOpen(true);
+			return;
+		}
+		void addSection(DEFAULT_SECTION_TITLE);
+	};
+
+	const handleConfirmMigration = async (): Promise<void> => {
+		await migrate(DEFAULT_SECTION_TITLE);
+		setIsMigrationOpen(false);
+	};
+
+	return (
+		<>
+			<button
+				type="button"
+				className={styles.addButton}
+				onClick={handleClick}
+				data-testid="add-section"
+			>
+				<Plus size={14} />
+				Add section
+			</button>
+			<FirstSectionMigrationModal
+				open={isMigrationOpen}
+				isSaving={isSaving}
+				onClose={(): void => setIsMigrationOpen(false)}
+				onConfirm={handleConfirmMigration}
+			/>
+		</>
+	);
+}
+
+export default AddSectionControl;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/FirstSectionMigrationModal.tsx

@@ -0,0 +1,41 @@
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+interface Props {
+	open: boolean;
+	isSaving: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+}
+
+/**
+ * Shown when the user adds the first section to a free-flowing dashboard that
+ * already has panels. Confirms grouping the existing panels into a section
+ * before proceeding.
+ */
+function FirstSectionMigrationModal({
+	open,
+	isSaving,
+	onClose,
+	onConfirm,
+}: Props): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Group panels into sections?"
+			onCancel={onClose}
+			onOk={onConfirm}
+			okText="Continue"
+			okButtonProps={{ disabled: isSaving, 'data-testid': 'confirm-migration' }}
+			destroyOnClose
+		>
+			<Typography.Text>
+				This dashboard&apos;s panels are currently free-flowing. Adding a section
+				will move the existing panels into their own section, and a new empty
+				section will be added below. You can rename sections afterwards.
+			</Typography.Text>
+		</Modal>
+	);
+}
+
+export default FirstSectionMigrationModal;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/RenameSectionModal.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+
+interface Props {
+	open: boolean;
+	initialValue: string;
+	isSaving: boolean;
+	onClose: () => void;
+	onSubmit: (title: string) => void;
+}
+
+function RenameSectionModal({
+	open,
+	initialValue,
+	isSaving,
+	onClose,
+	onSubmit,
+}: Props): JSX.Element {
+	const [value, setValue] = useState<string>(initialValue);
+
+	// Reseed the field each time the modal opens.
+	useEffect(() => {
+		if (open) {
+			setValue(initialValue);
+		}
+	}, [open, initialValue]);
+
+	const submit = (): void => {
+		const trimmed = value.trim();
+		if (trimmed) {
+			onSubmit(trimmed);
+		}
+	};
+
+	return (
+		<Modal
+			open={open}
+			title="Rename section"
+			onCancel={onClose}
+			onOk={submit}
+			okText="Rename"
+			okButtonProps={{ disabled: isSaving || !value.trim() }}
+			destroyOnClose
+		>
+			<Input
+				testId="rename-section-input"
+				autoFocus
+				value={value}
+				maxLength={120}
+				placeholder="Section name"
+				onChange={(e): void => setValue(e.target.value)}
+				onKeyDown={(e): void => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						submit();
+					}
+				}}
+			/>
+		</Modal>
+	);
+}
+
+export default RenameSectionModal;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/Section/Section.module.scss

@@ -0,0 +1,9 @@
+.section {
+	margin-bottom: 12px;
+	border: 1px solid var(--bg-slate-500);
+	border-radius: 4px;
+}
+
+.dragging {
+	opacity: 0.8;
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/Section/Section.tsx

@@ -0,0 +1,160 @@
+import { useRef, useState } from 'react';
+import { Modal } from 'antd';
+
+import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
+
+import type { DashboardSectionV2 } from '../../../utils';
+import { useRenameSection } from '../hooks/useRenameSection';
+import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
+import { useDeleteSection } from '../hooks/useDeleteSection';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
+import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import PanelTypeSelectionModalV2 from '../../Panel/PanelTypeSelectionModalV2/PanelTypeSelectionModalV2';
+import RenameSectionModal from '../RenameSectionModal';
+import SectionGrid from '../SectionGrid/SectionGrid';
+import SectionHeader, { type SectionDragHandle } from '../SectionHeader/SectionHeader';
+import styles from './Section.module.scss';
+
+interface Props {
+	section: DashboardSectionV2;
+	dashboardId: string | undefined;
+	isEditable: boolean;
+	onRefetch: () => void;
+	/** All sections + move handler, for the per-panel "Move to section" action. */
+	sections?: DashboardSectionV2[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	/** Adds a panel to this section; present only in editable sectioned mode. */
+	onAddPanel?: (args: AddPanelArgs) => void;
+	/** Deletes a panel from this section. */
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow sections. */
+	dragHandle?: SectionDragHandle;
+}
+
+function Section({
+	section,
+	dashboardId,
+	isEditable,
+	onRefetch,
+	sections,
+	onMovePanel,
+	onAddPanel,
+	onDeletePanel,
+	dragHandle,
+}: Props): JSX.Element {
+	const containerRef = useRef<HTMLDivElement>(null);
+	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
+	// true once the section scrolls into (or near) the viewport.
+	const isVisible = useIntersectionObserver(containerRef, {
+		rootMargin: '200px',
+	});
+
+	const { open, toggle } = useToggleSectionCollapse({
+		layoutIndex: section.layoutIndex,
+		initialOpen: section.open,
+		dashboardId,
+	});
+
+	const [isRenaming, setIsRenaming] = useState(false);
+	const { rename, isSaving } = useRenameSection({
+		layoutIndex: section.layoutIndex,
+		dashboardId,
+		onRefetch,
+	});
+
+	const handleRenameSubmit = async (title: string): Promise<void> => {
+		const ok = await rename(title);
+		if (ok) {
+			setIsRenaming(false);
+		}
+	};
+
+	const [isAddingPanel, setIsAddingPanel] = useState(false);
+	const handleSelectPanelType = (pluginKind: string): void => {
+		onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+		setIsAddingPanel(false);
+	};
+
+	const { deleteSection } = useDeleteSection({
+		section,
+		dashboardId,
+		onRefetch,
+	});
+	const confirmDeleteSection = (): void => {
+		Modal.confirm({
+			title: `Delete section "${section.title ?? ''}"?`,
+			content: 'Panels in this section will be removed.',
+			okText: 'Delete',
+			okButtonProps: { danger: true },
+			centered: true,
+			onOk: () => deleteSection(),
+		});
+	};
+
+	const grid = (
+		<SectionGrid
+			items={section.items}
+			layoutIndex={section.layoutIndex}
+			dashboardId={dashboardId}
+			isEditable={isEditable}
+			onRefetch={onRefetch}
+			isVisible={isVisible}
+			sections={sections}
+			onMovePanel={onMovePanel}
+			onDeletePanel={onDeletePanel}
+		/>
+	);
+
+	if (!section.title) {
+		// Untitled section — just the grid (no header chrome), but still observed
+		// for the viewport signal.
+		return (
+			<div
+				ref={containerRef}
+				data-testid={`dashboard-section-${section.id}`}
+				data-section-layout-index={section.layoutIndex}
+			>
+				{grid}
+			</div>
+		);
+	}
+
+	return (
+		<div
+			ref={containerRef}
+			className={styles.section}
+			data-testid={`dashboard-section-${section.id}`}
+			data-section-layout-index={section.layoutIndex}
+		>
+			<SectionHeader
+				sectionId={section.id}
+				title={section.title}
+				open={open}
+				onToggle={toggle}
+				repeatVariable={section.repeatVariable}
+				dragHandle={dragHandle}
+				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
+				onAddPanel={
+					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
+				}
+				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
+			/>
+			{open ? grid : null}
+			<RenameSectionModal
+				open={isRenaming}
+				initialValue={section.title}
+				isSaving={isSaving}
+				onClose={(): void => setIsRenaming(false)}
+				onSubmit={handleRenameSubmit}
+			/>
+			<PanelTypeSelectionModalV2
+				open={isAddingPanel}
+				onClose={(): void => setIsAddingPanel(false)}
+				onSelect={handleSelectPanelType}
+			/>
+		</div>
+	);
+}
+
+export default Section;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -0,0 +1,16 @@
+.trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	background: transparent;
+	border: none;
+	border-radius: 2px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
+	}
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -0,0 +1,68 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import styles from './SectionActionsMenu.module.scss';
+
+interface Props {
+	sectionId: string;
+	onAddPanel?: () => void;
+	onRename?: () => void;
+	onDeleteSection?: () => void;
+}
+
+function SectionActionsMenu({
+	sectionId,
+	onAddPanel,
+	onRename,
+	onDeleteSection,
+}: Props): JSX.Element {
+	const items = useMemo<MenuItem[]>(() => {
+		const result: MenuItem[] = [];
+		if (onAddPanel) {
+			result.push({
+				key: 'add-panel',
+				icon: <Plus size={14} />,
+				label: 'Add panel',
+				onClick: onAddPanel,
+			});
+		}
+		if (onRename) {
+			result.push({
+				key: 'rename',
+				icon: <PenLine size={14} />,
+				label: 'Rename section',
+				onClick: onRename,
+			});
+		}
+		if (onDeleteSection) {
+			result.push(
+				{ type: 'divider' },
+				{
+					key: 'delete-section',
+					danger: true,
+					icon: <Trash2 size={14} />,
+					label: 'Delete section',
+					onClick: onDeleteSection,
+				},
+			);
+		}
+		return result;
+	}, [onAddPanel, onRename, onDeleteSection]);
+
+	return (
+		<DropdownMenuSimple menu={{ items }}>
+			<button
+				type="button"
+				className={styles.trigger}
+				aria-label="Section actions"
+				data-testid={`dashboard-section-actions-${sectionId}`}
+			>
+				<EllipsisVertical size={14} />
+			</button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default SectionActionsMenu;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionDragPreview/SectionDragPreview.module.scss

@@ -0,0 +1,7 @@
+.preview {
+	border: 1px solid var(--bg-robin-500);
+	border-radius: 4px;
+	background: var(--bg-ink-400, #0b0c0e);
+	box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
+	cursor: grabbing;
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -0,0 +1,32 @@
+import type { DashboardSectionV2 } from '../../../utils';
+import SectionHeader from '../SectionHeader/SectionHeader';
+import styles from './SectionDragPreview.module.scss';
+
+interface Props {
+	section: DashboardSectionV2;
+}
+
+/**
+ * Lightweight preview rendered inside the DragOverlay while a section is being
+ * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
+ * cheap and never triggers RGL width re-measurement.
+ */
+function SectionDragPreview({ section }: Props): JSX.Element {
+	const panelCount = section.items.length;
+	const title = `${section.title ?? ''} · ${panelCount} ${
+		panelCount === 1 ? 'panel' : 'panels'
+	}`;
+
+	return (
+		<div className={styles.preview}>
+			<SectionHeader
+				sectionId={`${section.id}-preview`}
+				title={title}
+				open={false}
+				onToggle={(): void => undefined}
+			/>
+		</div>
+	);
+}
+
+export default SectionDragPreview;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionGrid/SectionGrid.module.scss

@@ -0,0 +1,12 @@
+.grid {
+	// Override react-grid-layout's default red drag/resize placeholder with the
+	// SigNoz brand blue.
+	:global(.react-grid-item.react-grid-placeholder) {
+		background: var(--bg-robin-500);
+		opacity: 0.2;
+		border-radius: 4px;
+		transition-duration: 100ms;
+		z-index: 2;
+		user-select: none;
+	}
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionGrid/SectionGrid.tsx

@@ -0,0 +1,129 @@
+import { useCallback, useMemo } from 'react';
+import GridLayout, {
+	type ItemCallback,
+	WidthProvider,
+	type Layout,
+} from 'react-grid-layout';
+
+import type { DashboardSectionV2 } from '../../../utils';
+import { usePersistLayout } from '../hooks/usePersistLayout';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import PanelV2 from '../../Panel/PanelV2/PanelV2';
+import styles from './SectionGrid.module.scss';
+
+const ResponsiveGridLayout = WidthProvider(GridLayout);
+
+interface Props {
+	items: DashboardSectionV2['items'];
+	layoutIndex: number;
+	dashboardId: string | undefined;
+	isEditable: boolean;
+	onRefetch: () => void;
+	/** Forwarded to panels — true when the parent section is in the viewport. */
+	isVisible?: boolean;
+	/** All sections + move handler — present only in editable sectioned mode (panel "Move to section"). */
+	sections?: DashboardSectionV2[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+}
+
+function SectionGrid({
+	items,
+	layoutIndex,
+	dashboardId,
+	isEditable,
+	onRefetch,
+	isVisible,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: Props): JSX.Element {
+	const rglLayout = useMemo<Layout[]>(
+		() =>
+			items.map((item) => ({
+				i: item.id,
+				x: item.x,
+				y: item.y,
+				w: item.width,
+				h: item.height,
+			})),
+		[items],
+	);
+
+	const { handleLayoutChange } = usePersistLayout({
+		layoutIndex,
+		items,
+		dashboardId,
+		onRefetch,
+	});
+
+	// On drop, if the pointer is released over a different section, move the
+	// panel there instead of repositioning it within this section. RGL clamps
+	// the dragged item visually to this grid, but the pointer is free, so we
+	// hit-test the release point against section containers.
+	const handleDragStop = useCallback<ItemCallback>(
+		// eslint-disable-next-line max-params -- signature fixed by react-grid-layout's ItemCallback
+		(layout, oldItem, _newItem, _placeholder, event) => {
+			// Deterministically hit-test the release point against section
+			// containers (rect-based, so the dragged item on top doesn't interfere).
+			const targetEl = Array.from(
+				document.querySelectorAll<HTMLElement>('[data-section-layout-index]'),
+			).find((el) => {
+				const r = el.getBoundingClientRect();
+				return (
+					event.clientX >= r.left &&
+					event.clientX <= r.right &&
+					event.clientY >= r.top &&
+					event.clientY <= r.bottom
+				);
+			});
+			const attr = targetEl?.getAttribute('data-section-layout-index');
+			const targetIndex = attr != null ? Number(attr) : null;
+
+			if (onMovePanel && targetIndex != null && targetIndex !== layoutIndex) {
+				onMovePanel({
+					panelId: oldItem.i,
+					fromLayoutIndex: layoutIndex,
+					toLayoutIndex: targetIndex,
+				});
+				return;
+			}
+			handleLayoutChange(layout);
+		},
+		[onMovePanel, layoutIndex, handleLayoutChange],
+	);
+
+	return (
+		<ResponsiveGridLayout
+			className={styles.grid}
+			cols={12}
+			rowHeight={45}
+			autoSize
+			useCSSTransforms
+			layout={rglLayout}
+			draggableHandle=".panel-drag-handle"
+			isDraggable={isEditable}
+			isResizable={isEditable}
+			onDragStop={handleDragStop}
+			onResizeStop={handleLayoutChange}
+			margin={[8, 8]}
+		>
+			{items.map((item) => (
+				<div key={item.id}>
+					<PanelV2
+						panel={item.panel}
+						panelId={item.id}
+						isVisible={isVisible}
+						currentLayoutIndex={layoutIndex}
+						sections={isEditable ? sections : undefined}
+						onMovePanel={isEditable ? onMovePanel : undefined}
+						onDeletePanel={isEditable ? onDeletePanel : undefined}
+					/>
+				</div>
+			))}
+		</ResponsiveGridLayout>
+	);
+}
+
+export default SectionGrid;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionHeader/SectionHeader.module.scss

@@ -0,0 +1,52 @@
+.header {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 8px 12px;
+
+	&.headerOpen {
+		border-bottom: 1px solid var(--bg-slate-500);
+	}
+}
+
+.dragHandle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	background: transparent;
+	border: none;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: grab;
+
+	&:active {
+		cursor: grabbing;
+	}
+}
+
+.toggle {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 4px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	color: inherit;
+	text-align: left;
+	cursor: pointer;
+	min-width: 0;
+}
+
+.title {
+	margin-left: 4px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.repeatBadge {
+	margin-left: 8px;
+	opacity: 0.6;
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,80 @@
+import type { DraggableAttributes } from '@dnd-kit/core';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import SectionActionsMenu from '../SectionActionsMenu/SectionActionsMenu';
+import styles from './SectionHeader.module.scss';
+
+export interface SectionDragHandle {
+	attributes: DraggableAttributes;
+	listeners: SyntheticListenerMap | undefined;
+	setActivatorNodeRef: (element: HTMLElement | null) => void;
+}
+
+interface Props {
+	sectionId: string;
+	title: string;
+	open: boolean;
+	onToggle: () => void;
+	repeatVariable?: string;
+	dragHandle?: SectionDragHandle;
+	onRename?: () => void;
+	onAddPanel?: () => void;
+	onDeleteSection?: () => void;
+}
+
+function SectionHeader({
+	sectionId,
+	title,
+	open,
+	onToggle,
+	repeatVariable,
+	dragHandle,
+	onRename,
+	onAddPanel,
+	onDeleteSection,
+}: Props): JSX.Element {
+	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
+	return (
+		<div className={`${styles.header} ${open ? styles.headerOpen : ''}`}>
+			{dragHandle ? (
+				<button
+					type="button"
+					className={styles.dragHandle}
+					ref={dragHandle.setActivatorNodeRef}
+					aria-label="Drag to reorder section"
+					data-testid={`dashboard-section-drag-${sectionId}`}
+					{...dragHandle.attributes}
+					{...dragHandle.listeners}
+				>
+					<GripVertical size={14} />
+				</button>
+			) : null}
+			<button
+				type="button"
+				className={styles.toggle}
+				onClick={onToggle}
+				data-testid={`dashboard-section-toggle-${sectionId}`}
+			>
+				{open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+				<Typography.Text className={styles.title}>{title}</Typography.Text>
+				{repeatVariable ? (
+					<Typography.Text className={styles.repeatBadge}>
+						(repeats per ${repeatVariable})
+					</Typography.Text>
+				) : null}
+			</button>
+			{hasActions ? (
+				<SectionActionsMenu
+					sectionId={sectionId}
+					onAddPanel={onAddPanel}
+					onRename={onRename}
+					onDeleteSection={onDeleteSection}
+				/>
+			) : null}
+		</div>
+	);
+}
+
+export default SectionHeader;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionList.tsx

@@ -0,0 +1,124 @@
+import { useMemo } from 'react';
+import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
+import {
+	restrictToParentElement,
+	restrictToVerticalAxis,
+} from '@dnd-kit/modifiers';
+import {
+	SortableContext,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSectionV2 } from '../../utils';
+import { useSectionDragReorder } from './hooks/useSectionDragReorder';
+import { useMovePanelToSection } from '../Panel/hooks/useMovePanelToSection';
+import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
+import { useDeletePanel } from '../Panel/hooks/useDeletePanel';
+import Section from './Section/Section';
+import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
+import SortableSection from './SortableSection';
+
+interface Props {
+	sections: DashboardSectionV2[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+	dashboardId: string | undefined;
+	isEditable: boolean;
+	onRefetch: () => void;
+}
+
+function SectionList({
+	sections,
+	layouts,
+	dashboardId,
+	isEditable,
+	onRefetch,
+}: Props): JSX.Element {
+	const {
+		sensors,
+		orderedSections,
+		activeSection,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+	} = useSectionDragReorder({ sections, layouts, dashboardId, onRefetch });
+
+	const onMovePanel = useMovePanelToSection({
+		sections,
+		dashboardId,
+		onRefetch,
+	});
+	const onAddPanel = useAddPanelToSection({ sections, dashboardId, onRefetch });
+	const onDeletePanel = useDeletePanel({ sections, dashboardId, onRefetch });
+
+	// Only titled sections participate in reordering; untitled (free-flow)
+	// blocks render in place without a drag handle.
+	const sortableIds = useMemo(
+		() => orderedSections.filter((s) => s.title).map((s) => s.id),
+		[orderedSections],
+	);
+
+	if (!isEditable) {
+		return (
+			<>
+				{sections.map((section) => (
+					<Section
+						key={section.id}
+						section={section}
+						dashboardId={dashboardId}
+						isEditable={isEditable}
+						onRefetch={onRefetch}
+					/>
+				))}
+			</>
+		);
+	}
+
+	return (
+		<DndContext
+			sensors={sensors}
+			collisionDetection={closestCenter}
+			modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+			onDragStart={onDragStart}
+			onDragEnd={onDragEnd}
+			onDragCancel={onDragCancel}
+		>
+			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+				{orderedSections.map((section) =>
+					section.title ? (
+						<SortableSection
+							key={section.id}
+							section={section}
+							dashboardId={dashboardId}
+							isEditable={isEditable}
+							onRefetch={onRefetch}
+							sections={sections}
+							onMovePanel={onMovePanel}
+							onAddPanel={onAddPanel}
+							onDeletePanel={onDeletePanel}
+						/>
+					) : (
+						<Section
+							key={section.id}
+							section={section}
+							dashboardId={dashboardId}
+							isEditable={isEditable}
+							onRefetch={onRefetch}
+							sections={sections}
+							onMovePanel={onMovePanel}
+							onAddPanel={onAddPanel}
+							onDeletePanel={onDeletePanel}
+						/>
+					),
+				)}
+			</SortableContext>
+			{/* dropAnimation disabled: optimistic reorder already places the section,
+			    so animating the overlay back would cause a visible snap/shake. */}
+			<DragOverlay dropAnimation={null}>
+				{activeSection ? <SectionDragPreview section={activeSection} /> : null}
+			</DragOverlay>
+		</DndContext>
+	);
+}
+
+export default SectionList;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SortableSection.tsx

@@ -0,0 +1,68 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import type { DashboardSectionV2 } from '../../utils';
+import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
+import type { AddPanelArgs } from '../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
+import Section from './Section/Section';
+
+interface Props {
+	section: DashboardSectionV2;
+	dashboardId: string | undefined;
+	isEditable: boolean;
+	onRefetch: () => void;
+	sections: DashboardSectionV2[];
+	onMovePanel: (args: MovePanelArgs) => void;
+	onAddPanel: (args: AddPanelArgs) => void;
+	onDeletePanel: (args: DeletePanelArgs) => void;
+}
+
+function SortableSection({
+	section,
+	dashboardId,
+	isEditable,
+	onRefetch,
+	sections,
+	onMovePanel,
+	onAddPanel,
+	onDeletePanel,
+}: Props): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		setActivatorNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id: section.id });
+
+	// dnd-kit drives the drag transform per-frame, so this must be an inline
+	// style — there is no static-stylesheet equivalent for a live transform.
+	// While dragging, the original is hidden (the DragOverlay renders the moving
+	// preview); keeping it in place preserves the gap and lets siblings animate.
+	const style: React.CSSProperties = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? 0 : undefined,
+	};
+
+	return (
+		<div ref={setNodeRef} style={style}>
+			<Section
+				section={section}
+				dashboardId={dashboardId}
+				isEditable={isEditable}
+				onRefetch={onRefetch}
+				sections={sections}
+				onMovePanel={onMovePanel}
+				onAddPanel={onAddPanel}
+				onDeletePanel={onDeletePanel}
+				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
+			/>
+		</div>
+	);
+}
+
+export default SortableSection;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useAddSection.ts

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { addSectionOp, newGridLayout, reorderLayoutsOp } from '../../../patchOps';
+
+interface Params {
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+interface Result {
+	addSection: (title: string) => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Appends an empty titled section. When the dashboard has no layouts yet, the
+ * layouts array is created via a `replace` (an `add` to a missing/empty array
+ * pointer is unreliable); otherwise a new Grid is appended.
+ */
+export function useAddSection({
+	layouts,
+	dashboardId,
+	onRefetch,
+}: Params): Result {
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const addSection = useCallback(
+		async (title: string): Promise<void> => {
+			const trimmed = title.trim();
+			if (!dashboardId || !trimmed) {
+				return;
+			}
+			const op =
+				!layouts || layouts.length === 0
+					? reorderLayoutsOp([newGridLayout(trimmed)])
+					: addSectionOp(trimmed);
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [op]);
+				onRefetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[layouts, dashboardId, onRefetch, showErrorModal],
+	);
+
+	return { addSection, isSaving };
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useDeleteSection.ts

@@ -0,0 +1,54 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { removePanelOp, removeSectionOp } from '../../../patchOps';
+import type { DashboardSectionV2 } from '../../../utils';
+
+interface Params {
+	section: DashboardSectionV2;
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+interface Result {
+	deleteSection: () => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Deletes a section: removes its Grid layout and deletes every panel it
+ * contained from `spec.panels` (orphan cleanup), as one atomic patch.
+ */
+export function useDeleteSection({
+	section,
+	dashboardId,
+	onRefetch,
+}: Params): Result {
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const deleteSection = useCallback(async (): Promise<void> => {
+		if (!dashboardId) {
+			return;
+		}
+		const ops: DashboardtypesJSONPatchOperationDTO[] = section.items.map((i) =>
+			removePanelOp(i.id),
+		);
+		ops.push(removeSectionOp(section.layoutIndex));
+		try {
+			setIsSaving(true);
+			await patchDashboardV2({ id: dashboardId }, ops);
+			onRefetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [section, dashboardId, onRefetch, showErrorModal]);
+
+	return { deleteSection, isSaving };
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useFirstSectionMigration.ts

@@ -0,0 +1,67 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { addSectionOp, titleUntitledSectionOp } from '../../../patchOps';
+import type { DashboardSectionV2 } from '../../../utils';
+
+interface Params {
+	sections: DashboardSectionV2[];
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+interface Result {
+	migrate: (newSectionTitle: string) => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Converts a free-flowing dashboard into a sectioned one: every existing
+ * untitled layout that holds panels is titled in place ("Section 1", "Section
+ * 2", …), then the brand-new section the user asked for is appended — all in one
+ * atomic patch. Used once the user confirms the migration prompt.
+ */
+export function useFirstSectionMigration({
+	sections,
+	dashboardId,
+	onRefetch,
+}: Params): Result {
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const migrate = useCallback(
+		async (newSectionTitle: string): Promise<void> => {
+			const trimmed = newSectionTitle.trim();
+			if (!dashboardId || !trimmed) {
+				return;
+			}
+
+			const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+			let counter = 1;
+			sections.forEach((s) => {
+				if (!s.title && s.items.length > 0) {
+					ops.push(titleUntitledSectionOp(s.layoutIndex, `Section ${counter}`));
+					counter += 1;
+				}
+			});
+			ops.push(addSectionOp(trimmed));
+
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, ops);
+				onRefetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[sections, dashboardId, onRefetch, showErrorModal],
+	);
+
+	return { migrate, isSaving };
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/usePersistLayout.ts

@@ -0,0 +1,104 @@
+import { useCallback, useState } from 'react';
+import type { Layout } from 'react-grid-layout';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { replaceSectionItemsOp } from '../../../patchOps';
+import type { GridItemV2 } from '../../../utils';
+
+interface Params {
+	layoutIndex: number;
+	items: GridItemV2[];
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+interface Result {
+	handleLayoutChange: (rglLayout: Layout[]) => void;
+	isSaving: boolean;
+}
+
+/** Maps an RGL layout back onto the section's grid items, preserving panel refs. */
+function mergeRglLayout(
+	rglLayout: Layout[],
+	items: GridItemV2[],
+): GridItemV2[] {
+	const byId = new Map(items.map((item) => [item.id, item]));
+	return rglLayout
+		.map((entry) => {
+			const existing = byId.get(entry.i);
+			if (!existing) {
+				return null;
+			}
+			return {
+				...existing,
+				x: entry.x,
+				y: entry.y,
+				width: entry.w,
+				height: entry.h,
+			};
+		})
+		.filter((item): item is GridItemV2 => item !== null);
+}
+
+function hasGeometryChanged(next: GridItemV2[], prev: GridItemV2[]): boolean {
+	if (next.length !== prev.length) {
+		return true;
+	}
+	const prevById = new Map(prev.map((item) => [item.id, item]));
+	return next.some((item) => {
+		const before = prevById.get(item.id);
+		if (!before) {
+			return true;
+		}
+		return (
+			before.x !== item.x ||
+			before.y !== item.y ||
+			before.width !== item.width ||
+			before.height !== item.height
+		);
+	});
+}
+
+/**
+ * Persists panel geometry within a single section. Call the returned handler
+ * from RGL's `onDragStop`/`onResizeStop` (stop events only — not continuous
+ * `onLayoutChange`) to limit network churn.
+ */
+export function usePersistLayout({
+	layoutIndex,
+	items,
+	dashboardId,
+	onRefetch,
+}: Params): Result {
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const handleLayoutChange = useCallback(
+		async (rglLayout: Layout[]): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const nextItems = mergeRglLayout(rglLayout, items);
+			if (!hasGeometryChanged(nextItems, items)) {
+				return;
+			}
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [
+					replaceSectionItemsOp(layoutIndex, nextItems),
+				]);
+				onRefetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, items, layoutIndex, onRefetch, showErrorModal],
+	);
+
+	return { handleLayoutChange, isSaving };
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useRenameSection.ts

@@ -0,0 +1,53 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { renameSectionOp } from '../../../patchOps';
+
+interface Params {
+	layoutIndex: number;
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+interface Result {
+	rename: (title: string) => Promise<boolean>;
+	isSaving: boolean;
+}
+
+/** Renames a section's title via `replace /spec/layouts/<i>/spec/display/title`. */
+export function useRenameSection({
+	layoutIndex,
+	dashboardId,
+	onRefetch,
+}: Params): Result {
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const rename = useCallback(
+		async (title: string): Promise<boolean> => {
+			const trimmed = title.trim();
+			if (!dashboardId || !trimmed) {
+				return false;
+			}
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [
+					renameSectionOp(layoutIndex, trimmed),
+				]);
+				onRefetch();
+				return true;
+			} catch (error) {
+				showErrorModal(error as APIError);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, layoutIndex, onRefetch, showErrorModal],
+	);
+
+	return { rename, isSaving };
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useSectionDragReorder.ts

@@ -0,0 +1,129 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	type DragEndEvent,
+	type DragStartEvent,
+	KeyboardSensor,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { reorderLayoutsOp } from '../../../patchOps';
+import type { DashboardSectionV2 } from '../../../utils';
+
+interface Params {
+	sections: DashboardSectionV2[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+	dashboardId: string | undefined;
+	onRefetch: () => void;
+}
+
+interface Result {
+	sensors: ReturnType<typeof useSensors>;
+	/** Display order — optimistically reordered on drop so the UI doesn't wait on refetch. */
+	orderedSections: DashboardSectionV2[];
+	/** The section currently being dragged (for the DragOverlay preview), or null. */
+	activeSection: DashboardSectionV2 | null;
+	onDragStart: (event: DragStartEvent) => void;
+	onDragEnd: (event: DragEndEvent) => void;
+	onDragCancel: () => void;
+}
+
+/**
+ * Owns section-reorder drag state. Reorders happen optimistically in local
+ * state (keyed by stable section id) and persist via a single
+ * `replace /spec/layouts` patch; the optimistic order is cleared once fresh
+ * server data arrives. Each section maps 1:1 to a Grid layout via `layoutIndex`,
+ * so the new layouts array is rebuilt by mapping the reordered sections back.
+ */
+export function useSectionDragReorder({
+	sections,
+	layouts,
+	dashboardId,
+	onRefetch,
+}: Params): Result {
+	const [activeId, setActiveId] = useState<string | null>(null);
+	const [localOrderIds, setLocalOrderIds] = useState<string[] | null>(null);
+	const { showErrorModal } = useErrorModal();
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+		useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+	);
+
+	// Server data is the source of truth — drop optimistic order whenever it changes.
+	useEffect(() => {
+		setLocalOrderIds(null);
+	}, [sections]);
+
+	const orderedSections = useMemo<DashboardSectionV2[]>(() => {
+		if (!localOrderIds) {
+			return sections;
+		}
+		const byId = new Map(sections.map((s) => [s.id, s]));
+		const ordered = localOrderIds
+			.map((id) => byId.get(id))
+			.filter((s): s is DashboardSectionV2 => s !== undefined);
+		return ordered.length === sections.length ? ordered : sections;
+	}, [sections, localOrderIds]);
+
+	const onDragStart = useCallback((event: DragStartEvent): void => {
+		setActiveId(String(event.active.id));
+	}, []);
+
+	const onDragCancel = useCallback((): void => {
+		setActiveId(null);
+	}, []);
+
+	const onDragEnd = useCallback(
+		async (event: DragEndEvent): Promise<void> => {
+			setActiveId(null);
+			const { active, over } = event;
+			if (!over || active.id === over.id || !dashboardId || !layouts) {
+				return;
+			}
+
+			const oldIndex = orderedSections.findIndex((s) => s.id === active.id);
+			const newIndex = orderedSections.findIndex((s) => s.id === over.id);
+			if (oldIndex < 0 || newIndex < 0) {
+				return;
+			}
+
+			const newOrdered = arrayMove(orderedSections, oldIndex, newIndex);
+			setLocalOrderIds(newOrdered.map((s) => s.id));
+
+			const newLayouts = newOrdered
+				.map((s) => layouts[s.layoutIndex])
+				.filter((l): l is DashboardtypesLayoutDTO => l !== undefined);
+
+			try {
+				await patchDashboardV2({ id: dashboardId }, [reorderLayoutsOp(newLayouts)]);
+				onRefetch();
+			} catch (error) {
+				setLocalOrderIds(null); // revert optimistic order on failure
+				showErrorModal(error as APIError);
+			}
+		},
+		[orderedSections, layouts, dashboardId, onRefetch, showErrorModal],
+	);
+
+	const activeSection = useMemo(
+		() => orderedSections.find((s) => s.id === activeId) ?? null,
+		[orderedSections, activeId],
+	);
+
+	return {
+		sensors,
+		orderedSections,
+		activeSection,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+	};
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useToggleSectionCollapse.ts

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { setSectionCollapseOp } from '../../../patchOps';
+
+interface Params {
+	layoutIndex: number;
+	initialOpen: boolean;
+	dashboardId: string | undefined;
+}
+
+interface Result {
+	open: boolean;
+	toggle: () => void;
+}
+
+/**
+ * Owns a section's expand/collapse state. The toggle is optimistic (snappy UI)
+ * and persists to `spec.layouts[i].spec.display.collapse.open` in the
+ * background — no refetch, since collapse is a lightweight UI preference and a
+ * full dashboard refetch would flicker. Reverts on patch failure.
+ */
+export function useToggleSectionCollapse({
+	layoutIndex,
+	initialOpen,
+	dashboardId,
+}: Params): Result {
+	const [open, setOpen] = useState<boolean>(initialOpen);
+	const { showErrorModal } = useErrorModal();
+
+	// Reconcile with server state when it changes (e.g. after a refetch).
+	useEffect(() => {
+		setOpen(initialOpen);
+	}, [initialOpen]);
+
+	const toggle = useCallback((): void => {
+		setOpen((prev) => {
+			const next = !prev;
+			if (dashboardId) {
+				patchDashboardV2({ id: dashboardId }, [
+					setSectionCollapseOp(layoutIndex, next),
+				]).catch((error) => {
+					setOpen(prev); // revert on failure
+					showErrorModal(error as APIError);
+				});
+			}
+			return next;
+		});
+	}, [dashboardId, layoutIndex, showErrorModal]);
+
+	return { open, toggle };
+}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/index.tsx

@@ -0,0 +1,104 @@
+import { useMemo } from 'react';
+
+import { Empty } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import type {
+	DashboardtypesLayoutDTO,
+	DashboardtypesPanelDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { layoutsToSections } from '../utils';
+import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
+import Section from './Section/Section/Section';
+import SectionList from './Section/SectionList';
+import styles from './GridCardLayoutV2.module.scss';
+
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+
+interface Props {
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined;
+	dashboardId: string | undefined;
+	isEditable: boolean;
+	onRefetch: () => void;
+}
+
+function GridCardLayoutV2({
+	layouts,
+	panels,
+	dashboardId,
+	isEditable,
+	onRefetch,
+}: Props): JSX.Element {
+	const sections = useMemo(
+		() => layoutsToSections(layouts, panels),
+		[layouts, panels],
+	);
+
+	const isEmpty =
+		sections.length === 0 || sections.every((s) => s.items.length === 0);
+
+	// Sectioned mode = at least one titled layout. Sections then become a
+	// draggable, reorderable list; otherwise the dashboard is a single
+	// free-flowing grid with no section chrome or reordering.
+	const isSectioned = useMemo(() => sections.some((s) => !!s.title), [sections]);
+
+	const renderContent = (): JSX.Element => {
+		if (isEmpty) {
+			return (
+				<div className={styles.emptyState}>
+					<Empty
+						image={Empty.PRESENTED_IMAGE_SIMPLE}
+						description={
+							<Typography.Text>No panels in this dashboard yet</Typography.Text>
+						}
+					/>
+				</div>
+			);
+		}
+
+		if (isSectioned) {
+			return (
+				<SectionList
+					sections={sections}
+					layouts={layouts}
+					dashboardId={dashboardId}
+					isEditable={isEditable}
+					onRefetch={onRefetch}
+				/>
+			);
+		}
+
+		return (
+			<>
+				{sections.map((section) => (
+					<Section
+						key={section.id}
+						section={section}
+						dashboardId={dashboardId}
+						isEditable={isEditable}
+						onRefetch={onRefetch}
+					/>
+				))}
+			</>
+		);
+	};
+
+	return (
+		<>
+			{renderContent()}
+			{isEditable ? (
+				<AddSectionControl
+					sections={sections}
+					layouts={layouts}
+					dashboardId={dashboardId}
+					isSectioned={isSectioned}
+					onRefetch={onRefetch}
+				/>
+			) : null}
+		</>
+	);
+}
+
+export default GridCardLayoutV2;

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -0,0 +1,63 @@
+.dashboard-breadcrumbs {
+	width: 100%;
+	height: 48px;
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	max-width: 80%;
+
+	.dashboard-btn {
+		display: flex;
+		align-items: center;
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		padding: 0px;
+		height: 20px;
+	}
+
+	.dashboard-btn:hover {
+		background-color: unset;
+	}
+
+	.id-btn {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0px 2px;
+		border-radius: 2px;
+		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
+		color: var(--bg-robin-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		height: 20px;
+
+		max-width: calc(100% - 120px);
+
+		span {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.ant-btn-icon {
+			margin-inline-end: 4px;
+		}
+	}
+	.id-btn:hover {
+		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
+		color: var(--bg-robin-300);
+	}
+
+	.dashboard-icon-image {
+		height: 14px;
+		width: 14px;
+	}
+}

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { Button } from 'antd';
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
+import ROUTES from 'constants/routes';
+import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { LayoutGrid } from '@signozhq/icons';
+
+import { Base64Icons } from '../../../DashboardContainer/DashboardSettings/General/utils';
+
+import './DashboardBreadcrumbs.styles.scss';
+
+interface Props {
+	title: string;
+	image?: string;
+}
+
+function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+
+	const goToListPage = useCallback(() => {
+		const dashboardsListQueryParamsString = getSessionStorageApi(
+			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
+		);
+
+		if (dashboardsListQueryParamsString) {
+			safeNavigate({
+				pathname: ROUTES.ALL_DASHBOARD,
+				search: `?${dashboardsListQueryParamsString}`,
+			});
+		} else {
+			safeNavigate(ROUTES.ALL_DASHBOARD);
+		}
+	}, [safeNavigate]);
+
+	return (
+		<div className="dashboard-breadcrumbs">
+			<Button
+				type="text"
+				icon={<LayoutGrid size={14} />}
+				className="dashboard-btn"
+				onClick={goToListPage}
+			>
+				Dashboard /
+			</Button>
+			<Button type="text" className="id-btn dashboard-name-btn">
+				<img
+					src={image || Base64Icons[0]}
+					alt="dashboard-icon"
+					className="dashboard-icon-image"
+				/>
+				{title}
+			</Button>
+		</div>
+	);
+}
+
+export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.styles.scss

@@ -0,0 +1,9 @@
+.dashboard-header {
+	border-bottom: 1px solid var(--l1-border);
+	display: flex;
+	justify-content: space-between;
+	gap: 16px;
+	align-items: center;
+	padding: 0 8px;
+	box-sizing: border-box;
+}

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+
+import DashboardBreadcrumbs from './DashboardBreadcrumbs';
+
+import './DashboardHeader.styles.scss';
+
+interface Props {
+	title: string;
+	image?: string;
+}
+
+function DashboardHeader({ title, image }: Props): JSX.Element {
+	return (
+		<div className="dashboard-header">
+			<DashboardBreadcrumbs title={title} image={image} />
+			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
+		</div>
+	);
+}
+
+export default memo(DashboardHeader);

frontend/src/container/DashboardContainerV2/index.tsx

@@ -0,0 +1,46 @@
+import { FullScreen, useFullScreenHandle } from 'react-full-screen';
+
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useAppContext } from 'providers/App/App';
+
+import DashboardDescriptionV2 from './DashboardDescriptionV2';
+import GridCardLayoutV2 from './GridCardLayoutV2';
+import type { V2Dashboard } from './utils';
+import styles from './DashboardContainerV2.module.scss';
+
+interface Props {
+	dashboard: V2Dashboard | undefined;
+	onRefetch: () => void;
+}
+
+function DashboardContainerV2({ dashboard, onRefetch }: Props): JSX.Element {
+	const fullScreenHandle = useFullScreenHandle();
+	const spec = dashboard?.spec;
+
+	const { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
+	const isEditable = !dashboard?.locked && editDashboard;
+
+	return (
+		<FullScreen handle={fullScreenHandle}>
+			<div className={styles.container}>
+				<DashboardDescriptionV2
+					dashboard={dashboard}
+					handle={fullScreenHandle}
+					onRefetch={onRefetch}
+				/>
+				<div className={styles.body}>
+					<GridCardLayoutV2
+						layouts={spec?.layouts}
+						panels={spec?.panels ?? undefined}
+						dashboardId={dashboard?.id}
+						isEditable={isEditable}
+						onRefetch={onRefetch}
+					/>
+				</div>
+			</div>
+		</FullScreen>
+	);
+}
+
+export default DashboardContainerV2;

frontend/src/container/DashboardContainerV2/patchOps.ts

@@ -0,0 +1,189 @@
+import type {
+	DashboardGridItemDTO,
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesLayoutDTO,
+	DashboardtypesPanelDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
+
+import type { GridItemV2 } from './utils';
+
+/**
+ * Pure RFC-6902 JSON-Patch builders for the V2 dashboard spec. These are
+ * intentionally side-effect-free (no React, no network) so they can be unit
+ * tested and reused by the layout hooks. JSON pointers target the postable
+ * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
+ * patches in DashboardSettings/General and DashboardDescriptionV2).
+ */
+
+const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
+
+const PANEL_REF_PREFIX = '#/spec/panels/';
+
+export function panelRef(panelId: string): string {
+	return `${PANEL_REF_PREFIX}${panelId}`;
+}
+
+/**
+ * Builds a minimal, backend-valid panel for a given plugin kind. The spec
+ * requires exactly one query whose plugin kind is allowed for the panel;
+ * `signoz/BuilderQuery` is allowed for every panel kind and its contents are not
+ * validated, so an empty builder query is the safe default. The real query is
+ * filled in once the panel editor lands.
+ */
+export function createDefaultPanel(pluginKind: string): DashboardtypesPanelDTO {
+	// The DTO types plugin/query kinds as large generated enum unions; the kind
+	// here is chosen dynamically by the user, so we build the structurally-valid
+	// shape and assert the type.
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'New panel' },
+			plugin: { kind: pluginKind, spec: {} },
+			queries: [
+				{
+					kind: 'TimeSeriesQuery',
+					spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { name: 'A' } } },
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+/** Converts a UI grid item back into the spec's grid-item DTO shape. */
+export function gridItemToDTO(item: GridItemV2): DashboardGridItemDTO {
+	return {
+		x: item.x,
+		y: item.y,
+		width: item.width,
+		height: item.height,
+		content: { $ref: panelRef(item.id) },
+	};
+}
+
+/** Replace the entire items array of one section (used on panel move/resize). */
+export function replaceSectionItemsOp(
+	layoutIndex: number,
+	items: GridItemV2[],
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: replace,
+		path: `/spec/layouts/${layoutIndex}/spec/items`,
+		value: items.map(gridItemToDTO),
+	};
+}
+
+/** Replace the whole layouts array (used on section reorder — avoids move-index ambiguity). */
+export function reorderLayoutsOp(
+	layouts: DashboardtypesLayoutDTO[],
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: replace, path: '/spec/layouts', value: layouts };
+}
+
+/** An empty titled Grid layout (one section). */
+export function newGridLayout(title: string): DashboardtypesLayoutDTO {
+	return {
+		kind: 'Grid' as DashboardtypesLayoutDTO['kind'],
+		spec: { display: { title, collapse: { open: true } }, items: [] },
+	};
+}
+
+/** Append a new, empty titled Grid section. */
+export function addSectionOp(
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: add, path: '/spec/layouts/-', value: newGridLayout(title) };
+}
+
+interface AddPanelToSectionArgs {
+	panelId: string;
+	panel: DashboardtypesPanelDTO;
+	layoutIndex: number;
+	item: DashboardGridItemDTO;
+}
+
+/** Add a panel to `spec.panels` and an item ref into a section, as one atomic patch. */
+export function addPanelToSectionOps({
+	panelId,
+	panel,
+	layoutIndex,
+	item,
+}: AddPanelToSectionArgs): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		{ op: add, path: `/spec/panels/${panelId}`, value: panel },
+		{ op: add, path: `/spec/layouts/${layoutIndex}/spec/items/-`, value: item },
+	];
+}
+
+interface MovePanelArgs {
+	sourceIndex: number;
+	sourceItems: GridItemV2[];
+	targetIndex: number;
+	targetItems: GridItemV2[];
+}
+
+/** Move a panel's item ref from one section to another (panel stays in spec.panels). */
+export function movePanelBetweenSectionsOps({
+	sourceIndex,
+	sourceItems,
+	targetIndex,
+	targetItems,
+}: MovePanelArgs): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		replaceSectionItemsOp(sourceIndex, sourceItems),
+		replaceSectionItemsOp(targetIndex, targetItems),
+	];
+}
+
+/** Rename an existing section's title. */
+export function renameSectionOp(
+	layoutIndex: number,
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: replace,
+		path: `/spec/layouts/${layoutIndex}/spec/display/title`,
+		value: title,
+	};
+}
+
+/** Persist a section's collapse state. `add` safely replaces the collapse object if present. */
+export function setSectionCollapseOp(
+	layoutIndex: number,
+	open: boolean,
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: add,
+		path: `/spec/layouts/${layoutIndex}/spec/display/collapse`,
+		value: { open },
+	};
+}
+
+/**
+ * First-section migration: give an existing untitled (free-flowing) layout a
+ * title, turning it into a section in place while preserving its panels.
+ */
+export function titleUntitledSectionOp(
+	layoutIndex: number,
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: add,
+		path: `/spec/layouts/${layoutIndex}/spec/display`,
+		value: { title, collapse: { open: true } },
+	};
+}
+
+/** Remove a section. Panel cleanup (orphaned refs) is handled by the caller. */
+export function removeSectionOp(
+	layoutIndex: number,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: remove, path: `/spec/layouts/${layoutIndex}` };
+}
+
+/** Remove a panel definition from `spec.panels`. */
+export function removePanelOp(
+	panelId: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: remove, path: `/spec/panels/${panelId}` };
+}

frontend/src/container/DashboardContainerV2/utils.ts

@@ -0,0 +1,157 @@
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	DashboardtypesLayoutDTO,
+	DashboardtypesPanelDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type V2Dashboard = DashboardtypesGettableDashboardV2DTO;
+
+export interface GridItemV2 {
+	id: string;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	panel: DashboardtypesPanelDTO | undefined;
+}
+
+const PANEL_REF_PREFIX = '#/spec/panels/';
+
+export function extractPanelIdFromRef(ref: string | undefined): string | null {
+	if (!ref) {
+		return null;
+	}
+	if (!ref.startsWith(PANEL_REF_PREFIX)) {
+		return null;
+	}
+	return ref.slice(PANEL_REF_PREFIX.length);
+}
+
+export function flattenGridLayout(
+	layouts: DashboardtypesLayoutDTO[] | undefined | null,
+	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
+): GridItemV2[] {
+	if (!layouts?.length) {
+		return [];
+	}
+
+	const items: GridItemV2[] = [];
+	layouts.forEach((layoutEnvelope) => {
+		if (layoutEnvelope?.kind !== 'Grid') {
+			return;
+		}
+		const gridItems = layoutEnvelope.spec?.items ?? [];
+		gridItems.forEach((item) => {
+			const id = extractPanelIdFromRef(item.content?.$ref);
+			if (!id) {
+				return;
+			}
+			items.push({
+				id,
+				x: item.x ?? 0,
+				y: item.y ?? 0,
+				width: item.width ?? 6,
+				height: item.height ?? 6,
+				panel: panels?.[id],
+			});
+		});
+	});
+
+	return items;
+}
+
+/**
+ * A section corresponds to one entry in `spec.layouts`. If the Grid has a
+ * `display.title`, it renders with a collapsible header; otherwise it is a
+ * "default" untitled section (visually just the grid).
+ */
+export interface DashboardSectionV2 {
+	/**
+	 * Stable identity used for React keys and dnd-kit sortable item ids. Derived
+	 * from the section's content (its first panel ref) so it survives reordering
+	 * — unlike the positional `layoutIndex`. See `getSectionStableId`.
+	 */
+	id: string;
+	/** Position of this section's Grid in `spec.layouts`. All JSON-Patch ops target by this. */
+	layoutIndex: number;
+	title: string | undefined;
+	open: boolean;
+	items: GridItemV2[];
+	repeatVariable: string | undefined;
+}
+
+/**
+ * Derives a stable id for a section from its content. Reordering sections changes
+ * their `layoutIndex` but not their content, so keying off the first panel ref
+ * keeps React component instances (and any local state) bound to the right
+ * section across a reorder. Empty sections fall back to a positional id — they
+ * are rarely reordered, and a future backend `id` on the layout spec is the
+ * proper long-term fix.
+ */
+export function getSectionStableId(
+	items: GridItemV2[],
+	layoutIndex: number,
+): string {
+	if (items.length > 0) {
+		return `sec-${items[0].id}`;
+	}
+	return `sec-empty-${layoutIndex}`;
+}
+
+export function layoutsToSections(
+	layouts: DashboardtypesLayoutDTO[] | undefined | null,
+	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
+): DashboardSectionV2[] {
+	if (!layouts?.length) {
+		return [];
+	}
+
+	return layouts
+		.map((layoutEnvelope, idx) => {
+			if (layoutEnvelope?.kind !== 'Grid') {
+				return null;
+			}
+			const spec = layoutEnvelope.spec;
+			const items: GridItemV2[] = (spec?.items ?? [])
+				.map((item) => {
+					const id = extractPanelIdFromRef(item.content?.$ref);
+					if (!id) {
+						return null;
+					}
+					return {
+						id,
+						x: item.x ?? 0,
+						y: item.y ?? 0,
+						width: item.width ?? 6,
+						height: item.height ?? 6,
+						panel: panels?.[id],
+					};
+				})
+				.filter((it): it is GridItemV2 => it !== null);
+
+			const title = spec?.display?.title;
+			// `open` defaults to true when no collapse field is set (the section
+			// is expanded by default).
+			const open = spec?.display?.collapse?.open !== false;
+
+			return {
+				id: getSectionStableId(items, idx),
+				layoutIndex: idx,
+				title,
+				open,
+				items,
+				repeatVariable: spec?.repeatVariable,
+			};
+		})
+		.filter((s): s is DashboardSectionV2 => s !== null);
+}
+
+export function getPanelKindLabel(
+	panel: DashboardtypesPanelDTO | undefined,
+): string {
+	const kind = panel?.spec?.plugin?.kind;
+	if (!kind) {
+		return 'unknown';
+	}
+	return kind.replace(/^signoz\//, '');
+}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -9,8 +9,6 @@ import { useOptionsMenu } from 'container/OptionsMenu';
 import { ArrowUp10, Minus } from '@signozhq/icons';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
-import QueryStatus from './QueryStatus';
-
 function LogsActionsContainer({
 	listQuery,
 	selectedPanelType,
@@ -18,10 +16,6 @@ function LogsActionsContainer({
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
-	isFetching,
-	isLoading,
-	isError,
-	isSuccess,
 }: {
 	listQuery: any;
 	selectedPanelType: PANEL_TYPES;
@@ -29,10 +23,6 @@ function LogsActionsContainer({
 	handleToggleFrequencyChart: () => void;
 	orderBy: string;
 	setOrderBy: (value: string) => void;
-	isFetching: boolean;
-	isLoading: boolean;
-	isError: boolean;
-	isSuccess: boolean;
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -106,17 +96,6 @@ function LogsActionsContainer({
 							</div>
 						</>
 					)}
-
-					{(selectedPanelType === PANEL_TYPES.TIME_SERIES ||
-						selectedPanelType === PANEL_TYPES.TABLE) && (
-						<div className="query-stats">
-							<QueryStatus
-								loading={isLoading || isFetching}
-								error={isError}
-								success={isSuccess}
-							/>
-						</div>
-					)}
 				</div>
 			</div>
 		</div>

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -155,40 +155,6 @@
 				}
 			}
 
-			.query-stats {
-				display: flex;
-				align-items: center;
-				gap: 12px;
-
-				align-self: flex-end;
-
-				.rows {
-					color: var(--l2-foreground);
-					font-family: 'Geist Mono';
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 150% */
-					letter-spacing: 0.36px;
-				}
-
-				.divider {
-					width: 1px;
-					height: 14px;
-					background: var(--l3-background);
-				}
-
-				.time {
-					color: var(--l2-foreground);
-					font-family: 'Geist Mono';
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 150% */
-					letter-spacing: 0.36px;
-				}
-			}
-
 			.ant-btn {
 				border: none;
 			}

frontend/src/container/LogsExplorerViews/QueryStatus.styles.scss

@@ -1,4 +0,0 @@
-.query-status {
-	display: flex;
-	align-items: center;
-}

frontend/src/container/LogsExplorerViews/QueryStatus.tsx

@@ -1,49 +0,0 @@
-import React, { useMemo } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { LoaderCircle, CircleCheck } from '@signozhq/icons';
-import { Spin } from 'antd';
-
-import solidXCircleUrl from '@/assets/Icons/solid-x-circle.svg';
-
-import './QueryStatus.styles.scss';
-
-interface IQueryStatusProps {
-	loading: boolean;
-	error: boolean;
-	success: boolean;
-}
-
-export default function QueryStatus(
-	props: IQueryStatusProps,
-): React.ReactElement {
-	const { loading, error, success } = props;
-
-	const content = useMemo((): React.ReactElement => {
-		if (loading) {
-			return (
-				<Spin
-					spinning
-					size="small"
-					indicator={<LoaderCircle className="animate-spin" size="md" />}
-				/>
-			);
-		}
-		if (error) {
-			return (
-				<img
-					src={solidXCircleUrl}
-					alt="header"
-					className="error"
-					style={{ height: '14px', width: '14px' }}
-				/>
-			);
-		}
-		if (success) {
-			return (
-				<CircleCheck className="success" size={14} fill={Color.BG_ROBIN_500} />
-			);
-		}
-		return <div />;
-	}, [error, loading, success]);
-	return <div className="query-status">{content}</div>;
-}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -160,7 +160,7 @@ function LogsExplorerViewsContainer({
 		'custom',
 	);
 
-	const { data, isLoading, isFetching, isError, isSuccess, error } =
+	const { data, isLoading, isFetching, isError, error } =
 		useGetExplorerQueryRange(
 			requestData,
 			selectedPanelType,
@@ -437,10 +437,6 @@ function LogsExplorerViewsContainer({
 						handleToggleFrequencyChart={handleToggleFrequencyChart}
 						orderBy={orderBy}
 						setOrderBy={setOrderBy}
-						isFetching={isFetching}
-						isLoading={isLoading}
-						isError={isError}
-						isSuccess={isSuccess}
 					/>
 				)}
 

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -59,7 +59,7 @@ function AllAttributes({
 	);
 
 	const attributes = useMemo(
-		() => attributesData?.data.attributes ?? [],
+		() => attributesData?.data?.attributes ?? [],
 		[attributesData],
 	);
 

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -56,7 +56,7 @@ function MetricDetails({
 	);
 
 	const metadata = useMemo(() => {
-		if (!metricMetadataResponse) {
+		if (!metricMetadataResponse?.data) {
 			return null;
 		}
 		const { type, description, unit, temporality, isMonotonic } =

frontend/src/container/ResetPassword/ResetPassword.styles.scss

@@ -21,6 +21,10 @@
 			justify-content: center;
 			margin-bottom: 8px;
 			color: var(--semantic-primary-foreground);
+
+			&--error {
+				color: var(--destructive);
+			}
 		}
 
 		.reset-password-header-title {

frontend/src/container/ResetPassword/TokenError.tsx

@@ -0,0 +1,67 @@
+import { CircleAlert } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import AuthError from 'components/AuthError/AuthError';
+import AuthPageContainer from 'components/AuthPageContainer';
+import APIError from 'types/api/error';
+
+import './ResetPassword.styles.scss';
+
+interface TokenErrorContent {
+	title: string;
+	subtitle: string;
+}
+
+function getErrorContent(error?: APIError): TokenErrorContent {
+	const code = error?.getErrorCode();
+
+	if (code === 'reset_password_token_expired') {
+		return {
+			title: 'Reset Password token is expired',
+			subtitle:
+				'Password reset links are single-use and expire after a set period. Please request a new password reset link.',
+		};
+	}
+
+	if (code === 'reset_password_token_not_found') {
+		return {
+			title: 'Invalid Reset Link',
+			subtitle:
+				'This reset password link is invalid or has already been used. Please request a new password reset link.',
+		};
+	}
+
+	return {
+		title: 'Reset Link Unavailable',
+		subtitle:
+			'We could not validate your reset password link. Please request a new one.',
+	};
+}
+
+interface TokenErrorProps {
+	error?: APIError;
+}
+
+function TokenError({ error }: TokenErrorProps): JSX.Element {
+	const { title, subtitle } = getErrorContent(error);
+
+	return (
+		<AuthPageContainer>
+			<div className="reset-password-card reset-password-card--centered">
+				<div className="reset-password-header">
+					<div className="reset-password-header-icon reset-password-header-icon--error">
+						<CircleAlert size={32} />
+					</div>
+					<Typography.Title level={4} className="reset-password-header-title">
+						{title}
+					</Typography.Title>
+					<Typography.Text className="reset-password-header-subtitle">
+						{subtitle}
+					</Typography.Text>
+				</div>
+				{error && <AuthError error={error} />}
+			</div>
+		</AuthPageContainer>
+	);
+}
+
+export default TokenError;

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

@@ -1,4 +1,3 @@
-import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { rest, server } from 'mocks-server/server';
@@ -17,10 +16,6 @@ jest.mock('lib/history', () => ({
 	},
 }));
 
-jest.mock('api/utils', () => ({
-	Logout: jest.fn(),
-}));
-
 const mockSuccessNotification = jest.fn();
 const mockErrorNotification = jest.fn();
 
@@ -70,17 +65,6 @@ describe('ResetPassword Component', () => {
 			).toBeInTheDocument();
 			expect(screen.getByText(/signoz 1\.0\.0/i)).toBeInTheDocument();
 		});
-
-		it('redirects to login when token is missing', () => {
-			window.history.pushState({}, '', '/password-reset');
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset',
-			});
-
-			expect(Logout).toHaveBeenCalled();
-			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
-		});
 	});
 
 	describe('Form Validation', () => {

frontend/src/container/ResetPassword/index.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-use';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { Form, Input as AntdInput } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Logout } from 'api/utils';
 import resetPasswordApi from 'api/v1/factor_password/resetPassword';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
@@ -38,13 +37,6 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 	const { notifications } = useNotifications();
 
 	const [form] = Form.useForm<FormValues>();
-	useEffect(() => {
-		if (!token) {
-			Logout();
-			history.push(ROUTES.LOGIN);
-		}
-	}, [token]);
-
 	const handleFormSubmit: () => Promise<void> = async () => {
 		try {
 			setLoading(true);

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -1,5 +1,47 @@
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Typography } from '@signozhq/ui/typography';
+import { useGetDashboardV2 } from 'api/generated/services/dashboard';
+import Spinner from 'components/Spinner';
+import DashboardContainerV2 from 'container/DashboardContainerV2';
+
 function DashboardPageV2(): JSX.Element {
-	return <>DashboardPageV2</>;
+	const { dashboardId } = useParams<{ dashboardId: string }>();
+
+	const { data, isLoading, isError, error, refetch } = useGetDashboardV2({
+		id: dashboardId,
+	});
+
+	const dashboard = data?.data;
+	const name = dashboard?.spec?.display?.name;
+
+	useEffect(() => {
+		if (name) {
+			document.title = name;
+		}
+	}, [name]);
+
+	if (isLoading) {
+		return <Spinner tip="Loading dashboard..." />;
+	}
+
+	if (isError) {
+		return (
+			<div style={{ padding: 24 }}>
+				<Typography.Title>Failed to load dashboard</Typography.Title>
+				<Typography.Text>{(error as Error)?.message}</Typography.Text>
+			</div>
+		);
+	}
+
+	return (
+		<DashboardContainerV2
+			dashboard={dashboard}
+			onRefetch={(): void => {
+				refetch();
+			}}
+		/>
+	);
 }
 
 export default DashboardPageV2;

frontend/src/pages/ResetPassword/__tests__/ResetPasswordPage.test.tsx

@@ -0,0 +1,155 @@
+import { Logout } from 'api/utils';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { createErrorResponse, rest, server } from 'mocks-server/server';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import ResetPassword from '../index';
+
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		push: jest.fn(),
+		location: { search: '' },
+	},
+}));
+
+jest.mock('api/utils', () => ({
+	Logout: jest.fn().mockResolvedValue(undefined),
+}));
+
+const VERIFY_TOKEN_ENDPOINT = '*/api/v2/reset_password_tokens/verify';
+const VERSION_ENDPOINT = '*/version';
+
+const mockHistoryPush = history.push as jest.MockedFunction<
+	typeof history.push
+>;
+
+const successVerifyResponse = {
+	data: { id: 'token-id', token: 'valid-token' },
+};
+
+const successVersionResponse = {
+	version: '0.0.1',
+	ee: 'Y',
+	setupCompleted: true,
+};
+
+describe('ResetPassword Page', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		server.use(
+			rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(successVersionResponse)),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	describe('Token validation on page load', () => {
+		it('shows spinner then form when token is valid', async () => {
+			server.use(
+				rest.post(VERIFY_TOKEN_ENDPOINT, (_, res, ctx) =>
+					res(ctx.delay(50), ctx.status(200), ctx.json(successVerifyResponse)),
+				),
+			);
+
+			window.history.pushState({}, '', '/password-reset?token=valid-token');
+			render(<ResetPassword />, undefined, {
+				initialRoute: '/password-reset?token=valid-token',
+			});
+
+			// Loading state: spinner visible, form and error absent
+			expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
+			expect(screen.queryByTestId('password')).not.toBeInTheDocument();
+			expect(
+				screen.queryByText(/reset password token is expired/i),
+			).not.toBeInTheDocument();
+
+			// After verification resolves: form is shown
+			await waitFor(() => {
+				expect(screen.getByTestId('password')).toBeInTheDocument();
+			});
+			expect(screen.getByTestId('confirmPassword')).toBeInTheDocument();
+		});
+
+		it('shows "Invalid Reset Link" when token is not found (404)', async () => {
+			server.use(
+				rest.post(
+					VERIFY_TOKEN_ENDPOINT,
+					createErrorResponse(
+						404,
+						'reset_password_token_not_found',
+						'reset password token does not exist',
+					),
+				),
+			);
+
+			window.history.pushState({}, '', '/password-reset?token=invalid-token');
+			render(<ResetPassword />, undefined, {
+				initialRoute: '/password-reset?token=invalid-token',
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText(/invalid reset link/i)).toBeInTheDocument();
+			});
+
+			expect(
+				screen.getByText(/invalid or has already been used/i),
+			).toBeInTheDocument();
+			expect(
+				screen.getByText(/reset password token does not exist/i),
+			).toBeInTheDocument();
+		});
+
+		it('shows "token is expired" when token is expired (401) without redirecting to login', async () => {
+			server.use(
+				rest.post(
+					VERIFY_TOKEN_ENDPOINT,
+					createErrorResponse(
+						401,
+						'reset_password_token_expired',
+						'reset password token has expired',
+					),
+				),
+			);
+
+			window.history.pushState({}, '', '/password-reset?token=expired-token');
+			render(<ResetPassword />, undefined, {
+				initialRoute: '/password-reset?token=expired-token',
+			});
+
+			await waitFor(() => {
+				expect(
+					screen.getByText(/reset password token is expired/i),
+				).toBeInTheDocument();
+			});
+
+			expect(
+				screen.getByText(/single-use and expire after a set period/i),
+			).toBeInTheDocument();
+			expect(
+				screen.getByText(/reset password token has expired/i),
+			).toBeInTheDocument();
+			// 401 from this endpoint must NOT trigger logout/redirect
+			expect(mockHistoryPush).not.toHaveBeenCalledWith(ROUTES.LOGIN);
+			expect(Logout).not.toHaveBeenCalled();
+		});
+
+		it('redirects to login when no token is in the URL', async () => {
+			window.history.pushState({}, '', '/password-reset');
+			render(<ResetPassword />, undefined, {
+				initialRoute: '/password-reset',
+			});
+
+			await waitFor(() => {
+				expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+			});
+
+			expect(Logout).toHaveBeenCalled();
+		});
+	});
+});

frontend/src/pages/ResetPassword/index.tsx

@@ -1,8 +1,17 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
+import { useLocation } from 'react-use';
+import { AxiosError } from 'axios';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import getUserVersion from 'api/v1/version/get';
+import { verifyResetPasswordToken } from 'api/generated/services/users';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { Logout } from 'api/utils';
 import Spinner from 'components/Spinner';
 import ResetPasswordContainer from 'container/ResetPassword';
+import TokenError from 'container/ResetPassword/TokenError';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
@@ -10,24 +19,65 @@ import APIError from 'types/api/error';
 function ResetPassword(): JSX.Element {
 	const { user, isLoggedIn } = useAppContext();
 	const { showErrorModal } = useErrorModal();
+	const { search } = useLocation();
+	const params = new URLSearchParams(search || '');
+	const token = params.get('token') || '';
 
-	const { data, isLoading, error } = useQuery({
+	useEffect(() => {
+		if (!token) {
+			void Logout();
+			history.push(ROUTES.LOGIN);
+		}
+	}, [token]);
+
+	const {
+		data: versionData,
+		isLoading: isVersionLoading,
+		error: versionError,
+	} = useQuery({
 		queryFn: getUserVersion,
 		queryKey: ['getUserVersion', user?.accessJwt],
 		enabled: !isLoggedIn,
 	});
 
-	useEffect(() => {
-		if (error) {
-			showErrorModal(error as APIError);
-		}
-	}, [error, showErrorModal]);
+	const {
+		isLoading: isVerifying,
+		isError: isTokenError,
+		error: tokenError,
+	} = useQuery<
+		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
+		AxiosError<RenderErrorResponseDTO>
+	>({
+		queryFn: () => verifyResetPasswordToken({ token }),
+		queryKey: ['verifyResetPasswordToken', token],
+		enabled: !!token,
+		retry: false,
+	});
 
-	if (isLoading) {
+	const tokenApiError = useMemo(
+		() => convertToApiError(tokenError),
+		[tokenError],
+	);
+
+	useEffect(() => {
+		if (versionError) {
+			showErrorModal(versionError as APIError);
+		}
+	}, [versionError, showErrorModal]);
+
+	if (!token) {
 		return <Spinner tip="Loading..." />;
 	}
 
-	return <ResetPasswordContainer version={data?.data.version || ''} />;
+	if (isVersionLoading || isVerifying) {
+		return <Spinner tip="Validating your reset password token..." />;
+	}
+
+	if (isTokenError) {
+		return <TokenError error={tokenApiError} />;
+	}
+
+	return <ResetPasswordContainer version={versionData?.data.version || ''} />;
 }
 
 export default ResetPassword;

pkg/telemetrytraces/statement_builder.go

@@ -124,8 +124,10 @@ func (b *traceQueryStatementBuilder) Build(
 		-------------------------------- End of tech debt ----------------------------
 	*/
 
-	query = b.adjustKeys(ctx, keys, query, requestType)
-
+	for _, action := range adjustTraceKeys(keys, &query, requestType) {
+		// TODO: change to debug level once we are confident about the behavior
+		b.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
+	}
 	// Create SQL builder
 	q := sqlbuilder.NewSelectBuilder()
 
@@ -193,24 +195,30 @@ func getKeySelectors(query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation])
 	return keySelectors
 }
 
-func (b *traceQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[string][]*telemetrytypes.TelemetryFieldKey, query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation], requestType qbtypes.RequestType) qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation] {
-
-	// add deprecated fields only during statement building
-	// why?
-	// 1. to not fail filter expression that use deprecated cols
-	// 2. this could have been moved to metadata fetching itself, however, that
-	// would mean, they also show up in suggestions we we don't want to do
-	// 3. reason for not doing a simple append is to keep intrinsic/calculated field first so that it gets
-	// priority in multi_if sql expression
+// mergeDeprecatedTraceKeys prepends deprecated intrinsic/calculated trace field
+// definitions to the keys map. We do this during statement building, not at
+// metadata fetch time, because:
+//  1. Filter expressions that reference deprecated columns must continue to
+//     resolve — otherwise they fail with "key not found".
+//  2. Doing it at metadata fetch time would also surface deprecated keys in
+//     autocomplete suggestions, which we don't want.
+//  3. We prepend (not append) so the intrinsic/calculated entry wins ordering
+//     in the multi_if SQL expression.
+func mergeDeprecatedTraceKeys(keys map[string][]*telemetrytypes.TelemetryFieldKey) {
 	for fieldKeyName, fieldKey := range IntrinsicFieldsDeprecated {
 		keys[fieldKeyName] = append([]*telemetrytypes.TelemetryFieldKey{&fieldKey}, keys[fieldKeyName]...)
 	}
 	for fieldKeyName, fieldKey := range CalculatedFieldsDeprecated {
 		keys[fieldKeyName] = append([]*telemetrytypes.TelemetryFieldKey{&fieldKey}, keys[fieldKeyName]...)
 	}
+}
+
+func adjustTraceKeys(keys map[string][]*telemetrytypes.TelemetryFieldKey, query *qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation], requestType qbtypes.RequestType) []string {
+
+	mergeDeprecatedTraceKeys(keys)
 
 	// Adjust keys for alias expressions in aggregations
-	actions := querybuilder.AdjustKeysForAliasExpressions(&query, requestType)
+	actions := querybuilder.AdjustKeysForAliasExpressions(query, requestType)
 
 	/*
 		Check if user is using multiple contexts or data types for same field name
@@ -228,7 +236,7 @@ func (b *traceQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[st
 		and make it just http.status_code and remove the duplicate entry.
 	*/
 
-	actions = append(actions, querybuilder.AdjustDuplicateKeys(&query)...)
+	actions = append(actions, querybuilder.AdjustDuplicateKeys(query)...)
 
 	/*
 		Now adjust each key to have correct context and data type
@@ -236,24 +244,20 @@ func (b *traceQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[st
 		Reason for doing this is to not create an unexpected behavior for users
 	*/
 	for idx := range query.SelectFields {
-		actions = append(actions, b.adjustKey(&query.SelectFields[idx], keys)...)
+		actions = append(actions, adjustTraceKey(&query.SelectFields[idx], keys)...)
 	}
 	for idx := range query.GroupBy {
-		actions = append(actions, b.adjustKey(&query.GroupBy[idx].TelemetryFieldKey, keys)...)
+		actions = append(actions, adjustTraceKey(&query.GroupBy[idx].TelemetryFieldKey, keys)...)
 	}
 	for idx := range query.Order {
-		actions = append(actions, b.adjustKey(&query.Order[idx].Key.TelemetryFieldKey, keys)...)
+		actions = append(actions, adjustTraceKey(&query.Order[idx].Key.TelemetryFieldKey, keys)...)
 	}
 
-	for _, action := range actions {
-		// TODO: change to debug level once we are confident about the behavior
-		b.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
-	}
-
-	return query
+	return actions
 }
 
-func (b *traceQueryStatementBuilder) adjustKey(key *telemetrytypes.TelemetryFieldKey, keys map[string][]*telemetrytypes.TelemetryFieldKey) []string {
+// adjustTraceKey resolves a single TelemetryFieldKey against the keys map.
+func adjustTraceKey(key *telemetrytypes.TelemetryFieldKey, keys map[string][]*telemetrytypes.TelemetryFieldKey) []string {
 
 	// for recording actions taken
 	actions := []string{}

pkg/telemetrytraces/stmt_builder_test.go

@@ -1125,28 +1125,13 @@ func TestAdjustKey(t *testing.T) {
 		},
 	}
 
-	fm := NewFieldMapper()
-	cb := NewConditionBuilder(fm)
-	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	fl := flaggertest.New(t)
-	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
-	statementBuilder := NewTraceQueryStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		aggExprRewriter,
-		nil,
-		fl,
-	)
-
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
 			// Create a copy of the input key to avoid modifying the original
 			key := c.inputKey
 
 			// Call adjustKey
-			statementBuilder.adjustKey(&key, c.keysMap)
+			adjustTraceKey(&key, c.keysMap)
 
 			// Verify the key was adjusted as expected
 			require.Equal(t, c.expectedKey.Name, key.Name, "key name should match")
@@ -1399,21 +1384,6 @@ func TestAdjustKeys(t *testing.T) {
 		},
 	}
 
-	fm := NewFieldMapper()
-	cb := NewConditionBuilder(fm)
-	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	fl := flaggertest.New(t)
-	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
-	statementBuilder := NewTraceQueryStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		aggExprRewriter,
-		nil,
-		fl,
-	)
-
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
 			// Create a deep copy of the keys map to avoid modifying the original
@@ -1424,7 +1394,7 @@ func TestAdjustKeys(t *testing.T) {
 			}
 
 			// Call adjustKeys
-			c.query = statementBuilder.adjustKeys(context.Background(), keysMapCopy, c.query, qbtypes.RequestTypeScalar)
+			adjustTraceKeys(keysMapCopy, &c.query, qbtypes.RequestTypeScalar)
 
 			// Verify select fields were adjusted
 			if c.expectedSelectFields != nil {

pkg/telemetrytraces/trace_operator_cte_builder.go

@@ -216,6 +216,13 @@ func (b *traceOperatorCTEBuilder) buildQueryCTE(ctx context.Context, queryName s
 	}
 	b.stmtBuilder.logger.DebugContext(ctx, "Retrieved keys for query", slog.String("query_name", queryName), slog.Int("keys_count", len(keys)))
 
+	// The CTE only selects spans matching the filter. Aggregations, group by
+	// and order by run later in buildFinalQuery, so RequestTypeRaw is fine here.
+	for _, action := range adjustTraceKeys(keys, query, qbtypes.RequestTypeRaw) {
+		// TODO: change to debug level once we are confident about the behavior
+		b.stmtBuilder.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
+	}
+
 	// Build resource filter CTE for this specific query
 	resourceFilterCTEName := fmt.Sprintf("__resource_filter_%s", cteName)
 	resourceStmt, err := b.buildResourceFilterCTE(ctx, *query)
@@ -417,21 +424,28 @@ func (b *traceOperatorCTEBuilder) buildNotCTE(leftCTE, rightCTE string) (string,
 }
 
 func (b *traceOperatorCTEBuilder) buildFinalQuery(ctx context.Context, selectFromCTE string, requestType qbtypes.RequestType) (*qbtypes.Statement, error) {
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+	b.adjustOperatorKeys(ctx, keys, requestType)
+
 	switch requestType {
 	case qbtypes.RequestTypeRaw:
-		return b.buildListQuery(ctx, selectFromCTE)
+		return b.buildListQuery(ctx, selectFromCTE, keys)
 	case qbtypes.RequestTypeTimeSeries:
-		return b.buildTimeSeriesQuery(ctx, selectFromCTE)
+		return b.buildTimeSeriesQuery(ctx, selectFromCTE, keys)
 	case qbtypes.RequestTypeTrace:
-		return b.buildTraceQuery(ctx, selectFromCTE)
+		return b.buildTraceQuery(ctx, selectFromCTE, keys)
 	case qbtypes.RequestTypeScalar:
-		return b.buildScalarQuery(ctx, selectFromCTE)
+		return b.buildScalarQuery(ctx, selectFromCTE, keys)
 	default:
 		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported request type: %s", requestType)
 	}
 }
 
-func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
 	// Select core fields
@@ -453,22 +467,6 @@ func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFrom
 		"parent_span_id": true,
 	}
 
-	// Get keys for selectFields
-	keySelectors := b.getKeySelectors()
-	for _, field := range b.operator.SelectFields {
-		keySelectors = append(keySelectors, &telemetrytypes.FieldKeySelector{
-			Name:          field.Name,
-			Signal:        telemetrytypes.SignalTraces,
-			FieldContext:  field.FieldContext,
-			FieldDataType: field.FieldDataType,
-		})
-	}
-
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	// Add selectFields using ColumnExpressionFor since we now have all base table columns
 	for _, field := range b.operator.SelectFields {
 		if selectedFields[field.Name] {
@@ -518,6 +516,44 @@ func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFrom
 	}, nil
 }
 
+// adjustOperatorKeys runs the same key adjustments as adjustTraceKeys, but on
+// the operator's own fields. The operator has a different struct shape than
+// QueryBuilderQuery, so we copy the relevant fields into a temp query, run
+// the shared helpers, and copy the results back.
+func (b *traceOperatorCTEBuilder) adjustOperatorKeys(ctx context.Context, keys map[string][]*telemetrytypes.TelemetryFieldKey, requestType qbtypes.RequestType) {
+	mergeDeprecatedTraceKeys(keys)
+
+	tmp := qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+		Aggregations: b.operator.Aggregations,
+		SelectFields: b.operator.SelectFields,
+		GroupBy:      b.operator.GroupBy,
+		Order:        b.operator.Order,
+	}
+
+	actions := querybuilder.AdjustKeysForAliasExpressions(&tmp, requestType)
+	actions = append(actions, querybuilder.AdjustDuplicateKeys(&tmp)...)
+
+	for idx := range tmp.SelectFields {
+		actions = append(actions, adjustTraceKey(&tmp.SelectFields[idx], keys)...)
+	}
+	for idx := range tmp.GroupBy {
+		actions = append(actions, adjustTraceKey(&tmp.GroupBy[idx].TelemetryFieldKey, keys)...)
+	}
+	for idx := range tmp.Order {
+		actions = append(actions, adjustTraceKey(&tmp.Order[idx].Key.TelemetryFieldKey, keys)...)
+	}
+
+	// Copy back the slices the helpers can rewrite.
+	b.operator.Aggregations = tmp.Aggregations
+	b.operator.SelectFields = tmp.SelectFields
+	b.operator.GroupBy = tmp.GroupBy
+	b.operator.Order = tmp.Order
+
+	for _, action := range actions {
+		b.stmtBuilder.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
+	}
+}
+
 func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySelector {
 	var keySelectors []*telemetrytypes.FieldKeySelector
 
@@ -545,6 +581,15 @@ func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySe
 		})
 	}
 
+	for _, sf := range b.operator.SelectFields {
+		keySelectors = append(keySelectors, &telemetrytypes.FieldKeySelector{
+			Name:          sf.Name,
+			Signal:        telemetrytypes.SignalTraces,
+			FieldContext:  sf.FieldContext,
+			FieldDataType: sf.FieldDataType,
+		})
+	}
+
 	for i := range keySelectors {
 		keySelectors[i].Signal = telemetrytypes.SignalTraces
 	}
@@ -552,7 +597,7 @@ func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySe
 	return keySelectors
 }
 
-func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
 	sb.Select(fmt.Sprintf(
@@ -560,12 +605,6 @@ func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, sele
 		int64(b.operator.StepInterval.Seconds()),
 	))
 
-	keySelectors := b.getKeySelectors()
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -644,8 +683,7 @@ func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, sele
 	combinedArgs := append(allGroupByArgs, allAggChArgs...)
 
 	// Add HAVING clause if specified
-	err = b.addHavingClause(sb)
-	if err != nil {
+	if err := b.addHavingClause(sb); err != nil {
 		return nil, err
 	}
 
@@ -672,17 +710,11 @@ func (b *traceOperatorCTEBuilder) buildTraceSummaryCTE(selectFromCTE string) {
 	b.addCTE("trace_summary", sql, args, []string{"all_spans", selectFromCTE})
 }
 
-func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
 	b.buildTraceSummaryCTE(selectFromCTE)
 
 	sb := sqlbuilder.NewSelectBuilder()
 
-	keySelectors := b.getKeySelectors()
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -764,8 +796,7 @@ func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFro
 		sb.GroupBy(groupByKeys...)
 	}
 
-	err = b.addHavingClause(sb)
-	if err != nil {
+	if err := b.addHavingClause(sb); err != nil {
 		return nil, err
 	}
 
@@ -821,15 +852,9 @@ func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFro
 	}, nil
 }
 
-func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
-	keySelectors := b.getKeySelectors()
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -911,8 +936,7 @@ func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFr
 	combinedArgs := append(allGroupByArgs, allAggChArgs...)
 
 	// Add HAVING clause if specified
-	err = b.addHavingClause(sb)
-	if err != nil {
+	if err := b.addHavingClause(sb); err != nil {
 		return nil, err
 	}
 

pkg/telemetrytraces/trace_operator_cte_builder_test.go

@@ -14,6 +14,24 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
+func newTestTraceOperatorStatementBuilder(t *testing.T) *traceOperatorStatementBuilder {
+	t.Helper()
+	fm := NewFieldMapper()
+	cb := NewConditionBuilder(fm)
+	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	fl := flaggertest.New(t)
+	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
+	traceStmtBuilder := NewTraceQueryStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore, fm, cb, aggExprRewriter, nil, fl,
+	)
+	return NewTraceOperatorStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore, fm, cb, traceStmtBuilder, aggExprRewriter, fl,
+	)
+}
+
 func TestTraceOperatorStatementBuilder(t *testing.T) {
 	cases := []struct {
 		name           string
@@ -463,32 +481,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 		},
 	}
 
-	fm := NewFieldMapper()
-	cb := NewConditionBuilder(fm)
-	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
-	fl := flaggertest.New(t)
-	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
-
-	traceStmtBuilder := NewTraceQueryStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		aggExprRewriter,
-		nil,
-		fl,
-	)
-
-	statementBuilder := NewTraceOperatorStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		traceStmtBuilder,
-		aggExprRewriter,
-		fl,
-	)
+	statementBuilder := newTestTraceOperatorStatementBuilder(t)
 
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
@@ -579,32 +572,7 @@ func TestTraceOperatorStatementBuilderErrors(t *testing.T) {
 		},
 	}
 
-	fm := NewFieldMapper()
-	cb := NewConditionBuilder(fm)
-	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
-	fl := flaggertest.New(t)
-	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
-
-	traceStmtBuilder := NewTraceQueryStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		aggExprRewriter,
-		nil,
-		fl,
-	)
-
-	statementBuilder := NewTraceOperatorStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		traceStmtBuilder,
-		aggExprRewriter,
-		fl,
-	)
+	statementBuilder := newTestTraceOperatorStatementBuilder(t)
 
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
@@ -626,3 +594,142 @@ func TestTraceOperatorStatementBuilderErrors(t *testing.T) {
 		})
 	}
 }
+
+func TestTraceOperatorStatementBuilderAdjustsKeys(t *testing.T) {
+	cases := []struct {
+		name          string
+		requestType   qbtypes.RequestType
+		operator      qbtypes.QueryBuilderTraceOperator
+		builderFilter string
+		wantSQL       string
+		wantArgs      []any
+	}{
+		{
+			name:        "deprecated duration filter in referenced builder query",
+			requestType: qbtypes.RequestTypeRaw,
+			operator: qbtypes.QueryBuilderTraceOperator{
+				Expression: "A",
+				Limit:      10,
+			},
+			builderFilter: "durationNano = '3s'",
+			wantSQL:       "duration_nano = ?",
+			wantArgs:      []any{int64(3000000000)},
+		},
+		{
+			name:        "context-prefixed aggregation alias in order by",
+			requestType: qbtypes.RequestTypeScalar,
+			operator: qbtypes.QueryBuilderTraceOperator{
+				Expression: "A",
+				Aggregations: []qbtypes.TraceAggregation{
+					{
+						Expression: "count()",
+						Alias:      "span.count_",
+					},
+				},
+				Order: []qbtypes.OrderBy{
+					{
+						Key: qbtypes.OrderByKey{
+							TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+								Name:         "count_",
+								FieldContext: telemetrytypes.FieldContextSpan,
+							},
+						},
+						Direction: qbtypes.OrderDirectionDesc,
+					},
+				},
+			},
+			wantSQL: "ORDER BY __result_0 desc",
+		},
+	}
+
+	statementBuilder := newTestTraceOperatorStatementBuilder(t)
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			err := c.operator.ParseExpression()
+			require.NoError(t, err)
+
+			filter := c.builderFilter
+			if filter == "" {
+				filter = "service.name = 'frontend'"
+			}
+
+			q, err := statementBuilder.Build(
+				context.Background(),
+				1747947419000,
+				1747983448000,
+				c.requestType,
+				c.operator,
+				&qbtypes.CompositeQuery{
+					Queries: []qbtypes.QueryEnvelope{
+						{
+							Type: qbtypes.QueryTypeBuilder,
+							Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+								Name:   "A",
+								Signal: telemetrytypes.SignalTraces,
+								Filter: &qbtypes.Filter{Expression: filter},
+							},
+						},
+					},
+				},
+			)
+
+			require.NoError(t, err)
+			require.Contains(t, q.Query, c.wantSQL)
+			for _, arg := range c.wantArgs {
+				require.Contains(t, q.Args, arg)
+			}
+		})
+	}
+}
+
+// TestTraceOperatorStatementBuilderDeduplicatesKeys checks that a trace
+// operator with the same field name listed twice in GroupBy (once with a
+// context, once without) ends up with a single column in the outer SELECT
+// and a single entry in GROUP BY.
+func TestTraceOperatorStatementBuilderDeduplicatesKeys(t *testing.T) {
+	statementBuilder := newTestTraceOperatorStatementBuilder(t)
+
+	operator := qbtypes.QueryBuilderTraceOperator{
+		Expression: "A",
+		Aggregations: []qbtypes.TraceAggregation{
+			{Expression: "count()"},
+		},
+		GroupBy: []qbtypes.GroupByKey{
+			{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+				Name:         "http.method",
+				FieldContext: telemetrytypes.FieldContextAttribute,
+			}},
+			// Same name, no context — should be merged with the entry above.
+			{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+				Name: "http.method",
+			}},
+		},
+	}
+	require.NoError(t, operator.ParseExpression())
+
+	q, err := statementBuilder.Build(
+		context.Background(),
+		1747947419000,
+		1747983448000,
+		qbtypes.RequestTypeScalar,
+		operator,
+		&qbtypes.CompositeQuery{
+			Queries: []qbtypes.QueryEnvelope{
+				{
+					Type: qbtypes.QueryTypeBuilder,
+					Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+						Name:   "A",
+						Signal: telemetrytypes.SignalTraces,
+						Filter: &qbtypes.Filter{Expression: "service.name = 'frontend'"},
+					},
+				},
+			},
+		},
+	)
+
+	require.NoError(t, err)
+
+	require.Contains(t, q.Query,
+		"SELECT toString(multiIf(mapContains(attributes_string, 'http.method') = ?, attributes_string['http.method'], NULL)) AS `http.method`, count() AS __result_0 FROM A GROUP BY `http.method` ORDER BY __result_0 DESC")
+}

pkg/web/config.go

@@ -54,16 +54,16 @@ func newConfig() factory.Config {
 		Directory: "/etc/signoz/web",
 		Settings: SettingsConfig{
 			Posthog: PosthogConfig{
-				Enabled: true,
+				Enabled: false,
 			},
 			Appcues: AppcuesConfig{
-				Enabled: true,
+				Enabled: false,
 			},
 			Sentry: SentryConfig{
-				Enabled: true,
+				Enabled: false,
 			},
 			Pylon: PylonConfig{
-				Enabled: true,
+				Enabled: false,
 			},
 		},
 	}

tests/fixtures/querier.py

@@ -459,6 +459,57 @@ def find_named_result(
     )
 
 
+def assert_scalar_value(
+    response: requests.Response,
+    name: str,
+    expected: Any,
+    *,
+    row: int = 0,
+    col: int = 0,
+) -> None:
+    """Assert that the named scalar result has `expected` at data[row][col]."""
+    result = find_named_result(response.json()["data"]["data"]["results"], name)
+    assert result is not None, f"no result for query {name}"
+    assert result["data"][row][col] == expected, f"expected {expected} at [{row}][{col}], got {result['data'][row][col]}"
+
+
+def assert_grouped_scalar(
+    response: requests.Response,
+    name: str,
+    *,
+    expected_groups: int,
+    expected_columns: int,
+    last_col_value: Any | None = None,
+) -> None:
+    """Assert grouped scalar result has the expected column count and group count.
+    If `last_col_value` is set and there is exactly one group, also assert the
+    last column of that single row equals it (a common aggregation-value check)."""
+    result = find_named_result(response.json()["data"]["data"]["results"], name)
+    assert result is not None, f"no result for query {name}"
+    columns = result["columns"]
+    rows = result["data"]
+    assert len(columns) == expected_columns, f"expected {expected_columns} columns, got {len(columns)}: {columns}"
+    assert len(rows) == expected_groups, f"expected {expected_groups} groups, got {len(rows)}: {rows}"
+    if last_col_value is not None and expected_groups == 1:
+        assert rows[0][-1] == last_col_value, f"expected last col {last_col_value}, got row {rows[0]}"
+
+
+def assert_raw_row_subset(
+    response: requests.Response,
+    name: str,
+    expected: dict[str, Any],
+    *,
+    row: int = 0,
+) -> None:
+    """Assert that the named raw result's rows[row]['data'] is a superset of `expected`."""
+    result = find_named_result(response.json()["data"]["data"]["results"], name)
+    assert result is not None, f"no result for query {name}"
+    rows = result["rows"]
+    assert rows is not None, f"no rows for query {name}"
+    data = rows[row]["data"]
+    assert expected.items() <= data.items(), f"expected subset {expected}, got data {data}"
+
+
 def build_scalar_query(
     name: str,
     signal: str,

tests/integration/tests/querier/15_trace_operator.py

@@ -25,13 +25,22 @@ returnSpansFrom="A"
 from collections.abc import Callable
 from datetime import UTC, datetime, timedelta
 from http import HTTPStatus
+from typing import Any
 
 import pytest
 import requests
 
 from fixtures import types
 from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
-from fixtures.querier import get_rows
+from fixtures.querier import (
+    assert_grouped_scalar,
+    assert_raw_row_subset,
+    assert_scalar_value,
+    format_timestamp,
+    generate_traces_with_corrupt_metadata,
+    get_rows,
+    make_query_request,
+)
 from fixtures.traces import TraceIdGenerator, Traces, TracesKind, TracesStatusCode
 
 
@@ -434,3 +443,173 @@ def test_trace_operator(
     )
     assert response.status_code == HTTPStatus.OK, f"HTTP {response.status_code}: {response.text}"
     assert case["validate"](response), f"validation failed: {response.json()}"
+
+
+def _expected_trace_subset(trace: Traces) -> dict[str, Any]:
+    return {
+        "duration_nano": trace.duration_nano,
+        "name": trace.name,
+        "parent_span_id": trace.parent_span_id,
+        "span_id": trace.span_id,
+        "timestamp": format_timestamp(trace.timestamp),
+        "trace_id": trace.trace_id,
+    }
+
+
+@pytest.mark.parametrize(
+    "payload_factory,request_type,assert_result",
+    [
+        # Case 1: CTE filter uses the deprecated intrinsic field `durationNano`.
+        pytest.param(
+            lambda traces: [
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "A",
+                        "signal": "traces",
+                        "filter": {"expression": 'durationNano = "3s"'},
+                    },
+                },
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "B",
+                        "signal": "traces",
+                        "filter": {"expression": 'durationNano = "5s"'},
+                    },
+                },
+                {
+                    "type": "builder_trace_operator",
+                    "spec": {
+                        "name": "C",
+                        "expression": "A => B",
+                        "limit": 1,
+                    },
+                },
+            ],
+            "raw",
+            lambda response, traces: assert_raw_row_subset(response, "C", _expected_trace_subset(traces[0])),
+            id="deprecated-intrinsic-filter",
+        ),
+        # Case 2: CTE filter uses the deprecated calculated field `responseStatusCode`.
+        pytest.param(
+            lambda traces: [
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "A",
+                        "signal": "traces",
+                        "filter": {"expression": 'responseStatusCode = "200"'},
+                    },
+                },
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "B",
+                        "signal": "traces",
+                        "filter": {"expression": 'durationNano = "5s"'},
+                    },
+                },
+                {
+                    "type": "builder_trace_operator",
+                    "spec": {
+                        "name": "C",
+                        "expression": "A => B",
+                        "limit": 1,
+                    },
+                },
+            ],
+            "raw",
+            lambda response, traces: assert_raw_row_subset(response, "C", _expected_trace_subset(traces[0])),
+            id="deprecated-calculated-filter",
+        ),
+        # Case 3: order by uses `count_` with fieldContext `span`, which has
+        # to be rewritten to the aggregation alias `span.count_`.
+        pytest.param(
+            lambda traces: [
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "A",
+                        "signal": "traces",
+                        "aggregations": [{"expression": "count()"}],
+                    },
+                },
+                {
+                    "type": "builder_trace_operator",
+                    "spec": {
+                        "name": "C",
+                        "expression": "A",
+                        "aggregations": [{"expression": "count()", "alias": "span.count_"}],
+                        "order": [{"key": {"name": "count_", "fieldContext": "span"}, "direction": "desc"}],
+                    },
+                },
+            ],
+            "scalar",
+            lambda response, traces: assert_scalar_value(response, "C", len(traces)),
+            id="context-prefixed-aggregation-alias-order",
+        ),
+        # Case 4: group by lists `cloud.provider` twice (once with a resource
+        # context, once without).
+        pytest.param(
+            lambda traces: [
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "A",
+                        "signal": "traces",
+                        "disabled": True,
+                        "aggregations": [{"expression": "count()"}],
+                    },
+                },
+                {
+                    "type": "builder_trace_operator",
+                    "spec": {
+                        "name": "C",
+                        "expression": "A",
+                        "aggregations": [{"expression": "count()"}],
+                        "groupBy": [
+                            {"name": "cloud.provider", "fieldContext": "resource"},
+                            {"name": "cloud.provider"},
+                        ],
+                    },
+                },
+            ],
+            "scalar",
+            lambda response, traces: assert_grouped_scalar(response, "C", expected_groups=1, expected_columns=2, last_col_value=len(traces)),
+            id="duplicate-group-by-deduplicated",
+        ),
+    ],
+)
+def test_trace_operator_with_adjusted_keys(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_traces: Callable[[list[Traces]], None],
+    payload_factory: Callable[[list[Traces]], list[dict[str, Any]]],
+    request_type: str,
+    assert_result: Callable[[requests.Response, list[Traces]], None],
+) -> None:
+    """
+    Trace operators build a CTE per referenced builder query and an outer
+    query on top. Both layers need the same key adjustment as regular trace
+    queries, otherwise deprecated keys and context-prefixed aliases don't
+    resolve.
+    """
+    traces = generate_traces_with_corrupt_metadata()
+    insert_traces(traces)
+    payload = payload_factory(traces)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = make_query_request(
+        signoz,
+        token,
+        start_ms=int((datetime.now(tz=UTC) - timedelta(minutes=5)).timestamp() * 1000),
+        end_ms=int(datetime.now(tz=UTC).timestamp() * 1000),
+        request_type=request_type,
+        queries=payload,
+    )
+
+    assert response.status_code == HTTPStatus.OK, response.text
+    assert_result(response, traces)