From d31e79db734f8bc9d7e0341128b76ac5dc53a705 Mon Sep 17 00:00:00 2001
From: Matt Adcock <43476212+MattA-Official@users.noreply.github.com>
Date: Sun, 30 Aug 2026 16:51:15 +0100
Subject: [PATCH 1/5] Choose the component, once, for admin forms

Five admin screens were built one after another, each copying the last, and
the copying carried the mistakes forward. Thirteen screenshots of every screen
and modal at two widths, checked against the Nuxt UI component matrix, showed
the same thing everywhere: the components are not wrong so much as unchosen.
Where a specific one existed for the job, we reached for UInput.

A person was entered by pasting a thirty-two character identifier, in four
places: awarding a fellowship, recording a membership, and both halves of a
manual audit entry. No search, no name, no way to tell you had the right
person. PersonPicker replaces all four: an autocomplete searching name,
address and student number, debounced, showing the address or number under
each name. It reads the account directory, which already pages and allow-lists
its columns, and the directory search gains the student number because that is
how the committee finds somebody (0031).

Six date fields rendered as mm/dd/yyyy, in American order, in a British
theatre's admin. DateField is the one place that converts between the
YYYY-MM-DD strings the API speaks and the calendar value the input takes, and
the one place that says the dates here are London's.

No form validated on the client, so a refusal appeared as a red alert behind
the modal it concerned. The Zod objects the endpoints validate now live in
shared/ and drive the forms, so one definition cannot drift from the other and
a refusal lands on the field it is about.

Nothing used a toast, though UApp was already in place, so every confirmation
stayed on the page until dismissed. Confirmations are toasts now; an alert is
for something the reader has to act on.

The conventions are decision 0032 and a test that fails when a screen departs
from them, the way the design language is a test rather than a review habit
(0021). It ships with the three checks this change satisfies; the rest arrive
with the tables and the settings page. Stories K-123 and K-124 are the home
for the work.

Two things the browser suite found, both real. The picker cached results by
search term, which would have offered somebody since renamed or erased; it
never caches now. And the suite searched by first name, which syntheticPerson
draws from a list of thirty-five, so the picker could choose a different person
with the same one: it searches by address.
---
 app/components/DateField.vue                  |  34 +++++
 app/components/PersonPicker.vue               | 120 +++++++++++++++++
 app/composables/useDebounced.ts               |  21 +++
 app/pages/admin/audit.vue                     |  96 ++++++++------
 app/pages/admin/fellows.vue                   | 122 ++++++++++-------
 app/pages/admin/members.vue                   | 125 ++++++++++--------
 docs/backlog/K-platform.md                    |  47 +++++++
 ...ce-has-one-set-of-component-conventions.md |  65 +++++++++
 docs/decisions/README.md                      |   1 +
 server/api/admin/audit/index.post.ts          |  15 +--
 .../api/admin/fellowships/[id]/revoke.post.ts |   4 +-
 server/api/admin/fellowships/index.post.ts    |  11 +-
 server/api/admin/memberships/index.post.ts    |  13 +-
 server/utils/directory.ts                     |   6 +-
 shared/utils/admin-forms.ts                   |  53 ++++++++
 tests/e2e/fellowships.test.ts                 |  14 +-
 tests/helpers/webview.ts                      |  29 ++++
 tests/unit/admin-conventions.test.ts          |  46 +++++++
 18 files changed, 632 insertions(+), 190 deletions(-)
 create mode 100644 app/components/DateField.vue
 create mode 100644 app/components/PersonPicker.vue
 create mode 100644 app/composables/useDebounced.ts
 create mode 100644 docs/decisions/0032-the-admin-surface-has-one-set-of-component-conventions.md
 create mode 100644 shared/utils/admin-forms.ts
 create mode 100644 tests/unit/admin-conventions.test.ts

diff --git a/app/components/DateField.vue b/app/components/DateField.vue
new file mode 100644
index 00000000..4ee9e71e
--- /dev/null
+++ b/app/components/DateField.vue
@@ -0,0 +1,34 @@
+<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 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
+    v-model="value"
+    locale="en-GB"
+    :disabled="disabled"
+    icon="i-lucide-calendar"
+  />
+</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/pages/admin/audit.vue b/app/pages/admin/audit.vue
index 7d684597..91ca7f8e 100644
--- a/app/pages/admin/audit.vue
+++ b/app/pages/admin/audit.vue
@@ -2,8 +2,10 @@
 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 { FormSubmitEvent, TableColumn } from '@nuxt/ui'
 
 definePageMeta({ layout: 'admin', title: 'Audit trail', middleware: 'signed-in' })
 
@@ -39,9 +41,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 +77,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
   }
 }
 
@@ -178,16 +188,6 @@ 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"
-    />
-
     <div class="flex flex-wrap items-end gap-3">
       <UFormField
         label="Module"
@@ -227,18 +227,16 @@ onMounted(load)
       </UFormField>
 
       <UFormField label="From">
-        <UInput
+        <DateField
           v-model="since"
           data-test="audit-from"
-          type="date"
         />
       </UFormField>
 
       <UFormField label="To">
-        <UInput
+        <DateField
           v-model="until"
           data-test="audit-to"
-          type="date"
         />
       </UFormField>
 
@@ -289,47 +287,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 +346,7 @@ onMounted(load)
           >
             Sign and record it
           </UButton>
-        </form>
+        </UForm>
       </template>
     </UModal>
   </div>
diff --git a/app/pages/admin/fellows.vue b/app/pages/admin/fellows.vue
index 493808b0..e71a2e33 100644
--- a/app/pages/admin/fellows.vue
+++ b/app/pages/admin/fellows.vue
@@ -1,6 +1,8 @@
 <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 { FormSubmitEvent, TableColumn } from '@nuxt/ui'
+import type { AwardFellowship } from '#shared/utils/admin-forms'
 
 definePageMeta({ layout: 'admin', title: 'Fellows', middleware: 'signed-in' })
 
@@ -39,11 +41,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 +66,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')
   }
 }
 
@@ -152,16 +172,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"
@@ -232,48 +242,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 +305,7 @@ onMounted(load)
           >
             Record it
           </UButton>
-        </form>
+        </UForm>
       </template>
     </UModal>
 
@@ -293,19 +316,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 +345,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..34f5c0a9 100644
--- a/app/pages/admin/members.vue
+++ b/app/pages/admin/members.vue
@@ -1,8 +1,9 @@
 <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 { FormSubmitEvent, TableColumn } from '@nuxt/ui'
 
 definePageMeta({ layout: 'admin', title: 'Members', middleware: 'signed-in' })
 
@@ -43,10 +44,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 +66,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 +95,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) {
@@ -172,16 +175,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"
@@ -262,52 +255,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 +329,7 @@ onMounted(load)
           >
             Record it
           </UButton>
-        </form>
+        </UForm>
       </template>
     </UModal>
   </div>
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/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/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/tests/e2e/fellowships.test.ts b/tests/e2e/fellowships.test.ts
index 189de24b..2cbe971a 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="fellows-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..6315f6be 100644
--- a/tests/helpers/webview.ts
+++ b/tests/helpers/webview.ts
@@ -293,6 +293,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..9f2e732e
--- /dev/null
+++ b/tests/unit/admin-conventions.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'bun:test'
+import { join } from 'node:path'
+
+// 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([])
+  })
+})
+
+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('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('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([])
+  })
+})

From 57e385b120670b5bd883e1ab851c296bbbde6096 Mon Sep 17 00:00:00 2001
From: Matt Adcock <43476212+MattA-Official@users.noreply.github.com>
Date: Sun, 30 Aug 2026 17:27:03 +0100
Subject: [PATCH 2/5] Put the filters behind one button, and names where ids
 were
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The audit toolbar wrapped onto a second line at 1400 pixels, the people
filter grew and shrank as its value changed, and every search box truncated
its own placeholder. All three are the same cause: a bare flex row whose
children carry min-w and flex-1, so the row is only ever as stable as its
contents.

AdminToolbar is the shape lumina already uses: a search of fixed width, every
filter behind one button labelled with how many are set, and the actions to
the right. The row cannot resize because nothing in it is sized by its value.
What is filtered is shown underneath as chips that come off one at a time,
which is also the only way somebody discovers a filter they forgot was on.
People, members, fellows and the audit trail all use it.

The audit table printed user: and a thirty-two character id where a name
belongs. It joins the subject the way it already joined the actor, so an
entry reads "Role granted, Priya Nair"; an entry about something that is not
a person still shows what it says. Its detail column was raw JSON clipped
mid-value off the right edge, and now reads as what changed: a diff shows
"value: 2000 → 2500", and anything else shows its own keys.

Every table has an empty state, because until now one with nothing in it
showed nothing at all.

The date field gained the calendar popover from the Nuxt UI example, so a date
can be picked as well as typed.

Two more conventions join the test: every list uses the toolbar, and every
table says what would be there. That is five of the six; the number input
arrives with the settings page.

One slip fixed: a debug line I added while diagnosing the harness was left in
and shipped in the previous commit.
---
 app/components/AdminToolbar.vue      |  96 ++++++++++++
 app/components/DateField.vue         |  27 +++-
 app/pages/admin/audit.vue            | 216 ++++++++++++++++++---------
 app/pages/admin/fellows.vue          | 102 ++++++++-----
 app/pages/admin/members.vue          | 127 ++++++++++------
 app/pages/admin/people/index.vue     | 136 +++++++++++------
 server/api/admin/audit/index.get.ts  |   9 +-
 tests/e2e/audit.test.ts              |   4 +-
 tests/e2e/directory.test.ts          |  22 +--
 tests/e2e/fellowships.test.ts        |   2 +-
 tests/helpers/webview.ts             |   1 -
 tests/unit/admin-conventions.test.ts |  20 +++
 12 files changed, 543 insertions(+), 219 deletions(-)
 create mode 100644 app/components/AdminToolbar.vue

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/DateField.vue b/app/components/DateField.vue
index 4ee9e71e..22700c08 100644
--- a/app/components/DateField.vue
+++ b/app/components/DateField.vue
@@ -8,6 +8,8 @@ const model = defineModel<string | undefined>()
 
 defineProps<{ disabled?: boolean }>()
 
+const field = useTemplateRef('field')
+
 const value = computed({
   get(): CalendarDate | null {
     if (!model.value) return null
@@ -26,9 +28,30 @@ const value = computed({
 
 <template>
   <UInputDate
+    ref="field"
     v-model="value"
     locale="en-GB"
     :disabled="disabled"
-    icon="i-lucide-calendar"
-  />
+  >
+    <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/pages/admin/audit.vue b/app/pages/admin/audit.vue
index 91ca7f8e..0363d5fb 100644
--- a/app/pages/admin/audit.vue
+++ b/app/pages/admin/audit.vue
@@ -5,6 +5,7 @@ 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 { ActiveFilter } from '~/components/AdminToolbar.vue'
 import type { FormSubmitEvent, TableColumn } from '@nuxt/ui'
 
 definePageMeta({ layout: 'admin', title: 'Audit trail', middleware: 'signed-in' })
@@ -17,6 +18,7 @@ interface Entry {
   actorName: string | null
   action: AuditActionName
   target: string | null
+  targetName: string | null
   detail: Record<string, unknown> | null
   createdAt: number
 }
@@ -136,12 +138,62 @@ 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}: ${JSON.stringify(change.from)} → ${JSON.stringify(change.to)}`)
+  }
+  for (const [key, value] of Object.entries(detail)) {
+    if (key === 'changes') continue
+    parts.push(`${key}: ${typeof value === 'string' ? value : JSON.stringify(value)}`)
+  }
+  return parts
+}
+
 const columns: TableColumn<Entry>[] = [
   {
     id: 'createdAt',
@@ -168,11 +220,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))),
   },
 ]
 
@@ -188,83 +248,91 @@ onMounted(load)
       :description="failure"
     />
 
-    <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">
-        <DateField
-          v-model="since"
-          data-test="audit-from"
-        />
-      </UFormField>
-
-      <UFormField label="To">
-        <DateField
-          v-model="until"
-          data-test="audit-to"
-        />
-      </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>
+    <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>
+
+        <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
diff --git a/app/pages/admin/fellows.vue b/app/pages/admin/fellows.vue
index e71a2e33..60a4e1e3 100644
--- a/app/pages/admin/fellows.vue
+++ b/app/pages/admin/fellows.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
 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'
 
@@ -29,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)
@@ -119,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' } } },
   {
@@ -180,46 +206,50 @@ 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
diff --git a/app/pages/admin/members.vue b/app/pages/admin/members.vue
index 34f5c0a9..68b3d4f9 100644
--- a/app/pages/admin/members.vue
+++ b/app/pages/admin/members.vue
@@ -3,6 +3,7 @@ import { h, resolveComponent } from 'vue'
 import { recordMembership } from '#shared/utils/admin-forms'
 import { MEMBERSHIP_TERMS, isInGrace, londonDay } from '#shared/utils/membership'
 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' })
@@ -32,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)
@@ -103,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)
@@ -183,56 +210,64 @@ 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
diff --git a/app/pages/admin/people/index.vue b/app/pages/admin/people/index.vue
index 29c01e71..249e3d5a 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'
 
@@ -190,53 +232,49 @@ onMounted(load)
       />
     </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,7 +299,13 @@ 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
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/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/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 2cbe971a..40968ada 100644
--- a/tests/e2e/fellowships.test.ts
+++ b/tests/e2e/fellowships.test.ts
@@ -180,7 +180,7 @@ describe.skipIf(skip !== null)('the roll in a browser (A-127)', () => {
 
       // 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="fellows-search"]', alumna.email.split('@')[0]!)
+      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)
     }
diff --git a/tests/helpers/webview.ts b/tests/helpers/webview.ts
index 6315f6be..2ba4c14b 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
diff --git a/tests/unit/admin-conventions.test.ts b/tests/unit/admin-conventions.test.ts
index 9f2e732e..c3e9d170 100644
--- a/tests/unit/admin-conventions.test.ts
+++ b/tests/unit/admin-conventions.test.ts
@@ -34,9 +34,29 @@ describe('a person is chosen, never typed (0032)', () => {
   })
 })
 
+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('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))

From e7f3dd818a5c67b25777d43846800eec108ee49b Mon Sep 17 00:00:00 2001
From: Matt Adcock <43476212+MattA-Official@users.noreply.github.com>
Date: Sun, 30 Aug 2026 18:21:22 +0100
Subject: [PATCH 3/5] Make fifty settings findable, and say counts in English

The settings screen was fifty full-width text boxes, a number in each and no way to find
one. Every key now gets the input for what it holds: a switch for a flag, a stepper for a
number, a currency input for anything in pence (entered in pounds, stored as pence, 0004),
a tags input for a list. A search box sits over the lot, and the workshop groups became
tabs carrying their counts, so one group is on screen at a time.

Counting things as "4 membership(s)" was in six places. `plural()` is the one place that
bothers now, and a test fails on any screen that goes back to the brackets.

Two smaller things the screenshots caught: the audit trail printed `expiresAt: 1817074799`
where a date belongs, and the sidebar footer wrapped the account name and Sign out onto
four lines at 210px.
---
 app/components/AuthStatus.vue        |  13 +-
 app/layouts/admin.vue                |   7 +-
 app/pages/admin/audit.vue            |  13 +-
 app/pages/admin/config.vue           | 290 +++++++++++++++++++--------
 app/pages/admin/fellows.vue          |   2 +-
 app/pages/admin/members.vue          |   2 +-
 app/pages/admin/people/[id].vue      |   4 +-
 app/pages/admin/people/index.vue     |   6 +-
 shared/utils/text.ts                 |   6 +
 tests/e2e/config-surface.test.ts     |  24 ++-
 tests/unit/admin-conventions.test.ts |  46 +++++
 11 files changed, 310 insertions(+), 103 deletions(-)
 create mode 100644 shared/utils/text.ts

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/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 0363d5fb..0d1e3391 100644
--- a/app/pages/admin/audit.vue
+++ b/app/pages/admin/audit.vue
@@ -185,15 +185,24 @@ function describeDetail(detail: Record<string, unknown> | null): string[] {
   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}: ${JSON.stringify(change.from)} → ${JSON.stringify(change.to)}`)
+    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}: ${typeof value === 'string' ? value : JSON.stringify(value)}`)
+    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',
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 60a4e1e3..0f675986 100644
--- a/app/pages/admin/fellows.vue
+++ b/app/pages/admin/fellows.vue
@@ -256,7 +256,7 @@ onMounted(load)
         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"
diff --git a/app/pages/admin/members.vue b/app/pages/admin/members.vue
index 68b3d4f9..b2cf44ef 100644
--- a/app/pages/admin/members.vue
+++ b/app/pages/admin/members.vue
@@ -274,7 +274,7 @@ onMounted(load)
         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"
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 249e3d5a..022a6ad4 100644
--- a/app/pages/admin/people/index.vue
+++ b/app/pages/admin/people/index.vue
@@ -216,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') }]"
       />
@@ -226,7 +226,7 @@ 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') }]"
       />
@@ -312,7 +312,7 @@ onMounted(load)
         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/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/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/unit/admin-conventions.test.ts b/tests/unit/admin-conventions.test.ts
index c3e9d170..f284950b 100644
--- a/tests/unit/admin-conventions.test.ts
+++ b/tests/unit/admin-conventions.test.ts
@@ -1,5 +1,6 @@
 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.
@@ -22,6 +23,10 @@ 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)', () => {
@@ -57,6 +62,11 @@ describe('feedback goes where it belongs (0032)', () => {
     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))
@@ -64,3 +74,39 @@ describe('feedback goes where it belongs (0032)', () => {
     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')
+  })
+})

From ea51c87ec10d3a4d339f13b3c6807ec115950c7d Mon Sep 17 00:00:00 2001
From: Matt Adcock <43476212+MattA-Official@users.noreply.github.com>
Date: Sun, 30 Aug 2026 18:21:22 +0100
Subject: [PATCH 4/5] Add the developer tools, and keep them out of every build

Working on an admin screen locally started with registering an account, fetching a token
out of .data/mail, enrolling an authenticator and running grant-admin.ts. `/dev` replaces
that: a persona per role plus a plain member, a guest and a tombstone, one click to be any
of them, the local mailbox, and the permissions the current session actually resolves to.

This signs in without a password, so the guarantee that matters is that it is not in a
build at all. A guard inside a file still ships the file, so nuxt.config leaves the page
and its routes out of the bundle instead. The test that proves it earned its place
immediately: Nuxt's own `ignore` covers the app but Nitro scans server/ separately, so the
first build shipped the dev API. Both are excluded now and the built output is checked.

The tombstone persona could not be found after seeding, because anonymisation rewrites the
address it was seeded under, so every run made another one. The seeder now remembers which
account each persona became in .data/personas.json, next to the database it belongs to.

`bun run shots` is the harness used to review all of this, checked in: it seeds realistic
data, signs in, and writes a picture of every admin screen and modal at two widths into a
gitignored directory. It gates nothing and CI never runs it.
---
 .gitignore                        |   5 +-
 README.md                         |  12 ++
 app/pages/dev.vue                 | 255 ++++++++++++++++++++++++++++++
 docs/architecture.md              |   5 +-
 nuxt.config.ts                    |  10 ++
 package.json                      |   3 +-
 scripts/shots.ts                  | 171 ++++++++++++++++++++
 server/api/dev/index.get.ts       |  35 ++++
 server/api/dev/seed.post.ts       |   4 +
 server/api/dev/sign-in-as.post.ts |  19 +++
 server/utils/dev.ts               |  94 +++++++++++
 shared/utils/audit-coverage.ts    |   8 +
 shared/utils/personas.ts          |  23 +++
 tests/helpers/webview.ts          |   6 +
 tests/unit/dev-tools.test.ts      |  46 ++++++
 15 files changed, 693 insertions(+), 3 deletions(-)
 create mode 100644 app/pages/dev.vue
 create mode 100644 scripts/shots.ts
 create mode 100644 server/api/dev/index.get.ts
 create mode 100644 server/api/dev/seed.post.ts
 create mode 100644 server/api/dev/sign-in-as.post.ts
 create mode 100644 server/utils/dev.ts
 create mode 100644 shared/utils/personas.ts
 create mode 100644 tests/unit/dev-tools.test.ts

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/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/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/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..472442f2
--- /dev/null
+++ b/server/utils/dev.ts
@@ -0,0 +1,94 @@
+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.
+
+const MAILBOX = '.data/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 = '.data/personas.json'
+
+async function remembered(): Promise<Record<string, string>> {
+  try {
+    return await Bun.file(MAP).json() 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)
+  }
+
+  await Bun.write(MAP, JSON.stringify(map, null, 2))
+  return { made, held }
+}
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/tests/helpers/webview.ts b/tests/helpers/webview.ts
index 2ba4c14b..a8c1dc34 100644
--- a/tests/helpers/webview.ts
+++ b/tests/helpers/webview.ts
@@ -284,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}`)
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')
+  })
+})

From f8516b658dd35c9d2e5121431ac9af52a99311f5 Mon Sep 17 00:00:00 2001
From: Matt Adcock <43476212+MattA-Official@users.noreply.github.com>
Date: Sun, 30 Aug 2026 18:27:50 +0100
Subject: [PATCH 5/5] Write the persona map with node, not with Bun

The server runs under node, so Bun.write threw where it was called and the map was never
written: every persona read back as "not seeded" even though seeding had made them. The
mailbox reader in the same file already used node:fs, which is the pattern to follow.

The map now sits in the hub directory beside the database it describes, so a run against a
throwaway one does not read a map written for the developer's own.
---
 server/utils/dev.ts                  | 14 ++++++++++----
 tests/unit/admin-conventions.test.ts |  1 -
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/server/utils/dev.ts b/server/utils/dev.ts
index 472442f2..f3c74350 100644
--- a/server/utils/dev.ts
+++ b/server/utils/dev.ts
@@ -4,7 +4,10 @@ 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.
 
-const MAILBOX = '.data/mail'
+// 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 }
 
@@ -26,11 +29,12 @@ export async function mailbox(): Promise<Letter[]> {
 
 // 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 = '.data/personas.json'
+const MAP = `${DEV_DIR}/personas.json`
 
 async function remembered(): Promise<Record<string, string>> {
+  const { readFile } = await import('node:fs/promises')
   try {
-    return await Bun.file(MAP).json() as Record<string, string>
+    return JSON.parse(await readFile(MAP, 'utf8')) as Record<string, string>
   }
   catch {
     return {}
@@ -89,6 +93,8 @@ export async function seedPersonas(): Promise<{ made: number, held: number }> {
     if (persona.shape === 'tombstone') await eraseAccount(id, null)
   }
 
-  await Bun.write(MAP, JSON.stringify(map, null, 2))
+  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/tests/unit/admin-conventions.test.ts b/tests/unit/admin-conventions.test.ts
index f284950b..db6c9f2a 100644
--- a/tests/unit/admin-conventions.test.ts
+++ b/tests/unit/admin-conventions.test.ts
@@ -96,7 +96,6 @@ describe('money reads in pounds and is stored in pence', () => {
   })
 })
 
-
 // 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', () => {