chore: add metric for waterfall monitoring (#11557)

* chore: add metric for waterfall monitoring

Gauge for config limit and counter to count large traces

* chore: use traces instead of tracedetail in metric name

* chore: try removing high cardinality attributes

* chore: use typed argument in logs

* chore: add another metric to get idea of trace sizes

* chore: change config namespace to trace instead of tracedetail

To make it consistant with metric namespaces

* chore: add unit to the windowed response count metric

* chore: use metrics names as per otel conventions

* chore: use constants for metric attributes

* refactor: return error on metric creation failure

* Revert "refactor: return error on metric creation failure"

This reverts commit 091c93e80b.

* chore: panic on metric initiliazation error

.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

.github/workflows/integrationci.yaml

@@ -52,6 +52,7 @@ jobs:
           - rootuser
           - serviceaccount
           - querier_json_body
+          - querier_skip_resource_fingerprint
           - ttl
         sqlstore-provider:
           - postgres

conf/example.yaml

@@ -432,7 +432,7 @@ cloudintegration:
     version: v0.0.8
 
 ##################### Trace Detail #####################
-tracedetail:
+traces:
   waterfall:
     # Number of spans returned per request when the trace is too large to show all at once.
     span_page_size: 500

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.126.1
+    image: signoz/signoz:v0.127.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.126.1
+    image: signoz/signoz:v0.127.0
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.126.1}
+    image: signoz/signoz:${VERSION:-v0.127.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.126.1}
+    image: signoz/signoz:${VERSION:-v0.127.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

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/api/v5/queryRange/convertV5Response.ts

@@ -349,7 +349,7 @@ function convertV5DataByType(
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function convertV5ResponseToLegacy(
-	v5Response: SuccessResponse<MetricRangePayloadV5>,
+	v5Response: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5>,
 	legendMap: Record<string, string>,
 	formatForWeb?: boolean,
 ): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
@@ -357,7 +357,7 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		(params as QueryRangeRequestV5)?.compositeQuery?.queries
+		params?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
 			.reduce(
 				(acc, query) => {

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/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -359,8 +359,7 @@ function CustomTimePickerPopoverContent({
 						<Clock
 							color={Color.BG_ROBIN_400}
 							className="timezone-container__clock-icon"
-							height={12}
-							width={12}
+							size={14}
 						/>
 
 						<span className="timezone__name">{timezone.name}</span>

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -27,13 +27,15 @@ function SortableField({
 	field,
 	onRemove,
 	allowDrag,
+	isRequired,
 }: {
 	field: TelemetryFieldKey;
 	onRemove: (field: TelemetryFieldKey) => void;
 	allowDrag: boolean;
+	isRequired: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: field.name });
+		useSortable({ id: field.key as string });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -53,15 +55,17 @@ function SortableField({
 				{allowDrag && <GripVertical size={14} />}
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
-			<Button
-				className={cx(styles.removeBtn, 'periscope-btn')}
-				variant="outlined"
-				color="destructive"
-				size="sm"
-				onClick={(): void => onRemove(field)}
-			>
-				Remove
-			</Button>
+			{!isRequired && (
+				<Button
+					className={cx(styles.removeBtn, 'periscope-btn')}
+					variant="outlined"
+					color="destructive"
+					size="sm"
+					onClick={(): void => onRemove(field)}
+				>
+					Remove
+				</Button>
+			)}
 		</div>
 	);
 }
@@ -71,6 +75,7 @@ interface AddedFieldsProps {
 	fields: TelemetryFieldKey[];
 	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
 	maxFields?: number;
+	requiredFields?: readonly string[];
 }
 
 function AddedFields({
@@ -78,14 +83,18 @@ function AddedFields({
 	fields,
 	onFieldsChange,
 	maxFields,
+	requiredFields = [],
 }: AddedFieldsProps): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
+	// Contract: caller (FieldsSelector) normalizes `fields` so every entry has
+	// `.key` populated. AddedFields reads it directly.
+
 	const handleDragEnd = (event: DragEndEvent): void => {
 		const { active, over } = event;
 		if (over && active.id !== over.id) {
-			const oldIndex = fields.findIndex((f) => f.name === active.id);
-			const newIndex = fields.findIndex((f) => f.name === over.id);
+			const oldIndex = fields.findIndex((f) => f.key === active.id);
+			const newIndex = fields.findIndex((f) => f.key === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};
@@ -99,7 +108,7 @@ function AddedFields({
 	);
 
 	const handleRemove = (field: TelemetryFieldKey): void => {
-		onFieldsChange(fields.filter((f) => f.name !== field.name));
+		onFieldsChange(fields.filter((f) => f.key !== field.key));
 	};
 
 	const allowDrag = inputValue.length === 0;
@@ -125,16 +134,17 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.name)}
+								items={fields.map((f) => f.key as string)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.name}
+										key={field.key}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}
+										isRequired={requiredFields.includes(field.key as string)}
 									/>
 								))}
 							</SortableContext>

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -76,11 +76,8 @@
 	min-height: 0;
 	overflow: hidden;
 
-	// Ant Skeleton.Input rendered inside the loading state — override its
-	// hard-coded width.
 	:global(.ant-skeleton-input) {
-		width: 300px;
-		margin: 8px 12px;
+		width: 50% !important;
 	}
 }
 
@@ -95,7 +92,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 6px 12px;
+	height: 36px;
+	padding: 0 12px;
 	border-radius: 4px;
 	user-select: none;
 	font-size: 13px;
@@ -132,7 +130,7 @@
 }
 
 .isDragDisabled {
-	padding: 6px 12px;
+	cursor: default;
 }
 
 .otherFieldItem {

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -5,6 +5,7 @@ import { Input } from '@signozhq/ui/input';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { FloatingPanel } from 'periscope/components/FloatingPanel';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -26,33 +27,36 @@ interface FieldsSelectorProps {
 	onClose: () => void;
 	signal: DataSource;
 	maxFields?: number;
+	requiredFields?: readonly string[];
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
 }
 
-function FieldsSelector({
-	isOpen,
+type FieldsSelectorContentProps = Omit<FieldsSelectorProps, 'isOpen'>;
+
+// Inner component: holds all hooks + UI. Gets mounted/unmounted via the
+// outer gate so opening always seeds a fresh draft from `fields`.
+// Assumes `fields` arrives normalized (key populated) — see outer gate.
+function FieldsSelectorContent({
 	title,
 	fields,
 	onFieldsChange,
 	onClose,
 	signal,
 	maxFields,
+	requiredFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
-}: FieldsSelectorProps): JSX.Element | null {
-	if (!isOpen) {
-		return null;
-	}
-
+}: FieldsSelectorContentProps): JSX.Element {
 	const resolvedHeight =
 		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
 	const resolvedPosition = defaultPosition ?? {
 		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
 		y: DEFAULT_PANEL_TOP_INSET,
 	};
+
 	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
 	const [inputValue, setInputValue] = useState('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState('');
@@ -72,15 +76,17 @@ function FieldsSelector({
 
 	const handleAdd = useCallback(
 		(field: TelemetryFieldKey): void => {
-			if (maxFields !== undefined && draftFields.length >= maxFields) {
-				return;
-			}
-			if (draftFields.some((f) => f.name === field.name)) {
-				return;
-			}
-			setDraftFields((prev) => [...prev, field]);
+			setDraftFields((prev) => {
+				if (maxFields !== undefined && prev.length >= maxFields) {
+					return prev;
+				}
+				if (prev.some((f) => f.key === field.key)) {
+					return prev;
+				}
+				return [...prev, field];
+			});
 		},
-		[draftFields, maxFields],
+		[maxFields],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -99,7 +105,7 @@ function FieldsSelector({
 		() =>
 			!(
 				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.name === fields[i]?.name)
+				draftFields.every((f, i) => f.key === fields[i]?.key)
 			),
 		[draftFields, fields],
 	);
@@ -138,6 +144,7 @@ function FieldsSelector({
 					fields={draftFields}
 					onFieldsChange={setDraftFields}
 					maxFields={maxFields}
+					requiredFields={requiredFields}
 				/>
 
 				<OtherFields
@@ -173,4 +180,27 @@ function FieldsSelector({
 	);
 }
 
+// Outer gate: normalizes `fields` once (populates `key` so downstream code
+// can read it directly) and decides whether the inner component renders.
+// When isOpen flips false→true, the inner remounts → draft state seeds fresh.
+function FieldsSelector({
+	isOpen,
+	fields,
+	...rest
+}: FieldsSelectorProps): JSX.Element | null {
+	const normalizedFields = useMemo<TelemetryFieldKey[]>(
+		() =>
+			fields.map((f) => ({
+				...f,
+				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
+			})),
+		[fields],
+	);
+
+	if (!isOpen) {
+		return null;
+	}
+	return <FieldsSelectorContent {...rest} fields={normalizedFields} />;
+}
+
 export default FieldsSelector;

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -4,6 +4,7 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
@@ -47,15 +48,22 @@ function OtherFields({
 
 	const otherFields: TelemetryFieldKey[] = useMemo(() => {
 		const suggestions = Object.values(data?.data.data.keys || {}).flat();
-		const addedNames = new Set(addedFields.map((f) => f.name));
-		return suggestions
-			.filter((attr) => !addedNames.has(attr.name))
-			.map((attr) => ({
+		// Normalize: synthesize `key` once so downstream reads can trust it.
+		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
+			(attr) => ({
 				...attr,
+				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
 				fieldDataType: attr.fieldDataType as FieldDataType,
-			}));
+			}),
+		);
+		const addedIds = new Set(
+			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
+		);
+		return normalizedSuggestions.filter(
+			(attr) => !addedIds.has(attr.key as string),
+		);
 	}, [data, addedFields]);
 
 	if (isFetching) {
@@ -64,8 +72,13 @@ function OtherFields({
 				<div className={styles.sectionHeader}>OTHER FIELDS</div>
 				<div className={styles.otherList}>
 					{Array.from({ length: 5 }).map((_, i) => (
-						// eslint-disable-next-line react/no-array-index-key
-						<Skeleton.Input active size="small" key={i} />
+						<div
+							// eslint-disable-next-line react/no-array-index-key
+							key={i}
+							className={cx(styles.fieldItem, styles.otherFieldItem)}
+						>
+							<Skeleton.Input active size="small" block />
+						</div>
 					))}
 				</div>
 			</div>
@@ -83,7 +96,7 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.name}
+									key={attr.key}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
 									<span className={styles.fieldKey}>{attr.name}</span>

frontend/src/components/FieldsSelector/__tests__/AddedFields.test.tsx

@@ -0,0 +1,111 @@
+import { render, screen } from 'tests/test-utils';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+import AddedFields from '../AddedFields';
+
+// AddedFields assumes the caller has populated `key` (the parent
+// FieldsSelector does this via its normalization useMemo). Tests pre-populate
+// it directly.
+const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
+	name,
+	signal: 'logs',
+	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
+	fieldDataType: 'string',
+	key: `${fieldContext}.${name}`,
+});
+
+describe('AddedFields — requiredFields', () => {
+	it('renders a Remove button for every field when no requiredFields are passed', () => {
+		const fields = [makeField('a'), makeField('b'), makeField('c')];
+
+		render(
+			<AddedFields inputValue="" fields={fields} onFieldsChange={jest.fn()} />,
+		);
+
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(3);
+	});
+
+	it('hides the Remove button for fields whose composite key is in requiredFields', () => {
+		const fields = [makeField('a'), makeField('b'), makeField('c')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['log.a', 'log.c']}
+			/>,
+		);
+
+		// Only 'b' is removable.
+		const removeButtons = screen.getAllByRole('button', { name: /remove/i });
+		expect(removeButtons).toHaveLength(1);
+	});
+
+	it('still renders the field name for required fields', () => {
+		const fields = [makeField('a'), makeField('b')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['log.a']}
+			/>,
+		);
+
+		expect(screen.getByText('a')).toBeInTheDocument();
+		expect(screen.getByText('b')).toBeInTheDocument();
+	});
+
+	it('locks ONLY the canonical variant — a same-name field from another context stays removable', () => {
+		// Two `body` fields with different contexts. requiredFields holds the
+		// canonical composite key only, so the attribute variant is deletable.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['log.body']}
+			/>,
+		);
+
+		// One Remove button: the attribute variant. log variant is locked.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+
+	it('does not lock anything when a bare name is passed (composite key required)', () => {
+		// Bare `body` no longer matches — matching is composite-key only now.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['body']}
+			/>,
+		);
+
+		// Neither variant locked → both removable.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(2);
+	});
+
+	it('treats requiredFields as exact composite-key match (substring does not lock)', () => {
+		const fields = [makeField('body'), makeField('body_extra')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['log.body']}
+			/>,
+		);
+
+		// 'log.body' locked, 'log.body_extra' removable.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+});

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -0,0 +1,145 @@
+import { renderHook } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
+import { IField } from 'types/api/logs/fields';
+
+import { useLogsTableColumns } from '../useLogsTableColumns';
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { formatTimezoneAdjustedTimestamp: jest.Mock } => ({
+		formatTimezoneAdjustedTimestamp: jest.fn(() => 'TS'),
+	}),
+}));
+
+const field = (name: string, type = ''): IField => ({
+	name,
+	type,
+	dataType: 'string',
+});
+
+describe('useLogsTableColumns — selectColumns-order respected', () => {
+	it('prepends stateIndicator and renders user fields in array order', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('c'), field('a'), field('b')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'c',
+			'a',
+			'b',
+		]);
+	});
+
+	it('slots body and timestamp at their position in the fields array', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [
+					field('service.name'),
+					field('body', 'log'),
+					field('request.id'),
+					field('timestamp', 'log'),
+				],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		// body/timestamp appear where the caller placed them, keyed by their
+		// composite IDs ('log.*'); contextless user fields collapse to bare name.
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'service.name',
+			'log.body',
+			'request.id',
+			'log.timestamp',
+		]);
+	});
+
+	it('renders a same-name field from another context as a DISTINCT column (no collision)', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('body', 'log'), field('body', 'attribute')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		const byId = new Map(result.current.map((c) => [c.id, c]));
+		// Attribute variant is its own column, not a duplicate 'log.body'.
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'log.body',
+			'attribute.body',
+		]);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
+	});
+
+	it('applies the same distinct-column treatment to timestamp variants', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('timestamp', 'log'), field('timestamp', 'attribute')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		const byId = new Map(result.current.map((c) => [c.id, c]));
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'log.timestamp',
+			'attribute.timestamp',
+		]);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
+	});
+
+	it('skips the synthetic "id" field name', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('id'), field('a'), field('b')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'a',
+			'b',
+		]);
+	});
+
+	it('uses the special body/timestamp coldefs (canBeHidden=false), not the generic user field def', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [
+					field('body', 'log'),
+					field('timestamp', 'log'),
+					field('user_field'),
+				],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		const byId = new Map(result.current.map((c) => [c.id, c]));
+		// body + timestamp are locked from the table-X removal pathway.
+		expect(byId.get('log.body')?.canBeHidden).toBe(false);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		// User-added fields stay removable. User field has type='' so composite
+		// collapses to bare name.
+		expect(byId.get('user_field')?.enableRemove).toBe(true);
+	});
+
+	it('renders only the stateIndicator when fields is empty', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual(['state-indicator']);
+	});
+});

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -7,6 +7,7 @@ import {
 	getSanitizedLogBody,
 } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
 import { IField } from 'types/api/logs/fields';
@@ -18,13 +19,11 @@ import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 type UseLogsTableColumnsProps = {
 	fields: IField[];
 	fontSize: FontSize;
-	appendTo?: 'center' | 'end';
 };
 
 export function useLogsTableColumns({
 	fields,
 	fontSize,
-	appendTo = 'center',
 }: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
@@ -47,74 +46,74 @@ export function useLogsTableColumns({
 			),
 		};
 
-		const fieldColumns: TableColumnDef<ILog>[] = fields
-			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
-			.map(
-				(f): TableColumnDef<ILog> => ({
-					id: f.name,
-					header: f.name,
-					accessorFn: (log): unknown => FlatLogData(log)[f.name],
-					enableRemove: true,
-					width: { min: 192 },
-					cell: ({ value }): ReactElement => (
-						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-					),
-				}),
-			);
+		const timestampCol: TableColumnDef<ILog> = {
+			id: buildCompositeKey('timestamp', 'log'),
+			header: 'Timestamp',
+			accessorFn: (log): unknown => log.timestamp,
+			canBeHidden: false,
+			enableRemove: false,
+			width: { default: 170, min: 170 },
+			cell: ({ value }): ReactElement => {
+				const ts = value as string | number;
+				const formatted =
+					typeof ts === 'string'
+						? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+						: formatTimezoneAdjustedTimestamp(
+								ts / 1e6,
+								DATE_TIME_FORMATS.ISO_DATETIME_MS,
+							);
+				return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+			},
+		};
 
-		const timestampCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'timestamp',
-		)
-			? {
-					id: 'timestamp',
-					header: 'Timestamp',
-					accessorFn: (log): unknown => log.timestamp,
-					canBeHidden: false,
-					enableRemove: false,
-					width: { default: 170, min: 170 },
-					cell: ({ value }): ReactElement => {
-						const ts = value as string | number;
-						const formatted =
-							typeof ts === 'string'
-								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-								: formatTimezoneAdjustedTimestamp(
-										ts / 1e6,
-										DATE_TIME_FORMATS.ISO_DATETIME_MS,
-									);
-						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
-					},
+		const bodyCol: TableColumnDef<ILog> = {
+			id: buildCompositeKey('body', 'log'),
+			header: 'Body',
+			accessorFn: (log): string => getBodyDisplayString(log.body),
+			canBeHidden: false,
+			enableRemove: false,
+			width: { default: '100%', min: 300 },
+			cell: ({ value, isActive }): ReactElement => (
+				<TanStackTable.Text
+					dangerouslySetInnerHTML={{
+						__html: getSanitizedLogBody(value as string, {
+							shouldEscapeHtml: true,
+						}),
+					}}
+					data-active={isActive}
+				/>
+			),
+		};
+
+		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
+			id: buildCompositeKey(f.name, f.type),
+			header: f.name,
+			accessorFn: (log): unknown => FlatLogData(log)[f.name],
+			enableRemove: true,
+			width: { min: 192 },
+			cell: ({ value }): ReactElement => (
+				<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+			),
+		});
+
+		// Match body/timestamp by composite key, not bare name — else a variant
+		// like `attribute.body` collapses onto `log.body`, duplicating the column.
+		const fieldCols = fields
+			.map((f): TableColumnDef<ILog> | null => {
+				if (f.name === 'id') {
+					return null;
 				}
-			: null;
-
-		const bodyCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'body',
-		)
-			? {
-					id: 'body',
-					header: 'Body',
-					accessorFn: (log): string => getBodyDisplayString(log.body),
-					canBeHidden: false,
-					enableRemove: false,
-					width: { default: '100%', min: 300 },
-					cell: ({ value, isActive }): ReactElement => (
-						<TanStackTable.Text
-							dangerouslySetInnerHTML={{
-								__html: getSanitizedLogBody(value as string, {
-									shouldEscapeHtml: true,
-								}),
-							}}
-							data-active={isActive}
-						/>
-					),
+				const compositeKey = buildCompositeKey(f.name, f.type);
+				if (compositeKey === timestampCol.id) {
+					return timestampCol;
 				}
-			: null;
+				if (compositeKey === bodyCol.id) {
+					return bodyCol;
+				}
+				return makeUserFieldCol(f);
+			})
+			.filter((c): c is TableColumnDef<ILog> => c !== null);
 
-		return [
-			stateIndicatorCol,
-			...(timestampCol ? [timestampCol] : []),
-			...(appendTo === 'center' ? fieldColumns : []),
-			...(bodyCol ? [bodyCol] : []),
-			...(appendTo === 'end' ? fieldColumns : []),
-		];
-	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
+		return [stateIndicatorCol, ...fieldCols];
+	}, [fields, fontSize, formatTimezoneAdjustedTimestamp]);
 }

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -256,6 +256,34 @@
 				}
 			}
 
+			.edit-columns-container {
+				padding: 12px;
+
+				.edit-columns-btn {
+					display: flex;
+					width: 100%;
+					height: 20px;
+					padding: 4px 0px;
+					justify-content: space-between;
+					align-items: center;
+					border: none !important;
+
+					.edit-columns-text {
+						color: var(--l2-foreground);
+						font-family: Inter;
+						font-size: 13px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: normal;
+						letter-spacing: 0.14px;
+					}
+				}
+
+				.edit-columns-btn:hover {
+					background-color: unset !important;
+				}
+			}
+
 			.add-new-column-container {
 				display: flex;
 				flex-direction: column;

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,12 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { useCallback, useEffect, useState } from 'react';
 import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
 import {
 	Check,
 	ChevronLeft,
@@ -14,7 +11,6 @@ import {
 	Minus,
 	Plus,
 	SlidersVertical,
-	X,
 } from '@signozhq/icons';
 
 import './LogsFormatOptionsMenu.styles.scss';
@@ -23,14 +19,21 @@ interface LogsFormatOptionsMenuProps {
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
+	onOpenColumns?: () => void;
+}
+
+interface OptionsMenuContentProps extends LogsFormatOptionsMenuProps {
+	closePopover: () => void;
 }
 
 function OptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
-}: LogsFormatOptionsMenuProps): JSX.Element {
-	const { maxLines, format, addColumn, fontSize } = config;
+	onOpenColumns,
+	closePopover,
+}: OptionsMenuContentProps): JSX.Element {
+	const { maxLines, format, fontSize } = config;
 	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
 	const maxLinesNumber = (maxLines?.value as number) || 1;
 	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
@@ -40,13 +43,6 @@ function OptionsMenu({
 	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] =
 		useState<boolean>(false);
 
-	const [showAddNewColumnContainer, setShowAddNewColumnContainer] =
-		useState(false);
-
-	const [selectedValue, setSelectedValue] = useState<string | null>(null);
-	const listRef = useRef<HTMLDivElement>(null);
-	const initialMouseEnterRef = useRef<boolean>(false);
-
 	const onChange = useCallback(
 		(key: LogViewMode) => {
 			if (!format) {
@@ -61,7 +57,6 @@ function OptionsMenu({
 	const handleMenuItemClick = (key: LogViewMode): void => {
 		setSelectedItem(key);
 		onChange(key);
-		setShowAddNewColumnContainer(false);
 	};
 
 	const incrementMaxLinesPerRow = (): void => {
@@ -76,20 +71,6 @@ function OptionsMenu({
 		}
 	};
 
-	const handleSearchValueChange = useDebouncedFn((event): void => {
-		// @ts-expect-error
-		const value = event?.target?.value || '';
-
-		if (addColumn && addColumn?.onSearch) {
-			addColumn?.onSearch(value);
-		}
-	}, 300);
-
-	const handleToggleAddNewColumn = (): void => {
-		addColumn?.onSearch?.('');
-		setShowAddNewColumnContainer(!showAddNewColumnContainer);
-	};
-
 	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
 		if (
 			maxLinesPerRow &&
@@ -100,6 +81,11 @@ function OptionsMenu({
 		}
 	};
 
+	const handleEditColumns = (): void => {
+		onOpenColumns?.();
+		closePopover();
+	};
+
 	useEffect(() => {
 		if (maxLinesPerRow && config && config.maxLines?.onChange) {
 			config.maxLines.onChange(maxLinesPerRow);
@@ -112,110 +98,10 @@ function OptionsMenu({
 		}
 	}, [fontSizeValue]);
 
-	function handleColumnSelection(
-		currentIndex: number,
-		optionsData: DefaultOptionType[],
-	): void {
-		const currentItem = optionsData[currentIndex];
-		const itemLength = optionsData.length;
-		if (addColumn && addColumn?.onSelect) {
-			addColumn?.onSelect(selectedValue, {
-				label: currentItem.label,
-				disabled: false,
-			});
-
-			// if the last element is selected then select the previous one
-			if (currentIndex === itemLength - 1) {
-				// there should be more than 1 element in the list
-				if (currentIndex - 1 >= 0) {
-					const prevValue = optionsData[currentIndex - 1]?.value || null;
-					setSelectedValue(prevValue as string | null);
-				} else {
-					// if there is only one element then just select and do nothing
-					setSelectedValue(null);
-				}
-			} else {
-				// selecting any random element from the list except the last one
-				const nextIndex = currentIndex + 1;
-
-				const nextValue = optionsData[nextIndex]?.value || null;
-
-				setSelectedValue(nextValue as string | null);
-			}
-		}
-	}
-
-	const handleKeyDown = (e: KeyboardEvent): void => {
-		if (!selectedValue) {
-			return;
-		}
-
-		const optionsData = addColumn?.options || [];
-
-		const currentIndex = optionsData.findIndex(
-			(item) => item?.value === selectedValue,
-		);
-
-		const itemLength = optionsData.length;
-
-		switch (e.key) {
-			case 'ArrowUp': {
-				const newValue = optionsData[Math.max(0, currentIndex - 1)]?.value;
-
-				setSelectedValue(newValue as string | null);
-				e.preventDefault();
-				break;
-			}
-			case 'ArrowDown': {
-				const newValue =
-					optionsData[Math.min(itemLength - 1, currentIndex + 1)]?.value;
-
-				setSelectedValue(newValue as string | null);
-				e.preventDefault();
-				break;
-			}
-			case 'Enter':
-				e.preventDefault();
-				handleColumnSelection(currentIndex, optionsData);
-				break;
-			default:
-				break;
-		}
-	};
-
-	useEffect(() => {
-		// Scroll the selected item into view
-		const listNode = listRef.current;
-		if (listNode && selectedValue) {
-			const optionsData = addColumn?.options || [];
-			const currentIndex = optionsData.findIndex(
-				(item) => item?.value === selectedValue,
-			);
-			const itemNode = listNode.children[currentIndex] as HTMLElement;
-			if (itemNode) {
-				itemNode.scrollIntoView({
-					behavior: 'smooth',
-					block: 'nearest',
-				});
-			}
-		}
-	}, [selectedValue]);
-
-	useEffect(() => {
-		window.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			window.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [selectedValue]);
-
 	return (
 		<div
-			className={cx(
-				'nested-menu-container',
-				showAddNewColumnContainer ? 'active' : '',
-			)}
+			className="nested-menu-container"
 			onClick={(event): void => {
-				// this is to restrict click events to propogate to parent
 				event.stopPropagation();
 			}}
 		>
@@ -269,71 +155,7 @@ function OptionsMenu({
 						</Button>
 					</div>
 				</div>
-			) : null}
-
-			{showAddNewColumnContainer && (
-				<div className="add-new-column-container">
-					<div className="add-new-column-header">
-						<div className="title">
-							<div className="periscope-btn ghost" onClick={handleToggleAddNewColumn}>
-								<ChevronLeft
-									size={14}
-									className="back-icon"
-									onClick={handleToggleAddNewColumn}
-								/>
-							</div>
-							Add New Column
-						</div>
-
-						<Input
-							tabIndex={0}
-							type="text"
-							autoFocus
-							onFocus={addColumn?.onFocus}
-							onChange={handleSearchValueChange}
-							placeholder="Search..."
-						/>
-					</div>
-
-					<div className="add-new-column-content">
-						{addColumn?.isFetching && (
-							<div className="loading-container"> Loading ... </div>
-						)}
-
-						<div className="column-format-new-options" ref={listRef}>
-							{addColumn?.options?.map(({ label, value }, index) => (
-								<div
-									className={cx('column-name', value === selectedValue && 'selected')}
-									key={value}
-									onMouseEnter={(): void => {
-										if (!initialMouseEnterRef.current) {
-											setSelectedValue(value as string | null);
-										}
-
-										initialMouseEnterRef.current = true;
-									}}
-									onMouseMove={(): void => {
-										// this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
-										setSelectedValue(value as string | null);
-									}}
-									onClick={(eve): void => {
-										eve.stopPropagation();
-										handleColumnSelection(index, addColumn?.options || []);
-									}}
-								>
-									<div className="name">
-										<Tooltip placement="left" title={label}>
-											{label}
-										</Tooltip>
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
-				</div>
-			)}
-
-			{!isFontSizeOptionsOpen && !showAddNewColumnContainer && (
+			) : (
 				<div>
 					<div className="font-size-container">
 						<div className="title">Font Size</div>
@@ -373,72 +195,52 @@ function OptionsMenu({
 
 					{selectedItem && (
 						<>
-							<>
-								<div className="horizontal-line" />
-								<div className="max-lines-per-row">
-									<div className="title"> max lines per row </div>
-									<div className="raw-format max-lines-per-row-input">
-										<button
-											type="button"
-											className="periscope-btn"
-											onClick={decrementMaxLinesPerRow}
-										>
-											{' '}
-											<Minus size={12} />{' '}
-										</button>
-										<InputNumber
-											min={1}
-											max={10}
-											value={maxLinesPerRow}
-											onChange={handleLinesPerRowChange}
-										/>
-										<button
-											type="button"
-											className="periscope-btn"
-											onClick={incrementMaxLinesPerRow}
-										>
-											{' '}
-											<Plus size={12} />{' '}
-										</button>
-									</div>
+							<div className="horizontal-line" />
+							<div className="max-lines-per-row">
+								<div className="title"> max lines per row </div>
+								<div className="raw-format max-lines-per-row-input">
+									<button
+										type="button"
+										className="periscope-btn"
+										onClick={decrementMaxLinesPerRow}
+									>
+										{' '}
+										<Minus size={12} />{' '}
+									</button>
+									<InputNumber
+										min={1}
+										max={10}
+										value={maxLinesPerRow}
+										onChange={handleLinesPerRowChange}
+									/>
+									<button
+										type="button"
+										className="periscope-btn"
+										onClick={incrementMaxLinesPerRow}
+									>
+										{' '}
+										<Plus size={12} />{' '}
+									</button>
 								</div>
-							</>
+							</div>
+						</>
+					)}
 
-							<div className="selected-item-content-container active">
-								{!showAddNewColumnContainer && <div className="horizontal-line" />}
-
-								<div className="item-content">
-									{!showAddNewColumnContainer && (
-										<div className="title">
-											columns
-											<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
-										</div>
-									)}
-
-									<div className="column-format">
-										{addColumn?.value?.map(({ name }) => (
-											<div className="column-name" key={name}>
-												<div className="name">
-													<Tooltip placement="left" title={name}>
-														{name}
-													</Tooltip>
-												</div>
-												{addColumn?.value?.length > 1 && (
-													<X
-														className="delete-btn"
-														size={14}
-														onClick={(): void => addColumn.onRemove(name)}
-													/>
-												)}
-											</div>
-										))}
-										{addColumn && addColumn?.value?.length === 0 && (
-											<div className="column-name no-columns-selected">
-												No columns selected
-											</div>
-										)}
-									</div>
-								</div>
+					{selectedItem === 'table' && onOpenColumns && (
+						<>
+							<div className="horizontal-line" />
+							<div className="edit-columns-container">
+								<Button
+									className="edit-columns-btn"
+									type="text"
+									onClick={handleEditColumns}
+									data-testid="periscope-btn-edit-columns"
+								>
+									<Typography.Text className="edit-columns-text">
+										Edit columns
+									</Typography.Text>
+									<ChevronRight size={14} className="icon" />
+								</Button>
 							</div>
 						</>
 					)}
@@ -452,6 +254,7 @@ function LogsFormatOptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
+	onOpenColumns,
 }: LogsFormatOptionsMenuProps): JSX.Element {
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	return (
@@ -461,6 +264,8 @@ function LogsFormatOptionsMenu({
 					items={items}
 					selectedOptionFormat={selectedOptionFormat}
 					config={config}
+					onOpenColumns={onOpenColumns}
+					closePopover={(): void => setIsPopoverOpen(false)}
 				/>
 			}
 			trigger="click"

frontend/src/components/LogsFormatOptionsMenu/__tests__/LogsFormatOptionsMenu.test.tsx

@@ -155,4 +155,66 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 			expect(fontSizeOnChange).toHaveBeenCalledWith(FontSize.MEDIUM);
 		});
 	});
+
+	function renderWithOnOpen(
+		onOpenColumns?: jest.Mock,
+		selectedOptionFormat: 'table' | 'raw' | 'list' = 'table',
+	): { getByTestId: ReturnType<typeof render>['getByTestId'] } {
+		const items = [
+			{ key: 'raw', label: 'Raw', data: { title: 'max lines per row' } },
+			{ key: 'list', label: 'Default' },
+			{ key: 'table', label: 'Column', data: { title: 'columns' } },
+		];
+
+		const { getByTestId } = render(
+			<LogsFormatOptionsMenu
+				items={items}
+				selectedOptionFormat={selectedOptionFormat}
+				config={{
+					format: { value: selectedOptionFormat, onChange: jest.fn() },
+					maxLines: { value: 1, onChange: jest.fn() },
+					fontSize: { value: FontSize.SMALL, onChange: jest.fn() },
+				}}
+				onOpenColumns={onOpenColumns}
+			/>,
+		);
+		fireEvent.click(getByTestId('periscope-btn-format-options'));
+		return { getByTestId };
+	}
+
+	it('renders "Edit columns" row when format=table and onOpenColumns provided', () => {
+		const onOpenColumns = jest.fn();
+		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
+
+		expect(getByTestId('periscope-btn-edit-columns')).toBeInTheDocument();
+	});
+
+	it('does not render "Edit columns" row when onOpenColumns is not provided', () => {
+		renderWithOnOpen(undefined, 'table');
+
+		expect(
+			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
+		).toBeNull();
+	});
+
+	it('does not render "Edit columns" row when format is not table', () => {
+		renderWithOnOpen(jest.fn(), 'raw');
+
+		expect(
+			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
+		).toBeNull();
+	});
+
+	it('fires onOpenColumns and closes the popover when "Edit columns" is clicked', async () => {
+		const onOpenColumns = jest.fn();
+		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
+
+		fireEvent.click(getByTestId('periscope-btn-edit-columns'));
+
+		expect(onOpenColumns).toHaveBeenCalledTimes(1);
+		await waitFor(() => {
+			// Popover content unmounts on close.
+			expect(document.querySelector('.menu-container')).toBeNull();
+		});
+	});
 });

frontend/src/components/NewSelect/styles.scss

@@ -109,6 +109,16 @@ $custom-border-color: #2c3044;
 		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}
 
+	.ant-select-clear {
+		background-color: var(--l2-background);
+		color: var(--l2-foreground);
+		font-size: 12px;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
 		background-color: var(--l1-border);
@@ -392,7 +402,9 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 350px;
+	// Tall enough to hold the react-virtuoso list (<=300px) + header/footer
+	// so only the list scrolls (avoids a second scrollbar on this container).
+	max-height: 410px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -483,8 +495,12 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			> span:not(.ant-checkbox) {
-				width: 100%;
+			// @signozhq/ui Checkbox renders children inside a <label> that is
+			// content-sized by default. Make it fill the row (min-width: 0 lets it
+			// shrink) so the option text below can truncate instead of overflowing.
+			> label {
+				flex: 1 1 auto;
+				min-width: 0;
 			}
 
 			.all-option-text {
@@ -501,7 +517,12 @@ $custom-border-color: #2c3044;
 				width: 100%;
 
 				.option-label-text {
+					flex: 1 1 auto;
+					min-width: 0;
 					margin-bottom: 0;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
 				}
 
 				.option-badge {
@@ -514,26 +535,30 @@ $custom-border-color: #2c3044;
 				}
 			}
 
-			.only-btn {
-				display: none;
-			}
+			// Size the buttons to the row's resting content height (20px) and fully
+			// override antd's default 32px Button box, so revealing them on hover
+			// never changes the row height.
+			.only-btn,
 			.toggle-btn {
 				display: none;
-			}
+				align-items: center;
+				justify-content: center;
+				height: 18px;
+				min-height: 0;
+				padding: 0 6px;
+				font-size: 12px;
+				line-height: 1;
+				border: none;
+				box-shadow: none;
 
-			.only-btn:hover {
-				background-color: unset;
-			}
-			.toggle-btn:hover {
-				background-color: unset;
+				&:hover {
+					background-color: unset;
+				}
 			}
 
 			.option-content:hover {
 				.only-btn {
 					display: flex;
-					align-items: center;
-					justify-content: center;
-					height: 21px;
 				}
 				.toggle-btn {
 					display: none;
@@ -548,9 +573,6 @@ $custom-border-color: #2c3044;
 		.option-checkbox:hover {
 			.toggle-btn {
 				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 21px;
 			}
 			.option-badge {
 				display: none;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -72,6 +72,7 @@ function TanStackTableInner<TData>(
 		data,
 		columns,
 		columnStorageKey,
+		respectColumnOrder = true,
 		columnSizing: columnSizingProp,
 		onColumnSizingChange,
 		onColumnOrderChange,
@@ -175,6 +176,7 @@ function TanStackTableInner<TData>(
 		storageKey: columnStorageKey,
 		columns,
 		isGrouped,
+		respectColumnOrder,
 	});
 
 	// Use store values when columnStorageKey is provided, otherwise fall back to props/defaults
@@ -206,6 +208,7 @@ function TanStackTableInner<TData>(
 		handleRemoveColumn,
 	} = useColumnHandlers({
 		columnStorageKey,
+		respectColumnOrder,
 		effectiveSizing,
 		storeSetSizing,
 		storeSetOrder,

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -24,6 +24,8 @@ jest.mock('../TanStackTable.module.scss', () => ({
 }));
 
 beforeAll(() => {
+	// jsdom doesn't include ResizeObserver — must direct-assign rather than
+	// spyOn (spyOn requires the property to already exist).
 	window.ResizeObserver = jest.fn().mockImplementation(() => ({
 		disconnect: jest.fn(),
 		observe: jest.fn(),
@@ -867,4 +869,110 @@ describe('TanStackTableView Integration', () => {
 			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
 		});
 	});
+
+	describe('hasSingleColumn — gates the Remove popover per-column', () => {
+		const hasSingleColumnFlagPresent = (): boolean =>
+			Boolean(document.querySelector('th[data-single-column="true"]'));
+
+		it('is true when only one non-pinned column exists', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'name',
+							header: 'Name',
+							accessorKey: 'name',
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			expect(hasSingleColumnFlagPresent()).toBe(true);
+		});
+
+		it('is false when multiple non-pinned columns exist (all removable)', async () => {
+			renderTanStackTable({});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// 3 default columns (id/name/value), none pinned, none non-removable
+			// → table is not single-column.
+			expect(hasSingleColumnFlagPresent()).toBe(false);
+		});
+
+		it('is false when removable + non-removable mix exists (the body/timestamp case)', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'name',
+							header: 'Timestamp',
+							accessorKey: 'name',
+							enableRemove: false,
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'value',
+							header: 'Body',
+							accessorKey: 'value',
+							enableRemove: false,
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'id',
+							header: 'User',
+							accessorKey: 'id',
+							enableRemove: true,
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			expect(hasSingleColumnFlagPresent()).toBe(false);
+		});
+
+		it('does not count pinned columns toward the total', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'stateIndicator',
+							header: '',
+							pin: 'left',
+							accessorKey: 'id',
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'name',
+							header: 'Name',
+							accessorKey: 'name',
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// 1 pinned + 1 non-pinned → only the non-pinned counts → single-column.
+			expect(hasSingleColumnFlagPresent()).toBe(true);
+		});
+	});
 });

frontend/src/components/TanStackTableView/__tests__/useColumnState.test.tsx

@@ -168,6 +168,53 @@ describe('useColumnState', () => {
 				'a',
 			]);
 		});
+
+		it('ignores stored columnOrder when respectColumnOrder=false', () => {
+			const columns = [col('a'), col('b'), col('c')];
+
+			act(() => {
+				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
+				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
+			});
+
+			const { result } = renderHook(() =>
+				useColumnState({
+					storageKey: TEST_KEY,
+					columns,
+					respectColumnOrder: false,
+				}),
+			);
+
+			// Falls through to natural columns-array order; stored order is ignored.
+			expect(result.current.sortedColumns.map((c) => c.id)).toStrictEqual([
+				'a',
+				'b',
+				'c',
+			]);
+		});
+
+		it('honors stored columnOrder when respectColumnOrder=true (default)', () => {
+			const columns = [col('a'), col('b'), col('c')];
+
+			act(() => {
+				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
+				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
+			});
+
+			const { result } = renderHook(() =>
+				useColumnState({
+					storageKey: TEST_KEY,
+					columns,
+					respectColumnOrder: true,
+				}),
+			);
+
+			expect(result.current.sortedColumns.map((c) => c.id)).toStrictEqual([
+				'c',
+				'a',
+				'b',
+			]);
+		});
 	});
 
 	describe('actions', () => {

frontend/src/components/TanStackTableView/types.ts

@@ -152,6 +152,8 @@ export type TanStackTableProps<TData> = {
 	columns: TableColumnDef<TData>[];
 	/** Storage key for column state persistence (visibility, sizing, ordering). When set, enables unified column management. */
 	columnStorageKey?: string;
+	/** When false, the table renders columns in their natural array order and the persisted columnOrder slot is ignored on read and skipped on write. Use when an external source (e.g. preferences.selectColumns) is the canonical order. Default true. */
+	respectColumnOrder?: boolean;
 	columnSizing?: ColumnSizingState;
 	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
 	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;

frontend/src/components/TanStackTableView/useColumnHandlers.ts

@@ -7,6 +7,8 @@ import { TableColumnDef } from './types';
 export interface UseColumnHandlersOptions<TData> {
 	/** Storage key for persisting column state (enables store mode) */
 	columnStorageKey?: string;
+	/** When false, drag-reorder skips the persisted columnOrder write — order flows back via onColumnOrderChange only. */
+	respectColumnOrder?: boolean;
 	effectiveSizing: ColumnSizingState;
 	storeSetSizing: (sizing: ColumnSizingState) => void;
 	storeSetOrder: (columns: TableColumnDef<TData>[]) => void;
@@ -28,6 +30,7 @@ export interface UseColumnHandlersResult<TData> {
  */
 export function useColumnHandlers<TData>({
 	columnStorageKey,
+	respectColumnOrder = true,
 	effectiveSizing,
 	storeSetSizing,
 	storeSetOrder,
@@ -50,12 +53,12 @@ export function useColumnHandlers<TData>({
 
 	const handleColumnOrderChange = useCallback(
 		(cols: TableColumnDef<TData>[]) => {
-			if (columnStorageKey) {
+			if (columnStorageKey && respectColumnOrder) {
 				storeSetOrder(cols);
 			}
 			onColumnOrderChange?.(cols);
 		},
-		[columnStorageKey, storeSetOrder, onColumnOrderChange],
+		[columnStorageKey, respectColumnOrder, storeSetOrder, onColumnOrderChange],
 	);
 
 	const handleRemoveColumn = useCallback(

frontend/src/components/TanStackTableView/useColumnState.ts

@@ -20,6 +20,7 @@ type UseColumnStateOptions<TData> = {
 	storageKey?: string;
 	columns: TableColumnDef<TData>[];
 	isGrouped?: boolean;
+	respectColumnOrder?: boolean;
 };
 
 type UseColumnStateResult<TData> = {
@@ -40,6 +41,7 @@ export function useColumnState<TData>({
 	storageKey,
 	columns,
 	isGrouped = false,
+	respectColumnOrder = true,
 }: UseColumnStateOptions<TData>): UseColumnStateResult<TData> {
 	useEffect(() => {
 		if (storageKey) {
@@ -130,7 +132,7 @@ export function useColumnState<TData>({
 	}, [hiddenColumnIds, columns, isGrouped]);
 
 	const sortedColumns = useMemo((): TableColumnDef<TData>[] => {
-		if (columnOrder.length === 0) {
+		if (!respectColumnOrder || columnOrder.length === 0) {
 			return columns;
 		}
 
@@ -144,7 +146,7 @@ export function useColumnState<TData>({
 		});
 
 		return [...pinned, ...sortedRest];
-	}, [columns, columnOrder]);
+	}, [columns, columnOrder, respectColumnOrder]);
 
 	const hideColumn = useCallback(
 		(columnId: string) => {

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss

@@ -67,8 +67,8 @@
 	gap: 4px;
 
 	&--success {
-		background: color-mix(in srgb, var(--success-background) 10%, transparent);
-		color: var(--success-foreground);
+		background: color-mix(in srgb, var(--text-forest-500) 10%, transparent);
+		color: var(--text-forest-400);
 	}
 
 	&--error {

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/CreateAlertV2/NotificationSettings/styles.scss

@@ -153,6 +153,7 @@
 				font-size: 10px;
 				color: var(--l2-foreground);
 				margin-top: 4px;
+				display: block;
 			}
 		}
 

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -47,18 +47,10 @@
 		}
 
 		.ant-tabs-tab-active {
-			.overview-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-
-			.variables-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-
+			.overview-btn,
+			.variables-btn,
 			.public-dashboard-btn {
-				border-radius: 2px 0px 0px 2px;
+				color: var(--primary-background);
 				background: var(--l1-border);
 			}
 		}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -127,6 +127,15 @@
 					align-items: center;
 					justify-content: center;
 					gap: 4px;
+
+					.sidenav-beta-tag {
+						margin-left: 4px;
+					}
+
+					div {
+						display: flex;
+						align-items: center;
+					}
 				}
 
 				.variable-type-btn + .variable-type-btn {
@@ -177,6 +186,7 @@
 
 		.multiple-values-section {
 			justify-content: space-between;
+			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {
@@ -193,6 +203,7 @@
 
 		.all-option-section {
 			justify-content: space-between;
+			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -518,7 +518,6 @@ function VariableItem({
 										size={14}
 										style={{
 											color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-											marginTop: 1,
 										}}
 									/>
 								}
@@ -614,7 +613,6 @@ function VariableItem({
 												size={14}
 												style={{
 													color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-													marginTop: 1,
 												}}
 											/>
 										}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePanelContextMenu.test.ts

@@ -1,8 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 
 import { usePanelContextMenu } from '../usePanelContextMenu';
 
@@ -47,10 +46,7 @@ const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
 const mockQueryResponse = {
 	data: undefined,
 	isLoading: false,
-} as unknown as UseQueryResult<
-	SuccessResponse<MetricRangePayloadProps, unknown>,
-	Error
->;
+} as unknown as UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 
 describe('usePanelContextMenu', () => {
 	beforeEach(() => {

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -10,17 +10,13 @@ import {
 	PopoverPosition,
 	useCoordinates,
 } from 'periscope/components/ContextMenu';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 interface UseTimeSeriesContextMenuParams {
 	widget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	enableDrillDown?: boolean;
 }
 

frontend/src/container/FormAlertRules/QuerySection.styles.scss

@@ -19,6 +19,7 @@
 		}
 		.ant-btn-default {
 			border-color: transparent;
+			box-shadow: none;
 		}
 	}
 	.ant-tabs-tab-active {

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -5,9 +5,11 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import {
+	MetricQueryRangeSuccessResponse,
+	MetricRangePayloadProps,
+} from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import uPlot from 'uplot';
 
@@ -21,10 +23,7 @@ export interface GraphVisibilityLegendEntryProps {
 
 export interface WidgetGraphComponentProps {
 	widget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	errorMessage: string | undefined;
 	version?: string;
 	threshold?: ReactNode;

frontend/src/container/GridValueComponent/types.ts

@@ -1,8 +1,7 @@
 import { UseQueryResult } from 'react-query';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
-import { SuccessResponse } from 'types/api';
 import { ContextLinksData, Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 export type GridValueComponentProps = {
@@ -13,10 +12,7 @@ export type GridValueComponentProps = {
 	thresholds?: ThresholdProps[];
 	// Context menu related props
 	widget?: Widgets;
-	queryResponse?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	contextLinks?: ContextLinksData;
 	enableDrillDown?: boolean;
 };

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -2,12 +2,14 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
+import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import { useOptionsMenu } from 'container/OptionsMenu';
+import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
@@ -56,6 +58,8 @@ function LiveLogsContainer({
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const formatItems = [
 		{
 			key: 'raw',
@@ -238,6 +242,7 @@ function LiveLogsContainer({
 						items={formatItems}
 						selectedOptionFormat={options.format}
 						config={config}
+						onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
 					/>
 				</div>
 
@@ -261,6 +266,17 @@ function LiveLogsContainer({
 			</div>
 
 			<GoToTop />
+			{config.fieldsSelector && (
+				<FieldsSelector
+					isOpen={isFieldsSelectorOpen}
+					title="Edit columns"
+					fields={config.fieldsSelector.value}
+					onFieldsChange={config.fieldsSelector.onFieldsChange}
+					onClose={(): void => setIsFieldsSelectorOpen(false)}
+					signal={DataSource.LOGS}
+					requiredFields={LOGS_REQUIRED_COLUMNS}
+				/>
+			)}
 		</div>
 	);
 }

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -82,7 +82,6 @@ function LiveLogsList({
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
 		fontSize: options.fontSize,
-		appendTo: 'end',
 	});
 
 	const makeOnLogCopy = useCallback(
@@ -198,6 +197,7 @@ function LiveLogsList({
 							ref={ref as React.Ref<TanStackTableHandle>}
 							columns={logsColumns}
 							columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
+							respectColumnOrder={false}
 							onColumnRemove={config?.addColumn?.onRemove}
 							plainTextCellLineClamp={options.maxLines}
 							cellTypographySize={options.fontSize}

frontend/src/container/LogsExplorerList/index.tsx

@@ -105,7 +105,6 @@ function LogsExplorerList({
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
 		fontSize: options.fontSize,
-		appendTo: 'end',
 	});
 
 	const makeOnLogCopy = useCallback(
@@ -204,6 +203,7 @@ function LogsExplorerList({
 					ref={ref as React.Ref<TanStackTableHandle>}
 					columns={logsColumns}
 					columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
+					respectColumnOrder={false}
 					onColumnRemove={config?.addColumn?.onRemove}
 					onColumnOrderChange={handleColumnOrderChange}
 					plainTextCellLineClamp={options.maxLines}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,16 +1,17 @@
+import { useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
+import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useOptionsMenu } from 'container/OptionsMenu';
+import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { ArrowUp10, Minus } from '@signozhq/icons';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
-import QueryStatus from './QueryStatus';
-
 function LogsActionsContainer({
 	listQuery,
 	selectedPanelType,
@@ -18,10 +19,6 @@ function LogsActionsContainer({
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
-	isFetching,
-	isLoading,
-	isError,
-	isSuccess,
 }: {
 	listQuery: any;
 	selectedPanelType: PANEL_TYPES;
@@ -29,10 +26,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,
@@ -40,6 +33,8 @@ function LogsActionsContainer({
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const formatItems = [
 		{
 			key: 'raw',
@@ -102,23 +97,24 @@ function LogsActionsContainer({
 									items={formatItems}
 									selectedOptionFormat={options.format}
 									config={config}
+									onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
 								/>
 							</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>
+			{config.fieldsSelector && (
+				<FieldsSelector
+					isOpen={isFieldsSelectorOpen}
+					title="Edit columns"
+					fields={config.fieldsSelector.value}
+					onFieldsChange={config.fieldsSelector.onFieldsChange}
+					onClose={(): void => setIsFieldsSelectorOpen(false)}
+					signal={DataSource.LOGS}
+					requiredFields={LOGS_REQUIRED_COLUMNS}
+				/>
+			)}
 		</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/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx

@@ -28,9 +28,8 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import { UpdateTimeInterval } from 'store/actions';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 function WidgetGraph({
@@ -202,10 +201,7 @@ function WidgetGraph({
 
 interface WidgetGraphProps {
 	selectedWidget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
 	enableDrillDown?: boolean;

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/util.ts

@@ -1,11 +1,12 @@
+import { QueryRangeRequestV5 } from 'api/v5/v5';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Column, QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function populateMultipleResults(
-	responseData: SuccessResponse<MetricRangePayloadProps, unknown>,
-): SuccessResponse<MetricRangePayloadProps, unknown> {
+	responseData: SuccessResponse<MetricRangePayloadProps, QueryRangeRequestV5>,
+): SuccessResponse<MetricRangePayloadProps, QueryRangeRequestV5> {
 	const queryResults = responseData?.payload?.data?.newResult?.data?.result;
 	const allFormattedResults: QueryData[] = [];
 
@@ -66,17 +67,19 @@ export function populateMultipleResults(
 	}
 
 	// Create a copy instead of mutating the original
-	const updatedResponseData: SuccessResponse<MetricRangePayloadProps, unknown> =
-		{
-			...responseData,
-			payload: {
-				...responseData.payload,
-				data: {
-					...responseData.payload.data,
-					result: allFormattedResults,
-				},
+	const updatedResponseData: SuccessResponse<
+		MetricRangePayloadProps,
+		QueryRangeRequestV5
+	> = {
+		...responseData,
+		payload: {
+			...responseData.payload,
+			data: {
+				...responseData.payload.data,
+				result: allFormattedResults,
 			},
-		};
+		},
+	};
 
 	return updatedResponseData;
 }

frontend/src/container/NewWidget/index.tsx

@@ -52,7 +52,6 @@ import {
 	getSelectedWidgetIndex,
 } from 'providers/Dashboard/util';
 import { AppState } from 'store/reducers';
-import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
 	ContextLinksData,
@@ -61,7 +60,7 @@ import {
 } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { IField } from 'types/api/logs/fields';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -398,7 +397,7 @@ function NewWidget({
 
 	// State to hold query response for sharing between left and right containers
 	const [queryResponse, setQueryResponse] = useState<
-		UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
+		UseQueryResult<MetricQueryRangeSuccessResponse, Error>
 	>(null as any);
 
 	// request data should be handled by the parent and the child components should consume the same

frontend/src/container/NewWidget/types.ts

@@ -2,9 +2,8 @@ import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { SuccessResponse, Warning } from 'types/api';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 
 import { timePreferance } from './RightContainer/timeItems';
 
@@ -29,9 +28,7 @@ export interface WidgetGraphProps {
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	isLoadingPanelData: boolean;
 	setQueryResponse?: Dispatch<
-		SetStateAction<
-			UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
-		>
+		SetStateAction<UseQueryResult<MetricQueryRangeSuccessResponse, Error>>
 	>;
 	enableDrillDown?: boolean;
 	dashboardData: Dashboard | undefined;
@@ -39,12 +36,7 @@ export interface WidgetGraphProps {
 }
 
 export type WidgetGraphContainerProps = {
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown> & {
-			warning?: Warning;
-		},
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
 	selectedWidget: Widgets;

frontend/src/container/OptionsMenu/__test__/ensureLogsRequiredColumns.test.ts

@@ -67,13 +67,23 @@ describe('ensureLogsRequiredColumns', () => {
 		]);
 	});
 
-	it('does not duplicate if a required column appears twice in the input', () => {
-		// Tolerant of malformed input — invariant only adds *missing* required
-		// columns; it does not deduplicate existing entries (that's a separate
-		// concern, not its job).
+	it('collapses composite-key duplicates in the input', () => {
+		// Two identical `body` entries → deduped to one, then timestamp prepended.
 		const input = [BODY, BODY, ATTR_A];
 		const result = ensureLogsRequiredColumns(input);
-		expect(result.filter((c) => c.name === 'timestamp')).toHaveLength(1);
-		expect(result[0]).toStrictEqual(TIMESTAMP);
+		expect(result).toStrictEqual([TIMESTAMP, BODY, ATTR_A]);
+		expect(result.filter((c) => c.name === 'body')).toHaveLength(1);
+	});
+
+	it('keeps same-name fields with different contexts as distinct columns', () => {
+		// Different composite keys → both legitimate, neither deduped.
+		const ATTR_BODY: TelemetryFieldKey = {
+			name: 'body',
+			signal: 'logs',
+			fieldContext: 'attribute',
+			fieldDataType: 'string',
+		};
+		const input = [TIMESTAMP, BODY, ATTR_BODY];
+		expect(ensureLogsRequiredColumns(input)).toStrictEqual(input);
 	});
 });

frontend/src/container/OptionsMenu/__test__/useOptionsMenu.test.ts

@@ -232,4 +232,159 @@ describe('useOptionsMenu', () => {
 		expect(optionNames).toContain('level');
 		expect(optionNames).toContain('timestamp');
 	});
+
+	describe('reorderSelectColumns / handleRemoveSelectedColumn — composite ID lookup', () => {
+		const baseFormatting = {
+			format: 'table',
+			maxLines: 1,
+			fontSize: 'small',
+		};
+
+		// Two entries share the same `name` but differ in `fieldContext` — the
+		// exact case composite IDs are meant to disambiguate.
+		const seedColumns = [
+			{
+				name: 'body',
+				fieldContext: 'log',
+				fieldDataType: 'string',
+				signal: 'logs',
+			},
+			{
+				name: 'service.name',
+				fieldContext: 'resource',
+				fieldDataType: 'string',
+				signal: 'logs',
+			},
+			{
+				name: 'service.name',
+				fieldContext: 'attribute',
+				fieldDataType: 'string',
+				signal: 'logs',
+			},
+			{
+				name: 'timestamp',
+				fieldContext: 'log',
+				fieldDataType: '',
+				signal: 'logs',
+			},
+		];
+
+		beforeEach(() => {
+			(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
+				data: { data: { data: { keys: {} } } },
+				isFetching: false,
+			});
+			(usePreferenceContext as jest.Mock).mockReturnValue({
+				traces: {
+					preferences: { columns: [], formatting: baseFormatting },
+					updateColumns: mockUpdateColumns,
+					updateFormatting: mockUpdateFormatting,
+				},
+				logs: {
+					preferences: { columns: seedColumns, formatting: baseFormatting },
+					updateColumns: mockUpdateColumns,
+					updateFormatting: mockUpdateFormatting,
+				},
+			});
+		});
+
+		it('reorders by composite IDs — preserves both same-name variants distinctly', () => {
+			const { result } = renderHook(() =>
+				useOptionsMenu({
+					dataSource: DataSource.LOGS,
+					aggregateOperator: 'count',
+				}),
+			);
+
+			// New order: [attribute.service.name, log.body, resource.service.name, log.timestamp]
+			result.current.config.addColumn?.onReorder([
+				'attribute.service.name',
+				'log.body',
+				'resource.service.name',
+				'log.timestamp',
+			]);
+
+			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
+			const reordered = mockUpdateColumns.mock.calls[0][0];
+			expect(
+				reordered.map(
+					(c: { name: string; fieldContext: string }) =>
+						`${c.fieldContext}.${c.name}`,
+				),
+			).toStrictEqual([
+				'attribute.service.name',
+				'log.body',
+				'resource.service.name',
+				'log.timestamp',
+			]);
+		});
+
+		it('reorder ignores ids that are not columns (e.g. state-indicator) and skips unknown ids', () => {
+			const { result } = renderHook(() =>
+				useOptionsMenu({
+					dataSource: DataSource.LOGS,
+					aggregateOperator: 'count',
+				}),
+			);
+
+			result.current.config.addColumn?.onReorder([
+				'state-indicator',
+				'log.timestamp',
+				'unknown.composite',
+				'log.body',
+				'resource.service.name',
+				'attribute.service.name',
+			]);
+
+			const reordered = mockUpdateColumns.mock.calls[0][0];
+			// state-indicator + unknown.composite filtered; rest preserved in given order.
+			expect(
+				reordered.map(
+					(c: { name: string; fieldContext: string }) =>
+						`${c.fieldContext}.${c.name}`,
+				),
+			).toStrictEqual([
+				'log.timestamp',
+				'log.body',
+				'resource.service.name',
+				'attribute.service.name',
+			]);
+		});
+
+		it('removes only the variant whose composite ID matches', () => {
+			const { result } = renderHook(() =>
+				useOptionsMenu({
+					dataSource: DataSource.LOGS,
+					aggregateOperator: 'count',
+				}),
+			);
+
+			// Removing 'resource.service.name' should drop ONLY the resource variant.
+			result.current.config.addColumn?.onRemove('resource.service.name');
+
+			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
+			const remaining = mockUpdateColumns.mock.calls[0][0];
+			expect(
+				remaining.map(
+					(c: { name: string; fieldContext: string }) =>
+						`${c.fieldContext}.${c.name}`,
+				),
+			).toStrictEqual(['log.body', 'attribute.service.name', 'log.timestamp']);
+		});
+
+		it('removing by a non-matching composite ID is a no-op (filter returns the full list)', () => {
+			const { result } = renderHook(() =>
+				useOptionsMenu({
+					dataSource: DataSource.LOGS,
+					aggregateOperator: 'count',
+				}),
+			);
+
+			result.current.config.addColumn?.onRemove('unknown.composite');
+
+			const remaining = mockUpdateColumns.mock.calls[0][0];
+			// No entries match → full list preserved.
+			expect(remaining).toHaveLength(seedColumns.length);
+		});
+	});
 });

frontend/src/container/OptionsMenu/constants.ts

@@ -2,6 +2,7 @@ import { TelemetryFieldKey } from 'api/v5/v5';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { FontSize, OptionsQuery } from './types';
+import { buildCompositeKey } from './utils';
 
 export const URL_OPTIONS = 'options';
 
@@ -35,22 +36,48 @@ export const defaultLogsSelectedColumns: TelemetryFieldKey[] = [
 	},
 ];
 
-const LOGS_REQUIRED_COLUMNS = ['timestamp', 'body'] as const;
+// Names that must always be present in logs selectColumns (writer invariant).
+const LOGS_REQUIRED_COLUMN_NAMES = defaultLogsSelectedColumns.map(
+	(c) => c.name,
+);
 
-/**
- * Always-on invariant: every logs selectColumns array must contain `body` and
- * `timestamp`. Applied at both loader and writer boundaries so the picker, the
- * table, and persisted state can never diverge into a "missing required
- * column" state.
- */
+// Composite keys (not bare names) so the picker locks ONLY the canonical
+// `log.body`/`log.timestamp` — a same-name variant like `attribute.body` stays
+// removable.
+export const LOGS_REQUIRED_COLUMNS = defaultLogsSelectedColumns.map((c) =>
+	buildCompositeKey(c.name, c.fieldContext),
+);
+
+// Drop composite-key duplicates (never legitimate — they only come from
+// corrupted state). Returns the same array reference when nothing to dedupe.
+export function dedupeColumnsByCompositeKey(
+	columns: TelemetryFieldKey[],
+): TelemetryFieldKey[] {
+	const seen = new Set<string>();
+	let hasDuplicate = false;
+	const deduped = columns.filter((c) => {
+		const key = buildCompositeKey(c.name, c.fieldContext);
+		if (seen.has(key)) {
+			hasDuplicate = true;
+			return false;
+		}
+		seen.add(key);
+		return true;
+	});
+	return hasDuplicate ? deduped : columns;
+}
+
+// Logs selectColumns invariant: no composite-key duplicates, and body +
+// timestamp always present. Applied at loader + writer boundaries.
 export function ensureLogsRequiredColumns(
 	columns: TelemetryFieldKey[],
 ): TelemetryFieldKey[] {
-	const missing = LOGS_REQUIRED_COLUMNS.filter(
-		(name) => !columns.some((c) => c.name === name),
+	const deduped = dedupeColumnsByCompositeKey(columns);
+	const missing = LOGS_REQUIRED_COLUMN_NAMES.filter(
+		(name) => !deduped.some((c) => c.name === name),
 	);
 	if (missing.length === 0) {
-		return columns;
+		return deduped;
 	}
 	const defaultsByName = new Map(
 		defaultLogsSelectedColumns.map((c) => [c.name, c]),
@@ -58,7 +85,7 @@ export function ensureLogsRequiredColumns(
 	const prepended = missing
 		.map((name) => defaultsByName.get(name))
 		.filter((c): c is TelemetryFieldKey => c !== undefined);
-	return [...prepended, ...columns];
+	return [...prepended, ...deduped];
 }
 
 export const defaultTraceSelectedColumns: TelemetryFieldKey[] = [

frontend/src/container/OptionsMenu/types.ts

@@ -42,4 +42,8 @@ export type OptionsMenuConfig = {
 		onRemove: (key: string) => void;
 		onReorder: (orderedIds: string[]) => void;
 	};
+	fieldsSelector?: {
+		value: TelemetryFieldKey[];
+		onFieldsChange: (next: TelemetryFieldKey[]) => void;
+	};
 };

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -36,7 +36,7 @@ import {
 	OptionsMenuConfig,
 	OptionsQuery,
 } from './types';
-import { getOptionsFromKeys } from './utils';
+import { buildCompositeKey, getOptionsFromKeys } from './utils';
 
 interface UseOptionsMenuProps {
 	storageKey?: string;
@@ -281,7 +281,7 @@ const useOptionsMenu = ({
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				({ name }) => name !== columnKey,
+				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -363,9 +363,11 @@ const useOptionsMenu = ({
 	const reorderSelectColumns = useCallback(
 		(orderedIds: string[]): void => {
 			const current = preferences?.columns ?? [];
-			const byName = new Map(current.map((f) => [f.name, f]));
+			const byCompositeKey = new Map(
+				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
+			);
 			const reordered = orderedIds
-				.map((id) => byName.get(id))
+				.map((id) => byCompositeKey.get(id))
 				.filter((f): f is TelemetryFieldKey => f !== undefined);
 			updateColumns(reordered);
 		},
@@ -396,6 +398,10 @@ const useOptionsMenu = ({
 				onSearch: handleSearchAttribute,
 				onReorder: reorderSelectColumns,
 			},
+			fieldsSelector: {
+				value: preferences?.columns ?? [],
+				onFieldsChange: updateColumns,
+			},
 			format: {
 				value: preferences?.formatting?.format || defaultOptionsQuery.format,
 				onChange: handleFormatChange,
@@ -417,6 +423,7 @@ const useOptionsMenu = ({
 			handleRemoveSelectedColumn,
 			handleSearchAttribute,
 			reorderSelectColumns,
+			updateColumns,
 			handleFormatChange,
 			handleMaxLinesChange,
 			handleFontSizeChange,

frontend/src/container/OptionsMenu/utils.ts

@@ -14,3 +14,9 @@ export const getOptionsFromKeys = (
 		({ value }) => !selectedKeys.find((key) => key === value),
 	);
 };
+
+// Composite identity for a column. Disambiguates same-name fields across
+// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
+// Falls back to bare name when context is missing.
+export const buildCompositeKey = (name: string, context?: string): string =>
+	context ? `${context}.${name}` : name;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -103,7 +103,7 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 
 		return {
 			...rest,
-			...(domainToAdminEmail && { domainToAdminEmail }),
+			domainToAdminEmail: domainToAdminEmail ?? {},
 		};
 	}, [form]);
 
@@ -129,7 +129,7 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 
 		return {
 			...rest,
-			...(groupMappings && { groupMappings }),
+			groupMappings: groupMappings ?? {},
 		};
 	}, [form]);
 

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.utils.test.ts

@@ -0,0 +1,144 @@
+import { AuthtypesAuthNProviderDTO } from 'api/generated/services/sigNoz.schemas';
+
+import {
+	convertDomainMappingsToList,
+	convertDomainMappingsToRecord,
+	convertGroupMappingsToList,
+	convertGroupMappingsToRecord,
+	prepareInitialValues,
+} from './CreateEdit.utils';
+
+describe('convertGroupMappingsToRecord', () => {
+	it('returns undefined for an empty list', () => {
+		expect(convertGroupMappingsToRecord([])).toBeUndefined();
+	});
+
+	it('returns undefined when input is undefined', () => {
+		expect(convertGroupMappingsToRecord(undefined)).toBeUndefined();
+	});
+
+	it('converts entries to a Record', () => {
+		expect(
+			convertGroupMappingsToRecord([
+				{ groupName: 'admins', role: 'ADMIN' },
+				{ groupName: 'viewers', role: 'VIEWER' },
+			]),
+		).toStrictEqual({ admins: 'ADMIN', viewers: 'VIEWER' });
+	});
+
+	it('skips entries with missing groupName or role', () => {
+		expect(
+			convertGroupMappingsToRecord([
+				{ groupName: 'admins', role: 'ADMIN' },
+				{ groupName: '', role: 'VIEWER' },
+				{ role: 'EDITOR' },
+			]),
+		).toStrictEqual({ admins: 'ADMIN' });
+	});
+});
+
+describe('convertDomainMappingsToRecord', () => {
+	it('returns undefined for an empty list', () => {
+		expect(convertDomainMappingsToRecord([])).toBeUndefined();
+	});
+
+	it('returns undefined when input is undefined', () => {
+		expect(convertDomainMappingsToRecord(undefined)).toBeUndefined();
+	});
+
+	it('converts entries to a Record', () => {
+		expect(
+			convertDomainMappingsToRecord([
+				{ domain: 'example.com', adminEmail: 'admin@example.com' },
+				{ domain: 'corp.io', adminEmail: 'it@corp.io' },
+			]),
+		).toStrictEqual({
+			'example.com': 'admin@example.com',
+			'corp.io': 'it@corp.io',
+		});
+	});
+});
+
+describe('round-trip fidelity', () => {
+	it('Record → list → Record preserves group mappings', () => {
+		const original = { admins: 'ADMIN', devs: 'EDITOR', viewers: 'VIEWER' };
+		expect(
+			convertGroupMappingsToRecord(convertGroupMappingsToList(original)),
+		).toStrictEqual(original);
+	});
+
+	it('Record → list → Record preserves domain mappings', () => {
+		const original = {
+			'example.com': 'admin@example.com',
+			'corp.io': 'it@corp.io',
+		};
+		expect(
+			convertDomainMappingsToRecord(convertDomainMappingsToList(original)),
+		).toStrictEqual(original);
+	});
+});
+
+describe('prepareInitialValues', () => {
+	it('returns empty defaults when no record is provided', () => {
+		expect(prepareInitialValues(undefined)).toStrictEqual({
+			name: '',
+			ssoEnabled: false,
+			ssoType: '',
+		});
+	});
+
+	it('hydrates groupMappings Record into groupMappingsList for the form', () => {
+		const result = prepareInitialValues({
+			id: 'domain-1',
+			name: 'example.com',
+			config: {
+				ssoEnabled: true,
+				ssoType: AuthtypesAuthNProviderDTO.saml,
+				roleMapping: {
+					defaultRole: 'VIEWER',
+					useRoleAttribute: false,
+					groupMappings: { admins: 'ADMIN', viewers: 'VIEWER' },
+				},
+			},
+		});
+
+		expect(result.roleMapping?.groupMappingsList).toStrictEqual([
+			{ groupName: 'admins', role: 'ADMIN' },
+			{ groupName: 'viewers', role: 'VIEWER' },
+		]);
+	});
+
+	it('hydrates domainToAdminEmail Record into domainToAdminEmailList for the form', () => {
+		const result = prepareInitialValues({
+			id: 'domain-1',
+			name: 'example.com',
+			config: {
+				ssoEnabled: true,
+				ssoType: AuthtypesAuthNProviderDTO.google_auth,
+				googleAuthConfig: {
+					clientId: 'id',
+					clientSecret: 'secret',
+					domainToAdminEmail: { 'example.com': 'admin@example.com' },
+				},
+			},
+		});
+
+		expect(result.googleAuthConfig?.domainToAdminEmailList).toStrictEqual([
+			{ domain: 'example.com', adminEmail: 'admin@example.com' },
+		]);
+	});
+
+	it('sets groupMappingsList to empty array when roleMapping has no groupMappings', () => {
+		const result = prepareInitialValues({
+			id: 'domain-1',
+			name: 'example.com',
+			config: {
+				ssoEnabled: true,
+				ssoType: AuthtypesAuthNProviderDTO.oidc,
+				roleMapping: { defaultRole: 'VIEWER', useRoleAttribute: true },
+			},
+		});
+
+		expect(result.roleMapping?.groupMappingsList).toStrictEqual([]);
+	});
+});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.payload.test.tsx

@@ -0,0 +1,169 @@
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import { rest, server } from 'mocks-server/server';
+
+import CreateEdit from '../CreateEdit/CreateEdit';
+import {
+	AUTH_DOMAINS_UPDATE_ENDPOINT,
+	mockDomainWithRoleMapping,
+	mockGoogleAuthWithWorkspaceGroups,
+	mockUpdateSuccessResponse,
+} from './mocks';
+
+// The real @signozhq/ui/button has internal effects that prevent form.validateFields()
+// from resolving inside act(). Mirror the pattern from SSOEnforcementToggle.test.tsx
+// which mocks @signozhq/ui/switch for the same reason.
+jest.mock('@signozhq/ui/button', () => ({
+	...jest.requireActual('@signozhq/ui/button'),
+	Button: ({
+		children,
+		onClick,
+		loading,
+		disabled,
+		'aria-label': ariaLabel,
+		prefix,
+		suffix,
+	}: {
+		children?: React.ReactNode;
+		onClick?: React.MouseEventHandler<HTMLButtonElement>;
+		loading?: boolean;
+		disabled?: boolean;
+		'aria-label'?: string;
+		prefix?: React.ReactNode;
+		suffix?: React.ReactNode;
+	}) => (
+		<button
+			type="button"
+			onClick={onClick}
+			disabled={disabled || loading}
+			aria-label={ariaLabel}
+		>
+			{prefix}
+			{children}
+			{suffix}
+		</button>
+	),
+}));
+
+describe('CreateEdit — save payload correctness', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('sends groupMappings: {} when all group mappings are deleted', async () => {
+		let capturedPayload: unknown = null;
+
+		server.use(
+			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
+				capturedPayload = await req.json();
+				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
+			}),
+		);
+
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockDomainWithRoleMapping}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		// Open the Role Mapping collapse (Ant Design Collapse responds to click events)
+		fireEvent.click(screen.getByText(/role mapping \(advanced\)/i));
+
+		// Wait for the 3 group mapping rows to appear
+		await waitFor(() =>
+			expect(
+				screen.getAllByRole('button', { name: /remove mapping/i }),
+			).toHaveLength(3),
+		);
+
+		// Delete each row; re-query after each removal
+		fireEvent.click(
+			screen.getAllByRole('button', { name: /remove mapping/i })[0],
+		);
+		await waitFor(() =>
+			expect(
+				screen.getAllByRole('button', { name: /remove mapping/i }),
+			).toHaveLength(2),
+		);
+
+		fireEvent.click(
+			screen.getAllByRole('button', { name: /remove mapping/i })[0],
+		);
+		await waitFor(() =>
+			expect(
+				screen.getAllByRole('button', { name: /remove mapping/i }),
+			).toHaveLength(1),
+		);
+
+		fireEvent.click(
+			screen.getAllByRole('button', { name: /remove mapping/i })[0],
+		);
+		await waitFor(() =>
+			expect(
+				screen.queryAllByRole('button', { name: /remove mapping/i }),
+			).toHaveLength(0),
+		);
+
+		// Submit — MSW intercepts the PUT request
+		fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+
+		await waitFor(() => expect(capturedPayload).not.toBeNull());
+
+		expect(capturedPayload).toMatchObject({
+			config: expect.objectContaining({
+				roleMapping: expect.objectContaining({ groupMappings: {} }),
+			}),
+		});
+	});
+
+	it('sends domainToAdminEmail: {} when all domain mappings are deleted', async () => {
+		let capturedPayload: unknown = null;
+
+		server.use(
+			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
+				capturedPayload = await req.json();
+				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
+			}),
+		);
+
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockGoogleAuthWithWorkspaceGroups}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		// Open the Google Workspace Groups collapse
+		fireEvent.click(screen.getByText(/google workspace groups/i));
+
+		// Wait for the single domain mapping row
+		await waitFor(() =>
+			expect(
+				screen.getByRole('button', { name: /remove mapping/i }),
+			).toBeInTheDocument(),
+		);
+
+		// Delete the row
+		fireEvent.click(screen.getByRole('button', { name: /remove mapping/i }));
+		await waitFor(() =>
+			expect(
+				screen.queryAllByRole('button', { name: /remove mapping/i }),
+			).toHaveLength(0),
+		);
+
+		// Submit
+		fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+
+		await waitFor(() => expect(capturedPayload).not.toBeNull());
+
+		expect(capturedPayload).toMatchObject({
+			config: expect.objectContaining({
+				googleAuthConfig: expect.objectContaining({
+					domainToAdminEmail: {},
+				}),
+			}),
+		});
+	});
+});

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -1,7 +1,6 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import GridTableComponent from 'container/GridTableComponent';
 import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config';
-import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
 
 import { PanelWrapperProps } from './panelWrapper.types';
 
@@ -20,7 +19,7 @@ function TablePanelWrapper({
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
 	const { thresholds } = widget;
 
-	const queryRangeRequest = queryResponse.data?.params as QueryRangeRequestV5;
+	const queryRangeRequest = queryResponse.data?.params;
 
 	return (
 		<GridTableComponent

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -72,8 +72,20 @@
 	.alert-rule-scope {
 		margin-bottom: 12px;
 
-		.ant-radio-wrapper {
-			color: var(--l1-foreground);
+		// `.createForm label` styles field labels (font-weight 500, 14px,
+		// 6px bottom padding). Those bleed into the @signozhq/ui RadioGroup
+		// option labels, making them bold and vertically misaligned with the
+		// radio control. Reset them back to plain option-text styling.
+		label {
+			padding: 0;
+			font-weight: 400;
+			line-height: normal;
+		}
+
+		// Loosen the design-system default (grid gap 0.5rem) between options.
+		.silence-alerts-radio-group {
+			margin-top: 8px;
+			gap: 12px;
 		}
 	}
 
@@ -144,10 +156,7 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-
-			.ant-btn {
-				margin-top: 8px;
-			}
+			margin-top: 12px;
 		}
 
 		.schedule-created-at {

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -54,8 +54,7 @@ import {
 } from './PlannedDowntimeutils';
 
 import './PlannedDowntime.styles.scss';
-import { RadioGroupItem } from '@signozhq/ui/radio-group';
-import { RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroupItem, RadioGroup } from '@signozhq/ui/radio-group';
 
 dayjs.locale('en');
 dayjs.extend(utc);
@@ -471,7 +470,7 @@ export function PlannedDowntimeForm(
 						initialValue="specific"
 						className="alert-rule-scope"
 					>
-						<RadioGroup>
+						<RadioGroup className="silence-alerts-radio-group">
 							<RadioGroupItem value="all">All alert rules</RadioGroupItem>
 							<RadioGroupItem value="specific">Specific alert rules</RadioGroupItem>
 						</RadioGroup>

frontend/src/container/QueryTable/Drilldown/useAggregateDrilldown.tsx

@@ -2,9 +2,8 @@ import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import useDashboardVarConfig from 'container/QueryTable/Drilldown/useDashboardVarConfig';
-import { SuccessResponse } from 'types/api';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -44,10 +43,7 @@ const useAggregateDrilldown = ({
 	aggregateData: AggregateData | null;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;
-	queryRange?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryRange?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 }): {
 	aggregateDrilldownConfig: {
 		header?: string | React.ReactNode;

frontend/src/container/QueryTable/Drilldown/useGraphContextMenu.tsx

@@ -2,9 +2,8 @@ import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { SuccessResponse } from 'types/api';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { isValidQueryName } from './drilldownUtils';
@@ -20,10 +19,7 @@ interface UseGraphContextMenuProps {
 	setSubMenu: (subMenu: string) => void;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;
-	queryRange?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryRange?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 }
 
 export function useGraphContextMenu({

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/container/RoutingPolicies/styles.scss

@@ -35,10 +35,7 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-
-			.ant-btn {
-				margin-top: 8px;
-			}
+			margin-top: 12px;
 		}
 
 		.routing-policies-table {

frontend/src/container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss

@@ -8,7 +8,7 @@
 			139deg,
 			color-mix(in srgb, var(--card) 80%, transparent) 0%,
 			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
+		) !important;
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 		padding: 0;
@@ -34,9 +34,9 @@
 }
 
 .refresh-interval-text {
-	padding: 12px 14px 8px 14px;
+	padding: 12px 14px 8px 14px !important;
 	color: var(--muted-foreground);
-	font-size: 11px;
+	font-size: 13px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: 18px; /* 163.636% */

frontend/src/container/TracesExplorer/Controls/Controls.module.scss

@@ -0,0 +1,14 @@
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.3rem;
+	margin: 8px 0;
+}
+
+.optionsTrigger {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	cursor: pointer;
+}

frontend/src/container/TracesExplorer/Controls/index.tsx

@@ -1,11 +1,13 @@
-import { memo } from 'react';
-import { OptionFormatTypes } from 'constants/optionsFormatTypes';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Settings } from '@signozhq/icons';
+import FieldsSelector from 'components/FieldsSelector';
 import Controls, { ControlsProps } from 'container/Controls';
-import OptionsMenu from 'container/OptionsMenu';
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
+import { DataSource } from 'types/common/queryBuilder';
 
-import { Container } from './styles';
+import styles from './Controls.module.scss';
 
 function TraceExplorerControls({
 	isLoading,
@@ -14,6 +16,9 @@ function TraceExplorerControls({
 	config,
 	showSizeChanger = true,
 }: TraceExplorerControlsProps): JSX.Element | null {
+	const { t } = useTranslation(['trace']);
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const {
 		pagination,
 		handleCountItemsPerPageChange,
@@ -22,12 +27,25 @@ function TraceExplorerControls({
 	} = useQueryPagination(totalCount, perPageOptions);
 
 	return (
-		<Container>
-			{config && (
-				<OptionsMenu
-					selectedOptionFormat={OptionFormatTypes.LIST} // Defaulting it to List view as options are shown only in the List view tab
-					config={{ addColumn: config?.addColumn }}
-				/>
+		<div className={styles.container}>
+			{config?.fieldsSelector && (
+				<>
+					<div
+						className={styles.optionsTrigger}
+						onClick={(): void => setIsFieldsSelectorOpen(true)}
+					>
+						{t('options_menu.options')}
+						<Settings size="md" />
+					</div>
+					<FieldsSelector
+						isOpen={isFieldsSelectorOpen}
+						title="Edit columns"
+						fields={config.fieldsSelector.value}
+						onFieldsChange={config.fieldsSelector.onFieldsChange}
+						onClose={(): void => setIsFieldsSelectorOpen(false)}
+						signal={DataSource.TRACES}
+					/>
+				</>
 			)}
 
 			<Controls
@@ -41,7 +59,7 @@ function TraceExplorerControls({
 				handleNavigatePrevious={handleNavigatePrevious}
 				showSizeChanger={showSizeChanger}
 			/>
-		</Container>
+		</div>
 	);
 }
 

frontend/src/container/TracesExplorer/Controls/styles.ts

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.3rem;
-	margin: 8px 0;
-`;

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -207,8 +207,9 @@ function ListView({
 			const reordered = [...columns];
 			const [moved] = reordered.splice(fromIndex, 1);
 			reordered.splice(toIndex, 0, moved);
+			// `key` is the composite (fieldContext.name) — disambiguates same-name fields.
 			const orderedIds = reordered
-				.map((c) => String(('dataIndex' in c && c.dataIndex) || c.key || ''))
+				.map((c) => String(c.key || ('dataIndex' in c && c.dataIndex) || ''))
 				.filter(Boolean);
 			config?.addColumn?.onReorder(orderedIds);
 		},

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -5,6 +5,7 @@ import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { formUrlParams } from 'container/TraceDetail/utils';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
@@ -83,12 +84,11 @@ export const getListColumns = (
 	const columns: ColumnsType<RowData> =
 		selectedColumns.map((props) => {
 			const name = props?.name || (props as any)?.key;
-			const fieldDataType = props?.fieldDataType || (props as any)?.dataType;
 			const fieldContext = props?.fieldContext || (props as any)?.type;
 			return {
 				title: name,
 				dataIndex: name,
-				key: `${name}-${fieldDataType}-${fieldContext}`,
+				key: buildCompositeKey(name, fieldContext),
 				width: 145,
 				render: (value, item): JSX.Element => {
 					if (value === '') {

frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts

@@ -7,8 +7,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { AppState } from 'store/reducers';
-import { SuccessResponse, Warning } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -19,16 +18,13 @@ export const useGetExplorerQueryRange = (
 	requestData: Query | null,
 	panelType: PANEL_TYPES | null,
 	version: string,
-	options?: UseQueryOptions<SuccessResponse<MetricRangePayloadProps>, Error>,
+	options?: UseQueryOptions<MetricQueryRangeSuccessResponse, Error>,
 	params?: Record<string, unknown>,
 	isDependentOnQB = true,
 	keyRef?: MutableRefObject<any>,
 	headers?: Record<string, string>,
 	selectedTimeInterval?: GetQueryResultsProps['globalSelectedInterval'],
-): UseQueryResult<
-	SuccessResponse<MetricRangePayloadProps> & { warning?: Warning },
-	Error
-> => {
+): UseQueryResult<MetricQueryRangeSuccessResponse, Error> => {
 	const { isEnabledQuery } = useQueryBuilder();
 	const {
 		selectedTime: globalSelectedInterval,

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

@@ -0,0 +1,5 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardActions/DashboardActions.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useState } from 'react';
+import { FullScreenHandle } from 'react-full-screen';
+import { useTranslation } from 'react-i18next';
+import { useCopyToClipboard } from 'react-use';
+import {
+	ClipboardCopy,
+	Ellipsis,
+	FileJson,
+	Fullscreen,
+	LockKeyhole,
+	PenLine,
+	Plus,
+} from '@signozhq/icons';
+import { Popover } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { toast } from '@signozhq/ui/sonner';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { useAppContext } from 'providers/App/App';
+import { USER_ROLES } from 'types/roles';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface Props {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+	handle: FullScreenHandle;
+	isDashboardLocked: boolean;
+	editDashboard: boolean;
+	isAuthor: boolean;
+	addPanelPermission: boolean;
+	onAddPanel: () => void;
+	onLockToggle: () => void;
+	onOpenRename: () => void;
+}
+
+function DashboardActions({
+	dashboard,
+	handle,
+	isDashboardLocked,
+	editDashboard,
+	isAuthor,
+	addPanelPermission,
+	onAddPanel,
+	onLockToggle,
+	onOpenRename,
+}: Props): JSX.Element {
+	const { user } = useAppContext();
+	const { t } = useTranslation(['dashboard', 'common']);
+
+	const id = dashboard.id;
+	const title = dashboard.spec?.display?.name ?? '';
+
+	const [isDashboardSettingsOpen, setIsDashboardSettingsOpen] =
+		useState<boolean>(false);
+
+	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);
+	};
+
+	return (
+		<div className={styles.rightSection}>
+			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+			<Popover
+				open={isDashboardSettingsOpen}
+				arrow={false}
+				onOpenChange={(visible): void => setIsDashboardSettingsOpen(visible)}
+				rootClassName={styles.dashboardSettings}
+				content={
+					<div className={styles.menuContent}>
+						<section className={styles.section1}>
+							{(isAuthor || user.role === USER_ROLES.ADMIN) && (
+								<TooltipSimple
+									title={
+										dashboard.createdBy === 'integration'
+											? 'Dashboards created by integrations cannot be unlocked'
+											: ''
+									}
+								>
+									<Button
+										variant="ghost"
+										prefix={<LockKeyhole size={14} />}
+										disabled={dashboard.createdBy === 'integration'}
+										onClick={(): void => {
+											setIsDashboardSettingsOpen(false);
+											onLockToggle();
+										}}
+										testId="lock-unlock-dashboard"
+									>
+										{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
+									</Button>
+								</TooltipSimple>
+							)}
+
+							{!isDashboardLocked && editDashboard && (
+								<Button
+									variant="ghost"
+									prefix={<PenLine size={14} />}
+									onClick={(): void => {
+										onOpenRename();
+										setIsDashboardSettingsOpen(false);
+									}}
+								>
+									Rename
+								</Button>
+							)}
+
+							<Button
+								variant="ghost"
+								prefix={<Fullscreen size={14} />}
+								onClick={handle.enter}
+							>
+								Full screen
+							</Button>
+						</section>
+						<section className={styles.section2}>
+							<Button
+								variant="ghost"
+								prefix={<FileJson size={14} />}
+								onClick={(): void => {
+									exportJSON();
+									setIsDashboardSettingsOpen(false);
+								}}
+							>
+								Export JSON
+							</Button>
+							<Button
+								variant="ghost"
+								prefix={<ClipboardCopy size={14} />}
+								onClick={(): void => {
+									setCopy(dashboardDataJSON());
+									setIsDashboardSettingsOpen(false);
+								}}
+							>
+								Copy as JSON
+							</Button>
+						</section>
+						<section className={styles.deleteDashboard}>
+							<DeleteButton
+								createdBy={dashboard.createdBy || ''}
+								name={title}
+								id={id}
+								isLocked={isDashboardLocked}
+								routeToListPage
+							/>
+						</section>
+					</div>
+				}
+				trigger="click"
+				placement="bottomRight"
+			>
+				<Button
+					variant="ghost"
+					size="icon"
+					prefix={<Ellipsis size={14} />}
+					className={styles.icons}
+					testId="options"
+				/>
+			</Popover>
+			{!isDashboardLocked && addPanelPermission && (
+				<Button
+					variant="solid"
+					color="primary"
+					className={styles.addPanelBtn}
+					onClick={onAddPanel}
+					prefix={<Plus size="md" />}
+					testId="add-panel-header"
+				>
+					New Panel
+				</Button>
+			)}
+		</div>
+	);
+}
+
+export default DashboardActions;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardDescription.module.scss

@@ -0,0 +1,303 @@
+.dashboardDescriptionContainer {
+	box-shadow: none;
+	border: none;
+	background: unset;
+	color: var(--l2-foreground);
+
+	:global(.ant-card-body) {
+		padding: 0px;
+	}
+
+	.dashboardDetails {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 16px 16px 0px 16px;
+		align-items: flex-start;
+
+		.leftSection {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			width: 45%;
+
+			.dashboardImg {
+				height: 16px;
+				width: 16px;
+			}
+
+			.dashboardTitle {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 16px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 24px; /* 150% */
+				letter-spacing: -0.08px;
+				max-width: 80%;
+
+				display: -webkit-box;
+				-webkit-line-clamp: 1;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+			}
+
+			.publicDashboardIcon {
+				margin-right: 4px;
+			}
+		}
+
+		.rightSection {
+			display: flex;
+			width: 55%;
+			justify-content: flex-end;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 14px;
+
+			.icons {
+				display: flex;
+				align-items: center;
+				width: 32px;
+				height: 34px;
+				padding: 6px;
+				justify-content: center;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 10px; /* 83.333% */
+				letter-spacing: 0.12px;
+			}
+
+			.icons:hover {
+				background-color: unset;
+			}
+
+			.configureButton {
+				display: flex;
+				align-items: center;
+				width: 93px;
+				height: 34px;
+				padding: 6px;
+				justify-content: center;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 10px; /* 83.333% */
+				letter-spacing: 0.12px;
+			}
+
+			.addPanelBtn {
+				display: flex;
+				width: 119px;
+				height: 34px;
+				padding: 5.937px 11.875px;
+				justify-content: center;
+				align-items: center;
+				color: var(--primary-foreground);
+				background: var(--primary-background);
+				font-family: Inter;
+				font-size: 11.875px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 17.812px; /* 150% */
+			}
+		}
+	}
+
+	.dashboardTags {
+		display: flex;
+		gap: 6px;
+		padding: 16px 16px 0px 16px;
+		flex-wrap: wrap;
+
+		.tag {
+			display: flex;
+			padding: 4px 8px;
+			justify-content: center;
+			align-items: center;
+			border-radius: 20px;
+			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+			color: var(--bg-sienna-400);
+			text-align: center;
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+			margin-inline-end: 0px;
+		}
+	}
+
+	.dashboardDescriptionSection {
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 22px; /* 157.143% */
+		letter-spacing: -0.07px;
+		padding: 20px 16px 0px 16px;
+	}
+}
+
+.dashboardSettings {
+	width: 191px;
+	height: 302px;
+	flex-shrink: 0;
+
+	:global(.ant-popover-inner) {
+		padding: 0px;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		) !important;
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+	}
+
+	.menuContent {
+		display: flex;
+		flex-direction: column;
+
+		section {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+
+			button {
+				display: flex;
+				width: 100%;
+				height: unset;
+				padding: 8px;
+				align-items: center;
+				gap: 12px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				border-top: none;
+			}
+		}
+
+		.section1,
+		.section2 {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		.deleteDashboard button {
+			color: var(--bg-cherry-400) !important;
+		}
+	}
+}
+
+.renameDashboard {
+	:global(.ant-modal-content) {
+		width: 384px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+
+		:global(.ant-modal-header) {
+			height: 52px;
+			padding: 16px;
+			background: var(--l2-background);
+			border-bottom: 1px solid var(--l1-border);
+			margin-bottom: 0px;
+
+			:global(.ant-modal-title) {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				width: 349px;
+				height: 20px;
+			}
+		}
+
+		:global(.ant-modal-body) {
+			padding: 16px;
+
+			.dashboardContent {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				.nameText {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+				}
+
+				.dashboardNameInput {
+					display: flex;
+					padding: 6px 6px 6px 8px;
+					align-items: center;
+					gap: 4px;
+					align-self: stretch;
+					border-radius: 0px 2px 2px 0px;
+					border: 1px solid var(--l1-border);
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		:global(.ant-modal-footer) {
+			padding: 16px;
+			margin-top: 0px;
+
+			.dashboardRename {
+				display: flex;
+				flex-direction: row-reverse;
+				gap: 12px;
+
+				.cancelBtn {
+					display: flex;
+					padding: 4px 8px;
+					justify-content: center;
+					align-items: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--l1-border);
+				}
+
+				.renameBtn {
+					display: flex;
+					align-items: center;
+					width: 169px;
+					padding: 4px 8px;
+					justify-content: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--primary-background);
+				}
+			}
+		}
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -0,0 +1,32 @@
+import { Badge } from '@signozhq/ui/badge';
+import { isEmpty } from 'lodash-es';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface Props {
+	tags: string[];
+	description: string;
+}
+
+function DashboardMeta({ tags, description }: Props): JSX.Element {
+	return (
+		<>
+			{tags.length > 0 && (
+				<div className={styles.dashboardTags}>
+					{tags.map((tag) => (
+						<Badge key={tag} className={styles.tag}>
+							{tag}
+						</Badge>
+					))}
+				</div>
+			)}
+			{!isEmpty(description) && (
+				<section className={styles.dashboardDescriptionSection}>
+					{description}
+				</section>
+			)}
+		</>
+	);
+}
+
+export default DashboardMeta;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -0,0 +1,47 @@
+import { Globe, LockKeyhole } from '@signozhq/icons';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface Props {
+	title: string;
+	image: string;
+	isPublicDashboard: boolean;
+	isDashboardLocked: boolean;
+}
+
+function DashboardTitle({
+	title,
+	image,
+	isPublicDashboard,
+	isDashboardLocked,
+}: Props): JSX.Element {
+	return (
+		<div className={styles.leftSection}>
+			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
+			<TooltipSimple title={title.length > 30 ? title : ''}>
+				<Typography.Text
+					className={styles.dashboardTitle}
+					data-testid="dashboard-title"
+				>
+					{title}
+				</Typography.Text>
+			</TooltipSimple>
+
+			{isPublicDashboard && (
+				<TooltipSimple title="This dashboard is publicly accessible">
+					<Globe size={14} className={styles.publicDashboardIcon} />
+				</TooltipSimple>
+			)}
+
+			{isDashboardLocked && (
+				<TooltipSimple title="This dashboard is locked">
+					<LockKeyhole size={14} />
+				</TooltipSimple>
+			)}
+		</div>
+	);
+}
+
+export default DashboardTitle;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/RenameDashboardModal/RenameDashboardModal.tsx

@@ -0,0 +1,70 @@
+import { Input, Modal } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Check, X } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface Props {
+	open: boolean;
+	value: string;
+	isLoading: boolean;
+	onChange: (value: string) => void;
+	onRename: () => void;
+	onClose: () => void;
+}
+
+function RenameDashboardModal({
+	open,
+	value,
+	isLoading,
+	onChange,
+	onRename,
+	onClose,
+}: Props): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Rename Dashboard"
+			onOk={onRename}
+			onCancel={onClose}
+			rootClassName={styles.renameDashboard}
+			footer={
+				<div className={styles.dashboardRename}>
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Check size={14} />}
+						className={styles.renameBtn}
+						onClick={onRename}
+						disabled={isLoading}
+					>
+						Rename Dashboard
+					</Button>
+					<Button
+						variant="ghost"
+						prefix={<X size={14} />}
+						className={styles.cancelBtn}
+						onClick={onClose}
+					>
+						Cancel
+					</Button>
+				</div>
+			}
+		>
+			<div className={styles.dashboardContent}>
+				<Typography.Text className={styles.nameText}>
+					Enter a new name
+				</Typography.Text>
+				<Input
+					data-testid="dashboard-name"
+					className={styles.dashboardNameInput}
+					value={value}
+					onChange={(e): void => onChange(e.target.value)}
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default RenameDashboardModal;

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

@@ -0,0 +1,159 @@
+import { useEffect, useMemo, useState } from 'react';
+import { FullScreenHandle } from 'react-full-screen';
+import { Card } from 'antd';
+import { toast } from '@signozhq/ui/sonner';
+import logEvent from 'api/common/logEvent';
+import {
+	lockDashboardV2,
+	patchDashboardV2,
+	unlockDashboardV2,
+} from 'api/generated/services/dashboard';
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	DashboardtypesJSONPatchOperationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
+import DashboardActions from './DashboardActions/DashboardActions';
+import DashboardMeta from './DashboardMeta/DashboardMeta';
+import DashboardTitle from './DashboardTitle/DashboardTitle';
+import RenameDashboardModal from './RenameDashboardModal/RenameDashboardModal';
+
+import styles from './DashboardDescription.module.scss';
+
+interface DashboardDescriptionProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+	handle: FullScreenHandle;
+	refetch: () => void;
+}
+
+function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
+	const { dashboard, handle, refetch } = props;
+
+	const id = dashboard.id;
+	const isDashboardLocked = !!dashboard.locked;
+
+	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 { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
+	const { showErrorModal } = useErrorModal();
+
+	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 [isRenameDashboardOpen, setIsRenameDashboardOpen] =
+		useState<boolean>(false);
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
+
+	useEffect(() => {
+		setUpdatedTitle(title);
+	}, [title]);
+
+	const handleLockDashboardToggle = async (): Promise<void> => {
+		if (!id) {
+			return;
+		}
+		try {
+			if (isDashboardLocked) {
+				await unlockDashboardV2({ id });
+				toast.success('Dashboard unlocked');
+			} else {
+				await lockDashboardV2({ id });
+				toast.success('Dashboard locked');
+			}
+			refetch();
+		} 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);
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setIsRenameDashboardOpen(true);
+		} finally {
+			setIsRenameLoading(false);
+		}
+	};
+
+	const onEmptyWidgetHandler = (): void => {
+		void logEvent('Dashboard Detail V2: Add new panel clicked', {
+			dashboardId: id,
+		});
+		toast.info('V2 panel editor coming next');
+	};
+
+	return (
+		<Card className={styles.dashboardDescriptionContainer}>
+			<DashboardHeader title={title} image={image} />
+			<section className={styles.dashboardDetails}>
+				<DashboardTitle
+					title={title}
+					image={image}
+					isPublicDashboard={isPublicDashboard}
+					isDashboardLocked={isDashboardLocked}
+				/>
+				<DashboardActions
+					dashboard={dashboard}
+					handle={handle}
+					isDashboardLocked={isDashboardLocked}
+					editDashboard={editDashboard}
+					isAuthor={isAuthor}
+					addPanelPermission={addPanelPermission}
+					onAddPanel={onEmptyWidgetHandler}
+					onLockToggle={handleLockDashboardToggle}
+					onOpenRename={(): void => setIsRenameDashboardOpen(true)}
+				/>
+			</section>
+			<DashboardMeta tags={tags} description={description} />
+
+			<RenameDashboardModal
+				open={isRenameDashboardOpen}
+				value={updatedTitle}
+				isLoading={isRenameLoading}
+				onChange={setUpdatedTitle}
+				onRename={onNameChangeHandler}
+				onClose={(): void => setIsRenameDashboardOpen(false)}
+			/>
+		</Card>
+	);
+}
+
+export default DashboardDescription;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import { EllipsisVertical } from '@signozhq/icons';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+
+import styles from './Panel.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;
+}
+
+function Panel({ panel, panelId, isVisible }: 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 (
+			<TooltipSimple title={description}>
+				<span>{name}</span>
+			</TooltipSimple>
+		);
+	}, [name, description]);
+
+	return (
+		<div
+			className={styles.panel}
+			data-panel-visible={isVisible ? 'true' : 'false'}
+		>
+			<div className={cx(styles.header, 'panel-drag-handle')}>
+				<div className={styles.headerLeft}>
+					<Typography.Text className={styles.headerTitle}>
+						{headerTitle}
+					</Typography.Text>
+					<Badge className={styles.badge}>{kind}</Badge>
+				</div>
+				<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 Panel;

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

@@ -0,0 +1,10 @@
+.body {
+	flex: 1;
+	padding: 12px 24px;
+	overflow: auto;
+}
+
+.emptyState {
+	padding: 48px;
+	text-align: center;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -0,0 +1,60 @@
+import { useRef, useState } from 'react';
+
+import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
+
+import type { DashboardSection } from '../../../utils';
+import SectionGrid from '../SectionGrid/SectionGrid';
+import SectionHeader from '../SectionHeader/SectionHeader';
+import styles from './Section.module.scss';
+
+interface Props {
+	section: DashboardSection;
+}
+
+function Section({ section }: 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, setOpen] = useState<boolean>(section.open);
+	const toggle = (): void => setOpen((prev) => !prev);
+
+	const grid = <SectionGrid items={section.items} isVisible={isVisible} />;
+
+	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}
+			/>
+			{open ? grid : null}
+		</div>
+	);
+}
+
+export default Section;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
+
+import type { DashboardSection } from '../../../utils';
+import Panel from '../../Panel/Panel';
+import styles from './SectionGrid.module.scss';
+
+const ResponsiveGridLayout = WidthProvider(GridLayout);
+
+interface Props {
+	items: DashboardSection['items'];
+	/** Forwarded to panels — true when the parent section is in the viewport. */
+	isVisible?: boolean;
+}
+
+function SectionGrid({ items, isVisible }: 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],
+	);
+
+	return (
+		<ResponsiveGridLayout
+			className={styles.grid}
+			cols={12}
+			rowHeight={45}
+			autoSize
+			useCSSTransforms
+			layout={rglLayout}
+			isDraggable={false}
+			isResizable={false}
+			margin={[8, 8]}
+		>
+			{items.map((item) => (
+				<div key={item.id}>
+					<Panel panel={item.panel} panelId={item.id} isVisible={isVisible} />
+				</div>
+			))}
+		</ResponsiveGridLayout>
+	);
+}
+
+export default SectionGrid;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,42 @@
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './SectionHeader.module.scss';
+
+interface Props {
+	sectionId: string;
+	title: string;
+	open: boolean;
+	onToggle: () => void;
+	repeatVariable?: string;
+}
+
+function SectionHeader({
+	sectionId,
+	title,
+	open,
+	onToggle,
+	repeatVariable,
+}: Props): JSX.Element {
+	return (
+		<div className={cx(styles.header, { [styles.headerOpen]: open })}>
+			<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>
+		</div>
+	);
+}
+
+export default SectionHeader;

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

@@ -0,0 +1,53 @@
+import { ReactNode, 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 Section from './Section/Section/Section';
+import styles from './PanelsAndSectionsLayout.module.scss';
+
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+
+interface Props {
+	layouts: DashboardtypesLayoutDTO[];
+	panels: Record<string, DashboardtypesPanelDTO | undefined>;
+}
+
+function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
+	const sections = useMemo(
+		() => layoutsToSections(layouts, panels),
+		[layouts, panels],
+	);
+
+	const isEmpty =
+		sections.length === 0 || sections.every((s) => s.items.length === 0);
+
+	const renderContent = (): ReactNode => {
+		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>
+			);
+		}
+
+		return sections.map((section) => (
+			<Section key={section.id} section={section} />
+		));
+	};
+
+	return <div className={styles.body}>{renderContent()}</div>;
+}
+
+export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.module.scss

@@ -0,0 +1,63 @@
+.dashboardBreadcrumbs {
+	width: 100%;
+	height: 48px;
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	max-width: 80%;
+
+	.dashboardBtn {
+		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;
+	}
+
+	.dashboardBtn:hover {
+		background-color: unset;
+	}
+
+	.idBtn {
+		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;
+		}
+
+		:global(.ant-btn-icon) {
+			margin-inline-end: 4px;
+		}
+	}
+	.idBtn:hover {
+		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
+		color: var(--bg-robin-300);
+	}
+
+	.dashboardIconImage {
+		height: 14px;
+		width: 14px;
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+import { Button } from '@signozhq/ui/button';
+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 styles from './DashboardBreadcrumbs.module.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={styles.dashboardBreadcrumbs}>
+			<Button
+				variant="ghost"
+				prefix={<LayoutGrid size={14} />}
+				className={styles.dashboardBtn}
+				onClick={goToListPage}
+			>
+				Dashboard /
+			</Button>
+			<Button variant="ghost" className={styles.idBtn}>
+				<img
+					src={image}
+					alt="dashboard-icon"
+					className={styles.dashboardIconImage}
+				/>
+				{title}
+			</Button>
+		</div>
+	);
+}
+
+export default DashboardBreadcrumbs;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardHeader.module.scss

@@ -0,0 +1,9 @@
+.dashboardHeader {
+	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/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

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