milestone 21: abp list exceptions and a regex rule kind

web/src/features/blocklists/BlocklistsPage.test.tsx

@@ -17,6 +17,7 @@ const BLOCKLISTS = {
 			last_updated: 1700000000,
 			domain_count: 1000,
 			wildcard_count: 10,
+			exception_count: 7,
 			skipped_regex_count: 3,
 			checksum: "abc",
 		},
@@ -29,6 +30,7 @@ const BLOCKLISTS = {
 			last_updated: null,
 			domain_count: 0,
 			wildcard_count: 0,
+			exception_count: 0,
 			skipped_regex_count: 0,
 			checksum: null,
 		},
@@ -98,6 +100,7 @@ const SNAPSHOT = {
 			last_error: "",
 			domains: 1200,
 			wildcards: 12,
+			exceptions: 9,
 			skipped_regex: 4,
 		},
 	],
@@ -112,6 +115,7 @@ test("renders the source table and the status empty state", async () => {
 	expect(screen.getByText("Suggested")).toBeTruthy();
 	expect(screen.getByText("1000")).toBeTruthy();
 	expect(screen.getByText("10")).toBeTruthy();
+	expect(screen.getByText("7")).toBeTruthy();
 	expect(screen.getByText("3")).toBeTruthy();
 	expect(screen.getByText("never")).toBeTruthy();
 
@@ -147,6 +151,7 @@ test("update now disables the button, then replaces the status section from the
 				last_error: "",
 				domains: 1200,
 				wildcards: 12,
+				exceptions: 9,
 				skipped_regex: 4,
 			},
 			{
@@ -159,6 +164,7 @@ test("update now disables the button, then replaces the status section from the
 				last_error: "connect timed out",
 				domains: 0,
 				wildcards: 0,
+				exceptions: 0,
 				skipped_regex: 0,
 			},
 		],
@@ -172,6 +178,7 @@ test("update now disables the button, then replaces the status section from the
 	expect(screen.getByText("connect timed out")).toBeTruthy();
 	expect(screen.getByText("1200")).toBeTruthy();
 	expect(screen.getByText("12")).toBeTruthy();
+	expect(screen.getByText("9")).toBeTruthy();
 	expect(screen.getByText("4")).toBeTruthy();
 	expect(screen.queryByText(/run .Update now. to fetch status/)).toBeNull();
 	// The store notifies one flush before the mutation's success state lands.

web/src/features/blocklists/BlocklistsPage.tsx

@@ -153,6 +153,7 @@ export default function BlocklistsPage() {
 								<th {...stylex.props(shared.th)}>Enabled</th>
 								<th {...stylex.props(shared.th)}>Domains</th>
 								<th {...stylex.props(shared.th)}>Wildcards</th>
+								<th {...stylex.props(shared.th)}>Exceptions</th>
 								<th {...stylex.props(shared.th)}>Skipped regex</th>
 								<th {...stylex.props(shared.th)}>Last updated</th>
 								<th {...stylex.props(shared.th)}>
@@ -185,6 +186,7 @@ export default function BlocklistsPage() {
 									</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.domain_count}</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.wildcard_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.exception_count}</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.skipped_regex_count}</td>
 									<td {...stylex.props(shared.td)}>
 										{b.last_updated === null ? "never" : formatTime(b.last_updated)}

web/src/features/blocklists/SourceStatusSection.tsx

@@ -87,6 +87,7 @@ export default function SourceStatusSection({ sources, namesById }: SourceStatus
 								<th {...stylex.props(shared.th)}>Last success</th>
 								<th {...stylex.props(shared.th)}>Domains</th>
 								<th {...stylex.props(shared.th)}>Wildcards</th>
+								<th {...stylex.props(shared.th)}>Exceptions</th>
 								<th {...stylex.props(shared.th)}>Skipped regex</th>
 								<th {...stylex.props(shared.th)}>Last error</th>
 							</tr>
@@ -109,6 +110,7 @@ export default function SourceStatusSection({ sources, namesById }: SourceStatus
 									<td {...stylex.props(shared.td)}>{formatAttempt(source.last_success)}</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{source.domains}</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{source.wildcards}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{source.exceptions}</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>{source.skipped_regex}</td>
 									<td {...stylex.props(shared.td)}>
 										{source.last_error === "" ? (

web/src/features/rules/RulesPage.test.tsx

@@ -34,6 +34,7 @@ const RESPONSES: Record<string, unknown> = {
 // The API orders groups by name, so the id-1 default is not always first.
 let groups: { id: number; name: string; safe_search: boolean }[];
 let deleted: string[];
+let posted: { pattern: string; kind: string }[];
 
 function deleteCalls(): string[] {
 	return deleted;
@@ -45,6 +46,7 @@ beforeEach(() => {
 		{ id: 2, name: "Kids", safe_search: true },
 	];
 	deleted = [];
+	posted = [];
 	vi.stubGlobal(
 		"fetch",
 		vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
@@ -54,6 +56,7 @@ beforeEach(() => {
 				return new Response(null, { status: 204 });
 			}
 			if (url === "/api/rules" && init?.method === "POST") {
+				posted.push(JSON.parse(String(init.body)) as { pattern: string; kind: string });
 				return new Response(JSON.stringify({ error: "rate limited" }), {
 					status: 429,
 					headers: { "content-type": "application/json", "Retry-After": "5" },
@@ -116,11 +119,61 @@ test("renders the rule table and the create form with contract enums", async ()
 	expect(table.getByText("Kids")).toBeTruthy();
 	expect(screen.getAllByRole("button", { name: "Delete" })).toHaveLength(2);
 
-	expect(await optionsOf("Kind")).toEqual(["exact", "wildcard"]);
+	expect(await optionsOf("Kind")).toEqual(["exact", "wildcard", "regex"]);
 	expect(await optionsOf("Action")).toEqual(["allow", "block"]);
 	expect(await optionsOf("Group")).toEqual(["Default", "Kids"]);
 });
 
+test("the kind selector can select the regex option, not only list it", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	fireEvent.click(trigger("Kind"));
+	const options = await screen.findAllByRole("option");
+	const regex = options.find((option) => option.textContent === "regex");
+	expect(regex).toBeTruthy();
+	fireEvent.click(regex!);
+	await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+
+	expect(trigger("Kind").textContent).toContain("regex");
+});
+
+async function selectKind(label: string): Promise<void> {
+	fireEvent.click(trigger("Kind"));
+	const options = await screen.findAllByRole("option");
+	fireEvent.click(options.find((option) => option.textContent === label)!);
+	await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+}
+
+// A regex is stored and matched byte for byte, so whitespace inside it is data,
+// not slop the UI may drop. Exact and wildcard are normalized server-side.
+test("a regex pattern is posted untrimmed, an exact pattern is trimmed", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	await selectKind("regex");
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: " foo|bar " } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+	await waitFor(() => expect(posted).toHaveLength(1));
+	expect(posted[0]).toMatchObject({ pattern: " foo|bar ", kind: "regex" });
+
+	await selectKind("exact");
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: "  ads.example.net  " } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+	await waitFor(() => expect(posted).toHaveLength(2));
+	expect(posted[1]).toMatchObject({ pattern: "ads.example.net", kind: "exact" });
+});
+
+test("the pattern field opts out of mobile autocapitalize and autocorrect", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	const input = screen.getByLabelText("Pattern");
+	expect(input.getAttribute("autocapitalize")).toBe("none");
+	expect(input.getAttribute("autocorrect")).toBe("off");
+	expect(input.getAttribute("spellcheck")).toBe("false");
+});
+
 test("rule create shows a countdown when rate limited with Retry-After", async () => {
 	renderRulesRoute();
 	await screen.findByRole("heading", { name: "Rules" });

web/src/features/rules/RulesPage.tsx

@@ -15,6 +15,7 @@ import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority
 const KIND_OPTIONS = [
 	{ value: "exact", label: "exact" },
 	{ value: "wildcard", label: "wildcard" },
+	{ value: "regex", label: "regex" },
 ];
 
 const ACTION_OPTIONS = [
@@ -97,10 +98,12 @@ export default function RulesPage() {
 
 	function onSubmit(event: FormEvent<HTMLFormElement>) {
 		event.preventDefault();
-		create.mutate(
-			{ group_id: groupId, pattern: pattern.trim(), kind, action },
-			{ onSuccess: () => setPattern("") },
-		);
+		// A regex pattern is stored and matched byte for byte, so the UI must not
+		// edit it: trimming here would make a UI-created rule differ from the same
+		// bytes posted to /api/rules. Name-shaped kinds are normalized server-side,
+		// so trimming them only spares a pasted space a 400.
+		const sent = kind === "regex" ? pattern : pattern.trim();
+		create.mutate({ group_id: groupId, pattern: sent, kind, action }, { onSuccess: () => setPattern("") });
 	}
 
 	function confirmDelete() {
@@ -173,7 +176,13 @@ export default function RulesPage() {
 						required
 						value={pattern}
 						onChange={(event) => setPattern(event.target.value)}
-						placeholder="ads.example.com or *.example.com"
+						placeholder="ads.example.com, *.example.com or ^ad[0-9]+-"
+						// A phone keyboard capitalizing the first letter is silent for
+						// exact and wildcard (normalized server-side) but fatal for a
+						// regex, which matches the lowercase query name byte for byte.
+						autoCapitalize="none"
+						autoCorrect="off"
+						spellCheck={false}
 						{...stylex.props(shared.input, shared.focusRing)}
 					/>
 				</div>