refactor(dashboard): name distribution spec receivers by role

#### Description

Stacked on #13287, so that one merges first.

The saved views tests touch about 98% of the lines, yet a lot of
behaviour could break without any of them failing. This adds tests for
that behaviour:

- The row link and Copy link follow the selected time range.
- Saving from the header: a failed update, blank names, pressing Enter
twice, keeping the view color, and saving the query that was run.
- The hover card while it loads, when it fails, and when it closes.
- Restoring the last used view, per source.
- The unsaved changes check and spec conversion against what the server
stores.

It also adds the first saved views e2e specs, run against a real
backend:

- Open, create, update, discard, delete and rename a view on the logs
explorer, and check the header is still clean after a reload.
- Row links and Copy link carry the time range, and a Ctrl/Cmd or middle
click opens the view in a new tab.

While adding the tests I found that renaming a view from the row menu
sent the list's copy of the view back as a full replacement, so a stale
list could undo someone else's edit. Rename now reads the stored view
first, and falls back to the list's copy when the user cannot read the
view.

#### Issues closed by this PR

Closes https://github.com/SigNoz/uforge-pod/issues/6397

#### Additional Information

- Each new test fails when the code it covers is broken on purpose.
- Jest: `pnpm jest src/container/SavedViews
src/utils/__tests__/buildExplorerNavigationUrl.test.ts`
- E2E, with the stack up (`pnpm env:start` in `tests/e2e`): `pnpm
playwright test tests/saved-views --project=chromium`
- Opening a view the user cannot read still sends the GET, from
`usePreferenceSync`, which has no read check. The server answers 403 and
the header shows "No view access".

docs/api/openapi.yml

@@ -4526,6 +4526,99 @@ components:
       required:
       - name
       type: object
+    DashboardtypesDistributionAxes:
+      properties:
+        x:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesDistributionXAxis'
+          description: The bucket axis.
+        "y":
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesDistributionYAxis'
+          description: The count axis.
+      type: object
+    DashboardtypesDistributionChartAppearance:
+      properties:
+        percentiles:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesDistributionPercentiles'
+          description: Percentile markers drawn across the bucket axis.
+        stack:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesStackMode'
+          description: 'How groups combine in a bucket: normal (default) stacks them,
+            none draws them side by side, percent stacks them as shares of the bucket.'
+      required:
+      - stack
+      type: object
+    DashboardtypesDistributionPanelSpec:
+      properties:
+        axes:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesDistributionAxes'
+          description: The X (bucket) axis range and Y (count) axis scale.
+        chartAppearance:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesDistributionChartAppearance'
+          description: Stacking and percentile markers.
+        formatting:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+          description: Unit and decimal precision of the bucket bounds; counts take
+            no unit.
+        legend:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesLegend'
+          description: Legend placement and series colors.
+        visualization:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+          description: The time range the bucket counts are summed over.
+      type: object
+    DashboardtypesDistributionPercentiles:
+      properties:
+        enabled:
+          description: Whether percentile markers are drawn. Defaults to true.
+          type: boolean
+        values:
+          description: The percentiles to mark, each in (0, 100), at most 5, no duplicates.
+            Defaults to [50, 90, 99].
+          items:
+            format: double
+            type: number
+          nullable: true
+          type: array
+      required:
+      - enabled
+      - values
+      type: object
+    DashboardtypesDistributionXAxis:
+      properties:
+        max:
+          description: Buckets wholly above this value are hidden. Null shows them
+            all.
+          nullable: true
+          type: number
+        min:
+          description: Buckets wholly below this value are hidden. Null shows them
+            all.
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesDistributionYAxis:
+      properties:
+        scale:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesDistributionYScale'
+          description: 'How counts are spaced: linear (default) or log.'
+      required:
+      - scale
+      type: object
+    DashboardtypesDistributionYScale:
+      enum:
+      - linear
+      - log
+      type: string
     DashboardtypesDynamicVariableSignal:
       enum:
       - traces
@@ -5296,6 +5389,7 @@ components:
         mapping:
           signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+          signoz/DistributionPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDistributionPanelSpec'
           signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
@@ -5318,6 +5412,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDistributionPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -5332,6 +5427,7 @@ components:
       - signoz/TextPanel
       - signoz/HeatmapPanel
       - signoz/ScatterPlotPanel
+      - signoz/DistributionPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -5363,6 +5459,21 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDistributionPanelSpec:
+      properties:
+        kind:
+          description: The panel kind.
+          enum:
+          - signoz/DistributionPanel
+          type: string
+        spec:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesDistributionPanelSpec'
+          description: The options for this panel kind. {} accepts every default.
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
       properties:
         kind:
@@ -5516,9 +5627,9 @@ components:
           - $ref: '#/components/schemas/DashboardtypesPanelPlugin'
           description: 'The visualization: kind is one of signoz/TimeSeriesPanel,
             signoz/BarChartPanel, signoz/AreaChartPanel, signoz/NumberPanel, signoz/PieChartPanel,
-            signoz/TablePanel, signoz/HistogramPanel, signoz/ListPanel, signoz/TextPanel
-            or signoz/HeatmapPanel, and spec holds that kind''s options ({} accepts
-            every default).'
+            signoz/TablePanel, signoz/HistogramPanel, signoz/ListPanel, signoz/TextPanel,
+            signoz/HeatmapPanel or signoz/DistributionPanel, and spec holds that kind''s
+            options ({} accepts every default).'
         queries:
           description: The queries the panel runs. Use exactly one entry for a data
             panel and [] for signoz/TextPanel. To run several named queries or formulas,
@@ -5654,8 +5765,8 @@ components:
           - $ref: '#/components/schemas/Querybuildertypesv5RequestType'
           description: 'The result shape the panel requests: time_series for time
             series, bar, area and histogram panels, scalar for number, table and pie
-            panels, raw for list panels, heatmap for heatmap panels, trace for trace
-            panels.'
+            panels, raw for list panels, heatmap for heatmap panels, distribution
+            for distribution panels, trace for trace panels.'
         spec:
           allOf:
           - $ref: '#/components/schemas/DashboardtypesQuerySpec'
@@ -5812,9 +5923,9 @@ components:
             (builder query over AI observability traces), signoz/CompositeQuery (several
             named queries and formulas), signoz/Formula, signoz/PromQLQuery, signoz/ClickHouseSQL
             or signoz/TraceOperator, and spec holds that kind''s query. Pie and table
-            panels reject signoz/PromQLQuery; heatmap panels reject signoz/AIBuilderQuery
-            and signoz/TraceOperator; list panels accept only signoz/BuilderQuery
-            and signoz/AIBuilderQuery.'
+            panels reject signoz/PromQLQuery; heatmap and distribution panels reject
+            signoz/AIBuilderQuery and signoz/TraceOperator; list panels accept only
+            signoz/BuilderQuery and signoz/AIBuilderQuery.'
       required:
       - plugin
       type: object

frontend/src/container/SavedViews/__tests__/SavedViewHighlightedExpression.test.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { tags } from '@lezer/highlight';
+import { copilotDarkStyle } from '@uiw/codemirror-theme-copilot';
+import { githubLightStyle } from '@uiw/codemirror-theme-github';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { act, render, screen } from 'tests/test-utils';
+
+import SavedViewHighlightedExpression from '../SavedViewHighlightedExpression';
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn(),
+}));
+
+const mockUseIsDarkMode = useIsDarkMode as jest.MockedFunction<
+	typeof useIsDarkMode
+>;
+
+const EXPRESSION = "service.name = 'frontend'";
+
+function stringColor(styles: typeof copilotDarkStyle): string {
+	return (styles ?? []).find(({ tag }) =>
+		(Array.isArray(tag) ? tag : [tag]).includes(tags.string),
+	)?.color as string;
+}
+
+describe('SavedViewHighlightedExpression', () => {
+	it.each([
+		['dark', true, copilotDarkStyle],
+		['light', false, githubLightStyle],
+	])('colours a string value with the %s theme', (_, isDarkMode, styles) => {
+		mockUseIsDarkMode.mockReturnValue(isDarkMode);
+
+		render(<SavedViewHighlightedExpression expression={EXPRESSION} />);
+
+		expect(screen.getByText("'frontend'")).toHaveStyle({
+			color: stringColor(styles),
+		});
+	});
+
+	it('takes the new theme colours when the theme changes', () => {
+		let setIsDarkMode: (isDarkMode: boolean) => void = () => {};
+		function useSwitchableDarkMode(): boolean {
+			const [isDarkMode, setter] = useState(true);
+			setIsDarkMode = setter;
+			return isDarkMode;
+		}
+		mockUseIsDarkMode.mockImplementation(useSwitchableDarkMode);
+		render(<SavedViewHighlightedExpression expression={EXPRESSION} />);
+
+		act(() => setIsDarkMode(false));
+
+		expect(screen.getByText("'frontend'")).toHaveStyle({
+			color: stringColor(githubLightStyle),
+		});
+	});
+});

frontend/src/container/SavedViews/__tests__/SavedViewHoverCard.test.tsx

@@ -5,11 +5,19 @@ import {
 	waitFor,
 	within,
 } from '@testing-library/react';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	AuthtypesTransactionDTO,
+	SavedviewtypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+} from 'lib/authz/utils/authz-test-utils';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import { userEvent } from 'tests/test-utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -222,6 +230,31 @@ describe('SavedViewHoverCard', () => {
 
 			expect(card()).toBeNull();
 		});
+
+		it('does not open when the row menu is pressed before the delay', async () => {
+			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+			await renderPanel();
+
+			fireEvent.mouseEnter(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS / 2);
+			await user.click(within(row('Errors')).getByTestId('saved-views-row-menu'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+
+			expect(card()).toBeNull();
+		});
+
+		it('closes on escape, leaving nothing of the popover behind', async () => {
+			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+			await renderPanel();
+			await openCard('Errors');
+
+			await user.keyboard('{Escape}');
+
+			expect(card()).toBeNull();
+			expect(
+				document.querySelector('[data-radix-popper-content-wrapper]'),
+			).toBeNull();
+		});
 	});
 
 	describe('content', () => {
@@ -312,6 +345,78 @@ describe('SavedViewHoverCard', () => {
 			await waitFor(() => expect(fetches).toBe(2));
 		});
 
+		it('shows a skeleton, not the failure, while the view loads', async () => {
+			let requested = false;
+			let release: () => void = () => undefined;
+			const gate = new Promise<void>((resolve) => {
+				release = resolve;
+			});
+			server.use(
+				rest.get(`${API}/:id`, async (_req, res, ctx) => {
+					requested = true;
+					await gate;
+					return res(ctx.json({ status: 'success', data: errors }));
+				}),
+			);
+			await renderPanel();
+
+			fireEvent.mouseEnter(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+			await waitFor(() => expect(requested).toBe(true));
+
+			expect(
+				screen.getByTestId('saved-view-hover-card-loading'),
+			).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-view-hover-card-error')).toBeNull();
+
+			release();
+			await screen.findByTestId('saved-view-hover-card-query');
+		});
+
+		it('shows a skeleton while the read check is pending', async () => {
+			let release: () => void = () => undefined;
+			const gate = new Promise<void>((resolve) => {
+				release = resolve;
+			});
+			const isRead = (transaction: AuthtypesTransactionDTO): boolean =>
+				transaction.relation === 'read';
+			const isReadAll = (transaction: AuthtypesTransactionDTO): boolean =>
+				isRead(transaction) && transaction.object.selector === '*';
+			// Read on every view would skip the per-view check, so it is denied.
+			server.use(
+				rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+					const payload = (await req.json()) as AuthtypesTransactionDTO[];
+					if (
+						payload.some(
+							(transaction) => isRead(transaction) && !isReadAll(transaction),
+						)
+					) {
+						await gate;
+					}
+					return res(
+						ctx.json(
+							authzMockResponse(
+								payload,
+								payload.map((transaction) => !isReadAll(transaction)),
+							),
+						),
+					);
+				}),
+			);
+			await renderPanel();
+
+			fireEvent.mouseEnter(row('Errors'));
+			advance(SAVED_VIEW_HOVER_CARD_OPEN_DELAY_MS);
+
+			await expect(
+				screen.findByTestId('saved-view-hover-card-loading'),
+			).resolves.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-view-hover-card-query')).toBeNull();
+
+			release();
+			await screen.findByTestId('saved-view-hover-card-query');
+		});
+
 		it('says the view failed to load when its fetch fails', async () => {
 			server.use(
 				rest.get(`${API}/:id`, (_req, res, ctx) =>

frontend/src/container/SavedViews/__tests__/SavedViews.authz.test.tsx

@@ -339,6 +339,45 @@ describe('SavedViews - AuthZ', () => {
 		).resolves.not.toHaveAttribute('data-disabled');
 	});
 
+	it('disables save as new without create, keeping update', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(setupAuthzDeny(SavedViewCreatePermission));
+		const { history } = renderHeader(viewUrl(PATH, errors));
+		await waitFor(() =>
+			expect(screen.getByTestId('saved-views-name')).toHaveTextContent('Errors'),
+		);
+
+		history.push(
+			explorerUrl(PATH, {
+				query: queryWith(DataSource.TRACES, 'has_error = false'),
+				panelType: PANEL_TYPES.LIST,
+				viewKey: errors.id,
+			}),
+		);
+		await userEvent.click(await screen.findByTestId('saved-views-save-changes'));
+
+		await expect(
+			settledRow('saved-views-save-changes-item-save-as-new'),
+		).resolves.toHaveAttribute('data-disabled');
+		await expect(
+			settledRow('saved-views-save-changes-item-update'),
+		).resolves.not.toHaveAttribute('data-disabled');
+	});
+
+	it('offers clear on a view it cannot read', async () => {
+		mockSavedViewsApi([errors]);
+		server.use(setupAuthzDeny(buildSavedViewReadPermission(errors.id)));
+		renderHeader(viewUrl(PATH, errors));
+
+		await waitFor(() =>
+			expect(screen.getByTestId('saved-views-name')).toHaveTextContent(
+				'No view access',
+			),
+		);
+
+		expect(screen.getByTestId('saved-views-clear')).toBeInTheDocument();
+	});
+
 	it('says no access when the check denies read, even if the server returns the view', async () => {
 		mockSavedViewsApi([errors]);
 		server.use(setupAuthzDeny(buildSavedViewReadPermission(errors.id)));

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.lastUsed.test.tsx

@@ -3,6 +3,7 @@ import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { userEvent } from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';
 
 import SavedViewsHeader from '../SavedViewsHeader';
@@ -75,4 +76,39 @@ describe('SavedViewsHeader last used view', () => {
 		expect(chip()).toHaveTextContent('My view');
 		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
 	});
+
+	it('does not bring the view back once it is cleared', async () => {
+		mockSavedViewsApi([errors]);
+		const { history } = renderHeader(explorerUrl(PATH, {}));
+		await waitForView('Errors');
+
+		await userEvent.click(screen.getByTestId('saved-views-clear'));
+		await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+
+		expect(chip()).toHaveTextContent('My view');
+		expect(urlParam(history, QueryParams.viewKey)).toBeNull();
+	});
+
+	it('forgets a last used view that no longer loads', async () => {
+		mockSavedViewsApi([]);
+		renderHeader(explorerUrl(PATH, {}));
+
+		await waitFor(() =>
+			expect(
+				JSON.parse(
+					localStorage.getItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) ?? '{}',
+				),
+			).toStrictEqual({}),
+		);
+		expect(chip()).toHaveTextContent('My view');
+	});
+
+	it('starts on a bare explorer when the stored last used views are unreadable', async () => {
+		localStorage.setItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS, '{not json');
+		mockSavedViewsApi([errors]);
+		renderHeader(explorerUrl(PATH, {}));
+
+		await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+		expect(chip()).toHaveTextContent('My view');
+	});
 });

frontend/src/container/SavedViews/__tests__/SavedViewsHeader.save.test.tsx

@@ -1,10 +1,14 @@
 import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Button } from '@signozhq/ui/button';
 import { toast } from '@signozhq/ui/sonner';
 import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import { DataSource } from 'types/common/queryBuilder';
 
 import SavedViewsHeader from '../SavedViewsHeader';
@@ -19,7 +23,7 @@ import {
 	urlParam,
 	viewUrl,
 } from './savedViewsTestUtils';
-import { mockSavedViewsApi } from './savedViewsApiMock';
+import { API, mockSavedViewsApi } from './savedViewsApiMock';
 
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
@@ -43,6 +47,27 @@ function renderHeader(
 	);
 }
 
+// Edits the current query without running it, so it is not the staged one.
+function EditCurrentQuery(): JSX.Element {
+	const { currentQuery, handleSetQueryData } = useQueryBuilder();
+	return (
+		<Button
+			size="md"
+			variant="solid"
+			color="primary"
+			testId="edit-current-query"
+			onClick={(): void =>
+				handleSetQueryData(0, {
+					...currentQuery.builder.queryData[0],
+					filter: { expression: 'unstaged = true' },
+				})
+			}
+		>
+			Edit query
+		</Button>
+	);
+}
+
 const modal = (): HTMLElement => screen.getByTestId('save-view-modal');
 const isModalOpen = (): boolean => !!screen.queryByTestId('save-view-modal');
 
@@ -160,6 +185,76 @@ describe('SavedViewsHeader saving', () => {
 			expect(toast.success).not.toHaveBeenCalled();
 		});
 
+		it('does not create a view from a blank name submitted with Enter', async () => {
+			const requests = mockSavedViewsApi([]);
+			renderHeader(explorerUrl(PATH, {}));
+
+			await clickCreate();
+			await userEvent.type(screen.getByTestId('save-view-name'), '   {enter}');
+			await act(() => new Promise((resolve) => setTimeout(resolve, 200)));
+
+			expect(requests.created).toHaveLength(0);
+			expect(isModalOpen()).toBe(true);
+		});
+
+		it('ignores Enter while the view is being saved', async () => {
+			let creates = 0;
+			mockSavedViewsApi([]);
+			server.use(
+				rest.post(API, (_req, res, ctx) => {
+					creates += 1;
+					return res(
+						ctx.delay(400),
+						ctx.status(201),
+						ctx.json({ status: 'success', data: { id: 'view-new' } }),
+					);
+				}),
+			);
+			renderHeader(explorerUrl(PATH, {}));
+
+			await clickCreate();
+			await submitName('Slow checkout');
+			await waitFor(() => expect(creates).toBe(1));
+			await userEvent.type(screen.getByTestId('save-view-name'), '{enter}');
+
+			await waitFor(() => expect(isModalOpen()).toBe(false));
+			expect(creates).toBe(1);
+		});
+
+		it('saves the query that was run, not edits made since', async () => {
+			const requests = mockSavedViewsApi([], { createdId: 'view-new' });
+			const { history } = renderWithExplorerProviders(
+				<>
+					<SavedViewsHeader
+						source={SavedviewtypesSourceDTO.traces}
+						onOpenViews={jest.fn()}
+					/>
+					<EditCurrentQuery />
+				</>,
+				explorerUrl(PATH, {}),
+			);
+
+			await userEvent.click(screen.getByTestId('edit-current-query'));
+			await clickCreate();
+			await submitName('Slow checkout');
+
+			await waitFor(() => expect(requests.created).toHaveLength(1));
+			const body = requests.created[0] as {
+				spec: { queries: { spec: { filter?: { expression?: string } } }[] };
+			};
+			expect(body.spec.queries[0].spec.filter?.expression ?? '').not.toContain(
+				'unstaged',
+			);
+			await waitFor(() =>
+				expect(urlParam(history, QueryParams.viewKey)).toBe(
+					JSON.stringify('view-new'),
+				),
+			);
+			expect(
+				decodeURIComponent(urlParam(history, QueryParams.compositeQuery) ?? ''),
+			).not.toContain('unstaged');
+		});
+
 		it('cancel closes the modal without saving', async () => {
 			const requests = mockSavedViewsApi([]);
 			renderHeader(explorerUrl(PATH, {}));
@@ -231,6 +326,37 @@ describe('SavedViewsHeader saving', () => {
 		expect(requests.created).toHaveLength(0);
 	});
 
+	it('update that fails reports the error and never says the view was updated', async () => {
+		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
+		const requests = mockSavedViewsApi([errors], { updateStatus: 500 });
+		await openDirtyView(errors);
+
+		await chooseFromSaveMenu('Update selected view');
+
+		await waitFor(() => expect(toast.error).toHaveBeenCalled());
+		await act(() => new Promise((resolve) => setTimeout(resolve, 100)));
+		expect(requests.updated).toHaveLength(1);
+		expect(toast.success).not.toHaveBeenCalled();
+	});
+
+	it('update keeps the color of the open view', async () => {
+		const base = makeView({ id: 'view-1', displayName: 'Errors' });
+		const colored = {
+			...base,
+			spec: { ...base.spec, display: { color: '#e5484d' } },
+		};
+		const requests = mockSavedViewsApi([colored]);
+		await openDirtyView(colored);
+
+		await chooseFromSaveMenu('Update selected view');
+
+		await waitFor(() => expect(requests.updated).toHaveLength(1));
+		const { body } = requests.updated[0] as {
+			body: { spec: { display?: { color?: string } } };
+		};
+		expect(body.spec.display?.color).toBe('#e5484d');
+	});
+
 	describe('view name toggle with unsaved changes', () => {
 		const errors = makeView({ id: 'view-1', displayName: 'Errors' });
 

frontend/src/container/SavedViews/__tests__/SavedViewsPanel.list.test.tsx

@@ -1,5 +1,6 @@
 import { toast } from '@signozhq/ui/sonner';
 import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import {
@@ -9,6 +10,7 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
+import { DataSource } from 'types/common/queryBuilder';
 
 import SavedViewsPanel from '../SavedViewsPanel';
 import { mockSavedViewsApi } from './savedViewsApiMock';
@@ -219,6 +221,75 @@ describe('SavedViewsPanel list', () => {
 		});
 	});
 
+	it('lists only the views of its own source', async () => {
+		mockSavedViewsApi([
+			mine,
+			makeView({
+				id: 'view-9',
+				displayName: 'Noisy logs',
+				source: SavedviewtypesSourceDTO.logs,
+			}),
+		]);
+		renderPanel();
+
+		await screen.findByTestId('saved-views-list');
+		expect(rowNames('saved-views-created-by-me')).toStrictEqual(['Errors']);
+	});
+
+	describe('last used view', () => {
+		const lastUsedViews = (): unknown =>
+			JSON.parse(localStorage.getItem(LOCALSTORAGE.LAST_USED_SAVED_VIEWS) ?? '{}');
+		const logsEntry = { logs: { key: 'logs-view', value: 'Noisy logs' } };
+
+		it('is remembered under the panel source, keeping the other sources', async () => {
+			localStorage.setItem(
+				LOCALSTORAGE.LAST_USED_SAVED_VIEWS,
+				JSON.stringify(logsEntry),
+			);
+			mockSavedViewsApi([mine, alsoMine]);
+			renderPanel();
+			await screen.findByTestId('saved-views-list');
+			await waitFor(() => expectUsable(rowName('Slow spans')));
+
+			await userEvent.click(rowName('Slow spans'));
+
+			await waitFor(() =>
+				expect(lastUsedViews()).toStrictEqual({
+					...logsEntry,
+					traces: { key: alsoMine.id, value: 'Slow spans' },
+				}),
+			);
+		});
+
+		it('is filed under the source of the panel it was opened from', async () => {
+			const logsView = makeView({
+				id: 'view-9',
+				displayName: 'Noisy logs',
+				source: SavedviewtypesSourceDTO.logs,
+				dataSource: DataSource.LOGS,
+			});
+			mockSavedViewsApi([logsView]);
+			renderWithExplorerProviders(
+				<SavedViewsPanel
+					source={SavedviewtypesSourceDTO.logs}
+					onClose={jest.fn()}
+				/>,
+				explorerUrl(ROUTES.LOGS_EXPLORER, {}),
+				DataSource.LOGS,
+			);
+			await screen.findByTestId('saved-views-list');
+			await waitFor(() => expectUsable(rowName('Noisy logs')));
+
+			await userEvent.click(rowName('Noisy logs'));
+
+			await waitFor(() =>
+				expect(lastUsedViews()).toStrictEqual({
+					logs: { key: logsView.id, value: 'Noisy logs' },
+				}),
+			);
+		});
+	});
+
 	it('offers to create a view when there are none, and opens it', async () => {
 		const requests = mockSavedViewsApi([], { createdId: 'view-new' });
 		const { history } = renderPanel();

frontend/src/container/SavedViews/__tests__/SavedViewsPanel.rowMenu.test.tsx

@@ -4,11 +4,13 @@ import { toast } from '@signozhq/ui/sonner';
 import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime';
 
 import SavedViewsHeader from '../SavedViewsHeader';
 import SavedViewsPanel from '../SavedViewsPanel';
-import { mockSavedViewsApi } from './savedViewsApiMock';
+import { API, mockSavedViewsApi } from './savedViewsApiMock';
 import {
 	expectRowUsable,
 	explorerUrl,
@@ -181,6 +183,87 @@ describe('SavedViewsPanel row menu', () => {
 		await waitFor(() => expect(row('Slow checkout spans')).toBeInTheDocument());
 	});
 
+	it('renames from the stored view, not a stale list row', async () => {
+		const views = [errors, slow];
+		const requests = mockSavedViewsApi(views);
+		renderPanelWithHeader();
+		await screen.findByTestId('saved-views-list');
+		const stored = makeView({
+			id: slow.id,
+			displayName: 'Slow spans',
+			expression: 'duration_nano > 5000',
+		});
+		views[1] = stored;
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		await userEvent.clear(name);
+		await userEvent.type(name, 'Slow checkout spans');
+		await userEvent.click(screen.getByTestId('save-view-submit'));
+
+		await waitFor(() => expect(requests.updated).toHaveLength(1));
+		expect(requests.updated[0].body).toMatchObject({
+			spec: { ...stored.spec, displayName: 'Slow checkout spans' },
+		});
+	});
+
+	it('renames from the list row when the view cannot be read', async () => {
+		const requests = mockSavedViewsApi([errors, slow]);
+		server.use(
+			rest.get(`${API}/:id`, (_req, res, ctx) =>
+				res(ctx.status(403), ctx.json({ status: 'error' })),
+			),
+		);
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		await userEvent.clear(name);
+		await userEvent.type(name, 'Slow checkout spans');
+		await userEvent.click(screen.getByTestId('save-view-submit'));
+
+		await waitFor(() => expect(requests.updated).toHaveLength(1));
+		expect(requests.updated[0].body).toMatchObject({
+			spec: { ...slow.spec, displayName: 'Slow checkout spans' },
+		});
+	});
+
+	it('does not rename when the stored view fails to load', async () => {
+		const requests = mockSavedViewsApi([errors, slow]);
+		server.use(
+			rest.get(`${API}/:id`, (_req, res, ctx) =>
+				res(ctx.status(500), ctx.json({ status: 'error' })),
+			),
+		);
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		await userEvent.type(name, ' 2');
+		await userEvent.click(screen.getByTestId('save-view-submit'));
+
+		await waitFor(() => expect(toast.error).toHaveBeenCalled());
+		expect(requests.updated).toHaveLength(0);
+	});
+
+	it('ignores Enter while the stored view loads', async () => {
+		const requests = mockSavedViewsApi([errors, slow], { getDelay: 300 });
+		renderPanelWithHeader();
+
+		await chooseFromRowMenu('Slow spans', 'Edit details');
+		const name = screen.getByTestId('save-view-name');
+		await userEvent.type(name, ' 2{enter}');
+		await userEvent.type(name, '{enter}');
+
+		await waitFor(() =>
+			expect(toast.success).toHaveBeenCalledWith(
+				'View updated',
+				expect.anything(),
+			),
+		);
+		expect(requests.updated).toHaveLength(1);
+	});
+
 	it('shows the new name in the header when the open view is renamed', async () => {
 		mockSavedViewsApi([errors]);
 		renderPanelWithHeader(viewUrl(PATH, errors));
@@ -236,4 +319,19 @@ describe('SavedViewsPanel row menu', () => {
 		);
 		await waitFor(() => expect(chip()).toHaveTextContent('My view'));
 	});
+
+	it('keeps the open view when another view is deleted', async () => {
+		mockSavedViewsApi([errors, slow]);
+		const { history } = renderPanelWithHeader(viewUrl(PATH, errors));
+		await waitFor(() => expect(chip()).toHaveTextContent('Errors'));
+
+		await chooseFromRowMenu('Slow spans', 'Delete');
+		await userEvent.click(screen.getByTestId('delete-saved-view-confirm'));
+
+		await waitFor(() => expect(row('Slow spans')).toBeUndefined());
+		expect(urlParam(history, QueryParams.viewKey)).toBe(
+			JSON.stringify(errors.id),
+		);
+		expect(chip()).toHaveTextContent('Errors');
+	});
 });

frontend/src/container/SavedViews/__tests__/SavedViewsPanel.timeRange.test.tsx

@@ -0,0 +1,111 @@
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import store from 'store';
+import { act, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import SavedViewsPanel from '../SavedViewsPanel';
+import { mockSavedViewsApi } from './savedViewsApiMock';
+import {
+	expectRowUsable,
+	explorerUrl,
+	makeView,
+	MENU_CHECK_TIMEOUT,
+	renderWithExplorerProviders,
+} from './savedViewsTestUtils';
+
+const mockCopy: jest.MockedFunction<(text: string) => void> = jest.fn();
+
+// copy-to-clipboard falls back to window.prompt in jsdom.
+jest.mock('react-use', () => ({
+	...jest.requireActual('react-use'),
+	useCopyToClipboard: (): [unknown, typeof mockCopy] => [null, mockCopy],
+}));
+
+const PATH = ROUTES.TRACES_EXPLORER;
+const slow = makeView({ id: 'view-2', displayName: 'Slow spans' });
+
+// A store whose global time can change while the panel stays mounted.
+function renderPanelWithTime(selectedTime: GlobalReducer['selectedTime']): {
+	setTime: (time: Partial<GlobalReducer>) => void;
+} {
+	let globalTime: GlobalReducer = {
+		...store.getState().globalTime,
+		selectedTime,
+	};
+	const timeStore = configureStore([thunk])(() => ({
+		...store.getState(),
+		globalTime,
+	}));
+
+	renderWithExplorerProviders(
+		<Provider store={timeStore}>
+			<SavedViewsPanel
+				source={SavedviewtypesSourceDTO.traces}
+				onClose={jest.fn()}
+			/>
+		</Provider>,
+		explorerUrl(PATH, {}),
+	);
+
+	return {
+		setTime: (time): void => {
+			globalTime = { ...globalTime, ...time };
+			act(() => {
+				timeStore.dispatch({ type: 'TEST_TIME_CHANGED' });
+			});
+		},
+	};
+}
+
+const row = (name: string): HTMLElement =>
+	screen
+		.getAllByTestId('saved-views-row')
+		.find((element) => element.textContent?.includes(name)) as HTMLElement;
+
+const relativeTimeOf = (link: string): string | null =>
+	new URL(link, window.location.origin).searchParams.get(
+		QueryParams.relativeTime,
+	);
+
+describe('SavedViewsPanel time range', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		mockCopy.mockClear();
+		mockSavedViewsApi([slow]);
+	});
+
+	it('moves the row link to the new time range when it changes', async () => {
+		const { setTime } = renderPanelWithTime('1h');
+		await screen.findByTestId('saved-views-list');
+		const name = within(row('Slow spans')).getByTestId('saved-views-row-name');
+		expect(relativeTimeOf(name.getAttribute('href') as string)).toBe('1h');
+
+		setTime({ selectedTime: '6h' });
+
+		expect(relativeTimeOf(name.getAttribute('href') as string)).toBe('6h');
+	});
+
+	it('copies a link in the time range that is selected when it is copied', async () => {
+		const { setTime } = renderPanelWithTime('1h');
+		await screen.findByTestId('saved-views-list');
+		setTime({ selectedTime: '6h' });
+
+		await userEvent.click(
+			within(row('Slow spans')).getByTestId('saved-views-row-menu'),
+		);
+		const copyLink = await screen.findByTestId(
+			'saved-views-row-menu-item-copyLink',
+		);
+		await waitFor(() => expectRowUsable(copyLink), MENU_CHECK_TIMEOUT);
+		await userEvent.click(copyLink);
+
+		expect(mockCopy).toHaveBeenCalledTimes(1);
+		expect(relativeTimeOf(mockCopy.mock.calls[0][0])).toBe('6h');
+	});
+});

frontend/src/container/SavedViews/hooks/useSavedViewRowActions.ts

@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { toast } from '@signozhq/ui/sonner';
 import {
+	getGetSavedViewQueryOptions,
+	updateSavedView,
 	useDeleteSavedView,
-	useUpdateSavedView,
 } from 'api/generated/services/saved-view';
 import {
 	RenderErrorResponseDTO,
@@ -45,8 +46,39 @@ export function useSavedViewRowActions(
 	const timeSearch = useTimeSearchParams();
 	const [, copyToClipboard] = useCopyToClipboard();
 	const logSavedViewEvent = useSavedViewLogEvent(source);
-	const { mutateAsync: updateSavedView, isLoading: isRenaming } =
-		useUpdateSavedView();
+	// The update replaces the whole spec, so it starts from the stored view, not
+	// the list row, which can be stale. Without read on the view, the list row is
+	// the only copy there is.
+	const { mutateAsync: renameSavedView, isLoading: isRenaming } = useMutation(
+		async ({
+			view,
+			displayName,
+		}: {
+			view: SavedviewtypesSavedViewDTO;
+			displayName: string;
+		}) => {
+			let { spec } = view;
+			try {
+				({
+					data: { spec },
+				} = await queryClient.fetchQuery(
+					getGetSavedViewQueryOptions({ id: view.id }),
+				));
+			} catch (error) {
+				if ((error as ErrorType<unknown>).response?.status !== 403) {
+					throw error;
+				}
+			}
+			await updateSavedView(
+				{ id: view.id },
+				{
+					source,
+					schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
+					spec: { ...spec, displayName },
+				},
+			);
+		},
+	);
 	const { mutateAsync: deleteSavedView, isLoading: isDeleting } =
 		useDeleteSavedView();
 
@@ -77,14 +109,7 @@ export function useSavedViewRowActions(
 			displayName: string,
 		): Promise<boolean> => {
 			try {
-				await updateSavedView({
-					pathParams: { id: view.id },
-					data: {
-						source,
-						schemaVersion: SAVED_VIEW_SCHEMA_VERSION,
-						spec: { ...view.spec, displayName },
-					},
-				});
+				await renameSavedView({ view, displayName });
 				await invalidateSavedViews(queryClient, source, view.id);
 				toast.success('View updated', { position: SAVED_VIEW_TOAST_POSITION });
 				logSavedViewEvent(SavedViewEvents.ViewDetailsEdited, {
@@ -96,7 +121,7 @@ export function useSavedViewRowActions(
 				return false;
 			}
 		},
-		[updateSavedView, source, queryClient, logSavedViewEvent],
+		[renameSavedView, source, queryClient, logSavedViewEvent],
 	);
 
 	// The deleted view's own query is left alone: refetching it would fail

frontend/src/container/SavedViews/utils/__tests__/hasUnsavedViewChanges.test.ts

@@ -127,6 +127,48 @@ describe('hasUnsavedViewChanges', () => {
 		).toBe(true);
 	});
 
+	it('is clean while no query is staged', () => {
+		expect(
+			hasUnsavedViewChanges({
+				view,
+				stagedQuery: null,
+				panelType: PANEL_TYPES.LIST,
+				sourcePage: SavedviewtypesSourceDTO.traces,
+				options,
+			}),
+		).toBe(false);
+	});
+
+	it('is dirty when the columns are reordered', () => {
+		expect(
+			hasUnsavedViewChanges({
+				view,
+				stagedQuery: staged,
+				panelType: PANEL_TYPES.LIST,
+				sourcePage: SavedviewtypesSourceDTO.traces,
+				options: { ...options, selectColumns: [columns[1], columns[0]] },
+			}),
+		).toBe(true);
+	});
+
+	it('is dirty when a column is swapped for another', () => {
+		expect(
+			hasUnsavedViewChanges({
+				view,
+				stagedQuery: staged,
+				panelType: PANEL_TYPES.LIST,
+				sourcePage: SavedviewtypesSourceDTO.traces,
+				options: {
+					...options,
+					selectColumns: [
+						columns[0],
+						{ name: 'duration_nano', key: 'duration_nano' } as TelemetryFieldKey,
+					],
+				},
+			}),
+		).toBe(true);
+	});
+
 	it('reads a traces view without columns as the default columns', () => {
 		const bare = viewFrom(
 			toSavedViewSpec({
@@ -184,6 +226,21 @@ describe('hasUnsavedViewChanges', () => {
 			).toBe(true);
 		});
 
+		it.each([
+			['format', { format: 'table' as LogViewMode }],
+			['font size', { fontSize: FontSize.LARGE }],
+		])('is dirty when only the %s changes', (_, change) => {
+			expect(
+				hasUnsavedViewChanges({
+					view: logsView,
+					stagedQuery: logsStaged,
+					panelType: PANEL_TYPES.LIST,
+					sourcePage: SavedviewtypesSourceDTO.logs,
+					options: { selectColumns: shownColumns, ...formatting, ...change },
+				}),
+			).toBe(true);
+		});
+
 		it('reads a view without formatting as the default formatting', () => {
 			const bare = viewFrom(
 				toSavedViewSpec({
@@ -295,6 +352,137 @@ describe('hasUnsavedViewChanges', () => {
 		).toBe(false);
 	});
 
+	it.each([
+		['point', 'attribute'],
+		['spanfield', 'span'],
+		['logfield', 'log'],
+		['tracefield', 'trace'],
+	])(
+		'reads a group-by staged as %s and stored as %s as the same field',
+		(legacyContext, storedContext) => {
+			const base = viewFrom(
+				toSavedViewSpec({
+					query: query(DataSource.METRICS, ''),
+					panelType: PANEL_TYPES.TIME_SERIES,
+					displayName: 'By os',
+				}),
+			);
+			const [storedQuery] = base.spec.queries;
+			const storedView = {
+				...base,
+				spec: {
+					...base.spec,
+					queries: [
+						{
+							...storedQuery,
+							spec: {
+								...storedQuery.spec,
+								groupBy: [
+									{
+										name: 'os.type',
+										fieldContext: storedContext,
+										fieldDataType: 'string',
+									},
+								],
+							},
+						},
+					],
+				},
+			} as SavedviewtypesSavedViewDTO;
+			const opened = stagedFrom(storedView, DataSource.METRICS);
+			const stagedLegacy = {
+				...opened,
+				builder: {
+					...opened.builder,
+					queryData: opened.builder.queryData.map((queryData) => ({
+						...queryData,
+						groupBy: [{ key: 'os.type', dataType: 'string', type: legacyContext }],
+					})),
+				},
+			} as Query;
+
+			expect(
+				hasUnsavedViewChanges({
+					view: storedView,
+					stagedQuery: stagedLegacy,
+					panelType: PANEL_TYPES.TIME_SERIES,
+					sourcePage: SavedviewtypesSourceDTO.metrics,
+				}),
+			).toBe(false);
+		},
+	);
+
+	// The query still staged after a save keeps the builder's values, while
+	// the server returns the view without them.
+	describe('right after saving a query that carries builder defaults', () => {
+		const withPatch = (
+			dataSource: DataSource,
+			patch: Partial<Query['builder']['queryData'][number]>,
+		): Query => {
+			const base = query(dataSource, '');
+			return {
+				...base,
+				builder: {
+					...base.builder,
+					queryData: base.builder.queryData.map((queryData) => ({
+						...queryData,
+						...patch,
+					})),
+				},
+			} as Query;
+		};
+
+		it.each([
+			[
+				'a zero offset on a list',
+				DataSource.LOGS,
+				SavedviewtypesSourceDTO.logs,
+				PANEL_TYPES.LIST,
+				{ offset: 0 },
+			],
+			[
+				'an empty group-by description',
+				DataSource.TRACES,
+				SavedviewtypesSourceDTO.traces,
+				PANEL_TYPES.TIME_SERIES,
+				{
+					groupBy: [
+						{
+							key: 'service.name',
+							dataType: 'string',
+							type: 'resource',
+							description: '',
+						},
+					],
+				},
+			],
+			[
+				'a function without arguments',
+				DataSource.METRICS,
+				SavedviewtypesSourceDTO.metrics,
+				PANEL_TYPES.TIME_SERIES,
+				{ functions: [{ name: 'absolute', args: [], namedArgs: {} }] },
+			],
+		])('is clean with %s', (_, dataSource, sourcePage, panelType, patch) => {
+			const saved = withPatch(
+				dataSource,
+				patch as Partial<Query['builder']['queryData'][number]>,
+			);
+			const savedView = viewFrom(
+				toSavedViewSpec({ query: saved, panelType, displayName: 'Saved' }),
+			);
+
+			expect(
+				hasUnsavedViewChanges({
+					view: savedView,
+					stagedQuery: saved,
+					panelType,
+					sourcePage,
+				}),
+			).toBe(false);
+		});
+	});
+
 	describe('list order', () => {
 		const withOrderBy = (
 			staged: Query,

frontend/src/container/SavedViews/utils/__tests__/toSavedViewSpec.test.ts

@@ -80,6 +80,66 @@ describe('toSavedViewSpec', () => {
 		});
 	});
 
+	it('keeps the description and unit of a column, naming it by name before key', () => {
+		const spec = toSavedViewSpec({
+			query: tracesQuery(),
+			panelType: PANEL_TYPES.LIST,
+			displayName: 'Errors',
+			options: {
+				selectColumns: [
+					{
+						name: 'duration_nano',
+						key: 'durationNano',
+						description: 'Span duration',
+						unit: 'ns',
+					},
+				] as unknown as TelemetryFieldKey[],
+				format: 'raw' as LogViewMode,
+				maxLines: 2,
+				fontSize: FontSize.SMALL,
+			},
+		});
+
+		expect(spec.selectedFields).toStrictEqual([
+			{ name: 'duration_nano', description: 'Span duration', unit: 'ns' },
+		]);
+	});
+
+	it.each([
+		[
+			PANEL_TYPES.LIST,
+			SavedviewtypesPanelTypeDTO.list,
+			Querybuildertypesv5RequestTypeDTO.raw,
+		],
+		[
+			PANEL_TYPES.TABLE,
+			SavedviewtypesPanelTypeDTO.table,
+			Querybuildertypesv5RequestTypeDTO.scalar,
+		],
+		[
+			PANEL_TYPES.TRACE,
+			SavedviewtypesPanelTypeDTO.trace,
+			Querybuildertypesv5RequestTypeDTO.trace,
+		],
+		[
+			PANEL_TYPES.PIE,
+			SavedviewtypesPanelTypeDTO.graph,
+			Querybuildertypesv5RequestTypeDTO.scalar,
+		],
+	])(
+		'stores the %s panel as panel type %s with request type %s',
+		(panelType, storedPanelType, requestType) => {
+			const spec = toSavedViewSpec({
+				query: tracesQuery(),
+				panelType,
+				displayName: 'Errors',
+			});
+
+			expect(spec.panelType).toBe(storedPanelType);
+			expect(spec.requestType).toBe(requestType);
+		},
+	);
+
 	it('keeps the colour in display', () => {
 		const spec = toSavedViewSpec({
 			query: tracesQuery(),

frontend/src/utils/__tests__/buildExplorerNavigationUrl.test.ts

@@ -21,6 +21,20 @@ describe('buildExplorerNavigationUrl', () => {
 		expect(url).toContain(`${QueryParams.viewKey}=`);
 	});
 
+	it('encodes the composite query for a reader that decodes it, even with a percent sign', () => {
+		const query = {
+			queryType: 'builder',
+			filter: { expression: "body LIKE '%timeout%'" },
+		} as never;
+
+		const url = buildExplorerNavigationUrl(ROUTES.LOGS_EXPLORER, query, {});
+
+		const param = new URL(url, window.location.origin).searchParams.get(
+			QueryParams.compositeQuery,
+		) as string;
+		expect(JSON.parse(decodeURIComponent(param))).toStrictEqual(query);
+	});
+
 	it('JSON-encodes panelTypes so the explorer opens the right view', () => {
 		const url = buildExplorerNavigationUrl(
 			ROUTES.LOGS_EXPLORER,

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -669,6 +669,216 @@ func TestValidateHeatmapDashboard(t *testing.T) {
 	assert.Equal(t, request, rereadRequest)
 }
 
+func TestValidateDistributionDashboard(t *testing.T) {
+	data, err := os.ReadFile("testdata/perses_distribution_panel.json")
+	require.NoError(t, err, "reading example file")
+
+	spec, err := unmarshalDashboard(data)
+	require.NoError(t, err, "unmarshal and validate failed")
+
+	require.IsType(t, &DistributionPanelSpec{}, spec.Panels["p1"].Spec.Plugin.Spec)
+	panelSpec := spec.Panels["p1"].Spec.Plugin.Spec.(*DistributionPanelSpec)
+	require.NotNil(t, panelSpec.Axes.X.Min)
+	assert.Equal(t, 10.0, *panelSpec.Axes.X.Min)
+	assert.Nil(t, panelSpec.Axes.X.Max)
+	assert.Equal(t, "log", panelSpec.Axes.Y.Scale.ValueOrDefault())
+	assert.Equal(t, "none", panelSpec.ChartAppearance.Stack.ValueOrDefault())
+	assert.True(t, panelSpec.ChartAppearance.Percentiles.Enabled)
+	assert.Equal(t, []float64{75, 99.9}, panelSpec.ChartAppearance.Percentiles.Values)
+
+	dashboard := &DashboardV2{Spec: *spec}
+	request, err := dashboard.GetPanelQuery(1, 2, "p1")
+	require.NoError(t, err, "building the panel's query failed")
+	assert.Equal(t, qb.RequestTypeDistribution, request.RequestType)
+	require.NoError(t, request.Validate(), "the request built from the panel is not a valid distribution request")
+
+	stored, err := json.Marshal(spec)
+	require.NoError(t, err, "marshal dashboard failed")
+	reread, err := unmarshalDashboard(stored)
+	require.NoError(t, err, "the stored dashboard does not validate")
+	assert.Equal(t, panelSpec, reread.Panels["p1"].Spec.Plugin.Spec)
+}
+
+func TestDistributionPanelSpecDefaults(t *testing.T) {
+	testCases := []struct {
+		name string
+		spec string
+	}{
+		{name: "EmptySpec", spec: `{}`},
+		{name: "EmptyChartAppearance", spec: `{"chartAppearance": {}}`},
+		{name: "EmptyPercentiles", spec: `{"chartAppearance": {"percentiles": {}}}`},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			var plugin PanelPlugin
+			require.NoError(t, json.Unmarshal([]byte(`{"kind": "signoz/DistributionPanel", "spec": `+testCase.spec+`}`), &plugin))
+
+			spec := plugin.Spec.(*DistributionPanelSpec)
+			assert.Nil(t, spec.Axes.X.Min)
+			assert.Nil(t, spec.Axes.X.Max)
+			assert.Equal(t, "linear", spec.Axes.Y.Scale.ValueOrDefault())
+			assert.Equal(t, "normal", spec.ChartAppearance.Stack.ValueOrDefault())
+			assert.True(t, spec.ChartAppearance.Percentiles.Enabled)
+			assert.Equal(t, []float64{50, 90, 99}, spec.ChartAppearance.Percentiles.Values)
+
+			stored, err := json.Marshal(spec)
+			require.NoError(t, err)
+			assert.Contains(t, string(stored), `"stack":"normal"`)
+		})
+	}
+}
+
+func TestDistributionPanelSpecPercentileValues(t *testing.T) {
+	testCases := []struct {
+		name            string
+		spec            string
+		expectedEnabled bool
+		expectedValues  []float64
+	}{
+		{name: "Disabled_KeepsDefaultValues", spec: `{"chartAppearance": {"percentiles": {"enabled": false}}}`, expectedEnabled: false, expectedValues: []float64{50, 90, 99}},
+		{name: "EmptyValues_MarksNone", spec: `{"chartAppearance": {"percentiles": {"values": []}}}`, expectedEnabled: true, expectedValues: []float64{}},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			var plugin PanelPlugin
+			require.NoError(t, json.Unmarshal([]byte(`{"kind": "signoz/DistributionPanel", "spec": `+testCase.spec+`}`), &plugin))
+
+			spec := plugin.Spec.(*DistributionPanelSpec)
+			assert.Equal(t, testCase.expectedEnabled, spec.ChartAppearance.Percentiles.Enabled)
+			assert.Equal(t, testCase.expectedValues, spec.ChartAppearance.Percentiles.Values)
+		})
+	}
+}
+
+func TestDistributionPanelSpecXMinEqualsMax(t *testing.T) {
+	var plugin PanelPlugin
+	require.NoError(t, json.Unmarshal([]byte(`{"kind": "signoz/DistributionPanel", "spec": {"axes": {"x": {"min": 10, "max": 10}}}}`), &plugin))
+
+	spec := plugin.Spec.(*DistributionPanelSpec)
+	require.NotNil(t, spec.Axes.X.Min)
+	require.NotNil(t, spec.Axes.X.Max)
+	assert.Equal(t, 10.0, *spec.Axes.X.Min)
+	assert.Equal(t, 10.0, *spec.Axes.X.Max)
+}
+
+func TestDistributionPanelSpecRejections(t *testing.T) {
+	testCases := []struct {
+		name            string
+		spec            string
+		expectedMessage string
+	}{
+		{
+			name:            "XMin_AboveMax",
+			spec:            `{"axes": {"x": {"min": 20, "max": 10}}}`,
+			expectedMessage: "axes.x.min 20 is greater than axes.x.max 10",
+		},
+		{
+			name:            "YScale_Unknown",
+			spec:            `{"axes": {"y": {"scale": "symlog"}}}`,
+			expectedMessage: "invalid distribution y scale",
+		},
+		{
+			name:            "UnknownField",
+			spec:            `{"axes": {"y": {"softMax": 10}}}`,
+			expectedMessage: "unknown field \"softMax\"",
+		},
+		{
+			name:            "Percentile_Zero",
+			spec:            `{"chartAppearance": {"percentiles": {"values": [0, 50]}}}`,
+			expectedMessage: "0 is not in (0, 100)",
+		},
+		{
+			name:            "Percentile_Hundred",
+			spec:            `{"chartAppearance": {"percentiles": {"values": [100]}}}`,
+			expectedMessage: "100 is not in (0, 100)",
+		},
+		{
+			name:            "Percentile_Duplicate",
+			spec:            `{"chartAppearance": {"percentiles": {"values": [90, 90]}}}`,
+			expectedMessage: "90 is listed more than once",
+		},
+		{
+			name:            "Percentiles_MoreThanFive",
+			spec:            `{"chartAppearance": {"percentiles": {"values": [10, 25, 50, 75, 90, 99]}}}`,
+			expectedMessage: "at most 5 percentiles",
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			var plugin PanelPlugin
+			err := json.Unmarshal([]byte(`{"kind": "signoz/DistributionPanel", "spec": `+testCase.spec+`}`), &plugin)
+			require.Error(t, err)
+			assert.Contains(t, err.Error(), testCase.expectedMessage)
+		})
+	}
+}
+
+func TestDistributionPanelQueryKinds(t *testing.T) {
+	testCases := []struct {
+		name            string
+		queryPluginKind string
+		queryPluginSpec string
+		expectedAllowed bool
+	}{
+		{
+			name:            "PromQL_Allowed",
+			queryPluginKind: "signoz/PromQLQuery",
+			queryPluginSpec: `{"name": "A", "query": "sum by (le) (increase(signoz_latency_bucket[5m]))"}`,
+			expectedAllowed: true,
+		},
+		{
+			name:            "ClickHouseSQL_Allowed",
+			queryPluginKind: "signoz/ClickHouseSQL",
+			queryPluginSpec: `{"name": "A", "query": "SELECT ts, bucket, value FROM cells"}`,
+			expectedAllowed: true,
+		},
+		{
+			name:            "TraceOperator_Refused",
+			queryPluginKind: "signoz/TraceOperator",
+			queryPluginSpec: `{"name": "T1", "expression": "A => B"}`,
+			expectedAllowed: false,
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			data := fmt.Sprintf(`{
+				"variables": [],
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"links": [],
+							"plugin": {"kind": "signoz/DistributionPanel", "spec": {}},
+							"queries": [{
+								"kind": "distribution",
+								"spec": {
+									"plugin": {"kind": %q, "spec": %s}
+								}
+							}]
+						}
+					}
+				},
+				"links": [],
+				"layouts": []
+			}`, testCase.queryPluginKind, testCase.queryPluginSpec)
+
+			_, err := unmarshalDashboard([]byte(data))
+
+			if testCase.expectedAllowed {
+				require.NoError(t, err)
+				return
+			}
+
+			require.Error(t, err)
+			assert.Contains(t, err.Error(), "is not supported by panel kind")
+		})
+	}
+}
+
 func TestInvalidateOneInvalidPanel(t *testing.T) {
 	data := []byte(`{
 		"variables": [],

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -28,17 +28,18 @@ type PanelPlugin struct {
 // (and strips the duplicate parent properties) after reflection.
 func (PanelPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
-		string(PanelKindTimeSeries):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec"),
-		string(PanelKindBarChart):    schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec"),
-		string(PanelKindAreaChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec"),
-		string(PanelKindNumber):      schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec"),
-		string(PanelKindPieChart):    schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec"),
-		string(PanelKindTable):       schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec"),
-		string(PanelKindHistogram):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec"),
-		string(PanelKindList):        schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec"),
-		string(PanelKindText):        schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec"),
-		string(PanelKindHeatmap):     schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec"),
-		string(PanelKindScatterPlot): schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec"),
+		string(PanelKindTimeSeries):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec"),
+		string(PanelKindBarChart):     schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec"),
+		string(PanelKindAreaChart):    schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec"),
+		string(PanelKindNumber):       schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec"),
+		string(PanelKindPieChart):     schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec"),
+		string(PanelKindTable):        schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec"),
+		string(PanelKindHistogram):    schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec"),
+		string(PanelKindList):         schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec"),
+		string(PanelKindText):         schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec"),
+		string(PanelKindHeatmap):      schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec"),
+		string(PanelKindScatterPlot):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec"),
+		string(PanelKindDistribution): schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDistributionPanelSpec"),
 	})
 }
 
@@ -73,6 +74,7 @@ func (PanelPlugin) JSONSchemaOneOf() []any {
 		PanelPluginVariant[TextPanelSpec]{Kind: string(PanelKindText)},
 		PanelPluginVariant[HeatmapPanelSpec]{Kind: string(PanelKindHeatmap)},
 		PanelPluginVariant[ScatterPlotPanelSpec]{Kind: string(PanelKindScatterPlot)},
+		PanelPluginVariant[DistributionPanelSpec]{Kind: string(PanelKindDistribution)},
 	}
 }
 
@@ -236,17 +238,18 @@ func (v VariablePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error
 
 var (
 	panelPluginSpecs = map[PanelPluginKind]func() any{
-		PanelKindTimeSeries:  func() any { return new(TimeSeriesPanelSpec) },
-		PanelKindBarChart:    func() any { return new(BarChartPanelSpec) },
-		PanelKindAreaChart:   func() any { return new(AreaChartPanelSpec) },
-		PanelKindNumber:      func() any { return new(NumberPanelSpec) },
-		PanelKindPieChart:    func() any { return new(PieChartPanelSpec) },
-		PanelKindTable:       func() any { return new(TablePanelSpec) },
-		PanelKindHistogram:   func() any { return new(HistogramPanelSpec) },
-		PanelKindList:        func() any { return new(ListPanelSpec) },
-		PanelKindText:        func() any { return new(TextPanelSpec) },
-		PanelKindHeatmap:     func() any { return new(HeatmapPanelSpec) },
-		PanelKindScatterPlot: func() any { return new(ScatterPlotPanelSpec) },
+		PanelKindTimeSeries:   func() any { return new(TimeSeriesPanelSpec) },
+		PanelKindBarChart:     func() any { return new(BarChartPanelSpec) },
+		PanelKindAreaChart:    func() any { return new(AreaChartPanelSpec) },
+		PanelKindNumber:       func() any { return new(NumberPanelSpec) },
+		PanelKindPieChart:     func() any { return new(PieChartPanelSpec) },
+		PanelKindTable:        func() any { return new(TablePanelSpec) },
+		PanelKindHistogram:    func() any { return new(HistogramPanelSpec) },
+		PanelKindList:         func() any { return new(ListPanelSpec) },
+		PanelKindText:         func() any { return new(TextPanelSpec) },
+		PanelKindHeatmap:      func() any { return new(HeatmapPanelSpec) },
+		PanelKindScatterPlot:  func() any { return new(ScatterPlotPanelSpec) },
+		PanelKindDistribution: func() any { return new(DistributionPanelSpec) },
 	}
 	queryPluginSpecs = map[QueryPluginKind]func() any{
 		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
@@ -263,17 +266,18 @@ var (
 		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
 	}
 	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
-		PanelKindTimeSeries:  {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindBarChart:    {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindAreaChart:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindNumber:      {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindHistogram:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindPieChart:    {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindTable:       {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindList:        {QueryKindBuilder, QueryKindAIBuilder},
-		PanelKindText:        {},
-		PanelKindHeatmap:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindScatterPlot: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindClickHouseSQL},
+		PanelKindTimeSeries:   {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindBarChart:     {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindAreaChart:    {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindNumber:       {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindHistogram:    {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindPieChart:     {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindTable:        {QueryKindBuilder, QueryKindAIBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindList:         {QueryKindBuilder, QueryKindAIBuilder},
+		PanelKindText:         {},
+		PanelKindHeatmap:      {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindScatterPlot:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindClickHouseSQL},
+		PanelKindDistribution: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindPromQL, QueryKindClickHouseSQL},
 	}
 )
 

pkg/types/dashboardtypes/perses_replicas.go

@@ -70,7 +70,7 @@ func (k *PanelKind) UnmarshalJSON(data []byte) error {
 
 type PanelSpec struct {
 	Display Display     `json:"display" required:"true" description:"The panel title and description."`
-	Plugin  PanelPlugin `json:"plugin" required:"true" description:"The visualization: kind is one of signoz/TimeSeriesPanel, signoz/BarChartPanel, signoz/AreaChartPanel, signoz/NumberPanel, signoz/PieChartPanel, signoz/TablePanel, signoz/HistogramPanel, signoz/ListPanel, signoz/TextPanel or signoz/HeatmapPanel, and spec holds that kind's options ({} accepts every default)."`
+	Plugin  PanelPlugin `json:"plugin" required:"true" description:"The visualization: kind is one of signoz/TimeSeriesPanel, signoz/BarChartPanel, signoz/AreaChartPanel, signoz/NumberPanel, signoz/PieChartPanel, signoz/TablePanel, signoz/HistogramPanel, signoz/ListPanel, signoz/TextPanel, signoz/HeatmapPanel or signoz/DistributionPanel, and spec holds that kind's options ({} accepts every default)."`
 	Queries []Query     `json:"queries" required:"true" nullable:"false" description:"The queries the panel runs. Use exactly one entry for a data panel and [] for signoz/TextPanel. To run several named queries or formulas, use one entry whose spec.plugin.kind is signoz/CompositeQuery and put the constituent queries in its plugin spec."`
 	Links   []Link      `json:"links,omitzero" description:"Context links offered in the data point drilldown menu of the panel, with dashboard variables resolved in the URL."`
 }
@@ -92,13 +92,13 @@ type Link struct {
 // ══════════════════════════════════════════════
 
 type Query struct {
-	Kind qb.RequestType `json:"kind" required:"true" description:"The result shape the panel requests: time_series for time series, bar, area and histogram panels, scalar for number, table and pie panels, raw for list panels, heatmap for heatmap panels, trace for trace panels."`
+	Kind qb.RequestType `json:"kind" required:"true" description:"The result shape the panel requests: time_series for time series, bar, area and histogram panels, scalar for number, table and pie panels, raw for list panels, heatmap for heatmap panels, distribution for distribution panels, trace for trace panels."`
 	Spec QuerySpec      `json:"spec" required:"true" description:"The query content: an optional name and the query plugin."`
 }
 
 type QuerySpec struct {
 	Name   string      `json:"name,omitempty" description:"An optional label for the query. The name queries refer to each other by lives in the plugin spec."`
-	Plugin QueryPlugin `json:"plugin" required:"true" description:"The query: kind is one of signoz/BuilderQuery, signoz/AIBuilderQuery (builder query over AI observability traces), signoz/CompositeQuery (several named queries and formulas), signoz/Formula, signoz/PromQLQuery, signoz/ClickHouseSQL or signoz/TraceOperator, and spec holds that kind's query. Pie and table panels reject signoz/PromQLQuery; heatmap panels reject signoz/AIBuilderQuery and signoz/TraceOperator; list panels accept only signoz/BuilderQuery and signoz/AIBuilderQuery."`
+	Plugin QueryPlugin `json:"plugin" required:"true" description:"The query: kind is one of signoz/BuilderQuery, signoz/AIBuilderQuery (builder query over AI observability traces), signoz/CompositeQuery (several named queries and formulas), signoz/Formula, signoz/PromQLQuery, signoz/ClickHouseSQL or signoz/TraceOperator, and spec holds that kind's query. Pie and table panels reject signoz/PromQLQuery; heatmap and distribution panels reject signoz/AIBuilderQuery and signoz/TraceOperator; list panels accept only signoz/BuilderQuery and signoz/AIBuilderQuery."`
 }
 
 // ══════════════════════════════════════════════

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -189,21 +189,22 @@ func (AIBuilderQuerySpec) PrepareJSONSchema(s *jsonschema.Schema) error {
 type PanelPluginKind string
 
 const (
-	PanelKindTimeSeries  PanelPluginKind = "signoz/TimeSeriesPanel"
-	PanelKindBarChart    PanelPluginKind = "signoz/BarChartPanel"
-	PanelKindAreaChart   PanelPluginKind = "signoz/AreaChartPanel"
-	PanelKindNumber      PanelPluginKind = "signoz/NumberPanel"
-	PanelKindPieChart    PanelPluginKind = "signoz/PieChartPanel"
-	PanelKindTable       PanelPluginKind = "signoz/TablePanel"
-	PanelKindHistogram   PanelPluginKind = "signoz/HistogramPanel"
-	PanelKindList        PanelPluginKind = "signoz/ListPanel"
-	PanelKindText        PanelPluginKind = "signoz/TextPanel"
-	PanelKindHeatmap     PanelPluginKind = "signoz/HeatmapPanel"
-	PanelKindScatterPlot PanelPluginKind = "signoz/ScatterPlotPanel"
+	PanelKindTimeSeries   PanelPluginKind = "signoz/TimeSeriesPanel"
+	PanelKindBarChart     PanelPluginKind = "signoz/BarChartPanel"
+	PanelKindAreaChart    PanelPluginKind = "signoz/AreaChartPanel"
+	PanelKindNumber       PanelPluginKind = "signoz/NumberPanel"
+	PanelKindPieChart     PanelPluginKind = "signoz/PieChartPanel"
+	PanelKindTable        PanelPluginKind = "signoz/TablePanel"
+	PanelKindHistogram    PanelPluginKind = "signoz/HistogramPanel"
+	PanelKindList         PanelPluginKind = "signoz/ListPanel"
+	PanelKindText         PanelPluginKind = "signoz/TextPanel"
+	PanelKindHeatmap      PanelPluginKind = "signoz/HeatmapPanel"
+	PanelKindScatterPlot  PanelPluginKind = "signoz/ScatterPlotPanel"
+	PanelKindDistribution PanelPluginKind = "signoz/DistributionPanel"
 )
 
 func (PanelPluginKind) Enum() []any {
-	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindAreaChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList, PanelKindText, PanelKindHeatmap, PanelKindScatterPlot}
+	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindAreaChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList, PanelKindText, PanelKindHeatmap, PanelKindScatterPlot, PanelKindDistribution}
 }
 
 func (k PanelPluginKind) rendersWithoutQuery() bool {
@@ -346,6 +347,89 @@ func (c HeatmapColors) validate() error {
 	return nil
 }
 
+type DistributionPanelSpec struct {
+	Visualization   BasicVisualization          `json:"visualization" description:"The time range the bucket counts are summed over."`
+	Formatting      PanelFormatting             `json:"formatting" description:"Unit and decimal precision of the bucket bounds; counts take no unit."`
+	Axes            DistributionAxes            `json:"axes" description:"The X (bucket) axis range and Y (count) axis scale."`
+	Legend          Legend                      `json:"legend" description:"Legend placement and series colors."`
+	ChartAppearance DistributionChartAppearance `json:"chartAppearance" description:"Stacking and percentile markers."`
+}
+
+// UnmarshalJSON decodes over the defaults, since the stack default (normal)
+// differs from StackMode's own and percentile markers default to on.
+func (spec *DistributionPanelSpec) UnmarshalJSON(data []byte) error {
+	type alias DistributionPanelSpec
+	tmp := alias{ChartAppearance: DistributionChartAppearance{
+		Stack:       StackModeNormal,
+		Percentiles: DistributionPercentiles{Enabled: true, Values: []float64{50, 90, 99}},
+	}}
+	dec := json.NewDecoder(bytes.NewReader(data))
+	dec.DisallowUnknownFields()
+	if err := dec.Decode(&tmp); err != nil {
+		return err
+	}
+	*spec = DistributionPanelSpec(tmp)
+	return nil
+}
+
+func (spec *DistributionPanelSpec) validate() error {
+	if err := spec.Axes.X.validate(); err != nil {
+		return err
+	}
+	return spec.ChartAppearance.Percentiles.validate()
+}
+
+type DistributionAxes struct {
+	X DistributionXAxis `json:"x" description:"The bucket axis."`
+	Y DistributionYAxis `json:"y" description:"The count axis."`
+}
+
+// DistributionXAxis draws every bucket equally wide, whatever its bounds.
+type DistributionXAxis struct {
+	Min *float64 `json:"min" description:"Buckets wholly below this value are hidden. Null shows them all."`
+	Max *float64 `json:"max" description:"Buckets wholly above this value are hidden. Null shows them all."`
+}
+
+func (axis DistributionXAxis) validate() error {
+	if axis.Min != nil && axis.Max != nil && *axis.Min > *axis.Max {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "axes.x.min %v is greater than axes.x.max %v", *axis.Min, *axis.Max)
+	}
+	return nil
+}
+
+type DistributionYAxis struct {
+	Scale DistributionYScale `json:"scale" required:"true" description:"How counts are spaced: linear (default) or log."`
+}
+
+type DistributionChartAppearance struct {
+	Stack       StackMode               `json:"stack" required:"true" description:"How groups combine in a bucket: normal (default) stacks them, none draws them side by side, percent stacks them as shares of the bucket."`
+	Percentiles DistributionPercentiles `json:"percentiles" description:"Percentile markers drawn across the bucket axis."`
+}
+
+const maxDistributionPercentiles = 5
+
+type DistributionPercentiles struct {
+	Enabled bool      `json:"enabled" required:"true" description:"Whether percentile markers are drawn. Defaults to true."`
+	Values  []float64 `json:"values" required:"true" description:"The percentiles to mark, each in (0, 100), at most 5, no duplicates. Defaults to [50, 90, 99]."`
+}
+
+func (percentiles DistributionPercentiles) validate() error {
+	if len(percentiles.Values) > maxDistributionPercentiles {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "chartAppearance.percentiles.values: at most %d percentiles, got %d", maxDistributionPercentiles, len(percentiles.Values))
+	}
+	seen := make(map[float64]struct{}, len(percentiles.Values))
+	for _, value := range percentiles.Values {
+		if value <= 0 || value >= 100 {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "chartAppearance.percentiles.values: %v is not in (0, 100)", value)
+		}
+		if _, ok := seen[value]; ok {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "chartAppearance.percentiles.values: %v is listed more than once", value)
+		}
+		seen[value] = struct{}{}
+	}
+	return nil
+}
+
 type TextPanelSpec struct {
 	Mode          TextMode         `json:"mode" description:"How text is interpreted. Only markdown is supported."`
 	Text          string           `json:"text" description:"The content to render."`
@@ -1462,6 +1546,43 @@ func (s *HeatmapYScale) UnmarshalJSON(data []byte) error {
 	}
 }
 
+type DistributionYScale struct{ valuer.String }
+
+var (
+	DistributionYScaleLinear = DistributionYScale{valuer.NewString("linear")} // default
+	DistributionYScaleLog    = DistributionYScale{valuer.NewString("log")}
+)
+
+func (DistributionYScale) Enum() []any {
+	return []any{DistributionYScaleLinear, DistributionYScaleLog}
+}
+
+func (scale DistributionYScale) ValueOrDefault() string {
+	if scale.IsZero() {
+		return DistributionYScaleLinear.StringValue()
+	}
+	return scale.StringValue()
+}
+
+func (scale DistributionYScale) MarshalJSON() ([]byte, error) {
+	return json.Marshal(scale.ValueOrDefault())
+}
+
+func (scale *DistributionYScale) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid distribution y scale: must be a string, one of `linear` or `log`")
+	}
+	parsed := DistributionYScale{valuer.NewString(v)}
+	switch parsed {
+	case DistributionYScaleLinear, DistributionYScaleLog:
+		*scale = parsed
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid distribution y scale %q: must be `linear` or `log`", v)
+	}
+}
+
 type HeatmapColorScale struct{ valuer.String }
 
 var (

pkg/types/dashboardtypes/testdata/perses_distribution_panel.json

@@ -0,0 +1,95 @@
+{
+  "display": {
+    "name": "latency",
+    "description": "how request duration is distributed over the range"
+  },
+  "variables": [],
+  "panels": {
+    "p1": {
+      "kind": "Panel",
+      "spec": {
+        "display": {
+          "name": "request duration",
+          "description": ""
+        },
+        "plugin": {
+          "kind": "signoz/DistributionPanel",
+          "spec": {
+            "visualization": {
+              "timePreference": "global_time"
+            },
+            "formatting": {
+              "unit": "s",
+              "decimalPrecision": "3"
+            },
+            "axes": {
+              "x": {
+                "min": 10
+              },
+              "y": {
+                "scale": "log"
+              }
+            },
+            "legend": {
+              "position": "right",
+              "mode": "list"
+            },
+            "chartAppearance": {
+              "stack": "none",
+              "percentiles": {
+                "enabled": true,
+                "values": [75, 99.9]
+              }
+            }
+          }
+        },
+        "links": [],
+        "queries": [
+          {
+            "kind": "distribution",
+            "spec": {
+              "plugin": {
+                "kind": "signoz/BuilderQuery",
+                "spec": {
+                  "name": "A",
+                  "signal": "metrics",
+                  "aggregations": [
+                    {
+                      "metricName": "http.server.request.duration",
+                      "timeAggregation": "increase",
+                      "spaceAggregation": "sum"
+                    }
+                  ],
+                  "groupBy": [
+                    {
+                      "name": "service.name"
+                    }
+                  ]
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  "links": [],
+  "layouts": [
+    {
+      "kind": "Grid",
+      "spec": {
+        "items": [
+          {
+            "x": 0,
+            "y": 0,
+            "width": 12,
+            "height": 8,
+            "content": {
+              "$ref": "#/spec/panels/p1"
+            }
+          }
+        ]
+      }
+    }
+  ]
+}

tests/e2e/drivers/saved-views.ts

@@ -0,0 +1,481 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import {
+	expect,
+	type Locator,
+	type Page,
+	type Request,
+	type Response,
+} from '@playwright/test';
+
+import { BASE_PATH } from './base-path';
+import { collectRequests } from './console';
+import { dismissQuickFiltersAnnouncement } from './logs/explorer';
+import {
+	filterExpressions,
+	isQueryRangeRequest,
+	queryRangeBody,
+} from './saved-views/query';
+import { SAVED_VIEWS_API, seededView } from './saved-views/spec';
+import type {
+	GettableSavedView,
+	PostableSavedView,
+	SavedViewSource,
+	SeededView,
+} from './saved-views/spec.types';
+
+import { driver, kit } from './kit';
+import {
+	createViaApi,
+	getViaApi,
+	removeTrackedSavedViews,
+	statusViaApi,
+	trackSavedView,
+} from './saved-views/api';
+
+// The saved views header and list on the explorers: the sliding list on logs,
+// traces and meter, the pinned one on metrics.
+
+export const MY_VIEW = 'My view';
+
+const EXPLORER_PATH: Record<SavedViewSource, string> = {
+	logs: '/logs/logs-explorer',
+	traces: '/traces-explorer',
+	metrics: '/metrics-explorer/explorer',
+	meter: '/meter/explorer',
+};
+
+export function explorerPathname(source: SavedViewSource): string {
+	return `${BASE_PATH}${EXPLORER_PATH[source]}`;
+}
+
+/** Row-menu items by the suffix of their `saved-views-row-menu-item-<key>` test id. */
+export type RowAction = 'copyLink' | 'copyId' | 'editDetails' | 'delete';
+
+/** Save-menu items by the suffix of their `saved-views-save-changes-item-<key>` test id. */
+export type SaveAction = 'update' | 'save-as-new';
+
+export type LinkGesture = 'modifier' | 'middle';
+
+export interface OpenedTab {
+	page: Page;
+	savedViews: SavedViews;
+}
+
+export type ExplorerTab = 'list' | 'timeseries' | 'table';
+
+export interface SavedViews {
+	/** Created over the page's own session; deleted when the test ends. */
+	seed(view: PostableSavedView): Promise<SeededView>;
+	/** The stored view, read straight from the API. */
+	get(id: string): Promise<GettableSavedView>;
+	/** The status of `GET /api/v2/saved_views/<id>`, for asserting a view is gone. */
+	status(id: string): Promise<number>;
+
+	/** On a bare url by default, which is `relativeTime=1h` and nothing else. */
+	openExplorer(
+		source?: SavedViewSource,
+		params?: Record<string, string>,
+	): Promise<void>;
+	/** Reloads and waits for the explorer to send the filter's query. */
+	reload(filter?: string, requestType?: string): Promise<void>;
+	/** The explorer's next query that carries `filter`, of `requestType` when given. */
+	queryRan(filter: string, requestType?: string): Promise<Response>;
+	/** The current url. */
+	url(): URL;
+	/** A query param of the current url, where the open view and time range live. */
+	param(name: string): string | null;
+	/** The id in the `viewKey` param, or null while no view is open. */
+	activeViewId(): string | null;
+
+	header(): Locator;
+	name(): Locator;
+	createButton(): Locator;
+	clearButton(): Locator;
+	discardButton(): Locator;
+	saveChangesButton(): Locator;
+	saveAction(action: SaveAction): Locator;
+	/** The view is open and nothing differs from what is stored. */
+	expectClean(displayName: string): Promise<void>;
+	/** The view is open and the explorer holds changes to it. */
+	expectDirty(displayName: string): Promise<void>;
+	/** No view is open. */
+	expectNoView(): Promise<void>;
+	toast(text: string): Locator;
+
+	openListButton(): Locator;
+	panel(): Locator;
+	searchInput(): Locator;
+	openList(): Promise<void>;
+	/** Narrows the list, and waits for exactly `rows` rows when given. */
+	search(text: string, rows?: number): Promise<void>;
+	rows(): Locator;
+	row(id: string): Locator;
+	rowLink(id: string): Locator;
+	/** The row link's href, resolved against the current page. */
+	rowHref(id: string): Promise<URL>;
+	/**
+	 * Searches for the view, opens it from its row and waits for the explorer's
+	 * query for it. Resolves with that query's response.
+	 */
+	open(view: SeededView): Promise<Response>;
+
+	rowMenuButton(id: string): Locator;
+	rowAction(action: RowAction): Locator;
+	openRowMenu(id: string): Promise<void>;
+	/** Opens the row's menu and picks an action once its permission check settles. */
+	chooseRowAction(id: string, action: RowAction): Promise<void>;
+	/** Opens the row's menu and picks Copy link, returning the copied text. */
+	copyLink(id: string): Promise<string>;
+	/**
+	 * Ctrl or Cmd click, or a middle click, on the row link. Resolves once the
+	 * tab exists, not once it has loaded; the driver is bound to the new tab.
+	 */
+	openInNewTab(id: string, gesture?: LinkGesture): Promise<OpenedTab>;
+	/**
+	 * Opens `url` in a new tab of the same browser context and waits for the
+	 * explorer's query for `view`.
+	 */
+	openLink(url: URL | string, view: SeededView): Promise<OpenedTab>;
+	/** Tabs the browser context has opened since this driver was built. */
+	newTabCount(): number;
+	rename(id: string, displayName: string): Promise<void>;
+	/** Confirms the delete dialog and waits for the DELETE. */
+	deleteView(id: string): Promise<void>;
+
+	modal(): Locator;
+	modalNameInput(): Locator;
+	modalSubmit(): Locator;
+	deleteConfirm(): Locator;
+	/** Create from the header: names the view, saves it and returns its id. */
+	createFromHeader(displayName: string): Promise<string>;
+	/** Types into the query bar, runs it and waits for the query to carry it. */
+	applyFilter(filter: string): Promise<void>;
+	queryBar(): Locator;
+	/** Header cells of the logs table with a title: the state indicator has none. */
+	logsColumnHeaders(): Locator;
+	openLogsFormatMenu(): Promise<void>;
+	closeLogsFormatMenu(): Promise<void>;
+	/** The checked format in the open menu: Raw, Default or Column. */
+	selectedLogsFormat(): Locator;
+	logsMaxLines(): Locator;
+	logsFontSize(): Locator;
+	explorerTab(tab: ExplorerTab): Locator;
+	/** Changes when the document reloads and not when the app navigates in place. */
+	documentId(): Promise<number>;
+	/** Update selected view, waiting for the PUT and the toast. */
+	update(): Promise<void>;
+	discard(): Promise<void>;
+
+	/** `GET /api/v2/saved_views/<id>` requests the page has made so far. */
+	viewGets(id: string): Request[];
+}
+
+/** The driver on any page of the same context, such as a tab a link opened. */
+export function savedViewsFor(page: Page): SavedViews {
+	const requests = collectRequests(page);
+	let newTabs = 0;
+	page.context().on('page', () => {
+		newTabs += 1;
+	});
+	const tid = (id: string): Locator => page.getByTestId(id);
+	const formatMenu = (): Locator => page.locator('.format-options-popover');
+	const viewPath = (id: string): string =>
+		`${BASE_PATH}${SAVED_VIEWS_API}/${id}`;
+
+	// A menu row, like a header button, ignores clicks until its permission
+	// check settles, and stays enabled-looking meanwhile.
+	const settle = async (control: Locator): Promise<void> => {
+		await expect(control).toBeVisible();
+		await expect(control).not.toHaveAttribute('aria-busy');
+		await expect(control).not.toHaveAttribute('data-loading');
+		await expect(control).not.toHaveAttribute('data-disabled');
+	};
+	const press = async (control: Locator): Promise<void> => {
+		await settle(control);
+		await control.click();
+	};
+
+	const savedViews: SavedViews = {
+		async seed(view) {
+			const id = await createViaApi(page, view);
+			trackSavedView(page, id);
+			return seededView(id, view);
+		},
+		get: (id) => getViaApi(page, id),
+		status: (id) => statusViaApi(page, id),
+
+		async openExplorer(source = 'logs', params = { relativeTime: '1h' }) {
+			await dismissQuickFiltersAnnouncement(page);
+			const search = new URLSearchParams(params).toString();
+			await page.goto(`${EXPLORER_PATH[source]}${search ? `?${search}` : ''}`);
+			await expect(savedViews.header()).toBeVisible();
+		},
+		async reload(filter, requestType) {
+			await Promise.all([
+				filter === undefined ? undefined : savedViews.queryRan(filter, requestType),
+				page.reload(),
+			]);
+			await expect(savedViews.header()).toBeVisible();
+		},
+		queryRan: (filter, requestType) =>
+			page.waitForResponse((res) => {
+				const request = res.request();
+				return (
+					isQueryRangeRequest(request) &&
+					filterExpressions(request).includes(filter) &&
+					(requestType === undefined ||
+						queryRangeBody(request).requestType === requestType)
+				);
+			}),
+		url: () => new URL(page.url()),
+		param: (name) => new URL(page.url()).searchParams.get(name),
+		activeViewId() {
+			const raw = savedViews.param('viewKey');
+			return raw === null ? null : (JSON.parse(raw) as string);
+		},
+
+		header: () => tid('saved-views-header'),
+		name: () => tid('saved-views-name'),
+		createButton: () => tid('saved-views-create'),
+		clearButton: () => tid('saved-views-clear'),
+		discardButton: () => tid('saved-views-discard'),
+		saveChangesButton: () => tid('saved-views-save-changes'),
+		saveAction: (action) => tid(`saved-views-save-changes-item-${action}`),
+		async expectClean(displayName) {
+			await expect(savedViews.name()).toHaveText(displayName);
+			await expect(savedViews.clearButton()).toBeVisible();
+			await expect(savedViews.discardButton()).toBeHidden();
+			await expect(savedViews.saveChangesButton()).toBeHidden();
+		},
+		async expectDirty(displayName) {
+			await expect(savedViews.name()).toHaveText(displayName);
+			await expect(savedViews.discardButton()).toBeVisible();
+			await expect(savedViews.saveChangesButton()).toBeVisible();
+			await expect(savedViews.clearButton()).toBeHidden();
+		},
+		async expectNoView() {
+			await expect(savedViews.name()).toHaveText(MY_VIEW);
+			await expect(savedViews.createButton()).toBeVisible();
+			await expect(savedViews.clearButton()).toBeHidden();
+			await expect.poll(() => savedViews.param('viewKey')).toBeNull();
+		},
+		toast: (text) =>
+			page.locator('[data-sonner-toast]').filter({ hasText: text }),
+
+		openListButton: () => tid('saved-views-open'),
+		panel: () => tid('saved-views-panel'),
+		searchInput: () => tid('saved-views-search'),
+		async openList() {
+			await expect(
+				savedViews.openListButton().or(savedViews.panel()),
+			).toBeVisible();
+			if (!(await savedViews.panel().isVisible())) {
+				await press(savedViews.openListButton());
+			}
+			await expect(savedViews.panel()).toBeVisible();
+		},
+		async search(text, rows) {
+			await savedViews.searchInput().fill(text);
+			if (rows !== undefined) {
+				await expect(savedViews.rows()).toHaveCount(rows);
+			}
+		},
+		rows: () => tid('saved-views-row'),
+		row: (id) =>
+			page.locator(`[data-testid="saved-views-row"][data-view-id="${id}"]`),
+		rowLink: (id) => savedViews.row(id).getByTestId('saved-views-row-name'),
+		async rowHref(id) {
+			const href = await savedViews.rowLink(id).getAttribute('href');
+			expect(href, `row ${id} has no href`).not.toBeNull();
+			return new URL(href as string, page.url());
+		},
+		async open(view) {
+			await savedViews.openList();
+			await savedViews.search(view.displayName);
+			const [response] = await Promise.all([
+				savedViews.queryRan(view.filter, view.requestType),
+				savedViews.rowLink(view.id).click(),
+			]);
+			await expect.poll(() => savedViews.activeViewId()).toBe(view.id);
+			await expect(savedViews.name()).toHaveText(view.displayName);
+			return response;
+		},
+
+		rowMenuButton: (id) => savedViews.row(id).getByTestId('saved-views-row-menu'),
+		rowAction: (action) => tid(`saved-views-row-menu-item-${action}`),
+		async openRowMenu(id) {
+			// The menu button has no width until the row is hovered.
+			await savedViews.row(id).hover();
+			await savedViews.rowMenuButton(id).click();
+		},
+		async chooseRowAction(id, action) {
+			await savedViews.openRowMenu(id);
+			await press(savedViews.rowAction(action));
+		},
+		async copyLink(id) {
+			// Clipboard permissions are Chromium-only, so the copy is caught in the
+			// page: react-use copies through a selection and execCommand, whose
+			// `copy` event a capture listener sees first.
+			await page.evaluate(() => {
+				const w = window as unknown as { __copied?: string };
+				delete w.__copied;
+				document.addEventListener(
+					'copy',
+					() => {
+						w.__copied = document.getSelection()?.toString() ?? '';
+					},
+					{ capture: true, once: true },
+				);
+			});
+			await savedViews.chooseRowAction(id, 'copyLink');
+			const copied = (): Promise<string | undefined> =>
+				page.evaluate(() => (window as unknown as { __copied?: string }).__copied);
+			await expect.poll(copied).toBeTruthy();
+			return (await copied()) as string;
+		},
+		async openInNewTab(id, gesture = 'modifier') {
+			const [tab] = await Promise.all([
+				page.context().waitForEvent('page'),
+				savedViews
+					.rowLink(id)
+					.click(
+						gesture === 'modifier'
+							? { modifiers: ['ControlOrMeta'] }
+							: { button: 'middle' },
+					),
+			]);
+			return { page: tab, savedViews: savedViewsFor(tab) };
+		},
+		async openLink(url, view) {
+			const tab = await page.context().newPage();
+			const opened = savedViewsFor(tab);
+			await Promise.all([
+				opened.queryRan(view.filter, view.requestType),
+				tab.goto(url.toString()),
+			]);
+			return { page: tab, savedViews: opened };
+		},
+		newTabCount: () => newTabs,
+		async rename(id, displayName) {
+			await savedViews.chooseRowAction(id, 'editDetails');
+			await expect(savedViews.modalNameInput()).toBeVisible();
+			await savedViews.modalNameInput().fill(displayName);
+			const [response] = await Promise.all([
+				page.waitForResponse(
+					(res) =>
+						res.request().method() === 'PUT' &&
+						new URL(res.url()).pathname === viewPath(id),
+				),
+				savedViews.modalSubmit().click(),
+			]);
+			expect(response.ok(), `PUT ${SAVED_VIEWS_API}/${id}`).toBe(true);
+			await expect(savedViews.modal()).toBeHidden();
+		},
+		async deleteView(id) {
+			await Promise.all([
+				page.waitForResponse(
+					(res) =>
+						res.request().method() === 'DELETE' &&
+						new URL(res.url()).pathname === viewPath(id),
+				),
+				press(savedViews.deleteConfirm()),
+			]);
+			await expect(savedViews.deleteConfirm()).toBeHidden();
+		},
+
+		modal: () => tid('save-view-modal'),
+		modalNameInput: () => tid('save-view-name'),
+		modalSubmit: () => tid('save-view-submit'),
+		deleteConfirm: () => tid('delete-saved-view-confirm'),
+		async createFromHeader(displayName) {
+			await press(savedViews.createButton());
+			await savedViews.modalNameInput().fill(displayName);
+			const [response] = await Promise.all([
+				page.waitForResponse(
+					(res) =>
+						res.request().method() === 'POST' &&
+						new URL(res.url()).pathname === `${BASE_PATH}${SAVED_VIEWS_API}`,
+				),
+				savedViews.modalSubmit().click(),
+			]);
+			expect(response.status(), `POST ${SAVED_VIEWS_API}`).toBe(201);
+			const { id } = ((await response.json()) as { data: { id: string } }).data;
+			trackSavedView(page, id);
+			await expect(savedViews.modal()).toBeHidden();
+			return id;
+		},
+		logsColumnHeaders: () => page.locator('thead th').filter({ hasText: /\S/ }),
+		async openLogsFormatMenu() {
+			await tid('periscope-btn-format-options').click();
+			await expect(formatMenu()).toBeVisible();
+		},
+		async closeLogsFormatMenu() {
+			await tid('periscope-btn-format-options').click();
+			await expect(formatMenu()).toBeHidden();
+		},
+		selectedLogsFormat: () =>
+			formatMenu()
+				.locator('.menu-items .item')
+				.filter({ has: page.locator('svg') }),
+		logsMaxLines: () => formatMenu().getByTestId('max-lines-per-row'),
+		logsFontSize: () => formatMenu().getByTestId('font-size-select'),
+		explorerTab: (tab) => page.locator(`.${tab}-view-tab`),
+		documentId: () => page.evaluate(() => performance.timeOrigin),
+		queryBar: () =>
+			page.locator('.query-where-clause-editor .cm-content').first(),
+		async applyFilter(filter) {
+			await Promise.all([
+				savedViews.queryRan(filter),
+				(async (): Promise<void> => {
+					await savedViews.queryBar().click();
+					await page.keyboard.press('ControlOrMeta+a');
+					await page.keyboard.insertText(filter);
+					await expect(savedViews.queryBar()).toHaveText(filter);
+					await page.locator('[data-run-query-btn]').click();
+				})(),
+			]);
+		},
+		async update() {
+			const id = savedViews.activeViewId();
+			await savedViews.saveChangesButton().click();
+			const [response] = await Promise.all([
+				page.waitForResponse(
+					(res) =>
+						res.request().method() === 'PUT' &&
+						new URL(res.url()).pathname === viewPath(id as string),
+				),
+				press(savedViews.saveAction('update')),
+			]);
+			expect(response.ok(), `PUT ${SAVED_VIEWS_API}/${id}`).toBe(true);
+			await expect(savedViews.toast('View updated')).toBeVisible();
+		},
+		async discard() {
+			await press(savedViews.discardButton());
+		},
+
+		viewGets: (id) =>
+			requests.filter(
+				(request) =>
+					request.method() === 'GET' &&
+					new URL(request.url()).pathname === viewPath(id),
+			),
+	};
+
+	return savedViews;
+}
+
+const withSavedViews = driver(
+	'savedViews',
+	({ page }) => savedViewsFor(page),
+	(_, { page }) => removeTrackedSavedViews(page),
+);
+
+export const test = withSavedViews(kit);
+
+export { expect } from './kit';
+export * from './saved-views/spec';
+export type * from './saved-views/spec.types';
+export { queryRangeBody } from './saved-views/query';

tests/e2e/drivers/saved-views/api.ts

@@ -0,0 +1,78 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import type { Page } from '@playwright/test';
+
+import { authToken } from '../api';
+import { SAVED_VIEWS_API } from './spec';
+import type { GettableSavedView, PostableSavedView } from './spec.types';
+
+async function bearer(page: Page): Promise<{ Authorization: string }> {
+	return { Authorization: `Bearer ${await authToken(page)}` };
+}
+
+export async function createViaApi(
+	page: Page,
+	view: PostableSavedView,
+): Promise<string> {
+	const res = await page.request.post(SAVED_VIEWS_API, {
+		data: view,
+		headers: await bearer(page),
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`POST ${SAVED_VIEWS_API} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	return ((await res.json()) as { data: { id: string } }).data.id;
+}
+
+export async function getViaApi(
+	page: Page,
+	id: string,
+): Promise<GettableSavedView> {
+	const res = await page.request.get(`${SAVED_VIEWS_API}/${id}`, {
+		headers: await bearer(page),
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`GET ${SAVED_VIEWS_API}/${id} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	return ((await res.json()) as { data: GettableSavedView }).data;
+}
+
+/** The status alone, for asserting a view is gone. */
+export async function statusViaApi(page: Page, id: string): Promise<number> {
+	const res = await page.request.get(`${SAVED_VIEWS_API}/${id}`, {
+		headers: await bearer(page),
+	});
+	return res.status();
+}
+
+/** Not asserted: a test that deleted its own view must not fail on cleanup. */
+export async function deleteViaApi(page: Page, id: string): Promise<void> {
+	try {
+		await page.request.delete(`${SAVED_VIEWS_API}/${id}`, {
+			headers: await bearer(page),
+		});
+	} catch {
+		/* the view outlives the run rather than hiding why it failed */
+	}
+}
+
+const trackedByPage = new WeakMap<Page, string[]>();
+
+/** Registers a view for deletion when the test owning `page` ends. */
+export function trackSavedView(page: Page, id: string): void {
+	trackedByPage.set(page, [...(trackedByPage.get(page) ?? []), id]);
+}
+
+export async function removeTrackedSavedViews(page: Page): Promise<void> {
+	const ids = trackedByPage.get(page) ?? [];
+	trackedByPage.delete(page);
+	for (const id of ids) {
+		await deleteViaApi(page, id);
+	}
+}

tests/e2e/drivers/saved-views/query.ts

@@ -0,0 +1,40 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import type { Request } from '@playwright/test';
+
+import { isQueryRange } from '../query-range-mock';
+
+interface QueryEnvelope {
+	type: string;
+	spec: {
+		name?: string;
+		signal?: string;
+		filter?: { expression?: string };
+		aggregations?: { expression?: string }[];
+		groupBy?: { name: string }[];
+	};
+}
+
+export interface QueryRangeRequest {
+	start: number;
+	end: number;
+	requestType: string;
+	compositeQuery: { queries: QueryEnvelope[] };
+}
+
+export function isQueryRangeRequest(request: Request): boolean {
+	return request.method() === 'POST' && isQueryRange(request.url());
+}
+
+export function queryRangeBody(request: Request): QueryRangeRequest {
+	return request.postDataJSON() as QueryRangeRequest;
+}
+
+/** The filter of every query in the request, in order. */
+export function filterExpressions(request: Request): string[] {
+	return queryRangeBody(request).compositeQuery.queries.map(
+		(query) => query.spec.filter?.expression ?? '',
+	);
+}

tests/e2e/drivers/saved-views/spec.ts

@@ -0,0 +1,121 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+// Typed builders for the saved view spec: pure data, no Playwright. The types
+// live in `spec.types.ts`.
+//
+// `/api/v2/saved_views`: create and update take the whole spec, and an update
+// replaces it, so a field left out is reset.
+
+import { randomBytes } from 'crypto';
+
+import type {
+	LogsViewOptions,
+	PostableSavedView,
+	SavedViewColumn,
+	SavedViewPanelType,
+	SavedViewRequestType,
+	SeededView,
+} from './spec.types';
+
+export const SAVED_VIEWS_API = '/api/v2/saved_views';
+
+const REQUEST_TYPE: Record<SavedViewPanelType, SavedViewRequestType> = {
+	list: 'raw',
+	graph: 'time_series',
+	table: 'scalar',
+};
+
+/** Workers and browser projects share one org, so every view name is unique. */
+export function uniqueViewName(label: string): string {
+	return `e2e sv ${label} ${randomBytes(4).toString('hex')}`;
+}
+
+export const LOG_COLUMNS: Record<string, SavedViewColumn> = {
+	timestamp: {
+		name: 'timestamp',
+		signal: 'logs',
+		fieldContext: 'log',
+		fieldDataType: '',
+	},
+	body: {
+		name: 'body',
+		signal: 'logs',
+		fieldContext: 'log',
+		fieldDataType: '',
+	},
+	serviceName: {
+		name: 'service.name',
+		signal: 'logs',
+		fieldContext: 'resource',
+		fieldDataType: 'string',
+	},
+	severityText: {
+		name: 'severity_text',
+		signal: 'logs',
+		fieldContext: 'log',
+		fieldDataType: 'string',
+	},
+};
+
+export function logsView({
+	displayName,
+	filter = '',
+	panelType = 'list',
+	groupBy = [],
+	columns = [LOG_COLUMNS.timestamp, LOG_COLUMNS.body],
+	display,
+}: LogsViewOptions): PostableSavedView {
+	const isList = panelType === 'list';
+	return {
+		generateName: true,
+		source: 'logs',
+		schemaVersion: 'v2',
+		spec: {
+			displayName,
+			panelType,
+			requestType: REQUEST_TYPE[panelType],
+			queries: [
+				{
+					type: 'builder_query',
+					spec: {
+						name: 'A',
+						signal: 'logs',
+						disabled: false,
+						filter: { expression: filter },
+						...(isList
+							? {
+									order: [
+										{ key: { name: 'timestamp' }, direction: 'desc' },
+										{ key: { name: 'id' }, direction: 'desc' },
+									],
+								}
+							: {
+									aggregations: [{ expression: 'count()' }],
+									groupBy: groupBy.map((name) => ({
+										name,
+										fieldContext: 'resource',
+										fieldDataType: 'string',
+									})),
+								}),
+					},
+				},
+			],
+			selectedFields: isList ? columns : [],
+			...(display && { display }),
+		},
+	};
+}
+
+export function seededView(id: string, view: PostableSavedView): SeededView {
+	const [query] = view.spec.queries as {
+		spec?: { filter?: { expression?: string } };
+	}[];
+	return {
+		id,
+		displayName: view.spec.displayName,
+		filter: query?.spec?.filter?.expression ?? '',
+		requestType: view.spec.requestType,
+	};
+}

tests/e2e/drivers/saved-views/spec.types.ts

@@ -0,0 +1,69 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+// The saved view spec of `/api/v2/saved_views`.
+
+export type SavedViewSource = 'logs' | 'traces' | 'metrics' | 'meter';
+export type SavedViewPanelType = 'list' | 'graph' | 'table';
+
+export type SavedViewRequestType = 'raw' | 'time_series' | 'scalar';
+
+export interface SavedViewColumn {
+	name: string;
+	signal?: string;
+	fieldContext?: string;
+	fieldDataType?: string;
+}
+
+export interface SavedViewDisplay {
+	format?: string;
+	maxLines?: number;
+	fontSize?: string;
+	color?: string;
+}
+
+export interface SavedViewSpec {
+	displayName: string;
+	panelType: SavedViewPanelType;
+	requestType: SavedViewRequestType;
+	queries: Record<string, unknown>[];
+	selectedFields?: SavedViewColumn[];
+	display?: SavedViewDisplay;
+}
+
+export interface PostableSavedView {
+	generateName: true;
+	source: SavedViewSource;
+	schemaVersion: 'v2';
+	spec: SavedViewSpec;
+}
+
+export interface GettableSavedView {
+	id: string;
+	name: string;
+	source: SavedViewSource;
+	createdBy: string;
+	updatedBy?: string;
+	spec: SavedViewSpec;
+}
+
+export interface LogsViewOptions {
+	displayName: string;
+	filter?: string;
+	panelType?: SavedViewPanelType;
+	/** Group by attributes of a graph or table view, as resource attributes. */
+	groupBy?: string[];
+	/** Defaults to timestamp and body, which a list view always shows. */
+	columns?: SavedViewColumn[];
+	display?: SavedViewDisplay;
+}
+
+export interface SeededView {
+	id: string;
+	displayName: string;
+	/** The first query's filter, which the explorer sends once the view is open. */
+	filter: string;
+	/** What the explorer's own query for the view asks for: raw, time_series or scalar. */
+	requestType: string;
+}

tests/e2e/tests/saved-views/lifecycle.spec.ts

@@ -0,0 +1,176 @@
+import {
+	expect,
+	LOG_COLUMNS,
+	logsView,
+	test,
+	uniqueViewName,
+} from '../../drivers/saved-views';
+
+const SAVED_FILTER = "service.name = 'frontend'";
+const EDITED_FILTER = "service.name = 'cartservice'";
+
+test.describe('Saved views: lifecycle on the logs explorer', () => {
+	test('TC-01 a view created from the header survives a reload clean', async ({
+		savedViews,
+	}) => {
+		const displayName = uniqueViewName('create');
+		await savedViews.openExplorer();
+		await savedViews.expectNoView();
+		await savedViews.applyFilter(SAVED_FILTER);
+
+		const id = await savedViews.createFromHeader(displayName);
+		await expect(savedViews.toast('View created')).toBeVisible();
+		await expect.poll(() => savedViews.activeViewId()).toBe(id);
+		await savedViews.expectClean(displayName);
+
+		const stored = await savedViews.get(id);
+		expect(stored.source).toBe('logs');
+		expect(stored.spec.displayName).toBe(displayName);
+		expect(stored.spec.panelType).toBe('list');
+		expect(JSON.stringify(stored.spec.queries)).toContain(SAVED_FILTER);
+
+		await savedViews.reload(SAVED_FILTER);
+		await savedViews.expectClean(displayName);
+		await expect(savedViews.queryBar()).toHaveText(SAVED_FILTER);
+
+		await savedViews.openList();
+		await savedViews.search(displayName);
+		await expect(savedViews.row(id)).toBeVisible();
+		await expect(savedViews.rowLink(id)).toHaveAttribute('aria-current', 'page');
+	});
+
+	test('TC-02 an edited view turns dirty, updates, and opens with the new filter after a reload', async ({
+		savedViews,
+	}) => {
+		const view = await savedViews.seed(
+			logsView({
+				displayName: uniqueViewName('update'),
+				filter: SAVED_FILTER,
+			}),
+		);
+		await savedViews.openExplorer();
+		await savedViews.open(view);
+		await savedViews.expectClean(view.displayName);
+
+		await savedViews.applyFilter(EDITED_FILTER);
+		await savedViews.expectDirty(view.displayName);
+
+		await savedViews.update();
+		await savedViews.expectClean(view.displayName);
+
+		const stored = await savedViews.get(view.id);
+		expect(JSON.stringify(stored.spec.queries)).toContain(EDITED_FILTER);
+		expect(JSON.stringify(stored.spec.queries)).not.toContain(SAVED_FILTER);
+
+		await savedViews.reload(EDITED_FILTER);
+		await savedViews.expectClean(view.displayName);
+		await expect(savedViews.queryBar()).toHaveText(EDITED_FILTER);
+	});
+
+	test('TC-03 discarding changes brings back the stored filter and tab', async ({
+		savedViews,
+	}) => {
+		const view = await savedViews.seed(
+			logsView({
+				displayName: uniqueViewName('discard'),
+				filter: SAVED_FILTER,
+			}),
+		);
+		await savedViews.openExplorer();
+		await savedViews.open(view);
+		await expect(savedViews.explorerTab('list')).toHaveClass(/active-tab/);
+
+		await savedViews.applyFilter(EDITED_FILTER);
+		await savedViews.explorerTab('timeseries').click();
+		await expect(savedViews.explorerTab('timeseries')).toHaveClass(/active-tab/);
+		await savedViews.expectDirty(view.displayName);
+
+		await savedViews.discard();
+		await savedViews.expectClean(view.displayName);
+		await expect(savedViews.queryBar()).toHaveText(SAVED_FILTER);
+		await expect(savedViews.explorerTab('list')).toHaveClass(/active-tab/);
+		expect(savedViews.param('panelTypes')).toBe('"list"');
+
+		const stored = await savedViews.get(view.id);
+		expect(JSON.stringify(stored.spec.queries)).toContain(SAVED_FILTER);
+	});
+
+	test('TC-04 deleting the open view clears it without trying to load it again', async ({
+		savedViews,
+	}) => {
+		const view = await savedViews.seed(
+			logsView({
+				displayName: uniqueViewName('delete'),
+				filter: SAVED_FILTER,
+			}),
+		);
+		await savedViews.openExplorer();
+		await savedViews.open(view);
+
+		await savedViews.chooseRowAction(view.id, 'delete');
+		const getsBeforeDelete = savedViews.viewGets(view.id).length;
+		expect(getsBeforeDelete).toBeGreaterThan(0);
+		await savedViews.deleteView(view.id);
+
+		await expect(savedViews.toast('View deleted')).toBeVisible();
+		await expect(savedViews.row(view.id)).toHaveCount(0);
+		await savedViews.expectNoView();
+		await expect.poll(() => savedViews.param('panelTypes')).toBeNull();
+		expect(savedViews.param('viewName')).toBeNull();
+		expect(savedViews.param('compositeQuery') ?? '').not.toContain('frontend');
+		expect(savedViews.viewGets(view.id)).toHaveLength(getsBeforeDelete);
+		expect(await savedViews.status(view.id)).toBe(404);
+	});
+
+	test('TC-05 renaming a view keeps its columns and display settings', async ({
+		savedViews,
+	}) => {
+		const columns = [
+			LOG_COLUMNS.timestamp,
+			LOG_COLUMNS.body,
+			LOG_COLUMNS.serviceName,
+			LOG_COLUMNS.severityText,
+		];
+		const headers = ['Timestamp', 'Body', 'service.name', 'severity_text'];
+		const display = { format: 'table', maxLines: 3, fontSize: 'medium' };
+		const view = await savedViews.seed(
+			logsView({
+				displayName: uniqueViewName('rename'),
+				filter: SAVED_FILTER,
+				columns,
+				display,
+			}),
+		);
+		const renamed = uniqueViewName('renamed');
+
+		const expectDisplay = async (): Promise<void> => {
+			await expect(savedViews.logsColumnHeaders()).toHaveText(headers);
+			await savedViews.openLogsFormatMenu();
+			await expect(savedViews.selectedLogsFormat()).toHaveText('Column');
+			await expect(savedViews.logsMaxLines()).toHaveValue('3');
+			await expect(savedViews.logsFontSize()).toHaveText('medium');
+			await savedViews.closeLogsFormatMenu();
+		};
+
+		await savedViews.openExplorer('logs', { relativeTime: '1d' });
+		await savedViews.open(view);
+		await expectDisplay();
+
+		await savedViews.openList();
+		await savedViews.search(view.displayName);
+		await savedViews.rename(view.id, renamed);
+		await expect(savedViews.toast('View updated')).toBeVisible();
+		await expect(savedViews.name()).toHaveText(renamed);
+
+		const stored = await savedViews.get(view.id);
+		expect(stored.spec.displayName).toBe(renamed);
+		expect(stored.spec.selectedFields?.map((column) => column.name)).toEqual(
+			columns.map((column) => column.name),
+		);
+		expect(stored.spec.display).toMatchObject(display);
+
+		await savedViews.reload(SAVED_FILTER);
+		await savedViews.expectClean(renamed);
+		await expectDisplay();
+	});
+});

tests/e2e/tests/saved-views/open.spec.ts

@@ -0,0 +1,79 @@
+import {
+	type ExplorerTab,
+	expect,
+	logsView,
+	queryRangeBody,
+	type SavedViewPanelType,
+	test,
+	uniqueViewName,
+} from '../../drivers/saved-views';
+
+const FILTER = "service.name = 'frontend'";
+
+const PANELS: {
+	panelType: SavedViewPanelType;
+	tab: ExplorerTab;
+	requestType: string;
+	aggregation: string | undefined;
+	groupBy: string[] | undefined;
+}[] = [
+	{
+		panelType: 'list',
+		tab: 'list',
+		requestType: 'raw',
+		aggregation: undefined,
+		groupBy: undefined,
+	},
+	{
+		panelType: 'graph',
+		tab: 'timeseries',
+		requestType: 'time_series',
+		aggregation: 'count()',
+		groupBy: ['service.name'],
+	},
+	{
+		panelType: 'table',
+		tab: 'table',
+		requestType: 'scalar',
+		aggregation: 'count()',
+		groupBy: ['service.name'],
+	},
+];
+
+test.describe('Saved views: opening from the list', () => {
+	for (const [
+		index,
+		{ panelType, tab, requestType, aggregation, groupBy },
+	] of PANELS.entries()) {
+		test(`TC-0${index + 1} a ${panelType} view opens with its query, tab and a clean header`, async ({
+			savedViews,
+		}) => {
+			const view = await savedViews.seed(
+				logsView({
+					displayName: uniqueViewName(`open ${panelType}`),
+					filter: FILTER,
+					panelType,
+					groupBy,
+				}),
+			);
+			await savedViews.openExplorer();
+			const response = await savedViews.open(view);
+
+			expect(savedViews.param('panelTypes')).toBe(JSON.stringify(panelType));
+			await expect(savedViews.explorerTab(tab)).toHaveClass(/active-tab/);
+			await expect(savedViews.queryBar()).toHaveText(FILTER);
+			await expect(savedViews.rowLink(view.id)).toHaveAttribute(
+				'aria-current',
+				'page',
+			);
+			await savedViews.expectClean(view.displayName);
+
+			const body = queryRangeBody(response.request());
+			expect(body.requestType).toBe(requestType);
+			const [query] = body.compositeQuery.queries;
+			expect(query.spec.filter?.expression).toBe(FILTER);
+			expect(query.spec.aggregations?.[0]?.expression).toBe(aggregation);
+			expect(query.spec.groupBy?.map((group) => group.name)).toEqual(groupBy);
+		});
+	}
+});

tests/e2e/tests/saved-views/row-link.spec.ts

@@ -0,0 +1,169 @@
+import {
+	expect,
+	explorerPathname,
+	logsView,
+	type SavedViews,
+	test,
+	uniqueViewName,
+} from '../../drivers/saved-views';
+
+const LOGS_PATH = explorerPathname('logs');
+const FRONTEND_FILTER = "service.name = 'frontend'";
+const CART_FILTER = "service.name = 'cartservice'";
+
+const HOUR_MS = 3_600_000;
+
+/** Whole milliseconds, as the links carry them. */
+function customRange(): { startTime: string; endTime: string } {
+	const end = Math.floor(Date.now() / 60_000) * 60_000;
+	return {
+		startTime: String(end - 2 * HOUR_MS),
+		endTime: String(end - HOUR_MS),
+	};
+}
+
+async function seedTwoViews(savedViews: SavedViews) {
+	const target = await savedViews.seed(
+		logsView({ displayName: uniqueViewName('link'), filter: FRONTEND_FILTER }),
+	);
+	const other = await savedViews.seed(
+		logsView({ displayName: uniqueViewName('other'), filter: CART_FILTER }),
+	);
+	return { target, other };
+}
+
+test.describe('Saved views: row links', () => {
+	test('TC-01 a row links to its view in the selected relative time range', async ({
+		savedViews,
+	}) => {
+		const { target } = await seedTwoViews(savedViews);
+		await savedViews.openExplorer('logs', { relativeTime: '1h' });
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+
+		const href = await savedViews.rowHref(target.id);
+		expect(href.pathname).toBe(LOGS_PATH);
+		expect(href.searchParams.get('viewKey')).toBe(JSON.stringify(target.id));
+		expect(href.searchParams.get('panelTypes')).toBe('"list"');
+		expect(href.searchParams.get('relativeTime')).toBe('1h');
+		expect(href.searchParams.has('startTime')).toBe(false);
+		expect(href.searchParams.has('endTime')).toBe(false);
+		expect(href.searchParams.get('compositeQuery')).toContain(
+			encodeURIComponent(FRONTEND_FILTER),
+		);
+	});
+
+	test('TC-02 a row links to its view in a custom time range, to the millisecond', async ({
+		savedViews,
+	}) => {
+		const { target } = await seedTwoViews(savedViews);
+		const range = customRange();
+		await savedViews.openExplorer('logs', range);
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+
+		const href = await savedViews.rowHref(target.id);
+		expect(href.searchParams.get('startTime')).toBe(range.startTime);
+		expect(href.searchParams.get('endTime')).toBe(range.endTime);
+		expect(href.searchParams.has('relativeTime')).toBe(false);
+		expect(href.searchParams.get('viewKey')).toBe(JSON.stringify(target.id));
+	});
+
+	test('TC-03 a plain click opens the view in place and marks its row', async ({
+		savedViews,
+	}) => {
+		const { target, other } = await seedTwoViews(savedViews);
+		await savedViews.openExplorer('logs', { relativeTime: '1h' });
+		const documentId = await savedViews.documentId();
+
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+		await savedViews.open(target);
+
+		await savedViews.expectClean(target.displayName);
+		await expect(savedViews.rowLink(target.id)).toHaveAttribute(
+			'aria-current',
+			'page',
+		);
+		expect(savedViews.param('relativeTime')).toBe('1h');
+		expect(await savedViews.documentId()).toBe(documentId);
+		expect(savedViews.newTabCount()).toBe(0);
+
+		await savedViews.search(other.displayName);
+		await expect(savedViews.rowLink(other.id)).not.toHaveAttribute(
+			'aria-current',
+			'page',
+		);
+	});
+
+	for (const gesture of ['modifier', 'middle'] as const) {
+		test(`TC-04 a ${gesture} click opens the view in a new tab and leaves this one alone`, async ({
+			savedViews,
+		}) => {
+			const { target } = await seedTwoViews(savedViews);
+			await savedViews.openExplorer('logs', { relativeTime: '1h' });
+			await savedViews.openList();
+			await savedViews.search(target.displayName);
+			const urlBefore = savedViews.url().href;
+
+			const { savedViews: opened } = await savedViews.openInNewTab(
+				target.id,
+				gesture,
+			);
+			await opened.queryRan(target.filter);
+
+			await opened.expectClean(target.displayName);
+			expect(opened.activeViewId()).toBe(target.id);
+			expect(opened.param('relativeTime')).toBe('1h');
+			await expect(opened.queryBar()).toHaveText(target.filter);
+			expect(savedViews.url().href).toBe(urlBefore);
+			await expect(savedViews.name()).toHaveText('My view');
+		});
+	}
+});
+
+test.describe('Saved views: copied links', () => {
+	test('TC-05 a copied link reopens the view in the same relative time range', async ({
+		savedViews,
+	}) => {
+		const { target } = await seedTwoViews(savedViews);
+		await savedViews.openExplorer('logs', { relativeTime: '1h' });
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+
+		const copied = new URL(await savedViews.copyLink(target.id));
+		await expect(savedViews.toast('Link copied')).toBeVisible();
+		expect(copied.origin).toBe(savedViews.url().origin);
+		expect(copied.pathname).toBe(LOGS_PATH);
+		expect(copied.searchParams.get('relativeTime')).toBe('1h');
+		expect(copied.searchParams.get('viewKey')).toBe(JSON.stringify(target.id));
+
+		const { savedViews: reopened } = await savedViews.openLink(copied, target);
+
+		await reopened.expectClean(target.displayName);
+		expect(reopened.activeViewId()).toBe(target.id);
+		expect(reopened.param('relativeTime')).toBe('1h');
+		await expect(reopened.queryBar()).toHaveText(target.filter);
+	});
+
+	test('TC-06 a copied link reopens the view in the same custom time range', async ({
+		savedViews,
+	}) => {
+		const { target } = await seedTwoViews(savedViews);
+		const range = customRange();
+		await savedViews.openExplorer('logs', range);
+		await savedViews.openList();
+		await savedViews.search(target.displayName);
+
+		const copied = new URL(await savedViews.copyLink(target.id));
+		expect(copied.searchParams.get('startTime')).toBe(range.startTime);
+		expect(copied.searchParams.get('endTime')).toBe(range.endTime);
+		expect(copied.searchParams.has('relativeTime')).toBe(false);
+
+		const { savedViews: reopened } = await savedViews.openLink(copied, target);
+
+		await reopened.expectClean(target.displayName);
+		expect(reopened.param('startTime')).toBe(range.startTime);
+		expect(reopened.param('endTime')).toBe(range.endTime);
+	});
+});