admin: live query detail becomes a modal, live/history and period pickers become tabs and radios, client delete confirms in a dialog

the streamed-query detail panel is now a rac modal dialog with focus containment and restore. the live/history switch is rac tabs driven by the url, the overview period picker is a rac radio group, and the clients delete flow uses the shared confirm dialog; an authority turn keeps the dialog open and withdraws only the destructive action.

admin/src/features/activity/ActivityPage.test.tsx

@@ -12,6 +12,7 @@ import { createAppRouter } from "@/routes";
 import { health } from "@/lib/healthFixture";
 import type { Client, Coverage, QueriesPage, QueryRow } from "@/lib/types";
 import { queryRow } from "@/features/provenance/provenanceFixture";
+import { FakeEventSource } from "./fakeEventSource";
 
 function client(id: number, ip: string, name: string, learnedName: string): Client {
 	return {
@@ -544,6 +545,40 @@ test("the policy simulation is reachable from the header, with no rows to click
 	expect(history.location.pathname).toBe("/activity/test");
 });
 
+test("the mode switch is a tab list whose selection is the url, and it keeps the filters", async () => {
+	// Live opens a stream as soon as its panel mounts, so the switch cannot be
+	// exercised without one; the fake stands in for the browser's EventSource.
+	vi.stubGlobal(
+		"EventSource",
+		class {
+			constructor(url: string) {
+				return new FakeEventSource(url) as unknown as EventSource;
+			}
+		},
+	);
+	const { history } = renderPage("/activity?mode=history&domain=ads&blocked=true");
+	await screen.findByText("ads.example");
+
+	const tabs = within(screen.getByRole("tablist", { name: "Activity mode" }));
+	expect(tabs.getAllByRole("tab").map((tab) => tab.textContent)).toEqual(["History", "Live"]);
+	expect(tabs.getByRole("tab", { name: "History", selected: true })).toBeTruthy();
+	expect(tabs.getByRole("tab", { name: "Live", selected: false })).toBeTruthy();
+
+	fireEvent.click(tabs.getByRole("tab", { name: "Live" }));
+
+	await waitFor(() => expect(history.location.search).toContain("mode=live"));
+	// The investigation survives the switch: both filters are still in the URL.
+	expect(history.location.search).toContain("domain=ads");
+	expect(history.location.search).toContain("blocked=true");
+	expect(
+		within(screen.getByRole("tablist", { name: "Activity mode" })).getByRole("tab", {
+			name: "Live",
+			selected: true,
+		}),
+	).toBeTruthy();
+	expect(await screen.findByText(/these filters apply to history only/)).toBeTruthy();
+});
+
 test("Clear empties the url as well as the form", async () => {
 	const { history } = renderPage("/activity?mode=history&domain=ads&blocked=true");
 	await screen.findByText("ads.example");

admin/src/features/activity/ActivityPage.tsx

@@ -10,6 +10,7 @@
 
 import { Link, useNavigate, useSearch } from "@tanstack/react-router";
 import * as stylex from "@stylexjs/stylex";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 import { styles as shared } from "@/ui/styles";
 import { colors } from "@/ui/tokens.stylex";
 import ActivityFilters, { NO_FILTERS, type AppliedFilters } from "./ActivityFilters";
@@ -53,6 +54,13 @@ const styles = stylex.create({
 		fontWeight: 500,
 		cursor: "pointer",
 	},
+	/** A Tab is a `div` with a roving tabindex, so RAC drives the ring, not `:focus-visible`. */
+	modeFocusVisible: {
+		outlineWidth: 2,
+		outlineStyle: "solid",
+		outlineColor: colors.focus,
+		outlineOffset: 2,
+	},
 	modeIdle: {
 		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
 		color: { default: colors.textSecondary, ":hover": colors.text },
@@ -76,8 +84,30 @@ const styles = stylex.create({
 		lineHeight: "1.25rem",
 		color: colors.textMuted,
 	},
+	panel: {
+		outlineStyle: "none",
+	},
+	/**
+	 * A panel with nothing tabbable in it — an empty or loading history — is given
+	 * a tabindex by RAC so the reader can still reach its content, so it has to be
+	 * able to show that it holds the focus.
+	 */
+	panelFocusVisible: {
+		outlineWidth: 2,
+		outlineStyle: "solid",
+		outlineColor: colors.focus,
+		outlineOffset: 2,
+	},
+	/** Explicit, so RAC's default `react-aria-Tabs` class does not land instead. */
+	tabsRoot: {
+		display: "block",
+	},
 });
 
+function panelClass({ isFocusVisible }: { isFocusVisible: boolean }): string {
+	return stylex.props(styles.panel, isFocusVisible && styles.panelFocusVisible).className ?? "";
+}
+
 export default function ActivityPage() {
 	const search = useSearch({ from: "/shell/activity" });
 	const navigate = useNavigate({ from: "/activity" });
@@ -97,56 +127,66 @@ export default function ActivityPage() {
 
 	return (
 		<section>
-			<div {...stylex.props(styles.header)}>
-				<h1 {...stylex.props(styles.heading)}>Activity</h1>
-				<div role="group" aria-label="Activity mode" {...stylex.props(styles.switch)}>
-					{MODES.map((option) => {
-						const selected = option.mode === search.mode;
-						return (
-							<button
+			{/*
+			 * The selected tab is the URL's `mode` and nothing else. RAC would hold
+			 * the selection itself, but a second copy of it would fight the back
+			 * button, so the search parameter stays the only state there is.
+			 */}
+			<Tabs
+				selectedKey={search.mode}
+				onSelectionChange={(key) => selectMode(key as ActivityMode)}
+				className={() => stylex.props(styles.tabsRoot).className ?? ""}
+			>
+				<div {...stylex.props(styles.header)}>
+					<h1 {...stylex.props(styles.heading)}>Activity</h1>
+					<TabList
+						aria-label="Activity mode"
+						className={() => stylex.props(styles.switch).className ?? ""}
+					>
+						{MODES.map((option) => (
+							<Tab
 								key={option.mode}
-								type="button"
-								aria-pressed={selected}
-								onClick={() => selectMode(option.mode)}
-								{...stylex.props(
-									styles.modeButton,
-									selected ? styles.modeSelected : styles.modeIdle,
-									shared.focusRing,
-								)}
+								id={option.mode}
+								className={({ isSelected, isFocusVisible }) =>
+									stylex.props(
+										styles.modeButton,
+										isSelected ? styles.modeSelected : styles.modeIdle,
+										isFocusVisible && styles.modeFocusVisible,
+									).className ?? ""
+								}
 							>
 								{option.label}
-							</button>
-						);
-					})}
+							</Tab>
+						))}
+					</TabList>
+					<Link to="/activity/test" {...stylex.props(styles.simulationLink, shared.focusRing)}>
+						Current policy simulation
+					</Link>
 				</div>
-				<Link to="/activity/test" {...stylex.props(styles.simulationLink, shared.focusRing)}>
-					Current policy simulation
-				</Link>
-			</div>
 
-			{/*
-			 * Remounted whenever the applied search changes, which is what makes
-			 * the back button work: the draft is derived state, and the browser
-			 * moving the URL under it has to move the form with it.
-			 */}
-			<ActivityFilters
-				key={`${search.domain ?? ""}|${search.client ?? ""}|${String(search.blocked)}|${String(search.since)}|${String(search.until)}`}
-				applied={search}
-				isDisabled={live}
-				onApply={apply}
-				onClear={() => apply(NO_FILTERS)}
-			/>
+				{/*
+				 * Remounted whenever the applied search changes, which is what makes
+				 * the back button work: the draft is derived state, and the browser
+				 * moving the URL under it has to move the form with it.
+				 */}
+				<ActivityFilters
+					key={`${search.domain ?? ""}|${search.client ?? ""}|${String(search.blocked)}|${String(search.since)}|${String(search.until)}`}
+					applied={search}
+					isDisabled={live}
+					onApply={apply}
+					onClear={() => apply(NO_FILTERS)}
+				/>
 
-			{live ? (
-				<>
+				<TabPanel id="history" className={panelClass}>
+					<HistoryActivity search={search} />
+				</TabPanel>
+				<TabPanel id="live" className={panelClass}>
 					<p {...stylex.props(styles.liveNote)}>
 						The stream carries every query the server answers; these filters apply to history only.
 					</p>
 					<LiveActivity origin={search} />
-				</>
-			) : (
-				<HistoryActivity search={search} />
-			)}
+				</TabPanel>
+			</Tabs>
 		</section>
 	);
 }

admin/src/features/activity/LiveActivity.test.tsx

@@ -57,7 +57,17 @@ function json(payload: unknown): Response {
 	return new Response(JSON.stringify(payload), { status: 200, headers: { "content-type": "application/json" } });
 }
 
-function stubFetch(handler: (url: string) => Response | Promise<Response> = () => json({})) {
+/**
+ * The empty history page. Live mode asks for no query pages, but switching back
+ * to History does, and a page-shaped response is the only honest answer there.
+ */
+const EMPTY_PAGE = { queries: [], next_before: null, coverage: { complete: true, available_since: 0 } };
+
+function defaultHandler(url: string): Response {
+	return json(url === "/api/queries" || url.startsWith("/api/queries?") ? EMPTY_PAGE : {});
+}
+
+function stubFetch(handler: (url: string) => Response | Promise<Response> = defaultHandler) {
 	fetchMock = vi.fn((input: RequestInfo | URL) => {
 		const url = String(input);
 		if (url === "/api/version") return Promise.resolve(json(VERSION));
@@ -256,7 +266,40 @@ test("a recovered row links to its stored detail; a streamed one opens in place
 	expect(screen.getByRole("button", { name: "streamed.example" })).toBeTruthy();
 });
 
-test("a streamed row opens its own provenance, from the keyboard as well as the pointer", async () => {
+/** The open detail. Named by its heading, so the query proves the name is visible. */
+function detailDialog(): HTMLElement {
+	return screen.getByRole("dialog", { name: "Streamed query" });
+}
+
+/** React Aria's ModalOverlay, two levels out from the dialog it wraps. */
+function backdrop(): HTMLElement {
+	return detailDialog().parentElement!.parentElement!;
+}
+
+/**
+ * Activate a control the way a keyboard does. jsdom runs no default action for
+ * Enter on a button, so the click a browser would then dispatch is issued here;
+ * `detail: 0` is what marks it as keyboard-driven rather than pointer-driven,
+ * and is the flag React Aria itself reads.
+ */
+function pressWithKeyboard(control: HTMLElement) {
+	act(() => control.focus());
+	fireEvent.keyDown(control, { key: "Enter" });
+	fireEvent.click(control, { detail: 0 });
+	fireEvent.keyUp(control, { key: "Enter" });
+}
+
+/** Activate a control the way a mouse does, through the full pointer sequence. */
+function pressWithMouse(control: HTMLElement) {
+	fireEvent.pointerDown(control, { pointerType: "mouse", button: 0 });
+	fireEvent.pointerUp(control, { pointerType: "mouse", button: 0 });
+	fireEvent.click(control, { detail: 1 });
+}
+
+test.each([
+	["the pointer", pressWithMouse],
+	["the keyboard", pressWithKeyboard],
+])("a streamed row opens its provenance in a named dialog, from %s", async (_label, press) => {
 	await openLive();
 	act(() =>
 		sources[0]!.emit(
@@ -273,69 +316,108 @@ test("a streamed row opens its own provenance, from the keyboard as well as the
 	// only way to lose that is to opt out of it, which nothing here may do.
 	expect(trigger.tagName).toBe("BUTTON");
 	expect(trigger.getAttribute("tabindex")).toBeNull();
-	act(() => trigger.focus());
-	expect(document.activeElement).toBe(trigger);
+	// The row opens a dialog, so it says so; what it no longer claims is to
+	// expand a region that stays in the page.
+	expect(trigger.getAttribute("aria-haspopup")).toBe("dialog");
+	expect(trigger.getAttribute("aria-expanded")).toBeNull();
+	expect(trigger.getAttribute("aria-controls")).toBeNull();
 
-	fireEvent.click(trigger);
-	const heading = screen.getByRole("heading", { level: 1, name: "streamed.example" });
-	expect(heading).toBeTruthy();
-	const panel = heading.closest("div")!.parentElement!;
-	expect(within(panel).getByText("Blocked locally")).toBeTruthy();
-	expect(panel.textContent).toContain("the query log may not have written it yet");
+	press(trigger);
 
-	fireEvent.click(screen.getByRole("button", { name: "Close" }));
-	expect(screen.queryByRole("heading", { level: 1, name: "streamed.example" })).toBeNull();
+	const dialog = detailDialog();
+	expect(within(dialog).getByRole("heading", { level: 1, name: "streamed.example" })).toBeTruthy();
+	expect(within(dialog).getByText("Blocked locally")).toBeTruthy();
+	expect(dialog.textContent).toContain("the query log may not have written it yet");
+	// React Aria may defer the move by a frame, depending on the modality it read
+	// from the activation, so the wait is the assertion rather than a workaround.
+	await waitFor(() => expect(dialog.contains(document.activeElement)).toBe(true));
+	expect(within(dialog).getByRole("button", { name: "Close" })).toBeTruthy();
 });
 
-test("the detail takes focus when a row opens it and hands it back when it closes", async () => {
+test("tabbing forward and backward stays inside the open dialog", async () => {
 	await openLive();
 	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));
+	fireEvent.click(screen.getByRole("button", { name: "streamed.example" }));
 
-	const trigger = screen.getByRole("button", { name: "streamed.example" });
-	expect(trigger.getAttribute("aria-expanded")).toBe("false");
-	expect(trigger.getAttribute("aria-controls")).toBeNull();
+	const dialog = detailDialog();
+	await waitFor(() => expect(dialog.contains(document.activeElement)).toBe(true));
+	// The related links land asynchronously; tabbing before them would walk a
+	// shorter dialog than the reader ever sees.
+	await waitFor(() => expect(within(dialog).getAllByRole("link").length).toBeGreaterThan(1));
 
-	// A native button activates on Enter and Space; jsdom does not synthesize
-	// the click those keys fire, so the click is the activation.
-	act(() => trigger.focus());
-	fireEvent.click(trigger);
-
-	const panel = screen.getByRole("group", { name: "Streamed query" });
-	expect(trigger.getAttribute("aria-expanded")).toBe("true");
-	expect(trigger.getAttribute("aria-controls")).toBe(panel.id);
-	// The panel is inserted above the table, behind the trigger in tab order, so
-	// the only thing that keeps a forward tab inside it is focus moving in.
-	expect(panel.compareDocumentPosition(trigger) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
-	expect(document.activeElement).toBe(panel);
-	expect(panel.contains(screen.getByRole("button", { name: "Close" }))).toBe(true);
-
-	fireEvent.click(screen.getByRole("button", { name: "Close" }));
-	expect(screen.queryByRole("group", { name: "Streamed query" })).toBeNull();
-	expect(document.activeElement).toBe(trigger);
-	expect(trigger.getAttribute("aria-expanded")).toBe("false");
-	expect(trigger.getAttribute("aria-controls")).toBeNull();
+	const visited = new Set<Element>();
+	for (const shiftKey of [false, false, false, false, false, false, true, true, true, true]) {
+		fireEvent.keyDown(document.activeElement!, { key: "Tab", shiftKey });
+		fireEvent.keyUp(document.activeElement!, { key: "Tab", shiftKey });
+		expect(dialog.contains(document.activeElement)).toBe(true);
+		visited.add(document.activeElement!);
+	}
+	// Containment that never moved focus would satisfy the check above without
+	// trapping anything, so the walk has to have actually walked.
+	expect(visited.size).toBeGreaterThan(1);
 });
 
-test("opening a second row moves the expanded state and the focus with it", async () => {
+test.each([
+	["the Close button", () => fireEvent.click(within(detailDialog()).getByRole("button", { name: "Close" }))],
+	["Escape", () => fireEvent.keyDown(detailDialog(), { key: "Escape" })],
+	[
+		"a click on the backdrop",
+		() => {
+			const overlay = backdrop();
+			fireEvent.pointerDown(overlay, { pointerType: "mouse", button: 0 });
+			fireEvent.pointerUp(overlay, { pointerType: "mouse", button: 0 });
+			fireEvent.click(overlay, { detail: 1 });
+		},
+	],
+])("%s closes the dialog and returns focus to the row that opened it", async (_label, dismiss) => {
 	await openLive();
-	act(() => {
-		sources[0]!.emit("query", frame(1000, "first.example"));
-		sources[0]!.emit("query", frame(1001, "second.example"));
-	});
+	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));
+	const trigger = screen.getByRole("button", { name: "streamed.example" });
+	act(() => trigger.focus());
+	fireEvent.click(trigger);
+	expect(detailDialog()).toBeTruthy();
 
-	const first = screen.getByRole("button", { name: "first.example" });
-	const second = screen.getByRole("button", { name: "second.example" });
-	fireEvent.click(first);
-	fireEvent.click(second);
+	dismiss();
 
-	const panel = screen.getByRole("group", { name: "Streamed query" });
-	expect(within(panel).getByRole("heading", { level: 1, name: "second.example" })).toBeTruthy();
-	expect(document.activeElement).toBe(panel);
-	expect(first.getAttribute("aria-expanded")).toBe("false");
-	expect(second.getAttribute("aria-expanded")).toBe("true");
+	await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+	expect(document.activeElement).toBe(screen.getByRole("button", { name: "streamed.example" }));
+});
+
+test("the stream runs on behind the open dialog, and its rows land in the table on close", async () => {
+	await openLive();
+	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));
+	fireEvent.click(screen.getByRole("button", { name: "streamed.example" }));
+
+	const snapshot = detailDialog().textContent;
+	act(() => sources[0]!.emit("query", frame(1001, "arrived-while-open.example")));
+
+	// The connection is untouched: no close, no second EventSource.
+	expect(sources).toHaveLength(1);
+	expect(sources[0]!.closed).toBe(false);
+	// And the snapshot is a snapshot: nothing that arrives rewrites it.
+	expect(detailDialog().textContent).toBe(snapshot);
+
+	fireEvent.click(within(detailDialog()).getByRole("button", { name: "Close" }));
+	await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+	expect(screen.getByRole("button", { name: "arrived-while-open.example" })).toBeTruthy();
+	expect(screen.getByRole("button", { name: "streamed.example" })).toBeTruthy();
+});
+
+test("the rows and toolbar behind the dialog are out of reach while it is open", async () => {
+	await openLive();
+	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));
+	fireEvent.click(screen.getByRole("button", { name: "streamed.example" }));
+
+	// React Aria hides everything outside the modal from assistive technology
+	// and from the pointer alike, so the row and the toolbar are unreachable by
+	// role: nothing behind the dialog can be operated while it is open.
+	expect(screen.queryByRole("button", { name: "streamed.example" })).toBeNull();
+	expect(screen.queryByRole("button", { name: "Freeze" })).toBeNull();
+	expect(screen.getByRole("button", { name: "Close" })).toBeTruthy();
 
 	fireEvent.click(screen.getByRole("button", { name: "Close" }));
-	expect(document.activeElement).toBe(second);
+	await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+	expect(screen.getByRole("button", { name: "Freeze" })).toBeTruthy();
 });
 
 /**
@@ -359,23 +441,57 @@ function renderLiveWithCapacity(capacity: number) {
 	);
 }
 
-test("an open streamed detail survives the row being evicted from the ring buffer", () => {
-	renderLiveWithCapacity(5);
-	act(() => sources[0]!.emit("open"));
-	act(() => sources[0]!.emit("query", frame(1000, "evicted.example")));
-	fireEvent.click(screen.getByRole("button", { name: "evicted.example" }));
-	expect(screen.getByRole("heading", { level: 1, name: "evicted.example" })).toBeTruthy();
-
-	// One ringful more: the ring keeps the newest 5, so the selected row is gone
-	// from the table. The detail is a snapshot, not a lookup into the ring.
+/** Push one ringful of filler through a 5-row ring, evicting whatever was there. */
+function evictWithFiller() {
 	act(() => {
 		for (let index = 0; index < 5; index += 1) {
 			sources[0]!.emit("query", frame(2000 + index, `filler${index}.example`));
 		}
 	});
+}
+
+test("an open dialog's snapshot survives its row being evicted from the ring buffer", async () => {
+	renderLiveWithCapacity(5);
+	act(() => sources[0]!.emit("open"));
+	act(() => sources[0]!.emit("query", frame(1000, "evicted.example")));
+	fireEvent.click(screen.getByRole("button", { name: "evicted.example" }));
+	const snapshot = detailDialog().textContent;
+	expect(within(detailDialog()).getByRole("heading", { level: 1, name: "evicted.example" })).toBeTruthy();
+
+	// One ringful more: the ring keeps the newest 5, so the selected row is gone.
+	// The dialog holds the frame itself, not a lookup into the ring, so it neither
+	// blanks out nor closes.
+	evictWithFiller();
+	expect(detailDialog().textContent).toBe(snapshot);
+
+	fireEvent.click(within(detailDialog()).getByRole("button", { name: "Close" }));
+	await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
 	expect(screen.getAllByRole("row")).toHaveLength(6);
 	expect(screen.queryByRole("button", { name: "evicted.example" })).toBeNull();
-	expect(screen.getByRole("heading", { level: 1, name: "evicted.example" })).toBeTruthy();
+});
+
+test("closing after the source row is evicted anchors focus in the results region", async () => {
+	renderLiveWithCapacity(5);
+	act(() => sources[0]!.emit("open"));
+	act(() => sources[0]!.emit("query", frame(1000, "evicted.example")));
+	const trigger = screen.getByRole("button", { name: "evicted.example" });
+	act(() => trigger.focus());
+	fireEvent.click(trigger);
+
+	evictWithFiller();
+	expect(trigger.isConnected).toBe(false);
+
+	fireEvent.click(within(detailDialog()).getByRole("button", { name: "Close" }));
+	await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+
+	// Never the body, never whichever row happens to sit where the old one did,
+	// and never the Freeze button: a stable anchor in the region the reader was
+	// reading. React Aria's own deferred restore runs after this and, finding
+	// focus already placed, leaves it alone.
+	const region = screen.getByRole("region", { name: "Live queries" });
+	expect(document.activeElement).toBe(region);
+	await act(() => new Promise((resolve) => requestAnimationFrame(() => resolve(undefined))));
+	expect(document.activeElement).toBe(region);
 });
 
 test("the route renders the live ring at its production capacity", async () => {
@@ -391,11 +507,15 @@ test("an open streamed detail survives Freeze and Resume", async () => {
 	await openLive();
 	act(() => sources[0]!.emit("query", frame(1000, "held.example")));
 	fireEvent.click(screen.getByRole("button", { name: "held.example" }));
+	const snapshot = detailDialog().textContent;
 
-	fireEvent.click(screen.getByRole("button", { name: "Freeze" }));
-	expect(screen.getByRole("heading", { level: 1, name: "held.example" })).toBeTruthy();
-	fireEvent.click(screen.getByRole("button", { name: "Resume" }));
-	expect(screen.getByRole("heading", { level: 1, name: "held.example" })).toBeTruthy();
+	// Freeze is behind the dialog, so it is reached the way the code reaches it
+	// rather than by role, which the modal deliberately hides.
+	const freeze = () => screen.getByText("Freeze") as HTMLButtonElement;
+	act(() => freeze().click());
+	expect(detailDialog().textContent).toBe(snapshot);
+	act(() => (screen.getByText("Resume") as HTMLButtonElement).click());
+	expect(detailDialog().textContent).toBe(snapshot);
 });
 
 test("the filter row stays visible, keeps its values, and is out of the tab order", async () => {
@@ -431,7 +551,7 @@ test("live mode asks for no query pages, whatever filters the url retained", asy
 test("leaving live closes the stream, and coming back opens exactly one fresh one", async () => {
 	await openLive("/activity?mode=live&domain=ads");
 
-	fireEvent.click(screen.getByRole("button", { name: "History" }));
+	fireEvent.click(screen.getByRole("tab", { name: "History" }));
 	await screen.findByRole("button", { name: "Apply filters" });
 	expect(sources).toHaveLength(1);
 	expect(sources[0]!.closed).toBe(true);
@@ -440,7 +560,7 @@ test("leaving live closes the stream, and coming back opens exactly one fresh on
 	expect((screen.getByLabelText("Domain contains") as HTMLInputElement).value).toBe("ads");
 	expect((screen.getByLabelText("Domain contains") as HTMLInputElement).disabled).toBe(false);
 
-	fireEvent.click(screen.getByRole("button", { name: "Live" }));
+	fireEvent.click(screen.getByRole("tab", { name: "Live" }));
 	await screen.findByRole("button", { name: "Freeze" });
 	expect(sources).toHaveLength(2);
 	expect(sources[1]!.closed).toBe(false);

admin/src/features/activity/LiveActivity.tsx

@@ -1,6 +1,6 @@
 /**
- * Activity in live mode: the SSE stream, its bounded ring buffer, and the
- * in-place detail a streamed row opens.
+ * Activity in live mode: the SSE stream, its bounded ring buffer, and the modal
+ * detail a streamed row opens.
  *
  * This subtree is mounted only while the URL says `mode=live`, which is what
  * closes the EventSource on the way back to history: the connection is a
@@ -17,6 +17,7 @@ import { Link } from "@tanstack/react-router";
 import * as stylex from "@stylexjs/stylex";
 import { useClientNames } from "@/features/clients/clientNames";
 import { summarizeEvent } from "@/features/provenance/querySummary";
+import Dialog from "@/ui/Dialog";
 import { styles as shared } from "@/ui/styles";
 import { colors } from "@/ui/tokens.stylex";
 import { ActivityCells, ActivityTableHead, activityDomainLink } from "./cells";
@@ -162,29 +163,6 @@ const styles = stylex.create({
 		textDecorationLine: "underline",
 		textDecorationStyle: "dotted",
 	},
-	detailPanel: {
-		marginTop: "1rem",
-		borderRadius: "0.25rem",
-		borderWidth: 1,
-		borderStyle: "solid",
-		borderColor: colors.borderStrong,
-		backgroundColor: colors.surface,
-		padding: "1rem",
-	},
-	detailBar: {
-		display: "flex",
-		alignItems: "baseline",
-		justifyContent: "space-between",
-		gap: "0.75rem",
-	},
-	detailLabel: {
-		fontSize: "0.75rem",
-		lineHeight: "1rem",
-		fontWeight: 600,
-		letterSpacing: "0.05em",
-		textTransform: "uppercase",
-		color: colors.textMuted,
-	},
 	footnote: {
 		marginTop: "0.75rem",
 		fontSize: "0.875rem",
@@ -193,10 +171,6 @@ const styles = stylex.create({
 	},
 });
 
-/** One panel at a time, so the trigger that opened it can name it in `aria-controls`. */
-const DETAIL_PANEL_ID = "live-query-detail";
-const DETAIL_LABEL_ID = "live-query-detail-label";
-
 const PILL_LABELS: Record<StreamStatus, string> = {
 	connecting: "Connecting…",
 	open: "Live",
@@ -226,40 +200,15 @@ function StatusPill({ status }: { status: StreamStatus }) {
  *
  * The buffer is a 500-row ring that a gap merge also rewrites: a reference by
  * key would go stale under the reader while they were still reading it, and the
- * panel would blank out for no reason they could see. The snapshot is the whole
- * fact — a streamed frame carries its own provenance — so it survives eviction,
- * a merge and a Freeze/Resume, and closes only when the reader closes it or
- * leaves live mode.
+ * dialog would blank out or swap under their eyes for no reason they could see.
+ * The snapshot is the whole fact — a streamed frame carries its own provenance
+ * — so it survives eviction, a merge and a Freeze/Resume, and closes only when
+ * the reader closes it or leaves live mode. The stream behind it never stops.
  */
 function LiveDetail({ row, origin, onClose }: { row: StreamedRow; origin: ActivitySearch; onClose: () => void }) {
 	const summary = summarizeEvent(row.event);
-	const panel = useRef<HTMLDivElement>(null);
-
-	// The panel opens above the table, behind the trigger in tab order, so a
-	// forward tab from the row would walk past it. Focus moves in on open —
-	// keyed on the row, so choosing a second row moves it again — and the
-	// closer puts it back on the trigger.
-	useEffect(() => {
-		panel.current?.focus();
-	}, [row.key]);
-
 	return (
-		<div
-			ref={panel}
-			id={DETAIL_PANEL_ID}
-			tabIndex={-1}
-			role="group"
-			aria-labelledby={DETAIL_LABEL_ID}
-			{...stylex.props(styles.detailPanel)}
-		>
-			<div {...stylex.props(styles.detailBar)}>
-				<span id={DETAIL_LABEL_ID} {...stylex.props(styles.detailLabel)}>
-					Streamed query
-				</span>
-				<button type="button" onClick={onClose} {...stylex.props(shared.button, shared.focusRing)}>
-					Close
-				</button>
-			</div>
+		<Dialog title="Streamed query" size="detail" isOpen onClose={onClose}>
 			<ProvenanceDetail
 				provenance={row.event}
 				persistedId={null}
@@ -268,10 +217,11 @@ function LiveDetail({ row, origin, onClose }: { row: StreamedRow; origin: Activi
 						domain={summary.domain}
 						client={summary.client_ip}
 						ts={summary.ts}
-						origin={origin} />
+						origin={origin}
+					/>
 				}
 			/>
-		</div>
+		</Dialog>
 	);
 }
 
@@ -291,21 +241,36 @@ export default function LiveActivity({
 	const clientNames = useClientNames();
 	const [selected, setSelected] = useState<StreamedRow | null>(null);
 	const trigger = useRef<HTMLButtonElement | null>(null);
+	const results = useRef<HTMLDivElement>(null);
+	const restoring = useRef(false);
+
+	/**
+	 * Where focus lands when the dialog closes.
+	 *
+	 * React Aria restores focus itself, but in a `requestAnimationFrame` and
+	 * only while focus is still on the body — and its target is the row button,
+	 * which the ring may have evicted while the reader was reading. So this runs
+	 * in the effect that follows the focus scope's teardown and puts focus on a
+	 * connected element first: the row if it is still there, the results region
+	 * if it is not. React Aria's deferred pass then finds focus already placed
+	 * and does nothing, so the two never fight over it. If a navigation unmounts
+	 * this component the effect never runs, which is the right answer — there is
+	 * no longer a table to return to.
+	 */
+	useEffect(() => {
+		if (selected !== null || !restoring.current) return;
+		restoring.current = false;
+		const from = trigger.current;
+		trigger.current = null;
+		(from?.isConnected === true ? from : results.current)?.focus();
+	}, [selected]);
 
 	function open(row: StreamedRow, from: HTMLButtonElement) {
 		trigger.current = from;
+		restoring.current = true;
 		setSelected(row);
 	}
 
-	// The row that opened the panel takes focus back, unless the ring has
-	// already evicted it: a detached button cannot be focused, and the browser
-	// falls back to the document, which is the best available answer.
-	function close() {
-		setSelected(null);
-		trigger.current?.focus();
-		trigger.current = null;
-	}
-
 	return (
 		<>
 			<div {...stylex.props(styles.toolbar)}>
@@ -361,71 +326,81 @@ export default function LiveActivity({
 				</div>
 			)}
 
-			{selected !== null && <LiveDetail row={selected} origin={origin} onClose={close} />}
+			{/*
+			 * The region is the anchor focus falls back to when the row that
+			 * opened the dialog is gone, so it is rendered unconditionally: an
+			 * anchor that disappears with the last row is no anchor at all.
+			 */}
+			<div
+				ref={results}
+				tabIndex={-1}
+				role="region"
+				aria-label="Live queries"
+				{...stylex.props(shared.focusRing)}
+			>
+				{live.rows.length === 0 ? (
+					live.status !== "capped" && (
+						<p {...stylex.props(styles.empty)}>
+							{live.status === "open" ? "Waiting for queries…" : "No queries received yet."}
+						</p>
+					)
+				) : (
+					<>
+						<div {...stylex.props(styles.tableWrap)}>
+							<table {...stylex.props(styles.table)}>
+								<ActivityTableHead />
+								<tbody>
+									{live.rows.map((row) => {
+										const summary = summaryOf(row);
+										return (
+											<tr
+												key={row.key}
+												{...stylex.props(styles.row, summary.blocked && styles.rowBlocked)}
+											>
+												<ActivityCells
+													row={summary}
+													clientNames={clientNames}
+													renderDomain={(_id, children) =>
+														row.kind === "streamed" ? (
+															<button
+																type="button"
+																aria-haspopup="dialog"
+																onClick={(event) => open(row, event.currentTarget)}
+																{...stylex.props(
+																	styles.domainButton,
+																	activityDomainLink,
+																	shared.focusRing,
+																)}
+															>
+																{children}
+															</button>
+														) : (
+															<Link
+																to="/activity/queries/$id"
+																params={{ id: String(row.row.id) }}
+																search={origin}
+																{...stylex.props(activityDomainLink, shared.focusRing)}
+															>
+																{children}
+															</Link>
+														)
+													}
+												/>
+											</tr>
+										);
+									})}
+								</tbody>
+							</table>
+						</div>
+						<p {...stylex.props(styles.footnote)}>
+							Showing {live.rows.length} {live.rows.length === 1 ? "query" : "queries"} (newest first,
+							last {capacity} kept).
+						</p>
+					</>
+				)}
+			</div>
 
-			{live.rows.length === 0 ? (
-				live.status !== "capped" && (
-					<p {...stylex.props(styles.empty)}>
-						{live.status === "open" ? "Waiting for queries…" : "No queries received yet."}
-					</p>
-				)
-			) : (
-				<>
-					<div {...stylex.props(styles.tableWrap)}>
-						<table {...stylex.props(styles.table)}>
-							<ActivityTableHead />
-							<tbody>
-								{live.rows.map((row) => {
-									const summary = summaryOf(row);
-									return (
-										<tr
-											key={row.key}
-											{...stylex.props(styles.row, summary.blocked && styles.rowBlocked)}
-										>
-											<ActivityCells
-												row={summary}
-												clientNames={clientNames}
-												renderDomain={(_id, children) =>
-													row.kind === "streamed" ? (
-														<button
-															type="button"
-															aria-expanded={selected?.key === row.key}
-															aria-controls={
-																selected?.key === row.key ? DETAIL_PANEL_ID : undefined
-															}
-															onClick={(event) => open(row, event.currentTarget)}
-															{...stylex.props(
-																styles.domainButton,
-																activityDomainLink,
-																shared.focusRing,
-															)}
-														>
-															{children}
-														</button>
-													) : (
-														<Link
-															to="/activity/queries/$id"
-															params={{ id: String(row.row.id) }}
-															search={origin}
-															{...stylex.props(activityDomainLink, shared.focusRing)}
-														>
-															{children}
-														</Link>
-													)
-												}
-											/>
-										</tr>
-									);
-								})}
-							</tbody>
-						</table>
-					</div>
-					<p {...stylex.props(styles.footnote)}>
-						Showing {live.rows.length} {live.rows.length === 1 ? "query" : "queries"} (newest first, last{" "}
-						{capacity} kept).
-					</p>
-				</>
-			)}
+			{selected !== null && <LiveDetail row={selected} origin={origin} onClose={() => setSelected(null)} />}
 		</>
 	);
 }