diff --git a/webapp/src/api/queries.ts b/webapp/src/api/queries.ts
deleted file mode 100644
index 28aa675f..00000000
--- a/webapp/src/api/queries.ts
+++ /dev/null
@@ -1,688 +0,0 @@
-import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
-import { playsByInstant, scrobbleRows, tracksToName } from "../lib/scrobbling";
-import {
-  type AlbumSort,
-  type ArtistDetail,
-  ATTENTION_TRACKS_PAGE,
-  artistTopSongs,
-  canvasUrl,
-  FOLDER_TRACKS_PAGE,
-  getAlbum,
-  getArtist,
-  getAttentionSummary,
-  getLibrarySettings,
-  getListeningStats,
-  getLyrics,
-  getMix,
-  getPodcastChannel,
-  getPodcastOverview,
-  getQualitySummary,
-  getSmartPlaylist,
-  getTrack,
-  getTrackCredits,
-  getTrackOverrides,
-  getTrackProperties,
-  getTrackQuality,
-  listAlbums,
-  listApiTokens,
-  listArtistAlbums,
-  listArtists,
-  listAttentionTracks,
-  listBookmarks,
-  listCreditCandidates,
-  listCreditDecisions,
-  listFavorites,
-  listFolders,
-  listFolderTracks,
-  listGenreSongs,
-  listGenres,
-  listHistory,
-  listLibraries,
-  listLibraryMembers,
-  listMixes,
-  listNowPlaying,
-  listOwnApiTokens,
-  listPurgedTracks,
-  listQualityTracks,
-  listRadioStations,
-  listRandomSongs,
-  listScrobbleDestinations,
-  listScrobbleLinks,
-  listShares,
-  listSmartPlaylists,
-  listSongs,
-  listUnavailableTracks,
-  listUncertainScrobbles,
-  listUsers,
-  listVisiblePlaylists,
-  QUALITY_TRACKS_PAGE,
-  type QualityVerdict,
-  readOwnSubsonicCredential,
-  SONG_PAGE,
-  type SongSort,
-  type StatsPeriod,
-  search,
-  type TrackCategory,
-  UNAVAILABLE_PAGE,
-} from "./index";
-
-/**
- * Every question this client asks the server, and the key each answer is held
- * under.
- *
- * Gathered here rather than written at each screen, because a key is shared
- * state: two screens that spell one differently keep two copies of the same
- * answer and disagree after a mutation, and two that spell different questions
- * the same way serve each other's data. Neither mistake shows up in a type.
- *
- * A key is the question, argument by argument — `["albums", sort, scope]` and
- * not `["albums"]` — so changing a sort or a library asks again instead of
- * returning what the other one answered.
- */
-
-const HISTORY_PLAYS = 200;
-
-export const albumsQuery = (sort: AlbumSort, scope: string | undefined) =>
-  queryOptions({
-    queryKey: ["albums", sort, scope ?? null],
-    queryFn: () => listAlbums(sort, scope),
-  });
-
-/**
- * The catalogue's songs, a page at a time.
- *
- * The only infinite query here, and the only one that needs to be: every
- * other listing is small enough to hold whole. A short page is the end —
- * the route has no total to send, and inventing one would mean a second
- * `COUNT(*)` over the same filter on every request.
- */
-export const songsQuery = (sort: SongSort, scope: string | undefined) =>
-  infiniteQueryOptions({
-    queryKey: ["songs", sort, scope ?? null],
-    // The signal is handed on so a page still in flight when the sort or the
-    // library changes is abandoned instead of finishing into a key nobody
-    // will read. A page is two hundred rows, which is the largest answer this
-    // client asks for.
-    queryFn: ({ pageParam, signal }) =>
-      listSongs(sort, scope, pageParam, SONG_PAGE, signal),
-    initialPageParam: 0,
-    getNextPageParam: (last, _pages, lastParam) =>
-      last.length < SONG_PAGE ? undefined : lastParam + SONG_PAGE,
-  });
-
-export const albumQuery = (albumId: string) =>
-  queryOptions({
-    queryKey: ["album", albumId],
-    queryFn: () => getAlbum(albumId),
-  });
-
-export const artistsQuery = (scope: string | undefined) =>
-  queryOptions({
-    queryKey: ["artists", scope ?? null],
-    queryFn: () => listArtists(scope),
-  });
-
-/** How many times an artist page is asked in all while enrichment is pending. */
-export const ENRICHMENT_ASKS = 6;
-/** The pause between two of those asks. */
-export const ENRICHMENT_RETRY_MS = 3_000;
-
-/**
- * When to ask for an artist again, or `false` for never.
- *
- * The web client does not read the library event stream, so it learns that a
- * provider answered only by asking. It asks while the state is `pending`, up
- * to {@link ENRICHMENT_ASKS} answers in all, and then stops: a provider that
- * is unreachable stays `pending` on the server, and a page left open must
- * not ask forever. The count is the query's, so a later visit refetches once
- * on mount, as every page does, and does not start the series again.
- */
-export function enrichmentRetryDelay(
-  artist: ArtistDetail | undefined,
-  answers: number,
-): number | false {
-  if (artist?.enrichment?.state !== "pending") return false;
-  return answers < ENRICHMENT_ASKS ? ENRICHMENT_RETRY_MS : false;
-}
-
-export const artistQuery = (artistId: string) =>
-  queryOptions({
-    queryKey: ["artist", artistId],
-    queryFn: () => getArtist(artistId),
-    // Failed asks count too: an error leaves the last answer — still
-    // `pending` — in place and does not move `dataUpdateCount`, so a server
-    // that keeps failing would otherwise be asked every few seconds for ever.
-    refetchInterval: (query) =>
-      enrichmentRetryDelay(
-        query.state.data,
-        query.state.dataUpdateCount + query.state.errorUpdateCount,
-      ),
-  });
-
-/** An artist's albums alone, for the album page's "more by". */
-export const artistAlbumsQuery = (artistId: string) =>
-  queryOptions({
-    queryKey: ["artist-albums", artistId],
-    queryFn: () => listArtistAlbums(artistId),
-  });
-
-export const artistTopSongsQuery = (artistId: string) =>
-  queryOptions({
-    queryKey: ["artist-top-songs", artistId],
-    queryFn: () => artistTopSongs(artistId),
-  });
-
-export const genresQuery = (scope: string | undefined) =>
-  queryOptions({
-    queryKey: ["genres", scope ?? null],
-    queryFn: () => listGenres(scope),
-  });
-
-export const genreSongsQuery = (genre: string, scope: string | undefined) =>
-  queryOptions({
-    queryKey: ["genre-songs", genre, scope ?? null],
-    queryFn: () => listGenreSongs(genre, scope),
-  });
-
-/**
- * A fresh draw each time it is asked for.
- *
- * `staleTime: 0` on purpose, against the default: every other question here is
- * worth holding, and this one is worth exactly the opposite. Coming back to a
- * shuffle and seeing the previous shuffle would be a cache doing its job and
- * the page failing at its own.
- */
-export const randomSongsQuery = (scope: string | undefined) =>
-  queryOptions({
-    queryKey: ["random-songs", scope ?? null],
-    queryFn: () => listRandomSongs(100, undefined, scope),
-    staleTime: 0,
-    gcTime: 0,
-  });
-
-export const playlistsQuery = () =>
-  queryOptions({ queryKey: ["playlists"], queryFn: listVisiblePlaylists });
-
-export const sharesQuery = () =>
-  queryOptions({ queryKey: ["shares"], queryFn: listShares });
-
-export const bookmarksQuery = () =>
-  queryOptions({ queryKey: ["bookmarks"], queryFn: listBookmarks });
-
-export const radioStationsQuery = () =>
-  queryOptions({ queryKey: ["radio-stations"], queryFn: listRadioStations });
-
-/**
- * One track as its properties panel shows it, with the corrections behind
- * its tags so each corrected value can say that it is one.
- *
- * Not `trackEditQuery`, though it reads the same two routes: that one is the
- * editor's and is invalidated by its saves; sharing a key would tie the two
- * screens' lifetimes together for no saving worth having.
- */
-export const trackPropertiesQuery = (trackId: string) =>
-  queryOptions({
-    queryKey: ["track-properties", trackId],
-    queryFn: async () => {
-      // The corrections only mark which tags were corrected. A failure to
-      // read them costs those marks, not the panel.
-      const [track, tracked] = await Promise.all([
-        getTrackProperties(trackId),
-        getTrackOverrides(trackId).catch(() => null),
-      ]);
-      return { track, tracked };
-    },
-  });
-
-/**
- * A library's whole filed tree: bounded by the server's folder cap, so it
- * is held whole rather than paged.
- */
-/**
- * "Needs attention" (RFC-015): every query of the page is keyed under
- * `attention` and the library, so one invalidation after a decision, a
- * correction or a scan refreshes the whole page.
- */
-export const attentionSummaryQuery = (libraryId: string) =>
-  queryOptions({
-    queryKey: ["attention", libraryId, "summary"],
-    queryFn: () => getAttentionSummary(libraryId),
-  });
-
-export const creditCandidatesQuery = (libraryId: string) =>
-  queryOptions({
-    queryKey: ["attention", libraryId, "credits"],
-    queryFn: () => listCreditCandidates(libraryId),
-  });
-
-export const creditDecisionsQuery = (libraryId: string) =>
-  queryOptions({
-    queryKey: ["attention", libraryId, "decisions"],
-    queryFn: () => listCreditDecisions(libraryId),
-  });
-
-/** The tracks of one category, a page at a time. A short page is the end. */
-export const attentionTracksQuery = (
-  libraryId: string,
-  category: TrackCategory,
-) =>
-  infiniteQueryOptions({
-    queryKey: ["attention", libraryId, "tracks", category],
-    queryFn: ({ pageParam, signal }) =>
-      listAttentionTracks(
-        libraryId,
-        category,
-        pageParam,
-        ATTENTION_TRACKS_PAGE,
-        signal,
-      ),
-    initialPageParam: 0,
-    getNextPageParam: (last, _pages, lastParam) =>
-      last.length < ATTENTION_TRACKS_PAGE
-        ? undefined
-        : lastParam + ATTENTION_TRACKS_PAGE,
-  });
-
-/**
- * The quality page (RFC-016): keyed under `quality` and the library, so one
- * invalidation after a request for a new analysis refreshes the whole page.
- * While the analysis runs, the summary is asked again every ten seconds by the
- * page itself; the list follows when the counts move.
- */
-export const qualitySummaryQuery = (libraryId: string) =>
-  queryOptions({
-    queryKey: ["quality", libraryId, "summary"],
-    queryFn: () => getQualitySummary(libraryId),
-  });
-
-/** One filter of the list, a page at a time. A short page is the end. */
-export const qualityTracksQuery = (
-  libraryId: string,
-  filter: { verdict?: QualityVerdict; codec?: string },
-) =>
-  infiniteQueryOptions({
-    queryKey: [
-      "quality",
-      libraryId,
-      "tracks",
-      filter.verdict ?? "",
-      filter.codec ?? "",
-    ],
-    queryFn: ({ pageParam, signal }) =>
-      listQualityTracks(
-        libraryId,
-        filter,
-        pageParam,
-        QUALITY_TRACKS_PAGE,
-        signal,
-      ),
-    initialPageParam: 0,
-    getNextPageParam: (last, _pages, lastParam) =>
-      last.length < QUALITY_TRACKS_PAGE
-        ? undefined
-        : lastParam + QUALITY_TRACKS_PAGE,
-  });
-
-/** One track's verdict and spectrum, for its properties. */
-export const trackQualityQuery = (trackId: string) =>
-  queryOptions({
-    queryKey: ["track-quality", trackId],
-    queryFn: () => getTrackQuality(trackId),
-  });
-
-export const filedTreeQuery = (libraryId: string) =>
-  queryOptions({
-    queryKey: ["filed-tree", libraryId],
-    queryFn: () => listFolders(libraryId),
-  });
-
-/**
- * The tracks filed in one folder, or the unfiled ones, a page at a time. A
- * short page is the end.
- */
-export const folderTracksQuery = (libraryId: string, folder: string) =>
-  infiniteQueryOptions({
-    queryKey: ["folder-tracks", libraryId, folder],
-    queryFn: ({ pageParam, signal }) =>
-      listFolderTracks(
-        libraryId,
-        folder,
-        pageParam,
-        FOLDER_TRACKS_PAGE,
-        signal,
-      ),
-    initialPageParam: 0,
-    getNextPageParam: (last, _pages, lastParam) =>
-      last.length < FOLDER_TRACKS_PAGE
-        ? undefined
-        : lastParam + FOLDER_TRACKS_PAGE,
-  });
-
-/**
- * One account's listening over a period (RFC-024 decision 6). The period is
- * the key, so switching it asks again rather than relabelling the last
- * answer, and so is the listener's day (`useLocalDay`): the buckets are
- * local days, and an answer from before midnight, or from another timezone,
- * cuts them in the wrong place.
- */
-export const statsQuery = (period: StatsPeriod, day: string) =>
-  queryOptions({
-    queryKey: ["stats", period, day],
-    queryFn: () => getListeningStats(period),
-  });
-
-/**
- * The mixes on the home page (RFC-024 decision 7). The server draws them once
- * a day, so the answer is held for a while rather than re-asked on every
- * visit to the albums — and the listener's day is in the key, because a key
- * that never changes is never asked again: past midnight the shelf would keep
- * yesterday's draw for as long as the tab stayed open.
- */
-export const mixesQuery = (scope: string | undefined, day: string) =>
-  queryOptions({
-    queryKey: ["mixes", scope ?? null, day],
-    queryFn: () => listMixes(scope),
-    staleTime: 5 * 60_000,
-  });
-
-export const mixQuery = (
-  mixId: string,
-  scope: string | undefined,
-  day: string,
-) =>
-  queryOptions({
-    queryKey: ["mix", mixId, scope ?? null, day],
-    queryFn: () => getMix(mixId, scope),
-    staleTime: 5 * 60_000,
-  });
-
-export const lyricsQuery = (trackId: string) =>
-  queryOptions({
-    queryKey: ["lyrics", trackId],
-    queryFn: () => getLyrics(trackId),
-  });
-
-/**
- * Who is listening, re-asked on a timer.
- *
- * The panel used to hold the previous reading in a `useState` of its own,
- * because the hook beneath it blanked its value at the start of every poll and
- * flashed "nobody is listening" thirty seconds apart. A query keeps what it has
- * while it refetches, so that workaround is gone rather than moved.
- */
-export const nowPlayingQuery = () =>
-  queryOptions({
-    queryKey: ["now-playing"],
-    queryFn: listNowPlaying,
-    refetchInterval: 30_000,
-    staleTime: 0,
-  });
-
-/**
- * The favourites, resolved to the tracks themselves.
- *
- * `Promise.allSettled`, so one track that has since become unreadable costs its
- * own row and not the page.
- */
-export const favoriteTracksQuery = () =>
-  queryOptions({
-    queryKey: ["favorite-tracks"],
-    queryFn: async () => {
-      const favorites = await listFavorites();
-      const tracks = favorites.filter((item) => item.entity_type === "track");
-      const resolved = await Promise.allSettled(
-        tracks.map((item) => getTrack(item.entity_id)),
-      );
-      return resolved.flatMap((result) =>
-        result.status === "fulfilled" ? [result.value] : [],
-      );
-    },
-  });
-
-/**
- * Recently played, one entry per track.
- *
- * The route answers plays, not songs, and the same track appears many times.
- * Keeping the first sighting of each id gives "recently played" in the order it
- * was last played, and asks for each track once.
- */
-export const historyTracksQuery = (limit: number) =>
-  queryOptions({
-    queryKey: ["history-tracks", limit],
-    queryFn: async () => {
-      const plays = await listHistory(HISTORY_PLAYS);
-      const seen = new Set<string>();
-      const ordered = plays.filter((play) => {
-        if (seen.has(play.track_id)) return false;
-        seen.add(play.track_id);
-        return true;
-      });
-      const resolved = await Promise.allSettled(
-        ordered.slice(0, limit).map((play) => getTrack(play.track_id)),
-      );
-      return resolved.flatMap((result) =>
-        result.status === "fulfilled" ? [result.value] : [],
-      );
-    },
-  });
-
-export const searchQuery = (needle: string, scope: string | undefined) =>
-  queryOptions({
-    // The scope belongs in the key: changing library while a result is on
-    // screen has to re-ask, or the page keeps answering for the library it
-    // left.
-    queryKey: ["search", needle, scope ?? null],
-    // The signal is the query's own: a needle superseded while its request is
-    // still out is abandoned rather than left to finish into a cache entry
-    // nobody will read. It costs the screen nothing — every needle is its own
-    // key, so an answer that arrives late lands under the key it was asked
-    // for and not over the one on screen — and it stops a search box from
-    // spending one round trip per keystroke on the server.
-    queryFn: ({ signal }) => search(needle, scope, signal),
-    enabled: needle.length > 0,
-  });
-
-export const apiTokensQuery = (username: string, open: boolean) =>
-  queryOptions({
-    queryKey: ["api-tokens", username],
-    queryFn: () => listApiTokens(username),
-    // Closed until asked for. This panel is rendered once per account, so
-    // loading on mount meant one request per account every time the admin
-    // screen opened — for a list almost nobody opens.
-    enabled: open,
-  });
-
-/**
- * This account's own registered clients.
- *
- * Unconditional, unlike `apiTokensQuery`, which is gated on a disclosure
- * because the administration screen renders one per account. There is exactly
- * one of these and the page it sits on is about it.
- */
-export const ownApiTokensQuery = () =>
-  queryOptions({
-    queryKey: ["own-api-tokens"],
-    queryFn: listOwnApiTokens,
-  });
-
-/**
- * Whether this account holds a Subsonic credential.
- *
- * One of these, like the clients listing beside it, because the page it sits
- * on is about this account.
- */
-export const ownSubsonicCredentialQuery = () =>
-  queryOptions({
-    queryKey: ["own-subsonic-credential"],
-    queryFn: readOwnSubsonicCredential,
-  });
-
-export const libraryMembersQuery = (libraryId: string, open: boolean) =>
-  queryOptions({
-    queryKey: ["library-members", libraryId],
-    queryFn: () => listLibraryMembers(libraryId),
-    enabled: open,
-  });
-
-/**
- * A library as an administrator manages it (RFC-021), asked for only once its
- * panel is open: the admin screen draws one per library.
- */
-export const librarySettingsQuery = (libraryId: string, open: boolean) =>
-  queryOptions({
-    queryKey: ["library-settings", libraryId],
-    queryFn: () => getLibrarySettings(libraryId),
-    enabled: open,
-  });
-
-/**
- * The files a library's scans can no longer find (RFC-021), a page at a time,
- * oldest first. Keyed under `missing` and the library, so one invalidation
- * after a purge refreshes the page.
- */
-export const unavailableTracksQuery = (libraryId: string) =>
-  infiniteQueryOptions({
-    queryKey: ["missing", libraryId],
-    queryFn: ({ pageParam, signal }) =>
-      listUnavailableTracks(libraryId, pageParam, UNAVAILABLE_PAGE, signal),
-    initialPageParam: 0,
-    getNextPageParam: (last, _pages, lastParam) =>
-      last.tracks.length < UNAVAILABLE_PAGE
-        ? undefined
-        : lastParam + UNAVAILABLE_PAGE,
-  });
-
-export const purgedTracksQuery = (libraryId: string) =>
-  infiniteQueryOptions({
-    queryKey: ["missing", libraryId, "purged"],
-    queryFn: ({ pageParam, signal }) =>
-      listPurgedTracks(libraryId, pageParam, UNAVAILABLE_PAGE, signal),
-    initialPageParam: 0,
-    getNextPageParam: (last, _pages, lastParam) =>
-      last.tracks.length < UNAVAILABLE_PAGE
-        ? undefined
-        : lastParam + UNAVAILABLE_PAGE,
-  });
-
-export const administrationQuery = () =>
-  queryOptions({
-    queryKey: ["administration"],
-    queryFn: () => Promise.all([listLibraries(), listUsers()]),
-  });
-
-/**
- * A canvas ticket, held for exactly as long as it is being looked at.
- *
- * `staleTime` and `gcTime` at zero, against the defaults, because what this
- * answers is not data but a **credential with a deadline** — an AEAD-sealed
- * ticket the `<video>` plays from, since it can send no Authorization header.
- * A cache has no notion of that deadline and would go on serving the ticket
- * after it passed. The lifetime is `WAVEFLOW_STREAM_TICKET_TTL`, an hour by
- * default and an operator's to shorten, so "shorter than the cache" is a
- * configuration away rather than impossible. `player.tsx` checks the deadline
- * before playing a stream ticket for the same reason; here there is simply
- * nothing worth keeping.
- *
- * A track with no canvas answers `null`, which a query holds as an answer. The
- * hook this replaced could not tell that from "still waiting" and had to be
- * handed an object to unwrap.
- */
-export const canvasQuery = (trackId: string) =>
-  queryOptions({
-    queryKey: ["canvas", trackId],
-    queryFn: () => canvasUrl(trackId),
-    staleTime: 0,
-    gcTime: 0,
-  });
-
-export const scrobbleRowsQuery = () =>
-  queryOptions({
-    queryKey: ["scrobble-rows"],
-    queryFn: async () => {
-      const [destinations, links] = await Promise.all([
-        listScrobbleDestinations(),
-        listScrobbleLinks(),
-      ]);
-      return scrobbleRows(destinations, links);
-    },
-  });
-
-/**
- * The listens nobody has answered yet, with the tracks behind them named.
- *
- * The history read happens only when there is something to name: an empty list
- * must not cost one on every visit to the page.
- */
-export const uncertainScrobblesQuery = () =>
-  queryOptions({
-    queryKey: ["uncertain-scrobbles"],
-    queryFn: async () => {
-      const entries = await listUncertainScrobbles();
-      if (entries.length === 0) {
-        return { entries, titles: new Map<string, string>() };
-      }
-      const plays = playsByInstant(await listHistory(HISTORY_PLAYS));
-      const resolved = await Promise.allSettled(
-        tracksToName(entries, plays).map((id) => getTrack(id)),
-      );
-      const byTrack = new Map<string, string>();
-      for (const result of resolved) {
-        if (result.status === "fulfilled") {
-          byTrack.set(result.value.id, result.value.title);
-        }
-      }
-      // Re-keyed by entry, not by track: the row shows the title beside the
-      // listen it belongs to, and two entries can name the same track.
-      const titles = new Map<string, string>();
-      for (const entry of entries) {
-        const track = plays.get(entry.played_at);
-        const title = track ? byTrack.get(track) : undefined;
-        if (title) titles.set(entry.id, title);
-      }
-      return { entries, titles };
-    },
-  });
-
-/**
- * Everything the tag editor shows for one track: its effective values, and the
- * corrections behind them.
- *
- * Two reads rather than one, because provenance appears on this screen and
- * nowhere else — the catalogue shows the effective value everywhere.
- */
-export const trackEditQuery = (trackId: string) =>
-  queryOptions({
-    queryKey: ["track-edit", trackId],
-    queryFn: async () => {
-      const [song, tracked] = await Promise.all([
-        getTrackCredits(trackId),
-        getTrackOverrides(trackId),
-      ]);
-      return { song, tracked };
-    },
-  });
-
-/**
- * Smart playlists (RFC-025), counted but not loaded: a listing carries what
- * each one answers now, and the tracks are asked for when one is opened.
- */
-export const smartPlaylistsQuery = () =>
-  queryOptions({ queryKey: ["smart-playlists"], queryFn: listSmartPlaylists });
-
-/** One smart playlist, evaluated by the server at the moment it is asked. */
-export const smartPlaylistQuery = (id: string) =>
-  queryOptions({
-    queryKey: ["smart-playlists", id],
-    queryFn: () => getSmartPlaylist(id),
-  });
-
-/** The podcasts page: the switch, this account's role, the channels. */
-export const podcastsQuery = () =>
-  queryOptions({ queryKey: ["podcasts"], queryFn: getPodcastOverview });
-
-/** One channel and its episodes, with this account's position in each. */
-export const podcastChannelQuery = (id: string) =>
-  queryOptions({
-    queryKey: ["podcasts", id],
-    queryFn: () => getPodcastChannel(id),
-  });
diff --git a/webapp/src/api/queries/administration.ts b/webapp/src/api/queries/administration.ts
new file mode 100644
index 00000000..8a0d05df
--- /dev/null
+++ b/webapp/src/api/queries/administration.ts
@@ -0,0 +1,71 @@
+// Accounts and libraries as an administrator sees them; one's own keys.
+
+import { queryOptions } from "@tanstack/react-query";
+import {
+  getLibrarySettings,
+  listApiTokens,
+  listLibraries,
+  listLibraryMembers,
+  listOwnApiTokens,
+  listUsers,
+  readOwnSubsonicCredential,
+} from "../index";
+
+export const apiTokensQuery = (username: string, open: boolean) =>
+  queryOptions({
+    queryKey: ["api-tokens", username],
+    queryFn: () => listApiTokens(username),
+    // Closed until asked for. This panel is rendered once per account, so
+    // loading on mount meant one request per account every time the admin
+    // screen opened — for a list almost nobody opens.
+    enabled: open,
+  });
+
+/**
+ * This account's own registered clients.
+ *
+ * Unconditional, unlike `apiTokensQuery`, which is gated on a disclosure
+ * because the administration screen renders one per account. There is exactly
+ * one of these and the page it sits on is about it.
+ */
+export const ownApiTokensQuery = () =>
+  queryOptions({
+    queryKey: ["own-api-tokens"],
+    queryFn: listOwnApiTokens,
+  });
+
+/**
+ * Whether this account holds a Subsonic credential.
+ *
+ * One of these, like the clients listing beside it, because the page it sits
+ * on is about this account.
+ */
+export const ownSubsonicCredentialQuery = () =>
+  queryOptions({
+    queryKey: ["own-subsonic-credential"],
+    queryFn: readOwnSubsonicCredential,
+  });
+
+export const libraryMembersQuery = (libraryId: string, open: boolean) =>
+  queryOptions({
+    queryKey: ["library-members", libraryId],
+    queryFn: () => listLibraryMembers(libraryId),
+    enabled: open,
+  });
+
+/**
+ * A library as an administrator manages it (RFC-021), asked for only once its
+ * panel is open: the admin screen draws one per library.
+ */
+export const librarySettingsQuery = (libraryId: string, open: boolean) =>
+  queryOptions({
+    queryKey: ["library-settings", libraryId],
+    queryFn: () => getLibrarySettings(libraryId),
+    enabled: open,
+  });
+
+export const administrationQuery = () =>
+  queryOptions({
+    queryKey: ["administration"],
+    queryFn: () => Promise.all([listLibraries(), listUsers()]),
+  });
diff --git a/webapp/src/api/queries/catalog.ts b/webapp/src/api/queries/catalog.ts
new file mode 100644
index 00000000..cfbf167f
--- /dev/null
+++ b/webapp/src/api/queries/catalog.ts
@@ -0,0 +1,154 @@
+// The catalogue: albums, songs, artists, genres, a random draw, search.
+
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+import {
+  type AlbumSort,
+  type ArtistDetail,
+  artistTopSongs,
+  getAlbum,
+  getArtist,
+  listAlbums,
+  listArtistAlbums,
+  listArtists,
+  listGenreSongs,
+  listGenres,
+  listRandomSongs,
+  listSongs,
+  SONG_PAGE,
+  type SongSort,
+  search,
+} from "../index";
+
+export const albumsQuery = (sort: AlbumSort, scope: string | undefined) =>
+  queryOptions({
+    queryKey: ["albums", sort, scope ?? null],
+    queryFn: () => listAlbums(sort, scope),
+  });
+
+/**
+ * The catalogue's songs, a page at a time.
+ *
+ * The only infinite query here, and the only one that needs to be: every
+ * other listing is small enough to hold whole. A short page is the end —
+ * the route has no total to send, and inventing one would mean a second
+ * `COUNT(*)` over the same filter on every request.
+ */
+export const songsQuery = (sort: SongSort, scope: string | undefined) =>
+  infiniteQueryOptions({
+    queryKey: ["songs", sort, scope ?? null],
+    // The signal is handed on so a page still in flight when the sort or the
+    // library changes is abandoned instead of finishing into a key nobody
+    // will read. A page is two hundred rows, which is the largest answer this
+    // client asks for.
+    queryFn: ({ pageParam, signal }) =>
+      listSongs(sort, scope, pageParam, SONG_PAGE, signal),
+    initialPageParam: 0,
+    getNextPageParam: (last, _pages, lastParam) =>
+      last.length < SONG_PAGE ? undefined : lastParam + SONG_PAGE,
+  });
+
+export const albumQuery = (albumId: string) =>
+  queryOptions({
+    queryKey: ["album", albumId],
+    queryFn: () => getAlbum(albumId),
+  });
+
+export const artistsQuery = (scope: string | undefined) =>
+  queryOptions({
+    queryKey: ["artists", scope ?? null],
+    queryFn: () => listArtists(scope),
+  });
+
+/** How many times an artist page is asked in all while enrichment is pending. */
+export const ENRICHMENT_ASKS = 6;
+/** The pause between two of those asks. */
+export const ENRICHMENT_RETRY_MS = 3_000;
+
+/**
+ * When to ask for an artist again, or `false` for never.
+ *
+ * The web client does not read the library event stream, so it learns that a
+ * provider answered only by asking. It asks while the state is `pending`, up
+ * to {@link ENRICHMENT_ASKS} answers in all, and then stops: a provider that
+ * is unreachable stays `pending` on the server, and a page left open must
+ * not ask forever. The count is the query's, so a later visit refetches once
+ * on mount, as every page does, and does not start the series again.
+ */
+export function enrichmentRetryDelay(
+  artist: ArtistDetail | undefined,
+  answers: number,
+): number | false {
+  if (artist?.enrichment?.state !== "pending") return false;
+  return answers < ENRICHMENT_ASKS ? ENRICHMENT_RETRY_MS : false;
+}
+
+export const artistQuery = (artistId: string) =>
+  queryOptions({
+    queryKey: ["artist", artistId],
+    queryFn: () => getArtist(artistId),
+    // Failed asks count too: an error leaves the last answer — still
+    // `pending` — in place and does not move `dataUpdateCount`, so a server
+    // that keeps failing would otherwise be asked every few seconds for ever.
+    refetchInterval: (query) =>
+      enrichmentRetryDelay(
+        query.state.data,
+        query.state.dataUpdateCount + query.state.errorUpdateCount,
+      ),
+  });
+
+/** An artist's albums alone, for the album page's "more by". */
+export const artistAlbumsQuery = (artistId: string) =>
+  queryOptions({
+    queryKey: ["artist-albums", artistId],
+    queryFn: () => listArtistAlbums(artistId),
+  });
+
+export const artistTopSongsQuery = (artistId: string) =>
+  queryOptions({
+    queryKey: ["artist-top-songs", artistId],
+    queryFn: () => artistTopSongs(artistId),
+  });
+
+export const genresQuery = (scope: string | undefined) =>
+  queryOptions({
+    queryKey: ["genres", scope ?? null],
+    queryFn: () => listGenres(scope),
+  });
+
+export const genreSongsQuery = (genre: string, scope: string | undefined) =>
+  queryOptions({
+    queryKey: ["genre-songs", genre, scope ?? null],
+    queryFn: () => listGenreSongs(genre, scope),
+  });
+
+/**
+ * A fresh draw each time it is asked for.
+ *
+ * `staleTime: 0` on purpose, against the default: every other question here is
+ * worth holding, and this one is worth exactly the opposite. Coming back to a
+ * shuffle and seeing the previous shuffle would be a cache doing its job and
+ * the page failing at its own.
+ */
+export const randomSongsQuery = (scope: string | undefined) =>
+  queryOptions({
+    queryKey: ["random-songs", scope ?? null],
+    queryFn: () => listRandomSongs(100, undefined, scope),
+    staleTime: 0,
+    gcTime: 0,
+  });
+
+export const searchQuery = (needle: string, scope: string | undefined) =>
+  queryOptions({
+    // The scope belongs in the key: changing library while a result is on
+    // screen has to re-ask, or the page keeps answering for the library it
+    // left.
+    queryKey: ["search", needle, scope ?? null],
+    // The signal is the query's own: a needle superseded while its request is
+    // still out is abandoned rather than left to finish into a cache entry
+    // nobody will read. It costs the screen nothing — every needle is its own
+    // key, so an answer that arrives late lands under the key it was asked
+    // for and not over the one on screen — and it stops a search box from
+    // spending one round trip per keystroke on the server.
+    queryFn: ({ signal }) => search(needle, scope, signal),
+    enabled: needle.length > 0,
+  });
diff --git a/webapp/src/api/queries/collections.ts b/webapp/src/api/queries/collections.ts
new file mode 100644
index 00000000..f3bb54b9
--- /dev/null
+++ b/webapp/src/api/queries/collections.ts
@@ -0,0 +1,50 @@
+// What an account keeps: playlists, shares, bookmarks, radio, podcasts.
+
+import { queryOptions } from "@tanstack/react-query";
+import {
+  getPodcastChannel,
+  getPodcastOverview,
+  getSmartPlaylist,
+  listBookmarks,
+  listRadioStations,
+  listShares,
+  listSmartPlaylists,
+  listVisiblePlaylists,
+} from "../index";
+
+export const playlistsQuery = () =>
+  queryOptions({ queryKey: ["playlists"], queryFn: listVisiblePlaylists });
+
+export const sharesQuery = () =>
+  queryOptions({ queryKey: ["shares"], queryFn: listShares });
+
+export const bookmarksQuery = () =>
+  queryOptions({ queryKey: ["bookmarks"], queryFn: listBookmarks });
+
+export const radioStationsQuery = () =>
+  queryOptions({ queryKey: ["radio-stations"], queryFn: listRadioStations });
+
+/**
+ * Smart playlists (RFC-025), counted but not loaded: a listing carries what
+ * each one answers now, and the tracks are asked for when one is opened.
+ */
+export const smartPlaylistsQuery = () =>
+  queryOptions({ queryKey: ["smart-playlists"], queryFn: listSmartPlaylists });
+
+/** One smart playlist, evaluated by the server at the moment it is asked. */
+export const smartPlaylistQuery = (id: string) =>
+  queryOptions({
+    queryKey: ["smart-playlists", id],
+    queryFn: () => getSmartPlaylist(id),
+  });
+
+/** The podcasts page: the switch, this account's role, the channels. */
+export const podcastsQuery = () =>
+  queryOptions({ queryKey: ["podcasts"], queryFn: getPodcastOverview });
+
+/** One channel and its episodes, with this account's position in each. */
+export const podcastChannelQuery = (id: string) =>
+  queryOptions({
+    queryKey: ["podcasts", id],
+    queryFn: () => getPodcastChannel(id),
+  });
diff --git a/webapp/src/api/queries/index.ts b/webapp/src/api/queries/index.ts
new file mode 100644
index 00000000..495b3dd0
--- /dev/null
+++ b/webapp/src/api/queries/index.ts
@@ -0,0 +1,77 @@
+/**
+ * Every question this client asks the server, and the key each answer is held
+ * under.
+ *
+ * Gathered here rather than written at each screen, because a key is shared
+ * state: two screens that spell one differently keep two copies of the same
+ * answer and disagree after a mutation, and two that spell different questions
+ * the same way serve each other's data. Neither mistake shows up in a type.
+ *
+ * A key is the question, argument by argument — `["albums", sort, scope]` and
+ * not `["albums"]` — so changing a sort or a library asks again instead of
+ * returning what the other one answered.
+ */
+
+export {
+  administrationQuery,
+  apiTokensQuery,
+  libraryMembersQuery,
+  librarySettingsQuery,
+  ownApiTokensQuery,
+  ownSubsonicCredentialQuery,
+} from "./administration";
+export {
+  albumQuery,
+  albumsQuery,
+  artistAlbumsQuery,
+  artistQuery,
+  artistsQuery,
+  artistTopSongsQuery,
+  ENRICHMENT_ASKS,
+  ENRICHMENT_RETRY_MS,
+  enrichmentRetryDelay,
+  genreSongsQuery,
+  genresQuery,
+  randomSongsQuery,
+  searchQuery,
+  songsQuery,
+} from "./catalog";
+export {
+  bookmarksQuery,
+  playlistsQuery,
+  podcastChannelQuery,
+  podcastsQuery,
+  radioStationsQuery,
+  sharesQuery,
+  smartPlaylistQuery,
+  smartPlaylistsQuery,
+} from "./collections";
+export {
+  favoriteTracksQuery,
+  historyTracksQuery,
+  mixesQuery,
+  mixQuery,
+  nowPlayingQuery,
+  scrobbleRowsQuery,
+  statsQuery,
+  uncertainScrobblesQuery,
+} from "./listening";
+export {
+  attentionSummaryQuery,
+  attentionTracksQuery,
+  creditCandidatesQuery,
+  creditDecisionsQuery,
+  filedTreeQuery,
+  folderTracksQuery,
+  purgedTracksQuery,
+  qualitySummaryQuery,
+  qualityTracksQuery,
+  trackQualityQuery,
+  unavailableTracksQuery,
+} from "./maintenance";
+export {
+  canvasQuery,
+  lyricsQuery,
+  trackEditQuery,
+  trackPropertiesQuery,
+} from "./tracks";
diff --git a/webapp/src/api/queries/listening.ts b/webapp/src/api/queries/listening.ts
new file mode 100644
index 00000000..a9093ee4
--- /dev/null
+++ b/webapp/src/api/queries/listening.ts
@@ -0,0 +1,173 @@
+// An account's listening: stats, mixes, favourites, history, scrobbles.
+
+import { queryOptions } from "@tanstack/react-query";
+import {
+  playsByInstant,
+  scrobbleRows,
+  tracksToName,
+} from "../../lib/scrobbling";
+import {
+  getListeningStats,
+  getMix,
+  getTrack,
+  listFavorites,
+  listHistory,
+  listMixes,
+  listNowPlaying,
+  listScrobbleDestinations,
+  listScrobbleLinks,
+  listUncertainScrobbles,
+  type StatsPeriod,
+} from "../index";
+
+const HISTORY_PLAYS = 200;
+
+/**
+ * One account's listening over a period (RFC-024 decision 6). The period is
+ * the key, so switching it asks again rather than relabelling the last
+ * answer, and so is the listener's day (`useLocalDay`): the buckets are
+ * local days, and an answer from before midnight, or from another timezone,
+ * cuts them in the wrong place.
+ */
+export const statsQuery = (period: StatsPeriod, day: string) =>
+  queryOptions({
+    queryKey: ["stats", period, day],
+    queryFn: () => getListeningStats(period),
+  });
+
+/**
+ * The mixes on the home page (RFC-024 decision 7). The server draws them once
+ * a day, so the answer is held for a while rather than re-asked on every
+ * visit to the albums — and the listener's day is in the key, because a key
+ * that never changes is never asked again: past midnight the shelf would keep
+ * yesterday's draw for as long as the tab stayed open.
+ */
+export const mixesQuery = (scope: string | undefined, day: string) =>
+  queryOptions({
+    queryKey: ["mixes", scope ?? null, day],
+    queryFn: () => listMixes(scope),
+    staleTime: 5 * 60_000,
+  });
+
+export const mixQuery = (
+  mixId: string,
+  scope: string | undefined,
+  day: string,
+) =>
+  queryOptions({
+    queryKey: ["mix", mixId, scope ?? null, day],
+    queryFn: () => getMix(mixId, scope),
+    staleTime: 5 * 60_000,
+  });
+
+/**
+ * Who is listening, re-asked on a timer.
+ *
+ * The panel used to hold the previous reading in a `useState` of its own,
+ * because the hook beneath it blanked its value at the start of every poll and
+ * flashed "nobody is listening" thirty seconds apart. A query keeps what it has
+ * while it refetches, so that workaround is gone rather than moved.
+ */
+export const nowPlayingQuery = () =>
+  queryOptions({
+    queryKey: ["now-playing"],
+    queryFn: listNowPlaying,
+    refetchInterval: 30_000,
+    staleTime: 0,
+  });
+
+/**
+ * The favourites, resolved to the tracks themselves.
+ *
+ * `Promise.allSettled`, so one track that has since become unreadable costs its
+ * own row and not the page.
+ */
+export const favoriteTracksQuery = () =>
+  queryOptions({
+    queryKey: ["favorite-tracks"],
+    queryFn: async () => {
+      const favorites = await listFavorites();
+      const tracks = favorites.filter((item) => item.entity_type === "track");
+      const resolved = await Promise.allSettled(
+        tracks.map((item) => getTrack(item.entity_id)),
+      );
+      return resolved.flatMap((result) =>
+        result.status === "fulfilled" ? [result.value] : [],
+      );
+    },
+  });
+
+/**
+ * Recently played, one entry per track.
+ *
+ * The route answers plays, not songs, and the same track appears many times.
+ * Keeping the first sighting of each id gives "recently played" in the order it
+ * was last played, and asks for each track once.
+ */
+export const historyTracksQuery = (limit: number) =>
+  queryOptions({
+    queryKey: ["history-tracks", limit],
+    queryFn: async () => {
+      const plays = await listHistory(HISTORY_PLAYS);
+      const seen = new Set<string>();
+      const ordered = plays.filter((play) => {
+        if (seen.has(play.track_id)) return false;
+        seen.add(play.track_id);
+        return true;
+      });
+      const resolved = await Promise.allSettled(
+        ordered.slice(0, limit).map((play) => getTrack(play.track_id)),
+      );
+      return resolved.flatMap((result) =>
+        result.status === "fulfilled" ? [result.value] : [],
+      );
+    },
+  });
+
+export const scrobbleRowsQuery = () =>
+  queryOptions({
+    queryKey: ["scrobble-rows"],
+    queryFn: async () => {
+      const [destinations, links] = await Promise.all([
+        listScrobbleDestinations(),
+        listScrobbleLinks(),
+      ]);
+      return scrobbleRows(destinations, links);
+    },
+  });
+
+/**
+ * The listens nobody has answered yet, with the tracks behind them named.
+ *
+ * The history read happens only when there is something to name: an empty list
+ * must not cost one on every visit to the page.
+ */
+export const uncertainScrobblesQuery = () =>
+  queryOptions({
+    queryKey: ["uncertain-scrobbles"],
+    queryFn: async () => {
+      const entries = await listUncertainScrobbles();
+      if (entries.length === 0) {
+        return { entries, titles: new Map<string, string>() };
+      }
+      const plays = playsByInstant(await listHistory(HISTORY_PLAYS));
+      const resolved = await Promise.allSettled(
+        tracksToName(entries, plays).map((id) => getTrack(id)),
+      );
+      const byTrack = new Map<string, string>();
+      for (const result of resolved) {
+        if (result.status === "fulfilled") {
+          byTrack.set(result.value.id, result.value.title);
+        }
+      }
+      // Re-keyed by entry, not by track: the row shows the title beside the
+      // listen it belongs to, and two entries can name the same track.
+      const titles = new Map<string, string>();
+      for (const entry of entries) {
+        const track = plays.get(entry.played_at);
+        const title = track ? byTrack.get(track) : undefined;
+        if (title) titles.set(entry.id, title);
+      }
+      return { entries, titles };
+    },
+  });
diff --git a/webapp/src/api/queries/maintenance.ts b/webapp/src/api/queries/maintenance.ts
new file mode 100644
index 00000000..7eadab30
--- /dev/null
+++ b/webapp/src/api/queries/maintenance.ts
@@ -0,0 +1,175 @@
+// Library upkeep: needs attention, quality, filed folders, missing files.
+
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+import {
+  ATTENTION_TRACKS_PAGE,
+  FOLDER_TRACKS_PAGE,
+  getAttentionSummary,
+  getQualitySummary,
+  getTrackQuality,
+  listAttentionTracks,
+  listCreditCandidates,
+  listCreditDecisions,
+  listFolders,
+  listFolderTracks,
+  listPurgedTracks,
+  listQualityTracks,
+  listUnavailableTracks,
+  QUALITY_TRACKS_PAGE,
+  type QualityVerdict,
+  type TrackCategory,
+  UNAVAILABLE_PAGE,
+} from "../index";
+
+/**
+ * A library's whole filed tree: bounded by the server's folder cap, so it
+ * is held whole rather than paged.
+ */
+/**
+ * "Needs attention" (RFC-015): every query of the page is keyed under
+ * `attention` and the library, so one invalidation after a decision, a
+ * correction or a scan refreshes the whole page.
+ */
+export const attentionSummaryQuery = (libraryId: string) =>
+  queryOptions({
+    queryKey: ["attention", libraryId, "summary"],
+    queryFn: () => getAttentionSummary(libraryId),
+  });
+
+export const creditCandidatesQuery = (libraryId: string) =>
+  queryOptions({
+    queryKey: ["attention", libraryId, "credits"],
+    queryFn: () => listCreditCandidates(libraryId),
+  });
+
+export const creditDecisionsQuery = (libraryId: string) =>
+  queryOptions({
+    queryKey: ["attention", libraryId, "decisions"],
+    queryFn: () => listCreditDecisions(libraryId),
+  });
+
+/** The tracks of one category, a page at a time. A short page is the end. */
+export const attentionTracksQuery = (
+  libraryId: string,
+  category: TrackCategory,
+) =>
+  infiniteQueryOptions({
+    queryKey: ["attention", libraryId, "tracks", category],
+    queryFn: ({ pageParam, signal }) =>
+      listAttentionTracks(
+        libraryId,
+        category,
+        pageParam,
+        ATTENTION_TRACKS_PAGE,
+        signal,
+      ),
+    initialPageParam: 0,
+    getNextPageParam: (last, _pages, lastParam) =>
+      last.length < ATTENTION_TRACKS_PAGE
+        ? undefined
+        : lastParam + ATTENTION_TRACKS_PAGE,
+  });
+
+/**
+ * The quality page (RFC-016): keyed under `quality` and the library, so one
+ * invalidation after a request for a new analysis refreshes the whole page.
+ * While the analysis runs, the summary is asked again every ten seconds by the
+ * page itself; the list follows when the counts move.
+ */
+export const qualitySummaryQuery = (libraryId: string) =>
+  queryOptions({
+    queryKey: ["quality", libraryId, "summary"],
+    queryFn: () => getQualitySummary(libraryId),
+  });
+
+/** One filter of the list, a page at a time. A short page is the end. */
+export const qualityTracksQuery = (
+  libraryId: string,
+  filter: { verdict?: QualityVerdict; codec?: string },
+) =>
+  infiniteQueryOptions({
+    queryKey: [
+      "quality",
+      libraryId,
+      "tracks",
+      filter.verdict ?? "",
+      filter.codec ?? "",
+    ],
+    queryFn: ({ pageParam, signal }) =>
+      listQualityTracks(
+        libraryId,
+        filter,
+        pageParam,
+        QUALITY_TRACKS_PAGE,
+        signal,
+      ),
+    initialPageParam: 0,
+    getNextPageParam: (last, _pages, lastParam) =>
+      last.length < QUALITY_TRACKS_PAGE
+        ? undefined
+        : lastParam + QUALITY_TRACKS_PAGE,
+  });
+
+/** One track's verdict and spectrum, for its properties. */
+export const trackQualityQuery = (trackId: string) =>
+  queryOptions({
+    queryKey: ["track-quality", trackId],
+    queryFn: () => getTrackQuality(trackId),
+  });
+
+export const filedTreeQuery = (libraryId: string) =>
+  queryOptions({
+    queryKey: ["filed-tree", libraryId],
+    queryFn: () => listFolders(libraryId),
+  });
+
+/**
+ * The tracks filed in one folder, or the unfiled ones, a page at a time. A
+ * short page is the end.
+ */
+export const folderTracksQuery = (libraryId: string, folder: string) =>
+  infiniteQueryOptions({
+    queryKey: ["folder-tracks", libraryId, folder],
+    queryFn: ({ pageParam, signal }) =>
+      listFolderTracks(
+        libraryId,
+        folder,
+        pageParam,
+        FOLDER_TRACKS_PAGE,
+        signal,
+      ),
+    initialPageParam: 0,
+    getNextPageParam: (last, _pages, lastParam) =>
+      last.length < FOLDER_TRACKS_PAGE
+        ? undefined
+        : lastParam + FOLDER_TRACKS_PAGE,
+  });
+
+/**
+ * The files a library's scans can no longer find (RFC-021), a page at a time,
+ * oldest first. Keyed under `missing` and the library, so one invalidation
+ * after a purge refreshes the page.
+ */
+export const unavailableTracksQuery = (libraryId: string) =>
+  infiniteQueryOptions({
+    queryKey: ["missing", libraryId],
+    queryFn: ({ pageParam, signal }) =>
+      listUnavailableTracks(libraryId, pageParam, UNAVAILABLE_PAGE, signal),
+    initialPageParam: 0,
+    getNextPageParam: (last, _pages, lastParam) =>
+      last.tracks.length < UNAVAILABLE_PAGE
+        ? undefined
+        : lastParam + UNAVAILABLE_PAGE,
+  });
+
+export const purgedTracksQuery = (libraryId: string) =>
+  infiniteQueryOptions({
+    queryKey: ["missing", libraryId, "purged"],
+    queryFn: ({ pageParam, signal }) =>
+      listPurgedTracks(libraryId, pageParam, UNAVAILABLE_PAGE, signal),
+    initialPageParam: 0,
+    getNextPageParam: (last, _pages, lastParam) =>
+      last.tracks.length < UNAVAILABLE_PAGE
+        ? undefined
+        : lastParam + UNAVAILABLE_PAGE,
+  });
diff --git a/webapp/src/api/queries/tracks.ts b/webapp/src/api/queries/tracks.ts
new file mode 100644
index 00000000..5f309f4d
--- /dev/null
+++ b/webapp/src/api/queries/tracks.ts
@@ -0,0 +1,82 @@
+// One track's panels: its properties, words, canvas and tag editor.
+
+import { queryOptions } from "@tanstack/react-query";
+import {
+  canvasUrl,
+  getLyrics,
+  getTrackCredits,
+  getTrackOverrides,
+  getTrackProperties,
+} from "../index";
+
+/**
+ * One track as its properties panel shows it, with the corrections behind
+ * its tags so each corrected value can say that it is one.
+ *
+ * Not `trackEditQuery`, though it reads the same two routes: that one is the
+ * editor's and is invalidated by its saves; sharing a key would tie the two
+ * screens' lifetimes together for no saving worth having.
+ */
+export const trackPropertiesQuery = (trackId: string) =>
+  queryOptions({
+    queryKey: ["track-properties", trackId],
+    queryFn: async () => {
+      // The corrections only mark which tags were corrected. A failure to
+      // read them costs those marks, not the panel.
+      const [track, tracked] = await Promise.all([
+        getTrackProperties(trackId),
+        getTrackOverrides(trackId).catch(() => null),
+      ]);
+      return { track, tracked };
+    },
+  });
+
+export const lyricsQuery = (trackId: string) =>
+  queryOptions({
+    queryKey: ["lyrics", trackId],
+    queryFn: () => getLyrics(trackId),
+  });
+
+/**
+ * A canvas ticket, held for exactly as long as it is being looked at.
+ *
+ * `staleTime` and `gcTime` at zero, against the defaults, because what this
+ * answers is not data but a **credential with a deadline** — an AEAD-sealed
+ * ticket the `<video>` plays from, since it can send no Authorization header.
+ * A cache has no notion of that deadline and would go on serving the ticket
+ * after it passed. The lifetime is `WAVEFLOW_STREAM_TICKET_TTL`, an hour by
+ * default and an operator's to shorten, so "shorter than the cache" is a
+ * configuration away rather than impossible. `player.tsx` checks the deadline
+ * before playing a stream ticket for the same reason; here there is simply
+ * nothing worth keeping.
+ *
+ * A track with no canvas answers `null`, which a query holds as an answer. The
+ * hook this replaced could not tell that from "still waiting" and had to be
+ * handed an object to unwrap.
+ */
+export const canvasQuery = (trackId: string) =>
+  queryOptions({
+    queryKey: ["canvas", trackId],
+    queryFn: () => canvasUrl(trackId),
+    staleTime: 0,
+    gcTime: 0,
+  });
+
+/**
+ * Everything the tag editor shows for one track: its effective values, and the
+ * corrections behind them.
+ *
+ * Two reads rather than one, because provenance appears on this screen and
+ * nowhere else — the catalogue shows the effective value everywhere.
+ */
+export const trackEditQuery = (trackId: string) =>
+  queryOptions({
+    queryKey: ["track-edit", trackId],
+    queryFn: async () => {
+      const [song, tracked] = await Promise.all([
+        getTrackCredits(trackId),
+        getTrackOverrides(trackId),
+      ]);
+      return { song, tracked };
+    },
+  });
diff --git a/webapp/src/pages/admin-page.tsx b/webapp/src/pages/admin-page.tsx
deleted file mode 100644
index a079f4af..00000000
--- a/webapp/src/pages/admin-page.tsx
+++ /dev/null
@@ -1,860 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { type FormEvent, Fragment, useEffect, useState } from "react";
-
-import {
-  ApiError,
-  addLibrary,
-  createApiToken,
-  createUser,
-  currentUser,
-  deleteLibrary,
-  type Library,
-  removeLibraryMember,
-  revokeApiToken,
-  type ScanJob,
-  setLibraryMember,
-  setSubsonicCredential,
-  setUserDisabled,
-  startScan,
-  type User,
-  updateLibrary,
-  watchScan,
-} from "../api";
-import {
-  administrationQuery,
-  apiTokensQuery,
-  libraryMembersQuery,
-  librarySettingsQuery,
-  nowPlayingQuery,
-} from "../api/queries";
-import {
-  Loading,
-  PageHeader,
-  useReload,
-  Waiting,
-} from "../components/page-shell";
-import { type TranslationKey, useI18n } from "../state/i18n";
-
-function CredentialForm({ user }: { user: User }) {
-  const { t } = useI18n();
-  const [password, setPassword] = useState("");
-  const [apiKey, setApiKey] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  async function submit(event: FormEvent) {
-    event.preventDefault();
-    setError(null);
-    try {
-      const result = await setSubsonicCredential(user.username, password);
-      setApiKey(result.api_key);
-      setPassword("");
-    } catch {
-      setError(t("credential.error"));
-    }
-  }
-  return (
-    <form className="credential-form" onSubmit={(event) => void submit(event)}>
-      <input
-        type="password"
-        value={password}
-        onChange={(event) => setPassword(event.target.value)}
-        placeholder={t("credential.password")}
-        aria-label={`${t("credential.password")} — ${user.username}`}
-        minLength={12}
-        required
-      />
-      <button type="submit">{t("credential.rotate")}</button>
-      {apiKey ? (
-        <output className="secret-output">
-          {t("credential.copy")} <code>{apiKey}</code>
-        </output>
-      ) : null}
-      {error ? <span className="error">{error}</span> : null}
-    </form>
-  );
-}
-
-/**
- * The statuses `scan_job.status` holds. Looked up rather than cast: an unknown
- * key makes `translate` read a property of `undefined` and takes the page down,
- * so a status this table does not know is shown as it came.
- */
-const SCAN_STATUS: Record<string, TranslationKey> = {
-  queued: "scan.queued",
-  running: "scan.running",
-  completed: "scan.completed",
-  failed: "scan.failed",
-};
-
-/**
- * A scan while it runs. The admin screen used to start one and say nothing
- * more; the progress stream has been there all along.
- */
-function ScanProgress({ scanId }: { scanId: string }) {
-  const { t } = useI18n();
-  const [job, setJob] = useState<ScanJob | null>(null);
-  const [lost, setLost] = useState(false);
-
-  useEffect(() => {
-    setJob(null);
-    setLost(false);
-    // The snapshot arrives on the stream itself, so there is nothing to fetch
-    // first; a stream that cannot open leaves the panel on its last reading.
-    return watchScan(scanId, setJob, () => setLost(true));
-  }, [scanId]);
-
-  // A stream that cannot open has to say so: without this the panel waited on
-  // a first reading that was never coming, for as long as the page stayed up.
-  if (!job && lost) {
-    return (
-      <p className="error" role="alert">
-        {t("scan.lost")}
-      </p>
-    );
-  }
-  if (!job) return <p className="muted">{t("scan.connecting")}</p>;
-  const done = job.status !== "running" && job.status !== "queued";
-  const share = job.total_files > 0 ? job.processed_files / job.total_files : 0;
-  return (
-    <div className="scan-progress">
-      <div className="scan-line">
-        <strong>
-          {SCAN_STATUS[job.status] ? t(SCAN_STATUS[job.status]) : job.status}
-        </strong>
-        <span className="muted">
-          {t("scan.counted", {
-            processed: job.processed_files,
-            total: job.total_files,
-          })}
-        </span>
-      </div>
-      <progress
-        max={job.total_files || 1}
-        value={job.processed_files}
-        aria-label={t("scan.progress")}
-      >
-        {Math.round(share * 100)}%
-      </progress>
-      <p className="muted scan-tally">
-        {t("scan.tally", {
-          added: job.added,
-          updated: job.updated,
-          moved: job.moved,
-          skipped: job.skipped,
-          errors: job.errors,
-        })}
-      </p>
-      {/* What the walk left out (RFC-021): only when there is something to
-          say, since most libraries have neither. */}
-      {job.excluded > 0 || job.skipped_links > 0 ? (
-        <p className="muted scan-tally">
-          {t("scan.leftOut", {
-            excluded: job.excluded,
-            links: job.skipped_links,
-          })}
-        </p>
-      ) : null}
-      {/* The path is the only thing here that moves fast enough to read as
-          liveness, and it is what tells a long scan from a stuck one. */}
-      {!done && job.current_path ? (
-        <p className="muted scan-path">{job.current_path}</p>
-      ) : null}
-      {job.message ? <p className="error">{job.message}</p> : null}
-    </div>
-  );
-}
-
-/** Who is listening to what, right now, across the accounts one can see. */
-function NowPlayingPanel() {
-  const { t } = useI18n();
-  // No stream exists for this one, so it is polled, on the interval the query
-  // carries. A query keeps the reading it has while it refetches, so the panel
-  // no longer has to hold the previous one in a state of its own to avoid
-  // flashing "nobody is listening" every thirty seconds.
-  const { data: entries } = useQuery(nowPlayingQuery());
-
-  return (
-    <article className="admin-panel now-playing-panel">
-      <h3>{t("admin.nowPlaying")}</h3>
-      {entries?.length ? (
-        <ul className="list resource-list">
-          {entries.map((entry) => (
-            <li key={`${entry.username}-${entry.song.id}`}>
-              <div>
-                <strong>{entry.song.title}</strong>
-                <small className="muted">
-                  {entry.song.artist ?? t("common.unknownArtist")}
-                </small>
-              </div>
-              <span className="muted">{entry.username}</span>
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p className="muted">{t("admin.nobodyListening")}</p>
-      )}
-    </article>
-  );
-}
-
-/** API tokens for one account, so a client can be authorised without the CLI. */
-function ApiTokensPanel({ username }: { username: string }) {
-  const { t } = useI18n();
-  const reload = useReload(apiTokensQuery(username, true).queryKey);
-  const [name, setName] = useState("");
-  const [secret, setSecret] = useState<string | null>(null);
-  const [failed, setFailed] = useState(false);
-  // Closed until asked for. The panel is rendered once per account, so loading
-  // on mount meant one request per account every time the admin screen opened
-  // — for a list almost nobody opens.
-  const [open, setOpen] = useState(false);
-  const { data: value, error } = useQuery(apiTokensQuery(username, open));
-
-  async function issue(event: FormEvent) {
-    event.preventDefault();
-    setFailed(false);
-    try {
-      const created = await createApiToken(username, name);
-      setName("");
-      // Shown once and never again: only its SHA-256 hash is stored.
-      setSecret(created.secret);
-      reload();
-    } catch {
-      setFailed(true);
-    }
-  }
-
-  async function revoke(id: string) {
-    setFailed(false);
-    try {
-      await revokeApiToken(username, id);
-      reload();
-    } catch {
-      setFailed(true);
-    }
-  }
-
-  const live = (value ?? []).filter((token) => token.revoked_at === null);
-  return (
-    // A disclosure button rather than `<details>`: `onToggle` is a non-bubbling
-    // event that did not reach React here, so the panel opened on screen while
-    // the state gating the request stayed false — and controlling `<details>`
-    // by cancelling the summary's click takes its keyboard handling with it.
-    <article className="admin-panel token-panel">
-      <h3>
-        <button
-          type="button"
-          aria-expanded={open}
-          onClick={() => setOpen((value) => !value)}
-        >
-          {t("admin.tokens", { username })}
-        </button>
-      </h3>
-      {open ? (
-        <>
-          <form className="inline-form" onSubmit={(event) => void issue(event)}>
-            <input
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-              placeholder={t("admin.tokenName")}
-              aria-label={t("admin.tokenName")}
-              required
-            />
-            <button type="submit">{t("admin.tokenCreate")}</button>
-          </form>
-          {failed ? <p className="error">{t("admin.tokenError")}</p> : null}
-          {secret ? (
-            <p className="notice">
-              {t("admin.tokenOnce")}{" "}
-              <code className="secret-output">{secret}</code>
-            </p>
-          ) : null}
-          {live.length ? (
-            <ul className="list resource-list">
-              {live.map((token) => (
-                <li key={token.id}>
-                  <div>
-                    <strong>{token.name}</strong>
-                    <small className="muted">
-                      {token.last_used_at
-                        ? t("admin.tokenUsed")
-                        : t("admin.tokenUnused")}
-                    </small>
-                  </div>
-                  <button
-                    type="button"
-                    className="danger"
-                    onClick={() => void revoke(token.id)}
-                    aria-label={`${t("admin.tokenRevoke")}: ${token.name}`}
-                  >
-                    {t("admin.tokenRevoke")}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          ) : error ? (
-            // A list that could not be fetched is not an empty list. Saying
-            // "no token on this account" here would be a claim about the
-            // account, made out of a failed request.
-            <p className="error" role="alert">
-              {t("common.loadError")}
-            </p>
-          ) : (
-            <p className="muted">{t("admin.tokenNone")}</p>
-          )}
-        </>
-      ) : null}
-    </article>
-  );
-}
-
-/**
- * Who may see one library, and in what standing.
- *
- * Its own disclosure per library, for the reason the token panel has one: the
- * admin screen renders it once per library, and loading on mount would ask for
- * every membership list every time the page opened.
- *
- * The owner is shown and cannot be changed from here — the route refuses
- * `owner` outright, so offering it would be offering a refusal.
- */
-function LibraryMembersPanel({
-  libraryId,
-  users,
-}: {
-  libraryId: string;
-  users: User[];
-}) {
-  const { t } = useI18n();
-  const [open, setOpen] = useState(false);
-  const [failed, setFailed] = useState(false);
-  const reload = useReload(libraryMembersQuery(libraryId, true).queryKey);
-  const { data: value, error } = useQuery(libraryMembersQuery(libraryId, open));
-
-  async function grant(userId: string, role: "manager" | "listener") {
-    setFailed(false);
-    try {
-      await setLibraryMember(libraryId, userId, role);
-      reload();
-    } catch {
-      setFailed(true);
-    }
-  }
-
-  async function revoke(userId: string) {
-    setFailed(false);
-    try {
-      await removeLibraryMember(libraryId, userId);
-      reload();
-    } catch {
-      setFailed(true);
-    }
-  }
-
-  // `value ?? []` conflated three states, and two of them are not an empty
-  // list. An empty list is not even reachable: every library has at least its
-  // owner, and the service answers 404 rather than nothing. So `null` means
-  // "not known yet" — either in flight or failed — and standing in an empty
-  // array for it made `outside` every account on the server, offering access
-  // to people who already had it, under the error saying the list could not be
-  // read.
-  const members = value;
-  const outside = members
-    ? users.filter(
-        (user) => !members.some((member) => member.user_id === user.id),
-      )
-    : [];
-  return (
-    <article className="admin-panel token-panel">
-      <h3>
-        <button
-          type="button"
-          aria-expanded={open}
-          onClick={() => setOpen((value) => !value)}
-        >
-          {t("admin.members")}
-        </button>
-      </h3>
-      {open ? (
-        <>
-          {failed ? <p className="error">{t("admin.memberError")}</p> : null}
-          {error ? (
-            <p className="error" role="alert">
-              {t("common.loadError")}
-            </p>
-          ) : !members ? (
-            <Waiting />
-          ) : (
-            <ul className="list resource-list">
-              {members.map((member) => (
-                <li key={member.user_id}>
-                  <div>
-                    <strong>{member.username}</strong>
-                    <small className="muted">{member.role}</small>
-                  </div>
-                  {member.role === "owner" ? (
-                    <span className="muted">{t("admin.memberOwner")}</span>
-                  ) : (
-                    <div className="actions">
-                      <label className="control">
-                        <span>{t("admin.memberRole")}</span>
-                        <select
-                          value={member.role}
-                          aria-label={`${t("admin.memberRole")}: ${member.username}`}
-                          onChange={(event) =>
-                            void grant(
-                              member.user_id,
-                              event.target.value as "manager" | "listener",
-                            )
-                          }
-                        >
-                          <option value="listener">listener</option>
-                          <option value="manager">manager</option>
-                        </select>
-                      </label>
-                      <button
-                        type="button"
-                        className="danger"
-                        onClick={() => void revoke(member.user_id)}
-                        aria-label={`${t("admin.memberRemove")}: ${member.username}`}
-                      >
-                        {t("admin.memberRemove")}
-                      </button>
-                    </div>
-                  )}
-                </li>
-              ))}
-            </ul>
-          )}
-          {outside.length ? (
-            <label className="control">
-              <span>{t("admin.memberAdd")}</span>
-              <select
-                value=""
-                aria-label={t("admin.memberAdd")}
-                onChange={(event) =>
-                  event.target.value &&
-                  void grant(event.target.value, "listener")
-                }
-              >
-                <option value="">{t("admin.memberChoose")}</option>
-                {outside.map((user) => (
-                  <option key={user.id} value={user.id}>
-                    {user.username}
-                  </option>
-                ))}
-              </select>
-            </label>
-          ) : null}
-        </>
-      ) : null}
-    </article>
-  );
-}
-
-/**
- * One library's name, folder and links setting, and its deletion (RFC-021
- * decision 5). A disclosure of its own per library, for the reason the
- * membership panel has one: the settings, which carry the folder on the
- * server, are asked for only once it is open.
- *
- * Deleting asks for the library's name to be typed, and the server checks it
- * again: a deletion takes every track, album and artist out of the catalogue
- * for every member, with their playlist entries, favourites and plays.
- */
-function LibrarySettingsPanel({
-  library,
-  onScan,
-  onDeleted,
-}: {
-  library: Library;
-  onScan: (scanId: string) => void;
-  onDeleted: (message: string) => void;
-}) {
-  const { t } = useI18n();
-  const [open, setOpen] = useState(false);
-  const reloadSettings = useReload(
-    librarySettingsQuery(library.id, true).queryKey,
-  );
-  const reloadAdministration = useReload(administrationQuery().queryKey);
-  const { data: settings, error } = useQuery(
-    librarySettingsQuery(library.id, open),
-  );
-  // `null` until edited: the form shows what the server holds until then.
-  const [name, setName] = useState<string | null>(null);
-  const [path, setPath] = useState<string | null>(null);
-  const [follow, setFollow] = useState<boolean | null>(null);
-  const [watch, setWatch] = useState<boolean | null>(null);
-  const [confirm, setConfirm] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [notice, setNotice] = useState<{ error: boolean; text: string } | null>(
-    null,
-  );
-
-  function refusal(error: unknown, fallback: TranslationKey): string {
-    return error instanceof ApiError && error.status === 409
-      ? t("admin.saveBusy")
-      : t(fallback);
-  }
-
-  async function save(event: FormEvent) {
-    event.preventDefault();
-    if (!settings) return;
-    const update: {
-      name?: string;
-      path?: string;
-      follow_links?: boolean;
-      watch?: boolean;
-    } = {};
-    if (name !== null && name.trim() !== settings.name) update.name = name;
-    if (path !== null && path !== settings.path) update.path = path;
-    if (follow !== null && follow !== settings.follow_links) {
-      update.follow_links = follow;
-    }
-    if (watch !== null && watch !== settings.watch) update.watch = watch;
-    if (Object.keys(update).length === 0) return;
-    setBusy(true);
-    setNotice(null);
-    try {
-      const result = await updateLibrary(library.id, update);
-      setNotice({
-        error: false,
-        text: result.scan_id
-          ? t("admin.savedScan", { id: result.scan_id })
-          : t("admin.saved"),
-      });
-      if (result.scan_id) onScan(result.scan_id);
-      setName(null);
-      setPath(null);
-      setFollow(null);
-      setWatch(null);
-      reloadSettings();
-      reloadAdministration();
-    } catch (error) {
-      setNotice({ error: true, text: refusal(error, "admin.saveError") });
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function remove() {
-    setBusy(true);
-    setNotice(null);
-    try {
-      const deleted = await deleteLibrary(library.id, confirm);
-      onDeleted(
-        t("admin.deleted", { name: library.name, tracks: deleted.tracks }),
-      );
-      reloadAdministration();
-    } catch (error) {
-      setNotice({ error: true, text: refusal(error, "admin.deleteError") });
-      setBusy(false);
-    }
-  }
-
-  return (
-    <article className="admin-panel token-panel">
-      <h3>
-        <button
-          type="button"
-          aria-expanded={open}
-          onClick={() => setOpen((value) => !value)}
-        >
-          {t("admin.manage")}
-        </button>
-      </h3>
-      {open ? (
-        error ? (
-          <p className="error" role="alert">
-            {t("common.loadError")}
-          </p>
-        ) : !settings ? (
-          <Waiting />
-        ) : (
-          <>
-            <form
-              className="stacked-form"
-              onSubmit={(event) => void save(event)}
-            >
-              <label className="control">
-                <span>{t("admin.rename")}</span>
-                <input
-                  value={name ?? settings.name}
-                  onChange={(event) => setName(event.target.value)}
-                  required
-                />
-              </label>
-              <label className="control">
-                <span>{t("admin.path")}</span>
-                <input
-                  value={path ?? settings.path}
-                  onChange={(event) => setPath(event.target.value)}
-                  required
-                />
-              </label>
-              <label className="toggle-row">
-                <input
-                  type="checkbox"
-                  className="toggle-box"
-                  checked={follow ?? settings.follow_links}
-                  onChange={(event) => setFollow(event.target.checked)}
-                />
-                <span>{t("admin.followLinks")}</span>
-              </label>
-              <label className="toggle-row">
-                <input
-                  type="checkbox"
-                  className="toggle-box"
-                  checked={watch ?? settings.watch}
-                  onChange={(event) => setWatch(event.target.checked)}
-                />
-                <span>{t("admin.watch")}</span>
-              </label>
-              <button type="submit" disabled={busy}>
-                {t("admin.save")}
-              </button>
-            </form>
-            {notice ? (
-              <p
-                className={notice.error ? "error" : "notice"}
-                role={notice.error ? "alert" : "status"}
-              >
-                {notice.text}
-              </p>
-            ) : null}
-            <div className="stacked-form danger-zone">
-              <strong>{t("admin.delete")}</strong>
-              <p className="muted danger-note">{t("admin.deleteNote")}</p>
-              <input
-                value={confirm}
-                onChange={(event) => setConfirm(event.target.value)}
-                placeholder={library.name}
-                aria-label={t("admin.deleteConfirm")}
-                autoComplete="off"
-              />
-              <button
-                type="button"
-                className="danger"
-                disabled={busy || confirm !== library.name}
-                onClick={() => void remove()}
-              >
-                {t("admin.deleteButton")}
-              </button>
-            </div>
-          </>
-        )
-      ) : null}
-    </article>
-  );
-}
-
-export function AdminPage() {
-  const signedInUser = currentUser();
-  const { t } = useI18n();
-  const reload = useReload(administrationQuery().queryKey);
-  const [notice, setNotice] = useState<string | null>(null);
-  const [adminError, setAdminError] = useState<string | null>(null);
-  const [libraryName, setLibraryName] = useState("");
-  const [libraryPath, setLibraryPath] = useState("");
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [libraryBusy, setLibraryBusy] = useState(false);
-  const [userBusy, setUserBusy] = useState(false);
-  // The scan whose progress is on screen — whichever was started last from
-  // here. Starting another replaces it rather than stacking panels.
-  const [watchedScan, setWatchedScan] = useState<string | null>(null);
-  const { data: value, error } = useQuery(administrationQuery());
-  if (!value) return <Loading error={error} />;
-  const [libraries, users] = value;
-
-  async function registerLibrary(event: FormEvent) {
-    event.preventDefault();
-    setLibraryBusy(true);
-    setAdminError(null);
-    setNotice(null);
-    try {
-      const result = await addLibrary(libraryName, libraryPath, "private");
-      setLibraryName("");
-      setLibraryPath("");
-      setNotice(t("admin.initialScan", { id: result.scan_id }));
-      setWatchedScan(result.scan_id);
-      reload();
-    } catch {
-      setAdminError(t("admin.libraryError"));
-    } finally {
-      setLibraryBusy(false);
-    }
-  }
-
-  async function addUser(event: FormEvent) {
-    event.preventDefault();
-    setUserBusy(true);
-    setAdminError(null);
-    setNotice(null);
-    try {
-      await createUser(username, password, "user");
-      setUsername("");
-      setPassword("");
-      reload();
-    } catch {
-      setAdminError(t("admin.accountError"));
-    } finally {
-      setUserBusy(false);
-    }
-  }
-
-  async function toggleUser(user: User) {
-    setAdminError(null);
-    setNotice(null);
-    try {
-      await setUserDisabled(user.username, !user.disabled);
-      reload();
-    } catch {
-      setAdminError(t("admin.statusError"));
-    }
-  }
-
-  async function scanLibrary(libraryId: string) {
-    setAdminError(null);
-    setNotice(null);
-    try {
-      const result = await startScan(libraryId);
-      setNotice(t("admin.scanQueued", { id: result.scan_id }));
-      setWatchedScan(result.scan_id);
-    } catch {
-      setAdminError(t("admin.scanError"));
-    }
-  }
-
-  return (
-    <section className="admin-page">
-      <PageHeader
-        kicker={t("nav.settings")}
-        title={t("admin.title")}
-        detail={t("admin.detail")}
-      />
-      {notice ? <p className="notice">{notice}</p> : null}
-      {adminError ? <p className="error">{adminError}</p> : null}
-      {watchedScan ? (
-        <article className="admin-panel scan-panel">
-          <h3>{t("admin.scanning")}</h3>
-          <ScanProgress scanId={watchedScan} />
-        </article>
-      ) : null}
-      <div className="admin-grid">
-        <article className="admin-panel">
-          <h3>{t("admin.libraries")}</h3>
-          <form
-            className="stacked-form"
-            onSubmit={(event) => void registerLibrary(event)}
-          >
-            <input
-              value={libraryName}
-              onChange={(event) => setLibraryName(event.target.value)}
-              placeholder={t("admin.libraryName")}
-              required
-            />
-            <input
-              value={libraryPath}
-              onChange={(event) => setLibraryPath(event.target.value)}
-              placeholder={t("admin.libraryPath")}
-              required
-            />
-            <button type="submit" disabled={libraryBusy}>
-              {libraryBusy ? t("admin.registering") : t("admin.register")}
-            </button>
-          </form>
-          <ul className="resource-list compact">
-            {/* One pass, so each library's membership sits under that library.
-                Two passes listed every library and then every panel, which put
-                the third library's members four rows below it. */}
-            {libraries.map((library) => (
-              <Fragment key={library.id}>
-                <li>
-                  <div>
-                    <strong>{library.name}</strong>
-                    <span className="muted">{library.visibility}</span>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => void scanLibrary(library.id)}
-                  >
-                    {t("admin.scan")}
-                  </button>
-                </li>
-                <li className="member-row">
-                  <LibraryMembersPanel libraryId={library.id} users={users} />
-                </li>
-                <li className="member-row">
-                  <LibrarySettingsPanel
-                    library={library}
-                    onScan={setWatchedScan}
-                    onDeleted={(message) => {
-                      setAdminError(null);
-                      setNotice(message);
-                    }}
-                  />
-                </li>
-              </Fragment>
-            ))}
-          </ul>
-        </article>
-        <article className="admin-panel">
-          <h3>{t("admin.accounts")}</h3>
-          <form
-            className="stacked-form"
-            onSubmit={(event) => void addUser(event)}
-          >
-            <input
-              value={username}
-              onChange={(event) => setUsername(event.target.value)}
-              placeholder={t("login.username")}
-              autoComplete="off"
-              required
-            />
-            <input
-              type="password"
-              value={password}
-              onChange={(event) => setPassword(event.target.value)}
-              placeholder={t("admin.webPassword")}
-              minLength={12}
-              autoComplete="new-password"
-              required
-            />
-            <button type="submit" disabled={userBusy}>
-              {userBusy ? t("admin.creating") : t("admin.create")}
-            </button>
-          </form>
-        </article>
-      </div>
-      <div className="stack">
-        {users.map((user) => (
-          <article className="user-row" key={user.id}>
-            <header>
-              <div>
-                <strong>{user.username}</strong>
-                <span className="muted">
-                  {user.role} · {user.folder_ids.length} libraries
-                </span>
-              </div>
-              <button
-                type="button"
-                onClick={() => void toggleUser(user)}
-                disabled={user.id === signedInUser?.id}
-                title={
-                  user.id === signedInUser?.id
-                    ? t("admin.currentAccount")
-                    : undefined
-                }
-              >
-                {user.disabled ? t("admin.enable") : t("admin.disable")}
-              </button>
-            </header>
-            <CredentialForm user={user} />
-            <ApiTokensPanel username={user.username} />
-          </article>
-        ))}
-      </div>
-      <NowPlayingPanel />
-    </section>
-  );
-}
diff --git a/webapp/src/pages/admin-page/activity.tsx b/webapp/src/pages/admin-page/activity.tsx
new file mode 100644
index 00000000..b08c647b
--- /dev/null
+++ b/webapp/src/pages/admin-page/activity.tsx
@@ -0,0 +1,131 @@
+// What the server is doing now: a scan's progress, who is listening.
+
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import { type ScanJob, watchScan } from "../../api";
+import { nowPlayingQuery } from "../../api/queries";
+import { type TranslationKey, useI18n } from "../../state/i18n";
+
+/**
+ * The statuses `scan_job.status` holds. Looked up rather than cast: an unknown
+ * key makes `translate` read a property of `undefined` and takes the page down,
+ * so a status this table does not know is shown as it came.
+ */
+const SCAN_STATUS: Record<string, TranslationKey> = {
+  queued: "scan.queued",
+  running: "scan.running",
+  completed: "scan.completed",
+  failed: "scan.failed",
+};
+
+/**
+ * A scan while it runs. The admin screen used to start one and say nothing
+ * more; the progress stream has been there all along.
+ */
+export function ScanProgress({ scanId }: { scanId: string }) {
+  const { t } = useI18n();
+  const [job, setJob] = useState<ScanJob | null>(null);
+  const [lost, setLost] = useState(false);
+
+  useEffect(() => {
+    setJob(null);
+    setLost(false);
+    // The snapshot arrives on the stream itself, so there is nothing to fetch
+    // first; a stream that cannot open leaves the panel on its last reading.
+    return watchScan(scanId, setJob, () => setLost(true));
+  }, [scanId]);
+
+  // A stream that cannot open has to say so: without this the panel waited on
+  // a first reading that was never coming, for as long as the page stayed up.
+  if (!job && lost) {
+    return (
+      <p className="error" role="alert">
+        {t("scan.lost")}
+      </p>
+    );
+  }
+  if (!job) return <p className="muted">{t("scan.connecting")}</p>;
+  const done = job.status !== "running" && job.status !== "queued";
+  const share = job.total_files > 0 ? job.processed_files / job.total_files : 0;
+  return (
+    <div className="scan-progress">
+      <div className="scan-line">
+        <strong>
+          {SCAN_STATUS[job.status] ? t(SCAN_STATUS[job.status]) : job.status}
+        </strong>
+        <span className="muted">
+          {t("scan.counted", {
+            processed: job.processed_files,
+            total: job.total_files,
+          })}
+        </span>
+      </div>
+      <progress
+        max={job.total_files || 1}
+        value={job.processed_files}
+        aria-label={t("scan.progress")}
+      >
+        {Math.round(share * 100)}%
+      </progress>
+      <p className="muted scan-tally">
+        {t("scan.tally", {
+          added: job.added,
+          updated: job.updated,
+          moved: job.moved,
+          skipped: job.skipped,
+          errors: job.errors,
+        })}
+      </p>
+      {/* What the walk left out (RFC-021): only when there is something to
+          say, since most libraries have neither. */}
+      {job.excluded > 0 || job.skipped_links > 0 ? (
+        <p className="muted scan-tally">
+          {t("scan.leftOut", {
+            excluded: job.excluded,
+            links: job.skipped_links,
+          })}
+        </p>
+      ) : null}
+      {/* The path is the only thing here that moves fast enough to read as
+          liveness, and it is what tells a long scan from a stuck one. */}
+      {!done && job.current_path ? (
+        <p className="muted scan-path">{job.current_path}</p>
+      ) : null}
+      {job.message ? <p className="error">{job.message}</p> : null}
+    </div>
+  );
+}
+
+/** Who is listening to what, right now, across the accounts one can see. */
+export function NowPlayingPanel() {
+  const { t } = useI18n();
+  // No stream exists for this one, so it is polled, on the interval the query
+  // carries. A query keeps the reading it has while it refetches, so the panel
+  // no longer has to hold the previous one in a state of its own to avoid
+  // flashing "nobody is listening" every thirty seconds.
+  const { data: entries } = useQuery(nowPlayingQuery());
+
+  return (
+    <article className="admin-panel now-playing-panel">
+      <h3>{t("admin.nowPlaying")}</h3>
+      {entries?.length ? (
+        <ul className="list resource-list">
+          {entries.map((entry) => (
+            <li key={`${entry.username}-${entry.song.id}`}>
+              <div>
+                <strong>{entry.song.title}</strong>
+                <small className="muted">
+                  {entry.song.artist ?? t("common.unknownArtist")}
+                </small>
+              </div>
+              <span className="muted">{entry.username}</span>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="muted">{t("admin.nobodyListening")}</p>
+      )}
+    </article>
+  );
+}
diff --git a/webapp/src/pages/admin-page/credentials.tsx b/webapp/src/pages/admin-page/credentials.tsx
new file mode 100644
index 00000000..c83034a6
--- /dev/null
+++ b/webapp/src/pages/admin-page/credentials.tsx
@@ -0,0 +1,163 @@
+// One account's credentials: its Subsonic password and its API tokens.
+
+import { useQuery } from "@tanstack/react-query";
+import { type FormEvent, useState } from "react";
+
+import {
+  createApiToken,
+  revokeApiToken,
+  setSubsonicCredential,
+  type User,
+} from "../../api";
+import { apiTokensQuery } from "../../api/queries";
+import { useReload } from "../../components/page-shell";
+import { useI18n } from "../../state/i18n";
+
+export function CredentialForm({ user }: { user: User }) {
+  const { t } = useI18n();
+  const [password, setPassword] = useState("");
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setError(null);
+    try {
+      const result = await setSubsonicCredential(user.username, password);
+      setApiKey(result.api_key);
+      setPassword("");
+    } catch {
+      setError(t("credential.error"));
+    }
+  }
+  return (
+    <form className="credential-form" onSubmit={(event) => void submit(event)}>
+      <input
+        type="password"
+        value={password}
+        onChange={(event) => setPassword(event.target.value)}
+        placeholder={t("credential.password")}
+        aria-label={`${t("credential.password")} — ${user.username}`}
+        minLength={12}
+        required
+      />
+      <button type="submit">{t("credential.rotate")}</button>
+      {apiKey ? (
+        <output className="secret-output">
+          {t("credential.copy")} <code>{apiKey}</code>
+        </output>
+      ) : null}
+      {error ? <span className="error">{error}</span> : null}
+    </form>
+  );
+}
+
+/** API tokens for one account, so a client can be authorised without the CLI. */
+export function ApiTokensPanel({ username }: { username: string }) {
+  const { t } = useI18n();
+  const reload = useReload(apiTokensQuery(username, true).queryKey);
+  const [name, setName] = useState("");
+  const [secret, setSecret] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  // Closed until asked for. The panel is rendered once per account, so loading
+  // on mount meant one request per account every time the admin screen opened
+  // — for a list almost nobody opens.
+  const [open, setOpen] = useState(false);
+  const { data: value, error } = useQuery(apiTokensQuery(username, open));
+
+  async function issue(event: FormEvent) {
+    event.preventDefault();
+    setFailed(false);
+    try {
+      const created = await createApiToken(username, name);
+      setName("");
+      // Shown once and never again: only its SHA-256 hash is stored.
+      setSecret(created.secret);
+      reload();
+    } catch {
+      setFailed(true);
+    }
+  }
+
+  async function revoke(id: string) {
+    setFailed(false);
+    try {
+      await revokeApiToken(username, id);
+      reload();
+    } catch {
+      setFailed(true);
+    }
+  }
+
+  const live = (value ?? []).filter((token) => token.revoked_at === null);
+  return (
+    // A disclosure button rather than `<details>`: `onToggle` is a non-bubbling
+    // event that did not reach React here, so the panel opened on screen while
+    // the state gating the request stayed false — and controlling `<details>`
+    // by cancelling the summary's click takes its keyboard handling with it.
+    <article className="admin-panel token-panel">
+      <h3>
+        <button
+          type="button"
+          aria-expanded={open}
+          onClick={() => setOpen((value) => !value)}
+        >
+          {t("admin.tokens", { username })}
+        </button>
+      </h3>
+      {open ? (
+        <>
+          <form className="inline-form" onSubmit={(event) => void issue(event)}>
+            <input
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder={t("admin.tokenName")}
+              aria-label={t("admin.tokenName")}
+              required
+            />
+            <button type="submit">{t("admin.tokenCreate")}</button>
+          </form>
+          {failed ? <p className="error">{t("admin.tokenError")}</p> : null}
+          {secret ? (
+            <p className="notice">
+              {t("admin.tokenOnce")}{" "}
+              <code className="secret-output">{secret}</code>
+            </p>
+          ) : null}
+          {live.length ? (
+            <ul className="list resource-list">
+              {live.map((token) => (
+                <li key={token.id}>
+                  <div>
+                    <strong>{token.name}</strong>
+                    <small className="muted">
+                      {token.last_used_at
+                        ? t("admin.tokenUsed")
+                        : t("admin.tokenUnused")}
+                    </small>
+                  </div>
+                  <button
+                    type="button"
+                    className="danger"
+                    onClick={() => void revoke(token.id)}
+                    aria-label={`${t("admin.tokenRevoke")}: ${token.name}`}
+                  >
+                    {t("admin.tokenRevoke")}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : error ? (
+            // A list that could not be fetched is not an empty list. Saying
+            // "no token on this account" here would be a claim about the
+            // account, made out of a failed request.
+            <p className="error" role="alert">
+              {t("common.loadError")}
+            </p>
+          ) : (
+            <p className="muted">{t("admin.tokenNone")}</p>
+          )}
+        </>
+      ) : null}
+    </article>
+  );
+}
diff --git a/webapp/src/pages/admin-page/index.tsx b/webapp/src/pages/admin-page/index.tsx
new file mode 100644
index 00000000..5c6c3bed
--- /dev/null
+++ b/webapp/src/pages/admin-page/index.tsx
@@ -0,0 +1,231 @@
+// The administration screen: libraries, scans, accounts, listeners.
+
+import { useQuery } from "@tanstack/react-query";
+import { type FormEvent, Fragment, useState } from "react";
+
+import {
+  addLibrary,
+  createUser,
+  currentUser,
+  setUserDisabled,
+  startScan,
+  type User,
+} from "../../api";
+import { administrationQuery } from "../../api/queries";
+import { Loading, PageHeader, useReload } from "../../components/page-shell";
+import { useI18n } from "../../state/i18n";
+import { NowPlayingPanel, ScanProgress } from "./activity";
+import { ApiTokensPanel, CredentialForm } from "./credentials";
+import { LibraryMembersPanel, LibrarySettingsPanel } from "./libraries";
+
+export function AdminPage() {
+  const signedInUser = currentUser();
+  const { t } = useI18n();
+  const reload = useReload(administrationQuery().queryKey);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [adminError, setAdminError] = useState<string | null>(null);
+  const [libraryName, setLibraryName] = useState("");
+  const [libraryPath, setLibraryPath] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [libraryBusy, setLibraryBusy] = useState(false);
+  const [userBusy, setUserBusy] = useState(false);
+  // The scan whose progress is on screen — whichever was started last from
+  // here. Starting another replaces it rather than stacking panels.
+  const [watchedScan, setWatchedScan] = useState<string | null>(null);
+  const { data: value, error } = useQuery(administrationQuery());
+  if (!value) return <Loading error={error} />;
+  const [libraries, users] = value;
+
+  async function registerLibrary(event: FormEvent) {
+    event.preventDefault();
+    setLibraryBusy(true);
+    setAdminError(null);
+    setNotice(null);
+    try {
+      const result = await addLibrary(libraryName, libraryPath, "private");
+      setLibraryName("");
+      setLibraryPath("");
+      setNotice(t("admin.initialScan", { id: result.scan_id }));
+      setWatchedScan(result.scan_id);
+      reload();
+    } catch {
+      setAdminError(t("admin.libraryError"));
+    } finally {
+      setLibraryBusy(false);
+    }
+  }
+
+  async function addUser(event: FormEvent) {
+    event.preventDefault();
+    setUserBusy(true);
+    setAdminError(null);
+    setNotice(null);
+    try {
+      await createUser(username, password, "user");
+      setUsername("");
+      setPassword("");
+      reload();
+    } catch {
+      setAdminError(t("admin.accountError"));
+    } finally {
+      setUserBusy(false);
+    }
+  }
+
+  async function toggleUser(user: User) {
+    setAdminError(null);
+    setNotice(null);
+    try {
+      await setUserDisabled(user.username, !user.disabled);
+      reload();
+    } catch {
+      setAdminError(t("admin.statusError"));
+    }
+  }
+
+  async function scanLibrary(libraryId: string) {
+    setAdminError(null);
+    setNotice(null);
+    try {
+      const result = await startScan(libraryId);
+      setNotice(t("admin.scanQueued", { id: result.scan_id }));
+      setWatchedScan(result.scan_id);
+    } catch {
+      setAdminError(t("admin.scanError"));
+    }
+  }
+
+  return (
+    <section className="admin-page">
+      <PageHeader
+        kicker={t("nav.settings")}
+        title={t("admin.title")}
+        detail={t("admin.detail")}
+      />
+      {notice ? <p className="notice">{notice}</p> : null}
+      {adminError ? <p className="error">{adminError}</p> : null}
+      {watchedScan ? (
+        <article className="admin-panel scan-panel">
+          <h3>{t("admin.scanning")}</h3>
+          <ScanProgress scanId={watchedScan} />
+        </article>
+      ) : null}
+      <div className="admin-grid">
+        <article className="admin-panel">
+          <h3>{t("admin.libraries")}</h3>
+          <form
+            className="stacked-form"
+            onSubmit={(event) => void registerLibrary(event)}
+          >
+            <input
+              value={libraryName}
+              onChange={(event) => setLibraryName(event.target.value)}
+              placeholder={t("admin.libraryName")}
+              required
+            />
+            <input
+              value={libraryPath}
+              onChange={(event) => setLibraryPath(event.target.value)}
+              placeholder={t("admin.libraryPath")}
+              required
+            />
+            <button type="submit" disabled={libraryBusy}>
+              {libraryBusy ? t("admin.registering") : t("admin.register")}
+            </button>
+          </form>
+          <ul className="resource-list compact">
+            {/* One pass, so each library's membership sits under that library.
+                Two passes listed every library and then every panel, which put
+                the third library's members four rows below it. */}
+            {libraries.map((library) => (
+              <Fragment key={library.id}>
+                <li>
+                  <div>
+                    <strong>{library.name}</strong>
+                    <span className="muted">{library.visibility}</span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => void scanLibrary(library.id)}
+                  >
+                    {t("admin.scan")}
+                  </button>
+                </li>
+                <li className="member-row">
+                  <LibraryMembersPanel libraryId={library.id} users={users} />
+                </li>
+                <li className="member-row">
+                  <LibrarySettingsPanel
+                    library={library}
+                    onScan={setWatchedScan}
+                    onDeleted={(message) => {
+                      setAdminError(null);
+                      setNotice(message);
+                    }}
+                  />
+                </li>
+              </Fragment>
+            ))}
+          </ul>
+        </article>
+        <article className="admin-panel">
+          <h3>{t("admin.accounts")}</h3>
+          <form
+            className="stacked-form"
+            onSubmit={(event) => void addUser(event)}
+          >
+            <input
+              value={username}
+              onChange={(event) => setUsername(event.target.value)}
+              placeholder={t("login.username")}
+              autoComplete="off"
+              required
+            />
+            <input
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              placeholder={t("admin.webPassword")}
+              minLength={12}
+              autoComplete="new-password"
+              required
+            />
+            <button type="submit" disabled={userBusy}>
+              {userBusy ? t("admin.creating") : t("admin.create")}
+            </button>
+          </form>
+        </article>
+      </div>
+      <div className="stack">
+        {users.map((user) => (
+          <article className="user-row" key={user.id}>
+            <header>
+              <div>
+                <strong>{user.username}</strong>
+                <span className="muted">
+                  {user.role} · {user.folder_ids.length} libraries
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={() => void toggleUser(user)}
+                disabled={user.id === signedInUser?.id}
+                title={
+                  user.id === signedInUser?.id
+                    ? t("admin.currentAccount")
+                    : undefined
+                }
+              >
+                {user.disabled ? t("admin.enable") : t("admin.disable")}
+              </button>
+            </header>
+            <CredentialForm user={user} />
+            <ApiTokensPanel username={user.username} />
+          </article>
+        ))}
+      </div>
+      <NowPlayingPanel />
+    </section>
+  );
+}
diff --git a/webapp/src/pages/admin-page/libraries.tsx b/webapp/src/pages/admin-page/libraries.tsx
new file mode 100644
index 00000000..ea7f52c9
--- /dev/null
+++ b/webapp/src/pages/admin-page/libraries.tsx
@@ -0,0 +1,361 @@
+// One library's panels: who may see it, its settings and its deletion.
+
+import { useQuery } from "@tanstack/react-query";
+import { type FormEvent, useState } from "react";
+
+import {
+  ApiError,
+  deleteLibrary,
+  type Library,
+  removeLibraryMember,
+  setLibraryMember,
+  type User,
+  updateLibrary,
+} from "../../api";
+import {
+  administrationQuery,
+  libraryMembersQuery,
+  librarySettingsQuery,
+} from "../../api/queries";
+import { useReload, Waiting } from "../../components/page-shell";
+import { type TranslationKey, useI18n } from "../../state/i18n";
+
+/**
+ * Who may see one library, and in what standing.
+ *
+ * Its own disclosure per library, for the reason the token panel has one: the
+ * admin screen renders it once per library, and loading on mount would ask for
+ * every membership list every time the page opened.
+ *
+ * The owner is shown and cannot be changed from here — the route refuses
+ * `owner` outright, so offering it would be offering a refusal.
+ */
+export function LibraryMembersPanel({
+  libraryId,
+  users,
+}: {
+  libraryId: string;
+  users: User[];
+}) {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const reload = useReload(libraryMembersQuery(libraryId, true).queryKey);
+  const { data: value, error } = useQuery(libraryMembersQuery(libraryId, open));
+
+  async function grant(userId: string, role: "manager" | "listener") {
+    setFailed(false);
+    try {
+      await setLibraryMember(libraryId, userId, role);
+      reload();
+    } catch {
+      setFailed(true);
+    }
+  }
+
+  async function revoke(userId: string) {
+    setFailed(false);
+    try {
+      await removeLibraryMember(libraryId, userId);
+      reload();
+    } catch {
+      setFailed(true);
+    }
+  }
+
+  // `value ?? []` conflated three states, and two of them are not an empty
+  // list. An empty list is not even reachable: every library has at least its
+  // owner, and the service answers 404 rather than nothing. So `null` means
+  // "not known yet" — either in flight or failed — and standing in an empty
+  // array for it made `outside` every account on the server, offering access
+  // to people who already had it, under the error saying the list could not be
+  // read.
+  const members = value;
+  const outside = members
+    ? users.filter(
+        (user) => !members.some((member) => member.user_id === user.id),
+      )
+    : [];
+  return (
+    <article className="admin-panel token-panel">
+      <h3>
+        <button
+          type="button"
+          aria-expanded={open}
+          onClick={() => setOpen((value) => !value)}
+        >
+          {t("admin.members")}
+        </button>
+      </h3>
+      {open ? (
+        <>
+          {failed ? <p className="error">{t("admin.memberError")}</p> : null}
+          {error ? (
+            <p className="error" role="alert">
+              {t("common.loadError")}
+            </p>
+          ) : !members ? (
+            <Waiting />
+          ) : (
+            <ul className="list resource-list">
+              {members.map((member) => (
+                <li key={member.user_id}>
+                  <div>
+                    <strong>{member.username}</strong>
+                    <small className="muted">{member.role}</small>
+                  </div>
+                  {member.role === "owner" ? (
+                    <span className="muted">{t("admin.memberOwner")}</span>
+                  ) : (
+                    <div className="actions">
+                      <label className="control">
+                        <span>{t("admin.memberRole")}</span>
+                        <select
+                          value={member.role}
+                          aria-label={`${t("admin.memberRole")}: ${member.username}`}
+                          onChange={(event) =>
+                            void grant(
+                              member.user_id,
+                              event.target.value as "manager" | "listener",
+                            )
+                          }
+                        >
+                          <option value="listener">listener</option>
+                          <option value="manager">manager</option>
+                        </select>
+                      </label>
+                      <button
+                        type="button"
+                        className="danger"
+                        onClick={() => void revoke(member.user_id)}
+                        aria-label={`${t("admin.memberRemove")}: ${member.username}`}
+                      >
+                        {t("admin.memberRemove")}
+                      </button>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+          {outside.length ? (
+            <label className="control">
+              <span>{t("admin.memberAdd")}</span>
+              <select
+                value=""
+                aria-label={t("admin.memberAdd")}
+                onChange={(event) =>
+                  event.target.value &&
+                  void grant(event.target.value, "listener")
+                }
+              >
+                <option value="">{t("admin.memberChoose")}</option>
+                {outside.map((user) => (
+                  <option key={user.id} value={user.id}>
+                    {user.username}
+                  </option>
+                ))}
+              </select>
+            </label>
+          ) : null}
+        </>
+      ) : null}
+    </article>
+  );
+}
+
+/**
+ * One library's name, folder and links setting, and its deletion (RFC-021
+ * decision 5). A disclosure of its own per library, for the reason the
+ * membership panel has one: the settings, which carry the folder on the
+ * server, are asked for only once it is open.
+ *
+ * Deleting asks for the library's name to be typed, and the server checks it
+ * again: a deletion takes every track, album and artist out of the catalogue
+ * for every member, with their playlist entries, favourites and plays.
+ */
+export function LibrarySettingsPanel({
+  library,
+  onScan,
+  onDeleted,
+}: {
+  library: Library;
+  onScan: (scanId: string) => void;
+  onDeleted: (message: string) => void;
+}) {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const reloadSettings = useReload(
+    librarySettingsQuery(library.id, true).queryKey,
+  );
+  const reloadAdministration = useReload(administrationQuery().queryKey);
+  const { data: settings, error } = useQuery(
+    librarySettingsQuery(library.id, open),
+  );
+  // `null` until edited: the form shows what the server holds until then.
+  const [name, setName] = useState<string | null>(null);
+  const [path, setPath] = useState<string | null>(null);
+  const [follow, setFollow] = useState<boolean | null>(null);
+  const [watch, setWatch] = useState<boolean | null>(null);
+  const [confirm, setConfirm] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState<{ error: boolean; text: string } | null>(
+    null,
+  );
+
+  function refusal(error: unknown, fallback: TranslationKey): string {
+    return error instanceof ApiError && error.status === 409
+      ? t("admin.saveBusy")
+      : t(fallback);
+  }
+
+  async function save(event: FormEvent) {
+    event.preventDefault();
+    if (!settings) return;
+    const update: {
+      name?: string;
+      path?: string;
+      follow_links?: boolean;
+      watch?: boolean;
+    } = {};
+    if (name !== null && name.trim() !== settings.name) update.name = name;
+    if (path !== null && path !== settings.path) update.path = path;
+    if (follow !== null && follow !== settings.follow_links) {
+      update.follow_links = follow;
+    }
+    if (watch !== null && watch !== settings.watch) update.watch = watch;
+    if (Object.keys(update).length === 0) return;
+    setBusy(true);
+    setNotice(null);
+    try {
+      const result = await updateLibrary(library.id, update);
+      setNotice({
+        error: false,
+        text: result.scan_id
+          ? t("admin.savedScan", { id: result.scan_id })
+          : t("admin.saved"),
+      });
+      if (result.scan_id) onScan(result.scan_id);
+      setName(null);
+      setPath(null);
+      setFollow(null);
+      setWatch(null);
+      reloadSettings();
+      reloadAdministration();
+    } catch (error) {
+      setNotice({ error: true, text: refusal(error, "admin.saveError") });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function remove() {
+    setBusy(true);
+    setNotice(null);
+    try {
+      const deleted = await deleteLibrary(library.id, confirm);
+      onDeleted(
+        t("admin.deleted", { name: library.name, tracks: deleted.tracks }),
+      );
+      reloadAdministration();
+    } catch (error) {
+      setNotice({ error: true, text: refusal(error, "admin.deleteError") });
+      setBusy(false);
+    }
+  }
+
+  return (
+    <article className="admin-panel token-panel">
+      <h3>
+        <button
+          type="button"
+          aria-expanded={open}
+          onClick={() => setOpen((value) => !value)}
+        >
+          {t("admin.manage")}
+        </button>
+      </h3>
+      {open ? (
+        error ? (
+          <p className="error" role="alert">
+            {t("common.loadError")}
+          </p>
+        ) : !settings ? (
+          <Waiting />
+        ) : (
+          <>
+            <form
+              className="stacked-form"
+              onSubmit={(event) => void save(event)}
+            >
+              <label className="control">
+                <span>{t("admin.rename")}</span>
+                <input
+                  value={name ?? settings.name}
+                  onChange={(event) => setName(event.target.value)}
+                  required
+                />
+              </label>
+              <label className="control">
+                <span>{t("admin.path")}</span>
+                <input
+                  value={path ?? settings.path}
+                  onChange={(event) => setPath(event.target.value)}
+                  required
+                />
+              </label>
+              <label className="toggle-row">
+                <input
+                  type="checkbox"
+                  className="toggle-box"
+                  checked={follow ?? settings.follow_links}
+                  onChange={(event) => setFollow(event.target.checked)}
+                />
+                <span>{t("admin.followLinks")}</span>
+              </label>
+              <label className="toggle-row">
+                <input
+                  type="checkbox"
+                  className="toggle-box"
+                  checked={watch ?? settings.watch}
+                  onChange={(event) => setWatch(event.target.checked)}
+                />
+                <span>{t("admin.watch")}</span>
+              </label>
+              <button type="submit" disabled={busy}>
+                {t("admin.save")}
+              </button>
+            </form>
+            {notice ? (
+              <p
+                className={notice.error ? "error" : "notice"}
+                role={notice.error ? "alert" : "status"}
+              >
+                {notice.text}
+              </p>
+            ) : null}
+            <div className="stacked-form danger-zone">
+              <strong>{t("admin.delete")}</strong>
+              <p className="muted danger-note">{t("admin.deleteNote")}</p>
+              <input
+                value={confirm}
+                onChange={(event) => setConfirm(event.target.value)}
+                placeholder={library.name}
+                aria-label={t("admin.deleteConfirm")}
+                autoComplete="off"
+              />
+              <button
+                type="button"
+                className="danger"
+                disabled={busy || confirm !== library.name}
+                onClick={() => void remove()}
+              >
+                {t("admin.deleteButton")}
+              </button>
+            </div>
+          </>
+        )
+      ) : null}
+    </article>
+  );
+}
diff --git a/webapp/src/pages/playing-page.tsx b/webapp/src/pages/playing-page.tsx
deleted file mode 100644
index 109586b3..00000000
--- a/webapp/src/pages/playing-page.tsx
+++ /dev/null
@@ -1,732 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { Link, useNavigate, useSearch } from "@tanstack/react-router";
-import {
-  type RefObject,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-import {
-  deleteBookmark,
-  formatDuration,
-  type LyricsLine,
-  type Song,
-  type StructuredLyrics,
-  setBookmark,
-} from "../api";
-import { bookmarksQuery, lyricsQuery } from "../api/queries";
-import { Artwork } from "../components/artwork";
-import { CanvasStage, usePrefersReducedMotion } from "../components/canvas";
-import { FileQuality } from "../components/file-quality";
-import { Icon } from "../components/icons";
-import { EmptyState, PageHeader, useReload } from "../components/page-shell";
-import { usePlayer, usePlayerProgress } from "../player/player";
-import { type TranslationKey, useI18n } from "../state/i18n";
-
-/**
- * What the playing screen is showing.
- *
- * Three ways to look at one track, and `detail` is the one that was there
- * before: the cover beside the names, with the words as a strip under them.
- * `lyrics` makes those words the subject instead of a column inside something
- * else, and `immersive` gives the artwork — and the canvas, where the track
- * carries one — the whole viewport.
- */
-export type PlayingView = "detail" | "lyrics" | "immersive";
-
-/**
- * The view a location asks for, or `detail` for anything it does not.
- *
- * **In the URL rather than in a `useState`**, and the reason is the Back
- * button. On a phone, Back is what everybody presses to leave the thing they
- * are in; held in component state, the immersive view would swallow that press
- * and Back would leave the playing screen altogether. A location also makes
- * "read along to this" a link somebody can keep.
- *
- * Only the two modes that are not the default are spelled, so an ordinary
- * visit stays `/playing` and nobody reads `?view=detail`. Anything else — a
- * mode this build does not know, a number, a hostile string — reads as
- * `detail`, because an unknown mode is not a mode and the screen still has to
- * show something.
- */
-export function playingView(search: unknown): PlayingView {
-  const asked =
-    typeof search === "object" && search !== null
-      ? (search as { view?: unknown }).view
-      : undefined;
-  return asked === "lyrics" || asked === "immersive" ? asked : "detail";
-}
-
-/**
- * The line a synced lyric sheet is on at `seconds`. Lines carry their own start
- * in milliseconds and arrive in order, so this is the last one already begun;
- * `-1` before the first. An unsynced sheet has no starts and never highlights.
- */
-export function currentLyricLine(lines: LyricsLine[], seconds: number): number {
-  let current = -1;
-  for (const [index, line] of lines.entries()) {
-    if (line.start === undefined || line.start > seconds * 1000) break;
-    current = index;
-  }
-  return current;
-}
-
-/**
- * What the lyrics panel has to say, from what the query holds.
- *
- * **Three states and not two**: a sheet that has not arrived is not a track
- * without words, and saying "no lyrics" while the request is out is a claim
- * about the track.
- *
- * **And words already held beat a failed attempt.** The cache serves an answer
- * for thirty seconds, so coming back to this view later revalidates — and a
- * revalidation that failed used to blank the sheet and print "no lyrics travel
- * with this file", which is a false statement about a track whose words were on
- * the screen a moment earlier. A failure decides only when there is nothing to
- * show.
- *
- * That ordering is also why the scroll effect below does not watch this value:
- * the column it scrolls can no longer be torn down and rebuilt while a sheet is
- * held, so the only remount left is one where `active` moves with it.
- */
-export function lyricSheetState(answer: {
-  /** The query holds an answer, even a stale one. */
-  answered: boolean;
-  /** The last attempt failed. */
-  failed: boolean;
-  /** How many lines the first sheet carries. */
-  lines: number;
-}): "waiting" | "sheet" | "none" {
-  if (answer.answered) return answer.lines > 0 ? "sheet" : "none";
-  return answer.failed ? "none" : "waiting";
-}
-
-/**
- * What a line with no words shows: a non-breaking space, not a plain one.
- *
- * A plain space is collapsible, so the line box around it has no height — a
- * blank timed line became a button zero pixels tall, which the keyboard still
- * reached and nobody could see, focus ring included. A non-breaking space
- * holds one line of height, so the pause keeps its place in the sheet and its
- * button a box. It is still whitespace to axe, which trims it before asking
- * whether the name contains what is on screen.
- */
-const BLANK_LINE = "\u00a0";
-
-/** A track's sheet as `useLyricSheet` reads it: the words, the sung line. */
-type LyricSheet = {
-  sheet: StructuredLyrics | undefined;
-  active: number;
-  keys: string[];
-  state: "waiting" | "sheet" | "none";
-};
-
-/**
- * The sheet a track travels with, and where in it the playing head is.
- *
- * Shared by the strip and the dedicated view below, so the two cannot disagree
- * about which line is being sung — or about how a refrain is keyed, which is
- * the part that is easy to get subtly different twice.
- */
-function useLyricSheet(trackId: string): LyricSheet {
-  const progress = usePlayerProgress();
-  const { data: value, error } = useQuery(lyricsQuery(trackId));
-  const sheet: StructuredLyrics | undefined = value?.structuredLyrics[0];
-  const active = sheet?.synced
-    ? currentLyricLine(sheet.line, progress.position)
-    : -1;
-  // A refrain repeats word for word and an unsynced sheet has no start to key
-  // on, so the line's text alone is not unique. Numbering the repetitions is
-  // what the queue does with the same problem.
-  const keys = useMemo(() => {
-    const seen = new Map<string, number>();
-    return (sheet?.line ?? []).map((line) => {
-      const occurrence = seen.get(line.value) ?? 0;
-      seen.set(line.value, occurrence + 1);
-      return `${line.value}-${occurrence}`;
-    });
-  }, [sheet]);
-  return {
-    sheet,
-    active,
-    keys,
-    state: lyricSheetState({
-      answered: value !== undefined,
-      failed: error !== null,
-      lines: sheet?.line.length ?? 0,
-    }),
-  };
-}
-
-/**
- * Holds the sung line in the middle of `column`, and only `column`.
- *
- * Shared by the strip beside the cover and the lyrics view, so the two follow
- * the words the same way: the strip used to bold the sung line and leave it to
- * scroll out of its own box, which marked a line nobody could see.
- */
-function useFollowSungLine(
-  column: RefObject<HTMLOListElement | null>,
-  sheet: StructuredLyrics | undefined,
-  active: number,
-) {
-  const reduced = usePrefersReducedMotion();
-  // **Before paint, and only when there is something to do.** `useEffect`
-  // would let the new line show at the bottom of the column for a frame before
-  // the scroll caught up. And a progress tick that stays on the same line
-  // changes none of the dependencies, so it costs nothing.
-  useLayoutEffect(() => {
-    // `sheet` is read here and not only named below: there is no column
-    // without one, and a dependency the body never touches is a decorative
-    // dependency — which is exactly what the linter says about it.
-    if (!sheet || active < 0) return;
-    const list = column.current;
-    const line = list?.children[active];
-    if (!list || !line) return;
-    // **The column and nothing else.** `scrollIntoView` scrolls every
-    // scrollable ancestor it has, the window included, so each new sung line
-    // would drag the whole page back to the words — and somebody reading the
-    // bookmarks underneath would be hauled upwards every few seconds.
-    //
-    // Measured from boxes rather than from `offsetTop`, which is relative to
-    // whichever ancestor happens to be positioned: two rectangles need no
-    // assumption about where the list sits in the document.
-    const lineBox = line.getBoundingClientRect();
-    const listBox = list.getBoundingClientRect();
-    list.scrollTo({
-      top:
-        list.scrollTop +
-        (lineBox.top - listBox.top) -
-        (listBox.height - lineBox.height) / 2,
-      // A sheet that jumps rather than glides, for whoever asked for less
-      // motion. The following itself is not decoration — it is how the words
-      // are read — so it is the gliding that goes, not the following.
-      behavior: reduced ? "auto" : "smooth",
-    });
-    // `sheet` as well as `active`, for the track change where the two
-    // sheets agree on the index. Moving to the next track early in it leaves
-    // `active` at 0, which it already was — so without this the column keeps
-    // the previous track's scroll and the opening line of the new one is above
-    // the fold. The object is react-query's and stable between renders, so
-    // naming it costs no extra run.
-  }, [active, column, reduced, sheet]);
-}
-
-/**
- * A sheet's lines, the sung one marked.
- *
- * Where the sheet carries timings, each line is a **button that seeks to it**,
- * in the strip as in the lyrics view. A sheet without timings gets no buttons
- * at all: rendering an unsynced line as something pressable would promise a
- * seek the sheet cannot compute.
- */
-function LyricLines({
-  sheet,
-  active,
-  keys,
-  column,
-}: {
-  sheet: StructuredLyrics;
-  active: number;
-  keys: string[];
-  column: RefObject<HTMLOListElement | null>;
-}) {
-  const { t } = useI18n();
-  const player = usePlayer();
-  return (
-    <ol ref={column} aria-label={t("lyrics.label")}>
-      {sheet.line.map((line, index) => {
-        const at = line.start;
-        const on = index === active;
-        return (
-          <li
-            key={keys[index]}
-            className={on ? "on" : undefined}
-            aria-current={on ? "true" : undefined}
-          >
-            {sheet.synced && at !== undefined ? (
-              <button
-                type="button"
-                className="link"
-                onClick={() => player.seek(at / 1000)}
-                // The words first, then what pressing does. The name must
-                // contain the text on screen (WCAG 2.5.3), or someone saying
-                // "click the lamps come on" to voice control reaches
-                // nothing; the time after it is what a bare line leaves
-                // unsaid. A blank line has no words to repeat.
-                aria-label={
-                  line.value
-                    ? t("lyrics.seekLine", {
-                        line: line.value,
-                        when: formatDuration(at),
-                      })
-                    : t("lyrics.seekTo", { when: formatDuration(at) })
-                }
-              >
-                {line.value || BLANK_LINE}
-              </button>
-            ) : (
-              line.value || BLANK_LINE
-            )}
-          </li>
-        );
-      })}
-    </ol>
-  );
-}
-
-/**
- * The words in the detail view: a column of their own beside the track on a
- * wide screen, under its names on a narrow one.
- *
- * Smaller than the lyrics view and inside a box of its own, but reading the
- * same way: the sung line is held in view and, where the sheet is synced, a
- * line seeks to itself. The sheet is read by `DetailView` and handed down,
- * because that view lays itself out by whether there is one.
- */
-function LyricsStrip({ lyrics }: { lyrics: LyricSheet }) {
-  const { t } = useI18n();
-  const { sheet, active, keys, state } = lyrics;
-  const column = useRef<HTMLOListElement | null>(null);
-  useFollowSungLine(column, sheet, active);
-
-  if (state === "waiting")
-    return <p className="muted">{t("common.loading")}</p>;
-  if (state === "none" || !sheet)
-    return <p className="muted">{t("lyrics.none")}</p>;
-  return (
-    <div className="lyrics">
-      <h3>
-        {sheet.displayTitle}
-        {sheet.displayArtist ? <small>{sheet.displayArtist}</small> : null}
-      </h3>
-      <LyricLines sheet={sheet} active={active} keys={keys} column={column} />
-      {sheet.source === "lrclib" ? (
-        <p className="muted lyrics-credit">
-          <small>{t("lyrics.fromLrclib")}</small>
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-/**
- * The words as the subject of the screen: one wide column, centred, with the
- * names and the hint above it. It follows and seeks as the strip does; what it
- * adds is the room.
- */
-function LyricsView({ song }: { song: Song }) {
-  const { t } = useI18n();
-  const { sheet, active, keys, state } = useLyricSheet(song.id);
-  const column = useRef<HTMLOListElement | null>(null);
-  useFollowSungLine(column, sheet, active);
-
-  // Inside the view's own frame, like the empty state below it: a column that
-  // appears out of nowhere once the words land is a jump the wrapper absorbs.
-  if (state === "waiting")
-    return (
-      <div className="lyrics-view">
-        <p className="muted">{t("common.loading")}</p>
-      </div>
-    );
-  if (state === "none" || !sheet)
-    return (
-      <div className="lyrics-view">
-        <EmptyState message={t("lyrics.none")} />
-      </div>
-    );
-
-  return (
-    <div className="lyrics-view">
-      <header>
-        <h2>{sheet.displayTitle}</h2>
-        <p className="muted">
-          {sheet.displayArtist ?? song.artist ?? t("common.unknownArtist")}
-        </p>
-        {sheet.synced ? (
-          <p className="muted">
-            <small>{t("lyrics.seekHint")}</small>
-          </p>
-        ) : null}
-        {sheet.source === "lrclib" ? (
-          <p className="muted lyrics-credit">
-            <small>{t("lyrics.fromLrclib")}</small>
-          </p>
-        ) : null}
-      </header>
-      <LyricLines sheet={sheet} active={active} keys={keys} column={column} />
-    </div>
-  );
-}
-
-/**
- * The artwork, and the canvas where there is one, over everything else.
- *
- * A native `<dialog>` opened with `showModal`, which is where the focus trap,
- * the Escape key and the inertness of the page behind come from — the same
- * reasoning the navigation sheet records, and the same reason not to hand-roll
- * an overlay.
- *
- * **It carries transport controls because it covers the player bar.** A view
- * that fills the screen with a cover and leaves no way to pause is a trap
- * rather than a mode. The keyboard shortcuts keep working regardless: the
- * player listens on the window, which a modal dialog does not intercept.
- */
-function ImmersiveView({ song }: { song: Song }) {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const player = usePlayer();
-  const progress = usePlayerProgress();
-  const frame = useRef<HTMLDialogElement | null>(null);
-  // Set while this component is going away, so the close that unmounting
-  // causes is told apart from the close a person asked for. Without it,
-  // leaving the screen by any other route would navigate back onto it.
-  const leaving = useRef(false);
-
-  useLayoutEffect(() => {
-    const dialog = frame.current;
-    if (!dialog) return;
-    // **Cleared on the way in, because an effect has to be able to run
-    // twice.** `StrictMode` mounts, cleans up and mounts again on the same
-    // instance, so the ref survives into the second run — and left at `true`
-    // it would swallow a close the person asked for, leaving the view shut and
-    // the address still naming it. In development only, which is exactly why
-    // no test saw it: the end-to-end suite runs the production build, where
-    // the effect runs once.
-    leaving.current = false;
-    dialog.showModal();
-    return () => {
-      leaving.current = true;
-      if (dialog.open) dialog.close();
-    };
-  }, []);
-
-  return (
-    // **One closer.** The button closes the dialog and nothing else; the
-    // navigation hangs off `onClose`, which Escape and the backdrop reach too.
-    // A button that both closed and navigated would be a second closer, and a
-    // second closer is a second thing to get out of step.
-    // biome-ignore lint/a11y/useKeyWithClickEvents: dismissing by keyboard is Escape, which <dialog> handles natively
-    <dialog
-      ref={frame}
-      className="immersive"
-      aria-label={t("playing.immersiveTitle")}
-      onClose={() => {
-        // `close()` queues the event rather than firing it, so the close from
-        // that first cleanup can arrive **after** the second `showModal` has
-        // reopened the dialog. Navigating then would shut a view the person is
-        // looking at, on a close that is already spent.
-        if (frame.current?.open) return;
-        // **`replace`, or Back reopens what was just closed.** Pushing
-        // would leave `/playing → ?view=immersive → /playing` in the
-        // history, so the next Back press would land on the immersive entry
-        // and open the view again — the opposite of the reason the mode is in
-        // the location at all. Replacing swaps the immersive entry for the
-        // detail one, and Back goes past both.
-        if (!leaving.current)
-          void navigate({ to: "/playing", search: {}, replace: true });
-      }}
-      onClick={(event) => {
-        if (event.target === frame.current) frame.current?.close();
-      }}
-    >
-      <CanvasStage trackId={song.id} className="immersive-stage">
-        <Artwork
-          artworkId={song.artwork_hash}
-          title={song.title}
-          className="cover immersive-cover"
-        />
-      </CanvasStage>
-      <div className="immersive-detail">
-        <span className="eyebrow">{song.album ?? t("common.album")}</span>
-        <h2>{song.title}</h2>
-        <p className="muted">{song.artist ?? t("common.unknownArtist")}</p>
-        <p className="muted">
-          <small>
-            {formatDuration(progress.position * 1000)}
-            {" / "}
-            {formatDuration(progress.duration * 1000)}
-          </small>
-        </p>
-        <div className="immersive-transport">
-          <button
-            type="button"
-            aria-label={t("player.previous")}
-            onClick={() => player.previous()}
-          >
-            <Icon name="previous" />
-          </button>
-          <button
-            type="button"
-            className="primary"
-            aria-label={t(player.playing ? "player.pause" : "player.play")}
-            onClick={() => player.toggle()}
-          >
-            <Icon name={player.playing ? "pause" : "play"} />
-          </button>
-          <button
-            type="button"
-            aria-label={t("player.next")}
-            onClick={() => player.next()}
-          >
-            <Icon name="next" />
-          </button>
-        </div>
-      </div>
-      <button
-        type="button"
-        className="immersive-close"
-        aria-label={t("playing.leaveImmersive")}
-        onClick={() => frame.current?.close()}
-      >
-        <Icon name="close" />
-      </button>
-    </dialog>
-  );
-}
-
-/**
- * Whether the detail view gives the words a column of their own, from what it
- * gave them last and what the sheet now says.
- *
- * **Only once there are words to put in it.** A track without lyrics is most of
- * a library, and a second column held open for them would be an empty half of
- * the screen with "no lyrics" written in its corner; the track takes the
- * middle instead. The queue was the other candidate for that column, and was
- * not taken: it has a page and a panel of its own, it is empty as often as the
- * sheet is, and a column that changes subject from one track to the next is
- * harder to read than one that is either the words or absent.
- *
- * **A wait is not an answer.** While the sheet is out the layout keeps the
- * shape it had, so moving from one track with words to the next does not fold
- * the column away and open it again a moment later.
- */
-export function detailSplit(
-  previous: boolean,
-  state: LyricSheet["state"],
-): boolean {
-  return state === "waiting" ? previous : state === "sheet";
-}
-
-/**
- * The track, and its words beside it.
- *
- * On a wide screen, two columns: the artwork, larger than it was, with the
- * names and what the file is under it, and the words in a tall column of their
- * own. Without words, one column in the middle. Narrower, the two stack, cover
- * first, as they always have — the stylesheet decides that, not this.
- */
-function DetailView({ song }: { song: Song }) {
-  const { t } = useI18n();
-  const lyrics = useLyricSheet(song.id);
-  // Adjusted while rendering rather than in an effect, as the artwork does: an
-  // effect would paint one frame in the old shape around the new answer.
-  const [split, setSplit] = useState(false);
-  const next = detailSplit(split, lyrics.state);
-  if (next !== split) setSplit(next);
-
-  return (
-    <div className={`playing ${next ? "playing-split" : "playing-solo"}`}>
-      <div className="playing-track">
-        <CanvasStage trackId={song.id}>
-          <Artwork
-            artworkId={song.artwork_hash}
-            title={song.title}
-            className="cover large"
-          />
-        </CanvasStage>
-        <div className="playing-detail">
-          <span className="eyebrow">{song.album ?? t("common.album")}</span>
-          <h2>{song.title}</h2>
-          <p className="muted">{song.artist ?? t("common.unknownArtist")}</p>
-          {/* Under the names and above the words: what the file is belongs
-              with the track and not with the lyrics, and a listener who came
-              here to read along should not have to pass it twice. */}
-          <FileQuality song={song} />
-          {/* Without a column, the strip says here that there is nothing to
-              read, or that it is still asking. */}
-          {next ? null : <LyricsStrip lyrics={lyrics} />}
-        </div>
-      </div>
-      {next ? (
-        <div className="playing-lyrics">
-          <LyricsStrip lyrics={lyrics} />
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-/** The three ways to look at the track, as links, because the view is a place. */
-function ViewSwitcher() {
-  const { t } = useI18n();
-  const entries: Array<{
-    view: PlayingView;
-    search: Record<string, string>;
-    label: TranslationKey;
-  }> = [
-    { view: "detail", search: {}, label: "playing.viewDetail" },
-    { view: "lyrics", search: { view: "lyrics" }, label: "playing.viewLyrics" },
-    {
-      view: "immersive",
-      search: { view: "immersive" },
-      label: "playing.viewImmersive",
-    },
-  ];
-  return (
-    <nav className="view-switcher" aria-label={t("playing.viewLabel")}>
-      {entries.map((entry) => (
-        <Link
-          key={entry.view}
-          to="/playing"
-          search={entry.search}
-          // **`exact`, and the default would be wrong here.** All three
-          // links point at one path, and the router counts a link whose
-          // search is `{}` as matching every search there is — so `Detail`
-          // was marked current on `?view=lyrics` as well and the switcher
-          // claimed to be in two views at once. Measured rather than
-          // reasoned about: the reading was `['Detail', 'Lyrics']`, and it
-          // is `['Lyrics']` with this.
-          //
-          // The router marks it and this component does not, although it
-          // knows which view is showing. Two things setting one attribute is
-          // how they start disagreeing, and the one that survives is whichever
-          // the library applies last.
-          activeOptions={{ exact: true, includeSearch: true }}
-        >
-          {t(entry.label)}
-        </Link>
-      ))}
-    </nav>
-  );
-}
-
-export function PlayingPage() {
-  const player = usePlayer();
-  const progress = usePlayerProgress();
-  const { t } = useI18n();
-  const reload = useReload(bookmarksQuery().queryKey);
-  const [busy, setBusy] = useState(false);
-  const { data: bookmarks } = useQuery(bookmarksQuery());
-  const current = player.current;
-  const view = playingView(useSearch({ strict: false }));
-
-  /**
-   * One bookmark per track, replaced rather than added — so this button reads
-   * "save" whether or not the track already has one, and saving again simply
-   * moves it to where the head is now.
-   */
-  async function saveHere(song: Song) {
-    setBusy(true);
-    try {
-      await setBookmark(song.id, progress.position * 1000);
-      reload();
-    } catch {
-      // Nothing is lost: the head has not moved and the old bookmark stands.
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function forget(trackId: string) {
-    try {
-      await deleteBookmark(trackId);
-      reload();
-    } catch {
-      // Same: the list simply does not change.
-    }
-  }
-
-  return (
-    <section>
-      <PageHeader
-        kicker={t("nav.group.listen")}
-        title={t("nav.playing")}
-        detail={current ? undefined : t("playing.idle")}
-      >
-        {current ? (
-          <>
-            <ViewSwitcher />
-            <button
-              type="button"
-              disabled={busy}
-              onClick={() => void saveHere(current)}
-            >
-              {t("bookmarks.save")}
-            </button>
-          </>
-        ) : null}
-      </PageHeader>
-
-      {current ? (
-        <>
-          {/* The immersive view is laid over the screen rather than put in
-              its place, so leaving it returns to a page that was never torn
-              down — and the detail stays beneath it for the frame the dialog
-              takes to open. */}
-          {view === "immersive" ? <ImmersiveView song={current} /> : null}
-          {view === "lyrics" ? (
-            <LyricsView song={current} />
-          ) : (
-            <DetailView song={current} />
-          )}
-        </>
-      ) : (
-        <EmptyState message={t("playing.empty")} />
-      )}
-
-      {bookmarks?.length ? (
-        <article className="playing-bookmarks">
-          <header className="playing-bookmarks-header">
-            <div>
-              <h3 className="playing-bookmarks-title">
-                {t("bookmarks.title")}
-              </h3>
-              <p className="playing-bookmarks-detail muted">
-                {t("bookmarks.detail")}
-              </p>
-            </div>
-          </header>
-          <ul className="bookmark-list">
-            {bookmarks.map((bookmark) => (
-              <li key={bookmark.song.id}>
-                <button
-                  type="button"
-                  className="bookmark-track"
-                  onClick={() => player.play([bookmark.song], 0)}
-                >
-                  <Artwork
-                    artworkId={bookmark.song.artwork_hash}
-                    title={bookmark.song.title}
-                    className="bookmark-cover"
-                  />
-                  <span className="bookmark-copy">
-                    <strong className="bookmark-title">
-                      {bookmark.song.title}
-                    </strong>
-                    <small className="bookmark-artist muted">
-                      {bookmark.song.artist ?? t("common.unknownArtist")}
-                    </small>
-                  </span>
-                </button>
-                <span className="bookmark-position muted">
-                  {formatDuration(bookmark.position_ms)}
-                </span>
-                <button
-                  type="button"
-                  className="bookmark-forget"
-                  onClick={() => void forget(bookmark.song.id)}
-                  aria-label={`${t("bookmarks.forget")}: ${bookmark.song.title}`}
-                >
-                  {t("bookmarks.forget")}
-                </button>
-              </li>
-            ))}
-          </ul>
-        </article>
-      ) : null}
-    </section>
-  );
-}
diff --git a/webapp/src/pages/playing-page/detail-view.tsx b/webapp/src/pages/playing-page/detail-view.tsx
new file mode 100644
index 00000000..dbf85ec7
--- /dev/null
+++ b/webapp/src/pages/playing-page/detail-view.tsx
@@ -0,0 +1,82 @@
+// The detail view: the track, and its words beside it when it has any.
+
+import { useState } from "react";
+
+import type { Song } from "../../api";
+import { Artwork } from "../../components/artwork";
+import { CanvasStage } from "../../components/canvas";
+import { FileQuality } from "../../components/file-quality";
+import { useI18n } from "../../state/i18n";
+import { type LyricSheet, LyricsStrip, useLyricSheet } from "./lyrics";
+
+/**
+ * Whether the detail view gives the words a column of their own, from what it
+ * gave them last and what the sheet now says.
+ *
+ * **Only once there are words to put in it.** A track without lyrics is most of
+ * a library, and a second column held open for them would be an empty half of
+ * the screen with "no lyrics" written in its corner; the track takes the
+ * middle instead. The queue was the other candidate for that column, and was
+ * not taken: it has a page and a panel of its own, it is empty as often as the
+ * sheet is, and a column that changes subject from one track to the next is
+ * harder to read than one that is either the words or absent.
+ *
+ * **A wait is not an answer.** While the sheet is out the layout keeps the
+ * shape it had, so moving from one track with words to the next does not fold
+ * the column away and open it again a moment later.
+ */
+export function detailSplit(
+  previous: boolean,
+  state: LyricSheet["state"],
+): boolean {
+  return state === "waiting" ? previous : state === "sheet";
+}
+
+/**
+ * The track, and its words beside it.
+ *
+ * On a wide screen, two columns: the artwork, larger than it was, with the
+ * names and what the file is under it, and the words in a tall column of their
+ * own. Without words, one column in the middle. Narrower, the two stack, cover
+ * first, as they always have — the stylesheet decides that, not this.
+ */
+export function DetailView({ song }: { song: Song }) {
+  const { t } = useI18n();
+  const lyrics = useLyricSheet(song.id);
+  // Adjusted while rendering rather than in an effect, as the artwork does: an
+  // effect would paint one frame in the old shape around the new answer.
+  const [split, setSplit] = useState(false);
+  const next = detailSplit(split, lyrics.state);
+  if (next !== split) setSplit(next);
+
+  return (
+    <div className={`playing ${next ? "playing-split" : "playing-solo"}`}>
+      <div className="playing-track">
+        <CanvasStage trackId={song.id}>
+          <Artwork
+            artworkId={song.artwork_hash}
+            title={song.title}
+            className="cover large"
+          />
+        </CanvasStage>
+        <div className="playing-detail">
+          <span className="eyebrow">{song.album ?? t("common.album")}</span>
+          <h2>{song.title}</h2>
+          <p className="muted">{song.artist ?? t("common.unknownArtist")}</p>
+          {/* Under the names and above the words: what the file is belongs
+              with the track and not with the lyrics, and a listener who came
+              here to read along should not have to pass it twice. */}
+          <FileQuality song={song} />
+          {/* Without a column, the strip says here that there is nothing to
+              read, or that it is still asking. */}
+          {next ? null : <LyricsStrip lyrics={lyrics} />}
+        </div>
+      </div>
+      {next ? (
+        <div className="playing-lyrics">
+          <LyricsStrip lyrics={lyrics} />
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/webapp/src/pages/playing-page/immersive.tsx b/webapp/src/pages/playing-page/immersive.tsx
new file mode 100644
index 00000000..72497dff
--- /dev/null
+++ b/webapp/src/pages/playing-page/immersive.tsx
@@ -0,0 +1,137 @@
+// The immersive view: the artwork and the canvas over the whole screen.
+
+import { useNavigate } from "@tanstack/react-router";
+import { useLayoutEffect, useRef } from "react";
+
+import { formatDuration, type Song } from "../../api";
+import { Artwork } from "../../components/artwork";
+import { CanvasStage } from "../../components/canvas";
+import { Icon } from "../../components/icons";
+import { usePlayer, usePlayerProgress } from "../../player/player";
+import { useI18n } from "../../state/i18n";
+
+/**
+ * The artwork, and the canvas where there is one, over everything else.
+ *
+ * A native `<dialog>` opened with `showModal`, which is where the focus trap,
+ * the Escape key and the inertness of the page behind come from — the same
+ * reasoning the navigation sheet records, and the same reason not to hand-roll
+ * an overlay.
+ *
+ * **It carries transport controls because it covers the player bar.** A view
+ * that fills the screen with a cover and leaves no way to pause is a trap
+ * rather than a mode. The keyboard shortcuts keep working regardless: the
+ * player listens on the window, which a modal dialog does not intercept.
+ */
+export function ImmersiveView({ song }: { song: Song }) {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const player = usePlayer();
+  const progress = usePlayerProgress();
+  const frame = useRef<HTMLDialogElement | null>(null);
+  // Set while this component is going away, so the close that unmounting
+  // causes is told apart from the close a person asked for. Without it,
+  // leaving the screen by any other route would navigate back onto it.
+  const leaving = useRef(false);
+
+  useLayoutEffect(() => {
+    const dialog = frame.current;
+    if (!dialog) return;
+    // **Cleared on the way in, because an effect has to be able to run
+    // twice.** `StrictMode` mounts, cleans up and mounts again on the same
+    // instance, so the ref survives into the second run — and left at `true`
+    // it would swallow a close the person asked for, leaving the view shut and
+    // the address still naming it. In development only, which is exactly why
+    // no test saw it: the end-to-end suite runs the production build, where
+    // the effect runs once.
+    leaving.current = false;
+    dialog.showModal();
+    return () => {
+      leaving.current = true;
+      if (dialog.open) dialog.close();
+    };
+  }, []);
+
+  return (
+    // **One closer.** The button closes the dialog and nothing else; the
+    // navigation hangs off `onClose`, which Escape and the backdrop reach too.
+    // A button that both closed and navigated would be a second closer, and a
+    // second closer is a second thing to get out of step.
+    // biome-ignore lint/a11y/useKeyWithClickEvents: dismissing by keyboard is Escape, which <dialog> handles natively
+    <dialog
+      ref={frame}
+      className="immersive"
+      aria-label={t("playing.immersiveTitle")}
+      onClose={() => {
+        // `close()` queues the event rather than firing it, so the close from
+        // that first cleanup can arrive **after** the second `showModal` has
+        // reopened the dialog. Navigating then would shut a view the person is
+        // looking at, on a close that is already spent.
+        if (frame.current?.open) return;
+        // **`replace`, or Back reopens what was just closed.** Pushing
+        // would leave `/playing → ?view=immersive → /playing` in the
+        // history, so the next Back press would land on the immersive entry
+        // and open the view again — the opposite of the reason the mode is in
+        // the location at all. Replacing swaps the immersive entry for the
+        // detail one, and Back goes past both.
+        if (!leaving.current)
+          void navigate({ to: "/playing", search: {}, replace: true });
+      }}
+      onClick={(event) => {
+        if (event.target === frame.current) frame.current?.close();
+      }}
+    >
+      <CanvasStage trackId={song.id} className="immersive-stage">
+        <Artwork
+          artworkId={song.artwork_hash}
+          title={song.title}
+          className="cover immersive-cover"
+        />
+      </CanvasStage>
+      <div className="immersive-detail">
+        <span className="eyebrow">{song.album ?? t("common.album")}</span>
+        <h2>{song.title}</h2>
+        <p className="muted">{song.artist ?? t("common.unknownArtist")}</p>
+        <p className="muted">
+          <small>
+            {formatDuration(progress.position * 1000)}
+            {" / "}
+            {formatDuration(progress.duration * 1000)}
+          </small>
+        </p>
+        <div className="immersive-transport">
+          <button
+            type="button"
+            aria-label={t("player.previous")}
+            onClick={() => player.previous()}
+          >
+            <Icon name="previous" />
+          </button>
+          <button
+            type="button"
+            className="primary"
+            aria-label={t(player.playing ? "player.pause" : "player.play")}
+            onClick={() => player.toggle()}
+          >
+            <Icon name={player.playing ? "pause" : "play"} />
+          </button>
+          <button
+            type="button"
+            aria-label={t("player.next")}
+            onClick={() => player.next()}
+          >
+            <Icon name="next" />
+          </button>
+        </div>
+      </div>
+      <button
+        type="button"
+        className="immersive-close"
+        aria-label={t("playing.leaveImmersive")}
+        onClick={() => frame.current?.close()}
+      >
+        <Icon name="close" />
+      </button>
+    </dialog>
+  );
+}
diff --git a/webapp/src/pages/playing-page/index.tsx b/webapp/src/pages/playing-page/index.tsx
new file mode 100644
index 00000000..68bbad02
--- /dev/null
+++ b/webapp/src/pages/playing-page/index.tsx
@@ -0,0 +1,229 @@
+// The playing screen: the view in the address, its switcher, the bookmarks.
+
+import { useQuery } from "@tanstack/react-query";
+import { Link, useSearch } from "@tanstack/react-router";
+import { useState } from "react";
+
+import {
+  deleteBookmark,
+  formatDuration,
+  type Song,
+  setBookmark,
+} from "../../api";
+import { bookmarksQuery } from "../../api/queries";
+import { Artwork } from "../../components/artwork";
+import { EmptyState, PageHeader, useReload } from "../../components/page-shell";
+import { usePlayer, usePlayerProgress } from "../../player/player";
+import { type TranslationKey, useI18n } from "../../state/i18n";
+import { DetailView } from "./detail-view";
+import { ImmersiveView } from "./immersive";
+import { LyricsView } from "./lyrics";
+
+export { detailSplit } from "./detail-view";
+export { currentLyricLine, lyricSheetState } from "./lyrics";
+
+/**
+ * What the playing screen is showing.
+ *
+ * Three ways to look at one track, and `detail` is the one that was there
+ * before: the cover beside the names, with the words as a strip under them.
+ * `lyrics` makes those words the subject instead of a column inside something
+ * else, and `immersive` gives the artwork — and the canvas, where the track
+ * carries one — the whole viewport.
+ */
+export type PlayingView = "detail" | "lyrics" | "immersive";
+
+/**
+ * The view a location asks for, or `detail` for anything it does not.
+ *
+ * **In the URL rather than in a `useState`**, and the reason is the Back
+ * button. On a phone, Back is what everybody presses to leave the thing they
+ * are in; held in component state, the immersive view would swallow that press
+ * and Back would leave the playing screen altogether. A location also makes
+ * "read along to this" a link somebody can keep.
+ *
+ * Only the two modes that are not the default are spelled, so an ordinary
+ * visit stays `/playing` and nobody reads `?view=detail`. Anything else — a
+ * mode this build does not know, a number, a hostile string — reads as
+ * `detail`, because an unknown mode is not a mode and the screen still has to
+ * show something.
+ */
+export function playingView(search: unknown): PlayingView {
+  const asked =
+    typeof search === "object" && search !== null
+      ? (search as { view?: unknown }).view
+      : undefined;
+  return asked === "lyrics" || asked === "immersive" ? asked : "detail";
+}
+
+/** The three ways to look at the track, as links, because the view is a place. */
+function ViewSwitcher() {
+  const { t } = useI18n();
+  const entries: Array<{
+    view: PlayingView;
+    search: Record<string, string>;
+    label: TranslationKey;
+  }> = [
+    { view: "detail", search: {}, label: "playing.viewDetail" },
+    { view: "lyrics", search: { view: "lyrics" }, label: "playing.viewLyrics" },
+    {
+      view: "immersive",
+      search: { view: "immersive" },
+      label: "playing.viewImmersive",
+    },
+  ];
+  return (
+    <nav className="view-switcher" aria-label={t("playing.viewLabel")}>
+      {entries.map((entry) => (
+        <Link
+          key={entry.view}
+          to="/playing"
+          search={entry.search}
+          // **`exact`, and the default would be wrong here.** All three
+          // links point at one path, and the router counts a link whose
+          // search is `{}` as matching every search there is — so `Detail`
+          // was marked current on `?view=lyrics` as well and the switcher
+          // claimed to be in two views at once. Measured rather than
+          // reasoned about: the reading was `['Detail', 'Lyrics']`, and it
+          // is `['Lyrics']` with this.
+          //
+          // The router marks it and this component does not, although it
+          // knows which view is showing. Two things setting one attribute is
+          // how they start disagreeing, and the one that survives is whichever
+          // the library applies last.
+          activeOptions={{ exact: true, includeSearch: true }}
+        >
+          {t(entry.label)}
+        </Link>
+      ))}
+    </nav>
+  );
+}
+
+export function PlayingPage() {
+  const player = usePlayer();
+  const progress = usePlayerProgress();
+  const { t } = useI18n();
+  const reload = useReload(bookmarksQuery().queryKey);
+  const [busy, setBusy] = useState(false);
+  const { data: bookmarks } = useQuery(bookmarksQuery());
+  const current = player.current;
+  const view = playingView(useSearch({ strict: false }));
+
+  /**
+   * One bookmark per track, replaced rather than added — so this button reads
+   * "save" whether or not the track already has one, and saving again simply
+   * moves it to where the head is now.
+   */
+  async function saveHere(song: Song) {
+    setBusy(true);
+    try {
+      await setBookmark(song.id, progress.position * 1000);
+      reload();
+    } catch {
+      // Nothing is lost: the head has not moved and the old bookmark stands.
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function forget(trackId: string) {
+    try {
+      await deleteBookmark(trackId);
+      reload();
+    } catch {
+      // Same: the list simply does not change.
+    }
+  }
+
+  return (
+    <section>
+      <PageHeader
+        kicker={t("nav.group.listen")}
+        title={t("nav.playing")}
+        detail={current ? undefined : t("playing.idle")}
+      >
+        {current ? (
+          <>
+            <ViewSwitcher />
+            <button
+              type="button"
+              disabled={busy}
+              onClick={() => void saveHere(current)}
+            >
+              {t("bookmarks.save")}
+            </button>
+          </>
+        ) : null}
+      </PageHeader>
+
+      {current ? (
+        <>
+          {/* The immersive view is laid over the screen rather than put in
+              its place, so leaving it returns to a page that was never torn
+              down — and the detail stays beneath it for the frame the dialog
+              takes to open. */}
+          {view === "immersive" ? <ImmersiveView song={current} /> : null}
+          {view === "lyrics" ? (
+            <LyricsView song={current} />
+          ) : (
+            <DetailView song={current} />
+          )}
+        </>
+      ) : (
+        <EmptyState message={t("playing.empty")} />
+      )}
+
+      {bookmarks?.length ? (
+        <article className="playing-bookmarks">
+          <header className="playing-bookmarks-header">
+            <div>
+              <h3 className="playing-bookmarks-title">
+                {t("bookmarks.title")}
+              </h3>
+              <p className="playing-bookmarks-detail muted">
+                {t("bookmarks.detail")}
+              </p>
+            </div>
+          </header>
+          <ul className="bookmark-list">
+            {bookmarks.map((bookmark) => (
+              <li key={bookmark.song.id}>
+                <button
+                  type="button"
+                  className="bookmark-track"
+                  onClick={() => player.play([bookmark.song], 0)}
+                >
+                  <Artwork
+                    artworkId={bookmark.song.artwork_hash}
+                    title={bookmark.song.title}
+                    className="bookmark-cover"
+                  />
+                  <span className="bookmark-copy">
+                    <strong className="bookmark-title">
+                      {bookmark.song.title}
+                    </strong>
+                    <small className="bookmark-artist muted">
+                      {bookmark.song.artist ?? t("common.unknownArtist")}
+                    </small>
+                  </span>
+                </button>
+                <span className="bookmark-position muted">
+                  {formatDuration(bookmark.position_ms)}
+                </span>
+                <button
+                  type="button"
+                  className="bookmark-forget"
+                  onClick={() => void forget(bookmark.song.id)}
+                  aria-label={`${t("bookmarks.forget")}: ${bookmark.song.title}`}
+                >
+                  {t("bookmarks.forget")}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </article>
+      ) : null}
+    </section>
+  );
+}
diff --git a/webapp/src/pages/playing-page/lyrics.tsx b/webapp/src/pages/playing-page/lyrics.tsx
new file mode 100644
index 00000000..6a1b0a8e
--- /dev/null
+++ b/webapp/src/pages/playing-page/lyrics.tsx
@@ -0,0 +1,318 @@
+// The words: the sheet, the sung line, the strip and the lyrics view.
+
+import { useQuery } from "@tanstack/react-query";
+import { type RefObject, useLayoutEffect, useMemo, useRef } from "react";
+
+import {
+  formatDuration,
+  type LyricsLine,
+  type Song,
+  type StructuredLyrics,
+} from "../../api";
+import { lyricsQuery } from "../../api/queries";
+import { usePrefersReducedMotion } from "../../components/canvas";
+import { EmptyState } from "../../components/page-shell";
+import { usePlayer, usePlayerProgress } from "../../player/player";
+import { useI18n } from "../../state/i18n";
+
+/**
+ * The line a synced lyric sheet is on at `seconds`. Lines carry their own start
+ * in milliseconds and arrive in order, so this is the last one already begun;
+ * `-1` before the first. An unsynced sheet has no starts and never highlights.
+ */
+export function currentLyricLine(lines: LyricsLine[], seconds: number): number {
+  let current = -1;
+  for (const [index, line] of lines.entries()) {
+    if (line.start === undefined || line.start > seconds * 1000) break;
+    current = index;
+  }
+  return current;
+}
+
+/**
+ * What the lyrics panel has to say, from what the query holds.
+ *
+ * **Three states and not two**: a sheet that has not arrived is not a track
+ * without words, and saying "no lyrics" while the request is out is a claim
+ * about the track.
+ *
+ * **And words already held beat a failed attempt.** The cache serves an answer
+ * for thirty seconds, so coming back to this view later revalidates — and a
+ * revalidation that failed used to blank the sheet and print "no lyrics travel
+ * with this file", which is a false statement about a track whose words were on
+ * the screen a moment earlier. A failure decides only when there is nothing to
+ * show.
+ *
+ * That ordering is also why the scroll effect below does not watch this value:
+ * the column it scrolls can no longer be torn down and rebuilt while a sheet is
+ * held, so the only remount left is one where `active` moves with it.
+ */
+export function lyricSheetState(answer: {
+  /** The query holds an answer, even a stale one. */
+  answered: boolean;
+  /** The last attempt failed. */
+  failed: boolean;
+  /** How many lines the first sheet carries. */
+  lines: number;
+}): "waiting" | "sheet" | "none" {
+  if (answer.answered) return answer.lines > 0 ? "sheet" : "none";
+  return answer.failed ? "none" : "waiting";
+}
+
+/**
+ * What a line with no words shows: a non-breaking space, not a plain one.
+ *
+ * A plain space is collapsible, so the line box around it has no height — a
+ * blank timed line became a button zero pixels tall, which the keyboard still
+ * reached and nobody could see, focus ring included. A non-breaking space
+ * holds one line of height, so the pause keeps its place in the sheet and its
+ * button a box. It is still whitespace to axe, which trims it before asking
+ * whether the name contains what is on screen.
+ */
+const BLANK_LINE = "\u00a0";
+
+/** A track's sheet as `useLyricSheet` reads it: the words, the sung line. */
+export type LyricSheet = {
+  sheet: StructuredLyrics | undefined;
+  active: number;
+  keys: string[];
+  state: "waiting" | "sheet" | "none";
+};
+
+/**
+ * The sheet a track travels with, and where in it the playing head is.
+ *
+ * Shared by the strip and the dedicated view below, so the two cannot disagree
+ * about which line is being sung — or about how a refrain is keyed, which is
+ * the part that is easy to get subtly different twice.
+ */
+export function useLyricSheet(trackId: string): LyricSheet {
+  const progress = usePlayerProgress();
+  const { data: value, error } = useQuery(lyricsQuery(trackId));
+  const sheet: StructuredLyrics | undefined = value?.structuredLyrics[0];
+  const active = sheet?.synced
+    ? currentLyricLine(sheet.line, progress.position)
+    : -1;
+  // A refrain repeats word for word and an unsynced sheet has no start to key
+  // on, so the line's text alone is not unique. Numbering the repetitions is
+  // what the queue does with the same problem.
+  const keys = useMemo(() => {
+    const seen = new Map<string, number>();
+    return (sheet?.line ?? []).map((line) => {
+      const occurrence = seen.get(line.value) ?? 0;
+      seen.set(line.value, occurrence + 1);
+      return `${line.value}-${occurrence}`;
+    });
+  }, [sheet]);
+  return {
+    sheet,
+    active,
+    keys,
+    state: lyricSheetState({
+      answered: value !== undefined,
+      failed: error !== null,
+      lines: sheet?.line.length ?? 0,
+    }),
+  };
+}
+
+/**
+ * Holds the sung line in the middle of `column`, and only `column`.
+ *
+ * Shared by the strip beside the cover and the lyrics view, so the two follow
+ * the words the same way: the strip used to bold the sung line and leave it to
+ * scroll out of its own box, which marked a line nobody could see.
+ */
+function useFollowSungLine(
+  column: RefObject<HTMLOListElement | null>,
+  sheet: StructuredLyrics | undefined,
+  active: number,
+) {
+  const reduced = usePrefersReducedMotion();
+  // **Before paint, and only when there is something to do.** `useEffect`
+  // would let the new line show at the bottom of the column for a frame before
+  // the scroll caught up. And a progress tick that stays on the same line
+  // changes none of the dependencies, so it costs nothing.
+  useLayoutEffect(() => {
+    // `sheet` is read here and not only named below: there is no column
+    // without one, and a dependency the body never touches is a decorative
+    // dependency — which is exactly what the linter says about it.
+    if (!sheet || active < 0) return;
+    const list = column.current;
+    const line = list?.children[active];
+    if (!list || !line) return;
+    // **The column and nothing else.** `scrollIntoView` scrolls every
+    // scrollable ancestor it has, the window included, so each new sung line
+    // would drag the whole page back to the words — and somebody reading the
+    // bookmarks underneath would be hauled upwards every few seconds.
+    //
+    // Measured from boxes rather than from `offsetTop`, which is relative to
+    // whichever ancestor happens to be positioned: two rectangles need no
+    // assumption about where the list sits in the document.
+    const lineBox = line.getBoundingClientRect();
+    const listBox = list.getBoundingClientRect();
+    list.scrollTo({
+      top:
+        list.scrollTop +
+        (lineBox.top - listBox.top) -
+        (listBox.height - lineBox.height) / 2,
+      // A sheet that jumps rather than glides, for whoever asked for less
+      // motion. The following itself is not decoration — it is how the words
+      // are read — so it is the gliding that goes, not the following.
+      behavior: reduced ? "auto" : "smooth",
+    });
+    // `sheet` as well as `active`, for the track change where the two
+    // sheets agree on the index. Moving to the next track early in it leaves
+    // `active` at 0, which it already was — so without this the column keeps
+    // the previous track's scroll and the opening line of the new one is above
+    // the fold. The object is react-query's and stable between renders, so
+    // naming it costs no extra run.
+  }, [active, column, reduced, sheet]);
+}
+
+/**
+ * A sheet's lines, the sung one marked.
+ *
+ * Where the sheet carries timings, each line is a **button that seeks to it**,
+ * in the strip as in the lyrics view. A sheet without timings gets no buttons
+ * at all: rendering an unsynced line as something pressable would promise a
+ * seek the sheet cannot compute.
+ */
+function LyricLines({
+  sheet,
+  active,
+  keys,
+  column,
+}: {
+  sheet: StructuredLyrics;
+  active: number;
+  keys: string[];
+  column: RefObject<HTMLOListElement | null>;
+}) {
+  const { t } = useI18n();
+  const player = usePlayer();
+  return (
+    <ol ref={column} aria-label={t("lyrics.label")}>
+      {sheet.line.map((line, index) => {
+        const at = line.start;
+        const on = index === active;
+        return (
+          <li
+            key={keys[index]}
+            className={on ? "on" : undefined}
+            aria-current={on ? "true" : undefined}
+          >
+            {sheet.synced && at !== undefined ? (
+              <button
+                type="button"
+                className="link"
+                onClick={() => player.seek(at / 1000)}
+                // The words first, then what pressing does. The name must
+                // contain the text on screen (WCAG 2.5.3), or someone saying
+                // "click the lamps come on" to voice control reaches
+                // nothing; the time after it is what a bare line leaves
+                // unsaid. A blank line has no words to repeat.
+                aria-label={
+                  line.value
+                    ? t("lyrics.seekLine", {
+                        line: line.value,
+                        when: formatDuration(at),
+                      })
+                    : t("lyrics.seekTo", { when: formatDuration(at) })
+                }
+              >
+                {line.value || BLANK_LINE}
+              </button>
+            ) : (
+              line.value || BLANK_LINE
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+/**
+ * The words in the detail view: a column of their own beside the track on a
+ * wide screen, under its names on a narrow one.
+ *
+ * Smaller than the lyrics view and inside a box of its own, but reading the
+ * same way: the sung line is held in view and, where the sheet is synced, a
+ * line seeks to itself. The sheet is read by `DetailView` and handed down,
+ * because that view lays itself out by whether there is one.
+ */
+export function LyricsStrip({ lyrics }: { lyrics: LyricSheet }) {
+  const { t } = useI18n();
+  const { sheet, active, keys, state } = lyrics;
+  const column = useRef<HTMLOListElement | null>(null);
+  useFollowSungLine(column, sheet, active);
+
+  if (state === "waiting")
+    return <p className="muted">{t("common.loading")}</p>;
+  if (state === "none" || !sheet)
+    return <p className="muted">{t("lyrics.none")}</p>;
+  return (
+    <div className="lyrics">
+      <h3>
+        {sheet.displayTitle}
+        {sheet.displayArtist ? <small>{sheet.displayArtist}</small> : null}
+      </h3>
+      <LyricLines sheet={sheet} active={active} keys={keys} column={column} />
+      {sheet.source === "lrclib" ? (
+        <p className="muted lyrics-credit">
+          <small>{t("lyrics.fromLrclib")}</small>
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * The words as the subject of the screen: one wide column, centred, with the
+ * names and the hint above it. It follows and seeks as the strip does; what it
+ * adds is the room.
+ */
+export function LyricsView({ song }: { song: Song }) {
+  const { t } = useI18n();
+  const { sheet, active, keys, state } = useLyricSheet(song.id);
+  const column = useRef<HTMLOListElement | null>(null);
+  useFollowSungLine(column, sheet, active);
+
+  // Inside the view's own frame, like the empty state below it: a column that
+  // appears out of nowhere once the words land is a jump the wrapper absorbs.
+  if (state === "waiting")
+    return (
+      <div className="lyrics-view">
+        <p className="muted">{t("common.loading")}</p>
+      </div>
+    );
+  if (state === "none" || !sheet)
+    return (
+      <div className="lyrics-view">
+        <EmptyState message={t("lyrics.none")} />
+      </div>
+    );
+
+  return (
+    <div className="lyrics-view">
+      <header>
+        <h2>{sheet.displayTitle}</h2>
+        <p className="muted">
+          {sheet.displayArtist ?? song.artist ?? t("common.unknownArtist")}
+        </p>
+        {sheet.synced ? (
+          <p className="muted">
+            <small>{t("lyrics.seekHint")}</small>
+          </p>
+        ) : null}
+        {sheet.source === "lrclib" ? (
+          <p className="muted lyrics-credit">
+            <small>{t("lyrics.fromLrclib")}</small>
+          </p>
+        ) : null}
+      </header>
+      <LyricLines sheet={sheet} active={active} keys={keys} column={column} />
+    </div>
+  );
+}