feat: update tests

* feat: adding metrics in definition and dashboard JSON

* refactor: renaming cloudsql to cloudsql_postgres

* refactor: generating openapi specs

docs/api/openapi.yml

@@ -1494,7 +1494,7 @@ components:
       - cosmosdb
       - cassandradb
       - redis
-      - cloudsql
+      - cloudsql_postgres
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:

frontend/__mocks__/motionMock.tsx

@@ -0,0 +1,88 @@
+// oxlint-disable-next-line no-restricted-imports
+import * as React from 'react';
+
+// In jsdom, AnimatePresence from motion/react keeps children in DOM during exit
+// animations (awaiting rAF-driven completion that never fully runs in jsdom).
+// This mock makes AnimatePresence render children immediately and makes motion.*
+// elements render as their plain HTML equivalents without animation side-effects.
+//
+// IMPORTANT: motion component references are cached so React sees a stable
+// component identity across re-renders and does not enter an infinite remount loop.
+
+const MOTION_PROPS_TO_STRIP = new Set([
+	'initial',
+	'animate',
+	'exit',
+	'variants',
+	'transition',
+	'whileHover',
+	'whileTap',
+	'whileFocus',
+	'whileInView',
+	'layout',
+	'layoutId',
+	'onAnimationStart',
+	'onAnimationComplete',
+]);
+
+const cache = new Map<string, React.ComponentType>();
+
+function getMotionComponent(tag: string): React.ComponentType {
+	if (!cache.has(tag)) {
+		const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(
+			(props, ref) => {
+				const domProps: Record<string, unknown> = {};
+				for (const [k, v] of Object.entries(props)) {
+					if (!MOTION_PROPS_TO_STRIP.has(k)) {
+						domProps[k] = v;
+					}
+				}
+				return React.createElement(tag, { ...domProps, ref });
+			},
+		);
+		Component.displayName = `motion.${tag}`;
+		cache.set(tag, Component as unknown as React.ComponentType);
+	}
+	return cache.get(tag) as React.ComponentType;
+}
+
+const motionHandler: ProxyHandler<Record<string, React.ComponentType>> = {
+	get(_target, prop: string) {
+		return getMotionComponent(prop);
+	},
+};
+
+export const AnimatePresence: React.FC<{
+	children?: React.ReactNode;
+	mode?: string;
+}> = ({ children }) => React.createElement(React.Fragment, null, children);
+
+export const motion = new Proxy(
+	{} as Record<string, React.ComponentType>,
+	motionHandler,
+);
+
+export const useAnimation = (): Record<string, unknown> => ({
+	start: (): unknown => Promise.resolve(),
+	stop: (): unknown => undefined,
+	set: (): unknown => undefined,
+});
+
+export const useMotionValue = (
+	initial: unknown,
+): { get: () => unknown; set: () => void } => ({
+	get: (): unknown => initial,
+	set: (): unknown => undefined,
+});
+
+export const useTransform = (): { get: () => number } => ({
+	get: (): number => 0,
+});
+
+export const useSpring = (v: unknown): unknown => v;
+
+export const useScroll = (): { scrollY: { get: () => number } } => ({
+	scrollY: { get: (): number => 0 },
+});
+
+export default { motion, AnimatePresence };

frontend/jest.config.ts

@@ -20,6 +20,7 @@ const config: Config.InitialOptions = {
 		'\\.module\\.mjs$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
 		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
+		'^motion/react$': '<rootDir>/__mocks__/motionMock.tsx',
 		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -2813,7 +2813,7 @@ export enum CloudintegrationtypesServiceIDDTO {
 	cosmosdb = 'cosmosdb',
 	cassandradb = 'cassandradb',
 	redis = 'redis',
-	cloudsql = 'cloudsql',
+	cloudsql_postgres = 'cloudsql_postgres',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**

frontend/src/api/v1/download/downloadExportData.ts

@@ -1,26 +1,50 @@
 import axios from 'api';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
+import { AxiosError, AxiosResponse } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import { ExportRawDataProps } from 'types/api/exportRawData/getExportRawData';
 
+export interface FetchExportDataProps extends ExportRawDataProps {
+	signal?: AbortSignal;
+}
+
+async function postExportRawData({
+	format,
+	body,
+	signal,
+}: FetchExportDataProps): Promise<AxiosResponse<Blob>> {
+	return axios.post<Blob>(
+		`export_raw_data?format=${encodeURIComponent(format)}`,
+		body,
+		{
+			responseType: 'blob',
+			decompress: true,
+			headers: {
+				Accept: 'application/octet-stream',
+				'Content-Type': 'application/json',
+			},
+			timeout: 0,
+			signal,
+		},
+	);
+}
+
+/**
+ * Fetches a single export_raw_data page and returns it as a Blob.
+ * Callers own retry/cancel/error UX.
+ */
+export async function fetchExportData(
+	props: FetchExportDataProps,
+): Promise<Blob> {
+	const response = await postExportRawData(props);
+	return response.data;
+}
+
 export const downloadExportData = async (
 	props: ExportRawDataProps,
 ): Promise<void> => {
 	try {
-		const response = await axios.post<Blob>(
-			`export_raw_data?format=${encodeURIComponent(props.format)}`,
-			props.body,
-			{
-				responseType: 'blob',
-				decompress: true,
-				headers: {
-					Accept: 'application/octet-stream',
-					'Content-Type': 'application/json',
-				},
-				timeout: 0,
-			},
-		);
+		const response = await postExportRawData(props);
 
 		if (response.status !== 200) {
 			throw new Error(

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -92,6 +92,7 @@ function CreateServiceAccountModal(): JSX.Element {
 			width="narrow"
 			className="create-sa-modal"
 			disableOutsideClick={isErrorModalVisible}
+			testId="create-service-account-modal"
 		>
 			<div className="create-sa-modal__content">
 				<form

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

@@ -1,13 +1,7 @@
 import { toast } from '@signozhq/ui/sonner';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
@@ -89,7 +83,7 @@ describe('CreateServiceAccountModal', () => {
 
 		await waitFor(() => {
 			expect(
-				screen.queryByRole('dialog', { name: /New Service Account/i }),
+				screen.queryByTestId('create-service-account-modal'),
 			).not.toBeInTheDocument();
 		});
 	});
@@ -129,7 +123,7 @@ describe('CreateServiceAccountModal', () => {
 		});
 
 		expect(
-			screen.getByRole('dialog', { name: /New Service Account/i }),
+			screen.getByTestId('create-service-account-modal'),
 		).toBeInTheDocument();
 	});
 
@@ -137,15 +131,14 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', {
-			name: /New Service Account/i,
-		});
+		await screen.findByTestId('create-service-account-modal');
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
-		expect(
-			screen.queryByRole('dialog', { name: /New Service Account/i }),
-		).not.toBeInTheDocument();
+		await waitFor(() => {
+			expect(
+				screen.queryByTestId('create-service-account-modal'),
+			).not.toBeInTheDocument();
+		});
 	});
 
 	it('shows "Name is required" after clearing the name field', async () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -3,7 +3,7 @@ import { Button, Popover, Tooltip } from 'antd';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
+import { useExportRawData } from 'hooks/useExportData/useServerExport';
 import { Download, LoaderCircle } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -151,6 +151,7 @@ function AddKeyModal(): JSX.Element {
 			className="add-key-modal"
 			showCloseButton
 			disableOutsideClick={isErrorModalVisible}
+			testId="add-key-modal"
 		>
 			{phase === Phase.FORM && (
 				<KeyFormPhase

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -91,6 +91,7 @@ function DeleteAccountModal(): JSX.Element {
 				color="destructive"
 				loading={isDeleting}
 				onClick={handleConfirm}
+				data-testid="confirm-delete-btn"
 			>
 				<Trash2 size={12} />
 				Delete
@@ -111,6 +112,7 @@ function DeleteAccountModal(): JSX.Element {
 			className="alert-dialog sa-delete-dialog"
 			showCloseButton={false}
 			disableOutsideClick={isErrorModalVisible}
+			testId="delete-service-account-modal"
 			footer={footer}
 		>
 			{content}

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -175,6 +175,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 			}
 			showCloseButton={!isRevokeConfirmOpen}
 			disableOutsideClick={isErrorModalVisible}
+			testId="edit-key-modal"
 			footer={
 				isRevokeConfirmOpen ? (
 					<RevokeKeyFooter

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -2,13 +2,7 @@ import { toast } from '@signozhq/ui/sonner';
 import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import AddKeyModal from '../AddKeyModal';
 
@@ -97,7 +91,7 @@ describe('AddKeyModal', () => {
 
 		await screen.findByText('snz_abc123xyz456secret');
 		expect(screen.getByText(/Store the key securely/i)).toBeInTheDocument();
-		await screen.findByRole('dialog', { name: /Key Created Successfully/i });
+		expect(screen.getByTestId('add-key-modal')).toBeInTheDocument();
 	});
 
 	it('copy button writes key to clipboard and shows toast.success', async () => {
@@ -133,9 +127,11 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', { name: /Add a New Key/i });
+		await screen.findByTestId('add-key-modal');
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
+		await waitFor(() => {
+			expect(screen.queryByTestId('add-key-modal')).not.toBeInTheDocument();
+		});
 	});
 });

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -73,9 +73,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 	it('renders nothing when edit-key param is absent', () => {
 		renderModal(null, { account: 'sa-1' });
 
-		expect(
-			screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('edit-key-modal')).not.toBeInTheDocument();
 	});
 
 	it('renders key data from prop when edit-key param is set', async () => {
@@ -102,9 +100,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 		});
 
 		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('edit-key-modal')).not.toBeInTheDocument();
 		});
 	});
 
@@ -131,9 +127,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 		expect(latestUrlUpdate.queryString).not.toContain('edit-key=');
 
 		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('edit-key-modal')).not.toBeInTheDocument();
 		});
 	});
 
@@ -145,9 +139,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 		await user.click(screen.getByRole('button', { name: /Revoke Key/i }));
 
 		// Same dialog, now showing revoke confirmation
-		await expect(
-			screen.findByRole('dialog', { name: /Revoke Original Key Name/i }),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('edit-key-modal')).toBeInTheDocument();
 		expect(
 			screen.getByText(/Revoking this key will permanently invalidate it/i),
 		).toBeInTheDocument();
@@ -170,9 +162,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 		});
 
 		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('edit-key-modal')).not.toBeInTheDocument();
 		});
 	});
 });

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

@@ -222,21 +222,20 @@ describe('ServiceAccountDrawer', () => {
 			screen.getByRole('button', { name: /Delete Service Account/i }),
 		);
 
-		const dialog = await screen.findByRole('dialog', {
-			name: /Delete service account CI Bot/i,
-		});
-		expect(dialog).toBeInTheDocument();
+		await screen.findByTestId('delete-service-account-modal');
+		expect(
+			screen.getByTestId('delete-service-account-modal'),
+		).toBeInTheDocument();
 
-		const confirmBtns = screen.getAllByRole('button', { name: /^Delete$/i });
-		await user.click(confirmBtns[confirmBtns.length - 1]);
+		await user.click(screen.getByTestId('confirm-delete-btn'));
 
-		await waitFor(() => {
-			expect(deleteSpy).toHaveBeenCalled();
-		});
-
-		await waitFor(() => {
-			expect(screen.queryByDisplayValue('CI Bot')).not.toBeInTheDocument();
-		});
+		await waitFor(
+			() => {
+				expect(deleteSpy).toHaveBeenCalled();
+				expect(screen.queryByDisplayValue('CI Bot')).not.toBeInTheDocument();
+			},
+			{ timeout: 3000 },
+		);
 	});
 
 	it('deleted account shows read-only name, no Save button, no Delete button', async () => {

frontend/src/constants/sessionStorage.ts

@@ -1,3 +1,4 @@
 export enum SESSIONSTORAGE {
 	RETRY_LAZY_REFRESHED = 'retry-lazy-refreshed',
+	VIEW_PANEL_HANDOFF = 'view-panel-handoff',
 }

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

@@ -0,0 +1,7 @@
+.pageError {
+	padding: var(--padding-3) var(--padding-4);
+	border-radius: var(--radius-2);
+	background: var(--callout-error-background);
+	color: var(--callout-error-title);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/AttributeMappingsTab.tsx

@@ -0,0 +1,21 @@
+import styles from './AttributeMappingsTab.module.scss';
+import MappingsTable from './components/MappingsTable/MappingsTable';
+import { useAttributeMappingStore } from './hooks/useAttributeMappingStore';
+
+function AttributeMappingsTab(): JSX.Element {
+	const store = useAttributeMappingStore();
+
+	return (
+		<div data-testid="attribute-mappings-tab">
+			{store.isError ? (
+				<div className={styles.pageError} role="alert">
+					Failed to load mapping groups. Please try again.
+				</div>
+			) : (
+				<MappingsTable store={store} />
+			)}
+		</div>
+	);
+}
+
+export default AttributeMappingsTab;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/__tests__/AttributeMappingsTab.test.tsx

@@ -0,0 +1,267 @@
+import {
+	SpantypesFieldContextDTO as FieldContext,
+	SpantypesSpanMapperOperationDTO as MapperOperation,
+} from 'api/generated/services/sigNoz.schemas';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+
+import {
+	GROUPS_ENDPOINT,
+	makeGroupsResponse,
+	makeMapper,
+	makeMappersResponse,
+	mappersEndpoint,
+	mockGroups,
+	mockMappers,
+} from 'container/LLMObservability/AttributeMapping/__tests__/fixtures';
+import AttributeMappingsTab from '../AttributeMappingsTab';
+
+function setupGroups(groups = mockGroups): void {
+	server.use(
+		rest.get(GROUPS_ENDPOINT, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(makeGroupsResponse(groups))),
+		),
+	);
+}
+
+function setupMappers(mappers = mockMappers, groupId = 'group-1'): void {
+	server.use(
+		rest.get(mappersEndpoint(groupId), (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(makeMappersResponse(mappers))),
+		),
+	);
+}
+
+async function expandGroup(
+	user: ReturnType<typeof userEvent.setup>,
+	groupId = 'group-1',
+): Promise<void> {
+	await user.click(screen.getByTestId(`group-expand-${groupId}`));
+}
+
+describe('AttributeMappingsTab (integration)', () => {
+	beforeEach(() => {
+		// Reset URL state between tests — jsdom shares window.location across a file.
+		window.history.pushState(null, '', '/');
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders no error banner on a successful load', async () => {
+		setupGroups();
+		render(<AttributeMappingsTab />);
+
+		await waitFor(() =>
+			expect(screen.getByTestId('group-name-group-1')).toBeInTheDocument(),
+		);
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+	});
+
+	it('shows an error banner when the groups request fails', async () => {
+		server.use(
+			rest.get(GROUPS_ENDPOINT, (_req, res, ctx) => res(ctx.status(500))),
+		);
+		render(<AttributeMappingsTab />);
+
+		await expect(screen.findByRole('alert')).resolves.toHaveTextContent(
+			'Failed to load mapping groups. Please try again.',
+		);
+	});
+
+	it('shows the empty state when there are no groups', async () => {
+		setupGroups([]);
+		render(<AttributeMappingsTab />);
+
+		await expect(
+			screen.findByTestId('mapper-groups-empty'),
+		).resolves.toHaveTextContent('No mapping groups yet.');
+	});
+
+	it('renders each group header row with its name, condition count and status', async () => {
+		setupGroups();
+		render(<AttributeMappingsTab />);
+
+		// Condition filters are no longer shown inline as clauses — the header
+		// carries a count instead (the keys surface in the group drawer, later PR).
+		// Group headers are antd Collapse panels, so rows scope to the panel item.
+		// group-1: enabled, with attribute + resource condition keys.
+		const enabledRow = (await screen.findByTestId('group-name-group-1')).closest(
+			'.ant-collapse-item',
+		) as HTMLElement;
+		expect(
+			within(enabledRow).getByTestId('group-name-group-1'),
+		).toHaveTextContent('demo');
+		expect(
+			within(enabledRow).getByTestId('group-condition-count-group-1'),
+		).toHaveTextContent('2 conditions');
+		expect(within(enabledRow).getByTestId('group-enabled-group-1')).toBeChecked();
+
+		// group-2: disabled, with no condition keys.
+		const disabledRow = screen
+			.getByTestId('group-name-group-2')
+			.closest('.ant-collapse-item') as HTMLElement;
+		expect(within(disabledRow).getByText('Tool')).toBeInTheDocument();
+		expect(
+			within(disabledRow).getByTestId('group-condition-count-group-2'),
+		).toHaveTextContent('0 conditions');
+		expect(
+			within(disabledRow).getByTestId('group-enabled-group-2'),
+		).not.toBeChecked();
+	});
+
+	it('renders the group enable state as a read-only switch', async () => {
+		setupGroups();
+		render(<AttributeMappingsTab />);
+
+		// The status switch reflects enabled state but is non-interactive in this
+		// read-only listing — editing lands in a later PR.
+		const toggle = await screen.findByTestId('group-enabled-group-1');
+		expect(toggle).toBeChecked();
+		expect(toggle).toBeDisabled();
+	});
+
+	it("reveals a group's mappers on expand and hides them on collapse", async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupGroups();
+		setupMappers([makeMapper({ id: 'mapper-1' })]);
+		render(<AttributeMappingsTab />);
+
+		await screen.findByTestId('group-name-group-1');
+		// The toggle is the antd Collapse header, which owns the expanded state.
+		const header = screen
+			.getByTestId('group-expand-group-1')
+			.closest('.ant-collapse-header') as HTMLElement;
+		expect(header).toHaveAttribute('aria-expanded', 'false');
+
+		await expandGroup(user);
+		expect(header).toHaveAttribute('aria-expanded', 'true');
+		await expect(
+			screen.findByTestId('mapper-target-mapper-1'),
+		).resolves.toBeInTheDocument();
+
+		await expandGroup(user);
+		await waitFor(() =>
+			expect(
+				screen.queryByTestId('mapper-target-mapper-1'),
+			).not.toBeInTheDocument(),
+		);
+	});
+
+	it("lazily fetches and renders a group's mappers on first expand", async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupGroups();
+		setupMappers([
+			makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model', enabled: true }),
+		]);
+		render(<AttributeMappingsTab />);
+
+		await screen.findByTestId('group-name-group-1');
+		// Mappers are not fetched until the row is expanded.
+		expect(
+			screen.queryByTestId('mapper-target-mapper-1'),
+		).not.toBeInTheDocument();
+
+		await expandGroup(user);
+
+		const target = await screen.findByTestId('mapper-target-mapper-1');
+		expect(target).toHaveTextContent('gen_ai.request.model');
+		const mapperRow = target.closest('tr') as HTMLElement;
+		// Sources ordered by priority, highest first (see fixtures).
+		const sources = within(mapperRow).getByTestId('mapper-sources-mapper-1');
+		expect(sources).toHaveTextContent('genai.model');
+		expect(sources).toHaveTextContent('llm.model');
+		// Writes-to field context + enabled status (an inline Switch, not text).
+		expect(within(mapperRow).getByText('attribute')).toBeInTheDocument();
+		expect(
+			within(mapperRow).getByTestId('mapper-enabled-mapper-1'),
+		).toBeChecked();
+	});
+
+	it("renders a mapper's enable state as a read-only switch", async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupGroups();
+		setupMappers([makeMapper({ id: 'mapper-1', enabled: true })]);
+		render(<AttributeMappingsTab />);
+
+		await screen.findByTestId('group-name-group-1');
+		await expandGroup(user);
+
+		// Like the group switch, a mapper's status switch reflects state without
+		// accepting flips in this read-only listing.
+		const toggle = await screen.findByTestId('mapper-enabled-mapper-1');
+		expect(toggle).toBeChecked();
+		expect(toggle).toBeDisabled();
+	});
+
+	it('shows the mappers error state when the mappers request fails', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupGroups();
+		server.use(
+			rest.get(mappersEndpoint('group-1'), (_req, res, ctx) =>
+				res(ctx.status(500)),
+			),
+		);
+		render(<AttributeMappingsTab />);
+
+		await screen.findByTestId('group-name-group-1');
+		await expandGroup(user);
+
+		await expect(
+			screen.findByTestId('mappers-error-group-1'),
+		).resolves.toHaveTextContent('Failed to load mappings. Please try again.');
+	});
+
+	it('shows the mappers empty state when a group has no mappers', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupGroups();
+		setupMappers([]);
+		render(<AttributeMappingsTab />);
+
+		await screen.findByTestId('group-name-group-1');
+		await expandGroup(user);
+
+		await expect(
+			screen.findByTestId('mappers-empty-group-1'),
+		).resolves.toHaveTextContent('No mappings in this group yet.');
+	});
+
+	it('collapses extra mapper sources into a "+N more" label beyond the visible cap', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupGroups();
+		setupMappers([
+			makeMapper({
+				id: 'mapper-1',
+				config: {
+					sources: [1, 2, 3, 4, 5].map((priority) => ({
+						key: `source-${priority}`,
+						context: FieldContext.attribute,
+						operation: MapperOperation.copy,
+						priority,
+					})),
+				},
+			}),
+		]);
+		render(<AttributeMappingsTab />);
+
+		await screen.findByTestId('group-name-group-1');
+		await expandGroup(user);
+
+		await expect(screen.findByText('+2 more')).resolves.toBeInTheDocument();
+	});
+
+	it('shows a muted placeholder when a mapper has no sources', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupGroups();
+		setupMappers([makeMapper({ id: 'mapper-1', config: { sources: [] } })]);
+		render(<AttributeMappingsTab />);
+
+		await screen.findByTestId('group-name-group-1');
+		await expandGroup(user);
+
+		await waitFor(() =>
+			expect(screen.getByTestId('mapper-sources-mapper-1')).toHaveTextContent('—'),
+		);
+	});
+});

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/GroupHeader.module.scss

@@ -0,0 +1,19 @@
+.groupHeaderLabel {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	min-width: 0;
+}
+
+.groupName {
+	color: var(--l1-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.groupCount {
+	color: var(--l3-foreground);
+	font-size: var(--font-size-xs);
+	white-space: nowrap;
+}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/GroupHeader.tsx

@@ -0,0 +1,36 @@
+import { Typography } from '@signozhq/ui/typography';
+import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
+
+import styles from './GroupHeader.module.scss';
+
+interface GroupHeaderProps {
+	group: MappingGroup;
+}
+
+function GroupHeader({ group }: GroupHeaderProps): JSX.Element {
+	const conditionCount = group.attributes.length + group.resource.length;
+
+	return (
+		<div
+			className={styles.groupHeaderLabel}
+			data-testid={`group-expand-${group.id}`}
+		>
+			<Typography.Text
+				as="span"
+				className={styles.groupName}
+				testId={`group-name-${group.id}`}
+			>
+				{group.name}
+			</Typography.Text>
+			<Typography.Text
+				as="span"
+				className={styles.groupCount}
+				testId={`group-condition-count-${group.id}`}
+			>
+				· {conditionCount} {conditionCount === 1 ? 'condition' : 'conditions'}
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default GroupHeader;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './GroupHeader';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.module.scss

@@ -0,0 +1,6 @@
+.actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-3);
+}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx

@@ -0,0 +1,26 @@
+import { Switch } from '@signozhq/ui/switch';
+
+import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
+import styles from './GroupHeaderActions.module.scss';
+
+interface GroupHeaderActionsProps {
+	group: MappingGroup;
+}
+
+function GroupHeaderActions({ group }: GroupHeaderActionsProps): JSX.Element {
+	return (
+		<div
+			className={styles.actions}
+			onClick={(event): void => event.stopPropagation()}
+		>
+			<Switch
+				value={group.enabled}
+				// We don't yet support toggling a group's enabled state in this read-only PR, so disable the switch. A later PR will add the toggle handler and its drawer.
+				disabled
+				testId={`group-enabled-${group.id}`}
+			/>
+		</div>
+	);
+}
+
+export default GroupHeaderActions;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/index.ts

@@ -0,0 +1 @@
+export { default } from './GroupHeaderActions';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.module.scss

@@ -0,0 +1,14 @@
+.table {
+	width: 100%;
+	border-collapse: collapse;
+	table-layout: fixed;
+}
+
+.mapperStateRow .stateCell {
+	color: var(--l3-foreground);
+}
+
+.stateCell {
+	padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-12);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx

@@ -0,0 +1,98 @@
+import { useListSpanMappers } from 'api/generated/services/spanmapper';
+import { motion } from 'motion/react';
+
+import {
+	MappingGroup,
+	Mapping,
+} from 'container/LLMObservability/AttributeMapping/types';
+import { buildMappingsFromListResponse } from 'container/LLMObservability/AttributeMapping/utils';
+import { COLUMN_COUNT } from '../constants';
+import MapperRow, { MapperRowSkeleton } from '../MapperRow';
+import MappingsColgroup from '../MappingsColgroup';
+import styles from './GroupMappers.module.scss';
+
+const MAPPER_SKELETON_ROWS = 1;
+
+const STATE_ROW_MOTION = {
+	initial: { opacity: 0 },
+	animate: { opacity: 1 },
+	transition: { duration: 0.18, ease: 'easeOut' },
+} as const;
+
+interface StateRowProps {
+	groupId: string;
+}
+
+function ErrorRow({ groupId }: StateRowProps): JSX.Element {
+	return (
+		<motion.tr className={styles.mapperStateRow} {...STATE_ROW_MOTION}>
+			<td
+				colSpan={COLUMN_COUNT}
+				className={styles.stateCell}
+				data-testid={`mappers-error-${groupId}`}
+			>
+				Failed to load mappings. Please try again.
+			</td>
+		</motion.tr>
+	);
+}
+
+function EmptyRow({ groupId }: StateRowProps): JSX.Element {
+	return (
+		<motion.tr className={styles.mapperStateRow} {...STATE_ROW_MOTION}>
+			<td
+				colSpan={COLUMN_COUNT}
+				className={styles.stateCell}
+				data-testid={`mappers-empty-${groupId}`}
+			>
+				No mappings in this group yet.
+			</td>
+		</motion.tr>
+	);
+}
+
+interface GroupMappersProps {
+	group: MappingGroup;
+}
+
+function GroupMappers({ group }: GroupMappersProps): JSX.Element {
+	const {
+		data: mappers = [],
+		isLoading,
+		isError,
+	} = useListSpanMappers<Mapping[]>(
+		{
+			groupId: group.id,
+		},
+		{
+			query: {
+				refetchOnMount: false,
+				select: buildMappingsFromListResponse,
+			},
+		},
+	);
+
+	let rows: JSX.Element[];
+	if (isError) {
+		rows = [<ErrorRow key="error" groupId={group.id} />];
+	} else if (isLoading) {
+		rows = Array.from({ length: MAPPER_SKELETON_ROWS }).map((_, index) => (
+			<MapperRowSkeleton key={`mapper-skeleton-${index}`} />
+		));
+	} else if (mappers.length === 0) {
+		rows = [<EmptyRow key="empty" groupId={group.id} />];
+	} else {
+		rows = mappers.map((mapper, index) => (
+			<MapperRow key={mapper.id} mapper={mapper} index={index} />
+		));
+	}
+
+	return (
+		<table className={styles.table}>
+			<MappingsColgroup />
+			<tbody>{rows}</tbody>
+		</table>
+	);
+}
+
+export default GroupMappers;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/index.ts

@@ -0,0 +1 @@
+export { default } from './GroupMappers';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.module.scss

@@ -0,0 +1,65 @@
+.mapperRow {
+	&:hover {
+		background: var(--l2-background-hover);
+	}
+}
+
+.cell {
+	padding: var(--spacing-4) var(--spacing-6);
+	vertical-align: middle;
+	color: var(--l1-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+// Indent the first cell so mapper rows read as nested under their group.
+.targetCell {
+	padding-left: var(--spacing-12);
+}
+
+// Shorter vertical padding so the loading state reads as a compact placeholder.
+.skeletonCell {
+	composes: cell;
+	:global(.ant-skeleton-input) {
+		min-height: 18px !important;
+		height: 18px !important;
+	}
+	:global(.ant-skeleton-button) {
+		min-height: 18px !important;
+		height: 18px !important;
+	}
+}
+
+.statusCell {
+	text-align: right;
+}
+
+.rowActions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-3);
+}
+
+.sources {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--spacing-3);
+}
+
+.sourceChipText {
+	display: block;
+	max-width: 220px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.sourceMore {
+	font-size: var(--font-size-xs);
+	white-space: nowrap;
+}
+
+.muted {
+	color: var(--l3-foreground);
+}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx

@@ -0,0 +1,102 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import { SpantypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+import { motion } from 'motion/react';
+
+import { Mapping } from 'container/LLMObservability/AttributeMapping/types';
+import styles from './MapperRow.module.scss';
+
+const MAX_VISIBLE_SOURCES = 3;
+
+const ROW_TRANSITION = { duration: 0.18, ease: 'easeOut' } as const;
+const MAX_STAGGERED_ROWS = 6;
+const STAGGER_STEP = 0.03;
+
+interface MapperRowProps {
+	mapper: Mapping;
+	index: number;
+}
+
+function MapperRow({ mapper, index }: MapperRowProps): JSX.Element {
+	const sources = mapper.sources ?? [];
+	const visibleSources = sources.slice(0, MAX_VISIBLE_SOURCES);
+	const remainingSources = sources.length - visibleSources.length;
+
+	return (
+		<motion.tr
+			className={styles.mapperRow}
+			data-testid={`mapper-row-${mapper.id}`}
+			initial={{ opacity: 0, y: -4 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{
+				...ROW_TRANSITION,
+				delay: Math.min(index, MAX_STAGGERED_ROWS) * STAGGER_STEP,
+			}}
+		>
+			<td className={cx(styles.cell, styles.targetCell)}>
+				<Typography.Text
+					truncate={1}
+					title={mapper.name}
+					data-testid={`mapper-target-${mapper.id}`}
+				>
+					{mapper.name}
+				</Typography.Text>
+			</td>
+			<td className={styles.cell}>
+				{sources.length === 0 ? (
+					<span className={styles.muted} data-testid={`mapper-sources-${mapper.id}`}>
+						—
+					</span>
+				) : (
+					<div
+						className={styles.sources}
+						data-testid={`mapper-sources-${mapper.id}`}
+					>
+						{visibleSources.map((source) => (
+							<Badge
+								variant="outline"
+								color="vanilla"
+								className={styles.sourceChip}
+								key={`${source.context}:${source.key}`}
+							>
+								<span className={styles.sourceChipText} title={source.key}>
+									{source.key}
+								</span>
+							</Badge>
+						))}
+						{remainingSources > 0 && (
+							<span className={cx(styles.sourceMore, styles.muted)}>
+								+{remainingSources} more
+							</span>
+						)}
+					</div>
+				)}
+			</td>
+			<td className={styles.cell}>
+				<Badge
+					color={
+						mapper.fieldContext === SpantypesFieldContextDTO.resource
+							? 'amber'
+							: 'robin'
+					}
+					variant="outline"
+				>
+					{mapper.fieldContext}
+				</Badge>
+			</td>
+			<td className={cx(styles.cell, styles.statusCell)}>
+				<div className={styles.rowActions}>
+					<Switch
+						value={mapper.enabled}
+						disabled
+						testId={`mapper-enabled-${mapper.id}`}
+					/>
+				</div>
+			</td>
+		</motion.tr>
+	);
+}
+
+export default MapperRow;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRowSkeleton.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from 'antd';
+import cx from 'classnames';
+
+import styles from './MapperRow.module.scss';
+
+function MapperRowSkeleton(): JSX.Element {
+	return (
+		<tr className={styles.mapperRow}>
+			<td className={cx(styles.skeletonCell, styles.targetCell)}>
+				<Skeleton.Input active size="small" style={{ width: '55%' }} />
+			</td>
+			<td className={styles.skeletonCell}>
+				<div className={styles.sources}>
+					<Skeleton.Button active size="small" style={{ width: 88 }} />
+					<Skeleton.Button active size="small" style={{ width: 56 }} />
+				</div>
+			</td>
+			<td className={styles.skeletonCell}>
+				<Skeleton.Button active size="small" style={{ width: 72 }} />
+			</td>
+			<td className={cx(styles.skeletonCell, styles.statusCell)}>
+				<div className={styles.rowActions}>
+					<Skeleton.Button active size="small" shape="round" />
+				</div>
+			</td>
+		</tr>
+	);
+}
+
+export default MapperRowSkeleton;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/index.ts

@@ -0,0 +1,2 @@
+export { default } from './MapperRow';
+export { default as MapperRowSkeleton } from './MapperRowSkeleton';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsColgroup/MappingsColgroup.module.scss

@@ -0,0 +1,11 @@
+.colTarget {
+	width: 32%;
+}
+
+.colWritesTo {
+	width: 140px;
+}
+
+.colStatus {
+	width: 120px;
+}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsColgroup/MappingsColgroup.tsx

@@ -0,0 +1,14 @@
+import styles from './MappingsColgroup.module.scss';
+
+function MappingsColgroup(): JSX.Element {
+	return (
+		<colgroup>
+			<col className={styles.colTarget} />
+			<col />
+			<col className={styles.colWritesTo} />
+			<col className={styles.colStatus} />
+		</colgroup>
+	);
+}
+
+export default MappingsColgroup;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsColgroup/index.ts

@@ -0,0 +1 @@
+export { default } from './MappingsColgroup';

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.module.scss

@@ -0,0 +1,124 @@
+.table {
+	width: 100%;
+	border-collapse: collapse;
+	table-layout: fixed;
+}
+
+.headerRow {
+	border-bottom: 1px solid var(--l2-border);
+}
+
+.headerCell {
+	padding: var(--spacing-4) var(--spacing-6);
+	text-align: left;
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-normal);
+	color: var(--l2-foreground);
+
+	&:last-child {
+		text-align: right;
+	}
+}
+
+.groupsCollapse:global(.ant-collapse) {
+	background: transparent;
+	border: none;
+	border-radius: 0;
+
+	> :global(.ant-collapse-item) {
+		border-bottom: none;
+		border-top: 1px solid var(--l2-border);
+		border-radius: 0;
+
+		&:last-child {
+			border-bottom: 1px solid var(--l2-border);
+			border-radius: 0;
+		}
+
+		> :global(.ant-collapse-header) {
+			align-items: center;
+			gap: var(--spacing-3);
+			background: var(--l2-background);
+			border-radius: 0;
+			padding: var(--spacing-3) var(--spacing-6);
+			color: var(--l3-foreground);
+
+			:global(.ant-collapse-expand-icon) {
+				display: flex;
+				align-items: center;
+				height: auto;
+				padding-inline-end: 0;
+				color: var(--l3-foreground);
+			}
+
+			:global(.ant-collapse-header-text) {
+				min-width: 0;
+			}
+
+			:global(.ant-collapse-extra) {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+	:global(.ant-collapse-content) {
+		background: transparent;
+		border-top: none;
+		color: inherit;
+
+		> :global(.ant-collapse-content-box) {
+			padding: 0;
+		}
+	}
+}
+
+.tableEmpty {
+	padding: var(--spacing-12) var(--spacing-6);
+	text-align: center;
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+.skeletonList {
+	display: flex;
+	flex-direction: column;
+}
+
+// Mirrors the Collapse header banner while groups load.
+.skeletonBanner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	padding: var(--spacing-3) var(--spacing-6);
+	background: var(--l2-background);
+	border-top: 1px solid var(--l2-border);
+
+	&:last-child {
+		border-bottom: 1px solid var(--l2-border);
+	}
+	:global(.ant-skeleton-input) {
+		min-height: 18px !important;
+		height: 18px !important;
+	}
+	:global(.ant-skeleton-button) {
+		min-height: 18px !important;
+		height: 18px !important;
+	}
+}
+
+.skeletonGroupLeft {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	flex: 1;
+	min-width: 0;
+}
+
+.skeletonGroupRight {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	flex-shrink: 0;
+}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { Collapse, type CollapseProps, Skeleton } from 'antd';
+
+import { AttributeMappingStore } from 'container/LLMObservability/AttributeMapping/AttributeMappingsTab/hooks/useAttributeMappingStore';
+import GroupHeader from './GroupHeader';
+import GroupHeaderActions from './GroupHeaderActions';
+import GroupMappers from './GroupMappers';
+import MappingsColgroup from './MappingsColgroup';
+import styles from './MappingsTable.module.scss';
+
+const SKELETON_ROW_COUNT = 3;
+
+interface MappingsTableProps {
+	store: AttributeMappingStore;
+}
+
+function MappingsTable({ store }: MappingsTableProps): JSX.Element {
+	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
+
+	const isEmpty = !store.isLoading && store.groups.length === 0;
+
+	const items: CollapseProps['items'] = store.groups.map((group) => ({
+		key: group.id,
+		label: <GroupHeader group={group} />,
+		extra: <GroupHeaderActions group={group} />,
+		children: <GroupMappers group={group} />,
+	}));
+
+	const skeletonBanners = (
+		<div className={styles.skeletonList}>
+			{Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (
+				<div
+					// eslint-disable-next-line react/no-array-index-key
+					key={`group-skeleton-${index}`}
+					className={styles.skeletonBanner}
+				>
+					<div className={styles.skeletonGroupLeft}>
+						<Skeleton.Input
+							active
+							size="small"
+							style={{ width: index % 2 === 0 ? 200 : 140 }}
+						/>
+						<Skeleton.Input active size="small" style={{ width: 64 }} />
+					</div>
+					<div className={styles.skeletonGroupRight}>
+						<Skeleton.Button active size="small" shape="round" />
+					</div>
+				</div>
+			))}
+		</div>
+	);
+
+	if (isEmpty) {
+		return (
+			<div className={styles.tableEmpty} data-testid="mapper-groups-empty">
+				No mapping groups yet.
+			</div>
+		);
+	}
+
+	return (
+		<div data-testid="mappings-table">
+			<table className={styles.table}>
+				<MappingsColgroup />
+				<thead>
+					<tr className={styles.headerRow}>
+						<th className={styles.headerCell}>Target</th>
+						<th className={styles.headerCell}>Sources</th>
+						<th className={styles.headerCell}>Writes to</th>
+						<th className={styles.headerCell}>Status</th>
+					</tr>
+				</thead>
+			</table>
+			{store.isLoading ? (
+				skeletonBanners
+			) : (
+				<Collapse
+					className={styles.groupsCollapse}
+					activeKey={expandedGroups}
+					onChange={(keys): void =>
+						setExpandedGroups(Array.isArray(keys) ? keys : [keys])
+					}
+					bordered={false}
+					destroyInactivePanel
+					expandIcon={({ isActive }): JSX.Element =>
+						isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+					}
+					items={items}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default MappingsTable;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/constants.ts

@@ -0,0 +1 @@
+export const COLUMN_COUNT = 4;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/hooks/useAttributeMappingStore.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { SpantypesSpanMapperGroupDTO } from 'api/generated/services/sigNoz.schemas';
+import { useListSpanMapperGroups } from 'api/generated/services/spanmapper';
+
+import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
+import { buildMappingGroup } from 'container/LLMObservability/AttributeMapping/utils';
+
+export interface AttributeMappingStore {
+	groups: MappingGroup[];
+	isLoading: boolean;
+	isError: boolean;
+}
+
+// Read-only store for the listing view: loads the server groups only. Each
+// group's mappers are fetched lazily when its panel is expanded (see
+// GroupMappers), so page load is a single request instead of an N+1 fan-out
+// across every group. Editing (enabled toggles, save/discard) and its drawers
+// land in a later PR — this PR only lists.
+export function useAttributeMappingStore(): AttributeMappingStore {
+	const groupsQuery = useListSpanMapperGroups();
+
+	const groups = useMemo<MappingGroup[]>(() => {
+		const serverGroups: SpantypesSpanMapperGroupDTO[] =
+			groupsQuery.data?.data?.items ?? [];
+		return serverGroups.map((group) => buildMappingGroup(group));
+	}, [groupsQuery.data]);
+
+	return {
+		groups,
+		isLoading: groupsQuery.isLoading,
+		isError: groupsQuery.isError,
+	};
+}

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

@@ -2,12 +2,5 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	padding: var(--spacing-12);
-}
-
-.tableEmpty {
-	padding: var(--spacing-12) var(--spacing-6);
-	text-align: center;
-	color: var(--l3-foreground);
-	font-size: var(--periscope-font-size-base);
+	padding: var(--spacing-0);
 }

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -1,9 +1,27 @@
+import { Tabs } from '@signozhq/ui/tabs';
+
 import AttributeMappingHeader from './components/AttributeMappingHeader';
+import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import styles from './LLMObservabilityAttributeMapping.module.scss';
 
 const noop = (): void => undefined;
 
 function LLMObservabilityAttributeMapping(): JSX.Element {
+	const tabItems = [
+		{
+			key: 'attribute-mappings',
+			label: 'Attribute mappings',
+			children: <AttributeMappingsTab />,
+		},
+		{
+			key: 'test',
+			label: 'Test',
+			disabled: true,
+			disabledReason: 'Coming soon',
+			children: null,
+		},
+	];
+
 	return (
 		<div
 			className={styles.llmObservabilityAttributeMapping}
@@ -16,9 +34,11 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 				onSave={noop}
 			/>
 
-			<div className={styles.tableEmpty} data-testid="attribute-mapping-empty">
-				No mapping groups configured yet.
-			</div>
+			<Tabs
+				testId="attribute-mapping-tabs"
+				defaultValue="attribute-mappings"
+				items={tabItems}
+			/>
 		</div>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/__tests__/LLMObservabilityAttributeMapping.test.tsx

@@ -0,0 +1,67 @@
+import { rest, server } from 'mocks-server/server';
+import { render, screen } from 'tests/test-utils';
+
+import LLMObservabilityAttributeMapping from '../LLMObservabilityAttributeMapping';
+import { GROUPS_ENDPOINT, makeGroupsResponse, mockGroups } from './fixtures';
+
+function setupGroups(): void {
+	server.use(
+		rest.get(GROUPS_ENDPOINT, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(makeGroupsResponse(mockGroups))),
+		),
+	);
+}
+
+describe('LLMObservabilityAttributeMapping', () => {
+	beforeEach(() => {
+		window.history.pushState(null, '', '/');
+		setupGroups();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders the page shell', () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		expect(
+			screen.getByTestId('llm-observability-attribute-mapping-page'),
+		).toBeInTheDocument();
+	});
+
+	it('shows the attribute-mappings and test sub-tab labels', () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		expect(
+			screen.getByRole('tab', { name: 'Attribute mappings' }),
+		).toBeInTheDocument();
+		expect(screen.getByRole('tab', { name: 'Test' })).toBeInTheDocument();
+	});
+
+	it('activates the attribute-mappings tab by default and renders its content', async () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		const attributeMappingsTab = screen.getByRole('tab', {
+			name: 'Attribute mappings',
+		});
+		expect(attributeMappingsTab).toHaveAttribute('data-state', 'active');
+		await expect(
+			screen.findByTestId('attribute-mappings-tab'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('renders the header with its description and no Save/Discard while pristine', () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		expect(
+			screen.getByText(
+				'Configure source-to-target attribute remapping for LLM traces',
+			),
+		).toBeInTheDocument();
+		// The actions only appear once there are staged changes.
+		expect(screen.queryByTestId('save-changes-btn')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('discard-changes-btn')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('unsaved-changes')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/LLMObservability/AttributeMapping/__tests__/fixtures.ts

@@ -0,0 +1,93 @@
+import {
+	SpantypesFieldContextDTO as FieldContext,
+	SpantypesSpanMapperDTO as Mapper,
+	SpantypesSpanMapperGroupDTO as MapperGroup,
+	SpantypesSpanMapperOperationDTO as MapperOperation,
+} from 'api/generated/services/sigNoz.schemas';
+
+// Endpoint globs used by MSW handlers. The generated client hits relative
+// `/api/v1/span_mapper_groups[...]`, so the `*` prefix matches regardless of
+// base URL.
+export const GROUPS_ENDPOINT = '*/api/v1/span_mapper_groups';
+export function mappersEndpoint(groupId: string): string {
+	return `*/api/v1/span_mapper_groups/${groupId}/span_mappers`;
+}
+
+export function makeGroup(overrides: Partial<MapperGroup> = {}): MapperGroup {
+	return {
+		id: 'group-1',
+		orgId: 'org-1',
+		name: 'demo',
+		enabled: true,
+		condition: {
+			attributes: ['ai.embeddings'],
+			resource: ['cloud.account.id'],
+		},
+		...overrides,
+	};
+}
+
+export function makeMapper(overrides: Partial<Mapper> = {}): Mapper {
+	return {
+		id: 'mapper-1',
+		group_id: 'group-1',
+		name: 'gen_ai.request.model',
+		enabled: true,
+		fieldContext: FieldContext.attribute,
+		config: {
+			sources: [
+				{
+					key: 'genai.model',
+					context: FieldContext.attribute,
+					operation: MapperOperation.copy,
+					priority: 2,
+				},
+				{
+					key: 'llm.model',
+					context: FieldContext.attribute,
+					operation: MapperOperation.move,
+					priority: 1,
+				},
+			],
+		},
+		...overrides,
+	};
+}
+
+// Both list endpoints share the same `{ status, data: { items } }` envelope —
+// the generated schema mis-types the mappers response with the groups DTO
+// (see GroupMappers), but the runtime envelope shape is identical.
+export function makeGroupsResponse(groups: MapperGroup[]): {
+	status: string;
+	data: { items: MapperGroup[] };
+} {
+	return { status: 'ok', data: { items: groups } };
+}
+
+export function makeMappersResponse(mappers: Mapper[]): {
+	status: string;
+	data: { items: Mapper[] };
+} {
+	return { status: 'ok', data: { items: mappers } };
+}
+
+export const mockGroups: MapperGroup[] = [
+	makeGroup({
+		id: 'group-1',
+		name: 'demo',
+		condition: {
+			attributes: ['ai.embeddings'],
+			resource: ['cloud.account.id'],
+		},
+	}),
+	makeGroup({
+		id: 'group-2',
+		name: 'Tool',
+		enabled: false,
+		condition: { attributes: null, resource: null },
+	}),
+];
+
+export const mockMappers: Mapper[] = [
+	makeMapper({ id: 'mapper-1', group_id: 'group-1' }),
+];

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss

@@ -5,23 +5,6 @@
 	gap: var(--spacing-8);
 }
 
-.pageHeaderTitle {
-	display: flex;
-	flex-direction: column;
-}
-
-.title {
-	margin: 0;
-	font-size: var(--periscope-font-size-large);
-	font-weight: var(--font-weight-semibold);
-}
-
-.description {
-	margin: var(--spacing-2) 0 0;
-	font-size: var(--periscope-font-size-base);
-	color: var(--l3-foreground);
-}
-
 .pageHeaderActions {
 	display: flex;
 	align-items: center;

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
 
 import styles from './AttributeMappingHeader.module.scss';
 
@@ -17,38 +18,35 @@ function AttributeMappingHeader({
 }: AttributeMappingHeaderProps): JSX.Element {
 	return (
 		<header className={styles.pageHeader}>
-			<div className={styles.pageHeaderTitle}>
-				<h1 className={styles.title}>Attribute Mapping</h1>
-				<p className={styles.description}>
-					Configure source-to-target attribute remapping for LLM traces
-				</p>
-			</div>
-			<div className={styles.pageHeaderActions}>
-				{isDirty && (
+			<Typography.Text as="p" size="base" color="muted">
+				Configure source-to-target attribute remapping for LLM traces
+			</Typography.Text>
+			{isDirty && (
+				<div className={styles.pageHeaderActions}>
 					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
 						Unsaved changes
 					</span>
-				)}
-				<Button
-					variant="outlined"
-					color="secondary"
-					onClick={onDiscard}
-					disabled={!isDirty || isSaving}
-					testId="discard-changes-btn"
-				>
-					Discard
-				</Button>
-				<Button
-					variant="solid"
-					color="primary"
-					onClick={onSave}
-					loading={isSaving}
-					disabled={!isDirty || isSaving}
-					testId="save-changes-btn"
-				>
-					{isSaving ? 'Saving…' : 'Save changes'}
-				</Button>
-			</div>
+					<Button
+						variant="outlined"
+						color="secondary"
+						onClick={onDiscard}
+						disabled={isSaving}
+						testId="discard-changes-btn"
+					>
+						Discard
+					</Button>
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={onSave}
+						loading={isSaving}
+						disabled={isSaving}
+						testId="save-changes-btn"
+					>
+						{isSaving ? 'Saving…' : 'Save changes'}
+					</Button>
+				</div>
+			)}
 		</header>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/types.ts

@@ -0,0 +1,26 @@
+import {
+	SpantypesFieldContextDTO,
+	SpantypesSpanMapperOperationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export interface SourceConfig {
+	key: string;
+	context: SpantypesFieldContextDTO;
+	operation: SpantypesSpanMapperOperationDTO;
+}
+
+export interface Mapping {
+	id: string;
+	name: string;
+	fieldContext: SpantypesFieldContextDTO;
+	sources: SourceConfig[];
+	enabled: boolean;
+}
+
+export interface MappingGroup {
+	id: string;
+	name: string;
+	attributes: string[];
+	resource: string[];
+	enabled: boolean;
+}

frontend/src/container/LLMObservability/AttributeMapping/utils.ts

@@ -0,0 +1,48 @@
+import {
+	ListSpanMappers200,
+	SpantypesSpanMapperDTO,
+	SpantypesSpanMapperGroupDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { MappingGroup, Mapping, SourceConfig } from './types';
+
+function getMapperSources(mapper: SpantypesSpanMapperDTO): SourceConfig[] {
+	const sources = mapper.config?.sources ?? [];
+	return [...sources]
+		.sort((a, b) => a.priority - b.priority)
+		.map((source) => ({
+			key: source.key,
+			context: source.context,
+			operation: source.operation,
+		}));
+}
+
+export function buildMapping(mapper: SpantypesSpanMapperDTO): Mapping {
+	return {
+		id: mapper.id,
+		name: mapper.name,
+		fieldContext: mapper.fieldContext,
+		sources: getMapperSources(mapper),
+		enabled: mapper.enabled,
+	};
+}
+
+export function buildMappingsFromListResponse(
+	response: ListSpanMappers200,
+): Mapping[] {
+	const items = (response.data?.items ??
+		[]) as unknown as SpantypesSpanMapperDTO[];
+	return items.map(buildMapping);
+}
+
+export function buildMappingGroup(
+	group: SpantypesSpanMapperGroupDTO,
+): MappingGroup {
+	return {
+		id: group.id,
+		name: group.name,
+		attributes: group.condition?.attributes ?? [],
+		resource: group.condition?.resource ?? [],
+		enabled: group.enabled,
+	};
+}

frontend/src/container/ServiceAccountsSettings/__tests__/ServiceAccountsSettings.authz.integration.test.tsx

@@ -208,7 +208,7 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		fireEvent.click(screen.getByRole('button', { name: /New Service Account/i }));
 
-		await screen.findByRole('dialog', { name: /New Service Account/i });
+		await screen.findByTestId('create-service-account-modal');
 		expect(screen.getByPlaceholderText('Enter a name')).toBeInTheDocument();
 	});
 

frontend/src/hooks/useExportData/__tests__/runChunkedExport.test.ts

@@ -0,0 +1,183 @@
+import 'tests/blob-polyfill';
+
+import { fetchExportData } from 'api/v1/download/downloadExportData';
+import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
+import { downloadFile } from 'lib/exportData/downloadFile';
+import { ExportFormat } from 'lib/exportData/types';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { runChunkedExport } from '../runChunkedExport';
+
+jest.mock('api/v1/download/downloadExportData', () => ({
+	fetchExportData: jest.fn(),
+}));
+
+jest.mock('api/v5/v5', () => ({
+	prepareQueryRangePayloadV5: jest.fn(),
+}));
+
+jest.mock('lib/exportData/downloadFile', () => ({
+	downloadFile: jest.fn(),
+	getTimestampedFileName: jest.fn(
+		(base: string, ext: string) => `${base}.${ext}`,
+	),
+}));
+
+const mockFetch = fetchExportData as jest.Mock;
+const mockPreparePayload = prepareQueryRangePayloadV5 as jest.Mock;
+const mockDownloadFile = downloadFile as jest.Mock;
+
+// Minimal query shape — the runner only maps over builder.queryData.
+const query = {
+	builder: { queryData: [{}] },
+} as unknown as Query;
+
+const baseArgs = {
+	query,
+	timeRange: { start: 100, end: 200 },
+	fileNameBase: 'trace-x',
+	format: ExportFormat.Csv,
+	onProgress: jest.fn(),
+};
+
+// EXPORT_PAGE_SIZE is 50_000; rows → parts: 120k → 3, 40k → 1, etc.
+const rowsForParts = (parts: number): number => parts * 50_000;
+
+function runArgs(
+	overrides: Partial<Parameters<typeof runChunkedExport>[0]> = {},
+): Parameters<typeof runChunkedExport>[0] {
+	return {
+		...baseArgs,
+		totalRows: rowsForParts(1),
+		signal: new AbortController().signal,
+		onProgress: jest.fn(),
+		...overrides,
+	};
+}
+
+async function savedFileText(): Promise<string> {
+	expect(mockDownloadFile).toHaveBeenCalledTimes(1);
+	const [blob] = mockDownloadFile.mock.calls[0];
+	return (blob as Blob).text();
+}
+
+describe('runChunkedExport', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockPreparePayload.mockImplementation(({ query: pageQuery }) => ({
+			// Echo the page offset so fetch calls can be asserted per page.
+			queryPayload: { offset: pageQuery.builder.queryData[0].offset },
+		}));
+	});
+
+	it('fetches one page for small exports and saves the file', async () => {
+		mockFetch.mockResolvedValueOnce(new Blob(['h\na,b\n']));
+		const onProgress = jest.fn();
+
+		await runChunkedExport(runArgs({ totalRows: 40_000, onProgress }));
+
+		expect(mockFetch).toHaveBeenCalledTimes(1);
+		expect(mockFetch.mock.calls[0][0].body).toStrictEqual({ offset: 0 });
+		expect(onProgress).toHaveBeenCalledWith(100);
+		await expect(savedFileText()).resolves.toBe('h\na,b\n');
+	});
+
+	it('fetches every page with the right offsets and stitches in order', async () => {
+		mockFetch.mockImplementation(({ body }) =>
+			Promise.resolve(new Blob([`h\nrow-${body.offset}\n`])),
+		);
+
+		await runChunkedExport(runArgs({ totalRows: rowsForParts(3) }));
+
+		const offsets = mockFetch.mock.calls.map(([props]) => props.body.offset);
+		expect(offsets.sort((a, b) => a - b)).toStrictEqual([0, 50_000, 100_000]);
+		await expect(savedFileText()).resolves.toBe(
+			'h\nrow-0\nrow-50000\nrow-100000\n',
+		);
+	});
+
+	it('keeps page order even when later pages resolve first', async () => {
+		const resolvers: Record<number, (b: Blob) => void> = {};
+		mockFetch.mockImplementation(
+			({ body }) =>
+				new Promise((resolve) => {
+					resolvers[body.offset] = resolve;
+				}),
+		);
+
+		const promise = runChunkedExport(runArgs({ totalRows: rowsForParts(3) }));
+		// All 3 pages are in flight (concurrency 3); resolve in reverse order.
+		await Promise.resolve();
+		resolvers[100_000](new Blob(['h\nc\n']));
+		resolvers[50_000](new Blob(['h\nb\n']));
+		resolvers[0](new Blob(['h\na\n']));
+		await promise;
+
+		await expect(savedFileText()).resolves.toBe('h\na\nb\nc\n');
+	});
+
+	it('stops claiming pages once the server runs dry', async () => {
+		// Count says 5 pages but the server only has data for page 0.
+		mockFetch.mockImplementation(({ body }) =>
+			Promise.resolve(body.offset === 0 ? new Blob(['h\na\n']) : new Blob([])),
+		);
+
+		await runChunkedExport(runArgs({ totalRows: rowsForParts(5) }));
+
+		// Workers stop claiming once an empty part is observed — exact count is
+		// timing-dependent, but it must never fetch all 5 pages.
+		expect(mockFetch.mock.calls.length).toBeLessThan(5);
+		await expect(savedFileText()).resolves.toBe('h\na\n');
+	});
+
+	it('rejects on page failure, aborts in-flight siblings, saves nothing', async () => {
+		const seenSignals: AbortSignal[] = [];
+		mockFetch.mockImplementation(({ body, signal }) => {
+			seenSignals.push(signal);
+			return body.offset === 50_000
+				? Promise.reject(new Error('boom'))
+				: new Promise(() => {}); // siblings hang until aborted
+		});
+
+		await expect(
+			runChunkedExport(runArgs({ totalRows: rowsForParts(3) })),
+		).rejects.toThrow('boom');
+
+		expect(seenSignals.every((s) => s.aborted)).toBe(true);
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+	});
+
+	it('propagates a user abort to the page fetches', async () => {
+		const controller = new AbortController();
+		mockFetch.mockImplementation(
+			({ signal }) =>
+				new Promise((_resolve, reject) => {
+					signal.addEventListener('abort', () =>
+						reject(new DOMException('Aborted', 'AbortError')),
+					);
+				}),
+		);
+
+		const promise = runChunkedExport(
+			runArgs({ totalRows: rowsForParts(2), signal: controller.signal }),
+		);
+		await Promise.resolve();
+		controller.abort();
+
+		await expect(promise).rejects.toThrow('Aborted');
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+	});
+
+	it('reports whole-number progress per completed part', async () => {
+		mockFetch.mockImplementation(({ body }) =>
+			Promise.resolve(new Blob([`h\nrow-${body.offset}\n`])),
+		);
+		const onProgress = jest.fn();
+
+		await runChunkedExport(runArgs({ totalRows: rowsForParts(3), onProgress }));
+
+		const reported = onProgress.mock.calls.map(([p]) => p);
+		expect(reported).toHaveLength(3);
+		expect(reported).toStrictEqual(expect.arrayContaining([33, 67, 100]));
+	});
+});

frontend/src/hooks/useExportData/__tests__/useClientExport.test.ts

@@ -0,0 +1,130 @@
+import { act, renderHook } from '@testing-library/react';
+import {
+	downloadFile,
+	getTimestampedFileName,
+} from 'lib/exportData/downloadFile';
+import { ExportFormat } from 'lib/exportData/types';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
+
+import { useClientExport } from '../useClientExport';
+
+jest.mock('lib/exportData/downloadFile', () => ({
+	...jest.requireActual('lib/exportData/downloadFile'),
+	downloadFile: jest.fn(),
+}));
+
+const mockMessageError = jest.fn();
+jest.mock('antd', () => {
+	const actual = jest.requireActual('antd');
+	return {
+		...actual,
+		message: { error: (...args: unknown[]): void => mockMessageError(...args) },
+	};
+});
+
+const mockDownloadFile = downloadFile as jest.Mock;
+
+function timeSeriesResponse(): QueryRangeResponseV5 {
+	return {
+		type: 'time_series',
+		data: {
+			results: [
+				{
+					queryName: 'A',
+					aggregations: [
+						{
+							index: 0,
+							alias: '',
+							meta: {},
+							series: [
+								{
+									labels: [{ key: { name: 'service' }, value: 'a' }],
+									values: [{ timestamp: 1000, value: 12 }],
+								},
+							],
+						},
+					],
+				},
+			],
+		},
+		meta: {},
+	} as unknown as QueryRangeResponseV5;
+}
+
+describe('useClientExport', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		// Freeze the clock so filenames are deterministic — asserted against the
+		// real getTimestampedFileName (the format itself is pinned by an exact
+		// string in downloadFile.test).
+		jest.useFakeTimers().setSystemTime(new Date(2026, 6, 13, 14, 32, 5));
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('exports time_series as CSV to a timestamped <fileName>.csv', () => {
+		const { result } = renderHook(() =>
+			useClientExport({
+				response: timeSeriesResponse(),
+				fileName: 'chart',
+				legendMap: { A: '{{service}}' },
+			}),
+		);
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).toHaveBeenCalledTimes(1);
+		const [content, name, mime] = mockDownloadFile.mock.calls[0];
+		// delegation: the hook names files via getTimestampedFileName
+		expect(name).toBe(getTimestampedFileName('chart', 'csv'));
+		expect(mime).toContain('text/csv');
+		expect(content).toContain('service');
+		expect(content).toContain('a');
+	});
+
+	it('exports as JSONL to a timestamped <fileName>.jsonl with the ndjson mime', () => {
+		const { result } = renderHook(() =>
+			useClientExport({ response: timeSeriesResponse() }),
+		);
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Jsonl });
+		});
+
+		const [content, name, mime] = mockDownloadFile.mock.calls[0];
+		expect(name).toBe(getTimestampedFileName('export', 'jsonl'));
+		expect(mime).toContain('ndjson');
+		expect(content).toContain('"series"');
+	});
+
+	it('does nothing when there is no response', () => {
+		const { result } = renderHook(() => useClientExport({}));
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+		expect(mockMessageError).not.toHaveBeenCalled();
+	});
+
+	it('shows an error and does not download for unsupported result types', () => {
+		const raw = {
+			type: 'raw',
+			data: { results: [] },
+			meta: {},
+		} as unknown as QueryRangeResponseV5;
+		const { result } = renderHook(() => useClientExport({ response: raw }));
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+		expect(mockMessageError).toHaveBeenCalled();
+	});
+});

frontend/src/hooks/useExportData/constants.ts

@@ -0,0 +1,4 @@
+export const EXPORT_PAGE_SIZE = 50_000;
+
+/** Pages fetched in parallel.*/
+export const EXPORT_CONCURRENCY = 3;

frontend/src/hooks/useExportData/runChunkedExport.ts

@@ -0,0 +1,143 @@
+import { fetchExportData } from 'api/v1/download/downloadExportData';
+import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	downloadFile,
+	getTimestampedFileName,
+} from 'lib/exportData/downloadFile';
+import { stitchCsvParts, stitchJsonlParts } from 'lib/exportData/stitchParts';
+import { ExportFormat } from 'lib/exportData/types';
+import store from 'store';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
+
+import { EXPORT_CONCURRENCY, EXPORT_PAGE_SIZE } from './constants';
+
+export interface ChunkedExportArgs {
+	query: Query;
+	timeRange: { start: number; end: number };
+	// Total rows the query is expected to return; drives the page count.
+	totalRows: number;
+	fileNameBase: string;
+}
+
+interface RunChunkedExportProps extends ChunkedExportArgs {
+	format: ExportFormat;
+	signal: AbortSignal;
+	// 0–100 whole number: parts completed over total parts.
+	onProgress: (progress: number) => void;
+}
+
+const MIME_BY_FORMAT: Record<ExportFormat, string> = {
+	[ExportFormat.Csv]: 'text/csv',
+	[ExportFormat.Jsonl]: 'application/x-ndjson',
+};
+
+/**
+ * Chunked server export: fetches export_raw_data pages through a bounded
+ * worker pool (EXPORT_CONCURRENCY wide — pages are independent since offsets
+ * are precomputable), stitches the parts in page order client-side, and saves
+ * a single file.
+ */
+export async function runChunkedExport({
+	query,
+	timeRange,
+	totalRows,
+	fileNameBase,
+	format,
+	signal,
+	onProgress,
+}: RunChunkedExportProps): Promise<void> {
+	const totalParts = Math.max(1, Math.ceil(totalRows / EXPORT_PAGE_SIZE));
+	const workerCount = Math.min(Math.max(1, EXPORT_CONCURRENCY), totalParts);
+
+	// Internal controller so the first failed page (or a user cancel) stops the
+	// whole fleet instead of letting siblings run to completion for nothing.
+	const fleet = new AbortController();
+	const onExternalAbort = (): void => fleet.abort();
+	signal.addEventListener('abort', onExternalAbort);
+	if (signal.aborted) {
+		fleet.abort();
+	}
+
+	const buildPagePayload = (page: number): QueryRangePayloadV5 => {
+		const pageQuery: Query = {
+			...query,
+			builder: {
+				...query.builder,
+				queryData: query.builder.queryData.map((qd) => ({
+					...qd,
+					limit: EXPORT_PAGE_SIZE,
+					pageSize: EXPORT_PAGE_SIZE,
+					offset: page * EXPORT_PAGE_SIZE,
+				})),
+			},
+		};
+
+		return prepareQueryRangePayloadV5({
+			query: pageQuery,
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			// Read directly (not via hooks) — the absolute bounds below take
+			// precedence over the global picker in the payload anyway.
+			globalSelectedInterval: store.getState().globalTime.selectedTime,
+			start: timeRange.start,
+			end: timeRange.end,
+		}).queryPayload;
+	};
+
+	// Indexed by page so out-of-order completion can't scramble the stitch order.
+	const parts = new Array<Blob | undefined>(totalParts);
+	let nextPage = 0;
+	let completedParts = 0;
+	let serverRanDry = false;
+
+	const worker = async (): Promise<void> => {
+		while (!serverRanDry) {
+			const page = nextPage;
+			nextPage += 1;
+			if (page >= totalParts) {
+				return;
+			}
+
+			// eslint-disable-next-line no-await-in-loop
+			const part = await fetchExportData({
+				format,
+				body: buildPagePayload(page),
+				signal: fleet.signal,
+			});
+
+			// Empty part = the row count drifted and the server ran dry early;
+			// stop claiming further pages (later in-flight pages are empty too).
+			if (part.size === 0) {
+				serverRanDry = true;
+				return;
+			}
+
+			parts[page] = part;
+			completedParts += 1;
+			onProgress(Math.round((completedParts / totalParts) * 100));
+		}
+	};
+
+	try {
+		await Promise.all(Array.from({ length: workerCount }, () => worker()));
+	} catch (error) {
+		fleet.abort();
+		throw error;
+	} finally {
+		signal.removeEventListener('abort', onExternalAbort);
+	}
+
+	const orderedParts = parts.filter((part): part is Blob => Boolean(part));
+	const stitched =
+		format === ExportFormat.Csv
+			? await stitchCsvParts(orderedParts)
+			: await stitchJsonlParts(orderedParts);
+
+	downloadFile(
+		stitched,
+		getTimestampedFileName(fileNameBase, format),
+		MIME_BY_FORMAT[format],
+	);
+}

frontend/src/hooks/useExportData/useClientExport.ts

@@ -0,0 +1,93 @@
+import { message } from 'antd';
+import { REQUEST_TYPES } from 'api/v5/queryRange/constants';
+import {
+	downloadFile,
+	getTimestampedFileName,
+} from 'lib/exportData/downloadFile';
+import { exportTimeseriesData } from 'lib/exportData/exportTimeseriesData';
+import { toCsv } from 'lib/exportData/toCsv';
+import { toJsonl } from 'lib/exportData/toJsonl';
+import { ExportFormat, SerializedTable } from 'lib/exportData/types';
+import { useCallback, useState } from 'react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryRangeResponseV5, TimeSeriesData } from 'types/api/v5/queryRange';
+
+const FORMAT_META: Record<ExportFormat, { mime: string; extension: string }> = {
+	[ExportFormat.Csv]: { mime: 'text/csv;charset=utf-8;', extension: 'csv' },
+	[ExportFormat.Jsonl]: {
+		mime: 'application/x-ndjson;charset=utf-8;',
+		extension: 'jsonl',
+	},
+};
+
+// Picks the serializer for the response's request type. Narrows the results
+// union via the response discriminant. scalar lands with #5591; raw/trace are
+// server-exported, distribution is never emitted.
+function serialize(
+	response: QueryRangeResponseV5,
+	yAxisUnit?: string,
+	legendMap?: Record<string, string>,
+	query?: Query,
+): SerializedTable {
+	if (response.type === REQUEST_TYPES.TIME_SERIES) {
+		return exportTimeseriesData({
+			data: response.data.results as TimeSeriesData[],
+			yAxisUnit,
+			legendMap,
+			query,
+		});
+	}
+
+	throw new Error(`Export is not supported for "${response.type}" results`);
+}
+
+interface UseClientExportProps {
+	response?: QueryRangeResponseV5;
+	query?: Query;
+	yAxisUnit?: string;
+	fileName?: string;
+	legendMap?: Record<string, string>;
+}
+
+interface ClientExportOptions {
+	format: ExportFormat;
+}
+
+interface UseClientExportReturn {
+	isExporting: boolean;
+	handleExport: (options: ClientExportOptions) => void;
+}
+
+export function useClientExport({
+	response, // currently supports only qb v5 response. Can extend to support future responses.
+	query,
+	yAxisUnit,
+	fileName = 'export',
+	legendMap,
+}: UseClientExportProps): UseClientExportReturn {
+	const [isExporting, setIsExporting] = useState<boolean>(false);
+
+	const handleExport = useCallback(
+		({ format }: ClientExportOptions): void => {
+			if (!response) {
+				return;
+			}
+
+			setIsExporting(true);
+			try {
+				const table = serialize(response, yAxisUnit, legendMap, query);
+				const content =
+					format === ExportFormat.Jsonl ? toJsonl(table) : toCsv(table);
+				const { mime, extension } = FORMAT_META[format];
+				downloadFile(content, getTimestampedFileName(fileName, extension), mime);
+			} catch {
+				message.error('Failed to export data. Please try again.');
+			} finally {
+				setIsExporting(false);
+			}
+		},
+		[response, query, yAxisUnit, fileName, legendMap],
+	);
+
+	return { isExporting, handleExport };
+}

frontend/src/lib/exportData/__tests__/downloadFile.test.ts

@@ -0,0 +1,56 @@
+import { downloadFile, getTimestampedFileName } from '../downloadFile';
+
+// jsdom doesn't implement the object-URL APIs; define stubs so jest.spyOn can wrap them.
+if (typeof URL.createObjectURL !== 'function') {
+	URL.createObjectURL = (): string => '';
+}
+if (typeof URL.revokeObjectURL !== 'function') {
+	URL.revokeObjectURL = (): void => undefined;
+}
+
+describe('downloadFile', () => {
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('builds a blob anchor, clicks it, and revokes the object URL', () => {
+		const click = jest.fn();
+		const remove = jest.fn();
+		const anchor = {
+			href: '',
+			download: '',
+			click,
+			remove,
+		} as unknown as HTMLAnchorElement;
+
+		(
+			jest.spyOn(document, 'createElement') as unknown as jest.Mock
+		).mockReturnValue(anchor);
+		const createObjectURL = jest
+			.spyOn(URL, 'createObjectURL')
+			.mockReturnValue('blob:mock');
+		const revokeObjectURL = jest.spyOn(URL, 'revokeObjectURL');
+
+		downloadFile('hello', 'export.csv', 'text/csv');
+
+		expect(anchor.download).toBe('export.csv');
+		expect(anchor.href).toBe('blob:mock');
+		expect(click).toHaveBeenCalledTimes(1);
+		expect(createObjectURL).toHaveBeenCalled();
+		expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock');
+	});
+});
+
+describe('getTimestampedFileName', () => {
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('appends a local timestamp between base and extension', () => {
+		jest.useFakeTimers().setSystemTime(new Date(2026, 6, 8, 14, 32, 5));
+
+		expect(getTimestampedFileName('logs-timeseries', 'csv')).toBe(
+			'logs-timeseries-2026-07-08_14-32-05.csv',
+		);
+	});
+});

frontend/src/lib/exportData/__tests__/exportTimeseriesData.test.ts

@@ -0,0 +1,188 @@
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { TimeSeries, TimeSeriesData } from 'types/api/v5/queryRange';
+
+import { exportTimeseriesData } from '../exportTimeseriesData';
+
+const iso = (ms: number): string => new Date(ms).toISOString();
+
+function makeSeries(
+	labels: Record<string, string>,
+	values: [number, number][],
+): TimeSeries {
+	return {
+		labels: Object.entries(labels).map(([name, value]) => ({
+			key: { name },
+			value,
+		})),
+		values: values.map(([timestamp, value]) => ({ timestamp, value })),
+	};
+}
+
+function makeQuery(
+	queryName: string,
+	buckets: { index?: number; alias?: string; series: TimeSeries[] }[],
+): TimeSeriesData {
+	return {
+		queryName,
+		aggregations: buckets.map((bucket, i) => ({
+			index: bucket.index ?? i,
+			alias: bucket.alias ?? '',
+			meta: {},
+			series: bucket.series,
+		})),
+	};
+}
+
+describe('exportTimeseriesData', () => {
+	it('one row per point: query column, label columns, unit in value header, legend naming', () => {
+		const data = [
+			makeQuery('A', [
+				{
+					series: [
+						makeSeries({ service_name: 'frontend' }, [
+							[1000, 12],
+							[2000, 15],
+						]),
+					],
+				},
+			]),
+		];
+
+		const table = exportTimeseriesData({
+			data,
+			yAxisUnit: 'ms',
+			legendMap: { A: '{{service_name}}' },
+		});
+
+		expect(table.headers).toStrictEqual([
+			'timestamp',
+			'query',
+			'series',
+			'service_name',
+			'value (ms)',
+		]);
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', 'frontend', 'frontend', 12],
+			[iso(2000), 'A', 'frontend', 'frontend', 15],
+		]);
+	});
+
+	it('no legend falls back to the label-set name from getLabelName', () => {
+		const data = [
+			makeQuery('A', [
+				{ series: [makeSeries({ service_name: 'frontend' }, [[1000, 12]])] },
+			]),
+		];
+
+		const table = exportTimeseriesData({ data });
+
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', '{service_name="frontend"}', 'frontend', 12],
+		]);
+	});
+
+	it('multi-query: query is its own column; label keys are unioned', () => {
+		const data = [
+			makeQuery('A', [{ series: [makeSeries({ service: 'x' }, [[1000, 1]])] }]),
+			makeQuery('B', [{ series: [makeSeries({ service: 'y' }, [[1000, 2]])] }]),
+		];
+
+		const table = exportTimeseriesData({
+			data,
+			legendMap: { A: '{{service}}', B: '{{service}}' },
+		});
+
+		expect(table.headers).toStrictEqual([
+			'timestamp',
+			'query',
+			'series',
+			'service',
+			'value',
+		]);
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', 'x', 'x', 1],
+			[iso(1000), 'B', 'y', 'y', 2],
+		]);
+	});
+
+	it('multi-aggregation with the builder query: names match the chart legend', () => {
+		const data = [
+			makeQuery('A', [
+				{ index: 0, alias: '__result_0', series: [makeSeries({}, [[1000, 5]])] },
+				{
+					index: 1,
+					alias: '__result_1',
+					series: [makeSeries({}, [[1000, 300]])],
+				},
+			]),
+			makeQuery('B', [
+				{
+					index: 0,
+					alias: '__result_0',
+					series: [
+						makeSeries({ 'cloud.account.id': 'signoz-staging' }, [[1000, 7]]),
+					],
+				},
+			]),
+		];
+
+		const query = {
+			queryType: 'builder',
+			builder: {
+				queryData: [
+					{
+						queryName: 'A',
+						dataSource: 'logs',
+						aggregations: [
+							{ expression: 'count()' },
+							{ expression: 'avg(code.lineno)' },
+						],
+						groupBy: [],
+					},
+					{
+						queryName: 'B',
+						dataSource: 'logs',
+						aggregations: [{ expression: 'count()' }],
+						groupBy: [{ key: 'cloud.account.id' }],
+					},
+				],
+				queryFormulas: [],
+			},
+		} as unknown as Query;
+
+		const table = exportTimeseriesData({ data, query });
+
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', 'count()-A', '', 5],
+			[iso(1000), 'A', 'avg(code.lineno)-A', '', 300],
+			[iso(1000), 'B', '{cloud.account.id="signoz-staging"}', 'signoz-staging', 7],
+		]);
+	});
+
+	it('multi-aggregation without the builder query: falls back to base names', () => {
+		const data = [
+			makeQuery('A', [
+				{ index: 0, alias: '__result_0', series: [makeSeries({}, [[1000, 5]])] },
+				{
+					index: 1,
+					alias: '__result_1',
+					series: [makeSeries({}, [[1000, 300]])],
+				},
+			]),
+		];
+
+		const table = exportTimeseriesData({ data });
+
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', 'A', 5],
+			[iso(1000), 'A', 'A', 300],
+		]);
+	});
+
+	it('empty data: returns a headers-only table', () => {
+		expect(exportTimeseriesData({ data: [] })).toStrictEqual({
+			headers: ['timestamp', 'query', 'series', 'value'],
+			rows: [],
+		});
+	});
+});

frontend/src/lib/exportData/__tests__/formatters.test.ts

@@ -0,0 +1,42 @@
+import { toCsv } from '../toCsv';
+import { toJsonl } from '../toJsonl';
+import { SerializedTable } from '../types';
+
+const table: SerializedTable = {
+	headers: ['timestamp', 'value'],
+	rows: [
+		['t1', 12],
+		['t2', 15],
+	],
+};
+
+describe('toCsv', () => {
+	it('emits a header row then one row per record, in column order', () => {
+		expect(toCsv(table).split(/\r?\n/)).toStrictEqual([
+			'timestamp,value',
+			't1,12',
+			't2,15',
+		]);
+	});
+
+	it('quotes values containing the delimiter', () => {
+		const csv = toCsv({ headers: ['name', 'value'], rows: [['a,b', 1]] });
+		expect(csv.split(/\r?\n/)).toStrictEqual(['name,value', '"a,b",1']);
+	});
+
+	it('emits only the header row when there are no data rows', () => {
+		expect(toCsv({ headers: ['timestamp'], rows: [] })).toBe('timestamp\r\n');
+	});
+});
+
+describe('toJsonl', () => {
+	it('emits one JSON object per row keyed by header', () => {
+		expect(toJsonl(table)).toBe(
+			'{"timestamp":"t1","value":12}\n{"timestamp":"t2","value":15}',
+		);
+	});
+
+	it('emits an empty string when there are no rows', () => {
+		expect(toJsonl({ headers: ['timestamp'], rows: [] })).toBe('');
+	});
+});

frontend/src/lib/exportData/__tests__/stitchParts.test.ts

@@ -0,0 +1,100 @@
+import 'tests/blob-polyfill';
+
+import { stitchCsvParts, stitchJsonlParts } from '../stitchParts';
+
+const blob = (content: string): Blob => new Blob([content]);
+
+describe('stitchCsvParts', () => {
+	it('keeps a single part as-is', async () => {
+		const out = await stitchCsvParts([blob('h1,h2\na,b\n')]);
+		await expect(out.text()).resolves.toBe('h1,h2\na,b\n');
+		expect(out.type).toBe('text/csv');
+	});
+
+	it('strips the header row from parts after the first', async () => {
+		const out = await stitchCsvParts([
+			blob('h1,h2\na,b\n'),
+			blob('h1,h2\nc,d\n'),
+			blob('h1,h2\ne,f\n'),
+		]);
+		await expect(out.text()).resolves.toBe('h1,h2\na,b\nc,d\ne,f\n');
+	});
+
+	it('handles CRLF line endings (the \\r dies with the header)', async () => {
+		const out = await stitchCsvParts([
+			blob('h1,h2\r\na,b\r\n'),
+			blob('h1,h2\r\nc,d\r\n'),
+		]);
+		await expect(out.text()).resolves.toBe('h1,h2\r\na,b\r\nc,d\r\n');
+	});
+
+	it('inserts a newline at the seam when a part lacks a trailing one', async () => {
+		const out = await stitchCsvParts([blob('h1,h2\na,b'), blob('h1,h2\nc,d')]);
+		await expect(out.text()).resolves.toBe('h1,h2\na,b\nc,d\n');
+	});
+
+	it('preserves multi-byte characters around the header boundary', async () => {
+		const out = await stitchCsvParts([
+			blob('höader,h2\naä,b\n'),
+			blob('höader,h2\ncö,d\n'),
+		]);
+		await expect(out.text()).resolves.toBe('höader,h2\naä,b\ncö,d\n');
+	});
+
+	it('strips headers longer than the initial 8KB sniff window', async () => {
+		// Forces findFirstNewlineEnd through its window-doubling path.
+		const hugeHeader = Array.from({ length: 1200 }, (_, i) => `column_${i}`).join(
+			',',
+		);
+		expect(hugeHeader.length).toBeGreaterThan(8192);
+		const out = await stitchCsvParts([
+			blob(`${hugeHeader}\na,b\n`),
+			blob(`${hugeHeader}\nc,d\n`),
+		]);
+		await expect(out.text()).resolves.toBe(`${hugeHeader}\na,b\nc,d\n`);
+	});
+
+	it('skips empty and header-only parts', async () => {
+		const out = await stitchCsvParts([
+			blob('h1,h2\na,b\n'),
+			blob(''),
+			blob('h1,h2\n'),
+			blob('h1,h2'),
+			blob('h1,h2\nc,d\n'),
+		]);
+		await expect(out.text()).resolves.toBe('h1,h2\na,b\nc,d\n');
+	});
+
+	it('returns an empty blob for no parts', async () => {
+		const out = await stitchCsvParts([]);
+		expect(out.size).toBe(0);
+	});
+});
+
+describe('stitchJsonlParts', () => {
+	it('concatenates parts without stripping anything', async () => {
+		const out = await stitchJsonlParts([
+			blob('{"a":1}\n{"a":2}\n'),
+			blob('{"a":3}\n'),
+		]);
+		await expect(out.text()).resolves.toBe('{"a":1}\n{"a":2}\n{"a":3}\n');
+		expect(out.type).toBe('application/x-ndjson');
+	});
+
+	it('guards the seam when a part lacks a trailing newline', async () => {
+		const out = await stitchJsonlParts([blob('{"a":1}'), blob('{"a":2}')]);
+		const text = await out.text();
+		expect(text).toBe('{"a":1}\n{"a":2}\n');
+		// Every line must stay independently parseable.
+		const lines = text.trim().split('\n');
+		expect(lines.map((line) => JSON.parse(line))).toStrictEqual([
+			{ a: 1 },
+			{ a: 2 },
+		]);
+	});
+
+	it('skips empty parts', async () => {
+		const out = await stitchJsonlParts([blob(''), blob('{"a":1}\n'), blob('')]);
+		await expect(out.text()).resolves.toBe('{"a":1}\n');
+	});
+});

frontend/src/lib/exportData/downloadFile.ts

@@ -0,0 +1,29 @@
+/** Triggers a browser download of in-memory content (string or Blob) as a file. */
+export function downloadFile(
+	content: string | Blob,
+	fileName: string,
+	mime: string,
+): void {
+	const blob = new Blob([content], { type: mime });
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement('a');
+	link.href = url;
+	link.download = fileName;
+	link.click();
+	link.remove();
+	URL.revokeObjectURL(url);
+}
+
+/** `base` + local timestamp + extension, e.g. `logs-timeseries-2026-07-08_14-32-05.csv`.
+ * Keeps repeated exports from colliding and records when the export was taken. */
+export function getTimestampedFileName(
+	base: string,
+	extension: string,
+): string {
+	const now = new Date();
+	const pad = (value: number): string => String(value).padStart(2, '0');
+	const stamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(
+		now.getDate(),
+	)}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+	return `${base}-${stamp}.${extension}`;
+}

frontend/src/lib/exportData/exportTimeseriesData.ts

@@ -0,0 +1,154 @@
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { TimeSeries, TimeSeriesData } from 'types/api/v5/queryRange';
+import { QueryData } from 'types/api/widgets/getQuery';
+
+import { SerializedTable } from './types';
+
+interface ExportTimeseriesDataArgs {
+	data: TimeSeriesData[];
+	yAxisUnit?: string;
+	legendMap?: Record<string, string>;
+	// The builder query that produced the data — lets series names resolve
+	// aggregation aliases/expressions exactly like the chart legend does.
+	query?: Query;
+}
+
+// One row of the flattened V5 tree: a single (query, aggregation, label-set) series.
+interface FlatSeries {
+	queryName: string;
+	labels: Record<string, string>;
+	name: string;
+	values: { timestamp: number; value: number }[];
+}
+
+// V5 labels [{key:{name}, value}] → {name: value} (the getLabelName contract).
+function foldLabels(labels: TimeSeries['labels']): Record<string, string> {
+	const record: Record<string, string> = {};
+	(labels ?? []).forEach((label) => {
+		if (label.key?.name) {
+			record[label.key.name] = String(label.value);
+		}
+	});
+	return record;
+}
+
+// Series display name, matching the chart legend: getLabelName for the base
+// (legend template / label-set), then getLegend to resolve the aggregation
+// alias/expression from the builder query (the response only carries
+// auto-generated `__result_N` aliases). Same chain the uPlot layer uses.
+function seriesName(args: {
+	labels: Record<string, string>;
+	queryName: string;
+	legend: string;
+	aggIndex: number;
+	alias: string;
+	query?: Query;
+}): string {
+	const { labels, queryName, legend, aggIndex, alias, query } = args;
+	const baseName = getLabelName(labels, queryName, legend);
+
+	if (!query) {
+		return baseName;
+	}
+
+	const legacySeries = {
+		queryName,
+		metric: labels,
+		values: [],
+		metaData: { alias, index: aggIndex, queryName },
+	} as QueryData;
+
+	return getLegend(legacySeries, query, baseName);
+}
+
+// Walk results → aggregations → series into a flat, named list.
+function flatten(
+	data: TimeSeriesData[],
+	legendMap?: Record<string, string>,
+	query?: Query,
+): FlatSeries[] {
+	const flat: FlatSeries[] = [];
+	data.forEach((result) => {
+		const queryName = result.queryName ?? '';
+		const legend = legendMap?.[queryName] ?? '';
+		(result.aggregations ?? []).forEach((bucket) => {
+			(bucket.series ?? []).forEach((series) => {
+				const labels = foldLabels(series.labels);
+				flat.push({
+					queryName,
+					labels,
+					name: seriesName({
+						labels,
+						queryName,
+						legend,
+						aggIndex: bucket.index ?? 0,
+						alias: bucket.alias ?? '',
+						query,
+					}),
+					values: (series.values ?? []).map((value) => ({
+						timestamp: value.timestamp,
+						value: value.value,
+					})),
+				});
+			});
+		});
+	});
+	return flat;
+}
+
+// Appends the y-axis unit to the value header: `value` → `value (ms)`.
+function withUnit(header: string, yAxisUnit?: string): string {
+	return yAxisUnit ? `${header} (${yAxisUnit})` : header;
+}
+
+function toIso(timestamp: number): string {
+	return new Date(timestamp).toISOString();
+}
+
+// Tidy (LONG) layout: one row per (series, timestamp). query is its own column.
+function buildTable(flat: FlatSeries[], yAxisUnit?: string): SerializedTable {
+	const labelKeySet = new Set<string>();
+	flat.forEach((series) => {
+		Object.keys(series.labels).forEach((key) => labelKeySet.add(key));
+	});
+	const labelKeys = Array.from(labelKeySet).sort();
+
+	const headers = [
+		'timestamp',
+		'query',
+		'series',
+		...labelKeys,
+		withUnit('value', yAxisUnit),
+	];
+
+	const rows: (string | number)[][] = [];
+	flat.forEach((series) => {
+		series.values.forEach(({ timestamp, value }) => {
+			rows.push([
+				toIso(timestamp),
+				series.queryName,
+				series.name,
+				...labelKeys.map((key) => series.labels[key] ?? ''),
+				value,
+			]);
+		});
+	});
+
+	return { headers, rows };
+}
+
+/**
+ * Serializes a V5 time_series result into a format-agnostic tidy table — one
+ * row per (series, timestamp), labels as columns, raw values.
+ * Pure — walks the V5 tree directly; series names match the chart legend.
+ */
+export function exportTimeseriesData({
+	data,
+	yAxisUnit,
+	legendMap,
+	query,
+}: ExportTimeseriesDataArgs): SerializedTable {
+	return buildTable(flatten(data, legendMap, query), yAxisUnit);
+}

frontend/src/lib/exportData/stitchParts.ts

@@ -0,0 +1,85 @@
+/**
+ * Stitches sequentially-fetched export parts (Blobs) into one downloadable
+ * Blob. Pure blob surgery — parts are never parsed and `Blob.slice`/`new Blob`
+ * are zero-copy, so nothing here scales with the data size except the final
+ * browser-managed blob itself.
+ */
+
+const HEADER_SNIFF_BYTES = 8192;
+const NEWLINE_BYTE = 0x0a;
+
+/** Byte offset just past the first newline, or -1 when the blob has none. */
+async function findFirstNewlineEnd(blob: Blob): Promise<number> {
+	let sniffBytes = HEADER_SNIFF_BYTES;
+	for (;;) {
+		// eslint-disable-next-line no-await-in-loop
+		const bytes = new Uint8Array(await blob.slice(0, sniffBytes).arrayBuffer());
+		const newlineIdx = bytes.indexOf(NEWLINE_BYTE);
+		if (newlineIdx !== -1) {
+			return newlineIdx + 1;
+		}
+		if (sniffBytes >= blob.size) {
+			return -1;
+		}
+		sniffBytes *= 2;
+	}
+}
+
+async function endsWithNewline(blob: Blob): Promise<boolean> {
+	const lastByte = new Uint8Array(await blob.slice(blob.size - 1).arrayBuffer());
+	return lastByte[0] === NEWLINE_BYTE;
+}
+
+async function stitchParts(
+	parts: Blob[],
+	{
+		stripHeaderAfterFirst,
+		mime,
+	}: { stripHeaderAfterFirst: boolean; mime: string },
+): Promise<Blob> {
+	const pieces: (Blob | string)[] = [];
+
+	for (let index = 0; index < parts.length; index += 1) {
+		let piece = parts[index];
+
+		if (stripHeaderAfterFirst && index > 0) {
+			// Every part re-sends the header row; drop it on parts 2..N. Byte-level
+			// search (not text) so multi-byte characters can't skew the offset.
+			// ASSUMPTION: the first newline byte ends the header row — i.e. no
+			// column name contains an embedded (RFC 4180 quoted) newline. Header
+			// cells are telemetry field names, which can't carry newlines; quoted
+			// newlines in DATA rows are fine (we only search from byte 0).
+			// eslint-disable-next-line no-await-in-loop
+			const headerEnd = await findFirstNewlineEnd(piece);
+			// A part without any newline is header-only — nothing to keep.
+			piece = headerEnd === -1 ? piece.slice(piece.size) : piece.slice(headerEnd);
+		}
+
+		if (piece.size === 0) {
+			continue;
+		}
+
+		pieces.push(piece);
+		// Guard the seam: without a trailing newline the next part's first row
+		// would concatenate onto this part's last row.
+		// eslint-disable-next-line no-await-in-loop
+		if (!(await endsWithNewline(piece))) {
+			pieces.push('\n');
+		}
+	}
+
+	return new Blob(pieces, { type: mime });
+}
+
+/** Combines CSV parts: part 1 keeps its header, parts 2..N are decapitated. */
+export async function stitchCsvParts(parts: Blob[]): Promise<Blob> {
+	return stitchParts(parts, { stripHeaderAfterFirst: true, mime: 'text/csv' });
+}
+
+/** Combines JSONL parts: plain concatenation with a newline guard per seam. */
+export async function stitchJsonlParts(parts: Blob[]): Promise<Blob> {
+	return stitchParts(parts, {
+		stripHeaderAfterFirst: false,
+		mime: 'application/x-ndjson',
+	});
+}

frontend/src/lib/exportData/toCsv.ts

@@ -0,0 +1,8 @@
+import { unparse } from 'papaparse';
+
+import { SerializedTable } from './types';
+
+/** Serializes a table to CSV. `fields` pins column order regardless of row keys. */
+export function toCsv(table: SerializedTable): string {
+	return unparse({ fields: table.headers, data: table.rows });
+}

frontend/src/lib/exportData/toJsonl.ts

@@ -0,0 +1,12 @@
+import { SerializedTable } from './types';
+
+/** Serializes a table to newline-delimited JSON: one object per row, keyed by header. */
+export function toJsonl(table: SerializedTable): string {
+	return table.rows
+		.map((row) =>
+			JSON.stringify(
+				Object.fromEntries(table.headers.map((header, i) => [header, row[i]])),
+			),
+		)
+		.join('\n');
+}

frontend/src/lib/exportData/types.ts

@@ -0,0 +1,13 @@
+/** Format-agnostic tabular result produced by every exporter. Consumed by the
+ * CSV/JSONL formatters */
+export interface SerializedTable {
+	headers: string[];
+	// One entry per header, in header order. Empty string marks a gap.
+	rows: (string | number)[][];
+}
+
+/** File formats a client-side export can be downloaded as. */
+export enum ExportFormat {
+	Csv = 'csv',
+	Jsonl = 'jsonl',
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/useSwitchToViewMode.test.ts

@@ -1,5 +1,10 @@
 import { renderHook } from '@testing-library/react';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	clearViewPanelHandoff,
+	readViewPanelHandoff,
+} from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/viewPanelHandoffStore';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { useSwitchToViewMode } from '../useSwitchToViewMode';
@@ -18,11 +23,16 @@ jest.mock('hooks/useUrlQuery', () => ({
 }));
 
 const query = { queryType: 'builder' } as unknown as Query;
+const spec = {
+	plugin: { kind: 'signoz/TimeSeriesPanel' },
+	display: { name: 'CPU' },
+} as unknown as DashboardtypesPanelSpecDTO;
 
 describe('useSwitchToViewMode', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockSearch = '';
+		clearViewPanelHandoff();
 	});
 
 	function invoke(): void {
@@ -32,6 +42,7 @@ describe('useSwitchToViewMode', () => {
 				panelId: 'panel-1',
 				panelType: PANEL_TYPES.TIME_SERIES,
 				query,
+				spec,
 			}),
 		);
 		result.current();
@@ -52,6 +63,21 @@ describe('useSwitchToViewMode', () => {
 		).toStrictEqual(query);
 	});
 
+	it('stashes the live draft spec in the sessionStorage handoff, not the URL', () => {
+		invoke();
+
+		expect(readViewPanelHandoff('dash-1', 'panel-1')).toStrictEqual(spec);
+		// The spec must not bloat the URL — the config-only display name never leaks into it.
+		expect(mockSafeNavigate.mock.calls[0][0]).not.toContain('CPU');
+	});
+
+	it('scopes the handoff to the exact dashboard + panel', () => {
+		invoke();
+
+		expect(readViewPanelHandoff('dash-1', 'other-panel')).toBeNull();
+		expect(readViewPanelHandoff('other-dash', 'panel-1')).toBeNull();
+	});
+
 	it('carries dashboard variables through and drops other editor URL state', () => {
 		mockSearch = 'variables=%7B%22a%22%3A1%7D&compositeQuery=stale';
 		invoke();

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

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { generatePath } from 'react-router-dom';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -7,27 +8,35 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
+import { writeViewPanelHandoff } from '../../PanelsAndSectionsLayout/Panel/ViewPanelModal/viewPanelHandoffStore';
+
 interface UseSwitchToViewModeArgs {
 	dashboardId: string;
 	panelId: string;
 	panelType: PANEL_TYPES;
 	query: Query;
+	/** Live (un-saved) draft spec — the query rides in the URL, the rest via the handoff. */
+	spec: DashboardtypesPanelSpecDTO;
 }
 
 /**
- * Callback that leaves the editor for the dashboard with this panel expanded in the
- * View modal, seeded with the live (un-saved) query — V1's "Switch to View Mode".
+ * Leaves the editor for the dashboard with this panel expanded in the View modal, seeded with
+ * the live (un-saved) query + config — V1's "Switch to View Mode". The query rides in the URL
+ * (`compositeQuery`); the rest of the spec rides in a tab-scoped sessionStorage handoff.
  */
 export function useSwitchToViewMode({
 	dashboardId,
 	panelId,
 	panelType,
 	query,
+	spec,
 }: UseSwitchToViewModeArgs): () => void {
 	const { safeNavigate } = useSafeNavigate();
 	const urlQuery = useUrlQuery();
 
 	return useCallback((): void => {
+		writeViewPanelHandoff({ dashboardId, panelId, spec });
+
 		const params = new URLSearchParams();
 		const variables = urlQuery.get(QueryParams.variables);
 		if (variables) {
@@ -42,5 +51,5 @@ export function useSwitchToViewMode({
 		safeNavigate(
 			`${generatePath(ROUTES.DASHBOARD, { dashboardId })}?${params.toString()}`,
 		);
-	}, [safeNavigate, urlQuery, dashboardId, panelId, panelType, query]);
+	}, [safeNavigate, urlQuery, dashboardId, panelId, panelType, query, spec]);
 }

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

@@ -38,6 +38,8 @@ import { useTableColumns } from './hooks/useTableColumns';
 import ListColumnsEditor from './ListColumnsEditor/ListColumnsEditor';
 
 import styles from './PanelEditor.module.scss';
+import logEvent from '@/api/common/logEvent';
+import { DashboardEvents } from '../../constants/events';
 
 interface PanelEditorContainerProps {
 	dashboardId: string;
@@ -204,6 +206,7 @@ function PanelEditorContainer({
 		panelId,
 		panelType: PANEL_KIND_TO_PANEL_TYPE[panelKind],
 		query: currentQuery,
+		spec: draft.spec,
 	});
 
 	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
@@ -234,6 +237,13 @@ function PanelEditorContainer({
 		onClose();
 	}, [isNew, panelId, setScrollTargetId, onClose]);
 
+	const switchToViewMode = useCallback((): void => {
+		logEvent(DashboardEvents.SWITCH_TO_VIEW_MODE, {
+			panelId: panelId,
+		});
+		onSwitchToView();
+	}, [onSwitchToView]);
+
 	return (
 		<div className={styles.page} data-testid="panel-editor-v2">
 			<Header
@@ -243,7 +253,7 @@ function PanelEditorContainer({
 				readOnly={!isEditable}
 				readOnlyReason={editDisabledReason}
 				onSave={onSave}
-				onSwitchToView={onSwitchToView}
+				onSwitchToView={switchToViewMode}
 				onClose={onCloseEditor}
 			/>
 			<ResizablePanelGroup

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

@@ -16,6 +16,8 @@ import ViewPanelModalHeader from './ViewPanelModalHeader';
 import { useViewPanelMode } from './useViewPanelMode';
 import { useViewPanelTimeWindow } from './useViewPanelTimeWindow';
 import styles from './ViewPanelModal.module.scss';
+import logEvent from 'api/common/logEvent';
+import { DashboardEvents } from 'pages/DashboardPageV2/constants/events';
 
 interface ViewPanelModalContentProps {
 	panel: DashboardtypesPanelDTO;
@@ -97,6 +99,14 @@ function ViewPanelModalContent({
 		return null;
 	}
 
+	const onSwitchToEdit = (): void => {
+		// Carry the drilldown edits so the editor opens on them, not the saved panel.
+		logEvent(DashboardEvents.SWITCH_TO_EDIT_MODE, {
+			panelId: panelId,
+		});
+		openPanelEditor(panelId, { editSpec: buildSaveSpec(draft.spec) });
+	};
+
 	return (
 		<div className={styles.content} data-testid="view-panel-modal-content">
 			<ViewPanelModalHeader
@@ -114,10 +124,7 @@ function ViewPanelModalContent({
 						refreshWindow();
 					}
 				}}
-				onSwitchToEdit={(): void =>
-					// Carry the drilldown edits so the editor opens on them, not the saved panel.
-					openPanelEditor(panelId, { editSpec: buildSaveSpec(draft.spec) })
-				}
+				onSwitchToEdit={onSwitchToEdit}
 				panelKind={draft.spec.plugin.kind}
 				queryType={queryType}
 				signal={signal}

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

@@ -13,6 +13,7 @@ import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/
 import type { EQueryType } from 'types/common/dashboard';
 
 import styles from './ViewPanelModal.module.scss';
+import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
 
 interface ViewPanelModalHeaderProps {
 	selectedInterval: Time | CustomTimeType;
@@ -64,6 +65,10 @@ function ViewPanelModalHeader({
 	// Same capabilities-guarded options as the editor's PanelTypeSwitcher, so the two
 	// selectors disable the same kinds (e.g. List under PromQL, metrics-only kinds).
 	const panelTypeItems = usePanelTypeSelectItems({ queryType, signal });
+	const canEditDashboard = useDashboardStore((s) => s.canEditDashboard);
+	const isLocked = useDashboardStore((s) => s.isLocked);
+
+	const canSwitchToEdit = canEditDashboard && !isLocked;
 
 	return (
 		<div className={styles.toolbar}>
@@ -75,15 +80,17 @@ function ViewPanelModalHeader({
 					onChange={onChangePanelKind}
 				/>
 			</div>
-			<Button
-				variant="outlined"
-				color="secondary"
-				prefix={<PenLine />}
-				onClick={onSwitchToEdit}
-				data-testid="view-panel-switch-to-edit"
-			>
-				Switch to Edit Mode
-			</Button>
+			{canSwitchToEdit && (
+				<Button
+					variant="outlined"
+					color="secondary"
+					prefix={<PenLine />}
+					onClick={onSwitchToEdit}
+					data-testid="view-panel-switch-to-edit"
+				>
+					Switch to Edit Mode
+				</Button>
+			)}
 			<Button
 				variant="link"
 				color="primary"

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/useViewPanelMode.ts

@@ -23,8 +23,11 @@ import {
 	type PanelQueryTimeOverride,
 	type UsePanelQueryResult,
 } from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
+import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
 import type { EQueryType } from 'types/common/dashboard';
 
+import { readViewPanelHandoff } from './viewPanelHandoffStore';
+
 interface UseViewPanelModeArgs {
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
@@ -77,25 +80,33 @@ export function useViewPanelMode({
 }: UseViewPanelModeArgs): UseViewPanelModeReturn {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 
-	// Seed the draft from the URL (`compositeQuery` + `graphType`) when present, else the saved
-	// panel — mount-only, so a refresh re-seeds from the URL and in-modal edits survive (V1 parity).
-	const urlQuery = useGetCompositeQueryParam();
+	// Config edits from the editor's "Switch to View Mode" arrive via the handoff; the query
+	// still comes from the URL. Falls back to the saved panel for a plain grid "View".
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const baseSpec = useMemo<DashboardtypesPanelSpecDTO>(
+		() => readViewPanelHandoff(dashboardId, panelId) ?? panel.spec,
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed
+		[],
+	);
+
+	// Mount-only so a refresh re-seeds and in-modal edits survive (V1 parity).
+	const compositeQuery = useGetCompositeQueryParam();
 	const urlGraphType = useUrlQuery().get(
 		QueryParams.graphType,
 	) as PANEL_TYPES | null;
 	const initialPanel = useMemo<DashboardtypesPanelDTO>(
 		() =>
-			urlQuery
+			compositeQuery
 				? {
 						...panel,
 						spec: buildViewPanelSpec({
-							spec: panel.spec,
-							query: urlQuery,
+							spec: baseSpec,
+							query: compositeQuery,
 							panelType:
-								urlGraphType ?? PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
+								urlGraphType ?? PANEL_KIND_TO_PANEL_TYPE[baseSpec.plugin.kind],
 						}),
 					}
-				: panel,
+				: { ...panel, spec: baseSpec },
 		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed from the URL
 		[],
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/viewPanelHandoffStore.ts

@@ -0,0 +1,43 @@
+import getSessionStorage from 'api/browser/sessionstorage/get';
+import removeSessionStorage from 'api/browser/sessionstorage/remove';
+import setSessionStorage from 'api/browser/sessionstorage/set';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { SESSIONSTORAGE } from 'constants/sessionStorage';
+
+interface ViewPanelHandoff {
+	/** Correlator: the read returns the spec only for this exact dashboard + panel. */
+	dashboardId: string;
+	panelId: string;
+	spec: DashboardtypesPanelSpecDTO;
+}
+
+/**
+ * Tab-scoped handoff of the editor's un-saved draft spec to the View modal, so "Switch to View
+ * Mode" carries config edits — not just the query, which stays in the URL. sessionStorage keeps
+ * the link small yet survives a refresh, and clears the edits when the tab closes.
+ */
+export function writeViewPanelHandoff(handoff: ViewPanelHandoff): void {
+	setSessionStorage(SESSIONSTORAGE.VIEW_PANEL_HANDOFF, JSON.stringify(handoff));
+}
+
+export function readViewPanelHandoff(
+	dashboardId: string,
+	panelId: string,
+): DashboardtypesPanelSpecDTO | null {
+	const raw = getSessionStorage(SESSIONSTORAGE.VIEW_PANEL_HANDOFF);
+	if (!raw) {
+		return null;
+	}
+	try {
+		const handoff = JSON.parse(raw) as ViewPanelHandoff;
+		return handoff.dashboardId === dashboardId && handoff.panelId === panelId
+			? handoff.spec
+			: null;
+	} catch {
+		return null;
+	}
+}
+
+export function clearViewPanelHandoff(): void {
+	removeSessionStorage(SESSIONSTORAGE.VIEW_PANEL_HANDOFF);
+}

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

@@ -6,6 +6,8 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
+import { clearViewPanelHandoff } from '../ViewPanelModal/viewPanelHandoffStore';
+
 export interface UseViewPanelApi {
 	/** Panel id currently expanded in the View modal; null when none is open. */
 	expandedPanelId: string | null;
@@ -41,10 +43,11 @@ export function useViewPanel(): UseViewPanelApi {
 			// Copy before mutating: useUrlQuery returns a memoized instance.
 			const next = new URLSearchParams(urlQuery);
 			next.set(QueryParams.expandedWidgetId, panelId);
-			// Drop any leftover in-modal query/kind so a plain View opens on the saved
-			// panel, not a stale URL query the modal would otherwise hydrate from.
+			// Drop leftover in-modal query/kind + the editor's handoff so a plain View opens
+			// on the saved panel, not stale state the modal would otherwise hydrate from.
 			next.delete(QueryParams.compositeQuery);
 			next.delete(QueryParams.graphType);
+			clearViewPanelHandoff();
 			safeNavigate(`${pathname}?${next.toString()}`);
 		},
 		[pathname, safeNavigate, urlQuery],
@@ -55,6 +58,8 @@ export function useViewPanel(): UseViewPanelApi {
 			const next = new URLSearchParams(urlQuery);
 			next.set(QueryParams.expandedWidgetId, panelId);
 			next.set(QueryParams.graphType, panelType);
+			// A grid drilldown opens on the saved panel, never a stale editor handoff.
+			clearViewPanelHandoff();
 			// Same encoding the query builder uses (see `useGetCompositeQueryParam`): the URL
 			// value is `encodeURIComponent(JSON.stringify(query))`, decoded once on read.
 			next.set(
@@ -73,6 +78,7 @@ export function useViewPanel(): UseViewPanelApi {
 		// (the in-modal query builder writes compositeQuery, V1 parity).
 		next.delete(QueryParams.compositeQuery);
 		next.delete(QueryParams.graphType);
+		clearViewPanelHandoff();
 		const search = next.toString();
 		safeNavigate(search ? `${pathname}?${search}` : pathname);
 	}, [pathname, safeNavigate, urlQuery]);

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/DynamicSelector.tsx

@@ -3,7 +3,10 @@ import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from 'constants/queryCacheTime';
 import type { AppState } from 'store/reducers';
 import type { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -48,9 +51,10 @@ function DynamicSelector({
 	onChange,
 	onAutoSelect,
 }: DynamicSelectorProps): JSX.Element {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const existingQuery = useMemo(
 		() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
@@ -96,8 +100,10 @@ function DynamicSelector({
 				!!variable.dynamicAttribute &&
 				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
 			refetchOnWindowFocus: false,
-			// Each cycle mints a fresh key; a small cacheTime bounds cache churn.
-			cacheTime: DASHBOARD_CACHE_TIME,
+			// Each cycle mints a fresh key; 0 under auto-refresh so entries don't pile up (V1 parity).
+			cacheTime: isAutoRefreshDisabled
+				? DASHBOARD_CACHE_TIME
+				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
 			onSettled: (_, error) =>
 				error
 					? onVariableFetchFailure(variable.name)

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/QuerySelector.tsx

@@ -3,7 +3,10 @@ import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from 'constants/queryCacheTime';
 import type { AppState } from 'store/reducers';
 import type { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -44,9 +47,10 @@ function QuerySelector({
 	onChange,
 	onAutoSelect,
 }: QuerySelectorProps): JSX.Element {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 	const payload = useMemo(() => selectionToPayload(selections), [selections]);
 
 	const {
@@ -80,8 +84,10 @@ function QuerySelector({
 		{
 			enabled: isVariableFetching || (isVariableSettled && hasVariableFetchedOnce),
 			refetchOnWindowFocus: false,
-			// Each cycle mints a fresh key; a small cacheTime bounds cache churn.
-			cacheTime: DASHBOARD_CACHE_TIME,
+			// Each cycle mints a fresh key; 0 under auto-refresh so entries don't pile up (V1 parity).
+			cacheTime: isAutoRefreshDisabled
+				? DASHBOARD_CACHE_TIME
+				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
 			onSettled: (_, error) =>
 				error
 					? onVariableFetchFailure(variable.name)

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

@@ -2,6 +2,10 @@
 import { useSelector } from 'react-redux';
 import { act, renderHook } from '@testing-library/react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from 'constants/queryCacheTime';
 
 import { usePanelQuery } from '../usePanelQuery';
 import { useGetQueryRangeV5 } from '../useGetQueryRangeV5';
@@ -432,4 +436,28 @@ describe('usePanelQuery', () => {
 			expect(result.current.pagination?.pageIndex).toBe(0);
 		});
 	});
+
+	describe('cacheTime (auto-refresh OOM guard)', () => {
+		const withAutoRefreshDisabled = (disabled: boolean): void => {
+			mockUseSelector.mockImplementation((selector: unknown) =>
+				(selector as (state: { globalTime: unknown }) => unknown)({
+					globalTime: { ...DEFAULT_GLOBAL_TIME, isAutoRefreshDisabled: disabled },
+				}),
+			);
+		};
+
+		it('caches for DASHBOARD_CACHE_TIME when auto-refresh is disabled', () => {
+			withAutoRefreshDisabled(true);
+			renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
+			const [{ cacheTime }] = mockUseGetQueryRangeV5.mock.calls[0];
+			expect(cacheTime).toBe(DASHBOARD_CACHE_TIME);
+		});
+
+		it('drops cacheTime to 0 when auto-refresh is enabled', () => {
+			withAutoRefreshDisabled(false);
+			renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
+			const [{ cacheTime }] = mockUseGetQueryRangeV5.mock.calls[0];
+			expect(cacheTime).toBe(DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED);
+		});
+	});
 });

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

@@ -13,6 +13,8 @@ export interface UseGetQueryRangeV5Args {
 	enabled: boolean;
 	/** Retain prior data across a key change (list paging) so the table + pager stay mounted. */
 	keepPreviousData?: boolean;
+	/** Unused-entry TTL; callers drop to 0 under auto-refresh to bound cache growth (V1 parity). */
+	cacheTime?: number;
 }
 
 /**
@@ -46,6 +48,7 @@ export function useGetQueryRangeV5({
 	queryKey,
 	enabled,
 	keepPreviousData,
+	cacheTime,
 }: UseGetQueryRangeV5Args): UseQueryResult<QueryRangeV5200, Error> {
 	return useQuery<QueryRangeV5200, Error>({
 		queryKey,
@@ -53,5 +56,6 @@ export function useGetQueryRangeV5({
 		enabled,
 		retry: retryUnlessClientError,
 		keepPreviousData,
+		cacheTime,
 	});
 }

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

@@ -4,6 +4,10 @@ import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from 'constants/queryCacheTime';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -110,6 +114,7 @@ export function usePanelQuery({
 		selectedTime: globalSelectedInterval,
 		maxTime,
 		minTime,
+		isAutoRefreshDisabled,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
 	// Resolved variable values for this dashboard, published by useResolvedVariables.
@@ -243,6 +248,10 @@ export function usePanelQuery({
 		enabled: enabled && runnable && !isWaitingOnVariable,
 		// Hold the current page while the next loads (offset re-keys) so the pager doesn't flash.
 		keepPreviousData: isPaginated,
+		// 0 under auto-refresh so time-keyed entries don't accumulate and OOM the tab (V1 parity).
+		cacheTime: isAutoRefreshDisabled
+			? DASHBOARD_CACHE_TIME
+			: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
 	});
 
 	const queryClient = useQueryClient();

frontend/src/pages/DashboardPageV2/constants/events.ts

@@ -0,0 +1,4 @@
+export enum DashboardEvents {
+	SWITCH_TO_EDIT_MODE = 'View Panel: Switch to edit mode',
+	SWITCH_TO_VIEW_MODE = 'Edit Panel: Switch to view mode',
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/MissingSpansBanner.tsx

@@ -5,7 +5,7 @@ import { ArrowUpRight } from '@signozhq/icons';
 import styles from './MissingSpansBanner.module.scss';
 
 const MISSING_SPANS_DOCS_URL =
-	'https://signoz.io/docs/userguide/traces/#missing-spans';
+	'https://signoz.io/docs/traces-management/troubleshooting/faqs/#q-why-are-some-spans-missing-from-a-trace';
 
 function MissingSpansBanner(): JSX.Element | null {
 	// Session-only dismissal — not persisted, so the banner returns on reload.

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -21,6 +21,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { TraceDetailEventKeys, TraceDetailEvents } from '../events';
 import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
 import { useTraceStore } from '../stores/traceStore';
+import TraceDownloadPanel from './TraceDownloadPanel';
 import EntityMetadataRow from '../EntityMetadata/EntityMetadataRow';
 import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
@@ -43,6 +44,7 @@ export interface TraceMetadataForHeader {
 	rootServiceEntryPoint: string;
 	rootSpanStatusCode: string;
 	hasMissingSpans: boolean;
+	totalSpansCount: number;
 }
 
 interface TraceDetailsHeaderProps {
@@ -168,6 +170,10 @@ function TraceDetailsHeader({
 										showTraceDetails={showTraceDetails}
 										onToggleTraceDetails={handleToggleTraceDetails}
 										onOpenPreviewFields={(): void => setIsPreviewFieldsOpen(true)}
+										traceId={traceID || ''}
+										startTime={filterMetadata.startTime}
+										endTime={filterMetadata.endTime}
+										totalSpansCount={traceMetadata?.totalSpansCount || 0}
 									/>
 								</div>
 							</TooltipProvider>
@@ -228,6 +234,8 @@ function TraceDetailsHeader({
 				onClose={(): void => setIsAnalyticsOpen(false)}
 				onTabChange={handleAnalyticsTabChange}
 			/>
+
+			<TraceDownloadPanel />
 		</div>
 	);
 }

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDownloadPanel.module.scss

@@ -0,0 +1,42 @@
+.downloadPanel {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+	padding: var(--spacing-4);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+}
+
+.title {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--font-weight-medium);
+	color: var(--secondary-foreground);
+	white-space: nowrap;
+}
+
+.loader {
+	color: var(--bg-robin-500);
+	flex-shrink: 0;
+}
+
+.percent {
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--font-weight-semibold);
+	color: var(--l2-foreground);
+	flex-shrink: 0;
+}
+
+.cancelBtn {
+	height: 24px;
+	width: 24px;
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDownloadPanel.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Progress } from '@signozhq/ui/progress';
+import { LoaderCircle, X } from '@signozhq/icons';
+import { FloatingPanel } from 'periscope/components/FloatingPanel';
+
+import { useTraceDownloadStore } from './traceDownloadStore';
+
+import styles from './TraceDownloadPanel.module.scss';
+
+const PANEL_WIDTH = 356;
+const PANEL_HEIGHT = 76;
+
+function TraceDownloadPanel(): JSX.Element {
+	const isDownloading = useTraceDownloadStore((s) => s.isDownloading);
+	const progress = useTraceDownloadStore((s) => s.progress);
+	const cancelDownload = useTraceDownloadStore((s) => s.cancelDownload);
+
+	useEffect(() => cancelDownload, [cancelDownload]);
+
+	const displayProgress = Math.max(1, progress);
+
+	return (
+		<FloatingPanel
+			isOpen={isDownloading}
+			width={PANEL_WIDTH}
+			height={PANEL_HEIGHT}
+			minWidth={PANEL_WIDTH}
+			minHeight={PANEL_HEIGHT}
+			enableResizing={false}
+		>
+			<div className={styles.downloadPanel} data-testid="trace-download-panel">
+				<div className={`${styles.header} floating-panel__drag-handle`}>
+					<span className={styles.title}>
+						Downloading trace
+						<LoaderCircle size={14} className={`animate-spin ${styles.loader}`} />
+					</span>
+					<span className={styles.percent} data-testid="trace-download-percent">
+						{displayProgress}%
+					</span>
+					<Button
+						variant="ghost"
+						size="icon"
+						color="secondary"
+						className={styles.cancelBtn}
+						onClick={cancelDownload}
+						aria-label="Cancel download"
+						data-testid="trace-download-cancel"
+						prefix={<X size={16} />}
+					/>
+				</div>
+				<Progress percent={displayProgress} status="active" showInfo={false} />
+			</div>
+		</FloatingPanel>
+	);
+}
+
+export default TraceDownloadPanel;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceOptionsMenu.tsx

@@ -12,8 +12,10 @@ import {
 	DropdownMenuTrigger,
 } from '@signozhq/ui/dropdown-menu';
 import { Settings2 } from '@signozhq/icons';
+import { ExportFormat } from 'lib/exportData/types';
 
 import { useTraceStore } from '../stores/traceStore';
+import { useDownloadTrace } from './useDownloadTrace';
 
 import styles from './TraceOptionsMenu.module.scss';
 
@@ -21,6 +23,10 @@ interface TraceOptionsMenuProps {
 	showTraceDetails: boolean;
 	onToggleTraceDetails: () => void;
 	onOpenPreviewFields: () => void;
+	traceId: string;
+	startTime: number;
+	endTime: number;
+	totalSpansCount: number;
 }
 
 // Composed from dropdown-menu primitives (instead of DropdownMenuSimple)
@@ -30,6 +36,10 @@ function TraceOptionsMenu({
 	showTraceDetails,
 	onToggleTraceDetails,
 	onOpenPreviewFields,
+	traceId,
+	startTime,
+	endTime,
+	totalSpansCount,
 }: TraceOptionsMenuProps): JSX.Element {
 	const colorByField = useTraceStore((s) => s.colorByField);
 	const setColorByField = useTraceStore((s) => s.setColorByField);
@@ -37,6 +47,13 @@ function TraceOptionsMenu({
 		(s) => s.availableColorByOptions,
 	);
 
+	const { isDownloading, isExportDisabled, downloadTrace } = useDownloadTrace({
+		traceId,
+		startTime,
+		endTime,
+		totalSpansCount,
+	});
+
 	const handleColorByChange = (name: string): void => {
 		const next = availableColorByOptions.find((o) => o.field.name === name);
 		if (next) {
@@ -81,6 +98,32 @@ function TraceOptionsMenu({
 						</DropdownMenuSubContent>
 					</DropdownMenuSub>
 				)}
+				{!isExportDisabled && (
+					<DropdownMenuSub>
+						<DropdownMenuSubTrigger
+							disabled={isDownloading}
+							data-testid="download-trace-submenu"
+						>
+							Download trace
+						</DropdownMenuSubTrigger>
+						<DropdownMenuSubContent className={styles.traceOptionsDropdown}>
+							<DropdownMenuItem
+								clickable
+								onSelect={(): void => downloadTrace(ExportFormat.Csv)}
+								testId="download-trace-csv"
+							>
+								CSV
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								clickable
+								onSelect={(): void => downloadTrace(ExportFormat.Jsonl)}
+								testId="download-trace-jsonl"
+							>
+								JSONL
+							</DropdownMenuItem>
+						</DropdownMenuSubContent>
+					</DropdownMenuSub>
+				)}
 			</DropdownMenuContent>
 		</DropdownMenu>
 	);

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/TraceDetailsHeader.test.tsx

@@ -141,6 +141,7 @@ describe('TraceDetailsHeader – trace metadata row', () => {
 		rootServiceEntryPoint: 'large-trace-root',
 		rootSpanStatusCode: '404',
 		hasMissingSpans: false,
+		totalSpansCount: 42,
 	};
 
 	it('renders the metadata (service, entry point, duration, status) when provided', () => {

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/traceDownload.test.tsx

@@ -0,0 +1,228 @@
+import 'tests/blob-polyfill';
+
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { fetchExportData } from 'api/v1/download/downloadExportData';
+import { downloadFile } from 'lib/exportData/downloadFile';
+import { render } from 'tests/test-utils';
+
+import TraceDownloadPanel from '../TraceDownloadPanel';
+import TraceOptionsMenu from '../TraceOptionsMenu';
+import { MAX_EXPORT_SPANS } from '../useDownloadTrace';
+
+// Integration suite: menu → hook → store → runner → stitchers → panel all run
+// for real; only the true boundaries are mocked (HTTP + file save).
+jest.mock('api/v1/download/downloadExportData', () => ({
+	fetchExportData: jest.fn(),
+}));
+
+jest.mock('lib/exportData/downloadFile', () => ({
+	downloadFile: jest.fn(),
+	getTimestampedFileName: jest.fn(
+		(base: string, ext: string) => `${base}.${ext}`,
+	),
+}));
+
+const mockFetch = fetchExportData as jest.Mock;
+const mockDownloadFile = downloadFile as jest.Mock;
+
+const baseProps = {
+	showTraceDetails: true,
+	onToggleTraceDetails: jest.fn(),
+	onOpenPreviewFields: jest.fn(),
+	traceId: 'trace-123',
+	startTime: 1_000,
+	endTime: 2_000,
+	// 120k spans → 3 export pages of 50k.
+	totalSpansCount: 120_000,
+};
+
+function renderFeature(
+	props: Partial<typeof baseProps> = {},
+): ReturnType<typeof render> {
+	return render(
+		<>
+			<TraceOptionsMenu {...baseProps} {...props} />
+			<TraceDownloadPanel />
+		</>,
+	);
+}
+
+// skipHover: simulated pointer travel fires pointerleave on the subtrigger and
+// radix's grace-area math (zero rects in jsdom) closes the submenu.
+// pointerEventsCheck 0: radix puts pointer-events:none on <body> while open.
+function setupUser(): ReturnType<typeof userEvent.setup> {
+	return userEvent.setup({
+		delay: null,
+		skipHover: true,
+		pointerEventsCheck: 0,
+	});
+}
+
+async function startDownload(
+	format: 'csv' | 'jsonl' = 'csv',
+): Promise<ReturnType<typeof userEvent.setup>> {
+	const user = setupUser();
+	await user.click(screen.getByRole('button', { name: /trace options/i }));
+	await user.click(await screen.findByTestId('download-trace-submenu'));
+	await user.click(await screen.findByTestId(`download-trace-${format}`));
+	return user;
+}
+
+async function savedFileText(): Promise<string> {
+	expect(mockDownloadFile).toHaveBeenCalledTimes(1);
+	const [blob] = mockDownloadFile.mock.calls[0];
+	return (blob as Blob).text();
+}
+
+describe('trace download flow', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('downloads a multi-page trace as one stitched CSV', async () => {
+		mockFetch.mockImplementation(({ body }) =>
+			Promise.resolve(
+				new Blob([`h1,h2\nrow-${body.compositeQuery.queries[0].spec.offset}\n`]),
+			),
+		);
+
+		renderFeature();
+		await startDownload('csv');
+
+		await waitFor(() => expect(mockDownloadFile).toHaveBeenCalled());
+
+		// Real query building: trace scoping, page offsets, ±5min window (seconds→ms).
+		const bodies = mockFetch.mock.calls.map(([props]) => props.body);
+		const specs = bodies.map((b) => b.compositeQuery.queries[0].spec);
+		expect(specs[0].filter.expression).toBe("trace_id = 'trace-123'");
+		expect(specs.map((s) => s.offset).sort((a, b) => a - b)).toStrictEqual([
+			0, 50_000, 100_000,
+		]);
+		expect(bodies[0].start).toBe((baseProps.startTime - 300) * 1e3);
+		expect(bodies[0].end).toBe((baseProps.endTime + 300) * 1e3);
+
+		// Stitched in page order, headers deduped, saved under the trace's name.
+		await expect(savedFileText()).resolves.toBe(
+			'h1,h2\nrow-0\nrow-50000\nrow-100000\n',
+		);
+		expect(mockDownloadFile.mock.calls[0][1]).toBe('trace-trace-123.csv');
+
+		// Panel dismissed once the download completed.
+		await waitFor(() =>
+			expect(screen.queryByTestId('trace-download-panel')).not.toBeInTheDocument(),
+		);
+	});
+
+	it('downloads JSONL when that format is chosen', async () => {
+		mockFetch.mockResolvedValue(new Blob(['{"a":1}\n']));
+
+		renderFeature({ totalSpansCount: 10 });
+		await startDownload('jsonl');
+
+		await waitFor(() => expect(mockDownloadFile).toHaveBeenCalled());
+		expect(mockFetch.mock.calls[0][0].format).toBe('jsonl');
+		expect(mockDownloadFile.mock.calls[0][1]).toBe('trace-trace-123.jsonl');
+	});
+
+	it('shows the progress panel while downloading and cancels from its ✕', async () => {
+		// Fetches hang until aborted — the download stays in flight.
+		mockFetch.mockImplementation(
+			({ signal }) =>
+				new Promise((_resolve, reject) => {
+					signal.addEventListener('abort', () =>
+						reject(new DOMException('Aborted', 'AbortError')),
+					);
+				}),
+		);
+
+		renderFeature();
+		const user = await startDownload();
+
+		// Panel appears with the 1% floor (no part finished yet).
+		const panel = await screen.findByTestId('trace-download-panel');
+		expect(panel).toBeInTheDocument();
+		expect(screen.getByTestId('trace-download-percent')).toHaveTextContent('1%');
+
+		await user.click(screen.getByTestId('trace-download-cancel'));
+
+		await waitFor(() =>
+			expect(screen.queryByTestId('trace-download-panel')).not.toBeInTheDocument(),
+		);
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+	});
+
+	it('disables the submenu trigger while a download is running', async () => {
+		mockFetch.mockImplementation(
+			({ signal }) =>
+				new Promise((_resolve, reject) => {
+					signal.addEventListener('abort', () =>
+						reject(new DOMException('Aborted', 'AbortError')),
+					);
+				}),
+		);
+
+		renderFeature();
+		const user = await startDownload();
+
+		// Reopen the menu mid-download: trigger is disabled by REAL store state.
+		await user.click(screen.getByRole('button', { name: /trace options/i }));
+		const trigger = await screen.findByTestId('download-trace-submenu');
+		expect(trigger).toHaveAttribute('data-disabled');
+
+		// Cleanup: stop the in-flight download so the module-scoped guard resets.
+		await user.click(screen.getByTestId('trace-download-cancel'));
+		await waitFor(() =>
+			expect(screen.queryByTestId('trace-download-panel')).not.toBeInTheDocument(),
+		);
+	});
+
+	it('hides the download option entirely above the export cap', async () => {
+		renderFeature({ totalSpansCount: MAX_EXPORT_SPANS + 1 });
+		const user = setupUser();
+		await user.click(screen.getByRole('button', { name: /trace options/i }));
+
+		await expect(
+			screen.findByRole('menuitem', { name: /preview fields/i }),
+		).resolves.toBeInTheDocument();
+		expect(
+			screen.queryByTestId('download-trace-submenu'),
+		).not.toBeInTheDocument();
+	});
+
+	it('saves nothing and dismisses the panel when a page fails', async () => {
+		mockFetch.mockRejectedValue(new Error('boom'));
+
+		renderFeature();
+		await startDownload();
+
+		await waitFor(() =>
+			expect(screen.queryByTestId('trace-download-panel')).not.toBeInTheDocument(),
+		);
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+	});
+
+	it('cancels the in-flight download when the panel unmounts (leaving the page)', async () => {
+		const seenSignals: AbortSignal[] = [];
+		mockFetch.mockImplementation(
+			({ signal }) =>
+				new Promise((_resolve, reject) => {
+					seenSignals.push(signal);
+					signal.addEventListener('abort', () =>
+						reject(new DOMException('Aborted', 'AbortError')),
+					);
+				}),
+		);
+
+		const { unmount } = renderFeature();
+		await startDownload();
+		await screen.findByTestId('trace-download-panel');
+
+		unmount();
+
+		await waitFor(() =>
+			expect(seenSignals.every((signal) => signal.aborted)).toBe(true),
+		);
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/traceDownloadStore.ts

@@ -0,0 +1,63 @@
+import {
+	ChunkedExportArgs,
+	runChunkedExport,
+} from 'hooks/useExportData/runChunkedExport';
+import { ExportFormat } from 'lib/exportData/types';
+import { create } from 'zustand';
+
+/** 'skipped' = a download was already in flight; the call was ignored. */
+export type TraceDownloadOutcome = 'completed' | 'cancelled' | 'skipped';
+
+interface TraceDownloadState {
+	isDownloading: boolean;
+	// 0–100
+	progress: number;
+	startDownload: (
+		args: ChunkedExportArgs & { format: ExportFormat },
+	) => Promise<TraceDownloadOutcome>;
+	cancelDownload: () => void;
+}
+
+let abortController: AbortController | null = null;
+
+export const useTraceDownloadStore = create<TraceDownloadState>((set) => ({
+	isDownloading: false,
+	progress: 0,
+
+	startDownload: async ({
+		format,
+		...args
+	}: ChunkedExportArgs & {
+		format: ExportFormat;
+	}): Promise<TraceDownloadOutcome> => {
+		if (abortController) {
+			return 'skipped';
+		}
+
+		const controller = new AbortController();
+		abortController = controller;
+		set({ isDownloading: true, progress: 0 });
+
+		try {
+			await runChunkedExport({
+				...args,
+				format,
+				signal: controller.signal,
+				onProgress: (progress: number): void => set({ progress }),
+			});
+			return 'completed';
+		} catch (error) {
+			if (controller.signal.aborted) {
+				return 'cancelled';
+			}
+			throw error;
+		} finally {
+			abortController = null;
+			set({ isDownloading: false });
+		}
+	},
+
+	cancelDownload: (): void => {
+		abortController?.abort();
+	},
+}));

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/traceExportQuery.ts

@@ -0,0 +1,23 @@
+import { listViewInitialTraceQuery } from 'constants/queryBuilder';
+import { LogsAggregatorOperator } from 'types/common/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+export function getTraceExportQuery(traceId: string): Query {
+	const [baseQueryData] = listViewInitialTraceQuery.builder.queryData;
+
+	return {
+		...listViewInitialTraceQuery,
+		builder: {
+			...listViewInitialTraceQuery.builder,
+			queryData: [
+				{
+					...baseQueryData,
+					aggregateOperator: LogsAggregatorOperator.NOOP,
+					filter: { expression: `trace_id = '${traceId}'` },
+					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
+					selectColumns: [],
+				},
+			],
+		},
+	};
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/useDownloadTrace.ts

@@ -0,0 +1,92 @@
+import { useCallback, useMemo } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { ExportFormat } from 'lib/exportData/types';
+
+import { TraceDetailEventKeys, TraceDetailEvents } from '../events';
+import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
+import { useTraceDownloadStore } from './traceDownloadStore';
+import { getTraceExportQuery } from './traceExportQuery';
+
+// Export window pad past the trace bounds so edge spans are never clipped
+// (mirrors SpanDetailsPanel).
+const FIVE_MINUTES_IN_SECONDS = 5 * 60;
+
+// Span-count cap: traces above it hide their download option entirely.
+export const MAX_EXPORT_SPANS = 500_000;
+
+interface UseDownloadTraceProps {
+	traceId: string;
+	// Trace start/end in seconds.
+	startTime: number;
+	endTime: number;
+	totalSpansCount: number;
+}
+
+interface UseDownloadTraceReturn {
+	isDownloading: boolean;
+	isExportDisabled: boolean;
+	downloadTrace: (format: ExportFormat) => void;
+}
+
+export function useDownloadTrace({
+	traceId,
+	startTime,
+	endTime,
+	totalSpansCount,
+}: UseDownloadTraceProps): UseDownloadTraceReturn {
+	const isDownloading = useTraceDownloadStore((s) => s.isDownloading);
+	const startDownload = useTraceDownloadStore((s) => s.startDownload);
+
+	const logTraceEvent = useTraceDetailLogEvent('v3', traceId);
+
+	const query = useMemo(() => getTraceExportQuery(traceId), [traceId]);
+
+	const timeRange = useMemo(
+		() => ({
+			start: startTime - FIVE_MINUTES_IN_SECONDS,
+			end: endTime + FIVE_MINUTES_IN_SECONDS,
+		}),
+		[startTime, endTime],
+	);
+
+	const downloadTrace = useCallback(
+		(format: ExportFormat): void => {
+			logTraceEvent(TraceDetailEvents.DownloadTriggered, {
+				[TraceDetailEventKeys.Format]: format,
+				[TraceDetailEventKeys.TotalSpansCount]: totalSpansCount,
+			});
+
+			const run = async (): Promise<void> => {
+				try {
+					const outcome = await startDownload({
+						query,
+						timeRange,
+						totalRows: totalSpansCount,
+						fileNameBase: `trace-${traceId}`,
+						format,
+					});
+					if (outcome === 'completed') {
+						toast.success('Export completed successfully');
+					} else if (outcome === 'cancelled') {
+						logTraceEvent(TraceDetailEvents.DownloadCancelled, {
+							[TraceDetailEventKeys.Format]: format,
+							[TraceDetailEventKeys.TotalSpansCount]: totalSpansCount,
+						});
+						toast.info('Export cancelled');
+					}
+				} catch (error) {
+					toast.error('Failed to download trace');
+					console.error(error);
+				}
+			};
+			void run();
+		},
+		[query, timeRange, totalSpansCount, traceId, startDownload, logTraceEvent],
+	);
+
+	return {
+		isDownloading,
+		isExportDisabled: totalSpansCount > MAX_EXPORT_SPANS,
+		downloadTrace,
+	};
+}

frontend/src/pages/TraceDetailsV3/events.ts

@@ -6,6 +6,8 @@ export enum TraceDetailEvents {
 	AnalyticsPanelToggled = 'Trace Detail: Analytics panel toggled',
 	AnalyticsTabChanged = 'Trace Detail: Analytics tab changed',
 	SpanPanelTabChanged = 'Trace Detail: Span panel tab changed',
+	DownloadTriggered = 'Trace Detail: Download triggered',
+	DownloadCancelled = 'Trace Detail: Download cancelled',
 }
 
 export enum TraceDetailEventKeys {
@@ -32,6 +34,8 @@ export enum TraceDetailEventKeys {
 	Tab = 'tab',
 	// Span panel tab changed
 	SpanId = 'spanId',
+	// Download triggered (reuses TotalSpansCount for trace size)
+	Format = 'format',
 }
 
 export type TraceDetailView = 'v2' | 'v3';

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -346,6 +346,7 @@ function TraceDetailsV3(): JSX.Element {
 			rootServiceEntryPoint: payload.rootServiceEntryPoint,
 			rootSpanStatusCode: rootSpan?.response_status_code || '',
 			hasMissingSpans: payload.hasMissingSpans || false,
+			totalSpansCount: payload.totalSpansCount || 0,
 		};
 	}, [traceData?.payload]);
 

frontend/src/tests/blob-polyfill.ts

@@ -0,0 +1,34 @@
+/**
+ * jsdom's Blob lacks the modern read methods (arrayBuffer/text). Polyfill via
+ * FileReader (which jsdom does implement); guarded, so it no-ops once jsdom
+ * catches up. Side-effect module — import it at the top of any test touching
+ * Blob contents:
+ *
+ *   import 'tests/blob-polyfill';
+ */
+
+if (typeof Blob.prototype.arrayBuffer === 'undefined') {
+	Blob.prototype.arrayBuffer = function arrayBuffer(
+		this: Blob,
+	): Promise<ArrayBuffer> {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = (): void => resolve(reader.result as ArrayBuffer);
+			reader.onerror = (): void => reject(reader.error);
+			reader.readAsArrayBuffer(this);
+		});
+	};
+}
+
+if (typeof Blob.prototype.text === 'undefined') {
+	Blob.prototype.text = function text(this: Blob): Promise<string> {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = (): void => resolve(reader.result as string);
+			reader.onerror = (): void => reject(reader.error);
+			reader.readAsText(this);
+		});
+	};
+}
+
+export {};

frontend/src/utils/docLinks.ts

@@ -14,7 +14,8 @@ const DOCLINKS = {
 		'https://signoz.io/docs/userguide/logs_clickhouse_queries/',
 	QUERY_CLICKHOUSE_METRICS:
 		'https://signoz.io/docs/userguide/write-a-metrics-clickhouse-query/',
-	AGENT_SKILL_INSTALL: 'https://signoz.io/docs/ai/agent-skills/#installation',
+	AGENT_SKILL_INSTALL:
+		'https://signoz.io/docs/ai/agent-skills/#install-the-plugin',
 };
 
 export default DOCLINKS;

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql/assets/dashboards/overview.json

@@ -1 +0,0 @@
-{}

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql/integration.json

@@ -1,27 +0,0 @@
-{
-  "id": "cloudsql",
-  "title": "GCP Cloud SQL",
-  "icon": "file://icon.svg",
-  "overview": "file://overview.md",
-  "supportedSignals": {
-    "metrics": true,
-    "logs": true
-  },
-  "dataCollected": {
-    "metrics": [],
-    "logs": []
-  },
-  "telemetryCollectionStrategy": {
-    "gcp": {}
-  },
-  "assets": {
-    "dashboards": [
-      {
-        "id": "overview",
-        "title": "GCP Cloud SQL Overview",
-        "description": "Overview of GCP Cloud SQL metrics",
-        "definition": "file://assets/dashboards/overview.json"
-      }
-    ]
-  }
-}

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql/overview.md

@@ -1,3 +0,0 @@
-### Monitor GCP Cloud SQL with SigNoz
-
-Collect key GCP Cloud SQL metrics and view them with an out of the box dashboard.

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql_postgres/integration.json

@@ -0,0 +1,106 @@
+{
+  "id": "cloudsql_postgres",
+  "title": "GCP Cloud SQL for PostgreSQL",
+  "icon": "file://icon.svg",
+  "overview": "file://overview.md",
+  "supportedSignals": {
+    "metrics": true,
+    "logs": true
+  },
+  "dataCollected": {
+    "metrics": [
+      {
+        "name": "cloudsql.googleapis.com/database/up",
+        "unit": "Count",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/cpu/utilization",
+        "unit": "Percent",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/memory/utilization",
+        "unit": "Percent",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/memory/usage",
+        "unit": "Bytes",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/disk/bytes_used",
+        "unit": "Bytes",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/postgresql/num_backends",
+        "unit": "Count",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/postgresql/num_backends_by_state",
+        "unit": "Count",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/postgresql/transaction_count",
+        "unit": "Count",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/postgresql/deadlock_count",
+        "unit": "Count",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/postgresql/vacuum/oldest_transaction_age",
+        "unit": "Count",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/postgresql/insights/aggregate/execution_time",
+        "unit": "Microseconds",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/postgresql/insights/perquery/execution_time",
+        "unit": "Microseconds",
+        "type": "Gauge",
+        "description": ""
+      },
+      {
+        "name": "cloudsql.googleapis.com/database/postgresql/replication/replica_byte_lag",
+        "unit": "Bytes",
+        "type": "Gauge",
+        "description": ""
+      }
+    ],
+    "logs": []
+  },
+  "telemetryCollectionStrategy": {
+    "gcp": {}
+  },
+  "assets": {
+    "dashboards": [
+      {
+        "id": "overview",
+        "title": "GCP Cloud SQL for PostgreSQL Overview",
+        "description": "Overview of GCP Cloud SQL for PostgreSQL metrics",
+        "definition": "file://assets/dashboards/overview.json"
+      }
+    ]
+  }
+}

pkg/modules/cloudintegration/implcloudintegration/fs/definitions/gcp/cloudsql_postgres/overview.md

@@ -0,0 +1,3 @@
+### Monitor GCP Cloud SQL for PostgreSQL with SigNoz
+
+Collect key GCP Cloud SQL for PostgreSQL metrics and view them with an out of the box dashboard.

pkg/modules/inframonitoring/implinframonitoring/checks_constants.go

@@ -16,11 +16,11 @@ const (
 
 // Documentation links — one per component. User-facing; emitted on missing-entries.
 const (
-	docLinkHostMetricsReceiver        = "https://signoz.io/docs/infrastructure-monitoring/user-guides/hostmetrics/#configure-the-hostmetrics-receiver"
-	docLinkKubeletStatsReceiver       = "https://signoz.io/docs/infrastructure-monitoring/user-guides/k8s-metrics/#setup-kubelet-stats-receiver"
-	docLinkK8sClusterReceiver         = "https://signoz.io/docs/infrastructure-monitoring/user-guides/k8s-metrics/#setup-k8s-cluster-receiver"
-	docLinkResourceDetectionProcessor = "https://signoz.io/docs/infrastructure-monitoring/user-guides/hostmetrics/#configure-the-resourcedetection-processor"
-	docLinkK8sAttributesProcessor     = "https://signoz.io/docs/infrastructure-monitoring/user-guides/k8s-metrics/#3-setup-k8sattributesprocessor-to-enable-kubernetes-metadata"
+	docLinkHostMetricsReceiver        = "https://signoz.io/docs/infrastructure-monitoring/hostmetrics/#configure-the-hostmetrics-receiver"
+	docLinkKubeletStatsReceiver       = "https://signoz.io/docs/infrastructure-monitoring/k8s-metrics/#2-configure-the-kubelet-stats-receiver"
+	docLinkK8sClusterReceiver         = "https://signoz.io/docs/infrastructure-monitoring/k8s-metrics/#1-configure-the-k8s-cluster-receiver"
+	docLinkResourceDetectionProcessor = "https://signoz.io/docs/infrastructure-monitoring/hostmetrics/#configure-the-processors"
+	docLinkK8sAttributesProcessor     = "https://signoz.io/docs/infrastructure-monitoring/k8s-metrics/#3-enable-kubernetes-metadata"
 )
 
 var (

pkg/query-service/constants/constants.go

@@ -124,7 +124,7 @@ const (
 // alert related constants
 const (
 	// AlertHelpPage is used in case default alert repo url is not set
-	AlertHelpPage   = "https://signoz.io/docs/userguide/alerts-management/#generator-url"
+	AlertHelpPage   = "https://signoz.io/docs/alerts/"
 	AlertTimeFormat = "2006-01-02 15:04:05"
 )