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.

docs/api/openapi.yml

@@ -2646,54 +2646,6 @@ components:
         repeatVariable:
           type: string
       type: object
-    DashboardtypesAreaChartAppearance:
-      properties:
-        fillMode:
-          $ref: '#/components/schemas/DashboardtypesAreaFillMode'
-        fillOpacity:
-          $ref: '#/components/schemas/DashboardtypesFillOpacity'
-        lineInterpolation:
-          $ref: '#/components/schemas/DashboardtypesLineInterpolation'
-        lineStyle:
-          $ref: '#/components/schemas/DashboardtypesLineStyle'
-        showPoints:
-          type: boolean
-        spanGaps:
-          $ref: '#/components/schemas/DashboardtypesSpanGaps'
-      type: object
-    DashboardtypesAreaChartPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesAreaChartAppearance'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        thresholds:
-          items:
-            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
-          nullable: true
-          type: array
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesAreaChartVisualization'
-      type: object
-    DashboardtypesAreaChartVisualization:
-      properties:
-        fillSpans:
-          type: boolean
-        stack:
-          $ref: '#/components/schemas/DashboardtypesStackMode'
-        timePreference:
-          $ref: '#/components/schemas/DashboardtypesTimePreference'
-      type: object
-    DashboardtypesAreaFillMode:
-      enum:
-      - solid
-      - gradient
-      - none
-      type: string
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2925,11 +2877,6 @@ components:
       - gradient
       - none
       type: string
-    DashboardtypesFillOpacity:
-      maximum: 1
-      minimum: 0
-      nullable: true
-      type: number
     DashboardtypesGettableDashboardV2:
       properties:
         createdAt:
@@ -3347,7 +3294,6 @@ components:
     DashboardtypesPanelPlugin:
       discriminator:
         mapping:
-          signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
@@ -3359,7 +3305,6 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
@@ -3370,25 +3315,12 @@ components:
       enum:
       - signoz/TimeSeriesPanel
       - signoz/BarChartPanel
-      - signoz/AreaChartPanel
       - signoz/NumberPanel
       - signoz/PieChartPanel
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
       type: string
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/AreaChartPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesAreaChartPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
         kind:
@@ -3707,12 +3639,6 @@ components:
             are connected.
           type: boolean
       type: object
-    DashboardtypesStackMode:
-      enum:
-      - none
-      - normal
-      - percent
-      type: string
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

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/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/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/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/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;
-`;

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -1274,264 +1274,6 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 	}
 }
 
-func TestAreaChartPanelDefaults(t *testing.T) {
-	data := []byte(`{
-		"variables": [],
-		"panels": {
-			"p1": {
-				"kind": "Panel",
-				"spec": {
-					"links": [],
-					"plugin": {
-						"kind": "signoz/AreaChartPanel",
-						"spec": {}
-					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
-				}
-			}
-		},
-		"links": [],
-		"layouts": []
-	}`)
-	d, err := unmarshalDashboard(data)
-	require.NoError(t, err, "unmarshal and validate failed")
-
-	require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
-	spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
-
-	assert.Equal(t, "solid", spec.ChartAppearance.FillMode.ValueOrDefault(), "area fillMode defaults to solid, where the TimeSeries FillMode defaults to none")
-	assert.Nil(t, spec.ChartAppearance.FillOpacity, "an omitted fillOpacity stays nil so the renderer applies the kind default")
-	assert.Equal(t, "none", spec.Visualization.Stack.ValueOrDefault(), "expected Stack default none")
-	assert.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
-	assert.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
-	assert.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
-	assert.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
-	assert.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
-	assert.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
-
-	output, err := json.Marshal(d)
-	require.NoError(t, err, "marshal dashboard failed")
-	outputStr := string(output)
-	for field, want := range map[string]string{
-		"fillMode":    `"solid"`,
-		"stack":       `"none"`,
-		"fillOpacity": `null`,
-	} {
-		assert.Contains(t, outputStr, `"`+field+`":`+want, "expected stored/response JSON to contain %s:%s", field, want)
-	}
-}
-
-func TestAreaChartPanelRoundTrip(t *testing.T) {
-	data := []byte(`{
-		"variables": [],
-		"panels": {
-			"p1": {
-				"kind": "Panel",
-				"spec": {
-					"links": [],
-					"plugin": {
-						"kind": "signoz/AreaChartPanel",
-						"spec": {
-							"visualization": {"timePreference": "global_time", "fillSpans": false, "stack": "percent"},
-							"chartAppearance": {"fillMode": "gradient", "fillOpacity": 0.4}
-						}
-					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
-				}
-			}
-		},
-		"links": [],
-		"layouts": []
-	}`)
-	d, err := unmarshalDashboard(data)
-	require.NoError(t, err, "unmarshal and validate failed")
-
-	require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
-	spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
-
-	assert.Equal(t, "percent", spec.Visualization.Stack.ValueOrDefault(), "expected stack percent")
-	assert.Equal(t, "gradient", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected fillMode gradient")
-
-	output, err := json.Marshal(d)
-	require.NoError(t, err, "marshal dashboard failed")
-	assert.Contains(t, string(output), `"stack":"percent"`, "expected stack in stored/response JSON")
-	assert.Contains(t, string(output), `"fillMode":"gradient"`, "expected fillMode in stored/response JSON")
-}
-
-func TestAreaChartPanelFillOpacity(t *testing.T) {
-	tests := []struct {
-		scenario                 string
-		chartAppearance          string
-		expectedFillOpacitySet   bool
-		expectedFillOpacityValue FillOpacity
-		expectedMarshalledJSON   string
-	}{
-		{
-			scenario:                 "zero is a set value, not an absent one",
-			chartAppearance:          `{"fillOpacity": 0}`,
-			expectedFillOpacitySet:   true,
-			expectedFillOpacityValue: 0,
-			expectedMarshalledJSON:   `"fillOpacity":0`,
-		},
-		{
-			scenario:                 "fully opaque upper bound",
-			chartAppearance:          `{"fillOpacity": 1}`,
-			expectedFillOpacitySet:   true,
-			expectedFillOpacityValue: 1,
-			expectedMarshalledJSON:   `"fillOpacity":1`,
-		},
-		{
-			scenario:                 "typical fractional value",
-			chartAppearance:          `{"fillOpacity": 0.4}`,
-			expectedFillOpacitySet:   true,
-			expectedFillOpacityValue: 0.4,
-			expectedMarshalledJSON:   `"fillOpacity":0.4`,
-		},
-		{
-			scenario:                 "precision beyond one decimal place survives",
-			chartAppearance:          `{"fillOpacity": 0.125}`,
-			expectedFillOpacitySet:   true,
-			expectedFillOpacityValue: 0.125,
-			expectedMarshalledJSON:   `"fillOpacity":0.125`,
-		},
-		{
-			scenario:               "omitted field stays nil so the renderer applies the kind default",
-			chartAppearance:        `{}`,
-			expectedFillOpacitySet: false,
-			expectedMarshalledJSON: `"fillOpacity":null`,
-		},
-		{
-			scenario:               "explicit null stays nil rather than decoding as zero",
-			chartAppearance:        `{"fillOpacity": null}`,
-			expectedFillOpacitySet: false,
-			expectedMarshalledJSON: `"fillOpacity":null`,
-		},
-	}
-
-	for _, test := range tests {
-		t.Run(test.scenario, func(t *testing.T) {
-			data := []byte(`{
-				"variables": [],
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"links": [],
-							"plugin": {"kind": "signoz/AreaChartPanel", "spec": {"chartAppearance": ` + test.chartAppearance + `}},
-							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
-						}
-					}
-				},
-				"links": [],
-				"layouts": []
-			}`)
-			d, err := unmarshalDashboard(data)
-			require.NoError(t, err, "unmarshal and validate failed")
-
-			require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
-			spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
-
-			if !test.expectedFillOpacitySet {
-				assert.Nil(t, spec.ChartAppearance.FillOpacity, "expected fillOpacity to stay unset")
-			} else {
-				require.NotNil(t, spec.ChartAppearance.FillOpacity, "expected fillOpacity to decode as a set value")
-				assert.Equal(t, test.expectedFillOpacityValue, *spec.ChartAppearance.FillOpacity, "unexpected decoded fillOpacity")
-			}
-
-			output, err := json.Marshal(d)
-			require.NoError(t, err, "marshal dashboard failed")
-			assert.Contains(t, string(output), test.expectedMarshalledJSON, "unexpected fillOpacity in stored/response JSON")
-		})
-	}
-}
-
-func TestInvalidateAreaChartPanelSpecValues(t *testing.T) {
-	tests := []struct {
-		scenario               string
-		panelKind              string
-		panelSpec              string
-		expectedErrorSubstring string
-	}{
-		{
-			scenario:               "unknown stack mode",
-			panelKind:              "signoz/AreaChartPanel",
-			panelSpec:              `{"visualization": {"stack": "stacked"}}`,
-			expectedErrorSubstring: "stack mode",
-		},
-		{
-			scenario:               "unknown area fill mode",
-			panelKind:              "signoz/AreaChartPanel",
-			panelSpec:              `{"chartAppearance": {"fillMode": "striped"}}`,
-			expectedErrorSubstring: "fill mode",
-		},
-		{
-			scenario:               "fill opacity on a 0-100 scale",
-			panelKind:              "signoz/AreaChartPanel",
-			panelSpec:              `{"chartAppearance": {"fillOpacity": 40}}`,
-			expectedErrorSubstring: "invalid fillOpacity 40: must be between 0 and 1",
-		},
-		{
-			scenario:               "negative fill opacity",
-			panelKind:              "signoz/AreaChartPanel",
-			panelSpec:              `{"chartAppearance": {"fillOpacity": -0.5}}`,
-			expectedErrorSubstring: "invalid fillOpacity -0.5: must be between 0 and 1",
-		},
-		{
-			scenario:               "non-numeric fill opacity",
-			panelKind:              "signoz/AreaChartPanel",
-			panelSpec:              `{"chartAppearance": {"fillOpacity": "0.4"}}`,
-			expectedErrorSubstring: "cannot unmarshal string",
-		},
-		{
-			scenario:               "stack on a time series panel",
-			panelKind:              "signoz/TimeSeriesPanel",
-			panelSpec:              `{"visualization": {"stack": "normal"}}`,
-			expectedErrorSubstring: `unknown field`,
-		},
-		{
-			scenario:               "fill opacity on a time series panel",
-			panelKind:              "signoz/TimeSeriesPanel",
-			panelSpec:              `{"chartAppearance": {"fillOpacity": 0.4}}`,
-			expectedErrorSubstring: `unknown field`,
-		},
-		{
-			scenario:               "stacked bar chart on an area panel",
-			panelKind:              "signoz/AreaChartPanel",
-			panelSpec:              `{"visualization": {"stackedBarChart": true}}`,
-			expectedErrorSubstring: `unknown field`,
-		},
-		{
-			scenario:               "stack on a bar chart panel",
-			panelKind:              "signoz/BarChartPanel",
-			panelSpec:              `{"visualization": {"stack": "percent"}}`,
-			expectedErrorSubstring: `unknown field`,
-		},
-	}
-
-	for _, test := range tests {
-		t.Run(test.scenario, func(t *testing.T) {
-			data := []byte(`{
-				"variables": [],
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"links": [],
-							"plugin": {"kind": "` + test.panelKind + `", "spec": ` + test.panelSpec + `},
-							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
-						}
-					}
-				},
-				"links": [],
-				"layouts": []
-			}`)
-			_, err := unmarshalDashboard(data)
-			require.Error(t, err, "expected the spec to be rejected")
-			assert.Contains(t, err.Error(), test.expectedErrorSubstring, "unexpected error message: %s", err.Error())
-		})
-	}
-}
-
 func TestNumberPanelDefaults(t *testing.T) {
 	data := []byte(`{
 		"variables": [],

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -30,7 +30,6 @@ func (PanelPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
 		string(PanelKindTimeSeries): schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec"),
 		string(PanelKindBarChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec"),
-		string(PanelKindAreaChart):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec"),
 		string(PanelKindNumber):     schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec"),
 		string(PanelKindPieChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec"),
 		string(PanelKindTable):      schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec"),
@@ -61,7 +60,6 @@ func (PanelPlugin) JSONSchemaOneOf() []any {
 	return []any{
 		PanelPluginVariant[TimeSeriesPanelSpec]{Kind: string(PanelKindTimeSeries)},
 		PanelPluginVariant[BarChartPanelSpec]{Kind: string(PanelKindBarChart)},
-		PanelPluginVariant[AreaChartPanelSpec]{Kind: string(PanelKindAreaChart)},
 		PanelPluginVariant[NumberPanelSpec]{Kind: string(PanelKindNumber)},
 		PanelPluginVariant[PieChartPanelSpec]{Kind: string(PanelKindPieChart)},
 		PanelPluginVariant[TablePanelSpec]{Kind: string(PanelKindTable)},
@@ -225,7 +223,6 @@ var (
 	panelPluginSpecs = map[PanelPluginKind]func() any{
 		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
 		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
-		PanelKindAreaChart:  func() any { return new(AreaChartPanelSpec) },
 		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
 		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
 		PanelKindTable:      func() any { return new(TablePanelSpec) },
@@ -248,7 +245,6 @@ var (
 	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
 		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindAreaChart:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},

pkg/types/dashboardtypes/perses_public_dashboard.go

@@ -183,8 +183,7 @@ func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string)
 		return nil, err
 	}
 
-	// fillGaps lives on the panel visualization; only timeseries, bar chart and
-	// area chart carry it.
+	// fillGaps lives on the panel visualization; only timeseries and bar chart carry it.
 	fillGaps := false
 	switch panelSpec := panel.Spec.Plugin.Spec.(type) {
 	case *TimeSeriesPanelSpec:
@@ -195,10 +194,6 @@ func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string)
 		if panelSpec != nil {
 			fillGaps = panelSpec.Visualization.FillSpans
 		}
-	case *AreaChartPanelSpec:
-		if panelSpec != nil {
-			fillGaps = panelSpec.Visualization.FillSpans
-		}
 	}
 
 	return &qb.QueryRangeRequest{

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -168,7 +168,6 @@ type PanelPluginKind string
 const (
 	PanelKindTimeSeries PanelPluginKind = "signoz/TimeSeriesPanel"
 	PanelKindBarChart   PanelPluginKind = "signoz/BarChartPanel"
-	PanelKindAreaChart  PanelPluginKind = "signoz/AreaChartPanel"
 	PanelKindNumber     PanelPluginKind = "signoz/NumberPanel"
 	PanelKindPieChart   PanelPluginKind = "signoz/PieChartPanel"
 	PanelKindTable      PanelPluginKind = "signoz/TablePanel"
@@ -177,7 +176,7 @@ const (
 )
 
 func (PanelPluginKind) Enum() []any {
-	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindAreaChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList}
+	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList}
 }
 
 type TimeSeriesPanelSpec struct {
@@ -205,30 +204,6 @@ type BarChartPanelSpec struct {
 	Thresholds    []ThresholdWithLabel  `json:"thresholds" validate:"dive"`
 }
 
-type AreaChartPanelSpec struct {
-	Visualization   AreaChartVisualization `json:"visualization"`
-	Formatting      PanelFormatting        `json:"formatting"`
-	ChartAppearance AreaChartAppearance    `json:"chartAppearance"`
-	Axes            Axes                   `json:"axes"`
-	Legend          Legend                 `json:"legend"`
-	Thresholds      []ThresholdWithLabel   `json:"thresholds" validate:"dive"`
-}
-
-// AreaChartAppearance repeats the line-drawing fields rather than embedding
-// TimeSeriesChartAppearance: both carry a `fillMode` under different enums, and
-// a duplicated json tag across an embed boundary is resolved by depth, which the
-// schema reflector does not model.
-type AreaChartAppearance struct {
-	LineInterpolation LineInterpolation `json:"lineInterpolation"`
-	ShowPoints        bool              `json:"showPoints"`
-	LineStyle         LineStyle         `json:"lineStyle"`
-	FillMode          AreaFillMode      `json:"fillMode"`
-	// FillOpacity is a pointer so an omitted field resolves to the kind default at
-	// render time; a plain value would make the Go zero value a transparent fill.
-	FillOpacity *FillOpacity `json:"fillOpacity"`
-	SpanGaps    SpanGaps     `json:"spanGaps"`
-}
-
 type NumberPanelSpec struct {
 	Visualization BasicVisualization    `json:"visualization"`
 	Formatting    PanelFormatting       `json:"formatting"`
@@ -287,12 +262,6 @@ type BarChartVisualization struct {
 	StackedBarChart bool `json:"stackedBarChart"`
 }
 
-type AreaChartVisualization struct {
-	BasicVisualization
-	FillSpans bool      `json:"fillSpans"`
-	Stack     StackMode `json:"stack"`
-}
-
 type PanelFormatting struct {
 	Unit             string          `json:"unit"`
 	DecimalPrecision PrecisionOption `json:"decimalPrecision"`
@@ -653,106 +622,6 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 	}
 }
 
-type AreaFillMode struct{ valuer.String }
-
-var (
-	AreaFillModeSolid    = AreaFillMode{valuer.NewString("solid")} // default
-	AreaFillModeGradient = AreaFillMode{valuer.NewString("gradient")}
-)
-
-func (AreaFillMode) Enum() []any {
-	return []any{AreaFillModeSolid, AreaFillModeGradient}
-}
-
-func (fm AreaFillMode) ValueOrDefault() string {
-	if fm.IsZero() {
-		return AreaFillModeSolid.StringValue()
-	}
-	return fm.StringValue()
-}
-
-func (fm AreaFillMode) MarshalJSON() ([]byte, error) {
-	return json.Marshal(fm.ValueOrDefault())
-}
-
-func (fm *AreaFillMode) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fill mode: must be a string, one of `solid`, `gradient`, or `none`")
-	}
-	val := AreaFillMode{valuer.NewString(v)}
-	switch val {
-	case AreaFillModeSolid, AreaFillModeGradient:
-		*fm = val
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid fill mode %q: must be `solid`, `gradient`, or `none`", v)
-	}
-}
-
-// StackMode is area-only. Bar stacking stays on BarChartVisualization.StackedBarChart,
-// so `percent` is not reachable from a bar panel.
-type StackMode struct{ valuer.String }
-
-var (
-	StackModeNone    = StackMode{valuer.NewString("none")} // default
-	StackModeNormal  = StackMode{valuer.NewString("normal")}
-	StackModePercent = StackMode{valuer.NewString("percent")}
-)
-
-func (StackMode) Enum() []any {
-	return []any{StackModeNone, StackModeNormal, StackModePercent}
-}
-
-func (sm StackMode) ValueOrDefault() string {
-	if sm.IsZero() {
-		return StackModeNone.StringValue()
-	}
-	return sm.StringValue()
-}
-
-func (sm StackMode) MarshalJSON() ([]byte, error) {
-	return json.Marshal(sm.ValueOrDefault())
-}
-
-func (sm *StackMode) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid stack mode: must be a string, one of `none`, `normal`, or `percent`")
-	}
-	val := StackMode{valuer.NewString(v)}
-	switch val {
-	case StackModeNone, StackModeNormal, StackModePercent:
-		*sm = val
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid stack mode %q: must be `none`, `normal`, or `percent`", v)
-	}
-}
-
-// FillOpacity is the alpha of an area fill, in 0–1 because that is what the
-// chart layer consumes directly. Unlike the enums in this section it has no
-// ValueOrDefault: 0 is a legitimate value, so the kind default lives at render
-// time behind a nil pointer.
-type FillOpacity float64
-
-func (FillOpacity) PrepareJSONSchema(s *jsonschema.Schema) error {
-	s.WithMinimum(0).WithMaximum(1)
-	return nil
-}
-
-func (o *FillOpacity) UnmarshalJSON(data []byte) error {
-	var v float64
-	if err := json.Unmarshal(data, &v); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fillOpacity: must be a number between 0 and 1")
-	}
-	if v < 0 || v > 1 {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid fillOpacity %v: must be between 0 and 1", v)
-	}
-	*o = FillOpacity(v)
-	return nil
-}
-
 type SpanGaps struct {
 	FillOnlyBelow bool   `json:"fillOnlyBelow" description:"Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected."`
 	FillLessThan  string `json:"fillLessThan" description:"The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected."`

pkg/types/dashboardtypes/perses_v1_to_v2.go

@@ -14,11 +14,6 @@ import (
 // (transition.dashboardMigrateV5). Pre-v5 builder queries will produce
 // invalid v2 envelopes — run the v4→v5 migration first.
 //
-// The v1 input shape is closed: nothing writes v1 dashboards any more, so these
-// files only ever convert what v1 could already express. Panel kinds and spec
-// fields added to v2 from here on need no converter entry — change these files
-// only when a v2 type edit breaks the build.
-//
 // The conversion is split across sibling files by concern:
 //   - perses_v1_to_v2_tags.go      tags
 //   - perses_v1_to_v2_panels.go    widgets → panels (+ panel field mappers)