test(query-builder): scope selectors to the query block and wait on own requests

Run waits on a request it started; panel-editor structural edits re-run
until the newest request matches, since their draft can lag the DOM.

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -129,6 +129,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										onChange={handleChangeOperator}
 										operators={operators}
 										className="metrics-operators-select"
+										data-testid="metrics-time-aggregation"
 									/>
 								</div>
 							</div>
@@ -192,7 +193,10 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										AGGREGATE ACROSS TIME SERIES
 									</div>
 								</Tooltip>
-								<div className="metrics-aggregation-section-content-item-value">
+								<div
+									className="metrics-aggregation-section-content-item-value"
+									data-testid="metrics-space-aggregation"
+								>
 									<SpaceAggregationOptions
 										panelType={panelType}
 										key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}
@@ -229,7 +233,10 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 				<div className="metrics-space-aggregation-section">
 					<div className="metrics-aggregation-section-content">
 						<div className="metrics-aggregation-section-content-item">
-							<div className="metrics-aggregation-section-content-item-value">
+							<div
+								className="metrics-aggregation-section-content-item-value"
+								data-testid="metrics-space-aggregation"
+							>
 								<SpaceAggregationOptions
 									panelType={panelType}
 									key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -332,6 +332,7 @@ function HavingFilter({
 					value={input}
 					onChange={handleChange}
 					theme={isDarkMode ? copilot : githubLight}
+					data-testid="having-editor"
 					className="having-filter-select-editor"
 					width="100%"
 					extensions={[

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -615,6 +615,7 @@ function QueryAggregationSelect({
 					setInput(value);
 					onChange?.(value);
 				}}
+				data-testid="query-aggregation-editor"
 				className={`query-aggregation-select-editor ${
 					validationError ? 'error' : ''
 				}`}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1607,6 +1607,7 @@ function QuerySearch({
 					onChange={handleChange}
 					onUpdate={handleUpdate}
 					onCreateEditor={handleEditorCreate}
+					data-testid="query-where-clause-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
@@ -1680,6 +1681,7 @@ function QuerySearch({
 						className={cx('query-status-container', {
 							hasErrors: validation.errors.length > 0,
 						})}
+						data-testid="query-validation-status"
 					>
 						<Popover
 							placement="bottomRight"

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -183,6 +183,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 		<div
 			className={cx('query-v2', { 'where-clause-view': showOnlyWhereClause })}
 			ref={ref}
+			data-testid={`query-${query.queryName}`}
 		>
 			<div className="qb-content-section">
 				{(!showOnlyWhereClause || showTraceOperator) && (
@@ -246,6 +247,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							{isMultiQueryAllowed && (
 								<Dropdown
 									items={queryActionItems}
+									testId="query-actions"
 									nativeButton={false}
 									align="end"
 									side="bottom"

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -61,7 +61,10 @@ export default function TraceOperator({
 	);
 
 	return (
-		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
+		<div
+			className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}
+			data-testid="trace-operator"
+		>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -378,6 +378,7 @@ function TraceOperatorEditor({
 					theme={isDarkMode ? copilot : githubLight}
 					onChange={handleChange}
 					onUpdate={handleUpdate}
+					data-testid="trace-operator-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,

frontend/src/container/QueryBuilder/components/Formula/Formula.tsx

@@ -112,7 +112,7 @@ export function Formula({
 	);
 
 	return (
-		<Row gutter={[0, 15]}>
+		<Row gutter={[0, 15]} data-testid={`formula-${formula.queryName}`}>
 			<QBEntityOptions
 				isCollapsed={isCollapse}
 				showFunctions={false}
@@ -130,6 +130,7 @@ export function Formula({
 						<Input.TextArea
 							name="expression"
 							className="formula-expression"
+							data-testid="formula-expression"
 							onChange={handleChange}
 							size="middle"
 							value={formula.expression}
@@ -141,6 +142,7 @@ export function Formula({
 						<Input
 							name="legend"
 							className="formula-legend"
+							data-testid="formula-legend"
 							onChange={handleChange}
 							size="middle"
 							value={formula.legend}

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -98,6 +98,7 @@ export default function QBEntityOptions({
 									value="search"
 									className="periscope-btn collapse"
 									onClick={onCollapseEntity}
+									data-testid="qb-entity-collapse"
 								>
 									{isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
 								</Button>
@@ -108,6 +109,7 @@ export default function QBEntityOptions({
 									className="periscope-btn visibility-toggle"
 									onClick={onToggleVisibility}
 									disabled={isRawQuery && !showTraceOperator}
+									data-testid="qb-entity-visibility"
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
@@ -115,7 +117,11 @@ export default function QBEntityOptions({
 
 							{entityType === 'query' && showCloneOption && (
 								<Tooltip title={`Clone Query ${entityData.queryName}`}>
-									<Button className={cx('periscope-btn')} onClick={handleCloneEntity}>
+									<Button
+										className={cx('periscope-btn')}
+										onClick={handleCloneEntity}
+										data-testid="qb-entity-clone"
+									>
 										<Copy size={14} />
 									</Button>
 								</Tooltip>
@@ -131,6 +137,7 @@ export default function QBEntityOptions({
 										: '',
 									isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '',
 								)}
+								data-testid="qb-entity-name"
 							>
 								{entityData.queryName}
 							</Button>
@@ -185,7 +192,11 @@ export default function QBEntityOptions({
 				</div>
 
 				{showDeleteButton && !isRawQuery && (
-					<Button className="periscope-btn ghost" onClick={onDelete}>
+					<Button
+						className="periscope-btn ghost"
+						onClick={onDelete}
+						data-testid="qb-entity-delete"
+					>
 						<Trash2 size={14} />
 					</Button>
 				)}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -166,7 +166,10 @@ function PanelEditorQueryBuilder({
 		return modes.map((queryType) => ({
 			key: queryType,
 			label: (
-				<div className={styles.queryTypeTab}>
+				<div
+					className={styles.queryTypeTab}
+					data-testid={`query-type-tab-${queryType}`}
+				>
 					{queryTypeComponents[queryType].icon}
 					<Typography>{queryTypeComponents[queryType].label}</Typography>
 				</div>

tests/e2e/drivers/query-builder.ts

@@ -0,0 +1,715 @@
+/**
+ * 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,
+} from '@playwright/test';
+
+import { ownDropdown } from '../helpers/alert-forms/shared';
+import { postToSeeder } from '../helpers/alerts/seeding';
+import { watchConsole, type ConsoleWatch } from '../helpers/common';
+import { isQueryRange } from '../helpers/query-range-mock';
+import { dismissQuickFiltersAnnouncement } from '../helpers/quick-filters';
+
+import { driver, kit, seeded } from './kit';
+
+export const EXPLORER = {
+	logs: '/logs/logs-explorer',
+	traces: '/traces-explorer',
+	metrics: '/metrics-explorer/explorer',
+} as const;
+
+/** A monotonic Sum in the golden dataset. */
+export const SUM_METRIC = 'signoz_calls_total';
+/** Another golden Sum, for switching between metrics of one type. */
+export const OTHER_SUM_METRIC = 'signoz_latency_count';
+
+/** The golden dataset has only Sums; these are seeded per worker. */
+export interface MetricTypes {
+	gauge: string;
+	histogram: string;
+}
+
+/** Inside the golden dataset's window. */
+export const RELATIVE_TIME = '6h';
+
+/** One entry of a v5 `query_range` body's `compositeQuery.queries`. */
+export interface V5Query {
+	type: string;
+	spec: {
+		name?: string;
+		signal?: string;
+		disabled?: boolean;
+		filter?: { expression?: string };
+		aggregations?: {
+			expression?: string;
+			metricName?: string;
+			timeAggregation?: string;
+			spaceAggregation?: string;
+			reduceTo?: string;
+		}[];
+		groupBy?: { name: string }[];
+		having?: { expression?: string };
+		order?: { key: { name: string }; direction: string }[];
+		limit?: number;
+		stepInterval?: number;
+		[key: string]: unknown;
+	};
+}
+
+export interface V5Body {
+	requestType: string;
+	compositeQuery: { queries: V5Query[] };
+}
+
+export interface FilterEditor {
+	root(): Locator;
+	/** The contenteditable CodeMirror surface. */
+	content(): Locator;
+	/** Replaces the expression by typing it key by key. */
+	type(text: string): Promise<void>;
+	/** Appends at the caret without clearing. */
+	append(text: string): Promise<void>;
+	clear(): Promise<void>;
+	press(key: string): Promise<void>;
+	/** The document text, placeholder excluded, lines joined with `\n`. */
+	expression(): Promise<string>;
+	lineCount(): Locator;
+	/** The open autocomplete popup. */
+	suggestions(): Locator;
+	/**
+	 * Ctrl+Space: opens the popup at the caret. Typing opens it only once the
+	 * debounced key fetch answers, which a loaded stack can delay past a test's
+	 * next step.
+	 */
+	openSuggestions(): Promise<void>;
+	suggestion(label: string | RegExp): Locator;
+}
+
+export interface QueryBlock {
+	root(): Locator;
+	filter: FilterEditor;
+	/** The filter's status icon: shown only while unfocused and non-empty. */
+	filterStatus(): Locator;
+	aggregation: FilterEditor;
+	/** The aggregation's "every … Seconds" input. */
+	step(): Locator;
+	metric: MetricControls;
+	addOns: AddOns;
+	/** The "…" menu: offered only where several queries are allowed. */
+	actions(): Locator;
+	/** A row of the open "…" menu. */
+	menuItem(action: 'clone' | 'delete'): Locator;
+	clone(): Promise<void>;
+	delete(): Promise<void>;
+	toggleVisibility(): Promise<void>;
+	collapse(): Promise<void>;
+	/** The data-source dropdown's value; only on hosts that let it change. */
+	signal(): Locator;
+	setSignal(label: 'Logs' | 'Traces' | 'Metrics'): Promise<void>;
+}
+
+export interface FormulaBlock {
+	root(): Locator;
+	expression(): Locator;
+	legend(): Locator;
+	delete(): Promise<void>;
+}
+
+/** `query-add-on-<field>` toggle values: a documented DOM contract. */
+export type AddOnField =
+	| 'group_by'
+	| 'having'
+	| 'order_by'
+	| 'limit'
+	| 'legend_format'
+	| 'reduce_to';
+
+export interface AddOns {
+	/** The toggle row; its children name the add-ons on offer. */
+	toggles(): Locator;
+	/** Idempotent: leaves an already-open add-on open. */
+	open(field: AddOnField): Promise<void>;
+	content(field: AddOnField): Locator;
+	groupBy: {
+		/** Types `key` and picks the suggestion with that exact name. */
+		add(key: string): Promise<void>;
+		remove(key: string): Promise<void>;
+		/** The selected keys, in order. */
+		values(): Promise<string[]>;
+	};
+	having: FilterEditor;
+	limit(): Locator;
+	legend(): Locator;
+	reduceTo: {
+		/** The selected value. */
+		value(): Locator;
+		set(label: string): Promise<void>;
+	};
+}
+
+/** The metrics aggregation section: metric picker plus time/space selects. */
+export interface MetricControls {
+	select(name: string): Promise<void>;
+	/** The metric name input. */
+	input(): Locator;
+	/** The selected value. Absent for histograms. */
+	timeAggregation(): Locator;
+	/** The selected value. */
+	spaceAggregation(): Locator;
+	setTimeAggregation(label: string): Promise<void>;
+	setSpaceAggregation(label: string): Promise<void>;
+	/** Labels offered by the space-aggregation select, as shown. */
+	spaceOptions(): Promise<string[]>;
+}
+
+export interface QuickFilterValue {
+	checkbox(): Locator;
+	/** Toggles the value; returns the query_range bodies the toggle fired. */
+	toggle(): Promise<V5Body[]>;
+}
+
+/** The explorer's tab, carried in the `panelTypes` param. */
+export type ExplorerView = 'list' | 'graph' | 'table';
+
+export interface OpenOptions {
+	/** Serialised the way the app writes it. */
+	query?: unknown;
+	/** A `compositeQuery` value sent as given, for malformed input. */
+	raw?: string;
+	view?: ExplorerView;
+}
+
+export interface QueryBuilderDriver {
+	/**
+	 * Resolves once the page's own first query_range has answered: the explorer
+	 * rewrites its URL and re-mounts the builder until then, which drops
+	 * keystrokes. Returns the bodies that load fired.
+	 */
+	openExplorer(path: string, options?: OpenOptions): Promise<V5Body[]>;
+	query(name: string): QueryBlock;
+	/** Adds the next query (B, C, …) and waits for its block. */
+	addQuery(name: string): Promise<QueryBlock>;
+	/** Builder query names, top to bottom. */
+	queryNames(): Promise<string[]>;
+	/** Panel-editor query-type tab, by its queryType (`builder`, `promql`, …). */
+	tab(queryType: string): Locator;
+	promql(): Locator;
+	formula(name: string): FormulaBlock;
+	addFormula(name: string): Promise<FormulaBlock>;
+	traceOperator: {
+		root(): Locator;
+		/** "Add Trace Matching": offered on traces hosts that allow it. */
+		addButton(): Locator;
+		add(): Promise<void>;
+		remove(): Promise<void>;
+		editor: FilterEditor;
+	};
+	/**
+	 * Explorer "Add to dashboard": picks the dashboard titled `title` and waits
+	 * for the new-panel editor the export navigates to.
+	 */
+	addToDashboard(title: string): Promise<void>;
+	runButton(): Locator;
+	/** The logs explorer's results area, below the builder. */
+	logsResults(): Locator;
+	/** Clicks Run; returns every query_range body the click fired. */
+	run(): Promise<V5Body[]>;
+	/**
+	 * Clicks Run until `read()` equals `expected`. For panel-editor structural
+	 * edits, whose draft can lag the DOM: an early Run is a cache hit that
+	 * sends nothing. Never clicks while the button is Cancel.
+	 */
+	rerunUntil(read: () => unknown, expected: unknown): Promise<void>;
+	/**
+	 * Ctrl/Cmd+Enter from the focused field; returns the fired bodies. Waits two
+	 * frames first: editor changes reach React state on its next scheduler task,
+	 * and a keypress inside the same frame as the last keystroke reads the
+	 * previous render — a gap no person can produce.
+	 */
+	runShortcut(): Promise<V5Body[]>;
+	/** A value in an explorer's checkbox quick filter, by its header title. */
+	quickFilter(title: string, value: string): QuickFilterValue;
+	/** The spec of query `name` in the first body that has it. */
+	spec(bodies: V5Body[], name: string): V5Query['spec'];
+	/** Every query_range body sent since the test started. */
+	sent(): V5Body[];
+	/**
+	 * Query `name`'s spec in the newest body that has it, whatever sent it. The
+	 * panel editor fetches on structural edits, so Run after one can be a cache
+	 * hit that sends nothing: poll this rather than waiting on Run.
+	 */
+	latest(name: string): V5Query['spec'] | undefined;
+	/** The URL's `compositeQuery`, parsed. */
+	urlQuery(): Record<string, unknown> | null;
+	console: ConsoleWatch;
+}
+
+/** CodeMirror renders its placeholder inside the empty line. */
+const EDITOR_DOC = async (root: Locator): Promise<string> => {
+	const lines = root.locator('.cm-content .cm-line');
+	const texts = await lines.allTextContents();
+	const placeholders = await lines.evaluateAll((nodes) =>
+		nodes.map((node) => node.querySelector('.cm-placeholder')?.textContent ?? ''),
+	);
+	return texts
+		.map((text, i) =>
+			placeholders[i] ? text.replace(placeholders[i], '') : text,
+		)
+		.join('\n');
+};
+
+function editorAt(page: Page, root: () => Locator): FilterEditor {
+	const content = (): Locator => root().locator('.cm-content');
+	const editor: FilterEditor = {
+		root,
+		content,
+		async type(text) {
+			await editor.clear();
+			await page.keyboard.type(text);
+		},
+		async append(text) {
+			await content().click();
+			await page.keyboard.press('End');
+			await page.keyboard.type(text);
+		},
+		async clear() {
+			await content().click();
+			await page.keyboard.press('ControlOrMeta+a');
+			await page.keyboard.press('Backspace');
+			await expect.poll(() => EDITOR_DOC(root())).toBe('');
+		},
+		press: (key) => page.keyboard.press(key),
+		expression: () => EDITOR_DOC(root()),
+		lineCount: () => root().locator('.cm-line'),
+		suggestions: () => page.locator('.cm-tooltip-autocomplete'),
+		async openSuggestions() {
+			await expect(async () => {
+				await page.keyboard.press('Control+Space');
+				await expect(editor.suggestions()).toBeVisible({ timeout: 2_000 });
+			}).toPass({ timeout: 15_000 });
+		},
+		suggestion: (label) =>
+			page
+				.locator('.cm-tooltip-autocomplete [role="option"]')
+				.filter({ hasText: label }),
+	};
+	return editor;
+}
+
+/**
+ * Opens the antd select inside `select` and returns its options. Scoped to the
+ * list the select owns: a previous select's list can still be mid-close.
+ */
+async function openSelect(page: Page, select: Locator): Promise<Locator> {
+	await select.locator('.ant-select-selector').click();
+	const list = await ownDropdown(page, select);
+	await expect(list).toBeVisible();
+	return list.locator('.ant-select-item-option');
+}
+
+/** antd renders select options with trailing whitespace ("Sum "). */
+const exactly = (label: string): RegExp => new RegExp(`^\\s*${label}\\s*$`);
+
+/** A reduce-to option or value by its operator: "Sum of values in timeframe". */
+export const reduceToLabel = (operator: string): RegExp =>
+	new RegExp(`^\\s*${operator} of values`);
+
+const ADD_ON_CONTENT: Record<AddOnField, string> = {
+	group_by: 'group-by-content',
+	having: 'having-content',
+	order_by: 'order-by-content',
+	limit: 'limit-content',
+	legend_format: 'legend-format-content',
+	reduce_to: 'reduce-to-content',
+};
+
+function addOnsAt(page: Page, root: () => Locator): AddOns {
+	const content = (field: AddOnField): Locator =>
+		root().getByTestId(ADD_ON_CONTENT[field]);
+	const groupBy = (): Locator => root().getByTestId('group-by');
+	const addOns: AddOns = {
+		toggles: () => root().locator('[data-testid^="query-add-on-"]'),
+		async open(field) {
+			if (await content(field).isVisible()) {
+				return;
+			}
+			await root().getByTestId(`query-add-on-${field}`).click();
+			await expect(content(field)).toBeVisible();
+		},
+		content,
+		groupBy: {
+			async add(key) {
+				const options = await openSelect(page, groupBy());
+				await groupBy().locator('input').fill(key);
+				await options
+					.filter({ hasText: exactly(key) })
+					.first()
+					.click();
+				await page.keyboard.press('Escape');
+				await expect(
+					groupBy().locator('.ant-select-selection-item', { hasText: key }),
+				).toBeVisible();
+			},
+			async remove(key) {
+				await groupBy()
+					.locator('.ant-select-selection-item', { hasText: key })
+					.locator('.ant-select-selection-item-remove')
+					.click();
+			},
+			async values() {
+				const texts = await groupBy()
+					.locator('.ant-select-selection-item-content')
+					.allTextContents();
+				return texts.map((text) => text.trim());
+			},
+		},
+		having: editorAt(page, () => root().getByTestId('having-editor')),
+		limit: () => content('limit').getByTestId('input-Limit'),
+		legend: () => content('legend_format').getByTestId('input-Legend format'),
+		reduceTo: {
+			value: () =>
+				root().getByTestId('reduce-to').locator('.ant-select-selection-item'),
+			// Labels read "<Op> of values in timeframe"; matched on the operator.
+			async set(label) {
+				const options = await openSelect(page, root().getByTestId('reduce-to'));
+				await options.filter({ hasText: reduceToLabel(label) }).click();
+				await expect(addOns.reduceTo.value()).toHaveText(reduceToLabel(label));
+			},
+		},
+	};
+	return addOns;
+}
+
+function metricAt(page: Page, root: () => Locator): MetricControls {
+	const picker = (): Locator =>
+		root().locator('[data-testid^="metric-name-selector-"]');
+	const time = (): Locator => root().getByTestId('metrics-time-aggregation');
+	const space = (): Locator => root().getByTestId('metrics-space-aggregation');
+	return {
+		async select(name) {
+			// An antd AutoComplete: the testid is on a wrapper.
+			const field = picker();
+			const options = await openSelect(page, field);
+			await field.locator('input').fill(name);
+			// Options carry the metric's type and unit next to its name.
+			await options.filter({ hasText: name }).first().click();
+		},
+		// The selection item, not the root: these selects render their list
+		// inside the root, so its text includes every option.
+		input: () => picker().locator('input'),
+		timeAggregation: () => time().locator('.ant-select-selection-item'),
+		spaceAggregation: () => space().locator('.ant-select-selection-item'),
+		async setTimeAggregation(label) {
+			const options = await openSelect(page, time());
+			await options.filter({ hasText: exactly(label) }).click();
+			await expect(this.timeAggregation()).toHaveText(label);
+		},
+		async setSpaceAggregation(label) {
+			const options = await openSelect(page, space());
+			await options.filter({ hasText: exactly(label) }).click();
+			await expect(this.spaceAggregation()).toHaveText(label);
+		},
+		async spaceOptions() {
+			const options = await openSelect(page, space());
+			const labels = await options.allTextContents();
+			await page.keyboard.press('Escape');
+			return labels.map((label) => label.trim());
+		},
+	};
+}
+
+/**
+ * Two frames: an edit reaches React state on its next scheduler task, and an
+ * action in the same frame reads the previous render. A long render delays
+ * the frame itself, so this cannot pass before the commit.
+ */
+async function afterRender(page: Page): Promise<void> {
+	await page.evaluate(
+		() =>
+			new Promise<void>((resolve) => {
+				// Runs in the browser; the e2e tsconfig has no DOM lib.
+				const { requestAnimationFrame: frame } = globalThis as unknown as {
+					requestAnimationFrame(this: void, callback: () => void): number;
+				};
+				frame(() => frame(() => resolve()));
+			}),
+	);
+}
+
+function queryBuilderDriver(page: Page): QueryBuilderDriver {
+	const bodies: V5Body[] = [];
+	page.on('request', (request: Request) => {
+		if (isQueryRange(request.url()) && request.method() === 'POST') {
+			bodies.push(request.postDataJSON() as V5Body);
+		}
+	});
+	const consoleWatch = watchConsole(page, {
+		// ANTLR reports every partial expression on console.error, prefixed
+		// with its position (`line 1:14 ...`).
+		ignore: ['line 1:', 'line 2:', 'line 3:'],
+	});
+
+	// Waits on a request the action started: a response to one already in
+	// flight (e.g. after a structural edit) would end the wait too early.
+	const firedBy = async (action: () => Promise<void>): Promise<V5Body[]> => {
+		const before = bodies.length;
+		const answered = page
+			.waitForRequest((r) => isQueryRange(r.url()) && r.method() === 'POST')
+			.then((request) => request.response());
+		await action();
+		await answered;
+		return bodies.slice(before);
+	};
+
+	const qb: QueryBuilderDriver = {
+		async openExplorer(path, { query, raw, view } = {}) {
+			await dismissQuickFiltersAnnouncement(page);
+			const params = [`relativeTime=${RELATIVE_TIME}`];
+			if (view) {
+				params.push(`panelTypes=${encodeURIComponent(JSON.stringify(view))}`);
+			}
+			const composite =
+				raw ??
+				(query === undefined
+					? undefined
+					: encodeURIComponent(JSON.stringify(query)));
+			if (composite !== undefined) {
+				params.push(`compositeQuery=${composite}`);
+			}
+			const url = `${path}?${params.join('&')}`;
+			// The metrics explorer runs nothing until a metric is chosen; its
+			// settle point is the metric list instead.
+			if (path === EXPLORER.metrics) {
+				await Promise.all([
+					page.waitForResponse((r) => r.url().includes('/api/v2/metrics')),
+					page.goto(url),
+				]);
+				await expect(qb.query('A').filter.content()).toBeVisible();
+				return [];
+			}
+			const fired = await firedBy(async () => {
+				await page.goto(url);
+			});
+			await expect(qb.query('A').filter.content()).toBeVisible();
+			return fired;
+		},
+		query(name) {
+			const root = (): Locator => page.getByTestId(`query-${name}`);
+			// Index-suffixed testids follow screen position, not the query's
+			// name (A, C, B after a delete and re-add): match them in the block.
+			const signalSelect = (): Locator =>
+				root().locator('[data-testid^="query-data-source-selector-"]');
+			return {
+				root,
+				filter: editorAt(page, () =>
+					root().getByTestId('query-where-clause-editor'),
+				),
+				filterStatus: () => root().getByTestId('query-validation-status'),
+				aggregation: editorAt(page, () =>
+					root().getByTestId('query-aggregation-editor'),
+				),
+				step: () => root().getByTestId('input-Seconds'),
+				metric: metricAt(page, root),
+				addOns: addOnsAt(page, root),
+				actions: () => root().getByTestId('query-actions'),
+				menuItem: (action) =>
+					page.getByTestId(`query-actions-item-${action}-query`),
+				async clone() {
+					await root().getByTestId('query-actions').click();
+					await page.getByTestId('query-actions-item-clone-query').click();
+					await afterRender(page);
+				},
+				async delete() {
+					await root().getByTestId('query-actions').click();
+					await page.getByTestId('query-actions-item-delete-query').click();
+					await expect(root()).toHaveCount(0);
+					await afterRender(page);
+				},
+				async toggleVisibility() {
+					await root().getByTestId('qb-entity-visibility').click();
+					// The icon is the only visible change and carries no state.
+					await afterRender(page);
+				},
+				collapse: () => root().getByTestId('qb-entity-collapse').click(),
+				signal: () => signalSelect().locator('.ant-select-selection-item'),
+				async setSignal(label) {
+					const options = await openSelect(page, signalSelect());
+					await options.filter({ hasText: exactly(label) }).click();
+					await expect(this.signal()).toHaveText(label);
+				},
+			};
+		},
+		tab: (queryType) => page.getByTestId(`query-type-tab-${queryType}`),
+		promql: () => page.getByTestId('promql-query-input').first(),
+		async addQuery(name) {
+			await page.getByTestId('add-new-query-button').click();
+			const block = qb.query(name);
+			await expect(block.filter.content()).toBeVisible();
+			return block;
+		},
+		queryNames: () =>
+			page.locator('[data-testid^="query-"]').evaluateAll((nodes) =>
+				nodes
+					.map((node) => node.getAttribute('data-testid') ?? '')
+					.filter((id) => /^query-[A-Z]$/.test(id))
+					.map((id) => id.slice('query-'.length)),
+			),
+		formula(name) {
+			const root = (): Locator => page.getByTestId(`formula-${name}`);
+			return {
+				root,
+				expression: () => root().getByTestId('formula-expression'),
+				legend: () => root().getByTestId('formula-legend'),
+				async delete() {
+					await root().getByTestId('qb-entity-delete').click();
+					await expect(root()).toHaveCount(0);
+					// The block leaves the DOM before the editor's draft follows.
+					await afterRender(page);
+				},
+			};
+		},
+		async addFormula(name) {
+			await page.getByTestId('add-formula-button').click();
+			const formula = qb.formula(name);
+			await expect(formula.expression()).toBeVisible();
+			return formula;
+		},
+		traceOperator: {
+			root: () => page.getByTestId('trace-operator'),
+			// No testid; the label is followed by a "Beta" tag inside the button.
+			addButton: () =>
+				page.getByRole('button').filter({ hasText: /^Add Trace Matching/ }),
+			async add() {
+				await qb.traceOperator.addButton().click();
+				await expect(qb.traceOperator.editor.content()).toBeVisible();
+			},
+			async remove() {
+				// The only direct button child: the trash icon, no testid.
+				await qb.traceOperator.root().locator(':scope > button').click();
+				await expect(qb.traceOperator.root()).toHaveCount(0);
+			},
+			editor: editorAt(page, () => page.getByTestId('trace-operator-editor')),
+		},
+		async addToDashboard(title) {
+			await page.getByTestId('explorer-add-to-dashboard').click();
+			const dialog = page.getByTestId('export-panel-dialog');
+			await dialog
+				.getByTestId('export-dashboard-select')
+				.locator('input')
+				.fill(title);
+			await dialog.locator(`.ant-select-item-option[title="${title}"]`).click();
+			await dialog.getByTestId('export-panel-export').click();
+			await page.waitForURL(/\/panel\/new\?/);
+			await expect(qb.query('A').filter.content()).toBeVisible();
+		},
+		runButton: () => page.locator('[data-run-query-btn]').first(),
+		// No testid on the container.
+		logsResults: () => page.locator('.logs-explorer-views'),
+		async run() {
+			await afterRender(page);
+			return firedBy(() => qb.runButton().click());
+		},
+		async rerunUntil(read, expected) {
+			await expect(async () => {
+				await expect(qb.runButton()).toHaveText(/Run Query/);
+				await afterRender(page);
+				await qb.runButton().click();
+				await expect.poll(read, { timeout: 3_000 }).toEqual(expected);
+			}).toPass({ timeout: 25_000 });
+		},
+		async runShortcut() {
+			await afterRender(page);
+			return firedBy(() => page.keyboard.press('ControlOrMeta+Enter'));
+		},
+		quickFilter(title, value) {
+			const checkbox = (): Locator =>
+				page.getByTestId(`checkbox-${title}-${value}`);
+			return {
+				checkbox,
+				toggle: () => firedBy(() => checkbox().click()),
+			};
+		},
+		spec(fired, name) {
+			for (const body of fired) {
+				const match = body.compositeQuery?.queries?.find(
+					(q) => q.spec?.name === name,
+				);
+				if (match) {
+					return match.spec;
+				}
+			}
+			throw new Error(`no query ${name} in ${fired.length} query_range bodies`);
+		},
+		sent: () => bodies,
+		latest: (name) =>
+			[...bodies]
+				.reverse()
+				.flatMap((body) => body.compositeQuery?.queries ?? [])
+				.find((query) => query.spec?.name === name)?.spec,
+		urlQuery() {
+			const raw = new URL(page.url()).searchParams.get('compositeQuery');
+			if (!raw) {
+				return null;
+			}
+			// The app encodes before URLSearchParams encodes again.
+			return JSON.parse(decodeURIComponent(raw)) as Record<string, unknown>;
+		},
+		console: consoleWatch,
+	};
+	return qb;
+}
+
+/** Layers `qb` onto another host's test, e.g. the alert-rule fixtures. */
+export const withQueryBuilder = driver('qb', ({ page }) =>
+	queryBuilderDriver(page),
+);
+
+const HISTOGRAM_BOUNDS = ['1', '2', '4', '+Inf'];
+
+/** Ten minutes of a gauge and a cumulative histogram, names unique per worker. */
+export const withMetricTypes = seeded(
+	'metricTypes',
+	async ({ page, workerIndex }) => {
+		const suffix = `${workerIndex}_${Date.now()}`;
+		const types: MetricTypes = {
+			gauge: `e2e_qb_gauge_${suffix}`,
+			histogram: `e2e_qb_histogram_${suffix}`,
+		};
+		const now = Date.now();
+		const points: Record<string, unknown>[] = [];
+		for (let minute = 0; minute < 10; minute += 1) {
+			const timestamp = new Date(now - (10 - minute) * 60_000).toISOString();
+			points.push({
+				metric_name: types.gauge,
+				labels: { host: 'qb-host' },
+				timestamp,
+				value: 10 + minute,
+				type_: 'Gauge',
+				temporality: 'Unspecified',
+				is_monotonic: false,
+			});
+			HISTOGRAM_BOUNDS.forEach((le, bucket) => {
+				points.push({
+					metric_name: types.histogram,
+					labels: { le },
+					timestamp,
+					value: (minute + 1) * (bucket + 1),
+					type_: 'Histogram',
+					temporality: 'Cumulative',
+					is_monotonic: false,
+				});
+			});
+		}
+		await postToSeeder(page, '/telemetry/metrics', points);
+		return types;
+	},
+);
+
+export const test = withQueryBuilder(kit);
+
+export { expect } from './kit';

tests/e2e/helpers/alert-forms/shared.ts

@@ -85,8 +85,17 @@ export async function pickChannelByName(
 	channelName: string,
 ): Promise<void> {
 	const tagsBefore = await selectedTags(select).count();
-	await select.click();
-	await expect(select).toHaveClass(/ant-select-open/);
+	// A re-render of the condition section (e.g. after a query edit) can close
+	// the select as the click opens it; re-click only while it is still closed.
+	await expect(async () => {
+		const isOpen = await select.evaluate((node) =>
+			node.classList.contains('ant-select-open'),
+		);
+		if (!isOpen) {
+			await select.click();
+		}
+		await expect(select).toHaveClass(/ant-select-open/, { timeout: 2_000 });
+	}).toPass({ timeout: 15_000 });
 
 	// `fill` on the combobox input rather than `keyboard.type`: the query is a ~30
 	// character channel name and every keystroke re-runs antd's filter, so typing it

tests/e2e/helpers/alerts/seeding.ts

@@ -15,7 +15,7 @@ import type {
 
 // ─── Seeding telemetry ───────────────────────────────────────────────────
 
-async function postToSeeder(
+export async function postToSeeder(
 	page: Page,
 	path: string,
 	data: unknown,

tests/e2e/helpers/query-range-mock.ts

@@ -272,7 +272,9 @@ export async function holdQueryRange(
 	});
 	await page.route(QUERY_RANGE_GLOB, async (route) => {
 		await gate;
-		await fulfill(route, body);
+		// A cancelled run aborts its request while it is held; there is
+		// nothing left to answer.
+		await fulfill(route, body).catch(() => undefined);
 	});
 	return { release: () => release() };
 }

tests/e2e/tests/query-builder/addons.spec.ts

@@ -0,0 +1,152 @@
+import {
+	expect,
+	EXPLORER,
+	SUM_METRIC,
+	test,
+} from '../../drivers/query-builder';
+
+const HAVING = ['count() > 10', 'count() IN [1, 2]', 'count() NOT IN [1, 2]'];
+
+test.describe('Query builder — add-ons', () => {
+	for (const explorer of ['logs', 'traces'] as const) {
+		test(`TC-21 ${explorer} group by keeps order through removal and reload`, async ({
+			qb,
+		}) => {
+			await qb.openExplorer(EXPLORER[explorer], { view: 'graph' });
+			const addOns = qb.query('A').addOns;
+			await addOns.open('group_by');
+
+			await addOns.groupBy.add('service.name');
+			await addOns.groupBy.add('deployment.environment');
+			await addOns.groupBy.add('k8s.namespace.name');
+			await addOns.groupBy.remove('service.name');
+			const fired = await qb.run();
+
+			const expected = ['deployment.environment', 'k8s.namespace.name'];
+			expect(qb.spec(fired, 'A').groupBy?.map((key) => key.name)).toEqual(
+				expected,
+			);
+			const reloaded = await qb.openExplorer(EXPLORER[explorer], {
+				view: 'graph',
+				query: qb.urlQuery(),
+			});
+			expect(qb.spec(reloaded, 'A').groupBy?.map((key) => key.name)).toEqual(
+				expected,
+			);
+			expect(await qb.query('A').addOns.groupBy.values()).toEqual(expected);
+		});
+	}
+
+	test('TC-21 metrics group by offers the metric’s own attributes', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.metrics);
+		const query = qb.query('A');
+		await query.metric.select(SUM_METRIC);
+
+		await query.addOns.groupBy.add('operation');
+		const fired = await qb.run();
+
+		expect(qb.spec(fired, 'A').groupBy?.map((key) => key.name)).toEqual([
+			'operation',
+		]);
+	});
+
+	for (const having of HAVING) {
+		test(`TC-22 having "${having}" is sent verbatim and accepted`, async ({
+			qb,
+		}) => {
+			await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
+			const addOns = qb.query('A').addOns;
+			await addOns.open('group_by');
+			await addOns.groupBy.add('service.name');
+			await addOns.open('having');
+
+			await addOns.having.type(having);
+			await addOns.having.press('Escape');
+			const fired = await qb.run();
+
+			expect(qb.spec(fired, 'A').having?.expression).toBe(having);
+			expect(qb.console.failedResponses).toEqual([]);
+		});
+	}
+
+	test('TC-23 the logs list orders by timestamp then id, traces by timestamp only', async ({
+		qb,
+	}) => {
+		const logs = await qb.openExplorer(EXPLORER.logs, { view: 'list' });
+		expect(qb.spec(logs, 'A').order?.map((o) => o.key.name)).toEqual([
+			'timestamp',
+			'id',
+		]);
+
+		const traces = await qb.openExplorer(EXPLORER.traces, { view: 'list' });
+		expect(qb.spec(traces, 'A').order?.map((o) => o.key.name)).toEqual([
+			'timestamp',
+		]);
+	});
+
+	test('TC-24 a positive limit is sent; empty and zero send none', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
+		const addOns = qb.query('A').addOns;
+		await addOns.open('group_by');
+		await addOns.groupBy.add('service.name');
+		await addOns.open('limit');
+
+		await addOns.limit().fill('10');
+		expect(qb.spec(await qb.run(), 'A').limit).toBe(10);
+
+		await addOns.limit().fill('');
+		expect(qb.spec(await qb.run(), 'A')).not.toHaveProperty('limit');
+
+		await addOns.limit().fill('3');
+		await qb.run();
+		await addOns.limit().fill('0');
+		expect(qb.spec(await qb.run(), 'A')).not.toHaveProperty('limit');
+	});
+
+	// known: the input accepts a negative limit; Run then sends nothing, and the
+	// next Run sends it and the backend answers 400.
+	test.fixme('TC-24 a negative limit is never sent', async ({ qb }) => {
+		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
+		const addOns = qb.query('A').addOns;
+		await addOns.open('limit');
+
+		await addOns.limit().fill('-5');
+		await qb.runButton().click();
+		await qb.runButton().click();
+
+		expect(qb.sent().map((body) => qb.spec([body], 'A').limit)).not.toContain(-5);
+		expect(qb.console.failedResponses).toEqual([]);
+	});
+
+	test('TC-25 the legend prefills from group by and a custom one is kept', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
+		const addOns = qb.query('A').addOns;
+		await addOns.open('group_by');
+		await addOns.groupBy.add('service.name');
+		await addOns.groupBy.add('deployment.environment');
+
+		await addOns.open('legend_format');
+		await expect(addOns.legend()).toHaveValue(
+			'service.name = {{service.name}}, deployment.environment = {{deployment.environment}}',
+		);
+
+		await addOns.legend().fill('{{service.name}} logs');
+		await addOns.groupBy.add('k8s.namespace.name');
+		await expect(addOns.legend()).toHaveValue('{{service.name}} logs');
+		expect(qb.spec(await qb.run(), 'A').legend).toBe('{{service.name}} logs');
+	});
+
+	test('TC-25 the legend opens empty without a group by', async ({ qb }) => {
+		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
+
+		await qb.query('A').addOns.open('legend_format');
+
+		await expect(qb.query('A').addOns.legend()).toHaveValue('');
+	});
+});

tests/e2e/tests/query-builder/aggregation.spec.ts

@@ -0,0 +1,80 @@
+import { expect, EXPLORER, test } from '../../drivers/query-builder';
+
+// One comma-separated term per entry in the request's `aggregations`.
+const EXPRESSIONS: Record<string, string[]> = {
+	'a count': ['count()'],
+	'a distinct count': ['count_distinct(service.name)'],
+	'a percentile of a span field': ['p99(duration_nano)'],
+	'two aggregations': ['count()', 'p99(duration_nano)'],
+};
+
+test.describe('Query builder — logs and traces aggregations', () => {
+	for (const [label, terms] of Object.entries(EXPRESSIONS)) {
+		test(`TC-17 ${label} reaches the request`, async ({ qb }) => {
+			await qb.openExplorer(EXPLORER.traces, { view: 'graph' });
+			const aggregation = qb.query('A').aggregation;
+
+			await aggregation.type(terms.join(', '));
+			await aggregation.press('Escape');
+			const fired = await qb.run();
+
+			expect(qb.spec(fired, 'A').aggregations?.map((a) => a.expression)).toEqual(
+				terms,
+			);
+		});
+	}
+
+	test('TC-18 the step interval reaches the request', async ({
+		authedPage: page,
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.traces, { view: 'graph' });
+
+		await qb.query('A').step().fill('120');
+		await page.keyboard.press('Tab');
+		const fired = await qb.run();
+
+		expect(qb.spec(fired, 'A').stepInterval).toBe(120);
+	});
+
+	test('TC-30 a trace operator replaces per-query aggregation until removed', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.traces, { view: 'graph' });
+		await (await qb.addQuery('B')).filter.type("http.status_code = '500'");
+		await qb.query('B').filter.press('Escape');
+
+		await qb.traceOperator.add();
+		await qb.traceOperator.editor.type('A => B');
+		await qb.traceOperator.editor.press('Escape');
+		for (const name of ['A', 'B']) {
+			await expect(qb.query(name).aggregation.root()).toHaveCount(0);
+			await expect(qb.query(name).addOns.toggles()).toHaveCount(0);
+		}
+		const fired = await qb.run();
+		const operator = fired
+			.flatMap((body) => body.compositeQuery.queries)
+			.find((query) => query.type === 'builder_trace_operator');
+		expect(operator?.spec).toMatchObject({ expression: 'A => B' });
+
+		await qb.traceOperator.remove();
+		await expect(qb.query('A').aggregation.root()).toBeVisible();
+		await qb.rerunUntil(
+			() =>
+				qb
+					.sent()
+					.at(-1)
+					?.compositeQuery.queries.some(
+						(query) => query.type === 'builder_trace_operator',
+					),
+			false,
+		);
+	});
+
+	test('TC-30 the logs explorer offers no trace matching', async ({ qb }) => {
+		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
+
+		await expect(qb.query('A').root()).toBeVisible();
+		await expect(qb.traceOperator.addButton()).toHaveCount(0);
+	});
+});

tests/e2e/tests/query-builder/alerts.spec.ts

@@ -0,0 +1,85 @@
+import { withQueryBuilder } from '../../drivers/query-builder';
+import {
+	expect,
+	test as alertRulesTest,
+} from '../../fixtures/alerts/alert-rules';
+import { AlertType } from '../../helpers/alert-forms/constants';
+import { gotoCreateAlertV2 } from '../../helpers/alert-forms/navigation';
+import {
+	selectThresholdChannel,
+	v2SaveButton,
+} from '../../helpers/alert-forms/v2';
+import { gotoAlertOverview } from '../../helpers/alerts/navigation';
+
+const test = withQueryBuilder(alertRulesTest);
+
+const FILTER_A = "http.method = 'GET'";
+const FILTER_B = "http.status_code = '500'";
+const TRACE_MATCH = 'A => B';
+
+interface SavedRule {
+	condition?: {
+		compositeQuery?: {
+			queries?: {
+				type: string;
+				spec: {
+					name?: string;
+					expression?: string;
+					filter?: { expression?: string };
+				};
+			}[];
+		};
+	};
+}
+
+test.describe('Query builder — alerts', () => {
+	test('TC-06 a trace-matching traces alert saves and reopens intact', async ({
+		authedPage: page,
+		alertChannel,
+		ownedRules,
+		qb,
+	}) => {
+		await gotoCreateAlertV2(page, { alertType: AlertType.TRACES });
+		await page.getByTestId('alert-name-input').fill(`e2e-qb-tc06-${Date.now()}`);
+
+		await qb.query('A').filter.type(FILTER_A);
+		await qb.query('A').filter.press('Escape');
+		const b = await qb.addQuery('B');
+		await b.filter.type(FILTER_B);
+		await b.filter.press('Escape');
+		await qb.traceOperator.add();
+		await qb.traceOperator.editor.type(TRACE_MATCH);
+		await qb.traceOperator.editor.press('Escape');
+		// Blur first: the editor's blur re-renders the condition section, which
+		// otherwise closes the channel select as its click opens it.
+		await qb.traceOperator.editor.content().blur();
+		await selectThresholdChannel(page, 0, alertChannel.name);
+
+		const [response] = await Promise.all([
+			page.waitForResponse(
+				(r) => r.url().includes('/api/v2/rules') && r.request().method() === 'POST',
+			),
+			v2SaveButton(page).click(),
+		]);
+		await ownedRules.register(response);
+		const saved = response.request().postDataJSON() as SavedRule;
+		const queries = saved.condition?.compositeQuery?.queries ?? [];
+		expect(queries).toEqual(
+			expect.arrayContaining([
+				expect.objectContaining({
+					type: 'builder_trace_operator',
+					spec: expect.objectContaining({ expression: TRACE_MATCH }),
+				}),
+			]),
+		);
+
+		const { data } = (await response.json()) as { data: { id: string } };
+		await gotoAlertOverview(page, String(data.id));
+
+		await expect.poll(() => qb.query('A').filter.expression()).toBe(FILTER_A);
+		await expect.poll(() => qb.query('B').filter.expression()).toBe(FILTER_B);
+		await expect
+			.poll(() => qb.traceOperator.editor.expression())
+			.toBe(TRACE_MATCH);
+	});
+});

tests/e2e/tests/query-builder/dashboards.spec.ts

@@ -0,0 +1,72 @@
+import { emptyDashboard, test as editorTest } from '../../drivers/panel-editor';
+import {
+	expect,
+	EXPLORER,
+	withQueryBuilder,
+} from '../../drivers/query-builder';
+
+const test = withQueryBuilder(editorTest);
+
+const FILTER = "severity_text = 'ERROR'";
+const AGGREGATION = 'count_distinct(service.name)';
+
+interface StoredQuery {
+	spec: {
+		filter?: { expression?: string };
+		aggregations?: { expression?: string }[];
+	};
+}
+
+/** Where a non-List panel keeps its builder queries in the v2 dashboard spec. */
+interface StoredPanel {
+	spec: {
+		queries: {
+			spec: { plugin: { kind: string; spec: { queries: StoredQuery[] } } };
+		}[];
+	};
+}
+
+test.describe('Query builder — explorer to dashboard', () => {
+	test('TC-05 a logs explorer query survives add to dashboard, save and reopen', async ({
+		dashboards,
+		editor,
+		qb,
+	}) => {
+		const dashboard = emptyDashboard();
+		const title = dashboard.spec.display.name;
+		const id = await dashboards.seed(dashboard);
+
+		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
+		await qb.query('A').filter.type(FILTER);
+		await qb.query('A').filter.press('Escape');
+		await qb.query('A').aggregation.type(AGGREGATION);
+		await qb.query('A').aggregation.press('Escape');
+		await qb.run();
+
+		await qb.addToDashboard(title);
+		await expect.poll(() => qb.query('A').filter.expression()).toBe(FILTER);
+		await expect
+			.poll(() => qb.query('A').aggregation.expression())
+			.toBe(AGGREGATION);
+
+		await editor.save();
+		// The shared spec types model only bare BuilderQuery plugins.
+		const panels = (await dashboards.get(id)).spec.panels as unknown as Record<
+			string,
+			StoredPanel
+		>;
+		const [panelId] = Object.keys(panels);
+		const plugin = panels[panelId].spec.queries[0].spec.plugin;
+		expect(plugin.kind).toBe('signoz/CompositeQuery');
+		expect(plugin.spec.queries[0].spec).toMatchObject({
+			filter: { expression: FILTER },
+			aggregations: [{ expression: AGGREGATION }],
+		});
+
+		await dashboards.openEditor(id, panelId);
+		await expect.poll(() => qb.query('A').filter.expression()).toBe(FILTER);
+		await expect
+			.poll(() => qb.query('A').aggregation.expression())
+			.toBe(AGGREGATION);
+	});
+});

tests/e2e/tests/query-builder/filter.spec.ts

@@ -0,0 +1,284 @@
+import { expect, EXPLORER, test } from '../../drivers/query-builder';
+
+// Typing is real keystrokes: the regressions here (caret jumps, swallowed
+// Enter, the run shortcut) only show up through the keyboard path.
+
+const RECENT_KEPT = "service.name = 'frontend' AND severity_text = 'WARN'";
+const RECENT_REMOVED = 'logger.name EXISTS';
+
+const COMPOUND: Record<string, string> = {
+	'NOT over a parenthesised OR':
+		"NOT (severity_text = 'INFO' OR severity_text = 'WARN') AND service.name = 'frontend'",
+	'nested groups':
+		"(service.name = 'frontend' AND (severity_text = 'ERROR' OR severity_text = 'WARN'))",
+	'NOT IN with EXISTS':
+		"service.name NOT IN ['frontend', 'adservice'] AND logger.name EXISTS",
+};
+
+const queryWithFilter = (expression: string): unknown => ({
+	queryType: 'builder',
+	builder: {
+		queryFormulas: [],
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'logs',
+				expression: 'A',
+				filter: { expression },
+				aggregations: [{ expression: 'count()' }],
+			},
+		],
+	},
+});
+
+const VERBATIM: Record<string, string> = {
+	'an escaped quote': "logger.name = 'it\\'s'",
+	'a double-quoted string': 'logger.name = "double quoted"',
+	'a quoted numeric string': "logger.name = '123'",
+	'a bare number': 'logger.name = 123',
+	'a boolean': 'logger.name = true',
+	'spaces and a backslash': "logger.name = 'a b\\\\c'",
+};
+
+test.describe('Query builder — filter editor', () => {
+	test('TC-07 key, operator and value suggestions build the expression', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		const filter = qb.query('A').filter;
+
+		await filter.type('severity_te');
+		await filter.openSuggestions();
+		await filter.suggestion('severity_text').first().click();
+		await expect.poll(() => filter.expression()).toMatch(/^severity_text\s*$/);
+
+		await filter.openSuggestions();
+		await expect(filter.suggestion(/^=/).first()).toBeVisible();
+		await filter.append('= ');
+		await filter.openSuggestions();
+		await filter.suggestion('ERROR').first().click();
+		await expect
+			.poll(() => filter.expression())
+			.toMatch(/^severity_text = 'ERROR'\s*$/);
+
+		const fired = await qb.run();
+		expect(qb.spec(fired, 'A').filter?.expression?.trim()).toBe(
+			"severity_text = 'ERROR'",
+		);
+	});
+
+	for (const [label, expression] of Object.entries(VERBATIM)) {
+		test(`TC-08 ${label} is sent and restored verbatim`, async ({
+			authedPage: page,
+			qb,
+		}) => {
+			await qb.openExplorer(EXPLORER.logs);
+			const filter = qb.query('A').filter;
+
+			await filter.type(expression);
+			await filter.press('Escape');
+			const fired = await qb.run();
+			expect(qb.spec(fired, 'A').filter?.expression).toBe(expression);
+
+			await page.reload();
+			await expect(filter.content()).toBeVisible();
+			await expect.poll(() => filter.expression()).toBe(expression);
+			await expect(qb.query('A').filterStatus()).toHaveCount(0);
+		});
+	}
+
+	test('TC-11 the status icon shows only for an unfocused invalid filter', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		const query = qb.query('A');
+
+		await query.filter.type('service.name =');
+		await expect(query.filterStatus()).toHaveCount(0);
+
+		await query.filter.content().blur();
+		await expect(query.filterStatus()).toBeVisible();
+
+		await query.filter.type("service.name = 'frontend'");
+		await query.filter.content().blur();
+		await expect(query.filterStatus()).toHaveCount(0);
+
+		await query.filter.clear();
+		await query.filter.content().blur();
+		await expect(query.filterStatus()).toHaveCount(0);
+	});
+
+	test('TC-12 Enter and Shift+Enter never insert a newline or run', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		const filter = qb.query('A').filter;
+		await filter.type("severity_text = 'ERROR'");
+		await filter.press('Escape');
+		await expect(filter.suggestions()).toHaveCount(0);
+		const sentBefore = qb.sent().length;
+
+		await filter.press('Enter');
+		await filter.press('Shift+Enter');
+
+		await expect(filter.lineCount()).toHaveCount(1);
+		await expect.poll(() => filter.expression()).toBe("severity_text = 'ERROR'");
+		expect(qb.sent()).toHaveLength(sentBefore);
+	});
+
+	for (const explorer of ['logs', 'traces'] as const) {
+		test(`TC-13 Cmd/Ctrl+Enter in the ${explorer} filter runs the edited query`, async ({
+			qb,
+		}) => {
+			await qb.openExplorer(EXPLORER[explorer]);
+			const filter = qb.query('A').filter;
+			await filter.type("service.name = 'frontend'");
+
+			const fired = await qb.runShortcut();
+
+			expect(qb.spec(fired, 'A').filter?.expression).toBe(
+				"service.name = 'frontend'",
+			);
+			await expect(filter.lineCount()).toHaveCount(1);
+			expect(qb.urlQuery()).toMatchObject({ queryType: 'builder' });
+		});
+	}
+
+	test('TC-14 Escape closes suggestions and keeps the text', async ({ qb }) => {
+		await qb.openExplorer(EXPLORER.logs);
+		const filter = qb.query('A').filter;
+
+		await filter.type('serv');
+		await filter.openSuggestions();
+		await filter.press('Escape');
+
+		await expect(filter.suggestions()).toHaveCount(0);
+		await expect.poll(() => filter.expression()).toBe('serv');
+		await filter.press('i');
+		await expect.poll(() => filter.expression()).toBe('servi');
+
+		await filter.press('Escape');
+		await filter.press('Escape');
+		await expect.poll(() => filter.expression()).toBe('servi');
+		await expect(filter.content()).toBeFocused();
+	});
+
+	test('TC-09 value suggestions fill an IN list', async ({ qb }) => {
+		await qb.openExplorer(EXPLORER.logs);
+		const filter = qb.query('A').filter;
+
+		await filter.type('service.name IN ');
+		await filter.openSuggestions();
+		await filter.suggestion('frontend').first().click();
+		await expect
+			.poll(() => filter.expression())
+			.toBe("service.name IN ['frontend'] ");
+
+		await filter.type("service.name IN ['frontend', 'cartservice']");
+		await filter.press('Escape');
+		const fired = await qb.run();
+
+		expect(qb.spec(fired, 'A').filter?.expression).toBe(
+			"service.name IN ['frontend', 'cartservice']",
+		);
+		await expect(qb.query('A').filterStatus()).toHaveCount(0);
+	});
+
+	for (const [label, expression] of Object.entries(COMPOUND)) {
+		test(`TC-10 ${label} is valid and sent verbatim`, async ({ qb }) => {
+			await qb.openExplorer(EXPLORER.logs);
+			const query = qb.query('A');
+
+			await query.filter.type(expression);
+			await query.filter.press('Escape');
+			await query.filter.content().blur();
+			await expect(query.filterStatus()).toHaveCount(0);
+			const fired = await qb.run();
+
+			expect(qb.spec(fired, 'A').filter?.expression).toBe(expression);
+		});
+	}
+
+	test('TC-15 an expression with CRLF from the URL loads without a RangeError', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs, {
+			query: queryWithFilter("body CONTAINS 'line1\r\nline2'"),
+		});
+
+		await expect.poll(() => qb.query('A').filter.expression()).toContain('line1');
+		expect(qb.console.errors.filter((e) => e.includes('RangeError'))).toEqual([]);
+		await qb.query('A').filter.append(" AND severity_text = 'ERROR'");
+		await expect
+			.poll(() => qb.query('A').filter.expression())
+			.toMatch(/severity_text = 'ERROR'$/);
+		expect(qb.console.errors).toEqual([]);
+	});
+
+	test('TC-15 recent searches are offered, applied and deleted', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		const filter = qb.query('A').filter;
+		for (const expression of [RECENT_KEPT, RECENT_REMOVED]) {
+			await filter.type(expression);
+			await filter.press('Escape');
+			await qb.run();
+		}
+
+		await filter.clear();
+		await filter.openSuggestions();
+		await expect(filter.suggestion(RECENT_KEPT)).toBeVisible();
+		await expect(filter.suggestion(RECENT_REMOVED)).toBeVisible();
+
+		await filter.suggestion(RECENT_KEPT).click();
+		await expect.poll(() => filter.expression()).toBe(RECENT_KEPT);
+
+		await filter.clear();
+		await filter.openSuggestions();
+		await filter
+			.suggestion(RECENT_REMOVED)
+			.getByRole('button', { name: 'Remove from recent searches' })
+			.click();
+		await expect(filter.suggestion(RECENT_REMOVED)).toHaveCount(0);
+	});
+
+	test('TC-15 recent searches survive a reload and stay with their signal', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		await qb.query('A').filter.type(RECENT_KEPT);
+		await qb.query('A').filter.press('Escape');
+		await qb.run();
+
+		await qb.openExplorer(EXPLORER.logs);
+		await qb.query('A').filter.clear();
+		await qb.query('A').filter.openSuggestions();
+		await expect(qb.query('A').filter.suggestion(RECENT_KEPT)).toBeVisible();
+
+		await qb.openExplorer(EXPLORER.traces);
+		await qb.query('A').filter.clear();
+		await qb.query('A').filter.openSuggestions();
+		await expect(qb.query('A').filter.suggestion(RECENT_KEPT)).toHaveCount(0);
+	});
+
+	test('TC-16 a quick-filter value toggles between excluded and cleared', async ({
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		const filter = qb.query('A').filter;
+		const handTyped = "service.name = 'frontend'";
+		const excluded = `${handTyped} severity_text not in ['ERROR']`;
+		const error = qb.quickFilter('Severity Text', 'ERROR');
+		await filter.type(handTyped);
+		await qb.run();
+
+		for (const expected of [excluded, handTyped, excluded]) {
+			const fired = await error.toggle();
+
+			expect(qb.spec(fired, 'A').filter?.expression).toBe(expected);
+			await expect.poll(() => filter.expression()).toBe(expected);
+		}
+		await expect(error.checkbox()).toHaveAttribute('aria-checked', 'false');
+	});
+});

tests/e2e/tests/query-builder/metrics.spec.ts

@@ -0,0 +1,106 @@
+import {
+	expect,
+	EXPLORER,
+	type MetricTypes,
+	OTHER_SUM_METRIC,
+	SUM_METRIC,
+	test as base,
+	withMetricTypes,
+} from '../../drivers/query-builder';
+
+const test = withMetricTypes(base);
+
+const MOMENT_AGGREGATIONS = ['Sum', 'Avg', 'Min', 'Max'];
+
+interface TypeDefaults {
+	metric: (types: MetricTypes) => string;
+	time?: string;
+	space: string;
+	spaceOptions: string[];
+}
+
+const DEFAULTS: Record<string, TypeDefaults> = {
+	sum: {
+		metric: () => SUM_METRIC,
+		time: 'Rate',
+		space: 'Sum',
+		spaceOptions: MOMENT_AGGREGATIONS,
+	},
+	gauge: {
+		metric: (types) => types.gauge,
+		time: 'Avg',
+		space: 'Avg',
+		spaceOptions: MOMENT_AGGREGATIONS,
+	},
+	histogram: {
+		metric: (types) => types.histogram,
+		space: 'P90',
+		spaceOptions: ['P50', 'P75', 'P90', 'P95', 'P99'],
+	},
+};
+
+test.describe('Query builder — metric aggregations', () => {
+	for (const [type, expected] of Object.entries(DEFAULTS)) {
+		test(`TC-19 a ${type} metric gets its type's default aggregations`, async ({
+			metricTypes,
+			qb,
+		}) => {
+			const metricName = expected.metric(metricTypes);
+			await qb.openExplorer(EXPLORER.metrics);
+			const metric = qb.query('A').metric;
+
+			await metric.select(metricName);
+
+			await expect(metric.spaceAggregation()).toHaveText(expected.space);
+			expect(await metric.spaceOptions()).toEqual(expected.spaceOptions);
+			const fired = await qb.run();
+			expect(qb.spec(fired, 'A').aggregations?.[0]).toMatchObject({
+				metricName,
+				spaceAggregation: expected.space.toLowerCase(),
+				...(expected.time && { timeAggregation: expected.time.toLowerCase() }),
+			});
+		});
+	}
+
+	test('TC-19 a histogram has no time aggregation control', async ({
+		metricTypes,
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.metrics);
+
+		await qb.query('A').metric.select(metricTypes.histogram);
+
+		await expect(qb.query('A').metric.spaceAggregation()).toHaveText('P90');
+		await expect(qb.query('A').metric.timeAggregation()).toHaveCount(0);
+	});
+
+	test('TC-20 aggregations reset only when the metric type changes', async ({
+		metricTypes,
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.metrics);
+		const metric = qb.query('A').metric;
+
+		await metric.select(SUM_METRIC);
+		await metric.setTimeAggregation('Increase');
+		await metric.setSpaceAggregation('Max');
+
+		await metric.select(OTHER_SUM_METRIC);
+		await expect(metric.timeAggregation()).toHaveText('Increase');
+		await expect(metric.spaceAggregation()).toHaveText('Max');
+
+		await metric.select(metricTypes.gauge);
+		await expect(metric.timeAggregation()).toHaveText('Avg');
+		await expect(metric.spaceAggregation()).toHaveText('Avg');
+
+		await metric.select(SUM_METRIC);
+		await expect(metric.timeAggregation()).toHaveText('Rate');
+		await expect(metric.spaceAggregation()).toHaveText('Sum');
+		const fired = await qb.run();
+		expect(qb.spec(fired, 'A').aggregations?.[0]).toMatchObject({
+			metricName: SUM_METRIC,
+			timeAggregation: 'rate',
+			spaceAggregation: 'sum',
+		});
+	});
+});

tests/e2e/tests/query-builder/multi-query.spec.ts

@@ -0,0 +1,112 @@
+import {
+	metricsQuery,
+	SINGLE_PANEL_ID,
+	singlePanelDashboard,
+	test as editorTest,
+} from '../../drivers/panel-editor';
+import {
+	expect,
+	OTHER_SUM_METRIC,
+	SUM_METRIC,
+	withQueryBuilder,
+} from '../../drivers/query-builder';
+
+// In the panel editor a new query starts as metrics with no metric picked, and
+// Run does nothing until one is: each added query picks a metric first.
+const test = withQueryBuilder(editorTest);
+
+const CLONED_FILTER = "operation = '/ads/get'";
+
+test.describe('Query builder — multiple queries', () => {
+	test('TC-28 a deleted name is reused by the next added query', async ({
+		dashboards,
+		qb,
+	}) => {
+		await dashboards.seedAndEdit(
+			singlePanelDashboard({ query: metricsQuery() }),
+			SINGLE_PANEL_ID,
+		);
+		for (const name of ['B', 'C']) {
+			await (await qb.addQuery(name)).metric.select(OTHER_SUM_METRIC);
+		}
+		expect(await qb.queryNames()).toEqual(['A', 'B', 'C']);
+
+		await qb.query('B').delete();
+		expect(await qb.queryNames()).toEqual(['A', 'C']);
+		const reAdded = await qb.addQuery('B');
+		expect(await qb.queryNames()).toEqual(['A', 'C', 'B']);
+		await reAdded.metric.select(SUM_METRIC);
+		await expect(reAdded.metric.input()).toHaveValue(SUM_METRIC);
+		await expect(qb.query('C').metric.input()).toHaveValue(OTHER_SUM_METRIC);
+	});
+
+	test('TC-28 a clone and a hidden query reach the request', async ({
+		dashboards,
+		qb,
+	}) => {
+		await dashboards.seedAndEdit(
+			singlePanelDashboard({ query: metricsQuery({ filter: CLONED_FILTER }) }),
+			SINGLE_PANEL_ID,
+		);
+		await (await qb.addQuery('B')).metric.select(OTHER_SUM_METRIC);
+
+		await qb.query('A').clone();
+		await expect
+			.poll(() => qb.query('C').filter.expression())
+			.toBe(CLONED_FILTER);
+		await qb.query('B').toggleVisibility();
+		await qb.runButton().click();
+
+		await expect.poll(() => qb.latest('B')?.disabled).toBe(true);
+		expect(qb.latest('C')).toMatchObject({
+			filter: { expression: CLONED_FILTER },
+			aggregations: [expect.objectContaining({ metricName: SUM_METRIC })],
+		});
+	});
+
+	test('TC-28 the last remaining query offers no delete', async ({
+		dashboards,
+		qb,
+	}) => {
+		await dashboards.seedAndEdit(
+			singlePanelDashboard({ query: metricsQuery() }),
+			SINGLE_PANEL_ID,
+		);
+		await (await qb.addQuery('B')).metric.select(OTHER_SUM_METRIC);
+
+		await qb.query('B').delete();
+		await qb.query('A').actions().click();
+
+		await expect(qb.query('A').menuItem('clone')).toBeVisible();
+		await expect(qb.query('A').menuItem('delete')).toHaveCount(0);
+	});
+
+	test('TC-29 a formula over two queries reaches the request', async ({
+		dashboards,
+		qb,
+	}) => {
+		await dashboards.seedAndEdit(
+			singlePanelDashboard({ query: metricsQuery() }),
+			SINGLE_PANEL_ID,
+		);
+		await (await qb.addQuery('B')).metric.select(OTHER_SUM_METRIC);
+
+		const formula = await qb.addFormula('F1');
+		await formula.expression().fill('A / B');
+		await formula.legend().fill('ratio');
+		await qb.runButton().click();
+		await expect
+			.poll(() => qb.latest('F1'))
+			.toMatchObject({ expression: 'A / B', legend: 'ratio' });
+
+		await formula.delete();
+		await qb.rerunUntil(
+			() =>
+				qb
+					.sent()
+					.at(-1)
+					?.compositeQuery.queries.map((q) => q.spec.name),
+			['A', 'B'],
+		);
+	});
+});

tests/e2e/tests/query-builder/panel-editor.spec.ts

@@ -0,0 +1,203 @@
+import {
+	logsCountQuery,
+	metricsQuery,
+	PanelKind,
+	SINGLE_PANEL_ID,
+	singlePanelDashboard,
+	test as editorTest,
+} from '../../drivers/panel-editor';
+import {
+	expect,
+	reduceToLabel,
+	SUM_METRIC,
+	withMetricTypes,
+	withQueryBuilder,
+} from '../../drivers/query-builder';
+
+const test = withMetricTypes(withQueryBuilder(editorTest));
+
+const LOGS_FILTER = "severity_text = 'ERROR'";
+const TRACES_FILTER = "http.method = 'GET'";
+const PROMQL = 'sum(rate(signoz_calls_total[5m]))';
+
+const QUERIES = {
+	logs: () => logsCountQuery(),
+	traces: () => logsCountQuery({ signal: 'traces' }),
+	metrics: () => metricsQuery(),
+};
+
+const ALL = ['group_by', 'having', 'order_by', 'limit', 'legend_format'];
+const NO_HAVING = ['group_by', 'order_by', 'limit', 'legend_format'];
+const METRICS = ['having', 'order_by', 'limit', 'legend_format'];
+
+/**
+ * Add-on toggles each panel kind offers per signal. Metrics group by lives in
+ * the aggregation row, so it is never a toggle there.
+ */
+const ADD_ONS: Record<
+	keyof typeof QUERIES,
+	Partial<Record<string, string[]>>
+> = {
+	logs: {
+		[PanelKind.TimeSeries]: ALL,
+		[PanelKind.BarChart]: ALL,
+		[PanelKind.Table]: ALL,
+		[PanelKind.PieChart]: ALL,
+		[PanelKind.Number]: ['legend_format'],
+		[PanelKind.Heatmap]: NO_HAVING,
+	},
+	traces: {
+		[PanelKind.TimeSeries]: ALL,
+		[PanelKind.BarChart]: ALL,
+		[PanelKind.Table]: ALL,
+		[PanelKind.PieChart]: ALL,
+		[PanelKind.Number]: ['legend_format'],
+		[PanelKind.Heatmap]: NO_HAVING,
+	},
+	metrics: {
+		[PanelKind.TimeSeries]: METRICS,
+		[PanelKind.BarChart]: METRICS,
+		[PanelKind.Table]: [...METRICS, 'reduce_to'],
+		[PanelKind.PieChart]: [...METRICS, 'reduce_to'],
+		[PanelKind.Number]: ['legend_format', 'reduce_to'],
+		[PanelKind.Heatmap]: ['order_by', 'limit', 'legend_format', 'bucket_options'],
+	},
+};
+
+test.describe('Query builder — panel editor', () => {
+	for (const [signal, kinds] of Object.entries(ADD_ONS)) {
+		for (const [kind, expected] of Object.entries(kinds)) {
+			test(`TC-27 ${signal} on ${kind.replace('signoz/', '')} offers its add-ons`, async ({
+				dashboards,
+				qb,
+			}) => {
+				await dashboards.seedAndEdit(
+					singlePanelDashboard({
+						kind: kind as PanelKind,
+						query: QUERIES[signal as keyof typeof QUERIES](),
+					}),
+					SINGLE_PANEL_ID,
+				);
+
+				await expect(qb.query('A').addOns.toggles()).toHaveCount(
+					expected?.length ?? 0,
+				);
+				const toggles = await qb
+					.query('A')
+					.addOns.toggles()
+					.evaluateAll((nodes) =>
+						nodes.map((node) =>
+							(node.getAttribute('data-testid') ?? '').replace('query-add-on-', ''),
+						),
+					);
+				expect(toggles).toEqual(expected);
+			});
+		}
+	}
+
+	test('TC-27 a limit hidden by a kind switch reopens with its value', async ({
+		dashboards,
+		editor,
+		qb,
+	}) => {
+		await dashboards.seedAndEdit(
+			singlePanelDashboard({ query: logsCountQuery() }),
+			SINGLE_PANEL_ID,
+		);
+		const addOns = qb.query('A').addOns;
+		await addOns.open('limit');
+		await addOns.limit().fill('7');
+
+		await editor.switchType(PanelKind.Number);
+		await expect(addOns.content('limit')).toHaveCount(0);
+		await editor.switchType(PanelKind.TimeSeries);
+
+		await expect(addOns.limit()).toHaveValue('7');
+		// The kind switch already fetched: Run can be a cache hit.
+		await qb.runButton().click();
+		await expect.poll(() => qb.latest('A')?.limit).toBe(7);
+	});
+
+	test('TC-26 reduce-to follows the metric type and keeps a choice within it', async ({
+		dashboards,
+		metricTypes,
+		qb,
+	}) => {
+		await dashboards.seedAndEdit(
+			singlePanelDashboard({ kind: PanelKind.Table, query: metricsQuery() }),
+			SINGLE_PANEL_ID,
+		);
+		const query = qb.query('A');
+		await expect(query.addOns.reduceTo.value()).toHaveText(reduceToLabel('Sum'));
+
+		await query.addOns.reduceTo.set('Max');
+		await query.metric.select('signoz_latency_count');
+		await expect(query.addOns.reduceTo.value()).toHaveText(reduceToLabel('Max'));
+
+		await query.metric.select(metricTypes.gauge);
+		await expect(query.addOns.reduceTo.value()).toHaveText(
+			reduceToLabel('Average'),
+		);
+
+		await query.metric.select(SUM_METRIC);
+		await expect(query.addOns.reduceTo.value()).toHaveText(reduceToLabel('Sum'));
+		expect(qb.spec(await qb.run(), 'A').aggregations?.[0]).toMatchObject({
+			metricName: SUM_METRIC,
+			reduceTo: 'sum',
+		});
+	});
+
+	test('TC-31 switching signal restores the query left on each signal', async ({
+		dashboards,
+		qb,
+	}) => {
+		await dashboards.seedAndEdit(
+			singlePanelDashboard({ query: logsCountQuery({ groupBy: [] }) }),
+			SINGLE_PANEL_ID,
+		);
+		const query = qb.query('A');
+		await query.filter.type(LOGS_FILTER);
+		await query.filter.press('Escape');
+
+		await query.setSignal('Traces');
+		await expect.poll(() => query.filter.expression()).toBe('');
+		await query.filter.type(TRACES_FILTER);
+		await query.filter.press('Escape');
+
+		await query.setSignal('Logs');
+		await expect.poll(() => query.filter.expression()).toBe(LOGS_FILTER);
+		await query.setSignal('Traces');
+		await expect.poll(() => query.filter.expression()).toBe(TRACES_FILTER);
+		await qb.runButton().click();
+		await expect
+			.poll(() => qb.latest('A'))
+			.toMatchObject({
+				signal: 'traces',
+				filter: { expression: TRACES_FILTER },
+			});
+	});
+
+	test('TC-33 a PromQL query is sent as promql and kept across tab switches', async ({
+		dashboards,
+		qb,
+	}) => {
+		await dashboards.seedAndEdit(
+			singlePanelDashboard({ query: metricsQuery() }),
+			SINGLE_PANEL_ID,
+		);
+
+		await qb.tab('promql').click();
+		await qb.promql().fill(PROMQL);
+		const fired = await qb.run();
+		expect(fired.at(-1)?.compositeQuery.queries[0]).toMatchObject({
+			type: 'promql',
+			spec: { name: 'A', query: PROMQL },
+		});
+
+		await qb.tab('clickhouse_sql').click();
+		await qb.tab('builder').click();
+		await expect(qb.query('A').metric.spaceAggregation()).toHaveText('Sum');
+		await qb.tab('promql').click();
+		await expect(qb.promql()).toHaveValue(PROMQL);
+	});
+});

tests/e2e/tests/query-builder/run.spec.ts

@@ -0,0 +1,80 @@
+import { expect, EXPLORER, test } from '../../drivers/query-builder';
+import {
+	holdQueryRange,
+	mockQueryRange,
+	mockQueryRangeError,
+	QueryRange,
+	unmockQueryRange,
+} from '../../helpers/query-range-mock';
+
+test.describe('Query builder — run and cancel', () => {
+	test('TC-34 a held run can be cancelled and the next run goes through', async ({
+		authedPage: page,
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		const held = await holdQueryRange(page, QueryRange.empty());
+		await qb.query('A').filter.type("severity_text = 'WARN'");
+		await qb.query('A').filter.press('Escape');
+
+		await qb.runButton().click();
+		await expect(qb.runButton()).toHaveText('Cancel');
+		await qb.runButton().click();
+		await expect(qb.runButton()).toHaveText(/Run Query/);
+		await expect(qb.logsResults()).toContainText('Query cancelled');
+
+		held.release();
+		await unmockQueryRange(page);
+		await qb.query('A').filter.type("severity_text = 'ERROR'");
+		await qb.query('A').filter.press('Escape');
+		// The cancelled query is re-sent alongside; the newest request wins.
+		await qb.run();
+		expect(qb.latest('A')?.filter?.expression).toBe("severity_text = 'ERROR'");
+		await expect(qb.logsResults()).not.toContainText('Query cancelled');
+	});
+
+	test('TC-35 a failed run keeps the query editable and the next run recovers', async ({
+		authedPage: page,
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		await mockQueryRangeError(page, 'mocked query failure');
+		await qb.query('A').filter.type("severity_text = 'INFO'");
+		await qb.query('A').filter.press('Escape');
+
+		await qb.runButton().click();
+		// The failed request is retried before the error settles.
+		await expect(qb.runButton()).toHaveText(/Run Query/, { timeout: 20_000 });
+		await expect(qb.logsResults()).toContainText('mocked query failure');
+		await expect
+			.poll(() => qb.query('A').filter.expression())
+			.toBe("severity_text = 'INFO'");
+
+		await unmockQueryRange(page);
+		await qb.query('A').filter.type("severity_text = 'WARN'");
+		await qb.query('A').filter.press('Escape');
+		const fired = await qb.run();
+		expect(qb.spec(fired, 'A').filter?.expression).toBe("severity_text = 'WARN'");
+		await expect(qb.logsResults()).not.toContainText('mocked query failure');
+	});
+
+	test('TC-35 an empty result leaves the query unchanged', async ({
+		authedPage: page,
+		qb,
+	}) => {
+		await qb.openExplorer(EXPLORER.logs);
+		await mockQueryRange(page, QueryRange.empty());
+		await qb.query('A').filter.type("service.name = 'nothing-here'");
+		await qb.query('A').filter.press('Escape');
+
+		const fired = await qb.run();
+
+		expect(qb.spec(fired, 'A').filter?.expression).toBe(
+			"service.name = 'nothing-here'",
+		);
+		await expect
+			.poll(() => qb.query('A').filter.expression())
+			.toBe("service.name = 'nothing-here'");
+		expect(qb.console.errors).toEqual([]);
+	});
+});

tests/e2e/tests/query-builder/url.spec.ts

@@ -0,0 +1,198 @@
+import { expect, EXPLORER, test } from '../../drivers/query-builder';
+
+// A shared or hand-edited explorer link must never take the page down: the
+// param is parsed, repaired and rewritten before the builder mounts.
+
+const MALFORMED: Record<string, string> = {
+	'not JSON': 'not-json',
+	'truncated JSON': '%7B',
+	'a JSON string': encodeURIComponent('"a string"'),
+	'a JSON array': encodeURIComponent('[]'),
+	'JSON null': 'null',
+	'an empty JSON string': '%22%22',
+	'double encoded': encodeURIComponent(
+		encodeURIComponent(JSON.stringify({ queryType: 'builder' })),
+	),
+};
+
+const PARTIAL: Record<string, unknown> = {
+	'an empty object': {},
+	'builder with no builder block': { queryType: 'builder' },
+	'builder with no queryData': { queryType: 'builder', builder: {} },
+	'empty queryData': {
+		queryType: 'builder',
+		builder: { queryData: [], queryFormulas: [] },
+	},
+	'a query with no dataSource': {
+		queryType: 'builder',
+		builder: { queryData: [{ queryName: 'A' }] },
+	},
+	'an unknown queryType': { queryType: 'zzz' },
+	'non-array promql and clickhouse blocks': {
+		queryType: 'builder',
+		promql: {},
+		clickhouse_sql: 'x',
+		builder: { queryData: [{ queryName: 'A', dataSource: 'logs' }] },
+	},
+};
+
+/**
+ * Saved before the v5 builder: structured filters, a having array and an
+ * aggregate operator. The old having filter wrote `columnName` upper-cased
+ * (`COUNT()`).
+ */
+const legacyLogsQuery = (having: unknown[]): unknown => ({
+	queryType: 'builder',
+	promql: [],
+	clickhouse_sql: [],
+	builder: {
+		queryFormulas: [],
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'logs',
+				expression: 'A',
+				disabled: false,
+				aggregateOperator: 'count',
+				aggregateAttribute: { key: '', dataType: '', type: '', isColumn: false },
+				filters: {
+					op: 'AND',
+					items: [
+						{
+							id: 'f1',
+							key: {
+								key: 'severity_text',
+								dataType: 'string',
+								type: '',
+								isColumn: true,
+							},
+							op: '=',
+							value: 'ERROR',
+						},
+					],
+				},
+				having,
+				groupBy: [],
+				orderBy: [],
+				functions: [],
+				legend: '',
+				limit: null,
+				stepInterval: 60,
+				reduceTo: 'avg',
+			},
+		],
+	},
+});
+
+const FIRST = "service.name = 'frontend'";
+const SECOND = "service.name = 'cartservice'";
+
+interface UrlQuery {
+	builder?: { queryData?: { filter?: { expression?: string } }[] };
+}
+
+test.describe('Query builder — URL handling', () => {
+	for (const [label, raw] of Object.entries(MALFORMED)) {
+		test(`TC-01 logs explorer survives ${label} and still runs`, async ({
+			qb,
+		}) => {
+			await qb.openExplorer(EXPLORER.logs, { raw });
+
+			await expect(qb.query('A').filter.content()).toBeVisible();
+			await qb.query('A').filter.type("severity_text = 'ERROR'");
+			const fired = await qb.run();
+
+			expect(qb.spec(fired, 'A').filter?.expression).toBe(
+				"severity_text = 'ERROR'",
+			);
+			expect(qb.urlQuery()).toMatchObject({ queryType: 'builder' });
+			expect(qb.console.errors).toEqual([]);
+		});
+	}
+
+	for (const [label, query] of Object.entries(PARTIAL)) {
+		test(`TC-02 logs explorer repairs ${label}`, async ({ qb }) => {
+			const loaded = await qb.openExplorer(EXPLORER.logs, { query });
+
+			expect(qb.spec(loaded, 'A').signal).toBe('logs');
+			await expect
+				.poll(() => qb.urlQuery())
+				.toMatchObject({
+					queryType: 'builder',
+					builder: { queryData: [{ queryName: 'A', dataSource: 'logs' }] },
+				});
+			expect(qb.console.errors).toEqual([]);
+		});
+	}
+
+	test('TC-03 legacy filters and aggregate operator convert to v5 expressions', async ({
+		qb,
+	}) => {
+		const loaded = await qb.openExplorer(EXPLORER.logs, {
+			view: 'graph',
+			query: legacyLogsQuery([]),
+		});
+
+		const spec = qb.spec(loaded, 'A');
+		expect(spec.filter?.expression).toMatch(/^severity_text\s*=\s*'ERROR'$/);
+		expect(spec.aggregations?.[0]?.expression).toBe('count()');
+		expect(spec).not.toHaveProperty('filters');
+		await expect
+			.poll(() => qb.query('A').filter.expression())
+			.toMatch(/^severity_text\s*=\s*'ERROR'$/);
+		expect(qb.console.errors).toEqual([]);
+	});
+
+	// known: convertHavingToExpression keeps the stored `COUNT()` casing, which
+	// the v5 backend rejects with a 400 ("Invalid references in `Having`").
+	test.fixme('TC-03 a legacy having as the old builder stored it still runs', async ({
+		qb,
+	}) => {
+		const loaded = await qb.openExplorer(EXPLORER.logs, {
+			view: 'graph',
+			query: legacyLogsQuery([{ columnName: 'COUNT()', op: '>', value: 5 }]),
+		});
+
+		expect(qb.spec(loaded, 'A').having?.expression).toMatch(
+			/^count\(\)\s*>\s*5$/i,
+		);
+		expect(qb.console.failedResponses).toEqual([]);
+	});
+
+	for (const explorer of ['logs', 'traces'] as const) {
+		test(`TC-04 ${explorer} explorer query follows back, forward and reload`, async ({
+			authedPage: page,
+			qb,
+		}) => {
+			await qb.openExplorer(EXPLORER[explorer]);
+			const filter = qb.query('A').filter;
+			const urlFilter = (): unknown =>
+				(qb.urlQuery() as UrlQuery | null)?.builder?.queryData?.[0]?.filter
+					?.expression;
+
+			await filter.type(FIRST);
+			await qb.run();
+			await filter.type(SECOND);
+			await qb.run();
+
+			await page.goBack();
+			await expect.poll(urlFilter).toBe(FIRST);
+			await expect.poll(() => filter.expression()).toBe(FIRST);
+
+			await page.goForward();
+			await expect.poll(urlFilter).toBe(SECOND);
+			await expect.poll(() => filter.expression()).toBe(SECOND);
+
+			await filter.type("service.name = 'unsaved'");
+			const sentBefore = qb.sent().length;
+			await page.reload();
+			await expect.poll(() => filter.expression()).toBe(SECOND);
+			await expect
+				.poll(() => qb.sent().slice(sentBefore).length)
+				.toBeGreaterThan(0);
+			expect(qb.spec(qb.sent().slice(sentBefore), 'A').filter?.expression).toBe(
+				SECOND,
+			);
+		});
+	}
+});