create-mithaq 0.0.0-stage → 0.1.1

package/template/templates/asas/src/audit-log/audit-log.ts

@@ -0,0 +1,187 @@
+import { actorPermissions, count, defaultFields, find, findOne, invalid, type Ctx, type Held } from 'mithaq'
+import { defineKayan, rows, organization } from '../mithaq.ts'
+import { platformClosed } from '../tenant-access.ts'
+import { auditLogName, type Change } from './sink.ts'
+
+/** The kayan whose `find` this actor holds, which are the kayan whose entries it reads. */
+const heldKayans = (held: Exclude<Held, true | undefined>) =>
+  [...held].filter((key) => key.endsWith('.find') && !key.includes('.fields.')).map((key) => key.slice(0, -'.find'.length))
+
+/**
+ * The read the log's rows are ANDed with, so it narrows and never widens: an
+ * entry of a kayan the actor may not list is no entry it reads. An actor
+ * nothing grades reads none, which is the closed direction.
+ */
+const readableKayans = ({ user }: { user: unknown }) => {
+  const held = actorPermissions(user)
+  if (held === true) return true
+  const kayans = held ? heldKayans(held) : []
+  return kayans.length ? { kayan: { in: kayans } } : false
+}
+
+/**
+ * Whether this actor reads one column of the kayan an entry names. The access
+ * target grades every column of this project by its key.
+ */
+const readsField = (held: Held, kayan: string, field: string) => held === true || held?.has(`${kayan}.fields.${field}`) === true
+
+/**
+ * Whether this actor reads the provider's people, by the key of their `find`.
+ * A command's operating-system user is the one thing in the log that names a
+ * person no row of the people does, so only such a reader sees or asks for it.
+ */
+const readsPeople = (held: Held) => held === true || held?.has('user.find') === true
+
+/**
+ * What the sink writes for a command: the command, then the operating-system
+ * user in parentheses. The command is the shortest part before ` (`, so a user
+ * holding a parenthesis is never left in it.
+ */
+const commandActor = /^(.+?) \(.+\)$/
+
+/**
+ * The step after the read: each entry keeps the changes of the columns the
+ * actor may read and drops the rest whole, so a column it may not read shows
+ * neither value nor that it changed. The server does it rather than the page,
+ * because the log is read over HTTP as well as drawn.
+ */
+const visibleChanges = (ctx: Ctx): Ctx => {
+  const held = actorPermissions(ctx.actor)
+  const trim = (entry: unknown) => {
+    if (!entry || typeof entry !== 'object' || typeof (entry as { changes?: unknown }).changes !== 'string') return entry
+    const { kayan, changes } = entry as { kayan: string; changes: string }
+    const all = JSON.parse(changes) as Record<string, Change>
+    const kept = Object.fromEntries(Object.entries(all).filter(([field]) => readsField(held, kayan, field)))
+    // A command's actor is the command alone to a reader of no people, its operating-system user blanked.
+    const actor = (entry as { actor?: unknown }).actor
+    const named = !readsPeople(held) && typeof actor === 'string' ? { actor: commandActor.exec(actor)?.[1] ?? actor } : {}
+    return { ...entry, ...named, changes: JSON.stringify(kept) }
+  }
+  const data: unknown = ctx.data
+  const page = data && typeof data === 'object' && Array.isArray((data as { docs?: unknown }).docs) ? (data as { docs: unknown[] }) : undefined
+  return { ...ctx, data: (page ? { ...page, docs: page.docs.map(trim) } : trim(data)) as Record<string, unknown> }
+}
+
+/**
+ * The columns the log is read by. Nothing else filters or orders it, `changes`
+ * above all: a `contains` over its text would read a value out of a column the
+ * reader holds no key for, before `visibleChanges` trims the page. The
+ * organization is core's own filter and `impersonatedBy` names staff.
+ */
+const queryable = new Set(['kayan', 'record', 'createdAt', 'operation', 'actor'])
+
+const namedIn = (where: unknown): string[] => {
+  if (!where || typeof where !== 'object') return []
+  return Object.entries(where).flatMap(([key, value]) =>
+    (key === 'and' || key === 'or') && Array.isArray(value) ? value.flatMap(namedIn) : [key])
+}
+
+/**
+ * The step before the read: a `where` or a `sort` naming any column but those
+ * is refused 400, before the store is asked, on every read the log declares.
+ * The runner's own checks still run after it on what it lets through.
+ */
+const queriedByQueryable = (ctx: Ctx): Ctx => {
+  const { where, sort } = ctx.data as { where?: unknown; sort?: unknown }
+  const field = namedIn(where).find((name) => !queryable.has(name))
+  if (field !== undefined) {
+    throw invalid({ message: `Kayan "auditLog" is filtered by ${[...queryable].join(', ')} alone, and not by "${field}".`, key: 'error.invalid.where', params: { kayan: 'auditLog', field } })
+  }
+  // A reader of no people names an actor in no filter and no sort: a pattern, a range, an order or
+  // even an equality over the string would let it confirm a guessed operating-system user of a
+  // command's actor.
+  if (!readsPeople(actorPermissions(ctx.actor)) && (namedIn(where).includes('actor') || (typeof sort === 'string' && sort.replace(/^-/, '') === 'actor'))) {
+    throw invalid({ message: 'Kayan "auditLog" is neither filtered nor sorted by "actor" for a reader of no people.', key: 'error.invalid.where', params: { kayan: 'auditLog', field: 'actor' } })
+  }
+  if (sort !== undefined && !(typeof sort === 'string' && queryable.has(sort.replace(/^-/, '')))) {
+    throw invalid({ message: `Kayan "auditLog" is sorted by ${[...queryable].join(', ')} alone.`, key: 'error.invalid.sort_field', params: { kayan: 'auditLog', field: String(sort) } })
+  }
+  return ctx
+}
+
+/**
+ * The audit log's rows: an organization reads its own entries, and nothing writes
+ * one through the log, a caller of any role included, since the service
+ * target's sink writes each entry through the store inside the write it
+ * records. Every platform role is closed: the platform lists no entry, and a
+ * staff member's own impersonated writes are the entries it would read.
+ */
+const auditLogAccess = rows({
+  '*': { create: false, read: true, update: false, delete: false },
+  ...platformClosed,
+})
+
+/**
+ * The audit log: one row per row a write changed, written by the service
+ * target's audit sink inside that write's own transaction and by nothing else.
+ * It declares no operation that writes, so no caller creates, edits or deletes
+ * an entry, and each of its rows answers `false` for every write besides.
+ *
+ * It is its organization's own, and a record's entries are read on that record's edit
+ * page. The dashboard lists it for its access report alone, which is what the
+ * edit pages' panel is drawn by, and draws no page of it. The platform lists
+ * none of it and reads none of it.
+ */
+export const auditLog = defineKayan({
+  name: auditLogName,
+  dbName: 'audit_log',
+  messages: {
+    singular: { en: 'Audit entry', ar: 'سجل تدقيق' },
+    plural: { en: 'Audit log', ar: 'سجل التدقيق' },
+    // What the activity panel draws beside the field labels.
+    activity: { en: 'Activity', ar: 'النشاط' },
+    loading: { en: 'Loading activity…', ar: 'جارٍ تحميل النشاط…' },
+    empty: { en: 'Nothing has changed here yet.', ar: 'لم يتغير شيء هنا بعد.' },
+    failed: { en: 'The activity could not be read.', ar: 'تعذرت قراءة النشاط.' },
+    more: { en: 'Show older', ar: 'عرض الأقدم' },
+    system: { en: 'The system', ar: 'النظام' },
+    event: { en: '{action} by {actor}', ar: '{action} بواسطة {actor}' },
+    // Staff writing as a member: the real person first, as the member they wrote as.
+    impersonated: { en: '{staff} as {member}', ar: '{staff} بصفة {member}' },
+    // One per operation a tenant kayan writes through, which is every entry the sink records.
+    action: {
+      create: { en: 'Created', ar: 'أُنشئ' },
+      update: { en: 'Updated', ar: 'حُدِّث' },
+      delete: { en: 'Deleted', ar: 'حُذف' },
+      updateMany: { en: 'Updated', ar: 'حُدِّث' },
+      deleteMany: { en: 'Deleted', ar: 'حُذف' },
+      restoreVersion: { en: 'Restored a version', ar: 'استُعيد إصدار' },
+      archive: { en: 'Archived', ar: 'أُرشف' },
+      archiveMany: { en: 'Archived', ar: 'أُرشف' },
+    },
+    someone: { en: 'Someone', ar: 'شخص ما' },
+    // A command line write, named for a reader of the people: the command and
+    // the operating-system user who ran it.
+    command: { en: 'the command {command} ({user})', ar: 'الأمر {command} ({user})' },
+    // The viewer's own entry, which needs no read of the people to name. Its
+    // sentence is its own, since Arabic joins the person to "by" in one word,
+    // "بواسطتك", and not as "بواسطة أنت".
+    you: { en: 'You', ar: 'أنت' },
+    eventYou: { en: '{action} by You', ar: '{action} بواسطتك' },
+    none: { en: 'No field you may read changed.', ar: 'لم يتغير حقل يمكنك قراءته.' },
+  },
+  access: { ...auditLogAccess, read: readableKayans },
+  targets: {
+    dashboard: {},
+    service: {
+      operations: {
+        find: { steps: [queriedByQueryable, find, visibleChanges] },
+        findByID: { steps: [queriedByQueryable, findOne, visibleChanges] },
+        count: { steps: [queriedByQueryable, count] },
+      },
+    },
+  },
+  fields: {
+    id: defaultFields.id,
+    createdAt: defaultFields.createdAt,
+    organization,
+    kayan: { kind: 'text', label: { en: 'Kayan', ar: 'الكيان' }, rules: { required: true, maxLength: 60 } },
+    record: { kind: 'text', label: { en: 'Record', ar: 'السجل' }, rules: { required: true, index: true } },
+    operation: { kind: 'text', label: { en: 'Operation', ar: 'العملية' }, rules: { required: true, maxLength: 60 } },
+    actor: { kind: 'text', label: { en: 'Actor', ar: 'المنفذ' } },
+    impersonatedBy: { kind: 'text', label: { en: 'Impersonated by', ar: 'انتحل الصفة' } },
+    // Never an order, which the runner refuses by name for every read, and never
+    // a filter or a search, which the dashboard offers only where a field opts in.
+    changes: { kind: 'text', label: { en: 'Changes', ar: 'التغييرات' }, rules: { required: true }, targets: { dashboard: { sortable: false } } },
+  },
+})

package/template/templates/asas/src/audit-log/sink.ts

@@ -0,0 +1,89 @@
+import type { AuditHandler } from 'mithaq'
+import { same } from 'mithaq/admin'
+
+/**
+ * The kayan this sink writes, which `./audit-log.ts` declares under the same
+ * name. A file of its own, apart from the kayan's, because the service target
+ * that holds this sink is built in `../mithaq.ts` and the kayan imports its
+ * `defineKayan` from there, so one file holding both would be a cycle.
+ */
+export const auditLogName = 'auditLog'
+
+/** One changed column: what it held before the write and what it holds after. */
+export type Change = { from: unknown; to: unknown }
+
+/**
+ * What the Activity panel draws as a dash: absent, `null`, an empty string or
+ * an empty list. A column that is one of these before and after changed
+ * nothing a reader could see.
+ */
+export const empty = (value: unknown) => value === undefined || value === null || value === '' || (Array.isArray(value) && !value.length)
+
+/**
+ * The columns whose value differs, each with its value on both sides and
+ * `null` for a side that held none. A column empty on both sides is no change,
+ * so a create lists only what it set and a delete only what the row held.
+ */
+export const changesOf = (before: Readonly<Record<string, unknown>>, after: Readonly<Record<string, unknown>>) => {
+  const changes: Record<string, Change> = {}
+  for (const key of new Set([...Object.keys(before), ...Object.keys(after)])) {
+    if (!same(before[key], after[key]) && !(empty(before[key]) && empty(after[key]))) changes[key] = { from: before[key] ?? null, to: after[key] ?? null }
+  }
+  return changes
+}
+
+const rowOf = (value: unknown): Readonly<Record<string, unknown>> | undefined =>
+  value && typeof value === 'object' && !Array.isArray(value) && 'id' in value ? (value as Record<string, unknown>) : undefined
+
+const stringOf = (value: unknown) => (typeof value === 'string' ? value : null)
+
+/**
+ * The service target's audit sink: one `auditLog` row per row a write changed,
+ * written through the store and the transaction the write itself runs in, so
+ * the entry commits with the change or not at all. It goes to the store and
+ * not through an operation, because the log declares none that writes: this is
+ * the only thing that writes it.
+ *
+ * A bulk runs every row through the single-row write of its effect, which
+ * audits that row, and then audits itself with the page of rows as its
+ * result; that second call names no row and is passed over here. An update
+ * that moved nothing but the columns the runner bumps on every write declines
+ * its own row. A delete of a kayan with no soft-delete field removes the row,
+ * so its change is every column to nothing; a soft delete hands back the row it
+ * marked, and its change is the mark.
+ *
+ * The actor is the person the write ran as, and `impersonatedBy` the real one
+ * behind an impersonated session. `mithaq rbac assign` hands the sink no person
+ * but the command and the operating-system user, and the entry names both. The
+ * organization is the one the row belongs to, which is the active one inside a
+ * managed write and the one the log is read in; a shared kayan writes no entry.
+ */
+export const auditSink: AuditHandler = async ({ effect, kayan, operation, dataBefore, dataAfter, store, tx, user }) => {
+  // A shared kayan writes no entry: the log is read in one organization alone,
+  // so an entry of none is one nobody reads, and the shared kayan are the
+  // provider's generated auth tables and local auth's accounts, whose rows hold
+  // tokens and hashes a log should never keep.
+  const owner = kayan.tenant
+  if (effect === 'read' || !store || kayan.name === auditLogName || !owner) return
+  const before = dataBefore ?? {}
+  const after = rowOf(dataAfter)
+  const record = after?.id ?? dataBefore?.id
+  if (record === undefined || record === null) return
+  const removed = effect === 'delete' && !kayan.softDelete
+  const changes = changesOf(before, removed ? {} : (after ?? {}))
+  if (effect === 'update' && Object.keys(changes).every((name) => kayan.fields[name]?.rules?.nowOnUpdate)) return
+  const actor = user && typeof user === 'object' ? (user as { id?: unknown; impersonatedBy?: unknown; command?: unknown; osUser?: unknown }) : undefined
+  await store.insert({ tx, kayan: auditLogName, data: {
+    createdAt: new Date(),
+    organization: stringOf(after?.[owner] ?? before[owner]),
+    kayan: kayan.name,
+    record: String(record),
+    operation,
+    actor: stringOf(actor?.id) ?? (typeof actor?.command === 'string' ? `${actor.command} (${String(actor.osUser)})` : null),
+    impersonatedBy: stringOf(actor?.impersonatedBy),
+    // JSON in a text column, because the language ships no json kind. The log
+    // refuses any filter or sort on it, since a `contains` over the text would
+    // read a value its reader may not.
+    changes: JSON.stringify(changes),
+  } })
+}

package/template/templates/asas/src/audit-log/ui/activity.tsx

@@ -0,0 +1,243 @@
+// The entries are read in the browser, as the viewer, from the log's own `find`,
+// which answers only this tenant's entries of kayan the viewer lists and only the
+// changes of columns it reads. The page holds only the fields this viewer reads
+// as well, so a change the server let through for a column the page left out is
+// not drawn either.
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import type { ClientField, ClientKayan, ComponentProps, Row } from 'mithaq/admin'
+import { useAccess, useClient, useKayan, useLocale, useRecord, useScreen, useUser } from 'mithaq/admin/react'
+import { empty } from '../sink.ts'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { cellFor } from '@/components/mithaq/cells.tsx'
+import { formatDate, labelFor, operationLabelFor, type FindApi, type FoundPage, type Translate } from '@/components/mithaq/controls.tsx'
+import { useRelationshipTitles, type RelationshipTitles } from '@/components/mithaq/relationship-cell.tsx'
+
+/** One entry as the log's `find` answers it. */
+export type Entry = {
+  id: string
+  createdAt: string | Date
+  operation: string
+  actor?: string | null
+  impersonatedBy?: string | null
+  changes: string
+}
+
+const limit = 10
+
+/** The columns every kayan of this project carries and no person edits, which the panel leaves out. */
+const technical = new Set(['id', 'organization', 'createdAt', 'updatedAt'])
+
+/**
+ * Who a write ran as, as a relationship to the provider's people, so the panel
+ * names them through the same read a relationship cell does: the active
+ * organization's members by their name, and anyone that read does not answer as
+ * someone.
+ */
+const actorField = { name: 'actor', kind: 'relationship', relationTo: 'user', label: {}, rules: {}, component: 'relationship', cell: 'relationship' } as unknown as ClientField
+
+/**
+ * What the sink writes for a command: the command, then the operating-system user
+ * in parentheses. A user's id holds no space, so no person is read as one.
+ */
+const commandOf = /^(.+?) \((.+)\)$/
+
+const changesOf = (entry: Entry): [string, { from: unknown; to: unknown }][] => {
+  try {
+    return Object.entries(JSON.parse(entry.changes) as Record<string, { from: unknown; to: unknown }>)
+  } catch {
+    return []
+  }
+}
+
+const units: [Intl.RelativeTimeFormatUnit, number][] = [['year', 31_536_000], ['month', 2_592_000], ['week', 604_800], ['day', 86_400], ['hour', 3_600], ['minute', 60], ['second', 1]]
+
+/** How long ago, in the viewer's own locale, in the largest unit that is at least one. */
+export const relative = ({ at, locale, now = Date.now() }: { at: Date; locale: string; now?: number }) => {
+  const seconds = Math.round((at.getTime() - now) / 1000)
+  const [unit, size] = units.find(([, size]) => Math.abs(seconds) >= size) ?? units.at(-1)!
+  return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(Math.round(seconds / size), unit)
+}
+
+type EntriesProps = {
+  entries: readonly Entry[]
+  /** The viewer's own id, whom an entry that names them calls "You", without a read of the people. */
+  viewer?: string
+  /** Whether the viewer reads the provider's people, which is what lets a command's operating-system user be named. */
+  people?: boolean
+  kayan: ClientKayan
+  titles?: RelationshipTitles
+  t: Translate
+  locale: string
+}
+
+/** The entries drawn, with nothing read: what the panel shows once a page has come back. */
+export function ActivityEntries({ entries, kayan, titles, t, locale, viewer, people }: EntriesProps) {
+  const copy = { t, locale }
+  // A person the title read did not name, one the reader may not read among
+  // them, is someone, never the raw id.
+  const named = (id: string | null | undefined) => {
+    if (!id) return t('auditLog.system', 'The system') ?? 'The system'
+    if (id === viewer) return t('auditLog.you', 'You') ?? 'You'
+    // A command's actor, which the sink writes as one string, and which no
+    // people read names: said in the viewer's locale to a reader of the
+    // people, with each part isolated so the Arabic sentence keeps the
+    // command's own direction.
+    const command = people ? commandOf.exec(id) : null
+    if (command) return (t('auditLog.command', 'the command {command} ({user})') ?? '').replace('{command}', () => `\u2068${command[1]}\u2069`).replace('{user}', () => `\u2068${command[2]}\u2069`)
+    const title = titles?.get(`user:${id}`)
+    return typeof title === 'string' ? title : (t('auditLog.someone', 'Someone') ?? 'Someone')
+  }
+  const drawn = (field: ClientField, value: unknown): ReactNode =>
+    empty(value) ? '—' : cellFor(field)({ kayan, field, value, t, locale, titles })
+  return (
+    <ol className="grid gap-4 text-sm">
+      {entries.map((entry) => {
+        const at = new Date(entry.createdAt)
+        // Every operation has its words in the log's own scope, in the past
+        // tense the sentence reads in, and one a project adds before it
+        // writes them falls back to the operation's own label.
+        const action = t(`auditLog.action.${entry.operation}`, operationLabelFor({ kayan, operation: { name: entry.operation }, copy })) ?? entry.operation
+        // Staff writing inside a member's session is named first, as the member.
+        const actor = entry.impersonatedBy
+          ? (t('auditLog.impersonated', '{staff} as {member}') ?? '{staff} as {member}').replace('{staff}', () => named(entry.impersonatedBy)).replace('{member}', () => named(entry.actor))
+          : named(entry.actor)
+        const shown = changesOf(entry).flatMap(([name, change]) => {
+          const field = technical.has(name) ? undefined : kayan.fields.find((one) => one.name === name)
+          return field ? [{ field, change }] : []
+        })
+        return (
+          <li key={entry.id} data-entry={entry.operation} className="grid grid-cols-[2rem_minmax(0,1fr)] gap-3">
+            <Avatar className="mt-0.5 size-8">
+              <AvatarFallback>{(named(entry.impersonatedBy ?? entry.actor).trim()[0] ?? '?').toUpperCase()}</AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-baseline justify-between gap-2">
+                <p data-event className="font-medium">
+                  {(viewer && entry.actor === viewer && !entry.impersonatedBy ? (t('auditLog.eventYou', '{action} by You') ?? '{action} by You') : (t('auditLog.event', '{action} by {actor}') ?? '{action} by {actor}')).replace('{action}', () => action).replace('{actor}', () => actor)}
+                </p>
+                <time dateTime={at.toISOString()} className="text-muted-foreground shrink-0 text-xs">
+                  {relative({ at, locale })}
+                </time>
+              </div>
+              <p className="text-muted-foreground text-xs">
+                {formatDate({ value: at, locale })}
+              </p>
+              {shown.length ? (
+                <ul className="text-muted-foreground mt-1.5 grid gap-1">
+                  {shown.map(({ field, change }) => (
+                    <li key={field.name} data-change={field.name} className="break-words">
+                      <span className="text-foreground">{labelFor({ kayan, field, copy })}</span>
+                      {': '}
+                      <span data-from>{drawn(field, change.from)}</span>
+                      <span aria-hidden className="mx-1 inline-block rtl:rotate-180">→</span>
+                      <span data-to>{drawn(field, change.to)}</span>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="text-muted-foreground mt-1.5">{t('auditLog.none', 'No field you may read changed.')}</p>
+              )}
+            </div>
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+/**
+ * The panel a page names as a component node. It reads the row the page
+ * draws and the kayan it belongs to off the screen, so one file serves every
+ * kayan's edit page.
+ */
+export function Activity(_: ComponentProps) {
+  const { t, locale } = useLocale()
+  const kayan = useKayan()
+  const record = useRecord()
+  const client = useClient()
+  const screen = useScreen()
+  const viewer = useUser().id
+  const people = useAccess().collections?.user?.read === true
+  const id = record?.id === undefined ? undefined : String(record.id)
+  // The row as this page last drew it: a save moves its `updatedAt`, and the
+  // panel reads its entries again from the first page, the new one on top.
+  const seen = `${id}@${String(record?.updatedAt ?? '')}`
+  // What has been read, and how many pages were asked for, each held with the
+  // row it is for, so a page that moves to another row, or the same row
+  // saved, starts at its first page rather than drawing the last one's.
+  const [read, setRead] = useState<{ seen: string; docs: Entry[]; more: boolean } | { seen: string; failed: true }>()
+  const [asked, setAsked] = useState({ seen, page: 1 })
+  const page = asked.seen === seen ? asked.page : 1
+
+  // The client is left out of the dependencies: the host makes a new one on
+  // every render of the page, and each posts to the same route, so following it
+  // would read the same page again on every render.
+  useEffect(() => {
+    if (!id) return
+    let live = true
+    const where = { and: [{ kayan: { equals: kayan.name } }, { record: { equals: id } }] }
+    ;(client({ kayan: 'auditLog', operation: 'find', input: { where, sort: '-createdAt', limit, page, depth: 0 } }) as Promise<FoundPage>).then(
+      (found) => {
+        if (!live) return
+        // The pages before this one, as far as they go, and this one after
+        // them, less any entry already drawn: a write that lands between two
+        // pages moves every older entry down one, so the next page opens on
+        // the one the last page ended with.
+        setRead((held) => {
+          const before = held?.seen === seen && 'docs' in held ? held.docs.slice(0, (page - 1) * limit) : []
+          const drawn = new Set(before.map((entry) => entry.id))
+          return { seen, docs: [...before, ...(found.docs as Entry[]).filter((entry) => !drawn.has(entry.id))], more: found.hasNextPage }
+        })
+      },
+      () => live && setRead({ seen, failed: true }),
+    )
+    return () => {
+      live = false
+    }
+  }, [kayan.name, seen, page])
+
+  // Every kayan this screen crosses, read through the screen's own client, so
+  // a relationship's value and the actor are named the way a list names them.
+  const kayans = useMemo(() => Object.values(screen.kayan), [screen])
+  const api = useMemo<FindApi>(
+    () => Object.fromEntries(kayans.map((one) => [one.name, { find: (input: Row) => client({ kayan: one.name, operation: 'find', input }) as Promise<FoundPage> }])),
+    [kayans],
+  )
+  const shown = read?.seen === seen ? read : undefined
+  const entries = shown && 'docs' in shown ? shown.docs : []
+  // Each entry's actor, both people of an impersonation, and every value a
+  // change holds, as rows the title read groups by the kayan each points at.
+  const docs = entries.flatMap((entry) => [
+    { actor: [entry.actor, entry.impersonatedBy].filter(Boolean) },
+    ...changesOf(entry).flatMap(([name, change]) => [{ [name]: change.from }, { [name]: change.to }]),
+  ])
+  const titles = useRelationshipTitles({ fields: [...kayan.fields, actorField], docs, context: { api, client: kayans, locale } })
+
+  return (
+    <Card data-panel="activity">
+      <CardHeader>
+        <CardTitle>{t('auditLog.activity', 'Activity')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {shown === undefined ? (
+          <p className="text-muted-foreground text-sm">{t('auditLog.loading', 'Loading activity…')}</p>
+        ) : 'failed' in shown ? (
+          <p className="text-destructive text-sm">{t('auditLog.failed', 'The activity could not be read.')}</p>
+        ) : !entries.length ? (
+          <p className="text-muted-foreground text-sm">{t('auditLog.empty', 'Nothing has changed here yet.')}</p>
+        ) : (
+          <div className="grid gap-4">
+            <ActivityEntries entries={entries} kayan={kayan} titles={titles} t={t} locale={locale} viewer={viewer} people={people} />
+            {shown.more ? (
+              <Button type="button" variant="outline" size="sm" onClick={() => setAsked({ seen, page: page + 1 })}>
+                {t('auditLog.more', 'Show older')}
+              </Button>
+            ) : null}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}