test(e2e): real section/panel locators, and a sections fixture

The panel and section locators I first wrote keyed off `[data-panel-id]` and
`[data-section-id]`, which match nothing — invented from reading the components rather
than from the DOM. The rendered structure is:

  dashboard-section-sec-<firstPanelKey>          the section
  dashboard-section-toggle-sec-<firstPanelKey>   its collapse control
  panel-actions-<panelKey>                       a panel's actions trigger

A section's id derives from its first panel's key, which is stable for a seeded
fixture because the keys are ours.

sections-dashboard-v2.json is trimmed out of a real V2 dashboard: three grid sections,
six panels across six plugin kinds, layout $refs intact, variables pared back to text
and custom so option lists stay fixed. Panel queries target signals a test stack holds
nothing for, which is deliberate — specs on it assert structure and chrome, and the
empty result is itself worth asserting.

tests/e2e/helpers/dashboards-v2.ts

@@ -0,0 +1,311 @@
+import type { APIRequestContext, Locator, Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { authToken } from './dashboards';
+
+// Helpers for the V2 dashboard detail page (`DashboardPageV2`), which now serves
+// /dashboard/:id unconditionally. The V1 helpers in ./dashboards.ts still cover
+// seeding through the v1 API and the list page.
+//
+// Interaction contracts encoded here rather than in each spec:
+//   - a multi-select variable commits on dropdown CLOSE, not per toggle;
+//   - an ALL selection renders as an overlay reading "ALL", not as tags;
+//   - a variable is only settled once its options have arrived.
+
+export const dashboardV2Path = (id: string): string => `/dashboard/${id}`;
+
+/** Perses-style spec the v2 API stores. Only what the specs need is typed. */
+export interface DashboardV2Spec {
+	display: { name: string; description?: string };
+	layouts: unknown[];
+	panels: Record<string, unknown>;
+	variables: unknown[];
+	[key: string]: unknown;
+}
+
+export const SCHEMA_VERSION = 'v6';
+
+/** An empty but valid spec — the base every fixture spreads over. */
+export function emptyV2Spec(name: string): DashboardV2Spec {
+	return { display: { name }, layouts: [], panels: {}, variables: [] };
+}
+
+// ─── Seeding through the v2 API ───────────────────────────────────────────
+//
+// Specs seed the shape they assert against, rather than relying on whatever the
+// v1 -> v2 migration happens to produce or on telemetry that ambient data may or
+// may not contain. Migration output is covered on its own, from the v1 fixtures.
+
+export async function createDashboardV2ViaApi(
+	page: Page,
+	name: string,
+	spec?: Partial<DashboardV2Spec>,
+): Promise<string> {
+	const token = await authToken(page);
+	const res = await page.request.post('/api/v2/dashboards', {
+		data: {
+			name,
+			schemaVersion: SCHEMA_VERSION,
+			tags: [],
+			// `name` wins over any display name the fixture carries, so a fixture can be
+			// seeded twice under two titles and each spec can still find its own.
+			spec: {
+				...emptyV2Spec(name),
+				...spec,
+				display: { ...spec?.display, name },
+			},
+		},
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`POST /api/v2/dashboards ${res.status()}: ${await res.text()}`,
+		);
+	}
+	const body = (await res.json()) as { data?: { id?: string } };
+	const id = body.data?.id;
+	if (!id) {
+		throw new Error(
+			`POST /api/v2/dashboards returned no id: ${JSON.stringify(body)}`,
+		);
+	}
+	return id;
+}
+
+export async function getDashboardV2(
+	page: Page,
+	id: string,
+): Promise<{ spec: DashboardV2Spec; [key: string]: unknown }> {
+	const token = await authToken(page);
+	const res = await page.request.get(`/api/v2/dashboards/${id}`, {
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`GET /api/v2/dashboards/${id} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	const body = (await res.json()) as {
+		data: { spec: DashboardV2Spec; [key: string]: unknown };
+	};
+	return body.data;
+}
+
+export async function deleteDashboardV2ViaApi(
+	request: APIRequestContext,
+	id: string,
+	token: string,
+): Promise<void> {
+	await request.delete(`/api/v2/dashboards/${id}`, {
+		headers: { Authorization: `Bearer ${token}` },
+	});
+}
+
+// ─── Variables bar ────────────────────────────────────────────────────────
+
+export const variablesBar = (page: Page): Locator =>
+	page.getByTestId('dashboard-variables-bar');
+
+/** The pill for one variable: its name, the control, and (while loading) a spinner. */
+export const variablePill = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-${name}`);
+
+/** List variables (query / custom / dynamic) — the select control. */
+export const variableControl = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-select-${name}`);
+
+/** Text variables — a plain input, not a select. */
+export const variableTextInput = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-input-${name}`);
+
+/**
+ * The bar collapses variables that do not fit into a "+N" button. At the config's
+ * 1280px viewport that starts with the second variable, so a spec asserting on
+ * several pills at once must widen the viewport:
+ *
+ *   test.use({ viewport: WIDE_VIEWPORT });
+ */
+export const WIDE_VIEWPORT = { width: 1920, height: 1080 };
+
+/**
+ * The overflow ("+N") tooltip listing the collapsed variables. `.first()` because the
+ * tooltip primitive renders its content twice — once visible, once as an a11y copy —
+ * so an unscoped locator is a strict-mode violation rather than a missing element.
+ */
+export const hiddenVariablesTooltip = (page: Page): Locator =>
+	page.getByTestId('hidden-variables-tooltip').first();
+
+/** Resolved when the variable's options have arrived and its spinner is gone. */
+export async function awaitVariableSettled(
+	page: Page,
+	name: string,
+): Promise<void> {
+	await expect(variablePill(page, name)).toBeVisible();
+	await expect(page.getByTestId(`variable-loading-${name}`)).toBeHidden();
+}
+
+/**
+ * What a list variable's closed control shows — "ALL" for an ALL selection, else its
+ * tags. Asserts the control exists first: a missing one (wrong name, or a text
+ * variable, which uses {@link variableTextInput}) otherwise hangs until the test
+ * times out with nothing to point at.
+ */
+export async function readVariableSelection(
+	page: Page,
+	name: string,
+): Promise<string> {
+	const pill = variablePill(page, name);
+	await expect(pill).toBeVisible();
+	// The ALL overlay sits in the control's wrapper, as a SIBLING of the element
+	// carrying the testid — scope from the pill, or an ALL selection reads as empty.
+	const allOverlay = pill.locator('.all-text');
+	if ((await allOverlay.count()) > 0 && (await allOverlay.isVisible())) {
+		return (await allOverlay.textContent())?.trim() ?? '';
+	}
+	return (await variableControl(page, name).innerText()).trim();
+}
+
+/** The open option list, whichever control opened it. */
+export const anyDropdown = (page: Page): Locator =>
+	page.locator('.custom-multiselect-dropdown, .custom-select-dropdown');
+
+export async function openVariableDropdown(
+	page: Page,
+	name: string,
+): Promise<void> {
+	await awaitVariableSettled(page, name);
+	await variableControl(page, name).click();
+	await expect(anyDropdown(page)).toBeVisible();
+}
+
+/**
+ * Close the open dropdown, which is what commits a multi-select edit. Pressing
+ * Escape leaves the control focused without re-opening it, unlike clicking away.
+ */
+export async function closeVariableDropdown(page: Page): Promise<void> {
+	// Escape closes it when the control still holds focus, which a row click can move.
+	// Falling back to a click outside covers that, and is what a user does anyway —
+	// either way the close is what commits the edit.
+	await page.keyboard.press('Escape');
+	if (await anyDropdown(page).first().isVisible()) {
+		await page.getByTestId('dashboard-title').click();
+	}
+	await expect(anyDropdown(page).first()).toBeHidden();
+}
+
+const escapeForRegExp = (value: string): string =>
+	value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * One option row in the open dropdown, matched on its label element rather than the
+ * row's accessible name: hovering reveals the Only / Toggle buttons, whose text joins
+ * that name, so a name-based locator stops matching halfway through an interaction.
+ */
+export function optionRow(page: Page, value: string): Locator {
+	const exact = new RegExp(`^${escapeForRegExp(value)}$`);
+	// Multi-select rows carry a `.option-label-text` and, once hovered, Only / Toggle
+	// buttons whose text would break an exact match on the row itself. Single-select
+	// rows have neither — just the label — so each shape needs its own matcher.
+	const multi = page
+		.locator('.custom-multiselect-dropdown .option-item')
+		.filter({ has: page.locator('.option-label-text', { hasText: exact }) });
+	const single = page
+		.locator('.custom-select-dropdown .option-item')
+		.filter({ hasText: exact });
+	return multi.or(single);
+}
+
+export async function pickVariableValues(
+	page: Page,
+	name: string,
+	values: string[],
+): Promise<void> {
+	await openVariableDropdown(page, name);
+	const [first, ...rest] = values;
+
+	// Start from the row's "Only" button rather than its checkbox: an ALL selection
+	// opens with every option checked, so a click would UNcheck the wanted value and
+	// leave the rest selected. "Only" collapses to exactly this option either way,
+	// and the clear icon is deliberately unavailable while the draft is all.
+	// Wait for each target to be visible before acting: the dropdown re-renders as
+	// options resolve, and a click on a row that is still arriving (or has just been
+	// replaced) hangs until the test times out.
+	const firstRow = optionRow(page, first);
+	await expect(firstRow).toBeVisible();
+	await firstRow.hover();
+	const onlyButton = firstRow.locator('.only-btn');
+	await expect(onlyButton).toBeVisible();
+	await onlyButton.click();
+
+	// Additional values then add to that selection. Click the row's checkbox, not the
+	// row: the row body carries no toggle handler, so clicking it leaves the option
+	// unchecked and the value silently absent from the commit.
+	for (const value of rest) {
+		const row = optionRow(page, value);
+		await expect(row).toBeVisible();
+		const checkbox = row.locator('.option-checkbox');
+		if ((await checkbox.count()) > 0) {
+			await checkbox.first().click();
+		} else {
+			await row.click();
+		}
+	}
+	await closeVariableDropdown(page);
+}
+
+/** Type a value the option list does not offer, and commit it. */
+export async function typeVariableValue(
+	page: Page,
+	name: string,
+	value: string,
+): Promise<void> {
+	await openVariableDropdown(page, name);
+	await page.keyboard.type(value);
+	const dropdown = page.locator('.custom-multiselect-dropdown');
+	await dropdown.getByText(value, { exact: true }).first().click();
+	await closeVariableDropdown(page);
+}
+
+// ─── Panels and sections ──────────────────────────────────────────────────
+
+// A section's id is derived from its first panel's key, e.g. panel `p-timeseries` gives
+// section `sec-p-timeseries` — stable for a seeded fixture, since the keys are ours.
+export const sectionId = (firstPanelKey: string): string =>
+	`sec-${firstPanelKey}`;
+
+export const section = (page: Page, firstPanelKey: string): Locator =>
+	page.getByTestId(`dashboard-section-${sectionId(firstPanelKey)}`);
+
+export const sectionToggle = (page: Page, firstPanelKey: string): Locator =>
+	page.getByTestId(`dashboard-section-toggle-${sectionId(firstPanelKey)}`);
+
+export const panelActions = (page: Page, panelKey: string): Locator =>
+	page.getByTestId(`panel-actions-${panelKey}`);
+
+/** A panel by its display name — panels carry no per-panel testid on the card itself. */
+export const panelByTitle = (page: Page, title: string): Locator =>
+	page.getByText(title, { exact: true });
+
+/** Resolved when no panel on the page is still fetching. */
+export async function awaitPanelsSettled(page: Page): Promise<void> {
+	await expect(page.getByTestId('panel-refetching')).toHaveCount(0);
+}
+
+/**
+ * The values currently checked in a multi-select's list, read from the open dropdown —
+ * the closed control shows at most one tag plus a "+N", so it cannot confirm a
+ * multi-value selection on its own. Excludes the aggregate ALL row.
+ */
+export async function readCheckedOptions(
+	page: Page,
+	name: string,
+): Promise<string[]> {
+	await openVariableDropdown(page, name);
+	const labels = await page
+		.locator(
+			'.custom-multiselect-dropdown .option-item[aria-selected="true"]:not(.all-option) .option-label-text',
+		)
+		.allInnerTexts();
+	await closeVariableDropdown(page);
+	return labels.map((label) => label.trim());
+}

tests/e2e/package.json

@@ -21,6 +21,7 @@
     "fmt:check": "oxfmt --check .",
     "lint": "oxlint .",
     "lint:fix": "oxlint . --fix",
+    "guard:specs": "node scripts/guard-specs.mjs",
     "typecheck": "tsc --noEmit"
   },
   "keywords": [

tests/e2e/parked-specs.json

@@ -0,0 +1,21 @@
+{
+	"$comment": "Specs not currently running, and why. This is the ONLY place a spec may be excluded from the suite: `playwright.config.ts` feeds `specs` to `testIgnore`, and `pnpm guard:specs` fails if any spec that is NOT listed here contains a skipped, fixme'd or .only test. So a spec is either running and complete, or parked here with a reason — nothing rots quietly in between. Every entry is removed by the PR that migrates it; the list only shrinks.",
+	"specs": [
+		"**/tests/dashboards/list.spec.ts",
+		"**/tests/dashboards/details/03-viewing.spec.ts",
+		"**/tests/dashboards/details/12-sections.spec.ts",
+		"**/tests/dashboards/details/21-panel-actions.spec.ts",
+		"**/tests/dashboards/details/35-add-panel.spec.ts",
+		"**/tests/dashboards/details/44-edit-panel.spec.ts",
+		"**/tests/dashboards/details/56-time-range.spec.ts",
+		"**/tests/dashboards/details/67-variables.spec.ts",
+		"**/tests/dashboards/details/78-edit-mode.spec.ts",
+		"**/tests/dashboards/details/87-configure.spec.ts",
+		"**/tests/dashboards/details/95-edge-cases.spec.ts",
+		"**/tests/trace-details/preview-fields.spec.ts"
+	],
+	"reasons": {
+		"**/tests/dashboards/**": "Written against V1 dashboard behaviour; the V1 -> V2 migration changed what they assert. Being rewritten area by area — see the E0-E8 plan.",
+		"**/tests/trace-details/preview-fields.spec.ts": "Entirely `describe.skip` since it was added: the hover card's preview field needs seeded telemetry the suite does not provide yet."
+	}
+}

tests/e2e/playwright.config.ts

@@ -2,22 +2,23 @@ import { defineConfig, devices } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
 
-// .env holds user-provided defaults (staging creds).
-// .env.local is written by tests/e2e/bootstrap/setup.py when the pytest
-// lifecycle brings the backend up locally; override=true so local-backend
-// coordinates win over any stale .env values. Subprocess-injected env
-// (e.g. when pytest shells out to `pnpm test`) still takes priority —
-// dotenv doesn't touch vars that are already set in process.env.
+import parkedSpecs from './parked-specs.json';
+
+// Precedence: real env > .env.local > .env. dotenv never overwrites a var that is
+// already set, so loading in that order gives local-backend coordinates (.env.local,
+// written by bootstrap/setup.py) priority over the staging defaults in .env, while an
+// explicitly exported var still wins over both — which is what lets a run be pointed
+// at another environment without editing a generated file.
+dotenv.config({ path: path.resolve(__dirname, '.env.local') });
 dotenv.config({ path: path.resolve(__dirname, '.env') });
-dotenv.config({ path: path.resolve(__dirname, '.env.local'), override: true });
 
 export default defineConfig({
 	testDir: './tests',
 
-	// Temporarily excluded: the V1 -> V2 dashboard migration changes the
-	// behaviour the dashboards specs assert against, so they fail as written.
-	// Remove this once they are updated for the V2 dashboard.
-	testIgnore: ['**/tests/dashboards/**'],
+	// Parked specs, listed one by one with a reason in parked-specs.json — not a
+	// blanket glob, so nothing new can land inside an excluded directory unnoticed.
+	// `pnpm guard:specs` keeps this list and the suite honest.
+	testIgnore: parkedSpecs.specs,
 
 	// All Playwright output lands under artifacts/. One subdir per reporter
 	// plus results/ for per-test artifacts (traces/screenshots/videos).

tests/e2e/scripts/guard-specs.mjs

@@ -0,0 +1,91 @@
+// Keeps the suite honest: a spec is either running and complete, or parked in
+// parked-specs.json with a reason. Fails on a skipped/fixme'd/only test in a spec that
+// is not parked, and on a parked entry that no longer matches anything.
+//
+// Run: pnpm guard:specs
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const parked = JSON.parse(
+	readFileSync(join(root, 'parked-specs.json'), 'utf8'),
+);
+
+/** Every *.spec.ts under tests/, repo-relative with forward slashes. */
+function specFiles(dir) {
+	return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+		const full = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			return specFiles(full);
+		}
+		return entry.name.endsWith('.spec.ts') ? [full] : [];
+	});
+}
+
+/** A parked glob (`**​/tests/x/y.spec.ts`) matched against an absolute path. */
+function matchesGlob(glob, absolutePath) {
+	const ANY_DIRS = '\u0000';
+	const pattern = glob
+		.replace(/[.+^${}()|[\]\\]/g, '\\$&')
+		.replace(/\*\*\//g, ANY_DIRS)
+		// Single `*` never crosses a path separator; do this before expanding ANY_DIRS,
+		// whose replacement itself contains a `*`.
+		.replace(/\*/g, '[^/]*')
+		.split(ANY_DIRS)
+		.join('(?:.*/)?');
+	return new RegExp(`^${pattern}$`).test(absolutePath.split('\\').join('/'));
+}
+
+// Declaration form only — `test.skip(condition, reason)` inside a test body is a
+// legitimate runtime guard, not a parked test.
+const OFFENDERS = [
+	{ label: 'test.skip', re: /(?<![\w.])test\.skip\(\s*['"`]/g },
+	{ label: 'test.fixme', re: /(?<![\w.])test\.fixme\(\s*['"`]/g },
+	{ label: 'describe.skip', re: /describe\.skip\(/g },
+	{ label: 'describe.fixme', re: /describe\.fixme\(/g },
+	{ label: 'test.only', re: /(?<![\w.])test\.only\(/g },
+	{ label: 'describe.only', re: /describe\.only\(/g },
+];
+
+const testsDir = join(root, 'tests');
+const files = statSync(testsDir, { throwIfNoEntry: false })
+	? specFiles(testsDir)
+	: [];
+const failures = [];
+
+for (const file of files) {
+	if (parked.specs.some((glob) => matchesGlob(glob, file))) {
+		continue;
+	}
+	const source = readFileSync(file, 'utf8');
+	for (const { label, re } of OFFENDERS) {
+		const hits = source.match(re);
+		if (hits) {
+			failures.push(
+				`${relative(root, file)}: ${hits.length} × ${label} — finish it, or park the spec in parked-specs.json with a reason`,
+			);
+		}
+	}
+}
+
+for (const glob of parked.specs) {
+	if (!files.some((file) => matchesGlob(glob, file))) {
+		failures.push(
+			`parked-specs.json: "${glob}" matches no spec — drop the stale entry`,
+		);
+	}
+}
+
+if (failures.length > 0) {
+	console.error(
+		`\nguard:specs failed\n\n${failures.map((f) => `  ✗ ${f}`).join('\n')}\n`,
+	);
+	process.exit(1);
+}
+
+// eslint-disable-next-line no-console
+console.log(
+	`guard:specs ok — ${files.length - parked.specs.length}/${files.length} specs running, ${parked.specs.length} parked`,
+);

tests/e2e/testdata/sections-dashboard-v2.json

@@ -0,0 +1,363 @@
+{
+	"$comment": "Three grid sections with two panels each, trimmed from a real V2 dashboard so the structure (sections, panels, layout refs, collapse state, plugin kinds) is faithful without depending on any particular telemetry. Panel queries target signals this stack may hold nothing for — that is fine: these specs assert on structure and chrome, never on chart values. Variables are text + custom, whose options come from the definition.",
+	"spec": {
+		"display": { "name": "sections-v2", "description": "" },
+		"variables": [
+			{
+				"kind": "TextVariable",
+				"spec": {
+					"name": "textbox.environment",
+					"display": { "name": "textbox.environment", "description": "" },
+					"value": "prod",
+					"constant": false
+				}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "custom.service.name",
+					"display": { "name": "custom.service.name", "description": "" },
+					"allowMultiple": true,
+					"allowAllValue": true,
+					"sort": "alphabetical-asc",
+					"plugin": {
+						"kind": "signoz/CustomVariable",
+						"spec": { "customValue": "checkout,payments,cart" }
+					}
+				}
+			}
+		],
+		"panels": {
+			"p-timeseries": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Requests over time", "description": "" },
+					"plugin": {
+						"kind": "signoz/TimeSeriesPanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time", "fillSpans": false },
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"legend": { "position": "bottom", "mode": "list", "customColors": null }
+						}
+					},
+					"queries": [
+						{
+							"kind": "time_series",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/BuilderQuery",
+									"spec": {
+										"name": "A",
+										"signal": "logs",
+										"source": "",
+										"aggregations": [{ "expression": "count()" }],
+										"disabled": false,
+										"filter": { "expression": "service.name IN $custom.service.name" },
+										"groupBy": [
+											{
+												"name": "service.name",
+												"signal": "",
+												"fieldContext": "resource",
+												"fieldDataType": "string"
+											}
+										],
+										"order": [],
+										"having": { "expression": "" },
+										"functions": [],
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-table": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Requests by pod", "description": "" },
+					"plugin": {
+						"kind": "signoz/TablePanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time" },
+							"formatting": { "columnUnits": { "A": "" }, "decimalPrecision": "2" },
+							"thresholds": null
+						}
+					},
+					"queries": [
+						{
+							"kind": "scalar",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/BuilderQuery",
+									"spec": {
+										"name": "A",
+										"signal": "logs",
+										"source": "",
+										"aggregations": [{ "expression": "count()" }],
+										"disabled": false,
+										"filter": { "expression": "service.name IN $custom.service.name" },
+										"groupBy": [
+											{
+												"name": "k8s.pod.name",
+												"signal": "",
+												"fieldContext": "resource",
+												"fieldDataType": "string"
+											}
+										],
+										"order": [],
+										"having": { "expression": "" },
+										"functions": [],
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-promql": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Duration rate (PromQL)", "description": "" },
+					"plugin": {
+						"kind": "signoz/TimeSeriesPanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time", "fillSpans": false },
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"legend": { "position": "bottom", "mode": "list", "customColors": null }
+						}
+					},
+					"queries": [
+						{
+							"kind": "time_series",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/PromQLQuery",
+									"spec": {
+										"name": "A",
+										"query": "sum by (\"service.name\") (rate({\"http.server.duration.count\"}[5m]))",
+										"disabled": false,
+										"step": 0,
+										"stats": false,
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-number": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Total requests", "description": "" },
+					"plugin": {
+						"kind": "signoz/NumberPanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time" },
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"thresholds": null
+						}
+					},
+					"queries": [
+						{
+							"kind": "scalar",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/PromQLQuery",
+									"spec": {
+										"name": "A",
+										"query": "sum(rate({\"http.server.duration.count\"}[5m]))",
+										"disabled": false,
+										"step": 0,
+										"stats": false,
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-pie": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Split by environment", "description": "" },
+					"plugin": {
+						"kind": "signoz/PieChartPanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time" },
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"legend": { "position": "bottom", "mode": "list", "customColors": null }
+						}
+					},
+					"queries": [
+						{
+							"kind": "scalar",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/BuilderQuery",
+									"spec": {
+										"name": "A",
+										"signal": "logs",
+										"source": "",
+										"aggregations": [{ "expression": "count()" }],
+										"disabled": false,
+										"filter": {
+											"expression": "deployment.environment = $textbox.environment"
+										},
+										"groupBy": [
+											{
+												"name": "service.name",
+												"signal": "",
+												"fieldContext": "resource",
+												"fieldDataType": "string"
+											}
+										],
+										"order": [],
+										"having": { "expression": "" },
+										"functions": [],
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-bar": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Stacked by pod", "description": "" },
+					"plugin": {
+						"kind": "signoz/BarChartPanel",
+						"spec": {
+							"visualization": {
+								"timePreference": "global_time",
+								"fillSpans": false,
+								"stackedBarChart": true
+							},
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"legend": { "position": "bottom", "mode": "list", "customColors": null },
+							"thresholds": null
+						}
+					},
+					"queries": [
+						{
+							"kind": "time_series",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/BuilderQuery",
+									"spec": {
+										"name": "A",
+										"signal": "logs",
+										"source": "",
+										"aggregations": [{ "expression": "count()" }],
+										"disabled": false,
+										"filter": { "expression": "" },
+										"groupBy": [
+											{
+												"name": "k8s.pod.name",
+												"signal": "",
+												"fieldContext": "resource",
+												"fieldDataType": "string"
+											}
+										],
+										"order": [],
+										"having": { "expression": "" },
+										"functions": [],
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			}
+		},
+		"layouts": [
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": { "title": "Query Builder", "collapse": { "open": true } },
+					"items": [
+						{
+							"x": 0,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-timeseries" }
+						},
+						{
+							"x": 6,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-table" }
+						}
+					]
+				}
+			},
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": { "title": "PromQL", "collapse": { "open": true } },
+					"items": [
+						{
+							"x": 0,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-promql" }
+						},
+						{
+							"x": 6,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-number" }
+						}
+					]
+				}
+			},
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": { "title": "Mixed", "collapse": { "open": true } },
+					"items": [
+						{
+							"x": 0,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-pie" }
+						},
+						{
+							"x": 6,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-bar" }
+						}
+					]
+				}
+			}
+		],
+		"duration": "",
+		"refreshInterval": "",
+		"links": []
+	}
+}

tests/e2e/testdata/variables-dashboard-v2.json

@@ -0,0 +1,48 @@
+{
+	"$comment": "V2 (Perses-shape) dashboard spec seeded through POST /api/v2/dashboards. Only text and custom variables, so it resolves without telemetry: option lists are fixed by the definition, which keeps assertions on them deterministic. Query and dynamic variables are seeded per-spec alongside the telemetry they need.",
+	"spec": {
+		"display": { "name": "variables-v2", "description": "" },
+		"layouts": [],
+		"panels": {},
+		"variables": [
+			{
+				"kind": "TextVariable",
+				"spec": {
+					"name": "tb_env",
+					"display": { "name": "tb_env", "description": "Free-text environment" },
+					"value": "prod",
+					"constant": false
+				}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "cu_service",
+					"display": { "name": "cu_service", "description": "Multi-select with ALL" },
+					"allowMultiple": true,
+					"allowAllValue": true,
+					"sort": "none",
+					"plugin": {
+						"kind": "signoz/CustomVariable",
+						"spec": { "customValue": "checkout,payments,cart" }
+					}
+				}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "cu_region",
+					"display": { "name": "cu_region", "description": "Single-select with a default" },
+					"allowMultiple": false,
+					"allowAllValue": false,
+					"sort": "none",
+					"defaultValue": "eu-west",
+					"plugin": {
+						"kind": "signoz/CustomVariable",
+						"spec": { "customValue": "us-east,eu-west" }
+					}
+				}
+			}
+		]
+	}
+}

tests/e2e/tests/dashboards/details/01-smoke.spec.ts

@@ -0,0 +1,110 @@
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import { authToken } from '../../../helpers/dashboards';
+import {
+	createDashboardV2ViaApi,
+	dashboardV2Path,
+	deleteDashboardV2ViaApi,
+	pickVariableValues,
+	readVariableSelection,
+	variablePill,
+	variablesBar,
+	variableTextInput,
+	WIDE_VIEWPORT,
+} from '../../../helpers/dashboards-v2';
+import customVariables from '../../../testdata/variables-dashboard-v2.json';
+
+// The foundation the other dashboards specs build on: seeding a V2 spec through the
+// v2 API, opening it, and driving the variables bar. Everything here is deterministic
+// — custom and text variables need no telemetry, so this spec cannot go red because
+// of what the stack happens to hold.
+
+test.use({ viewport: WIDE_VIEWPORT });
+
+const seedIds = new Set<string>();
+let dashboardId = '';
+
+// Per worker: `beforeAll` runs once in each, and the v2 API rejects a duplicate name.
+const SUITE_TITLE = `detail-smoke-suite-${process.env.TEST_WORKER_INDEX ?? '0'}`;
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		dashboardId = await createDashboardV2ViaApi(
+			page,
+			SUITE_TITLE,
+			customVariables.spec,
+		);
+		seedIds.add(dashboardId);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) {
+		return;
+	}
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of seedIds) {
+			await deleteDashboardV2ViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.describe('Dashboard detail — V2 foundation', () => {
+	test('TC-01 a seeded V2 dashboard opens with its title and variables bar', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect(page.getByTestId('dashboard-title')).toContainText(SUITE_TITLE);
+		await expect(variablesBar(page)).toBeVisible();
+		for (const name of ['tb_env', 'cu_service', 'cu_region']) {
+			await expect(variablePill(page, name)).toBeVisible();
+		}
+	});
+
+	test('TC-02 a text variable renders the value it was seeded with', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect(variableTextInput(page, 'tb_env')).toHaveValue('prod');
+	});
+
+	test('TC-03 an ALL-enabled multi-select reads ALL until a value is picked', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		// Seeded with allowAllValue and no default, so it resolves to ALL.
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_service'))
+			.toBe('ALL');
+
+		// A multi-select commits when the dropdown closes, not per toggle.
+		await pickVariableValues(page, 'cu_service', ['checkout']);
+
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_service'))
+			.toContain('checkout');
+	});
+
+	test('TC-04 a single-select renders its configured default', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_region'))
+			.toContain('eu-west');
+	});
+});

tests/e2e/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "commonjs",
+    "module": "esnext",
     "moduleResolution": "bundler",
-    "lib": ["ES2020"],
+    "lib": ["ES2020", "DOM"],
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,