fix(featureflag): return 401 on unauthenticated feature flags request

fix(flagger): make features endpoint open access
fix(licensing): make feature flags endpoint open access
2026-08-26 22:40:40 +01:00 · 2026-08-26 18:24:54 +05:30 · 2026-08-26 18:05:06 +05:30 · 2026-08-26 18:00:44 +05:30 · 2026-08-26 06:37:32 +00:00 · 2026-08-26 05:08:00 +00:00
147 changed files with 9456 additions and 2145 deletions
--- a/.claude/agents/playwright-test-generator.md
+++ b/.claude/agents/playwright-test-generator.md
@@ -20,6 +20,16 @@ You are the Playwright Test Generator for the SigNoz frontend. You take a plan w
    await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
  });
  ```
+- **Extended fixtures:** For features needing complex setup (seeded data, API calls, cleanup), import from domain-specific fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the full pattern.
+  - `fixtures/alerts/alert-rules` — worker-scoped rule list + test-scoped rule factory
+  - `fixtures/alerts/alert-history` — extends alert-rules, adds history fixtures (waits on ruler evaluation)
+  ```ts
+  // Alert list tests - need rules, no history
+  import { test, expect } from '../../../fixtures/alerts/alert-rules';
+  
+  // Alert history tests - need evaluated history rows
+  import { test, expect } from '../../../fixtures/alerts/alert-history';
+  ```
 - **Test titles:** `TC-NN <short description>` — matches the planner's IDs.
 - **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two cleanup shapes are valid; pick based on the spec size:
  - **Per-test `try / finally`** — small specs (~ <10 scenarios) where each test owns its data.
--- a/.claude/agents/playwright-test-healer.md
+++ b/.claude/agents/playwright-test-healer.md
@@ -49,6 +49,7 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 - **The list pages render zero-state when the workspace is empty.** Many locators (search input, sort button, `new-dashboard-cta` testid, "All Dashboards" header) are absent in zero-state. A 30s timeout on those usually means the workspace was empty — seed first via `createDashboardViaApi`.
 - **The "Enter dashboard name…" inline field is a `RequestDashboardBtn` (template-request feedback form), not a create flow.** Tests that try to use it to create a named dashboard will silently no-op. The only UI create paths are the "New dashboard" dropdown → "Create dashboard" (default name "Sample Title", see `DEFAULT_DASHBOARD_TITLE`) or "Import JSON".
 - **Auth.** `tests/e2e/fixtures/auth.ts` logs in once per worker and caches `storageState` (cookies + localStorage with `AUTH_TOKEN`). For API-driven seeding/cleanup, use `authToken(page)` from `helpers/dashboards.ts` and pass `Authorization: Bearer <token>`. Never re-implement login.
+- **Extended fixtures.** Domain-specific fixtures extend `auth` and add seeded data. Alerts uses `fixtures/alerts/alert-rules` (worker-scoped rule list, test-scoped factory) and `fixtures/alerts/alert-history` (extends alert-rules, waits on ruler evaluation). See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the pattern. When a test fails on missing data, check if it imports the wrong fixture level.
 - **Ant Design popovers** (sort menu, action menu) are click-toggle. The trigger element is often an inline `<svg>` with a `data-testid` — clicking it opens the popover; clicking it again closes. After selecting an option, the popover auto-closes. If a test interacts with the popover twice, wait for the menu items to be visible explicitly between toggles.
 - **Artifacts.** Every failed test writes to `tests/e2e/artifacts/results/<test-slug>/` — the `error-context.md` accessibility snapshot is the fastest way to see what the page actually looked like when it failed.
 - **Type-check.** After edits, run `npx tsc --noEmit -p tests/e2e/tsconfig.json` if it succeeds, or rely on `npx playwright test --list` to validate the spec parses.
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -15467,10 +15467,8 @@ paths:
                $ref: '#/components/schemas/RenderErrorResponse'
          description: Internal Server Error
      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
+      - api_key: []
+      - tokenizer: []
      summary: Get features
      tags:
      - features
--- a/docs/contributing/tests/e2e.md
+++ b/docs/contributing/tests/e2e.md
@@ -112,6 +112,41 @@ These two folders look similar but mean different things:

 Rule of thumb: if it's a `test.extend` fixture, put it in `fixtures/`. If it's a function you call explicitly (or a constant the function uses), put it in `helpers/`. If it's a static file the helpers read, put it in `testdata/`.

+### Extended fixtures
+
+For features needing complex setup (API-seeded data, ruler evaluation waits, cleanup), create domain-specific fixtures that extend `auth`. Group them in `fixtures/<domain>/`.
+
+**Fixture scopes:**
+- **test scope** — fresh data per test. Use for mutations (edit, delete, rename).
+- **worker scope** — shared across tests in one worker. Use for read-only data. Worker scope pays the setup cost once per worker instead of once per test.
+
+**The alerts pattern** (`fixtures/alerts/`) demonstrates extending fixtures:
+
+```
+fixtures/alerts/
+├── alert-rules.ts   # extends auth — worker-scoped rule list + test-scoped factory
+└── alert-history.ts # extends alert-rules — adds history fixtures (waits on ruler)
+```
+
+Specs import from the fixture they need:
+
+```ts
+// List tests — just need rules, no history
+import { test, expect } from '../../../fixtures/alerts/alert-rules';
+
+// History tests — need history rows from ruler evaluation
+import { test, expect } from '../../../fixtures/alerts/alert-history';
+```
+
+**When creating new fixtures:**
+
+1. **Identify scope** — Will tests mutate the data? If yes, test-scoped. If read-only, worker-scoped.
+2. **Group by domain** — Put fixtures in `fixtures/<domain>/`. Helpers in `helpers/<domain>/`.
+3. **Extend existing fixtures** — Chain from `auth` or another fixture to inherit its setup.
+4. **Handle timeouts** — Worker-scoped fixtures that wait on backend processing need explicit timeouts.
+5. **Clean up** — Always delete seeded data in the fixture teardown (after `use()`).
+6. **Extract logic into functions** — Keep the `test.extend()` block lean; move setup/teardown logic to named functions so the extend block reads as a manifest of "what fixtures exist."
+
 Each spec follows these principles:

 1. **Directory per feature**: `tests/e2e/tests/<feature>/*.spec.ts`. Cross-resource junction concerns (e.g. cascade-delete) go in their own file, not packed into one giant spec.
@@ -232,11 +267,14 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium

+# Single sub-area
+npx playwright test tests/alerts/history/ --project=chromium
+
 # Single file
-npx playwright test tests/alerts/alerts.spec.ts --project=chromium
+npx playwright test tests/alerts/page.spec.ts --project=chromium

 # Single test by title grep
-npx playwright test --project=chromium -g "TC-01"
+npx playwright test --project=chromium -g "AL-01"
 ```

 ### Iterative modes
@@ -270,7 +308,14 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |

-Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
+Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
+
+```bash
+# runs against a locally served frontend, not whatever .env.local points at
+SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
+```
+
+This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.

 ### Playwright options

--- a/ee/query-service/app/api/api.go
+++ b/ee/query-service/app/api/api.go
@@ -67,7 +67,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// note: add ee override methods first

 	// routes available only in ee version
-	router.HandleFunc("/api/v1/features", am.ViewAccess(ah.getFeatureFlags)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/features", am.OpenAccess(ah.getFeatureFlags)).Methods(http.MethodGet)

 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
--- a/frontend/jest.setup.ts
+++ b/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),
--- a/frontend/package.json
+++ b/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"
  }
-}
+}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/api/ErrorResponseHandler.ts
+++ b/frontend/src/api/ErrorResponseHandler.ts
@@ -53,7 +53,7 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 		};
 	}
 	// anything else
-	console.error('any');
+	console.error('ErrorResponseHandler: unclassified error');
 	return {
 		statusCode: 500,
 		payload: null,
--- a/frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx
+++ b/frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx
@@ -8,12 +8,14 @@ export interface AlertBreadcrumbProps {
 	items: BreadcrumbItemConfig[];
 	className?: string;
 	showDivider?: boolean;
+	testId?: string;
 }

 function AlertBreadcrumb({
 	items,
 	className,
 	showDivider = true,
+	testId,
 }: AlertBreadcrumbProps): JSX.Element {
 	const breadcrumbItems = items.map((item) => ({
 		title: <BreadcrumbItem {...item} />,
@@ -24,6 +26,7 @@ function AlertBreadcrumb({
 			<Breadcrumb
 				className={`${styles.breadcrumb} ${className || ''}`}
 				items={breadcrumbItems}
+				data-testid={testId}
 			/>
 			{showDivider && <Divider className={styles.divider} />}
 		</>
--- a/frontend/src/components/FieldsSelector/FieldsSelector.tsx
+++ b/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, f.fieldDataType),
 			})),
 		[fields],
 	);
--- a/frontend/src/components/FieldsSelector/OtherFields.tsx
+++ b/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,47 @@ 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, attr.fieldDataType),
+			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, f.fieldDataType),
+			),
 		);
-		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 (
--- a/frontend/src/components/FieldsSelector/tests/AddedFields.test.tsx
+++ b/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);
 	});
 });
--- a/frontend/src/components/FieldsSelector/tests/FieldsSelector.test.tsx
+++ b/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();
+	});
+});
--- a/frontend/src/components/FieldsSelector/tests/OtherFields.test.tsx
+++ b/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();
+	});
+});
--- a/frontend/src/components/Logs/TableView/tests/useLogsTableColumns.test.tsx
+++ b/frontend/src/components/Logs/TableView/tests/useLogsTableColumns.test.tsx
@@ -14,10 +14,10 @@ jest.mock('providers/App/App', () => ({
 	useAppContext: (): { featureFlags: [] } => ({ featureFlags: [] }),
 }));

-const field = (name: string, type = ''): IField => ({
+const field = (name: string, type = '', dataType = ''): IField => ({
 	name,
 	type,
-	dataType: 'string',
+	dataType,
 });

 describe('useLogsTableColumns — selectColumns-order respected', () => {
@@ -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,15 +127,33 @@ 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);
 	});

+	it('disambiguates same-name/same-context fields by dataType (3-part id)', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [
+					field('http.status_code', 'attribute', 'int64'),
+					field('http.status_code', 'attribute', 'string'),
+				],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'attribute:http.status_code:int64',
+			'attribute:http.status_code:string',
+		]);
+	});
+
 	it('renders only the stateIndicator when fields is empty', () => {
 		const { result } = renderHook(() =>
 			useLogsTableColumns({
--- a/frontend/src/components/Logs/TableView/useLogsTableColumns.tsx
+++ b/frontend/src/components/Logs/TableView/useLogsTableColumns.tsx
@@ -92,7 +92,7 @@ export function useLogsTableColumns({
 		};

 		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
-			id: buildCompositeKey(f.name, f.type),
+			id: buildCompositeKey(f.name, f.type, f.dataType),
 			header: f.name,
 			accessorFn: (log): unknown =>
 				getLogFieldValue(log, f.name, isBodyJsonEnabled),
--- a/frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss
+++ b/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)
+			)
+		);
 	}
 }

--- a/frontend/src/components/TanStackTableView/TanStackTable.module.scss
+++ b/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;
--- a/frontend/src/components/TanStackTableView/TanStackTable.tsx
+++ b/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) {
--- a/frontend/src/constants/localStorage.ts
+++ b/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',
--- a/frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.module.scss
+++ b/frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.module.scss
@@ -75,38 +75,6 @@
 	word-break: break-word;
 }

-// Error bubble: a subtle error-tinted callout replacing the default
-// assistant background, rendered when a turn fails.
-.bubble.error {
-	.assistant & {
-		background: var(--callout-error-background);
-		border: 1px solid var(--callout-error-border);
-	}
-}
-
-.errorContent {
-	display: flex;
-	align-items: flex-start;
-	gap: 8px;
-}
-
-.errorIcon {
-	flex-shrink: 0;
-	margin-top: 2px;
-	color: var(--destructive);
-}
-
-.errorText {
-	color: var(--callout-error-title);
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-.retryButton {
-	margin-top: 6px;
-	align-self: flex-start;
-}
-
 // User-bubble row: pencil button sits to the LEFT of the bubble within
 // the right-aligned message line, so it visually "ends" at the bubble's
 // right edge while keeping the bubble in its original position.
--- a/frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx
+++ b/frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx
@@ -2,10 +2,6 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Button } from '@signozhq/ui/button';
-import { RotateCw, TriangleAlert } from '@signozhq/icons';
-
-import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';

 // Side-effect: registers all built-in block types into the BlockRegistry
 import '../blocks';
@@ -108,23 +104,18 @@ function renderGroup(group: RenderGroup): JSX.Element {
 interface MessageBubbleProps {
 	message: Message;
 	onRegenerate?: () => void;
-	onRetry?: () => void;
 	isLastAssistant?: boolean;
 }

 export default function MessageBubble({
 	message,
 	onRegenerate,
-	onRetry,
 	isLastAssistant = false,
 }: MessageBubbleProps): JSX.Element {
 	const variant = useVariant();
 	const isCompact = variant === 'panel';
 	const isUser = message.role === 'user';
-	const isError = !isUser && Boolean(message.isError);
 	const hasBlocks = !isUser && message.blocks && message.blocks.length > 0;
-	const showRetry =
-		isError && message.retryAction === RetryActionDTO.manual && Boolean(onRetry);

 	// Recompute groups only when the blocks array identity changes — store
 	// updates that don't touch this message's blocks should not re-render the
@@ -147,7 +138,7 @@ export default function MessageBubble({
 		<div className={messageClass} data-testid={`ai-message-${message.id}`}>
 			<div className={bodyClass}>
 				<div className={styles.bubbleRow}>
-					<div className={cx(styles.bubble, { [styles.error]: isError })}>
+					<div className={styles.bubble}>
 						{message.attachments && message.attachments.length > 0 && (
 							<div className={styles.attachments}>
 								{message.attachments.map((att) => {
@@ -170,11 +161,6 @@ export default function MessageBubble({

 						{isUser ? (
 							<p className={styles.text}>{message.content}</p>
-						) : isError ? (
-							<div className={styles.errorContent}>
-								<TriangleAlert size={14} className={styles.errorIcon} />
-								<span className={styles.errorText}>{message.content}</span>
-							</div>
 						) : hasBlocks ? (
 							<MessageContext.Provider value={{ messageId: message.id }}>
 								{groups.map((g) => renderGroup(g))}
@@ -197,21 +183,7 @@ export default function MessageBubble({
 					</div>
 				</div>

-				{showRetry && (
-					<Button
-						className={styles.retryButton}
-						size="sm"
-						variant="ghost"
-						color="secondary"
-						onClick={onRetry}
-						testId={`ai-message-retry-${message.id}`}
-					>
-						<RotateCw size={12} />
-						Retry
-					</Button>
-				)}
-
-				{!isUser && !isError && !message.isRateLimitError && (
+				{!isUser && !message.isRateLimitError && (
 					<MessageFeedback
 						message={message}
 						onRegenerate={onRegenerate}
--- a/frontend/src/container/AIAssistant/components/MessageBubble/tests/MessageBubble.test.tsx
+++ b/frontend/src/container/AIAssistant/components/MessageBubble/tests/MessageBubble.test.tsx
@@ -1,85 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent } from 'tests/test-utils';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { Message } from '../../../types';
-
-// react-markdown + remark-gfm are ESM-only and pull a large untransformed
-// dependency chain into jest. The error-rendering path under test renders
-// plain text (no markdown), so stub them to keep the import graph loadable.
-jest.mock('react-markdown', () => ({
-	__esModule: true,
-	default: ({ children }: { children?: React.ReactNode }): React.ReactNode =>
-		children,
-}));
-jest.mock('remark-gfm', () => ({
-	__esModule: true,
-	default: (): void => undefined,
-}));
-
-// eslint-disable-next-line import/first
-import MessageBubble from '../MessageBubble';
-
-function errorMessage(overrides: Partial<Message> = {}): Message {
-	return {
-		id: 'err-1',
-		role: 'assistant',
-		content: 'This conversation is still finishing a previous response.',
-		isError: true,
-		errorCode: ErrorCodeDTO.thread_busy,
-		retryAction: RetryActionDTO.manual,
-		createdAt: 0,
-		...overrides,
-	};
-}
-
-const retryButton = (): HTMLElement | null =>
-	screen.queryByRole('button', { name: /retry/i });
-
-describe('MessageBubble — error rendering', () => {
-	it('shows a Retry button for a manual error and invokes onRetry on click', async () => {
-		const onRetry = jest.fn();
-		render(<MessageBubble message={errorMessage()} onRetry={onRetry} />);
-
-		// Error copy is rendered, and the feedback bar is suppressed on errors.
-		expect(
-			screen.getByText(/still finishing a previous response/i),
-		).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /copy message/i }),
-		).not.toBeInTheDocument();
-
-		const button = retryButton();
-		expect(button).toBeInTheDocument();
-		await userEvent.click(button as HTMLElement);
-		expect(onRetry).toHaveBeenCalledTimes(1);
-	});
-
-	it('hides the Retry button when retryAction is none', () => {
-		render(
-			<MessageBubble
-				message={errorMessage({ retryAction: RetryActionDTO.none })}
-				onRetry={jest.fn()}
-			/>,
-		);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-
-	it('hides the Retry button when retryAction is auto', () => {
-		render(
-			<MessageBubble
-				message={errorMessage({ retryAction: RetryActionDTO.auto })}
-				onRetry={jest.fn()}
-			/>,
-		);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-
-	it('hides the Retry button when no onRetry handler is provided', () => {
-		render(<MessageBubble message={errorMessage()} />);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-});
--- a/frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx
+++ b/frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx
@@ -37,9 +37,6 @@ export default function VirtualizedMessages({
 	const regenerateAssistantMessage = useAIAssistantStore(
 		(s) => s.regenerateAssistantMessage,
 	);
-	const retryAssistantMessage = useAIAssistantStore(
-		(s) => s.retryAssistantMessage,
-	);
 	const { threadId } = useAIAssistantAnalyticsContext(conversationId);
 	const streamingStatus = useAIAssistantStore(
 		(s) => s.streams[conversationId]?.streamingStatus ?? '',
@@ -88,14 +85,6 @@ export default function VirtualizedMessages({
 		[conversationId, isStreaming, regenerateAssistantMessage, threadId],
 	);

-	const handleRetry = useCallback((): void => {
-		if (isStreaming) {
-			return;
-		}
-		void logEvent(AIAssistantEvents.RetryClicked, { threadId });
-		void retryAssistantMessage(conversationId);
-	}, [conversationId, isStreaming, retryAssistantMessage, threadId]);
-
 	// Scroll all the way to the actual bottom — including the 64px of bottom
 	// padding on the scroller — so the last bubble has visible breathing room
 	// above the disclaimer / input bar. Virtuoso's `scrollToIndex(LAST,
@@ -217,11 +206,6 @@ export default function VirtualizedMessages({
 									? (): void => handleRegenerate(msg.id)
 									: undefined
 							}
-							onRetry={
-								msg.isError && isLastAssistant && !showStreamingSlot
-									? handleRetry
-									: undefined
-							}
 							isLastAssistant={isLastAssistant}
 						/>
 					);
--- a/frontend/src/container/AIAssistant/events.ts
+++ b/frontend/src/container/AIAssistant/events.ts
@@ -90,7 +90,6 @@ export enum AIAssistantEvents {
 	SuggestedPromptClicked = 'AI Assistant: Suggested prompt clicked',
 	CancelClicked = 'AI Assistant: Cancel clicked',
 	RegenerateClicked = 'AI Assistant: Regenerate clicked',
-	RetryClicked = 'AI Assistant: Retry clicked',
 	MessageCopied = 'AI Assistant: Message copied',
 	FeedbackSubmitted = 'AI Assistant: Feedback submitted',
 	ResourceOpened = 'AI Assistant: Resource opened',
--- a/frontend/src/container/AIAssistant/store/tests/useAIAssistantStore.test.ts
+++ b/frontend/src/container/AIAssistant/store/tests/useAIAssistantStore.test.ts
@@ -1,263 +0,0 @@
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import type { SSEEvent } from 'api/ai-assistant/chat';
-
-import { useAIAssistantStore } from '../useAIAssistantStore';
-import type { Message } from '../../types';
-
-// The store talks to the chat API only through these named exports. Mock the
-// whole module so we can drive the SSE stream + REST calls deterministically.
-jest.mock('api/ai-assistant/chat', () => ({
-	__esModule: true,
-	createThread: jest.fn(),
-	sendMessage: jest.fn(),
-	streamEvents: jest.fn(),
-	approveExecution: jest.fn(),
-	clarifyExecution: jest.fn(),
-	regenerateMessage: jest.fn(),
-	rejectExecution: jest.fn(),
-	cancelExecution: jest.fn(),
-	listThreads: jest.fn(),
-	getThreadDetail: jest.fn(),
-	updateThread: jest.fn(),
-	submitFeedback: jest.fn(),
-}));
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-const chat = jest.requireMock('api/ai-assistant/chat') as Record<
-	string,
-	jest.Mock
->;
-
-// Builds a single-use async stream from a fixed list of SSE events.
-async function* eventStream(events: SSEEvent[]): AsyncGenerator<SSEEvent> {
-	for (const event of events) {
-		yield event;
-	}
-}
-
-function errorEvent(
-	executionId: string,
-	code: ErrorCodeDTO,
-	retryAction: RetryActionDTO,
-): SSEEvent {
-	return {
-		type: 'error',
-		executionId,
-		error: { code, message: 'backend message' },
-		retryAction,
-	};
-}
-
-function lastMessage(conversationId: string): Message {
-	const conv = useAIAssistantStore.getState().conversations[conversationId];
-	return conv.messages[conv.messages.length - 1];
-}
-
-describe('useAIAssistantStore — streaming error handling', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		useAIAssistantStore.setState((s) => {
-			s.conversations = {};
-			s.streams = {};
-			s.activeConversationId = null;
-		});
-	});
-
-	it('commits a manually-retryable error bubble with friendly copy and metadata', async () => {
-		chat.createThread.mockResolvedValue('thread-1');
-		chat.sendMessage.mockResolvedValue('exec-1');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hello');
-
-		const conv = useAIAssistantStore.getState().conversations['thread-1'];
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			isError: true,
-			errorCode: ErrorCodeDTO.thread_busy,
-			retryAction: RetryActionDTO.manual,
-		});
-		// Code-specific FE copy, not the raw backend message.
-		expect(conv.messages[1].content).toContain(
-			'still finishing a previous response',
-		);
-	});
-
-	it('replays the send on retry without re-pushing the user message', async () => {
-		chat.createThread.mockResolvedValue('thread-1');
-		chat.sendMessage.mockResolvedValue('exec-1');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hello');
-
-		// The retry succeeds this time.
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				{
-					type: 'message',
-					executionId: 'exec-1',
-					messageId: 'm1',
-					delta: 'Hi there',
-					done: true,
-				},
-			]),
-		);
-
-		await useAIAssistantStore.getState().retryAssistantMessage('thread-1');
-
-		const conv = useAIAssistantStore.getState().conversations['thread-1'];
-		// Error bubble replaced by the assistant reply; the user message stays.
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			content: 'Hi there',
-		});
-		expect(conv.messages[1].isError).toBeUndefined();
-		// Thread already existed on retry; the user message was never re-sent as new.
-		expect(chat.createThread).toHaveBeenCalledTimes(1);
-		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
-	});
-
-	it('silently retries auto-flagged errors, then downgrades to manual once spent', async () => {
-		chat.createThread.mockResolvedValue('thread-2');
-		chat.sendMessage.mockResolvedValue('exec');
-		// Always auto-retryable: 1 initial attempt + MAX_AUTO_RETRIES (2) = 3 sends.
-		chat.streamEvents.mockImplementation(() =>
-			eventStream([
-				errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		expect(chat.sendMessage).toHaveBeenCalledTimes(3);
-		expect(lastMessage('thread-2')).toMatchObject({
-			isError: true,
-			errorCode: ErrorCodeDTO.internal_error,
-			// Auto budget exhausted → presented as manual so a Retry button shows.
-			retryAction: RetryActionDTO.manual,
-		});
-	}, 10000);
-
-	it('marks rate-limit errors and offers no retry', async () => {
-		chat.createThread.mockResolvedValue('thread-3');
-		chat.sendMessage.mockResolvedValue('exec');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec', ErrorCodeDTO.hourly_message_limit, RetryActionDTO.none),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		expect(lastMessage('thread-3')).toMatchObject({
-			isError: true,
-			isRateLimitError: true,
-			retryAction: RetryActionDTO.none,
-		});
-
-		// No retry thunk registered for a non-retryable error — retry is a no-op.
-		const before =
-			useAIAssistantStore.getState().conversations['thread-3'].messages.length;
-		await useAIAssistantStore.getState().retryAssistantMessage('thread-3');
-		expect(
-			useAIAssistantStore.getState().conversations['thread-3'].messages,
-		).toHaveLength(before);
-	});
-
-	it('recovers silently when an auto-flagged error succeeds on retry', async () => {
-		chat.createThread.mockResolvedValue('thread-4');
-		chat.sendMessage.mockResolvedValue('exec');
-		chat.streamEvents
-			.mockReturnValueOnce(
-				eventStream([
-					errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
-				]),
-			)
-			.mockReturnValueOnce(
-				eventStream([
-					{
-						type: 'message',
-						executionId: 'exec',
-						messageId: 'm1',
-						delta: 'Recovered',
-						done: true,
-					},
-				]),
-			);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		// 1 initial attempt + 1 silent auto retry, then success — no error bubble.
-		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
-		const conv = useAIAssistantStore.getState().conversations['thread-4'];
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hi' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			content: 'Recovered',
-		});
-		expect(conv.messages.some((m) => m.isError)).toBe(false);
-	}, 10000);
-
-	it('replays the originating action on retry for a non-send error (approve)', async () => {
-		chat.approveExecution.mockResolvedValue('exec-a');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-a', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		const convId = useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().approveAction(convId, 'approval-1');
-
-		expect(lastMessage(convId)).toMatchObject({
-			isError: true,
-			retryAction: RetryActionDTO.manual,
-		});
-		expect(chat.approveExecution).toHaveBeenCalledTimes(1);
-
-		// Retry replays the approval (not a send) and succeeds this time.
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				{
-					type: 'message',
-					executionId: 'exec-a',
-					messageId: 'm1',
-					delta: 'Approved',
-					done: true,
-				},
-			]),
-		);
-		await useAIAssistantStore.getState().retryAssistantMessage(convId);
-
-		const conv = useAIAssistantStore.getState().conversations[convId];
-		expect(conv.messages).toHaveLength(1);
-		expect(conv.messages[0]).toMatchObject({
-			role: 'assistant',
-			content: 'Approved',
-		});
-		expect(conv.messages[0].isError).toBeUndefined();
-		expect(chat.approveExecution).toHaveBeenCalledTimes(2);
-		expect(chat.sendMessage).not.toHaveBeenCalled();
-	});
-});
--- a/frontend/src/container/AIAssistant/store/useAIAssistantStore.ts
+++ b/frontend/src/container/AIAssistant/store/useAIAssistantStore.ts
@@ -8,7 +8,6 @@ import type {
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';

 import {
 	approveExecution,
@@ -36,10 +35,7 @@ import {
 	MessageBlock,
 	MessageRole,
 } from '../types';
-import {
-	resolveAssistantError,
-	type AssistantErrorResolution,
-} from '../utils/resolveAssistantError';
+import { resolveAssistantErrorMessage } from '../utils/resolveAssistantErrorMessage';

 // ---------------------------------------------------------------------------
 // Types used by module-level helpers
@@ -60,15 +56,6 @@ interface SSEStreamCtx {

 const streamControllers = new Map<string, AbortController>();

-/**
- * Per-conversation retry thunks for the most recent failed turn. Populated by
- * `finalizeStreamingError` when the error is manually retryable; consumed by
- * the `retryAssistantMessage` action when the user clicks Retry. Transient
- * (not persisted) — it shares the in-memory lifetime of the error bubble it
- * backs, so a page reload drops both together.
- */
-const retryRegistry = new Map<string, () => Promise<void>>();
-
 function abortStream(conversationId: string): void {
 	const ctrl = streamControllers.get(conversationId);
 	if (ctrl) {
@@ -210,7 +197,7 @@ function resetStreamingState(
 * Marker thrown by `runStreamingLoop` when an SSE event reports
 * `invalid_token`. Callers that own an originating action (sendMessage /
 * approve / clarify / regenerate) catch this and re-issue that action via
- * `streamWithRetry`; the retry's first REST call will 401, at which point
+ * `streamWithAuthRetry`; the retry's first REST call will 401, at which point
 * the shared axios `interceptorRejected` rotates the access token and replays.
 */
 class AuthExpiredError extends Error {
@@ -220,50 +207,27 @@ class AuthExpiredError extends Error {
 	}
 }

-/** Capped silent re-attempts for backend-flagged transient (`auto`) errors. */
-const MAX_AUTO_RETRIES = 2;
-/** Backoff before each auto re-attempt, indexed by prior auto-retry count. */
-const AUTO_RETRY_BACKOFF_MS = [500, 1500];
-
-function delay(ms: number): Promise<void> {
-	return new Promise((resolve) => {
-		setTimeout(resolve, ms);
-	});
-}
-
-/** True when the SSE error carries the backend's `retryAction: 'auto'` flag. */
-function isAutoRetryableError(err: unknown): boolean {
-	return (
-		(err as { retryAction?: unknown } | undefined)?.retryAction ===
-		RetryActionDTO.auto
-	);
-}
-
 /**
 * Runs the originating action (e.g. sendMessage POST) and streams the
- * resulting execution, with two independent retry budgets:
- *
- *   • Auth — on `AuthExpiredError` (SSE `invalid_token`), re-issues `start`
- *     once. The retry's REST call 401s, the shared axios interceptor rotates
- *     the access token + replays, and the new SSE picks up the rotated token.
- *     Backend flags `invalid_token` as `manual`, so only a fresh execution helps.
- *   • Auto — on an SSE error the backend flagged `retryAction: 'auto'`
- *     (transient), silently re-issues `start` up to `MAX_AUTO_RETRIES` times
- *     with backoff. Once exhausted the error propagates so the caller can
- *     surface a manual Retry affordance.
- *
- * Both reset the stream state before re-attempting so a dead execution's
- * partial output isn't concatenated onto the retry.
+ * resulting execution. On `AuthExpiredError`, re-issues `start` once — the
+ * retry's REST call hits 401, the shared axios interceptor rotates the
+ * access token and replays, and the new SSE picks up the rotated token from
+ * localStorage. Backend signals `retryAction: 'manual'` for `invalid_token`,
+ * so the dead execution can't be resumed — only a fresh one helps.
 */
-async function streamWithRetry(
+async function streamWithAuthRetry(
 	conversationId: string,
 	start: () => Promise<string>,
 	set: StoreSetter,
 ): Promise<void> {
-	let authRetried = false;
-	let autoRetries = 0;
-
-	for (;;) {
+	for (let attempt = 0; attempt <= 1; attempt += 1) {
+		if (attempt > 0) {
+			// Drop any partial content/events from the previous attempt so the
+			// retried execution's stream isn't concatenated with the dead one.
+			set((s) => {
+				resetStreamingState(s, conversationId);
+			});
+		}
 		// eslint-disable-next-line no-await-in-loop
 		const executionId = await start();
 		const ctrl = newStreamController(conversationId);
@@ -278,28 +242,10 @@ async function streamWithRetry(
 			return;
 		} catch (err) {
 			streamControllers.delete(conversationId);
-
-			if (err instanceof AuthExpiredError && !authRetried) {
-				authRetried = true;
-			} else if (isAutoRetryableError(err) && autoRetries < MAX_AUTO_RETRIES) {
-				// eslint-disable-next-line no-await-in-loop
-				await delay(AUTO_RETRY_BACKOFF_MS[autoRetries] ?? 1500);
-				autoRetries += 1;
-			} else {
-				if (isAutoRetryableError(err)) {
-					// Auto-retry budget spent — present the failure as manually
-					// retryable so the caller surfaces a Retry button rather than
-					// silently giving up.
-					(err as { retryAction?: RetryActionDTO }).retryAction =
-						RetryActionDTO.manual;
-				}
-				throw err;
+			if (err instanceof AuthExpiredError && attempt < 1) {
+				continue;
 			}
-
-			// Drop partial content/events from the failed attempt before retrying.
-			set((s) => {
-				resetStreamingState(s, conversationId);
-			});
+			throw err;
 		}
 	}
 }
@@ -312,7 +258,7 @@ async function streamWithRetry(
 *
 * On an `invalid_token` error event (e.g. MCP auth expired mid-execution),
 * throws `AuthExpiredError` so the caller can re-issue the originating
- * action via `streamWithRetry`. We don't refresh here ourselves — the
+ * action via `streamWithAuthRetry`. We don't refresh here ourselves — the
 * retry's REST call will 401 and the shared axios `interceptorRejected`
 * handles rotation + replay. Throws on any other `error` event — the
 * caller's catch block handles UI feedback.
@@ -538,37 +484,20 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }

-/**
- * Commits a failed turn as an error message and removes the stream entry.
- * When the failure is manually retryable and a `retry` thunk is supplied, the
- * thunk is stashed in `retryRegistry` so the bubble's Retry button can replay
- * the originating action.
- */
 function finalizeStreamingError(
 	conversationId: string,
-	resolution: AssistantErrorResolution,
+	errorContent: string,
 	set: StoreSetter,
-	retry?: () => Promise<void>,
+	isRateLimit = false,
 ): void {
-	const { message, code, retryAction, isRateLimit } = resolution;
-
-	if (retryAction === RetryActionDTO.manual && retry) {
-		retryRegistry.set(conversationId, retry);
-	} else {
-		retryRegistry.delete(conversationId);
-	}
-
 	set((s) => {
 		const conv = s.conversations[conversationId];
 		if (conv) {
 			conv.messages.push({
 				id: uuidv4(),
 				role: 'assistant',
-				content: message,
+				content: errorContent,
 				createdAt: Date.now(),
-				isError: true,
-				retryAction,
-				...(code ? { errorCode: code } : {}),
 				...(isRateLimit ? { isRateLimitError: true } : {}),
 			});
 			conv.updatedAt = Date.now();
@@ -577,40 +506,6 @@ function finalizeStreamingError(
 	});
 }

-/**
- * Shared streaming wrapper for actions that have no pre-stream setup beyond
- * resetting state (approve / clarify / regenerate). Streams the execution,
- * finalizes the message on success, and on failure resolves the error +
- * registers `retry` (the caller's own re-invocation) so the bubble can replay
- * it. `sendMessage` does not use this — it owns thread-creation/re-keying and
- * runs its own equivalent loop.
- */
-async function streamAndFinalize(
-	conversationId: string,
-	start: () => Promise<string>,
-	fallback: string,
-	logLabel: string,
-	set: StoreSetter,
-	get: StoreGetter,
-	retry: () => Promise<void>,
-): Promise<void> {
-	try {
-		await streamWithRetry(conversationId, start, set);
-		if (!hasPendingInput(conversationId, get)) {
-			finalizeStreamingMessage(conversationId, set, get);
-		}
-	} catch (err) {
-		// Abort errors are expected when the user cancels — not a failure.
-		if (err instanceof DOMException && err.name === 'AbortError') {
-			return;
-		}
-		// eslint-disable-next-line no-console
-		console.error(logLabel, err);
-		const resolution = resolveAssistantError(err, fallback);
-		finalizeStreamingError(conversationId, resolution, set, retry);
-	}
-}
-
 // ---------------------------------------------------------------------------
 // Store interface
 // ---------------------------------------------------------------------------
@@ -669,8 +564,6 @@ export interface AIAssistantStore {
 		conversationId: string,
 		messageId: string,
 	) => Promise<void>;
-	/** Replays the originating action for a manually-retryable error bubble. */
-	retryAssistantMessage: (conversationId: string) => Promise<void>;
 	submitMessageFeedback: (
 		messageId: string,
 		rating: FeedbackRating,
@@ -984,7 +877,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					// there's no "originating action" to redo — reopening the
 					// same dead executionId would just re-emit the failure.
 					// Let the error bubble; the user can send a new message,
-					// which will go through `streamWithRetry`.
+					// which will go through `streamWithAuthRetry`.
 					if (
 						detail.activeExecutionId &&
 						!streamControllers.has(threadId) &&
@@ -1167,7 +1060,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				attachments?: MessageAttachment[],
 				contexts?: MessageContext[],
 			): Promise<void> => {
-				const convId = get().activeConversationId;
+				let convId = get().activeConversationId;
 				if (!convId || !get().conversations[convId]) {
 					return;
 				}
@@ -1200,75 +1093,63 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				};

 				set((state) => {
-					const conv = state.conversations[convId];
+					const conv = state.conversations[convId!];
 					conv.messages.push(userMessage);
 					conv.updatedAt = Date.now();
 					if (!conv.title && text.trim()) {
 						conv.title = deriveTitle(text);
 					}
-					resetStreamingState(state, convId);
+					resetStreamingState(state, convId!);
 				});

-				// The full send — ensure a backend thread exists (re-keying the
-				// optimistic client UUID on first send), POST the message, and
-				// stream the reply. Defined as a closure so the error bubble's
-				// Retry button can replay it without re-pushing the user message.
-				const runSend = async (cid: string): Promise<void> => {
-					let targetConvId = cid;
-					try {
-						let { threadId } = get().conversations[targetConvId];
-						if (!threadId) {
-							threadId = await createThread();
-							// Re-key the conversation from client UUID to backend threadId
-							// so fetchThreads won't create a duplicate entry later.
-							const oldId = targetConvId;
-							const newId = threadId;
-							set((s) => {
-								const conv = s.conversations[oldId];
-								if (conv) {
-									conv.id = newId;
-									conv.threadId = newId;
-									s.conversations[newId] = conv;
-									delete s.conversations[oldId];
-									if (s.activeConversationId === oldId) {
-										s.activeConversationId = newId;
-									}
-									const stream = s.streams[oldId];
-									if (stream) {
-										s.streams[newId] = stream;
-										delete s.streams[oldId];
-									}
+				try {
+					let { threadId } = get().conversations[convId];
+					if (!threadId) {
+						threadId = await createThread();
+						// Re-key the conversation from client UUID to backend threadId
+						// so fetchThreads won't create a duplicate entry later.
+						const oldId = convId;
+						convId = threadId;
+						set((s) => {
+							const conv = s.conversations[oldId];
+							if (conv) {
+								conv.id = convId!;
+								conv.threadId = convId!;
+								s.conversations[convId!] = conv;
+								delete s.conversations[oldId];
+								if (s.activeConversationId === oldId) {
+									s.activeConversationId = convId!;
 								}
-							});
-							targetConvId = newId;
-						}
-						const tid = threadId;
-						await streamWithRetry(
-							targetConvId,
-							() => sendMessageToThread(tid, text, contexts),
-							set,
-						);
-
-						if (!hasPendingInput(targetConvId, get)) {
-							finalizeStreamingMessage(targetConvId, set, get);
-						}
-					} catch (err) {
-						// Abort errors are expected when the user cancels — not a failure.
-						if (err instanceof DOMException && err.name === 'AbortError') {
-							return;
-						}
-						console.error('[AIAssistant] sendMessage failed:', err);
-						const resolution = resolveAssistantError(
-							err,
-							'Something went wrong while fetching the response. Please try again.',
-						);
-						finalizeStreamingError(targetConvId, resolution, set, () =>
-							runSend(targetConvId),
-						);
+								const stream = s.streams[oldId];
+								if (stream) {
+									s.streams[convId!] = stream;
+									delete s.streams[oldId];
+								}
+							}
+						});
 					}
-				};
+					const tid = threadId;
+					await streamWithAuthRetry(
+						convId,
+						() => sendMessageToThread(tid, text, contexts),
+						set,
+					);

-				await runSend(convId);
+					if (!hasPendingInput(convId, get)) {
+						finalizeStreamingMessage(convId, set, get);
+					}
+				} catch (err) {
+					// Abort errors are expected when the user cancels — not a failure
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] sendMessage failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while fetching the response. Please try again.',
+					);
+					finalizeStreamingError(convId, message, set, isRateLimit);
+				}
 			},

 			approveAction: async (
@@ -1286,17 +1167,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});

-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => approveExecution(approvalId),
-						'Something went wrong while processing the approval. Please try again.',
-						'[AIAssistant] approveAction failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
+					}
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] approveAction failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing the approval. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},

 			rejectAction: async (
@@ -1356,17 +1246,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					resetStreamingState(s, conversationId);
 				});

-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => regenerateMessage(messageId),
-						'Something went wrong while regenerating the response. Please try again.',
-						'[AIAssistant] regenerateAssistantMessage failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
+					}
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while regenerating the response. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},

 			submitMessageFeedback: async (
@@ -1413,42 +1312,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});

-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => clarifyExecution(clarificationId, answers),
-						'Something went wrong while processing your answers. Please try again.',
-						'[AIAssistant] submitClarification failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
-			},
-
-			retryAssistantMessage: async (conversationId: string): Promise<void> => {
-				const retry = retryRegistry.get(conversationId);
-				if (!retry) {
-					return;
-				}
-				retryRegistry.delete(conversationId);
-
-				// Drop the trailing error bubble we're retrying from and reset the
-				// stream so the in-progress retry renders immediately. The retry
-				// thunk replays the originating action without re-pushing the
-				// user's message.
-				set((s) => {
-					const conv = s.conversations[conversationId];
-					if (conv) {
-						const last = conv.messages[conv.messages.length - 1];
-						if (last?.isError) {
-							conv.messages.pop();
-						}
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
 					}
-					resetStreamingState(s, conversationId);
-				});
-
-				await retry();
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] submitClarification failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing your answers. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},
 		})),
 		{
--- a/frontend/src/container/AIAssistant/types.ts
+++ b/frontend/src/container/AIAssistant/types.ts
@@ -15,11 +15,9 @@
 import type {
 	ApprovalEventDTO,
 	ClarificationEventDTO,
-	ErrorCodeDTO,
 	FeedbackRatingDTO,
 	MessageActionDTO,
 	MessageActionKindDTO,
-	RetryActionDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';

 /** Client-only file attachment — no API equivalent (uploads happen via data URLs). */
@@ -93,18 +91,6 @@ export interface Message {
 	 * bar (copy/vote/regenerate) is hidden — retrying would just 429 again.
 	 */
 	isRateLimitError?: boolean;
-	/**
-	 * Marks an assistant message that represents a failed turn. Drives the
-	 * error styling and replaces the feedback bar with a retry affordance.
-	 */
-	isError?: boolean;
-	/** Known backend error code for the failure, when recognised. */
-	errorCode?: ErrorCodeDTO;
-	/**
-	 * Retry semantics for a failed turn — `manual` renders an inline Retry
-	 * button on the error bubble; `none`/`auto` render no button.
-	 */
-	retryAction?: RetryActionDTO;
 	createdAt: number;
 }

--- a/frontend/src/container/AIAssistant/utils/tests/resolveAssistantError.test.ts
+++ b/frontend/src/container/AIAssistant/utils/tests/resolveAssistantError.test.ts
@@ -1,154 +0,0 @@
-import { AxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { resolveAssistantError } from '../resolveAssistantError';
-
-const FALLBACK = 'Something went wrong. Please try again.';
-
-function restError(status: number, code: string, message: string): AxiosError {
-	const err = new AxiosError('Request failed');
-	err.response = {
-		status,
-		data: { error: { code, message } },
-	} as AxiosError['response'];
-	return err;
-}
-
-describe('resolveAssistantError', () => {
-	describe('message resolution', () => {
-		it('prefers code-specific FE copy over the backend message', () => {
-			const err = restError(409, ErrorCodeDTO.thread_busy, 'raw backend phrasing');
-
-			const { message } = resolveAssistantError(err, FALLBACK);
-			expect(message).toBe(
-				'This conversation is still finishing a previous response. Give it a moment and try again.',
-			);
-		});
-
-		it('falls through to the backend message for a known code without FE copy', () => {
-			const err = restError(
-				400,
-				ErrorCodeDTO.message_not_found,
-				'No such message exists.',
-			);
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: 'No such message exists.',
-				code: ErrorCodeDTO.message_not_found,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: false,
-			});
-		});
-
-		it('falls back when the error code is not in ErrorCodeDTO', () => {
-			const err = restError(400, 'future_unknown_code', 'Backend-only message');
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: FALLBACK,
-				code: undefined,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: false,
-			});
-		});
-	});
-
-	describe('rate limiting', () => {
-		it('marks HTTP 429 responses as rate limited and non-retryable', () => {
-			const err = restError(
-				429,
-				ErrorCodeDTO.hourly_message_limit,
-				'Hourly limit reached.',
-			);
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: "You've reached the hourly message limit. Please try again later.",
-				code: ErrorCodeDTO.hourly_message_limit,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: true,
-			});
-		});
-
-		it('treats known SSE rate-limit codes as rate limited', () => {
-			const err = Object.assign(new Error('Daily token limit exceeded.'), {
-				code: ErrorCodeDTO.daily_token_limit,
-			});
-
-			const res = resolveAssistantError(err, FALLBACK);
-			expect(res.isRateLimit).toBe(true);
-			expect(res.retryAction).toBe(RetryActionDTO.none);
-		});
-
-		it('marks 429 as rate limited even when the code is unknown', () => {
-			const err = restError(429, 'future_unknown_code', 'Too many requests');
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: FALLBACK,
-				code: undefined,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: true,
-			});
-		});
-	});
-
-	describe('retryAction resolution', () => {
-		it('honours an explicit retryAction from an SSE error event', () => {
-			const err = Object.assign(new Error('Transient hiccup'), {
-				code: ErrorCodeDTO.internal_error,
-				retryAction: RetryActionDTO.auto,
-			});
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.auto,
-			);
-		});
-
-		it('forces none for non-retryable permission errors', () => {
-			const err = restError(403, ErrorCodeDTO.permission_denied, 'forbidden');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.none,
-			);
-		});
-
-		it('derives manual for 409 conflicts', () => {
-			const err = restError(409, ErrorCodeDTO.thread_has_active_execution, 'busy');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives manual for 5xx responses', () => {
-			const err = restError(503, 'future_unknown_code', 'unavailable');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives manual for network failures with no response', () => {
-			const err = new AxiosError('Network Error');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives none for other 4xx responses', () => {
-			const err = restError(400, 'future_unknown_code', 'bad request');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.none,
-			);
-		});
-
-		it('defaults to manual for non-Axios errors with no code', () => {
-			expect(resolveAssistantError(new Error('boom'), FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-	});
-});
--- a/frontend/src/container/AIAssistant/utils/tests/resolveAssistantErrorMessage.test.ts
+++ b/frontend/src/container/AIAssistant/utils/tests/resolveAssistantErrorMessage.test.ts
@@ -0,0 +1,91 @@
+import { AxiosError } from 'axios';
+import { ErrorCodeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+import { resolveAssistantErrorMessage } from '../resolveAssistantErrorMessage';
+
+const FALLBACK = 'Something went wrong. Please try again.';
+
+describe('resolveAssistantErrorMessage', () => {
+	it('returns backend message for a known error code', () => {
+		const err = new AxiosError('Request failed');
+		err.response = {
+			status: 400,
+			data: {
+				error: {
+					code: ErrorCodeDTO.thread_busy,
+					message: 'This thread is busy. Try again shortly.',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'This thread is busy. Try again shortly.',
+			isRateLimit: false,
+		});
+	});
+
+	it('falls back when error code is not in ErrorCodeDTO', () => {
+		const err = new AxiosError('Request failed');
+		err.response = {
+			status: 400,
+			data: {
+				error: {
+					code: 'future_unknown_code',
+					message: 'Backend-only message',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: FALLBACK,
+			isRateLimit: false,
+		});
+	});
+
+	it('marks HTTP 429 responses as rate limited', () => {
+		const err = new AxiosError('Too many requests');
+		err.response = {
+			status: 429,
+			data: {
+				error: {
+					code: ErrorCodeDTO.hourly_message_limit,
+					message: 'Hourly limit reached.',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'Hourly limit reached.',
+			isRateLimit: true,
+		});
+	});
+
+	it('uses backend message for known SSE rate-limit error codes', () => {
+		const err = Object.assign(new Error('Daily token limit exceeded.'), {
+			code: ErrorCodeDTO.daily_token_limit,
+		});
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'Daily token limit exceeded.',
+			isRateLimit: true,
+		});
+	});
+
+	it('marks 429 as rate limited even when error code is unknown', () => {
+		const err = new AxiosError('Too many requests');
+		err.response = {
+			status: 429,
+			data: {
+				error: {
+					code: 'future_unknown_code',
+					message: 'Too many requests',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: FALLBACK,
+			isRateLimit: true,
+		});
+	});
+});
--- a/frontend/src/container/AIAssistant/utils/resolveAssistantError.ts
+++ b/frontend/src/container/AIAssistant/utils/resolveAssistantError.ts
@@ -1,209 +0,0 @@
-import { isAxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-	type ErrorBodyDTO,
-	type ErrorResponseDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-export interface AssistantErrorResolution {
-	/** User-facing copy: code-specific FE copy → backend message → caller fallback. */
-	message: string;
-	/** Known backend error code, when one we recognise was supplied. */
-	code?: ErrorCodeDTO;
-	/**
-	 * Whether/how the failed action may be retried:
-	 *   • `auto`   — transient; the caller may silently re-attempt (capped).
-	 *   • `manual` — surface a Retry affordance to the user.
-	 *   • `none`   — retrying would re-fail deterministically; offer nothing.
-	 */
-	retryAction: RetryActionDTO;
-	/** Quota/limit error — callers hide the retry + feedback bar (retrying just re-limits). */
-	isRateLimit: boolean;
-}
-
-/** Quota/limit codes — surfaced as rate-limit errors (no retry, feedback bar hidden). */
-const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
-	ErrorCodeDTO.thread_message_limit,
-	ErrorCodeDTO.connection_limit_exceeded,
-	ErrorCodeDTO.hourly_message_limit,
-	ErrorCodeDTO.daily_message_limit,
-	ErrorCodeDTO.daily_token_limit,
-	ErrorCodeDTO.daily_cost_limit,
-	ErrorCodeDTO.budget_exceeded,
-]);
-
-/**
- * Codes whose retry would re-fail deterministically — permission/config/validation
- * failures. These force `retryAction: none` regardless of HTTP status.
- */
-const NON_RETRYABLE_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.permission_denied,
-	ErrorCodeDTO.user_disabled,
-	ErrorCodeDTO.org_disabled,
-	ErrorCodeDTO.validation_error,
-	ErrorCodeDTO.invalid_content_length,
-	ErrorCodeDTO.invalid_fork_target,
-	ErrorCodeDTO.missing_signoz_url,
-	ErrorCodeDTO.invalid_signoz_url,
-	ErrorCodeDTO.region_not_configured,
-]);
-
-/**
- * Code-specific, user-friendly copy. Takes precedence over the backend's raw
- * `error.message` so the user sees an actionable, consistent sentence rather
- * than internal phrasing. Codes absent here fall through to the backend message.
- */
-const ERROR_CODE_COPY: Partial<Record<ErrorCodeDTO, string>> = {
-	[ErrorCodeDTO.permission_denied]:
-		"You don't have permission to do that. Contact your workspace admin if you think this is a mistake.",
-	[ErrorCodeDTO.user_disabled]:
-		'Your access to the AI assistant has been disabled. Contact your workspace admin to re-enable it.',
-	[ErrorCodeDTO.org_disabled]:
-		'The AI assistant is disabled for your organisation. An admin can enable it in settings.',
-	[ErrorCodeDTO.thread_busy]:
-		'This conversation is still finishing a previous response. Give it a moment and try again.',
-	[ErrorCodeDTO.thread_has_active_execution]:
-		'This conversation is still finishing a previous response. Give it a moment and try again.',
-	[ErrorCodeDTO.hourly_message_limit]:
-		"You've reached the hourly message limit. Please try again later.",
-	[ErrorCodeDTO.daily_message_limit]:
-		"You've reached the daily message limit. Please try again tomorrow.",
-	[ErrorCodeDTO.daily_token_limit]:
-		"You've reached today's usage limit. Please try again tomorrow.",
-	[ErrorCodeDTO.daily_cost_limit]:
-		"You've reached today's usage limit. Please try again tomorrow.",
-	[ErrorCodeDTO.budget_exceeded]:
-		"You've reached your usage budget. Contact your workspace admin to raise it.",
-	[ErrorCodeDTO.thread_message_limit]:
-		'This conversation has reached its length limit. Start a new conversation to continue.',
-	[ErrorCodeDTO.connection_limit_exceeded]:
-		'Too many active conversations right now. Close one and try again.',
-	[ErrorCodeDTO.max_turns_exceeded]:
-		'The assistant reached the maximum number of steps for this request. Try rephrasing or breaking it into smaller asks.',
-	[ErrorCodeDTO.region_unreachable]:
-		"Couldn't reach your region's services. Please try again in a moment.",
-	[ErrorCodeDTO.region_not_configured]:
-		'No region is configured for the AI assistant yet. An admin can set this up in settings.',
-	[ErrorCodeDTO.mcp_unavailable]:
-		'A required service is temporarily unavailable. Please try again shortly.',
-	[ErrorCodeDTO.sandbox_unavailable]:
-		'The execution environment is temporarily unavailable. Please try again shortly.',
-	[ErrorCodeDTO.internal_error]:
-		'Something went wrong on our end. Please try again.',
-};
-
-function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
-	return (
-		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
-	);
-}
-
-function isRetryActionDTO(value: unknown): value is RetryActionDTO {
-	return (
-		typeof value === 'string' &&
-		(Object.values(RetryActionDTO) as string[]).includes(value)
-	);
-}
-
-/**
- * Pulls the structured error body out of either an Axios REST error or the
- * SSE error the streaming loop throws (a plain `Error` augmented with `code`).
- */
-function getErrorBody(err: unknown): ErrorBodyDTO | null {
-	if (isAxiosError(err)) {
-		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
-	}
-
-	const code = (err as { code?: string } | undefined)?.code;
-	const message = err instanceof Error ? err.message : undefined;
-	if (!code || !message) {
-		return null;
-	}
-
-	return { code: code as ErrorCodeDTO, message };
-}
-
-function isRateLimit(code: ErrorCodeDTO | undefined, err: unknown): boolean {
-	if (isAxiosError(err) && err.response?.status === 429) {
-		return true;
-	}
-	return code !== undefined && RATE_LIMIT_ERROR_CODES.has(code);
-}
-
-/**
- * Resolves how the failed action may be retried. The backend's explicit signal
- * (SSE `ErrorEventDTO.retryAction`) is authoritative; otherwise we derive it
- * from the rate-limit/non-retryable code sets and the HTTP status.
- */
-function resolveRetryAction(
-	err: unknown,
-	code: ErrorCodeDTO | undefined,
-	rateLimited: boolean,
-): RetryActionDTO {
-	const explicit = (err as { retryAction?: unknown } | undefined)?.retryAction;
-	if (isRetryActionDTO(explicit)) {
-		return explicit;
-	}
-
-	if (rateLimited || (code !== undefined && NON_RETRYABLE_CODES.has(code))) {
-		return RetryActionDTO.none;
-	}
-
-	if (isAxiosError(err)) {
-		const status = err.response?.status;
-		// No response → network/timeout failure; retrying may well succeed.
-		if (status === undefined || status === 408) {
-			return RetryActionDTO.manual;
-		}
-		if (status === 401 || status === 403) {
-			return RetryActionDTO.none;
-		}
-		if (status === 409 || status >= 500) {
-			return RetryActionDTO.manual;
-		}
-		// Other 4xx (validation, bad request) re-fail deterministically.
-		return RetryActionDTO.none;
-	}
-
-	// Non-Axios transport/parse error with no code — let the user retry.
-	return RetryActionDTO.manual;
-}
-
-function resolveMessage(
-	code: ErrorCodeDTO | undefined,
-	body: ErrorBodyDTO | null,
-	fallback: string,
-): string {
-	if (code !== undefined && ERROR_CODE_COPY[code]) {
-		return ERROR_CODE_COPY[code] as string;
-	}
-	// Trust the backend's message only for codes we recognise — never surface
-	// raw text for unknown codes (could be an internal stack trace).
-	if (code !== undefined && body?.message.trim()) {
-		return body.message.trim();
-	}
-	return fallback;
-}
-
-/**
- * Single resolution point for both SSE and REST assistant errors. Maps the
- * error onto user-facing copy plus retry semantics, degrading gracefully for
- * unknown codes (falls back to `fallback` + a `manual` retry where sensible).
- */
-export function resolveAssistantError(
-	err: unknown,
-	fallback: string,
-): AssistantErrorResolution {
-	const body = getErrorBody(err);
-	const code = isErrorCodeDTO(body?.code) ? body?.code : undefined;
-	const rateLimited = isRateLimit(code, err);
-
-	return {
-		message: resolveMessage(code, body, fallback),
-		code,
-		retryAction: resolveRetryAction(err, code, rateLimited),
-		isRateLimit: rateLimited,
-	};
-}
--- a/frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts
+++ b/frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts
@@ -0,0 +1,71 @@
+import { isAxiosError } from 'axios';
+import {
+	ErrorCodeDTO,
+	type ErrorBodyDTO,
+	type ErrorResponseDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+export interface AssistantErrorResolution {
+	message: string;
+	isRateLimit: boolean;
+}
+
+function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
+	return (
+		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
+	);
+}
+
+const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
+	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
+	ErrorCodeDTO.thread_message_limit,
+	ErrorCodeDTO.connection_limit_exceeded,
+	ErrorCodeDTO.hourly_message_limit,
+	ErrorCodeDTO.daily_message_limit,
+	ErrorCodeDTO.daily_token_limit,
+	ErrorCodeDTO.daily_cost_limit,
+	ErrorCodeDTO.budget_exceeded,
+]);
+
+function isRateLimitError(code: string | undefined, err: unknown): boolean {
+	if (isAxiosError(err) && err.response?.status === 429) {
+		return true;
+	}
+
+	return isErrorCodeDTO(code) && RATE_LIMIT_ERROR_CODES.has(code);
+}
+
+function getErrorBody(err: unknown): ErrorBodyDTO | null {
+	if (isAxiosError(err)) {
+		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
+	}
+
+	const code = (err as { code?: string } | undefined)?.code;
+	const message = err instanceof Error ? err.message : undefined;
+	if (!code || !message) {
+		return null;
+	}
+
+	return { code: code as ErrorCodeDTO, message };
+}
+
+/**
+ * Uses `error.message` when `error.code` is a known `ErrorCodeDTO`;
+ * otherwise returns `fallback`.
+ */
+export function resolveAssistantErrorMessage(
+	err: unknown,
+	fallback: string,
+): AssistantErrorResolution {
+	const body = getErrorBody(err);
+	const isRateLimit = isRateLimitError(body?.code, err);
+
+	if (body && isErrorCodeDTO(body.code) && body.message.trim()) {
+		return {
+			message: body.message.trim(),
+			isRateLimit,
+		};
+	}
+
+	return { message: fallback, isRateLimit: Boolean(isRateLimit) };
+}
--- a/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
+++ b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
@@ -29,6 +29,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-logs"
 				>
 					<div className="icon">
 						<LogsIcon />
@@ -40,6 +41,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-traces"
 				>
 					<div className="icon">
 						<DraftingCompass
--- a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
@@ -26,7 +26,10 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div className="change-percentage change-percentage--success">
+			<div
+				className="change-percentage change-percentage--success"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
@@ -38,7 +41,10 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div className="change-percentage change-percentage--error">
+			<div
+				className="change-percentage change-percentage--error"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
@@ -50,7 +56,10 @@ function ChangePercentage({
 	}

 	return (
-		<div className="change-percentage change-percentage--no-previous-data">
+		<div
+			className="change-percentage change-percentage--no-previous-data"
+			data-testid="stats-card-change"
+		>
 			<div className="change-percentage__label">no previous data</div>
 		</div>
 	);
@@ -103,7 +112,12 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);

 	return (
-		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
+		<div
+			className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}
+			data-testid="stats-card"
+			data-stats-title={title}
+			data-empty={isEmpty ? 'true' : 'false'}
+		>
 			<div className="stats-card__title-wrapper">
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
@@ -123,7 +137,7 @@ function StatsCard({
 			</div>

 			<div className="stats-card__stats">
-				<div className="count-label">
+				<div className="count-label" data-testid="stats-card-value">
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>

--- a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx
@@ -81,7 +81,11 @@ function StatsGraph({ timeSeries, changeDirection }: Props): JSX.Element {
 	);

 	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+		<div
+			style={{ height: '100%', width: '100%' }}
+			ref={graphRef}
+			data-testid="stats-card-sparkline"
+		>
 			<Uplot data={[xData, yData]} options={options} />
 		</div>
 	);
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx
@@ -48,11 +48,16 @@ function TopContributorsCard({

 	return (
 		<>
-			<div className="top-contributors-card">
+			<div className="top-contributors-card" data-testid="top-contributors-card">
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
+						<Button
+							type="text"
+							className="view-all"
+							onClick={toggleViewAllDrawer}
+							data-testid="top-contributors-view-all"
+						>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
@@ -68,7 +68,10 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div className="total-contribution">
+					<div
+						className="total-contribution"
+						data-testid="top-contributors-row-count"
+					>
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -78,7 +81,10 @@ function TopContributorsRows({

 	const handleRowClick = (
 		record: AlertRuleTopContributors,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'top-contributors-row',
 		onClick: (): void => {
 			logEvent('Alert history: Top contributors row: Clicked', {
 				labels: record.labels,
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx
@@ -31,7 +31,10 @@ function ViewAllDrawer({
 			}}
 			title="Viewing All Contributors"
 		>
-			<div className="top-contributors-card--view-all">
+			<div
+				className="top-contributors-card--view-all"
+				data-testid="top-contributors-drawer"
+			>
 				<div className="top-contributors-card__content">
 					<TopContributorsRows
 						topContributors={topContributorsData}
--- a/frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx
@@ -32,8 +32,8 @@ function GraphWrapper({
 	}, [data?.data]);

 	return (
-		<div className="timeline-graph">
-			<div className="timeline-graph__title">
+		<div className="timeline-graph" data-testid="timeline-graph">
+			<div className="timeline-graph__title" data-testid="timeline-graph-title">
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
 			<div className="timeline-graph__chart">
--- a/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx
@@ -118,7 +118,10 @@ function TimelineTableContent(): JSX.Element {

 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'timeline-row',
 		onClick: (): void => {
 			void logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
@@ -128,12 +131,15 @@ function TimelineTableContent(): JSX.Element {
 	});

 	return (
-		<div className="timeline-table">
+		<div className="timeline-table" data-testid="timeline-table">
 			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
 			{!isLoadingKeys && hardcodedAttributeKeys ? (
 				<div className="timeline-table__filter">
 					<div className="timeline-table__filter-row">
-						<div className="timeline-table__filter-search">
+						<div
+							className="timeline-table__filter-search"
+							data-testid="timeline-filter-search"
+						>
 							<QuerySearch
 								onChange={querySearchOnChange}
 								queryData={queryData}
@@ -155,6 +161,7 @@ function TimelineTableContent(): JSX.Element {
 					<Skeleton.Input
 						className="timeline-table__filter--loading-skeleton"
 						active
+						data-testid="timeline-filter-skeleton"
 					/>
 				</div>
 			)}
@@ -172,14 +179,17 @@ function TimelineTableContent(): JSX.Element {
 				locale={{
 					emptyText:
 						isError && apiError ? (
-							<div className="timeline-table__error">
+							<div className="timeline-table__error" data-testid="timeline-error">
 								<ErrorContent error={apiError} />
 							</div>
 						) : undefined,
 				}}
 				footer={(): JSX.Element => (
 					<div className="timeline-table__pagination">
-						<div className="timeline-table__pagination-info">
+						<div
+							className="timeline-table__pagination-info"
+							data-testid="timeline-footer-range"
+						>
 							{paginationConfig.showTotal?.(totalItems, [
 								totalItems === 0
 									? 0
--- a/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
@@ -21,18 +21,14 @@ export const timelineTableColumns = ({
 		sorter: true,
 		width: 140,
 		render: (value): JSX.Element => (
-			<div className="alert-rule-state">
-				<AlertState state={value} showLabel />
-			</div>
+			<AlertState state={value} showLabel testId="timeline-row-state" />
 		),
 	},
 	{
 		title: 'LABELS',
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
-			<div className="alert-rule-labels">
-				<AlertLabels labels={labels} />
-			</div>
+			<AlertLabels labels={labels} testId="timeline-row-labels" />
 		),
 	},
 	{
@@ -40,7 +36,10 @@ export const timelineTableColumns = ({
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div className="alert-rule__created-at">
+			<div
+				className="alert-rule__created-at"
+				data-testid="timeline-row-created-at"
+			>
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -53,7 +52,7 @@ export const timelineTableColumns = ({
 			if (!record.relatedTracesLink && !record.relatedLogsLink) {
 				return (
 					<Tooltip title="No links available for this item">
-						<Button type="text" ghost disabled>
+						<Button type="text" ghost disabled data-testid="timeline-row-actions">
 							<Ellipsis className="dropdown-icon" size="md" />
 						</Button>
 					</Tooltip>
@@ -65,7 +64,7 @@ export const timelineTableColumns = ({
 					relatedTracesLink={record.relatedTracesLink ?? ''}
 					relatedLogsLink={record.relatedLogsLink ?? ''}
 				>
-					<Button type="text" ghost>
+					<Button type="text" ghost data-testid="timeline-row-actions">
 						<Ellipsis className="dropdown-icon" size="md" />
 					</Button>
 				</ConditionalAlertPopover>
--- a/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx
@@ -23,6 +23,7 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.OVERALL_STATUS,
 			label: 'Overall Status',
+			testId: 'timeline-tab-overall-status',
 		},
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
@@ -33,6 +34,7 @@ function TimelineTabs(): JSX.Element {
 				</div>
 			),
 			disabled: true,
+			testId: 'timeline-tab-top-contributors',
 		},
 	];

@@ -57,14 +59,17 @@ function TimelineFilters(): JSX.Element {
 		{
 			value: TimelineFilter.ALL,
 			label: 'All',
+			testId: 'timeline-filter-all',
 		},
 		{
 			value: TimelineFilter.FIRED,
 			label: 'Fired',
+			testId: 'timeline-filter-fired',
 		},
 		{
 			value: TimelineFilter.RESOLVED,
 			label: 'Resolved',
+			testId: 'timeline-filter-resolved',
 		},
 	];

--- a/frontend/src/container/Controls/Controls.module.scss
+++ b/frontend/src/container/Controls/Controls.module.scss
@@ -0,0 +1,6 @@
+.container {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	--button-font-size: var(--periscope-font-size-base, 13px);
+}
--- a/frontend/src/container/Controls/index.tsx
+++ b/frontend/src/container/Controls/index.tsx
@@ -1,11 +1,12 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { Button, Flex, Select } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { popupContainer } from 'utils/selectPopupContainer';

 import { defaultSelectStyle } from './config';
-import { Container } from './styles';
+import styles from './Controls.module.scss';

 function Controls({
 	offset = 0,
@@ -34,28 +35,24 @@ function Controls({
 	);

 	return (
-		<Container>
+		<div className={styles.container}>
 			<Button
-				loading={isLoading}
-				size="small"
-				type="link"
+				variant="link"
+				size="md"
 				disabled={isPreviousDisabled}
+				prefix={<ChevronLeft size={16} />}
 				onClick={handleNavigatePrevious}
 			>
-				<Flex align="center" gap="4px">
-					<ChevronLeft size={16} /> Previous
-				</Flex>
+				Previous
 			</Button>
 			<Button
-				loading={isLoading}
-				size="small"
-				type="link"
+				variant="link"
+				size="md"
 				disabled={isNextDisabled}
+				suffix={<ChevronRight size={16} />}
 				onClick={handleNavigateNext}
 			>
-				<Flex align="center" gap="4px">
-					Next <ChevronRight size={16} />
-				</Flex>
+				Next
 			</Button>

 			{showSizeChanger && (
@@ -74,7 +71,7 @@ function Controls({
 					))}
 				</Select>
 			)}
-		</Container>
+		</div>
 	);
 }

--- a/frontend/src/container/Controls/styles.ts
+++ b/frontend/src/container/Controls/styles.ts
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-`;
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
@@ -34,6 +34,7 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit}
+									testId="send-notification-if-data-is-missing-input"
 								/>
 								<Typography.Text>Minutes</Typography.Text>
 							</div>
@@ -66,6 +67,7 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.enforceMinimumDatapoints.minimumDatapoints}
+									testId="enforce-minimum-datapoints-input"
 								/>
 								<Typography.Text>Datapoints</Typography.Text>
 							</div>
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx
@@ -66,6 +66,7 @@ function EvaluationWindowPopover({
 						tabIndex={0}
 						data-value={option.value}
 						data-section-id={sectionId}
+						data-testid={`${sectionId}-option-${option.value}`}
 						onClick={(): void => onChange(option.value)}
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter' || e.key === ' ') {
--- a/frontend/src/container/CreateAlertV2/Footer/Footer.tsx
+++ b/frontend/src/container/CreateAlertV2/Footer/Footer.tsx
@@ -186,6 +186,7 @@ function Footer(): JSX.Element {
 				color="primary"
 				onClick={handleSaveAlert}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
+				testId="save-alert-rule-button"
 			>
 				{isCreatingAlertRule || isUpdatingAlertRule ? (
 					<Loader data-testid="save-alert-rule-loader-icon" size={14} />
@@ -218,6 +219,7 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleTestNotification}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
+				testId="test-notification-button"
 			>
 				{isTestingAlertRule ? (
 					<Loader data-testid="test-notification-loader-icon" size={14} />
@@ -249,6 +251,7 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleDiscard}
 				disabled={disableButtons}
+				testId="discard-alert-rule-button"
 			>
 				<X size={14} /> Discard
 			</Button>
--- a/frontend/src/container/FormAlertRules/BasicInfo.tsx
+++ b/frontend/src/container/FormAlertRules/BasicInfo.tsx
@@ -119,6 +119,7 @@ function BasicInfo({
 					<SeveritySelect
 						getPopupContainer={popupContainer}
 						defaultValue="critical"
+						data-testid="alert-severity-select"
 						onChange={(value: unknown | string): void => {
 							const s = (value as string) || 'critical';
 							setAlertDef({
@@ -147,6 +148,7 @@ function BasicInfo({
 					]}
 				>
 					<InputSmall
+						data-testid="alert-name-input-v1"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,
@@ -161,6 +163,7 @@ function BasicInfo({
 					name={['annotations', 'description']}
 				>
 					<TextareaMedium
+						data-testid="alert-description-input"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -105,7 +105,7 @@ function QuerySection({
 		{
 			label: (
 				<Tooltip title="Query Builder">
-					<Button className="nav-btns">
+					<Button className="nav-btns" data-testid="query-builder-tab">
 						<Atom size={14} />
 						<Typography.Text>Query Builder</Typography.Text>
 					</Button>
@@ -122,7 +122,11 @@ function QuerySection({
 							: 'ClickHouse'
 					}
 				>
-					<Button className="nav-btns" disabled={isAnomalyDetection}>
+					<Button
+						className="nav-btns"
+						disabled={isAnomalyDetection}
+						data-testid="clickhouse-tab"
+					>
 						<Terminal size={14} />
 						<Typography.Text>ClickHouse Query</Typography.Text>
 					</Button>
@@ -162,7 +166,11 @@ function QuerySection({
 								: 'ClickHouse'
 						}
 					>
-						<Button className="nav-btns" disabled={isAnomalyDetection}>
+						<Button
+							className="nav-btns"
+							disabled={isAnomalyDetection}
+							data-testid="clickhouse-tab"
+						>
 							<Terminal size={14} />
 							<Typography.Text>ClickHouse Query</Typography.Text>
 						</Button>
@@ -180,7 +188,11 @@ function QuerySection({
 								: 'PromQL'
 						}
 					>
-						<Button className="nav-btns" disabled={isAnomalyDetection}>
+						<Button
+							className="nav-btns"
+							disabled={isAnomalyDetection}
+							data-testid="promql-tab"
+						>
 							<PromQLIcon
 								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
 							/>
--- a/frontend/src/container/FormAlertRules/RuleOptions.tsx
+++ b/frontend/src/container/FormAlertRules/RuleOptions.tsx
@@ -80,6 +80,7 @@ function RuleOptions({
 			defaultValue={defaultCompareOp}
 			value={alertDef.condition?.op}
 			style={{ minWidth: '120px' }}
+			data-testid="alert-threshold-op-select"
 			onChange={(value: string | unknown): void => {
 				const newOp = (value as string) || '';

@@ -116,6 +117,7 @@ function RuleOptions({
 			defaultValue={defaultMatchType}
 			style={{ minWidth: '130px' }}
 			value={alertDef.condition?.matchType}
+			data-testid="alert-threshold-match-type-select-v1"
 			onChange={(value: string | unknown): void => handleMatchOptChange(value)}
 		>
 			<Select.Option value="1">{t('option_atleastonce')}</Select.Option>
@@ -177,6 +179,7 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
+			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -194,6 +197,7 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
+			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -395,6 +399,7 @@ function RuleOptions({
 									value={alertDef?.condition?.target}
 									onChange={onChange}
 									type="number"
+									data-testid="alert-threshold-target-input"
 									onWheel={(e): void => e.currentTarget.blur()}
 								/>
 							</Form.Item>
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -844,8 +844,6 @@ function FormAlertRules({

 	return (
 		<>
-			{Element}
-
 			<div
 				id="top"
 				className={`form-alert-rules-container ${
@@ -968,6 +966,7 @@ function FormAlertRules({
 								!isChannelConfigurationValid ||
 								queryStatus === 'error'
 							}
+							data-testid="alert-save-button"
 						>
 							{isNewRule ? t('button_createrule') : t('button_savechanges')}
 						</ActionButton>
@@ -981,6 +980,7 @@ function FormAlertRules({
 							}
 							type="default"
 							onClick={onTestRuleHandler}
+							data-testid="alert-test-button"
 						>
 							{' '}
 							{t('button_testrule')}
@@ -989,6 +989,7 @@ function FormAlertRules({
 							disabled={loading || false}
 							type="default"
 							onClick={onCancelHandler}
+							data-testid="alert-cancel-button"
 						>
 							{isNewRule && t('button_cancelchanges')}
 							{ruleId && !isEmpty(ruleId) && t('button_discard')}
@@ -998,6 +999,7 @@ function FormAlertRules({
 			</div>

 			<ConfirmDialog
+				testId="alert-save-confirm-dialog"
 				open={isConfirmSaveOpen}
 				onOpenChange={setIsConfirmSaveOpen}
 				title={t('confirm_save_title')}
--- a/frontend/src/container/FormAlertRules/labels/index.tsx
+++ b/frontend/src/container/FormAlertRules/labels/index.tsx
@@ -174,6 +174,7 @@ function LabelSelect({

 			<div style={{ display: 'flex', width: '100%' }}>
 				<Input
+					data-testid="alert-labels-input-v1"
 					placeholder={renderPlaceholder()}
 					onChange={handleLabelChange}
 					onKeyUp={(e): void => {
--- a/frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss
+++ b/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 {
--- a/frontend/src/container/LLMObservability/LLMObservability.module.scss
+++ b/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);
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss
+++ b/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 {
--- a/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx
+++ b/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>
--- a/frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx
+++ b/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>
--- a/frontend/src/container/MCPServerSettings/ClientTabs/ClientTabs.styles.scss
+++ b/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 {
--- a/frontend/src/container/OptionsMenu/test/useOptionsMenu.test.ts
+++ b/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:string',
+				'log:body:string',
+				'resource:service.name:string',
+				'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:string',
+				'resource:service.name:string',
+				'attribute:service.name:string',
 			]);

 			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:string');

 			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)', () => {
--- a/frontend/src/container/OptionsMenu/constants.ts
+++ b/frontend/src/container/OptionsMenu/constants.ts
@@ -56,7 +56,7 @@ export function dedupeColumnsByCompositeKey(
 	const seen = new Set<string>();
 	let hasDuplicate = false;
 	const deduped = columns.filter((c) => {
-		const key = buildCompositeKey(c.name, c.fieldContext);
+		const key = buildCompositeKey(c.name, c.fieldContext, c.fieldDataType);
 		if (seen.has(key)) {
 			hasDuplicate = true;
 			return false;
--- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts
+++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
@@ -281,7 +281,8 @@ const useOptionsMenu = ({
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
+				(f) =>
+					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType) !== columnKey,
 			);

 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -364,7 +365,10 @@ const useOptionsMenu = ({
 		(orderedIds: string[]): void => {
 			const current = preferences?.columns ?? [];
 			const byCompositeKey = new Map(
-				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
+				current.map((f) => [
+					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
+					f,
+				]),
 			);
 			const reordered = orderedIds
 				.map((id) => byCompositeKey.get(id))
--- a/frontend/src/container/OptionsMenu/utils.ts
+++ b/frontend/src/container/OptionsMenu/utils.ts
@@ -15,8 +15,11 @@ export const getOptionsFromKeys = (
 	);
 };

-// Composite identity for a column. Disambiguates same-name fields across
-// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
-// Falls back to bare name when context is missing.
-export const buildCompositeKey = (name: string, context?: string): string =>
-	context ? `${context}.${name}` : name;
+export const buildCompositeKey = (
+	name: string,
+	context?: string,
+	dataType?: string,
+): string => {
+	const withContext = context ? `${context}:${name}` : name;
+	return dataType ? `${withContext}:${dataType}` : withContext;
+};
--- a/frontend/src/container/PanelWrapper/tests/snapshots/ValuePanelWrapper.test.tsx.snap
+++ b/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"
--- a/frontend/src/container/PipelinePage/tests/snapshots/DragAction.test.tsx.snap
+++ b/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>
--- a/frontend/src/container/PipelinePage/tests/snapshots/PipelinePageLayout.test.tsx.snap
+++ b/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"
              >
--- a/frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.module.scss
+++ b/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;
--- a/frontend/src/container/TracesExplorer/ListView/ListView.module.scss
+++ b/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;
+}
--- a/frontend/src/container/TracesExplorer/ListView/configs.tsx
+++ b/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;
--- a/frontend/src/container/TracesExplorer/ListView/index.data.test.tsx
+++ b/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);
+	});
+});
--- a/frontend/src/container/TracesExplorer/ListView/index.tsx
+++ b/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>
 	);
 }

--- a/frontend/src/container/TracesExplorer/ListView/utils.tsx
+++ b/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[];
+};
--- a/frontend/src/container/TracesExplorer/TracesTable/FieldCell.tsx
+++ b/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;
--- a/frontend/src/container/TracesExplorer/TracesTable/TracesTable.module.scss
+++ b/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);
+}
--- a/frontend/src/container/TracesExplorer/TracesTable/TracesTable.tsx
+++ b/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;
--- a/frontend/src/container/TracesExplorer/TracesTable/constants.ts
+++ b/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']);
--- a/frontend/src/container/TracesExplorer/TracesTable/getFieldColumn.tsx
+++ b/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, fieldDataType } = field;
+	const isTimestamp = TIMESTAMP_FIELD_NAMES.has(name);
+
+	return {
+		id: buildCompositeKey(name, fieldContext, fieldDataType),
+		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} />,
+	};
+}
--- a/frontend/src/container/TracesExplorer/TracesTable/utils.ts
+++ b/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);
+}
--- a/frontend/src/container/TracesExplorer/TracesView/TracesView.module.scss
+++ b/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;
+}
--- a/frontend/src/container/TracesExplorer/TracesView/configs.tsx
+++ b/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,
+	}),
+);
--- a/frontend/src/container/TracesExplorer/TracesView/index.test.tsx
+++ b/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();
+	});
+});
--- a/frontend/src/container/TracesExplorer/TracesView/index.tsx
+++ b/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>
 	);
 }

--- a/frontend/src/container/TracesExplorer/TracesView/styles.ts
+++ b/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;
-`;
--- a/frontend/src/container/TriggeredAlerts/TriggeredAlerts.module.scss
+++ b/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;
--- a/frontend/src/pages/AlertDetails/AlertDetails.tsx
+++ b/frontend/src/pages/AlertDetails/AlertDetails.tsx
@@ -94,6 +94,8 @@ function AlertDetails(): JSX.Element {
 		>
 			<div
 				className={classNames('alert-details', { 'alert-details-v2': isV2Alert })}
+				data-testid="alert-details-root"
+				data-schema-version={isV2Alert ? NEW_ALERT_SCHEMA_VERSION : 'v1'}
 			>
 				<AlertBreadcrumb
 					className="alert-details__breadcrumb"
--- a/frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx
+++ b/frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx
@@ -117,7 +117,11 @@ function AlertActionButtons({
 			<div className="alert-action-buttons">
 				<Tooltip title={isAlertRuleDisabled ? 'Enable alert' : 'Disable alert'}>
 					{isAlertRuleDisabled !== undefined && (
-						<Switch onChange={toggleAlertRule} value={!isAlertRuleDisabled} />
+						<Switch
+							onChange={toggleAlertRule}
+							value={!isAlertRuleDisabled}
+							testId="alert-actions-toggle"
+						/>
 					)}
 				</Tooltip>
 				<CopyToClipboard textToCopy={window.location.href} />
@@ -129,6 +133,7 @@ function AlertActionButtons({
 						<Tooltip title="More options">
 							<Button
 								type="text"
+								data-testid="alert-actions-menu"
 								icon={
 									<Ellipsis
 										size={16}
--- a/frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx
+++ b/frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx
@@ -47,21 +47,26 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 		<div className="alert-info__info-wrapper">
 			<div className="top-section">
 				<div className="alert-title-wrapper">
-					<AlertState state={alertRuleState ?? state ?? ''} />
-					<div className="alert-title">
+					<AlertState
+						state={alertRuleState ?? state ?? ''}
+						testId="alert-header-state"
+					/>
+					<div className="alert-title" data-testid="alert-header-title">
 						<LineClampedText text={displayName || ''} />
 					</div>
 				</div>
 			</div>
 			<div className="bottom-section">
-				{labels?.severity && <AlertSeverity severity={labels.severity} />}
+				{labels?.severity && (
+					<AlertSeverity severity={labels.severity} testId="alert-header-severity" />
+				)}

 				{/* // TODO(shaheer): Get actual data when we are able to get alert firing from state from API */}
 				{/* <AlertStatus
 						status="firing"
 						timestamp={dayjs().subtract(1, 'd').valueOf()}
 					/> */}
-				<AlertLabels labels={labelsWithoutSeverity} />
+				<AlertLabels labels={labelsWithoutSeverity} testId="alert-header-labels" />
 			</div>
 		</div>
 	);
--- a/frontend/src/pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels.tsx
+++ b/frontend/src/pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels.tsx
@@ -6,14 +6,16 @@ import './AlertLabels.styles.scss';
 export type AlertLabelsProps = {
 	labels: Record<string, any>;
 	initialCount?: number;
+	testId?: string;
 };

 function AlertLabels({
 	labels,
 	initialCount = 2,
+	testId,
 }: AlertLabelsProps): JSX.Element {
 	return (
-		<div className="alert-labels">
+		<div className="alert-labels" data-testid={testId}>
 			<SeeMore initialCount={initialCount} moreLabel="More">
 				{Object.entries(labels).map(([key, value]) => (
 					<KeyValueLabel key={`label-${key}`} badgeKey={key} badgeValue={value} />
@@ -25,6 +27,7 @@ function AlertLabels({

 AlertLabels.defaultProps = {
 	initialCount: 2,
+	testId: undefined,
 };

 export default AlertLabels;
--- a/frontend/src/pages/AlertDetails/AlertHeader/AlertSeverity/AlertSeverity.tsx
+++ b/frontend/src/pages/AlertDetails/AlertHeader/AlertSeverity/AlertSeverity.tsx
@@ -32,8 +32,10 @@ const severityConfig: Record<string, Record<string, string | JSX.Element>> = {

 export default function AlertSeverity({
 	severity,
+	testId,
 }: {
 	severity: string;
+	testId?: string;
 }): JSX.Element {
 	const severityDetails = useMemo(() => {
 		if (severityConfig[severity]) {
@@ -52,9 +54,16 @@ export default function AlertSeverity({
 		};
 	}, [severity]);
 	return (
-		<div className={`alert-severity ${severityDetails.className}`}>
+		<div
+			className={`alert-severity ${severityDetails.className}`}
+			data-testid={testId}
+		>
 			<div className="alert-severity__icon">{severityDetails.icon}</div>
 			<div className="alert-severity__text">{severityDetails.text}</div>
 		</div>
 	);
 }
+
+AlertSeverity.defaultProps = {
+	testId: undefined,
+};
--- a/frontend/src/pages/AlertDetails/AlertHeader/AlertState/AlertState.tsx
+++ b/frontend/src/pages/AlertDetails/AlertHeader/AlertState/AlertState.tsx
@@ -8,11 +8,13 @@ import './AlertState.styles.scss';
 type AlertStateProps = {
 	state: RuletypesAlertStateDTO | string;
 	showLabel?: boolean;
+	testId?: string;
 };

 export default function AlertState({
 	state,
 	showLabel,
+	testId,
 }: AlertStateProps): JSX.Element {
 	let icon;
 	let label;
@@ -64,7 +66,7 @@ export default function AlertState({
 	}

 	return (
-		<div className="alert-state">
+		<div className="alert-state" data-testid={testId}>
 			{icon} {showLabel && <div className="alert-state__label">{label}</div>}
 		</div>
 	);
@@ -72,4 +74,5 @@ export default function AlertState({

 AlertState.defaultProps = {
 	showLabel: false,
+	testId: undefined,
 };
--- a/frontend/src/pages/AlertDetails/hooks.tsx
+++ b/frontend/src/pages/AlertDetails/hooks.tsx
@@ -127,7 +127,7 @@ export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
 		{
 			Component: EditRules,
 			name: (
-				<div className="tab-item">
+				<div className="tab-item" data-testid="alert-details-tab-overview">
 					<Table size={14} />
 					Overview
 				</div>
@@ -138,7 +138,7 @@ export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
 		{
 			Component: AlertHistory,
 			name: (
-				<div className="tab-item">
+				<div className="tab-item" data-testid="alert-details-tab-history">
 					<History size={14} />
 					History
 					<BetaTag />
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss
+++ b/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
--- a/frontend/src/periscope/components/Tabs2/Tabs2.tsx
+++ b/frontend/src/periscope/components/Tabs2/Tabs2.tsx
@@ -13,6 +13,8 @@ interface Tab {
 	disabled?: boolean;
 	icon?: string | JSX.Element;
 	isBeta?: boolean;
+	/** Optional `data-testid` for the tab button. */
+	testId?: string;
 }

 interface TimelineTabsProps {
@@ -63,6 +65,7 @@ function Tabs2({
 						disabled={tab.disabled}
 						icon={tab.icon}
 						style={{ minWidth: buttonMinWidth }}
+						data-testid={tab.testId}
 					>
 						{tab.label}

--- a/pkg/apiserver/signozapiserver/flagger.go
+++ b/pkg/apiserver/signozapiserver/flagger.go
@@ -4,13 +4,12 @@ import (
 	"net/http"

 	"github.com/SigNoz/signoz/pkg/http/handler"
-	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/gorilla/mux"
 )

 func (provider *provider) addFlaggerRoutes(router *mux.Router) error {
-	if err := router.Handle("/api/v2/features", handler.New(provider.authzMiddleware.ViewAccess(provider.flaggerHandler.GetFeatures), handler.OpenAPIDef{
+	if err := router.Handle("/api/v2/features", handler.New(provider.authzMiddleware.OpenAccess(provider.flaggerHandler.GetFeatures), handler.OpenAPIDef{
 		ID:                  "GetFeatures",
 		Tags:                []string{"features"},
 		Summary:             "Get features",
@@ -22,7 +21,7 @@ func (provider *provider) addFlaggerRoutes(router *mux.Router) error {
 		SuccessStatusCode:   http.StatusOK,
 		ErrorStatusCodes:    []int{},
 		Deprecated:          false,
-		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		SecuritySchemes:     newScopedSecuritySchemes(nil),
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
--- a/pkg/query-service/app/http_handler.go
+++ b/pkg/query-service/app/http_handler.go
@@ -439,7 +439,7 @@ func (aH *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v2/traces/fields", am.EditAccess(aH.updateTraceField)).Methods(http.MethodPost)

 	router.HandleFunc("/api/v1/version", am.OpenAccess(aH.getVersion)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v1/features", am.ViewAccess(aH.getFeatureFlags)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/features", am.OpenAccess(aH.getFeatureFlags)).Methods(http.MethodGet)
 	router.HandleFunc("/api/v1/health", am.OpenAccess(aH.getHealth)).Methods(http.MethodGet)

 	router.HandleFunc("/api/v1/listErrors", am.ViewAccess(aH.listErrors)).Methods(http.MethodPost)
@@ -1497,7 +1497,7 @@ func (aH *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {

 	claims, err := authtypes.ClaimsFromContext(r.Context())
 	if err != nil {
-		aH.HandleError(w, err, http.StatusInternalServerError)
+		aH.HandleError(w, err, http.StatusUnauthorized)
 		return
 	}

--- a/tests/e2e/fixtures/alerts/alert-history.ts
+++ b/tests/e2e/fixtures/alerts/alert-history.ts
@@ -0,0 +1,459 @@
+import type { Browser } from '@playwright/test';
+
+import {
+	createEmailChannelViaApi,
+	createLogsAlertViaApi,
+	createMetricAlertViaApi,
+	createNoDataAlertViaApi,
+	createTracesAlertViaApi,
+	deleteAlertViaApi,
+	deleteChannelViaApi,
+	setRuleDisabledViaApi,
+} from '../../helpers/alerts/api';
+import {
+	readTimelineTotal,
+	waitForTimelineEntries,
+	waitForTimelineStates,
+} from '../../helpers/alerts/history';
+import {
+	seedAlertHistoryLogs,
+	seedAlertHistoryMetrics,
+	seedAlertHistoryTraces,
+} from '../../helpers/alerts/seeding';
+import { expect, test as base, withAdminPage } from './alert-rules';
+import {
+	FIXTURE_ALERT_HISTORY_TIMEOUT,
+	FIXTURE_EMPTY_HISTORY_TIMEOUT,
+	FIXTURE_METRICS_HISTORY_TIMEOUT,
+	FIXTURE_NODATA_HISTORY_TIMEOUT,
+	FIXTURE_RESOLVED_HISTORY_TIMEOUT,
+	FIXTURE_TRACES_HISTORY_TIMEOUT,
+	WAIT_METRICS_TIMELINE_TIMEOUT,
+	WAIT_NODATA_TIMELINE_TIMEOUT,
+} from './timeouts';
+
+// Worker-scoped alert-history fixtures. Extends `alert-rules`, so a spec that
+// imports `test` from here also gets `alertChannel` / `alertList` / `ownedRules`
+// — the details specs need a history seed *and* their own throwaway rules.
+//
+// Every history row has to come from the ruler actually evaluating a rule (there
+// is no seeder endpoint for `rule_state_history_v0`), so each fixture pays a
+// real ruler wait: ~20-35s for logs, ~10s for metrics, ~105s for firing→resolved.
+// Worker scope means one wait per worker instead of one per test, and Playwright
+// creates each fixture lazily — a spec that never asks for `resolvedHistory`
+// never pays its 105s.
+
+/** Service count for `alertHistory`. 25 yields multi-page timeline + pagination tests. */
+const LOGS_HISTORY_SERVICES = 25;
+
+/** Service count for `resolvedHistory`. 3 services + 1m window = resolves in ~105s. */
+const RESOLVED_HISTORY_SERVICES = 3;
+
+/** Hosts for `metricsHistory`. 2 rows fit one page, no related-logs links. */
+const METRICS_HISTORY_HOSTS = ['host-0', 'host-1'];
+
+/** Service count for `tracesHistory`. 3 keeps wait short while proving traces link. */
+const TRACES_HISTORY_SERVICES = 3;
+
+/** Team label for the v1 rule in `alertHistory`, so its header labels row is non-empty. */
+export const V1_RULE_TEAM_LABEL = 'e2e-platform';
+
+export interface AlertHistorySeed {
+	/** v2 (`schemaVersion: v2alpha1`) rule — the default history subject. */
+	ruleId: string;
+	/** Legacy v1 rule over the same logs. Its `threshold.name` is `warning`. */
+	ruleIdV1: string;
+	channelName: string;
+	/** The `body CONTAINS` marker both rules match. */
+	marker: string;
+	/** The seeded `service.name` values, in creation order. */
+	services: string[];
+	/** Baseline `total` for {@link ruleId}, read after the rule was frozen. */
+	total: number;
+	/** Baseline `total` for {@link ruleIdV1}. */
+	totalV1: number;
+}
+
+export interface MetricsHistorySeed {
+	ruleId: string;
+	channelName: string;
+	metricName: string;
+	hosts: string[];
+	total: number;
+}
+
+export interface TracesHistorySeed {
+	ruleId: string;
+	channelName: string;
+	/** The span `name` the rule matches (`name = '<marker>'`). */
+	marker: string;
+	services: string[];
+	total: number;
+}
+
+export interface ResolvedHistorySeed {
+	ruleId: string;
+	channelName: string;
+	marker: string;
+	services: string[];
+	/** Rows in the `firing` state — equals `stats.totalCurrentTriggers`. */
+	firingCount: number;
+	/** Rows in the `inactive` state, i.e. what the `Resolved` filter shows. */
+	resolvedCount: number;
+}
+
+export interface NoDataHistorySeed {
+	ruleId: string;
+	channelName: string;
+}
+
+export interface EmptyHistorySeed {
+	ruleId: string;
+	channelName: string;
+}
+
+async function cleanup(
+	browser: Browser,
+	{ ruleIds, channelId }: { ruleIds: string[]; channelId?: string },
+): Promise<void> {
+	await withAdminPage(browser, async (page) => {
+		for (const id of ruleIds) {
+			// eslint-disable-next-line no-await-in-loop
+			await deleteAlertViaApi(page, id);
+		}
+		if (channelId) {
+			await deleteChannelViaApi(page, channelId);
+		}
+	});
+}
+
+// --- Fixture setup functions ---
+
+interface HistoryFixtureResult<T> {
+	seed: T;
+	ruleIds: string[];
+	channelId: string;
+}
+
+async function createAlertHistorySeed(
+	browser: Browser,
+): Promise<HistoryFixtureResult<AlertHistorySeed>> {
+	const stamp = Date.now();
+	const marker = `e2e alert history ${stamp}`;
+
+	const result = await withAdminPage(browser, async (page) => {
+		const channel = await createEmailChannelViaApi(page, `e2e-ah-ch-${stamp}`);
+
+		const services = await seedAlertHistoryLogs(page, {
+			marker,
+			services: LOGS_HISTORY_SERVICES,
+			servicePrefix: `e2e-ah-svc`,
+		});
+
+		const ruleId = await createLogsAlertViaApi(page, {
+			name: `e2e-ah-rule-v2-${stamp}`,
+			marker,
+			channels: [channel.name],
+			schema: 'v2',
+		});
+		const ruleIdV1 = await createLogsAlertViaApi(page, {
+			name: `e2e-ah-rule-v1-${stamp}`,
+			marker,
+			channels: [channel.name],
+			schema: 'v1',
+			extraLabels: { team: V1_RULE_TEAM_LABEL },
+		});
+
+		await waitForTimelineEntries(page, ruleId, { min: LOGS_HISTORY_SERVICES });
+		await waitForTimelineEntries(page, ruleIdV1, { min: LOGS_HISTORY_SERVICES });
+
+		await setRuleDisabledViaApi(page, ruleId, true);
+		await setRuleDisabledViaApi(page, ruleIdV1, true);
+
+		return {
+			seed: {
+				ruleId,
+				ruleIdV1,
+				channelName: channel.name,
+				marker,
+				services,
+				total: await readTimelineTotal(page, ruleId),
+				totalV1: await readTimelineTotal(page, ruleIdV1),
+			},
+			ruleIds: [ruleId, ruleIdV1],
+			channelId: channel.id,
+		};
+	});
+
+	if (result.seed.total !== LOGS_HISTORY_SERVICES) {
+		throw new Error(
+			`alertHistory expected ${LOGS_HISTORY_SERVICES} timeline rows, got ${result.seed.total}`,
+		);
+	}
+
+	return result;
+}
+
+async function createMetricsHistorySeed(
+	browser: Browser,
+): Promise<HistoryFixtureResult<MetricsHistorySeed>> {
+	const stamp = Date.now();
+	const metricName = `e2e_ah_probe_metric_${stamp}`;
+
+	return withAdminPage(browser, async (page) => {
+		const channel = await createEmailChannelViaApi(
+			page,
+			`e2e-ah-metrics-ch-${stamp}`,
+		);
+
+		await seedAlertHistoryMetrics(page, {
+			metricName,
+			hosts: METRICS_HISTORY_HOSTS,
+		});
+
+		const ruleId = await createMetricAlertViaApi(page, {
+			name: `e2e-ah-metrics-rule-${stamp}`,
+			metricName,
+			channels: [channel.name],
+		});
+
+		await waitForTimelineEntries(page, ruleId, {
+			min: METRICS_HISTORY_HOSTS.length,
+			timeoutMs: WAIT_METRICS_TIMELINE_TIMEOUT,
+		});
+		await setRuleDisabledViaApi(page, ruleId, true);
+
+		return {
+			seed: {
+				ruleId,
+				channelName: channel.name,
+				metricName,
+				hosts: METRICS_HISTORY_HOSTS,
+				total: await readTimelineTotal(page, ruleId),
+			},
+			ruleIds: [ruleId],
+			channelId: channel.id,
+		};
+	});
+}
+
+async function createTracesHistorySeed(
+	browser: Browser,
+): Promise<HistoryFixtureResult<TracesHistorySeed>> {
+	const stamp = Date.now();
+	const marker = `e2e-aht-span-${stamp}`;
+
+	return withAdminPage(browser, async (page) => {
+		const channel = await createEmailChannelViaApi(
+			page,
+			`e2e-ah-traces-ch-${stamp}`,
+		);
+
+		const services = await seedAlertHistoryTraces(page, {
+			marker,
+			services: TRACES_HISTORY_SERVICES,
+			servicePrefix: 'e2e-aht-svc',
+		});
+
+		const ruleId = await createTracesAlertViaApi(page, {
+			name: `e2e-ah-traces-rule-${stamp}`,
+			marker,
+			channels: [channel.name],
+		});
+
+		await waitForTimelineEntries(page, ruleId, { min: TRACES_HISTORY_SERVICES });
+		await setRuleDisabledViaApi(page, ruleId, true);
+
+		return {
+			seed: {
+				ruleId,
+				channelName: channel.name,
+				marker,
+				services,
+				total: await readTimelineTotal(page, ruleId),
+			},
+			ruleIds: [ruleId],
+			channelId: channel.id,
+		};
+	});
+}
+
+async function createResolvedHistorySeed(
+	browser: Browser,
+): Promise<HistoryFixtureResult<ResolvedHistorySeed>> {
+	const stamp = Date.now();
+	const marker = `e2e alert resolved ${stamp}`;
+
+	return withAdminPage(browser, async (page) => {
+		const channel = await createEmailChannelViaApi(
+			page,
+			`e2e-ah-resolved-ch-${stamp}`,
+		);
+
+		const services = await seedAlertHistoryLogs(page, {
+			marker,
+			services: RESOLVED_HISTORY_SERVICES,
+			ageSeconds: 40,
+			minAgeSeconds: 28,
+			servicePrefix: 'e2e-ahr-svc',
+		});
+
+		const ruleId = await createLogsAlertViaApi(page, {
+			name: `e2e-ah-resolved-rule-${stamp}`,
+			marker,
+			channels: [channel.name],
+			evalWindow: '1m0s',
+		});
+
+		const timeline = await waitForTimelineStates(page, ruleId, {
+			states: {
+				firing: RESOLVED_HISTORY_SERVICES,
+				inactive: RESOLVED_HISTORY_SERVICES,
+			},
+		});
+		await setRuleDisabledViaApi(page, ruleId, true);
+
+		return {
+			seed: {
+				ruleId,
+				channelName: channel.name,
+				marker,
+				services,
+				firingCount: timeline.items.filter((i) => i.state === 'firing').length,
+				resolvedCount: timeline.items.filter((i) => i.state === 'inactive').length,
+			},
+			ruleIds: [ruleId],
+			channelId: channel.id,
+		};
+	});
+}
+
+async function createNoDataHistorySeed(
+	browser: Browser,
+): Promise<HistoryFixtureResult<NoDataHistorySeed>> {
+	const stamp = Date.now();
+
+	return withAdminPage(browser, async (page) => {
+		const channel = await createEmailChannelViaApi(
+			page,
+			`e2e-ah-nodata-ch-${stamp}`,
+		);
+
+		const ruleId = await createNoDataAlertViaApi(page, {
+			name: `e2e-ah-nodata-rule-${stamp}`,
+			marker: `e2e alert nodata ${stamp}`,
+			channels: [channel.name],
+		});
+
+		await waitForTimelineEntries(page, ruleId, {
+			min: 1,
+			state: 'nodata',
+			timeoutMs: WAIT_NODATA_TIMELINE_TIMEOUT,
+		});
+		await setRuleDisabledViaApi(page, ruleId, true);
+
+		return {
+			seed: { ruleId, channelName: channel.name },
+			ruleIds: [ruleId],
+			channelId: channel.id,
+		};
+	});
+}
+
+async function createEmptyHistorySeed(
+	browser: Browser,
+): Promise<HistoryFixtureResult<EmptyHistorySeed>> {
+	const stamp = Date.now();
+
+	return withAdminPage(browser, async (page) => {
+		const channel = await createEmailChannelViaApi(
+			page,
+			`e2e-ah-empty-ch-${stamp}`,
+		);
+
+		const ruleId = await createLogsAlertViaApi(page, {
+			name: `e2e-ah-empty-rule-${stamp}`,
+			marker: `e2e alert never seeded ${stamp}`,
+			channels: [channel.name],
+		});
+		await setRuleDisabledViaApi(page, ruleId, true);
+
+		return {
+			seed: { ruleId, channelName: channel.name },
+			ruleIds: [ruleId],
+			channelId: channel.id,
+		};
+	});
+}
+
+// --- Fixture definitions ---
+
+export const test = base.extend<
+	// eslint-disable-next-line @typescript-eslint/ban-types
+	{},
+	{
+		alertHistory: AlertHistorySeed;
+		metricsHistory: MetricsHistorySeed;
+		tracesHistory: TracesHistorySeed;
+		resolvedHistory: ResolvedHistorySeed;
+		noDataHistory: NoDataHistorySeed;
+		emptyHistory: EmptyHistorySeed;
+	}
+>({
+	alertHistory: [
+		async ({ browser }, use) => {
+			const { seed, ruleIds, channelId } = await createAlertHistorySeed(browser);
+			await use(seed);
+			await cleanup(browser, { ruleIds, channelId });
+		},
+		{ scope: 'worker', timeout: FIXTURE_ALERT_HISTORY_TIMEOUT },
+	],
+
+	metricsHistory: [
+		async ({ browser }, use) => {
+			const { seed, ruleIds, channelId } = await createMetricsHistorySeed(browser);
+			await use(seed);
+			await cleanup(browser, { ruleIds, channelId });
+		},
+		{ scope: 'worker', timeout: FIXTURE_METRICS_HISTORY_TIMEOUT },
+	],
+
+	tracesHistory: [
+		async ({ browser }, use) => {
+			const { seed, ruleIds, channelId } = await createTracesHistorySeed(browser);
+			await use(seed);
+			await cleanup(browser, { ruleIds, channelId });
+		},
+		{ scope: 'worker', timeout: FIXTURE_TRACES_HISTORY_TIMEOUT },
+	],
+
+	resolvedHistory: [
+		async ({ browser }, use) => {
+			const { seed, ruleIds, channelId } =
+				await createResolvedHistorySeed(browser);
+			await use(seed);
+			await cleanup(browser, { ruleIds, channelId });
+		},
+		{ scope: 'worker', timeout: FIXTURE_RESOLVED_HISTORY_TIMEOUT },
+	],
+
+	noDataHistory: [
+		async ({ browser }, use) => {
+			const { seed, ruleIds, channelId } = await createNoDataHistorySeed(browser);
+			await use(seed);
+			await cleanup(browser, { ruleIds, channelId });
+		},
+		{ scope: 'worker', timeout: FIXTURE_NODATA_HISTORY_TIMEOUT },
+	],
+
+	emptyHistory: [
+		async ({ browser }, use) => {
+			const { seed, ruleIds, channelId } = await createEmptyHistorySeed(browser);
+			await use(seed);
+			await cleanup(browser, { ruleIds, channelId });
+		},
+		{ scope: 'worker', timeout: FIXTURE_EMPTY_HISTORY_TIMEOUT },
+	],
+});
+
+export { expect };
--- a/tests/e2e/fixtures/alerts/alert-rules.ts
+++ b/tests/e2e/fixtures/alerts/alert-rules.ts
@@ -0,0 +1,245 @@
+import type { Browser, Page } from '@playwright/test';
+
+import {
+	createEmailChannelViaApi,
+	createLogsAlertViaApi,
+	createThresholdAlertViaApi,
+	deleteAlertViaApi,
+	deleteChannelViaApi,
+} from '../../helpers/alerts/api';
+import { seedAlertRules } from '../../helpers/alerts/seeding';
+import type {
+	AlertSchema,
+	LogsAlertSeed,
+	ThresholdAlertSeed,
+} from '../../helpers/alerts/types';
+import { newAdminContext } from '../../helpers/auth';
+import { expect, test as base } from '../auth';
+import { FIXTURE_ALERT_LIST_TIMEOUT } from './timeouts';
+
+// Alert *rule* fixtures — the API-only half of the alerts suite. Nothing here
+// waits on the ruler: a rule is created and that's it. History rows need real
+// evaluations, so those fixtures live in `alert-history.ts`, which
+// extends this module — a spec importing from there gets both sets.
+//
+// Scopes, and why:
+//   `alertChannel` — worker. Every rule payload has to reference a channel by
+//     name, and one channel serves the whole worker.
+//   `alertList`    — worker. Read-only rule list the `tests/alerts/list` specs
+//     page, search and sort through. Names and label values are stamped per
+//     worker so parallel batches never count each other's rules.
+//   `ownedRules`   — test. Scenarios that rename/toggle/clone/delete a rule seed
+//     their own and have it removed when they finish; mutating a shared seed
+//     would break every scenario scheduled after it.
+
+export interface AlertChannel {
+	id: string;
+	name: string;
+}
+
+export interface AlertListSeed {
+	channelName: string;
+	/** Rules are named `<namePrefix>-NN` — unique to this worker's batch. */
+	namePrefix: string;
+	/** Rules seeded ⇒ the `of N` total once the list is scoped to the prefix. */
+	count: number;
+	/** `team` label on the odd-indexed half of the batch, i.e. `count / 2` rules. */
+	paymentsLabel: string;
+	ruleIds: string[];
+}
+
+export interface OwnedRules {
+	/** Seed a metric threshold rule this test owns. */
+	threshold(
+		name: string,
+		overrides?: Partial<Omit<ThresholdAlertSeed, 'name'>>,
+	): Promise<string>;
+	/**
+	 * Seed a logs rule this test owns. No telemetry is seeded for its marker, so
+	 * it never fires — enough for anything about the details shell.
+	 *
+	 * `schema: 'v1'` posts the legacy payload; the condition overrides exist so
+	 * a v1 *prefill* assertion can be made against values the create form would
+	 * not have produced by itself.
+	 */
+	logs(
+		options: {
+			name: string;
+			schema?: AlertSchema;
+			marker?: string;
+		} & Partial<
+			Pick<
+				LogsAlertSeed,
+				'severity' | 'extraLabels' | 'evalWindow' | 'target' | 'op' | 'matchType'
+			>
+		>,
+	): Promise<string>;
+	/**
+	 * Track a rule the *app* created (Clone / Duplicate) so teardown removes it
+	 * too. Lives here because the id may legitimately be missing and a
+	 * conditional inside a test body is a lint error.
+	 */
+	register(response: { json: () => Promise<unknown> }): Promise<void>;
+}
+
+/** alertList size. 12 over page size 10 = short second page for pagination tests. */
+const LIST_SEED_COUNT = 12;
+
+/**
+ * Run `body` on a throwaway admin page. Worker hooks can't use the test-scoped
+ * `authedPage`, and every API helper needs a page whose context carries the
+ * admin storage state.
+ */
+export async function withAdminPage<T>(
+	browser: Browser,
+	body: (page: Page) => Promise<T>,
+): Promise<T> {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		return await body(page);
+	} finally {
+		await ctx.close();
+	}
+}
+
+async function deleteRules(browser: Browser, ids: string[]): Promise<void> {
+	if (ids.length === 0) {
+		return;
+	}
+	await withAdminPage(browser, async (page) => {
+		for (const id of ids) {
+			// eslint-disable-next-line no-await-in-loop
+			await deleteAlertViaApi(page, id);
+		}
+	});
+}
+
+// --- Fixture setup/teardown functions ---
+
+async function createAlertChannel(
+	browser: Browser,
+	workerIndex: number,
+): Promise<AlertChannel> {
+	return withAdminPage(browser, (page) =>
+		createEmailChannelViaApi(page, `e2e-alerts-ch-w${workerIndex}-${Date.now()}`),
+	);
+}
+
+async function deleteAlertChannel(
+	browser: Browser,
+	channelId: string,
+): Promise<void> {
+	await withAdminPage(browser, (page) => deleteChannelViaApi(page, channelId));
+}
+
+async function createAlertList(
+	browser: Browser,
+	channelName: string,
+	workerIndex: number,
+): Promise<AlertListSeed> {
+	const stamp = `w${workerIndex}-${Date.now()}`;
+	const namePrefix = `e2e-alert-list-${stamp}`;
+	const teamSuffix = `-${stamp}`;
+
+	const ruleIds = await withAdminPage(browser, (page) =>
+		seedAlertRules(page, {
+			count: LIST_SEED_COUNT,
+			channelName,
+			namePrefix,
+			teamSuffix,
+		}),
+	);
+
+	return {
+		channelName,
+		namePrefix,
+		count: LIST_SEED_COUNT,
+		paymentsLabel: `payments${teamSuffix}`,
+		ruleIds,
+	};
+}
+
+function createOwnedRulesFactory(
+	browser: Browser,
+	channelName: string,
+	ids: Set<string>,
+): OwnedRules {
+	const seed = async (
+		create: (page: Page) => Promise<string>,
+	): Promise<string> => {
+		const id = await withAdminPage(browser, create);
+		ids.add(id);
+		return id;
+	};
+
+	return {
+		threshold: (name, overrides = {}) =>
+			seed((page) =>
+				createThresholdAlertViaApi(page, {
+					name,
+					target: 42,
+					channels: [channelName],
+					labels: { severity: 'critical' },
+					...overrides,
+				}),
+			),
+
+		logs: ({ name, schema = 'v2', marker, ...overrides }) =>
+			seed((page) =>
+				createLogsAlertViaApi(page, {
+					name,
+					marker: marker ?? `e2e alert never seeded ${name}`,
+					channels: [channelName],
+					schema,
+					...overrides,
+				}),
+			),
+
+		register: async (response) => {
+			const body = (await response.json()) as { data?: { id?: string } };
+			const id = body.data?.id;
+			if (id) {
+				ids.add(String(id));
+			}
+		},
+	};
+}
+
+// --- Fixture definitions ---
+
+export const test = base.extend<
+	{ ownedRules: OwnedRules },
+	{ alertChannel: AlertChannel; alertList: AlertListSeed }
+>({
+	alertChannel: [
+		async ({ browser }, use, workerInfo) => {
+			const channel = await createAlertChannel(browser, workerInfo.workerIndex);
+			await use(channel);
+			await deleteAlertChannel(browser, channel.id);
+		},
+		{ scope: 'worker' },
+	],
+
+	alertList: [
+		async ({ browser, alertChannel }, use, workerInfo) => {
+			const seed = await createAlertList(
+				browser,
+				alertChannel.name,
+				workerInfo.workerIndex,
+			);
+			await use(seed);
+			await deleteRules(browser, seed.ruleIds);
+		},
+		{ scope: 'worker', timeout: FIXTURE_ALERT_LIST_TIMEOUT },
+	],
+
+	ownedRules: async ({ browser, alertChannel }, use) => {
+		const ids = new Set<string>();
+		const factory = createOwnedRulesFactory(browser, alertChannel.name, ids);
+		await use(factory);
+		await deleteRules(browser, [...ids]);
+	},
+});
+
+export { expect };
--- a/tests/e2e/fixtures/alerts/timeouts.ts
+++ b/tests/e2e/fixtures/alerts/timeouts.ts
@@ -0,0 +1,96 @@
+/**
+ * Centralized timeout constants for alert fixtures.
+ *
+ * **Ruler**: SigNoz's alert evaluation engine. Runs on ~15s cycles, checks each
+ * rule's query against ClickHouse, writes results to `rule_state_history_v0`.
+ * There's no API to force-evaluate or seed history directly, so fixtures must
+ * poll the timeline endpoint until the ruler writes rows.
+ *
+ * Fixture timeouts are set generously because:
+ * 1. CI environments are slower than local dev machines
+ * 2. Ruler evaluation depends on Kafka/ClickHouse latency
+ * 3. A timeout should mean "something is broken", not "it's just slow today"
+ *
+ * Typical measured times (local):
+ * - API call (create/delete rule/channel): ~1-2s
+ * - waitForTimelineEntries (logs, 25 services): ~20-35s
+ * - waitForTimelineEntries (metrics, 2 hosts): ~10s
+ * - waitForTimelineStates (firing→resolved): ~105s
+ * - waitForTimelineEntries (nodata state): ~60-120s
+ */
+
+// ─── Fixture-specific wait overrides (ms) ──────────────────────────────
+
+/**
+ * Metrics history wait override. Metrics push faster than logs, but ruler still
+ * needs 2 evaluation windows to confirm state. 10s typical, 120s defensive.
+ */
+export const WAIT_METRICS_TIMELINE_TIMEOUT = 120_000;
+
+/**
+ * Nodata state detection. Ruler must evaluate twice with empty result set.
+ * Takes longer than firing detection because it's an absence check.
+ */
+export const WAIT_NODATA_TIMELINE_TIMEOUT = 180_000;
+
+// ─── Fixture timeouts (ms) ─────────────────────────────────────────────
+
+/**
+ * alertList: seeds 12 rules via API.
+ *
+ * Breakdown: createChannel(2s) + 12×createRule(24s) = ~26s.
+ * Timeout: 120s (~5x headroom for CI).
+ */
+export const FIXTURE_ALERT_LIST_TIMEOUT = 120_000;
+
+/**
+ * alertHistory: seeds 25 logs + 2 rules, waits for ruler evaluation.
+ *
+ * Breakdown: createChannel(2s) + seedLogs(10s) + 2×createRule(4s) +
+ *            2×waitForEntries(70s) + 2×disableRule(4s) = ~90s.
+ * Timeout: 240s (~2.5x headroom).
+ */
+export const FIXTURE_ALERT_HISTORY_TIMEOUT = 240_000;
+
+/**
+ * metricsHistory: seeds 2 hosts, waits for metrics ruler cycle.
+ *
+ * Breakdown: createChannel(2s) + seedMetrics(5s) + createRule(2s) +
+ *            waitForEntries(10s actual, 120s budget) + disableRule(2s) = ~21s.
+ * Timeout: 240s (matches alertHistory for consistency).
+ */
+export const FIXTURE_METRICS_HISTORY_TIMEOUT = 240_000;
+
+/**
+ * tracesHistory: seeds 3 trace services, waits for ruler.
+ *
+ * Breakdown: similar to alertHistory but fewer services = ~45s.
+ * Timeout: 240s (~5x headroom).
+ */
+export const FIXTURE_TRACES_HISTORY_TIMEOUT = 240_000;
+
+/**
+ * resolvedHistory: waits for firing→resolved transition.
+ *
+ * Breakdown: setup(30s) + waitForStates(105s) = ~135s.
+ * Timeout: 300s (~2x headroom). Longest because resolved requires
+ * evalWindow expiry after data stops matching.
+ */
+export const FIXTURE_RESOLVED_HISTORY_TIMEOUT = 300_000;
+
+/**
+ * noDataHistory: waits for nodata state to appear.
+ *
+ * Breakdown: createChannel(2s) + createRule(2s) + waitForEntries(60-120s).
+ * Timeout: 300s. Nodata detection is slowest because ruler must confirm
+ * absence across multiple evaluation cycles.
+ */
+export const FIXTURE_NODATA_HISTORY_TIMEOUT = 300_000;
+
+/**
+ * emptyHistory: creates rule then immediately disables it (no ruler wait).
+ *
+ * Breakdown: createChannel(2s) + createRule(2s) + disableRule(2s) = ~6s.
+ * Timeout: 120s (generous for slow CI, no ruler dependency).
+ */
+export const FIXTURE_EMPTY_HISTORY_TIMEOUT = 120_000;
--- a/tests/e2e/fixtures/auth.ts
+++ b/tests/e2e/fixtures/auth.ts
@@ -1,81 +1,11 @@
-import {
-	test as base,
-	expect,
-	type Browser,
-	type BrowserContext,
-	type Page,
-} from '@playwright/test';
+import { test as base, expect, type Page } from '@playwright/test';

-export type User = { email: string; password: string };
+import { ADMIN, storageStateFor, type User } from '../helpers/auth';

-// Default user — admin from the pytest bootstrap (.env.local) or staging .env.
-export const ADMIN: User = {
-	email: process.env.SIGNOZ_E2E_USERNAME!,
-	password: process.env.SIGNOZ_E2E_PASSWORD!,
-};
-
-// Per-worker storageState cache. One login per unique user per worker.
-// Promise-valued so concurrent requests share the same in-flight work.
-// Held in memory only — no .auth/ dir, no JSON on disk.
-type StorageState = Awaited<ReturnType<BrowserContext['storageState']>>;
-const storageByUser = new Map<string, Promise<StorageState>>();
-
-async function storageFor(browser: Browser, user: User): Promise<StorageState> {
-	const cached = storageByUser.get(user.email);
-	if (cached) {
-		return cached;
-	}
-
-	const task = (async () => {
-		const ctx = await browser.newContext();
-		const page = await ctx.newPage();
-		await login(page, user);
-		await pinSidenav(page);
-		const state = await ctx.storageState();
-		await ctx.close();
-		return state;
-	})();
-
-	storageByUser.set(user.email, task);
-	return task;
-}
-
-async function login(page: Page, user: User): Promise<void> {
-	if (!user.email || !user.password) {
-		throw new Error(
-			'User credentials missing. Set SIGNOZ_E2E_USERNAME / SIGNOZ_E2E_PASSWORD ' +
-				'(pytest bootstrap writes them to .env.local), or pass a User via test.use({ user: ... }).',
-		);
-	}
-	await page.goto('/login?password=Y');
-	await page.getByTestId('email').fill(user.email);
-	await page.getByTestId('initiate_login').click();
-	await page.getByTestId('password').fill(user.password);
-	await page.getByRole('button', { name: 'Sign in with Password' }).click();
-	// Post-login lands somewhere different depending on whether the org is
-	// licensed (onboarding flow on ENTERPRISE) or not (legacy "Hello there"
-	// welcome). Wait for URL to move off /login — whichever page follows
-	// is fine, each spec navigates to the feature under test anyway.
-	await page.waitForURL((url) => !url.pathname.startsWith('/login'));
-}
-
-// Pin the nav suite-wide: unpinned it flies out on hover and overlays content.
-// Server-side pref, so set once per user at login.
-async function pinSidenav(page: Page): Promise<void> {
-	const token = await page.evaluate(
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		() => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
-	);
-	const res = await page.request.put('/api/v1/user/preferences/sidenav_pinned', {
-		data: { value: true },
-		headers: { Authorization: `Bearer ${token}` },
-	});
-	if (!res.ok()) {
-		throw new Error(
-			`PUT /api/v1/user/preferences/sidenav_pinned ${res.status()}: ${await res.text()}`,
-		);
-	}
-}
+// The login flow and the per-worker session cache live in `helpers/auth.ts` so
+// worker-scoped fixtures and suite hooks share one login with this fixture.
+export { ADMIN };
+export type { User };

 export const test = base.extend<{
 	/**
@@ -95,7 +25,7 @@ export const test = base.extend<{
 	user: [ADMIN, { option: true }],

 	authedPage: async ({ browser, user }, use) => {
-		const storageState = await storageFor(browser, user);
+		const storageState = await storageStateFor(browser, user);
 		const ctx = await browser.newContext({ storageState });
 		const page = await ctx.newPage();
 		// Opt-in CPU throttling to reproduce GitHub-Linux-runner conditions on
--- a/Show More
+++ b/Show More