fix(fmt): lint issue

cmd/enterprise/Dockerfile.with-web.integration

@@ -38,7 +38,8 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
 COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+
+RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
 COPY --from=build /opt/build ./web/

docs/contributing/tests/e2e.md

@@ -227,11 +227,14 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium
 
+# Single sub-area
+npx playwright test tests/alerts/history/ --project=chromium
+
 # Single file
-npx playwright test tests/alerts/alerts.spec.ts --project=chromium
+npx playwright test tests/alerts/page.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "TC-01"
+npx playwright test --project=chromium -g "AL-01"
 ```
 
 ### Iterative modes
@@ -265,7 +268,14 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |
 
-Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
+Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
+
+```bash
+# runs against a locally served frontend, not whatever .env.local points at
+SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
+```
+
+This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.
 
 ### Playwright options
 

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -29,6 +29,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-logs"
 				>
 					<div className="icon">
 						<LogsIcon />
@@ -40,6 +41,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-traces"
 				>
 					<div className="icon">
 						<DraftingCompass

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -26,7 +26,10 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div className="change-percentage change-percentage--success">
+			<div
+				className="change-percentage change-percentage--success"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
@@ -38,7 +41,10 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div className="change-percentage change-percentage--error">
+			<div
+				className="change-percentage change-percentage--error"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
@@ -50,7 +56,10 @@ function ChangePercentage({
 	}
 
 	return (
-		<div className="change-percentage change-percentage--no-previous-data">
+		<div
+			className="change-percentage change-percentage--no-previous-data"
+			data-testid="stats-card-change"
+		>
 			<div className="change-percentage__label">no previous data</div>
 		</div>
 	);
@@ -103,7 +112,12 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);
 
 	return (
-		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
+		<div
+			className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}
+			data-testid="stats-card"
+			data-stats-title={title}
+			data-empty={isEmpty ? 'true' : 'false'}
+		>
 			<div className="stats-card__title-wrapper">
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
@@ -123,7 +137,7 @@ function StatsCard({
 			</div>
 
 			<div className="stats-card__stats">
-				<div className="count-label">
+				<div className="count-label" data-testid="stats-card-value">
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>
 

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx

@@ -81,7 +81,11 @@ function StatsGraph({ timeSeries, changeDirection }: Props): JSX.Element {
 	);
 
 	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+		<div
+			style={{ height: '100%', width: '100%' }}
+			ref={graphRef}
+			data-testid="stats-card-sparkline"
+		>
 			<Uplot data={[xData, yData]} options={options} />
 		</div>
 	);

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -48,11 +48,16 @@ function TopContributorsCard({
 
 	return (
 		<>
-			<div className="top-contributors-card">
+			<div className="top-contributors-card" data-testid="top-contributors-card">
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
+						<Button
+							type="text"
+							className="view-all"
+							onClick={toggleViewAllDrawer}
+							data-testid="top-contributors-view-all"
+						>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -68,7 +68,10 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div className="total-contribution">
+					<div
+						className="total-contribution"
+						data-testid="top-contributors-row-count"
+					>
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -78,7 +81,10 @@ function TopContributorsRows({
 
 	const handleRowClick = (
 		record: AlertRuleTopContributors,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'top-contributors-row',
 		onClick: (): void => {
 			logEvent('Alert history: Top contributors row: Clicked', {
 				labels: record.labels,

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx

@@ -31,7 +31,10 @@ function ViewAllDrawer({
 			}}
 			title="Viewing All Contributors"
 		>
-			<div className="top-contributors-card--view-all">
+			<div
+				className="top-contributors-card--view-all"
+				data-testid="top-contributors-drawer"
+			>
 				<div className="top-contributors-card__content">
 					<TopContributorsRows
 						topContributors={topContributorsData}

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -32,8 +32,8 @@ function GraphWrapper({
 	}, [data?.data]);
 
 	return (
-		<div className="timeline-graph">
-			<div className="timeline-graph__title">
+		<div className="timeline-graph" data-testid="timeline-graph">
+			<div className="timeline-graph__title" data-testid="timeline-graph-title">
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
 			<div className="timeline-graph__chart">

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -118,7 +118,10 @@ function TimelineTableContent(): JSX.Element {
 
 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'timeline-row',
 		onClick: (): void => {
 			void logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
@@ -128,12 +131,15 @@ function TimelineTableContent(): JSX.Element {
 	});
 
 	return (
-		<div className="timeline-table">
+		<div className="timeline-table" data-testid="timeline-table">
 			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
 			{!isLoadingKeys && hardcodedAttributeKeys ? (
 				<div className="timeline-table__filter">
 					<div className="timeline-table__filter-row">
-						<div className="timeline-table__filter-search">
+						<div
+							className="timeline-table__filter-search"
+							data-testid="timeline-filter-search"
+						>
 							<QuerySearch
 								onChange={querySearchOnChange}
 								queryData={queryData}
@@ -155,6 +161,7 @@ function TimelineTableContent(): JSX.Element {
 					<Skeleton.Input
 						className="timeline-table__filter--loading-skeleton"
 						active
+						data-testid="timeline-filter-skeleton"
 					/>
 				</div>
 			)}
@@ -172,14 +179,17 @@ function TimelineTableContent(): JSX.Element {
 				locale={{
 					emptyText:
 						isError && apiError ? (
-							<div className="timeline-table__error">
+							<div className="timeline-table__error" data-testid="timeline-error">
 								<ErrorContent error={apiError} />
 							</div>
 						) : undefined,
 				}}
 				footer={(): JSX.Element => (
 					<div className="timeline-table__pagination">
-						<div className="timeline-table__pagination-info">
+						<div
+							className="timeline-table__pagination-info"
+							data-testid="timeline-footer-range"
+						>
 							{paginationConfig.showTotal?.(totalItems, [
 								totalItems === 0
 									? 0

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -21,7 +21,7 @@ export const timelineTableColumns = ({
 		sorter: true,
 		width: 140,
 		render: (value): JSX.Element => (
-			<div className="alert-rule-state">
+			<div className="alert-rule-state" data-testid="timeline-row-state">
 				<AlertState state={value} showLabel />
 			</div>
 		),
@@ -30,7 +30,7 @@ export const timelineTableColumns = ({
 		title: 'LABELS',
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
-			<div className="alert-rule-labels">
+			<div className="alert-rule-labels" data-testid="timeline-row-labels">
 				<AlertLabels labels={labels} />
 			</div>
 		),
@@ -40,7 +40,10 @@ export const timelineTableColumns = ({
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div className="alert-rule__created-at">
+			<div
+				className="alert-rule__created-at"
+				data-testid="timeline-row-created-at"
+			>
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -53,7 +56,7 @@ export const timelineTableColumns = ({
 			if (!record.relatedTracesLink && !record.relatedLogsLink) {
 				return (
 					<Tooltip title="No links available for this item">
-						<Button type="text" ghost disabled>
+						<Button type="text" ghost disabled data-testid="timeline-row-actions">
 							<Ellipsis className="dropdown-icon" size="md" />
 						</Button>
 					</Tooltip>
@@ -65,7 +68,7 @@ export const timelineTableColumns = ({
 					relatedTracesLink={record.relatedTracesLink ?? ''}
 					relatedLogsLink={record.relatedLogsLink ?? ''}
 				>
-					<Button type="text" ghost>
+					<Button type="text" ghost data-testid="timeline-row-actions">
 						<Ellipsis className="dropdown-icon" size="md" />
 					</Button>
 				</ConditionalAlertPopover>

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -23,6 +23,7 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.OVERALL_STATUS,
 			label: 'Overall Status',
+			testId: 'timeline-tab-overall-status',
 		},
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
@@ -33,6 +34,7 @@ function TimelineTabs(): JSX.Element {
 				</div>
 			),
 			disabled: true,
+			testId: 'timeline-tab-top-contributors',
 		},
 	];
 
@@ -57,14 +59,17 @@ function TimelineFilters(): JSX.Element {
 		{
 			value: TimelineFilter.ALL,
 			label: 'All',
+			testId: 'timeline-filter-all',
 		},
 		{
 			value: TimelineFilter.FIRED,
 			label: 'Fired',
+			testId: 'timeline-filter-fired',
 		},
 		{
 			value: TimelineFilter.RESOLVED,
 			label: 'Resolved',
+			testId: 'timeline-filter-resolved',
 		},
 	];
 

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -94,6 +94,8 @@ function AlertDetails(): JSX.Element {
 		>
 			<div
 				className={classNames('alert-details', { 'alert-details-v2': isV2Alert })}
+				data-testid="alert-details-root"
+				data-schema-version={isV2Alert ? NEW_ALERT_SCHEMA_VERSION : 'v1'}
 			>
 				<AlertBreadcrumb
 					className="alert-details__breadcrumb"

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -117,7 +117,11 @@ function AlertActionButtons({
 			<div className="alert-action-buttons">
 				<Tooltip title={isAlertRuleDisabled ? 'Enable alert' : 'Disable alert'}>
 					{isAlertRuleDisabled !== undefined && (
-						<Switch onChange={toggleAlertRule} value={!isAlertRuleDisabled} />
+						<Switch
+							onChange={toggleAlertRule}
+							value={!isAlertRuleDisabled}
+							testId="alert-actions-toggle"
+						/>
 					)}
 				</Tooltip>
 				<CopyToClipboard textToCopy={window.location.href} />
@@ -129,6 +133,7 @@ function AlertActionButtons({
 						<Tooltip title="More options">
 							<Button
 								type="text"
+								data-testid="alert-actions-menu"
 								icon={
 									<Ellipsis
 										size={16}

frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx

@@ -47,21 +47,29 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 		<div className="alert-info__info-wrapper">
 			<div className="top-section">
 				<div className="alert-title-wrapper">
-					<AlertState state={alertRuleState ?? state ?? ''} />
-					<div className="alert-title">
+					<div data-testid="alert-header-state">
+						<AlertState state={alertRuleState ?? state ?? ''} />
+					</div>
+					<div className="alert-title" data-testid="alert-header-title">
 						<LineClampedText text={displayName || ''} />
 					</div>
 				</div>
 			</div>
 			<div className="bottom-section">
-				{labels?.severity && <AlertSeverity severity={labels.severity} />}
+				{labels?.severity && (
+					<div data-testid="alert-header-severity">
+						<AlertSeverity severity={labels.severity} />
+					</div>
+				)}
 
 				{/* // TODO(shaheer): Get actual data when we are able to get alert firing from state from API */}
 				{/* <AlertStatus
 						status="firing"
 						timestamp={dayjs().subtract(1, 'd').valueOf()}
 					/> */}
-				<AlertLabels labels={labelsWithoutSeverity} />
+				<div data-testid="alert-header-labels">
+					<AlertLabels labels={labelsWithoutSeverity} />
+				</div>
 			</div>
 		</div>
 	);

frontend/src/pages/AlertDetails/hooks.tsx

@@ -127,7 +127,7 @@ export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
 		{
 			Component: EditRules,
 			name: (
-				<div className="tab-item">
+				<div className="tab-item" data-testid="alert-details-tab-overview">
 					<Table size={14} />
 					Overview
 				</div>
@@ -138,7 +138,7 @@ export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
 		{
 			Component: AlertHistory,
 			name: (
-				<div className="tab-item">
+				<div className="tab-item" data-testid="alert-details-tab-history">
 					<History size={14} />
 					History
 					<BetaTag />

frontend/src/periscope/components/Tabs2/Tabs2.tsx

@@ -13,6 +13,8 @@ interface Tab {
 	disabled?: boolean;
 	icon?: string | JSX.Element;
 	isBeta?: boolean;
+	/** Optional `data-testid` for the tab button. */
+	testId?: string;
 }
 
 interface TimelineTabsProps {
@@ -63,6 +65,7 @@ function Tabs2({
 						disabled={tab.disabled}
 						icon={tab.icon}
 						style={{ minWidth: buttonMinWidth }}
+						data-testid={tab.testId}
 					>
 						{tab.label}
 

tests/e2e/fixtures/alert-history.ts

@@ -0,0 +1,383 @@
+import type { Browser } from '@playwright/test';
+
+import {
+	createEmailChannelViaApi,
+	createLogsAlertViaApi,
+	createMetricAlertViaApi,
+	createNoDataAlertViaApi,
+	deleteAlertViaApi,
+	deleteChannelViaApi,
+	readTimelineTotal,
+	seedAlertHistoryLogs,
+	seedAlertHistoryMetrics,
+	setRuleDisabledViaApi,
+	waitForTimelineEntries,
+	waitForTimelineStates,
+} from '../helpers/alerts';
+import { expect, test as base, withAdminPage } from './alert-rules';
+
+// Worker-scoped alert-history fixtures. Extends `alert-rules`, so a spec that
+// imports `test` from here also gets `alertChannel` / `alertList` / `ownedRules`
+// — the details specs need a history seed *and* their own throwaway rules.
+//
+// Every history row has to come from the ruler actually evaluating a rule (there
+// is no seeder endpoint for `rule_state_history_v0`), so each fixture pays a
+// real ruler wait: ~20-35s for the logs fixtures, ~10s for metrics, ~105s for
+// the firing→resolved wave. Worker scope means one wait per worker instead of
+// one per test, and Playwright creates each fixture lazily — a spec that never
+// asks for `resolvedHistory` never pays its 105s.
+//
+// See `tests/e2e/specs/alerts/alerts-e2e-coverage.md` §3 for the recipes and the
+// empirically-measured timings each budget here is derived from.
+
+/** Distinct `service.name` values SEED-A seeds ⇒ its timeline row count. */
+const SEED_A_SERVICES = 25;
+
+/** SEED-F seeds fewer services and a 1m window so it resolves inside ~105s. */
+const SEED_F_SERVICES = 3;
+
+/** SEED-E's group-by values ⇒ a 2-row history that fits on one page. */
+const SEED_E_HOSTS = ['host-0', 'host-1'];
+
+/** Non-severity label on SEED-C, so the v1 header's labels row is non-empty. */
+export const SEED_C_TEAM_LABEL = 'e2e-platform';
+
+export interface AlertHistorySeed {
+	/** v2 (`schemaVersion: v2alpha1`) rule — the default history subject. */
+	ruleId: string;
+	/** Legacy v1 rule over the same logs. Its `threshold.name` is `warning`. */
+	ruleIdV1: string;
+	channelName: string;
+	/** The `body CONTAINS` marker both rules match. */
+	marker: string;
+	/** The seeded `service.name` values, in creation order. */
+	services: string[];
+	/** Baseline `total` for {@link ruleId}, read after the rule was frozen. */
+	total: number;
+	/** Baseline `total` for {@link ruleIdV1}. */
+	totalV1: number;
+}
+
+export interface MetricsHistorySeed {
+	ruleId: string;
+	channelName: string;
+	metricName: string;
+	hosts: string[];
+	total: number;
+}
+
+export interface ResolvedHistorySeed {
+	ruleId: string;
+	channelName: string;
+	marker: string;
+	services: string[];
+	/** Rows in the `firing` state — equals `stats.totalCurrentTriggers`. */
+	firingCount: number;
+	/** Rows in the `inactive` state, i.e. what the `Resolved` filter shows. */
+	resolvedCount: number;
+}
+
+export interface NoDataHistorySeed {
+	ruleId: string;
+	channelName: string;
+}
+
+export interface EmptyHistorySeed {
+	ruleId: string;
+	channelName: string;
+}
+
+async function cleanup(
+	browser: Browser,
+	{ ruleIds, channelId }: { ruleIds: string[]; channelId?: string },
+): Promise<void> {
+	await withAdminPage(browser, async (page) => {
+		for (const id of ruleIds) {
+			// eslint-disable-next-line no-await-in-loop
+			await deleteAlertViaApi(page, id);
+		}
+		if (channelId) {
+			await deleteChannelViaApi(page, channelId);
+		}
+	});
+}
+
+export const test = base.extend<
+	// eslint-disable-next-line @typescript-eslint/ban-types
+	{},
+	{
+		alertHistory: AlertHistorySeed;
+		metricsHistory: MetricsHistorySeed;
+		resolvedHistory: ResolvedHistorySeed;
+		noDataHistory: NoDataHistorySeed;
+		emptyHistory: EmptyHistorySeed;
+	}
+>({
+	/**
+	 * SEED-A (25-row firing history, v2) **plus** SEED-C (the same logs seen
+	 * through a legacy v1 rule). Both rules share one seeded log batch, so the
+	 * two ruler waves overlap and the fixture costs roughly one wait, not two.
+	 */
+	alertHistory: [
+		async ({ browser }, use) => {
+			const stamp = Date.now();
+			const marker = `e2e alert history ${stamp}`;
+			let channelId = '';
+			let ruleId = '';
+			let ruleIdV1 = '';
+
+			const seed = await withAdminPage(browser, async (page) => {
+				const channel = await createEmailChannelViaApi(page, `e2e-ah-ch-${stamp}`);
+				channelId = channel.id;
+
+				// Seed and create in the same breath: the rules only fire while the
+				// records are inside the 5m eval window.
+				const services = await seedAlertHistoryLogs(page, {
+					marker,
+					services: SEED_A_SERVICES,
+					servicePrefix: `e2e-ah-svc`,
+				});
+
+				ruleId = await createLogsAlertViaApi(page, {
+					name: `e2e-ah-rule-v2-${stamp}`,
+					marker,
+					channels: [channel.name],
+					schema: 'v2',
+				});
+				ruleIdV1 = await createLogsAlertViaApi(page, {
+					name: `e2e-ah-rule-v1-${stamp}`,
+					marker,
+					channels: [channel.name],
+					schema: 'v1',
+					// The v1 header renders `labels` minus `severity`, so without a
+					// second label its labels row is present but empty (AD-02).
+					extraLabels: { team: SEED_C_TEAM_LABEL },
+				});
+
+				await waitForTimelineEntries(page, ruleId, { min: SEED_A_SERVICES });
+				await waitForTimelineEntries(page, ruleIdV1, { min: SEED_A_SERVICES });
+
+				// Freeze both before the eval window rolls past the seeded records —
+				// otherwise the resolve wave doubles `total` mid-suite.
+				await setRuleDisabledViaApi(page, ruleId, true);
+				await setRuleDisabledViaApi(page, ruleIdV1, true);
+
+				return {
+					ruleId,
+					ruleIdV1,
+					channelName: channel.name,
+					marker,
+					services,
+					total: await readTimelineTotal(page, ruleId),
+					totalV1: await readTimelineTotal(page, ruleIdV1),
+				};
+			});
+
+			if (seed.total !== SEED_A_SERVICES) {
+				// A different total means the fixture is not what the scenarios were
+				// written against — most likely the resolve wave landed before the
+				// PATCH froze the rule. Fail loudly here rather than let every
+				// downstream count assertion fail with a confusing off-by-N.
+				throw new Error(
+					`SEED-A expected ${SEED_A_SERVICES} timeline rows, got ${seed.total}`,
+				);
+			}
+
+			await use(seed);
+
+			await cleanup(browser, { ruleIds: [ruleId, ruleIdV1], channelId });
+		},
+		{ scope: 'worker', timeout: 240_000 },
+	],
+
+	/**
+	 * SEED-E — a metrics rule over two hosts. Two things SEED-A can't give:
+	 * history rows with **no** related links (links are derived from the rule's
+	 * signal), and a 2-row history that fits on a single page.
+	 */
+	metricsHistory: [
+		async ({ browser }, use) => {
+			const stamp = Date.now();
+			const metricName = `e2e_ah_probe_metric_${stamp}`;
+			let channelId = '';
+			let ruleId = '';
+
+			const seed = await withAdminPage(browser, async (page) => {
+				const channel = await createEmailChannelViaApi(
+					page,
+					`e2e-ah-metrics-ch-${stamp}`,
+				);
+				channelId = channel.id;
+
+				await seedAlertHistoryMetrics(page, {
+					metricName,
+					hosts: SEED_E_HOSTS,
+				});
+
+				ruleId = await createMetricAlertViaApi(page, {
+					name: `e2e-ah-metrics-rule-${stamp}`,
+					metricName,
+					channels: [channel.name],
+				});
+
+				await waitForTimelineEntries(page, ruleId, {
+					min: SEED_E_HOSTS.length,
+					timeoutMs: 120_000,
+				});
+				await setRuleDisabledViaApi(page, ruleId, true);
+
+				return {
+					ruleId,
+					channelName: channel.name,
+					metricName,
+					hosts: SEED_E_HOSTS,
+					total: await readTimelineTotal(page, ruleId),
+				};
+			});
+
+			await use(seed);
+
+			await cleanup(browser, { ruleIds: [ruleId], channelId });
+		},
+		{ scope: 'worker', timeout: 240_000 },
+	],
+
+	/**
+	 * SEED-F — firing **and** resolved, without touching the seeder: a 1m eval
+	 * window means the seeded records fall out of it fast, so the rule resolves
+	 * on its own in ~105s. This is the only fixture that produces a non-zero
+	 * average resolution time and a 3-segment overall-status graph.
+	 */
+	resolvedHistory: [
+		async ({ browser }, use) => {
+			const stamp = Date.now();
+			const marker = `e2e alert resolved ${stamp}`;
+			let channelId = '';
+			let ruleId = '';
+
+			const seed = await withAdminPage(browser, async (page) => {
+				const channel = await createEmailChannelViaApi(
+					page,
+					`e2e-ah-resolved-ch-${stamp}`,
+				);
+				channelId = channel.id;
+
+				const services = await seedAlertHistoryLogs(page, {
+					marker,
+					services: SEED_F_SERVICES,
+					ageSeconds: 40,
+					minAgeSeconds: 28,
+					servicePrefix: 'e2e-ahr-svc',
+				});
+
+				ruleId = await createLogsAlertViaApi(page, {
+					name: `e2e-ah-resolved-rule-${stamp}`,
+					marker,
+					channels: [channel.name],
+					evalWindow: '1m0s',
+				});
+
+				const timeline = await waitForTimelineStates(page, ruleId, {
+					states: {
+						firing: SEED_F_SERVICES,
+						inactive: SEED_F_SERVICES,
+					},
+				});
+				await setRuleDisabledViaApi(page, ruleId, true);
+
+				return {
+					ruleId,
+					channelName: channel.name,
+					marker,
+					services,
+					firingCount: timeline.items.filter((i) => i.state === 'firing').length,
+					resolvedCount: timeline.items.filter((i) => i.state === 'inactive').length,
+				};
+			});
+
+			await use(seed);
+
+			await cleanup(browser, { ruleIds: [ruleId], channelId });
+		},
+		{ scope: 'worker', timeout: 300_000 },
+	],
+
+	/**
+	 * SEED-G — a `nodata` row, reached the same way
+	 * `integration/testdata/alerts/test_scenarios/no_data_rule_test` does:
+	 * `alertOnAbsent` on a query that matches nothing.
+	 */
+	noDataHistory: [
+		async ({ browser }, use) => {
+			const stamp = Date.now();
+			let channelId = '';
+			let ruleId = '';
+
+			const seed = await withAdminPage(browser, async (page) => {
+				const channel = await createEmailChannelViaApi(
+					page,
+					`e2e-ah-nodata-ch-${stamp}`,
+				);
+				channelId = channel.id;
+
+				ruleId = await createNoDataAlertViaApi(page, {
+					name: `e2e-ah-nodata-rule-${stamp}`,
+					// Deliberately unseeded — the query must match nothing.
+					marker: `e2e alert nodata ${stamp}`,
+					channels: [channel.name],
+				});
+
+				await waitForTimelineEntries(page, ruleId, {
+					min: 1,
+					state: 'nodata',
+					timeoutMs: 180_000,
+				});
+				await setRuleDisabledViaApi(page, ruleId, true);
+
+				return { ruleId, channelName: channel.name };
+			});
+
+			await use(seed);
+
+			await cleanup(browser, { ruleIds: [ruleId], channelId });
+		},
+		{ scope: 'worker', timeout: 300_000 },
+	],
+
+	/**
+	 * A rule that will never have history: its query matches nothing and it is
+	 * disabled immediately. Covers "no history yet" (empty table, zero stats) and
+	 * "no key suggestions" without waiting on the ruler at all.
+	 */
+	emptyHistory: [
+		async ({ browser }, use) => {
+			const stamp = Date.now();
+			let channelId = '';
+			let ruleId = '';
+
+			const seed = await withAdminPage(browser, async (page) => {
+				const channel = await createEmailChannelViaApi(
+					page,
+					`e2e-ah-empty-ch-${stamp}`,
+				);
+				channelId = channel.id;
+
+				ruleId = await createLogsAlertViaApi(page, {
+					name: `e2e-ah-empty-rule-${stamp}`,
+					marker: `e2e alert never seeded ${stamp}`,
+					channels: [channel.name],
+				});
+				await setRuleDisabledViaApi(page, ruleId, true);
+
+				return { ruleId, channelName: channel.name };
+			});
+
+			await use(seed);
+
+			await cleanup(browser, { ruleIds: [ruleId], channelId });
+		},
+		{ scope: 'worker', timeout: 120_000 },
+	],
+});
+
+export { expect };

tests/e2e/fixtures/alert-rules.ts

@@ -0,0 +1,201 @@
+import type { Browser, Page } from '@playwright/test';
+
+import {
+	type AlertSchema,
+	createEmailChannelViaApi,
+	createLogsAlertViaApi,
+	createThresholdAlertViaApi,
+	deleteAlertViaApi,
+	deleteChannelViaApi,
+	seedAlertRules,
+	type ThresholdAlertSeed,
+} from '../helpers/alerts';
+import { newAdminContext } from '../helpers/auth';
+import { expect, test as base } from './auth';
+
+// Alert *rule* fixtures — the API-only half of the alerts suite. Nothing here
+// waits on the ruler: a rule is created and that's it. History rows need real
+// evaluations, so those fixtures live in `fixtures/alert-history.ts`, which
+// extends this module — a spec importing from there gets both sets.
+//
+// Scopes, and why:
+//   `alertChannel` — worker. Every rule payload has to reference a channel by
+//     name, and one channel serves the whole worker.
+//   `alertList`    — worker. SEED-B, the read-only rule list the `tests/alerts/
+//     list` specs page, search and sort through. Names and label values are
+//     stamped per worker so parallel batches never count each other's rules.
+//   `ownedRules`   — test. Scenarios that rename/toggle/clone/delete a rule seed
+//     their own and have it removed when they finish; mutating a shared seed
+//     would break every scenario scheduled after it.
+
+export interface AlertChannel {
+	id: string;
+	name: string;
+}
+
+export interface AlertListSeed {
+	channelName: string;
+	/** Rules are named `<namePrefix>-NN` — unique to this worker's batch. */
+	namePrefix: string;
+	/** Rules seeded ⇒ the `of N` total once the list is scoped to the prefix. */
+	count: number;
+	/** `team` label on the odd-indexed half of the batch, i.e. `count / 2` rules. */
+	paymentsLabel: string;
+	ruleIds: string[];
+}
+
+export interface OwnedRules {
+	/** Seed a metric threshold rule this test owns. */
+	threshold(
+		name: string,
+		overrides?: Partial<Omit<ThresholdAlertSeed, 'name'>>,
+	): Promise<string>;
+	/**
+	 * Seed a logs rule this test owns. No telemetry is seeded for its marker, so
+	 * it never fires — enough for anything about the details shell.
+	 */
+	logs(options: {
+		name: string;
+		schema?: AlertSchema;
+		marker?: string;
+	}): Promise<string>;
+	/**
+	 * Track a rule the *app* created (Clone / Duplicate) so teardown removes it
+	 * too. Lives here because the id may legitimately be missing and a
+	 * conditional inside a test body is a lint error.
+	 */
+	register(response: { json: () => Promise<unknown> }): Promise<void>;
+}
+
+/** SEED-B size. 12 over a pinned page size of 10 ⇒ a short second page. */
+const LIST_SEED_COUNT = 12;
+
+/**
+ * Run `body` on a throwaway admin page. Worker hooks can't use the test-scoped
+ * `authedPage`, and every API helper needs a page whose context carries the
+ * admin storage state.
+ */
+export async function withAdminPage<T>(
+	browser: Browser,
+	body: (page: Page) => Promise<T>,
+): Promise<T> {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		return await body(page);
+	} finally {
+		await ctx.close();
+	}
+}
+
+async function deleteRules(browser: Browser, ids: string[]): Promise<void> {
+	if (ids.length === 0) {
+		return;
+	}
+	await withAdminPage(browser, async (page) => {
+		for (const id of ids) {
+			// eslint-disable-next-line no-await-in-loop
+			await deleteAlertViaApi(page, id);
+		}
+	});
+}
+
+export const test = base.extend<
+	{ ownedRules: OwnedRules },
+	{ alertChannel: AlertChannel; alertList: AlertListSeed }
+>({
+	alertChannel: [
+		async ({ browser }, use, workerInfo) => {
+			const channel = await withAdminPage(browser, (page) =>
+				createEmailChannelViaApi(
+					page,
+					`e2e-alerts-ch-w${workerInfo.workerIndex}-${Date.now()}`,
+				),
+			);
+
+			await use(channel);
+
+			await withAdminPage(browser, (page) =>
+				deleteChannelViaApi(page, channel.id),
+			);
+		},
+		{ scope: 'worker' },
+	],
+
+	alertList: [
+		async ({ browser, alertChannel }, use, workerInfo) => {
+			const stamp = `w${workerInfo.workerIndex}-${Date.now()}`;
+			const namePrefix = `e2e-alert-list-${stamp}`;
+			const teamSuffix = `-${stamp}`;
+
+			const ruleIds = await withAdminPage(browser, (page) =>
+				seedAlertRules(page, {
+					count: LIST_SEED_COUNT,
+					channelName: alertChannel.name,
+					namePrefix,
+					teamSuffix,
+				}),
+			);
+
+			await use({
+				channelName: alertChannel.name,
+				namePrefix,
+				count: LIST_SEED_COUNT,
+				paymentsLabel: `payments${teamSuffix}`,
+				ruleIds,
+			});
+
+			await deleteRules(browser, ruleIds);
+		},
+		{ scope: 'worker', timeout: 120_000 },
+	],
+
+	ownedRules: async ({ browser, alertChannel }, use) => {
+		const ids = new Set<string>();
+
+		const seed = async (
+			create: (page: Page) => Promise<string>,
+		): Promise<string> => {
+			const id = await withAdminPage(browser, create);
+			ids.add(id);
+			return id;
+		};
+
+		await use({
+			threshold: (name, overrides = {}) =>
+				seed((page) =>
+					createThresholdAlertViaApi(page, {
+						name,
+						target: 42,
+						channels: [alertChannel.name],
+						labels: { severity: 'critical' },
+						...overrides,
+					}),
+				),
+
+			logs: ({ name, schema = 'v2', marker }) =>
+				seed((page) =>
+					createLogsAlertViaApi(page, {
+						name,
+						marker: marker ?? `e2e alert never seeded ${name}`,
+						channels: [alertChannel.name],
+						schema,
+					}),
+				),
+
+			register: async (response) => {
+				const body = (await response.json()) as { data?: { id?: string } };
+				const id = body.data?.id;
+				if (id) {
+					ids.add(String(id));
+				}
+			},
+		});
+
+		// Best-effort: `deleteAlertViaApi` tolerates a rule a scenario already
+		// deleted through the UI.
+		await deleteRules(browser, [...ids]);
+	},
+});
+
+export { expect };

tests/e2e/fixtures/auth.ts

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

tests/e2e/helpers/alerts.ts

@@ -1,11 +1,34 @@
-import { expect, type Page } from '@playwright/test';
+import {
+	expect,
+	type Locator,
+	type Page,
+	type Request,
+} from '@playwright/test';
 
-import { authToken } from './common';
+import { authToken, requestUrl, seederUrl } from './common';
+import { typeExpression } from './query-builder';
 
 // ─── Constants ───────────────────────────────────────────────────────────
 
 export const ALERTS_LIST_PATH = '/alerts';
 export const ALERT_OVERVIEW_PATH = '/alerts/overview';
+export const ALERT_HISTORY_PATH = '/alerts/history';
+
+/**
+ * Mirrors `TIMELINE_TABLE_PAGE_SIZE` in
+ * `frontend/src/container/AlertHistory/constants.ts`. This 20 is what makes the
+ * page-2 cursor `base64url({"offset":20,"limit":20})`, so the two must not drift.
+ */
+export const TIMELINE_PAGE_SIZE = 20;
+
+/** The `relativeTime` the history page falls back to (`DEFAULT_TIME_RANGE`). */
+export const DEFAULT_RELATIVE_TIME = '30m';
+
+/**
+ * Page size the list specs pin in the URL, so the number of rendered rows never
+ * depends on the viewport height.
+ */
+export const ALERT_LIST_PAGE_SIZE = 10;
 
 // ─── Types ─────────────────────────────────────────────────────────────────
 
@@ -19,6 +42,11 @@ export interface ThresholdAlertSeed {
 	 * required by the API — seed one with {@link createEmailChannelViaApi}.
 	 */
 	channels: string[];
+	/**
+	 * Rule labels. `severity` drives the list's Severity column and is one of
+	 * the things its search box matches on, so list specs set it explicitly.
+	 */
+	labels?: Record<string, string>;
 }
 
 // ─── Payload ─────────────────────────────────────────────────────────────
@@ -30,6 +58,7 @@ function buildThresholdRulePayload({
 	name,
 	target,
 	channels,
+	labels,
 }: ThresholdAlertSeed): Record<string, unknown> {
 	return {
 		alert: name,
@@ -39,6 +68,7 @@ function buildThresholdRulePayload({
 		version: 'v5',
 		disabled: false,
 		source: '',
+		...(labels ? { labels } : {}),
 		annotations: {
 			description:
 				'This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})',
@@ -186,3 +216,926 @@ export async function gotoAlertOverview(
 	// eslint-disable-next-line playwright/no-wait-for-timeout -- no DOM signal for the async settle
 	await page.waitForTimeout(500);
 }
+
+/**
+ * Open the alert details shell (Overview tab) for `ruleId` and wait until it has
+ * mounted. Unlike {@link gotoAlertOverview} this does **not** wait for the
+ * condition editor or the serialised query — use it for scenarios about the
+ * shell itself (header, tabs, actions menu) rather than the rule's contents.
+ */
+export async function gotoAlertDetails(
+	page: Page,
+	ruleId: string,
+): Promise<void> {
+	await page.goto(
+		`${ALERT_OVERVIEW_PATH}?ruleId=${ruleId}&relativeTime=${DEFAULT_RELATIVE_TIME}`,
+	);
+	await expect(page.getByTestId('alert-details-root')).toBeVisible();
+}
+
+/** Rows currently rendered in the alert-rules table body. */
+export function alertRuleRows(page: Page): Locator {
+	return page.locator('tbody tr');
+}
+
+/**
+ * Open the alert-rules list and wait until it has rows. `params` is merged into
+ * the query string (`search`, `page`, `orderBy`, …); `limit` defaults to
+ * {@link ALERT_LIST_PAGE_SIZE} so row counts are viewport-independent.
+ *
+ * Pass `expectRows: false` for scenarios whose filters are *meant* to match
+ * nothing — the row wait would otherwise fail before the assertion runs.
+ */
+export async function gotoAlertList(
+	page: Page,
+	params: Record<string, string> = {},
+	{ expectRows = true }: { expectRows?: boolean } = {},
+): Promise<void> {
+	const query = new URLSearchParams({
+		limit: String(ALERT_LIST_PAGE_SIZE),
+		...params,
+	});
+	await page.goto(`${ALERTS_LIST_PATH}?${query.toString()}`);
+	await expect(page.getByTestId('list-alerts-search-input')).toBeVisible();
+	if (expectRows) {
+		await expect(alertRuleRows(page).first()).toBeVisible();
+	}
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Alert history fixtures
+//
+// There is no seeder endpoint that writes `rule_state_history_v0`, so every
+// history row here comes from the ruler actually evaluating a rule: seed
+// telemetry, create a rule whose query matches it, then poll the timeline until
+// the firing wave lands. See `tests/e2e/specs/alerts/alerts-e2e-coverage.md` §3.
+// ═══════════════════════════════════════════════════════════════════════════
+
+// ─── Types ─────────────────────────────────────────────────────────────────
+
+/** Rule schema flavour. `v1` is the legacy payload posted to `/api/v1/rules`. */
+export type AlertSchema = 'v1' | 'v2';
+
+export interface LogsAlertSeed {
+	name: string;
+	/** Substring the rule matches on (`body CONTAINS '<marker>'`). */
+	marker: string;
+	/** Channel *names* (not ids) — the API validates the reference. */
+	channels: string[];
+	schema?: AlertSchema;
+	/** Go duration, e.g. `5m0s`. Shrink it to make the rule resolve fast. */
+	evalWindow?: string;
+	frequency?: string;
+	/** Becomes the history `threshold.name` for v1 rules (`processRuleDefaults`). */
+	severity?: string;
+	/**
+	 * Extra rule labels merged alongside `severity`. They show up in the details
+	 * header's labels row (which renders `labels` minus `severity`) *and* as extra
+	 * history `filter_keys`, so add them only where a scenario needs them.
+	 */
+	extraLabels?: Record<string, string>;
+	/** `condition.alertOnAbsent` — the only route to a `nodata` row. */
+	alertOnAbsent?: boolean;
+	/** `condition.absentFor`, in minutes. */
+	absentFor?: number;
+}
+
+export interface MetricAlertSeed {
+	name: string;
+	metricName: string;
+	channels: string[];
+	/** Attribute the history rows group by. Defaults to `host`. */
+	groupByKey?: string;
+	evalWindow?: string;
+	frequency?: string;
+}
+
+export interface LogsSeedOptions {
+	marker: string;
+	/** Number of distinct `service.name` values ⇒ number of timeline rows. */
+	services: number;
+	recordsPerService?: number;
+	/** Oldest record age in seconds; records spread from here up to `minAgeSeconds`. */
+	ageSeconds?: number;
+	minAgeSeconds?: number;
+	/** Prefix for the generated `service.name` values. */
+	servicePrefix?: string;
+}
+
+export interface MetricsSeedOptions {
+	metricName: string;
+	/** Distinct attribute values ⇒ number of timeline rows. */
+	hosts: string[];
+	pointsPerHost?: number;
+	groupByKey?: string;
+}
+
+/** One row of `GET /api/v2/rules/{id}/history/timeline`. */
+export interface TimelineItem {
+	state: string;
+	unixMilli: number;
+	fingerprint: string;
+	value: number;
+	labels: {
+		key?: { name?: string };
+		value?: string | number | boolean | null;
+	}[];
+	relatedLogsLink?: string;
+	relatedTracesLink?: string;
+}
+
+export interface TimelineResponse {
+	items: TimelineItem[];
+	total: number;
+	nextCursor?: string;
+}
+
+// ─── Payload builders ────────────────────────────────────────────────────
+
+const ANNOTATIONS = {
+	description:
+		'This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})',
+	summary:
+		'This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})',
+};
+
+// The v5 `queries[]` envelope is identical for both schema versions
+// (`AlertCompositeQuery` in pkg/types/ruletypes/alerting.go) — only the
+// threshold / evaluation / channel envelopes differ. That keeps one builder
+// per signal and a thin branch over the wrapper.
+function logsCompositeQuery(marker: string): Record<string, unknown> {
+	return {
+		panelType: 'graph',
+		queryType: 'builder',
+		queries: [
+			{
+				type: 'builder_query',
+				spec: {
+					name: 'A',
+					signal: 'logs',
+					source: '',
+					disabled: false,
+					filter: { expression: `body CONTAINS '${marker}'` },
+					groupBy: [
+						{
+							name: 'service.name',
+							fieldContext: 'resource',
+							fieldDataType: 'string',
+						},
+					],
+					aggregations: [{ expression: 'count()' }],
+					having: { expression: '' },
+					legend: '',
+				},
+			},
+		],
+	};
+}
+
+function metricsCompositeQuery(
+	metricName: string,
+	groupByKey: string,
+): Record<string, unknown> {
+	return {
+		panelType: 'graph',
+		queryType: 'builder',
+		queries: [
+			{
+				type: 'builder_query',
+				spec: {
+					name: 'A',
+					signal: 'metrics',
+					source: '',
+					disabled: false,
+					filter: { expression: '' },
+					groupBy: [
+						{ name: groupByKey, fieldContext: 'attribute', fieldDataType: 'string' },
+					],
+					aggregations: [
+						{
+							metricName,
+							temporality: '',
+							timeAggregation: 'avg',
+							spaceAggregation: 'max',
+						},
+					],
+					having: { expression: '' },
+					legend: '',
+				},
+			},
+		],
+	};
+}
+
+// `target 0 / op above / matchType at_least_once` fires on the first evaluation
+// that sees any matching record, which is what keeps the ruler wait to ~20-35s.
+function v2RulePayload({
+	name,
+	alertType,
+	compositeQuery,
+	channels,
+	severity,
+	extraLabels,
+	evalWindow,
+	frequency,
+	extraCondition,
+}: {
+	name: string;
+	alertType: string;
+	compositeQuery: Record<string, unknown>;
+	channels: string[];
+	severity: string;
+	extraLabels?: Record<string, string>;
+	evalWindow: string;
+	frequency: string;
+	extraCondition?: Record<string, unknown>;
+}): Record<string, unknown> {
+	return {
+		alert: name,
+		alertType,
+		ruleType: 'threshold_rule',
+		schemaVersion: 'v2alpha1',
+		version: 'v5',
+		disabled: false,
+		source: '',
+		labels: { severity, ...extraLabels },
+		annotations: ANNOTATIONS,
+		evaluation: { kind: 'rolling', spec: { evalWindow, frequency } },
+		notificationSettings: {
+			groupBy: [],
+			renotify: { enabled: false, interval: '30m', alertStates: [] },
+			usePolicy: false,
+		},
+		condition: {
+			selectedQueryName: 'A',
+			compositeQuery,
+			thresholds: {
+				kind: 'basic',
+				spec: [
+					{
+						name: severity,
+						target: 0,
+						targetUnit: '',
+						recoveryTarget: null,
+						matchType: 'at_least_once',
+						op: 'above',
+						channels,
+					},
+				],
+			},
+			...extraCondition,
+		},
+	};
+}
+
+// Legacy schema: `evalWindow`/`frequency` sit at the top level, channels are
+// `preferredChannels`, and `condition.{op,target,matchType}` are the numeric
+// enum forms the v1 validator requires. `labels.severity` becomes the history
+// `threshold.name`.
+function v1RulePayload({
+	name,
+	alertType,
+	compositeQuery,
+	channels,
+	severity,
+	extraLabels,
+	evalWindow,
+	frequency,
+	extraCondition,
+}: {
+	name: string;
+	alertType: string;
+	compositeQuery: Record<string, unknown>;
+	channels: string[];
+	severity: string;
+	extraLabels?: Record<string, string>;
+	evalWindow: string;
+	frequency: string;
+	extraCondition?: Record<string, unknown>;
+}): Record<string, unknown> {
+	return {
+		alert: name,
+		alertType,
+		ruleType: 'threshold_rule',
+		disabled: false,
+		source: '',
+		evalWindow,
+		frequency,
+		preferredChannels: channels,
+		labels: { severity, ...extraLabels },
+		annotations: ANNOTATIONS,
+		condition: {
+			selectedQueryName: 'A',
+			op: '1',
+			target: 0,
+			matchType: '1',
+			compositeQuery,
+			...extraCondition,
+		},
+	};
+}
+
+// ─── Seeding telemetry ───────────────────────────────────────────────────
+
+async function postToSeeder(
+	page: Page,
+	path: string,
+	data: unknown,
+): Promise<void> {
+	const url = `${seederUrl()}${path}`;
+	// The seeder shares one ClickHouse client, so concurrent POSTs from parallel
+	// workers collide with a transient 500 "concurrent queries within the same
+	// session". Retry those; anything else is real.
+	const maxAttempts = 6;
+	let lastStatus = 0;
+	let lastText = '';
+	for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+		// eslint-disable-next-line no-await-in-loop
+		const res = await page.request.post(url, {
+			data,
+			headers: { 'Content-Type': 'application/json' },
+		});
+		if (res.ok()) {
+			return;
+		}
+		lastStatus = res.status();
+		// eslint-disable-next-line no-await-in-loop
+		lastText = await res.text();
+		if (!(lastStatus === 500 && lastText.includes('concurrent'))) {
+			break;
+		}
+		// eslint-disable-next-line no-await-in-loop
+		await new Promise((resolve) => {
+			setTimeout(resolve, 150 * (attempt + 1) + Math.floor(Math.random() * 100));
+		});
+	}
+	throw new Error(`seeder POST ${path} ${lastStatus}: ${lastText}`);
+}
+
+/**
+ * Seed log records the history rules match on. Returns the generated
+ * `service.name` values, which become the timeline rows' `groupBy` labels
+ * (N distinct services ⇒ N distinct fingerprints ⇒ N timeline rows).
+ *
+ * Seed these **immediately** before creating the rule: the rule only fires
+ * while the records are still inside its eval window, and a stale marker
+ * silently never fires.
+ */
+export async function seedAlertHistoryLogs(
+	page: Page,
+	{
+		marker,
+		services,
+		recordsPerService = 2,
+		ageSeconds = 150,
+		minAgeSeconds = 30,
+		servicePrefix = 'e2e-ah-svc',
+	}: LogsSeedOptions,
+): Promise<string[]> {
+	const now = Date.now();
+	const span = Math.max(ageSeconds - minAgeSeconds, 1);
+	const serviceNames: string[] = [];
+	const records: Record<string, unknown>[] = [];
+
+	for (let i = 0; i < services; i += 1) {
+		const service = `${servicePrefix}-${i}`;
+		serviceNames.push(service);
+		for (let r = 0; r < recordsPerService; r += 1) {
+			const fraction =
+				(i * recordsPerService + r) / (services * recordsPerService);
+			const offset = ageSeconds - Math.floor(fraction * span);
+			records.push({
+				timestamp: new Date(now - offset * 1000).toISOString(),
+				body: marker,
+				resources: { 'service.name': service },
+			});
+		}
+	}
+
+	await postToSeeder(page, '/telemetry/logs', records);
+	return serviceNames;
+}
+
+/**
+ * Seed a throwaway gauge the metrics rule alerts on. Cheaper than the logs
+ * fixture (~10s to fire) and its history rows carry neither `relatedLogsLink`
+ * nor `relatedTracesLink` — the "no links available" case.
+ */
+export async function seedAlertHistoryMetrics(
+	page: Page,
+	{
+		metricName,
+		hosts,
+		pointsPerHost = 3,
+		groupByKey = 'host',
+	}: MetricsSeedOptions,
+): Promise<void> {
+	const now = Date.now();
+	const points: Record<string, unknown>[] = [];
+	for (const host of hosts) {
+		for (let p = 0; p < pointsPerHost; p += 1) {
+			points.push({
+				metric_name: metricName,
+				labels: { [groupByKey]: host },
+				timestamp: new Date(now - (pointsPerHost - p) * 20 * 1000).toISOString(),
+				value: 10 + p,
+				type_: 'Gauge',
+				temporality: 'Unspecified',
+				is_monotonic: false,
+			});
+		}
+	}
+	await postToSeeder(page, '/telemetry/metrics', points);
+}
+
+// ─── Rule creation ───────────────────────────────────────────────────────
+
+async function postRule(
+	page: Page,
+	schema: AlertSchema,
+	payload: Record<string, unknown>,
+): Promise<string> {
+	const token = await authToken(page);
+	const path = schema === 'v1' ? '/api/v1/rules' : '/api/v2/rules';
+	const res = await page.request.post(path, {
+		data: payload,
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(`POST ${path} ${res.status()}: ${await res.text()}`);
+	}
+	const json = (await res.json()) as { data: { id: string } };
+	return String(json.data.id);
+}
+
+/**
+ * Create a logs threshold rule grouped by `service.name`. `schema: 'v1'` posts
+ * the legacy payload to `/api/v1/rules`, which the UI then renders through the
+ * v1 branch of `AlertHeader` / `ActionButtons` — both schemas serve the *same*
+ * history APIs, so history scenarios can be parameterised over them.
+ */
+export async function createLogsAlertViaApi(
+	page: Page,
+	{
+		name,
+		marker,
+		channels,
+		schema = 'v2',
+		evalWindow = '5m0s',
+		frequency = '15s',
+		severity = schema === 'v1' ? 'warning' : 'critical',
+		extraLabels,
+		alertOnAbsent,
+		absentFor,
+	}: LogsAlertSeed,
+): Promise<string> {
+	const extraCondition =
+		alertOnAbsent === undefined
+			? undefined
+			: { alertOnAbsent, absentFor: absentFor ?? 1 };
+	const args = {
+		name,
+		alertType: 'LOGS_BASED_ALERT',
+		compositeQuery: logsCompositeQuery(marker),
+		channels,
+		severity,
+		extraLabels,
+		evalWindow,
+		frequency,
+		extraCondition,
+	};
+	return postRule(
+		page,
+		schema,
+		schema === 'v1' ? v1RulePayload(args) : v2RulePayload(args),
+	);
+}
+
+/** SEED-E's rule: metrics-based, so its history rows carry no related links. */
+export async function createMetricAlertViaApi(
+	page: Page,
+	{
+		name,
+		metricName,
+		channels,
+		groupByKey = 'host',
+		evalWindow = '5m0s',
+		frequency = '15s',
+	}: MetricAlertSeed,
+): Promise<string> {
+	return postRule(
+		page,
+		'v2',
+		v2RulePayload({
+			name,
+			alertType: 'METRIC_BASED_ALERT',
+			compositeQuery: metricsCompositeQuery(metricName, groupByKey),
+			channels,
+			severity: 'critical',
+			evalWindow,
+			frequency,
+		}),
+	);
+}
+
+/**
+ * SEED-G's rule: a logs rule whose filter matches nothing, with
+ * `alertOnAbsent` set — the only cheap way to get a `nodata` history row.
+ * Seed no telemetry for its marker.
+ */
+export async function createNoDataAlertViaApi(
+	page: Page,
+	{
+		name,
+		marker,
+		channels,
+	}: { name: string; marker: string; channels: string[] },
+): Promise<string> {
+	return createLogsAlertViaApi(page, {
+		name,
+		marker,
+		channels,
+		evalWindow: '5m0s',
+		frequency: '15s',
+		alertOnAbsent: true,
+		absentFor: 1,
+	});
+}
+
+/**
+ * Freeze a rule's history. Rows are written on *state change* only, so the
+ * firing wave lands once — but once the eval window rolls past the seeded
+ * records the rule resolves and writes a second row per fingerprint, doubling
+ * `total` mid-suite. Disable the rule as soon as the firing wave is confirmed.
+ */
+export async function setRuleDisabledViaApi(
+	page: Page,
+	id: string,
+	disabled: boolean,
+): Promise<void> {
+	const token = await authToken(page);
+	const res = await page.request.patch(`/api/v2/rules/${id}`, {
+		data: { disabled },
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`PATCH /api/v2/rules/${id} ${res.status()}: ${await res.text()}`,
+		);
+	}
+}
+
+/** Severities SEED-B cycles through, so list search/sort has more than one value. */
+export const SEED_B_SEVERITIES = ['critical', 'warning', 'info'] as const;
+
+export interface AlertRulesSeedOptions {
+	count: number;
+	channelName: string;
+	/** Rules are named `<namePrefix>-NN`. Keep it unique per batch. */
+	namePrefix?: string;
+	/**
+	 * Appended to both `team` label values. Every list spec seeds its own batch
+	 * and they run in parallel, so a bare `team: payments` would also match the
+	 * neighbouring batches — which is exactly what the label-search scenario
+	 * counts. Leave it empty only when nothing asserts an exact label count.
+	 */
+	teamSuffix?: string;
+}
+
+/**
+ * SEED-B: `count` metric threshold rules sharing one channel. Severities cycle
+ * through {@link SEED_B_SEVERITIES} and every rule carries a `team` label, so
+ * the list's "Alert Name, Severity and Labels" search has hits *and* misses for
+ * all three. Even-indexed rules are `platform`, odd ones `payments` — i.e. half
+ * the batch each. Returns the ids in creation order.
+ */
+export async function seedAlertRules(
+	page: Page,
+	{
+		count,
+		channelName,
+		namePrefix = 'e2e-alert-list',
+		teamSuffix = '',
+	}: AlertRulesSeedOptions,
+): Promise<string[]> {
+	const ids: string[] = [];
+	for (let i = 0; i < count; i += 1) {
+		// Sequential on purpose: the rules API is not the thing under test and
+		// parallel POSTs make failures harder to attribute.
+		// eslint-disable-next-line no-await-in-loop
+		const id = await createThresholdAlertViaApi(page, {
+			name: `${namePrefix}-${String(i).padStart(2, '0')}`,
+			target: 100 + i,
+			channels: [channelName],
+			labels: {
+				severity: SEED_B_SEVERITIES[i % SEED_B_SEVERITIES.length],
+				team: `${i % 2 === 0 ? 'platform' : 'payments'}${teamSuffix}`,
+			},
+		});
+		ids.push(id);
+	}
+	return ids;
+}
+
+// ─── History API probes ──────────────────────────────────────────────────
+
+/**
+ * Read the timeline straight from the API. Used to gate on the ruler having
+ * produced rows *before* a spec opens the UI — polling through the browser
+ * would conflate "no rows yet" with "the table failed to render".
+ */
+export async function fetchTimeline(
+	page: Page,
+	ruleId: string,
+	params: Record<string, string | number> = {},
+): Promise<TimelineResponse> {
+	const token = await authToken(page);
+	const now = Date.now();
+	const query = new URLSearchParams({
+		start: String(now - 30 * 60 * 1000),
+		end: String(now),
+		limit: '100',
+		order: 'asc',
+		...Object.fromEntries(Object.entries(params).map(([k, v]) => [k, String(v)])),
+	});
+	const res = await page.request.get(
+		`/api/v2/rules/${ruleId}/history/timeline?${query.toString()}`,
+		{ headers: { Authorization: `Bearer ${token}` } },
+	);
+	if (!res.ok()) {
+		throw new Error(
+			`GET /api/v2/rules/${ruleId}/history/timeline ${res.status()}: ${await res.text()}`,
+		);
+	}
+	const json = (await res.json()) as { data: TimelineResponse | null };
+	return {
+		items: json.data?.items ?? [],
+		total: json.data?.total ?? 0,
+		nextCursor: json.data?.nextCursor,
+	};
+}
+
+function countStates(items: TimelineItem[]): Record<string, number> {
+	return items.reduce<Record<string, number>>((acc, item) => {
+		acc[item.state] = (acc[item.state] ?? 0) + 1;
+		return acc;
+	}, {});
+}
+
+/**
+ * Poll until at least `min` rows in state `state` exist. Takes ~20-35s for the
+ * logs fixture (the rule fires on the first evaluation that sees the data) and
+ * ~10s for the metrics one, so budget generously — a timeout here means the
+ * marker aged out of the eval window, not that the assertion is wrong.
+ */
+export async function waitForTimelineEntries(
+	page: Page,
+	ruleId: string,
+	{
+		min,
+		state = 'firing',
+		timeoutMs = 90_000,
+	}: { min: number; state?: string; timeoutMs?: number },
+): Promise<TimelineResponse> {
+	const deadline = Date.now() + timeoutMs;
+	let last: TimelineResponse = { items: [], total: 0 };
+	while (Date.now() < deadline) {
+		// eslint-disable-next-line no-await-in-loop
+		last = await fetchTimeline(page, ruleId);
+		if (last.items.filter((item) => item.state === state).length >= min) {
+			return last;
+		}
+		// eslint-disable-next-line no-await-in-loop
+		await new Promise((resolve) => {
+			setTimeout(resolve, 2_000);
+		});
+	}
+	throw new Error(
+		`timeline for rule ${ruleId} never reached ${min} '${state}' rows within ${timeoutMs}ms ` +
+			`(last: total=${last.total}, states=${JSON.stringify(countStates(last.items))})`,
+	);
+}
+
+/**
+ * Poll until every requested state has at least the requested row count.
+ * SEED-F's firing→resolved wave and SEED-G's `nodata` row both gate on this.
+ */
+export async function waitForTimelineStates(
+	page: Page,
+	ruleId: string,
+	{
+		states,
+		timeoutMs = 180_000,
+	}: { states: Record<string, number>; timeoutMs?: number },
+): Promise<TimelineResponse> {
+	const deadline = Date.now() + timeoutMs;
+	let last: TimelineResponse = { items: [], total: 0 };
+	while (Date.now() < deadline) {
+		// eslint-disable-next-line no-await-in-loop
+		last = await fetchTimeline(page, ruleId);
+		const seen = countStates(last.items);
+		if (
+			Object.entries(states).every(([state, min]) => (seen[state] ?? 0) >= min)
+		) {
+			return last;
+		}
+		// eslint-disable-next-line no-await-in-loop
+		await new Promise((resolve) => {
+			setTimeout(resolve, 3_000);
+		});
+	}
+	throw new Error(
+		`timeline for rule ${ruleId} never reached ${JSON.stringify(states)} within ${timeoutMs}ms ` +
+			`(last states: ${JSON.stringify(countStates(last.items))})`,
+	);
+}
+
+/** The filtered row count the timeline reports. Ignores `limit`. */
+export async function readTimelineTotal(
+	page: Page,
+	ruleId: string,
+): Promise<number> {
+	return (await fetchTimeline(page, ruleId, { limit: 1 })).total;
+}
+
+/**
+ * Mirror of `encodeCursor` in
+ * `container/AlertHistory/Timeline/Table/useTimelineTableCursor.ts`, so specs
+ * can assert the *exact* cursor the UI sends. Verified byte-identical to the
+ * server's `nextCursor`.
+ */
+export function encodeTimelineCursor(
+	page_: number,
+	limit = TIMELINE_PAGE_SIZE,
+): string | undefined {
+	if (page_ <= 1) {
+		return undefined;
+	}
+	const offset = (page_ - 1) * limit;
+	return Buffer.from(JSON.stringify({ offset, limit }))
+		.toString('base64')
+		.replace(/\+/g, '-')
+		.replace(/\//g, '_')
+		.replace(/=+$/, '');
+}
+
+/** Labels on a timeline row, flattened to a plain object. */
+export function timelineLabelsToObject(
+	item: TimelineItem,
+): Record<string, string> {
+	return (item.labels ?? []).reduce<Record<string, string>>((acc, label) => {
+		const name = label.key?.name;
+		if (name) {
+			acc[name] = String(label.value ?? '');
+		}
+		return acc;
+	}, {});
+}
+
+// ─── Navigation ────────────────────────────────────────────────────────────
+
+/**
+ * Open the history tab for `ruleId` and wait until the timeline table has
+ * mounted. `params` is merged into the query string, so scenarios can deep-link
+ * `page`, `order`, `timelineFilter`, … in one call.
+ */
+export async function gotoAlertHistory(
+	page: Page,
+	ruleId: string,
+	params: Record<string, string> = {},
+): Promise<void> {
+	// An absolute window and `relativeTime` are mutually exclusive in practice:
+	// with both present the time picker normalises back to the relative range and
+	// **drops** `startTime`/`endTime` from the URL, so the absolute window never
+	// takes effect. Only send the default relative range when no absolute one was
+	// asked for.
+	const hasAbsoluteRange = !!params.startTime && !!params.endTime;
+	const query = new URLSearchParams({
+		ruleId,
+		...(hasAbsoluteRange ? {} : { relativeTime: DEFAULT_RELATIVE_TIME }),
+		...params,
+	});
+	await page.goto(`${ALERT_HISTORY_PATH}?${query.toString()}`);
+
+	// Race the table against the app's error boundary. The history page has been
+	// observed crashing into it intermittently on load; without this the failure
+	// reads as a 15s "timeline-table not found", which says nothing about why.
+	const table = page.getByTestId('timeline-table');
+	const crashed = page.getByText('Something went wrong :/');
+	await expect(table.or(crashed)).toBeVisible();
+	if (await crashed.isVisible()) {
+		throw new Error(
+			`alert history crashed into the app error boundary at ${page.url()} — ` +
+				'a component threw during render; check the captured console output',
+		);
+	}
+	await expect(table).toBeVisible();
+}
+
+// ─── Locators ──────────────────────────────────────────────────────────────
+
+/**
+ * Assert the table is back on page 1. Both the list and the timeline use nuqs
+ * with `parseAsInteger.withDefault(1)`, which **removes** the `page` param when
+ * it is reset rather than writing `page=1` — so "absent" and "1" are the same
+ * state and a naive `?page=1` regex never matches.
+ */
+export async function expectFirstPage(page: Page): Promise<void> {
+	await expect
+		.poll(() => new URL(page.url()).searchParams.get('page') ?? '1')
+		.toBe('1');
+}
+
+export function timelineRows(page: Page): Locator {
+	return page.getByTestId('timeline-row');
+}
+
+export function timelineFooterRange(page: Page): Locator {
+	return page.getByTestId('timeline-footer-range');
+}
+
+export function statsCard(page: Page, title: string): Locator {
+	return page.locator(`[data-testid="stats-card"][data-stats-title="${title}"]`);
+}
+
+/** Open the ACTIONS popover on timeline row `index` (0-based). */
+export async function openTimelineRowActions(
+	page: Page,
+	index: number,
+): Promise<void> {
+	await timelineRows(page)
+		.nth(index)
+		.getByTestId('timeline-row-actions')
+		.click();
+}
+
+// ─── History request matchers ──────────────────────────────────────────────
+
+/** The four v2 endpoints one history page load hits. */
+export const HISTORY_ENDPOINTS = [
+	'stats',
+	'timeline',
+	'top_contributors',
+	'overall_status',
+] as const;
+
+export type HistoryEndpoint = (typeof HISTORY_ENDPOINTS)[number];
+
+/** Match a request against one history endpoint, whatever the rule id. */
+export function isHistoryRequest(
+	request: Request,
+	endpoint: HistoryEndpoint,
+): boolean {
+	return new RegExp(`/api/v2/rules/[^/]+/history/${endpoint}`).test(
+		request.url(),
+	);
+}
+
+// ─── History interactions ──────────────────────────────────────────────────
+
+/** Apply a filter expression through the real editor + Run button. */
+export async function runFilterExpression(
+	page: Page,
+	expression: string,
+): Promise<void> {
+	await typeExpression(page, expression);
+	await page.getByRole('button', { name: /run query/i }).click();
+}
+
+/**
+ * Sort the timeline descending through the STATE header.
+ *
+ * The antd table is *uncontrolled* — it has `sorter: true` but no `sortOrder`,
+ * so its internal cycle is none → ascend → descend regardless of the `order`
+ * the hook already sends. Reaching `desc` therefore takes two clicks, and the
+ * first one only resets the page (asc is nuqs's default, so it writes no param).
+ */
+export async function sortTimelineDescending(page: Page): Promise<void> {
+	const header = page.getByRole('columnheader', { name: 'STATE' });
+	const descRequest = page.waitForRequest(
+		(req) =>
+			isHistoryRequest(req, 'timeline') &&
+			requestUrl(req).searchParams.get('order') === 'desc',
+	);
+	await header.click();
+	await header.click();
+	await descRequest;
+}
+
+/**
+ * Snapshot the LABELS cell of every rendered row. Scenarios that compare two
+ * snapshots taken at different times (page 1 vs page 2, one timezone vs
+ * another) cannot express that as a web-first assertion, so the read lives in a
+ * helper rather than inline in the test.
+ */
+export async function timelineRowLabels(page: Page): Promise<string[]> {
+	return timelineRows(page).getByTestId('timeline-row-labels').allInnerTexts();
+}
+
+/** Snapshot the first row's CREATED AT cell. See {@link timelineRowLabels}. */
+export async function firstTimelineRowCreatedAt(page: Page): Promise<string> {
+	return timelineRows(page)
+		.first()
+		.getByTestId('timeline-row-created-at')
+		.innerText();
+}

tests/e2e/helpers/auth.ts

@@ -1,34 +1,123 @@
-import type { Browser, BrowserContext } from '@playwright/test';
+import type { Browser, BrowserContext, Page } from '@playwright/test';
+
+export type User = { email: string; password: string };
+
+/** Default user — admin from the pytest bootstrap (.env.local) or staging .env. */
+export const ADMIN: User = {
+	email: process.env.SIGNOZ_E2E_USERNAME!,
+	password: process.env.SIGNOZ_E2E_PASSWORD!,
+};
 
 /**
- * Build a fresh authenticated `BrowserContext` via UI login. Used by suite
- * hooks (`test.beforeAll` / `test.afterAll`), where the test-scoped
- * `authedPage` fixture from `fixtures/auth.ts` is not reachable.
+ * `browser.newContext()` only inherits `use.baseURL` while a *test* is in
+ * scope. Worker-scoped fixtures (and their teardown) run outside that, where a
+ * relative `page.goto('/login')` fails with "Cannot navigate to invalid URL" —
+ * so pass it explicitly whenever we know it. Left empty when the var is unset
+ * so the config's staging default still applies inside a test.
+ */
+const contextDefaults: { baseURL?: string } = process.env.SIGNOZ_E2E_BASE_URL
+	? { baseURL: process.env.SIGNOZ_E2E_BASE_URL }
+	: {};
+
+// Per-worker storageState cache. One UI login per unique user per worker
+// process, shared by everything in that worker: the `authedPage` fixture, the
+// worker-scoped seed fixtures, and their teardown. Promise-valued so concurrent
+// callers await the same in-flight login rather than racing several of their
+// own. Held in memory only — no .auth/ dir, no JSON on disk.
+//
+// This cache is why `newAdminContext` is cheap. It used to log in through the
+// UI on every call, and the alerts fixtures call it a dozen-plus times per
+// worker (channel, rule list, five history seeds, one per owned rule, plus a
+// teardown for each) — a couple of seconds each, paid over and over for a
+// session that never changes.
+type StorageState = Awaited<ReturnType<BrowserContext['storageState']>>;
+const storageByUser = new Map<string, Promise<StorageState>>();
+
+async function login(page: Page, user: User): Promise<void> {
+	if (!user.email || !user.password) {
+		throw new Error(
+			'User credentials missing. Set SIGNOZ_E2E_USERNAME / SIGNOZ_E2E_PASSWORD ' +
+				'(pytest bootstrap writes them to .env.local), or pass a User via test.use({ user: ... }).',
+		);
+	}
+	await page.goto('/login?password=Y');
+	await page.getByTestId('email').fill(user.email);
+	await page.getByTestId('initiate_login').click();
+	await page.getByTestId('password').fill(user.password);
+	await page.getByRole('button', { name: 'Sign in with Password' }).click();
+	// Post-login lands somewhere different depending on whether the org is
+	// licensed (onboarding flow on ENTERPRISE) or not (legacy "Hello there"
+	// welcome). Wait for URL to move off /login — whichever page follows
+	// is fine, each spec navigates to the feature under test anyway.
+	await page.waitForURL((url) => !url.pathname.startsWith('/login'));
+}
+
+// Pin the nav suite-wide: unpinned it flies out on hover and overlays content.
+// Server-side pref, so set once per user at login.
+async function pinSidenav(page: Page): Promise<void> {
+	const token = await page.evaluate(
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		() => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
+	);
+	const res = await page.request.put('/api/v1/user/preferences/sidenav_pinned', {
+		data: { value: true },
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		const text = await res.text();
+		// Two workers logging in at the same moment both insert the preference and
+		// the loser gets a 500 on `uq_user_preference_name_user_id`. The write it
+		// lost to set the same value, so the preference *is* pinned — treat the
+		// duplicate as success rather than failing an unrelated test.
+		if (text.includes('uq_user_preference_name_user_id')) {
+			return;
+		}
+		throw new Error(
+			`PUT /api/v1/user/preferences/sidenav_pinned ${res.status()}: ${text}`,
+		);
+	}
+}
+
+/**
+ * Authenticated storage state for `user`, logging in once per worker. Callers
+ * hand the result to `browser.newContext({ storageState })`.
+ */
+export function storageStateFor(
+	browser: Browser,
+	user: User = ADMIN,
+): Promise<StorageState> {
+	const cached = storageByUser.get(user.email);
+	if (cached) {
+		return cached;
+	}
+
+	const task = (async () => {
+		const ctx = await browser.newContext(contextDefaults);
+		const page = await ctx.newPage();
+		await login(page, user);
+		await pinSidenav(page);
+		const state = await ctx.storageState();
+		await ctx.close();
+		return state;
+	})();
+
+	storageByUser.set(user.email, task);
+	return task;
+}
+
+/**
+ * Build an authenticated admin `BrowserContext`. Used by suite hooks
+ * (`test.beforeAll` / `test.afterAll`) and worker-scoped fixtures, where the
+ * test-scoped `authedPage` fixture from `fixtures/auth.ts` is not reachable.
  *
- * Each call performs one fresh login (~1s). The per-worker storageState
- * cache in `fixtures/auth.ts` is intentionally not shared here — keeping
- * this helper standalone avoids coupling suite hooks to the fixture's
- * private cache.
+ * Reuses this worker's cached session, so only the first call in a worker pays
+ * for a login. The caller owns the context and must close it.
  */
 export async function newAdminContext(
 	browser: Browser,
 ): Promise<BrowserContext> {
-	const email = process.env.SIGNOZ_E2E_USERNAME;
-	const password = process.env.SIGNOZ_E2E_PASSWORD;
-	if (!email || !password) {
-		throw new Error(
-			'SIGNOZ_E2E_USERNAME / SIGNOZ_E2E_PASSWORD must be set ' +
-				'(pytest bootstrap writes them to .env.local).',
-		);
-	}
-	const ctx = await browser.newContext();
-	const page = await ctx.newPage();
-	await page.goto('/login?password=Y');
-	await page.getByTestId('email').fill(email);
-	await page.getByTestId('initiate_login').click();
-	await page.getByTestId('password').fill(password);
-	await page.getByRole('button', { name: 'Sign in with Password' }).click();
-	await page.waitForURL((url) => !url.pathname.startsWith('/login'));
-	await page.close();
-	return ctx;
+	return browser.newContext({
+		...contextDefaults,
+		storageState: await storageStateFor(browser, ADMIN),
+	});
 }

tests/e2e/helpers/common.ts

@@ -1,4 +1,4 @@
-import type { Page } from '@playwright/test';
+import type { Page, Request } from '@playwright/test';
 
 // Shared helpers used across feature-specific helper modules (dashboards,
 // trace-details, …). Keep this to genuinely cross-feature utilities.
@@ -18,6 +18,108 @@ export function seederUrl(): string {
 	return url;
 }
 
+// ─── Console / network noise ──────────────────────────────────────────────
+
+// Requests the bootstrap stack always fails, on every page, for reasons that
+// have nothing to do with the feature under test. Keep this list tiny and give
+// every entry a reason — it is a deny-list of *environment* noise, never of real
+// application errors.
+const HARNESS_FAILING_REQUESTS = [
+	// Zeus is a WireMock stub with no /api/v2/zeus/hosts mapping, so the app
+	// shell's workspace-URL lookup 404s on every page load. It reaches the console
+	// three ways: the resource-load error, the AxiosError, and the literal `any`
+	// that `api/ErrorResponseHandler.ts`'s fallback branch logs.
+	'/api/v2/zeus/hosts',
+	// The app shell polls GitHub for the latest release. Unauthenticated calls
+	// from CI/dev machines get rate-limited (403), which has nothing to do with
+	// the page under test.
+	'api.github.com',
+];
+
+// The console side of {@link HARNESS_FAILING_REQUESTS}. Browsers log a
+// resource-load error without the URL, so these have to be matched on text —
+// which is why the URL list above is the precise half of the check.
+const HARNESS_CONSOLE_NOISE = [
+	'Failed to load resource: the server responded with a status of 404 (Not Found)',
+	'Failed to load resource: the server responded with a status of 403',
+	'Request failed with status code 404',
+	'client never received a response, or request never left',
+	'any',
+];
+
+export interface ConsoleWatch {
+	/** Console `error` entries and uncaught page errors, harness noise removed. */
+	errors: string[];
+	/** `"<status> <method> <url>"` for every 4xx/5xx, harness noise removed. */
+	failedResponses: string[];
+}
+
+/**
+ * Watch a page for console errors and failed requests. Call **before** the first
+ * navigation; the returned object fills in as the page runs, so assert on it at
+ * the end of the scenario.
+ *
+ * Console text alone is a weak signal (the harness's Zeus 404 produces three
+ * generic-looking entries), so the failed-response list is the precise half:
+ * text matching is deliberately loose while the URL check stays strict.
+ */
+export function watchConsole(
+	page: Page,
+	/**
+	 * Extra substrings to ignore. Use this — with a comment naming the defect —
+	 * for a *known application* bug that is out of the spec's scope, so the rest
+	 * of the console assertion keeps its value instead of being deleted.
+	 */
+	options: { ignore?: string[] } = {},
+): ConsoleWatch {
+	const watch: ConsoleWatch = { errors: [], failedResponses: [] };
+	const noise = [...HARNESS_CONSOLE_NOISE, ...(options.ignore ?? [])];
+	const isNoise = (text: string): boolean =>
+		noise.some((entry) => text.includes(entry));
+
+	page.on('console', (msg) => {
+		if (msg.type() === 'error' && !isNoise(msg.text())) {
+			watch.errors.push(msg.text());
+		}
+	});
+	page.on('pageerror', (err) => {
+		if (!isNoise(String(err))) {
+			watch.errors.push(String(err));
+		}
+	});
+	page.on('response', (res) => {
+		if (res.status() < 400) {
+			return;
+		}
+		const url = res.url();
+		if (HARNESS_FAILING_REQUESTS.some((entry) => url.includes(entry))) {
+			return;
+		}
+		watch.failedResponses.push(
+			`${res.status()} ${res.request().method()} ${url}`,
+		);
+	});
+	return watch;
+}
+
+// ─── Network capture ──────────────────────────────────────────────────────
+
+/**
+ * Every request the page issues from now on. Call **before** the first
+ * navigation — the returned array fills in as the page runs, so filter it at the
+ * end of the scenario ("endpoint called exactly once", "no legacy route used").
+ */
+export function collectRequests(page: Page): Request[] {
+	const requests: Request[] = [];
+	page.on('request', (request) => requests.push(request));
+	return requests;
+}
+
+/** A request's URL, parsed — the readable way to reach `searchParams`. */
+export function requestUrl(request: Request): URL {
+	return new URL(request.url());
+}
+
 // ─── Auth ────────────────────────────────────────────────────────────────
 
 // Read the app JWT from the context's stored auth state. No navigation needed:

tests/e2e/package.json

@@ -5,7 +5,12 @@
   "main": "index.js",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
+    "env:start": "cd .. && uv run pytest --basetemp=./tmp/ -vv --reuse --with-web e2e/bootstrap/setup.py::test_setup",
+    "env:stop": "cd .. && uv run pytest --basetemp=./tmp/ -vv --teardown e2e/bootstrap/setup.py::test_teardown",
+    "env:clean": "rm -rf ../tmp ../.pytest_cache .env.local artifacts && echo 'Cleaned. Run docker container prune if needed.'",
     "test": "playwright test",
+    "test:local": "pnpm env:start && pnpm test",
+    "test:all": "playwright test",
     "test:staging": "SIGNOZ_E2E_BASE_URL=https://app.us.staging.signoz.cloud playwright test",
     "test:ui": "playwright test --ui",
     "test:headed": "playwright test --headed",

tests/e2e/playwright.config.ts

@@ -1,15 +1,36 @@
 import { defineConfig, devices } from '@playwright/test';
 import dotenv from 'dotenv';
+import fs from 'fs';
 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.
-dotenv.config({ path: path.resolve(__dirname, '.env') });
-dotenv.config({ path: path.resolve(__dirname, '.env.local'), override: true });
+// Precedence, lowest to highest:
+//   .env        — user-provided defaults (staging creds)
+//   .env.local  — written by tests/e2e/bootstrap/setup.py when the pytest
+//                 lifecycle brings the backend up locally, so it must win over
+//                 any stale .env value
+//   the real environment — anything the caller exported on purpose, e.g.
+//                 `SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test` to run
+//                 against a locally served frontend, or the vars pytest injects
+//                 when it shells out to `pnpm test`.
+//
+// This is deliberately *not* `dotenv.config({ override: true })`: that flag
+// makes the file beat process.env, so an exported SIGNOZ_E2E_BASE_URL was
+// silently discarded and every run went to whatever .env.local pointed at.
+// Parsing by hand is the only way to get ".env.local beats .env" without also
+// getting ".env.local beats the caller".
+const exported = new Set(Object.keys(process.env));
+for (const file of ['.env', '.env.local']) {
+	const filePath = path.resolve(__dirname, file);
+	if (!fs.existsSync(filePath)) {
+		continue;
+	}
+	const parsed = dotenv.parse(fs.readFileSync(filePath));
+	for (const [key, value] of Object.entries(parsed)) {
+		if (!exported.has(key)) {
+			process.env[key] = value;
+		}
+	}
+}
 
 export default defineConfig({
 	testDir: './tests',

tests/e2e/tests/alerts/alerts.spec.ts

@@ -1,67 +0,0 @@
-import { expect, test } from '../../fixtures/auth';
-import {
-	createEmailChannelViaApi,
-	createThresholdAlertViaApi,
-	deleteAlertViaApi,
-	deleteChannelViaApi,
-	gotoAlertOverview,
-} from '../../helpers/alerts';
-import { newAdminContext } from '../../helpers/auth';
-
-test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
-	await page.goto('/alerts');
-	await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
-	await expect(page.getByRole('tab', { name: /configuration/i })).toBeVisible();
-});
-
-test.describe('alerts — threshold persists on edit-page load', () => {
-	const TARGET = 245;
-	let ruleId: string;
-	let channelId: string;
-
-	test.beforeAll(async ({ browser }) => {
-		const ctx = await newAdminContext(browser);
-		const page = await ctx.newPage();
-		try {
-			const stamp = Date.now();
-			const channel = await createEmailChannelViaApi(
-				page,
-				`e2e-threshold-persistence-ch-${stamp}`,
-			);
-			channelId = channel.id;
-			ruleId = await createThresholdAlertViaApi(page, {
-				name: `e2e-threshold-persistence-${stamp}`,
-				target: TARGET,
-				channels: [channel.name],
-			});
-		} finally {
-			await ctx.close();
-		}
-	});
-
-	test.afterAll(async ({ browser }) => {
-		const ctx = await newAdminContext(browser);
-		const page = await ctx.newPage();
-		try {
-			if (ruleId) {
-				await deleteAlertViaApi(page, ruleId);
-			}
-			if (channelId) {
-				await deleteChannelViaApi(page, channelId);
-			}
-		} finally {
-			await ctx.close();
-		}
-	});
-
-	test('TC-02 edit page shows the saved threshold value', async ({
-		authedPage: page,
-	}) => {
-		await gotoAlertOverview(page, ruleId);
-
-		// The condition editor should show the persisted target once loaded.
-		await expect(page.getByTestId('threshold-value-input')).toHaveValue(
-			String(TARGET),
-		);
-	});
-});

tests/e2e/tests/alerts/details/actions.spec.ts

@@ -0,0 +1,96 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	ALERT_OVERVIEW_PATH,
+	ALERTS_LIST_PATH,
+	gotoAlertDetails,
+} from '../../../helpers/alerts';
+
+test.describe('Alert details — actions', () => {
+	test('AD-06 enable/disable toggle changes the rule state', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const ruleId = await ownedRules.logs({
+			name: `e2e-ad-toggle-${Date.now()}`,
+			schema: 'v2',
+		});
+
+		await gotoAlertDetails(page, ruleId);
+
+		const toggle = page.getByTestId('alert-actions-toggle');
+		await expect(toggle).toBeVisible();
+
+		await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					res.url().includes(`/api/v2/rules/${ruleId}`) &&
+					res.request().method() === 'PATCH',
+			),
+			toggle.click(),
+		]);
+
+		await expect(page.getByText('Alert has been disabled.')).toBeVisible();
+
+		await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					res.url().includes(`/api/v2/rules/${ruleId}`) &&
+					res.request().method() === 'PATCH',
+			),
+			toggle.click(),
+		]);
+
+		await expect(page.getByText('Alert has been enabled.')).toBeVisible();
+	});
+
+	test('AD-07 Duplicate creates a copy and navigates to overview', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const name = `e2e-ad-duplicate-${Date.now()}`;
+		const ruleId = await ownedRules.logs({ name, schema: 'v2' });
+
+		await gotoAlertDetails(page, ruleId);
+		await page.getByTestId('alert-actions-menu').click();
+
+		const [createResponse] = await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					/\/api\/v\d\/rules$/.test(new URL(res.url()).pathname) &&
+					res.request().method() === 'POST',
+			),
+			page.getByRole('menuitem', { name: 'Duplicate' }).click(),
+		]);
+		await ownedRules.register(createResponse);
+
+		await expect(page).toHaveURL(new RegExp(ALERT_OVERVIEW_PATH));
+		await expect(page).toHaveURL(/[?&]ruleId=/);
+
+		await page.goto(`${ALERTS_LIST_PATH}?search=${name}`);
+		await expect(page.getByText(`${name} - Copy`)).toBeVisible();
+	});
+
+	test('AD-08 Delete removes the rule and returns to the list', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const name = `e2e-ad-delete-${Date.now()}`;
+		const ruleId = await ownedRules.logs({ name, schema: 'v2' });
+
+		await gotoAlertDetails(page, ruleId);
+		await page.getByTestId('alert-actions-menu').click();
+
+		await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					res.url().includes(`/api/v2/rules/${ruleId}`) &&
+					res.request().method() === 'DELETE',
+			),
+			page.getByRole('menuitem', { name: 'Delete' }).click(),
+		]);
+
+		await expect(page).toHaveURL(new RegExp(`${ALERTS_LIST_PATH}$`));
+		await page.goto(`${ALERTS_LIST_PATH}?search=${name}`);
+		await expect(page.getByText(name, { exact: true })).toHaveCount(0);
+	});
+});

tests/e2e/tests/alerts/details/chrome.spec.ts

@@ -0,0 +1,51 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import { ALERTS_LIST_PATH, gotoAlertHistory } from '../../../helpers/alerts';
+
+test.describe('Alert details — page chrome', () => {
+	test('AD-09 copy-link button copies the current URL to clipboard', async ({
+		authedPage: page,
+		alertHistory,
+		browserName,
+	}) => {
+		test.skip(
+			browserName !== 'chromium',
+			'clipboard-read permission is Chromium-only in Playwright',
+		);
+		await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
+
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const expected = page.url();
+
+		await page.getByRole('button', { name: 'Copy link' }).click();
+		await expect(page.getByText('Copied')).toBeVisible();
+
+		const copied = await page.evaluate(() => navigator.clipboard.readText());
+		expect(copied).toBe(expected);
+	});
+
+	test('AD-10 breadcrumb navigates back to the alert list', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const breadcrumb = page.locator('.ant-breadcrumb');
+		await expect(breadcrumb).toContainText('Alert Rules');
+		await expect(breadcrumb).toContainText(alertHistory.ruleId);
+
+		await breadcrumb.getByText('Alert Rules').click();
+
+		await expect(page).toHaveURL(new RegExp(`${ALERTS_LIST_PATH}$`));
+	});
+
+	test('AD-13 document title updates to show the rule name', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await expect
+			.poll(() => page.title(), { timeout: 15_000 })
+			.toContain('e2e-ah-rule-v2');
+	});
+});

tests/e2e/tests/alerts/details/header.spec.ts

@@ -0,0 +1,55 @@
+import {
+	expect,
+	SEED_C_TEAM_LABEL,
+	test,
+} from '../../../fixtures/alert-history';
+import { gotoAlertDetails } from '../../../helpers/alerts';
+
+test.describe('Alert details — header', () => {
+	test('AD-01 v2 header shows editable name input without Rename menu item', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertDetails(page, alertHistory.ruleId);
+
+		await expect(page.getByTestId('alert-details-root')).toHaveAttribute(
+			'data-schema-version',
+			'v2alpha1',
+		);
+
+		const nameInput = page.getByTestId('alert-name-input');
+		await expect(nameInput).toBeVisible();
+		await expect(nameInput).not.toHaveValue('');
+		await expect(nameInput).toBeEditable();
+
+		await page.getByTestId('alert-actions-menu').click();
+		await expect(page.getByRole('menuitem', { name: 'Duplicate' })).toBeVisible();
+		await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeVisible();
+		await expect(page.getByRole('menuitem', { name: 'Rename' })).toHaveCount(0);
+	});
+
+	test('AD-02 v1 header shows static title with state, severity and labels', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertDetails(page, alertHistory.ruleIdV1);
+
+		await expect(page.getByTestId('alert-details-root')).toHaveAttribute(
+			'data-schema-version',
+			'v1',
+		);
+
+		await expect(page.getByTestId('alert-header-title')).toBeVisible();
+		await expect(page.getByTestId('alert-header-state')).toBeVisible();
+		await expect(page.getByTestId('alert-header-severity')).toContainText(
+			'Warning',
+		);
+		await expect(page.getByTestId('alert-header-labels')).toContainText(
+			SEED_C_TEAM_LABEL,
+		);
+		await expect(page.getByTestId('alert-name-input')).toHaveCount(0);
+
+		await page.getByTestId('alert-actions-menu').click();
+		await expect(page.getByRole('menuitem', { name: 'Rename' })).toBeVisible();
+	});
+});

tests/e2e/tests/alerts/details/not-found.spec.ts

@@ -0,0 +1,33 @@
+import { expect, test } from '../../../fixtures/alert-rules';
+import {
+	ALERT_HISTORY_PATH,
+	ALERT_OVERVIEW_PATH,
+} from '../../../helpers/alerts';
+
+test.describe('Alert details — not found', () => {
+	test('AD-11 invalid ruleId shows AlertNotFound page', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(`${ALERT_HISTORY_PATH}?ruleId=not-a-real-rule-id`);
+		await expect(
+			page.getByText("Uh-oh! We couldn't find the given alert rule."),
+		).toBeVisible();
+
+		await page.goto(
+			`${ALERT_HISTORY_PATH}?ruleId=01920000-0000-7000-8000-000000000000`,
+		);
+		await expect(
+			page.getByText("Uh-oh! We couldn't find the given alert rule."),
+		).toBeVisible();
+	});
+
+	test('AD-12 missing ruleId on overview shows AlertNotFound page', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(ALERT_OVERVIEW_PATH);
+
+		await expect(
+			page.getByText("Uh-oh! We couldn't find the given alert rule."),
+		).toBeVisible();
+	});
+});

tests/e2e/tests/alerts/details/rename.spec.ts

@@ -0,0 +1,74 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	ALERTS_LIST_PATH,
+	gotoAlertDetails,
+	gotoAlertHistory,
+} from '../../../helpers/alerts';
+
+test.describe('Alert details — rename', () => {
+	test('AD-03 v1 rename via modal updates the rule name', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const stamp = Date.now();
+		const original = `e2e-ad-rename-v1-${stamp}`;
+		const renamed = `${original}-renamed`;
+		const ruleId = await ownedRules.logs({ name: original, schema: 'v1' });
+
+		await gotoAlertDetails(page, ruleId);
+		await expect(page.getByTestId('alert-header-title')).toContainText(original);
+
+		await page.getByTestId('alert-actions-menu').click();
+		await page.getByRole('menuitem', { name: 'Rename' }).click();
+
+		const modalInput = page.getByTestId('alert-name');
+		await expect(modalInput).toBeVisible();
+		await modalInput.fill(renamed);
+		await page.getByRole('button', { name: 'Rename Alert' }).click();
+
+		await expect(page.getByText('Alert renamed successfully')).toBeVisible();
+		await expect(page.getByTestId('alert-header-title')).toContainText(renamed);
+
+		await page.goto(`${ALERTS_LIST_PATH}?search=${renamed}`);
+		await expect(page.getByText(renamed)).toBeVisible();
+	});
+
+	test('AD-04 v2 inline rename saves via Overview footer button', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const stamp = Date.now();
+		const original = `e2e-ad-rename-v2-${stamp}`;
+		const renamed = `${original}-renamed`;
+		const ruleId = await ownedRules.logs({ name: original, schema: 'v2' });
+
+		await gotoAlertDetails(page, ruleId);
+
+		const nameInput = page.getByTestId('alert-name-input');
+		await expect(nameInput).toHaveValue(original);
+		await nameInput.fill(renamed);
+
+		await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					res.url().includes(`/api/v2/rules/${ruleId}`) &&
+					['PUT', 'POST', 'PATCH'].includes(res.request().method()),
+			),
+			page.getByRole('button', { name: 'Save Alert Rule' }).click(),
+		]);
+
+		await page.goto(`${ALERTS_LIST_PATH}?search=${renamed}`);
+		await expect(page.getByText(renamed)).toBeVisible();
+
+		await gotoAlertHistory(page, ruleId);
+		const historyInput = page.getByTestId('alert-name-input');
+		await historyInput.fill(`${renamed}-unsaved`);
+		await expect(
+			page.getByRole('button', { name: 'Save Alert Rule' }),
+		).toHaveCount(0);
+
+		await page.goto(`${ALERTS_LIST_PATH}?search=${renamed}`);
+		await expect(page.getByText(renamed)).toBeVisible();
+		await expect(page.getByText(`${renamed}-unsaved`)).toHaveCount(0);
+	});
+});

tests/e2e/tests/alerts/details/tabs.spec.ts

@@ -0,0 +1,55 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	ALERT_HISTORY_PATH,
+	ALERT_OVERVIEW_PATH,
+	DEFAULT_RELATIVE_TIME,
+	gotoAlertDetails,
+	gotoAlertHistory,
+} from '../../../helpers/alerts';
+
+test.describe('Alert details — tabs', () => {
+	test('AD-05 Overview/History tabs preserve ruleId and relativeTime', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertDetails(page, alertHistory.ruleId);
+
+		await page.getByTestId('alert-details-tab-history').click();
+
+		await expect(page).toHaveURL(new RegExp(ALERT_HISTORY_PATH));
+		await expect(page).toHaveURL(new RegExp(`ruleId=${alertHistory.ruleId}`));
+		await expect(page).toHaveURL(
+			new RegExp(`relativeTime=${DEFAULT_RELATIVE_TIME}`),
+		);
+		await expect(
+			page.getByTestId('alert-details-tab-history').getByText('Beta'),
+		).toBeVisible();
+
+		await page.getByTestId('alert-details-tab-overview').click();
+
+		await expect(page).toHaveURL(new RegExp(ALERT_OVERVIEW_PATH));
+		await expect(page).toHaveURL(new RegExp(`ruleId=${alertHistory.ruleId}`));
+	});
+
+	test('AD-05b switching to History tab discards other history params', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			page: '2',
+			order: 'desc',
+			timelineFilter: 'FIRED',
+		});
+
+		await page.getByTestId('alert-details-tab-overview').click();
+		await expect(page).toHaveURL(new RegExp(ALERT_OVERVIEW_PATH));
+		await expect(page).toHaveURL(/[?&]timelineFilter=FIRED/);
+
+		await page.getByTestId('alert-details-tab-history').click();
+
+		await expect(page).toHaveURL(new RegExp(ALERT_HISTORY_PATH));
+		const search = new URL(page.url()).searchParams;
+		expect([...search.keys()].sort()).toEqual(['relativeTime', 'ruleId']);
+		expect(search.get('ruleId')).toBe(alertHistory.ruleId);
+	});
+});

tests/e2e/tests/alerts/details/threshold-persistence.spec.ts

@@ -0,0 +1,22 @@
+import { expect, test } from '../../../fixtures/alert-rules';
+import { gotoAlertOverview } from '../../../helpers/alerts';
+
+const TARGET = 245;
+
+test.describe('Alert overview — threshold persistence', () => {
+	test('TC-02 edit page displays the saved threshold value', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const ruleId = await ownedRules.threshold(
+			`e2e-threshold-persistence-${Date.now()}`,
+			{ target: TARGET },
+		);
+
+		await gotoAlertOverview(page, ruleId);
+
+		await expect(page.getByTestId('threshold-value-input')).toHaveValue(
+			String(TARGET),
+		);
+	});
+});

tests/e2e/tests/alerts/history/cross-cutting.spec.ts

@@ -0,0 +1,223 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	ALERT_HISTORY_PATH,
+	DEFAULT_RELATIVE_TIME,
+	encodeTimelineCursor,
+	gotoAlertHistory,
+	HISTORY_ENDPOINTS,
+	isHistoryRequest,
+	sortTimelineDescending,
+	statsCard,
+	TIMELINE_PAGE_SIZE,
+	timelineFooterRange,
+	timelineRows,
+} from '../../../helpers/alerts';
+import {
+	collectRequests,
+	requestUrl,
+	watchConsole,
+} from '../../../helpers/common';
+
+test.describe('Alert history — cross-cutting', () => {
+	test('AX-01 full deep-link with all params is honoured in one load', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const service = alertHistory.services[8];
+		await page.goto(
+			`${ALERT_HISTORY_PATH}?ruleId=${alertHistory.ruleId}` +
+				`&relativeTime=${DEFAULT_RELATIVE_TIME}` +
+				`&timelineFilter=FIRED&page=1&order=desc` +
+				`&alertHistoryExpression=${encodeURIComponent(`service.name = '${service}'`)}` +
+				`&viewAllTopContributors=true`,
+		);
+
+		await expect(page.getByTestId('timeline-table')).toBeVisible();
+		await expect(page.getByTestId('top-contributors-drawer')).toBeVisible();
+		await expect(page.getByTestId('timeline-filter-fired')).toHaveClass(
+			/selected/,
+		);
+		await expect(timelineRows(page)).toHaveCount(1);
+	});
+
+	test('AX-02 page reload preserves all history params', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			timelineFilter: 'FIRED',
+			page: '2',
+			order: 'desc',
+		});
+		const before = new URL(page.url()).searchParams;
+
+		await page.reload();
+		await expect(page.getByTestId('timeline-table')).toBeVisible();
+
+		const after = new URL(page.url()).searchParams;
+		for (const [key, value] of before) {
+			expect(after.get(key), `param ${key} survived the reload`).toBe(value);
+		}
+	});
+
+	test('AX-03 browser back/forward restores correct table state', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await expect(timelineRows(page)).toHaveCount(TIMELINE_PAGE_SIZE);
+
+		await page.getByTestId('timeline-filter-fired').click();
+		await expect(page).toHaveURL(/[?&]timelineFilter=FIRED/);
+
+		await page.getByTestId('timeline-next-page').click();
+		await expect(page).toHaveURL(/[?&]page=2/);
+		await expect(timelineRows(page)).toHaveCount(
+			alertHistory.total - TIMELINE_PAGE_SIZE,
+		);
+
+		await page.goBack();
+		await expect(page).not.toHaveURL(/[?&]page=2/);
+		await expect(timelineRows(page)).toHaveCount(TIMELINE_PAGE_SIZE);
+
+		await page.goForward();
+		await expect(page).toHaveURL(/[?&]page=2/);
+		await expect(timelineRows(page)).toHaveCount(
+			alertHistory.total - TIMELINE_PAGE_SIZE,
+		);
+	});
+
+	test('AX-04 no unhandled console errors across full history session', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const watch = watchConsole(page);
+
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await page.getByTestId('timeline-filter-fired').click();
+		await page.getByTestId('timeline-next-page').click();
+		await expect(page).toHaveURL(/[?&]page=2/);
+		await sortTimelineDescending(page);
+		await expect(page).toHaveURL(/[?&]order=desc/);
+		await page.getByTestId('top-contributors-view-all').click();
+		await expect(page.getByTestId('top-contributors-drawer')).toBeVisible();
+
+		expect(watch.errors).toEqual([]);
+		expect(watch.failedResponses).toEqual([]);
+	});
+
+	test('AX-05 no request storm on mount (exactly one call per endpoint)', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const requests = collectRequests(page);
+
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await expect(timelineRows(page)).toHaveCount(TIMELINE_PAGE_SIZE);
+		await expect(
+			statsCard(page, 'Total Triggered').getByTestId('stats-card-value'),
+		).toBeVisible();
+
+		for (const endpoint of HISTORY_ENDPOINTS) {
+			const calls = requests.filter((req) => isHistoryRequest(req, endpoint));
+			expect(calls, `${endpoint} called exactly once on mount`).toHaveLength(1);
+		}
+	});
+
+	test('AX-06 v1 and v2 schema rules both render history correctly', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		for (const [variant, ruleId, total] of [
+			['v2', alertHistory.ruleId, alertHistory.total],
+			['v1', alertHistory.ruleIdV1, alertHistory.totalV1],
+		] as const) {
+			await gotoAlertHistory(page, ruleId);
+			await expect(
+				page.getByTestId('alert-details-root'),
+				`${variant} rule renders the details shell`,
+			).toHaveAttribute(
+				'data-schema-version',
+				variant === 'v2' ? 'v2alpha1' : 'v1',
+			);
+			await expect(timelineFooterRange(page)).toContainText(`of ${total}`);
+		}
+	});
+
+	test('AX-07 no legacy v1 history API calls during full session', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const requests = collectRequests(page);
+
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await page.getByTestId('timeline-filter-fired').click();
+		await page.getByTestId('timeline-next-page').click();
+		await expect(page).toHaveURL(/[?&]page=2/);
+		await sortTimelineDescending(page);
+		await expect(page).toHaveURL(/[?&]order=desc/);
+		await gotoAlertHistory(page, alertHistory.ruleId, { relativeTime: '6h' });
+
+		const legacy = requests.filter((req) =>
+			/\/api\/v1\/rules\/[^/]+\/history\//.test(req.url()),
+		);
+		expect(
+			legacy.map((req) => req.url()),
+			'no legacy POST /api/v1/rules/*/history/* calls',
+		).toEqual([]);
+
+		for (const endpoint of HISTORY_ENDPOINTS) {
+			expect(
+				requests.filter((req) => isHistoryRequest(req, endpoint)).length,
+				`v2 ${endpoint} endpoint was used`,
+			).toBeGreaterThan(0);
+		}
+	});
+
+	test('AX-08 history API endpoints carry expected params', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const requests = collectRequests(page);
+
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			timelineFilter: 'FIRED',
+			page: '2',
+		});
+		await expect(page.getByTestId('timeline-table')).toBeVisible();
+
+		const timeline = requests
+			.filter((req) => isHistoryRequest(req, 'timeline'))
+			.pop();
+		expect(timeline).toBeDefined();
+		const timelineParams = requestUrl(timeline!).searchParams;
+		for (const key of ['start', 'end', 'limit', 'order', 'cursor', 'state']) {
+			expect(timelineParams.get(key), `timeline carries ${key}`).toBeTruthy();
+		}
+		expect(timelineParams.get('limit')).toBe(String(TIMELINE_PAGE_SIZE));
+		expect(timelineParams.get('cursor')).toBe(encodeTimelineCursor(2));
+
+		for (const endpoint of [
+			'stats',
+			'overall_status',
+			'top_contributors',
+		] as const) {
+			const request = requests
+				.filter((req) => isHistoryRequest(req, endpoint))
+				.pop();
+			expect(request, `${endpoint} was requested`).toBeDefined();
+			const params = requestUrl(request!).searchParams;
+			expect(params.get('start'), `${endpoint} carries start`).toBeTruthy();
+			expect(params.get('end'), `${endpoint} carries end`).toBeTruthy();
+		}
+
+		const keys = requests
+			.filter((req) => /\/history\/filter_keys/.test(req.url()))
+			.pop();
+		expect(keys, 'filter_keys was requested').toBeDefined();
+		const keyParams = requestUrl(keys!).searchParams;
+		expect(keyParams.get('startUnixMilli')).toBeTruthy();
+		expect(keyParams.get('endUnixMilli')).toBeTruthy();
+		expect(keyParams.get('start')).toBeNull();
+	});
+});

tests/e2e/tests/alerts/history/empty-and-errors.spec.ts

@@ -0,0 +1,177 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	ALERT_HISTORY_PATH,
+	createLogsAlertViaApi,
+	deleteAlertViaApi,
+	expectFirstPage,
+	gotoAlertHistory,
+	isHistoryRequest,
+	runFilterExpression,
+	setRuleDisabledViaApi,
+	statsCard,
+	TIMELINE_PAGE_SIZE,
+	timelineFooterRange,
+	timelineRows,
+} from '../../../helpers/alerts';
+import { collectRequests } from '../../../helpers/common';
+import { typeExpression } from '../../../helpers/query-builder';
+
+test.describe('Alert history — error and empty states', () => {
+	test('AE-01 invalid filter expression shows syntax error and recovers on fix', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const responsePromise = page.waitForResponse((res) =>
+			isHistoryRequest(res.request(), 'timeline'),
+		);
+		await runFilterExpression(page, 'service.name =');
+		const response = await responsePromise;
+		expect(response.status()).toBe(400);
+
+		const error = page.getByTestId('timeline-error');
+		await expect(error).toBeVisible();
+		await expect(error).toContainText(/syntax error/i);
+
+		await runFilterExpression(
+			page,
+			`service.name = '${alertHistory.services[7]}'`,
+		);
+		await expect(page.getByTestId('timeline-error')).toHaveCount(0);
+		await expect(timelineRows(page)).toHaveCount(1);
+	});
+
+	test('AE-02 empty filter_keys response still mounts editor (no suggestions)', async ({
+		authedPage: page,
+		emptyHistory,
+	}) => {
+		const keysPromise = page.waitForResponse((res) =>
+			/\/history\/filter_keys/.test(res.url()),
+		);
+		await gotoAlertHistory(page, emptyHistory.ruleId);
+		const keysResponse = await keysPromise;
+
+		const body = (await keysResponse.json()) as {
+			data: { keys?: Record<string, unknown> } | null;
+		};
+		expect(Object.keys(body.data?.keys ?? {})).toHaveLength(0);
+
+		await expect(page.getByTestId('timeline-filter-skeleton')).toHaveCount(0);
+		await expect(page.getByTestId('timeline-filter-search')).toBeVisible();
+		await typeExpression(page, 'anything.at.all');
+		await expect(
+			page.locator('.query-where-clause-editor .cm-content'),
+		).toContainText('anything.at.all');
+	});
+
+	test('AE-02b bogus ruleId never reaches history APIs (shows AlertNotFound)', async ({
+		authedPage: page,
+	}) => {
+		const requests = collectRequests(page);
+
+		await page.goto(`${ALERT_HISTORY_PATH}?ruleId=not-a-real-rule-id`);
+		await expect(
+			page.getByText("Uh-oh! We couldn't find the given alert rule."),
+		).toBeVisible();
+
+		expect(requests.filter((req) => /\/history\//.test(req.url()))).toHaveLength(
+			0,
+		);
+	});
+
+	test('AE-03 rule with no history renders empty state (not error)', async ({
+		authedPage: page,
+		emptyHistory,
+	}) => {
+		await gotoAlertHistory(page, emptyHistory.ruleId);
+
+		await expect(timelineRows(page)).toHaveCount(0);
+		await expect(
+			statsCard(page, 'Total Triggered').getByTestId('stats-card-value'),
+		).toHaveText('None Triggered.');
+		await expect(
+			statsCard(page, 'Avg. Resolution Time').getByTestId('stats-card-value'),
+		).toHaveText('No Resolutions.');
+		await expect(page.getByTestId('top-contributors-row')).toHaveCount(0);
+		await expect(page.getByTestId('timeline-error')).toHaveCount(0);
+	});
+
+	test('AE-04 time range with no data renders empty state', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const end = Date.now() - 24 * 60 * 60 * 1000;
+		const start = end - 30 * 60 * 1000;
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			startTime: String(start),
+			endTime: String(end),
+		});
+
+		await expect(timelineRows(page)).toHaveCount(0);
+		await expect(
+			statsCard(page, 'Total Triggered').getByTestId('stats-card-value'),
+		).toHaveText('None Triggered.');
+		await expect(page.getByTestId('timeline-error')).toHaveCount(0);
+	});
+
+	test('AE-05 time-range change resets pagination to first page', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, { page: '2' });
+		await expect(page).toHaveURL(/[?&]page=2/);
+
+		await page.locator('.filters input').first().click();
+		await page.getByText('Last 6 hours', { exact: true }).click();
+
+		await expectFirstPage(page);
+	});
+
+	test('AE-06 absurd time range (90d) still renders', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, { relativeTime: '90d' });
+
+		await expect(page.getByTestId('timeline-table')).toBeVisible();
+		await expect(timelineRows(page).first()).toBeVisible();
+		await expect(page.getByTestId('timeline-graph-title')).toContainText(
+			`${alertHistory.total} triggers in`,
+		);
+	});
+
+	test('AE-07 disabled rule history is still readable', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await expect(timelineRows(page)).toHaveCount(TIMELINE_PAGE_SIZE);
+		await expect(timelineFooterRange(page)).toContainText(
+			`of ${alertHistory.total}`,
+		);
+	});
+
+	test('AE-08 deleted rule shows AlertNotFound on revisit', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const doomedId = await createLogsAlertViaApi(page, {
+			name: `e2e-ah-doomed-${Date.now()}`,
+			marker: alertHistory.marker,
+			channels: [alertHistory.channelName],
+		});
+		await setRuleDisabledViaApi(page, doomedId, true);
+
+		await gotoAlertHistory(page, doomedId);
+		await expect(page.getByTestId('timeline-table')).toBeVisible();
+
+		await deleteAlertViaApi(page, doomedId);
+
+		await page.goto(`${ALERT_HISTORY_PATH}?ruleId=${doomedId}`);
+		await expect(
+			page.getByText("Uh-oh! We couldn't find the given alert rule."),
+		).toBeVisible();
+	});
+});

tests/e2e/tests/alerts/history/expression-filter.spec.ts

@@ -0,0 +1,271 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	expectFirstPage,
+	gotoAlertHistory,
+	isHistoryRequest,
+	runFilterExpression,
+	TIMELINE_PAGE_SIZE,
+	timelineFooterRange,
+	timelineRows,
+} from '../../../helpers/alerts';
+import { requestUrl } from '../../../helpers/common';
+import { typeExpression } from '../../../helpers/query-builder';
+
+test.describe('Alert history — expression filter', () => {
+	test('AF-06 key suggestions load on page load', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const keysPromise = page.waitForResponse((res) =>
+			/\/history\/filter_keys/.test(res.url()),
+		);
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const keysResponse = await keysPromise;
+
+		const body = (await keysResponse.json()) as {
+			data: { keys: Record<string, { name: string }[]> } | null;
+		};
+		expect(Object.keys(body.data?.keys ?? {}).sort()).toEqual([
+			'service.name',
+			'severity',
+			'threshold.name',
+		]);
+		const params = new URL(keysResponse.url()).searchParams;
+		expect(params.get('startUnixMilli')).toBeTruthy();
+		expect(params.get('endUnixMilli')).toBeTruthy();
+
+		await expect(page.getByTestId('timeline-filter-search')).toBeVisible();
+		await expect(page.getByTestId('timeline-filter-skeleton')).toHaveCount(0);
+	});
+
+	test('AF-07 value suggestions fetch from filter_values endpoint', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const valuesPromise = page.waitForResponse((res) =>
+			/\/history\/filter_values/.test(res.url()),
+		);
+		await typeExpression(page, "service.name = '");
+		const valuesResponse = await valuesPromise;
+
+		const params = new URL(valuesResponse.url()).searchParams;
+		expect(params.get('name')).toBe('service.name');
+
+		const body = (await valuesResponse.json()) as {
+			data: { values?: { stringValues?: string[] }; complete?: boolean } | null;
+		};
+		expect(body.data?.values?.stringValues).toEqual(
+			[...alertHistory.services].sort(),
+		);
+		expect(body.data?.complete).toBe(true);
+	});
+
+	test('AF-08 value suggestions filter client-side as user types', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await typeExpression(page, "service.name = 'svc-1");
+
+		const options = page.locator('.cm-tooltip-autocomplete li');
+		await expect(options.first()).toBeVisible();
+		const texts = await options.allInnerTexts();
+		expect(texts.length).toBeGreaterThan(0);
+		expect(texts.length).toBeLessThan(alertHistory.services.length);
+		for (const text of texts) {
+			expect(text).toContain('svc-1');
+		}
+	});
+
+	test('AF-09 running equality expression filters the table', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const service = alertHistory.services[3];
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await runFilterExpression(page, `service.name = '${service}'`);
+		const request = await requestPromise;
+
+		expect(requestUrl(request).searchParams.get('filterExpression')).toBe(
+			`service.name = '${service}'`,
+		);
+		await expect(timelineRows(page)).toHaveCount(1);
+		await expect(page).toHaveURL(/[?&]alertHistoryExpression=/);
+	});
+
+	test('AF-10 running expression resets pagination to first page', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, { page: '2' });
+
+		await runFilterExpression(
+			page,
+			`service.name = '${alertHistory.services[0]}'`,
+		);
+
+		await expect(page).not.toHaveURL(/[?&]page=2/);
+		await expectFirstPage(page);
+	});
+
+	test('AF-11 Run button re-fetches unchanged expression', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const expression = `service.name = '${alertHistory.services[1]}'`;
+		await runFilterExpression(page, expression);
+		await expect(timelineRows(page)).toHaveCount(1);
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await page.getByRole('button', { name: /run query/i }).click();
+		await requestPromise;
+
+		await expect(timelineRows(page)).toHaveCount(1);
+	});
+
+	test('AF-12 in-flight query can be cancelled', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await page.route(
+			(url) => /\/history\/timeline/.test(url.pathname),
+			async (route) => {
+				await new Promise((resolve) => {
+					setTimeout(resolve, 3_000);
+				});
+				await route.continue();
+			},
+		);
+
+		await typeExpression(page, `service.name = '${alertHistory.services[2]}'`);
+		await page.getByRole('button', { name: /run query/i }).click();
+
+		const cancel = page.getByRole('button', { name: 'Cancel' });
+		await expect(cancel).toBeVisible();
+		await cancel.click();
+
+		await page.unrouteAll({ behavior: 'ignoreErrors' });
+		await expect(page.getByRole('button', { name: 'Cancel' })).toHaveCount(0);
+		await expect(page.getByRole('button', { name: /run query/i })).toBeVisible();
+	});
+
+	test('AF-13 threshold.name and severity keys filter correctly', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await runFilterExpression(page, `threshold.name = 'critical'`);
+		await expect(timelineRows(page)).toHaveCount(TIMELINE_PAGE_SIZE);
+		await expect(timelineFooterRange(page)).toContainText(
+			`of ${alertHistory.total}`,
+		);
+
+		await runFilterExpression(page, `severity = 'critical'`);
+		await expect(timelineFooterRange(page)).toContainText(
+			`of ${alertHistory.total}`,
+		);
+
+		await gotoAlertHistory(page, alertHistory.ruleIdV1);
+		await runFilterExpression(page, `threshold.name = 'warning'`);
+		await expect(timelineFooterRange(page)).toContainText(
+			`of ${alertHistory.totalV1}`,
+		);
+
+		await runFilterExpression(page, `threshold.name = 'critical'`);
+		await expect(timelineRows(page)).toHaveCount(0);
+	});
+
+	test('AF-14 unknown key returns 200 with zero rows (not 500)', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const responsePromise = page.waitForResponse((res) =>
+			isHistoryRequest(res.request(), 'timeline'),
+		);
+		await runFilterExpression(page, `nonexistent.key = 'x'`);
+		const response = await responsePromise;
+
+		expect(response.status()).toBe(200);
+		await expect(timelineRows(page)).toHaveCount(0);
+		await expect(page.getByTestId('timeline-error')).toHaveCount(0);
+	});
+
+	test('AF-15 expression is lost on Overview→History round-trip (known bug)', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const expression = `service.name = '${alertHistory.services[4]}'`;
+		await runFilterExpression(page, expression);
+		await expect(timelineRows(page)).toHaveCount(1);
+		await expect(page).toHaveURL(/[?&]alertHistoryExpression=/);
+
+		await page.getByTestId('alert-details-tab-overview').click();
+		await page.getByTestId('alert-details-tab-history').click();
+
+		await expect(page.getByTestId('timeline-table')).toBeVisible();
+		expect(new URL(page.url()).searchParams.has('alertHistoryExpression')).toBe(
+			false,
+		);
+		await expect(timelineRows(page)).toHaveCount(TIMELINE_PAGE_SIZE);
+	});
+
+	test('AF-16 expression and state filter compose in request', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			timelineFilter: 'FIRED',
+		});
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		const service = alertHistory.services[5];
+		await runFilterExpression(page, `service.name = '${service}'`);
+		const request = await requestPromise;
+
+		const params = requestUrl(request).searchParams;
+		expect(params.get('state')).toBe('firing');
+		expect(params.get('filterExpression')).toBe(`service.name = '${service}'`);
+		await expect(timelineRows(page)).toHaveCount(1);
+	});
+
+	test('AF-17 clearing expression restores full unfiltered list', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await runFilterExpression(
+			page,
+			`service.name = '${alertHistory.services[6]}'`,
+		);
+		await expect(timelineRows(page)).toHaveCount(1);
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await runFilterExpression(page, '');
+		const request = await requestPromise;
+
+		expect(requestUrl(request).searchParams.get('filterExpression')).toBeNull();
+		await expect(timelineFooterRange(page)).toContainText(
+			`of ${alertHistory.total}`,
+		);
+	});
+});

tests/e2e/tests/alerts/history/state-filter.spec.ts

@@ -0,0 +1,107 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	expectFirstPage,
+	gotoAlertHistory,
+	isHistoryRequest,
+	timelineRows,
+} from '../../../helpers/alerts';
+import { requestUrl } from '../../../helpers/common';
+
+test.describe('Alert history — state filter', () => {
+	test('AF-01 All filter sends no state param in request', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			timelineFilter: 'FIRED',
+		});
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await page.getByTestId('timeline-filter-all').click();
+		const request = await requestPromise;
+
+		await expect(page).toHaveURL(/[?&]timelineFilter=ALL/);
+		expect(requestUrl(request).searchParams.get('state')).toBeNull();
+	});
+
+	test('AF-02 Fired filter sends state=firing in request', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await page.getByTestId('timeline-filter-fired').click();
+		const request = await requestPromise;
+
+		await expect(page).toHaveURL(/[?&]timelineFilter=FIRED/);
+		expect(requestUrl(request).searchParams.get('state')).toBe('firing');
+		await expect(timelineRows(page).first()).toBeVisible();
+	});
+
+	test('AF-03 Resolved filter shows empty for rule with no resolutions', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await page.getByTestId('timeline-filter-resolved').click();
+		const request = await requestPromise;
+
+		await expect(page).toHaveURL(/[?&]timelineFilter=RESOLVED/);
+		expect(requestUrl(request).searchParams.get('state')).toBe('inactive');
+		await expect(timelineRows(page)).toHaveCount(0);
+	});
+
+	test('AF-03b Resolved filter shows rows for rule with resolutions', async ({
+		authedPage: page,
+		resolvedHistory,
+	}) => {
+		await gotoAlertHistory(page, resolvedHistory.ruleId, {
+			timelineFilter: 'RESOLVED',
+		});
+
+		await expect(timelineRows(page)).toHaveCount(resolvedHistory.resolvedCount);
+		for (const text of await timelineRows(page)
+			.getByTestId('timeline-row-state')
+			.allInnerTexts()) {
+			expect(text).toBe('Resolved');
+		}
+
+		await page.getByTestId('timeline-filter-fired').click();
+		await expect(timelineRows(page)).toHaveCount(resolvedHistory.firingCount);
+	});
+
+	test('AF-04 deep-link ?timelineFilter=FIRED starts on Fired tab', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			timelineFilter: 'FIRED',
+		});
+
+		await expect(page.getByTestId('timeline-filter-fired')).toHaveClass(
+			/selected/,
+		);
+		await expect(timelineRows(page).first()).toBeVisible();
+	});
+
+	test('AF-05 changing state filter resets pagination to first page', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, { page: '2' });
+
+		await page.getByTestId('timeline-filter-fired').click();
+
+		await expect(page).not.toHaveURL(/[?&]page=2/);
+		await expectFirstPage(page);
+	});
+});

tests/e2e/tests/alerts/history/statistics.spec.ts

@@ -0,0 +1,125 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	gotoAlertHistory,
+	statsCard,
+	timelineRows,
+} from '../../../helpers/alerts';
+
+test.describe('Alert history — statistics', () => {
+	test('AS-01 Total Triggered card shows the firing count', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const card = statsCard(page, 'Total Triggered');
+		await expect(card).toBeVisible();
+		await expect(card).toHaveAttribute('data-empty', 'false');
+		await expect(card.getByTestId('stats-card-value')).toHaveText(
+			String(alertHistory.total),
+		);
+	});
+
+	test('AS-02 Avg. Resolution Time card shows "No Resolutions." when none exist', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const card = statsCard(page, 'Avg. Resolution Time');
+		await expect(card).toBeVisible();
+		await expect(card).toHaveAttribute('data-empty', 'true');
+		const value = card.getByTestId('stats-card-value');
+		await expect(value).toHaveText('No Resolutions.');
+		await expect(value).not.toHaveText(/NaN/);
+		await expect(card.getByTestId('stats-card-sparkline')).toHaveCount(0);
+	});
+
+	test('AS-03 empty stats card never renders a sparkline', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const empty = statsCard(page, 'Avg. Resolution Time');
+		await expect(empty).toHaveAttribute('data-empty', 'true');
+		await expect(empty.getByTestId('stats-card-sparkline')).toHaveCount(0);
+	});
+
+	// eslint-disable-next-line playwright/expect-expect -- documented coverage gap
+	test('AS-03b sparkline present with a multi-point series', async () => {
+		test.skip(
+			true,
+			'Not deterministic on SEED-A: whether `currentTriggersSeries` lands in ' +
+				'one stats bucket or two depends on where the ~2-minute seed falls ' +
+				'relative to the bucket boundary, so the `timeSeries.length > 1` gate ' +
+				'flips between runs (observed both ways). Needs a fixture that ' +
+				'guarantees ≥2 points — see coverage doc §3.5.',
+		);
+	});
+
+	test('AS-04 change-vs-past indicator shows "no previous data" when unavailable', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const card = statsCard(page, 'Total Triggered');
+		await expect(card.getByTestId('stats-card-change')).toHaveText(
+			'no previous data',
+		);
+	});
+
+	test('AS-09 stats update when time range changes', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const end = Date.now() - 24 * 60 * 60 * 1000;
+		const start = end - 30 * 60 * 1000;
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			startTime: String(start),
+			endTime: String(end),
+		});
+
+		await expect(
+			statsCard(page, 'Total Triggered').getByTestId('stats-card-value'),
+		).toHaveText('None Triggered.');
+		await expect(
+			statsCard(page, 'Avg. Resolution Time').getByTestId('stats-card-value'),
+		).toHaveText('No Resolutions.');
+
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await expect(
+			statsCard(page, 'Total Triggered').getByTestId('stats-card-value'),
+		).toHaveText(String(alertHistory.total));
+	});
+
+	test('AS-11 Avg. Resolution Time shows formatted duration when resolutions exist', async ({
+		authedPage: page,
+		resolvedHistory,
+	}) => {
+		await gotoAlertHistory(page, resolvedHistory.ruleId);
+
+		const card = statsCard(page, 'Avg. Resolution Time');
+		await expect(card).toHaveAttribute('data-empty', 'false');
+		await expect(card.getByTestId('stats-card-value')).not.toHaveText(
+			'No Resolutions.',
+		);
+		await expect(card.getByTestId('stats-card-value')).not.toHaveText('');
+		await expect(card.getByTestId('stats-card-sparkline')).toHaveCount(0);
+	});
+
+	test('AS-12 Total Triggered counts only firing rows (not resolved)', async ({
+		authedPage: page,
+		resolvedHistory,
+	}) => {
+		await gotoAlertHistory(page, resolvedHistory.ruleId);
+
+		await expect(
+			statsCard(page, 'Total Triggered').getByTestId('stats-card-value'),
+		).toHaveText(String(resolvedHistory.firingCount));
+		await expect(timelineRows(page)).toHaveCount(
+			resolvedHistory.firingCount + resolvedHistory.resolvedCount,
+		);
+	});
+});

tests/e2e/tests/alerts/history/timeline-graph.spec.ts

@@ -0,0 +1,99 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	DEFAULT_RELATIVE_TIME,
+	gotoAlertHistory,
+	isHistoryRequest,
+} from '../../../helpers/alerts';
+import { watchConsole } from '../../../helpers/common';
+
+test.describe('Alert history — timeline graph', () => {
+	test('AT-03 renders canvas with two segments (inactive→firing)', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const watch = watchConsole(page);
+
+		const statusPromise = page.waitForResponse((res) =>
+			isHistoryRequest(res.request(), 'overall_status'),
+		);
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const status = await statusPromise;
+
+		const body = (await status.json()) as {
+			data: { state: string }[] | null;
+		};
+		const states = (body.data ?? []).map((segment) => segment.state);
+		expect(states).toEqual(['inactive', 'firing']);
+
+		await expect(page.getByTestId('timeline-graph')).toBeVisible();
+		await expect(
+			page.getByTestId('timeline-graph').locator('canvas'),
+		).toBeVisible();
+
+		await expect(page.getByTestId('timeline-graph-title')).toHaveText(
+			`${alertHistory.total} triggers in ${DEFAULT_RELATIVE_TIME}`,
+		);
+
+		expect(watch.errors).toEqual([]);
+		expect(watch.failedResponses).toEqual([]);
+	});
+
+	test('AT-03b renders canvas with three segments (inactive→firing→inactive)', async ({
+		authedPage: page,
+		resolvedHistory,
+	}) => {
+		const watch = watchConsole(page);
+
+		const statusPromise = page.waitForResponse((res) =>
+			isHistoryRequest(res.request(), 'overall_status'),
+		);
+		await gotoAlertHistory(page, resolvedHistory.ruleId);
+		const status = await statusPromise;
+
+		const body = (await status.json()) as { data: { state: string }[] | null };
+		expect((body.data ?? []).map((s) => s.state)).toEqual([
+			'inactive',
+			'firing',
+			'inactive',
+		]);
+		await expect(
+			page.getByTestId('timeline-graph').locator('canvas'),
+		).toBeVisible();
+		expect(watch.errors).toEqual([]);
+		expect(watch.failedResponses).toEqual([]);
+	});
+
+	test('AT-19 handles nodata state without console errors', async ({
+		authedPage: page,
+		noDataHistory,
+	}) => {
+		const watch = watchConsole(page);
+
+		const statusPromise = page.waitForResponse((res) =>
+			isHistoryRequest(res.request(), 'overall_status'),
+		);
+		await gotoAlertHistory(page, noDataHistory.ruleId);
+		const status = await statusPromise;
+
+		const body = (await status.json()) as { data: { state: string }[] | null };
+		const KNOWN_STATES = [
+			'firing',
+			'inactive',
+			'pending',
+			'nodata',
+			'recovering',
+			'disabled',
+		];
+		const states = (body.data ?? []).map((segment) => segment.state);
+		expect(states.length).toBeGreaterThan(0);
+		for (const state of states) {
+			expect(KNOWN_STATES).toContain(state);
+		}
+
+		await expect(
+			page.getByTestId('timeline-graph').locator('canvas'),
+		).toBeVisible();
+		expect(watch.errors).toEqual([]);
+		expect(watch.failedResponses).toEqual([]);
+	});
+});

tests/e2e/tests/alerts/history/timeline-pagination.spec.ts

@@ -0,0 +1,170 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	encodeTimelineCursor,
+	expectFirstPage,
+	gotoAlertHistory,
+	isHistoryRequest,
+	sortTimelineDescending,
+	TIMELINE_PAGE_SIZE,
+	timelineFooterRange,
+	timelineRowLabels,
+	timelineRows,
+} from '../../../helpers/alerts';
+import { requestUrl } from '../../../helpers/common';
+
+test.describe('Alert history — timeline pagination', () => {
+	test('AT-06 next page sends cursor and shows different rows', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const firstPageLabels = await timelineRowLabels(page);
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await page.getByTestId('timeline-next-page').click();
+		const request = await requestPromise;
+
+		expect(requestUrl(request).searchParams.get('cursor')).toBe(
+			encodeTimelineCursor(2),
+		);
+		await expect(page).toHaveURL(/[?&]page=2/);
+		await expect(timelineRows(page)).toHaveCount(
+			alertHistory.total - TIMELINE_PAGE_SIZE,
+		);
+		await expect(timelineFooterRange(page)).toHaveText(
+			`${TIMELINE_PAGE_SIZE + 1} — ${alertHistory.total} of ${alertHistory.total}`,
+		);
+		await expect(page.getByTestId('timeline-prev-page')).toBeEnabled();
+
+		expect(await timelineRowLabels(page)).not.toEqual(firstPageLabels);
+	});
+
+	test('AT-07 prev page drops the cursor from request', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, { page: '2' });
+
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await page.getByTestId('timeline-prev-page').click();
+		const request = await requestPromise;
+
+		expect(requestUrl(request).searchParams.get('cursor')).toBeNull();
+		await expect(timelineFooterRange(page)).toHaveText(
+			`1 — ${TIMELINE_PAGE_SIZE} of ${alertHistory.total}`,
+		);
+	});
+
+	test('AT-08 pagination buttons disable at first and last page', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await expect(page.getByTestId('timeline-prev-page')).toBeDisabled();
+		await expect(page.getByTestId('timeline-next-page')).toBeEnabled();
+
+		await page.getByTestId('timeline-next-page').click();
+
+		await expect(page.getByTestId('timeline-next-page')).toBeDisabled();
+		await expect(page.getByTestId('timeline-prev-page')).toBeEnabled();
+	});
+
+	test('AT-09 browser back after paging returns to previous page', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await page.getByTestId('timeline-next-page').click();
+		await expect(page).toHaveURL(/[?&]page=2/);
+
+		await page.goBack();
+
+		await expect(page).not.toHaveURL(/[?&]page=2/);
+		await expect(timelineFooterRange(page)).toHaveText(
+			`1 — ${TIMELINE_PAGE_SIZE} of ${alertHistory.total}`,
+		);
+	});
+
+	test('AT-10 deep-link ?page=2 loads second page directly', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const requestPromise = page.waitForRequest(
+			(req) =>
+				isHistoryRequest(req, 'timeline') &&
+				requestUrl(req).searchParams.get('cursor') === encodeTimelineCursor(2),
+		);
+		await gotoAlertHistory(page, alertHistory.ruleId, { page: '2' });
+		await requestPromise;
+
+		await expect(timelineRows(page)).toHaveCount(
+			alertHistory.total - TIMELINE_PAGE_SIZE,
+		);
+	});
+
+	test('AT-11 default sort order is ascending', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		const requestPromise = page.waitForRequest((req) =>
+			isHistoryRequest(req, 'timeline'),
+		);
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const request = await requestPromise;
+
+		expect(new URL(page.url()).searchParams.get('order')).toBeNull();
+		expect(requestUrl(request).searchParams.get('order')).toBe('asc');
+	});
+
+	test('AT-12 sorting toggles order and resets to first page', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, { page: '2' });
+
+		await sortTimelineDescending(page);
+
+		await expect(page).toHaveURL(/[?&]order=desc/);
+		await expectFirstPage(page);
+	});
+
+	test('AT-13 single page disables both pagination buttons', async ({
+		authedPage: page,
+		metricsHistory,
+	}) => {
+		await gotoAlertHistory(page, metricsHistory.ruleId);
+
+		await expect(timelineRows(page)).toHaveCount(metricsHistory.total);
+		await expect(page.getByTestId('timeline-prev-page')).toBeDisabled();
+		await expect(page.getByTestId('timeline-next-page')).toBeDisabled();
+		await expect(timelineFooterRange(page)).toHaveText(
+			`1 — ${metricsHistory.total} of ${metricsHistory.total}`,
+		);
+	});
+
+	test('AT-21 all pages together cover the complete row set', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const pageOne = await timelineRowLabels(page);
+
+		await page.getByTestId('timeline-next-page').click();
+		await expect(timelineRows(page)).toHaveCount(
+			alertHistory.total - TIMELINE_PAGE_SIZE,
+		);
+		await expect(timelineFooterRange(page)).toHaveText(
+			`${TIMELINE_PAGE_SIZE + 1} — ${alertHistory.total} of ${alertHistory.total}`,
+		);
+		const pageTwo = await timelineRowLabels(page);
+
+		const union = new Set([...pageOne, ...pageTwo]);
+		expect(pageOne.length + pageTwo.length).toBe(alertHistory.total);
+		expect(union.size).toBe(alertHistory.total);
+	});
+});

tests/e2e/tests/alerts/history/timeline-table.spec.ts

@@ -0,0 +1,173 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import {
+	firstTimelineRowCreatedAt,
+	gotoAlertHistory,
+	TIMELINE_PAGE_SIZE,
+	timelineFooterRange,
+	timelineRows,
+} from '../../../helpers/alerts';
+
+test.describe('Alert history — timeline table', () => {
+	test('AT-01 timeline section renders all chrome elements', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await expect(page.locator('.timeline__title')).toHaveText('Timeline');
+		await expect(page.getByTestId('timeline-tab-overall-status')).toBeVisible();
+		await expect(page.getByTestId('timeline-filter-all')).toBeVisible();
+		await expect(page.getByTestId('timeline-filter-fired')).toBeVisible();
+		await expect(page.getByTestId('timeline-filter-resolved')).toBeVisible();
+		await expect(page.getByTestId('timeline-graph')).toBeVisible();
+		await expect(page.getByTestId('timeline-table')).toBeVisible();
+	});
+
+	test('AT-02 Top 5 Contributors tab is disabled with Coming Soon indicator', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const tab = page.getByTestId('timeline-tab-top-contributors');
+		await expect(tab).toBeDisabled();
+		await expect(tab).toContainText('Coming Soon');
+	});
+
+	test('AT-04 table rows display state, labels and formatted timestamp', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await expect(timelineRows(page)).toHaveCount(TIMELINE_PAGE_SIZE);
+
+		const first = timelineRows(page).first();
+		await expect(first.getByTestId('timeline-row-state')).toHaveText('Firing');
+		await expect(first.getByTestId('timeline-row-labels')).toContainText(
+			'service.name',
+		);
+		await expect(first.getByTestId('timeline-row-created-at')).toHaveText(
+			/^[A-Z][a-z]{2} \d{1,2}, \d{4} ⎯ \d{2}:\d{2}:\d{2}$/,
+		);
+	});
+
+	test('AT-05 footer shows correct row range', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await expect(timelineFooterRange(page)).toHaveText(
+			`1 — ${TIMELINE_PAGE_SIZE} of ${alertHistory.total}`,
+		);
+	});
+
+	test('AT-14 row click does not navigate away', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const before = page.url();
+
+		await timelineRows(page).first().click();
+
+		expect(page.url()).toBe(before);
+		await expect(page.getByTestId('timeline-table')).toBeVisible();
+	});
+
+	test('AT-15 row actions link navigates to logs explorer', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await timelineRows(page).first().getByTestId('timeline-row-actions').click();
+
+		const viewLogs = page.getByTestId('alert-popover-view-logs');
+		await expect(viewLogs).toBeVisible();
+		await viewLogs.click();
+
+		await expect(page).toHaveURL(/\/logs\/logs-explorer/);
+		const search = new URL(page.url()).searchParams;
+		expect(search.get('startTime')).toBeTruthy();
+		expect(search.get('endTime')).toBeTruthy();
+		expect(page.url()).toContain('compositeQuery');
+	});
+
+	test('AT-16 metrics rule rows show disabled action (no related links)', async ({
+		authedPage: page,
+		metricsHistory,
+	}) => {
+		await gotoAlertHistory(page, metricsHistory.ruleId);
+
+		const action = timelineRows(page).first().getByTestId('timeline-row-actions');
+		await expect(action).toBeDisabled();
+
+		await expect(page.getByTestId('alert-popover-view-logs')).toHaveCount(0);
+		await expect(page.getByTestId('alert-popover-view-traces')).toHaveCount(0);
+	});
+
+	test('AT-17 CREATED AT column respects app timezone setting', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		const utcCell = await firstTimelineRowCreatedAt(page);
+
+		await page.addInitScript(() =>
+			localStorage.setItem('PREFERRED_TIMEZONE', 'Asia/Kolkata'),
+		);
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		expect(await firstTimelineRowCreatedAt(page)).not.toBe(utcCell);
+	});
+
+	test('AT-18 state cell renders Firing, Resolved, and No Data correctly', async ({
+		authedPage: page,
+		resolvedHistory,
+		noDataHistory,
+	}) => {
+		await gotoAlertHistory(page, resolvedHistory.ruleId);
+		const stateCells = timelineRows(page).getByTestId('timeline-row-state');
+		const labels = [...new Set(await stateCells.allInnerTexts())];
+		expect(labels).toContain('Firing');
+		expect(labels).toContain('Resolved');
+
+		await gotoAlertHistory(page, noDataHistory.ruleId);
+		await expect(
+			timelineRows(page).getByTestId('timeline-row-state').first(),
+		).toHaveText('No Data');
+	});
+
+	// eslint-disable-next-line playwright/expect-expect -- documented coverage gap
+	test('AT-18b pending/recovering states render blank (coverage gap)', async () => {
+		test.skip(
+			true,
+			'Needs SEED-D (coverage doc §3.5): `pending` and `recovering` are ' +
+				'transient states no cheap fixture produces. AlertState.tsx has no ' +
+				'`case` for either, so both hit `default` and the STATE cell renders ' +
+				'empty — write this as a bug-catch once the seeder endpoint exists.',
+		);
+	});
+
+	// eslint-disable-next-line playwright/expect-expect -- documented coverage gap
+	test('AT-18c disabled state renders as "Muted" (coverage gap)', async () => {
+		test.skip(
+			true,
+			'Needs SEED-D (coverage doc §3.5): a `disabled` history row is ' +
+				'policy-driven and the ruler never writes one for a rule we disable ' +
+				'(verified: disabling appends no row).',
+		);
+	});
+
+	// eslint-disable-next-line playwright/expect-expect -- documented coverage gap
+	test('AT-20 time-range boundaries inclusive/exclusive (coverage gap)', async () => {
+		test.skip(
+			true,
+			'Needs SEED-D (coverage doc §3.5): asserting a row exactly at `start` ' +
+				'and one at `start-1ms` requires controlling the row timestamps, and ' +
+				'evaluation times are whatever the ruler chose.',
+		);
+	});
+});

tests/e2e/tests/alerts/history/top-contributors.spec.ts

@@ -0,0 +1,118 @@
+import { expect, test } from '../../../fixtures/alert-history';
+import { gotoAlertHistory } from '../../../helpers/alerts';
+
+test.describe('Alert history — top contributors', () => {
+	test('AS-05 card displays max 3 rows with count ratios', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const card = page.getByTestId('top-contributors-card');
+		await expect(card).toBeVisible();
+		await expect(card).toContainText('top contributors');
+
+		const rows = card.getByTestId('top-contributors-row');
+		await expect(rows).toHaveCount(3);
+		for (let i = 0; i < 3; i += 1) {
+			await expect(
+				rows.nth(i).getByTestId('top-contributors-row-count'),
+			).toHaveText(`1/${alertHistory.total}`);
+			await expect(rows.nth(i)).toContainText('service.name');
+		}
+	});
+
+	// AS-05 reads the `count/total` text, which a *different* column renders than
+	// the bar does. Dropping the `/ total * 100` scaling from the bar leaves that
+	// text untouched, so the width needs its own assertion. Radix surfaces the
+	// clamped percent as `aria-valuenow`.
+	test('AS-13 contributor bar width is the count as a percentage of the total', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		const rows = page
+			.getByTestId('top-contributors-card')
+			.getByTestId('top-contributors-row');
+		await expect(rows).toHaveCount(3);
+
+		// Every SEED-A contributor fired exactly once out of `total`.
+		const percent = String((1 / alertHistory.total) * 100);
+		for (let i = 0; i < 3; i += 1) {
+			await expect(rows.nth(i).getByRole('progressbar')).toHaveAttribute(
+				'aria-valuenow',
+				percent,
+			);
+		}
+	});
+
+	test('AS-06 "View all" button only appears when more than 3 contributors', async ({
+		authedPage: page,
+		alertHistory,
+		metricsHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await expect(page.getByTestId('top-contributors-view-all')).toBeVisible();
+
+		await gotoAlertHistory(page, metricsHistory.ruleId);
+		await expect(page.getByTestId('top-contributors-card')).toBeVisible();
+		await expect(page.getByTestId('top-contributors-view-all')).toHaveCount(0);
+	});
+
+	test('AS-07 View-all drawer shows paginated list of all contributors', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await page.getByTestId('top-contributors-view-all').click();
+
+		const drawer = page.getByTestId('top-contributors-drawer');
+		await expect(drawer).toBeVisible();
+		await expect(page.getByText('Viewing All Contributors')).toBeVisible();
+		await expect(drawer.getByTestId('top-contributors-row')).toHaveCount(10);
+		await expect(drawer.locator('.total')).toHaveText(
+			` of ${alertHistory.total}`,
+		);
+	});
+
+	test('AS-07b drawer opens from deep link with ?viewAllTopContributors=true', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId, {
+			viewAllTopContributors: 'true',
+		});
+
+		await expect(page.getByTestId('top-contributors-drawer')).toBeVisible();
+	});
+
+	test('AS-08 View-all click adds ?viewAllTopContributors=true to URL', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+		await page.getByTestId('top-contributors-view-all').click();
+
+		await expect(page).toHaveURL(/[?&]viewAllTopContributors=true/);
+		await expect(page.getByTestId('top-contributors-drawer')).toBeVisible();
+	});
+
+	test('AS-10 contributor rows show related-logs link for logs-based rules', async ({
+		authedPage: page,
+		alertHistory,
+	}) => {
+		await gotoAlertHistory(page, alertHistory.ruleId);
+
+		await page
+			.getByTestId('top-contributors-card')
+			.getByTestId('top-contributors-row')
+			.first()
+			.getByTestId('top-contributors-row-count')
+			.click();
+
+		await expect(page.getByTestId('alert-popover-view-logs')).toBeVisible();
+		await expect(page.getByTestId('alert-popover-view-traces')).toHaveCount(0);
+	});
+});

tests/e2e/tests/alerts/list/columns.spec.ts

@@ -0,0 +1,74 @@
+import { expect, test } from '../../../fixtures/alert-rules';
+import {
+	ALERT_LIST_PAGE_SIZE,
+	alertRuleRows,
+	gotoAlertList,
+} from '../../../helpers/alerts';
+
+test.describe('Alert rules list — columns', () => {
+	test('LR-01 renders all default columns (Status, Alert Name, Severity, Labels, Actions)', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+
+		for (const header of ['Status', 'Alert Name', 'Severity', 'Labels']) {
+			await expect(page.getByRole('columnheader', { name: header })).toBeVisible();
+		}
+		await expect(
+			page.getByRole('columnheader', { name: 'Actions' }),
+		).toBeVisible();
+		for (const hidden of [
+			'Created At',
+			'Created By',
+			'Updated At',
+			'Updated By',
+		]) {
+			await expect(page.getByRole('columnheader', { name: hidden })).toHaveCount(
+				0,
+			);
+		}
+
+		await expect(alertRuleRows(page)).toHaveCount(ALERT_LIST_PAGE_SIZE);
+		await expect(page.getByTestId('alert-columns-button')).toBeVisible();
+	});
+
+	// eslint-disable-next-line playwright/expect-expect -- documented coverage gap
+	test('LR-02 shows empty state when no rules exist', async () => {
+		test.skip(
+			true,
+			'AlertsEmptyState needs a zero-rule workspace; unreachable without ' +
+				'tearing down SEED-B mid-suite. Covered by the component test.',
+		);
+	});
+
+	test('LR-10 column selector hides and shows a column', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+		await expect(
+			page.getByRole('columnheader', { name: 'Severity' }),
+		).toBeVisible();
+
+		await page.getByTestId('alert-columns-button').click();
+		await page.getByText('Toggle Columns').waitFor();
+		const severityToggle = page.locator('label', { hasText: 'Severity' });
+		await severityToggle.click();
+
+		await expect(
+			page.getByRole('columnheader', { name: 'Severity' }),
+		).toHaveCount(0);
+
+		await page.reload();
+		await expect(
+			page.getByRole('columnheader', { name: 'Severity' }),
+		).toHaveCount(0);
+
+		await page.getByTestId('alert-columns-button').click();
+		await page.locator('label', { hasText: 'Severity' }).click();
+		await expect(
+			page.getByRole('columnheader', { name: 'Severity' }),
+		).toBeVisible();
+	});
+});

tests/e2e/tests/alerts/list/navigation.spec.ts

@@ -0,0 +1,88 @@
+import { expect, test } from '../../../fixtures/alert-rules';
+import { alertRuleRows, gotoAlertList } from '../../../helpers/alerts';
+
+test.describe('Alert rules list — navigation', () => {
+	test('LR-11 row click opens the overview page', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+
+		await alertRuleRows(page).first().click();
+
+		await expect(page).toHaveURL(/\/alerts\/overview\?/);
+		await expect(page).toHaveURL(/[?&]ruleId=/);
+		await expect(page).toHaveURL(/[?&]compositeQuery=/);
+		await expect(page).toHaveURL(/[?&]panelTypes=/);
+	});
+
+	test('LR-12 ctrl/cmd-click opens the overview in a new tab', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+
+		// Bounded on purpose. This scenario is intermittently red (~1 in 5 at
+		// --workers=1, worse under parallel load): the ctrl+click lands, one or
+		// more popups open, and the `page` event never arrives. Unbounded, the
+		// wait burns the whole test timeout — 120s in a mutation run — which made
+		// it the single largest item on the critical path. The flake is *not*
+		// fixed by this; it just costs seconds instead of minutes when it trips.
+		const [newPage] = await Promise.all([
+			page.context().waitForEvent('page', { timeout: 15_000 }),
+			alertRuleRows(page)
+				.first()
+				.click({ modifiers: ['ControlOrMeta'] }),
+		]);
+
+		await newPage.waitForLoadState();
+		expect(newPage.url()).toContain('/alerts/overview');
+		expect(newPage.url()).toContain('ruleId=');
+		await newPage.close();
+	});
+
+	test('LR-13 actions menu Edit and Edit in New Tab navigate correctly', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+
+		await alertRuleRows(page).first().getByTestId('alert-actions').click();
+		await page.getByRole('menuitem', { name: 'Edit in New Tab' }).waitFor();
+
+		const [newPage] = await Promise.all([
+			page.context().waitForEvent('page'),
+			page.getByRole('menuitem', { name: 'Edit in New Tab' }).click(),
+		]);
+		await newPage.waitForLoadState();
+		expect(newPage.url()).toContain('/alerts/overview');
+		await newPage.close();
+
+		await alertRuleRows(page).first().getByTestId('alert-actions').click();
+		await page.getByRole('menuitem', { name: 'Edit', exact: true }).click();
+
+		await expect(page).toHaveURL(/\/alerts\/overview\?/);
+		await expect(page).toHaveURL(/[?&]ruleId=/);
+	});
+
+	test('LR-17 New Alert button navigates to alert creation', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+
+		await page.getByTestId('list-alerts-new-alert-button').click();
+
+		await expect(page).toHaveURL(/\/alerts\/new/);
+	});
+
+	// eslint-disable-next-line playwright/expect-expect -- documented coverage gap
+	test('LR-18 shows ErrorEmptyState when list fails to load', async () => {
+		test.skip(
+			true,
+			'Not covered: the suite never stubs network, and there is no server-side ' +
+				'way to make GET /api/v1/rules fail on demand. Left explicitly ' +
+				'untested rather than mocked.',
+		);
+	});
+});

tests/e2e/tests/alerts/list/pagination-sort.spec.ts

@@ -0,0 +1,58 @@
+import { expect, test } from '../../../fixtures/alert-rules';
+import {
+	ALERT_LIST_PAGE_SIZE,
+	alertRuleRows,
+	gotoAlertList,
+} from '../../../helpers/alerts';
+
+test.describe('Alert rules list — pagination and sorting', () => {
+	test('LR-07 navigates between pages', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+
+		await expect(page.getByTestId('pagination-total-count')).toContainText(
+			`of ${alertList.count}`,
+		);
+		await expect(alertRuleRows(page)).toHaveCount(ALERT_LIST_PAGE_SIZE);
+
+		await page.getByLabel('Go to next page').click();
+
+		await expect(page).toHaveURL(/[?&]page=2/);
+		await expect(alertRuleRows(page)).toHaveCount(
+			alertList.count - ALERT_LIST_PAGE_SIZE,
+		);
+		await expect(page.getByTestId('pagination-total-count')).toContainText(
+			`${ALERT_LIST_PAGE_SIZE + 1} - ${alertList.count}`,
+		);
+	});
+
+	test('LR-08 changes page size', async ({ authedPage: page, alertList }) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+		await expect(alertRuleRows(page)).toHaveCount(ALERT_LIST_PAGE_SIZE);
+
+		await page.getByTestId('pagination-page-size').click();
+		await page.getByRole('option', { name: '20', exact: true }).click();
+
+		await expect(page).toHaveURL(/[?&]limit=20/);
+		await expect(alertRuleRows(page)).toHaveCount(alertList.count);
+	});
+
+	test('LR-09 sorts by column header click', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+
+		const firstCell = alertRuleRows(page).first();
+		const ascFirst = await firstCell.textContent();
+
+		await page.getByRole('button', { name: 'Alert Name' }).click();
+		await expect(page).toHaveURL(/[?&]orderBy=/);
+
+		await page.getByRole('button', { name: 'Alert Name' }).click();
+		await expect(page).toHaveURL(/[?&]orderBy=/);
+		await expect(alertRuleRows(page).first()).not.toHaveText(ascFirst ?? '');
+	});
+});

tests/e2e/tests/alerts/list/row-actions.spec.ts

@@ -0,0 +1,92 @@
+import { expect, test } from '../../../fixtures/alert-rules';
+import { alertRuleRows, gotoAlertList } from '../../../helpers/alerts';
+
+test.describe('Alert rules list — row actions', () => {
+	test('LR-14 Disable then Enable toggles the rule state', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const name = `e2e-alert-row-toggle-${Date.now()}`;
+		const ruleId = await ownedRules.threshold(name);
+
+		await gotoAlertList(page, { search: name });
+		const row = alertRuleRows(page).first();
+		await expect(row.getByTestId(`alert-row-${ruleId}-state`)).toHaveText('OK');
+
+		await row.getByTestId('alert-actions').click();
+		await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					res.url().includes(`/api/v2/rules/${ruleId}`) &&
+					res.request().method() === 'PATCH',
+			),
+			page.getByRole('menuitem', { name: 'Disable' }).click(),
+		]);
+
+		await expect(row.getByTestId(`alert-row-${ruleId}-state`)).toHaveText(
+			'Disabled',
+		);
+
+		await row.getByTestId('alert-actions').click();
+		await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					res.url().includes(`/api/v2/rules/${ruleId}`) &&
+					res.request().method() === 'PATCH',
+			),
+			page.getByRole('menuitem', { name: 'Enable' }).click(),
+		]);
+
+		await expect(row.getByTestId(`alert-row-${ruleId}-state`)).toHaveText('OK');
+	});
+
+	test('LR-15 Clone creates a copy and shows success toast', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const name = `e2e-alert-row-clone-${Date.now()}`;
+		await ownedRules.threshold(name);
+
+		await gotoAlertList(page, { search: name });
+		await alertRuleRows(page).first().getByTestId('alert-actions').click();
+
+		const [createResponse] = await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					/\/api\/v\d\/rules$/.test(new URL(res.url()).pathname) &&
+					res.request().method() === 'POST',
+			),
+			page.getByRole('menuitem', { name: 'Clone' }).click(),
+		]);
+
+		await ownedRules.register(createResponse);
+
+		await expect(page.getByText('Alert cloned successfully')).toBeVisible();
+
+		await gotoAlertList(page, { search: name });
+		await expect(page.getByText(`${name} - Copy`)).toBeVisible();
+	});
+
+	test('LR-16 Delete removes the rule and shows success toast', async ({
+		authedPage: page,
+		ownedRules,
+	}) => {
+		const name = `e2e-alert-row-delete-${Date.now()}`;
+		const ruleId = await ownedRules.threshold(name);
+
+		await gotoAlertList(page, { search: name });
+		await alertRuleRows(page).first().getByTestId('alert-actions').click();
+
+		await Promise.all([
+			page.waitForResponse(
+				(res) =>
+					res.url().includes(`/api/v2/rules/${ruleId}`) &&
+					res.request().method() === 'DELETE',
+			),
+			page.getByRole('menuitem', { name: 'Delete' }).click(),
+		]);
+
+		await expect(page.getByText('Alert deleted successfully')).toBeVisible();
+		await expect(page.getByText(name, { exact: true })).toHaveCount(0);
+	});
+});

tests/e2e/tests/alerts/list/search.spec.ts

@@ -0,0 +1,113 @@
+import { expect, test } from '../../../fixtures/alert-rules';
+import {
+	ALERT_LIST_PAGE_SIZE,
+	alertRuleRows,
+	expectFirstPage,
+	gotoAlertList,
+	SEED_B_SEVERITIES,
+} from '../../../helpers/alerts';
+
+test.describe('Alert rules list — search', () => {
+	test('LR-03 filters by name', async ({ authedPage: page, alertList }) => {
+		await gotoAlertList(page);
+
+		await page
+			.getByTestId('list-alerts-search-input')
+			.fill(`${alertList.namePrefix}-03`);
+
+		await expect(page).toHaveURL(new RegExp(`search=${alertList.namePrefix}-03`));
+		await expect(alertRuleRows(page)).toHaveCount(1);
+		await expect(page.getByText(`${alertList.namePrefix}-03`)).toBeVisible();
+	});
+
+	test('LR-04 filters by severity and by label', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page);
+		const search = page.getByTestId('list-alerts-search-input');
+
+		const perSeverity = Math.floor(alertList.count / SEED_B_SEVERITIES.length);
+
+		await search.fill('warning');
+		await expect(page).toHaveURL(/search=warning/);
+		await expect(alertRuleRows(page)).not.toHaveCount(0);
+		for (const row of await alertRuleRows(page).all()) {
+			await expect(row).toContainText('warning');
+		}
+		expect(await alertRuleRows(page).count()).toBeGreaterThanOrEqual(perSeverity);
+
+		await search.fill(alertList.paymentsLabel);
+		await expect(page).toHaveURL(new RegExp(`search=${alertList.paymentsLabel}`));
+		await expect(alertRuleRows(page)).toHaveCount(alertList.count / 2);
+	});
+
+	test('LR-05 shows no-results state with clear button', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { search: alertList.namePrefix });
+
+		await page
+			.getByTestId('list-alerts-search-input')
+			.fill('no-such-alert-anywhere');
+
+		await expect(page.getByText('No matching alert rules')).toBeVisible();
+
+		await page.getByRole('button', { name: 'Clear Search' }).click();
+
+		await expect(page).not.toHaveURL(/search=/);
+		await expect(alertRuleRows(page)).toHaveCount(ALERT_LIST_PAGE_SIZE);
+	});
+
+	test('LR-06 resets pagination when searching', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		await gotoAlertList(page, { page: '2' });
+		await expect(page).toHaveURL(/[?&]page=2/);
+
+		await page.getByTestId('list-alerts-search-input').fill(alertList.namePrefix);
+
+		await expectFirstPage(page);
+	});
+
+	test('LR-19 state and severity filters intersect, they do not union', async ({
+		authedPage: page,
+		alertList,
+	}) => {
+		const perSeverity = alertList.count / SEED_B_SEVERITIES.length;
+		const scoped = { search: alertList.namePrefix };
+
+		// One filter kind: a third of the batch.
+		await gotoAlertList(page, {
+			...scoped,
+			alertRulesFilters: JSON.stringify(['severity:warning']),
+		});
+		await expect(alertRuleRows(page)).toHaveCount(perSeverity);
+		for (const row of await alertRuleRows(page).all()) {
+			await expect(row).toContainText('warning');
+		}
+
+		// Both kinds, both satisfied — seeded rules never fire, so they sit in
+		// `inactive`. The intersection is unchanged.
+		await gotoAlertList(page, {
+			...scoped,
+			alertRulesFilters: JSON.stringify(['severity:warning', 'state:inactive']),
+		});
+		await expect(alertRuleRows(page)).toHaveCount(perSeverity);
+
+		// Both kinds, only one satisfied. Under AND this is empty; under OR the
+		// severity match alone would still surface all `perSeverity` rules.
+		await gotoAlertList(
+			page,
+			{
+				...scoped,
+				alertRulesFilters: JSON.stringify(['severity:warning', 'state:firing']),
+			},
+			{ expectRows: false },
+		);
+		await expect(alertRuleRows(page)).toHaveCount(0);
+		await expect(page.getByText('No matching alert rules')).toBeVisible();
+	});
+});

tests/e2e/tests/alerts/page.spec.ts

@@ -0,0 +1,130 @@
+import { expect, test } from '../../fixtures/alert-rules';
+import { ALERTS_LIST_PATH } from '../../helpers/alerts';
+import { watchConsole } from '../../helpers/common';
+
+// AL-* — the Alerts page shell: the four top-level tabs, how they map to
+// `?tab=`, and a navigation smoke check per tab. Tab *internals* (channel CRUD,
+// planned downtime, routing policies) are deliberately out of scope — each
+// deserves its own spec file.
+
+const TAB_NAMES = {
+	triggered: /triggered alerts/i,
+	rules: /alert rules/i,
+	channels: /notification channels/i,
+	configuration: /configuration/i,
+};
+
+test.describe('Alerts page shell', () => {
+	test('AL-01 all four top-level tabs render', async ({ authedPage: page }) => {
+		await page.goto(ALERTS_LIST_PATH);
+
+		for (const name of Object.values(TAB_NAMES)) {
+			await expect(page.getByRole('tab', { name })).toBeVisible();
+		}
+	});
+
+	test('AL-02 default tab is Alert Rules', async ({ authedPage: page }) => {
+		await page.goto(ALERTS_LIST_PATH);
+
+		// No `tab` param at all — `getActiveKey()` falls back to AlertRules.
+		await expect(page).toHaveURL(ALERTS_LIST_PATH);
+		await expect(
+			page.getByRole('tab', { name: TAB_NAMES.rules }),
+		).toHaveAttribute('aria-selected', 'true');
+		// This spec seeds no rules, so the pane may render either the table (with
+		// its search input) or `AlertsEmptyState` depending on what neighbouring
+		// specs have in flight. Assert the pane itself, not one of its variants —
+		// `ListAlertRules` hides the search input entirely in the empty state.
+		await expect(
+			page
+				.getByRole('heading', { name: 'Alert Rules' })
+				.or(page.getByTestId('list-alerts-search-input')),
+		).toBeVisible();
+	});
+
+	test('AL-03 tab switch writes ?tab= and clears subTab', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(ALERTS_LIST_PATH);
+
+		await page.getByRole('tab', { name: TAB_NAMES.triggered }).click();
+		await expect(page).toHaveURL(/[?&]tab=TriggeredAlerts/);
+
+		await page.getByRole('tab', { name: TAB_NAMES.channels }).click();
+		await expect(page).toHaveURL(/[?&]tab=Channels/);
+
+		// Entering Configuration adds the default subTab...
+		await page.getByRole('tab', { name: TAB_NAMES.configuration }).click();
+		await expect(page).toHaveURL(/[?&]tab=Configuration/);
+		await expect(page).toHaveURL(/[?&]subTab=planned-downtime/);
+
+		// ...and leaving it drops subTab entirely (onChange rebuilds the search
+		// from scratch rather than mutating the existing params).
+		await page.getByRole('tab', { name: TAB_NAMES.rules }).click();
+		await expect(page).toHaveURL(/[?&]tab=AlertRules/);
+		await expect(page).not.toHaveURL(/subTab=/);
+	});
+
+	test('AL-04 Configuration deep-link', async ({ authedPage: page }) => {
+		// Deep-linking without subTab: the inner Tabs falls back to
+		// planned-downtime for its activeKey without writing it to the URL, so
+		// assert the rendered tab, not the param.
+		await page.goto(`${ALERTS_LIST_PATH}?tab=Configuration`);
+		await expect(
+			page.getByRole('tab', { name: /planned downtime/i }),
+		).toHaveAttribute('aria-selected', 'true');
+
+		await page.goto(
+			`${ALERTS_LIST_PATH}?tab=Configuration&subTab=routing-policies`,
+		);
+		await expect(
+			page.getByRole('tab', { name: /routing policies/i }),
+		).toHaveAttribute('aria-selected', 'true');
+	});
+
+	test('AL-05 Triggered Alerts tab smoke', async ({ authedPage: page }) => {
+		// Known application defect, out of scope here: an icon on this tab renders
+		// with a NaN dimension ("<svg> attribute viewBox: Expected number, \"0 0 32
+		// NaN\""). Ignore that one string so the rest of the console guard still
+		// has teeth.
+		const watch = watchConsole(page, {
+			ignore: ['attribute viewBox: Expected number'],
+		});
+
+		await page.goto(`${ALERTS_LIST_PATH}?tab=TriggeredAlerts`);
+
+		// A fresh stack has no firing instances, so either the table or the empty
+		// state is correct — what matters is that the tab mounts and its controls
+		// render.
+		await expect(page.getByTestId('triggered-alerts-search-input')).toBeVisible();
+		expect(watch.errors).toEqual([]);
+		expect(watch.failedResponses).toEqual([]);
+	});
+
+	test('AL-06 Notification Channels tab smoke', async ({
+		authedPage: page,
+		alertChannel,
+	}) => {
+		// The worker's channel gives this tab a row to render.
+		await page.goto(`${ALERTS_LIST_PATH}?tab=Channels`);
+
+		await expect(page.getByText(alertChannel.name)).toBeVisible();
+		await expect(
+			page.getByRole('button', { name: /new alert channel/i }),
+		).toBeVisible();
+	});
+
+	test('AL-07 tab state survives reload', async ({ authedPage: page }) => {
+		await page.goto(`${ALERTS_LIST_PATH}?tab=Channels`);
+		await expect(
+			page.getByRole('tab', { name: TAB_NAMES.channels }),
+		).toHaveAttribute('aria-selected', 'true');
+
+		await page.reload();
+
+		await expect(page).toHaveURL(/[?&]tab=Channels/);
+		await expect(
+			page.getByRole('tab', { name: TAB_NAMES.channels }),
+		).toHaveAttribute('aria-selected', 'true');
+	});
+});