@awsmbiz/create-inbis-app 0.0.0-stage → 0.1.0

package/template/modules/admin/with-audit/test/admin-audit.test.ts

@@ -0,0 +1,37 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { choicesWith, json, migrate, newUser, seedAdmin, seedUser, testApp, type TestApp } from "./auth-fixtures.js";
+
+// With the audit trail, the admin dashboard counts and the auth history read it (src/admin.ts).
+
+beforeEach(async () => {
+  await migrate();
+});
+
+async function stats(app: TestApp, cookie: string) {
+  const response = await app.call("/api/admin/auth-stats", { headers: { cookie } });
+  expect(response.status).toBe(200);
+  return response.json<{ failedSignIns24h: number; activeUsers7d: number }>();
+}
+
+describe("the admin API over the audit trail", () => {
+  it("counts failed sign-ins and active users from the trail, and lists auth's events", async () => {
+    const app = testApp(choicesWith("invite-only"));
+    const cookie = await seedAdmin(newUser("Grace Admin"));
+    const before = await stats(app, cookie);
+
+    const user = newUser();
+    await seedUser(user);
+    const failed = await app.call("/api/auth/sign-in/email", json({ email: user.email, password: "not the password" }));
+    expect(failed.status).toBe(401);
+
+    const after = await stats(app, cookie);
+    expect(after.failedSignIns24h).toBe(before.failedSignIns24h + 1);
+    // The admin's own sign-in, recorded in the trail.
+    expect(after.activeUsers7d).toBeGreaterThanOrEqual(1);
+
+    const history = await app.call("/api/admin/auth-audit-events?limit=200", { headers: { cookie } });
+    expect(history.status).toBe(200);
+    const { items } = await history.json<{ items: { action: string }[] }>();
+    expect(items.map((item) => item.action)).toContain("auth.sign_in.failed");
+  });
+});

package/template/modules/admin/with-audit/web/src/admin-activity.tsx

@@ -0,0 +1,21 @@
+import { AuthActivityPage, UserActivitySection, type AdminNavItem, type AdminPage } from "@awsmbiz/inbis-admin-ui";
+import { ScrollText } from "lucide-react";
+import { auth } from "./admin-client.js";
+import { t } from "./messages.js";
+
+// The admin area's activity, over the audit trail (audit module): GET /api/admin/audit-events.
+// admin-area.tsx lists the page, its navigation item and the user section.
+
+/** Every event, filterable by action, actor, subject and dates. */
+export const activityPage: AdminPage = {
+  path: "activity",
+  title: t("admin.nav.activity"),
+  component: () => <AuthActivityPage client={auth} />,
+};
+
+export const activityNavItem: AdminNavItem = { to: "activity", label: t("admin.nav.activity"), icon: ScrollText };
+
+/** A user's recent activity, on their page in the admin area. */
+export function UserActivity({ user }: { user: { id: string } }) {
+  return <UserActivitySection client={auth} userId={user.id} />;
+}

package/template/modules/audit/files/src/audit-actions.ts

@@ -0,0 +1,20 @@
+/**
+ * The app's own audit actions: one entry per kind of event the app records, as
+ * `namespace.thing[.more]` in lowercase. Use the app's own namespaces: platform ones
+ * (`auth`, `access`, `audit`, `notifications`, ...) are refused at startup.
+ *
+ * ```ts
+ * await auditLog(c.env, { logger: c.var.logger }).record({
+ *   action: APP_AUDIT_ACTIONS.settingsChanged,
+ *   actorId: null, // the user ID when someone is signed in; null for the system
+ *   subjectId: "settings:general",
+ *   occurredAt: new Date(),
+ *   requestId: c.var.requestId,
+ *   metadata: { changed: ["timezone"] },
+ * });
+ * ```
+ */
+export const APP_AUDIT_ACTIONS = {
+  /** An example action: replace it with your own. */
+  settingsChanged: "app.settings.changed",
+} as const;

package/template/modules/audit/files/src/audit-log.ts

@@ -0,0 +1,33 @@
+import { createAuditActions, createD1AuditLog, type AuditActions, type AuditLog } from "@awsmbiz/inbis-audit";
+import { requireBinding } from "@awsmbiz/inbis-cloudflare";
+import { APP_AUDIT_ACTIONS } from "./audit-actions.js";
+import type { Logger } from "@awsmbiz/inbis-core";
+import { platformAuditActions } from "./audit-catalogues.js";
+
+let registry: AuditActions | undefined;
+
+/**
+ * Every action the audit trail accepts: the platform packages' catalogues
+ * (`src/audit-sink.ts`) and the app's own (`src/audit-actions.ts`). Built once per
+ * isolate; throws on a malformed name or an app action in a platform namespace
+ * (`src/index.ts` calls it at startup, so that fails the deploy, not a request).
+ */
+export function auditActions(): AuditActions {
+  registry ??= createAuditActions({ platform: platformAuditActions, app: APP_AUDIT_ACTIONS });
+  return registry;
+}
+
+/**
+ * The app's audit trail (`audit_event`, binding `AUDIT_DB`): record events with
+ * `auditLog(c.env, { logger: c.var.logger }).record({ action, actorId, subjectId, occurredAt, ... })`,
+ * read them with `list` and `count`. With `AUDIT_STRICT_ACTIONS` = `"true"` (local
+ * development and tests) an unregistered action throws; deployed, it is stored and
+ * logged as `audit.action.unregistered`.
+ */
+export function auditLog(env: Env, { logger }: { logger?: Logger | undefined } = {}): AuditLog {
+  return createD1AuditLog(requireBinding(env, "AUDIT_DB"), {
+    actions: auditActions(),
+    strict: env.AUDIT_STRICT_ACTIONS === "true",
+    ...(logger === undefined ? {} : { logger }),
+  });
+}

package/template/modules/audit/files/test/audit.test.ts

@@ -0,0 +1,47 @@
+import { env } from "cloudflare:workers";
+import { beforeAll, describe, expect, it } from "vitest";
+import { APP_AUDIT_ACTIONS } from "../src/audit-actions.js";
+import { auditLog } from "../src/audit-log.js";
+import { auditSinkFor } from "../src/audit-sink.js";
+import { migrate } from "./migrate.js";
+
+describe("the audit trail", () => {
+  beforeAll(migrate);
+
+  it("platform packages record into it through the app's audit sink", async () => {
+    const sink = auditSinkFor(env);
+    expect(sink).toBeDefined();
+    await sink?.record({ action: APP_AUDIT_ACTIONS.settingsChanged, actorId: null, subjectId: "settings:sink", occurredAt: new Date("2040-01-01T00:00:00Z") });
+    const page = await auditLog(env).list({ subjectId: "settings:sink" });
+    expect(page.items.map((event) => event.action)).toEqual(["app.settings.changed"]);
+  });
+
+  it("stores the app's own events, redacted, and lists them newest first", async () => {
+    const log = auditLog(env);
+    const record = (minute: number, metadata: Record<string, unknown>) =>
+      log.record({
+        action: APP_AUDIT_ACTIONS.settingsChanged,
+        actorId: null,
+        subjectId: "settings:general",
+        occurredAt: new Date(`2040-01-02T00:0${String(minute)}:00Z`),
+        requestId: `request-${String(minute)}`,
+        metadata,
+      });
+    await record(1, { changed: ["timezone"] });
+    await record(2, { changed: ["locale"], apiToken: "do-not-store" });
+
+    const page = await log.list({ subjectId: "settings:general" });
+    expect(page.items.map(({ requestId, metadata }) => ({ requestId, metadata }))).toEqual([
+      { requestId: "request-2", metadata: { changed: ["locale"], apiToken: "[REDACTED]" } },
+      { requestId: "request-1", metadata: { changed: ["timezone"] } },
+    ]);
+    expect(await log.count({ subjectId: "settings:general" })).toBe(2);
+  });
+
+  it("refuses an unregistered action locally, so a typo fails the test that records it", async () => {
+    await expect(
+      auditLog(env).record({ action: "app.settings.chnaged", actorId: null, subjectId: "settings:typo", occurredAt: new Date() }),
+    ).rejects.toThrow(/not registered/);
+    expect(await auditLog(env).count({ subjectId: "settings:typo" })).toBe(0);
+  });
+});

package/template/modules/audit/module.json

@@ -0,0 +1,36 @@
+{
+  "name": "audit",
+  "description": "Audit trail (@awsmbiz/inbis-audit): one audit_event table for platform and app events with the app's action registry; with auth, the activity timelines and a My activity page.",
+  "order": 30,
+  "requires": [],
+  "dependencies": { "@awsmbiz/inbis-audit": "workspace:*" },
+  "wiring": {
+    "audit.imports": "wiring/audit.imports.ts",
+    "audit.sink": "wiring/audit.sink.ts",
+    "index.imports": "wiring/index.imports.ts",
+    "index.setup": "wiring/index.setup.ts",
+    "env.bindings": "wiring/env.bindings.ts",
+    "wrangler.vars": { "dev": "wiring/vars.dev.jsonc", "staging": "wiring/vars.deployed.jsonc", "production": "wiring/vars.deployed.jsonc" },
+    "wrangler.d1": "wiring/d1.jsonc",
+    "test.env": "wiring/test.env.ts",
+    "test.migrate": "wiring/test.migrate.ts",
+    "vitest.bindings": "wiring/vitest.bindings.ts",
+    "readme.modules": "wiring/readme.modules.md"
+  },
+  "when": [
+    {
+      "modules": ["auth"],
+      "files": "with-auth",
+      "wiring": {
+        "audit.catalogues.imports": "wiring/auth/audit.catalogues.imports.ts",
+        "audit.catalogues": "wiring/auth/audit.catalogues.ts",
+        "worker.imports": "wiring/auth/worker.imports.ts",
+        "worker.routes": "wiring/auth/worker.routes.ts",
+        "web.routes.imports": "wiring/auth/web.routes.imports.tsx",
+        "web.routes": "wiring/auth/web.routes.tsx",
+        "web.messages": "wiring/auth/web.messages.ts",
+        "readme.modules": "wiring/auth/readme.modules.md"
+      }
+    }
+  ]
+}

package/template/modules/audit/wiring/audit.imports.ts

@@ -0,0 +1 @@
+import { auditLog } from "./audit-log.js";

package/template/modules/audit/wiring/audit.sink.ts

@@ -0,0 +1,2 @@
+// The audit trail (src/audit-log.ts, binding AUDIT_DB).
+(env, options) => auditLog(env, options),

package/template/modules/audit/wiring/auth/audit.catalogues.imports.ts

@@ -0,0 +1 @@
+import { AUTH_AUDIT_ACTIONS } from "@awsmbiz/inbis-auth";

package/template/modules/audit/wiring/auth/audit.catalogues.ts

@@ -0,0 +1 @@
+AUTH_AUDIT_ACTIONS,

package/template/modules/audit/wiring/auth/readme.modules.md

@@ -0,0 +1,7 @@
+With sign-in (the `auth` module), the trail also holds auth's events (`AUTH_AUDIT_ACTIONS`,
+registered in `src/audit-sink.ts`), and `src/audit-routes.ts` serves the activity timelines:
+
+| Route | Who | |
+|---|---|---|
+| `GET /api/me/activity` | Anyone signed in | The caller's own events, newest first: the **My activity** page (`/activity`, `web/src/my-activity.tsx`) |
+| `GET /api/admin/audit-events` | Platform administrators | Every event; query `action`, `actor`, `subject`, `from`, `to`, `limit`, `cursor` |

package/template/modules/audit/wiring/auth/web.messages.ts

@@ -0,0 +1,26 @@
+"activity.title": "My activity",
+"activity.description": "Sign-ins and other changes to your account, newest first. If you don't recognise one, change your password.",
+"activity.loading": "Loading activity…",
+"activity.failed": "Your activity could not be loaded.",
+"activity.failedHint": "Check your connection and try again.",
+"activity.tryAgain": "Try again",
+"activity.empty": "No activity yet.",
+"activity.listLabel": "Activity",
+"activity.moreFailed": "Older activity could not be loaded. Try again.",
+"activity.loadMore": "Load older activity",
+"activity.method.email": "Email and password",
+"activity.method.phone-otp": "Phone code",
+"activity.action.auth.sign_in.succeeded": "Signed in",
+"activity.action.auth.sign_out": "Signed out",
+"activity.action.auth.password.changed": "Changed password",
+"activity.action.auth.password.reset": "Reset password",
+"activity.action.auth.email.verified": "Verified email address",
+"activity.action.auth.two_factor.enabled": "Turned on two-factor authentication",
+"activity.action.auth.two_factor.disabled": "Turned off two-factor authentication",
+"activity.action.auth.two_factor.backup_codes_regenerated": "Generated new backup codes",
+"activity.action.auth.two_factor.backup_code_used": "Used a backup code",
+"activity.action.auth.session.revoked": "Signed out a session",
+"activity.action.auth.session.others_revoked": "Signed out other sessions",
+"activity.action.auth.account.deletion_scheduled": "Scheduled account deletion",
+"activity.action.auth.account.deletion_cancelled": "Cancelled account deletion",
+"activity.action.auth.invitation.accepted": "Accepted an invitation",

package/template/modules/audit/wiring/auth/web.routes.imports.tsx

@@ -0,0 +1 @@
+import { MyActivity } from "./my-activity.js";

package/template/modules/audit/wiring/auth/web.routes.tsx

@@ -0,0 +1 @@
+{ path: "/activity", title: "activity.title", nav: true, render: ({ navigate }) => <MyActivity navigate={navigate} /> },

package/template/modules/audit/wiring/auth/worker.imports.ts

@@ -0,0 +1 @@
+import { mountAuditRoutes } from "./audit-routes.js";

package/template/modules/audit/wiring/auth/worker.routes.ts

@@ -0,0 +1,2 @@
+// Activity timelines (src/audit-routes.ts): GET /api/me/activity (signed in), GET /api/admin/audit-events (admins).
+mountAuditRoutes(app);

package/template/modules/audit/wiring/d1.jsonc

@@ -0,0 +1,8 @@
+{
+  // The audit trail (@awsmbiz/inbis-audit): after auth's and access control's, before DB.
+  "binding": "AUDIT_DB",
+  "database_name": "{{database_name}}",
+  "database_id": "{{database_id}}",
+  "migrations_dir": "node_modules/@awsmbiz/inbis-audit/migrations",
+  "migrations_table": "_inbis_audit_migrations"
+},

package/template/modules/audit/wiring/env.bindings.ts

@@ -0,0 +1,4 @@
+/** The audit trail's D1 binding (`@awsmbiz/inbis-audit` migrations), to the app's database. */
+AUDIT_DB: D1Database;
+/** `"true"`: an unregistered audit action throws (local development and tests). */
+AUDIT_STRICT_ACTIONS: string;

package/template/modules/audit/wiring/index.imports.ts

@@ -0,0 +1 @@
+import { auditActions } from "./audit-log.js";

package/template/modules/audit/wiring/index.setup.ts

@@ -0,0 +1,2 @@
+// The audit action registry: a malformed or platform-namespaced app action fails startup.
+auditActions();

package/template/modules/audit/wiring/readme.modules.md

@@ -0,0 +1,16 @@
+## Audit trail
+
+`@awsmbiz/inbis-audit` keeps one `audit_event` table for platform and app events, in the
+app's database through its own binding (`AUDIT_DB`, migrations shipped in the package and
+applied before the app's own). Metadata is redacted before it is stored.
+
+- **Recording an event:** `auditLog(c.env, { logger: c.var.logger }).record({ action,
+  actorId, subjectId, occurredAt, requestId, metadata })` (`src/audit-log.ts`).
+- **Action registry:** every action must be registered. Add the app's own to
+  `src/audit-actions.ts` (`APP_AUDIT_ACTIONS`, in the app's own namespaces); platform
+  packages' catalogues are listed in `src/audit-sink.ts`. A malformed name fails startup.
+  With `AUDIT_STRICT_ACTIONS` = `"true"` (local and tests) an unregistered action throws;
+  deployed (`"false"`) it is stored and logged as `audit.action.unregistered`.
+- **Platform packages** record through `auditSinkFor(env)` in `src/audit-sink.ts`.
+- **Reading:** `auditLog(env).list({ action, actorId, subjectId, from, to, limit, cursor })`
+  (newest first, keyset pages) and `count(...)`.

package/template/modules/audit/wiring/test.env.ts

@@ -0,0 +1 @@
+AUDIT_MIGRATIONS: D1Migration[];

package/template/modules/audit/wiring/test.migrate.ts

@@ -0,0 +1 @@
+await applyD1Migrations(env.AUDIT_DB, env.AUDIT_MIGRATIONS, "_inbis_audit_migrations");

package/template/modules/audit/wiring/vars.deployed.jsonc

@@ -0,0 +1,2 @@
+// Deployed, an unregistered audit action is stored anyway and logged (audit.action.unregistered).
+"AUDIT_STRICT_ACTIONS": "false",

package/template/modules/audit/wiring/vars.dev.jsonc

@@ -0,0 +1,2 @@
+// Unregistered audit actions throw locally (a typo fails the test that records it).
+"AUDIT_STRICT_ACTIONS": "true",

package/template/modules/audit/wiring/vitest.bindings.ts

@@ -0,0 +1 @@
+AUDIT_MIGRATIONS: await readD1Migrations("./node_modules/@awsmbiz/inbis-audit/migrations"),

package/template/modules/audit/with-auth/e2e/my-activity.spec.ts

@@ -0,0 +1,89 @@
+import { expect, test, type Page } from "@playwright/test";
+import { expectNoPageScroll, expectNoViolations, THEMES, VIEWPORTS } from "./axe.js";
+
+// My activity, against canned `GET /api/me/activity` responses: the page's own behaviour
+// (listing, paging, empty, failure, signed out) without depending on a seeded account.
+// The route itself is covered by test/audit-routes.test.ts.
+
+const event = (id: string, action: string, occurredAt: string, metadata: Record<string, unknown> | null = null) => ({
+  id,
+  action,
+  actorId: "user-1",
+  subjectId: "user:user-1",
+  occurredAt,
+  requestId: null,
+  metadata,
+});
+
+const FIRST = {
+  items: [
+    event("e3", "auth.sign_in.succeeded", "2040-01-03T09:00:00Z", { method: "email", ipAddress: "203.0.113.7", userAgent: "Firefox on Linux" }),
+    event("e2", "auth.password.changed", "2040-01-02T09:00:00Z"),
+  ],
+  nextCursor: "page-2",
+};
+const SECOND = { items: [event("e1", "app.settings.changed", "2040-01-01T09:00:00Z")], nextCursor: null };
+
+async function serveActivity(page: Page, respond: (cursor: string | null) => { status: number; body: unknown }) {
+  await page.route("**/api/me/activity?*", async (route) => {
+    const { status, body } = respond(new URL(route.request().url()).searchParams.get("cursor"));
+    await route.fulfill({ status, json: body });
+  });
+}
+
+test("lists the user's own activity, newest first, and pages to older events", async ({ page }) => {
+  await serveActivity(page, (cursor) => ({ status: 200, body: cursor === "page-2" ? SECOND : FIRST }));
+  await page.goto("/");
+  await page.getByRole("navigation", { name: "Main" }).getByRole("link", { name: "My activity" }).click();
+  await expect(page).toHaveTitle("My activity · React Hono App");
+  const list = page.getByRole("list", { name: "Activity" });
+  await expect(list.getByRole("listitem")).toHaveCount(2);
+  await expect(list.getByRole("listitem").first()).toContainText("Signed in");
+  await expect(list.getByRole("listitem").first()).toContainText("Email and password · 203.0.113.7 · Firefox on Linux");
+  await expect(list.getByRole("listitem").nth(1)).toContainText("Changed password");
+
+  await page.getByRole("button", { name: "Load older activity" }).click();
+  await expect(list.getByRole("listitem")).toHaveCount(3);
+  // An action without a message shows its name; focus moves to the first older event.
+  await expect(list.getByRole("listitem").nth(2)).toContainText("app.settings.changed");
+  await expect(list.getByRole("listitem").nth(2)).toBeFocused();
+  await expect(page.getByRole("button", { name: "Load older activity" })).toHaveCount(0);
+});
+
+test("says so when there is no activity yet", async ({ page }) => {
+  await serveActivity(page, () => ({ status: 200, body: { items: [], nextCursor: null } }));
+  await page.goto("/activity");
+  await expect(page.getByText("No activity yet.")).toBeVisible();
+});
+
+test("offers a retry when the activity cannot be loaded", async ({ page }) => {
+  let failing = true;
+  await serveActivity(page, () =>
+    failing ? { status: 500, body: { error: { code: "INTERNAL", message: "x", requestId: "r" } } } : { status: 200, body: FIRST },
+  );
+  await page.goto("/activity");
+  await expect(page.getByRole("alert")).toContainText("Your activity could not be loaded.");
+  failing = false;
+  await page.getByRole("button", { name: "Try again" }).click();
+  await expect(page.getByRole("list", { name: "Activity" }).getByRole("listitem")).toHaveCount(2);
+});
+
+test("sends a signed-out visitor to sign in, coming back here afterwards", async ({ page }) => {
+  await serveActivity(page, () => ({ status: 401, body: { error: { code: "UNAUTHENTICATED", message: "Sign in to continue.", requestId: "r" } } }));
+  await page.goto("/activity");
+  await expect(page).toHaveURL(/\/sign-in\?next=%2Factivity$/);
+});
+
+for (const theme of THEMES) {
+  for (const [viewport, size] of Object.entries(VIEWPORTS)) {
+    test(`My activity (${theme}, ${viewport}) has no accessibility violations`, async ({ page }) => {
+      await serveActivity(page, () => ({ status: 200, body: FIRST }));
+      await page.emulateMedia({ colorScheme: theme });
+      await page.setViewportSize(size);
+      await page.goto("/activity");
+      await expect(page.getByRole("list", { name: "Activity" }).getByRole("listitem")).toHaveCount(2);
+      await expectNoPageScroll(page);
+      await expectNoViolations(page);
+    });
+  }
+}

package/template/modules/audit/with-auth/src/audit-routes.ts

@@ -0,0 +1,21 @@
+import type { OpenAPIHono } from "@hono/zod-openapi";
+import type { ApiEnv } from "@awsmbiz/inbis-api";
+import { mountAuditTimeline, mountOwnActivity } from "@awsmbiz/inbis-audit/hono";
+import { requireAdmin, requireAuth, type AuthEnv } from "@awsmbiz/inbis-auth/hono";
+import type { Hono } from "hono";
+import { auditLog } from "./audit-log.js";
+
+/**
+ * The activity timelines over the audit trail, behind auth's session middleware
+ * (mounted after it, which sets `c.var.user`):
+ *
+ * - `GET /api/me/activity`: the signed-in user's own events, newest first (My activity).
+ * - `GET /api/admin/audit-events`: every event, filterable by action, actor, subject and
+ *   date range (platform administrators).
+ */
+export function mountAuditRoutes(app: OpenAPIHono<ApiEnv<Env>>): void {
+  const timeline = app as unknown as Hono<ApiEnv<Env> & AuthEnv>;
+  const log = (c: { env: Env; var: { logger: ApiEnv["Variables"]["logger"] } }) => auditLog(c.env, { logger: c.var.logger });
+  mountOwnActivity(timeline, { log, guard: requireAuth(), actorIdOf: (c) => c.var.user?.id });
+  mountAuditTimeline(timeline, { log, guard: requireAdmin() });
+}

package/template/modules/audit/with-auth/test/audit-routes.test.ts

@@ -0,0 +1,17 @@
+import { exports } from "cloudflare:workers";
+import { beforeAll, describe, expect, it } from "vitest";
+import { migrate } from "./migrate.js";
+
+const ORIGIN = "https://app.example.test";
+
+describe("the activity timelines", () => {
+  beforeAll(migrate);
+
+  for (const path of ["/api/me/activity", "/api/admin/audit-events"]) {
+    it(`GET ${path} needs a signed-in user`, async () => {
+      const response = await exports.default.fetch(new Request(`${ORIGIN}${path}`));
+      expect(response.status).toBe(401);
+      expect(await response.json()).toMatchObject({ error: { code: "UNAUTHENTICATED" } });
+    });
+  }
+});

package/template/modules/audit/with-auth/web/src/my-activity.tsx

@@ -0,0 +1,168 @@
+import { Alert, AlertDescription, AlertTitle, Button } from "@awsmbiz/inbis-ui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { isMessageKey, t } from "./messages.js";
+import type { Navigate } from "./navigation.js";
+
+/** One event from `GET /api/me/activity`. */
+interface ActivityEvent {
+  id: string;
+  action: string;
+  occurredAt: string;
+  metadata: Record<string, unknown> | null;
+}
+
+interface ActivityPage {
+  items: ActivityEvent[];
+  nextCursor: string | null;
+}
+
+type State =
+  | { kind: "loading" }
+  | { kind: "error" }
+  | { kind: "ready"; events: ActivityEvent[]; nextCursor: string | null; loadingMore: boolean; moreFailed: boolean };
+
+/** Where a signed-out visitor is sent; they come back here after signing in. */
+const SIGN_IN = "/sign-in?next=%2Factivity";
+
+/**
+ * The message for `prefix` + `value` when there is one, else the raw value: plain-language
+ * names for the actions a user performs (`activity.action.*`; others show their dotted
+ * name) and for sign-in methods (`activity.method.*`).
+ */
+function labelOf(prefix: string, value: string): string {
+  const key = `${prefix}${value}`;
+  return isMessageKey(key) ? t(key) : value;
+}
+
+const text = (value: unknown): string | null => (typeof value === "string" && value !== "" ? value : null);
+
+/** Where and how: sign-in method, IP address and browser, when recorded. */
+function detailsOf(event: ActivityEvent): string[] {
+  const metadata = event.metadata ?? {};
+  const method = text(metadata["method"]);
+  return [method === null ? null : labelOf("activity.method.", method), text(metadata["ipAddress"]), text(metadata["userAgent"])].filter(
+    (detail): detail is string => detail !== null,
+  );
+}
+
+const dateFormat = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" });
+
+function fetchPage(cursor: string | null): Promise<Response> {
+  const query = new URLSearchParams({ limit: "20" });
+  if (cursor !== null) query.set("cursor", cursor);
+  return fetch(`/api/me/activity?${query.toString()}`, { credentials: "include" });
+}
+
+/** My activity: the signed-in user's own audit events, newest first, to spot sign-ins they did not make. */
+export function MyActivity({ navigate }: { navigate: Navigate }) {
+  const [state, setState] = useState<State>({ kind: "loading" });
+  const [attempt, setAttempt] = useState(0);
+  /** Index of the first event of the last page loaded by "Load older activity": it gets focus. */
+  const focusIndex = useRef<number | null>(null);
+  const items = useRef<(HTMLLIElement | null)[]>([]);
+
+  useEffect(() => {
+    let active = true;
+    fetchPage(null)
+      .then((response) => {
+        if (!active) return null;
+        if (response.status === 401) navigate(SIGN_IN, { replace: true });
+        else if (!response.ok) setState({ kind: "error" });
+        else return response.json() as Promise<ActivityPage>;
+        return null;
+      })
+      .then((page) => {
+        if (active && page !== null) {
+          setState({ kind: "ready", events: page.items, nextCursor: page.nextCursor, loadingMore: false, moreFailed: false });
+        }
+      })
+      .catch(() => {
+        if (active) setState({ kind: "error" });
+      });
+    return () => {
+      active = false;
+    };
+  }, [navigate, attempt]);
+
+  useEffect(() => {
+    if (state.kind !== "ready" || focusIndex.current === null) return;
+    items.current[focusIndex.current]?.focus();
+    focusIndex.current = null;
+  }, [state]);
+
+  const loadMore = useCallback(async () => {
+    if (state.kind !== "ready" || state.nextCursor === null) return;
+    const { events, nextCursor } = state;
+    setState({ ...state, loadingMore: true, moreFailed: false });
+    const response = await fetchPage(nextCursor).catch(() => null);
+    if (response?.ok !== true) {
+      setState({ ...state, loadingMore: false, moreFailed: true });
+      return;
+    }
+    const page = (await response.json()) as ActivityPage;
+    focusIndex.current = page.items.length > 0 ? events.length : null;
+    setState({ kind: "ready", events: [...events, ...page.items], nextCursor: page.nextCursor, loadingMore: false, moreFailed: false });
+  }, [state]);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-2xl font-semibold tracking-tight">{t("activity.title")}</h1>
+        <p className="text-muted-foreground">{t("activity.description")}</p>
+      </div>
+      {state.kind === "loading" ? (
+        <p role="status" className="text-sm text-muted-foreground">
+          {t("activity.loading")}
+        </p>
+      ) : null}
+      {state.kind === "error" ? (
+        <>
+          <Alert variant="destructive" role="alert">
+            <AlertTitle>{t("activity.failed")}</AlertTitle>
+            <AlertDescription>{t("activity.failedHint")}</AlertDescription>
+          </Alert>
+          <Button
+            className="self-start"
+            onClick={() => {
+              setState({ kind: "loading" });
+              setAttempt((n) => n + 1);
+            }}
+          >
+            {t("activity.tryAgain")}
+          </Button>
+        </>
+      ) : null}
+      {state.kind === "ready" && state.events.length === 0 ? <p>{t("activity.empty")}</p> : null}
+      {state.kind === "ready" && state.events.length > 0 ? (
+        <ol aria-label={t("activity.listLabel")} className="flex flex-col divide-y">
+          {state.events.map((event, index) => (
+            <li
+              key={event.id}
+              ref={(element) => {
+                items.current[index] = element;
+              }}
+              tabIndex={-1}
+              className="flex flex-col gap-1 py-3 outline-offset-2 first:pt-0"
+            >
+              <span className="font-medium">{labelOf("activity.action.", event.action)}</span>
+              <time dateTime={event.occurredAt} className="text-sm text-muted-foreground">
+                {dateFormat.format(new Date(event.occurredAt))}
+              </time>
+              {detailsOf(event).length > 0 ? <span className="text-sm break-words text-muted-foreground">{detailsOf(event).join(" · ")}</span> : null}
+            </li>
+          ))}
+        </ol>
+      ) : null}
+      {state.kind === "ready" && state.moreFailed ? (
+        <Alert variant="destructive" role="alert">
+          <AlertDescription>{t("activity.moreFailed")}</AlertDescription>
+        </Alert>
+      ) : null}
+      {state.kind === "ready" && state.nextCursor !== null ? (
+        <Button variant="outline" className="self-start" disabled={state.loadingMore} onClick={() => void loadMore()}>
+          {state.loadingMore ? t("common.loading") : t("activity.loadMore")}
+        </Button>
+      ) : null}
+    </div>
+  );
+}