@cosmicdrift/kumiko-bundled-features 1.0.0 → 2.0.0

package/src/audit/__tests__/audit.integration.test.ts

@@ -20,6 +20,7 @@ import {
   testTenantId,
   unsafeCreateEntityTable,
 } from "@cosmicdrift/kumiko-framework/stack";
+import { withoutAmbientTemporal } from "@cosmicdrift/kumiko-framework/testing";
 import { AuditQueries } from "../constants";
 import { createAuditFeature } from "../feature";
 
@@ -189,47 +190,61 @@ describe("audit: list query", () => {
   });
 
   test("filter by from/to date range (inclusive bounds, outside-range rows excluded)", async () => {
-    // Events are written with server-now at ms precision. Delays between
-    // writes + anchor timestamps give us clean sort-order. The anchors are
-    // captured OUTSIDE the write bursts so precision-truncation on the
-    // db side (ms) can't blur anchor vs event.
+    // Stamp created_at after writes — wall-clock setTimeout anchors race with
+    // ms-precision DB timestamps under load (#1548). Fixed Instant grid keeps
+    // from/to assertions deterministic.
     await createWidget(admin, "before-window");
-    await new Promise((r) => setTimeout(r, 50));
-    const t1 = Temporal.Now.instant();
-    await new Promise((r) => setTimeout(r, 10));
     await createWidget(admin, "in-window-1");
     await createWidget(admin, "in-window-2");
-    await new Promise((r) => setTimeout(r, 50));
-    const t2 = Temporal.Now.instant();
-    await new Promise((r) => setTimeout(r, 10));
     await createWidget(admin, "after-window");
 
-    // Slice strictly to the [t1, t2] window — should return exactly 2 rows.
+    const listed = await stack.http.queryOk<AuditResponse>(AuditQueries.list, {}, admin);
+    const byName = new Map(
+      listed.rows
+        .filter((r) => r.type === "widget.created")
+        .map((r) => [(r.payload as { name?: string }).name ?? "", r.id]),
+    );
+    const stamps: ReadonlyArray<readonly [string, string]> = [
+      ["before-window", "2020-06-01T12:00:00Z"],
+      ["in-window-1", "2020-06-01T12:00:10Z"],
+      ["in-window-2", "2020-06-01T12:00:20Z"],
+      ["after-window", "2020-06-01T12:00:30Z"],
+    ];
+    for (const [name, createdAt] of stamps) {
+      const id = byName.get(name);
+      expect(id).toBeDefined();
+      await asRawClient(stack.db).unsafe(
+        `UPDATE kumiko_events SET created_at = $1::timestamptz WHERE id = $2::bigint`,
+        [createdAt, id],
+      );
+    }
+
+    const tFrom = "2020-06-01T12:00:10Z";
+    const tTo = "2020-06-01T12:00:20Z";
+
     const inWindow = await stack.http.queryOk<AuditResponse>(
       AuditQueries.list,
-      { from: t1.toString(), to: t2.toString() },
+      { from: tFrom, to: tTo },
       admin,
     );
     expect(inWindow.rows).toHaveLength(2);
     const names = inWindow.rows.map((r) => (r.payload as { name?: string }).name).sort();
     expect(names).toEqual(["in-window-1", "in-window-2"]);
 
-    // From-only: everything at or after t1 → 3 rows (2 in-window + 1 after).
-    const sinceT1 = await stack.http.queryOk<AuditResponse>(
+    const sinceFrom = await stack.http.queryOk<AuditResponse>(
       AuditQueries.list,
-      { from: t1.toString() },
+      { from: tFrom },
       admin,
     );
-    expect(sinceT1.rows).toHaveLength(3);
+    expect(sinceFrom.rows).toHaveLength(3);
 
-    // To-only: everything at or before t1 → just the before-window row.
-    const untilT1 = await stack.http.queryOk<AuditResponse>(
+    const untilBefore = await stack.http.queryOk<AuditResponse>(
       AuditQueries.list,
-      { to: t1.toString() },
+      { to: "2020-06-01T12:00:00Z" },
       admin,
     );
-    expect(untilT1.rows).toHaveLength(1);
-    expect((untilT1.rows[0]?.payload as { name?: string }).name).toBe("before-window");
+    expect(untilBefore.rows).toHaveLength(1);
+    expect((untilBefore.rows[0]?.payload as { name?: string }).name).toBe("before-window");
   });
 
   test("rejects inverted from/to range with validation_error", async () => {
@@ -312,17 +327,27 @@ describe("audit: list query", () => {
     expect(updated?.metadata).toMatchObject({ userId: admin.id });
   });
 
+  test("kumiko-framework#1525: from/to filter works without relying on globalThis.Temporal", async () => {
+    await createWidget(admin, "in-range");
+    // createTzContext uses a static temporal-polyfill import, so full HTTP
+    // dispatch (buildHandlerContext → ctx.tz) is safe ambient-free.
+    const res = await withoutAmbientTemporal(() =>
+      stack.http.queryOk<AuditResponse>(
+        AuditQueries.list,
+        { limit: 50, from: "2020-01-01T00:00:00Z", to: "2030-01-01T00:00:00Z" },
+        admin,
+      ),
+    );
+    expect(res.rows.length).toBeGreaterThanOrEqual(1);
+  });
+
   test("access denied for non-admin roles", async () => {
     await createWidget(admin, "A");
-    // regularUser has role "User" — the handler requires Admin/SystemAdmin.
     const res = await stack.http.query(AuditQueries.list, {}, regularUser);
     expect(res.status).toBe(403);
     const body = (await res.json()) as {
       error?: { code?: string; details?: { reason?: string } };
     };
-    // Pin the specific failure class. The framework raises AccessDeniedError
-    // with code=access_denied; asserting on `code` beats a status-only check
-    // (a 403 could also come from ownership-denied, for example).
     expect(body.error?.code).toBe("access_denied");
   });
 });

package/src/audit/constants.ts

@@ -1,7 +1,14 @@
-// Qualified handler names — kept in one place so tests/clients can reference
-// the audit query without hard-coding the full string.
+// @runtime client
+// Qualified handler names + screen ids — shared by server feature and web client.
 export const AUDIT_FEATURE = "audit" as const;
 
 export const AuditQueries = {
   list: "audit:query:list",
+  details: "audit:query:details",
 } as const;
+
+/** Tenant-admin audit log screen. Nav: `audit:screen:audit-log`. */
+export const AUDIT_LOG_SCREEN_ID = "audit-log" as const;
+
+/** Single-event detail screen, breadcrumb-linked to the audit-log list. */
+export const AUDIT_LOG_DETAIL_SCREEN_ID = "audit-log-detail" as const;

package/src/audit/feature.ts

@@ -1,5 +1,12 @@
-import { defineFeature, type FeatureDefinition } from "@cosmicdrift/kumiko-framework/engine";
+import {
+  access,
+  defineFeature,
+  type FeatureDefinition,
+} from "@cosmicdrift/kumiko-framework/engine";
+import { AUDIT_LOG_DETAIL_SCREEN_ID, AUDIT_LOG_SCREEN_ID } from "./constants";
+import { detailsQuery } from "./handlers/details.query";
 import { listQuery } from "./handlers/list.query";
+import { AUDIT_I18N } from "./i18n";
 
 // Audit feature — exposes a filtered read over the framework's event log.
 //
@@ -23,9 +30,34 @@ export function createAuditFeature(): FeatureDefinition {
       category: "compliance",
       recommended: false,
     });
+    r.translations({ keys: AUDIT_I18N });
+
     const queries = {
       list: r.queryHandler(listQuery),
+      details: r.queryHandler(detailsQuery),
     };
+
+    r.screen({
+      id: AUDIT_LOG_SCREEN_ID,
+      type: "custom",
+      renderer: { react: { __component: "AuditLogScreen" } },
+      access: { roles: access.admin },
+    });
+    r.screen({
+      id: AUDIT_LOG_DETAIL_SCREEN_ID,
+      type: "custom",
+      renderer: { react: { __component: "AuditLogDetailScreen" } },
+      listScreenId: AUDIT_LOG_SCREEN_ID,
+      access: { roles: access.admin },
+    });
+    r.nav({
+      id: "audit-log",
+      label: "audit:nav.auditLog",
+      icon: "file",
+      screen: "audit:screen:audit-log",
+      order: 30,
+    });
+
     return { queries };
   });
 }

package/src/audit/handlers/details.query.ts

@@ -0,0 +1,47 @@
+// Single audit event by its event-store id — backs the audit-log-detail
+// screen. Tenant-isolated at the WHERE level like list.query, so a caller
+// can only read events in their own tenant.
+
+import { selectMany } from "@cosmicdrift/kumiko-framework/bun-db";
+import { access, defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { eventsTable } from "@cosmicdrift/kumiko-framework/event-store";
+import { z } from "zod";
+
+export const detailsQuery = defineQueryHandler({
+  name: "details",
+  schema: z.object({
+    id: z.string().regex(/^[1-9]\d*$/, "id must be a positive integer"),
+  }),
+  access: { roles: access.admin },
+  handler: async (query, ctx) => {
+    const rows = await selectMany<{
+      id: bigint;
+      aggregateId: string;
+      aggregateType: string;
+      version: number;
+      type: string;
+      payload: Record<string, unknown>;
+      metadata: Record<string, unknown>;
+      createdAt: unknown;
+      createdBy: string;
+    }>(
+      ctx.db,
+      eventsTable,
+      { tenantId: query.user.tenantId, id: BigInt(query.payload.id) },
+      { limit: 1 },
+    );
+    const row = rows[0];
+    if (row === undefined) return null;
+    return {
+      id: String(row.id),
+      aggregateId: row.aggregateId,
+      aggregateType: row.aggregateType,
+      version: row.version,
+      type: row.type,
+      payload: row.payload,
+      metadata: row.metadata,
+      createdAt: row.createdAt,
+      createdBy: row.createdBy,
+    };
+  },
+});

package/src/audit/handlers/list.query.ts

@@ -12,8 +12,9 @@
 // can't surface PII that the entity definition marked as sensitive.
 
 import { selectMany, type WhereObject } from "@cosmicdrift/kumiko-framework/bun-db";
-import { defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { access, defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
 import { eventsTable } from "@cosmicdrift/kumiko-framework/event-store";
+import { Temporal } from "temporal-polyfill";
 import { z } from "zod";
 
 const MAX_LIMIT = 100;
@@ -35,7 +36,7 @@ export const listQuery = defineQueryHandler({
       message: "`from` must be less than or equal to `to`",
       path: ["from"],
     }),
-  access: { roles: ["Admin", "SystemAdmin"] },
+  access: { roles: access.admin },
   handler: async (query, ctx) => {
     const p = query.payload;
     const where: WhereObject = { tenantId: query.user.tenantId };

package/src/audit/i18n.ts

@@ -0,0 +1,31 @@
+// @runtime client
+// Server + client i18n for audit (nav labels + AuditLogScreen).
+
+type LocalizedString = { readonly de: string; readonly en: string };
+
+export const AUDIT_I18N: Readonly<Record<string, LocalizedString>> = {
+  "screen:audit-log.title": { de: "Audit-Log", en: "Audit log" },
+  "screen:audit-log-detail.title": { de: "Ereignis", en: "Event" },
+  "audit:nav.auditLog": { de: "Audit", en: "Audit" },
+  "audit.log.title": { de: "Audit-Log", en: "Audit log" },
+  "audit.log.loading": { de: "Lade Ereignisse…", en: "Loading events…" },
+  "audit.log.empty": { de: "Keine Ereignisse.", en: "No events." },
+  "audit.log.newest": { de: "Neueste", en: "Newest" },
+  "audit.log.older": { de: "Ältere laden", en: "Load older" },
+  "audit.log.col.when": { de: "Zeit", en: "When" },
+  "audit.log.col.type": { de: "Ereignis", en: "Event" },
+  "audit.log.col.aggregate": { de: "Aggregate", en: "Aggregate" },
+  "audit.log.col.actor": { de: "Akteur", en: "Actor" },
+  "audit.log.filter.eventType": { de: "Ereignistyp", en: "Event type" },
+  "audit.log.filter.aggregateType": { de: "Aggregate-Typ", en: "Aggregate type" },
+  "audit.log.filter.from": { de: "Von", en: "From" },
+  "audit.log.filter.to": { de: "Bis", en: "To" },
+  "audit.log.filter.apply": { de: "Filtern", en: "Filter" },
+  "audit.log.filter.reset": { de: "Zurücksetzen", en: "Reset" },
+  "audit.log.details": { de: "Details", en: "Details" },
+  "audit.log.detail.loading": { de: "Lade Ereignis…", en: "Loading event…" },
+  "audit.log.detail.missing": { de: "Ereignis nicht gefunden.", en: "Event not found." },
+  "audit.log.detail.payload": { de: "Ereignis-Payload", en: "Event payload" },
+  "audit.log.detail.metadata": { de: "Metadaten", en: "Metadata" },
+  "audit.log.detail.field.id": { de: "Ereignis-ID", en: "Event ID" },
+};

package/src/audit/web/audit-log-detail-screen.tsx

@@ -0,0 +1,131 @@
+// @runtime client
+// Single audit event detail. Route entityId = event-store id (bigint string).
+
+import {
+  formatWhen,
+  useDispatcher,
+  useNav,
+  usePrimitives,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { AuditQueries } from "../constants";
+
+type AuditDetail = {
+  readonly id: string;
+  readonly aggregateId: string;
+  readonly aggregateType: string;
+  readonly type: string;
+  readonly createdBy: string;
+  readonly createdAt: string;
+  readonly payload: Record<string, unknown>;
+  readonly metadata: Record<string, unknown>;
+};
+
+type State =
+  | { readonly kind: "loading" }
+  | { readonly kind: "missing" }
+  | { readonly kind: "error"; readonly message: string }
+  | { readonly kind: "ready"; readonly event: AuditDetail };
+
+export function AuditLogDetailScreen(): ReactNode {
+  const t = useTranslation();
+  const { Banner, Card, Text } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const nav = useNav();
+  const eventId = nav.route?.entityId;
+  const [state, setState] = useState<State>({ kind: "loading" });
+
+  const load = useCallback(async (): Promise<void> => {
+    if (eventId === undefined || eventId === "") {
+      setState({ kind: "missing" });
+      return;
+    }
+    setState({ kind: "loading" });
+    const res = await dispatcher.query<AuditDetail | null>(AuditQueries.details, { id: eventId });
+    if (!res.isSuccess) {
+      setState({ kind: "error", message: res.error.message });
+      return;
+    }
+    if (res.data === null) {
+      setState({ kind: "missing" });
+      return;
+    }
+    setState({ kind: "ready", event: res.data });
+  }, [dispatcher, eventId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (state.kind === "loading") {
+    return (
+      <FormScreenShell testId="audit-log-detail-screen">
+        <Text variant="small">{t("audit.log.detail.loading")}</Text>
+      </FormScreenShell>
+    );
+  }
+
+  if (state.kind === "missing") {
+    return (
+      <FormScreenShell testId="audit-log-detail-screen">
+        <Banner variant="error">{t("audit.log.detail.missing")}</Banner>
+      </FormScreenShell>
+    );
+  }
+
+  if (state.kind === "error") {
+    return (
+      <FormScreenShell testId="audit-log-detail-screen">
+        <Banner variant="error">{state.message}</Banner>
+      </FormScreenShell>
+    );
+  }
+
+  const { event } = state;
+
+  return (
+    <FormScreenShell testId="audit-log-detail-screen" className="flex flex-col gap-6">
+      <Card slots={{ title: event.type }}>
+        <dl className="grid gap-3 text-sm">
+          <div>
+            <dt className="font-medium">{t("audit.log.col.when")}</dt>
+            <dd data-testid="audit-detail-when">{formatWhen(event.createdAt)}</dd>
+          </div>
+          <div>
+            <dt className="font-medium">{t("audit.log.col.aggregate")}</dt>
+            <dd data-testid="audit-detail-aggregate">
+              {event.aggregateType} / {event.aggregateId}
+            </dd>
+          </div>
+          <div>
+            <dt className="font-medium">{t("audit.log.col.actor")}</dt>
+            <dd data-testid="audit-detail-actor">{event.createdBy}</dd>
+          </div>
+          <div>
+            <dt className="font-medium">{t("audit.log.detail.field.id")}</dt>
+            <dd>
+              <Text variant="code">{event.id}</Text>
+            </dd>
+          </div>
+        </dl>
+      </Card>
+
+      <Card slots={{ title: t("audit.log.detail.payload") }}>
+        <pre
+          className="max-h-96 overflow-auto whitespace-pre-wrap break-all text-xs"
+          data-testid="audit-detail-payload"
+        >
+          {JSON.stringify(event.payload, null, 2)}
+        </pre>
+      </Card>
+
+      <Card slots={{ title: t("audit.log.detail.metadata") }}>
+        <pre className="max-h-96 overflow-auto whitespace-pre-wrap break-all text-xs">
+          {JSON.stringify(event.metadata, null, 2)}
+        </pre>
+      </Card>
+    </FormScreenShell>
+  );
+}

package/src/audit/web/audit-log-screen.tsx

@@ -0,0 +1,250 @@
+// @runtime client
+// Paginated tenant-scoped audit log (event store). Rows link to the
+// audit-log-detail screen; the screen title lives in the shell breadcrumb.
+
+import {
+  type DataTableSort,
+  formatWhen,
+  sortByAccessor,
+  useDispatcher,
+  useNav,
+  usePrimitives,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { AUDIT_LOG_DETAIL_SCREEN_ID, AuditQueries } from "../constants";
+
+type AuditRow = {
+  readonly id: string;
+  readonly aggregateId: string;
+  readonly aggregateType: string;
+  readonly type: string;
+  readonly createdBy: string;
+  readonly createdAt: string;
+  readonly payload: Record<string, unknown>;
+};
+
+type AuditResponse = { readonly rows: readonly AuditRow[]; readonly nextBefore: string | null };
+
+type Filters = {
+  readonly eventType: string;
+  readonly aggregateType: string;
+  readonly from: string;
+  readonly to: string;
+};
+
+type State =
+  | { readonly kind: "loading" }
+  | { readonly kind: "error"; readonly message: string }
+  | {
+      readonly kind: "ready";
+      readonly rows: readonly AuditRow[];
+      readonly nextBefore: string | null;
+    };
+
+const EMPTY_FILTERS: Filters = { eventType: "", aggregateType: "", from: "", to: "" };
+
+export function AuditLogScreen(): ReactNode {
+  const t = useTranslation();
+  const { Banner, Button, DataTable, Field, Input, Text } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const nav = useNav();
+  const [state, setState] = useState<State>({ kind: "loading" });
+  const [before, setBefore] = useState<string | undefined>(undefined);
+  const [filters, setFilters] = useState<Filters>(EMPTY_FILTERS);
+  const [sort, setSort] = useState<DataTableSort | null>(null);
+
+  const filtersRef = useRef(filters);
+  filtersRef.current = filters;
+
+  const load = useCallback(
+    async (cursor?: string, overrideFilters?: Filters): Promise<void> => {
+      setState({ kind: "loading" });
+      const f = overrideFilters ?? filtersRef.current;
+      const res = await dispatcher.query<AuditResponse>(AuditQueries.list, {
+        limit: 50,
+        ...(cursor !== undefined && { before: cursor }),
+        ...(f.eventType.trim() !== "" && { eventType: f.eventType.trim() }),
+        ...(f.aggregateType.trim() !== "" && {
+          aggregateType: f.aggregateType.trim(),
+        }),
+        ...(f.from !== "" && { from: toIsoStart(f.from) }),
+        ...(f.to !== "" && { to: toIsoEnd(f.to) }),
+      });
+      if (!res.isSuccess) {
+        setState({ kind: "error", message: res.error.message });
+        return;
+      }
+      setState({ kind: "ready", rows: res.data.rows, nextBefore: res.data.nextBefore });
+    },
+    [dispatcher],
+  );
+
+  useEffect(() => {
+    void load(before);
+  }, [load, before]);
+
+  if (state.kind === "loading") {
+    return (
+      <div className="p-6" data-testid="audit-log-screen">
+        <Text variant="small">{t("audit.log.loading")}</Text>
+      </div>
+    );
+  }
+
+  if (state.kind === "error") {
+    return (
+      <div className="p-6" data-testid="audit-log-screen">
+        <Banner variant="error">{state.message}</Banner>
+      </div>
+    );
+  }
+
+  const openDetail = (id: string): void =>
+    nav.navigate({ screenId: AUDIT_LOG_DETAIL_SCREEN_ID, entityId: id });
+
+  return (
+    <div className="w-full" data-testid="audit-log-screen">
+      <div className="flex flex-col gap-4 px-6 pt-6">
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <Field id="audit-filter-event" label={t("audit.log.filter.eventType")}>
+            <Input
+              kind="text"
+              id="audit-filter-event"
+              name="audit-filter-event"
+              value={filters.eventType}
+              onChange={(v: string) => setFilters((f) => ({ ...f, eventType: v }))}
+            />
+          </Field>
+          <Field id="audit-filter-aggregate" label={t("audit.log.filter.aggregateType")}>
+            <Input
+              kind="text"
+              id="audit-filter-aggregate"
+              name="audit-filter-aggregate"
+              value={filters.aggregateType}
+              onChange={(v) => setFilters((f) => ({ ...f, aggregateType: v }))}
+            />
+          </Field>
+          <Field id="audit-filter-from" label={t("audit.log.filter.from")}>
+            <Input
+              kind="date"
+              id="audit-filter-from"
+              name="audit-filter-from"
+              value={filters.from}
+              onChange={(v) => setFilters((f) => ({ ...f, from: v ?? "" }))}
+            />
+          </Field>
+          <Field id="audit-filter-to" label={t("audit.log.filter.to")}>
+            <Input
+              kind="date"
+              id="audit-filter-to"
+              name="audit-filter-to"
+              value={filters.to}
+              onChange={(v) => setFilters((f) => ({ ...f, to: v ?? "" }))}
+            />
+          </Field>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="primary"
+            onClick={() => {
+              setBefore(undefined);
+              void load(undefined);
+            }}
+            testId="audit-log-apply-filters"
+          >
+            {t("audit.log.filter.apply")}
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              setFilters(EMPTY_FILTERS);
+              setBefore(undefined);
+              void load(undefined, EMPTY_FILTERS);
+            }}
+            testId="audit-log-reset-filters"
+          >
+            {t("audit.log.filter.reset")}
+          </Button>
+        </div>
+      </div>
+
+      <DataTable
+        testId="audit-log-table"
+        columns={[
+          { field: "when", label: t("audit.log.col.when"), type: "string", sortable: true },
+          { field: "type", label: t("audit.log.col.type"), type: "string", sortable: true },
+          {
+            field: "aggregate",
+            label: t("audit.log.col.aggregate"),
+            type: "string",
+            sortable: false,
+          },
+          { field: "actor", label: t("audit.log.col.actor"), type: "string", sortable: false },
+        ]}
+        sort={sort}
+        onSortChange={setSort}
+        rows={sortByAccessor(state.rows, sort, SORT_ACCESSORS).map((row) => ({
+          id: row.id,
+          values: {
+            when: formatWhen(row.createdAt),
+            type: row.type,
+            aggregate: `${row.aggregateType} / ${row.aggregateId}`,
+            actor: row.createdBy,
+          },
+        }))}
+        onRowClick={(row) => openDetail(row.id)}
+        rowActions={[
+          {
+            id: "details",
+            label: t("audit.log.details"),
+            style: "secondary",
+            onTrigger: (row) => openDetail(row.id),
+          },
+        ]}
+        rowActionMode="inline"
+        emptyState={<Text variant="small">{t("audit.log.empty")}</Text>}
+      />
+
+      <div className="flex gap-2 px-6 pb-6">
+        {before !== undefined && (
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => setBefore(undefined)}
+            testId="audit-log-newest"
+          >
+            {t("audit.log.newest")}
+          </Button>
+        )}
+        {state.nextBefore !== null && (
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => setBefore(state.nextBefore ?? undefined)}
+            testId="audit-log-older"
+          >
+            {t("audit.log.older")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Client-sort over the loaded page (≤50 rows). createdAt is an ISO string, so
+// lexicographic compare is chronological. Cross-page order stays cursor-based.
+const SORT_ACCESSORS: Record<string, (r: AuditRow) => string> = {
+  when: (r) => r.createdAt,
+  type: (r) => r.type,
+};
+
+function toIsoStart(date: string): string {
+  return new Date(`${date}T00:00:00.000Z`).toISOString();
+}
+
+function toIsoEnd(date: string): string {
+  return new Date(`${date}T23:59:59.999Z`).toISOString();
+}