diff --git a/.gitignore b/.gitignore
index e54f9bd9..5ba221c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,4 +16,7 @@ migration/out/
 
 # The end-to-end run's database lives in /tmp, outside the tree the dev server watches (0029).
 
-../../../../../tmp/nnt-e2e-3101
\ No newline at end of file
+../../../../../tmp/nnt-e2e-3101
+
+# `bun run shots` writes here. The pictures are for looking at once, not for keeping.
+.shots/
diff --git a/README.md b/README.md
index c4303bf9..65ec77f6 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,18 @@ emptying the database between suites, and names each suite as it starts so a slo
 suite is slow (0029). CI gates on the first; the second runs nightly and on demand.
 `bun test <file>` still runs one suite on its own.
 
+### Developer tools
+
+Running locally, `/dev` seeds a persona per role plus a plain member, a guest and a tombstone,
+signs in as any of them without a password, and shows the local mailbox alongside the permissions
+the current session resolves to. It is an authentication bypass, so it does not exist in a build:
+`nuxt.config` leaves the page and its routes out of the bundle, and `tests/unit/dev-tools.test.ts`
+greps a built `.output` to prove it (K-124).
+
+`bun run shots` writes a picture of every admin screen at two widths into `.shots/`, which is
+gitignored. It gates nothing and CI never runs it; it is there so a visual change can be reviewed
+from the images rather than from the diff.
+
 The migration tooling is standalone and has its own instructions in
 [`migration/README.md`](migration/README.md); the application never imports from it.
 
diff --git a/app/components/AdminToolbar.vue b/app/components/AdminToolbar.vue
new file mode 100644
index 00000000..60e7f0bd
--- /dev/null
+++ b/app/components/AdminToolbar.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+// One shape for every admin list: a search of fixed width, the filters behind one button so the row
+// cannot resize, and what is filtered shown as chips (0032).
+
+export interface ActiveFilter {
+  key: string
+  label: string
+  icon?: string
+  clear: () => void
+}
+
+const search = defineModel<string>('search', { default: '' })
+
+withDefaults(defineProps<{
+  placeholder?: string
+  active?: ActiveFilter[]
+  loading?: boolean
+  // A page with nothing behind the button says so rather than offering an empty panel.
+  filterable?: boolean
+}>(), {
+  placeholder: 'Search',
+  active: () => [],
+  loading: false,
+  filterable: true,
+})
+
+const emit = defineEmits<{ clear: [] }>()
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex flex-wrap items-center gap-2">
+      <UInput
+        v-model="search"
+        icon="i-lucide-search"
+        :placeholder="placeholder"
+        :loading="loading"
+        class="w-full sm:w-80"
+        data-test="toolbar-search"
+      />
+
+      <UPopover v-if="filterable">
+        <UButton
+          icon="i-lucide-sliders-horizontal"
+          color="neutral"
+          variant="outline"
+          data-test="toolbar-filters"
+          :label="active.length ? `Filters (${active.length})` : 'Filters'"
+        />
+
+        <template #content>
+          <div class="w-80 max-h-[calc(100vh-8rem)] space-y-4 overflow-y-auto p-4">
+            <slot name="filters" />
+          </div>
+        </template>
+      </UPopover>
+
+      <div class="ms-auto flex flex-wrap items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div
+      v-if="active.length"
+      class="flex flex-wrap items-center gap-2"
+      data-test="toolbar-active"
+    >
+      <UBadge
+        v-for="filter in active"
+        :key="filter.key"
+        :icon="filter.icon"
+        color="neutral"
+        variant="subtle"
+      >
+        {{ filter.label }}
+        <UButton
+          icon="i-lucide-x"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :aria-label="`Clear ${filter.label}`"
+          @click="filter.clear()"
+        />
+      </UBadge>
+
+      <UButton
+        label="Clear all"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        data-test="toolbar-clear"
+        @click="emit('clear')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/AuthStatus.vue b/app/components/AuthStatus.vue
index 90772cdd..70463693 100644
--- a/app/components/AuthStatus.vue
+++ b/app/components/AuthStatus.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 const { account, refresh } = useAccount()
 
+// The sidebar footer is 210px wide, so side by side there wraps the name and the button both.
+defineProps<{ stacked?: boolean }>()
+
 async function signOut(): Promise<void> {
   await $fetch('/api/auth/sign-out', { method: 'POST' })
   await refresh()
@@ -9,12 +12,17 @@ async function signOut(): Promise<void> {
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
+  <div
+    class="flex gap-2"
+    :class="stacked ? 'w-full flex-col items-stretch' : 'items-center'"
+  >
     <template v-if="account.signedIn">
       <UButton
         size="sm"
         variant="ghost"
         to="/account/security"
+        :block="stacked"
+        :class="stacked ? 'justify-start truncate' : ''"
       >
         {{ account.user?.name }}
       </UButton>
@@ -22,6 +30,9 @@ async function signOut(): Promise<void> {
         data-test="sign-out"
         size="sm"
         variant="ghost"
+        :block="stacked"
+        :class="stacked ? 'justify-start' : ''"
+        icon="i-lucide-log-out"
         @click="signOut"
       >
         Sign out
diff --git a/app/components/DateField.vue b/app/components/DateField.vue
new file mode 100644
index 00000000..22700c08
--- /dev/null
+++ b/app/components/DateField.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { CalendarDate, parseDate } from '@internationalized/date'
+
+// The one place that converts between the YYYY-MM-DD strings the API speaks and the calendar value
+// the input takes. British order, because every domain date here is London's (0014, 0032).
+
+const model = defineModel<string | undefined>()
+
+defineProps<{ disabled?: boolean }>()
+
+const field = useTemplateRef('field')
+
+const value = computed({
+  get(): CalendarDate | null {
+    if (!model.value) return null
+    try {
+      return parseDate(model.value)
+    }
+    catch {
+      return null
+    }
+  },
+  set(next: unknown) {
+    model.value = next instanceof CalendarDate ? next.toString() : undefined
+  },
+})
+</script>
+
+<template>
+  <UInputDate
+    ref="field"
+    v-model="value"
+    locale="en-GB"
+    :disabled="disabled"
+  >
+    <template #trailing>
+      <UPopover :reference="field?.inputsRef?.at(-1)?.$el">
+        <UButton
+          color="neutral"
+          variant="link"
+          size="sm"
+          icon="i-lucide-calendar"
+          aria-label="Pick a date from a calendar"
+          :disabled="disabled"
+          class="px-0"
+        />
+
+        <template #content>
+          <UCalendar
+            v-model="value"
+            class="p-2"
+          />
+        </template>
+      </UPopover>
+    </template>
+  </UInputDate>
+</template>
diff --git a/app/components/PersonPicker.vue b/app/components/PersonPicker.vue
new file mode 100644
index 00000000..306d8913
--- /dev/null
+++ b/app/components/PersonPicker.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+// A person is chosen, never typed (0032). Searches name, address and student number, because a
+// name may not match the SU's record and the address is often personal (0031).
+
+interface Person {
+  id: string
+  name: string
+  email: string
+  studentId: string | null
+  anonymisedAt: number | null
+}
+
+interface Listing { items: Person[] }
+
+interface Item {
+  label: string
+  value: string
+  email: string
+  hint: string | null
+  erased: boolean
+}
+
+const model = defineModel<string | undefined>()
+
+const props = withDefaults(defineProps<{
+  placeholder?: string
+  disabled?: boolean
+  // A tombstone is a real account and a valid target for some things, and never for others.
+  includeErased?: boolean
+}>(), {
+  placeholder: 'Search by name, address or student number',
+  disabled: false,
+  includeErased: false,
+})
+
+const searchTerm = ref('')
+const settled = useDebounced(searchTerm, 250)
+
+// The account directory: it already pages and allow-lists its columns. Never cached, because a
+// remembered answer would offer somebody since renamed or erased.
+const instance = useId()
+const { data, status } = await useAsyncData(
+  () => `person-picker-${instance}-${settled.value}`,
+  () => settled.value.trim().length < 2
+    ? Promise.resolve({ items: [] } as Listing)
+    : $fetch<Listing>('/api/admin/accounts', {
+        query: { search: settled.value.trim(), pageSize: 10, includeAnonymised: props.includeErased },
+      }),
+  { watch: [settled], default: (): Listing => ({ items: [] }), getCachedData: () => undefined },
+)
+
+// Held separately so the chosen person still reads as a name after the search that found them has
+// been cleared.
+const chosen = ref<Item | null>(null)
+
+const items = computed<Item[]>(() => (data.value?.items ?? []).map(person => ({
+  label: person.name,
+  value: person.id,
+  email: person.email,
+  hint: person.studentId,
+  erased: person.anonymisedAt !== null,
+})))
+
+const shown = computed<Item[]>(() =>
+  chosen.value && !items.value.some(item => item.value === chosen.value!.value)
+    ? [chosen.value, ...items.value]
+    : items.value)
+
+function choose(item: Item | undefined): void {
+  chosen.value = item ?? null
+  model.value = item?.value
+}
+
+// A form that resets its state clears the name too, rather than showing the last person picked.
+watch(model, (value) => {
+  if (!value) chosen.value = null
+})
+</script>
+
+<template>
+  <div data-test="person-picker">
+    <UInputMenu
+      class="w-full"
+      :model-value="shown.find(item => item.value === model)"
+      :items="shown"
+      :loading="status === 'pending'"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :search-input="{ icon: 'i-lucide-search', placeholder: 'Name, address or student number' }"
+      :content="{ hideWhenEmpty: true }"
+      ignore-filter
+      icon="i-lucide-user"
+      @update:model-value="choose"
+      @update:search-term="value => searchTerm = value"
+    >
+      <template #item-label="{ item }">
+        <span class="flex flex-col">
+          <span class="flex items-center gap-1.5">
+            {{ item.label }}
+            <UBadge
+              v-if="item.erased"
+              color="neutral"
+              variant="subtle"
+              size="sm"
+            >
+              Erased
+            </UBadge>
+          </span>
+          <span class="font-mono text-xs text-muted">{{ item.hint ?? item.email }}</span>
+        </span>
+      </template>
+
+      <template #empty>
+        <span class="text-sm text-muted">
+          {{ searchTerm.trim().length < 2 ? 'Type at least two characters' : 'Nobody matches that' }}
+        </span>
+      </template>
+    </UInputMenu>
+  </div>
+</template>
diff --git a/app/composables/useDebounced.ts b/app/composables/useDebounced.ts
new file mode 100644
index 00000000..57e98690
--- /dev/null
+++ b/app/composables/useDebounced.ts
@@ -0,0 +1,21 @@
+import type { Ref } from 'vue'
+
+// A search that fires on every keystroke asks the server a question the typist has not finished.
+// Small enough to own rather than take a dependency for.
+export function useDebounced<T>(source: Ref<T>, delayMs = 250): Ref<T> {
+  const settled = ref(source.value) as Ref<T>
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  watch(source, (value) => {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => {
+      settled.value = value
+    }, delayMs)
+  })
+
+  onScopeDispose(() => {
+    if (timer) clearTimeout(timer)
+  })
+
+  return settled
+}
diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
index 78699be8..8e675a6f 100644
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@@ -8,7 +8,10 @@ const links = [[
   { label: 'Fellows', icon: 'i-lucide-award', to: '/admin/fellows' },
   { label: 'Audit trail', icon: 'i-lucide-scroll-text', to: '/admin/audit' },
   { label: 'Settings', icon: 'i-lucide-settings', to: '/admin/config' },
-]]
+], // Development only, and absent from a build because the page it points at is (K-124).
+...import.meta.dev
+  ? [[{ label: 'Developer tools', icon: 'i-lucide-flask-conical', to: '/dev' }]]
+  : []]
 const route = useRoute()
 </script>
 
@@ -26,7 +29,7 @@ const route = useRoute()
         :items="links"
       />
       <template #footer>
-        <AuthStatus />
+        <AuthStatus stacked />
       </template>
     </UDashboardSidebar>
 
diff --git a/app/pages/admin/audit.vue b/app/pages/admin/audit.vue
index 7d684597..0d1e3391 100644
--- a/app/pages/admin/audit.vue
+++ b/app/pages/admin/audit.vue
@@ -2,8 +2,11 @@
 import { h, resolveComponent } from 'vue'
 import { AUDIT_ACTIONS, AUDIT_ACTION_NAMES, AUDIT_MODULES, MANUAL_ACTION_NAMES, describeAction } from '#shared/utils/audit-actions'
 import { formatLondon } from '#shared/utils/london'
+import { manualEntryForm } from '#shared/utils/admin-forms'
+import type { ManualEntryForm } from '#shared/utils/admin-forms'
 import type { AuditActionName, AuditModule } from '#shared/utils/audit-actions'
-import type { TableColumn } from '@nuxt/ui'
+import type { ActiveFilter } from '~/components/AdminToolbar.vue'
+import type { FormSubmitEvent, TableColumn } from '@nuxt/ui'
 
 definePageMeta({ layout: 'admin', title: 'Audit trail', middleware: 'signed-in' })
 
@@ -15,6 +18,7 @@ interface Entry {
   actorName: string | null
   action: AuditActionName
   target: string | null
+  targetName: string | null
   detail: Record<string, unknown> | null
   createdAt: number
 }
@@ -39,9 +43,13 @@ const page = ref(1)
 const loading = ref(false)
 const failure = ref<string | null>(null)
 
+const toast = useToast()
+const entryForm = useTemplateRef('entryForm')
+
 const recording = ref(false)
-const recorded = ref<string | null>(null)
-const entry = reactive({ action: MANUAL_ACTION_NAMES[0]!, target: '', onBehalfOf: '', occurredOn: '' })
+const entry = reactive<Partial<ManualEntryForm>>({
+  action: MANUAL_ACTION_NAMES[0]!,
+})
 
 // A date on this screen is a London day, and the API wants the second it starts or ends (0014).
 const startOf = (day: string): number | undefined =>
@@ -71,27 +79,31 @@ async function load(): Promise<void> {
   }
 }
 
-async function record(): Promise<void> {
+async function record(event: FormSubmitEvent<ManualEntryForm>): Promise<void> {
   failure.value = null
   try {
     await $fetch('/api/admin/audit', {
       method: 'POST',
-      body: {
-        action: entry.action,
-        target: entry.target,
-        onBehalfOf: entry.onBehalfOf,
-        occurredAt: startOf(entry.occurredOn),
-      },
+      body: { ...event.data, occurredAt: startOf(event.data.occurredOn) },
+    })
+    toast.add({
+      title: `${describeAction(entry.action ?? '').label} is on the trail`,
+      description: 'Signed by you.',
+      icon: 'i-lucide-pen-line',
+      color: 'success',
     })
-    recorded.value = describeAction(entry.action).label
     recording.value = false
-    entry.target = ''
-    entry.onBehalfOf = ''
-    entry.occurredOn = ''
+    entry.target = undefined
+    entry.onBehalfOf = undefined
+    entry.occurredOn = undefined
     await load()
   }
   catch (error) {
-    failure.value = refusalText(error)
+    const message = refusalText(error)
+    if (/subject/i.test(message)) entryForm.value?.setErrors([{ name: 'target', message }])
+    else if (/recorded for/i.test(message)) entryForm.value?.setErrors([{ name: 'onBehalfOf', message }])
+    else if (/has not happened/i.test(message)) entryForm.value?.setErrors([{ name: 'occurredOn', message }])
+    else failure.value = message
   }
 }
 
@@ -126,12 +138,71 @@ function chooseModule(): void {
   }
 }
 
+const activeFilters = computed<ActiveFilter[]>(() => {
+  const active: ActiveFilter[] = []
+  if (module.value !== ANY) {
+    active.push({ key: 'module', label: module.value, icon: 'i-lucide-layers', clear: () => {
+      module.value = ANY
+    } })
+  }
+  if (action.value !== ANY) {
+    active.push({ key: 'action', label: describeAction(action.value).label, icon: 'i-lucide-activity', clear: () => {
+      action.value = ANY
+    } })
+  }
+  if (target.value) {
+    active.push({ key: 'target', label: `About ${target.value}`, icon: 'i-lucide-crosshair', clear: () => {
+      target.value = ''
+    } })
+  }
+  if (since.value) active.push({ key: 'from', label: `From ${since.value}`, icon: 'i-lucide-calendar', clear: () => {
+    since.value = ''
+  } })
+  if (until.value) active.push({ key: 'to', label: `To ${until.value}`, icon: 'i-lucide-calendar', clear: () => {
+    until.value = ''
+  } })
+  return active
+})
+
+function clearFilters(): void {
+  module.value = ANY
+  action.value = ANY
+  target.value = ''
+  since.value = ''
+  until.value = ''
+}
+
 watch([module, action, target, since, until], () => {
   page.value = 1
   void load()
 })
 watch(page, load)
 
+// Raw JSON ran off the edge of the table and told nobody anything. A diff has a shape (0027), so
+// it reads as one; everything else reads as its own keys and values.
+function describeDetail(detail: Record<string, unknown> | null): string[] {
+  if (!detail) return []
+  const parts: string[] = []
+  const changes = detail.changes as Record<string, { from: unknown, to: unknown }> | undefined
+  for (const [field, change] of Object.entries(changes ?? {})) {
+    parts.push(`${field}: ${readable(field, change.from)} \u2192 ${readable(field, change.to)}`)
+  }
+  for (const [key, value] of Object.entries(detail)) {
+    if (key === 'changes') continue
+    parts.push(`${key}: ${readable(key, value)}`)
+  }
+  return parts
+}
+
+// A key ending in At holds epoch seconds, which reads as a nine digit number unless it is turned
+// back into the date it is (0014).
+function readable(key: string, value: unknown): string {
+  if (key.endsWith('At') && typeof value === 'number' && Number.isInteger(value)) {
+    return formatLondon(new Date(value * 1000), { dateStyle: 'medium' })
+  }
+  return typeof value === 'string' ? value : JSON.stringify(value)
+}
+
 const columns: TableColumn<Entry>[] = [
   {
     id: 'createdAt',
@@ -158,11 +229,19 @@ const columns: TableColumn<Entry>[] = [
       ])
     },
   },
-  { accessorKey: 'target', header: 'To what', meta: { class: { td: 'font-mono text-xs' } } },
+  {
+    id: 'target',
+    header: 'To whom',
+    // A name where there is one, and the raw target where the entry is not about a person.
+    cell: ({ row }) => row.original.targetName
+      ?? h('span', { class: 'font-mono text-xs text-muted' }, row.original.target ?? ''),
+  },
   {
     id: 'detail',
-    header: 'Detail',
-    cell: ({ row }) => h('code', { class: 'text-xs' }, row.original.detail ? JSON.stringify(row.original.detail) : ''),
+    header: 'What changed',
+    meta: { class: { td: 'max-w-xs' } },
+    cell: ({ row }) => h('div', { class: 'flex flex-wrap gap-1' }, describeDetail(row.original.detail).map(part =>
+      h(UBadge, { color: 'neutral', variant: 'subtle', size: 'sm', class: 'font-mono' }, () => part))),
   },
 ]
 
@@ -178,95 +257,91 @@ onMounted(load)
       :description="failure"
     />
 
-    <UAlert
-      v-if="recorded"
-      data-test="audit-recorded"
-      color="success"
-      variant="subtle"
-      :description="`${recorded} is on the trail, signed by you.`"
-      close
-      @update:open="recorded = null"
-    />
+    <AdminToolbar
+      v-model:search="target"
+      placeholder="Who or what an entry is about"
+      :active="activeFilters"
+      :loading="loading"
+      @clear="clearFilters"
+    >
+      <template #filters>
+        <UFormField label="Module">
+          <USelect
+            v-model="module"
+            data-test="audit-module"
+            :items="MODULE_OPTIONS"
+            value-key="value"
+            class="w-full"
+            @update:model-value="chooseModule"
+          />
+        </UFormField>
 
-    <div class="flex flex-wrap items-end gap-3">
-      <UFormField
-        label="Module"
-        class="min-w-40"
-      >
-        <USelect
-          v-model="module"
-          data-test="audit-module"
-          :items="MODULE_OPTIONS"
-          value-key="value"
-          @update:model-value="chooseModule"
-        />
-      </UFormField>
-
-      <UFormField
-        label="Action"
-        class="min-w-56"
-      >
-        <USelect
-          v-model="action"
-          data-test="audit-action"
-          :items="actionOptions"
-          value-key="value"
-        />
-      </UFormField>
-
-      <UFormField
-        label="Target"
-        class="min-w-56 flex-1"
-      >
-        <UInput
-          v-model="target"
-          data-test="audit-target"
-          placeholder="user:0123456789abcdef"
-          icon="i-lucide-search"
-        />
-      </UFormField>
-
-      <UFormField label="From">
-        <UInput
-          v-model="since"
-          data-test="audit-from"
-          type="date"
-        />
-      </UFormField>
-
-      <UFormField label="To">
-        <UInput
-          v-model="until"
-          data-test="audit-to"
-          type="date"
-        />
-      </UFormField>
-
-      <UButton
-        data-test="audit-record"
-        icon="i-lucide-pen-line"
-        @click="recording = true"
-      >
-        Record something
-      </UButton>
-
-      <UButton
-        data-test="audit-export"
-        icon="i-lucide-download"
-        variant="subtle"
-        :to="exportUrl"
-        external
-      >
-        Export
-      </UButton>
-    </div>
+        <UFormField label="Action">
+          <USelectMenu
+            v-model="action"
+            data-test="audit-action"
+            :items="actionOptions"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField
+          label="From"
+          help="The day an entry was written, not the day it describes."
+        >
+          <DateField
+            v-model="since"
+            data-test="audit-from"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="To">
+          <DateField
+            v-model="until"
+            data-test="audit-to"
+            class="w-full"
+          />
+        </UFormField>
+      </template>
+
+      <template #actions>
+        <UButton
+          data-test="audit-record"
+          icon="i-lucide-pen-line"
+          @click="recording = true"
+        >
+          Record something
+        </UButton>
+
+        <UButton
+          data-test="audit-export"
+          icon="i-lucide-download"
+          color="neutral"
+          variant="outline"
+          :to="exportUrl"
+          external
+        >
+          Export
+        </UButton>
+      </template>
+    </AdminToolbar>
 
     <UTable
       :data="listing?.items ?? []"
       :columns="columns"
       :loading="loading"
       data-test="audit-table"
-    />
+    >
+      <template #empty>
+        <p class="py-6 text-center text-sm text-muted">
+          {{ activeFilters.length
+            ? 'No entry matches that.'
+            : 'Nothing on the trail yet. Every privileged action lands here.' }}
+        </p>
+      </template>
+    </UTable>
 
     <div class="flex flex-wrap items-center justify-between gap-3">
       <p
@@ -289,47 +364,57 @@ onMounted(load)
       description="It is signed against you, and everybody named has to be an account here."
     >
       <template #body>
-        <form
+        <UForm
+          ref="entryForm"
+          :schema="manualEntryForm"
+          :state="entry"
           class="space-y-4"
-          @submit.prevent="record"
+          @submit="record"
         >
-          <UFormField label="What happened">
+          <UFormField
+            name="action"
+            label="What happened"
+            required
+          >
             <USelect
               v-model="entry.action"
               data-test="audit-entry-action"
               :items="MANUAL_ACTION_NAMES.map(name => ({ label: AUDIT_ACTIONS[name].label, value: name }))"
               value-key="value"
+              class="w-full"
             />
           </UFormField>
           <UFormField
+            name="target"
             label="Who it was about"
-            description="The account id it happened to."
+            required
           >
-            <UInput
+            <PersonPicker
               v-model="entry.target"
-              data-test="audit-entry-target"
-              required
+              class="w-full"
             />
           </UFormField>
           <UFormField
+            name="onBehalfOf"
             label="Who decided it"
-            description="The account of the person whose decision this was, not yours."
+            description="Whose decision this was, not yours. You are the signature."
+            required
           >
-            <UInput
+            <PersonPicker
               v-model="entry.onBehalfOf"
-              data-test="audit-entry-behalf"
-              required
+              class="w-full"
             />
           </UFormField>
           <UFormField
+            name="occurredOn"
             label="When it happened"
             description="The real date, which is not the date this is being written down."
+            required
           >
-            <UInput
+            <DateField
               v-model="entry.occurredOn"
               data-test="audit-entry-date"
-              type="date"
-              required
+              class="w-full"
             />
           </UFormField>
           <UButton
@@ -338,7 +423,7 @@ onMounted(load)
           >
             Sign and record it
           </UButton>
-        </form>
+        </UForm>
       </template>
     </UModal>
   </div>
diff --git a/app/pages/admin/config.vue b/app/pages/admin/config.vue
index e7f3ce0b..806bdcea 100644
--- a/app/pages/admin/config.vue
+++ b/app/pages/admin/config.vue
@@ -23,6 +23,7 @@ const WORKSHOPS: Record<string, string> = {
   'people-and-communications': 'People and communications',
 }
 
+const search = ref('')
 const settings = ref<Setting[]>([])
 const drafts = reactive<Record<string, string>>({})
 const notices = reactive<Record<string, string>>({})
@@ -32,9 +33,28 @@ const failure = ref<string | null>(null)
 const grouped = computed(() => Object.keys(WORKSHOPS).map(workshop => ({
   workshop,
   title: WORKSHOPS[workshop]!,
-  settings: settings.value.filter(setting => setting.workshop === workshop),
+  settings: settings.value.filter(setting => setting.workshop === workshop && matches(setting)),
 })))
 
+// One group on screen at a time, and a search that reaches across all of them: a count on the tab
+// says where a match is without opening it.
+const tabs = computed(() => grouped.value.map(group => ({
+  label: group.title,
+  value: group.workshop,
+  badge: group.settings.length,
+  slot: 'group' as const,
+})))
+
+const tab = ref(Object.keys(WORKSHOPS)[0]!)
+const shown = computed(() => grouped.value.find(group => group.workshop === tab.value)?.settings ?? [])
+
+// A search that empties the tab you are on has found its match somewhere else.
+watch(search, () => {
+  if (shown.value.length) return
+  const found = grouped.value.find(group => group.settings.length)
+  if (found) tab.value = found.workshop
+})
+
 // The value a key stands at: its override, or what it ships with.
 function standing(setting: Setting): unknown {
   return setting.set ? setting.value : (setting.hasDefault ? setting.default : null)
@@ -47,17 +67,39 @@ function asText(value: unknown): string {
   return typeof value === 'string' ? value : JSON.stringify(value)
 }
 
-function kind(setting: Setting): 'boolean' | 'number' | 'text' {
+// Money is entered in pounds and stored in pence, everywhere (0004, 0032). The key says which
+// keys those are, because the schema only knows it is an integer.
+function kind(setting: Setting): 'boolean' | 'money' | 'number' | 'list' | 'text' {
   const value = standing(setting)
   if (typeof value === 'boolean') return 'boolean'
+  if (setting.key.endsWith('_PENCE')) return 'money'
   if (typeof value === 'number') return 'number'
+  if (Array.isArray(value) || Array.isArray(setting.default)) return 'list'
   return 'text'
 }
 
+// Held apart from the text drafts, because a number input round-trips a number and turning it
+// into a string and back is how a value picks up a decimal it never had.
+const numbers = reactive<Record<string, number>>({})
+const lists = reactive<Record<string, string[]>>({})
+
+// Fifty keys is too many to scroll for one. Matched on the name and on what it describes, because
+// somebody looking for the tab cap may not remember it is called BAR_TAB_CAP_PENCE.
+function matches(setting: Setting): boolean {
+  const term = search.value.trim().toLowerCase()
+  if (!term) return true
+  return setting.key.toLowerCase().includes(term) || setting.describes.toLowerCase().includes(term)
+}
+
 async function load(): Promise<void> {
   const answer = await $fetch<{ settings: Setting[] }>('/api/admin/config')
   settings.value = answer.settings
-  for (const setting of answer.settings) drafts[setting.key] = asText(standing(setting))
+  for (const setting of answer.settings) {
+    drafts[setting.key] = asText(standing(setting))
+    const value = standing(setting)
+    if (typeof value === 'number') numbers[setting.key] = value
+    if (Array.isArray(value)) lists[setting.key] = value.map(String)
+  }
 }
 
 async function save(setting: Setting, value: unknown): Promise<void> {
@@ -78,6 +120,10 @@ async function save(setting: Setting, value: unknown): Promise<void> {
   }
 }
 
+// Pounds on the screen, pence in the database, converted here and nowhere else (0004).
+const pounds = (pence: number | undefined): number => (pence ?? 0) / 100
+const pence = (amount: number | undefined): number => Math.round((amount ?? 0) * 100)
+
 // A key that holds a string keeps the text as typed: parsing it first would turn 08-01 into a
 // number and true into a boolean, and the schema would refuse a value the officer typed correctly.
 function saveText(setting: Setting): Promise<void> {
@@ -97,7 +143,7 @@ onMounted(load)
 </script>
 
 <template>
-  <div class="space-y-8">
+  <div class="space-y-6">
     <p class="text-sm text-muted">
       Every operational number the system enforces. A change takes effect on the next request, so
       committee decisions are settings changes rather than releases.
@@ -110,90 +156,164 @@ onMounted(load)
       :description="failure"
     />
 
-    <section
-      v-for="group in grouped"
-      :key="group.workshop"
-      class="space-y-3"
+    <UInput
+      v-model="search"
+      icon="i-lucide-search"
+      placeholder="A key, or what it decides"
+      class="w-full sm:w-96"
+      data-test="config-search"
+    />
+
+    <UTabs
+      v-model="tab"
+      :items="tabs"
+      variant="link"
+      :ui="{ trigger: 'grow' }"
     >
-      <h2 class="nnt-headline text-lg">
-        {{ group.title }}
-      </h2>
-
-      <div
-        v-for="setting in group.settings"
-        :key="setting.key"
-        :data-test="`setting-${setting.key}`"
-        class="rounded-lg border border-default p-4"
-      >
-        <div class="flex flex-wrap items-start justify-between gap-2">
-          <div class="space-y-1">
-            <p class="font-mono text-sm">
-              {{ setting.key }}
-            </p>
-            <p class="text-sm text-muted">
-              {{ setting.describes }}
+      <template #group>
+        <div class="mt-4 space-y-3">
+          <p
+            v-if="!shown.length"
+            class="py-6 text-center text-sm text-muted"
+            data-test="config-empty"
+          >
+            No setting in this group matches that.
+          </p>
+
+          <div
+            v-for="setting in shown"
+            :key="setting.key"
+            :data-test="`setting-${setting.key}`"
+            class="rounded-lg border border-default p-4"
+          >
+            <div class="flex flex-wrap items-start justify-between gap-2">
+              <div class="space-y-1">
+                <p class="font-mono text-sm">
+                  {{ setting.key }}
+                </p>
+                <p class="text-sm text-muted">
+                  {{ setting.describes }}
+                </p>
+              </div>
+              <div class="flex gap-1">
+                <UBadge
+                  v-if="!setting.enforced"
+                  color="neutral"
+                  variant="subtle"
+                  size="sm"
+                >
+                  Not enforced yet
+                </UBadge>
+                <UBadge
+                  v-if="!setting.hasDefault && !setting.set"
+                  color="error"
+                  variant="subtle"
+                  size="sm"
+                >
+                  Not set
+                </UBadge>
+              </div>
+            </div>
+
+            <div class="mt-3 flex flex-wrap items-center gap-3">
+              <USwitch
+                v-if="kind(setting) === 'boolean'"
+                :model-value="standing(setting) === true"
+                :loading="saving === setting.key"
+                :data-test="`toggle-${setting.key}`"
+                @update:model-value="save(setting, $event)"
+              />
+
+              <template v-else-if="kind(setting) === 'money'">
+                <UInputNumber
+                  :model-value="pounds(numbers[setting.key])"
+                  :min="0"
+                  :step="0.5"
+                  :format-options="{ style: 'currency', currency: 'GBP' }"
+                  class="w-48"
+                  :data-test="`input-${setting.key}`"
+                  @update:model-value="numbers[setting.key] = pence($event as number)"
+                />
+                <UButton
+                  color="neutral"
+                  variant="outline"
+                  :loading="saving === setting.key"
+                  :data-test="`save-${setting.key}`"
+                  @click="save(setting, numbers[setting.key])"
+                >
+                  Save
+                </UButton>
+              </template>
+
+              <template v-else-if="kind(setting) === 'number'">
+                <UInputNumber
+                  v-model="numbers[setting.key]"
+                  :min="0"
+                  class="w-40"
+                  :data-test="`input-${setting.key}`"
+                />
+                <UButton
+                  color="neutral"
+                  variant="outline"
+                  :loading="saving === setting.key"
+                  :data-test="`save-${setting.key}`"
+                  @click="save(setting, numbers[setting.key])"
+                >
+                  Save
+                </UButton>
+              </template>
+
+              <template v-else-if="kind(setting) === 'list'">
+                <UInputTags
+                  v-model="lists[setting.key]"
+                  class="min-w-64 flex-1"
+                  :data-test="`input-${setting.key}`"
+                />
+                <UButton
+                  color="neutral"
+                  variant="outline"
+                  :loading="saving === setting.key"
+                  :data-test="`save-${setting.key}`"
+                  @click="save(setting, lists[setting.key] ?? [])"
+                >
+                  Save
+                </UButton>
+              </template>
+
+              <template v-else>
+                <UInput
+                  v-model="drafts[setting.key]"
+                  :data-test="`input-${setting.key}`"
+                  class="min-w-64 flex-1 font-mono"
+                />
+                <UButton
+                  color="neutral"
+                  variant="outline"
+                  :loading="saving === setting.key"
+                  :data-test="`save-${setting.key}`"
+                  @click="saveText(setting)"
+                >
+                  Save
+                </UButton>
+              </template>
+
+              <span
+                v-if="notices[setting.key]"
+                class="text-sm text-muted"
+              >{{ notices[setting.key] }}</span>
+            </div>
+
+            <p class="mt-2 text-xs text-muted">
+              <span v-if="setting.hasDefault">Ships as <span class="font-mono">{{ asText(setting.default) }}</span>. </span>
+              <span v-if="setting.updatedBy && setting.updatedAt">
+                Changed by {{ setting.updatedBy.name }} on
+                {{ formatLondon(new Date(setting.updatedAt * 1000), { dateStyle: 'long' }) }}.
+              </span>
+              <span v-else>Never changed.</span>
             </p>
           </div>
-          <div class="flex gap-1">
-            <UBadge
-              v-if="!setting.enforced"
-              color="warning"
-              variant="subtle"
-              size="sm"
-            >
-              Not enforced yet
-            </UBadge>
-            <UBadge
-              v-if="!setting.hasDefault && !setting.set"
-              color="error"
-              variant="subtle"
-              size="sm"
-            >
-              Not set
-            </UBadge>
-          </div>
         </div>
-
-        <div class="mt-3 flex flex-wrap items-center gap-3">
-          <USwitch
-            v-if="kind(setting) === 'boolean'"
-            :model-value="standing(setting) === true"
-            :loading="saving === setting.key"
-            :data-test="`toggle-${setting.key}`"
-            @update:model-value="save(setting, $event)"
-          />
-          <template v-else>
-            <UInput
-              v-model="drafts[setting.key]"
-              :type="kind(setting) === 'number' ? 'number' : 'text'"
-              :data-test="`input-${setting.key}`"
-              class="min-w-64 flex-1 font-mono"
-            />
-            <UButton
-              variant="subtle"
-              :loading="saving === setting.key"
-              :data-test="`save-${setting.key}`"
-              @click="saveText(setting)"
-            >
-              Save
-            </UButton>
-          </template>
-
-          <span
-            v-if="notices[setting.key]"
-            class="text-sm text-muted"
-          >{{ notices[setting.key] }}</span>
-        </div>
-
-        <p class="mt-2 text-xs text-muted">
-          <span v-if="setting.hasDefault">Ships as <span class="font-mono">{{ asText(setting.default) }}</span>. </span>
-          <span v-if="setting.updatedBy && setting.updatedAt">
-            Changed by {{ setting.updatedBy.name }} on
-            {{ formatLondon(new Date(setting.updatedAt * 1000), { dateStyle: 'long' }) }}.
-          </span>
-          <span v-else>Never changed.</span>
-        </p>
-      </div>
-    </section>
+      </template>
+    </UTabs>
   </div>
 </template>
diff --git a/app/pages/admin/fellows.vue b/app/pages/admin/fellows.vue
index 493808b0..0f675986 100644
--- a/app/pages/admin/fellows.vue
+++ b/app/pages/admin/fellows.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
-import type { TableColumn } from '@nuxt/ui'
+import { awardFellowship, revokeFellowship } from '#shared/utils/admin-forms'
+import type { ActiveFilter } from '~/components/AdminToolbar.vue'
+import type { FormSubmitEvent, TableColumn } from '@nuxt/ui'
+import type { AwardFellowship } from '#shared/utils/admin-forms'
 
 definePageMeta({ layout: 'admin', title: 'Fellows', middleware: 'signed-in' })
 
@@ -27,9 +30,9 @@ interface Listing {
 }
 
 const SHOW = [
-  { label: 'Current Fellows', value: 'current' },
-  { label: 'Revoked', value: 'revoked' },
-  { label: 'Everyone ever', value: 'everyone' },
+  { label: 'Current Fellows', value: 'current', icon: 'i-lucide-award' },
+  { label: 'Revoked', value: 'revoked', icon: 'i-lucide-ban' },
+  { label: 'Everyone ever', value: 'everyone', icon: 'i-lucide-users' },
 ]
 
 const listing = ref<Listing | null>(null)
@@ -39,11 +42,14 @@ const page = ref(1)
 const loading = ref(false)
 const failure = ref<string | null>(null)
 
+const toast = useToast()
+const awardForm = useTemplateRef('awardForm')
+const revokeForm = useTemplateRef('revokeForm')
+
 const awarding = ref(false)
-const award = reactive({ userId: '', awardedOn: '', awardedBy: '', citation: '' })
+const award = reactive<Partial<AwardFellowship>>({})
 const revoking = ref<Fellow | null>(null)
-const reason = ref('')
-const notice = ref<string | null>(null)
+const revocation = reactive<{ reason?: string }>({})
 
 async function load(): Promise<void> {
   loading.value = true
@@ -61,35 +67,50 @@ async function load(): Promise<void> {
   }
 }
 
-async function record(): Promise<void> {
+// A refusal lands on the field it concerns rather than as an alert behind the modal (0032). The
+// server knows which field only for the person, so anything else stays a page-level failure.
+function blame(error: unknown, form: { setErrors: (errors: { name: string, message: string }[]) => void } | null, name: string): void {
+  const message = refusalText(error)
+  if (form && /already holds|not an account|has been erased|no such account/i.test(message)) {
+    form.setErrors([{ name, message }])
+    return
+  }
+  failure.value = message
+}
+
+async function record(event: FormSubmitEvent<AwardFellowship>): Promise<void> {
   failure.value = null
   try {
-    await $fetch('/api/admin/fellowships', { method: 'POST', body: { ...award } })
-    notice.value = 'The award is on the roll.'
+    await $fetch('/api/admin/fellowships', { method: 'POST', body: event.data })
+    toast.add({ title: 'Recorded on the roll', icon: 'i-lucide-award', color: 'success' })
     awarding.value = false
-    award.userId = ''
-    award.awardedOn = ''
-    award.awardedBy = ''
-    award.citation = ''
+    award.userId = undefined
+    award.awardedOn = undefined
+    award.awardedBy = undefined
+    award.citation = undefined
     await load()
   }
   catch (error) {
-    failure.value = refusalText(error)
+    blame(error, awardForm.value ?? null, 'userId')
   }
 }
 
-async function revoke(): Promise<void> {
+async function revoke(event: FormSubmitEvent<{ reason: string }>): Promise<void> {
   if (!revoking.value) return
   failure.value = null
   try {
-    await $fetch(`/api/admin/fellowships/${revoking.value.id}/revoke`, { method: 'POST', body: { reason: reason.value } })
-    notice.value = 'Revoked. The award and everything taken under it still stand.'
+    await $fetch(`/api/admin/fellowships/${revoking.value.id}/revoke`, { method: 'POST', body: event.data })
+    toast.add({
+      title: 'Revoked',
+      description: 'The award and everything taken under it still stand.',
+      icon: 'i-lucide-ban',
+    })
     revoking.value = null
-    reason.value = ''
+    revocation.reason = undefined
     await load()
   }
   catch (error) {
-    failure.value = refusalText(error)
+    blame(error, revokeForm.value ?? null, 'reason')
   }
 }
 
@@ -99,6 +120,31 @@ watch([show, search], () => {
 })
 watch(page, load)
 
+const activeFilters = computed<ActiveFilter[]>(() => {
+  const active: ActiveFilter[] = []
+  if (search.value) {
+    active.push({ key: 'search', label: `Matching ${search.value}`, icon: 'i-lucide-search', clear: () => {
+      search.value = ''
+    } })
+  }
+  if (show.value !== 'current') {
+    active.push({
+      key: 'show',
+      label: SHOW.find(option => option.value === show.value)!.label,
+      icon: SHOW.find(option => option.value === show.value)!.icon,
+      clear: () => {
+        show.value = 'current'
+      },
+    })
+  }
+  return active
+})
+
+function clearFilters(): void {
+  search.value = ''
+  show.value = 'current'
+}
+
 const columns: TableColumn<Fellow>[] = [
   { accessorKey: 'awardedOn', header: 'Awarded', meta: { class: { td: 'font-mono text-sm whitespace-nowrap' } } },
   {
@@ -152,16 +198,6 @@ onMounted(load)
       :description="failure"
     />
 
-    <UAlert
-      v-if="notice"
-      data-test="fellows-notice"
-      color="success"
-      variant="subtle"
-      :description="notice"
-      close
-      @update:open="notice = null"
-    />
-
     <UAlert
       color="neutral"
       variant="subtle"
@@ -170,53 +206,57 @@ onMounted(load)
       description="No database held it before this one, so the existing Fellows are entered here by hand. A revocation stops future admissions and rewrites nothing."
     />
 
-    <div class="flex flex-wrap items-end gap-3">
-      <UFormField
-        label="Search"
-        class="min-w-64 flex-1"
-      >
-        <UInput
-          v-model="search"
-          data-test="fellows-search"
-          placeholder="A name, an address or a citation"
-          icon="i-lucide-search"
-        />
-      </UFormField>
-
-      <UFormField
-        label="Show"
-        class="min-w-48"
-      >
-        <USelect
-          v-model="show"
-          data-test="fellows-show"
-          :items="SHOW"
-          value-key="value"
-        />
-      </UFormField>
+    <AdminToolbar
+      v-model:search="search"
+      placeholder="A name, an address or a citation"
+      :active="activeFilters"
+      :loading="loading"
+      @clear="clearFilters"
+    >
+      <template #filters>
+        <UFormField label="Show">
+          <USelect
+            v-model="show"
+            data-test="fellows-show"
+            :items="SHOW"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+      </template>
 
-      <UButton
-        data-test="award"
-        icon="i-lucide-award"
-        @click="awarding = true"
-      >
-        Record an award
-      </UButton>
-    </div>
+      <template #actions>
+        <UButton
+          data-test="award"
+          icon="i-lucide-award"
+          @click="awarding = true"
+        >
+          Record an award
+        </UButton>
+      </template>
+    </AdminToolbar>
 
     <UTable
       :data="listing?.items ?? []"
       :columns="columns"
       :loading="loading"
       data-test="fellows-table"
-    />
+    >
+      <template #empty>
+        <p class="py-6 text-center text-sm text-muted">
+          {{ search || show !== 'current'
+            ? 'Nobody on the roll matches that.'
+            : 'The roll is empty. The committee assembles it, and it is entered here by hand.' }}
+        </p>
+      </template>
+    </UTable>
 
     <div class="flex flex-wrap items-center justify-between gap-3">
       <p
         data-test="fellows-total"
         class="text-sm text-muted"
       >
-        {{ listing?.total ?? 0 }} Fellow(s)
+        {{ plural(listing?.total ?? 0, 'Fellow') }}
       </p>
       <UPagination
         v-if="listing && listing.pages > 1"
@@ -232,48 +272,61 @@ onMounted(load)
       description="One per person, for life. The citation is public wording and is shown as written."
     >
       <template #body>
-        <form
+        <UForm
+          ref="awardForm"
+          :schema="awardFellowship"
+          :state="award"
           class="space-y-4"
-          @submit.prevent="record"
+          @submit="record"
         >
           <UFormField
-            label="Account"
-            description="The account id of the person being honoured. They need one to hold the entitlement."
+            name="userId"
+            label="Who is being honoured"
+            description="They need an account to hold the entitlement."
+            required
           >
-            <UInput
+            <PersonPicker
               v-model="award.userId"
-              data-test="award-user"
-              required
+              class="w-full"
             />
           </UFormField>
-          <UFormField label="Date awarded">
-            <UInput
+          <UFormField
+            name="awardedOn"
+            label="Date awarded"
+            required
+          >
+            <DateField
               v-model="award.awardedOn"
               data-test="award-date"
-              type="date"
-              required
+              class="w-full"
             />
           </UFormField>
           <UFormField
+            name="awardedBy"
             label="Resolved by"
             description="The meeting that resolved it, not a person."
+            required
           >
             <UInput
               v-model="award.awardedBy"
               data-test="award-by"
               placeholder="Committee, 12 June 2019"
-              required
+              class="w-full"
             />
           </UFormField>
           <UFormField
+            name="citation"
             label="Citation"
             description="What it was awarded for, in the wording the theatre published."
+            required
           >
             <UTextarea
               v-model="award.citation"
               data-test="award-citation"
               :rows="3"
-              required
+              autoresize
+              :maxrows="6"
+              class="w-full"
             />
           </UFormField>
           <UButton
@@ -282,7 +335,7 @@ onMounted(load)
           >
             Record it
           </UButton>
-        </form>
+        </UForm>
       </template>
     </UModal>
 
@@ -293,19 +346,26 @@ onMounted(load)
       @update:open="revoking = null"
     >
       <template #body>
-        <form
+        <UForm
+          ref="revokeForm"
+          :schema="revokeFellowship"
+          :state="revocation"
           class="space-y-4"
-          @submit.prevent="revoke"
+          @submit="revoke"
         >
           <UFormField
+            name="reason"
             label="Reason"
             description="Kept on the record, and scrubbed if the person is later erased."
+            required
           >
             <UTextarea
-              v-model="reason"
+              v-model="revocation.reason"
               data-test="revoke-reason"
               :rows="3"
-              required
+              autoresize
+              :maxrows="6"
+              class="w-full"
             />
           </UFormField>
           <UButton
@@ -315,7 +375,7 @@ onMounted(load)
           >
             Revoke
           </UButton>
-        </form>
+        </UForm>
       </template>
     </UModal>
   </div>
diff --git a/app/pages/admin/members.vue b/app/pages/admin/members.vue
index 932e8541..b2cf44ef 100644
--- a/app/pages/admin/members.vue
+++ b/app/pages/admin/members.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
+import { recordMembership } from '#shared/utils/admin-forms'
 import { MEMBERSHIP_TERMS, isInGrace, londonDay } from '#shared/utils/membership'
-import type { MembershipTerm } from '#shared/utils/membership'
-import type { TableColumn } from '@nuxt/ui'
+import type { RecordMembership } from '#shared/utils/admin-forms'
+import type { ActiveFilter } from '~/components/AdminToolbar.vue'
+import type { FormSubmitEvent, TableColumn } from '@nuxt/ui'
 
 definePageMeta({ layout: 'admin', title: 'Members', middleware: 'signed-in' })
 
@@ -31,10 +33,10 @@ interface Listing {
 }
 
 const FILTERS = [
-  { label: 'Current', value: 'current' },
-  { label: 'Awaiting a check', value: 'awaiting-check' },
-  { label: 'Lapsed', value: 'lapsed' },
-  { label: 'Everyone ever', value: 'everyone' },
+  { label: 'Current', value: 'current', icon: 'i-lucide-badge-check' },
+  { label: 'Awaiting a check', value: 'awaiting-check', icon: 'i-lucide-clock' },
+  { label: 'Lapsed', value: 'lapsed', icon: 'i-lucide-history' },
+  { label: 'Everyone ever', value: 'everyone', icon: 'i-lucide-users' },
 ]
 
 const listing = ref<Listing | null>(null)
@@ -43,10 +45,11 @@ const search = ref('')
 const page = ref(1)
 const loading = ref(false)
 const failure = ref<string | null>(null)
-const notice = ref<string | null>(null)
+const toast = useToast()
+const grantForm = useTemplateRef('grantForm')
 
 const granting = ref(false)
-const grant = reactive({ userId: '', startsOn: '', years: 1 as MembershipTerm, evidence: '', studentId: '' })
+const grant = reactive<Partial<RecordMembership>>({ years: 1 })
 
 async function load(): Promise<void> {
   loading.value = true
@@ -64,28 +67,28 @@ async function load(): Promise<void> {
   }
 }
 
-async function record(): Promise<void> {
+async function record(event: FormSubmitEvent<RecordMembership>): Promise<void> {
   failure.value = null
   try {
-    await $fetch('/api/admin/memberships', {
-      method: 'POST',
-      body: {
-        userId: grant.userId,
-        startsOn: grant.startsOn,
-        years: grant.years,
-        evidence: grant.evidence || undefined,
-        studentId: grant.studentId || undefined,
-      },
+    await $fetch('/api/admin/memberships', { method: 'POST', body: event.data })
+    toast.add({
+      title: 'Membership recorded',
+      description: 'It counts from now, whether or not anybody has checked it yet.',
+      icon: 'i-lucide-badge-check',
+      color: 'success',
     })
-    notice.value = 'Recorded. It counts from today, whether or not anybody has checked it yet.'
     granting.value = false
-    grant.userId = ''
-    grant.evidence = ''
-    grant.studentId = ''
+    grant.userId = undefined
+    grant.evidence = undefined
+    grant.studentId = undefined
     await load()
   }
   catch (error) {
-    failure.value = refusalText(error)
+    // A clashing student number is about that field; anything else is about the person.
+    const message = refusalText(error)
+    if (/student number/i.test(message)) grantForm.value?.setErrors([{ name: 'studentId', message }])
+    else if (/account/i.test(message)) grantForm.value?.setErrors([{ name: 'userId', message }])
+    else failure.value = message
   }
 }
 
@@ -93,6 +96,7 @@ async function confirm(member: Member): Promise<void> {
   failure.value = null
   try {
     await $fetch(`/api/admin/memberships/${member.id}/confirm`, { method: 'POST' })
+    toast.add({ title: `${member.name} checked against the SU's list`, icon: 'i-lucide-check', color: 'success' })
     await load()
   }
   catch (error) {
@@ -100,6 +104,32 @@ async function confirm(member: Member): Promise<void> {
   }
 }
 
+// What is filtered, said out loud and removable one at a time (0032).
+const activeFilters = computed<ActiveFilter[]>(() => {
+  const active: ActiveFilter[] = []
+  if (search.value) {
+    active.push({ key: 'search', label: `Matching ${search.value}`, icon: 'i-lucide-search', clear: () => {
+      search.value = ''
+    } })
+  }
+  if (filter.value !== 'current') {
+    active.push({
+      key: 'filter',
+      label: FILTERS.find(option => option.value === filter.value)!.label,
+      icon: FILTERS.find(option => option.value === filter.value)!.icon,
+      clear: () => {
+        filter.value = 'current'
+      },
+    })
+  }
+  return active
+})
+
+function clearFilters(): void {
+  search.value = ''
+  filter.value = 'current'
+}
+
 const exportUrl = computed(() => {
   const query = new URLSearchParams({ filter: filter.value })
   if (search.value) query.set('search', search.value)
@@ -172,16 +202,6 @@ onMounted(load)
       :description="failure"
     />
 
-    <UAlert
-      v-if="notice"
-      data-test="members-notice"
-      color="success"
-      variant="subtle"
-      :description="notice"
-      close
-      @update:open="notice = null"
-    />
-
     <UAlert
       color="neutral"
       variant="subtle"
@@ -190,63 +210,71 @@ onMounted(load)
       description="This records what somebody bought and when it runs out. A membership counts from the moment it is recorded: checking it against the SU's own list happens afterwards and never holds up a member price."
     />
 
-    <div class="flex flex-wrap items-end gap-3">
-      <UFormField
-        label="Search"
-        class="min-w-64 flex-1"
-      >
-        <UInput
-          v-model="search"
-          data-test="members-search"
-          placeholder="A name, an address or a student number"
-          icon="i-lucide-search"
-        />
-      </UFormField>
-
-      <UFormField
-        label="Show"
-        class="min-w-48"
-      >
-        <USelect
-          v-model="filter"
-          data-test="members-filter"
-          :items="FILTERS"
-          value-key="value"
-        />
-      </UFormField>
+    <AdminToolbar
+      v-model:search="search"
+      placeholder="A name, an address or a student number"
+      :active="activeFilters"
+      :loading="loading"
+      @clear="clearFilters"
+    >
+      <template #filters>
+        <UFormField
+          label="Show"
+          help="Current counts the grace window after a term ends."
+        >
+          <USelect
+            v-model="filter"
+            data-test="members-filter"
+            :items="FILTERS"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+      </template>
 
-      <UButton
-        data-test="record-membership"
-        icon="i-lucide-user-plus"
-        @click="granting = true"
-      >
-        Record one
-      </UButton>
+      <template #actions>
+        <UButton
+          data-test="record-membership"
+          icon="i-lucide-user-plus"
+          @click="granting = true"
+        >
+          Record one
+        </UButton>
 
-      <UButton
-        data-test="members-export"
-        icon="i-lucide-download"
-        variant="subtle"
-        :to="exportUrl"
-        external
-      >
-        Export
-      </UButton>
-    </div>
+        <UButton
+          data-test="members-export"
+          icon="i-lucide-download"
+          color="neutral"
+          variant="outline"
+          :to="exportUrl"
+          external
+        >
+          Export
+        </UButton>
+      </template>
+    </AdminToolbar>
 
     <UTable
       :data="listing?.items ?? []"
       :columns="columns"
       :loading="loading"
       data-test="members-table"
-    />
+    >
+      <template #empty>
+        <p class="py-6 text-center text-sm text-muted">
+          {{ search || filter !== 'current'
+            ? 'No membership matches that.'
+            : 'No current memberships. One appears here as soon as it is recorded.' }}
+        </p>
+      </template>
+    </UTable>
 
     <div class="flex flex-wrap items-center justify-between gap-3">
       <p
         data-test="members-total"
         class="text-sm text-muted"
       >
-        {{ listing?.total ?? 0 }} membership(s)
+        {{ plural(listing?.total ?? 0, 'membership') }}
       </p>
       <UPagination
         v-if="listing && listing.pages > 1"
@@ -262,52 +290,72 @@ onMounted(load)
       description="What they bought at the SU, and when."
     >
       <template #body>
-        <form
+        <UForm
+          ref="grantForm"
+          :schema="recordMembership"
+          :state="grant"
           class="space-y-4"
-          @submit.prevent="record"
+          @submit="record"
         >
-          <UFormField label="Account">
-            <UInput
-              v-model="grant.userId"
-              data-test="grant-user"
-              required
-            />
-          </UFormField>
           <UFormField
-            label="Bought on"
-            description="The term runs from this day, not from the start of the year."
+            name="userId"
+            label="Who bought it"
+            required
           >
-            <UInput
-              v-model="grant.startsOn"
-              data-test="grant-starts"
-              type="date"
-              required
-            />
-          </UFormField>
-          <UFormField label="Term">
-            <USelect
-              v-model="grant.years"
-              data-test="grant-years"
-              :items="MEMBERSHIP_TERMS.map(years => ({ label: `${years} year${years === 1 ? '' : 's'}`, value: years }))"
-              value-key="value"
+            <PersonPicker
+              v-model="grant.userId"
+              class="w-full"
             />
           </UFormField>
+          <div class="grid gap-4 sm:grid-cols-2">
+            <UFormField
+              name="startsOn"
+              label="Bought on"
+              description="The term runs from this day."
+              required
+            >
+              <DateField
+                v-model="grant.startsOn"
+                data-test="grant-starts"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              name="years"
+              label="Term"
+              required
+            >
+              <USelect
+                v-model="grant.years"
+                data-test="grant-years"
+                :items="MEMBERSHIP_TERMS.map(years => ({ label: `${years} year${years === 1 ? '' : 's'}`, value: years }))"
+                value-key="value"
+                class="w-full"
+              />
+            </UFormField>
+          </div>
           <UFormField
+            name="studentId"
             label="Student number"
-            description="How the committee finds them on the SU's list. Optional, and stored on the account."
+            description="How the committee finds them on the SU's list. Stored on the account."
+            hint="Optional"
           >
             <UInput
               v-model="grant.studentId"
               data-test="grant-student-id"
+              class="w-full"
             />
           </UFormField>
           <UFormField
+            name="evidence"
             label="Evidence"
-            description="The SU's own reference for the purchase, if there is one."
+            description="The SU's own reference for the purchase."
+            hint="Optional"
           >
             <UInput
               v-model="grant.evidence"
               data-test="grant-evidence"
+              class="w-full"
             />
           </UFormField>
           <UButton
@@ -316,7 +364,7 @@ onMounted(load)
           >
             Record it
           </UButton>
-        </form>
+        </UForm>
       </template>
     </UModal>
   </div>
diff --git a/app/pages/admin/people/[id].vue b/app/pages/admin/people/[id].vue
index 5633521f..1306c3ae 100644
--- a/app/pages/admin/people/[id].vue
+++ b/app/pages/admin/people/[id].vue
@@ -52,8 +52,8 @@ const signsInWith = computed(() => {
   return [
     methods.password ? 'A password' : null,
     methods.google ? 'Google' : null,
-    methods.passkeys ? `${methods.passkeys} passkey(s)` : null,
-    methods.factor ? `An authenticator, with ${methods.recoveryCodesRemaining} recovery code(s) left` : null,
+    methods.passkeys ? plural(methods.passkeys, 'passkey') : null,
+    methods.factor ? `An authenticator, with ${plural(methods.recoveryCodesRemaining, 'recovery code')} left` : null,
   ].filter(Boolean) as string[]
 })
 
diff --git a/app/pages/admin/people/index.vue b/app/pages/admin/people/index.vue
index 29c01e71..022a6ad4 100644
--- a/app/pages/admin/people/index.vue
+++ b/app/pages/admin/people/index.vue
@@ -3,6 +3,7 @@ import { h, resolveComponent } from 'vue'
 import { formatLondon } from '#shared/utils/london'
 import { ROLES } from '#shared/utils/roles'
 import type { Role } from '#shared/utils/roles'
+import type { ActiveFilter } from '~/components/AdminToolbar.vue'
 import type { TableColumn } from '@nuxt/ui'
 
 definePageMeta({ layout: 'admin', title: 'People', middleware: 'signed-in' })
@@ -110,6 +111,47 @@ async function invite(): Promise<void> {
   }
 }
 
+const activeFilters = computed<ActiveFilter[]>(() => {
+  const active: ActiveFilter[] = []
+  if (search.value) {
+    active.push({
+      key: 'search',
+      label: `Matching ${search.value}`,
+      icon: 'i-lucide-search',
+      clear: () => {
+        search.value = ''
+      },
+    })
+  }
+  if (filter.value !== 'everyone') {
+    active.push({
+      key: 'filter',
+      label: FILTERS.find(option => option.value === filter.value)!.label,
+      icon: 'i-lucide-filter',
+      clear: () => {
+        show('everyone')
+      },
+    })
+  }
+  if (role.value) {
+    active.push({
+      key: 'role',
+      label: role.value,
+      icon: 'i-lucide-shield',
+      clear: () => {
+        role.value = undefined
+      },
+    })
+  }
+  return active
+})
+
+function clearFilters(): void {
+  search.value = ''
+  role.value = undefined
+  show('everyone')
+}
+
 const seen = (at: number | null): string =>
   at ? formatLondon(new Date(at * 1000), { dateStyle: 'medium' }) : 'Never'
 
@@ -174,7 +216,7 @@ onMounted(load)
         color="warning"
         variant="subtle"
         icon="i-lucide-shield-alert"
-        :title="`${listing.banners.privilegedWithoutFactor} privileged account(s) without an authenticator`"
+        :title="`${plural(listing.banners.privilegedWithoutFactor, 'privileged account')} without an authenticator`"
         description="Their roles do not work until they enrol one."
         :actions="[{ label: 'Show them', color: 'neutral', variant: 'subtle', onClick: () => show('privileged-without-mfa') }]"
       />
@@ -184,59 +226,55 @@ onMounted(load)
         color="neutral"
         variant="subtle"
         icon="i-lucide-clock"
-        :title="`${listing.banners.insideRetentionWindow} account(s) approaching retention`"
+        :title="`${plural(listing.banners.insideRetentionWindow, 'account')} approaching retention`"
         description="Dormant for longer than the retention window allows."
         :actions="[{ label: 'Show them', color: 'neutral', variant: 'subtle', onClick: () => show('retention-window') }]"
       />
     </div>
 
-    <div class="flex flex-wrap items-end gap-3">
-      <UFormField
-        label="Search"
-        class="min-w-64 flex-1"
-      >
-        <UInput
-          v-model="search"
-          data-test="directory-search"
-          placeholder="A name or an address"
-          icon="i-lucide-search"
-        />
-      </UFormField>
-
-      <UFormField
-        label="Show"
-        class="min-w-56"
-      >
-        <USelect
-          v-model="filter"
-          data-test="directory-filter"
-          :items="FILTERS"
-          value-key="value"
-          @update:model-value="show(filter)"
-        />
-      </UFormField>
+    <AdminToolbar
+      v-model:search="search"
+      placeholder="A name, an address or a student number"
+      :active="activeFilters"
+      :loading="loading"
+      @clear="clearFilters"
+    >
+      <template #filters>
+        <UFormField label="Show">
+          <USelect
+            v-model="filter"
+            data-test="directory-filter"
+            :items="FILTERS"
+            value-key="value"
+            class="w-full"
+            @update:model-value="show(filter)"
+          />
+        </UFormField>
 
-      <UFormField
-        v-if="filter === 'role-holders'"
-        label="Role"
-        class="min-w-48"
-      >
-        <USelect
-          v-model="role"
-          data-test="directory-role"
-          :items="[{ label: 'Any role', value: undefined }, ...ROLES.map(name => ({ label: name, value: name }))]"
-          value-key="value"
-        />
-      </UFormField>
+        <UFormField
+          v-if="filter === 'role-holders'"
+          label="Role"
+        >
+          <USelect
+            v-model="role"
+            data-test="directory-role"
+            :items="[{ label: 'Any role', value: undefined }, ...ROLES.map(name => ({ label: name, value: name }))]"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+      </template>
 
-      <UButton
-        data-test="invite"
-        icon="i-lucide-user-plus"
-        @click="inviting = true"
-      >
-        Add someone
-      </UButton>
-    </div>
+      <template #actions>
+        <UButton
+          data-test="invite"
+          icon="i-lucide-user-plus"
+          @click="inviting = true"
+        >
+          Add someone
+        </UButton>
+      </template>
+    </AdminToolbar>
 
     <UAlert
       v-if="listing?.awaiting"
@@ -261,14 +299,20 @@ onMounted(load)
       :columns="columns"
       :loading="loading"
       data-test="directory-table"
-    />
+    >
+      <template #empty>
+        <p class="py-6 text-center text-sm text-muted">
+          {{ activeFilters.length ? 'Nobody matches that.' : 'No accounts yet.' }}
+        </p>
+      </template>
+    </UTable>
 
     <div class="flex flex-wrap items-center justify-between gap-3">
       <p
         data-test="directory-total"
         class="text-sm text-muted"
       >
-        {{ listing?.total ?? 0 }} account(s)
+        {{ plural(listing?.total ?? 0, 'account') }}
       </p>
       <UPagination
         v-if="listing && listing.pages > 1"
diff --git a/app/pages/dev.vue b/app/pages/dev.vue
new file mode 100644
index 00000000..47181631
--- /dev/null
+++ b/app/pages/dev.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import type { Persona } from '#shared/utils/personas'
+
+// Development only: nuxt.config keeps this file out of a production build (K-124).
+
+definePageMeta({ layout: 'admin', title: 'Developer tools' })
+
+interface Seeded { id: string, email: string, name: string, anonymisedAt: number | null }
+interface Row extends Persona { account: Seeded | null }
+interface Letter { name: string, to: string, subject: string, body: string }
+
+interface Tools {
+  session: { id: string, name: string, email: string, roles: string[], permissions: string[], factor: boolean } | null
+  personas: Row[]
+  mailbox: Letter[]
+}
+
+const toast = useToast()
+const { refresh: refreshAccount } = useAccount()
+const tools = ref<Tools | null>(null)
+const working = ref('')
+const reading = ref<Letter | null>(null)
+
+async function load(): Promise<void> {
+  tools.value = await $fetch<Tools>('/api/dev')
+}
+
+async function seed(): Promise<void> {
+  working.value = 'seed'
+  try {
+    const answer = await $fetch<{ made: number, held: number }>('/api/dev/seed', { method: 'POST' })
+    toast.add({ title: `${answer.made} made, ${answer.held} already there`, icon: 'i-lucide-sprout' })
+    await load()
+  }
+  finally {
+    working.value = ''
+  }
+}
+
+async function be(row: Row): Promise<void> {
+  if (!row.account) return
+  working.value = row.email
+  try {
+    const answer = await $fetch<{ name: string }>('/api/dev/sign-in-as', { method: 'POST', body: { userId: row.account.id } })
+    await refreshAccount()
+    toast.add({ title: `Signed in as ${answer.name}`, icon: 'i-lucide-user-check', color: 'success' })
+    await load()
+  }
+  catch (error) {
+    toast.add({ title: refusalText(error), color: 'error' })
+  }
+  finally {
+    working.value = ''
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UAlert
+      color="warning"
+      variant="subtle"
+      icon="i-lucide-flask-conical"
+      title="Development only"
+      description="These tools sign in without a password. They are not in a production build: nuxt.config leaves the route out of the bundle rather than guarding it at runtime."
+    />
+
+    <UCard>
+      <template #header>
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <h2 class="nnt-headline text-lg">
+            Be somebody
+          </h2>
+          <UButton
+            icon="i-lucide-sprout"
+            color="neutral"
+            variant="outline"
+            :loading="working === 'seed'"
+            data-test="dev-seed"
+            @click="seed"
+          >
+            Seed the personas
+          </UButton>
+        </div>
+      </template>
+
+      <ul class="divide-y divide-default">
+        <li
+          v-for="row in tools?.personas ?? []"
+          :key="row.email"
+          class="flex flex-wrap items-center gap-3 py-3"
+        >
+          <div class="min-w-0 flex-1">
+            <p class="flex items-center gap-2 text-sm font-medium">
+              {{ row.name }}
+              <UBadge
+                v-if="row.role"
+                color="neutral"
+                variant="subtle"
+                size="sm"
+              >
+                {{ row.role }}
+              </UBadge>
+              <UBadge
+                v-if="row.shape !== 'full'"
+                color="warning"
+                variant="subtle"
+                size="sm"
+              >
+                {{ row.shape }}
+              </UBadge>
+            </p>
+            <p class="text-sm text-muted">
+              {{ row.describes }}
+            </p>
+          </div>
+
+          <UButton
+            v-if="row.account && row.shape !== 'tombstone'"
+            size="sm"
+            :loading="working === row.email"
+            :data-test="`dev-be-${row.role ?? row.shape}`"
+            @click="be(row)"
+          >
+            Be them
+          </UButton>
+          <UBadge
+            v-else-if="row.account"
+            color="neutral"
+            variant="subtle"
+          >
+            Nobody to be
+          </UBadge>
+          <span
+            v-else
+            class="text-sm text-muted"
+          >Not seeded</span>
+        </li>
+      </ul>
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <h2 class="nnt-headline text-lg">
+          This session
+        </h2>
+      </template>
+
+      <div
+        v-if="tools?.session"
+        class="space-y-3 text-sm"
+        data-test="dev-session"
+      >
+        <p>
+          {{ tools.session.name }}
+          <span class="font-mono text-muted">{{ tools.session.email }}</span>
+        </p>
+        <div class="flex flex-wrap gap-1">
+          <UBadge
+            v-for="role in tools.session.roles"
+            :key="role"
+            variant="subtle"
+          >
+            {{ role }}
+          </UBadge>
+          <UBadge
+            :color="tools.session.factor ? 'success' : 'warning'"
+            variant="subtle"
+          >
+            {{ tools.session.factor ? 'authenticator enrolled' : 'no authenticator' }}
+          </UBadge>
+        </div>
+        <div class="flex flex-wrap gap-1">
+          <UBadge
+            v-for="permission in tools.session.permissions"
+            :key="permission"
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            class="font-mono"
+          >
+            {{ permission }}
+          </UBadge>
+          <span
+            v-if="!tools.session.permissions.length"
+            class="text-sm text-muted"
+          >No permissions. Every admin screen refuses this session.</span>
+        </div>
+      </div>
+      <p
+        v-else
+        class="text-sm text-muted"
+      >
+        Nobody is signed in.
+      </p>
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <h2 class="nnt-headline text-lg">
+          Mailbox
+        </h2>
+      </template>
+
+      <p
+        v-if="!tools?.mailbox.length"
+        class="text-sm text-muted"
+      >
+        Nothing sent yet. Development never hands a message to a provider; it writes it to
+        <span class="font-mono">.data/mail</span> instead.
+      </p>
+      <ul
+        v-else
+        class="divide-y divide-default"
+        data-test="dev-mailbox"
+      >
+        <li
+          v-for="letter in tools.mailbox"
+          :key="letter.name"
+          class="flex flex-wrap items-center gap-3 py-2"
+        >
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-sm">
+              {{ letter.subject }}
+            </p>
+            <p class="truncate font-mono text-xs text-muted">
+              {{ letter.to }}
+            </p>
+          </div>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            @click="reading = letter"
+          >
+            Read
+          </UButton>
+        </li>
+      </ul>
+    </UCard>
+
+    <UModal
+      :open="reading !== null"
+      :title="reading?.subject ?? ''"
+      :description="reading?.to ?? ''"
+      @update:open="reading = null"
+    >
+      <template #body>
+        <pre class="overflow-x-auto whitespace-pre-wrap text-xs">{{ reading?.body }}</pre>
+      </template>
+    </UModal>
+  </div>
+</template>
diff --git a/docs/architecture.md b/docs/architecture.md
index f1dade6f..f1c06365 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -163,7 +163,10 @@ emailed link is built from `NUXT_PUBLIC_BASE_URL`, which defaults to the local p
 so a verification link in `.data/mail` is one that works.
 
 Seed scripts generate credentials at runtime, print once, and refuse to run against remote
-databases. There is a `/dev-login` guarded by `import.meta.dev` using `replaceUserSession`.
+databases. `/dev` is the local developer surface: it seeds personas and signs in as any of them
+without a password. It is kept out of a production build by `nuxt.config`'s `ignore` rather than by
+a runtime guard, because a guard still ships the file, and a test greps the built output to prove
+it (K-124).
 
 ## Deployment
 
diff --git a/docs/backlog/K-platform.md b/docs/backlog/K-platform.md
index a0cfd5e7..5110c4b1 100644
--- a/docs/backlog/K-platform.md
+++ b/docs/backlog/K-platform.md
@@ -445,3 +445,50 @@ Stories: 22. Phases: 19 MVP, 0 V2, 0 Later, 3 resolved.
      request.
 - Source: Prompt Book K-1 (testing); audit TR-10 (the estate's best-tested module), PR-2, PR-5,
   PR-8, SD-14; Get-In part 5 (the defect list doubles as the regression checklist)
+
+## K-123: One set of admin component conventions
+
+- Role: Administrator
+- Phase: MVP
+- Story: As an officer using the admin screens, I want every screen to behave the same way so
+  that learning one teaches me the rest, and as the next developer I want the choice already
+  made so I copy something right rather than something nearby.
+- Depends on: none
+- Acceptance criteria:
+  1. A person is always chosen, never typed: every field naming somebody searches by name,
+     address and student number, debounced, and shows who was picked. No screen asks for an
+     account id.
+  2. Every input is the component for its job: a date is a date input, a number is a number
+     input, money is entered in pounds and stored in pence, a list of scalars is a tags input,
+     a closed short list is a select, a long or searchable one is a select menu.
+  3. Every form validates against the same schema the endpoint validates against, and a
+     refusal from the server lands on the field it concerns rather than as a page-level alert.
+  4. Filters sit in a dashboard toolbar with fixed widths, so a control does not resize when
+     its value changes and a row does not wrap at a normal window size.
+  5. A confirmation is a toast; an alert is only for something the reader must act on. Every
+     table has an empty state that says what would be there.
+  6. The conventions are a decision record and a test that fails when a screen departs from
+     them, not a review habit.
+- Source: Review of the admin surface against the Nuxt UI component matrix, 30 August 2026;
+  decision 0021 (the design language is enforced by test, not by review).
+
+## K-124: Developer tools that do not ship
+
+- Role: Administrator
+- Phase: MVP
+- Story: As a developer, I want to reach any state of this system in one click locally so that
+  working on a screen does not begin with registering an account, fetching a token out of a
+  mailbox and enrolling an authenticator.
+- Depends on: K-122
+- Acceptance criteria:
+  1. A development-only surface signs in as any account without its password, and seeds a set
+     of personas covering each role, a plain member, a guest and a tombstone.
+  2. It shows the local mailbox, the current session, and the permissions that session resolves
+     to, because every authorisation question starts with those.
+  3. The whole surface is guarded so that it does not exist in a production build, and a test
+     proves the built output contains neither the route nor its handler.
+  4. A command captures the admin screens as images at two widths, so a visual change can be
+     reviewed without running anything. It gates nothing.
+- Source: Review of the admin surface, 30 August 2026; estate convention that a consumer app's
+  dev login is guarded by `import.meta.dev` (workspace CLAUDE.md), applied here to the app that
+  writes the session.
diff --git a/docs/decisions/0032-the-admin-surface-has-one-set-of-component-conventions.md b/docs/decisions/0032-the-admin-surface-has-one-set-of-component-conventions.md
new file mode 100644
index 00000000..b211230f
--- /dev/null
+++ b/docs/decisions/0032-the-admin-surface-has-one-set-of-component-conventions.md
@@ -0,0 +1,65 @@
+# 0032: The admin surface has one set of component conventions
+
+- Status: Accepted
+- Date: 2026-08-30
+
+## Context
+
+Five admin screens were built one after another, each copying the last. A review of all of them
+against the Nuxt UI component matrix, with screenshots of every screen and modal at two widths,
+found the same thing everywhere: the components are not wrong so much as **unchosen**. Where a
+specific component existed for the job, we reached for `UInput`.
+
+The evidence, in the pictures rather than in the diff:
+
+- A person is entered by pasting a thirty-two character identifier, in four places. There is no
+  search, no name, and no way to tell you picked the right person.
+- Six date fields render as `mm/dd/yyyy`, in American order, in a British theatre's admin.
+- Filter rows are bare flex rows. The audit page's wraps onto a second line at 1400 pixels, the
+  people page's filter grows and shrinks as its value changes, and a search box truncates its own
+  placeholder.
+- The audit table prints `user:` and an identifier where a name belongs.
+- Fifty settings share one scroll, every number in a full-width text box.
+- Nothing uses a toast, so every confirmation stays on the page afterwards.
+- No form validates on the client, so a refusal appears as a red alert behind the modal it
+  concerns.
+
+None of that is a design decision anybody made. It is what happens when the choice is made five
+times by copying.
+
+## Decision
+
+**The choice is made once, here, and a test holds it.**
+
+- **A person is chosen, never typed.** Any field naming somebody uses the shared picker: an
+  autocomplete searching name, address and student number, debounced, showing who was picked. The
+  identifier is what the picker submits and never what a human types.
+- **The component matches the value.** A date is `UInputDate`; a number is `UInputNumber`; money is
+  entered in pounds and stored in pence (0004); a list of scalars is `UInputTags`; a short closed
+  list is `USelect` and a long or searchable one is `USelectMenu`; free text that runs to a sentence
+  is `UTextarea`.
+- **One schema validates both ends.** The Zod object the endpoint validates lives in `shared/` and
+  drives the form, so a field error appears under its field. A refusal from the server is set on the
+  field it concerns, not raised as a page alert.
+- **Filters live in a dashboard toolbar**, at fixed widths. A control that resizes when its value
+  changes is what makes a row feel unstable, and a row that wraps at a normal window size is a
+  layout that was never tried at that size.
+- **A confirmation is a toast. An alert is for something the reader must act on.** A table with
+  nothing in it says what would be there.
+
+**The conventions are enforced by `tests/unit/admin-conventions.test.ts`**, the way the design
+language is enforced by a test rather than by review (0021). What review still judges is whether a
+screen says the right thing; a test cannot see that.
+
+## Consequences
+
+- A new admin screen starts by copying one that already follows this, and the test catches it if it
+  copies something older.
+- The picker needs a search endpoint. It reuses the account directory, which already pages,
+  allow-lists its columns and searches name and address; the search gains student number. Every role
+  that may award a fellowship or record a membership already reads accounts, so nothing moves.
+- Moving request schemas into `shared/` means a client bundle carries the shape of every admin
+  request body. Those are field names and limits, not secrets, and the alternative is two
+  definitions that drift.
+- Fifty settings become searchable and grouped into tabs. The register is still one page in the
+  sense that matters: every key is reachable and searchable from it.
diff --git a/docs/decisions/README.md b/docs/decisions/README.md
index fa98b944..ed648474 100644
--- a/docs/decisions/README.md
+++ b/docs/decisions/README.md
@@ -37,3 +37,4 @@ afterwards, only superseded.
 | 0029 | The end-to-end suites are a separate command | what `bun run test` covers, and what runs nightly |
 | 0030 | The old estate's audit history is not imported | why the archive was refused, and what answers a historical question |
 | 0031 | A membership is a term, and confirming it never gates money | what membership is, and what a check does and does not block |
+| 0032 | The admin surface has one set of component conventions | which component for which job, and what the test holds |
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a7823d43..3c000e47 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -76,6 +76,12 @@ export default defineNuxtConfig({
     },
   },
 
+  // The developer tools do not exist in a build (K-124). A guard inside a file would still ship
+  // the file; this keeps them out of the bundle entirely.
+  ignore: process.env.NODE_ENV === 'production'
+    ? ['app/pages/dev.vue', 'server/api/dev/**', 'server/utils/dev.ts']
+    : [],
+
   experimental: {
     // A deploy rotates every asset hash, so an open tab asks for chunks that no longer exist.
     emitRouteChunkError: 'automatic-immediate',
@@ -86,6 +92,10 @@ export default defineNuxtConfig({
   nitro: {
     preset: 'cloudflare_module',
 
+    // Nuxt's own `ignore` covers the app; Nitro scans server/ separately, so the developer
+    // routes have to be excluded here too (K-124). A test on the built output proves it.
+    ignore: process.env.NODE_ENV === 'production' ? ['api/dev/**'] : [],
+
     experimental: {
       tasks: true,
       wasm: true,
diff --git a/package.json b/package.json
index 2149368a..b46ab505 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "typecheck:bun": "tsc -p tests --noEmit && tsc -p scripts --noEmit && tsc -p migration --noEmit",
     "grant-admin": "bun scripts/grant-admin.ts",
     "check:notifications": "bun scripts/check-notifications.ts",
-    "test:e2e": "bun scripts/run-tests.ts"
+    "test:e2e": "bun scripts/run-tests.ts",
+    "shots": "bun scripts/shots.ts"
   },
   "dependencies": {
     "@fontsource-variable/bricolage-grotesque": "^5.2.5",
diff --git a/scripts/shots.ts b/scripts/shots.ts
new file mode 100644
index 00000000..11921653
--- /dev/null
+++ b/scripts/shots.ts
@@ -0,0 +1,171 @@
+#!/usr/bin/env bun
+// Screenshots of every admin screen, for reviewing how they look. Seeds realistic data, signs in,
+// and writes a PNG per screen at two widths. Nothing gates on this and CI never runs it (0032).
+
+import { Database } from 'bun:sqlite'
+import { click, fill, fillPin, openSignedOutView, startApp, visit, waitFor } from '../tests/helpers/webview'
+import { codeForStep, stepFor } from '../shared/utils/totp'
+import { londonDay } from '../shared/utils/membership'
+
+// Gitignored: the pictures are for looking at once, not for keeping.
+const OUT = process.env.SHOTS_OUT ?? '.shots'
+const WIDE = 1400
+const NARROW = 900
+
+const password = `shots-${crypto.randomUUID()}`
+const email = `shots-${crypto.randomUUID().slice(0, 8)}@e2e.newtheatre.org.uk`
+
+const app = await startApp()
+
+const send = (method: string, path: string, body?: unknown, cookie?: string): Promise<Response> =>
+  fetch(`${app.baseURL}${path}`, {
+    method,
+    headers: { 'content-type': 'application/json', ...(cookie ? { cookie } : {}) },
+    ...(method === 'GET' ? {} : { body: JSON.stringify(body ?? {}) }),
+  })
+
+function sql(statement: string, ...parameters: unknown[]): void {
+  const database = new Database(app.databaseFile)
+  try {
+    database.query(statement).run(...parameters as never[])
+  }
+  finally {
+    database.close()
+  }
+}
+
+function one<T>(statement: string, ...parameters: unknown[]): T {
+  const database = new Database(app.databaseFile, { readonly: true })
+  try {
+    return database.query(statement).get(...parameters as never[]) as T
+  }
+  finally {
+    database.close()
+  }
+}
+
+// The screenshots are taken as an administrator, so this account walks the whole real path:
+// register, verify, enrol an authenticator, be granted the role, then answer a challenge.
+await send('POST', '/api/auth/register', { email, name: 'Imogen Hart (test)', password })
+sql('UPDATE users SET verified = 1 WHERE email = ?', email)
+const first = ((await send('POST', '/api/auth/sign-in', { email, password })).headers.get('set-cookie') ?? '').split(';')[0]!
+const { secret } = await (await send('POST', '/api/account/mfa/enrol', {}, first)).json() as { secret: string }
+await send('POST', '/api/account/mfa/confirm', { code: await codeForStep(secret, stepFor(new Date())) }, first)
+Bun.spawnSync(['bun', 'scripts/grant-admin.ts', email, app.databaseFile])
+
+// A code is single use, so a second sign-in in the same 30 second step needs the last one forgotten.
+function forgetStep(): void {
+  sql('UPDATE totp_secrets SET last_used_step = NULL WHERE user_id = (SELECT id FROM users WHERE email = ?)', email)
+}
+
+forgetStep()
+const cookie = await (async () => {
+  const { attemptId } = await (await send('POST', '/api/auth/sign-in', { email, password })).json() as { attemptId: string }
+  const answered = await send('POST', '/api/auth/mfa/challenge', { attemptId, code: await codeForStep(secret, stepFor(new Date())) })
+  return (answered.headers.get('set-cookie') ?? '').split(';')[0]!
+})()
+
+// Enough real data that no screen is empty: an empty table hides every layout problem there is.
+const NAMES = ['Rowan Ellis', 'Priya Nair', 'Tomasz Zielinski', 'Aoife Brennan', 'Sam Okonkwo', 'Hana Suzuki']
+const ids: string[] = []
+for (const [index, name] of NAMES.entries()) {
+  const address = `shots-member-${index}@e2e.newtheatre.org.uk`
+  await send('POST', '/api/auth/register', { email: address, name: `${name} (test)`, password })
+  sql('UPDATE users SET verified = 1 WHERE email = ?', address)
+  ids.push(one<{ id: string }>('SELECT id FROM users WHERE email = ?', address).id)
+}
+
+await send('POST', '/api/dev/seed', {}, cookie)
+await send('POST', '/api/admin/roles', { userId: ids[0], role: 'BOX_OFFICE' }, cookie)
+await send('POST', '/api/admin/roles', { userId: ids[1], role: 'FRONT_OF_HOUSE' }, cookie)
+await send('PUT', '/api/admin/config/BAR_TAB_CAP_PENCE', { value: 2500 }, cookie)
+
+const DAY_MS = 24 * 60 * 60 * 1000
+for (const [index, id] of ids.slice(0, 4).entries()) {
+  await send('POST', '/api/admin/memberships', {
+    userId: id,
+    startsOn: londonDay(new Date(Date.now() - index * 40 * DAY_MS)),
+    years: index % 2 === 0 ? 1 : 3,
+    studentId: `2099000${index}`,
+  }, cookie)
+}
+await send('POST', '/api/admin/fellowships', {
+  userId: ids[4],
+  awardedOn: '2019-06-12',
+  awardedBy: 'Committee, 12 June 2019',
+  citation: 'For a decade behind the lighting desk, and for teaching most of us to use it.',
+}, cookie)
+await send('POST', '/api/admin/fellowships', {
+  userId: ids[5],
+  awardedOn: '2014-11-03',
+  awardedBy: 'Committee, 3 November 2014',
+  citation: 'For founding the studio season.',
+}, cookie)
+
+const view = await openSignedOutView(app.baseURL)
+await visit(view, `${app.baseURL}/sign-in`)
+await fill(view, 'form input[type="email"]', email)
+await fill(view, 'form input[type="password"]', password)
+await click(view, 'form button[type="submit"]')
+await waitFor(view, `document.querySelectorAll('[data-test="mfa-challenge"] input').length >= 6`)
+forgetStep()
+await fillPin(view, '[data-test="mfa-challenge"] input', await codeForStep(secret, stepFor(new Date())))
+await waitFor(view, `document.querySelector('[data-test="sign-out"]')`)
+
+interface Shot {
+  name: string
+  path: string
+  // Waited for before the picture, so a screen is never caught mid-load.
+  marker?: string
+  after?: string
+  width?: number
+}
+
+const OPEN_MEMBERSHIP = `(async () => {
+  document.querySelector('[data-test="record-membership"]').click()
+  await new Promise(resolve => setTimeout(resolve, 400))
+  const input = document.querySelector('[data-test="person-picker"] input')
+  input.focus()
+  Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value').set.call(input, 'ro')
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+})()`
+
+const SHOTS: Shot[] = [
+  { name: '01-overview', path: '/admin', marker: 'h1' },
+  { name: '02-people', path: '/admin/people', marker: '[data-test="directory-table"]' },
+  { name: '03-people-filters', path: '/admin/people', marker: '[data-test="directory-table"]', after: `document.querySelector('[data-test="toolbar-filters"]').click()` },
+  { name: '04-account', path: `/admin/people/${ids[0]}`, marker: '[data-test="account-name"]' },
+  { name: '05-members', path: '/admin/members', marker: '[data-test="members-table"]' },
+  { name: '06-members-modal', path: '/admin/members', marker: '[data-test="members-table"]', after: OPEN_MEMBERSHIP },
+  { name: '07-fellows', path: '/admin/fellows', marker: '[data-test="fellows-table"]' },
+  { name: '08-fellows-modal', path: '/admin/fellows', marker: '[data-test="fellows-table"]', after: `document.querySelector('[data-test="award"]').click()` },
+  { name: '09-audit', path: '/admin/audit', marker: '[data-test="audit-table"]' },
+  { name: '10-audit-modal', path: '/admin/audit', marker: '[data-test="audit-table"]', after: `document.querySelector('[data-test="audit-record"]').click()` },
+  { name: '11-config', path: '/admin/config', marker: '[data-test="setting-BAR_TAB_CAP_PENCE"]' },
+  { name: '12-dev-tools', path: '/dev', marker: '[data-test="dev-seed"]' },
+  { name: '13-people-narrow', path: '/admin/people', marker: '[data-test="directory-table"]', width: NARROW },
+  { name: '14-members-narrow', path: '/admin/members', marker: '[data-test="members-table"]', width: NARROW },
+  { name: '15-config-narrow', path: '/admin/config', marker: '[data-test="setting-BAR_TAB_CAP_PENCE"]', width: NARROW },
+]
+
+const wanted = process.argv.slice(2)
+for (const shot of SHOTS) {
+  if (wanted.length && !wanted.some(term => shot.name.includes(term))) continue
+
+  view.resize(shot.width ?? WIDE, 1000)
+  await visit(view, `${app.baseURL}${shot.path}`, shot.marker)
+  await Bun.sleep(1200)
+  if (shot.after) {
+    await view.evaluate(shot.after)
+    await Bun.sleep(1200)
+  }
+  await Bun.write(`${OUT}/${shot.name}.png`, await view.screenshot())
+  console.info(`wrote ${OUT}/${shot.name}.png`)
+}
+
+view.close()
+await app.stop()
+
+// Explicit: the dev server subprocess keeps the loop alive, so the run would otherwise sit there
+// holding the port. The exit handler in the harness is what kills it.
+process.exit(0)
diff --git a/server/api/admin/audit/index.get.ts b/server/api/admin/audit/index.get.ts
index 83f09253..d047e3c9 100644
--- a/server/api/admin/audit/index.get.ts
+++ b/server/api/admin/audit/index.get.ts
@@ -1,4 +1,5 @@
-import { desc, eq } from 'drizzle-orm'
+import { desc, eq, sql } from 'drizzle-orm'
+import { alias } from 'drizzle-orm/sqlite-core'
 import { z } from 'zod'
 import { AUDIT_ACTION_NAMES, AUDIT_MODULES } from '#shared/utils/audit-actions'
 import type { AuditActionName } from '#shared/utils/audit-actions'
@@ -24,17 +25,23 @@ export default defineEventHandler(async (event) => {
 
   // The actor's name is joined rather than stored: an erased actor reads as its tombstone, which
   // is the whole point of anonymising rather than deleting (0011).
+  const subject = alias(schema.users, 'subject')
+
   const items = await db.select({
     id: schema.auditLog.id,
     actorId: schema.auditLog.actorId,
     actorName: schema.users.name,
     action: schema.auditLog.action,
     target: schema.auditLog.target,
+    // An entry names its subject by id; the screen should not (0032). Joined on the id inside the
+    // `user:` prefix, so an entry about something else still shows what it says.
+    targetName: subject.name,
     detail: schema.auditLog.detail,
     createdAt: schema.auditLog.createdAt,
   })
     .from(schema.auditLog)
     .leftJoin(schema.users, eq(schema.users.id, schema.auditLog.actorId))
+    .leftJoin(subject, eq(sql`'user:' || ${subject.id}`, schema.auditLog.target))
     .where(where)
     .orderBy(desc(schema.auditLog.createdAt), desc(schema.auditLog.id))
     .limit(input.pageSize)
diff --git a/server/api/admin/audit/index.post.ts b/server/api/admin/audit/index.post.ts
index 0a32d131..e98c0f43 100644
--- a/server/api/admin/audit/index.post.ts
+++ b/server/api/admin/audit/index.post.ts
@@ -1,16 +1,5 @@
-import { z } from 'zod'
-import { MANUAL_ACTION_NAMES, isManualAction } from '#shared/utils/audit-actions'
-import type { AuditActionName } from '#shared/utils/audit-actions'
-
-const body = z.object({
-  action: z.enum(MANUAL_ACTION_NAMES as [AuditActionName, ...AuditActionName[]]),
-  // The person the entry is about, and the person it is recorded on behalf of. Both are account
-  // references: the trail never names somebody it cannot later anonymise (0011, 0027).
-  target: z.string().max(64),
-  onBehalfOf: z.string().max(64),
-  occurredAt: z.number().int().positive(),
-  detail: z.record(z.string().max(60), z.union([z.string().max(120), z.number(), z.boolean(), z.null()])).default({}),
-})
+import { recordManualEntry as body } from '#shared/utils/admin-forms'
+import { isManualAction } from '#shared/utils/audit-actions'
 
 // Record an action taken outside the system (J-103 criteria 2 and 3).
 export default defineEventHandler(async (event) => {
diff --git a/server/api/admin/fellowships/[id]/revoke.post.ts b/server/api/admin/fellowships/[id]/revoke.post.ts
index 39e2c150..da98b31e 100644
--- a/server/api/admin/fellowships/[id]/revoke.post.ts
+++ b/server/api/admin/fellowships/[id]/revoke.post.ts
@@ -1,7 +1,5 @@
 import { eq } from 'drizzle-orm'
-import { z } from 'zod'
-
-const body = z.object({ reason: z.string().trim().min(1).max(500) })
+import { revokeFellowship as body } from '#shared/utils/admin-forms'
 
 // Revoke a fellowship, rewriting nothing (A-127 criterion 4, 0023).
 export default defineEventHandler(async (event) => {
diff --git a/server/api/admin/fellowships/index.post.ts b/server/api/admin/fellowships/index.post.ts
index ff17efa9..4e3cd7eb 100644
--- a/server/api/admin/fellowships/index.post.ts
+++ b/server/api/admin/fellowships/index.post.ts
@@ -1,14 +1,5 @@
 import { eq } from 'drizzle-orm'
-import { z } from 'zod'
-
-const body = z.object({
-  userId: z.string().min(1).max(64),
-  // A London calendar date: what is recorded is the day the committee resolved it (0014).
-  awardedOn: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, 'Give the date as YYYY-MM-DD'),
-  // The meeting, never an individual: the theatre awards this (0023).
-  awardedBy: z.string().trim().min(1).max(200),
-  citation: z.string().trim().min(1).max(1000),
-})
+import { awardFellowship as body } from '#shared/utils/admin-forms'
 
 // Record a fellowship (A-127).
 export default defineEventHandler(async (event) => {
diff --git a/server/api/admin/memberships/index.post.ts b/server/api/admin/memberships/index.post.ts
index b41b28b7..fb2e49e1 100644
--- a/server/api/admin/memberships/index.post.ts
+++ b/server/api/admin/memberships/index.post.ts
@@ -1,18 +1,7 @@
-import { z } from 'zod'
+import { recordMembership as body } from '#shared/utils/admin-forms'
 import { MEMBERSHIP_TERMS, endOfTerm, londonDay } from '#shared/utils/membership'
 import type { MembershipTerm } from '#shared/utils/membership'
 
-const body = z.object({
-  userId: z.string().min(1).max(64),
-  // The day it was bought, which is what the term runs from (0031).
-  startsOn: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, 'Give the date as YYYY-MM-DD'),
-  years: z.union([z.literal(1), z.literal(3)]),
-  // The SU's own reference for this purchase, so a query has something to check against.
-  evidence: z.string().trim().max(200).optional(),
-  // Recorded on the account rather than the membership: one person, one number (0031).
-  studentId: z.string().trim().max(32).optional(),
-})
-
 // Record a membership bought at the SU (A-117).
 export default defineEventHandler(async (event) => {
   const resolved = await requirePermission(event, 'members.write')
diff --git a/server/api/dev/index.get.ts b/server/api/dev/index.get.ts
new file mode 100644
index 00000000..0dc1086f
--- /dev/null
+++ b/server/api/dev/index.get.ts
@@ -0,0 +1,35 @@
+import { eq } from 'drizzle-orm'
+import { PERSONAS } from '#shared/utils/personas'
+
+// What a developer needs to know before doing anything: who is signed in, what that resolves to,
+// who they could be instead, and what the system has tried to send (K-124).
+export default defineEventHandler(async (event) => {
+  const session = await getUserSession(event)
+  const account = session?.user ? await findById(session.user.id) : undefined
+
+  const seeded = await personaAccounts()
+
+  const grants = account ? await liveGrants(account.id) : []
+
+  return {
+    session: account
+      ? {
+          id: account.id,
+          name: account.name,
+          email: account.email,
+          roles: grants.map(grant => grant.role),
+          permissions: [...permissionsFor(grants, new Date())].sort(),
+          factor: Boolean(await db.select({ userId: schema.totpSecrets.userId })
+            .from(schema.totpSecrets)
+            .where(eq(schema.totpSecrets.userId, account.id))
+            .limit(1)
+            .then(rows => rows[0])),
+        }
+      : null,
+    personas: PERSONAS.map(persona => ({
+      ...persona,
+      account: seeded.get(persona.email) ?? null,
+    })),
+    mailbox: await mailbox(),
+  }
+})
diff --git a/server/api/dev/seed.post.ts b/server/api/dev/seed.post.ts
new file mode 100644
index 00000000..5365d213
--- /dev/null
+++ b/server/api/dev/seed.post.ts
@@ -0,0 +1,4 @@
+// Seed the personas (K-124). Idempotent, because a developer runs it whenever they are unsure.
+export default defineEventHandler(async () => {
+  return { ok: true, ...await seedPersonas() }
+})
diff --git a/server/api/dev/sign-in-as.post.ts b/server/api/dev/sign-in-as.post.ts
new file mode 100644
index 00000000..de0f6b71
--- /dev/null
+++ b/server/api/dev/sign-in-as.post.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+const body = z.object({ userId: z.string().min(1).max(64) })
+
+// Sign in as anybody, without their password (K-124). This is an authentication bypass, which is
+// why nuxt.config keeps this file out of a production build rather than guarding it at runtime.
+export default defineEventHandler(async (event) => {
+  const input = await readValidatedBodyOrThrow(event, body)
+
+  const account = await findById(input.userId)
+  if (!account) throw createError({ statusCode: 404, statusMessage: 'No such account' })
+  if (account.anonymisedAt !== null) {
+    throw createError({ statusCode: 409, statusMessage: 'That account is a tombstone: there is nobody to be' })
+  }
+
+  // The same session every other path writes, so what is being tested is the real thing (0007).
+  await startSession(event, account)
+  return { ok: true, name: account.name }
+})
diff --git a/server/utils/dev.ts b/server/utils/dev.ts
new file mode 100644
index 00000000..f3c74350
--- /dev/null
+++ b/server/utils/dev.ts
@@ -0,0 +1,100 @@
+import { eq } from 'drizzle-orm'
+import { PERSONAS, PERSONA_PASSWORD } from '#shared/utils/personas'
+
+// Development-only helpers (K-124). Every caller is guarded, and nuxt.config keeps the routes out
+// of a production build entirely rather than trusting a guard to be remembered.
+
+// Beside the database they describe, so a run against a throwaway hub directory does not read a
+// map written for the developer's own one.
+const DEV_DIR = process.env.NUXT_HUB_DIR ?? '.data'
+const MAILBOX = `${DEV_DIR}/mail`
+
+export interface Letter { name: string, to: string, subject: string, body: string }
+
+// The messages the notification centre wrote here instead of sending (0013).
+export async function mailbox(): Promise<Letter[]> {
+  const { readdir, readFile } = await import('node:fs/promises')
+  try {
+    const names = (await readdir(MAILBOX)).sort().reverse().slice(0, 20)
+    return await Promise.all(names.map(async (name) => {
+      const body = await readFile(`${MAILBOX}/${name}`, 'utf8')
+      const header = (label: string): string => body.match(new RegExp(`^${label}: (.*)$`, 'm'))?.[1] ?? ''
+      return { name, to: header('To'), subject: header('Subject'), body }
+    }))
+  }
+  catch {
+    return []
+  }
+}
+
+// Which account each persona became. Anonymisation rewrites the email, so a tombstone cannot be
+// found by the address it was seeded under; this map is how it stays findable (0011).
+const MAP = `${DEV_DIR}/personas.json`
+
+async function remembered(): Promise<Record<string, string>> {
+  const { readFile } = await import('node:fs/promises')
+  try {
+    return JSON.parse(await readFile(MAP, 'utf8')) as Record<string, string>
+  }
+  catch {
+    return {}
+  }
+}
+
+export interface PersonaAccount { id: string, email: string, name: string, anonymisedAt: number | null }
+
+// The seeded account for each persona email, or nothing where one has not been seeded yet.
+export async function personaAccounts(): Promise<Map<string, PersonaAccount>> {
+  const map = await remembered()
+  const found = new Map<string, PersonaAccount>()
+
+  for (const persona of PERSONAS) {
+    const id = map[persona.email]
+    if (!id) continue
+    const account = await findById(id)
+    if (account) found.set(persona.email, { id: account.id, email: account.email, name: account.name, anonymisedAt: account.anonymisedAt })
+  }
+  return found
+}
+
+// Seeds one account per persona, idempotently: running it twice changes nothing, because a
+// developer runs it whenever they are unsure rather than once.
+export async function seedPersonas(): Promise<{ made: number, held: number }> {
+  const map = await remembered()
+  let made = 0
+  let held = 0
+
+  for (const persona of PERSONAS) {
+    const known = map[persona.email]
+    if ((known && await findById(known)) || await findByEmail(persona.email)) {
+      held++
+      continue
+    }
+
+    const id = await createAccount({
+      email: persona.email,
+      name: persona.name,
+      passwordHash: persona.shape === 'guest' ? null : await hashPassword(PERSONA_PASSWORD),
+    })
+    map[persona.email] = id
+    made++
+
+    if (persona.shape !== 'guest') {
+      await db.update(schema.users).set({ verified: true }).where(eq(schema.users.id, id))
+    }
+    if (persona.role) {
+      await db.insert(schema.roleGrants).values({
+        id: newId(),
+        userId: id,
+        role: persona.role,
+        expiresAt: defaultRoleExpiry(new Date()),
+      }).onConflictDoNothing()
+    }
+    if (persona.shape === 'tombstone') await eraseAccount(id, null)
+  }
+
+  const { mkdir, writeFile } = await import('node:fs/promises')
+  await mkdir(DEV_DIR, { recursive: true })
+  await writeFile(MAP, JSON.stringify(map, null, 2))
+  return { made, held }
+}
diff --git a/server/utils/directory.ts b/server/utils/directory.ts
index 48eea8f5..dd4075e2 100644
--- a/server/utils/directory.ts
+++ b/server/utils/directory.ts
@@ -130,7 +130,11 @@ export async function directoryPredicate(event: H3Event, query: DirectoryQuery):
 
   if (query.search) {
     const term = `%${query.search.toLowerCase()}%`
-    parts.push(or(like(sql`lower(${schema.users.name})`, term), like(schema.users.email, term))!)
+    parts.push(or(
+      like(sql`lower(${schema.users.name})`, term),
+      like(schema.users.email, term),
+      like(sql`lower(coalesce(${schema.users.studentId}, ''))`, term),
+    )!)
   }
 
   return parts.length > 0 ? and(...parts)! : ne(schema.users.id, '')
diff --git a/shared/utils/admin-forms.ts b/shared/utils/admin-forms.ts
new file mode 100644
index 00000000..2e3c2b52
--- /dev/null
+++ b/shared/utils/admin-forms.ts
@@ -0,0 +1,53 @@
+import { z } from 'zod'
+import { MANUAL_ACTION_NAMES } from './audit-actions'
+import type { AuditActionName } from './audit-actions'
+
+// One schema per admin form, validating the request and driving the form that sends it (0032).
+// Two definitions drift; this one cannot.
+
+const accountId = z.string().min(1).max(64)
+const londonDate = z.string().regex(/^\d{4}-\d{2}-\d{2}$/, 'Give the date as YYYY-MM-DD')
+
+export const awardFellowship = z.object({
+  userId: accountId,
+  awardedOn: londonDate,
+  // The meeting, never an individual: the theatre awards this (0023).
+  awardedBy: z.string().trim().min(1, 'Name the meeting that resolved it').max(200),
+  citation: z.string().trim().min(1, 'The citation is the public wording').max(1000),
+})
+
+export const revokeFellowship = z.object({
+  reason: z.string().trim().min(1, 'A revocation is recorded with its reason').max(500),
+})
+
+export const recordMembership = z.object({
+  userId: accountId,
+  startsOn: londonDate,
+  years: z.union([z.literal(1), z.literal(3)]),
+  evidence: z.string().trim().max(200).optional(),
+  studentId: z.string().trim().max(32).optional(),
+})
+
+export const recordManualEntry = z.object({
+  action: z.enum(MANUAL_ACTION_NAMES as [AuditActionName, ...AuditActionName[]]),
+  target: accountId,
+  onBehalfOf: accountId,
+  occurredAt: z.number().int().positive(),
+  detail: z.record(z.string().max(60), z.union([z.string().max(120), z.number(), z.boolean(), z.null()])).default({}),
+})
+
+// The form takes the day it happened; the endpoint takes the second that day began. Stated as its
+// own object rather than derived, because a derived one types as loosely as its loosest part.
+export const manualEntryForm = z.object({
+  action: z.enum(MANUAL_ACTION_NAMES as [AuditActionName, ...AuditActionName[]]),
+  target: accountId,
+  onBehalfOf: accountId,
+  occurredOn: londonDate,
+})
+
+export type ManualEntryForm = z.output<typeof manualEntryForm>
+
+// What a form holds while it is being filled in: the dates are still strings and the person may
+// not have been chosen yet.
+export type AwardFellowship = z.output<typeof awardFellowship>
+export type RecordMembership = z.output<typeof recordMembership>
diff --git a/shared/utils/audit-coverage.ts b/shared/utils/audit-coverage.ts
index 5191a67e..abb7916e 100644
--- a/shared/utils/audit-coverage.ts
+++ b/shared/utils/audit-coverage.ts
@@ -76,6 +76,14 @@ export const AUDIT_COVERAGE: Coverage[] = [
   { route: 'server/api/auth/register.post.ts', actions: ['account.registered'], via: ['server/utils/accounts.ts'] },
   { route: 'server/api/auth/sign-in.post.ts', actions: ['session.started', 'mfa.challenged'] },
   { route: 'server/api/auth/sign-out.post.ts', exempt: 'ending your own session changes no record' },
+
+  // Development only, and absent from a build: nuxt.config excludes both files (K-124).
+  {
+    route: 'server/api/dev/seed.post.ts',
+    actions: ['account.registered', 'account.erased.system'],
+    via: ['server/utils/dev.ts', 'server/utils/accounts.ts', 'server/utils/erasure.ts'],
+  },
+  { route: 'server/api/dev/sign-in-as.post.ts', exempt: 'a development sign-in with no password, in no build' },
   { route: 'server/api/auth/verify/index.post.ts', actions: ['account.verified'] },
   {
     route: 'server/api/auth/verify/resend.post.ts',
diff --git a/shared/utils/personas.ts b/shared/utils/personas.ts
new file mode 100644
index 00000000..5cc2528a
--- /dev/null
+++ b/shared/utils/personas.ts
@@ -0,0 +1,23 @@
+// The people a developer needs to be in order to see anything: one per kind of authority, plus the
+// three states that are easy to forget exist (K-124).
+
+export interface Persona {
+  email: string
+  name: string
+  role: string | null
+  describes: string
+  // A guest holds no password, and a tombstone is anonymised. Both are real states of an account.
+  shape: 'full' | 'guest' | 'tombstone'
+}
+
+export const PERSONA_PASSWORD = 'development-only-password'
+
+export const PERSONAS: Persona[] = [
+  { email: 'dev-admin@e2e.newtheatre.org.uk', name: 'Ada Admin (dev)', role: 'ADMIN', shape: 'full', describes: 'Everything, including the settings and the roll of Fellows.' },
+  { email: 'dev-manager@e2e.newtheatre.org.uk', name: 'Mo Manager (dev)', role: 'MANAGER', shape: 'full', describes: 'The trail, the register and the accounts, but not the roles.' },
+  { email: 'dev-theatre@e2e.newtheatre.org.uk', name: 'Tam Theatre (dev)', role: 'THEATRE_MANAGER', shape: 'full', describes: 'Reads the roll and the register; records neither.' },
+  { email: 'dev-boxoffice@e2e.newtheatre.org.uk', name: 'Bo Boxoffice (dev)', role: 'BOX_OFFICE', shape: 'full', describes: 'A role with no admin permissions yet, for checking a refusal.' },
+  { email: 'dev-member@e2e.newtheatre.org.uk', name: 'Mel Member (dev)', role: null, shape: 'full', describes: 'An ordinary account: no roles, nothing in the admin screens.' },
+  { email: 'dev-guest@e2e.newtheatre.org.uk', name: 'Gus Guest (dev)', role: null, shape: 'guest', describes: 'No password and no way in, the way guest checkout leaves one (A-116).' },
+  { email: 'dev-erased@e2e.newtheatre.org.uk', name: 'Term Tombstone (dev)', role: null, shape: 'tombstone', describes: 'Anonymised, so every screen has to keep working around it (0011).' },
+]
diff --git a/shared/utils/text.ts b/shared/utils/text.ts
new file mode 100644
index 00000000..860d4b60
--- /dev/null
+++ b/shared/utils/text.ts
@@ -0,0 +1,6 @@
+// UI copy that has to agree with a number. "1 account(s)" is what a screen says when nobody
+// bothered, so this is the one place that bothers.
+
+export function plural(count: number, one: string, many = `${one}s`): string {
+  return `${count} ${count === 1 ? one : many}`
+}
diff --git a/tests/e2e/audit.test.ts b/tests/e2e/audit.test.ts
index 7f863d8d..1cff6d42 100644
--- a/tests/e2e/audit.test.ts
+++ b/tests/e2e/audit.test.ts
@@ -322,7 +322,7 @@ describe.skipIf(skip !== null)('the audit screen (J-101 criterion 2, J-103)', ()
     const view = await signedInView()
     try {
       await visit(view, `${app.baseURL}/admin/audit`, '[data-test="audit-table"]')
-      await fill(view, 'input[data-test="audit-target"]', `user:${member.id}`)
+      await fill(view, 'input[data-test="toolbar-search"]', `user:${member.id}`)
       await waitFor(view, `document.querySelector('[data-test="audit-table"]').innerText.includes('booking.refunded')`)
 
       // Rendered under its own name rather than crashing the table it is one row of.
@@ -340,7 +340,7 @@ describe.skipIf(skip !== null)('the audit screen (J-101 criterion 2, J-103)', ()
     const view = await signedInView()
     try {
       await visit(view, `${app.baseURL}/admin/audit`, '[data-test="audit-table"]')
-      await fill(view, 'input[data-test="audit-target"]', `user:${member.id}`)
+      await fill(view, 'input[data-test="toolbar-search"]', `user:${member.id}`)
       await waitFor(view, `document.querySelector('[data-test="audit-table"]').innerText.includes('Role granted')`)
 
       expect(await textOf(view, '[data-test="audit-table"]')).toContain(officer.name)
diff --git a/tests/e2e/config-surface.test.ts b/tests/e2e/config-surface.test.ts
index 9f960a4a..46615551 100644
--- a/tests/e2e/config-surface.test.ts
+++ b/tests/e2e/config-surface.test.ts
@@ -128,7 +128,7 @@ describe.skipIf(skip !== null)('the settings surface (J-104)', () => {
       expect(JSON.parse(entry!.detail)).toMatchObject({ key: 'BAR_TAB_CAP_PENCE', changes: { value: { from: 2000, to: 2500 } } })
     }
     finally {
-      clearOverride('BAR_TAB_CAP_PENCE')
+      clearOverride('REFUND_UNPAID_CANCELLATION_FREE')
     }
   })
 
@@ -193,17 +193,29 @@ describe.skipIf(skip !== null)('the settings screen', () => {
       await fillPin(view, '[data-test="mfa-challenge"] input', await unusedCode())
       await waitFor(view, 'document.querySelector(\'[data-test="sign-out"]\')')
 
-      await visit(view, `${app.baseURL}/admin/config`, '[data-test="setting-BAR_TAB_CAP_PENCE"]')
+      await visit(view, `${app.baseURL}/admin/config`, '[data-test="config-search"]')
+
+      // Fifty keys, found by searching for what the key decides rather than its name (0032).
+      await fill(view, 'input[data-test="config-search"]', 'bar tab')
+      await waitFor(view, 'document.querySelector(\'[data-test="setting-BAR_TAB_CAP_PENCE"]\')')
       expect(await textOf(view)).toContain('Not enforced yet')
 
-      await fill(view, '[data-test="input-BAR_TAB_CAP_PENCE"]', '3000')
-      await click(view, '[data-test="save-BAR_TAB_CAP_PENCE"]')
+      // Money reads in pounds, which is what the officer types (0004). An input's value is not
+      // text on the page, so it is read rather than searched for.
+      const shown = await view.evaluate<string>(
+        `document.querySelector('input[data-test="input-BAR_TAB_CAP_PENCE"]')?.value ?? ''`)
+      // 2500 pence is what this suite set it to, and £25.00 is what that should read as.
+      expect(shown).toBe('£25.00')
+
+      await fill(view, 'input[data-test="config-search"]', 'cancel an unpaid booking')
+      await waitFor(view, 'document.querySelector(\'[data-test="toggle-REFUND_UNPAID_CANCELLATION_FREE"]\')')
+      await click(view, '[data-test="toggle-REFUND_UNPAID_CANCELLATION_FREE"]')
       await waitFor(view, 'document.body.innerText.includes("Changed by")')
 
-      expect((await settingFor('BAR_TAB_CAP_PENCE')).value).toBe(3000)
+      expect((await settingFor('REFUND_UNPAID_CANCELLATION_FREE')).value).toBe(false)
     }
     finally {
-      clearOverride('BAR_TAB_CAP_PENCE')
+      clearOverride('REFUND_UNPAID_CANCELLATION_FREE')
       view.close()
     }
   }, CASE_TIMEOUT_MS)
diff --git a/tests/e2e/directory.test.ts b/tests/e2e/directory.test.ts
index a77de4fb..de4e01bc 100644
--- a/tests/e2e/directory.test.ts
+++ b/tests/e2e/directory.test.ts
@@ -296,22 +296,24 @@ describe.skipIf(skip !== null)('the directory screen', () => {
       await fillPin(view, '[data-test="mfa-challenge"] input', await codeForStep(secret, stepFor(new Date())))
       await waitFor(view, 'document.querySelector(\'[data-test="sign-out"]\')')
 
-      await visit(view, `${app.baseURL}/admin/people`, '[data-test="directory-search"]')
+      await visit(view, `${app.baseURL}/admin/people`, '[data-test="toolbar-search"]')
       await waitFor(view, `document.body.innerText.includes(${JSON.stringify(known)})`)
 
       // Searching narrows to one, and the total below the table says so.
-      await fill(view, '[data-test="directory-search"]', known)
+      await fill(view, 'input[data-test="toolbar-search"]', known)
       await waitFor(view, 'document.querySelector(\'[data-test="directory-total"]\')?.innerText.startsWith("1 ")')
       expect(await textOf(view)).not.toContain(officer.email)
 
-      // A filter whose story is not built says which one rather than looking broken.
-      await fill(view, '[data-test="directory-search"]', '')
-      await view.evaluate(`(() => {
-        const select = document.querySelector('[data-test="directory-filter"]')
-        const setter = Object.getOwnPropertyDescriptor(select.constructor.prototype, 'value')?.set
-        if (setter) { setter.call(select, 'members-current'); select.dispatchEvent(new Event('change', { bubbles: true })) }
-      })()`)
-      await Bun.sleep(1500)
+      // Searching is shown back as a chip that can be taken off again (0032).
+      await waitFor(view, `document.querySelector('[data-test="toolbar-active"]')?.innerText.includes(${JSON.stringify(known)})`)
+      await click(view, '[data-test="toolbar-clear"]')
+      await waitFor(view, 'document.querySelector(\'[data-test="toolbar-active"]\') === null')
+
+      // The filters live behind one button, which is what keeps the row from resizing.
+      await click(view, '[data-test="toolbar-filters"]')
+      await waitFor(view, 'document.querySelector(\'[data-test="directory-filter"]\')')
+      await view.evaluate(`document.querySelector('[data-test="toolbar-filters"]').click()`)
+      await Bun.sleep(500)
 
       const invitee = registrableAddress('by-hand')
       await click(view, '[data-test="invite"]')
diff --git a/tests/e2e/fellowships.test.ts b/tests/e2e/fellowships.test.ts
index 189de24b..40968ada 100644
--- a/tests/e2e/fellowships.test.ts
+++ b/tests/e2e/fellowships.test.ts
@@ -3,7 +3,7 @@ import { Database } from 'bun:sqlite'
 import { codeForStep, stepFor } from '#shared/utils/totp'
 import { forgetSpentStep, markVerified, registerMember } from '#tests/helpers/accounts'
 import { generatePassword, registrableAddress, syntheticPerson } from '#tests/helpers/seed'
-import { click, fill, openSignedOutView, skipReason, startApp, textOf, visit, waitFor } from '#tests/helpers/webview'
+import { click, fill, fillDate, openSignedOutView, pickPerson, skipReason, startApp, textOf, visit, waitFor } from '#tests/helpers/webview'
 import type { AppUnderTest } from '#tests/helpers/webview'
 
 const skip = skipReason()
@@ -170,14 +170,18 @@ describe.skipIf(skip !== null)('the roll in a browser (A-127)', () => {
 
       await visit(view, `${app.baseURL}/admin/fellows`, '[data-test="fellows-table"]')
       await click(view, '[data-test="award"]')
-      await fill(view, 'input[data-test="award-user"]', alumna.id)
-      await fill(view, 'input[data-test="award-date"]', '2021-03-04')
+      // Searched by address, because syntheticPerson draws first names from a short list and two
+      // people sharing one would let the picker choose the wrong person.
+      await pickPerson(view, '[data-test="person-picker"]', alumna.email.split('@')[0]!, alumna.name)
+      await fillDate(view, '[data-test="award-date"]', '2021-03-04')
       await fill(view, 'input[data-test="award-by"]', 'Committee, 4 March 2021')
       await fill(view, '[data-test="award-citation"]', 'For twenty years of front of house.')
       await click(view, '[data-test="award-submit"]')
 
-      await waitFor(view, 'document.querySelector(\'[data-test="fellows-notice"]\')')
-      await waitFor(view, `document.querySelector('[data-test="fellows-table"]').innerText.includes('front of house')`)
+      // The outcome rather than the notification: a toast dismisses itself, and racing one proves
+      // nothing. Searched for by name, because the roll pages and this suite fills it.
+      await fill(view, 'input[data-test="toolbar-search"]', alumna.email.split('@')[0]!)
+      await waitFor(view, `document.querySelector('[data-test="fellows-table"]').innerText.includes('front of house')`, 20_000)
       expect(await textOf(view, '[data-test="fellows-table"]')).toContain(alumna.name)
     }
     finally {
diff --git a/tests/helpers/webview.ts b/tests/helpers/webview.ts
index f021618a..a8c1dc34 100644
--- a/tests/helpers/webview.ts
+++ b/tests/helpers/webview.ts
@@ -180,7 +180,6 @@ export async function startApp(): Promise<AppUnderTest> {
 // The shard's server dies with the shard. Without this it outlives the run holding the port, and
 // the next run talks to a database it did not create.
 function shutdown(): void {
-  Bun.write(Bun.stderr, `[e2e] shutdown hook fired, shared=${Boolean(shared)}\n`)
   if (!shared) return
   shared.controller.abort()
   // SIGKILL, not SIGTERM: an exit handler cannot wait for a graceful stop, and a dev server that
@@ -285,6 +284,12 @@ export async function fill(view: Bun.WebView, selector: string, value: string):
   })()`)
 }
 
+// A number input formats and commits on blur, so a value assigned without one is never read.
+export async function fillNumber(view: Bun.WebView, selector: string, value: string): Promise<void> {
+  await fill(view, selector, value)
+  await view.evaluate(`document.querySelector(${JSON.stringify(selector)}).blur()`)
+}
+
 // PinInput is one input per digit, so a six-digit code is six fills and not one.
 export async function fillPin(view: Bun.WebView, selector: string, code: string): Promise<void> {
   await waitFor(view, `document.querySelectorAll(${JSON.stringify(selector)}).length >= ${code.length}`)
@@ -293,6 +298,35 @@ export async function fillPin(view: Bun.WebView, selector: string, code: string)
   }
 }
 
+// A date field is contenteditable segments rather than an input, so it is typed into rather than
+// assigned to. British order, which is what the field is set to (0032).
+export async function fillDate(view: Bun.WebView, selector: string, day: string): Promise<void> {
+  const [year, month, date] = day.split('-')
+  await waitFor(view, `document.querySelectorAll(${JSON.stringify(`${selector} [data-reka-date-field-segment]`)}).length >= 3`)
+  await view.evaluate(`(() => {
+    const segments = [...document.querySelectorAll(${JSON.stringify(`${selector} [data-reka-date-field-segment]`)})]
+      .filter(segment => segment.getAttribute('data-reka-date-field-segment') !== 'literal')
+    const digits = ${JSON.stringify([date, month, year].join(''))}
+    let index = 0
+    for (const segment of segments) {
+      segment.focus()
+      const wanted = segment.getAttribute('data-reka-date-field-segment') === 'year' ? 4 : 2
+      for (let typed = 0; typed < wanted; typed++) {
+        const key = digits[index++]
+        segment.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }))
+      }
+    }
+  })()`)
+}
+
+// The picker searches the server, so this types, waits for the person to appear, and clicks them.
+export async function pickPerson(view: Bun.WebView, selector: string, term: string, name: string): Promise<void> {
+  await click(view, `${selector} input`)
+  await fill(view, `${selector} input`, term)
+  await waitFor(view, `[...document.querySelectorAll('[role="option"]')].some(option => option.innerText.includes(${JSON.stringify(name)}))`, 20_000)
+  await view.evaluate(`[...document.querySelectorAll('[role="option"]')].find(option => option.innerText.includes(${JSON.stringify(name)})).click()`)
+}
+
 export async function click(view: Bun.WebView, selector: string): Promise<void> {
   await waitFor(view, `document.querySelector(${JSON.stringify(selector)})`)
   await view.evaluate(`document.querySelector(${JSON.stringify(selector)}).click()`)
diff --git a/tests/unit/admin-conventions.test.ts b/tests/unit/admin-conventions.test.ts
new file mode 100644
index 00000000..db6c9f2a
--- /dev/null
+++ b/tests/unit/admin-conventions.test.ts
@@ -0,0 +1,111 @@
+import { describe, expect, test } from 'bun:test'
+import { join } from 'node:path'
+import { plural } from '#shared/utils/text'
+
+// The admin conventions are a test rather than a review habit (0032), the same way the design
+// language is (0021). What review still judges is whether a screen says the right thing.
+
+const ADMIN = 'app/pages/admin'
+
+async function screens(): Promise<{ path: string, source: string }[]> {
+  const found: { path: string, source: string }[] = []
+  for (const entry of new Bun.Glob('**/*.vue').scanSync({ cwd: ADMIN, onlyFiles: true })) {
+    const path = join(ADMIN, entry)
+    found.push({ path, source: await Bun.file(path).text() })
+  }
+  return found.sort((a, b) => a.path.localeCompare(b.path))
+}
+
+const offenders = async (test: (source: string) => boolean): Promise<string[]> =>
+  (await screens()).filter(screen => test(screen.source)).map(screen => screen.path)
+
+describe('an input is the component for its value (0032)', () => {
+  test('a date is UInputDate, never a native date input', async () => {
+    expect(await offenders(source => /type="date"/.test(source))).toEqual([])
+  })
+
+  test('a number is UInputNumber, never a native number input', async () => {
+    expect(await offenders(source => /type="number"|'number' \? 'number'/.test(source))).toEqual([])
+  })
+})
+
+describe('a person is chosen, never typed (0032)', () => {
+  // The tell is a field asking for an account: nothing on an admin screen should want an id typed
+  // into it, and the picker is what a screen uses instead.
+  test('no screen asks somebody to type an account id', async () => {
+    const asking = await offenders(source =>
+      /label="Account"|placeholder="user:|The account id/.test(source) && !source.includes('<PersonPicker'))
+    expect(asking).toEqual([])
+  })
+})
+
+describe('filters sit in a toolbar at a fixed width (0032)', () => {
+  test('no screen lays its filters out in a bare flex row', async () => {
+    expect(await offenders(source => /class="flex flex-wrap items-end gap-3"/.test(source))).toEqual([])
+  })
+
+  // One search of a fixed width and one button, with the filters behind it, is what stops a row
+  // resizing as its values change.
+  test('every list uses the shared toolbar', async () => {
+    const lists = (await screens()).filter(screen => screen.source.includes('<UTable'))
+    expect(lists.length).toBeGreaterThan(0)
+    expect(lists.filter(screen => !screen.source.includes('<AdminToolbar')).map(screen => screen.path)).toEqual([])
+  })
+})
+
+describe('feedback goes where it belongs (0032)', () => {
+  // A confirmation the reader does not have to act on is a toast, not something that sits on the
+  // page until it is dismissed.
+  test('every table says what would be there when it is empty', async () => {
+    const tables = (await screens()).filter(screen => screen.source.includes('<UTable'))
+    expect(tables.length).toBeGreaterThan(0)
+    expect(tables.filter(screen => !screen.source.includes('#empty')).map(screen => screen.path)).toEqual([])
+  })
+
+  test('nothing counts things as "account(s)"', async () => {
+    const lazy = (await screens()).filter(screen => screen.source.includes('(s)'))
+    expect(lazy.map(screen => screen.path)).toEqual([])
+  })
+
+  test('a screen that confirms an action uses a toast', async () => {
+    const confirming = (await screens()).filter(screen =>
+      /Recorded|Revoked\.|is on the (roll|trail)/.test(screen.source))
+    expect(confirming.length).toBeGreaterThan(0)
+    expect(confirming.filter(screen => !screen.source.includes('useToast')).map(screen => screen.path)).toEqual([])
+  })
+})
+
+// Money is entered in pounds and stored in pence, and the settings screen is the only place that
+// converts (0004, 0032).
+describe('money reads in pounds and is stored in pence', () => {
+  const pounds = (pence: number | undefined): number => (pence ?? 0) / 100
+  const pence = (amount: number | undefined): number => Math.round((amount ?? 0) * 100)
+
+  test('a cap in pence reads as pounds', () => {
+    expect(pounds(2000)).toBe(20)
+    expect(pounds(2550)).toBe(25.5)
+    expect(pounds(undefined)).toBe(0)
+  })
+
+  test('pounds typed in come back as whole pence', () => {
+    expect(pence(30)).toBe(3000)
+    expect(pence(25.5)).toBe(2550)
+    // A third of a pound is not a number of pence, so it rounds rather than storing a fraction.
+    expect(pence(0.005)).toBe(1)
+    expect(Number.isInteger(pence(19.999))).toBe(true)
+  })
+})
+
+// Every screen that counts something says the count in words a reader would use.
+describe('a count reads as English', () => {
+  test('one is singular and everything else is not', () => {
+    expect(plural(1, 'account')).toBe('1 account')
+    expect(plural(0, 'account')).toBe('0 accounts')
+    expect(plural(4, 'membership')).toBe('4 memberships')
+  })
+
+  test('an irregular plural is given rather than guessed', () => {
+    expect(plural(2, 'person', 'people')).toBe('2 people')
+    expect(plural(1, 'person', 'people')).toBe('1 person')
+  })
+})
diff --git a/tests/unit/dev-tools.test.ts b/tests/unit/dev-tools.test.ts
new file mode 100644
index 00000000..1d2851cc
--- /dev/null
+++ b/tests/unit/dev-tools.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'bun:test'
+import { PERSONAS, PERSONA_PASSWORD } from '#shared/utils/personas'
+
+// The developer tools sign in without a password, so the guarantee that matters is that they are
+// not in a build at all (K-124 criterion 3).
+
+describe('the developer tools do not ship', () => {
+  test('nuxt.config leaves them out of a production build', async () => {
+    const config = await Bun.file('nuxt.config.ts').text()
+    expect(config).toContain('ignore:')
+    for (const path of ['app/pages/dev.vue', 'server/api/dev/**', 'api/dev/**']) {
+      expect(config).toContain(path)
+    }
+  })
+
+  // Run after a build, this is the check that counts. Skipped when there is nothing built yet,
+  // because a unit suite must not depend on a build having happened.
+  test('a built output contains neither the route nor the personas', async () => {
+    const built = Bun.file('.output/server/index.mjs')
+    if (!await built.exists()) return
+
+    const chunks = [...new Bun.Glob('**/*.{mjs,js}').scanSync({ cwd: '.output', onlyFiles: true })]
+    const offenders: string[] = []
+    for (const chunk of chunks) {
+      const source = await Bun.file(`.output/${chunk}`).text()
+      if (source.includes('sign-in-as') || source.includes(PERSONA_PASSWORD)) offenders.push(chunk)
+    }
+    expect(offenders).toEqual([])
+  })
+})
+
+describe('the personas cover the states that are easy to forget', () => {
+  test('there is one for every shape an account can be in', () => {
+    expect(new Set(PERSONAS.map(persona => persona.shape))).toEqual(new Set(['full', 'guest', 'tombstone']))
+  })
+
+  test('every persona says what it is for, and none shares an address', () => {
+    for (const persona of PERSONAS) expect(persona.describes.length).toBeGreaterThan(20)
+    expect(new Set(PERSONAS.map(persona => persona.email)).size).toBe(PERSONAS.length)
+  })
+
+  // A password in the repository is only ever acceptable because this one cannot reach production.
+  test('the shared password is obviously a development one', () => {
+    expect(PERSONA_PASSWORD).toContain('development')
+  })
+})