feat(audit-log): a consistency pass over the list, filters and entry detail

apps/web/src/lab/audit-log-lab.ts

@@ -110,10 +110,13 @@ const answer = (state: LabState, model: AuditModel.Model, commands: ReadonlyArra
 	).model
 }
 
-/** The kit's own commands and the custom range's clock read; every API read is answered above. */
+/** The kit's own commands and the custom range's clock read and focus; every API read is answered above. */
 const local = (commands: ReadonlyArray<AuditCommand> | undefined) => [
 	...keepLocal(commands),
-	...Arr.filter(commands ?? [], (command) => command.name === "ResolveAuditCustomToday"),
+	...Arr.filter(
+		commands ?? [],
+		(command) => command.name === "ResolveAuditCustomToday" || command.name === "FocusAuditDateRange",
+	),
 ]
 
 const lift = (commands: ReadonlyArray<AuditCommand>) =>

apps/web/src/page/settings/audit-log/audit-log.scene.test.ts

@@ -237,6 +237,20 @@ describe("audit log tab", () => {
 		expect(picked.model.customRange).toBeNull()
 	})
 
+	test("opening the custom range moves focus into the popover, so Escape still closes it", () => {
+		const search = { tab: "audit-log" } as const
+		const opened = update(
+			init(search).model,
+			Message.ResolvedCustomToday({
+				timeZone: "UTC",
+				today: { year: 2026, month: 11, day: 9 },
+				lastDay: { year: 2026, month: 11, day: 9 },
+			}),
+			search,
+		)
+		expect(Arr.map(opened.commands ?? [], ({ name }) => name)).toEqual(["FocusAuditDateRange"])
+	})
+
 	describe("an entry's detail", () => {
 		const search = { tab: "audit-log" } as const
 		const loadedWith = (searchFor: typeof SettingsSearch.Type) => {
@@ -422,6 +436,31 @@ describe("audit log tab", () => {
 			scene(sceneOf(search), given(opened), expectView(text("Surface")).toExist())
 		})
 
+		test("an open entry offers a filter beside its actor, action and resource", () => {
+			const target = AUDIT_ENTRIES[2]
+			if (target === undefined) throw new Error("fixture")
+			const opened = update(
+				loadedWith(search).model,
+				Message.ToggledEntry({ id: target.id }),
+				search,
+			).model
+			scene(
+				sceneOf(search),
+				given(opened),
+				expectView(role("button", { name: "Show every entry with this actor" })).toExist(),
+				expectView(role("button", { name: "Show every entry with this action" })).toExist(),
+				expectView(role("button", { name: "Show every entry with this resource" })).toExist(),
+			)
+		})
+
+		test("a row names the kind of actor behind an API key", () => {
+			scene(
+				sceneOf(search),
+				given(loadedWith(search).model),
+				expectView(role("img", { name: "API key" })).toExist(),
+			)
+		})
+
 		test("the Origin section names the country an entry came from", () => {
 			const target = AUDIT_ENTRIES[4]
 			if (target === undefined) throw new Error("fixture")

apps/web/src/page/settings/audit-log/model.ts

@@ -119,5 +119,6 @@ export const Message = defineMessageUnion({
 	/** "Filter" beside a value in an entry's detail: the filter key and the value to filter by. */
 	ClickedPivot: { key: Schema.String, value: Schema.String },
 	CompletedScrollToEntry: {},
+	CompletedFocusDateRange: {},
 })
 export type Message = typeof Message.Type

apps/web/src/page/settings/audit-log/update.ts

@@ -15,7 +15,7 @@ import {
 import { formatWarehouseDateTime, parseWarehouseDateTime } from "@maple/query-engine/datetime"
 import * as CustomRange from "../../kit/custom-range"
 import { Clock, DateTime, Effect, Option, Result, Schema, Array as Arr, String as Str } from "effect"
-import { Command } from "foldkit"
+import { Command, Dom } from "foldkit"
 import { toLoadFailure } from "@maple/views/data/load-failure"
 import { isClerkAuthEnabled } from "../../../lib/services/common/auth-mode"
 import { MapleApiV2Client } from "../../../platform/api-clients"
@@ -24,6 +24,7 @@ import { memberDisplayName } from "../kit/members"
 import { AppRoute, hrefOf } from "../../../route"
 import type { SettingsSearch as SettingsSearchSchema } from "../../../route/search"
 import * as CopyButton from "@maple/views/ui/copy-button"
+import { popupId } from "@maple/views/ui/overlay/popup-state"
 import * as Popover from "@maple/views/ui/popover"
 import * as Select from "@maple/views/ui/select"
 import { PageOutMessage, type PageReturn } from "../../contract"
@@ -324,6 +325,17 @@ const ScrollToAuditEntry = Command.define("ScrollToAuditEntry", {
 		}),
 })
 
+/** Focus back inside the popover once the calendar replaces the pressed preset, so Escape still closes it. */
+const FocusAuditDateRange = Command.define("FocusAuditDateRange", {
+	args: { id: Schema.String },
+	messages: [Message.CompletedFocusDateRange],
+	execute: ({ id }) =>
+		Dom.focus(`#${CSS.escape(popupId(id))}`).pipe(
+			Effect.ignore,
+			Effect.as(Message.CompletedFocusDateRange()),
+		),
+})
+
 /** The filters a detail pivot navigates to: the value replaces that filter, the rest stay. */
 const pivoted = (filters: AuditLogFilters, key: string, value: string): AuditLogFilters => {
 	switch (key) {
@@ -485,6 +497,7 @@ export const update = (model: Model, message: Message, search: SettingsSearch):
 			)
 		},
 		CompletedScrollToEntry: () => ({ model }),
+		CompletedFocusDateRange: () => ({ model }),
 		ClickedCustomRange: ({ timeZone }) => ({ model, commands: [ResolveAuditCustomToday({ timeZone })] }),
 		ResolvedCustomToday: ({ timeZone, today, lastDay }) => {
 			const range = filters.range
@@ -499,6 +512,7 @@ export const update = (model: Model, message: Message, search: SettingsSearch):
 						lastDay,
 					}),
 				),
+				commands: [FocusAuditDateRange({ id: model.dateRange.id })],
 			}
 		},
 		GotCustomRangeMessage: ({ message: child }) => {