From 0ecbeca01c028b3562f16a3501ac10c61a742ba8 Mon Sep 17 00:00:00 2001
From: TheMeinerLP <github@themeinerlp.dev>
Date: Sun, 23 Aug 2026 16:06:48 +0200
Subject: [PATCH] feat(console): give one recording the room to be several
 things
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The recording page was one long scroll: a metadata card, a tag editor, a
transport, an administrator's panel, and then one player and one
spectrogram per speaker. Every part of it was worth having and no two of
them answered the same question, which is the shape a tab bar is for.

Four tabs. `meeting` is the transport, the protocol link, what was
written about the meeting and who was in the room; `tracks` is one player
and one spectrogram per speaker with the file's own measurements beside
the audio they describe; `transcript` is the words from the new endpoint;
`details` is the title, the description, the reader's tags and — for an
administrator — the re-queue panel.

There is no metadata tab. The session's own facts sit above the bar,
because every tab is about that meeting and somebody reading the
transcript should not have to leave it to find out when the meeting was.
The audio measurements went the other way, into the row of the track they
describe: a sample rate is the answer to "why does this one sound wrong",
and that is asked while listening to that track.

`meeting` is first, so a bare address opens it and `uiTabs` keeps the
plain URL plain. The transcript is one query parameter away, which is the
point of a tab having an address.

Editing a title and a description is one control for two fields, because
`PUT /sessions/{id}/name` replaces: a form with a Save beside the title
would delete the description whenever somebody fixed a typo in the name.
`~/utils/sessionNaming` is arranged so no half body can be built.

Three empty states are told apart rather than collapsed: audio erased by
retention with the transcript surviving it, a transcript still decoding,
and a meeting in which nobody said anything the engine could hear. A
session nobody consented to reports no available audio too, and says so
in its own words rather than claiming a deletion that never happened.
---
 console/app/components/RecordingName.vue      | 216 ++++++++
 console/app/components/RecordingTrackList.vue | 156 ++++++
 .../app/components/RecordingTranscript.vue    | 141 +++++
 console/app/pages/recordings/[id].vue         | 512 +++++++++++-------
 console/app/utils/recordingTabs.ts            | 121 +++++
 console/app/utils/recordings.ts               | 121 +++++
 console/app/utils/sessionNaming.ts            | 172 ++++++
 console/app/utils/transcript.ts               | 228 ++++++++
 console/i18n/locales/de.json                  |  57 +-
 console/i18n/locales/en.json                  |  57 +-
 console/test/recordingName.spec.ts            | 227 ++++++++
 console/test/recordingRow.spec.ts             |   5 +
 console/test/recordingTabs.spec.ts            | 135 +++++
 console/test/recordingTrackList.spec.ts       | 148 +++++
 console/test/recordingTranscript.spec.ts      | 176 ++++++
 console/test/recordings.spec.ts               | 123 +++++
 console/test/sessionNaming.spec.ts            | 215 ++++++++
 console/test/transcript.spec.ts               | 229 ++++++++
 18 files changed, 2849 insertions(+), 190 deletions(-)
 create mode 100644 console/app/components/RecordingName.vue
 create mode 100644 console/app/components/RecordingTrackList.vue
 create mode 100644 console/app/components/RecordingTranscript.vue
 create mode 100644 console/app/utils/recordingTabs.ts
 create mode 100644 console/app/utils/sessionNaming.ts
 create mode 100644 console/app/utils/transcript.ts
 create mode 100644 console/test/recordingName.spec.ts
 create mode 100644 console/test/recordingTabs.spec.ts
 create mode 100644 console/test/recordingTrackList.spec.ts
 create mode 100644 console/test/recordingTranscript.spec.ts
 create mode 100644 console/test/sessionNaming.spec.ts
 create mode 100644 console/test/transcript.spec.ts

diff --git a/console/app/components/RecordingName.vue b/console/app/components/RecordingName.vue
new file mode 100644
index 0000000..a3cf762
--- /dev/null
+++ b/console/app/components/RecordingName.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+/**
+ * What this meeting is called, and what was written about it.
+ *
+ * **Everybody who was in it sees this.** That is the difference between
+ * this and the tag editor below it, and it is the reason the two are not
+ * one component with a longer form: a tag is a private remark about a
+ * conversation other people were also in, and a title is the meeting's
+ * name. Anybody who was in the room may correct it, there is no history,
+ * and the form says so — somebody about to empty a field is about to empty
+ * it for four colleagues, and finding that out afterwards is not a
+ * reasonable way to learn it.
+ *
+ * **One button for two fields, because the endpoint replaces.** `PUT` on
+ * `/sessions/{id}/name` stores the pair it is given, and a member left out
+ * of the body is a member cleared. An interface with a Save beside the
+ * title would therefore be an interface that deletes the description
+ * whenever somebody fixes a typo in the name — silently, and with no way
+ * back. So there is one control, it submits the whole draft, and
+ * `~/utils/sessionNaming` is arranged so that no other body can be built.
+ *
+ * The shape of the interaction is `RecordingTags`', deliberately: a
+ * disabled-not-removed button, a live region that is in the DOM before it
+ * has anything to say, and the server's answer replacing the local text.
+ * What is not borrowed is the optimism. A tag appears before its round
+ * trip because the alternative is a chip that lags a keystroke; a title is
+ * already on screen in the box somebody typed it into, so there is nothing
+ * to show early and an optimistic heading would only be a heading that
+ * flickers back on a refusal.
+ */
+import { ApiError } from '~/utils/apiError'
+import type { Message } from '~/utils/message'
+import {
+  NAME_MAX_DESCRIPTION_CHARS,
+  NAME_MAX_TITLE_CHARS,
+  nameBodyFrom,
+  nameDraftFrom,
+  nameIsDirty,
+  nameRefusal,
+  nameWriteFailed,
+  sessionNamePath,
+  type SessionName,
+} from '~/utils/sessionNaming'
+
+const props = defineProps<{
+  sessionId: string
+  /** The pair the session endpoint returned. */
+  name: SessionName
+}>()
+
+const emit = defineEmits<{ saved: [SessionName] }>()
+
+const api = useApi()
+const say = useSay()
+
+/** What is stored, as far as this component knows. Replaced by whatever a
+ *  write answers with, never by what was typed: normalisation may have
+ *  changed the text, and a form showing its own input back would keep
+ *  displaying a title the database does not have. */
+const stored = ref<SessionName>({ title: props.name.title, description: props.name.description })
+const draft = ref(nameDraftFrom(props.name))
+
+// The session can be refetched under this component -- a navigation to
+// another recording reuses it -- and without this the boxes would hold the
+// previous meeting's name. Guarded on the draft being clean, because
+// overwriting half-typed prose with a payload that arrived for unrelated
+// reasons is the one thing worse than showing a stale title.
+watch(
+  () => props.name,
+  (fresh) => {
+    if (nameIsDirty(stored.value, draft.value)) return
+    stored.value = { title: fresh.title, description: fresh.description }
+    draft.value = nameDraftFrom(fresh)
+  },
+)
+
+const saving = ref(false)
+/** What the live region says next. A key and its values, decided in
+ *  `~/utils/sessionNaming` and worded in the locale files. */
+const message = ref<Message | null>(null)
+
+const dirty = computed(() => nameIsDirty(stored.value, draft.value))
+
+// Generated rather than fixed: two of these on one page would share an id,
+// and a `<label for>` pointing at two elements points at whichever the
+// browser finds first.
+const titleId = useId()
+const descriptionId = useId()
+const noteId = `${titleId}-note`
+
+async function save() {
+  if (saving.value) return
+  const refusal = nameRefusal(draft.value)
+  if (refusal !== null) {
+    message.value = refusal
+    return
+  }
+  saving.value = true
+  message.value = null
+  try {
+    // The whole draft, both members. See the module: there is no shape
+    // here that can carry one of them.
+    const answer = await api<SessionName>(sessionNamePath(props.sessionId), {
+      method: 'PUT',
+      body: nameBodyFrom(draft.value),
+    })
+    stored.value = { title: answer.title, description: answer.description }
+    draft.value = nameDraftFrom(answer)
+    message.value = { key: 'recordings.nameSaved' }
+    // So the heading above the tabs stops disagreeing with the box that
+    // was just saved. The page owns what it renders; this says what the
+    // server stored and lets it decide.
+    emit('saved', { title: answer.title, description: answer.description })
+  } catch (cause) {
+    message.value = nameWriteFailed(cause instanceof ApiError ? cause.status : 0)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <section
+    class="rounded-2xl border p-5"
+    :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
+  >
+    <h2 class="text-base font-semibold">{{ $t('recordings.nameHeading') }}</h2>
+    <p class="mt-1 max-w-2xl text-sm" :style="{ color: 'var(--text-muted)' }">
+      {{ $t('recordings.nameNote') }}
+    </p>
+
+    <form class="mt-4 flex flex-col gap-4" @submit.prevent="save()">
+      <div>
+        <label class="text-sm font-medium" :for="titleId">
+          {{ $t('recordings.nameTitleLabel') }}
+        </label>
+        <input
+          :id="titleId"
+          v-model="draft.title"
+          type="text"
+          :maxlength="NAME_MAX_TITLE_CHARS"
+          :disabled="saving"
+          :aria-describedby="noteId"
+          :placeholder="$t('recordings.nameTitlePlaceholder')"
+          class="mt-1 w-full rounded-lg border px-3 py-1.5 text-sm"
+          :style="{
+            borderColor: 'var(--control-border)',
+            background: 'var(--surface-raised)',
+            color: 'var(--text)',
+          }"
+        >
+      </div>
+
+      <div>
+        <label class="text-sm font-medium" :for="descriptionId">
+          {{ $t('recordings.nameDescriptionLabel') }}
+        </label>
+        <!-- A textarea rather than a second input: a description keeps its
+             own line breaks, which is what makes an agenda an agenda. The
+             API keeps them too and collapses only the title. -->
+        <textarea
+          :id="descriptionId"
+          v-model="draft.description"
+          rows="6"
+          :maxlength="NAME_MAX_DESCRIPTION_CHARS"
+          :disabled="saving"
+          :aria-describedby="noteId"
+          :placeholder="$t('recordings.nameDescriptionPlaceholder')"
+          class="mt-1 w-full rounded-lg border px-3 py-2 text-sm"
+          :style="{
+            borderColor: 'var(--control-border)',
+            background: 'var(--surface-raised)',
+            color: 'var(--text)',
+          }"
+        />
+      </div>
+
+      <!-- Said before the button rather than after the mistake. Both
+           halves are surprises: the write replaces, and the result is not
+           private. -->
+      <p :id="noteId" class="text-xs" :style="{ color: 'var(--text-muted)' }">
+        {{ $t('recordings.nameReplaceNote') }}
+      </p>
+
+      <div class="flex flex-wrap items-center gap-3">
+        <!-- Disabled while it works rather than replaced: a control that
+             unmounts itself when pressed drops the keyboard to the top of
+             the document. Disabled while nothing has changed, too, so that
+             an available Save means there is something to save. -->
+        <button
+          type="submit"
+          class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors hover:bg-[var(--surface-raised)] disabled:opacity-60"
+          :style="{ color: 'var(--action)' }"
+          :disabled="saving || !dirty"
+        >
+          {{ saving ? $t('recordings.nameSaving') : $t('recordings.nameSave') }}
+        </button>
+        <span v-if="dirty && !saving" class="text-xs" :style="{ color: 'var(--text-muted)' }">
+          {{ $t('recordings.nameUnsaved') }}
+        </span>
+      </div>
+    </form>
+
+    <!-- Always in the DOM, so that a screen reader is watching it before it
+         has anything to say. A live region added at the moment of the
+         announcement announces nothing. -->
+    <p
+      class="mt-2 min-h-5 text-xs"
+      :style="{ color: 'var(--text-muted)' }"
+      role="status"
+      aria-live="polite"
+    >
+      {{ message ? say(message) : '' }}
+    </p>
+  </section>
+</template>
diff --git a/console/app/components/RecordingTrackList.vue b/console/app/components/RecordingTrackList.vue
new file mode 100644
index 0000000..d3f9d90
--- /dev/null
+++ b/console/app/components/RecordingTrackList.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+/**
+ * One speaker at a time: their audio, their spectrogram, and what their
+ * file is.
+ *
+ * **Why this is not the transport on the meeting tab.** That one plays the
+ * conversation — every speaker on one clock, which is the only way a
+ * discussion makes sense. This answers a different question: *what did
+ * this one person say*, which the shared transport cannot reach without
+ * muting everybody else first. Two questions, two tabs.
+ *
+ * **The file's own measurements live here rather than in a metadata
+ * table.** A sample rate, a channel count and a stored size are only ever
+ * asked about one way — "why does this track sound wrong" — and that is
+ * asked while listening to that track. Set beside the audio they describe
+ * they are an answer; collected into a table on a tab of their own they
+ * are a row of numbers with nothing to compare against.
+ *
+ * **A measurement that was never taken is an em dash, never a zero.** All
+ * three are null for every track written before migration 0013.
+ * `trackFileFacts` keeps the three slots and puts the absence in the one
+ * that is missing, so a gap reads as a gap rather than as `0 kB`.
+ *
+ * The speech measurements — how much audio, how much of it was speech, how
+ * many segments — are deliberately *not* here. They are on the meeting
+ * tab, beside the transport, because "who talked how much" is a fact about
+ * the conversation. This tab measures the files.
+ */
+import {
+  audioUrl,
+  trackFileFacts,
+  trackLabel,
+  type RecordedSession,
+} from '~/utils/recordings'
+
+const props = withDefaults(
+  defineProps<{
+    session: RecordedSession
+    /**
+     * Whether there is still audio behind these tracks.
+     *
+     * `false` once retention has swept the recordings, and then the
+     * players and the pictures go and the measurements stay. That is not
+     * a technicality: the notice above the tab bar promises that what was
+     * written from a recording survives it, and a list that dropped the
+     * measurements along with the audio would make that sentence false on
+     * the one page it is displayed on. Mounting an `<audio>` for a file
+     * that is gone would give eight speakers eight failing players and no
+     * explanation.
+     */
+    playable?: boolean
+  }>(),
+  { playable: true },
+)
+
+const say = useSay()
+
+// The public base, never the internal one: an `<audio>` element loads in a
+// browser, and the cluster address a server-side render would use
+// addresses nothing the listener can reach.
+const base = useRuntimeConfig().public.apiBase
+
+/** Playback position per track, so each spectrogram can show its own
+ *  playhead without the tracks having to know about each other. */
+const positions = ref<Record<string, number>>({})
+const players = new Map<string, HTMLAudioElement>()
+
+/**
+ * A ref callback per track, cached so its identity is stable.
+ *
+ * An inline arrow returns a fresh closure on every render, and the
+ * template calls it on every render. Vue treats a new ref function as a
+ * new binding, so a `timeupdate` — four a second, per playing track — tore
+ * down and re-seated *every* track's ref and rebuilt every `<audio>` on
+ * the page. `MultiTrackPlayer` caches its binders for exactly this reason.
+ */
+const binders = new Map<string, (el: unknown) => void>()
+
+function bindPlayer(trackId: string) {
+  let existing = binders.get(trackId)
+  if (!existing) {
+    existing = (el: unknown) => {
+      // Duck-typed rather than `instanceof HTMLAudioElement`, so the check
+      // holds wherever this runs.
+      if (el && typeof (el as HTMLAudioElement).play === 'function') {
+        players.set(trackId, el as HTMLAudioElement)
+      } else {
+        players.delete(trackId)
+      }
+    }
+    binders.set(trackId, existing)
+  }
+  return existing
+}
+
+function onTime(trackId: string, event: Event) {
+  positions.value = {
+    ...positions.value,
+    [trackId]: (event.target as HTMLAudioElement).currentTime,
+  }
+}
+
+/** Clicking a spectrogram moves that track's own player to that moment. */
+function seek(trackId: string, seconds: number) {
+  const player = players.get(trackId)
+  if (!player) return
+  player.currentTime = seconds
+  positions.value = { ...positions.value, [trackId]: seconds }
+}
+</script>
+
+<template>
+  <ul class="flex flex-col gap-4">
+    <li
+      v-for="track in props.session.tracks"
+      :key="track.discord_user_id"
+      class="rounded-xl p-4"
+      :style="{ background: 'var(--surface-raised)' }"
+    >
+      <h3 class="text-sm font-medium">{{ trackLabel(track) }}</h3>
+
+      <!-- Named, because eight identical "audio" controls in a row tell a
+           screen-reader user nothing about which speaker they are on.
+           `preload="none"`: nothing is fetched until somebody presses play
+           on this particular speaker. -->
+      <template v-if="props.playable">
+        <audio
+          :ref="bindPlayer(track.discord_user_id)"
+          :src="audioUrl(base, props.session.id, track.discord_user_id)"
+          class="mt-3 w-full"
+          controls
+          preload="none"
+          :aria-label="$t('recordings.trackAlone', { name: trackLabel(track) })"
+          @timeupdate="onTime(track.discord_user_id, $event)"
+        />
+
+        <TrackSpectrogram
+          :session-id="props.session.id"
+          :discord-user-id="track.discord_user_id"
+          :position="positions[track.discord_user_id] ?? null"
+          @seek="(seconds) => seek(track.discord_user_id, seconds)"
+        />
+      </template>
+
+      <!-- What the file is, under the thing it describes. Three slots
+           always, in one order, so a missing measurement is a gap in a row
+           rather than a shorter row somebody has to count. -->
+      <dl class="mt-3 flex flex-wrap gap-x-6 gap-y-1 text-xs">
+        <div v-for="fact in trackFileFacts(track)" :key="fact.labelKey" class="flex gap-1.5">
+          <dt :style="{ color: 'var(--text-muted)' }">{{ $t(fact.labelKey) }}</dt>
+          <dd class="tabular-nums">{{ say(fact.value) }}</dd>
+        </div>
+      </dl>
+    </li>
+  </ul>
+</template>
diff --git a/console/app/components/RecordingTranscript.vue b/console/app/components/RecordingTranscript.vue
new file mode 100644
index 0000000..4f530bc
--- /dev/null
+++ b/console/app/components/RecordingTranscript.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+/**
+ * The meeting in words.
+ *
+ * **The same words the protocol was written from.** The API assembles this
+ * with the function the worker builds the published document with, so the
+ * console cannot show a different reading of a meeting than the document
+ * does. That is worth a sentence on screen: somebody comparing the two is
+ * entitled to know they are looking at one transcript through two doors
+ * rather than at two transcripts.
+ *
+ * **A block carries the moment it was spoken, and that moment is shown.**
+ * It is measured from the start of the session, in the same `m:ss` the
+ * transport on the meeting tab runs on, so a number taken off a line here
+ * can be found in the audio. Without it the transcript is a wall of prose
+ * with no way back into the recording it came from.
+ *
+ * **An empty transcript is never just empty.** Three entirely different
+ * situations produce no blocks, and `~/utils/transcript` is where they are
+ * told apart; this file renders whichever sentence that module chose. A
+ * transcript that *has* words and is still missing some says so too — a
+ * partial one reads as finished, and somebody concluding from it that a
+ * colleague said nothing has been misled by an omission.
+ *
+ * The words are not fetched here. The page fetches them, because the same
+ * response carries whether this session still has any audio and two other
+ * tabs need that answer before anybody clicks this one.
+ */
+import { formatSeconds } from '~/utils/recordings'
+import { NOT_MEASURED } from '~/utils/message'
+import {
+  transcriptAttribution,
+  transcriptEmpty,
+  transcriptExternalNames,
+  transcriptOffset,
+  transcriptPartial,
+  type SessionTranscript,
+} from '~/utils/transcript'
+
+const props = defineProps<{ transcript: SessionTranscript }>()
+
+const say = useSay()
+
+const empty = computed(() => transcriptEmpty(props.transcript))
+const partial = computed(() => transcriptPartial(props.transcript))
+const external = computed(() => transcriptExternalNames(props.transcript))
+
+/** Whether anybody in this meeting is written under a second name in the
+ *  protocol. Nobody is, most of the time, and a roster that says four
+ *  names nobody asked about is four lines between a reader and the words. */
+const relabelled = computed(() =>
+  props.transcript.participants.filter(
+    (speaker) => external.value[speaker.discord_user_id] !== undefined,
+  ),
+)
+
+function at(index: number): string {
+  const block = props.transcript.blocks[index]
+  if (!block) return NOT_MEASURED
+  const offset = transcriptOffset(props.transcript, block)
+  return offset === null ? NOT_MEASURED : formatSeconds(offset)
+}
+</script>
+
+<template>
+  <section
+    class="rounded-2xl border p-5"
+    :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
+  >
+    <h2 class="text-base font-semibold">{{ $t('recordings.transcriptHeading') }}</h2>
+    <p class="mt-1 max-w-2xl text-sm" :style="{ color: 'var(--text-muted)' }">
+      {{ $t('recordings.transcriptNote') }}
+    </p>
+
+    <!-- Who is who, and only when that is a question. A speaker linked to
+         an account is printed under the other name in the protocol, and a
+         reader holding both documents otherwise finds two names for one
+         colleague and no explanation. -->
+    <p
+      v-if="relabelled.length > 0"
+      class="mt-4 rounded-lg p-3 text-xs"
+      :style="{ background: 'var(--surface-raised)', color: 'var(--text-muted)' }"
+    >
+      <span class="font-medium">{{ $t('recordings.transcriptSpeakersHeading') }}</span>
+      <span v-for="(speaker, index) in relabelled" :key="speaker.discord_user_id">
+        {{ index === 0 ? ' ' : ', ' }}
+        {{ say(transcriptAttribution(speaker, external[speaker.discord_user_id])) }}
+      </span>
+    </p>
+
+    <!-- Three sentences for three situations, chosen in the module. A tab
+         that met all of them with "nothing here" is a tab people report as
+         broken, which is what the two extra fields on the endpoint exist
+         to prevent. -->
+    <div
+      v-if="empty"
+      class="mt-4 rounded-lg border border-dashed p-4"
+      :style="{ borderColor: 'var(--border)' }"
+    >
+      <p class="text-sm font-medium">{{ say(empty.heading) }}</p>
+      <p class="mt-1 text-sm" :style="{ color: 'var(--text-muted)' }">{{ say(empty.detail) }}</p>
+    </div>
+
+    <template v-else>
+      <p
+        v-if="partial"
+        class="mt-4 rounded-lg p-3 text-sm"
+        :style="{ background: 'var(--surface-raised)', color: 'var(--text-muted)' }"
+        role="status"
+      >
+        {{ say(partial) }}
+      </p>
+
+      <!-- An ordered list, and said to be one: a transcript is its order,
+           and a run of bare paragraphs gives assistive technology neither
+           a count nor a way to step between turns. -->
+      <ol class="mt-4 flex flex-col gap-4">
+        <li
+          v-for="(block, index) in transcript.blocks"
+          :key="`${block.discord_user_id}-${block.started_at}-${index}`"
+          class="flex flex-col gap-1 sm:flex-row sm:gap-4"
+        >
+          <!-- The clock in its own column, tabular, so a reader scanning
+               for a moment reads down one edge rather than hunting a
+               number inside each line. -->
+          <p class="shrink-0 text-xs tabular-nums sm:w-16 sm:pt-1" :style="{ color: 'var(--text-muted)' }">
+            <span class="sr-only">{{ $t('recordings.transcriptAtLabel') }}</span>
+            {{ at(index) }}
+          </p>
+          <div class="min-w-0 flex-1">
+            <p class="text-sm font-medium">{{ block.display_name }}</p>
+            <!-- `whitespace-pre-line`: the merge keeps the line breaks a
+                 speaker's turn was assembled with, and a paragraph run
+                 together is a different paragraph. -->
+            <p class="mt-0.5 whitespace-pre-line text-sm">{{ block.text }}</p>
+          </div>
+        </li>
+      </ol>
+    </template>
+  </section>
+</template>
diff --git a/console/app/pages/recordings/[id].vue b/console/app/pages/recordings/[id].vue
index b45297f..114ff12 100644
--- a/console/app/pages/recordings/[id].vue
+++ b/console/app/pages/recordings/[id].vue
@@ -1,24 +1,37 @@
 <script setup lang="ts">
 /**
- * One recording, at its own address.
+ * One recording, at its own address, divided into the questions people
+ * arrive with.
  *
  * `/recordings/{id}` is canonical: a link in a protocol, a chat message or
  * a bookmark lands on the recording itself rather than on a list somebody
- * then has to search through. That is why this page exists separately
- * from `/recordings`, which stays a list.
+ * then has to search through. Since #141 it is also the **only** place a
+ * recording can be heard — the list is a list again — so everything that
+ * page stopped showing had to have somewhere to live here.
  *
- * Everything about the session hangs off it — when it ran, who was in it,
- * what each track measured, the protocol it produced, and the audio. The
- * list view deliberately shows less: a page of ten sessions that loaded
- * this much would pull hundreds of megabytes for somebody scanning for a
- * link.
+ * **Tabs, not one long scroll.** What was here was a metadata card, a tag
+ * editor, a transport, an administrator's panel and then one `<audio>` and
+ * one spectrogram per speaker, stacked. Every part of it was worth having
+ * and no two of them answered the same question, which is the shape a tab
+ * bar is for. `~/utils/recordingTabs` holds the division and the argument
+ * for it: which four, why there is no metadata tab, why the re-queue panel
+ * is on `details`, and why `meeting` is the one a bare address opens.
  *
- * **Two ways to listen, because they answer different questions.** The
- * multi-track transport at the top plays the meeting: every speaker on one
- * clock, which is the only way a conversation makes sense. Each track also
- * gets its own player below, because "what did this one person say" is a
- * question the shared transport cannot answer without muting everybody
- * else first.
+ * `UiTabs` mounts a panel the first time it is shown and keeps it
+ * afterwards, and that matters here more than anywhere else in the
+ * console: the tracks tab is one `<audio>` and one spectrogram request per
+ * speaker, and an eight-speaker meeting would otherwise fire sixteen
+ * requests at somebody who came for the protocol link.
+ *
+ * **Both the session and its transcript are fetched on arrival, and only
+ * one of them is lazy.** The transcript response is the only thing that
+ * says whether this session still has any audio, and *two* tabs have to
+ * know that before anybody clicks them — a player that is going to 404 has
+ * to say why instead of looking broken. So the words come with the page;
+ * what the tab bar defers is rendering them, which is where the cost of a
+ * ninety-minute meeting actually is. A transcript that fails to load is
+ * not a failed page: the session is still here, the audio still plays, and
+ * the transcript tab says what happened.
  *
  * A 404 from the API is not an error page here. Somebody who was not in a
  * session and somebody following a link to one that never existed get the
@@ -26,19 +39,30 @@
  * module docstring for why that is a security property and not a
  * politeness.
  */
+import UiTabs from '~/components/ui/UiTabs.vue'
 import {
-  audioUrl,
-  channelLabel,
   formatSeconds,
   formatTimestamp,
   hasProtocol,
   isInProgress,
+  recordingNaming,
   sessionLength,
-  trackLabel,
   type RecordedSession,
 } from '~/utils/recordings'
+import { recordingTabQuery, recordingTabs } from '~/utils/recordingTabs'
+import { transcriptAudioErased, transcriptPath, type SessionTranscript } from '~/utils/transcript'
+import type { SessionName } from '~/utils/sessionNaming'
 import { ApiError } from '~/utils/apiError'
 
+/** Everything the page needs before it can render anything. */
+interface Recording {
+  session: RecordedSession
+  /** The words, or `null` when the transcript alone could not be read.
+   *  The session is authoritative for the page's existence; a transcript
+   *  that failed is one tab's problem and not five. */
+  transcript: SessionTranscript | null
+}
+
 const { t } = useI18n()
 const say = useSay()
 
@@ -46,23 +70,77 @@ const route = useRoute()
 const api = useApi()
 const id = computed(() => String(route.params.id ?? ''))
 
-const { data, status, error, refresh } = await useAsyncData(
+const { data, status, error, refresh } = await useAsyncData<Recording>(
   () => `recording-${id.value}`,
-  () => api<RecordedSession>(`/sessions/${encodeURIComponent(id.value)}`),
+  async () => {
+    const sessionId = id.value
+    // In parallel. They are two independent reads behind the same
+    // authorisation, and doing them one after the other would double the
+    // wait for no answer either of them needs from the other.
+    const [session, transcript] = await Promise.all([
+      api<RecordedSession>(`/sessions/${encodeURIComponent(sessionId)}`),
+      // Swallowed on purpose, and only here: a transcript that cannot be
+      // read must not take down the audio, the tags or the metadata. What
+      // it costs is the distinction between a 500 and a 404 on this one
+      // call, and neither of those is a sentence the transcript tab needs
+      // — "the words could not be read" covers both, and the session's own
+      // 404 is what decides whether this recording is anybody's at all.
+      api<SessionTranscript>(transcriptPath(sessionId)).catch(() => null),
+    ])
+    return { session, transcript }
+  },
   { watch: [id] },
 )
 
-const session = computed<RecordedSession | null>(() => data.value ?? null)
+/**
+ * What somebody has just renamed this to, laid over what arrived.
+ *
+ * The heading above the tabs is a title, and the editor that writes it is
+ * three tabs away — so without this, saving a name leaves the page
+ * disagreeing with the box it was typed into until a reload. Cleared when
+ * the address changes, because it belongs to one recording.
+ */
+const renamed = ref<SessionName | null>(null)
+watch(id, () => {
+  renamed.value = null
+})
+
+const session = computed<RecordedSession | null>(() => {
+  const found = data.value?.session ?? null
+  if (found === null) return null
+  return renamed.value === null ? found : { ...found, ...renamed.value }
+})
+const transcript = computed<SessionTranscript | null>(() => data.value?.transcript ?? null)
 const length = computed(() => (session.value ? sessionLength(session.value) : null))
+const naming = computed(() => (session.value ? recordingNaming(session.value) : null))
+
+/** The retention sweep has taken the recordings and left the minutes.
+ *  Needs the track count as well as the flag: a session nobody consented
+ *  to answers `audio_available: false` too, and "your recording was
+ *  deleted" is not what happened to that one. */
+const audioGone = computed(() =>
+  transcriptAudioErased(transcript.value, session.value?.tracks.length ?? 0),
+)
 
-/** A session this viewer may not see, and one that does not exist, are
- *  the same answer. Distinguishing them here would undo the endpoint's
- *  care in not distinguishing them. */
+/** A session this viewer may not see, and one that does not exist, are the
+ *  same answer. Distinguishing them here would undo the endpoint's care in
+ *  not distinguishing them. */
 const missing = computed(() => error.value instanceof ApiError && error.value.status === 404)
 
+const tabs = computed(() => recordingTabs(t))
+/** Where the audio tabs send somebody once there is no audio left. */
+const toTranscript = computed(() => ({
+  path: route.path,
+  query: recordingTabQuery(route.query, 'transcript'),
+}))
+const toDetails = computed(() => ({
+  path: route.path,
+  query: recordingTabQuery(route.query, 'details'),
+}))
+
 useHead(() => ({
-  title: session.value
-    ? t('recordings.headTitle', { channel: say(channelLabel(session.value)) })
+  title: naming.value
+    ? t('recordings.headTitle', { name: say(naming.value.heading) })
     : t('recordings.one'),
 }))
 
@@ -75,60 +153,11 @@ onMounted(() => {
   }
 })
 
-const base = useRuntimeConfig().public.apiBase
-
-/** Playback position per track, so each spectrogram can show its own
- *  playhead without the tracks having to know about each other. */
-const positions = ref<Record<string, number>>({})
-const players = new Map<string, HTMLAudioElement>()
-
-/**
- * A ref callback per track, cached so its identity is stable.
- *
- * This used to return a fresh closure on every call, and the template
- * calls it on every render. Vue treats a new ref function as a new
- * binding, so a `timeupdate` — four a second, per playing track — tore
- * down and re-seated *every* track's ref, rebuilt every `<li>`, every
- * four-entry `<dl>` and every `<audio>` vnode on the page. The sibling
- * component (`MultiTrackPlayer`) already cached its binders for exactly
- * this reason and says so; the rule was written down and then not
- * applied one file over.
- */
-const binders = new Map<string, (el: unknown) => void>()
-
-function bindPlayer(trackId: string) {
-  let existing = binders.get(trackId)
-  if (!existing) {
-    existing = (el: unknown) => {
-      // Duck-typed rather than `instanceof HTMLAudioElement`, so the
-      // check holds wherever this runs.
-      if (el && typeof (el as HTMLAudioElement).play === 'function') {
-        players.set(trackId, el as HTMLAudioElement)
-      } else {
-        players.delete(trackId)
-      }
-    }
-    binders.set(trackId, existing)
-  }
-  return existing
-}
-
-function onTime(trackId: string, event: Event) {
-  positions.value = {
-    ...positions.value,
-    [trackId]: (event.target as HTMLAudioElement).currentTime,
-  }
-}
+const others = computed(() => session.value?.other_participants ?? [])
 
-/** Clicking a spectrogram moves that track's own player to that moment. */
-function seek(trackId: string, seconds: number) {
-  const player = players.get(trackId)
-  if (!player) return
-  player.currentTime = seconds
-  positions.value = { ...positions.value, [trackId]: seconds }
+function onRenamed(name: SessionName) {
+  renamed.value = name
 }
-
-const others = computed(() => session.value?.other_participants ?? [])
 </script>
 
 <template>
@@ -141,10 +170,9 @@ const others = computed(() => session.value?.other_participants ?? [])
       {{ $t('recordings.backToAll') }}
     </NuxtLink>
 
-    <!-- Three blocks, in the three sizes this page is: the metadata card,
-         the reader's tags, and the transport. The back link above is real
-         and stays put, so the only thing that moves when the recording
-         lands is the recording. -->
+    <!-- The header, the bar and the panel, in the three sizes this page
+         is. The back link above is real and stays put, so the only thing
+         that moves when the recording lands is the recording. -->
     <div
       v-if="status === 'pending' && !error"
       aria-busy="true"
@@ -152,12 +180,12 @@ const others = computed(() => session.value?.other_participants ?? [])
     >
       <p class="sr-only">{{ $t('recordings.loadingOne') }}</p>
       <div
-        class="h-56 animate-pulse rounded-2xl border motion-reduce:animate-none"
+        class="h-44 animate-pulse rounded-2xl border motion-reduce:animate-none"
         :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
       />
       <div
-        class="h-24 animate-pulse rounded-2xl border motion-reduce:animate-none"
-        :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
+        class="h-9 w-80 max-w-full animate-pulse rounded-t-lg motion-reduce:animate-none"
+        :style="{ background: 'var(--surface)' }"
       />
       <div
         class="h-72 animate-pulse rounded-2xl border motion-reduce:animate-none"
@@ -186,9 +214,9 @@ const others = computed(() => session.value?.other_participants ?? [])
         {{ $t('recordings.oneFailedDetail') }}
       </p>
       <!-- Disabled rather than replaced while the retry runs: the button
-           that started it is the one that would vanish, and a control
-           that unmounts itself when pressed drops the keyboard to the top
-           of the document. -->
+           that started it is the one that would vanish, and a control that
+           unmounts itself when pressed drops the keyboard to the top of
+           the document. -->
       <button
         type="button"
         class="mt-3 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors hover:bg-[var(--surface-raised)] disabled:opacity-60"
@@ -200,14 +228,17 @@ const others = computed(() => session.value?.other_participants ?? [])
       </button>
     </div>
 
-    <template v-else-if="session">
-      <!-- Metadata: everything about this session that is not audio. -->
+    <template v-else-if="session && naming">
+      <!-- Above the bar, because it identifies the meeting every tab is
+           about. This is where the answer to "is there a metadata tab"
+           lives: somebody reading the transcript should not have to leave
+           it to find out when the meeting was. -->
       <header
         class="rounded-2xl border p-5"
         :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
       >
         <h1 class="flex flex-wrap items-center gap-2 text-2xl font-semibold">
-          <span>{{ say(channelLabel(session)) }}</span>
+          <span>{{ say(naming.heading) }}</span>
           <span
             v-if="isInProgress(session)"
             class="rounded-full px-2 py-0.5 text-xs font-medium"
@@ -216,6 +247,13 @@ const others = computed(() => session.value?.other_participants ?? [])
             {{ $t('recordings.recordingNow') }}
           </span>
         </h1>
+        <!-- Where it happened, once the heading has stopped saying so. A
+             named meeting is called what somebody named it; the channel is
+             still a fact and drops to a subordinate line rather than
+             disappearing. -->
+        <p v-if="naming.under" class="mt-1 text-sm" :style="{ color: 'var(--text-muted)' }">
+          {{ say(naming.under) }}
+        </p>
 
         <dl class="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 text-sm sm:grid-cols-4">
           <div>
@@ -240,113 +278,219 @@ const others = computed(() => session.value?.other_participants ?? [])
           </div>
         </dl>
 
-        <div class="mt-4 flex flex-wrap items-center gap-3">
-          <a
-            v-if="hasProtocol(session)"
-            :href="session.document_url ?? ''"
-            target="_blank"
-            rel="noreferrer"
-            class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors hover:bg-[var(--surface-raised)]"
-            :style="{ color: 'var(--action)' }"
-          >
-            {{ $t('recordings.openProtocol') }}
-          </a>
-          <span v-else class="text-sm" :style="{ color: 'var(--text-muted)' }">
-            {{ $t('recordings.noProtocolWritten') }}
-          </span>
+        <!-- Retention, said once and above the bar, because it explains
+             the state of two tabs and has to be legible from the third.
+             Not in the danger role: a recording deleted when its window
+             closed is the system keeping a promise, not a fault. -->
+        <div
+          v-if="audioGone"
+          class="mt-4 rounded-lg border border-dashed p-3"
+          :style="{ borderColor: 'var(--border)' }"
+        >
+          <p class="text-sm font-medium">{{ $t('recordings.audioGoneHeading') }}</p>
+          <p class="mt-1 text-sm" :style="{ color: 'var(--text-muted)' }">
+            {{ $t('recordings.audioGoneDetail') }}
+          </p>
         </div>
-
-        <!-- Everybody who was in the channel but has no track: they did
-             not consent before it began. Named rather than omitted, because
-             "who else was there" is a fact about the meeting and their
-             absence from the audio is the point. -->
-        <p v-if="others.length > 0" class="mt-4 text-sm" :style="{ color: 'var(--text-muted)' }">
-          {{
-            $t('recordings.alsoInChannelUnrecorded', {
-              people: others.map((person) => person.display_name).join(', '),
-            })
-          }}
-        </p>
       </header>
 
-      <!-- The reader's own labels on this recording. Placed above the
-           audio because it is the half of the page somebody returns to a
-           recording to *write*, and below the metadata because it is not
-           what the recording is. -->
-      <RecordingTags :session-id="session.id" :tags="session.tags" />
+      <UiTabs :tabs="tabs" :label="$t('recordings.tabsLabel')">
+        <!-- The meeting, on one clock. -->
+        <template #meeting>
+          <div class="flex flex-col gap-4">
+            <section
+              class="rounded-2xl border p-5"
+              :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
+            >
+              <h2 class="text-base font-semibold">{{ $t('recordings.wholeMeetingHeading') }}</h2>
+              <p class="mt-1 text-sm" :style="{ color: 'var(--text-muted)' }">
+                {{ $t('recordings.wholeMeetingNote') }}
+              </p>
 
-      <!-- The meeting, on one clock. -->
-      <section
-        class="rounded-2xl border p-5"
-        :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
-      >
-        <h2 class="text-base font-semibold">{{ $t('recordings.wholeMeetingHeading') }}</h2>
-        <p class="mt-1 text-sm" :style="{ color: 'var(--text-muted)' }">
-          {{ $t('recordings.wholeMeetingNote') }}
-        </p>
-        <MultiTrackPlayer :session="session" />
-      </section>
+              <!-- "Nobody consented" is asked first and is the more
+                   specific answer: a session with no tracks reports no
+                   available audio for the honest reason that there never
+                   was any, and calling that an erasure would report a loss
+                   that did not happen. -->
+              <p
+                v-if="session.tracks.length === 0"
+                class="mt-4 rounded-lg border border-dashed p-4 text-sm"
+                :style="{ borderColor: 'var(--border)', color: 'var(--text-muted)' }"
+              >
+                {{ $t('recordings.noAudio') }}
+              </p>
+              <p
+                v-else-if="audioGone"
+                class="mt-4 rounded-lg border border-dashed p-4 text-sm"
+                :style="{ borderColor: 'var(--border)', color: 'var(--text-muted)' }"
+              >
+                {{ $t('recordings.audioGoneNothingToPlay') }}
+                <NuxtLink
+                  :to="toTranscript"
+                  class="font-medium transition-colors hover:underline"
+                  :style="{ color: 'var(--action)' }"
+                >
+                  {{ $t('recordings.audioGoneReadInstead') }}
+                </NuxtLink>
+              </p>
+              <MultiTrackPlayer v-else :session="session" />
+            </section>
 
-      <!-- Second wave: only an administrator of this guild sees anything
-           here, and for everybody else the component renders nothing at
-           all rather than a disabled control that confirms it exists. -->
-      <RequeuePanel :session-id="session.id" />
+            <section
+              class="rounded-2xl border p-5"
+              :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
+            >
+              <h2 class="text-base font-semibold">{{ $t('recordings.aboutHeading') }}</h2>
 
-      <!-- One speaker at a time. -->
-      <section
-        class="rounded-2xl border p-5"
-        :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
-      >
-        <h2 class="text-base font-semibold">{{ $t('recordings.eachTrackHeading') }}</h2>
-        <p class="mt-1 text-sm" :style="{ color: 'var(--text-muted)' }">
-          {{ $t('recordings.eachTrackNote') }}
-        </p>
+              <div class="mt-3 flex flex-wrap items-center gap-3">
+                <a
+                  v-if="hasProtocol(session)"
+                  :href="session.document_url ?? ''"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors hover:bg-[var(--surface-raised)]"
+                  :style="{ color: 'var(--action)' }"
+                >
+                  {{ $t('recordings.openProtocol') }}
+                </a>
+                <span v-else class="text-sm" :style="{ color: 'var(--text-muted)' }">
+                  {{ $t('recordings.noProtocolWritten') }}
+                </span>
+              </div>
 
-        <p
-          v-if="session.tracks.length === 0"
-          class="mt-4 rounded-lg border border-dashed p-4 text-sm"
-          :style="{ borderColor: 'var(--border)', color: 'var(--text-muted)' }"
-        >
-          {{ $t('recordings.noAudio') }}
-        </p>
+              <!-- What somebody wrote about the meeting, shown where a
+                   listener wants it and edited on `details`. The rest of
+                   this page is the reading room; that tab is the desk.
+                   `whitespace-pre-line` because a description keeps its
+                   paragraphs and the API keeps them too. -->
+              <p
+                v-if="session.description"
+                class="mt-3 max-w-3xl whitespace-pre-line text-sm"
+              >
+                {{ session.description }}
+              </p>
+              <p v-else class="mt-3 text-sm" :style="{ color: 'var(--text-muted)' }">
+                {{ $t('recordings.noDescriptionYet') }}
+                <NuxtLink
+                  :to="toDetails"
+                  class="font-medium transition-colors hover:underline"
+                  :style="{ color: 'var(--action)' }"
+                >
+                  {{ $t('recordings.nameThisMeeting') }}
+                </NuxtLink>
+              </p>
 
-        <ul v-else class="mt-4 flex flex-col gap-4">
-          <li
-            v-for="track in session.tracks"
-            :key="track.discord_user_id"
-            class="rounded-xl p-4"
-            :style="{ background: 'var(--surface-raised)' }"
+              <!-- Everybody who was in the channel but has no track: they
+                   did not consent before it began. Named rather than
+                   omitted, because "who else was there" is a fact about
+                   the meeting and their absence from the audio is the
+                   point. The list deliberately does not carry this; this
+                   page is where there is room to say why. -->
+              <p
+                v-if="others.length > 0"
+                class="mt-4 text-sm"
+                :style="{ color: 'var(--text-muted)' }"
+              >
+                {{
+                  $t('recordings.alsoInChannelUnrecorded', {
+                    people: others.map((person) => person.display_name).join(', '),
+                  })
+                }}
+              </p>
+            </section>
+          </div>
+        </template>
+
+        <!-- One speaker at a time, with what each file is. -->
+        <template #tracks>
+          <section
+            class="rounded-2xl border p-5"
+            :style="{ borderColor: 'var(--border)', background: 'var(--surface)' }"
           >
-            <!-- The four measurements are not repeated here. The
-                 transport directly above already shows them per speaker,
-                 and rendering them twice was around a hundred redundant
-                 nodes on an eight-speaker page and every speaker's
-                 numbers read out twice in a row by a screen reader. -->
-            <h3 class="text-sm font-medium">{{ trackLabel(track) }}</h3>
+            <h2 class="text-base font-semibold">{{ $t('recordings.eachTrackHeading') }}</h2>
+            <p class="mt-1 text-sm" :style="{ color: 'var(--text-muted)' }">
+              {{ $t('recordings.eachTrackNote') }}
+            </p>
 
-            <!-- Named, because eight identical "audio" controls in a row
-                 tell a screen-reader user nothing about which speaker
-                 they are on. `preload="none"`: nothing is fetched until
-                 somebody presses play on this particular speaker. -->
-            <audio
-              :ref="bindPlayer(track.discord_user_id)"
-              :src="audioUrl(base, session.id, track.discord_user_id)"
-              class="mt-3 w-full"
-              controls
-              preload="none"
-              :aria-label="$t('recordings.trackAlone', { name: trackLabel(track) })"
-              @timeupdate="onTime(track.discord_user_id, $event)"
-            />
+            <!-- Retention took the recordings and left what was written
+                 from them. The list stays, without its players and its
+                 pictures, because the measurements are part of "what was
+                 written from it" — dropping them here would make the
+                 notice above the tab bar untrue on the one page it is
+                 shown on. -->
+            <template v-if="audioGone">
+              <p
+                class="mt-4 rounded-lg border border-dashed p-4 text-sm"
+                :style="{ borderColor: 'var(--border)', color: 'var(--text-muted)' }"
+              >
+                {{ $t('recordings.audioGoneNoTracks') }}
+                <NuxtLink
+                  :to="toTranscript"
+                  class="font-medium transition-colors hover:underline"
+                  :style="{ color: 'var(--action)' }"
+                >
+                  {{ $t('recordings.audioGoneReadInstead') }}
+                </NuxtLink>
+              </p>
+              <RecordingTrackList class="mt-4" :session="session" :playable="false" />
+            </template>
+            <p
+              v-else-if="session.tracks.length === 0"
+              class="mt-4 rounded-lg border border-dashed p-4 text-sm"
+              :style="{ borderColor: 'var(--border)', color: 'var(--text-muted)' }"
+            >
+              {{ $t('recordings.noAudio') }}
+            </p>
+            <RecordingTrackList v-else class="mt-4" :session="session" />
+          </section>
+        </template>
+
+        <!-- The words. -->
+        <template #transcript>
+          <RecordingTranscript v-if="transcript" :transcript="transcript" />
+          <!-- The one failure that is a tab's own and not the page's. The
+               retry re-reads the recording, because the two arrived
+               together and a transcript alone has nothing to be right
+               about. -->
+          <div
+            v-else
+            class="rounded-2xl border p-6"
+            :style="{ borderColor: 'var(--danger)' }"
+          >
+            <p class="text-sm font-medium">{{ $t('recordings.transcriptFailedHeading') }}</p>
+            <p class="mt-1 text-sm" :style="{ color: 'var(--text-muted)' }">
+              {{ $t('recordings.transcriptFailedDetail') }}
+            </p>
+            <button
+              type="button"
+              class="mt-3 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors hover:bg-[var(--surface-raised)] disabled:opacity-60"
+              :style="{ color: 'var(--action)' }"
+              :disabled="status === 'pending'"
+              @click="refresh()"
+            >
+              {{ status === 'pending' ? $t('recordings.retrying') : $t('error.retry') }}
+            </button>
+          </div>
+        </template>
 
-            <TrackSpectrogram
+        <!-- The writing desk: what this meeting is called, what the reader
+             files it under, and — for an administrator of the guild — the
+             one control that changes what the recording *is*. The panel
+             renders nothing at all for everybody else, which is why it is
+             here rather than behind a tab that would be empty for almost
+             every reader. -->
+        <template #details>
+          <div class="flex flex-col gap-4">
+            <RecordingName
               :session-id="session.id"
-              :discord-user-id="track.discord_user_id"
-              :position="positions[track.discord_user_id] ?? null"
-              @seek="(seconds) => seek(track.discord_user_id, seconds)"
+              :name="{ title: session.title, description: session.description }"
+              @saved="onRenamed"
             />
-          </li>
-        </ul>
-      </section>
+            <RecordingTags :session-id="session.id" :tags="session.tags" />
+            <RequeuePanel :session-id="session.id" />
+          </div>
+        </template>
+      </UiTabs>
     </template>
   </div>
 </template>
diff --git a/console/app/utils/recordingTabs.ts b/console/app/utils/recordingTabs.ts
new file mode 100644
index 0000000..bea3197
--- /dev/null
+++ b/console/app/utils/recordingTabs.ts
@@ -0,0 +1,121 @@
+/**
+ * How one recording is divided, and which part of it a bare link opens.
+ *
+ * The page was one long scroll: a metadata card, a tag editor, a transport
+ * for the whole meeting, an administrator's panel and then one `<audio>`
+ * and one spectrogram per speaker. Everything on it was worth having and
+ * no two of them were the same question, which is exactly the shape a tab
+ * bar is for.
+ *
+ * **Four tabs, and each is a question somebody actually arrives with.**
+ *
+ * - `meeting` — *what was this, and let me hear it.* The transport, the
+ *   protocol link, what was written about the meeting, and who was in the
+ *   room including the people with no audio.
+ * - `tracks` — *what did one person say, and what is in this file.* One
+ *   player and one spectrogram per speaker, with the file's own
+ *   measurements beside the audio they describe.
+ * - `transcript` — *what was said*, in words.
+ * - `details` — *the things somebody writes down here.* The title and
+ *   description, the reader's own tags, and — for an administrator of the
+ *   guild — the re-queue panel.
+ *
+ * **There is no `metadata` tab, and that is a decision rather than an
+ * omission.** The session's own facts — when it started, when it ended,
+ * how long it ran, how many speakers were recorded — are in the page's
+ * header, above the bar, because every tab is about that meeting and
+ * somebody reading the transcript should not have to leave it to find out
+ * when the meeting was. The audio measurements went the other way, down
+ * onto `tracks` and into the row of the track they describe: a sample rate
+ * is only ever the answer to "why does this one sound wrong", and that
+ * question is asked while listening to that track, not in a table of
+ * numbers three tabs away. What is left for a metadata tab to hold is
+ * nothing.
+ *
+ * **The re-queue panel is on `details` rather than in a tab of its own.**
+ * It renders nothing at all for anybody who does not administer the guild
+ * — which is almost everybody — so a tab for it would be an empty tab for
+ * almost every reader. Worse, it discovers its own audience from an HTTP
+ * status after a round trip, so that tab would have to appear late; and a
+ * tab bar that grows a member after it has rendered moves every tab beside
+ * it and, because `uiTabs` reads the default from the *first* tab, could
+ * change which panel a bare address opens. `details` already means "the
+ * things you change about this recording", and re-running a transcription
+ * is the largest of them.
+ *
+ * **`meeting` is first, and first is what a bare address opens.**
+ * `~/utils/uiTabs` drops the query parameter for the first tab, so
+ * `/recordings/4711` and `/recordings/4711?tab=meeting` are the same place
+ * and the plain one stays plain. Three arrivals were weighed:
+ *
+ * - *From the recordings list.* #141 took playback off that page on
+ *   purpose; the row already showed the date, the channel, who was in it
+ *   and whether a protocol exists. The one thing it withheld is the audio,
+ *   and the click is somebody coming for it.
+ * - *From a protocol link.* They have read the words. What a document
+ *   cannot give them is the sixty seconds it was written from.
+ * - *From an announcement in Discord.* They know nothing yet, and
+ *   `meeting` is the tab that says what this was: the description, the
+ *   protocol link, the roster.
+ *
+ * `transcript` is the real rival and loses twice over. The words are
+ * already in the protocol document, which is where most people read them —
+ * and it is the one panel whose cost is paid on arrival rather than on a
+ * click. Making it the default would charge every listener for a document
+ * they came here *not* to read. It is one query parameter away, which is
+ * the entire point of a tab having an address.
+ *
+ * **No tab is ever disabled.** A disabled tab cannot explain itself, and
+ * two of these have a state — the audio erased by retention — that needs
+ * explaining rather than hiding. Greying out `tracks` would also move the
+ * default and quietly redirect `?tab=tracks` links that were shared before
+ * the retention window closed.
+ */
+import { queryForTab, type TabQuery, type UiTab } from './uiTabs'
+
+/** One tab, before anybody has translated it. `labelKey` rather than a
+ *  label, for the reason `i18n/README.md` gives: a module under
+ *  `app/utils` returns keys, and the template calls `$t`. */
+export interface RecordingTab {
+  id: string
+  labelKey: string
+}
+
+/**
+ * The tabs, in the order they are read and in the order they are shown.
+ *
+ * The order is the argument. First is the default, and the four run from
+ * "the meeting as a whole" to "the parts of it" to "the words" to "what
+ * you write down", which is also the order somebody works through a
+ * recording they have just opened.
+ */
+export const RECORDING_TABS: readonly RecordingTab[] = [
+  { id: 'meeting', labelKey: 'recordings.tabMeeting' },
+  { id: 'tracks', labelKey: 'recordings.tabTracks' },
+  { id: 'transcript', labelKey: 'recordings.tabTranscript' },
+  { id: 'details', labelKey: 'recordings.tabDetails' },
+] as const
+
+/** What a bare `/recordings/{id}` opens. Derived from the list rather than
+ *  written beside it, because two statements of one fact are two things to
+ *  keep in step and `uiTabs` already decided that the first tab wins. */
+export const RECORDING_DEFAULT_TAB: string = RECORDING_TABS[0]!.id
+
+/** The tabs as `UiTabs` wants them, once the page has words for them. */
+export function recordingTabs(label: (key: string) => string): UiTab[] {
+  return RECORDING_TABS.map((tab) => ({ id: tab.id, label: label(tab.labelKey) }))
+}
+
+/**
+ * The query a link to one of these tabs carries.
+ *
+ * The rest of the address survives, and the default tab drops the
+ * parameter — both of which `queryForTab` already decides. This wrapper
+ * exists so that a link from one panel to another (the audio tabs point at
+ * `transcript` once retention has swept the recordings) does not have to
+ * restate the tab list, and so that a page never has to invent a label to
+ * ask an arithmetic question.
+ */
+export function recordingTabQuery(query: Readonly<TabQuery>, id: string): TabQuery {
+  return queryForTab(query, recordingTabs((key) => key), id)
+}
diff --git a/console/app/utils/recordings.ts b/console/app/utils/recordings.ts
index bbf2a38..9bf0b32 100644
--- a/console/app/utils/recordings.ts
+++ b/console/app/utils/recordings.ts
@@ -27,6 +27,25 @@ export interface SessionTrack {
    *  measured, and this person did not say anything. */
   speech_seconds: number | null
   segment_count: number | null
+  /**
+   * What the stored file itself is.
+   *
+   * Numbers rather than strings, unlike every id here: none of the three
+   * is anywhere near JavaScript's safe integer range -- `stored_bytes`
+   * would have to be nine petabytes -- so there is nothing to lose by
+   * carrying them as numbers, and a size that arrives as a string cannot
+   * be compared or rounded.
+   *
+   * `null` on any of them means the measurement was never taken: every
+   * track written before migration 0013 has all three null, and a track
+   * whose ingest failed halfway may have some. **Null is not zero**, and
+   * `trackFileFacts` below is where that distinction is kept, because a
+   * `0 kB` where nothing was measured is a claim the console cannot
+   * support.
+   */
+  sample_rate: number | null
+  channels: number | null
+  stored_bytes: number | null
 }
 
 export interface SessionParticipant {
@@ -41,6 +60,20 @@ export interface RecordedSession {
   duration_seconds: number | null
   channel_id: string
   channel_name: string | null
+  /**
+   * What this meeting is called, and what was written about it.
+   *
+   * **Shared, unlike `tags` below.** One per session: everybody who was
+   * in the meeting reads the same title and any of them may correct it,
+   * because a name that four attendees each typed separately is four
+   * names for one thing. `sturnus.console.naming` argues the asymmetry;
+   * `~/utils/sessionNaming` carries what a console may do about it.
+   *
+   * Both are `null` until somebody types one, which is every session
+   * until somebody does.
+   */
+  title: string | null
+  description: string | null
   /** The Outline protocol, when one was written. */
   document_url: string | null
   /** Everybody else who was in the channel -- including the people who did
@@ -191,6 +224,94 @@ export function channelNaming(session: RecordedSession): ChannelNaming {
   return { named: false, heading: { key: 'recordings.channelUnnamed' }, id: session.channel_id }
 }
 
+/**
+ * What the recording's own page calls it, and what goes under that.
+ *
+ * A meeting that somebody has named is called that. `#standup` is where
+ * it happened, which is a fact worth keeping and is not the meeting's
+ * name — so once there is a title the channel drops to a subordinate
+ * line, exactly as `channelNaming` demotes an unresolved id in a list
+ * row. A meeting nobody has named falls back to the channel, and then
+ * there is nothing left to put underneath.
+ *
+ * A title is somebody's own prose and is never translated; the fallback
+ * may be `channelLabel`'s key, so the heading is the same
+ * `string | Message` union every other name in this module returns.
+ */
+export interface RecordingNaming {
+  heading: string | Message
+  /** The channel, when the heading has stopped saying where it happened. */
+  under: string | Message | null
+}
+
+export function recordingNaming(session: RecordedSession): RecordingNaming {
+  const title = session.title?.trim()
+  if (!title) return { heading: channelLabel(session), under: null }
+  return { heading: title, under: channelLabel(session) }
+}
+
+/**
+ * One measurement of the stored file, and the label it goes under.
+ *
+ * `value` is `null` for a measurement that was never taken, and that
+ * `null` travels all the way to `useSay`, which writes the one em dash
+ * this console uses for an absence. **Nothing here ever turns a missing
+ * number into a zero**: `stored_bytes: null` is a track from before
+ * migration 0013 and `stored_bytes: 0` would be an empty file, and a tab
+ * that showed the first as the second would be inventing a fact about
+ * somebody's recording.
+ *
+ * A fixed list of three in a fixed order rather than "the ones that are
+ * known", so that a track missing a measurement reads as a gap in a row
+ * of three rather than as a shorter row somebody has to count.
+ */
+export interface TrackFileFact {
+  labelKey: string
+  value: Message | null
+}
+
+export function trackFileFacts(track: SessionTrack): TrackFileFact[] {
+  return [
+    { labelKey: 'recordings.sampleRateLabel', value: trackSampleRate(track) },
+    { labelKey: 'recordings.channelsLabel', value: trackChannels(track) },
+    { labelKey: 'recordings.storedLabel', value: trackStoredSize(track) },
+  ]
+}
+
+/** A sample rate in kHz, which is the unit anybody says it in. 44100 is
+ *  44.1, and the fraction is the locale's to write. */
+export function trackSampleRate(track: SessionTrack): Message | null {
+  const hertz = track.sample_rate
+  if (hertz === null || hertz === undefined) return null
+  return { key: 'recordings.sizeKilohertz', params: { rate: hertz / 1000 } }
+}
+
+/** How many channels the file has. `count` rather than a word, so that
+ *  each language decides for itself what one channel is called — English
+ *  says "mono", and an `if` here would have decided that for German too. */
+export function trackChannels(track: SessionTrack): Message | null {
+  const channels = track.channels
+  if (channels === null || channels === undefined) return null
+  return { key: 'recordings.channelCount', params: { count: channels } }
+}
+
+/**
+ * How much was stored, in a unit somebody reads.
+ *
+ * A threshold rather than one unit throughout: `0.3 MB` and `13421772`
+ * are both answers nobody can picture. The switch is a magnitude and not
+ * a plural, so it is decided here; what the two sentences look like stays
+ * in the locale files.
+ */
+export function trackStoredSize(track: SessionTrack): Message | null {
+  const bytes = track.stored_bytes
+  if (bytes === null || bytes === undefined) return null
+  if (bytes < 1_000_000) {
+    return { key: 'recordings.sizeKilobytes', params: { size: Math.round(bytes / 1000) } }
+  }
+  return { key: 'recordings.sizeMegabytes', params: { size: Math.round(bytes / 100_000) / 10 } }
+}
+
 function instantOf(value: string | null): number | null {
   if (!value) return null
   const parsed = Date.parse(value)
diff --git a/console/app/utils/sessionNaming.ts b/console/app/utils/sessionNaming.ts
new file mode 100644
index 0000000..d5374a8
--- /dev/null
+++ b/console/app/utils/sessionNaming.ts
@@ -0,0 +1,172 @@
+/**
+ * Naming a meeting: what a title is, and why the form always sends both
+ * halves of one.
+ *
+ * A title and a description look like two fields and are one fact. The API
+ * serves them from one endpoint and **`PUT` is a replace**: a body without
+ * a `description` member stores `null`, because absent and null are the
+ * same fact told twice and `sturnus.console.naming` chose one spelling for
+ * it. That is a correct decision at the endpoint and a trap at the form.
+ *
+ * So the trap is closed here rather than remembered at the call site.
+ * {@link nameBodyFrom} takes the whole draft — both fields, always — and
+ * returns both members, always. There is no function in this module that
+ * can build a body carrying only a title, which is what it would take to
+ * ship an interface that saves a name and silently deletes the paragraph
+ * underneath it.
+ *
+ * **A title is shared and a tag is not**, and that difference is the whole
+ * reason this is not `~/utils/tagging` with longer strings. Everybody who
+ * was in the meeting sees the same title and any of them may correct it;
+ * a tag is one person's private remark about a conversation other people
+ * were also in. `sturnus.console.naming` makes the argument; what it means
+ * here is that the form has to say so out loud, because somebody about to
+ * clear a field is about to clear it for four colleagues.
+ *
+ * **The server is the authority on what the text is.** The normalisation
+ * below mirrors `sturnus.console.naming` so that a length can be checked
+ * before a round trip is spent on it and so that the Save button can tell
+ * "changed" from "the same text with a stray space" — but every write
+ * answers with the pair it actually stored, and that is what gets
+ * rendered. The same arrangement `~/utils/tagging` documents.
+ *
+ * Every export starts with `name`, `session` or `NAME`. Nuxt auto-imports
+ * every export under `app/utils` into one namespace, and this project has
+ * already had two collisions resolved silently by file order.
+ */
+import type { Message } from './message'
+
+/** The longest a title may be. The number `sturnus.console.naming`
+ *  enforces, restated so an input can carry a `maxlength` rather than let
+ *  somebody type a sentence and then be refused. */
+export const NAME_MAX_TITLE_CHARS = 200
+
+/** The longest a description may be. Same source, same reason. */
+export const NAME_MAX_DESCRIPTION_CHARS = 4000
+
+/** What `GET`/`PUT /api/sessions/{id}/name` answers, and what a `PUT`
+ *  body looks like. One type for all three, because they are the same
+ *  pair and a second shape would be a second place to forget a field. */
+export interface SessionName {
+  title: string | null
+  description: string | null
+}
+
+/** The same pair while somebody is typing it. Two strings rather than two
+ *  nullable ones: an `<input>` holds `''` and never `null`, and a draft
+ *  that admitted both would have two spellings of an empty field — which
+ *  is the distinction the API went to the trouble of removing. */
+export interface NameDraft {
+  title: string
+  description: string
+}
+
+/**
+ * Where a meeting's name is read and written.
+ *
+ * The id is escaped: it is a string from an API, and a string allowed to
+ * contain a slash is a string allowed to address a different endpoint.
+ */
+export function sessionNamePath(sessionId: string): string {
+  return `/sessions/${encodeURIComponent(sessionId)}/name`
+}
+
+/** The stored pair as a form holds it. Absent is an empty field. */
+export function nameDraftFrom(name: SessionName | null | undefined): NameDraft {
+  return { title: name?.title ?? '', description: name?.description ?? '' }
+}
+
+/**
+ * One line naming a meeting, or `null` for a meeting nobody has named.
+ *
+ * NFC, whitespace collapsed to single spaces, trimmed — the mirror of
+ * `normalise_title`. A title is rendered in a heading, a list row and a
+ * browser tab, none of which has a second line, so a newline in one is a
+ * paste accident rather than a decision.
+ */
+function collapsed(raw: string): string | null {
+  const text = raw.normalize('NFC').replace(/\s+/gu, ' ').trim()
+  return text === '' ? null : text
+}
+
+/**
+ * What somebody wrote, or `null` for nothing written.
+ *
+ * Trimmed at the ends and otherwise left alone: the line breaks between
+ * paragraphs are the shape of the text, and collapsing them would turn an
+ * agenda into a run-on sentence. Carriage returns go, because a
+ * `<textarea>` submits `\r\n` on every platform and the same paragraph
+ * typed on two machines must not be two different strings.
+ */
+function paragraphs(raw: string): string | null {
+  const text = raw.normalize('NFC').replaceAll('\r\n', '\n').replaceAll('\r', '\n').trim()
+  return text === '' ? null : text
+}
+
+/**
+ * The body a save sends: **both members, always.**
+ *
+ * This is the whole point of the module. The endpoint replaces rather than
+ * patches, so a body is not "the fields I changed" — it is the name the
+ * meeting will have afterwards, and every member left out of it is a
+ * member cleared. A caller cannot get that wrong here, because there is
+ * nothing to pass but the whole draft and nothing returned but the whole
+ * pair.
+ */
+export function nameBodyFrom(draft: NameDraft): SessionName {
+  return { title: collapsed(draft.title), description: paragraphs(draft.description) }
+}
+
+/**
+ * Why a save was refused, in words somebody can act on, or `null`.
+ *
+ * A *prediction* of what the server would say, measured against the text
+ * that would actually be sent rather than against what is in the box — a
+ * title padded to 205 characters with spaces is 200 by the time it
+ * arrives, and refusing it would be this console disagreeing with the API
+ * about a rule it copied from it.
+ */
+export function nameRefusal(draft: NameDraft): Message | null {
+  const body = nameBodyFrom(draft)
+  if ((body.title?.length ?? 0) > NAME_MAX_TITLE_CHARS) {
+    return { key: 'recordings.nameTitleTooLong', params: { count: NAME_MAX_TITLE_CHARS } }
+  }
+  if ((body.description?.length ?? 0) > NAME_MAX_DESCRIPTION_CHARS) {
+    return {
+      key: 'recordings.nameDescriptionTooLong',
+      params: { count: NAME_MAX_DESCRIPTION_CHARS },
+    }
+  }
+  return null
+}
+
+/**
+ * Whether saving would change anything.
+ *
+ * Compared after normalisation, so that a trailing space somebody's
+ * keyboard added is not a change to write and a Save button does not
+ * light up for text that is already stored. It is the difference between
+ * a control that means something and one that is always available.
+ */
+export function nameIsDirty(stored: SessionName, draft: NameDraft): boolean {
+  const wanted = nameBodyFrom(draft)
+  return wanted.title !== stored.title || wanted.description !== stored.description
+}
+
+/**
+ * What to tell somebody whose name would not save.
+ *
+ * The API's own reason is deliberately unreachable from here: `ApiError`
+ * carries a status and nothing else, because `ofetch` puts the internal
+ * cluster hostname into everything else it throws. A 400 is worth its own
+ * sentence, unlike a tag's — the endpoint refuses a control character in
+ * text that otherwise looks perfectly ordinary, and "it could not be
+ * saved" would leave somebody re-typing a title that was never the
+ * problem.
+ */
+export function nameWriteFailed(status: number): Message {
+  if (status === 0) return { key: 'recordings.nameSaveUnreachable' }
+  if (status === 404) return { key: 'recordings.nameSaveGone' }
+  if (status === 400) return { key: 'recordings.nameSaveRefused' }
+  return { key: 'recordings.nameSaveFailed' }
+}
diff --git a/console/app/utils/transcript.ts b/console/app/utils/transcript.ts
new file mode 100644
index 0000000..140c323
--- /dev/null
+++ b/console/app/utils/transcript.ts
@@ -0,0 +1,228 @@
+/**
+ * A meeting's words, and the four different reasons there might be none.
+ *
+ * The transcript endpoint answers 200 with an empty `blocks` in three
+ * entirely separate situations, and a tab that met all three with "nothing
+ * here" is a tab people report as broken. The API carries the two fields
+ * that tell them apart on purpose (`sturnus.console.statistics` says so in
+ * its own words), and this module is where that becomes a sentence:
+ *
+ * - **The session has not ended.** Its jobs are not enqueued until it
+ *   closes, so there is nothing to assemble yet and never was.
+ * - **`pending_tracks > 0`.** Speakers are still going through the
+ *   transcriber. The words are coming.
+ * - **`pending_tracks === 0`.** Every consenting speaker has been through
+ *   it and none of it produced words. Nobody said anything the engine
+ *   could hear.
+ *
+ * The fourth is not an empty transcript at all and is the one most worth
+ * saying out loud: **`audio_available === false` means the recordings have
+ * been erased and these words survived them.** The retention window is
+ * about the audio and not about the minutes. Two tabs of this page are
+ * audio and would otherwise render as a dead player and a row of 404s;
+ * they ask {@link transcriptAudioGone} instead and say what happened.
+ *
+ * `transcriptAudioErased` is strict about that for two reasons. A
+ * transcript that has not arrived, or one whose request failed, is
+ * *unknown* — and a page that treated unknown as gone would tell somebody
+ * their recording had been deleted because a request timed out. And a
+ * session nobody consented to answers `audio_available: false` as well,
+ * because the flag counts undeleted jobs and there are none; that is the
+ * same answer to the endpoint and entirely different news to a reader.
+ *
+ * Every export starts with `transcript` or `TRANSCRIPT`: Nuxt auto-imports
+ * every export under `app/utils` into one namespace, and a collision there
+ * is resolved silently by file order.
+ */
+import type { Message } from './message'
+
+/**
+ * One person as the transcript names them.
+ *
+ * Both external fields are carried and both are `null` for somebody who
+ * never linked an account. They are what the published protocol prints, so
+ * a transcript tab that could not show the same name as the document would
+ * be showing a different meeting.
+ */
+export interface TranscriptSpeaker {
+  discord_user_id: string
+  display_name: string
+  external_user_id: string | null
+  external_display_name: string | null
+}
+
+/** One speaker's uninterrupted turn. `started_at` and not a duration: a
+ *  block is anchored to a moment in the meeting, which is what lets it be
+ *  lined up against the clock the transport runs on. */
+export interface TranscriptBlock {
+  discord_user_id: string
+  display_name: string
+  started_at: string
+  text: string
+}
+
+export interface SessionTranscript {
+  session_id: string
+  started_at: string
+  ended_at: string | null
+  /** `false` once retention has swept every one of this session's
+   *  recordings. The blocks below survive that. */
+  audio_available: boolean
+  /** How many speakers are still waiting to be transcribed. What tells
+   *  "nobody spoke" from "not decoded yet", both of which are no blocks. */
+  pending_tracks: number
+  participants: TranscriptSpeaker[]
+  blocks: TranscriptBlock[]
+}
+
+/** Where a session's words are read from. The id is escaped: a string
+ *  allowed to contain a slash is a string allowed to address a different
+ *  endpoint. */
+export function transcriptPath(sessionId: string): string {
+  return `/sessions/${encodeURIComponent(sessionId)}/transcript`
+}
+
+/**
+ * Whether this session's audio has been erased, as opposed to never having
+ * existed or never having been asked about.
+ *
+ * Three things have to be true, and each of them rules out a wrong
+ * sentence the page would otherwise render:
+ *
+ * - **The transcript has arrived.** `null` is a request that failed or has
+ *   not landed, and neither is evidence about anybody's recordings.
+ *   Rendering "the audio has been erased" because a fetch went wrong would
+ *   be the console reporting data loss that did not happen, which is the
+ *   single worst thing this page could say.
+ * - **The endpoint said `false` and not merely something falsy.**
+ * - **There were tracks in the first place.** `audio_available` is
+ *   computed as "any job whose audio is not deleted", so a session nobody
+ *   consented to — no jobs at all — answers `false` as well. The API's own
+ *   docstring says the two are the same answer *to it*; they are not the
+ *   same news to a reader. "Retention deleted your recording" and "nobody
+ *   in this meeting had consented before it began" are different
+ *   sentences, and only one of them is about something that was lost.
+ */
+export function transcriptAudioErased(
+  transcript: SessionTranscript | null | undefined,
+  recordedTracks: number,
+): boolean {
+  if (recordedTracks <= 0) return false
+  return transcript?.audio_available === false
+}
+
+/**
+ * Why there are no words, or `null` when there are some.
+ *
+ * A heading and a detail rather than one sentence, because the three
+ * answers are three different pieces of news: one is a wait, one is a
+ * finished result, and one is a meeting that has not happened yet.
+ */
+export interface TranscriptEmptiness {
+  heading: Message
+  detail: Message
+}
+
+export function transcriptEmpty(transcript: SessionTranscript): TranscriptEmptiness | null {
+  if (transcript.blocks.length > 0) return null
+  if (transcript.ended_at === null) {
+    return {
+      heading: { key: 'recordings.transcriptRecordingHeading' },
+      detail: { key: 'recordings.transcriptRecordingDetail' },
+    }
+  }
+  if (transcript.pending_tracks > 0) {
+    return {
+      heading: { key: 'recordings.transcriptPendingHeading' },
+      detail: {
+        key: 'recordings.transcriptPendingDetail',
+        params: { count: transcript.pending_tracks },
+      },
+    }
+  }
+  return {
+    heading: { key: 'recordings.transcriptSilentHeading' },
+    detail: { key: 'recordings.transcriptSilentDetail' },
+  }
+}
+
+/**
+ * That this is not all of it, when it is not all of it.
+ *
+ * A transcript with words in it *and* speakers still in the queue reads as
+ * finished, and somebody who concludes from it that a colleague said
+ * nothing has been misled by an omission the page could have mentioned.
+ * `null` whenever the transcript is whole, or whenever it is empty — an
+ * empty one is already saying this at the top of its own state.
+ */
+export function transcriptPartial(transcript: SessionTranscript): Message | null {
+  if (transcript.blocks.length === 0) return null
+  if (transcript.pending_tracks <= 0) return null
+  return {
+    key: 'recordings.transcriptPartial',
+    params: { count: transcript.pending_tracks },
+  }
+}
+
+function instantOf(value: string | null): number | null {
+  if (!value) return null
+  const parsed = Date.parse(value)
+  return Number.isNaN(parsed) ? null : parsed
+}
+
+/**
+ * How far into the meeting a block was spoken, in seconds, or `null`.
+ *
+ * The same clock the transport runs on, so a reader can take a number off
+ * the transcript and find that moment in the player. Clamped at zero: a
+ * block cannot begin before the session it is in, and a negative offset is
+ * a clock skew rendered as a fact.
+ *
+ * `null` rather than zero when either instant is unreadable — "the very
+ * beginning" is a claim, and this module does not make claims it cannot
+ * measure.
+ */
+export function transcriptOffset(
+  transcript: SessionTranscript,
+  block: TranscriptBlock,
+): number | null {
+  const start = instantOf(transcript.started_at)
+  const at = instantOf(block.started_at)
+  if (start === null || at === null) return null
+  return Math.max(0, Math.floor((at - start) / 1000))
+}
+
+/**
+ * The name the protocol prints for each speaker who has linked an account.
+ *
+ * Keyed by Discord id, and only the people who have one: a map entry
+ * holding `null` would be a speaker the roster has to check twice. This
+ * exists so the transcript can say "anna, written as Anna A. in the
+ * protocol" — without it, somebody comparing the two documents finds two
+ * different names for one colleague and no explanation.
+ */
+export function transcriptExternalNames(transcript: SessionTranscript): Record<string, string> {
+  const named: Record<string, string> = {}
+  for (const speaker of transcript.participants) {
+    const external = speaker.external_display_name?.trim()
+    if (external) named[speaker.discord_user_id] = external
+  }
+  return named
+}
+
+/**
+ * How a speaker is introduced at the top of the transcript.
+ *
+ * A name is somebody's own word and is never translated, so the plain case
+ * is the string itself; a speaker with a second name needs a sentence to
+ * join the two, and that is a key.
+ */
+export function transcriptAttribution(
+  speaker: TranscriptSpeaker,
+  external: string | null | undefined,
+): string | Message {
+  const name = speaker.display_name.trim() || speaker.discord_user_id
+  const other = external?.trim()
+  if (!other || other === name) return name
+  return { key: 'recordings.transcriptAlsoNamed', params: { name, external: other } }
+}
diff --git a/console/i18n/locales/de.json b/console/i18n/locales/de.json
index e642e6f..d07eb85 100644
--- a/console/i18n/locales/de.json
+++ b/console/i18n/locales/de.json
@@ -207,7 +207,7 @@
     "loadingList": "Aufnahmen werden geladen.",
     "loadingOne": "Diese Aufnahme wird geladen.",
     "one": "Aufnahme",
-    "headTitle": "{channel} — Aufnahme",
+    "headTitle": "{name} — Aufnahme",
     "channelById": "Kanal {id}",
     "channelUnnamed": "Kanal ohne Namen",
     "intro": "Das sind die Besprechungen mit eigener Beteiligung. Sturnus zeichnet eine Tonspur je Person auf, die vor dem Start zugestimmt hat, und sonst niemanden — wer im Kanal war und nicht zugestimmt hat, wird genannt, hat hier aber keinen Ton. Aus diesem Material wurde jedes Protokoll transkribiert; wenn ein Protokoll falsch klingt, steht die Antwort hier.",
@@ -269,7 +269,7 @@
     "wholeMeetingHeading": "Die ganze Besprechung",
     "wholeMeetingNote": "Alle Sprecher an einer gemeinsamen Wiedergabe, denn nur so ergibt ein Gespräch Sinn. Solo und Stumm drehen Tonspuren leise, statt sie anzuhalten — nach dem Aufheben läuft es dort weiter, wo alle anderen schon sind.",
     "eachTrackHeading": "Jede Tonspur einzeln",
-    "eachTrackNote": "Für die Frage, was eine einzelne Person gesagt hat, statt was besprochen wurde. Jeder Player hier läuft unabhängig von der Wiedergabe oben und von jeder anderen Tonspur.",
+    "eachTrackNote": "Für die Frage, was eine einzelne Person gesagt hat, statt was besprochen wurde. Jeder Player hier läuft für sich – unabhängig von der Wiedergabe im Reiter „Die Besprechung“ und von jeder anderen Tonspur.",
     "noAudio": "Niemand hatte vor Beginn dieser Besprechung zugestimmt, deshalb gibt es keinen Ton.",
     "trackAlone": "{name} allein",
     "pauseAll": "Alle Tonspuren anhalten",
@@ -311,7 +311,58 @@
     "tagSaveGone": "Diese Aufnahme lässt sich nicht mehr beschriften.",
     "tagSaveFailed": "Die Schlagwörter konnten nicht gespeichert werden. Nichts wurde geändert.",
     "tagAdded": "Schlagwort hinzugefügt.",
-    "tagRemoved": "Schlagwort entfernt."
+    "tagRemoved": "Schlagwort entfernt.",
+    "tabsLabel": "Teile dieser Aufnahme",
+    "tabMeeting": "Die Besprechung",
+    "tabTracks": "Spuren",
+    "tabTranscript": "Transkript",
+    "tabDetails": "Angaben",
+    "aboutHeading": "Über diese Besprechung",
+    "audioGoneHeading": "Der Ton wurde gelöscht.",
+    "audioGoneDetail": "Sturnus löscht eine Aufnahme, sobald ihre Aufbewahrungsfrist abläuft. Alles, was daraus geschrieben wurde, bleibt: das Transkript, das Protokoll und die Messwerte aus der Zeit, als der Ton noch da war.",
+    "audioGoneNothingToPlay": "Hier gibt es nichts mehr abzuspielen.",
+    "audioGoneNoTracks": "Es sind keine Spuren mehr da, die sich abspielen oder zeichnen ließen.",
+    "audioGoneReadInstead": "Transkript lesen",
+    "noDescriptionYet": "Zu dieser Besprechung wurde noch nichts geschrieben.",
+    "nameThisMeeting": "Benennen",
+    "sampleRateLabel": "Abtastrate",
+    "channelsLabel": "Kanäle",
+    "storedLabel": "Gespeichert",
+    "sizeKilohertz": "{rate} kHz",
+    "channelCount": "Mono | {count} Kanäle",
+    "sizeKilobytes": "{size} kB",
+    "sizeMegabytes": "{size} MB",
+    "transcriptHeading": "Was gesagt wurde",
+    "transcriptNote": "Genauso zusammengesetzt wie das Protokoll und aus denselben Wörtern, damit beide nicht auseinanderlaufen. Jeder Beitrag trägt, wie weit er in der Besprechung gesprochen wurde – auf derselben Uhr, nach der auch der Abspieler läuft.",
+    "transcriptSpeakersHeading": "Im Protokoll:",
+    "transcriptAlsoNamed": "{name} steht dort als {external}",
+    "transcriptAtLabel": "Zeitpunkt in der Besprechung",
+    "transcriptRecordingHeading": "Diese Besprechung wird noch aufgezeichnet.",
+    "transcriptRecordingDetail": "Die Transkription beginnt erst, wenn die Sitzung endet – es gibt also noch nichts zu lesen.",
+    "transcriptPendingHeading": "Wird noch transkribiert.",
+    "transcriptPendingDetail": "Eine Stimme ist noch nicht durch die Transkription gelaufen. Die Wörter erscheinen hier, sobald sie fertig ist. | {count} Stimmen sind noch nicht durch die Transkription gelaufen. Die Wörter erscheinen hier, sobald sie fertig ist.",
+    "transcriptSilentHeading": "Es wurde nichts Hörbares gesagt.",
+    "transcriptSilentDetail": "Alle aufgezeichneten Stimmen sind durch die Transkription gelaufen, und keine davon hat Wörter ergeben.",
+    "transcriptPartial": "Eine Stimme wird noch transkribiert – das ist also noch nicht alles. | {count} Stimmen werden noch transkribiert – das ist also noch nicht alles.",
+    "transcriptFailedHeading": "Die Wörter konnten nicht gelesen werden.",
+    "transcriptFailedDetail": "Mit der Aufnahme selbst ist alles in Ordnung – nur dieses Transkript wurde nicht geladen.",
+    "nameHeading": "Titel und Beschreibung",
+    "nameNote": "Worum es in dieser Besprechung ging. Alle, die dabei waren, lesen das und können es ändern – anders als die eigenen Schlagwörter darunter, die sonst niemand zu sehen bekommt.",
+    "nameTitleLabel": "Titel",
+    "nameTitlePlaceholder": "Sprint 34 Planung",
+    "nameDescriptionLabel": "Beschreibung",
+    "nameDescriptionPlaceholder": "Was entschieden wurde und wer was übernimmt.",
+    "nameReplaceNote": "Speichern schreibt beide Felder gemeinsam. Ein leer gelassenes Feld ist für alle geleert, die in dieser Besprechung waren.",
+    "nameSave": "Speichern",
+    "nameSaving": "Wird gespeichert…",
+    "nameSaved": "Gespeichert.",
+    "nameUnsaved": "Noch nicht gespeichert.",
+    "nameTitleTooLong": "Ein Titel darf höchstens {count} Zeichen lang sein.",
+    "nameDescriptionTooLong": "Eine Beschreibung darf höchstens {count} Zeichen lang sein.",
+    "nameSaveUnreachable": "Das konnte nicht gespeichert werden: Die Konsole hat den Server nicht erreicht.",
+    "nameSaveGone": "Diese Aufnahme lässt sich nicht mehr benennen.",
+    "nameSaveRefused": "Der Server hat diesen Text abgelehnt. Ein Titel muss auf eine Zeile passen, und keines der beiden Felder darf unsichtbare Steuerzeichen enthalten.",
+    "nameSaveFailed": "Das konnte nicht gespeichert werden. Es wurde nichts geändert."
   },
   "calendar": {
     "loadingYear": "Kalender für {year} wird geladen.",
diff --git a/console/i18n/locales/en.json b/console/i18n/locales/en.json
index 882e43b..c6aca18 100644
--- a/console/i18n/locales/en.json
+++ b/console/i18n/locales/en.json
@@ -207,7 +207,7 @@
     "loadingList": "Loading your sessions.",
     "loadingOne": "Loading this recording.",
     "one": "Recording",
-    "headTitle": "{channel} — Recording",
+    "headTitle": "{name} — Recording",
     "channelById": "Channel {id}",
     "channelUnnamed": "Unnamed channel",
     "intro": "These are the meetings you were in. Sturnus records one track per speaker who consented before the recording began, and nobody else — anyone in the channel who did not consent is listed but has no audio here. This is the material each protocol was transcribed from, so when a protocol reads wrong, this is where the answer is.",
@@ -269,7 +269,7 @@
     "wholeMeetingHeading": "The whole meeting",
     "wholeMeetingNote": "Every speaker on one transport, which is the only way a conversation makes sense. Solo and mute turn tracks down rather than stopping them, so unmuting lands you where everybody else already is.",
     "eachTrackHeading": "Each track on its own",
-    "eachTrackNote": "For when the question is what one person said rather than what was discussed. Each player is independent of the transport above and of every other track here.",
+    "eachTrackNote": "For when the question is what one person said rather than what was discussed. Each player here is its own — independent of the transport on the meeting tab, and of every other track.",
     "noAudio": "Nobody in this session had consented before it began, so there is no audio.",
     "trackAlone": "{name} on their own",
     "pauseAll": "Pause every track",
@@ -311,7 +311,58 @@
     "tagSaveGone": "This recording is no longer yours to label.",
     "tagSaveFailed": "Your tags could not be saved. Nothing was changed.",
     "tagAdded": "Tag added.",
-    "tagRemoved": "Tag removed."
+    "tagRemoved": "Tag removed.",
+    "tabsLabel": "Parts of this recording",
+    "tabMeeting": "The meeting",
+    "tabTracks": "Tracks",
+    "tabTranscript": "Transcript",
+    "tabDetails": "Details",
+    "aboutHeading": "About this meeting",
+    "audioGoneHeading": "The audio has been erased.",
+    "audioGoneDetail": "Sturnus deletes a recording once its retention window closes. Everything written from it stays: the transcript, the protocol, and the measurements taken while it was still here.",
+    "audioGoneNothingToPlay": "There is nothing left to play here.",
+    "audioGoneNoTracks": "There are no tracks left to play or to draw.",
+    "audioGoneReadInstead": "Read the transcript",
+    "noDescriptionYet": "Nothing has been written about this meeting yet.",
+    "nameThisMeeting": "Name it",
+    "sampleRateLabel": "Sample rate",
+    "channelsLabel": "Channels",
+    "storedLabel": "Stored",
+    "sizeKilohertz": "{rate} kHz",
+    "channelCount": "mono | {count} channels",
+    "sizeKilobytes": "{size} kB",
+    "sizeMegabytes": "{size} MB",
+    "transcriptHeading": "What was said",
+    "transcriptNote": "Assembled the way the protocol was, out of the same words, so the two cannot tell different stories. Each turn carries how far into the meeting it was spoken, on the same clock the transport runs on.",
+    "transcriptSpeakersHeading": "In the protocol:",
+    "transcriptAlsoNamed": "{name} is written as {external}",
+    "transcriptAtLabel": "Into the meeting",
+    "transcriptRecordingHeading": "This meeting is still being recorded.",
+    "transcriptRecordingDetail": "Transcription starts when the session closes, so there is nothing to read yet.",
+    "transcriptPendingHeading": "Still being transcribed.",
+    "transcriptPendingDetail": "One speaker has not been through the transcriber yet. The words appear here once it has finished. | {count} speakers have not been through the transcriber yet. The words appear here once it has finished.",
+    "transcriptSilentHeading": "Nothing was said that could be heard.",
+    "transcriptSilentDetail": "Every recorded speaker has been through the transcriber, and none of it produced any words.",
+    "transcriptPartial": "One speaker is still being transcribed, so this is not all of it yet. | {count} speakers are still being transcribed, so this is not all of it yet.",
+    "transcriptFailedHeading": "The words could not be read.",
+    "transcriptFailedDetail": "The recording itself is fine — it is only this transcript that did not load.",
+    "nameHeading": "Title and description",
+    "nameNote": "What this meeting was. Everybody who was in it reads this and any of them can change it — unlike your tags below, which nobody else ever sees.",
+    "nameTitleLabel": "Title",
+    "nameTitlePlaceholder": "Sprint 34 planning",
+    "nameDescriptionLabel": "Description",
+    "nameDescriptionPlaceholder": "What was decided, and who is doing what.",
+    "nameReplaceNote": "Saving writes both fields at once. A field left empty is cleared for everybody who was in this meeting.",
+    "nameSave": "Save",
+    "nameSaving": "Saving…",
+    "nameSaved": "Saved.",
+    "nameUnsaved": "Not saved yet.",
+    "nameTitleTooLong": "A title can be at most {count} characters.",
+    "nameDescriptionTooLong": "A description can be at most {count} characters.",
+    "nameSaveUnreachable": "This could not be saved: the console could not reach the server.",
+    "nameSaveGone": "This recording is no longer yours to name.",
+    "nameSaveRefused": "The server refused this text. A title has to fit on one line, and neither field may carry invisible control characters.",
+    "nameSaveFailed": "This could not be saved. Nothing was changed."
   },
   "calendar": {
     "loadingYear": "Loading the calendar for {year}.",
diff --git a/console/test/recordingName.spec.ts b/console/test/recordingName.spec.ts
new file mode 100644
index 0000000..0709afa
--- /dev/null
+++ b/console/test/recordingName.spec.ts
@@ -0,0 +1,227 @@
+/**
+ * Whether the title editor can lose a description.
+ *
+ * `~/utils/sessionNaming` proves that no *shape* it offers can build a
+ * half body. What a module cannot prove is that the component uses it —
+ * a form that assembled `{ title }` inline would type-check, read like
+ * care, and clear four colleagues' paragraph on every rename. That is the
+ * bug this file exists for, and only a mount that watches the request
+ * leave can see it.
+ *
+ * The other half is the interaction rules `RecordingTags` established and
+ * this component was asked to match rather than fork: a button disabled
+ * rather than removed while it works, a live region that is in the DOM
+ * before it has anything to say, and the server's answer replacing what
+ * was typed.
+ *
+ * The locale files are the real ones, for the reason `uiComponents.spec`
+ * gives: a template asking for `recordings.nameHeadng` renders the key at
+ * somebody, and nothing but a render catches it.
+ */
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { flushPromises, mount } from '@vue/test-utils'
+import { computed, ref, watch } from 'vue'
+import { createI18n, useI18n } from 'vue-i18n'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import RecordingName from '../app/components/RecordingName.vue'
+import { useSay } from '../app/composables/useSay'
+import { ApiError } from '../app/utils/apiError'
+import type { SessionName } from '../app/utils/sessionNaming'
+
+function load(locale: string) {
+  return JSON.parse(readFileSync(resolve(process.cwd(), `i18n/locales/${locale}.json`), 'utf8'))
+}
+
+/** Every call the component made, so a test can read the body it sent. */
+interface Sent {
+  path: string
+  body: unknown
+}
+
+function render(name: SessionName, answer: (body: unknown) => Promise<SessionName>) {
+  const sent: Sent[] = []
+  vi.stubGlobal('ref', ref)
+  vi.stubGlobal('computed', computed)
+  vi.stubGlobal('watch', watch)
+  vi.stubGlobal('useId', () => 'name-field')
+  vi.stubGlobal('useI18n', () => ({
+    ...useI18n(),
+    locales: computed(() => [{ code: 'en', language: 'en-GB' }]),
+  }))
+  vi.stubGlobal('useSay', useSay)
+  vi.stubGlobal('useApi', () => (path: string, options: { body?: unknown } = {}) => {
+    sent.push({ path, body: options.body })
+    return answer(options.body)
+  })
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: { en: load('en'), de: load('de') },
+  })
+  const form = mount(RecordingName, {
+    props: { sessionId: '4711', name },
+    global: { plugins: [i18n] },
+  })
+  return { form, sent }
+}
+
+const stores = (name: SessionName) => () => Promise.resolve(name)
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('saving a title', () => {
+  it('sends the description alongside it, always', () => {
+    // The bug. `PUT` replaces, so a body without a description stores
+    // null over it — for everybody who was in the meeting, with no
+    // history to get it back from.
+    const stored: SessionName = { title: 'Sprint 34', description: 'we agreed to split it' }
+    const { form, sent } = render(stored, stores({ ...stored, title: 'Sprint 35' }))
+
+    return form
+      .get('input[type="text"]')
+      .setValue('Sprint 35')
+      .then(() => form.get('form').trigger('submit'))
+      .then(flushPromises)
+      .then(() => {
+        expect(sent).toHaveLength(1)
+        expect(sent[0]!.path).toBe('/sessions/4711/name')
+        expect(sent[0]!.body).toEqual({
+          title: 'Sprint 35',
+          description: 'we agreed to split it',
+        })
+      })
+  })
+
+  it('sends the title alongside a description that changed', async () => {
+    // The same failure the other way round, which is the one a "save only
+    // what changed" optimisation would introduce second.
+    const stored: SessionName = { title: 'Sprint 34', description: 'old' }
+    const { form, sent } = render(stored, stores({ ...stored, description: 'new' }))
+
+    await form.get('textarea').setValue('new')
+    await form.get('form').trigger('submit')
+    await flushPromises()
+
+    expect(sent[0]!.body).toEqual({ title: 'Sprint 34', description: 'new' })
+  })
+
+  it('clears a field on purpose when somebody empties it', async () => {
+    // Clearing has to be expressible, or whatever the first person wrote
+    // stands for good. `null` and not `''`: one spelling for "nothing".
+    const stored: SessionName = { title: 'Sprint 34', description: 'old' }
+    const { form, sent } = render(stored, stores({ title: 'Sprint 34', description: null }))
+
+    await form.get('textarea').setValue('   ')
+    await form.get('form').trigger('submit')
+    await flushPromises()
+
+    expect(sent[0]!.body).toEqual({ title: 'Sprint 34', description: null })
+  })
+
+  it('shows what the server stored rather than what was typed', async () => {
+    // Normalisation may have changed the text. A form showing its own
+    // input back keeps displaying a title the database does not have.
+    const { form } = render(
+      { title: null, description: null },
+      stores({ title: 'Sprint 34 planning', description: null }),
+    )
+
+    await form.get('input[type="text"]').setValue('  Sprint\n34   planning ')
+    await form.get('form').trigger('submit')
+    await flushPromises()
+
+    expect((form.get('input[type="text"]').element as HTMLInputElement).value).toBe(
+      'Sprint 34 planning',
+    )
+  })
+})
+
+describe('the control itself', () => {
+  it('offers one button for the two fields', () => {
+    // Two buttons would be two writes, and either of them would clear the
+    // other field. There is no interface in which somebody wants that.
+    const { form } = render({ title: 'Sprint 34', description: 'x' }, stores({
+      title: 'Sprint 34',
+      description: 'x',
+    }))
+    expect(form.findAll('button')).toHaveLength(1)
+  })
+
+  it('is unavailable while nothing has changed', () => {
+    // So that an available Save means there is something to save.
+    const { form } = render({ title: 'Sprint 34', description: 'x' }, stores({
+      title: 'Sprint 34',
+      description: 'x',
+    }))
+    expect(form.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('stays unavailable for a stray space the keyboard added', async () => {
+    const { form } = render({ title: 'Sprint 34', description: 'x' }, stores({
+      title: 'Sprint 34',
+      description: 'x',
+    }))
+    await form.get('input[type="text"]').setValue(' Sprint  34 ')
+    expect(form.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('becomes available the moment the text differs', async () => {
+    const { form } = render({ title: 'Sprint 34', description: 'x' }, stores({
+      title: 'Sprint 35',
+      description: 'x',
+    }))
+    await form.get('input[type="text"]').setValue('Sprint 35')
+    expect(form.get('button').attributes('disabled')).toBeUndefined()
+  })
+
+  it('says out loud that the write replaces and that it is shared', () => {
+    // Both halves are surprises, and finding either of them out
+    // afterwards is not a reasonable way to learn it.
+    const { form } = render({ title: null, description: null }, stores({
+      title: null,
+      description: null,
+    }))
+    const note = form.text()
+    expect(note).toContain('Saving writes both fields at once')
+    expect(note).toContain('Everybody who was in it reads this')
+  })
+
+  it('carries a live region before it has anything to say', () => {
+    // A live region added at the moment of the announcement announces
+    // nothing.
+    const { form } = render({ title: null, description: null }, stores({
+      title: null,
+      description: null,
+    }))
+    expect(form.get('[role="status"]').attributes('aria-live')).toBe('polite')
+  })
+
+  it('keeps the button on screen and disabled while a save is refused', async () => {
+    // Never removed while it works: a control that unmounts itself when
+    // pressed drops the keyboard to the top of the document.
+    const { form } = render({ title: null, description: null }, () =>
+      Promise.reject(new ApiError('/sessions/4711/name', { status: 400 })),
+    )
+    await form.get('input[type="text"]').setValue('Sprint 34')
+    await form.get('form').trigger('submit')
+    await flushPromises()
+
+    expect(form.findAll('button')).toHaveLength(1)
+    expect(form.get('[role="status"]').text()).toContain('The server refused this text')
+  })
+
+  it('renders sentences rather than translation keys', () => {
+    const { form } = render({ title: null, description: null }, stores({
+      title: null,
+      description: null,
+    }))
+    expect(form.text()).not.toMatch(/recordings\.[a-zA-Z]+/)
+  })
+})
diff --git a/console/test/recordingRow.spec.ts b/console/test/recordingRow.spec.ts
index bcd968b..48e6baf 100644
--- a/console/test/recordingRow.spec.ts
+++ b/console/test/recordingRow.spec.ts
@@ -42,6 +42,9 @@ function track(over: Partial<SessionTrack> = {}): SessionTrack {
     audio_seconds: 600,
     speech_seconds: 150,
     segment_count: 12,
+    sample_rate: 48000,
+    channels: 2,
+    stored_bytes: 12_400_000,
     ...over,
   }
 }
@@ -54,6 +57,8 @@ function session(over: Partial<RecordedSession> = {}): RecordedSession {
     duration_seconds: 3600,
     channel_id: '987000000000000002',
     channel_name: 'standup',
+    title: null,
+    description: null,
     document_url: 'https://outline.example/doc/7f2b',
     other_participants: [{ discord_user_id: '4', display_name: 'Bo' }],
     tracks: [track()],
diff --git a/console/test/recordingTabs.spec.ts b/console/test/recordingTabs.spec.ts
new file mode 100644
index 0000000..7516f97
--- /dev/null
+++ b/console/test/recordingTabs.spec.ts
@@ -0,0 +1,135 @@
+/**
+ * How a recording is divided, and which part of it a bare link opens.
+ *
+ * Two of these properties are load-bearing for links that already exist in
+ * other people's documents, and neither is visible from a render:
+ *
+ * - **The plain address stays plain.** `~/utils/uiTabs` drops the query
+ *   parameter for the *first* tab, so reordering the list silently turns
+ *   `/recordings/4711` into a synonym for a different panel — and every
+ *   protocol, chat message and bookmark pointing at that address follows
+ *   it.
+ * - **No tab is disabled.** A disabled first tab moves the default;
+ *   `tabFromQuery` also falls back off a disabled tab, so `?tab=tracks` in
+ *   somebody's bookmark would quietly open something else.
+ *
+ * The rest of the file is the division itself, pinned so that adding a
+ * fifth tab is a diff a reviewer is asked about rather than one that
+ * arrives with a component.
+ */
+import { describe, expect, it } from 'vitest'
+
+import {
+  RECORDING_DEFAULT_TAB,
+  RECORDING_TABS,
+  recordingTabQuery,
+  recordingTabs,
+} from '../app/utils/recordingTabs'
+import { TAB_QUERY, queryForTab, tabFromQuery } from '../app/utils/uiTabs'
+
+const TABS = recordingTabs((key) => key)
+
+describe('the four parts of a recording', () => {
+  it('are the meeting, the tracks, the transcript and the details', () => {
+    // Named rather than counted: a fifth tab is a design decision, and a
+    // test that only counted them would let one arrive unremarked.
+    expect(RECORDING_TABS.map((tab) => tab.id)).toEqual([
+      'meeting',
+      'tracks',
+      'transcript',
+      'details',
+    ])
+  })
+
+  it('has no tab for metadata, because the facts are elsewhere', () => {
+    // The session's own facts are in the header above the bar; the audio
+    // measurements are in the row of the track they describe. Neither is a
+    // tab, and this is the check that fails if one comes back.
+    expect(RECORDING_TABS.map((tab) => tab.id)).not.toContain('metadata')
+  })
+
+  it('has no tab for the re-queue panel, which most readers cannot see', () => {
+    // It lives on `details`. A tab that renders nothing for everybody who
+    // does not administer the guild is an empty tab for almost everybody,
+    // and it could only appear after a round trip — which would move every
+    // tab beside it and change what a bare address opens.
+    expect(RECORDING_TABS.map((tab) => tab.id)).not.toContain('queue')
+  })
+
+  it('carries a key for every label rather than a sentence', () => {
+    // `i18n/README.md`: a module under `app/utils` returns keys and the
+    // template calls `$t`. A label written out here is a German page with
+    // an English hole in it.
+    for (const tab of RECORDING_TABS) {
+      expect(tab.labelKey).toMatch(/^recordings\.tab[A-Z]/)
+    }
+  })
+
+  it('translates its labels through whatever the page hands it', () => {
+    expect(recordingTabs((key) => `<${key}>`)[0]).toEqual({
+      id: 'meeting',
+      label: '<recordings.tabMeeting>',
+    })
+  })
+
+  it('leaves every tab openable', () => {
+    // `tabFromQuery` falls back off a disabled tab and `moveTab` skips
+    // one. Both would redirect a link somebody had already shared.
+    for (const tab of TABS) expect(tab.disabled).toBeUndefined()
+  })
+})
+
+describe('what a bare recording address opens', () => {
+  it('is the meeting', () => {
+    // Somebody arriving from the list has already been shown the date, the
+    // channel, who was in it and whether a protocol exists — everything
+    // except the audio. Somebody arriving from a protocol has read the
+    // words. Both came for the recording.
+    expect(RECORDING_DEFAULT_TAB).toBe('meeting')
+  })
+
+  it('is the tab `uiTabs` would choose with nothing in the address', () => {
+    // The default is the first tab, and it is decided in one place. Two
+    // statements of it would be two things to keep in step.
+    expect(tabFromQuery(undefined, TABS)).toBe(RECORDING_DEFAULT_TAB)
+    expect(RECORDING_TABS[0]?.id).toBe(RECORDING_DEFAULT_TAB)
+  })
+
+  it('is what an unreadable tab name falls back to', () => {
+    // A typo in an address bar, or a bookmark from before a rename. An
+    // error page would turn a slip into a dead end.
+    expect(tabFromQuery('nonsense', TABS)).toBe('meeting')
+    expect(tabFromQuery(['transcript', 'tracks'], TABS)).toBe('transcript')
+  })
+})
+
+describe('a link from one panel to another', () => {
+  it('names the tab it points at', () => {
+    expect(recordingTabQuery({}, 'transcript')).toEqual({ [TAB_QUERY]: 'transcript' })
+  })
+
+  it('leaves the default tab out of the address', () => {
+    // So that `/recordings/4711` never becomes a synonym for
+    // `/recordings/4711?tab=meeting`, and the canonical address of a
+    // recording stays the one people paste.
+    expect(recordingTabQuery({ [TAB_QUERY]: 'tracks' }, 'meeting')).toEqual({})
+  })
+
+  it('keeps everything else in the address', () => {
+    // The audio tabs point at the transcript, and a link that dropped the
+    // rest of the query would move the reader somewhere they did not ask
+    // to be.
+    expect(recordingTabQuery({ from: '2026-08-01' }, 'tracks')).toEqual({
+      from: '2026-08-01',
+      [TAB_QUERY]: 'tracks',
+    })
+  })
+
+  it('says exactly what `uiTabs` would say, given the same list', () => {
+    // The wrapper exists so a page does not have to invent labels to ask
+    // an arithmetic question. It must not become a second answer.
+    expect(recordingTabQuery({ page: '2' }, 'details')).toEqual(
+      queryForTab({ page: '2' }, TABS, 'details'),
+    )
+  })
+})
diff --git a/console/test/recordingTrackList.spec.ts b/console/test/recordingTrackList.spec.ts
new file mode 100644
index 0000000..4101fcc
--- /dev/null
+++ b/console/test/recordingTrackList.spec.ts
@@ -0,0 +1,148 @@
+/**
+ * What is left of a track once its audio has been swept.
+ *
+ * The notice above the tab bar promises that everything written from a
+ * recording survives the recording: the transcript, the protocol, and the
+ * measurements. A list that dropped the measurements along with the audio
+ * would make that sentence false on the one page it is displayed on — and
+ * a list that kept the `<audio>` elements would give an eight-speaker
+ * meeting eight failing players and no explanation. Both are one prop, and
+ * only a render can tell which side of it a template is on.
+ *
+ * The other property here is `null` never becoming `0`. `~/utils/recordings`
+ * proves the module returns nothing for a measurement nobody took; this
+ * proves the em dash reaches the screen rather than being swallowed by a
+ * `v-if` that treats an absence as a falsy number.
+ */
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { mount } from '@vue/test-utils'
+import { computed, ref } from 'vue'
+import { createI18n, useI18n } from 'vue-i18n'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import RecordingTrackList from '../app/components/RecordingTrackList.vue'
+import { useSay } from '../app/composables/useSay'
+import type { RecordedSession, SessionTrack } from '../app/utils/recordings'
+
+function load(locale: string) {
+  return JSON.parse(readFileSync(resolve(process.cwd(), `i18n/locales/${locale}.json`), 'utf8'))
+}
+
+function track(over: Partial<SessionTrack> = {}): SessionTrack {
+  return {
+    discord_user_id: '100',
+    display_name: 'anna',
+    audio_seconds: 600,
+    speech_seconds: 150,
+    segment_count: 12,
+    sample_rate: 48000,
+    channels: 2,
+    stored_bytes: 12_440_000,
+    ...over,
+  }
+}
+
+function session(tracks: SessionTrack[]): RecordedSession {
+  return {
+    id: '4711',
+    started_at: '2026-08-21T14:05:00+00:00',
+    ended_at: '2026-08-21T15:05:00+00:00',
+    duration_seconds: 3600,
+    channel_id: '9870',
+    channel_name: 'standup',
+    title: null,
+    description: null,
+    document_url: null,
+    other_participants: [],
+    tracks,
+    tags: [],
+  }
+}
+
+function render(tracks: SessionTrack[], playable = true) {
+  vi.stubGlobal('ref', ref)
+  vi.stubGlobal('computed', computed)
+  vi.stubGlobal('useRuntimeConfig', () => ({ public: { apiBase: '/api' } }))
+  vi.stubGlobal('useI18n', () => ({
+    ...useI18n(),
+    locales: computed(() => [{ code: 'en', language: 'en-GB' }]),
+  }))
+  vi.stubGlobal('useSay', useSay)
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: { en: load('en'), de: load('de') },
+  })
+  return mount(RecordingTrackList, {
+    props: { session: session(tracks), playable },
+    global: {
+      plugins: [i18n],
+      // The spectrogram fetches on mount and is a component of its own,
+      // tested elsewhere. What matters here is whether one is asked for.
+      stubs: { TrackSpectrogram: { template: '<div data-spectrogram />' } },
+    },
+  })
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('a track that still has its audio', () => {
+  it('gets a player and a picture', () => {
+    const list = render([track()])
+    expect(list.findAll('audio')).toHaveLength(1)
+    expect(list.findAll('[data-spectrogram]')).toHaveLength(1)
+  })
+
+  it('names its player, so eight in a row are eight different speakers', () => {
+    expect(render([track()]).get('audio').attributes('aria-label')).toBe('anna on their own')
+  })
+
+  it('fetches nothing until somebody presses play', () => {
+    expect(render([track()]).get('audio').attributes('preload')).toBe('none')
+  })
+
+  it('says what the file is, beside the audio it describes', () => {
+    const text = render([track()]).text()
+    expect(text).toContain('48 kHz')
+    expect(text).toContain('2 channels')
+    expect(text).toContain('12.4 MB')
+  })
+})
+
+describe('a track whose audio has been swept', () => {
+  it('keeps the measurements, because the notice promises it does', () => {
+    const list = render([track()], false)
+    expect(list.text()).toContain('48 kHz')
+    expect(list.text()).toContain('12.4 MB')
+  })
+
+  it('mounts no player for a file that is not there', () => {
+    // Eight failing `<audio>` elements is what "looking broken" means.
+    const list = render([track()], false)
+    expect(list.findAll('audio')).toHaveLength(0)
+    expect(list.findAll('[data-spectrogram]')).toHaveLength(0)
+  })
+})
+
+describe('a measurement nobody took', () => {
+  it('reads as an absence and never as a zero', () => {
+    // Every track written before migration 0013 has all three null, and
+    // `0 kB` is a claim about somebody's recording this console cannot
+    // support.
+    const list = render([track({ sample_rate: null, channels: null, stored_bytes: null })])
+    expect(list.text()).toContain('—')
+    expect(list.text()).not.toContain('0 kB')
+    expect(list.text()).not.toContain('0 kHz')
+  })
+
+  it('leaves the three labels in place, so the gap is a gap', () => {
+    const list = render([track({ sample_rate: null, channels: null, stored_bytes: null })])
+    expect(list.findAll('dt')).toHaveLength(3)
+    expect(list.text()).toContain('Sample rate')
+  })
+})
diff --git a/console/test/recordingTranscript.spec.ts b/console/test/recordingTranscript.spec.ts
new file mode 100644
index 0000000..2e820a3
--- /dev/null
+++ b/console/test/recordingTranscript.spec.ts
@@ -0,0 +1,176 @@
+/**
+ * Whether the three empty transcripts read as three different things.
+ *
+ * `~/utils/transcript` decides which of them a payload is, and is tested
+ * there. What a module cannot show is that the sentence it chose reaches
+ * the screen: a template with the heading wired up and the detail left on
+ * the floor renders one word of the answer, and a template that fell
+ * through to a single "nothing here" would pass every module test in the
+ * suite. That failure is the reason `pending_tracks` is on the endpoint at
+ * all, so it is worth a render.
+ *
+ * The locale files are the real ones, so a key that does not exist renders
+ * as itself and fails here rather than in front of a reader.
+ */
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { mount } from '@vue/test-utils'
+import { computed } from 'vue'
+import { createI18n, useI18n } from 'vue-i18n'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import RecordingTranscript from '../app/components/RecordingTranscript.vue'
+import { useSay } from '../app/composables/useSay'
+import type { SessionTranscript } from '../app/utils/transcript'
+
+function load(locale: string) {
+  return JSON.parse(readFileSync(resolve(process.cwd(), `i18n/locales/${locale}.json`), 'utf8'))
+}
+
+function transcript(over: Partial<SessionTranscript> = {}): SessionTranscript {
+  return {
+    session_id: '4711',
+    started_at: '2026-08-21T14:05:00+00:00',
+    ended_at: '2026-08-21T15:05:00+00:00',
+    audio_available: true,
+    pending_tracks: 0,
+    participants: [
+      {
+        discord_user_id: '100',
+        display_name: 'anna',
+        external_user_id: null,
+        external_display_name: null,
+      },
+    ],
+    blocks: [
+      {
+        discord_user_id: '100',
+        display_name: 'anna',
+        started_at: '2026-08-21T14:07:30+00:00',
+        text: 'wir sind uns einig',
+      },
+    ],
+    ...over,
+  }
+}
+
+function render(over: Partial<SessionTranscript> = {}, locale = 'en') {
+  vi.stubGlobal('computed', computed)
+  vi.stubGlobal('useI18n', () => ({
+    ...useI18n(),
+    locales: computed(() => [
+      { code: 'en', language: 'en-GB' },
+      { code: 'de', language: 'de-DE' },
+    ]),
+  }))
+  vi.stubGlobal('useSay', useSay)
+  const i18n = createI18n({
+    legacy: false,
+    locale,
+    fallbackLocale: 'en',
+    messages: { en: load('en'), de: load('de') },
+  })
+  return mount(RecordingTranscript, {
+    props: { transcript: transcript(over) },
+    global: { plugins: [i18n] },
+  })
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('a transcript with words in it', () => {
+  it('renders one turn per block, in order', () => {
+    const view = render()
+    expect(view.findAll('ol > li')).toHaveLength(1)
+    expect(view.text()).toContain('wir sind uns einig')
+  })
+
+  it('anchors each turn to the clock the transport runs on', () => {
+    // Two minutes thirty into the meeting. Without it the transcript is a
+    // wall of prose with no way back into the recording it came from.
+    expect(render().get('ol > li').text()).toContain('2:30')
+  })
+
+  it('says nothing about a queue when there is nothing left in it', () => {
+    expect(render().text()).not.toContain('still being transcribed')
+  })
+
+  it('warns that it is not all of it when speakers are still in the queue', () => {
+    // A partial transcript reads as finished, and somebody concluding
+    // from it that a colleague said nothing has been misled.
+    expect(render({ pending_tracks: 2 }).text()).toContain('still being transcribed')
+  })
+
+  it('says who is written under another name in the protocol', () => {
+    // Somebody holding both documents otherwise finds two names for one
+    // colleague and no explanation.
+    const view = render({
+      participants: [
+        {
+          discord_user_id: '100',
+          display_name: 'anna',
+          external_user_id: 'u-1',
+          external_display_name: 'Anna A.',
+        },
+      ],
+    })
+    expect(view.text()).toContain('anna is written as Anna A.')
+  })
+
+  it('leaves the roster out when nobody is named twice', () => {
+    // Four lines between the reader and the words, answering a question
+    // nobody asked.
+    expect(render().text()).not.toContain('In the protocol:')
+  })
+})
+
+describe('a transcript with no words in it', () => {
+  it('says the meeting has not finished, when it has not', () => {
+    // Its jobs are not enqueued until it closes. Nothing failed and
+    // nothing is waiting; there is simply nothing to assemble yet.
+    const view = render({ ended_at: null, blocks: [], pending_tracks: 3 })
+    expect(view.text()).toContain('still being recorded')
+    expect(view.text()).toContain('Transcription starts when the session closes')
+    expect(view.findAll('ol > li')).toHaveLength(0)
+  })
+
+  it('says the words are coming, when speakers are still in the queue', () => {
+    const view = render({ blocks: [], pending_tracks: 2 })
+    expect(view.text()).toContain('Still being transcribed')
+    expect(view.text()).toContain('2 speakers have not been through the transcriber')
+  })
+
+  it('counts one speaker in the singular', () => {
+    // The plural branch is the locale file's to choose, and a sentence
+    // reading "1 speakers" is the console admitting nobody looked.
+    expect(render({ blocks: [], pending_tracks: 1 }).text()).toContain(
+      'One speaker has not been through the transcriber',
+    )
+  })
+
+  it('says nobody spoke, when the queue is empty and nothing came out', () => {
+    // A finished result rather than a wait. The distinction the two extra
+    // fields on the endpoint exist for.
+    const view = render({ blocks: [], pending_tracks: 0 })
+    expect(view.text()).toContain('Nothing was said that could be heard')
+    expect(view.text()).not.toContain('Still being transcribed')
+  })
+
+  it('never meets all three with the same sentence', () => {
+    const recording = render({ ended_at: null, blocks: [], pending_tracks: 3 }).text()
+    const waiting = render({ blocks: [], pending_tracks: 2 }).text()
+    const silent = render({ blocks: [], pending_tracks: 0 }).text()
+    expect(new Set([recording, waiting, silent]).size).toBe(3)
+  })
+})
+
+describe('the transcript in German', () => {
+  it('is German, and not the key nor the English', () => {
+    const view = render({ blocks: [], pending_tracks: 0 }, 'de')
+    expect(view.text()).toContain('Es wurde nichts Hörbares gesagt')
+    expect(view.text()).not.toMatch(/recordings\.[a-zA-Z]+/)
+  })
+})
diff --git a/console/test/recordings.spec.ts b/console/test/recordings.spec.ts
index 73d0a99..48aaebf 100644
--- a/console/test/recordings.spec.ts
+++ b/console/test/recordings.spec.ts
@@ -24,6 +24,7 @@ import {
   queueSpeakerLabel,
   queueStatusPath,
   queueStatusWords,
+  recordingNaming,
   recordingPath,
   requeuePath,
   seekTarget,
@@ -34,8 +35,12 @@ import {
   speakerSummary,
   speechShare,
   stampParts,
+  trackChannels,
   trackCoverage,
+  trackFileFacts,
   trackLabel,
+  trackSampleRate,
+  trackStoredSize,
   type RecordedSession,
   type QueueSnapshot,
   type QueueSpeaker,
@@ -50,6 +55,9 @@ function track(over: Partial<SessionTrack> = {}): SessionTrack {
     audio_seconds: 600,
     speech_seconds: 150,
     segment_count: 12,
+    sample_rate: 48000,
+    channels: 2,
+    stored_bytes: 12_400_000,
     ...over,
   }
 }
@@ -62,6 +70,8 @@ function session(over: Partial<RecordedSession> = {}): RecordedSession {
     duration_seconds: 3600,
     channel_id: '987000000000000002',
     channel_name: 'standup',
+    title: null,
+    description: null,
     document_url: 'https://outline.example/doc/standup-abc',
     other_participants: [],
     tags: [],
@@ -426,6 +436,8 @@ describe('how much of a session a track covers', () => {
     duration_seconds: duration,
     channel_id: '9',
     channel_name: 'standup',
+    title: null,
+    description: null,
     document_url: null,
     other_participants: [],
     tracks: [],
@@ -436,6 +448,9 @@ describe('how much of a session a track covers', () => {
     audio_seconds: audio,
     speech_seconds: null,
     segment_count: null,
+    sample_rate: null,
+    channels: null,
+    stored_bytes: null,
   })
 
   it('is the share of the meeting that track has audio for', () => {
@@ -574,3 +589,111 @@ describe('seeking a track from the keyboard', () => {
     expect(seekTarget('ArrowRight', 0, 0)).toBeNull()
   })
 })
+
+describe('what a recording page calls the meeting', () => {
+  it('is the channel while nobody has named it', () => {
+    expect(recordingNaming(session({ title: null }))).toEqual({
+      heading: '#standup',
+      under: null,
+    })
+  })
+
+  it('is the title once somebody has', () => {
+    // A name is somebody's own prose and is never translated, so the
+    // heading is the string itself rather than a key.
+    expect(recordingNaming(session({ title: 'Sprint 34 planning' })).heading).toBe(
+      'Sprint 34 planning',
+    )
+  })
+
+  it('demotes the channel rather than dropping it', () => {
+    // Where a meeting happened is still a fact, and it is what tells two
+    // meetings both called "Retro" apart. Under the heading, not gone.
+    expect(recordingNaming(session({ title: 'Retro' })).under).toBe('#standup')
+  })
+
+  it('keeps an unnamed channel a key even underneath a title', () => {
+    expect(
+      recordingNaming(session({ title: 'Retro', channel_name: null, channel_id: '9870' })),
+    ).toEqual({
+      heading: 'Retro',
+      under: { key: 'recordings.channelById', params: { id: '9870' } },
+    })
+  })
+
+  it('treats a title of nothing but spaces as no title', () => {
+    // The API stores `null` for one, and a heading of one space is a page
+    // with no heading at all.
+    expect(recordingNaming(session({ title: '   ' })).heading).toBe('#standup')
+  })
+})
+
+describe('what a track file is', () => {
+  it('says a sample rate in the unit anybody says it in', () => {
+    expect(trackSampleRate(track({ sample_rate: 48000 }))).toEqual({
+      key: 'recordings.sizeKilohertz',
+      params: { rate: 48 },
+    })
+  })
+
+  it('keeps the fraction of a rate that has one', () => {
+    // 44.1 kHz is a real rate and 44 kHz is a different one. Whether the
+    // separator is a point or a comma is the locale's to decide, which is
+    // why this stays a number.
+    expect(trackSampleRate(track({ sample_rate: 44100 }))?.params?.rate).toBe(44.1)
+  })
+
+  it('counts channels through a param, so each language names one itself', () => {
+    // English calls a single channel "mono". An `if` here would have
+    // decided that for German too.
+    expect(trackChannels(track({ channels: 1 }))).toEqual({
+      key: 'recordings.channelCount',
+      params: { count: 1 },
+    })
+  })
+
+  it('writes a small file in kilobytes and a large one in megabytes', () => {
+    // `0.3 MB` and `13421772` are both answers nobody can picture.
+    expect(trackStoredSize(track({ stored_bytes: 312_400 }))).toEqual({
+      key: 'recordings.sizeKilobytes',
+      params: { size: 312 },
+    })
+    expect(trackStoredSize(track({ stored_bytes: 12_440_000 }))).toEqual({
+      key: 'recordings.sizeMegabytes',
+      params: { size: 12.4 },
+    })
+  })
+
+  it('says nothing at all about a measurement that was never taken', () => {
+    // **Never a zero.** Every track written before migration 0013 has all
+    // three null, and `0 kB` where nothing was measured is a claim about
+    // somebody's recording that this console cannot support. `null` is
+    // what `useSay` turns into the one em dash the console has.
+    expect(trackSampleRate(track({ sample_rate: null }))).toBeNull()
+    expect(trackChannels(track({ channels: null }))).toBeNull()
+    expect(trackStoredSize(track({ stored_bytes: null }))).toBeNull()
+  })
+
+  it('still says zero when zero is what was measured', () => {
+    // An empty file is a measurement and a missing one is not, which is
+    // the distinction `formatMeasurement` keeps further up this file.
+    expect(trackStoredSize(track({ stored_bytes: 0 }))).toEqual({
+      key: 'recordings.sizeKilobytes',
+      params: { size: 0 },
+    })
+  })
+
+  it('offers three facts in one order, whatever is missing', () => {
+    // A gap in a row of three reads as a gap. A shorter row is something
+    // somebody has to count before they can tell which one is absent.
+    const complete = trackFileFacts(track())
+    const nothing = trackFileFacts(track({ sample_rate: null, channels: null, stored_bytes: null }))
+    expect(complete.map((fact) => fact.labelKey)).toEqual([
+      'recordings.sampleRateLabel',
+      'recordings.channelsLabel',
+      'recordings.storedLabel',
+    ])
+    expect(nothing.map((fact) => fact.labelKey)).toEqual(complete.map((fact) => fact.labelKey))
+    expect(nothing.every((fact) => fact.value === null)).toBe(true)
+  })
+})
diff --git a/console/test/sessionNaming.spec.ts b/console/test/sessionNaming.spec.ts
new file mode 100644
index 0000000..d182ccc
--- /dev/null
+++ b/console/test/sessionNaming.spec.ts
@@ -0,0 +1,215 @@
+/**
+ * Naming a meeting, and the one bug this module exists to make
+ * unwritable.
+ *
+ * `PUT /api/sessions/{id}/name` is a **replace**. A body carrying only a
+ * title stores `null` over the description, deliberately and correctly —
+ * absent and null are the same fact, and the endpoint chose one spelling
+ * for it. The failure that follows from that is a form which saves a title
+ * and silently deletes the paragraph underneath it, for everybody who was
+ * in the meeting, with no history to get it back from.
+ *
+ * It is the kind of bug that passes review, because the code that causes
+ * it reads like care: *only send what changed*. So the module is arranged
+ * so that no such body can be built, and the first block below is the
+ * check that keeps it that way.
+ */
+import { describe, expect, it } from 'vitest'
+
+import {
+  NAME_MAX_DESCRIPTION_CHARS,
+  NAME_MAX_TITLE_CHARS,
+  nameBodyFrom,
+  nameDraftFrom,
+  nameIsDirty,
+  nameRefusal,
+  nameWriteFailed,
+  sessionNamePath,
+} from '../app/utils/sessionNaming'
+
+describe('the body a save sends', () => {
+  it('always carries both members', () => {
+    // The whole point. A `PUT` is the name the meeting will have
+    // afterwards, and a member left out of it is a member cleared.
+    const body = nameBodyFrom({ title: 'Sprint 34 planning', description: '' })
+    expect(Object.keys(body).sort()).toEqual(['description', 'title'])
+  })
+
+  it('carries both members even when neither was ever typed', () => {
+    const body = nameBodyFrom({ title: '', description: '' })
+    expect(body).toEqual({ title: null, description: null })
+    expect('title' in body && 'description' in body).toBe(true)
+  })
+
+  it('sends a description untouched when only the title changed', () => {
+    // The shape of the bug: somebody fixes a typo in the name, and what
+    // four colleagues wrote about the meeting has to survive it.
+    expect(nameBodyFrom({ title: 'Sprint 34', description: 'we agreed to split it' })).toEqual({
+      title: 'Sprint 34',
+      description: 'we agreed to split it',
+    })
+  })
+
+  it('spells an empty field as null rather than as an empty string', () => {
+    // One spelling for "nobody has named this", which is the decision
+    // `sturnus.console.naming` took in the column.
+    expect(nameBodyFrom({ title: '   ', description: '\n\n' })).toEqual({
+      title: null,
+      description: null,
+    })
+  })
+
+  it('collapses a title to one line', () => {
+    // A title is rendered in a heading, a list row and a browser tab, none
+    // of which has a second line. A newline in one is a paste accident.
+    expect(nameBodyFrom({ title: '  Sprint\n 34   planning ', description: '' }).title).toBe(
+      'Sprint 34 planning',
+    )
+  })
+
+  it('keeps the line breaks in a description', () => {
+    // They are the shape of the text. Collapsing them turns an agenda into
+    // a run-on sentence.
+    expect(
+      nameBodyFrom({ title: '', description: 'Agenda\n\n- one\n- two\n' }).description,
+    ).toBe('Agenda\n\n- one\n- two')
+  })
+
+  it('normalises the line endings a textarea submits', () => {
+    // Every browser posts `\r\n` from a `<textarea>`, so keeping them
+    // would make the same paragraph typed on two machines two strings.
+    expect(nameBodyFrom({ title: '', description: 'one\r\ntwo\rthree' }).description).toBe(
+      'one\ntwo\nthree',
+    )
+  })
+
+  it('composes what a keyboard decomposed', () => {
+    // NFC, so a composed and a decomposed umlaut are stored as one string
+    // rather than as whichever keyboard produced them.
+    expect(nameBodyFrom({ title: 'Übergabe', description: '' }).title).toBe('Übergabe')
+  })
+})
+
+describe('the pair a form starts from', () => {
+  it('is what is stored', () => {
+    expect(nameDraftFrom({ title: 'Retro', description: 'went long' })).toEqual({
+      title: 'Retro',
+      description: 'went long',
+    })
+  })
+
+  it('turns an unnamed meeting into two empty boxes', () => {
+    // An `<input>` holds `''` and never `null`; a draft admitting both
+    // would restore the two spellings the API removed.
+    expect(nameDraftFrom({ title: null, description: null })).toEqual({
+      title: '',
+      description: '',
+    })
+    expect(nameDraftFrom(null)).toEqual({ title: '', description: '' })
+    expect(nameDraftFrom(undefined)).toEqual({ title: '', description: '' })
+  })
+})
+
+describe('whether there is anything to save', () => {
+  const stored = { title: 'Sprint 34', description: 'we agreed to split it' }
+
+  it('is false for the text that is already there', () => {
+    expect(nameIsDirty(stored, nameDraftFrom(stored))).toBe(false)
+  })
+
+  it('is false for a stray space the keyboard added', () => {
+    // Compared after normalisation, so a Save button that is available
+    // means there is something to save.
+    expect(nameIsDirty(stored, { title: ' Sprint  34 ', description: stored.description })).toBe(
+      false,
+    )
+  })
+
+  it('is true when the title changed', () => {
+    expect(nameIsDirty(stored, { title: 'Sprint 35', description: stored.description })).toBe(true)
+  })
+
+  it('is true when the description was emptied', () => {
+    // Clearing is a change and has to be savable. An editor that could not
+    // express "there is nothing to say about this" would leave whatever
+    // the first person wrote in place for good.
+    expect(nameIsDirty(stored, { title: stored.title, description: '' })).toBe(true)
+  })
+
+  it('is true when a meeting is named for the first time', () => {
+    expect(nameIsDirty({ title: null, description: null }, { title: 'Retro', description: '' })).toBe(
+      true,
+    )
+  })
+})
+
+describe('why a save is refused before it is spent', () => {
+  it('says nothing about ordinary text', () => {
+    expect(nameRefusal({ title: 'Sprint 34', description: 'short' })).toBeNull()
+  })
+
+  it('refuses a title past the ceiling the API enforces', () => {
+    const refusal = nameRefusal({ title: 'x'.repeat(NAME_MAX_TITLE_CHARS + 1), description: '' })
+    expect(refusal).toEqual({
+      key: 'recordings.nameTitleTooLong',
+      params: { count: NAME_MAX_TITLE_CHARS },
+    })
+  })
+
+  it('measures the text that would be sent, not the text in the box', () => {
+    // A title padded with spaces is shorter by the time it arrives, and
+    // refusing it would be this console disagreeing with the API about a
+    // rule it copied from it.
+    const padded = `${'x'.repeat(NAME_MAX_TITLE_CHARS)}${'   '}`
+    expect(nameRefusal({ title: padded, description: '' })).toBeNull()
+  })
+
+  it('refuses a description past its ceiling', () => {
+    expect(
+      nameRefusal({ title: '', description: 'y'.repeat(NAME_MAX_DESCRIPTION_CHARS + 1) }),
+    ).toEqual({
+      key: 'recordings.nameDescriptionTooLong',
+      params: { count: NAME_MAX_DESCRIPTION_CHARS },
+    })
+  })
+
+  it('allows exactly the ceiling', () => {
+    expect(nameRefusal({ title: 'x'.repeat(NAME_MAX_TITLE_CHARS), description: '' })).toBeNull()
+    expect(
+      nameRefusal({ title: '', description: 'y'.repeat(NAME_MAX_DESCRIPTION_CHARS) }),
+    ).toBeNull()
+  })
+})
+
+describe('what a failed save says', () => {
+  it('tells an unreachable server from a server that said no', () => {
+    // "Could not reach the API" and "the API refused" need different
+    // words: one of them is worth trying again immediately.
+    expect(nameWriteFailed(0)).toEqual({ key: 'recordings.nameSaveUnreachable' })
+  })
+
+  it('has its own sentence for a session that is no longer theirs', () => {
+    expect(nameWriteFailed(404)).toEqual({ key: 'recordings.nameSaveGone' })
+  })
+
+  it('has its own sentence for text the server would not store', () => {
+    // A 400 here is text that looks perfectly ordinary — a control
+    // character survives a paste invisibly — and "it could not be saved"
+    // would leave somebody re-typing a title that was never the problem.
+    expect(nameWriteFailed(400)).toEqual({ key: 'recordings.nameSaveRefused' })
+  })
+
+  it('falls back to one sentence for everything else', () => {
+    expect(nameWriteFailed(500)).toEqual({ key: 'recordings.nameSaveFailed' })
+  })
+})
+
+describe('where a name is written', () => {
+  it('is under the session it belongs to', () => {
+    expect(sessionNamePath('4711')).toBe('/sessions/4711/name')
+  })
+
+  it('escapes the id, because a slash in one addresses a different endpoint', () => {
+    expect(sessionNamePath('4711/../../queue')).toBe('/sessions/4711%2F..%2F..%2Fqueue/name')
+  })
+})
diff --git a/console/test/transcript.spec.ts b/console/test/transcript.spec.ts
new file mode 100644
index 0000000..70d95ec
--- /dev/null
+++ b/console/test/transcript.spec.ts
@@ -0,0 +1,229 @@
+/**
+ * A meeting's words, and the four different reasons there might be none.
+ *
+ * Three of them are an empty `blocks` and they are not the same news: one
+ * is a wait, one is a finished result, and one is a meeting that has not
+ * happened yet. A tab that met all three with "nothing here" is a tab
+ * people report as broken — which is why the endpoint carries
+ * `pending_tracks` at all, and this file is where that field earns its
+ * place.
+ *
+ * The fourth is not an empty transcript: `audio_available: false` is the
+ * retention sweep having taken the recordings and left the minutes. Two
+ * other tabs of the recording page depend on it, and the strictness of
+ * `transcriptAudioGone` is the property that keeps a failed request from
+ * being reported to somebody as data loss.
+ */
+import { describe, expect, it } from 'vitest'
+
+import {
+  transcriptAttribution,
+  transcriptAudioErased,
+  transcriptEmpty,
+  transcriptExternalNames,
+  transcriptOffset,
+  transcriptPartial,
+  transcriptPath,
+  type SessionTranscript,
+  type TranscriptBlock,
+  type TranscriptSpeaker,
+} from '../app/utils/transcript'
+
+function speaker(over: Partial<TranscriptSpeaker> = {}): TranscriptSpeaker {
+  return {
+    discord_user_id: '100',
+    display_name: 'anna',
+    external_user_id: null,
+    external_display_name: null,
+    ...over,
+  }
+}
+
+function block(over: Partial<TranscriptBlock> = {}): TranscriptBlock {
+  return {
+    discord_user_id: '100',
+    display_name: 'anna',
+    started_at: '2026-08-21T14:05:09+00:00',
+    text: 'wir sind uns einig',
+    ...over,
+  }
+}
+
+function transcript(over: Partial<SessionTranscript> = {}): SessionTranscript {
+  return {
+    session_id: '4711',
+    started_at: '2026-08-21T14:05:00+00:00',
+    ended_at: '2026-08-21T15:05:00+00:00',
+    audio_available: true,
+    pending_tracks: 0,
+    participants: [speaker()],
+    blocks: [block()],
+    ...over,
+  }
+}
+
+describe('whether the recordings have been erased', () => {
+  it('is true only when the endpoint said so', () => {
+    expect(transcriptAudioErased(transcript({ audio_available: false }), 2)).toBe(true)
+    expect(transcriptAudioErased(transcript({ audio_available: true }), 2)).toBe(false)
+  })
+
+  it('is false for a transcript that has not arrived', () => {
+    // The worst sentence this page could render is "your audio has been
+    // deleted" because a request timed out. Unknown is not gone.
+    expect(transcriptAudioErased(null, 2)).toBe(false)
+    expect(transcriptAudioErased(undefined, 2)).toBe(false)
+  })
+
+  it('is false for a session nobody consented to', () => {
+    // The flag counts jobs whose audio is not deleted, so a session with
+    // no jobs answers `false` as well. That is the same answer to the
+    // endpoint and entirely different news to a reader: "retention
+    // deleted your recording" against "nobody in this meeting had
+    // consented before it began", and only one of them is a loss.
+    expect(transcriptAudioErased(transcript({ audio_available: false }), 0)).toBe(false)
+  })
+})
+
+describe('why there are no words', () => {
+  it('is nothing at all when there are some', () => {
+    expect(transcriptEmpty(transcript())).toBeNull()
+  })
+
+  it('is "still being recorded" for a session with no end', () => {
+    // Its jobs are not enqueued until it closes, so there is nothing to
+    // assemble and never was. This is a different answer from a queue that
+    // is still running, and both arrive as zero blocks.
+    const open = transcript({ ended_at: null, blocks: [], pending_tracks: 3 })
+    expect(transcriptEmpty(open)?.heading).toEqual({
+      key: 'recordings.transcriptRecordingHeading',
+    })
+  })
+
+  it('is "still being transcribed" while speakers are in the queue', () => {
+    const waiting = transcript({ blocks: [], pending_tracks: 2 })
+    expect(transcriptEmpty(waiting)).toEqual({
+      heading: { key: 'recordings.transcriptPendingHeading' },
+      detail: { key: 'recordings.transcriptPendingDetail', params: { count: 2 } },
+    })
+  })
+
+  it('counts through a param, so each language picks its own plural', () => {
+    // `i18n/README.md`: never an `if` in a module. One speaker and five
+    // are one sentence with a hole in it.
+    const one = transcriptEmpty(transcript({ blocks: [], pending_tracks: 1 }))
+    expect(one?.detail.params?.count).toBe(1)
+  })
+
+  it('is "nobody said anything" once the queue is empty', () => {
+    // Every consenting speaker has been through the transcriber and none
+    // of it produced words. A finished result, not a wait.
+    expect(transcriptEmpty(transcript({ blocks: [], pending_tracks: 0 }))).toEqual({
+      heading: { key: 'recordings.transcriptSilentHeading' },
+      detail: { key: 'recordings.transcriptSilentDetail' },
+    })
+  })
+})
+
+describe('a transcript that is not all of it', () => {
+  it('says so when it has words and speakers still in the queue', () => {
+    // It reads as finished, and somebody concluding from it that a
+    // colleague said nothing has been misled by an omission.
+    expect(transcriptPartial(transcript({ pending_tracks: 1 }))).toEqual({
+      key: 'recordings.transcriptPartial',
+      params: { count: 1 },
+    })
+  })
+
+  it('says nothing when the transcript is whole', () => {
+    expect(transcriptPartial(transcript({ pending_tracks: 0 }))).toBeNull()
+  })
+
+  it('says nothing when there are no words at all', () => {
+    // An empty transcript is already explaining itself at the top of its
+    // own state; a second sentence saying the same thing is noise.
+    expect(transcriptPartial(transcript({ blocks: [], pending_tracks: 2 }))).toBeNull()
+  })
+})
+
+describe('how far into the meeting a turn was spoken', () => {
+  it('is measured from the start of the session', () => {
+    // The same clock the transport runs on, so a number taken off the
+    // transcript can be found in the audio.
+    expect(transcriptOffset(transcript(), block({ started_at: '2026-08-21T14:07:30+00:00' }))).toBe(
+      150,
+    )
+  })
+
+  it('never runs before the meeting it is in', () => {
+    // A negative offset is clock skew rendered as a fact.
+    expect(transcriptOffset(transcript(), block({ started_at: '2026-08-21T14:00:00+00:00' }))).toBe(
+      0,
+    )
+  })
+
+  it('is nothing at all when either instant is unreadable', () => {
+    // "The very beginning" is a claim, and this module does not make
+    // claims it cannot measure.
+    expect(transcriptOffset(transcript(), block({ started_at: 'not a date' }))).toBeNull()
+    expect(
+      transcriptOffset(transcript({ started_at: 'not a date' }), block()),
+    ).toBeNull()
+  })
+})
+
+describe('who a block is attributed to', () => {
+  it('collects the name the protocol prints, for the people who have one', () => {
+    const named = transcriptExternalNames(
+      transcript({
+        participants: [
+          speaker({ discord_user_id: '100', external_display_name: 'Anna A.' }),
+          speaker({ discord_user_id: '200', display_name: 'bo' }),
+        ],
+      }),
+    )
+    expect(named).toEqual({ '100': 'Anna A.' })
+  })
+
+  it('keeps nobody out of the map twice', () => {
+    // An entry holding `null` would be a speaker the roster has to check
+    // again before rendering.
+    const named = transcriptExternalNames(
+      transcript({ participants: [speaker({ external_display_name: '   ' })] }),
+    )
+    expect(named).toEqual({})
+  })
+
+  it('is the speaker own name when there is nothing else to say', () => {
+    // A name is somebody's own word and is never translated, so the plain
+    // case is the string itself rather than a key.
+    expect(transcriptAttribution(speaker(), null)).toBe('anna')
+  })
+
+  it('joins the two names with a sentence when they differ', () => {
+    expect(transcriptAttribution(speaker(), 'Anna A.')).toEqual({
+      key: 'recordings.transcriptAlsoNamed',
+      params: { name: 'anna', external: 'Anna A.' },
+    })
+  })
+
+  it('says one name once when both are the same', () => {
+    expect(transcriptAttribution(speaker({ display_name: 'Anna A.' }), 'Anna A.')).toBe('Anna A.')
+  })
+
+  it('falls back to the id for a speaker with no name left', () => {
+    // Somebody who has left the guild has no display name to look up, and
+    // a block attributed to an empty string is a block nobody can place.
+    expect(transcriptAttribution(speaker({ display_name: '  ' }), null)).toBe('100')
+  })
+})
+
+describe('where the words are read from', () => {
+  it('is under the session they belong to', () => {
+    expect(transcriptPath('4711')).toBe('/sessions/4711/transcript')
+  })
+
+  it('escapes the id, because a slash in one addresses a different endpoint', () => {
+    expect(transcriptPath('4711/../queue')).toBe('/sessions/4711%2F..%2Fqueue/transcript')
+  })
+})