test(traces): add MSW data-render tests for grouped and list views

Swaps ResizeTable for the shared TracesTable, so the grouped view gets
resizable and reorderable columns persisted per-device via
TRACES_VIEW_COLUMNS. Keeps prev/next pagination; the toolbar now always
renders so pagination doesn't disappear on an empty result.

frontend/jest.setup.ts

@@ -62,6 +62,40 @@ if (typeof window.ResizeObserver === 'undefined') {
 	(window as any).ResizeObserver = ResizeObserverMock;
 }
 
+if (typeof globalThis.DOMRect === 'undefined') {
+	(globalThis as any).DOMRect = class DOMRect {
+		x = 0;
+		y = 0;
+		width = 0;
+		height = 0;
+		top = 0;
+		right = 0;
+		bottom = 0;
+		left = 0;
+		constructor(x = 0, y = 0, width = 0, height = 0) {
+			this.x = x;
+			this.y = y;
+			this.width = width;
+			this.height = height;
+			this.top = y;
+			this.right = x + width;
+			this.bottom = y + height;
+			this.left = x;
+		}
+		toJSON(): any {
+			return { x: this.x, y: this.y, width: this.width, height: this.height };
+		}
+		static fromRect(rect?: {
+			x?: number;
+			y?: number;
+			width?: number;
+			height?: number;
+		}): DOMRect {
+			return new DOMRect(rect?.x, rect?.y, rect?.width, rect?.height);
+		}
+	};
+}
+
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,9 +48,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/design-tokens": "2.1.6",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.0.23",
+    "@signozhq/ui": "0.1.0",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -238,4 +238,4 @@
     "tmp@<0.2.6": ">=0.2.6 <0.3.0",
     "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
-}
+}

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -28,6 +28,9 @@ interface FieldsSelectorProps {
 	signal: DataSource;
 	maxFields?: number;
 	requiredFields?: readonly string[];
+	// Lets users add a free-typed field which
+	// does not show up in the suggestions
+	allowCustomFields?: boolean;
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
@@ -46,6 +49,7 @@ function FieldsSelectorContent({
 	signal,
 	maxFields,
 	requiredFields,
+	allowCustomFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
@@ -67,7 +71,7 @@ function FieldsSelectorContent({
 
 	const handleInputChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim().toLowerCase();
+			const value = e.target.value.trim();
 			setInputValue(value);
 			debouncedUpdate(value);
 		},
@@ -153,6 +157,7 @@ function FieldsSelectorContent({
 					addedFields={draftFields}
 					onAdd={handleAdd}
 					isAtLimit={isAtLimit}
+					allowCustomFields={allowCustomFields}
 				/>
 
 				{hasUnsavedChanges && (
@@ -192,7 +197,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
+				key: buildCompositeKey(f.name, f.fieldContext),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -21,6 +21,7 @@ interface OtherFieldsProps {
 	addedFields: TelemetryFieldKey[];
 	onAdd: (field: TelemetryFieldKey) => void;
 	isAtLimit: boolean;
+	allowCustomFields?: boolean;
 }
 
 function OtherFields({
@@ -29,6 +30,7 @@ function OtherFields({
 	addedFields,
 	onAdd,
 	isAtLimit,
+	allowCustomFields,
 }: OtherFieldsProps): JSX.Element {
 	const { data, isFetching } = useGetQueryKeySuggestions(
 		{
@@ -45,25 +47,45 @@ function OtherFields({
 		},
 	);
 
-	const otherFields: TelemetryFieldKey[] = useMemo(() => {
-		const suggestions = Object.values(data?.data.data.keys || {}).flat();
+	const otherFields = useMemo<TelemetryFieldKey[]>(() => {
+		const rawSuggestions = Object.values(data?.data.data.keys || {}).flat();
 		// 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,
-			}),
-		);
+		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
+			...attr,
+			key: buildCompositeKey(attr.name, attr.fieldContext as string),
+			signal: attr.signal as SignalType,
+			fieldContext: attr.fieldContext as FieldContext,
+			fieldDataType: attr.fieldDataType,
+		}));
 		const addedIds = new Set(
-			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
+			addedFields.map((f) => buildCompositeKey(f.name, f.fieldContext)),
 		);
-		return normalizedSuggestions.filter(
+		const available = suggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),
 		);
-	}, [data, addedFields]);
+
+		// Prepend the custom field when its name is not in suggestions and
+		// not already added.
+		const typed = debouncedInputValue.trim();
+		const nameMatches = (list: TelemetryFieldKey[]): boolean =>
+			list.some((f) => f.name.toLowerCase() === typed.toLowerCase());
+		const showCustom =
+			!!allowCustomFields &&
+			typed.length > 0 &&
+			!nameMatches(suggestions) &&
+			!nameMatches(addedFields);
+
+		if (!showCustom) {
+			return available;
+		}
+		const customField: TelemetryFieldKey = {
+			name: typed,
+			fieldContext: '',
+			fieldDataType: '',
+			key: buildCompositeKey(typed, ''),
+		};
+		return [customField, ...available];
+	}, [data, addedFields, allowCustomFields, debouncedInputValue]);
 
 	if (isFetching) {
 		return (

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

@@ -11,7 +11,7 @@ const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
 	signal: 'logs',
 	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
 	fieldDataType: 'string',
-	key: `${fieldContext}.${name}`,
+	key: `${fieldContext}:${name}`,
 });
 
 describe('AddedFields — requiredFields', () => {
@@ -33,7 +33,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.a', 'log.c']}
+				requiredFields={['log:a', 'log:c']}
 			/>,
 		);
 
@@ -50,7 +50,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.a']}
+				requiredFields={['log:a']}
 			/>,
 		);
 
@@ -68,7 +68,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
+				requiredFields={['log:body']}
 			/>,
 		);
 
@@ -101,11 +101,11 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
+				requiredFields={['log:body']}
 			/>,
 		);
 
-		// 'log.body' locked, 'log.body_extra' removable.
+		// 'log:body' locked, 'log:body_extra' removable.
 		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
 	});
 });

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

@@ -0,0 +1,188 @@
+import { act, fireEvent, render, screen } from 'tests/test-utils';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import FieldsSelector from '../FieldsSelector';
+
+jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+// FloatingPanel is a react-rnd/portal shell — presentation only. Render its
+// children directly so the test exercises the column-editing behavior.
+jest.mock('periscope/components/FloatingPanel', () => ({
+	FloatingPanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+
+const mockSuggestions = (names: string[]): void => {
+	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
+		data: {
+			data: {
+				data: {
+					keys: {
+						attributeKeys: names.map((name) => ({
+							name,
+							signal: 'logs',
+							fieldDataType: 'string',
+							fieldContext: '',
+						})),
+					},
+				},
+			},
+		},
+		isFetching: false,
+	});
+};
+
+const field = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
+	name,
+	signal: 'logs',
+	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
+	fieldDataType: 'string',
+});
+
+const renderPanel = (
+	props: Partial<React.ComponentProps<typeof FieldsSelector>> = {},
+): { onFieldsChange: jest.Mock } => {
+	const onFieldsChange = jest.fn();
+	render(
+		<FieldsSelector
+			isOpen
+			title="Edit columns"
+			fields={props.fields ?? []}
+			onFieldsChange={onFieldsChange}
+			onClose={jest.fn()}
+			signal={DataSource.LOGS}
+			allowCustomFields
+			{...props}
+		/>,
+	);
+	return { onFieldsChange };
+};
+
+// Type into the search box and flush the 400ms debounce so OtherFields (driven
+// by the debounced value) recomputes.
+const typeSearch = (value: string): void => {
+	const input = screen.getByPlaceholderText('Search for a field...');
+	act(() => {
+		fireEvent.change(input, { target: { value } });
+	});
+	act(() => {
+		jest.advanceTimersByTime(400);
+	});
+};
+
+describe('FieldsSelector — edit columns (integration)', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		mockSuggestions([]);
+	});
+
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('adds a free-typed field end to end and saves the synthesized key', () => {
+		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
+
+		typeSearch('orderId');
+
+		// custom option surfaces in OTHER FIELDS (only Add button, no suggestions)
+		expect(screen.getByText('orderId')).toBeInTheDocument();
+
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
+		});
+
+		// moved into ADDED FIELDS → OTHER FIELDS has nothing left to offer
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+
+		// Save commits the draft
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+		});
+
+		expect(onFieldsChange).toHaveBeenCalledTimes(1);
+		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
+		expect(saved).toStrictEqual(
+			expect.arrayContaining([
+				expect.objectContaining({
+					name: 'orderId',
+					fieldContext: '',
+					fieldDataType: '',
+					key: 'orderId',
+				}),
+			]),
+		);
+	});
+
+	it('adds a suggested field: it moves from OTHER FIELDS into ADDED FIELDS', () => {
+		mockSuggestions(['service.name']);
+		const { onFieldsChange } = renderPanel({ fields: [] });
+
+		const addButton = screen.getByRole('button', { name: /^add$/i });
+		act(() => {
+			fireEvent.click(addButton);
+		});
+
+		// now removable in ADDED FIELDS, no longer offered in OTHER FIELDS
+		expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /^add$/i }),
+		).not.toBeInTheDocument();
+
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+		});
+		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
+		expect(saved.map((f) => f.name)).toContain('service.name');
+	});
+
+	it('hides the custom option when the typed name is already added', () => {
+		renderPanel({ fields: [field('orderId')] });
+
+		typeSearch('ORDERID');
+
+		// exact name already added → nothing left to offer in OTHER FIELDS
+		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+	});
+
+	it('does not offer a custom option when allowCustomFields is off', () => {
+		renderPanel({ fields: [], allowCustomFields: false });
+
+		typeSearch('unknown.a.b.c');
+
+		// no custom row and nothing addable
+		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /^add$/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('discards an added field, reverting the draft', () => {
+		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
+
+		typeSearch('orderId');
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
+		});
+
+		// clear the search so the added list is not filtered
+		typeSearch('');
+
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /discard/i }));
+		});
+
+		expect(screen.queryByText('orderId')).not.toBeInTheDocument();
+		expect(onFieldsChange).not.toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,125 @@
+import { fireEvent, render, screen } from 'tests/test-utils';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import OtherFields from '../OtherFields';
+
+jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
+
+const mockSuggestions = (names: string[]): void => {
+	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
+		data: {
+			data: {
+				data: {
+					keys: {
+						attributeKeys: names.map((name) => ({
+							name,
+							signal: 'logs',
+							fieldDataType: 'string',
+							fieldContext: '',
+						})),
+					},
+				},
+			},
+		},
+		isFetching: false,
+	});
+};
+
+const renderOtherFields = (
+	props: Partial<React.ComponentProps<typeof OtherFields>> = {},
+): { onAdd: jest.Mock } => {
+	const onAdd = jest.fn();
+	render(
+		<OtherFields
+			signal={DataSource.LOGS}
+			debouncedInputValue=""
+			addedFields={[]}
+			onAdd={onAdd}
+			isAtLimit={false}
+			allowCustomFields
+			{...props}
+		/>,
+	);
+	return { onAdd };
+};
+
+const addedField = (name: string): TelemetryFieldKey => ({
+	name,
+	signal: 'logs',
+	fieldContext: '',
+	fieldDataType: '',
+	key: name,
+});
+
+describe('OtherFields — custom (free-typed) option', () => {
+	beforeEach(() => {
+		mockSuggestions([]);
+	});
+
+	it('shows a custom option for a typed name that is not a suggestion', () => {
+		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c' });
+
+		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
+	});
+
+	it('synthesizes the field with raw name, empty context/type, on add', () => {
+		const { onAdd } = renderOtherFields({ debouncedInputValue: 'orderId' });
+
+		fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+		expect(onAdd).toHaveBeenCalledWith({
+			name: 'orderId',
+			fieldContext: '',
+			fieldDataType: '',
+			key: 'orderId',
+		});
+	});
+
+	it('hides the custom option when an exact suggestion exists (case-insensitive)', () => {
+		mockSuggestions(['orderId']);
+		renderOtherFields({ debouncedInputValue: 'orderid' });
+
+		// the real suggestion shows, the lowercased custom name does not
+		expect(screen.getByText('orderId')).toBeInTheDocument();
+		expect(screen.queryByText('orderid')).not.toBeInTheDocument();
+	});
+
+	it('hides the custom option when the name is already added (case-insensitive)', () => {
+		renderOtherFields({
+			debouncedInputValue: 'ORDERID',
+			addedFields: [addedField('orderId')],
+		});
+
+		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+	});
+
+	it('does not show the custom option when allowCustomFields is off', () => {
+		renderOtherFields({
+			debouncedInputValue: 'unknown.a.b.c',
+			allowCustomFields: false,
+		});
+
+		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+	});
+
+	it('does not show the custom option for an empty input', () => {
+		renderOtherFields({ debouncedInputValue: '   ' });
+
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+	});
+
+	it('shows the custom option at the field limit but hides its Add button', () => {
+		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c', isAtLimit: true });
+
+		// same as every other row at the limit: name shown, no Add button
+		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /add/i }),
+		).not.toBeInTheDocument();
+	});
+});

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

@@ -51,13 +51,13 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log.*'); contextless user fields collapse to bare name.
+		// composite IDs ('log:*'); contextless user fields collapse to bare name.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
 			'service.name',
-			'log.body',
+			'log:body',
 			'request.id',
-			'log.timestamp',
+			'log:timestamp',
 		]);
 	});
 
@@ -70,14 +70,14 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log.body'.
+		// 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',
+			'log:body',
+			'attribute:body',
 		]);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
+		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', () => {
@@ -91,11 +91,11 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		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',
+			'log:timestamp',
+			'attribute:timestamp',
 		]);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
+		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('attribute:timestamp')?.enableRemove).toBe(true);
 	});
 
 	it('skips the synthetic "id" field name', () => {
@@ -127,10 +127,10 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 
 		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);
+		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);

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -44,6 +44,13 @@
 			--tanstack-first-column-header-bg,
 			var(--tanstack-table-header-cell-bg, var(--l2-background))
 		) !important;
+		padding-left: var(
+			--tanstack-cell-header-padding-left-first-column,
+			var(
+				--tanstack-cell-header-padding-left-override,
+				var(--tanstack-cell-padding-left, 0.3rem)
+			)
+		);
 	}
 }
 

frontend/src/components/TanStackTableView/TanStackTable.module.scss

@@ -161,7 +161,7 @@
 .tableHeaderCell {
 	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
 		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
-	height: 36px;
+	height: var(--tanstack-table-header-height, 36px);
 	text-align: left;
 	font-size: 14px;
 	font-style: normal;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -664,6 +664,7 @@ function TanStackTableInner<TData, TItemKey = string>(
 										value={limit?.toString()}
 										defaultValue="10"
 										onChange={(value): void => {
+											value ??= '10';
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
 											if (page !== 1) {

frontend/src/constants/localStorage.ts

@@ -11,6 +11,7 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS',
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
+	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -124,9 +124,7 @@ export function buildBaseConfig({
 		side: 2,
 		isDarkMode,
 		isLogScale,
-		// Graph and bar plot time on X; every other panel type here does not.
-		isTimeAxis:
-			panelType === PANEL_TYPES.TIME_SERIES || panelType === PANEL_TYPES.BAR,
+		panelType,
 	});
 
 	builder.addAxis({
@@ -136,6 +134,7 @@ export function buildBaseConfig({
 		isDarkMode,
 		isLogScale,
 		yAxisUnit,
+		panelType,
 	});
 
 	return builder;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/configBuilder.ts

@@ -1,4 +1,5 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import {
@@ -75,7 +76,7 @@ export function buildEntityMetricsChartConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isTimeAxis: true,
+		panelType: PANEL_TYPES.TIME_SERIES,
 	});
 
 	builder.addAxis({
@@ -84,6 +85,7 @@ export function buildEntityMetricsChartConfig({
 		side: 3,
 		isDarkMode,
 		yAxisUnit,
+		panelType: PANEL_TYPES.TIME_SERIES,
 	});
 
 	if (!apiResponse?.data?.result) {

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -4,9 +4,9 @@
 	gap: var(--spacing-4);
 	padding: var(--spacing-2) var(--spacing-2);
 
-	--tab-content-padding: 0;
-	--tab-text-color: var(--l1-foreground);
-	--tab-active-text-color: var(--l1-foreground);
+	--tabs-content-padding: 0;
+	--tabs-text-color: var(--l1-foreground);
+	--tabs-active-text-color: var(--l1-foreground);
 }
 
 .pageError {

frontend/src/container/LLMObservability/LLMObservability.module.scss

@@ -4,8 +4,8 @@
 	height: 100%;
 	margin-top: var(--spacing-2);
 	margin-left: var(--spacing-2);
-	--tab-text-color: var(--l1-foreground);
-	--tab-active-text-color: var(--l1-foreground);
+	--tabs-text-color: var(--l1-foreground);
+	--tabs-active-text-color: var(--l1-foreground);
 	[role='tabpanel'] {
 		margin: 0;
 		padding: var(--spacing-0) var(--spacing-4);

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -2,10 +2,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	--tab-content-padding: 0;
+	--tabs-content-padding: 0;
 	margin-top: var(--spacing-3);
-	--tab-text-color: var(--l1-foreground);
-	--tab-active-text-color: var(--l1-foreground);
+	--tabs-text-color: var(--l1-foreground);
+	--tabs-active-text-color: var(--l1-foreground);
 }
 
 .tabLabel {

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

@@ -275,6 +275,7 @@ function LiveLogsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
+					allowCustomFields
 				/>
 			)}
 		</div>

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -113,6 +113,7 @@ function LogsActionsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
+					allowCustomFields
 				/>
 			)}
 		</div>

frontend/src/container/MCPServerSettings/ClientTabs/ClientTabs.styles.scss

@@ -6,8 +6,8 @@
 	}
 
 	// Remove default tab content padding/margin — the card provides spacing.
-	--tab-content-padding: 0;
-	--tab-content-margin: var(--spacing-4) 0 0;
+	--tabs-content-padding: 0;
+	--tabs-content-margin: var(--spacing-4) 0 0;
 }
 
 .mcp-client-tabs {

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

@@ -1,4 +1,5 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import {
@@ -71,7 +72,7 @@ export function buildMeterChartConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isTimeAxis: true,
+		panelType: PANEL_TYPES.BAR,
 	});
 
 	builder.addAxis({
@@ -80,6 +81,7 @@ export function buildMeterChartConfig({
 		side: 3,
 		isDarkMode,
 		yAxisUnit,
+		panelType: PANEL_TYPES.BAR,
 	});
 
 	if (!apiResponse?.data?.result) {

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

@@ -296,12 +296,12 @@ describe('useOptionsMenu', () => {
 				}),
 			);
 
-			// New order: [attribute.service.name, log.body, resource.service.name, log.timestamp]
+			// 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',
+				'attribute:service.name',
+				'log:body',
+				'resource:service.name',
+				'log:timestamp',
 			]);
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
@@ -309,13 +309,13 @@ describe('useOptionsMenu', () => {
 			expect(
 				reordered.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}.${c.name}`,
+						`${c.fieldContext}:${c.name}`,
 				),
 			).toStrictEqual([
-				'attribute.service.name',
-				'log.body',
-				'resource.service.name',
-				'log.timestamp',
+				'attribute:service.name',
+				'log:body',
+				'resource:service.name',
+				'log:timestamp',
 			]);
 		});
 
@@ -329,11 +329,11 @@ describe('useOptionsMenu', () => {
 
 			result.current.config.addColumn?.onReorder([
 				'state-indicator',
-				'log.timestamp',
+				'log:timestamp',
 				'unknown.composite',
-				'log.body',
-				'resource.service.name',
-				'attribute.service.name',
+				'log:body',
+				'resource:service.name',
+				'attribute:service.name',
 			]);
 
 			const reordered = mockUpdateColumns.mock.calls[0][0];
@@ -341,13 +341,13 @@ describe('useOptionsMenu', () => {
 			expect(
 				reordered.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}.${c.name}`,
+						`${c.fieldContext}:${c.name}`,
 				),
 			).toStrictEqual([
-				'log.timestamp',
-				'log.body',
-				'resource.service.name',
-				'attribute.service.name',
+				'log:timestamp',
+				'log:body',
+				'resource:service.name',
+				'attribute:service.name',
 			]);
 		});
 
@@ -359,17 +359,17 @@ describe('useOptionsMenu', () => {
 				}),
 			);
 
-			// Removing 'resource.service.name' should drop ONLY the resource variant.
-			result.current.config.addColumn?.onRemove('resource.service.name');
+			// 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}`,
+						`${c.fieldContext}:${c.name}`,
 				),
-			).toStrictEqual(['log.body', 'attribute.service.name', 'log.timestamp']);
+			).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)', () => {

frontend/src/container/OptionsMenu/utils.ts

@@ -16,7 +16,7 @@ export const getOptionsFromKeys = (
 };
 
 // Composite identity for a column. Disambiguates same-name fields across
-// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
+// 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;
+	context ? `${context}:${name}` : name;

frontend/src/container/PanelWrapper/__tests__/__snapshots__/ValuePanelWrapper.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
     class="c0"
   >
     <p
-      class="_typography_ulrzs_1"
+      class="_typography_j4pmm_1"
       data-slot="typography"
       data-variant="text"
     />
@@ -50,7 +50,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
         class="value-text-container"
       >
         <p
-          class="_typography_ulrzs_1 value-graph-text"
+          class="_typography_j4pmm_1 value-graph-text"
           data-slot="typography"
           data-testid="value-graph-text"
           data-variant="text"
@@ -59,7 +59,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
           295.43
         </p>
         <p
-          class="_typography_ulrzs_1 value-graph-unit"
+          class="_typography_j4pmm_1 value-graph-unit"
           data-slot="typography"
           data-testid="value-graph-suffix-unit"
           data-variant="text"

frontend/src/container/PipelinePage/tests/__snapshots__/DragAction.test.tsx.snap

@@ -22,11 +22,11 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
     class="c0"
   >
     <div
-      class="_switch-wrapper_jbsv7_1"
+      class="_switch-wrapper_1a8sn_6"
     >
       <button
         aria-checked="true"
-        class="_switch_jbsv7_1"
+        class="_switch_1a8sn_6"
         data-color="robin"
         data-state="checked"
         id=":r0:"
@@ -35,7 +35,7 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
         value="on"
       >
         <span
-          class="_switch__thumb_jbsv7_59"
+          class="_switch__thumb_1a8sn_71"
           data-state="checked"
         />
       </button>

frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap

@@ -74,7 +74,7 @@ exports[`PipelinePage container test should render PipelinePageLayout section 1`
             />
             <div>
               <p
-                class="_typography_ulrzs_1"
+                class="_typography_j4pmm_1"
                 data-slot="typography"
                 data-variant="text"
               >

frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.module.scss

@@ -105,7 +105,7 @@
 	flex-direction: column;
 	flex: 1;
 	min-height: 0;
-	--tab-content-padding: 0px;
+	--tabs-content-padding: 0px;
 
 	[role='tabpanel'] {
 		display: flex;

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

@@ -0,0 +1,8 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	height: calc(100vh - 240px);
+	min-height: 400px;
+}

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

@@ -1,3 +1,4 @@
+import type { TelemetryFieldKey } from 'api/v5/v5';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const defaultSelectedColumns: string[] = [
@@ -10,3 +11,9 @@ export const defaultSelectedColumns: string[] = [
 ];
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
+
+// Pinned timestamp column
+export const TIMESTAMP_FIELD = {
+	name: 'timestamp',
+	fieldContext: 'span',
+} as TelemetryFieldKey;

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

@@ -0,0 +1,133 @@
+import { ENVIRONMENT } from 'constants/env';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, screen } from 'tests/test-utils';
+
+import ListView from './index';
+
+// globalTime starts with loading:true, which gates the list query. Force just that
+// slice's loading to false so the query fires; every other selector is untouched.
+jest.mock('react-redux', () => {
+	const actual = jest.requireActual('react-redux');
+	return {
+		...actual,
+		useSelector: (selector: (state: unknown) => unknown): unknown => {
+			const result = actual.useSelector(selector);
+			if (result && typeof result === 'object' && 'loading' in result) {
+				return { ...result, loading: false };
+			}
+			return result;
+		},
+	};
+});
+
+// List columns come from the options menu (server-synced preferences). Pin them
+// so the query fires and the expected columns render, independent of that API.
+jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
+	__esModule: true,
+	default: (): unknown => ({
+		options: {
+			selectColumns: [
+				{ name: 'service.name', fieldContext: 'resource' },
+				{ name: 'name', fieldContext: 'span' },
+				{ name: 'duration_nano', fieldContext: 'span' },
+				{ name: 'http_method', fieldContext: 'span' },
+				{ name: 'response_status_code', fieldContext: 'span' },
+			],
+		},
+		config: { addColumn: { onRemove: jest.fn() } },
+	}),
+}));
+
+const BASE_URL = ENVIRONMENT.baseURL;
+const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
+
+const listRows = [
+	{
+		timestamp: '2024-07-19T08:39:58.735245Z',
+		data: {
+			'service.name': 'frontend',
+			name: 'HTTP GET',
+			duration_nano: 55306000,
+			http_method: 'GET',
+			response_status_code: '200',
+			span_id: '772c4d29dd9076ac',
+			trace_id: '0000000000000000344ded1387b08a7e',
+		},
+	},
+	{
+		timestamp: '2024-07-19T08:39:59.949129915Z',
+		data: {
+			'service.name': 'demo-app',
+			name: 'authenticate_check_db',
+			duration_nano: 790949390,
+			// empty status fields to assert the "-" cell
+			http_method: '',
+			response_status_code: '',
+			span_id: '5704353737b6778e',
+			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
+		},
+	},
+];
+
+const listResponse = (rows: unknown[]): Record<string, unknown> => ({
+	data: { type: 'raw', data: { results: [{ queryName: 'A', rows }] } },
+});
+
+const mockSuccess = (rows: unknown[] = listRows): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(listResponse(rows))),
+		),
+	);
+};
+
+const renderListView = (): ReturnType<typeof render> =>
+	render(
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
+			<ListView
+				isFilterApplied={false}
+				setWarning={jest.fn()}
+				setIsLoadingQueries={jest.fn()}
+			/>
+		</VirtuosoMockContext.Provider>,
+		{},
+		{
+			initialRoute: '/traces-explorer',
+			queryBuilderOverrides: {
+				panelType: PANEL_TYPES.LIST,
+				stagedQuery: initialQueriesMap.traces,
+				currentQuery: initialQueriesMap.traces,
+				redirectWithQueryBuilderData: jest.fn(),
+			} as any,
+		},
+	);
+
+describe('Traces ListView - Data Loaded', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders backend rows in FieldCell format', async () => {
+		mockSuccess();
+		renderListView();
+
+		// plain-text columns
+		await expect(screen.findByText('frontend')).resolves.toBeInTheDocument();
+		expect(screen.getByText('authenticate_check_db')).toBeInTheDocument();
+
+		// duration_nano renders in milliseconds
+		expect(screen.getAllByTestId('duration_nano')[0]).toHaveTextContent(/ms$/);
+
+		// http_method / response_status_code render as badges
+		expect(screen.getAllByTestId('http_method')[0]).toHaveTextContent('GET');
+		expect(screen.getAllByTestId('response_status_code')[0]).toHaveTextContent(
+			'200',
+		);
+
+		// empty status fields render "-"
+		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
+	});
+});

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

@@ -12,16 +12,18 @@ import {
 import { useSelector } from 'react-redux';
 import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
-import { ResizeTable } from 'components/ResizeTable';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
+import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import {
+	getFieldColumn,
+	TracesTableRow,
+} from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
@@ -32,20 +34,22 @@ import { Pagination } from 'hooks/queryPagination';
 import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { ArrowUp10, Minus } from '@signozhq/icons';
-import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
-import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { TracesLoading } from '../TraceLoading/TraceLoading';
-import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs';
-import { Container, tableStyles } from './styles';
-import { getListColumns, transformDataWithDate } from './utils';
+import {
+	defaultSelectedColumns,
+	PER_PAGE_OPTIONS,
+	TIMESTAMP_FIELD,
+} from './configs';
+import { getTraceLink, transformSpanRows } from './utils';
 
 import './ListView.styles.scss';
 
+import styles from './ListView.module.scss';
+
 interface ListViewProps {
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
@@ -93,7 +97,7 @@ function ListView({
 		[stagedQuery, orderBy],
 	);
 
-	// TEMP — remove after traces moves to TanStack table.
+	// Stable sorted-name signature for the queryKey.
 	// - Drag updates selectColumns; raw queryKey would churn on reorder.
 	// - Trace API fetches only listed columns → add/remove must refetch.
 	// - Sorted-name signature: stable on reorder, changes on add/remove.
@@ -186,60 +190,42 @@ function ListView({
 		[queryTableDataResult],
 	);
 
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const columns = useMemo(
-		() =>
-			getListColumns(
-				options?.selectColumns || [],
-				formatTimezoneAdjustedTimestamp,
+	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(() => {
+		const fields = [
+			TIMESTAMP_FIELD,
+			...(options?.selectColumns ?? []).filter(
+				(field) => field.name !== TIMESTAMP_FIELD.name,
 			),
-		[options?.selectColumns, formatTimezoneAdjustedTimestamp],
-	);
+		];
+		return fields.map((field) => getFieldColumn(field));
+	}, [options?.selectColumns]);
 
-	const transformedQueryTableData = useMemo(
-		() => transformDataWithDate(queryTableData) || [],
+	const rows = useMemo(
+		() => transformSpanRows(queryTableData),
 		[queryTableData],
 	);
 
-	const handleDragColumn = useCallback(
-		(fromIndex: number, toIndex: number): void => {
-			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(c.key || ('dataIndex' in c && c.dataIndex) || ''))
-				.filter(Boolean);
-			config?.addColumn?.onReorder(orderedIds);
+	const handleColumnOrderChange = useCallback(
+		(cols: TableColumnDef<TracesTableRow>[]): void => {
+			config?.addColumn?.onReorder(cols.map((c) => c.id));
 		},
-		[columns, config],
+		[config],
 	);
 
 	const handleOrderChange = useCallback((value: string) => {
 		setOrderBy(value);
 	}, []);
 
-	const isDataAbsent =
-		!isLoading &&
-		!isFetching &&
-		!isError &&
-		transformedQueryTableData.length === 0;
-
 	useEffect(() => {
-		if (
-			!isLoading &&
-			!isFetching &&
-			!isError &&
-			transformedQueryTableData.length !== 0
-		) {
-			logEvent('Traces Explorer: Data present', {
+		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
+			void logEvent('Traces Explorer: Data present', {
 				panelType,
 			});
 		}
-	}, [isLoading, isFetching, isError, transformedQueryTableData, panelType]);
+	}, [isLoading, isFetching, isError, rows, panelType]);
+
 	return (
-		<Container>
+		<div className={styles.container}>
 			<div className="trace-explorer-controls">
 				<div className="order-by-container">
 					<div className="order-by-label">
@@ -266,33 +252,21 @@ function ListView({
 				/>
 			</div>
 
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-
-			{(isLoading || (isFetching && transformedQueryTableData.length === 0)) && (
-				<TracesLoading />
-			)}
-
-			{isDataAbsent && !isFilterApplied && (
-				<NoLogs dataSource={DataSource.TRACES} />
-			)}
-
-			{isDataAbsent && isFilterApplied && (
-				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
-			)}
-
-			{!isError && transformedQueryTableData.length !== 0 && (
-				<ResizeTable
-					tableLayout="fixed"
-					pagination={false}
-					scroll={{ x: 'max-content' }}
-					loading={isFetching}
-					style={tableStyles}
-					dataSource={transformedQueryTableData}
-					columns={columns}
-					onDragColumn={handleDragColumn}
-				/>
-			)}
-		</Container>
+			<TracesTable
+				data={rows}
+				columns={columns}
+				columnStorageKey={LOCALSTORAGE.TRACES_LIST_COLUMNS}
+				panelType="LIST"
+				getRowHref={getTraceLink}
+				isLoading={isLoading}
+				isFetching={isFetching}
+				isError={isError}
+				error={error}
+				isFilterApplied={isFilterApplied}
+				onColumnOrderChange={handleColumnOrderChange}
+				onColumnRemove={config?.addColumn?.onRemove}
+			/>
+		</div>
 	);
 }
 

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

@@ -3,6 +3,7 @@ import type { TableColumnsType as ColumnsType } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
+import type { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
@@ -41,12 +42,23 @@ export const transformDataWithDate = (
 	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
 	[];
 
-export const getTraceLink = (record: RowData): string =>
-	`${ROUTES.TRACE}/${record.traceID || record.trace_id}${formUrlParams({
-		spanId: record.spanID || record.span_id,
+export const getTraceLink = (record: Record<string, unknown>): string => {
+	function readId(value: unknown): string {
+		if (typeof value === 'string' || typeof value === 'number') {
+			return String(value);
+		}
+		return '';
+	}
+
+	const traceId = readId(record.traceID) || readId(record.trace_id);
+	const spanId = readId(record.spanID) || readId(record.span_id);
+
+	return `${ROUTES.TRACE}/${traceId}${formUrlParams({
+		spanId,
 		levelUp: 0,
 		levelDown: 0,
 	})}`;
+};
 
 export const getListColumns = (
 	selectedColumns: TelemetryFieldKey[],
@@ -136,3 +148,21 @@ export const getListColumns = (
 
 	return [...initialColumns, ...columns];
 };
+
+// Reshapes the query-range list payload into table rows. `id` mirrors span_id so
+// TanStack sees genuine row changes on orderBy toggles instead of falling back to
+// positional ids; `timestamp` is lifted from the wrapping ListItem.
+export const transformSpanRows = (data: QueryDataV3[]): TracesTableRow[] => {
+	const list = data[0]?.list;
+	if (!list) {
+		return [];
+	}
+	return list.map((item) => {
+		const row = item.data as Record<string, unknown>;
+		return {
+			...row,
+			timestamp: item.timestamp,
+			id: row.span_id,
+		};
+	}) as TracesTableRow[];
+};

frontend/src/container/TracesExplorer/TracesTable/FieldCell.tsx

@@ -0,0 +1,77 @@
+import { generatePath, Link } from 'react-router-dom';
+import { Badge } from '@signozhq/ui/badge';
+import TanStackTable from 'components/TanStackTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import ROUTES from 'constants/routes';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import { useTimezone } from 'providers/Timezone';
+
+import {
+	DURATION_FIELD_NAMES,
+	STATUS_FIELD_NAMES,
+	TIMESTAMP_FIELD_NAMES,
+	TRACE_ID_FIELD_NAMES,
+} from './constants';
+import { stringifyCellValue } from './utils';
+
+type FieldCellProps = {
+	name: string;
+	value: unknown;
+};
+
+function FieldCell({ name, value }: FieldCellProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	if (TIMESTAMP_FIELD_NAMES.has(name)) {
+		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,
+					);
+		const text = String(formatted);
+		return <TanStackTable.Text title={text}>{text}</TanStackTable.Text>;
+	}
+
+	if (value === '' || value == null) {
+		return <TanStackTable.Text data-testid={name}>-</TanStackTable.Text>;
+	}
+
+	const text = stringifyCellValue(value);
+
+	if (TRACE_ID_FIELD_NAMES.has(name)) {
+		return (
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
+				data-testid="trace-id"
+				onClick={(e): void => e.stopPropagation()}
+			>
+				{text}
+			</Link>
+		);
+	}
+
+	if (STATUS_FIELD_NAMES.has(name)) {
+		return (
+			<Badge data-testid={name} color="sakura" variant="outline">
+				{text}
+			</Badge>
+		);
+	}
+
+	if (DURATION_FIELD_NAMES.has(name)) {
+		return (
+			<TanStackTable.Text data-testid={name}>{getMs(text)}ms</TanStackTable.Text>
+		);
+	}
+
+	return (
+		<TanStackTable.Text data-testid={name} title={text}>
+			{text}
+		</TanStackTable.Text>
+	);
+}
+
+export default FieldCell;

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

@@ -0,0 +1,26 @@
+.tableWrapper {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.tracesTable {
+	--tanstack-table-row-height: 54px;
+	--tanstack-table-header-height: 54px;
+
+	--tanstack-cell-padding-top-override: 5px;
+	--tanstack-cell-padding-bottom-override: 5px;
+	--tanstack-cell-padding-right-override: 15px;
+
+	--tanstack-cell-padding-left-override: 15px;
+	--tanstack-cell-header-padding-left-override: 5px;
+
+	--tanstack-cell-header-padding-left-first-column: 15px;
+
+	--tanstack-plain-body-line-clamp: 1;
+
+	--tanstack-table-cell-bg: var(--l2-background);
+	--tanstack-table-header-cell-bg: var(--l1-background-hover);
+	--tanstack-table-row-hover-bg: var(--l1-background-hover);
+}

frontend/src/container/TracesExplorer/TracesTable/TracesTable.tsx

@@ -0,0 +1,116 @@
+import { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import TanStackTable from 'components/TanStackTableView';
+import type {
+	CellTypographySize,
+	TableColumnDef,
+} from 'components/TanStackTableView/types';
+import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import NoLogs from 'container/NoLogs/NoLogs';
+import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
+import APIError from 'types/api/error';
+import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
+import { getAbsoluteUrl } from 'utils/basePath';
+
+import type { TracesTableRow } from './getFieldColumn';
+import styles from './TracesTable.module.scss';
+
+export type TracesTableProps = {
+	data: TracesTableRow[];
+	columns: TableColumnDef<TracesTableRow>[];
+	columnStorageKey?: string;
+	respectColumnOrder?: boolean;
+	panelType: PanelTypeKeys;
+	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
+	getRowHref: (row: TracesTableRow) => string;
+	isLoading: boolean;
+	isFetching: boolean;
+	isError: boolean;
+	error: APIError | Error | null;
+	isFilterApplied: boolean;
+	onColumnOrderChange?: (cols: TableColumnDef<TracesTableRow>[]) => void;
+	onColumnRemove?: (columnId: string) => void;
+	cellTypographySize?: CellTypographySize;
+};
+
+function TracesTable({
+	data,
+	columns,
+	columnStorageKey,
+	respectColumnOrder = false,
+	panelType,
+	getRowHref,
+	isLoading,
+	isFetching,
+	isError,
+	error,
+	isFilterApplied,
+	onColumnOrderChange,
+	onColumnRemove,
+	cellTypographySize = 'medium',
+}: TracesTableProps): JSX.Element {
+	const history = useHistory();
+
+	const isDataAbsent =
+		!isLoading && !isFetching && !isError && data.length === 0;
+
+	const handleRowClick = useCallback(
+		(row: TracesTableRow): void => {
+			history.push(getRowHref(row));
+		},
+		[history, getRowHref],
+	);
+
+	const handleRowClickNewTab = useCallback(
+		(row: TracesTableRow): void => {
+			window.open(getAbsoluteUrl(getRowHref(row)), '_blank', 'noopener');
+		},
+		[getRowHref],
+	);
+
+	return (
+		<>
+			{isError && error && <ErrorInPlace error={error as APIError} />}
+
+			{(isLoading || (isFetching && data.length === 0)) && <TracesLoading />}
+
+			{isDataAbsent && !isFilterApplied && (
+				<NoLogs dataSource={DataSource.TRACES} />
+			)}
+
+			{isDataAbsent && isFilterApplied && (
+				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType={panelType} />
+			)}
+
+			{!isError && data.length !== 0 && (
+				<div className={styles.tableWrapper}>
+					<TanStackTable<TracesTableRow>
+						data={data}
+						columns={columns}
+						className={styles.tracesTable}
+						columnStorageKey={columnStorageKey}
+						respectColumnOrder={respectColumnOrder}
+						isLoading={isFetching}
+						cellTypographySize={cellTypographySize}
+						onColumnOrderChange={onColumnOrderChange}
+						onColumnRemove={onColumnRemove}
+						onRowClick={handleRowClick}
+						onRowClickNewTab={handleRowClickNewTab}
+						getRowTestId={(row): string => `traces-table-row-${row.id}`}
+					/>
+				</div>
+			)}
+		</>
+	);
+}
+
+TracesTable.defaultProps = {
+	columnStorageKey: undefined,
+	respectColumnOrder: false,
+	onColumnOrderChange: undefined,
+	onColumnRemove: undefined,
+	cellTypographySize: 'medium',
+};
+
+export default TracesTable;

frontend/src/container/TracesExplorer/TracesTable/constants.ts

@@ -0,0 +1,18 @@
+// Field-name allowlists that drive signal-specific cell rendering. Both legacy
+// camelCase and snake_case variants are listed because the API has shipped both.
+export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
+
+export const STATUS_FIELD_NAMES = new Set([
+	'httpMethod',
+	'http_method',
+	'http.method',
+	'http.request.method',
+	'responseStatusCode',
+	'response_status_code',
+	'http.status_code',
+	'http.response.status_code',
+]);
+
+export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
+
+export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

frontend/src/container/TracesExplorer/TracesTable/getFieldColumn.tsx

@@ -0,0 +1,26 @@
+import { TelemetryFieldKey } from 'api/v5/v5';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
+
+import { TIMESTAMP_FIELD_NAMES } from './constants';
+import FieldCell from './FieldCell';
+
+export type TracesTableRow = { id: string } & Record<string, unknown>;
+
+export function getFieldColumn(
+	field: TelemetryFieldKey,
+): TableColumnDef<TracesTableRow> {
+	const { name, fieldContext } = field;
+	const isTimestamp = TIMESTAMP_FIELD_NAMES.has(name);
+
+	return {
+		id: buildCompositeKey(name, fieldContext),
+		header: name,
+		accessorFn: (row): unknown => row[name],
+		enableMove: !isTimestamp,
+		enableRemove: !isTimestamp,
+		canBeHidden: !isTimestamp,
+		width: { min: 192 },
+		cell: ({ value }): JSX.Element => <FieldCell name={name} value={value} />,
+	};
+}

frontend/src/container/TracesExplorer/TracesTable/utils.ts

@@ -0,0 +1,12 @@
+export function stringifyCellValue(value: unknown): string {
+	if (value == null) {
+		return '';
+	}
+	if (typeof value === 'string') {
+		return value;
+	}
+	if (typeof value === 'number' || typeof value === 'boolean') {
+		return String(value);
+	}
+	return JSON.stringify(value);
+}

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

@@ -0,0 +1,15 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	// Page chain isn't a flex column, so anchor the virtualized table against the viewport.
+	height: calc(100vh - 240px);
+	min-height: 400px;
+}
+
+.actionsContainer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}

frontend/src/container/TracesExplorer/TracesView/configs.tsx

@@ -1,50 +1,25 @@
-import { generatePath, Link } from 'react-router-dom';
-import type { TableColumnsType as ColumnsType } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import ROUTES from 'constants/routes';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import { TelemetryFieldKey } from 'api/v5/v5';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
+import {
+	getFieldColumn,
+	TracesTableRow,
+} from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
-import { ListItem } from 'types/api/widgets/getQuery';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-export const columns: ColumnsType<ListItem['data']> = [
-	{
-		title: 'Root Service Name',
-		dataIndex: 'service.name',
-		key: 'serviceName',
-	},
-	{
-		title: 'Root Operation Name',
-		dataIndex: 'name',
-		key: 'name',
-	},
-	{
-		title: 'Root Duration (in ms)',
-		dataIndex: 'duration_nano',
-		key: 'durationNano',
-		render: (duration: number): JSX.Element => (
-			<Typography>{getMs(String(duration))}ms</Typography>
-		),
-	},
-	{
-		title: 'No of Spans',
-		dataIndex: 'span_count',
-		key: 'span_count',
-	},
-	{
-		title: 'TraceID',
-		dataIndex: 'trace_id',
-		key: 'traceID',
-		render: (traceID: string): JSX.Element => (
-			<Link
-				to={generatePath(ROUTES.TRACE_DETAIL, {
-					id: traceID,
-				})}
-				data-testid="trace-id"
-			>
-				{traceID}
-			</Link>
-		),
-	},
-];
+const TRACE_FIELDS = [
+	{ name: 'service.name', fieldContext: 'resource' },
+	{ name: 'name' },
+	{ name: 'duration_nano' },
+	{ name: 'span_count' },
+	{ name: 'trace_id' },
+] as TelemetryFieldKey[];
+
+export const columns: TableColumnDef<TracesTableRow>[] = TRACE_FIELDS.map(
+	(field) => ({
+		...getFieldColumn(field),
+		enableRemove: false,
+		canBeHidden: false,
+	}),
+);

frontend/src/container/TracesExplorer/TracesView/index.test.tsx

@@ -0,0 +1,136 @@
+import { ENVIRONMENT } from 'constants/env';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import TracesView from './index';
+
+const BASE_URL = ENVIRONMENT.baseURL;
+const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
+
+const groupedRows = [
+	{
+		timestamp: '2024-07-19T08:39:58.735245Z',
+		data: {
+			'service.name': 'frontend',
+			name: 'HTTP GET',
+			duration_nano: 55306000,
+			span_count: 8,
+			trace_id: '0000000000000000344ded1387b08a7e',
+		},
+	},
+	{
+		timestamp: '2024-07-19T08:39:59.949129915Z',
+		data: {
+			'service.name': 'demo-app',
+			// intentionally empty to assert the "-" cell
+			name: '',
+			duration_nano: 790949390,
+			span_count: 3,
+			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
+		},
+	},
+];
+
+const groupedResponse = (rows: unknown[]): Record<string, unknown> => ({
+	data: { type: 'trace', data: { results: [{ queryName: 'A', rows }] } },
+});
+
+const mockSuccess = (rows: unknown[] = groupedRows): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(groupedResponse(rows))),
+		),
+	);
+};
+
+const mockError = (): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(ctx.status(500), ctx.json({ status: 'error', error: 'boom' })),
+		),
+	);
+};
+
+const renderTracesView = (
+	props: Record<string, unknown> = {},
+): ReturnType<typeof render> =>
+	render(
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
+			<TracesView
+				isFilterApplied={false}
+				setWarning={jest.fn()}
+				setIsLoadingQueries={jest.fn()}
+				{...props}
+			/>
+		</VirtuosoMockContext.Provider>,
+		{},
+		{
+			initialRoute: '/traces-explorer',
+			queryBuilderOverrides: {
+				panelType: PANEL_TYPES.TRACE,
+				stagedQuery: initialQueriesMap.traces,
+				currentQuery: initialQueriesMap.traces,
+			} as any,
+		},
+	);
+
+describe('TracesView (grouped root-span table)', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders backend rows in FieldCell format', async () => {
+		mockSuccess();
+		renderTracesView();
+
+		// service.name + name render as plain text
+		await expect(screen.findByText('frontend')).resolves.toBeInTheDocument();
+		expect(screen.getByText('HTTP GET')).toBeInTheDocument();
+
+		// duration_nano renders in milliseconds
+		expect(screen.getAllByTestId('duration_nano')[0]).toHaveTextContent(/ms$/);
+
+		// span_count renders as text
+		expect(screen.getByText('8')).toBeInTheDocument();
+
+		// empty field renders "-"
+		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
+
+		// trace_id renders as a link to the trace detail
+		const traceLinks = screen.getAllByTestId('trace-id');
+		expect(traceLinks[0]).toHaveAttribute(
+			'href',
+			expect.stringContaining('/trace/0000000000000000344ded1387b08a7e'),
+		);
+	});
+
+	it('shows the empty state and keeps the toolbar when there are no rows', async () => {
+		mockSuccess([]);
+		renderTracesView();
+
+		// toolbar (un-gated) stays visible regardless of data
+		expect(
+			screen.getByText(/This tab only shows Root Spans/i),
+		).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(screen.getByText(/No traces yet/i)).toBeInTheDocument();
+		});
+	});
+
+	it('keeps the toolbar visible on API error', async () => {
+		mockError();
+		renderTracesView();
+
+		expect(
+			screen.getByText(/This tab only shows Root Spans/i),
+		).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
+	});
+});

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

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 import {
 	Dispatch,
 	memo,
@@ -12,30 +11,29 @@ import { useSelector } from 'react-redux';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
+import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
+import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
-import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
 import TraceExplorerControls from '../Controls';
-import { TracesLoading } from '../TraceLoading/TraceLoading';
 import { columns, PER_PAGE_OPTIONS } from './configs';
-import { ActionsContainer, Container } from './styles';
+
+import styles from './TracesView.module.scss';
 
 interface TracesViewProps {
 	isFilterApplied: boolean;
@@ -119,8 +117,13 @@ function TracesView({
 	}, [data?.payload, data?.warning]);
 
 	const responseData = data?.payload?.data?.newResult?.data?.result[0]?.list;
-	const tableData = useMemo(
-		() => responseData?.map((listItem) => listItem.data),
+
+	const rows = useMemo<TracesTableRow[]>(
+		() =>
+			(responseData ?? []).map((item) => {
+				const row = item.data;
+				return { ...row, id: row.trace_id };
+			}) as TracesTableRow[],
 		[responseData],
 	);
 
@@ -133,71 +136,52 @@ function TracesView({
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
 	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && (tableData || []).length !== 0) {
-			logEvent('Traces Explorer: Data present', {
+		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
+			void logEvent('Traces Explorer: Data present', {
 				panelType: 'TRACE',
 			});
 		}
-	}, [isLoading, isFetching, isError, panelType, tableData]);
+	}, [isLoading, isFetching, isError, rows.length]);
 
 	return (
-		<Container>
-			{(tableData || []).length !== 0 && (
-				<ActionsContainer>
-					<Typography>
-						This tab only shows Root Spans. More details
-						<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
-							{' '}
-							here
-						</Typography.Link>
-					</Typography>
+		<div className={styles.container}>
+			<div className={styles.actionsContainer}>
+				<Typography>
+					This tab only shows Root Spans. More details
+					<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
+						{' '}
+						here
+					</Typography.Link>
+				</Typography>
 
-					<div className="trace-explorer-controls">
-						<DownloadOptionsMenu
-							dataSource={DataSource.TRACES}
-							panelType={PANEL_TYPES.TRACE}
-						/>
+				<div className="trace-explorer-controls">
+					<DownloadOptionsMenu
+						dataSource={DataSource.TRACES}
+						panelType={PANEL_TYPES.TRACE}
+					/>
 
-						<TraceExplorerControls
-							isLoading={isLoading}
-							totalCount={responseData?.length || 0}
-							perPageOptions={PER_PAGE_OPTIONS}
-						/>
-					</div>
-				</ActionsContainer>
-			)}
+					<TraceExplorerControls
+						isLoading={isLoading}
+						totalCount={rows.length}
+						perPageOptions={PER_PAGE_OPTIONS}
+					/>
+				</div>
+			</div>
 
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-
-			{(isLoading || (isFetching && (tableData || []).length === 0)) && (
-				<TracesLoading />
-			)}
-
-			{!isLoading &&
-				!isFetching &&
-				!isError &&
-				!isFilterApplied &&
-				(tableData || []).length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
-
-			{!isLoading &&
-				!isFetching &&
-				(tableData || []).length === 0 &&
-				!isError &&
-				isFilterApplied && (
-					<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="TRACE" />
-				)}
-
-			{(tableData || []).length !== 0 && (
-				<ResizeTable
-					loading={isLoading}
-					columns={columns}
-					tableLayout="fixed"
-					dataSource={tableData}
-					scroll={{ x: true }}
-					pagination={false}
-				/>
-			)}
-		</Container>
+			<TracesTable
+				data={rows}
+				columns={columns}
+				columnStorageKey={LOCALSTORAGE.TRACES_VIEW_COLUMNS}
+				respectColumnOrder
+				panelType="TRACE"
+				getRowHref={getTraceLink}
+				isLoading={isLoading}
+				isFetching={isFetching}
+				isError={isError}
+				error={error}
+				isFilterApplied={isFilterApplied}
+			/>
+		</div>
 	);
 }
 

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

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	display: flex;
-	flex-direction: column;
-`;
-
-export const ActionsContainer = styled.div`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-`;

frontend/src/container/TriggeredAlerts/TriggeredAlerts.module.scss

@@ -35,7 +35,7 @@
 }
 
 .filterSelect {
-	min-width: 300px;
+	min-width: 400px;
 	flex: 1;
 }
 
@@ -57,8 +57,6 @@
 
 	--tanstack-cell-padding-top-override: 5px;
 	--tanstack-cell-padding-bottom-override: 5px;
-	--tanstack-cell-padding-left-override: 5px;
-	--tanstack-cell-padding-right-override: 5px;
 
 	--tanstack-cell-padding-left-override: 16px;
 	--tanstack-cell-padding-right-override: 16px;

frontend/src/lib/uPlotV2/config/UPlotAxisBuilder.ts

@@ -1,4 +1,5 @@
 import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot, { Axis } from 'uplot';
 
 import { uPlotXAxisValuesFormat } from '../../uPlotLib/utils/constants';
@@ -6,6 +7,11 @@ import getGridColor from '../../uPlotLib/utils/getGridColor';
 import { buildYAxisSizeCalculator } from '../utils/axis';
 import { AxisProps, ConfigBuilder } from './types';
 
+const PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT = [
+	PANEL_TYPES.TIME_SERIES,
+	PANEL_TYPES.BAR,
+];
+
 /**
  * Builder for uPlot axis configuration
  * Handles creation and merging of axis settings
@@ -61,9 +67,12 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 	 * Build values formatter for X-axis (time)
 	 */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis } = this.props;
+		const { panelType } = this.props;
 
-		if (isTimeAxis) {
+		if (
+			panelType &&
+			PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT.includes(panelType)
+		) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 

frontend/src/lib/uPlotV2/config/__tests__/UPlotAxisBuilder.test.ts

@@ -1,4 +1,5 @@
 import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
 import type uPlot from 'uplot';
 
@@ -136,11 +137,11 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
-	it('uses time-based X-axis values formatter when the caller declares a time axis', () => {
+	it('uses time-based X-axis values formatter for time-series like panels', () => {
 		const builder = new UPlotAxisBuilder(
 			createAxisProps({
 				scaleKey: 'x',
-				isTimeAxis: true,
+				panelType: PANEL_TYPES.TIME_SERIES,
 			}),
 		);
 
@@ -149,11 +150,11 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBe(uPlotXAxisValuesFormat);
 	});
 
-	it('does not attach X-axis datetime formatter for a non-time axis', () => {
+	it('does not attach X-axis datetime formatter when panel type is not supported', () => {
 		const builder = new UPlotAxisBuilder(
 			createAxisProps({
 				scaleKey: 'x',
-				isTimeAxis: false,
+				panelType: PANEL_TYPES.LIST, // not in PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT
 			}),
 		);
 
@@ -289,9 +290,22 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.space).toBe(50);
 	});
 
-	it('omits the X-axis datetime formatter when no time axis is declared', () => {
-		const builder = new UPlotAxisBuilder(createAxisProps({ scaleKey: 'x' }));
-		expect(builder.getConfig().values).toBeUndefined();
+	it('includes PANEL_TYPES.BAR and PANEL_TYPES.TIME_SERIES in X-axis datetime formatter', () => {
+		const barBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				panelType: PANEL_TYPES.BAR,
+			}),
+		);
+		expect(barBuilder.getConfig().values).toBe(uPlotXAxisValuesFormat);
+
+		const timeSeriesBuilder = new UPlotAxisBuilder(
+			createAxisProps({
+				scaleKey: 'x',
+				panelType: PANEL_TYPES.TIME_SERIES,
+			}),
+		);
+		expect(timeSeriesBuilder.getConfig().values).toBe(uPlotXAxisValuesFormat);
 	});
 
 	it('should return the existing size when cycleNum > 1', () => {

frontend/src/lib/uPlotV2/config/types.ts

@@ -1,4 +1,5 @@
 import { PrecisionOption } from 'components/Graph/types';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot, { Series } from 'uplot';
 
 import { ThresholdsDrawHookOptions } from '../hooks/types';
@@ -52,50 +53,31 @@ export interface ConfigBuilderProps {
  * Props for configuring an axis
  */
 export interface AxisProps {
-	/** Scale this axis is drawn against — `'x'` / `'y'`, matching an `addScale` key. Also
-	 * selects the default tick formatter and sizing (x: time, y: value + unit). */
 	scaleKey: string;
-	/** Axis title drawn alongside the ticks; omitted when there's nothing to name. */
 	label?: string;
-	/** Render the axis at all; false keeps the scale but draws no ticks or labels. */
 	show?: boolean;
-	/** Which edge of the plot the axis sits on: 0 | 1 | 2 | 3 — top, right, bottom, left. */
-	side?: 0 | 1 | 2 | 3;
-	/** Tick/label color. Defaults to black or white from `isDarkMode`. */
+	side?: 0 | 1 | 2 | 3; // top, right, bottom, left
 	stroke?: string;
-	/** Partial override of the grid lines; unset keys fall back to the theme defaults. */
 	grid?: {
 		stroke?: string;
 		width?: number;
 		show?: boolean;
 	};
-	/** Partial override of the tick marks; provided as-is to uPlot when set. */
 	ticks?: {
 		stroke?: string;
 		width?: number;
 		show?: boolean;
 		size?: number;
 	};
-	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
-	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
 	size?: uPlot.Axis.Size;
+	formatValue?: (v: number) => string;
 	space?: number; // Space for log scale axes
-	/** Picks the dark or light default for stroke and grid color. */
 	isDarkMode?: boolean;
-	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
 	yAxisUnit?: string;
-	/**
-	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
-	 * rather than inferred from a panel type — a chart whose x axis is buckets or categories
-	 * (histogram) leaves it off.
-	 */
-	isTimeAxis?: boolean;
-	/** Decimal places for y axis tick values; unset lets the unit formatter decide. */
+	panelType?: PANEL_TYPES;
 	decimalPrecision?: PrecisionOption;
 }
 

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

@@ -116,7 +116,7 @@
    is hidden — the row stays a single crisp line and scrolls only when narrow. */
 .typeTabsScroll {
 	justify-self: flex-end;
-	--tab-list-wrapper-secondary-padding-left: 0;
+	--tabs-list-wrapper-secondary-padding-left: 0;
 }
 
 /* Connected segmented control, mirroring Overview's SegmentedControl: no outer

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -13,6 +13,7 @@ import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.sche
 import PromQLIcon from 'assets/Dashboard/PromQl';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import TextToolTip from 'components/TextToolTip';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import ClickHouseQueryContainer from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse';
 import PromQLQueryContainer from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
@@ -63,12 +64,8 @@ function PanelEditorQueryBuilder({
 	footer,
 	stickyHeader = true,
 }: PanelEditorQueryBuilderProps): JSX.Element {
-	// The shared QueryBuilderV2 provider still speaks the legacy PANEL_TYPES; what the
-	// builder offers for this kind comes from the kind's own declaration.
+	// The shared QueryBuilderV2 / list-view checks still speak the legacy PANEL_TYPES.
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
-	// Raw rows: the builder drops its aggregation controls, and with them the trace
-	// operator that combines aggregated trace queries (V1 parity).
-	const isListViewPanel = panelKind === 'signoz/ListPanel';
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isDarkMode = useIsDarkMode();
 
@@ -115,9 +112,9 @@ function PanelEditorQueryBuilder({
 						<QueryBuilderV2
 							panelType={panelType}
 							filterConfigs={filterConfigs}
-							showTraceOperator={!isListViewPanel}
+							showTraceOperator={panelType !== PANEL_TYPES.LIST}
 							version="v3"
-							isListViewPanel={isListViewPanel}
+							isListViewPanel={panelType === PANEL_TYPES.LIST}
 							queryComponents={{}}
 							signalSourceChangeEnabled
 							savePreviousQuery
@@ -151,7 +148,7 @@ function PanelEditorQueryBuilder({
 			),
 			children: queryTypeComponents[queryType].component,
 		}));
-	}, [panelKind, panelType, filterConfigs, isDarkMode, isListViewPanel]);
+	}, [panelKind, panelType, filterConfigs, isDarkMode]);
 
 	return (
 		<div

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/__tests__/PanelEditorQueryBuilder.test.tsx

@@ -60,7 +60,6 @@ function renderBuilder(
 function lastQueryBuilderProps(): {
 	panelType: string;
 	isListViewPanel: boolean;
-	showTraceOperator: boolean;
 	filterConfigs: unknown;
 } {
 	const calls = mockQueryBuilderV2.mock.calls;
@@ -116,9 +115,6 @@ describe('PanelEditorQueryBuilder field visibility (driven by the capabilities g
 		const props = lastQueryBuilderProps();
 		expect(props.panelType).toBe('graph');
 		expect(props.isListViewPanel).toBe(false);
-		// The trace operator combines aggregated trace queries, so it rides along with
-		// the aggregation controls.
-		expect(props.showTraceOperator).toBe(true);
 		expect(props.filterConfigs).toStrictEqual({});
 	});
 
@@ -128,7 +124,6 @@ describe('PanelEditorQueryBuilder field visibility (driven by the capabilities g
 		const props = lastQueryBuilderProps();
 		expect(props.panelType).toBe('list');
 		expect(props.isListViewPanel).toBe(true);
-		expect(props.showTraceOperator).toBe(false);
 		expect(props.filterConfigs).toStrictEqual({
 			stepInterval: { isHidden: true, isDisabled: true },
 			having: { isHidden: true, isDisabled: true },

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PlotTag.tsx

@@ -1,15 +1,12 @@
 import { Spline } from '@signozhq/icons';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
 import { EQueryType } from 'types/common/dashboard';
 
 interface PlotTagProps {
 	/** Authoring mode of the panel's query; undefined when no query exists yet. */
 	queryType: EQueryType | undefined;
-	/**
-	 * Panel shows raw rows rather than a plot, so naming the mode the rows were
-	 * "plotted with" would be wrong.
-	 */
-	isListViewPanel: boolean;
+	panelType: PANEL_TYPES;
 	className?: string;
 }
 
@@ -20,10 +17,10 @@ interface PlotTagProps {
  */
 function PlotTag({
 	queryType,
-	isListViewPanel,
+	panelType,
 	className,
 }: PlotTagProps): JSX.Element | null {
-	if (queryType === undefined || isListViewPanel) {
+	if (queryType === undefined || panelType === PANEL_TYPES.LIST) {
 		return null;
 	}
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -7,6 +7,7 @@ import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSection
 import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { AnyPanelInteractionProps } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/interactions';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
+import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
 import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
@@ -71,6 +72,7 @@ function PreviewPane({
 	onClick,
 	enableDrillDown,
 }: PreviewPaneProps): JSX.Element {
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
 	const queryType = getPanelQueryType(panel);
 
 	// Search term is ephemeral preview state, threaded to header + renderer but
@@ -84,7 +86,7 @@ function PreviewPane({
 				<div className={styles.header}>
 					<PlotTag
 						queryType={queryType}
-						isListViewPanel={panel.spec.plugin.kind === 'signoz/ListPanel'}
+						panelType={panelType}
 						className={styles.queryType}
 					/>
 					<div className={styles.dateTimeSelector}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/__tests__/PlotTag.test.tsx

@@ -1,22 +1,30 @@
 import { render, screen } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
 import PlotTag from '../PlotTag';
 
 describe('PlotTag', () => {
 	it('renders the resolved query mode', () => {
-		render(<PlotTag queryType={EQueryType.PROM} isListViewPanel={false} />);
+		render(
+			<PlotTag queryType={EQueryType.PROM} panelType={PANEL_TYPES.TIME_SERIES} />,
+		);
 		expect(screen.getByTestId('panel-editor-plot-tag')).toBeInTheDocument();
 		expect(screen.getByText('PromQL')).toBeInTheDocument();
 	});
 
 	it('renders nothing when there is no query yet', () => {
-		render(<PlotTag queryType={undefined} isListViewPanel={false} />);
+		render(<PlotTag queryType={undefined} panelType={PANEL_TYPES.TIME_SERIES} />);
 		expect(screen.queryByTestId('panel-editor-plot-tag')).not.toBeInTheDocument();
 	});
 
-	it('renders nothing for a list panel (query mode is irrelevant)', () => {
-		render(<PlotTag queryType={EQueryType.QUERY_BUILDER} isListViewPanel />);
+	it('renders nothing for list panels (query mode is irrelevant)', () => {
+		render(
+			<PlotTag
+				queryType={EQueryType.QUERY_BUILDER}
+				panelType={PANEL_TYPES.LIST}
+			/>,
+		);
 		expect(screen.queryByTestId('panel-editor-plot-tag')).not.toBeInTheDocument();
 	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditSession.ts

@@ -4,10 +4,7 @@ import type {
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	getPanelDefinition,
-	isPanelKindSupported,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import {
 	PANEL_KIND_TO_PANEL_TYPE,
@@ -94,9 +91,8 @@ export function usePanelEditSession({
 	const query = usePanelQuery({
 		panel: draft,
 		panelId,
-		queryCapabilities: panelDefinition.queryCapabilities,
 		time,
-		enabled: isPanelKindSupported(panelKind),
+		enabled: !!panelDefinition,
 	});
 
 	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts

@@ -6,7 +6,7 @@ import type {
 	DashboardtypesQueryDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	handleQueryChange,
 	type PartialPanelTypes,
@@ -146,7 +146,7 @@ export function usePanelTypeSwitch({
 			);
 			// Match a fresh list panel's default order so the builder's Order By isn't empty.
 			const nextQuery =
-				newKind === 'signoz/ListPanel'
+				newPanelType === PANEL_TYPES.LIST
 					? withDefaultListOrder(transformed)
 					: transformed;
 			const signal = getBuilderQueries(currentSpec.queries)[0]

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/__tests__/capabilities.test.ts

@@ -1,14 +1,7 @@
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { OPERATORS } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
-import { UNSUPPORTED_PANEL } from '../kinds/UnsupportedPanel/definition';
-import { getPanelDefinition, isPanelKindSupported } from '../registry';
-import type { PanelQueryCapabilities } from '../types/panelCapabilities';
-import { NO_PANEL_ACTIONS } from '../types/panelDefinition';
 import {
 	getHiddenQueryBuilderFields,
 	getSupportedQueryTypes,
@@ -22,7 +15,6 @@ import type { PanelKind } from '../types/panelKind';
 
 const { QUERY_BUILDER, CLICKHOUSE, PROM } = EQueryType;
 const { logs, traces, metrics } = TelemetrytypesSignalDTO;
-const { time_series, scalar, raw } = Querybuildertypesv5RequestTypeDTO;
 
 const EXPECTED_QUERY_TYPES: Record<PanelKind, EQueryType[]> = {
 	'signoz/TimeSeriesPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
@@ -45,117 +37,9 @@ const EXPECTED_SIGNALS: Record<PanelKind, TelemetrytypesSignalDTO[]> = {
 	'signoz/ListPanel': [logs, traces],
 };
 
-// Exhaustive over PanelKind, so a new kind can't ship without stating how its request is
-// shaped — the check that used to be implicit in a legacy PANEL_TYPES switch.
-const EXPECTED_QUERY_CAPABILITIES: Record<PanelKind, PanelQueryCapabilities> = {
-	'signoz/TimeSeriesPanel': {
-		requestType: time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	// Bar bins client-side, so it asks for a widened step interval over a raw series.
-	'signoz/BarChartPanel': {
-		requestType: time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: true,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	'signoz/HistogramPanel': {
-		requestType: time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	'signoz/NumberPanel': {
-		requestType: scalar,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	'signoz/PieChartPanel': {
-		requestType: scalar,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	// Only Table asks the server to transpose its scalar result into UI rows.
-	'signoz/TablePanel': {
-		requestType: scalar,
-		formatTableResultForUI: true,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	// Only List reads raw rows, pages them server-side, and needs an order tiebreaker.
-	'signoz/ListPanel': {
-		requestType: raw,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: true,
-		serverPaginated: true,
-	},
-};
-
 const ALL_KINDS = Object.keys(EXPECTED_QUERY_TYPES) as PanelKind[];
 
 describe('panel capabilities guard', () => {
-	describe('query capabilities', () => {
-		it.each(ALL_KINDS)('declares how %s shapes its request', (kind) => {
-			expect(getPanelDefinition(kind).queryCapabilities).toStrictEqual(
-				EXPECTED_QUERY_CAPABILITIES[kind],
-			);
-		});
-	});
-
-	// A dashboard spec written by a newer SigNoz can name a kind this build has no
-	// definition for. The registry answers with UNSUPPORTED_PANEL rather than nothing, so
-	// every guard below reads it without first proving a definition exists.
-	describe('a kind this build cannot render', () => {
-		const unknownKind = 'signoz/SomeFutureKindPanel' as PanelKind;
-
-		it('is not reported as supported', () => {
-			expect(isPanelKindSupported(unknownKind)).toBe(false);
-			expect(isPanelKindSupported('signoz/TimeSeriesPanel')).toBe(true);
-		});
-
-		it('still resolves to a definition', () => {
-			expect(getPanelDefinition(unknownKind)).toBe(UNSUPPORTED_PANEL);
-		});
-
-		it('declares nothing, so it is never offered as authorable', () => {
-			expect(getSupportedSignals(unknownKind)).toStrictEqual([]);
-			expect(getSupportedQueryTypes(unknownKind)).toStrictEqual([]);
-			expect(isSignalSupported(unknownKind, logs)).toBe(false);
-			expect(
-				isPanelCombinationValid({ kind: unknownKind, queryType: QUERY_BUILDER }),
-			).toBe(false);
-			expect(getHiddenQueryBuilderFields(unknownKind, logs)).toStrictEqual({});
-			expect(getPanelDefinition(unknownKind).sections).toStrictEqual([]);
-		});
-
-		it('offers no actions', () => {
-			expect(getPanelDefinition(unknownKind).actions).toStrictEqual(
-				NO_PANEL_ACTIONS,
-			);
-			expect(NO_PANEL_ACTIONS.view).toBe(false);
-			expect(NO_PANEL_ACTIONS.edit).toBe(false);
-			expect(NO_PANEL_ACTIONS.drilldown).toBe(false);
-		});
-
-		it('carries an inert query shape, so a stray request can do no harm', () => {
-			const { queryCapabilities } = getPanelDefinition(unknownKind);
-			expect(queryCapabilities.requestType).toBe(time_series);
-			expect(queryCapabilities.serverPaginated).toBe(false);
-			expect(queryCapabilities.formatTableResultForUI).toBe(false);
-		});
-	});
-
 	describe('query type support', () => {
 		it.each(ALL_KINDS)('declares the expected query types for %s', (kind) => {
 			expect(getSupportedQueryTypes(kind)).toStrictEqual(

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.tsx

@@ -20,12 +20,8 @@ interface NoDataProps {
 	isFetching?: boolean;
 	/** When provided, renders a Retry button that re-runs the query. */
 	onRetry?: () => void;
-	/**
-	 * The panel this empty state stands in for. Every renderer has it, and it decides
-	 * whether the global "Extend time range" action applies (a panel locked to a fixed
-	 * time preference can't be widened by it) as well as what the action events report.
-	 */
-	panel: DashboardtypesPanelDTO;
+	/** Hides the global "Extend time range" action when this panel is locked to a fixed time preference. */
+	panel?: DashboardtypesPanelDTO;
 	'data-testid'?: string;
 }
 
@@ -47,17 +43,19 @@ function NoData({
 	const globalExtend = useExtendTimeWindow();
 	// The View modal's local extender wins; the global one only applies to a panel that
 	// follows the ambient window (a fixed preference can't be widened by it).
+	const hasFixedTimePreference = panel
+		? panelHasFixedTimePreference(panel)
+		: false;
 	const activeExtend =
-		viewExtend ?? (panelHasFixedTimePreference(panel) ? undefined : globalExtend);
+		viewExtend ?? (hasFixedTimePreference ? undefined : globalExtend);
 
 	if (isFetching) {
 		return <PanelLoader />;
 	}
 
-	// `panelType` stays on the event so existing reports keep resolving; `panelKind` is the
-	// V2 identity, and the only one that can tell two kinds sharing a panel type apart.
-	const panelKind = panel.spec.plugin.kind;
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
+	const panelType = panel
+		? PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind]
+		: undefined;
 
 	const extendAction: PanelMessageAction | undefined =
 		activeExtend?.canExtend && activeExtend.actionLabel
@@ -67,7 +65,6 @@ function NoData({
 						void logEvent(DashboardDetailEvents.NoDataAction, {
 							action: 'extendTime',
 							panelType,
-							panelKind,
 						});
 						activeExtend.extend();
 					},
@@ -82,7 +79,6 @@ function NoData({
 					void logEvent(DashboardDetailEvents.NoDataAction, {
 						action: 'retry',
 						panelType,
-						panelKind,
 					});
 					onRetry();
 				},

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/__tests__/NoData.test.tsx

@@ -33,12 +33,7 @@ function panelWith(
 	timePreference?: DashboardtypesTimePreferenceDTO,
 ): DashboardtypesPanelDTO {
 	return {
-		spec: {
-			plugin: {
-				kind: 'signoz/TimeSeriesPanel',
-				spec: { visualization: { timePreference } },
-			},
-		},
+		spec: { plugin: { spec: { visualization: { timePreference } } } },
 	} as unknown as DashboardtypesPanelDTO;
 }
 
@@ -49,7 +44,7 @@ describe('NoData', () => {
 	});
 
 	it('renders the empty-state title and hint', () => {
-		render(<NoData panel={panelWith()} />);
+		render(<NoData />);
 
 		expect(screen.getByTestId('panel-no-data')).toBeInTheDocument();
 		expect(screen.getByText('No data in this time range')).toBeInTheDocument();
@@ -60,7 +55,7 @@ describe('NoData', () => {
 
 	it('offers to extend the window as the primary action', () => {
 		mockUseExtendTimeWindow.mockReturnValue(extender());
-		render(<NoData panel={panelWith()} />);
+		render(<NoData />);
 
 		const action = screen.getByTestId('panel-no-data-action');
 		expect(action).toHaveTextContent('Extend time range');
@@ -73,7 +68,7 @@ describe('NoData', () => {
 	it('renders both Extend (primary) and Retry (secondary) when a retry handler is given', () => {
 		const onRetry = jest.fn();
 		mockUseExtendTimeWindow.mockReturnValue(extender());
-		render(<NoData onRetry={onRetry} panel={panelWith()} />);
+		render(<NoData onRetry={onRetry} />);
 
 		expect(screen.getByTestId('panel-no-data-action')).toHaveTextContent(
 			'Extend time range',
@@ -87,7 +82,7 @@ describe('NoData', () => {
 
 	it('falls back to Retry as the sole action when the window cannot be widened', () => {
 		const onRetry = jest.fn();
-		render(<NoData onRetry={onRetry} panel={panelWith()} />);
+		render(<NoData onRetry={onRetry} />);
 
 		const action = screen.getByTestId('panel-no-data-action');
 		expect(action).toHaveTextContent('Retry');
@@ -106,7 +101,7 @@ describe('NoData', () => {
 		useViewPanelStore.setState({
 			viewPanelExtendWindow: extender({ extend: storeExtend }),
 		});
-		render(<NoData panel={panelWith()} />);
+		render(<NoData />);
 
 		fireEvent.click(screen.getByTestId('panel-no-data-action'));
 		expect(storeExtend).toHaveBeenCalledTimes(1);
@@ -114,7 +109,7 @@ describe('NoData', () => {
 	});
 
 	it('renders no action when nothing can be widened and no retry handler', () => {
-		render(<NoData panel={panelWith()} />);
+		render(<NoData />);
 
 		expect(screen.queryByTestId('panel-no-data-action')).not.toBeInTheDocument();
 		expect(
@@ -124,7 +119,7 @@ describe('NoData', () => {
 
 	it('shows the panel loader (not the empty state) while refetching', () => {
 		mockUseExtendTimeWindow.mockReturnValue(extender());
-		render(<NoData isFetching panel={panelWith()} />);
+		render(<NoData isFetching />);
 
 		expect(screen.getByTestId('panel-loading')).toBeInTheDocument();
 		expect(screen.queryByTestId('panel-no-data')).not.toBeInTheDocument();
@@ -133,7 +128,7 @@ describe('NoData', () => {
 
 	it('honours the data-testid override for the number panel', () => {
 		mockUseExtendTimeWindow.mockReturnValue(extender());
-		render(<NoData data-testid="number-panel-no-data" panel={panelWith()} />);
+		render(<NoData data-testid="number-panel-no-data" />);
 
 		expect(screen.getByTestId('number-panel-no-data')).toBeInTheDocument();
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -1,10 +1,7 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
@@ -23,15 +20,6 @@ export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 		EQueryType.PROM,
 	],
 	queryBuilderFields: {},
-	// Bars are binned client-side from a raw time series, so the request asks for a
-	// step interval wide enough to keep the bar count readable (V1 parity).
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: true,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/utils/buildConfig.ts

@@ -1,5 +1,6 @@
 import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
 import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
@@ -46,7 +47,7 @@ export function buildBarChartConfig({
 }: BuildBarChartConfigArgs): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
 		panelId,
-		isTimeAxis: true,
+		panelType: PANEL_TYPES.BAR,
 		isDarkMode,
 		timezone,
 		panelMode,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -1,10 +1,7 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
@@ -23,15 +20,6 @@ export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 		EQueryType.PROM,
 	],
 	queryBuilderFields: {},
-	// Buckets are computed client-side from the raw series, so the request is a plain
-	// time series — the bucket count is a display concern, not a query one.
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/utils/buildConfig.ts

@@ -1,5 +1,6 @@
 import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
 import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
@@ -43,7 +44,7 @@ export function buildHistogramConfig({
 }: BuildHistogramConfigArgs): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
 		panelId,
-		isTimeAxis: false,
+		panelType: PANEL_TYPES.HISTOGRAM,
 		isDarkMode,
 		timezone,
 		panelMode,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/definition.ts

@@ -1,10 +1,7 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { OPERATORS } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
@@ -33,15 +30,6 @@ export const definition: PanelDefinition<'signoz/ListPanel'> = {
 		},
 	},
 	sections,
-	// The only kind reading raw rows: they page server-side, and the sort needs a
-	// tiebreaker so a duplicated sort key can't repeat or skip a row across pages.
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.raw,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: true,
-		serverPaginated: true,
-	},
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/definition.ts

@@ -1,10 +1,7 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/NumberPanel'> = {
@@ -23,13 +20,6 @@ export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 		EQueryType.PROM,
 	],
 	queryBuilderFields: {},
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.scalar,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts

@@ -1,10 +1,7 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
@@ -19,13 +16,6 @@ export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 	],
 	supportedQueryTypes: [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
 	queryBuilderFields: {},
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.scalar,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/definition.ts

@@ -1,10 +1,7 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/TablePanel'> = {
@@ -19,14 +16,6 @@ export const definition: PanelDefinition<'signoz/TablePanel'> = {
 	],
 	supportedQueryTypes: [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
 	queryBuilderFields: {},
-	// The only kind that asks the server to transpose its scalar result into UI rows.
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.scalar,
-		formatTableResultForUI: true,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	// Tables carry tabular data worth exporting (V1 parity: download is table-only).
 	actions: {
 		view: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -1,10 +1,7 @@
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
@@ -23,13 +20,6 @@ export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 		EQueryType.PROM,
 	],
 	queryBuilderFields: {},
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	actions: {
 		view: true,
 		edit: true,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/utils/buildConfig.ts

@@ -1,5 +1,6 @@
 import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import {
 	buildBaseConfig,
@@ -65,7 +66,7 @@ export function buildTimeSeriesConfig({
 }: BuildTimeSeriesConfigArgs): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
 		panelId,
-		isTimeAxis: true,
+		panelType: PANEL_TYPES.TIME_SERIES,
 		isDarkMode,
 		timezone,
 		panelMode,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/UnsupportedPanel/Renderer.tsx

@@ -1,26 +0,0 @@
-import { CircleHelp } from '@signozhq/icons';
-
-import PanelMessage from '../../components/PanelMessage/PanelMessage';
-import PanelStyles from '../../panel.module.scss';
-
-/**
- * Body for a panel whose kind this build has no renderer for — a spec written by a newer
- * SigNoz names a visualization that didn't exist when this client shipped. Says so in
- * place of the chart, so the panel keeps its slot in the layout instead of leaving a hole.
- */
-function UnsupportedPanelRenderer(): JSX.Element {
-	return (
-		<div
-			data-testid="unsupported-panel-renderer"
-			className={PanelStyles.panelContainer}
-		>
-			<PanelMessage
-				icon={<CircleHelp size={18} />}
-				title="Unsupported panel type"
-				description="This panel was built with a newer version of SigNoz. Upgrade to view it."
-			/>
-		</div>
-	);
-}
-
-export default UnsupportedPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/UnsupportedPanel/definition.ts

@@ -1,34 +0,0 @@
-import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	NO_PANEL_ACTIONS,
-	type RenderablePanelDefinition,
-} from '../../types/panelDefinition';
-import Renderer from './Renderer';
-
-/**
- * Stand-in definition for a kind that isn't in the registry, so `getPanelDefinition`
- * always resolves and no caller has to branch on a missing one. It declares nothing: no
- * signals, no query types, no config sections and no actions — an unknown kind can't be
- * queried, configured or acted on, only shown as unsupported.
- *
- * `kind` carries a sentinel that no API enum value can collide with; the cast is the one
- * place this definition steps outside `PanelKind`.
- */
-export const UNSUPPORTED_PANEL: RenderablePanelDefinition = {
-	kind: '<unsupported>' as RenderablePanelDefinition['kind'],
-	displayName: 'Unsupported panel',
-	Renderer,
-	sections: [],
-	supportedSignals: [],
-	supportedQueryTypes: [],
-	queryBuilderFields: {},
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
-	actions: NO_PANEL_ACTIONS,
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/registry.ts

@@ -5,7 +5,6 @@ import { definition as PieChart } from './kinds/PieChartPanel/definition';
 import { definition as TimeSeries } from './kinds/TimeSeriesPanel/definition';
 import { definition as Table } from './kinds/TablePanel/definition';
 import { definition as List } from './kinds/ListPanel/definition';
-import { UNSUPPORTED_PANEL } from './kinds/UnsupportedPanel/definition';
 import type {
 	PanelRegistry,
 	RenderablePanelDefinition,
@@ -23,24 +22,8 @@ export const PANELS: PanelRegistry = {
 	[List.kind]: List,
 };
 
-/**
- * Whether this build can render the kind. `PanelKind` spans every kind the API declares,
- * but a dashboard spec written by a newer SigNoz can name one this client has never heard
- * of — so ask before doing work on a panel's behalf, such as fetching its data.
- */
-export function isPanelKindSupported(kind: PanelKind): boolean {
-	return kind in PANELS;
-}
-
-/**
- * The definition for a kind — always one. An unregistered kind resolves to
- * {@link UNSUPPORTED_PANEL}, which declares no capabilities and renders as unsupported, so
- * callers read a definition's fields without first proving it exists.
- */
 export function getPanelDefinition(kind: PanelKind): RenderablePanelDefinition {
 	// Single intentional cast widening the per-kind Renderer to the kind-agnostic
 	// prop surface (a per-kind renderer can't be statically validated against the union).
-	return (
-		(PANELS[kind] as RenderablePanelDefinition | undefined) ?? UNSUPPORTED_PANEL
-	);
+	return PANELS[kind] as RenderablePanelDefinition;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelCapabilities.ts

@@ -1,7 +1,4 @@
-import {
-	Querybuildertypesv5RequestTypeDTO,
-	type TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import type { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 
 /**
@@ -21,30 +18,3 @@ export type FilterConfigsPartial = NonNullable<
 export type QueryBuilderFieldRule = {
 	default?: FilterConfigsPartial;
 } & Partial<Record<TelemetrytypesSignalDTO, FilterConfigsPartial>>;
-
-/**
- * How a kind's query-range request is shaped. Declared per-kind in
- * `kinds/<Kind>/definition.ts` and read through the capabilities guard, so no V2 code
- * has to translate a panel kind into the legacy `PANEL_TYPES` enum to answer these.
- */
-export interface PanelQueryCapabilities {
-	/** V5 request type the panel's data comes back as. */
-	requestType: Querybuildertypesv5RequestTypeDTO;
-	/** Server transposes the scalar result into UI table rows (`formatOptions.formatTableResultForUI`). */
-	formatTableResultForUI: boolean;
-	/**
-	 * Widen the step interval to cap how many buckets come back — kinds that bin
-	 * client-side from a raw time series rather than plotting every point.
-	 */
-	bucketedStepInterval: boolean;
-	/**
-	 * Append a deterministic tiebreaker to the query's `order` so offset paging over raw
-	 * rows can't repeat or skip a row when the sort key has duplicates.
-	 */
-	orderTiebreaker: boolean;
-	/**
-	 * Rows page server-side via `offset`/`limit`. AND-ed at the call site with "the query
-	 * carries no explicit limit" — an explicit limit means the user asked for a fixed set.
-	 */
-	serverPaginated: boolean;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition.ts

@@ -5,10 +5,7 @@ import type { EQueryType } from 'types/common/dashboard';
 import type { SectionConfig } from './sections';
 import type { AnyPanelInteractionProps } from './interactions';
 import type { PanelKind } from './panelKind';
-import type {
-	PanelQueryCapabilities,
-	QueryBuilderFieldRule,
-} from './panelCapabilities';
+import type { QueryBuilderFieldRule } from './panelCapabilities';
 import type { BaseRendererProps, PanelRendererProps } from './rendererProps';
 
 /** Export formats offered under the single "Download" action. */
@@ -42,24 +39,6 @@ export interface PanelActionCapabilities {
 	drilldown: boolean;
 }
 
-/**
- * No actions at all — for a kind this build can't render, where every action would act on
- * a panel body that isn't there. See `UNSUPPORTED_PANEL`.
- */
-export const NO_PANEL_ACTIONS: PanelActionCapabilities = {
-	view: false,
-	edit: false,
-	clone: false,
-	download: {
-		[DownloadFormat.CSV]: false,
-		[DownloadFormat.PNG]: false,
-		[DownloadFormat.SVG]: false,
-	},
-	createAlert: false,
-	search: false,
-	drilldown: false,
-};
-
 export interface PanelDefinition<K extends PanelKind = PanelKind> {
 	kind: K;
 	displayName: string;
@@ -71,8 +50,6 @@ export interface PanelDefinition<K extends PanelKind = PanelKind> {
 	supportedQueryTypes: EQueryType[];
 	/** Query-builder fields this kind hides/disables, optionally per signal (`{}` hides none). */
 	queryBuilderFields: QueryBuilderFieldRule;
-	/** How this kind's query-range request is shaped (request type, paging, result formatting). */
-	queryCapabilities: PanelQueryCapabilities;
 	actions: PanelActionCapabilities;
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/buildDefaultQueries.test.ts

@@ -1,7 +1,7 @@
 import { buildDefaultQueries } from '../buildDefaultQueries';
 
 describe('buildDefaultQueries', () => {
-	it('seeds a list panel with a runnable logs query ordered by timestamp desc', () => {
+	it('seeds a List panel with a runnable logs query ordered by timestamp desc', () => {
 		const queries = buildDefaultQueries('signoz/ListPanel');
 
 		expect(queries).toHaveLength(1);
@@ -13,7 +13,7 @@ describe('buildDefaultQueries', () => {
 		expect(serialized.toLowerCase()).toContain('logs');
 	});
 
-	it('seeds a list panel without a limit so it pages server-side by default', () => {
+	it('seeds a List panel without a limit so it pages server-side by default', () => {
 		const queries = buildDefaultQueries('signoz/ListPanel');
 
 		// A limit would make usePanelQuery treat the panel as a static, unpaged list.
@@ -21,7 +21,7 @@ describe('buildDefaultQueries', () => {
 		expect(spec.limit).toBeUndefined();
 	});
 
-	it('seeds no query for plotted kinds (they seed from the builder)', () => {
+	it('seeds no query for non-List kinds (they seed from the builder)', () => {
 		expect(buildDefaultQueries('signoz/TimeSeriesPanel')).toStrictEqual([]);
 		expect(buildDefaultQueries('signoz/NumberPanel')).toStrictEqual([]);
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder.ts

@@ -3,6 +3,7 @@ import type {
 	DashboardtypesThresholdWithLabelDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import onClickPlugin, {
 	OnClickPluginOpts,
@@ -25,11 +26,7 @@ import {
  */
 export interface BuildBaseConfigArgs {
 	panelId: string;
-	/**
-	 * X axis plots timestamps, so its ticks format as dates/times. Each kind states this
-	 * for itself — a bucketed x axis (histogram) passes false.
-	 */
-	isTimeAxis: boolean;
+	panelType: PANEL_TYPES;
 	isDarkMode: boolean;
 	timezone: Timezone;
 	panelMode: PanelMode;
@@ -66,7 +63,7 @@ export interface BuildBaseConfigArgs {
  */
 export function buildBaseConfig({
 	panelId,
-	isTimeAxis,
+	panelType,
 	isDarkMode,
 	timezone,
 	panelMode,
@@ -136,7 +133,7 @@ export function buildBaseConfig({
 		side: 2,
 		isDarkMode,
 		isLogScale,
-		isTimeAxis,
+		panelType,
 	});
 
 	builder.addAxis({
@@ -146,6 +143,7 @@ export function buildBaseConfig({
 		isDarkMode,
 		isLogScale,
 		yAxisUnit,
+		panelType,
 	});
 
 	return builder;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultQueries.ts

@@ -1,15 +1,14 @@
 import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
-import { listViewInitialLogQuery } from 'constants/queryBuilder';
+import { listViewInitialLogQuery, PANEL_TYPES } from 'constants/queryBuilder';
 
 import { toPerses } from '../../queryV5/persesQueryAdapters';
 import { PANEL_KIND_TO_PANEL_TYPE, type PanelKind } from '../types/panelKind';
 
-/** Seed query for a new panel. Only a list panel needs one (logs, timestamp desc) so its
+/** Seed query for a new panel. Only List needs one (logs, timestamp desc) so its
  * preview runs on open; other kinds start empty and seed from the builder. */
 export function buildDefaultQueries(kind: PanelKind): DashboardtypesQueryDTO[] {
-	if (kind !== 'signoz/ListPanel') {
-		return [];
+	if (PANEL_KIND_TO_PANEL_TYPE[kind] === PANEL_TYPES.LIST) {
+		return toPerses(listViewInitialLogQuery, PANEL_TYPES.LIST);
 	}
-	// `toPerses` pivots through the V1 `Query`, which is still keyed by panel type.
-	return toPerses(listViewInitialLogQuery, PANEL_KIND_TO_PANEL_TYPE[kind]);
+	return [];
 }

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

@@ -1,10 +1,7 @@
 import { useState } from 'react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import ContextMenu from 'periscope/components/ContextMenu';
-import {
-	getPanelDefinition,
-	isPanelKindSupported,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import {
 	getPanelTimePreference,
 	panelTimePreferenceLabel,
@@ -53,22 +50,15 @@ function Panel({
 
 	// Header search: only kinds that declare it render the box. The term is owned
 	// here and threaded to both the header (input) and renderer (filter).
-	const searchable = panelDefinition.actions.search;
+	const searchable = !!panelDefinition?.actions.search;
 	const [searchTerm, setSearchTerm] = useState('');
 
-	// Only an explicit false defers the fetch: `isVisible` is undefined wherever no
-	// observer reports visibility (the View modal, the editor preview), and those panels
-	// are on screen by construction.
-	const isOffScreen = isVisible === false;
-
 	const { data, isFetching, isPreviousData, error, refetch, pagination } =
 		usePanelQuery({
 			panel,
 			panelId,
-			queryCapabilities: panelDefinition.queryCapabilities,
-			// Lazy: fetch once on screen, and never for a kind this build can't render —
-			// the data would have nothing to render into.
-			enabled: isPanelKindSupported(panelKind) && !isOffScreen,
+			// Lazy: fetch only once on screen (undefined → visible) and a renderer exists.
+			enabled: !!panelDefinition && isVisible !== false,
 		});
 
 	const { onDragSelect, dashboardPreference } = usePanelInteractions();
@@ -95,23 +85,25 @@ function Panel({
 				searchTerm={searchTerm}
 				onSearchChange={setSearchTerm}
 			/>
-			<PanelBody
-				panelDefinition={panelDefinition}
-				panel={panel}
-				panelId={panelId}
-				data={data}
-				isFetching={isFetching}
-				isVisible={isVisible}
-				isPreviousData={isPreviousData}
-				error={error}
-				refetch={refetch}
-				onDragSelect={onDragSelect}
-				dashboardPreference={dashboardPreference}
-				searchTerm={searchable ? searchTerm : undefined}
-				pagination={pagination}
-				onClick={drilldown.onPanelClick}
-				enableDrillDown={drilldown.enableDrillDown}
-			/>
+			{panelDefinition && (
+				<PanelBody
+					panelDefinition={panelDefinition}
+					panel={panel}
+					panelId={panelId}
+					data={data}
+					isFetching={isFetching}
+					isVisible={isVisible}
+					isPreviousData={isPreviousData}
+					error={error}
+					refetch={refetch}
+					onDragSelect={onDragSelect}
+					dashboardPreference={dashboardPreference}
+					searchTerm={searchable ? searchTerm : undefined}
+					pagination={pagination}
+					onClick={drilldown.onPanelClick}
+					enableDrillDown={drilldown.enableDrillDown}
+				/>
+			)}
 			<ContextMenu {...drilldown.contextMenuProps} />
 		</div>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelQueryBuilder.tsx

@@ -0,0 +1,64 @@
+import { type KeyboardEvent, useCallback } from 'react';
+import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
+
+import styles from './ViewPanelModal.module.scss';
+
+interface ViewPanelQueryBuilderProps {
+	panelType: PANEL_TYPES;
+	/** Preview fetch in flight — drives the Run/Cancel button state. */
+	isLoadingQueries: boolean;
+	/** Run the current query (Run Query button / ⌘↵). */
+	onStageRunQuery: () => void;
+	/** Abort the in-flight preview fetch. */
+	onCancelQuery: () => void;
+}
+
+/**
+ * Drilldown query editor for the View modal. Mirrors V1's FullView: the query builder
+ * rows + a "Run Query" button, with NO query-type tabs (ClickHouse/PromQL) — drilldown
+ * is query-builder only, exactly as V1.
+ */
+function ViewPanelQueryBuilder({
+	panelType,
+	isLoadingQueries,
+	onStageRunQuery,
+	onCancelQuery,
+}: ViewPanelQueryBuilderProps): JSX.Element {
+	const handleKeyDownCapture = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+				event.preventDefault();
+				event.stopPropagation();
+				onStageRunQuery();
+			}
+		},
+		[onStageRunQuery],
+	);
+
+	return (
+		<div
+			className={styles.queryBuilder}
+			data-testid="view-panel-query-builder"
+			onKeyDownCapture={handleKeyDownCapture}
+			role="presentation"
+		>
+			<QueryBuilderV2
+				panelType={panelType}
+				version="v3"
+				isListViewPanel={panelType === PANEL_TYPES.LIST}
+				signalSourceChangeEnabled
+			/>
+			<div className={styles.queryBuilderToolbar}>
+				<RightToolbarActions
+					handleCancelQuery={onCancelQuery}
+					onStageRunQuery={onStageRunQuery}
+					isLoadingQueries={isLoadingQueries}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default ViewPanelQueryBuilder;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/__tests__/useCreateAlertFromPanel.test.ts

@@ -148,9 +148,7 @@ describe('useCreateAlertFromPanel', () => {
 			expect(mockBuildQueryRangeRequest).toHaveBeenCalledWith(
 				expect.objectContaining({
 					queries: panel.spec.queries,
-					queryCapabilities: expect.objectContaining({
-						requestType: 'time_series',
-					}),
+					panelType: PANEL_TYPES.TIME_SERIES,
 					variables: { service: { type: 'query', value: 'checkout' } },
 				}),
 			);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useClonePanel.ts

@@ -81,7 +81,6 @@ export function useClonePanel({
 				void logEvent(DashboardDetailEvents.PanelAction, {
 					action: 'clone',
 					panelType: PANEL_KIND_TO_PANEL_TYPE[source.panel.spec.plugin.kind],
-					panelKind: source.panel.spec.plugin.kind,
 					panelId,
 					dashboardId,
 				});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel.ts

@@ -7,7 +7,6 @@ import { useReplaceVariables } from 'api/generated/services/querier';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import { buildQueryRangeRequest } from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
@@ -45,15 +44,11 @@ export function useCreateAlertFromPanel(): (
 
 	return useCallback(
 		(panel: DashboardtypesPanelDTO, panelId: string): void => {
-			const panelKind = panel.spec.plugin.kind;
-			// Alerts are a V1 surface: the query pivots through the V1 `Query` shape and the
-			// URL carries a legacy panel type, so this flow keeps translating.
-			const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
+			const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
 
 			void logEvent('Dashboard Detail: Panel action', {
 				action: 'createAlerts',
 				panelType,
-				panelKind,
 				dashboardId,
 				widgetId: panelId,
 				queryType: getPanelQueryType(panel),
@@ -67,7 +62,7 @@ export function useCreateAlertFromPanel(): (
 			// Redux global time is nanoseconds; the request DTO takes epoch ms.
 			const request = buildQueryRangeRequest({
 				queries: panel.spec.queries,
-				queryCapabilities: getPanelDefinition(panelKind).queryCapabilities,
+				panelType,
 				startMs: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
 				endMs: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
 				variables,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDeletePanel.ts

@@ -42,7 +42,6 @@ export function useDeletePanel({
 			}
 
 			const removed = section.items.find((i) => i.id === panelId);
-			const removedKind = removed?.panel?.spec.plugin.kind;
 			const nextItems = section.items.filter((i) => i.id !== panelId);
 			try {
 				await patchAsync([
@@ -51,15 +50,9 @@ export function useDeletePanel({
 				]);
 				void logEvent(DashboardDetailEvents.PanelAction, {
 					action: 'delete',
-					// An item ref can outlive its panel, so both fields go on together or
-					// not at all: `panelType` keeps existing reports resolving, `panelKind`
-					// is the V2 identity.
-					...(removedKind
-						? {
-								panelType: PANEL_KIND_TO_PANEL_TYPE[removedKind],
-								panelKind: removedKind,
-							}
-						: {}),
+					panelType: removed?.panel
+						? PANEL_KIND_TO_PANEL_TYPE[removed.panel.spec.plugin.kind]
+						: undefined,
 					panelId,
 					dashboardId,
 				});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDownloadPanelCsv.ts

@@ -43,7 +43,6 @@ export function useDownloadPanelCsv({
 		void logEvent(DashboardDetailEvents.PanelExported, {
 			format: 'csv',
 			panelType: PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
-			panelKind: panel.spec.plugin.kind,
 		});
 	}, [canDownloadCsv, fileName, panel, data]);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldown.tsx

@@ -128,14 +128,11 @@ export function useDrilldown(
 
 	const onPanelClick = useCallback(
 		(payload: DrilldownClickPayload): void => {
-			void logEvent(DashboardDetailEvents.DrilldownOpened, {
-				panelType,
-				panelKind: kind,
-			});
+			void logEvent(DashboardDetailEvents.DrilldownOpened, { panelType });
 			setSubMenu(DrilldownSubMenu.Base);
 			onClick(payload.coordinates, payload.context);
 		},
-		[onClick, panelType, kind],
+		[onClick, panelType],
 	);
 
 	const handleClose = useCallback((): void => {
@@ -179,8 +176,7 @@ export function useDrilldown(
 
 	const { resolvedQuery, isResolving } = useResolvedDrilldownQuery({
 		queries,
-		panelKind: kind,
-		queryCapabilities: getPanelDefinition(kind).queryCapabilities,
+		panelType,
 		v1Query,
 		enabled: showAggregateMenu,
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useMovePanelToSection.ts

@@ -53,7 +53,6 @@ export function useMovePanelToSection({
 			if (!moved) {
 				return;
 			}
-			const movedKind = moved.panel?.spec.plugin.kind;
 
 			const sourceItems = source.items.filter((i) => i.id !== panelId);
 			// Land at the section bottom, not backfilled into a gap — least disruptive
@@ -72,15 +71,9 @@ export function useMovePanelToSection({
 				);
 				void logEvent(DashboardDetailEvents.PanelAction, {
 					action: 'move',
-					// An item ref can outlive its panel, so both fields go on together or
-					// not at all: `panelType` keeps existing reports resolving, `panelKind`
-					// is the V2 identity.
-					...(movedKind
-						? {
-								panelType: PANEL_KIND_TO_PANEL_TYPE[movedKind],
-								panelKind: movedKind,
-							}
-						: {}),
+					panelType: moved.panel
+						? PANEL_KIND_TO_PANEL_TYPE[moved.panel.spec.plugin.kind]
+						: undefined,
 					panelId,
 					dashboardId,
 				});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useResolvedDrilldownQuery.ts

@@ -3,11 +3,7 @@ import { useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { useReplaceVariables } from 'api/generated/services/querier';
 import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
-import type { PanelQueryCapabilities } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelCapabilities';
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { buildQueryRangeRequest } from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
 import { envelopesToQuery } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
 import { selectResolvedVariables } from 'pages/DashboardPageV2/DashboardContainer/store/slices/variableSelectionSlice';
@@ -19,9 +15,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 interface UseResolvedDrilldownQueryArgs {
 	/** Panel's perses queries — the substitution source (carries the `$var` refs). */
 	queries: DashboardtypesQueryDTO[];
-	panelKind: PanelKind;
-	/** The panel kind's declared query capabilities — shapes the substitution request. */
-	queryCapabilities: PanelQueryCapabilities;
+	panelType: PANEL_TYPES;
 	/** The raw V5→V1 query; the fallback until substitution resolves / when no vars exist. */
 	v1Query: Query;
 	/** Resolve only while the aggregate menu is open (V1 parity: fires when it appears). */
@@ -44,8 +38,7 @@ interface UseResolvedDrilldownQueryResult {
  */
 export function useResolvedDrilldownQuery({
 	queries,
-	panelKind,
-	queryCapabilities,
+	panelType,
 	v1Query,
 	enabled,
 }: UseResolvedDrilldownQueryArgs): UseResolvedDrilldownQueryResult {
@@ -67,7 +60,7 @@ export function useResolvedDrilldownQuery({
 		substituteVars({
 			data: buildQueryRangeRequest({
 				queries,
-				queryCapabilities,
+				panelType,
 				startMs: Math.floor(minTime / 1e6),
 				endMs: Math.floor(maxTime / 1e6),
 				variables,
@@ -77,7 +70,7 @@ export function useResolvedDrilldownQuery({
 		enabled,
 		hasVariables,
 		queries,
-		queryCapabilities,
+		panelType,
 		minTime,
 		maxTime,
 		variables,
@@ -88,13 +81,8 @@ export function useResolvedDrilldownQuery({
 		if (!hasVariables || !data) {
 			return v1Query;
 		}
-		// View-in-X navigates to a V1 explorer, so the resolved query crosses back into the
-		// V1 `Query` shape — the one place this hook still needs a legacy panel type.
-		return envelopesToQuery(
-			data.data.compositeQuery?.queries ?? [],
-			PANEL_KIND_TO_PANEL_TYPE[panelKind],
-		);
-	}, [hasVariables, data, v1Query, panelKind]);
+		return envelopesToQuery(data.data.compositeQuery?.queries ?? [], panelType);
+	}, [hasVariables, data, v1Query, panelType]);
 
 	return { resolvedQuery, isResolving: enabled && hasVariables && isLoading };
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/usePanelQuery.test.tsx

@@ -1,11 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { act, renderHook } from '@testing-library/react';
-import {
-	type DashboardtypesPanelDTO,
-	Querybuildertypesv5RequestTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import type { PanelQueryCapabilities } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelCapabilities';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	DASHBOARD_CACHE_TIME,
 	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
@@ -58,23 +54,6 @@ function panelWith(
 	} as unknown as DashboardtypesPanelDTO;
 }
 
-// The capability blocks TimeSeries and List declare. Passed in rather than resolved from
-// the registry: the hook takes them as input, and importing the registry here would pull
-// every panel renderer (and the app's API client) into this suite.
-const TIME_SERIES_CAPABILITIES: PanelQueryCapabilities = {
-	requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-	formatTableResultForUI: false,
-	bucketedStepInterval: false,
-	orderTiebreaker: false,
-	serverPaginated: false,
-};
-const LIST_PANEL_CAPABILITIES: PanelQueryCapabilities = {
-	...TIME_SERIES_CAPABILITIES,
-	requestType: Querybuildertypesv5RequestTypeDTO.raw,
-	orderTiebreaker: true,
-	serverPaginated: true,
-};
-
 function builderPanel(): DashboardtypesPanelDTO {
 	return panelWith('signoz/TimeSeriesPanel', {
 		name: 'A',
@@ -121,13 +100,7 @@ beforeEach(() => {
 
 describe('usePanelQuery', () => {
 	it('builds the generated V5 request DTO directly from panel.spec.queries', () => {
-		renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
-		);
+		renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
 		const [{ requestPayload }] = mockUseGetQueryRangeV5.mock.calls[0];
 		expect(requestPayload.schemaVersion).toBe('v1');
 		expect(requestPayload.compositeQuery.queries).toStrictEqual([
@@ -139,30 +112,30 @@ describe('usePanelQuery', () => {
 	});
 
 	it('converts redux nanosecond time to epoch ms on the request', () => {
-		renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
-		);
+		renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
 		const [{ requestPayload }] = mockUseGetQueryRangeV5.mock.calls[0];
 		expect(requestPayload.start).toBe(1_000_000_000);
 		expect(requestPayload.end).toBe(2_000_000_000);
 	});
 
-	// Which requestType each kind declares is asserted in
-	// Panels/__tests__/capabilities.test.ts; here it only has to reach the request.
-	it('sends the requestType from the declared query capabilities', () => {
+	it.each([
+		['signoz/TimeSeriesPanel', 'time_series'],
+		['signoz/ListPanel', 'raw'],
+		// HISTOGRAM and BAR panels bin/derive from raw time-series data
+		// client-side, so the backend must receive `time_series` (V1 parity).
+		['signoz/HistogramPanel', 'time_series'],
+		['signoz/BarChartPanel', 'time_series'],
+		['signoz/NumberPanel', 'scalar'],
+		['signoz/PieChartPanel', 'scalar'],
+	])('%s panel sends requestType=%s', (panelKind, requestType) => {
 		renderHook(() =>
 			usePanelQuery({
-				panel: panelWith('signoz/ListPanel', { name: 'A', signal: 'logs' }),
+				panel: panelWith(panelKind, { name: 'A', signal: 'logs' }),
 				panelId: 'p1',
-				queryCapabilities: LIST_PANEL_CAPABILITIES,
 			}),
 		);
 		const [{ requestPayload }] = mockUseGetQueryRangeV5.mock.calls[0];
-		expect(requestPayload.requestType).toBe('raw');
+		expect(requestPayload.requestType).toBe(requestType);
 	});
 
 	it('exposes the raw V5 response, request payload, and legend map on data', () => {
@@ -175,11 +148,7 @@ describe('usePanelQuery', () => {
 		});
 
 		const { result } = renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
+			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
 		);
 
 		expect(result.current.data.response).toBe(v5Response);
@@ -189,11 +158,7 @@ describe('usePanelQuery', () => {
 
 	it('exposes an undefined response before data arrives', () => {
 		const { result } = renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
+			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
 		);
 		expect(result.current.data.response).toBeUndefined();
 	});
@@ -206,11 +171,7 @@ describe('usePanelQuery', () => {
 			error: new Error('boom'),
 		});
 		const { result } = renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
+			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
 		);
 		expect(result.current.error?.message).toBe('boom');
 	});
@@ -225,11 +186,7 @@ describe('usePanelQuery', () => {
 			error: null,
 		});
 		const { result } = renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
+			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
 		);
 		expect(result.current.isLoading).toBe(false);
 		expect(result.current.isFetching).toBe(true);
@@ -243,11 +200,7 @@ describe('usePanelQuery', () => {
 			error: null,
 		});
 		const { result } = renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
+			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
 		);
 		expect(result.current.isLoading).toBe(true);
 	});
@@ -260,23 +213,14 @@ describe('usePanelQuery', () => {
 			error: undefined,
 		});
 		const { result } = renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
+			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
 		);
 		expect(result.current.error).toBeNull();
 	});
 
 	it('passes enabled=false to the fetch hook when the caller disables it', () => {
 		renderHook(() =>
-			usePanelQuery({
-				panel: builderPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-				enabled: false,
-			}),
+			usePanelQuery({ panel: builderPanel(), panelId: 'p1', enabled: false }),
 		);
 		const [{ enabled }] = mockUseGetQueryRangeV5.mock.calls[0];
 		expect(enabled).toBe(false);
@@ -284,12 +228,7 @@ describe('usePanelQuery', () => {
 
 	it('auto-disables the fetch when the panel has no queries (even with enabled=true)', () => {
 		renderHook(() =>
-			usePanelQuery({
-				panel: emptyPanel(),
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-				enabled: true,
-			}),
+			usePanelQuery({ panel: emptyPanel(), panelId: 'p1', enabled: true }),
 		);
 		const [{ enabled }] = mockUseGetQueryRangeV5.mock.calls[0];
 		expect(enabled).toBe(false);
@@ -304,7 +243,6 @@ describe('usePanelQuery', () => {
 					aggregations: [{}],
 				}),
 				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
 			}),
 		);
 		const [{ enabled }] = mockUseGetQueryRangeV5.mock.calls[0];
@@ -313,13 +251,7 @@ describe('usePanelQuery', () => {
 
 	it('composes a react-query cache key that includes panelId, time range, kind, and queries', () => {
 		const panel = builderPanel();
-		renderHook(() =>
-			usePanelQuery({
-				panel,
-				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
-			}),
-		);
+		renderHook(() => usePanelQuery({ panel, panelId: 'p1' }));
 		const [{ queryKey }] = mockUseGetQueryRangeV5.mock.calls[0];
 		expect(queryKey).toStrictEqual(
 			expect.arrayContaining([
@@ -338,7 +270,6 @@ describe('usePanelQuery', () => {
 		renderHook(() =>
 			usePanelQuery({
 				panel,
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
 				panelId: 'p1',
 				time: { startMs: 1_700_000_000_000, endMs: 1_700_000_600_000 },
 			}),
@@ -365,7 +296,6 @@ describe('usePanelQuery', () => {
 			usePanelQuery({
 				panel: builderPanel(),
 				panelId: 'p1',
-				queryCapabilities: TIME_SERIES_CAPABILITIES,
 				time: { startMs: 1_700_000_000_000.546, endMs: 1_700_000_600_000.999 },
 			}),
 		);
@@ -386,11 +316,7 @@ describe('usePanelQuery', () => {
 
 		it('exposes server paging at the default page size when the query has no limit', () => {
 			const { result } = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({}), panelId: 'p1' }),
 			);
 			expect(result.current.pagination).toBeDefined();
 			expect(result.current.pagination?.pageSize).toBe(25);
@@ -401,34 +327,20 @@ describe('usePanelQuery', () => {
 
 		it('disables the server pager when the query has an explicit limit (V1 parity)', () => {
 			const { result } = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({ limit: 100 }),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({ limit: 100 }), panelId: 'p1' }),
 			);
 			expect(result.current.pagination).toBeUndefined();
 		});
 
 		it('keeps previous data while paging so the table/pager stay mounted on page change', () => {
-			renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
-			);
+			renderHook(() => usePanelQuery({ panel: listPanel({}), panelId: 'p1' }));
 			const [{ keepPreviousData }] = mockUseGetQueryRangeV5.mock.calls[0];
 			expect(keepPreviousData).toBe(true);
 		});
 
 		it('changes the page size (and re-requests with the new limit) via setPageSize', () => {
 			const { result } = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({}), panelId: 'p1' }),
 			);
 
 			act(() => result.current.pagination?.setPageSize(50));
@@ -468,11 +380,7 @@ describe('usePanelQuery', () => {
 
 		it('starts on page 0 with no prev/next and does not throw before data arrives', () => {
 			const { result } = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({}), panelId: 'p1' }),
 			);
 			expect(result.current.pagination?.pageIndex).toBe(0);
 			expect(result.current.pagination?.canPrev).toBe(false);
@@ -484,33 +392,21 @@ describe('usePanelQuery', () => {
 			// window/cursor path), so a full page is the has-more signal.
 			withResponse(rawResponse(25));
 			const fullPage = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({}), panelId: 'p1' }),
 			);
 			expect(fullPage.result.current.pagination?.canNext).toBe(true);
 
 			// Partial page, no cursor → the last page.
 			withResponse(rawResponse(3));
 			const partialPage = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({}), panelId: 'p1' }),
 			);
 			expect(partialPage.result.current.pagination?.canNext).toBe(false);
 
 			// Cursor present (even on a partial page) → more rows (timestamp window path).
 			withResponse(rawResponse(3, 'cursor-1'));
 			const withCursor = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({}), panelId: 'p1' }),
 			);
 			expect(withCursor.result.current.pagination?.canNext).toBe(true);
 		});
@@ -520,13 +416,7 @@ describe('usePanelQuery', () => {
 			// Stable panel reference: a fresh one each render would change the
 			// `queries` identity and trip the offset-reset effect (real props are stable).
 			const panel = listPanel({});
-			const { result } = renderHook(() =>
-				usePanelQuery({
-					panel,
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
-			);
+			const { result } = renderHook(() => usePanelQuery({ panel, panelId: 'p1' }));
 			expect(result.current.pagination?.pageIndex).toBe(0);
 
 			act(() => result.current.pagination?.goNext());
@@ -538,11 +428,7 @@ describe('usePanelQuery', () => {
 		it('stays defined and zero-paged for a non-raw (scalar) response', () => {
 			withResponse({ data: { type: 'scalar', data: { results: [] } } });
 			const { result } = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({}), panelId: 'p1' }),
 			);
 			expect(result.current.pagination).toBeDefined();
 			expect(result.current.pagination?.canNext).toBe(false);
@@ -551,11 +437,7 @@ describe('usePanelQuery', () => {
 
 		it('ignores a non-positive page size so paging never goes invalid', () => {
 			const { result } = renderHook(() =>
-				usePanelQuery({
-					panel: listPanel({}),
-					panelId: 'p1',
-					queryCapabilities: LIST_PANEL_CAPABILITIES,
-				}),
+				usePanelQuery({ panel: listPanel({}), panelId: 'p1' }),
 			);
 			act(() => result.current.pagination?.setPageSize(0));
 			expect(result.current.pagination?.pageSize).toBe(25);
@@ -574,26 +456,14 @@ describe('usePanelQuery', () => {
 
 		it('caches for DASHBOARD_CACHE_TIME when auto-refresh is disabled', () => {
 			withAutoRefreshDisabled(true);
-			renderHook(() =>
-				usePanelQuery({
-					panel: builderPanel(),
-					panelId: 'p1',
-					queryCapabilities: TIME_SERIES_CAPABILITIES,
-				}),
-			);
+			renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
 			const [{ cacheTime }] = mockUseGetQueryRangeV5.mock.calls[0];
 			expect(cacheTime).toBe(DASHBOARD_CACHE_TIME);
 		});
 
 		it('drops cacheTime to 0 when auto-refresh is enabled', () => {
 			withAutoRefreshDisabled(false);
-			renderHook(() =>
-				usePanelQuery({
-					panel: builderPanel(),
-					panelId: 'p1',
-					queryCapabilities: TIME_SERIES_CAPABILITIES,
-				}),
-			);
+			renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
 			const [{ cacheTime }] = mockUseGetQueryRangeV5.mock.calls[0];
 			expect(cacheTime).toBe(DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED);
 		});

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

@@ -3,6 +3,7 @@ import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate global time selector off redux
 import { useSelector } from 'react-redux';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	DASHBOARD_CACHE_TIME,
 	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
@@ -23,7 +24,7 @@ import {
 	queryReferencesAnyVariable,
 } from '../queryV5/getReferencedVariables';
 import { getBuilderQueries } from '../Panels/utils/getBuilderQueries';
-import type { PanelQueryCapabilities } from '../Panels/types/panelCapabilities';
+import { PANEL_KIND_TO_PANEL_TYPE } from '../Panels/types/panelKind';
 import { selectResolvedVariables } from '../store/slices/variableSelectionSlice';
 import { useDashboardStore } from '../store/useDashboardStore';
 import { resolvePanelTimeWindow } from './resolvePanelTimeWindow';
@@ -37,8 +38,6 @@ const DEFAULT_LIST_PAGE_SIZE = 25;
 export interface UsePanelQueryArgs {
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
-	/** The panel kind's declared query capabilities — `panelDefinition.queryCapabilities` at the call site. */
-	queryCapabilities: PanelQueryCapabilities;
 	/**
 	 * Gate the fetch (default true). PanelV2 sets false for unregistered kinds to skip a wasted
 	 * call. The hook also auto-disables internally when the panel has no runnable queries.
@@ -86,20 +85,21 @@ export interface UsePanelQueryResult {
 export function usePanelQuery({
 	panel,
 	panelId,
-	queryCapabilities,
 	enabled = true,
 	time,
 }: UsePanelQueryArgs): UsePanelQueryResult {
 	const fullKind = panel.spec.plugin.kind;
+	const panelType =
+		(fullKind && PANEL_KIND_TO_PANEL_TYPE[fullKind]) ?? PANEL_TYPES.TIME_SERIES;
 	const queries = panel.spec.queries;
 
-	// V1 parity: a query with an explicit `limit` shows without a server pager; without
-	// one a paging kind fetches server-side at a user-selectable size.
+	// V1 parity: a list query with an explicit `limit` shows without a server pager; without
+	// one it pages server-side at a user-selectable size.
 	const hasExplicitLimit = useMemo(
 		() => !!getBuilderQueries(queries)[0]?.limit,
 		[queries],
 	);
-	const isPaginated = queryCapabilities.serverPaginated && !hasExplicitLimit;
+	const isPaginated = panelType === PANEL_TYPES.LIST && !hasExplicitLimit;
 
 	const [pageSize, setPageSize] = useState(DEFAULT_LIST_PAGE_SIZE);
 	const [offset, setOffset] = useState(0);
@@ -188,7 +188,7 @@ export function usePanelQuery({
 		() =>
 			buildQueryRangeRequest({
 				queries,
-				queryCapabilities,
+				panelType,
 				startMs,
 				endMs,
 				fillGaps,
@@ -197,7 +197,7 @@ export function usePanelQuery({
 			}),
 		[
 			queries,
-			queryCapabilities,
+			panelType,
 			startMs,
 			endMs,
 			fillGaps,

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/__tests__/buildQueryRangeRequest.test.ts

@@ -1,13 +1,12 @@
-import {
-	type DashboardtypesQueryDTO,
-	Querybuildertypesv5RequestTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 
 import {
 	buildQueryRangeRequest,
 	extractLegendMap,
 	getBarStepIntervalSeconds,
 	hasRunnableQueries,
+	panelTypeToRequestType,
 	toQueryEnvelopes,
 } from '../buildQueryRangeRequest';
 
@@ -41,46 +40,20 @@ function compositeQuery(
 const HOUR_MS = 60 * 60 * 1000;
 const START_MS = 1_700_000_000_000;
 
-// Capability blocks matching what each kind declares, so these tests exercise the
-// builder's response to the flags rather than the declarations themselves (those are
-// asserted against the registry in Panels/__tests__/capabilities.test.ts).
-const TIME_SERIES_CAPABILITIES = {
-	requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-	formatTableResultForUI: false,
-	bucketedStepInterval: false,
-	orderTiebreaker: false,
-	serverPaginated: false,
-};
-const BAR_CAPABILITIES = {
-	...TIME_SERIES_CAPABILITIES,
-	bucketedStepInterval: true,
-};
-const TABLE_CAPABILITIES = {
-	...TIME_SERIES_CAPABILITIES,
-	requestType: Querybuildertypesv5RequestTypeDTO.scalar,
-	formatTableResultForUI: true,
-};
-const LIST_PANEL_CAPABILITIES = {
-	...TIME_SERIES_CAPABILITIES,
-	requestType: Querybuildertypesv5RequestTypeDTO.raw,
-	orderTiebreaker: true,
-	serverPaginated: true,
-};
-
-describe('requestType', () => {
+describe('panelTypeToRequestType', () => {
 	it.each([
-		Querybuildertypesv5RequestTypeDTO.time_series,
-		Querybuildertypesv5RequestTypeDTO.scalar,
-		Querybuildertypesv5RequestTypeDTO.raw,
-		Querybuildertypesv5RequestTypeDTO.trace,
-	])('passes %s through from the declared capabilities', (requestType) => {
-		const request = buildQueryRangeRequest({
-			queries: bareBuilderQuery({ name: 'A', signal: 'metrics' }),
-			queryCapabilities: { ...TIME_SERIES_CAPABILITIES, requestType },
-			startMs: START_MS,
-			endMs: START_MS + HOUR_MS,
-		});
-		expect(request.requestType).toBe(requestType);
+		[PANEL_TYPES.TIME_SERIES, 'time_series'],
+		// HISTOGRAM and BAR bin client-side from time-series data; sending
+		// 'distribution' would return a shape the renderers can't bin.
+		[PANEL_TYPES.BAR, 'time_series'],
+		[PANEL_TYPES.HISTOGRAM, 'time_series'],
+		[PANEL_TYPES.TABLE, 'scalar'],
+		[PANEL_TYPES.PIE, 'scalar'],
+		[PANEL_TYPES.VALUE, 'scalar'],
+		[PANEL_TYPES.LIST, 'raw'],
+		[PANEL_TYPES.TRACE, 'trace'],
+	])('%s → %s', (panelType, requestType) => {
+		expect(panelTypeToRequestType(panelType)).toBe(requestType);
 	});
 });
 
@@ -162,7 +135,7 @@ describe('buildQueryRangeRequest', () => {
 	it('assembles the full request DTO', () => {
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A', signal: 'metrics' }),
-			queryCapabilities: TIME_SERIES_CAPABILITIES,
+			panelType: PANEL_TYPES.TIME_SERIES,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});
@@ -184,7 +157,7 @@ describe('buildQueryRangeRequest', () => {
 	it('sets formatTableResultForUI only for TABLE panels', () => {
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A' }),
-			queryCapabilities: TABLE_CAPABILITIES,
+			panelType: PANEL_TYPES.TABLE,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});
@@ -194,7 +167,7 @@ describe('buildQueryRangeRequest', () => {
 	it('passes through fillGaps into formatOptions', () => {
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A' }),
-			queryCapabilities: TIME_SERIES_CAPABILITIES,
+			panelType: PANEL_TYPES.TIME_SERIES,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 			fillGaps: true,
@@ -205,7 +178,7 @@ describe('buildQueryRangeRequest', () => {
 	it('stamps offset/limit onto builder queries when pagination is given', () => {
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A', signal: 'logs' }),
-			queryCapabilities: LIST_PANEL_CAPABILITIES,
+			panelType: PANEL_TYPES.LIST,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 			pagination: { offset: 100, limit: 50 },
@@ -225,7 +198,7 @@ describe('buildQueryRangeRequest', () => {
 	it('defaults a logs list with no order to timestamp desc + id tiebreaker', () => {
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A', signal: 'logs' }),
-			queryCapabilities: LIST_PANEL_CAPABILITIES,
+			panelType: PANEL_TYPES.LIST,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});
@@ -245,7 +218,7 @@ describe('buildQueryRangeRequest', () => {
 				signal: 'logs',
 				order: [{ key: { name: 'timestamp' }, direction: 'desc' }],
 			}),
-			queryCapabilities: LIST_PANEL_CAPABILITIES,
+			panelType: PANEL_TYPES.LIST,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});
@@ -265,7 +238,7 @@ describe('buildQueryRangeRequest', () => {
 		];
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A', signal: 'logs', order }),
-			queryCapabilities: LIST_PANEL_CAPABILITIES,
+			panelType: PANEL_TYPES.LIST,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});
@@ -279,7 +252,7 @@ describe('buildQueryRangeRequest', () => {
 		const order = [{ key: { name: 'timestamp' }, direction: 'desc' }];
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A', signal: 'traces', order }),
-			queryCapabilities: LIST_PANEL_CAPABILITIES,
+			panelType: PANEL_TYPES.LIST,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});
@@ -292,7 +265,7 @@ describe('buildQueryRangeRequest', () => {
 	it('injects the range-derived stepInterval into BAR builder queries without one', () => {
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A', signal: 'metrics' }),
-			queryCapabilities: BAR_CAPABILITIES,
+			panelType: PANEL_TYPES.BAR,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});
@@ -307,7 +280,7 @@ describe('buildQueryRangeRequest', () => {
 	it('preserves a user-set stepInterval on BAR builder queries', () => {
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A', stepInterval: 300 }),
-			queryCapabilities: BAR_CAPABILITIES,
+			panelType: PANEL_TYPES.BAR,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});
@@ -320,7 +293,7 @@ describe('buildQueryRangeRequest', () => {
 	it('does not touch stepInterval for non-BAR panels', () => {
 		const request = buildQueryRangeRequest({
 			queries: bareBuilderQuery({ name: 'A' }),
-			queryCapabilities: TIME_SERIES_CAPABILITIES,
+			panelType: PANEL_TYPES.TIME_SERIES,
 			startMs: START_MS,
 			endMs: START_MS + HOUR_MS,
 		});

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/__tests__/persesQueryAdapters.test.ts

@@ -7,12 +7,7 @@ import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import {
-	envelopesToQuery,
-	fromPerses,
-	panelTypeToRequestType,
-	toPerses,
-} from '../persesQueryAdapters';
+import { envelopesToQuery, fromPerses, toPerses } from '../persesQueryAdapters';
 
 /** A bare perses query (single plugin, not wrapped in a CompositeQuery). */
 function bareQuery(
@@ -26,23 +21,6 @@ function bareQuery(
 }
 
 describe('persesQueryAdapters', () => {
-	describe('panelTypeToRequestType', () => {
-		it.each([
-			[PANEL_TYPES.TIME_SERIES, 'time_series'],
-			// HISTOGRAM and BAR bin client-side from time-series data; sending
-			// 'distribution' would return a shape the renderers can't bin.
-			[PANEL_TYPES.BAR, 'time_series'],
-			[PANEL_TYPES.HISTOGRAM, 'time_series'],
-			[PANEL_TYPES.TABLE, 'scalar'],
-			[PANEL_TYPES.PIE, 'scalar'],
-			[PANEL_TYPES.VALUE, 'scalar'],
-			[PANEL_TYPES.LIST, 'raw'],
-			[PANEL_TYPES.TRACE, 'trace'],
-		])('%s → %s', (panelType, requestType) => {
-			expect(panelTypeToRequestType(panelType)).toBe(requestType);
-		});
-	});
-
 	describe('fromPerses', () => {
 		it('returns a fresh metrics builder query for an empty panel', () => {
 			const query = fromPerses([], PANEL_TYPES.TIME_SERIES);

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest.ts

@@ -14,9 +14,9 @@ import {
 	Querybuildertypesv5QueryEnvelopeBuilderDTOType,
 	Querybuildertypesv5QueryEnvelopeClickHouseSQLDTOType,
 	Querybuildertypesv5QueryEnvelopePromQLDTOType,
+	Querybuildertypesv5RequestTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
-
-import type { PanelQueryCapabilities } from '../Panels/types/panelCapabilities';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 
 // Narrow view over the envelope spec variants. Orval erases envelope `spec` to `unknown`, so
 // shared fields are read through this view with a localized cast at the envelope boundary.
@@ -29,6 +29,31 @@ interface QuerySpecView {
 	order?: Querybuildertypesv5OrderByDTO[];
 }
 
+/**
+ * Maps a V2 panel type to the V5 `requestType`. HISTOGRAM/BAR bin client-side from raw
+ * time-series, so their request type is `time_series` (V1 parity).
+ */
+export function panelTypeToRequestType(
+	panelType: PANEL_TYPES,
+): Querybuildertypesv5RequestTypeDTO {
+	switch (panelType) {
+		case PANEL_TYPES.TIME_SERIES:
+		case PANEL_TYPES.BAR:
+		case PANEL_TYPES.HISTOGRAM:
+			return Querybuildertypesv5RequestTypeDTO.time_series;
+		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.PIE:
+		case PANEL_TYPES.VALUE:
+			return Querybuildertypesv5RequestTypeDTO.scalar;
+		case PANEL_TYPES.LIST:
+			return Querybuildertypesv5RequestTypeDTO.raw;
+		case PANEL_TYPES.TRACE:
+			return Querybuildertypesv5RequestTypeDTO.trace;
+		default:
+			return Querybuildertypesv5RequestTypeDTO.time_series;
+	}
+}
+
 /**
  * Unwraps the perses query into the V5 `compositeQuery.queries` list: a CompositeQuery passes
  * through verbatim, bare plugins wrap into one envelope. Top-level Formula/TraceOperator are
@@ -214,13 +239,7 @@ function withPagination(
 
 export interface BuildQueryRangeRequestArgs {
 	queries: DashboardtypesQueryDTO[];
-	/**
-	 * The panel kind's declared query capabilities (`PanelDefinition.queryCapabilities`): request type,
-	 * result formatting, and the step-interval/order treatment. Passed in rather than looked up
-	 * by kind so this stays a leaf of the query layer — the panel registry carries every
-	 * renderer with it, which has no business in the data path.
-	 */
-	queryCapabilities: PanelQueryCapabilities;
+	panelType: PANEL_TYPES;
 	/** Epoch milliseconds. */
 	startMs: number;
 	/** Epoch milliseconds. */
@@ -239,12 +258,7 @@ export interface BuildQueryRangeRequestArgs {
  */
 export function buildQueryRangeRequest({
 	queries,
-	queryCapabilities: {
-		requestType,
-		formatTableResultForUI,
-		bucketedStepInterval,
-		orderTiebreaker,
-	},
+	panelType,
 	startMs,
 	endMs,
 	fillGaps = false,
@@ -252,10 +266,10 @@ export function buildQueryRangeRequest({
 	variables = {},
 }: BuildQueryRangeRequestArgs): Querybuildertypesv5QueryRangeRequestDTO {
 	let envelopes = toQueryEnvelopes(queries);
-	if (bucketedStepInterval) {
+	if (panelType === PANEL_TYPES.BAR) {
 		envelopes = withBarStepInterval(envelopes, startMs, endMs);
 	}
-	if (orderTiebreaker) {
+	if (panelType === PANEL_TYPES.LIST) {
 		envelopes = withListOrderTiebreaker(envelopes);
 	}
 	if (pagination) {
@@ -266,10 +280,10 @@ export function buildQueryRangeRequest({
 		schemaVersion: 'v1',
 		start: startMs,
 		end: endMs,
-		requestType,
+		requestType: panelTypeToRequestType(panelType),
 		compositeQuery: { queries: envelopes },
 		formatOptions: {
-			formatTableResultForUI,
+			formatTableResultForUI: panelType === PANEL_TYPES.TABLE,
 			fillGaps,
 		},
 		variables,

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters.ts

@@ -10,7 +10,6 @@ import {
 	Querybuildertypesv5QueryEnvelopeBuilderDTOType,
 	Querybuildertypesv5QueryEnvelopeClickHouseSQLDTOType,
 	Querybuildertypesv5QueryEnvelopePromQLDTOType,
-	Querybuildertypesv5RequestTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
@@ -21,7 +20,10 @@ import type { QueryEnvelope } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { toQueryEnvelopes } from './buildQueryRangeRequest';
+import {
+	panelTypeToRequestType,
+	toQueryEnvelopes,
+} from './buildQueryRangeRequest';
 
 /**
  * Adapters between the V2 perses query shape and the V1 `Query` the shared query
@@ -88,33 +90,6 @@ export function deriveQueryType(
 	return EQueryType.QUERY_BUILDER;
 }
 
-/**
- * Maps a legacy panel type to the V5 `requestType`. Lives on this side of the V1 boundary
- * because only the V1 pivot still speaks `PANEL_TYPES` — V2 panels read `requestType` off
- * their kind's declared query capabilities instead. BAR/HISTOGRAM bin client-side from a raw
- * time series, so they request `time_series` (V1 parity).
- */
-export function panelTypeToRequestType(
-	panelType: PANEL_TYPES,
-): Querybuildertypesv5RequestTypeDTO {
-	switch (panelType) {
-		case PANEL_TYPES.TIME_SERIES:
-		case PANEL_TYPES.BAR:
-		case PANEL_TYPES.HISTOGRAM:
-			return Querybuildertypesv5RequestTypeDTO.time_series;
-		case PANEL_TYPES.TABLE:
-		case PANEL_TYPES.PIE:
-		case PANEL_TYPES.VALUE:
-			return Querybuildertypesv5RequestTypeDTO.scalar;
-		case PANEL_TYPES.LIST:
-			return Querybuildertypesv5RequestTypeDTO.raw;
-		case PANEL_TYPES.TRACE:
-			return Querybuildertypesv5RequestTypeDTO.trace;
-		default:
-			return Querybuildertypesv5RequestTypeDTO.time_series;
-	}
-}
-
 /**
  * V5 query-envelope list → V1 `Query`, via `mapQueryDataFromApi`. An empty list opens
  * on a fresh metrics builder query. Used by `fromPerses` and by the envelopes a

frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/PublicPanel.tsx

@@ -40,7 +40,6 @@ function PublicPanel({
 	const { data, isFetching, isPreviousData, error, refetch } =
 		usePublicPanelQuery({
 			panel,
-			queryCapabilities: panelDefinition.queryCapabilities,
 			panelKey,
 			publicDashboardId,
 			startMs,

frontend/src/pages/PublicDashboard/PublicDashboardV2/hooks/__tests__/usePublicPanelQuery.test.tsx

@@ -1,9 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { getPublicDashboardPanelQueryRangeV2 } from 'api/generated/services/dashboard';
-import {
-	type DashboardtypesPanelDTO,
-	Querybuildertypesv5RequestTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
@@ -45,15 +42,6 @@ const panel = {
 
 const args = {
 	panel,
-	// What TimeSeries declares; passed in rather than resolved from the registry, which
-	// would pull every panel renderer into this suite.
-	queryCapabilities: {
-		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
-		formatTableResultForUI: false,
-		bucketedStepInterval: false,
-		orderTiebreaker: false,
-		serverPaginated: false,
-	},
 	panelKey: 'panel-1',
 	publicDashboardId: 'pub-1',
 	startMs: 1000,

frontend/src/pages/PublicDashboard/PublicDashboardV2/hooks/usePublicPanelQuery.ts

@@ -3,9 +3,10 @@ import type {
 	DashboardtypesPanelDTO,
 	GetPublicDashboardPanelQueryRangeV2200,
 } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { retryUnlessClientError } from 'pages/DashboardPageV2/DashboardContainer/hooks/useGetQueryRangeV5';
-import type { PanelQueryCapabilities } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelCapabilities';
+import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import {
 	buildQueryRangeRequest,
 	extractLegendMap,
@@ -20,8 +21,6 @@ import { useQuery, useQueryClient } from 'react-query';
 
 export interface UsePublicPanelQueryArgs {
 	panel: DashboardtypesPanelDTO;
-	/** The panel kind's declared query capabilities — `panelDefinition.queryCapabilities`. */
-	queryCapabilities: PanelQueryCapabilities;
 	/** Panel key in `spec.panels` — addresses the panel on the public endpoint. */
 	panelKey: string;
 	publicDashboardId: string;
@@ -53,13 +52,15 @@ export interface UsePublicPanelQueryResult {
  */
 export function usePublicPanelQuery({
 	panel,
-	queryCapabilities,
 	panelKey,
 	publicDashboardId,
 	startMs,
 	endMs,
 	enabled = true,
 }: UsePublicPanelQueryArgs): UsePublicPanelQueryResult {
+	const fullKind = panel.spec.plugin.kind;
+	const panelType =
+		(fullKind && PANEL_KIND_TO_PANEL_TYPE[fullKind]) ?? PANEL_TYPES.TIME_SERIES;
 	const { queries } = panel.spec;
 
 	const pluginSpec = panel.spec.plugin.spec;
@@ -76,13 +77,13 @@ export function usePublicPanelQuery({
 		() =>
 			buildQueryRangeRequest({
 				queries,
-				queryCapabilities,
+				panelType,
 				startMs,
 				endMs,
 				fillGaps,
 				variables: {},
 			}),
-		[queries, queryCapabilities, startMs, endMs, fillGaps],
+		[queries, panelType, startMs, endMs, fillGaps],
 	);
 
 	const legendMap = useMemo(() => extractLegendMap(queries), [queries]);