From bb891bcba09edabe29db996a21cf6ceb57c8641e Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 26 Oct 2026 23:32:47 +0100
Subject: [PATCH 1/4] refactor(webapp): move studio-nocturne.spec.ts to
 e2e/fixtures/api.ts

The file is split in the next commit; moving it first keeps its history on the mock server it leaves behind.

Signed-off-by: InstaZDLL <github.105mh@8shield.net>
---
 webapp/e2e/{studio-nocturne.spec.ts => fixtures/api.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename webapp/e2e/{studio-nocturne.spec.ts => fixtures/api.ts} (100%)

diff --git a/webapp/e2e/studio-nocturne.spec.ts b/webapp/e2e/fixtures/api.ts
similarity index 100%
rename from webapp/e2e/studio-nocturne.spec.ts
rename to webapp/e2e/fixtures/api.ts

From e8b34c980fe910f468deb1ce020e1099504c318f Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 26 Oct 2026 23:35:23 +0100
Subject: [PATCH 2/4] refactor(webapp): split the studio-nocturne e2e spec into
 fixtures and one spec per subject

The 9,611-line spec becomes 21 specs, one per subject, over eleven fixture
files under e2e/fixtures/. Every test keeps its title, body, comments and
for-loop generation; the listing holds the same 508 tests.

The mutable mock state was 51 module-level lets, which the tests reassign:
an imported binding cannot be, so they are now fields of one exported
`mock` object and every reference reads `mock.x`. The top-level beforeEach
that reset them and installed the mock is exported as `resetAndMockApi`,
and each spec installs it with `test.beforeEach`.

Signed-off-by: InstaZDLL <github.105mh@8shield.net>
---
 webapp/e2e/admin.spec.ts                |  230 +
 webapp/e2e/artist.spec.ts               |  575 ++
 webapp/e2e/attention.spec.ts            |  221 +
 webapp/e2e/canvas.spec.ts               |  204 +
 webapp/e2e/editorial-pages.spec.ts      |    2 +-
 webapp/e2e/fixtures/accessibility.ts    |  113 +
 webapp/e2e/fixtures/api.ts              | 9161 +----------------------
 webapp/e2e/fixtures/artist-images.ts    |   78 +
 webapp/e2e/fixtures/attention.ts        |  121 +
 webapp/e2e/fixtures/catalogue.ts        |  468 ++
 webapp/e2e/fixtures/folders.ts          |  107 +
 webapp/e2e/fixtures/media.ts            |   39 +
 webapp/e2e/fixtures/offline.ts          |   51 +
 webapp/e2e/fixtures/quality.ts          |  153 +
 webapp/e2e/fixtures/radio.ts            |  127 +
 webapp/e2e/fixtures/state.ts            |  220 +
 webapp/e2e/folders.spec.ts              |  354 +
 webapp/e2e/library-cache.spec.ts        |  476 ++
 webapp/e2e/library.spec.ts              |  552 ++
 webapp/e2e/lyrics.spec.ts               |  495 ++
 webapp/e2e/maintenance.spec.ts          |  298 +
 webapp/e2e/mixes-and-statistics.spec.ts |  170 +
 webapp/e2e/offline.spec.ts              |  186 +
 webapp/e2e/player.spec.ts               |  719 ++
 webapp/e2e/playlists.spec.ts            |  304 +
 webapp/e2e/quality.spec.ts              |  221 +
 webapp/e2e/radio.spec.ts                |  483 ++
 webapp/e2e/scrobbling.spec.ts           |  255 +
 webapp/e2e/settings.spec.ts             |  458 ++
 webapp/e2e/shares.spec.ts               |  205 +
 webapp/e2e/shell.spec.ts                |  653 ++
 webapp/e2e/track.spec.ts                |  460 ++
 webapp/e2e/uploads.spec.ts              |  142 +
 webapp/e2e/workspace-pages.spec.ts      |    2 +-
 34 files changed, 9326 insertions(+), 8977 deletions(-)
 create mode 100644 webapp/e2e/admin.spec.ts
 create mode 100644 webapp/e2e/artist.spec.ts
 create mode 100644 webapp/e2e/attention.spec.ts
 create mode 100644 webapp/e2e/canvas.spec.ts
 create mode 100644 webapp/e2e/fixtures/accessibility.ts
 create mode 100644 webapp/e2e/fixtures/artist-images.ts
 create mode 100644 webapp/e2e/fixtures/attention.ts
 create mode 100644 webapp/e2e/fixtures/catalogue.ts
 create mode 100644 webapp/e2e/fixtures/folders.ts
 create mode 100644 webapp/e2e/fixtures/media.ts
 create mode 100644 webapp/e2e/fixtures/offline.ts
 create mode 100644 webapp/e2e/fixtures/quality.ts
 create mode 100644 webapp/e2e/fixtures/radio.ts
 create mode 100644 webapp/e2e/fixtures/state.ts
 create mode 100644 webapp/e2e/folders.spec.ts
 create mode 100644 webapp/e2e/library-cache.spec.ts
 create mode 100644 webapp/e2e/library.spec.ts
 create mode 100644 webapp/e2e/lyrics.spec.ts
 create mode 100644 webapp/e2e/maintenance.spec.ts
 create mode 100644 webapp/e2e/mixes-and-statistics.spec.ts
 create mode 100644 webapp/e2e/offline.spec.ts
 create mode 100644 webapp/e2e/player.spec.ts
 create mode 100644 webapp/e2e/playlists.spec.ts
 create mode 100644 webapp/e2e/quality.spec.ts
 create mode 100644 webapp/e2e/radio.spec.ts
 create mode 100644 webapp/e2e/scrobbling.spec.ts
 create mode 100644 webapp/e2e/settings.spec.ts
 create mode 100644 webapp/e2e/shares.spec.ts
 create mode 100644 webapp/e2e/shell.spec.ts
 create mode 100644 webapp/e2e/track.spec.ts
 create mode 100644 webapp/e2e/uploads.spec.ts

diff --git a/webapp/e2e/admin.spec.ts b/webapp/e2e/admin.spec.ts
new file mode 100644
index 00000000..f919475d
--- /dev/null
+++ b/webapp/e2e/admin.spec.ts
@@ -0,0 +1,230 @@
+// The administration page: scans, tokens, members and a library's watch.
+
+import { expect, test } from "@playwright/test";
+
+import { resetAndMockApi } from "./fixtures/api";
+import { library } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * Live scan progress. The stream is read with `fetch` and not `EventSource`,
+ * because the route authenticates on a bearer token and `EventSource` sends no
+ * headers — the same wall `<audio src>` hits. That puts the framing on the
+ * client, so this covers a stream that arrives in pieces with a keep-alive
+ * comment in the middle of it.
+ */
+test("follows a scan while it runs", async ({ page }) => {
+  await page.goto("/admin");
+  await expect(
+    page.getByRole("heading", { name: "Administration" }),
+  ).toBeVisible();
+
+  await page.getByRole("button", { name: "Scan now" }).first().click();
+
+  const panel = page.locator(".scan-panel");
+  await expect(panel).toBeVisible();
+  // The snapshot lands first, then the progress frame replaces it whole.
+  await expect(panel.getByText("10 of 10 files")).toBeVisible();
+  await expect(panel.getByText("Finished")).toBeVisible();
+  await expect(
+    panel.getByText("10 added · 0 updated · 0 moved · 0 unchanged · 0 errors"),
+  ).toBeVisible();
+  // A finished scan stops showing the file it is on.
+  await expect(panel.locator(".scan-path")).toHaveCount(0);
+});
+
+/**
+ * API tokens are rendered once per account, so loading them on mount meant one
+ * request per account every time the admin screen opened — for a list almost
+ * nobody opens. They wait for the panel to be opened.
+ */
+test("asks for a account's tokens only when its panel is opened", async ({
+  page,
+}) => {
+  const asked: string[] = [];
+  page.on("request", (request) => {
+    const path = new URL(request.url()).pathname;
+    if (path.endsWith("/tokens")) asked.push(path);
+  });
+
+  await page.goto("/admin");
+  await expect(
+    page.getByRole("heading", { name: "Administration" }),
+  ).toBeVisible();
+  const disclosure = page.getByRole("button", {
+    name: "API tokens for listener",
+  });
+  await expect(disclosure).toHaveAttribute("aria-expanded", "false");
+  expect(asked).toEqual([]);
+
+  await disclosure.click();
+  await expect(disclosure).toHaveAttribute("aria-expanded", "true");
+  await expect(page.getByText("No token on this account.")).toBeVisible();
+  expect(asked).toEqual(["/api/v2/admin/users/listener/tokens"]);
+});
+
+/**
+ * Both of these were failures wearing the clothes of an ordinary state: a
+ * token list that could not be fetched read as "no token on this account", and
+ * a progress stream that could not open left the panel waiting for a first
+ * reading that was never coming. That is the kind of defect nobody reports,
+ * because the screen looks like it is working.
+ */
+test("says a token list failed instead of calling it empty", async ({
+  page,
+}) => {
+  mock.tokensFail = true;
+  await page.goto("/admin");
+  await page
+    .getByRole("button", { name: "API tokens for listener" })
+    .click();
+
+  // Scoped to the panel: the player bar raises an alert of its own here, its
+  // stream being mocked away.
+  await expect(page.locator(".token-panel").getByRole("alert")).toHaveText(
+    "We could not load this view",
+  );
+  await expect(page.getByText("No token on this account.")).toHaveCount(0);
+});
+
+test("says the progress stream was lost instead of waiting for ever", async ({
+  page,
+}) => {
+  mock.scanFails = true;
+  await page.goto("/admin");
+  await page.getByRole("button", { name: "Scan now" }).first().click();
+
+  const panel = page.locator(".scan-panel");
+  await expect(panel.getByRole("alert")).toContainText(
+    "The progress stream could not be opened",
+  );
+  await expect(panel.getByText("Waiting for the first reading")).toHaveCount(0);
+});
+
+/**
+ * A refused status is the tidy failure. The likelier one is the request never
+ * completing at all, and that arrives as a rejected `fetch` rather than a
+ * response — which the stream reader used to swallow whole, leaving the panel
+ * waiting on a reading that had no chance of coming.
+ */
+test("says so when the progress stream never connects", async ({ page }) => {
+  mock.scanDrops = true;
+  await page.goto("/admin");
+  await page.getByRole("button", { name: "Scan now" }).first().click();
+
+  const panel = page.locator(".scan-panel");
+  await expect(panel.getByRole("alert")).toContainText(
+    "The progress stream could not be opened",
+  );
+});
+
+/**
+ * Library membership could be written since M4 and never read, so an interface
+ * could grant and revoke without ever showing who already had access. The list
+ * is behind a disclosure for the same reason the tokens are: the panel renders
+ * once per library, and loading on mount would ask for every membership list
+ * every time the admin screen opened.
+ */
+test("lists who may see a library, once its panel is opened", async ({
+  page,
+}) => {
+  const asked: string[] = [];
+  page.on("request", (request) => {
+    const path = new URL(request.url()).pathname;
+    if (path.endsWith("/members") || path.endsWith("/settings")) {
+      asked.push(path);
+    }
+  });
+
+  // Two libraries, because one cannot tell the two layouts apart: with a single
+  // library, "list then panel" and "list, then every panel" produce the same
+  // rows. The defect only shows from the second library on.
+  mock.libraries = [
+    library("library-1", "Ma musique"),
+    library("library-2", "Les enfants"),
+  ];
+
+  await page.goto("/admin");
+  const disclosure = page
+    .getByRole("button", { name: "Who may see this library" })
+    .first();
+  await expect(disclosure).toHaveAttribute("aria-expanded", "false");
+  expect(asked).toEqual([]);
+
+  // Each library's membership sits directly under that library, not after the
+  // whole list: two render passes put the third library's members four rows
+  // below it, which reads as belonging to whatever is above them. Its name,
+  // folder and deletion (RFC-021) follow, still before the next library.
+  const rows = page.locator(".admin-panel .resource-list > li");
+  await expect(rows.nth(0)).toContainText("Ma musique");
+  await expect(rows.nth(1)).toContainText("Who may see this library");
+  await expect(rows.nth(2)).toContainText("Name, folder and deletion");
+  await expect(rows.nth(3)).toContainText("Les enfants");
+  await expect(rows.nth(4)).toContainText("Who may see this library");
+  await expect(rows.nth(5)).toContainText("Name, folder and deletion");
+  await expect(rows).toHaveCount(6);
+  // Neither panel asks for anything until it is opened: the folder on the
+  // server is fetched for the one library somebody is looking at.
+  expect(asked).toEqual([]);
+
+  await disclosure.click();
+  await expect(page.getByText("guest")).toBeVisible();
+  expect(asked).toEqual(["/api/v2/libraries/library-1/members"]);
+
+  // The owner is shown and offers no role control: the route refuses `owner`
+  // outright, so a select here would be offering a refusal.
+  await expect(page.getByText("owner, and stays one")).toBeVisible();
+  await expect(
+    page.getByRole("combobox", { name: "Role: listener" }),
+  ).toHaveCount(0);
+  await expect(
+    page.getByRole("combobox", { name: "Role: guest" }),
+  ).toHaveValue("listener");
+});
+
+/**
+ * A membership list that could not be read is not an empty one. Standing an
+ * empty array in for "not known yet" made every account on the server look like
+ * a non-member, so the panel offered access to people who already had it —
+ * printed underneath the notice saying the list could not be read.
+ */
+test("offers no membership to grant while the list is unknown", async ({
+  page,
+}) => {
+  mock.membersFail = true;
+  await page.goto("/admin");
+  await page
+    .getByRole("button", { name: "Who may see this library" })
+    .first()
+    .click();
+
+  const panel = page.locator(".member-row .admin-panel").first();
+  await expect(panel.getByRole("alert")).toHaveText(
+    "We could not load this view",
+  );
+  // The grant control is built from the list, so without one there is nothing
+  // to build it from.
+  await expect(panel.getByLabel("Give access to")).toHaveCount(0);
+});
+
+/** A library's watch is an administrator's switch beside its links setting. */
+test("switches a library's watch off from its settings", async ({ page }) => {
+  const updates: unknown[] = [];
+  await page.route("**/api/v2/libraries/library-1", async (route) => {
+    if (route.request().method() !== "PATCH") {
+      await route.fallback();
+      return;
+    }
+    updates.push(route.request().postDataJSON());
+    await route.fulfill({ json: { scan_id: null } });
+  });
+  await page.goto("/admin");
+  await page.getByRole("button", { name: "Name, folder and deletion" }).click();
+  const watch = page.getByRole("checkbox", { name: /Watch the folder/ });
+  await expect(watch).toBeChecked();
+  await watch.uncheck();
+  await page.getByRole("button", { name: "Save" }).click();
+  await expect.poll(() => updates).toEqual([{ watch: false }]);
+});
diff --git a/webapp/e2e/artist.spec.ts b/webapp/e2e/artist.spec.ts
new file mode 100644
index 00000000..11a4cf0f
--- /dev/null
+++ b/webapp/e2e/artist.spec.ts
@@ -0,0 +1,575 @@
+// The artist page: most played, enrichment, discography and its images.
+
+import { expect, test } from "@playwright/test";
+
+import {
+  chooseLightTheme,
+  expectNoWcagViolations,
+  lowestContrast,
+} from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { openImageMenu, serveArtistImages } from "./fixtures/artist-images";
+import { albums, artistDetail, library } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * An artist page carries what this account played, and nothing when it played
+ * nothing.
+ *
+ * The desktop client fills this part of an artist page from a remote service.
+ * This server queries none, so what is counted is local listening — which also
+ * means a fresh account sees no section at all, and that is the half worth
+ * pinning: a heading over an empty table would read as a broken feature rather
+ * than as an honest answer.
+ */
+test("an artist page shows this account's most played, and no heading without a history", async ({
+  page,
+}) => {
+  await page.goto("/artists/artist-1");
+  await expect(
+    page.getByRole("heading", { name: "Björk", level: 2 }),
+  ).toBeVisible();
+
+  await expect(
+    page.getByRole("heading", { name: "Most played here" }),
+  ).toBeVisible();
+  // The server ranked them; the client renders that order and does not re-sort.
+  await expect(page.locator(".artist-played .songs tbody tr")).toHaveCount(2);
+  await expect(
+    page.locator(".artist-played .song-title").first(),
+  ).toContainText("Cocoon");
+  // A screenful, not the discography.
+  expect(mock.topSongAsks).toEqual(["10"]);
+  // And the albums are still what the page is.
+  await expect(page.getByRole("link", { name: "Open the album: Vespertine" })).toBeVisible();
+
+  await expectNoWcagViolations(page);
+
+  // Nothing played: the section is absent, not empty.
+  mock.artistPlayed = [];
+  await page.goto("/artists/artist-1");
+  await expect(
+    page.getByRole("heading", { name: "Björk", level: 2 }),
+  ).toBeVisible();
+  await expect(page.getByRole("link", { name: "Open the album: Vespertine" })).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Most played here" }),
+  ).toHaveCount(0);
+});
+
+/**
+ * RFC-011 decision 11 on the screen: what a provider said, and which one said
+ * it. The first answer is `pending`, as an artist's first visit is; the page
+ * asks again on its own, since the web client reads no event stream, and the
+ * second answer fills it.
+ */
+test("an artist page shows what the server learned, and where each part came from", async ({
+  page,
+}) => {
+  const lastfm = { provider: "lastfm", fetched_at: Date.UTC(2026, 9, 14) };
+  mock.enrichmentOf = (ask) =>
+    ask === 1
+      ? { state: "pending", bio: null, image: null, similar: null }
+      : {
+          state: "ready",
+          bio: {
+            summary: "An Icelandic singer and songwriter.",
+            full: "An Icelandic singer and songwriter.\nHer albums are many.",
+            source: lastfm,
+          },
+          image: {
+            artwork_hash: "a".repeat(64),
+            source: { provider: "deezer", fetched_at: Date.UTC(2026, 9, 15) },
+          },
+          similar: {
+            artists: [
+              {
+                id: "artist-2",
+                name: "Sigur Rós",
+                album_count: 1,
+                artwork_hash: null,
+              },
+            ],
+            source: lastfm,
+          },
+        };
+  // Only the portrait's hash answers with an image: the artist row names
+  // none, so the hero can show it only through `enrichment.image`.
+  const png = Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+    "base64",
+  );
+  await page.route(`**/api/v2/artwork/${"a".repeat(64)}`, async (route) => {
+    await route.fulfill({ contentType: "image/png", body: png });
+  });
+
+  await page.goto("/artists/artist-1");
+  await expect(page.getByRole("status")).toContainText(
+    "Looking this artist up",
+  );
+  await expect(page.getByRole("heading", { name: "About" })).toBeVisible({
+    timeout: 10_000,
+  });
+  await expect(page.getByText("An Icelandic singer and songwriter.").first()).toBeVisible();
+  await expect(page.getByText(/^Biography from Last\.fm, /)).toBeVisible();
+  await expect(page.getByText(/^Portrait from Deezer, /)).toBeVisible();
+  await expect(page.locator(".artist-hero img.artist-portrait")).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Similar artists in your library" }),
+  ).toBeVisible();
+  await expect(page.getByRole("link", { name: /Sigur Rós/ })).toBeVisible();
+  await expect(page.getByText(/^Suggested by Last\.fm, /)).toBeVisible();
+  await expect(page.getByText("Looking this artist up")).toHaveCount(0);
+  expect(mock.artistAsks).toBe(2);
+
+  await expectNoWcagViolations(page);
+});
+
+/** `none` is an answer: nothing is shown, and nothing is asked again. */
+test("an artist nobody knows shows no enrichment and is not asked again", async ({
+  page,
+}) => {
+  mock.enrichmentOf = () => ({ state: "none", bio: null, image: null, similar: null });
+  await page.goto("/artists/artist-1");
+  await expect(page.getByRole("link", { name: "Open the album: Vespertine" })).toBeVisible();
+  await page.waitForTimeout(4_000);
+  await expect(page.getByRole("heading", { name: "About" })).toHaveCount(0);
+  await expect(page.getByText("Looking this artist up")).toHaveCount(0);
+  expect(mock.artistAsks).toBe(1);
+});
+
+/**
+ * A server that fails after a `pending` answer leaves that answer on screen,
+ * and a failed ask does not move the count of answers. The failures are
+ * counted with them, so the page still stops at the bound.
+ */
+test("a pending artist whose server keeps failing is asked a bounded number of times", async ({
+  page,
+}) => {
+  test.setTimeout(45_000);
+  mock.artistFailsAfterFirst = true;
+  mock.enrichmentOf = () => ({ state: "pending", bio: null, image: null, similar: null });
+  await page.goto("/artists/artist-1");
+  await expect(page.getByRole("heading", { name: "Björk", level: 2 })).toBeVisible();
+  await expect.poll(() => mock.artistAsks, { timeout: 30_000 }).toBe(6);
+  await page.waitForTimeout(5_000);
+  expect(mock.artistAsks).toBe(6);
+  await expect(page.getByText("Looking this artist up")).toHaveCount(0);
+});
+
+/**
+ * Choosing an artist's banner and portrait by hand (RFC-013 step 3): the file
+ * goes as its own bytes, the header draws the banner behind it, a chosen
+ * portrait says so, and each can go back to automatic.
+ */
+test("changes an artist's banner and portrait from the artist page", async ({
+  page,
+}) => {
+  const { state, png } = await serveArtistImages(page);
+  await page.goto("/artists/artist-1");
+  const hero = page.locator(".artist-hero");
+  // The actions sit behind one button in the header's corner.
+  let menu = await openImageMenu(page);
+  await expect(menu.getByRole("menuitem", { name: "Change portrait" })).toBeVisible();
+  await expect(menu.getByRole("menuitem", { name: "Change banner" })).toBeVisible();
+  await expect(menu.getByRole("menuitem", { name: "No banner" })).toHaveCount(0);
+  await page.keyboard.press("Escape");
+  await expect(menu).toHaveCount(0);
+  // With no banner, the portrait is the backdrop, blurred.
+  await expect(hero.locator(".artist-hero-ambient")).toBeAttached();
+
+  await hero.getByLabel("Change banner").setInputFiles({
+    name: "banner.png",
+    mimeType: "image/png",
+    buffer: png,
+  });
+  await expect(hero.getByRole("status")).toHaveText("Banner changed.");
+  await expect(hero.locator("img.artist-banner")).toBeVisible();
+  await expect(hero.locator(".artist-hero-ambient")).toHaveCount(0);
+  expect(state.writes).toEqual([{ method: "PUT", kind: "banner", bytes: png.length }]);
+  await expectNoWcagViolations(page);
+
+  await hero.getByLabel("Change portrait").setInputFiles({
+    name: "portrait.png",
+    mimeType: "image/png",
+    buffer: png,
+  });
+  await expect(hero.getByRole("status")).toHaveText("Portrait changed.");
+  await expect(hero.getByText("Portrait chosen by hand")).toBeVisible();
+
+  // A file the server refuses is said, and nothing on screen changes.
+  state.refuseNext = true;
+  await hero.getByLabel("Change portrait").setInputFiles({
+    name: "notes.png",
+    mimeType: "image/png",
+    buffer: Buffer.from("not an image"),
+  });
+  await expect(hero.getByRole("alert")).toHaveText("Choose a JPEG, PNG or WebP image.");
+
+  // Back to automatic: no banner, and the fetched portrait again.
+  menu = await openImageMenu(page);
+  await menu.getByRole("menuitem", { name: "No banner" }).click();
+  await expect(hero.getByRole("status")).toHaveText("Banner removed.");
+  await expect(hero.locator("img.artist-banner")).toHaveCount(0);
+  menu = await openImageMenu(page);
+  await menu.getByRole("menuitem", { name: "Automatic portrait" }).click();
+  await expect(hero.getByRole("status")).toHaveText("Back to the automatic portrait.");
+  await expect(hero.getByText("Portrait chosen by hand")).toHaveCount(0);
+  expect(state.writes.slice(-2)).toEqual([
+    { method: "DELETE", kind: "banner", bytes: 0 },
+    { method: "DELETE", kind: "portrait", bytes: 0 },
+  ]);
+});
+
+/** A listener sees the chosen banner and is offered nothing to change. */
+test("shows a listener the artist's banner with nothing to change", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  const { state } = await serveArtistImages(page);
+  state.banner = "c".repeat(64);
+  await page.goto("/artists/artist-1");
+  const hero = page.locator(".artist-hero");
+  await expect(hero.locator("img.artist-banner")).toBeVisible();
+  // Not even the button the actions sit behind.
+  await expect(hero.getByRole("button", { name: "Edit images" })).toHaveCount(0);
+  await expect(hero.getByRole("button", { name: /Change/ })).toHaveCount(0);
+  await expect(hero.getByRole("button", { name: "Search Deezer" })).toHaveCount(0);
+});
+
+/**
+ * The automatic banner (RFC-014): TheAudioDB's fanart is drawn behind the
+ * header and credited to TheAudioDB, whose terms ask for it; a banner chosen
+ * by hand is credited to nobody.
+ */
+test("credits TheAudioDB for an automatic banner and nobody for a chosen one", async ({
+  page,
+}) => {
+  await serveArtistImages(page);
+  let chosen = false;
+  // Cached but not yet linked on the artist row: the enrichment alone names
+  // it, as it can on the visit after an artist is re-identified.
+  let linked = false;
+  await page.route("**/api/v2/artists/artist-1", (route) =>
+    route.fulfill({
+      json: {
+        ...artistDetail,
+        library_id: "library-1",
+        ...(chosen || linked
+          ? { banner_hash: (chosen ? "b" : "c").repeat(64) }
+          : {}),
+        ...(chosen
+          ? { image_choice: { banner: { source: "upload", set_at: 1 } } }
+          : {}),
+        enrichment: {
+          state: "ready",
+          bio: null,
+          image: null,
+          similar: null,
+          banner: chosen
+            ? null
+            : {
+                artwork_hash: "c".repeat(64),
+                source: {
+                  provider: "theaudiodb",
+                  fetched_at: Date.UTC(2026, 9, 24),
+                },
+              },
+        },
+      },
+    }),
+  );
+
+  await page.goto("/artists/artist-1");
+  const hero = page.locator(".artist-hero");
+  await expect(hero.locator("img.artist-banner")).toBeVisible();
+  await expect(hero.getByText(/^Banner from TheAudioDB, /)).toBeVisible();
+
+  linked = true;
+  await page.reload();
+  await expect(hero.locator("img.artist-banner")).toBeVisible();
+  await expect(hero.getByText(/^Banner from TheAudioDB, /)).toBeVisible();
+  await expectNoWcagViolations(page);
+
+  chosen = true;
+  await page.reload();
+  await expect(hero.locator("img.artist-banner")).toBeVisible();
+  await expect(hero.getByText(/^Banner from /)).toHaveCount(0);
+});
+
+/**
+ * Choosing the portrait from Deezer (RFC-013 step 4): the picker searches the
+ * artist's name as it opens, shows previews the server holds and nothing from
+ * Deezer itself, says what a refusal means, and a pick sends the Deezer id
+ * alone.
+ */
+test("chooses an artist's portrait from a Deezer search", async ({ page }) => {
+  const { state } = await serveArtistImages(page);
+  const searches: string[] = [];
+  const picks: unknown[] = [];
+  const thirdParty: string[] = [];
+  let refuseNext = false;
+  page.on("request", (request) => {
+    if (/deezer\.com|dzcdn\.net/.test(request.url())) thirdParty.push(request.url());
+  });
+  await page.route("**/api/v2/artists/artist-1/image/candidates?*", async (route) => {
+    const query = new URL(route.request().url()).searchParams.get("q") ?? "";
+    searches.push(query);
+    if (refuseNext) {
+      refuseNext = false;
+      await route.fulfill({ status: 429, json: { code: "too_many_requests" } });
+      return;
+    }
+    await route.fulfill({
+      json:
+        query === "Nobody"
+          ? []
+          : [
+              { deezer_id: 76, name: "Björk", fans: 1500000, artwork_hash: "d".repeat(64) },
+              { deezer_id: 77, name: "Björk Tribute", fans: 1, artwork_hash: "e".repeat(64) },
+            ],
+    });
+  });
+  await page.route("**/api/v2/artists/artist-1/image/portrait/deezer", async (route) => {
+    picks.push(route.request().postDataJSON());
+    state.portrait = "d".repeat(64);
+    await route.fulfill({
+      json: {
+        ...artistDetail,
+        library_id: "library-1",
+        artwork_hash: state.portrait,
+        image_choice: { portrait: { source: "deezer", set_at: 1 } },
+      },
+    });
+  });
+
+  await page.goto("/artists/artist-1");
+  const hero = page.locator(".artist-hero");
+  await (await openImageMenu(page))
+    .getByRole("menuitem", { name: "Search Deezer" })
+    .click();
+  const picker = page.getByRole("dialog", { name: "Choose a portrait from Deezer" });
+  await expect(picker).toBeVisible();
+  const results = picker.getByRole("list", { name: "Deezer artists" });
+  await expect(results.getByRole("button")).toHaveCount(2);
+  await expect(results.getByText("1 fan", { exact: true })).toBeVisible();
+  expect(searches).toEqual(["Björk"]);
+  await expectNoWcagViolations(page);
+
+  const query = picker.getByRole("searchbox", { name: "Artist name" });
+  await query.fill("Nobody");
+  await picker.getByRole("button", { name: "Search", exact: true }).click();
+  await expect(picker.getByRole("status")).toHaveText(
+    "Deezer knows no artist by that name.",
+  );
+
+  refuseNext = true;
+  await query.fill("Bjork");
+  await picker.getByRole("button", { name: "Search", exact: true }).click();
+  await expect(picker.getByRole("alert")).toHaveText(
+    "Your previous search is still running. Try again in a moment.",
+  );
+  await picker.getByRole("button", { name: "Search", exact: true }).click();
+  await expect(results.getByRole("button")).toHaveCount(2);
+
+  await results.getByRole("button").first().click();
+  await expect(picker).toHaveCount(0);
+  await expect(hero.getByRole("status")).toHaveText("Portrait changed.");
+  expect(picks).toEqual([{ deezer_id: 76 }]);
+  expect(searches).toEqual(["Björk", "Nobody", "Bjork", "Bjork"]);
+  expect(thirdParty).toEqual([]);
+});
+
+test("keeps the artist hero and the Deezer picker readable in the light", async ({
+  page,
+}) => {
+  const { state } = await serveArtistImages(page);
+  await page.route("**/api/v2/artists/artist-1/image/candidates?*", (route) =>
+    route.fulfill({
+      json: [
+        { deezer_id: 76, name: "Björk", fans: 1500000, artwork_hash: "d".repeat(64) },
+      ],
+    }),
+  );
+  await chooseLightTheme(page);
+  await page.goto("/artists/artist-1");
+  const hero = page.locator(".artist-hero");
+  await expect(hero.locator(".artist-hero-ambient")).toBeAttached();
+  await expectNoWcagViolations(page);
+
+  // Opened from the hero, the picker sits inside it in the tree, and took
+  // the hero's light-on-dark ink: the fan count was white on white.
+  await (await openImageMenu(page))
+    .getByRole("menuitem", { name: "Search Deezer" })
+    .click();
+  const picker = page.getByRole("dialog", { name: "Choose a portrait from Deezer" });
+  await expect(picker.getByText("1500000 fans")).toBeVisible();
+  await expectNoWcagViolations(page);
+  await picker.getByRole("button", { name: "Close" }).click();
+
+  state.banner = "c".repeat(64);
+  await page.reload();
+  await expect(hero.locator("img.artist-banner")).toBeVisible();
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * The artist hero over the picture least kind to its text, in both
+ * materials: a white banner under the light text a banner always takes, and
+ * a portrait at the far end from the ink — white behind the dark theme's
+ * light text, black behind the light theme's dark ink. Small text holds AA's
+ * 4.5:1 and the title, large, its 3:1.
+ */
+for (const { theme, banner, portrait } of [
+  { theme: "default-dark", banner: true, portrait: "#ffffff" },
+  { theme: "default", banner: true, portrait: "#ffffff" },
+  { theme: "default-dark", banner: false, portrait: "#ffffff" },
+  { theme: "default", banner: false, portrait: "#000000" },
+]) {
+  test(`keeps the artist hero legible over a ${banner ? "white banner" : `${portrait} portrait`} in ${theme}`, async ({
+    page,
+  }) => {
+    const { state } = await serveArtistImages(page);
+    if (banner) state.banner = "c".repeat(64);
+    // A portrait chosen by hand, so the quiet "Automatic portrait" button is
+    // drawn too and measured with the others.
+    state.portrait = "d".repeat(64);
+    const fill = banner ? "#ffffff" : portrait;
+    await page.route("**/api/v2/artwork/*", (route) =>
+      route.fulfill({
+        contentType: "image/svg+xml",
+        body: `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="${fill}"/></svg>`,
+      }),
+    );
+    await page.addInitScript((id) => {
+      localStorage.setItem("waveflow.theme", id);
+    }, theme);
+    await page.goto("/artists/artist-1");
+    await expect(page.locator("html")).toHaveAttribute("data-theme", theme);
+    const hero = page.locator(".artist-hero");
+    await expect(
+      hero.locator(banner ? "img.artist-banner" : ".artist-hero-ambient"),
+    ).toBeVisible();
+    await page.evaluate(() =>
+      Promise.all(
+        document.getAnimations().map((animation) => animation.finished.catch(() => undefined)),
+      ),
+    );
+
+    // Each text named by what it says, so that a line gone missing fails
+    // here instead of handing its place to the next one of the same class.
+    const name = hero.getByRole("heading", { name: "Björk", exact: true });
+    const kicker = hero.locator(".eyebrow");
+    const count = hero.getByText("2 albums in your library", { exact: true });
+    const source = hero.getByText("Portrait chosen by hand", { exact: true });
+    for (const text of [name, kicker, count, source]) {
+      await expect(text).toHaveCount(1);
+      await expect(text).toBeVisible();
+    }
+    // And no other source line beside it, left unmeasured.
+    await expect(hero.locator(".artist-source")).toHaveCount(1);
+    expect(await lowestContrast(page, name), "the name").toBeGreaterThanOrEqual(3);
+    for (const [label, text] of [
+      ["the kicker", kicker],
+      ["the count", count],
+      ["the source", source],
+    ] as const) {
+      expect(await lowestContrast(page, text), label).toBeGreaterThanOrEqual(4.5);
+    }
+    // Every button over the picture is measured. The image actions sit
+    // behind one menu button now, which is required, so the loop below
+    // cannot pass over an empty list.
+    const trigger = hero.getByRole("button", { name: "Edit images", exact: true });
+    await expect(trigger).toHaveCount(1);
+    await expect(trigger).toBeVisible();
+    const overPicture = await hero.locator(".artist-image-button").all();
+    expect(overPicture.length).toBeGreaterThan(0);
+    for (const button of overPicture) {
+      if (!(await button.isVisible())) continue;
+      expect(
+        await lowestContrast(page, button, true),
+        `the button “${await button.innerText()}”`,
+      ).toBeGreaterThanOrEqual(4.5);
+    }
+    // And what it opens: the plain entry and the quiet one, both required —
+    // a portrait chosen by hand is why "Automatic portrait" is offered. The
+    // menu is drawn on its own panel, outside the header, and is measured
+    // over whatever it covers all the same.
+    await trigger.click();
+    const menu = page.getByRole("menu", { name: "Images of Björk" });
+    for (const required of ["Change portrait", "Automatic portrait"]) {
+      const entry = menu.getByRole("menuitem", { name: required, exact: true });
+      await expect(entry).toHaveCount(1);
+      await expect(entry).toBeVisible();
+    }
+    for (const entry of await menu.getByRole("menuitem").all()) {
+      expect(
+        await lowestContrast(page, entry.locator("span")),
+        `the menu entry “${await entry.innerText()}”`,
+      ).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+}
+
+/**
+ * RFC-022 decisions 2 and 3 on the screen: the albums in the sections the
+ * server filed them under, in the page's order whatever order they came in,
+ * empty sections left out, and the appearances last.
+ */
+test("an artist page files its records by type, and lists what it appears on", async ({
+  page,
+}) => {
+  mock.artistExtra = {
+    albums: [
+      { ...albums[1], id: "album-3", title: "Vespertine Live", release_group: "live" },
+      { ...albums[0], release_group: "album" },
+      { ...albums[1], release_group: "album" },
+    ],
+    appears_on: [
+      {
+        ...albums[0],
+        id: "album-9",
+        title: "Guest Spot",
+        artist: "Someone Else",
+        artist_id: "artist-9",
+        release_group: "album",
+      },
+    ],
+  };
+  await page.goto("/artists/artist-1");
+  await expect(
+    page.getByRole("heading", { name: "Björk", level: 2 }),
+  ).toBeVisible();
+  await expect(page.locator(".artist-discography h3")).toHaveText([
+    "Albums",
+    "Live",
+    "Appears on",
+  ]);
+  const appearances = page.getByRole("region", { name: "Appears on" });
+  await expect(appearances.getByText("Guest Spot", { exact: true })).toBeVisible();
+  await expect(appearances.getByText("Someone Else")).toBeVisible();
+  // Filed under its own section, and nowhere else.
+  await expect(
+    page.getByRole("region", { name: "Live" }).getByText("Vespertine Live"),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("region", { name: "Albums" }).getByText("Vespertine Live"),
+  ).toHaveCount(0);
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * An older server sends no groups and no appearances: one section, the one
+ * the page always had.
+ */
+test("an artist page from a server without release groups keeps one section", async ({
+  page,
+}) => {
+  await page.goto("/artists/artist-1");
+  await expect(page.locator(".artist-discography h3")).toHaveText(["Albums"]);
+  await expect(
+    page.getByRole("region", { name: "Albums" }).getByText("Vespertine", { exact: true }),
+  ).toBeVisible();
+});
diff --git a/webapp/e2e/attention.spec.ts b/webapp/e2e/attention.spec.ts
new file mode 100644
index 00000000..4581473c
--- /dev/null
+++ b/webapp/e2e/attention.spec.ts
@@ -0,0 +1,221 @@
+// Needs attention: the credits waiting for a decision (RFC-015).
+
+import { expect, test } from "@playwright/test";
+
+import {
+  chooseLightTheme,
+  expectNoWcagViolations,
+} from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { serveAttention } from "./fixtures/attention";
+import { artistDetail, library } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+test("lists what needs attention, splits a credit on the second click, and undoes it", async ({
+  page,
+}) => {
+  const state = await serveAttention(page);
+  await page.goto("/attention");
+  await expect(
+    page.getByRole("heading", { name: "Needs attention" }),
+  ).toBeVisible();
+  await expect(page.getByText("2 things to look at")).toBeVisible();
+  // The first list holding something is open, and an empty one stays drawn.
+  const lists = page.getByRole("list", { name: "Lists" });
+  await expect(
+    lists.getByRole("link", { name: /Artists to split/ }),
+  ).toHaveAttribute("aria-current", "page");
+  await expect(lists.getByRole("link", { name: /Missing cover/ })).toHaveClass(
+    /empty/,
+  );
+
+  // A fragment the library already knows leads to that artist.
+  const fragments = page.getByRole("list", {
+    name: "What Ashreveal, Ashish Swargiary would split into",
+  });
+  await expect(
+    fragments.getByRole("link", { name: "Ashreveal" }),
+  ).toHaveAttribute("href", "/artists/artist-known");
+  await expect(fragments.getByText("Ashish Swargiary")).toBeVisible();
+
+  // The first click arms, and sends nothing.
+  await page.getByRole("button", { name: "Split", exact: true }).click();
+  const confirm = page.getByRole("button", { name: "Confirm: split into 2" });
+  await expect(confirm).toBeVisible();
+  expect(state.writes).toEqual([]);
+  await expectNoWcagViolations(page);
+  // The confirmation stands for four seconds, and on a loaded machine the scan
+  // alone can outlast them: armed again if it lapsed, so the click below meets
+  // the confirmation rather than racing its timer.
+  if (!(await confirm.isVisible())) {
+    await page.getByRole("button", { name: "Split", exact: true }).click();
+  }
+  await confirm.click();
+  await expect(
+    page.getByText("Ashreveal, Ashish Swargiary is split."),
+  ).toBeVisible();
+  expect(state.writes).toEqual([
+    {
+      method: "POST",
+      path: "credit-decisions",
+      body: { artist_id: "artist-joined", decision: "split" },
+    },
+  ]);
+  await expect(
+    page.getByText("No credit is waiting for a decision."),
+  ).toBeVisible();
+
+  // Decided, then undone.
+  await page.getByRole("button", { name: "Decided" }).click();
+  await expect(
+    page.getByText("Split into Ashreveal · Ashish Swargiary"),
+  ).toBeVisible();
+  await page.getByRole("button", { name: "Undo" }).click();
+  await expect(
+    page.getByText("The decision about Ashreveal, Ashish Swargiary is undone."),
+  ).toBeVisible();
+  expect(state.writes.at(-1)).toEqual({
+    method: "DELETE",
+    path: "decision-1",
+    body: null,
+  });
+
+  // A track list opens its tracks in the song table.
+  await lists.getByRole("link", { name: /Missing year/ }).click();
+  await expect(page).toHaveURL(/category=missing_year/);
+  await expect(page.getByText("Yearless")).toBeVisible();
+
+  // Probable duplicates are drawn group by group.
+  await lists.getByRole("link", { name: /Probable duplicates/ }).click();
+  await expect(
+    page.getByRole("heading", { name: "Probable duplicate 1" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Probable duplicate 2" }),
+  ).toBeVisible();
+  await expect(page.locator(".attention-group")).toHaveCount(2);
+  await expect(
+    page.locator(".attention-group").first().getByText("Echo (copy)"),
+  ).toBeVisible();
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * Two owners deciding the same credit: the second is refused, and the list is
+ * read again rather than left showing a row that is no longer there.
+ */
+test("reloads the credits when a decision is refused", async ({ page }) => {
+  const state = await serveAttention(page);
+  state.refuseWith = 409;
+  await page.goto("/attention?category=split_credits");
+  await page.getByRole("button", { name: "Keep as one" }).click();
+  await expect(
+    page.getByText(
+      "This credit was decided in the meantime. The list has been reloaded.",
+    ),
+  ).toBeVisible();
+  await expect(
+    page.getByText("No credit is waiting for a decision."),
+  ).toBeVisible();
+});
+
+/**
+ * A listener cannot act on any of it, so the page says so and asks nothing:
+ * the server would answer `404` regardless.
+ */
+test("asks nothing of the server for a listener's library", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  const state = await serveAttention(page);
+  await page.goto("/attention");
+  await expect(
+    page.getByText(
+      "Only the owners and managers of this library see what needs attention in it.",
+    ),
+  ).toBeVisible();
+  // Settled before counting: the message and a request fired beside it
+  // arrive together, and a count taken first would be zero either way.
+  await page.waitForLoadState("networkidle");
+  expect(state.asks).toBe(0);
+});
+
+/** The desktop's other way in: from the joined artist's own page. */
+test("splits a joined artist from its page, after a confirming click", async ({
+  page,
+}) => {
+  const state = await serveAttention(page);
+  await page.route("**/api/v2/artists/artist-joined", (route) =>
+    route.fulfill({
+      json: {
+        ...artistDetail,
+        id: "artist-joined",
+        name: "Ashreveal, Ashish Swargiary",
+        library_id: "library-1",
+        album_count: 0,
+        albums: [],
+      },
+    }),
+  );
+  await page.route("**/api/v2/artists/artist-joined/*", (route) =>
+    route.fulfill({ json: [] }),
+  );
+  await page.goto("/artists/artist-joined");
+  const offer = page.getByRole("button", { name: "Split into 2 artists" });
+  await expect(offer).toBeVisible();
+  await offer.click();
+  await page.getByRole("button", { name: "Confirm: split into 2" }).click();
+  await expect(page).toHaveURL(/\/artists$/);
+  expect(state.writes).toEqual([
+    {
+      method: "POST",
+      path: "credit-decisions",
+      body: { artist_id: "artist-joined", decision: "split" },
+    },
+  ]);
+
+  // A listener is offered nothing.
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  await page.goto("/artists/artist-joined");
+  await expect(
+    page.getByRole("heading", { name: "Ashreveal, Ashish Swargiary" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Split into 2 artists" }),
+  ).toHaveCount(0);
+});
+
+test("keeps Needs attention readable in the light", async ({ page }) => {
+  await serveAttention(page);
+  await chooseLightTheme(page);
+  await page.goto("/attention");
+  await expect(page.getByText("Ashreveal, Ashish Swargiary").first()).toBeVisible();
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * The light presets share one material and differ by their ground's tint and
+ * their accent's 700 stop, which is also the colour of every link and every
+ * open item: each one is audited where the accent is spent most.
+ */
+for (const theme of [
+  "default",
+  "midnight-light",
+  "sunset-light",
+  "lavender-light",
+  "crimson-light",
+  "ocean-light",
+]) {
+  test(`keeps the ${theme} theme readable`, async ({ page }) => {
+    await serveAttention(page);
+    await page.addInitScript((id) => {
+      localStorage.setItem("waveflow.theme", id);
+    }, theme);
+    await page.goto("/attention");
+    await expect(page.locator("html")).toHaveAttribute("data-theme", theme);
+    await expect(page.getByText("Ashreveal, Ashish Swargiary").first()).toBeVisible();
+    await expectNoWcagViolations(page);
+  });
+}
diff --git a/webapp/e2e/canvas.spec.ts b/webapp/e2e/canvas.spec.ts
new file mode 100644
index 00000000..d86eb653
--- /dev/null
+++ b/webapp/e2e/canvas.spec.ts
@@ -0,0 +1,204 @@
+// A track's canvas: placed, replaced, removed, and played over its cover.
+
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { library } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * RFC-009 from the editor: a loop sent as the file's own bytes, read back
+ * through its ticket rather than assumed from the answer, refused in words,
+ * and taken away.
+ */
+test("places, replaces and removes a track's canvas", async ({ page }) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_canvas: true }];
+  await page.goto("/tracks/song-9/edit");
+  await expect(page.getByText("This track has no canvas.")).toBeVisible();
+
+  const loop = Buffer.from([0x1a, 0x45, 0xdf, 0xa3, 0x01, 0x02]);
+  await page.getByLabel("Choose a loop").setInputFiles({
+    name: "loop.webm",
+    mimeType: "video/webm",
+    buffer: loop,
+  });
+  await expect(page.getByText("Canvas saved.")).toBeVisible();
+  const preview = page.getByLabel("Canvas preview");
+  await expect(preview).toHaveAttribute(
+    "src",
+    "/api/v2/canvas-stream/ticket-song-9",
+  );
+
+  // Refused: said in words, and the loop that was there is still there.
+  mock.refuseCanvasWith = 422;
+  await page.getByLabel("Replace the loop").setInputFiles({
+    name: "episode.mp4",
+    mimeType: "video/mp4",
+    buffer: Buffer.from([9, 9, 9]),
+  });
+  await expect(
+    page.getByText(
+      "The server refused this file: it takes a short mp4 or webm loop with a picture.",
+    ),
+  ).toBeVisible();
+  await expect(preview).toHaveAttribute(
+    "src",
+    "/api/v2/canvas-stream/ticket-song-9",
+  );
+
+  await expectNoWcagViolations(page);
+
+  await page.getByRole("button", { name: "Remove the canvas" }).click();
+  await expect(page.getByText("Canvas removed.")).toBeVisible();
+  await expect(page.getByText("This track has no canvas.")).toBeVisible();
+  expect(mock.canvasWrites).toEqual([
+    { method: "PUT", track: "song-9", bytes: [...loop] },
+    { method: "PUT", track: "song-9", bytes: [9, 9, 9] },
+    { method: "DELETE", track: "song-9" },
+  ]);
+});
+
+/**
+ * A library its operator has not opened to loops offers no new canvas, and
+ * still lets go of the one a track carries: the server does not gate removal on
+ * the flag, and the screen must not strand what the server would release.
+ */
+test("offers removal but no new canvas where the library takes none", async ({
+  page,
+}) => {
+  mock.canvases.set("song-9", [1, 2, 3]);
+  await page.goto("/tracks/song-9/edit");
+  // The notice waits for the list of libraries. Until it answers the picker is
+  // offered, so its absence below is only an answer once this is on screen.
+  await expect(
+    page.getByText(
+      "This library does not take canvases. Its operator decides that on the server.",
+    ),
+  ).toBeVisible();
+  await expect(page.getByLabel("Canvas preview")).toBeAttached();
+  await expect(
+    page.getByRole("button", { name: "Remove the canvas" }),
+  ).toBeVisible();
+  await expect(page.locator(".canvas-panel input[type=file]")).toHaveCount(0);
+});
+
+/**
+ * Most tracks carry no loop, and minting a ticket is how the client asks — so
+ * most of the time the answer is 404. The playing screen asks from an effect on
+ * mount, which made that 404 a per-navigation cost with no end to it: measured
+ * in a real session as a burst in the console, one request per visit, for ever.
+ *
+ * Client-side navigation both ways, deliberately. `page.goto` loads a fresh
+ * document and empties everything the module remembers, so a test built on it
+ * would prove the reload rather than the fix.
+ */
+test("asks once whether a track carries a canvas, not once per visit", async ({
+  page,
+}) => {
+  // `canvases` is left empty, so every ticket answers 404 — the shape at issue.
+  const tickets: string[] = [];
+  page.on("request", (request) => {
+    const path = new URL(request.url()).pathname;
+    if (path.endsWith("/canvas-ticket")) tickets.push(path);
+  });
+
+  await page.goto("/playing");
+  await expect(page.locator(".canvas-stage .cover")).toBeVisible();
+  await expect.poll(() => tickets).toEqual([
+    "/api/v2/tracks/song-1/canvas-ticket",
+  ]);
+
+  for (const _visit of [1, 2]) {
+    await page.getByRole("link", { name: "Albums" }).click();
+    await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+    await page.getByRole("link", { name: "Now playing" }).click();
+    await expect(page.locator(".canvas-stage .cover")).toBeVisible();
+  }
+
+  // Waited for rather than asserted straight away: a request issued by the
+  // mount effect leaves after the frame that made the cover visible, so
+  // counting at that moment would pass whether or not one was on its way.
+  await page.waitForLoadState("networkidle");
+  expect(tickets).toHaveLength(1);
+});
+
+test("plays a track's canvas over its cover, and steps aside for it", async ({
+  page,
+}) => {
+  mock.canvases.set("song-1", [1, 2, 3]);
+  let release = () => {};
+  mock.canvasStreamGate = new Promise<void>((resolve) => {
+    release = () => resolve();
+  });
+  await page.goto("/playing");
+  const stage = page.locator(".canvas-stage");
+  const video = stage.locator("video");
+  await expect(video).toHaveAttribute(
+    "src",
+    "/api/v2/canvas-stream/ticket-song-1",
+  );
+  await expect(video).toHaveAttribute("aria-hidden", "true");
+  await expect(video).toHaveJSProperty("muted", true);
+  await expect(video).toHaveJSProperty("loop", true);
+  await expect(stage.locator(".cover")).toBeVisible();
+  await expectNoWcagViolations(page);
+
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await expect(video).toHaveCount(0);
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+  await expect(video).toHaveCount(1);
+
+  // Bytes that are not a video: the browser gives up on them, and the cover is
+  // what is left rather than a frame with nothing in it.
+  release();
+  await expect(video).toHaveCount(0);
+  await expect(stage.locator(".cover")).toBeVisible();
+});
+
+/**
+ * A loop already on screen survives a failed re-mint.
+ *
+ * A query keeps the answer it has when a later one fails, so `data` and `error`
+ * can both be set at once — and saving a correction makes that reachable, since
+ * it invalidates everything and this ticket is re-minted. Reading the error
+ * first replaced a preview that still played, for a credential good for an
+ * hour.
+ */
+test("keeps a canvas on screen when re-minting its ticket fails", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
+  mock.canvases.set("song-9", [1, 2, 3]);
+
+  await page.goto("/tracks/song-9/edit");
+  const preview = page.locator("video.canvas-preview");
+  await expect(preview).toBeVisible();
+
+  // From here the ticket route is down, while the loop already on screen is
+  // still playable.
+  await page.route("**/api/v2/tracks/song-9/canvas-ticket", async (route) => {
+    await route.fulfill({ status: 503, body: "" });
+  });
+
+  const title = page.getByLabel("Title", { exact: true });
+  await title.fill("A title this track did not have");
+  // Armed before the click, and awaited after it: the assertions below are
+  // about what the panel shows once the re-mint has actually failed, and
+  // waiting only on "Saved." would leave that to the order two promises happen
+  // to settle in.
+  const refused = page.waitForResponse(
+    (response) =>
+      response.url().endsWith("/canvas-ticket") && response.status() === 503,
+  );
+  await page.getByRole("button", { name: "Save" }).click();
+  await refused;
+  await expect(page.getByText("Saved.")).toBeVisible();
+
+  await expect(preview).toBeVisible();
+  await expect(
+    page.getByText("Whether this track has a canvas could not be read."),
+  ).toHaveCount(0);
+});
diff --git a/webapp/e2e/editorial-pages.spec.ts b/webapp/e2e/editorial-pages.spec.ts
index 55997e23..33e5932c 100644
--- a/webapp/e2e/editorial-pages.spec.ts
+++ b/webapp/e2e/editorial-pages.spec.ts
@@ -6,7 +6,7 @@ import { expect, type Page, test } from "@playwright/test";
  * the mixes set apart from the albums, the artist's image actions behind one
  * menu, and the measured bit depth said as a measurement.
  *
- * Its own mock, shaped like the one `studio-nocturne.spec.ts` drives — the
+ * Its own mock, shaped like the one `fixtures/api.ts` serves — the
  * same session, the same `Library` shape, the same lyrics envelope — and kept
  * to the routes these screens read. Anything else answers 404, as there.
  */
diff --git a/webapp/e2e/fixtures/accessibility.ts b/webapp/e2e/fixtures/accessibility.ts
new file mode 100644
index 00000000..5a306b32
--- /dev/null
+++ b/webapp/e2e/fixtures/accessibility.ts
@@ -0,0 +1,113 @@
+// The WCAG audit, the light theme, and contrast measured over an image.
+
+import AxeBuilder from "@axe-core/playwright";
+import { expect, type Locator, type Page } from "@playwright/test";
+
+/**
+ * Audit the page against WCAG A and AA, once it has stopped moving.
+ *
+ * The dark theme raises each block of a page into view, fading it in over
+ * 640 ms. axe reads the colours as they are at the instant it looks, so an
+ * audit that caught a block halfway measured its text at a fraction of its
+ * opacity and reported a contrast the finished page does not have — on the
+ * genre test, five runs in eight. Every finite animation is let finish first;
+ * an infinite one, the pulse of a loading skeleton, would never settle, and is
+ * left running.
+ */
+export async function expectNoWcagViolations(page: Page) {
+  await page.evaluate(() =>
+    Promise.all(
+      document
+        .getAnimations()
+        .filter(
+          (animation) =>
+            animation.effect?.getComputedTiming().endTime !== Infinity,
+        )
+        .map((animation) => animation.finished.catch(() => undefined)),
+    ),
+  );
+  const results = await new AxeBuilder({ page })
+    .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+    .analyze();
+  expect(results.violations).toEqual([]);
+}
+
+/**
+ * The light themes on the 2.0 structure. fluid.css lays the same rail, heads
+ * and player bar over a light material, so every page the dark redesign
+ * recomposed is audited again in the light: the home page has its own test
+ * above, and these follow the pages and the dialogs added since.
+ */
+export function chooseLightTheme(page: Page) {
+  return page.addInitScript(() => {
+    localStorage.setItem("waveflow.theme", "default");
+  });
+}
+
+/**
+ * The lowest contrast a text keeps over whatever is drawn behind it, pixel by
+ * pixel. axe cannot measure text over a picture and reports it as needing
+ * review, so the hero's legibility over a banner was never checked: the text
+ * is made transparent, the box it sits in is captured, and its colour is
+ * composited over every pixel of that capture. A pill is measured inside its
+ * rounded ends and its ring, which are not behind the text: the corners of
+ * its box show the picture it sits on.
+ */
+export async function lowestContrast(page: Page, target: Locator, pill = false) {
+  const colour = await target.evaluate((element) => {
+    const { color } = getComputedStyle(element);
+    (element as HTMLElement).style.setProperty("color", "transparent", "important");
+    return color;
+  });
+  const box = await target.boundingBox();
+  if (!box) throw new Error("the text has no box to measure");
+  const inset = pill ? { x: box.height / 2, y: 3 } : { x: 0, y: 0 };
+  const shot = await page.screenshot({
+    animations: "disabled",
+    clip: {
+      x: box.x + inset.x,
+      y: box.y + inset.y,
+      width: box.width - inset.x * 2,
+      height: box.height - inset.y * 2,
+    },
+  });
+  await target.evaluate((element) =>
+    (element as HTMLElement).style.removeProperty("color"),
+  );
+  return page.evaluate(
+    async ({ png, colour }) => {
+      const image = new Image();
+      image.src = `data:image/png;base64,${png}`;
+      await image.decode();
+      const canvas = document.createElement("canvas");
+      canvas.width = image.width;
+      canvas.height = image.height;
+      const context = canvas.getContext("2d");
+      if (!context) throw new Error("no 2D context");
+      context.drawImage(image, 0, 0);
+      const { data } = context.getImageData(0, 0, image.width, image.height);
+      const [r, g, b, a = 1] = (colour.match(/[\d.]+/g) ?? []).map(Number);
+      const channel = (value: number) => {
+        const s = value / 255;
+        return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+      };
+      const luminance = (red: number, green: number, blue: number) =>
+        0.2126 * channel(red) + 0.7152 * channel(green) + 0.0722 * channel(blue);
+      let lowest = Number.POSITIVE_INFINITY;
+      for (let index = 0; index < data.length; index += 4) {
+        const [br, bg, bb] = [data[index], data[index + 1], data[index + 2]];
+        const ground = luminance(br, bg, bb);
+        const ink = luminance(
+          a * r + (1 - a) * br,
+          a * g + (1 - a) * bg,
+          a * b + (1 - a) * bb,
+        );
+        const ratio =
+          (Math.max(ground, ink) + 0.05) / (Math.min(ground, ink) + 0.05);
+        lowest = Math.min(lowest, ratio);
+      }
+      return lowest;
+    },
+    { png: shot.toString("base64"), colour },
+  );
+}
diff --git a/webapp/e2e/fixtures/api.ts b/webapp/e2e/fixtures/api.ts
index 05045f8f..d1bdc90f 100644
--- a/webapp/e2e/fixtures/api.ts
+++ b/webapp/e2e/fixtures/api.ts
@@ -1,661 +1,35 @@
-import AxeBuilder from "@axe-core/playwright";
-import { blake3 } from "@noble/hashes/blake3.js";
-import { bytesToHex } from "@noble/hashes/utils.js";
-import { expect, type Locator, type Page, test } from "@playwright/test";
+// The mock `/api/v2`, and the hook that resets and installs it per test.
 
-const session = {
-  access_token: "e2e-access-token",
-  user: { id: "user-1", username: "listener", role: "admin" },
-  device_id: "device-1",
-};
-
-const albums = [
-  {
-    id: "album-1",
-    library_id: "library-1",
-    title: "Post",
-    artist: "Björk",
-    artist_id: "artist-1",
-    artwork_hash: null,
-    year: 1995,
-    starred_at: null,
-    user_rating: null,
-  },
-  {
-    id: "album-2",
-    library_id: "library-1",
-    title: "Vespertine",
-    artist: "Björk",
-    artist_id: "artist-1",
-    artwork_hash: null,
-    year: 2001,
-    starred_at: null,
-    user_rating: null,
-  },
-];
-
-const track = {
-  id: "song-1",
-  library_id: "library-1",
-  album_id: "album-1",
-  title: "Army of Me",
-  album: "Post",
-  artist: "Björk",
-  artist_id: "artist-1",
-  artwork_hash: null,
-  duration_ms: 234_000,
-  track: 1,
-  disc: 1,
-  starred_at: null,
-  user_rating: null,
-};
-
-/**
- * 120 distinct plays, newest first. More than the screen resolves, which is the
- * point: each distinct track costs its own request.
- */
-const history = Array.from({ length: 120 }, (_, index) => ({
-  track_id: `t${index}`,
-  submission: true,
-  played_at: 1_000_000 - index,
-}));
-
-/**
- * The whole `Library` shape, not just what the picker reads. A fixture that
- * only carries the fields one screen happens to use is how the admin page went
- * down on an absent `folder_ids`: the next screen to touch it reads a field
- * nobody remembered to mock.
- */
-const library = (id: string, name: string) => ({
-  id,
-  name,
-  visibility: "private" as const,
-  role: "owner" as "owner" | "manager" | "listener",
-  last_scan_started_at: null,
-  last_scan_completed_at: null,
-  accepts_uploads: false as boolean,
-  accepts_canvas: false as boolean,
-  follow_links: false as boolean,
-});
-
-/**
- * The tracks the scans can no longer find (RFC-021), as
- * `GET /libraries/{id}/unavailable-tracks` answers them. Mutable, because the
- * purge test removes them and the point is that the list follows.
- */
-const missingTrack = (index: number, title: string) => ({
-  id: `missing-${index}`,
-  relative_path: `Gone/${index} ${title}.flac`,
-  title,
-  artist: "Ada Reed",
-  album: "Gone",
-  duration_ms: 200_000,
-  unavailable_since: 1_700_000_000_000 + index,
-  playlist_entries: index,
-  favorites: 1,
-  plays: 3 * index,
-  purged_at: null as number | null,
-  deleted_after: null as number | null,
-});
-let missingTracks: Array<ReturnType<typeof missingTrack>> = [];
-/**
- * What a purge took out of sight and the server still holds, restorable,
- * as `GET /libraries/{id}/purged-tracks` answers it.
- */
-let purgedTracks: Array<ReturnType<typeof missingTrack>> = [];
-/** What each purge asked for, in order. */
-let purgeAsks: unknown[] = [];
-/** What each restoration asked for, in order. */
-let restoreAsks: unknown[] = [];
-/** The grace window the mock server keeps a purge restorable for: a week. */
-const PURGE_GRACE_MS = 7 * 24 * 60 * 60 * 1000;
-
-/** Replaced by the scoping test; one library elsewhere, so no picker appears. */
-let libraries: Array<ReturnType<typeof library>> = [library("library-1", "Ma musique")];
-
-/** Flipped by the two tests that check a failure is shown as one. */
-let membersFail = false;
-let tokensFail = false;
-/**
- * The clients this account has registered, as the self-scoped route answers
- * them. Mutable, because the test registers one and revokes one and the point
- * is that the list follows.
- */
-type Client = {
-  id: string;
-  name: string;
-  scopes: string[];
-  expires_at: number | null;
-  created_at: number;
-  last_used_at: number | null;
-  revoked_at: number | null;
-};
-let ownClients: Client[] = [];
-/**
- * The Subsonic credential this account holds, or `null` for none.
- *
- * Two states and not one: the panel says different things about "you hold
- * none" and "the request has not answered", so the mock has to be able to say
- * the first.
- */
-let ownSubsonicCredential: { created_at: number; updated_at: number } | null =
-  null;
-/**
- * The saved positions the playing screen lists under the track.
- *
- * Empty by default, which is what it was: `/api/v2/bookmarks` fell through to
- * the mock's 404, so the list the screen renders was never drawn by any test.
- * One that needs the page taller than the viewport fills it.
- */
-let bookmarks: Array<{
-  position_ms: number;
-  comment: string | null;
-  created_at: number;
-  updated_at: number;
-  song: {
-    id: string;
-    title: string;
-    artist: string | null;
-    artwork_hash?: string | null;
-  };
-}> = [];
-/** Every registration the clients route received. */
-let clientWrites: string[] = [];
-/** Held open by the double-press test; instant for everyone else. */
-let clientGate: Promise<void> = Promise.resolve();
-/** Every method the credential route received, in order. */
-let subsonicWrites: string[] = [];
-/** Held open by the double-press test; instant for everyone else. */
-let subsonicGate: Promise<void> = Promise.resolve();
-function freshClients(): Client[] {
-  return [
-    {
-      id: "client-1",
-      name: "the kitchen speaker",
-      scopes: [],
-      expires_at: 1_800_000_000_000,
-      created_at: 1_700_000_000_000,
-      last_used_at: 1_700_600_000_000,
-      revoked_at: null,
-    },
-    {
-      // Already revoked, so the page has something it must leave out: this
-      // list answers who can read the library, and a credential that cannot
-      // is not an answer to it.
-      id: "client-2",
-      name: "a laptop that is gone",
-      scopes: [],
-      expires_at: null,
-      created_at: 1_690_000_000_000,
-      last_used_at: null,
-      revoked_at: 1_695_000_000_000,
-    },
-    {
-      // Not revoked, and past its expiry, which the server refuses. It became
-      // a reachable shape when a self-minted credential started carrying an
-      // expiry, and it has to be left out for the reason the revoked one is.
-      id: "client-3",
-      name: "a tablet whose year ran out",
-      scopes: [],
-      expires_at: 1_600_000_000_000,
-      created_at: 1_560_000_000_000,
-      last_used_at: 1_590_000_000_000,
-      revoked_at: null,
-    },
-  ];
-}
-let scanFails = false;
-/** The stream never answers at all, which is what a lost network looks like. */
-let scanDrops = false;
-
-/** Resolved by default; one test replaces it to stall `album-1`. */
-let slowAlbum: Promise<void> = Promise.resolve();
+import { type Page, test } from "@playwright/test";
 
-const song = (
-  index: number,
-  title: string,
-  rating: number,
-  starred: boolean,
-) => ({
-  id: `song-${index}`,
-  library_id: "library-1",
-  album_id: "album-2",
-  title,
-  album: "Vespertine",
-  artist: "Björk",
-  artist_id: "artist-1",
-  artwork_hash: null,
-  duration_ms: 300_000,
-  track: index,
-  disc: 1,
-  starred_at: starred ? 1 : null,
-  user_rating: rating,
-  // What the file is, as `SongItem` has always sent it. Present here because
-  // the screen now draws it — and worth nothing as evidence of the wire,
-  // which is asserted server-side against a real file by
-  // `the_technical_fields_reach_the_wire_and_match_the_file`.
-  codec: "FLAC",
-  suffix: "flac",
-  size: 27_983_872,
-  bitrate: 957,
-  sample_rate: 44_100,
-  channels: 2,
-  bit_depth: 16,
-  // ReplayGain as tagged, different per track so a test can tell which one
-  // the player levelled. The album's pair is shared, as on a real record.
-  replay_gain_track_gain: -6 - index,
-  replay_gain_track_peak: 0.9,
-  replay_gain_album_gain: -8,
-  replay_gain_album_peak: 0.95,
-});
-
-const albumDetail = {
-  ...albums[1],
-  songs: [
-    song(1, "Hidden Place", 5, true),
-    song(2, "Cocoon", 0, false),
-    song(3, "Undo", 2, false),
-  ],
-};
-
-/**
- * The artist page's own answer: a name and its albums. The most played list is
- * deliberately not in it — the page asks for that separately, because it
- * changes every time something is played while the discography does not.
- */
-const artistDetail = {
-  id: "artist-1",
-  name: "Björk",
-  album_count: 2,
-  artwork_hash: null,
+import {
+  albumDetail,
   albums,
-};
-
-/**
- * What this account played, in the order the server ranked it. Reassigned by
- * the test that empties it: an artist with no history must carry no heading
- * rather than a heading over nothing.
- */
-let artistPlayed: Array<ReturnType<typeof song>> = [];
-/** The limits the page asked for, so a screenful can be told from a catalogue. */
-let topSongAsks: Array<string | null> = [];
-/** How many times the artist page was asked for. */
-let artistAsks = 0;
-/**
- * Fields laid over the artist's answer: the RFC-022 sections and appearances.
- * Empty by default, which is what a server from before RFC-022 sends.
- */
-let artistExtra: Record<string, unknown> = {};
-/**
- * The `enrichment` object of the artist's nth answer, counting from one.
- * Undefined leaves it out, as a server from before RFC-011 does.
- */
-let enrichmentOf: (ask: number) => unknown = () => undefined;
-/** Every artist answer after the first is a 500. */
-let artistFailsAfterFirst = false;
-
-/**
- * A dry run's answer: three of five entries placed, two it could not.
- *
- * Two entries short on purpose — the panel's whole reason to exist is showing
- * what an import would lose before it happens, so the report has to carry
- * losses for the test to mean anything.
- */
-const importReport = {
-  playlist: null,
-  name: "From another player",
-  encoding: "windows-1252",
-  entries: 5,
-  resolved: 3,
-  unresolved: [
-    {
-      line: 7,
-      entry: "common.flac",
-      title: null,
-      reason: "ambiguous",
-    },
-    {
-      line: 9,
-      entry: "http://radio.example/stream",
-      title: "A stream",
-      reason: "not-a-path",
-    },
-  ],
-};
-/** Every import request, so a dry run can be told from a commit. */
-let importAsks: Array<{ dryRun: boolean; name: string | null }> = [];
-/** What the export route was asked for, and what it answered. */
-let exportAsks: string[] = [];
-
-/**
- * The account's radio stations, which this harness really does keep: the page
- * writes and reads them back, so a mock answering a fixed list would pass a
- * delete that deleted nothing.
- */
-/** Every write the radio page sent, so one click can be told from two. */
-let radioWrites: string[] = [];
-/** Held open by the double-press test; instant for everyone else. */
-let radioGate: Promise<void> = Promise.resolve();
-
-let stations: Array<{
-  id: string;
-  name: string;
-  stream_url: string;
-  homepage_url: string | null;
-  image_url: string | null;
-  artwork_hash: string | null;
-  created_at: number;
-  updated_at: number;
-}> = [];
-/** Every image address a station write carried, as the server would fetch it. */
-let stationImages: Array<string | null | undefined> = [];
-
-/**
- * The hash the server would store a station's image under, made up from its
- * address: what the mock answers instead of fetching anything.
- */
-const imageHash = (address: string) =>
-  `station-art-${address.replace(/[^a-z0-9]/gi, "")}`;
-
-const playlists = [
-  {
-    id: "playlist-1",
-    owner_id: "user-1",
-    owner_username: "listener",
-    name: "Evening",
-    comment: null,
-    public: false,
-    created_at: 1_700_000_000_000,
-    updated_at: 1_700_000_000_000,
-    songs: [song(1, "Hidden Place", 5, true)],
-  },
-];
-
-const genres = [
-  { name: "Art Pop", song_count: 412, album_count: 31 },
-  { name: "Shoegaze", song_count: 233, album_count: 18 },
-];
-
-const genreSongs = [
-  song(1, "Hidden Place", 5, true),
-  song(2, "Cocoon", 0, false),
-];
-
-/**
- * A track another client has already corrected: a comment over two lines, and
- * an artist fixed. A save that does not touch the comment must leave it out of
- * the body — the server keeps whatever a patch does not mention, but only if
- * the client does not send it back.
- *
- * Built afresh for each test, because the PATCH mock applies what it receives.
- * The editor reads the corrections back after a save, and a mock that ignored
- * the write would let a form that never reloaded pass for one that did.
- */
-function correctableTrack() {
-  const overrides: Record<string, unknown> = {
-    title: null,
-    sort_title: null,
-    year: null,
-    track_number: null,
-    disc_number: null,
-    musicbrainz_recording_id: null,
-    comment: "Remastered\nBonus edition",
-    artists: ["Skunk Anansie"],
-    genres: null,
-  };
-  return {
-    song: {
-      ...song(9, "Army Of Me", 0, false),
-      year: 1995,
-      artists: [{ id: "artist-2", name: "Skunk Anansie" }],
-      genres: ["Trip Hop"],
-    },
-    tracked: {
-      source: {
-        title: "Army Of Me",
-        sort_title: null,
-        year: 1995,
-        track_number: 9,
-        disc_number: 1,
-        musicbrainz_recording_id: null,
-        comment: null,
-      },
-      overrides,
-    },
-  };
-}
-
-/** What the file credits: where a removed artists correction goes back to. */
-const fileArtists = [{ id: "artist-1", name: "Björk" }];
-
-let correctable = correctableTrack();
-
-/** Every correction body sent, in order. */
-let corrections: unknown[] = [];
-
-type Offer = { full_hash: string; size_bytes: number; extension: string };
-
-const freshUploadSession = () => ({
-  session_id: "upload-1",
-  next_chunk: 0,
-  received_bytes: 0,
-  chunk_bytes: 8,
-  expires_at: 0,
-});
-
-/** What the upload mock received, in order. */
-let uploadOffers: Offer[] = [];
-let uploadChunks: Array<{ index: number; bytes: number[] }> = [];
-let uploadCommits: string[] = [];
-/** The one session the mock holds, advanced by each fragment it writes. */
-let uploadSession = freshUploadSession();
-/**
- * Set by the resume test: the fragment at this index is written, and its
- * acknowledgement lost — the session advances and the client is told 409.
- */
-let loseAcknowledgementOf: number | null = null;
-
-/**
- * External scrobbling — RFC-010.
- *
- * Two instances of one recipient, because that is the case the whole named
- * instances slice exists for and the one a screen keyed on the recipient alone
- * would collapse. Last.fm is declared and unavailable, which is its real shape
- * on a server whose operator registered no application.
- */
-type Recipient = "listenbrainz" | "maloja" | "lastfm";
-
-/**
- * What `lastfm_unavailability` answers — a case, not a sentence.
- *
- * It used to be the server's own English prose, copied here and asserted
- * verbatim below, so the test agreed with the server about a string neither of
- * them should have been sending to a client that ships in two languages.
- */
-const NO_PUBLIC_URL = "browser_journey_needs_https";
-
-const freshDestinations = () => [
-  { provider: "listenbrainz" as const, destination: "default", available: true },
-  { provider: "maloja" as const, destination: "alice", available: true },
-  { provider: "maloja" as const, destination: "bob", available: true },
-  {
-    provider: "lastfm" as const,
-    destination: "default",
-    available: false,
-    unavailable: NO_PUBLIC_URL,
-  },
-];
-
-/**
- * A link is named by the **pair**, here as on the server.
- *
- * The recipient was fixed at `maloja` and the mock matched on the destination
- * alone, which works only while no two recipients share an instance name —
- * and `default` is the name they all use. Unlinking `maloja/default` would
- * have withdrawn `listenbrainz/default` beside it: the precise fault named in
- * the migration that rebuilt `scrobble_link_live_idx`, reproduced in the mock
- * that exists to catch it.
- */
-const linkState = (provider: Recipient, destination: string) => ({
-  provider,
-  destination,
-  health: "degraded" as const,
-  pending: 12,
-  retrying: 3,
-  uncertain: 1,
-  oldest_pending_at: 1_700_000_000_000,
-  last_success_at: 1_700_000_000_000,
-  last_failure: "rate_limited",
-});
-
-/** The one ambiguous listen, played when `t5` was, so history can name it. */
-const freshUncertain = () => [
-  {
-    id: "entry-1",
-    provider: "maloja" as const,
-    destination: "alice",
-    played_at: 1_000_000 - 5,
-    attempts: 1,
-    last_failure: "ambiguous",
-    updated_at: 1_700_000_000_000,
-  },
-];
-
-let destinations = freshDestinations();
-let scrobbleLinks: Array<ReturnType<typeof linkState>> = [];
-let uncertain = freshUncertain();
-/** Every link, unlink and answer the mock received, in order. */
-let scrobbleWrites: Array<{ method: string; path: string; body?: unknown }> = [];
-/** Where the Last.fm journey says to send the browser. */
-let lastFmAuthorizeUrl = "https://www.last.fm/api/auth/?api_key=k&cb=back";
-
-/**
- * The words the mock holds for each track. Absent is a track without any.
- *
- * Shaped like `src/lyrics.rs` answers, `camelCase` envelope included — written
- * from the server rather than from `LyricsList` in `webapp/src/api/tracks.ts`, which
- * is how that type spent a release claiming `structured_lyrics` while every
- * read of it threw.
- */
-let lyricSheets = new Map<
-  string,
-  Array<{
-    displayArtist: string | null;
-    displayTitle: string;
-    lang: string;
-    synced: boolean;
-    line: Array<{ start?: number; value: string }>;
-    /** Where the server says the sheet came from: `lrclib` since RFC-024. */
-    source?: string;
-  }>
->();
-
-/**
- * The mixes `GET /api/v2/mixes` answers (RFC-024). Empty by default, which is
- * what a server answers for an account with nothing to suggest — and what
- * keeps the home page every other test reads exactly as it was.
- */
-let mixes: Array<{
-  id: string;
-  kind: string;
-  genre: string | null;
-  decade: number | null;
-  track_count: number;
-  artwork_hashes: string[];
-}> = [];
-/** Every mix id the mock was asked for, in order. */
-let mixAsks: string[] = [];
-/** Set by the test that checks a mix which cannot be read says so. */
-let mixFails = false;
-/** Every period the statistics route was asked for, in order. */
-let statsAsks: string[] = [];
-
-/** Held open by the late-sheet test; instant for everyone else. */
-let lyricsGate: Promise<void> = Promise.resolve();
-/** The loop the mock holds for each track, as bytes. Absent is none. */
-let canvases = new Map<string, number[]>();
-/** Every placement and removal the mock received, in order. */
-let canvasWrites: Array<{ method: string; track: string; bytes?: number[] }> =
-  [];
-/** Set by a test to refuse the next placement with this status. */
-let refuseCanvasWith: number | null = null;
-/**
- * Held by the playing page test, so a loop's bytes arrive only once it has
- * looked at the element: they are not a video, and the browser drops the
- * element the moment it finds that out.
- */
-let canvasStreamGate: Promise<void> = Promise.resolve();
-
-/**
- * Audit the page against WCAG A and AA, once it has stopped moving.
- *
- * The dark theme raises each block of a page into view, fading it in over
- * 640 ms. axe reads the colours as they are at the instant it looks, so an
- * audit that caught a block halfway measured its text at a fraction of its
- * opacity and reported a contrast the finished page does not have — on the
- * genre test, five runs in eight. Every finite animation is let finish first;
- * an infinite one, the pulse of a loading skeleton, would never settle, and is
- * left running.
- */
-async function expectNoWcagViolations(page: Page) {
-  await page.evaluate(() =>
-    Promise.all(
-      document
-        .getAnimations()
-        .filter(
-          (animation) =>
-            animation.effect?.getComputedTiming().endTime !== Infinity,
-        )
-        .map((animation) => animation.finished.catch(() => undefined)),
-    ),
-  );
-  const results = await new AxeBuilder({ page })
-    .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
-    .analyze();
-  expect(results.violations).toEqual([]);
-}
-
-/**
- * `GET /api/v2/stats` for one period, shaped as the server shapes it: a day
- * per bucket for the two short periods, a month for the others, and the
- * busiest bucket last so the bars have something to measure against.
- */
-function statsFor(period: string) {
-  const buckets = period === "7d" ? 7 : period === "30d" ? 30 : 12;
-  const daily = period === "7d" || period === "30d";
-  const timeline = Array.from({ length: buckets }, (_, index) => ({
-    label: daily
-      ? `2026-10-${String(index + 1).padStart(2, "0")}`
-      : `2026-${String(index + 1).padStart(2, "0")}`,
-    plays: index === buckets - 1 ? 4 : index % 3 === 0 ? 1 : 0,
-    listening_ms: 0,
-  }));
-  const plays = timeline.reduce((sum, bucket) => sum + bucket.plays, 0);
-  return {
-    period,
-    from: period === "all" ? null : 1_790_000_000_000,
-    bucket: daily ? "day" : "month",
-    totals: {
-      plays,
-      listening_ms: plays * 234_000,
-      tracks: 2,
-      albums: 1,
-      artists: 1,
-    },
-    top_tracks: [
-      { song: song(1, "Hidden Place", 0, false), plays: 3 },
-      { song: song(2, "Cocoon", 0, false), plays: 1 },
-    ],
-    top_albums: [{ album: albums[1], plays: 4 }],
-    top_artists: [
-      { artist: { id: "artist-1", name: "Björk" }, artwork_hash: null, plays: 4 },
-    ],
-    top_genres: [{ name: "Art Pop", plays: 4 }],
-    timeline,
-    first_play: { song: song(2, "Cocoon", 0, false), played_at: 1_790_000_000_000 },
-    last_play: { song: song(1, "Hidden Place", 0, false), played_at: 1_790_100_000_000 },
-  };
-}
+  artistDetail,
+  type Client,
+  correctableTrack,
+  fileArtists,
+  freshClients,
+  freshDestinations,
+  freshUncertain,
+  freshUploadSession,
+  genres,
+  genreSongs,
+  history,
+  imageHash,
+  importReport,
+  library,
+  linkState,
+  type Offer,
+  playlists,
+  PURGE_GRACE_MS,
+  type Recipient,
+  session,
+  song,
+  statsFor,
+  track,
+} from "./catalogue";
+import { mock } from "./state";
 
 async function mockAuthenticatedApi(page: Page) {
   await page.context().addCookies([
@@ -674,15 +48,15 @@ async function mockAuthenticatedApi(page: Page) {
     }
     if (url.pathname === "/api/v2/albums/album-1") {
       // Held open by the concurrency test; instant for everyone else.
-      await slowAlbum;
+      await mock.slowAlbum;
       await route.fulfill({ json: { ...albums[0], songs: [track] } });
       return;
     }
-    if (url.pathname === "/api/v2/scans/scan-1/events" && scanDrops) {
+    if (url.pathname === "/api/v2/scans/scan-1/events" && mock.scanDrops) {
       await route.abort("connectionfailed");
       return;
     }
-    if (url.pathname === "/api/v2/scans/scan-1/events" && scanFails) {
+    if (url.pathname === "/api/v2/scans/scan-1/events" && mock.scanFails) {
       await route.fulfill({ status: 503, body: "" });
       return;
     }
@@ -740,7 +114,7 @@ async function mockAuthenticatedApi(page: Page) {
     // tracks with their purge.
     if (url.pathname.endsWith("/settings") && url.pathname.includes("/libraries/")) {
       const id = url.pathname.split("/")[4];
-      const found = libraries.find((entry) => entry.id === id);
+      const found = mock.libraries.find((entry) => entry.id === id);
       await route.fulfill({
         json: {
           id,
@@ -756,16 +130,16 @@ async function mockAuthenticatedApi(page: Page) {
       const asked = route.request().postDataJSON() as
         | { all: true }
         | { track_ids: string[] };
-      purgeAsks.push(asked);
+      mock.purgeAsks.push(asked);
       // As the server does with its default grace window: out of sight now,
       // restorable for a week.
       const now = Date.now();
-      const taken = missingTracks.filter(
+      const taken = mock.missingTracks.filter(
         (entry) => "all" in asked || asked.track_ids.includes(entry.id),
       );
-      missingTracks = missingTracks.filter((entry) => !taken.includes(entry));
-      purgedTracks = [
-        ...purgedTracks,
+      mock.missingTracks = mock.missingTracks.filter((entry) => !taken.includes(entry));
+      mock.purgedTracks = [
+        ...mock.purgedTracks,
         ...taken.map((entry) => ({
           ...entry,
           purged_at: now,
@@ -781,13 +155,13 @@ async function mockAuthenticatedApi(page: Page) {
       const asked = route.request().postDataJSON() as
         | { all: true }
         | { track_ids: string[] };
-      restoreAsks.push(asked);
-      const back = purgedTracks.filter(
+      mock.restoreAsks.push(asked);
+      const back = mock.purgedTracks.filter(
         (entry) => "all" in asked || asked.track_ids.includes(entry.id),
       );
-      purgedTracks = purgedTracks.filter((entry) => !back.includes(entry));
-      missingTracks = [
-        ...missingTracks,
+      mock.purgedTracks = mock.purgedTracks.filter((entry) => !back.includes(entry));
+      mock.missingTracks = [
+        ...mock.missingTracks,
         ...back.map((entry) => ({
           ...entry,
           purged_at: null,
@@ -802,8 +176,8 @@ async function mockAuthenticatedApi(page: Page) {
       const limit = Number(url.searchParams.get("limit") ?? 100);
       await route.fulfill({
         json: {
-          total: purgedTracks.length,
-          tracks: purgedTracks.slice(offset, offset + limit),
+          total: mock.purgedTracks.length,
+          tracks: mock.purgedTracks.slice(offset, offset + limit),
         },
       });
       return;
@@ -813,13 +187,13 @@ async function mockAuthenticatedApi(page: Page) {
       const limit = Number(url.searchParams.get("limit") ?? 100);
       await route.fulfill({
         json: {
-          total: missingTracks.length,
-          tracks: missingTracks.slice(offset, offset + limit),
+          total: mock.missingTracks.length,
+          tracks: mock.missingTracks.slice(offset, offset + limit),
         },
       });
       return;
     }
-    if (url.pathname.endsWith("/members") && membersFail) {
+    if (url.pathname.endsWith("/members") && mock.membersFail) {
       await route.fulfill({ status: 500, json: { error: "boom" } });
       return;
     }
@@ -844,13 +218,13 @@ async function mockAuthenticatedApi(page: Page) {
     }
     if (url.pathname === "/api/v2/radio-stations") {
       if (route.request().method() === "POST") {
-        radioWrites.push("POST");
-        await radioGate;
+        mock.radioWrites.push("POST");
+        await mock.radioGate;
         const draft = route.request().postDataJSON();
-        stationImages.push(draft.image_url);
+        mock.stationImages.push(draft.image_url);
         const image = draft.image_url ?? null;
         const created = {
-          id: `station-${stations.length + 1}`,
+          id: `station-${mock.stations.length + 1}`,
           name: String(draft.name).trim(),
           stream_url: draft.stream_url,
           homepage_url: draft.homepage_url ?? null,
@@ -859,27 +233,27 @@ async function mockAuthenticatedApi(page: Page) {
           created_at: 1_700_000_000_000,
           updated_at: 1_700_000_000_000,
         };
-        stations = [...stations, created].sort((a, b) =>
+        mock.stations = [...mock.stations, created].sort((a, b) =>
           a.name.localeCompare(b.name),
         );
         await route.fulfill({ status: 201, json: created });
         return;
       }
-      await route.fulfill({ json: stations });
+      await route.fulfill({ json: mock.stations });
       return;
     }
     if (url.pathname.startsWith("/api/v2/radio-stations/")) {
       const id = url.pathname.slice("/api/v2/radio-stations/".length);
       if (route.request().method() === "DELETE") {
-        stations = stations.filter((station) => station.id !== id);
+        mock.stations = mock.stations.filter((station) => station.id !== id);
         await route.fulfill({ status: 204, body: "" });
         return;
       }
       // A replacement: every field arrives, so an absent homepage clears it.
       // The image is the exception the server makes: absent, it is kept.
       const draft = route.request().postDataJSON();
-      stationImages.push(draft.image_url);
-      const previous = stations.find((station) => station.id === id);
+      mock.stationImages.push(draft.image_url);
+      const previous = mock.stations.find((station) => station.id === id);
       const image =
         "image_url" in draft
           ? (draft.image_url ?? null)
@@ -894,54 +268,54 @@ async function mockAuthenticatedApi(page: Page) {
         created_at: 1_700_000_000_000,
         updated_at: 1_700_000_000_001,
       };
-      stations = stations.map((station) =>
+      mock.stations = mock.stations.map((station) =>
         station.id === id ? replaced : station,
       );
       await route.fulfill({ json: replaced });
       return;
     }
     if (url.pathname === "/api/v2/bookmarks") {
-      await route.fulfill({ json: bookmarks });
+      await route.fulfill({ json: mock.bookmarks });
       return;
     }
     if (url.pathname === "/api/v2/subsonic-credential") {
       const method = route.request().method();
       if (method !== "GET") {
-        subsonicWrites.push(method);
-        await subsonicGate;
+        mock.subsonicWrites.push(method);
+        await mock.subsonicGate;
       }
       if (method === "PUT") {
         // Rotation, never creation: an account holding none gets a 404, the
         // way the server answers it, so a panel that offered the control
         // anyway would fail here.
-        if (ownSubsonicCredential === null) {
+        if (mock.ownSubsonicCredential === null) {
           await route.fulfill({ status: 404, json: { error: "not found" } });
           return;
         }
-        ownSubsonicCredential = {
-          ...ownSubsonicCredential,
+        mock.ownSubsonicCredential = {
+          ...mock.ownSubsonicCredential,
           updated_at: 1_700_990_000_000,
         };
         await route.fulfill({ json: { api_key: "wfsk_shown_once_only" } });
         return;
       }
       if (method === "DELETE") {
-        ownSubsonicCredential = null;
+        mock.ownSubsonicCredential = null;
         await route.fulfill({ status: 204, body: "" });
         return;
       }
-      await route.fulfill({ json: ownSubsonicCredential });
+      await route.fulfill({ json: mock.ownSubsonicCredential });
       return;
     }
     // Before the administrative `/tokens` branch below, which would swallow
     // it: this path is the account asking about itself.
     if (url.pathname === "/api/v2/api-tokens") {
       if (route.request().method() === "POST") {
-        clientWrites.push("POST");
-        await clientGate;
+        mock.clientWrites.push("POST");
+        await mock.clientGate;
         const asked = route.request().postDataJSON() as { name: string };
         const created: Client = {
-          id: `client-${ownClients.length + 1}`,
+          id: `client-${mock.ownClients.length + 1}`,
           name: asked.name,
           scopes: [],
           expires_at: 1_900_000_000_000,
@@ -949,26 +323,26 @@ async function mockAuthenticatedApi(page: Page) {
           last_used_at: null,
           revoked_at: null,
         };
-        ownClients = [created, ...ownClients];
+        mock.ownClients = [created, ...mock.ownClients];
         await route.fulfill({
           status: 201,
           json: { ...created, secret: "wfapi_shown_once_and_never_again" },
         });
         return;
       }
-      await route.fulfill({ json: ownClients });
+      await route.fulfill({ json: mock.ownClients });
       return;
     }
     if (url.pathname.startsWith("/api/v2/api-tokens/")) {
       const id = url.pathname.split("/").pop();
-      ownClients = ownClients.map((client) =>
+      mock.ownClients = mock.ownClients.map((client) =>
         client.id === id ? { ...client, revoked_at: 1_700_950_000_000 } : client,
       );
       await route.fulfill({ status: 204, body: "" });
       return;
     }
     if (url.pathname.endsWith("/tokens")) {
-      if (tokensFail) {
+      if (mock.tokensFail) {
         await route.fulfill({ status: 500, json: { error: "boom" } });
         return;
       }
@@ -980,7 +354,7 @@ async function mockAuthenticatedApi(page: Page) {
       return;
     }
     if (url.pathname === "/api/v2/libraries") {
-      await route.fulfill({ json: libraries });
+      await route.fulfill({ json: mock.libraries });
       return;
     }
     if (url.pathname === "/api/v2/queue") {
@@ -1000,11 +374,11 @@ async function mockAuthenticatedApi(page: Page) {
     // id would otherwise be read, which is why the server puts the literal
     // before the parameter, and why the mock has to match in the same order.
     if (url.pathname === "/api/v2/scrobble-destinations") {
-      await route.fulfill({ json: destinations });
+      await route.fulfill({ json: mock.destinations });
       return;
     }
     if (url.pathname === "/api/v2/scrobble-links") {
-      await route.fulfill({ json: scrobbleLinks });
+      await route.fulfill({ json: mock.scrobbleLinks });
       return;
     }
     if (url.pathname.startsWith("/api/v2/scrobble-links/lastfm/authorize/")) {
@@ -1012,19 +386,19 @@ async function mockAuthenticatedApi(page: Page) {
       // recording agreed with the assertion whatever the client had sent, and
       // the three branches that record a write could not fail for the reason
       // they exist.
-      scrobbleWrites.push({
+      mock.scrobbleWrites.push({
         method: route.request().method(),
         path: url.pathname,
       });
       await route.fulfill({
-        json: { authorize_url: lastFmAuthorizeUrl, expires_in: 720 },
+        json: { authorize_url: mock.lastFmAuthorizeUrl, expires_in: 720 },
       });
       return;
     }
     if (url.pathname.startsWith("/api/v2/scrobble-links/")) {
       const [, , , , provider, destination] = url.pathname.split("/");
       const method = route.request().method();
-      scrobbleWrites.push({
+      mock.scrobbleWrites.push({
         method,
         path: url.pathname,
         body: method === "PUT" ? route.request().postDataJSON() : undefined,
@@ -1032,11 +406,11 @@ async function mockAuthenticatedApi(page: Page) {
       const recipient = provider as Recipient;
       // Both gestures address the pair. `PUT` replaces rather than adds, as
       // the route does: presenting a second token leaves one link, not two.
-      const others = scrobbleLinks.filter(
+      const others = mock.scrobbleLinks.filter(
         (link) =>
           link.provider !== recipient || link.destination !== destination,
       );
-      scrobbleLinks =
+      mock.scrobbleLinks =
         method === "PUT"
           ? [...others, linkState(recipient, destination)]
           : others;
@@ -1045,26 +419,26 @@ async function mockAuthenticatedApi(page: Page) {
     }
     if (url.pathname.endsWith("/retry")) {
       const id = url.pathname.split("/")[5];
-      scrobbleWrites.push({
+      mock.scrobbleWrites.push({
         method: route.request().method(),
         path: url.pathname,
       });
-      uncertain = uncertain.filter((entry) => entry.id !== id);
+      mock.uncertain = mock.uncertain.filter((entry) => entry.id !== id);
       await route.fulfill({ json: { id: "entry-2" } });
       return;
     }
     if (url.pathname.startsWith("/api/v2/scrobble-queue/uncertain/")) {
       const id = url.pathname.split("/")[5];
-      scrobbleWrites.push({
+      mock.scrobbleWrites.push({
         method: route.request().method(),
         path: url.pathname,
       });
-      uncertain = uncertain.filter((entry) => entry.id !== id);
+      mock.uncertain = mock.uncertain.filter((entry) => entry.id !== id);
       await route.fulfill({ status: 204, body: "" });
       return;
     }
     if (url.pathname === "/api/v2/scrobble-queue/uncertain") {
-      await route.fulfill({ json: uncertain });
+      await route.fulfill({ json: mock.uncertain });
       return;
     }
     if (url.pathname === "/api/v2/history") {
@@ -1073,48 +447,48 @@ async function mockAuthenticatedApi(page: Page) {
     }
     if (url.pathname === "/api/v2/libraries/library-1/uploads") {
       const { offers } = route.request().postDataJSON() as { offers: Offer[] };
-      uploadOffers.push(...offers);
+      mock.uploadOffers.push(...offers);
       await route.fulfill({
         json: {
           verdicts: offers.map((offer) => ({
             full_hash: offer.full_hash,
             decision: "accepted",
-            session: uploadSession,
+            session: mock.uploadSession,
           })),
         },
       });
       return;
     }
     if (url.pathname === "/api/v2/uploads/upload-1") {
-      await route.fulfill({ json: uploadSession });
+      await route.fulfill({ json: mock.uploadSession });
       return;
     }
     if (url.pathname.startsWith("/api/v2/uploads/upload-1/chunks/")) {
       const index = Number(url.pathname.split("/").pop());
-      if (index !== uploadSession.next_chunk) {
+      if (index !== mock.uploadSession.next_chunk) {
         await route.fulfill({ status: 409, json: { code: "conflict" } });
         return;
       }
       const body = route.request().postDataBuffer() ?? Buffer.alloc(0);
-      uploadChunks.push({ index, bytes: [...body] });
-      uploadSession = {
-        ...uploadSession,
+      mock.uploadChunks.push({ index, bytes: [...body] });
+      mock.uploadSession = {
+        ...mock.uploadSession,
         next_chunk: index + 1,
-        received_bytes: uploadSession.received_bytes + body.length,
+        received_bytes: mock.uploadSession.received_bytes + body.length,
       };
-      if (index === loseAcknowledgementOf) {
-        loseAcknowledgementOf = null;
+      if (index === mock.loseAcknowledgementOf) {
+        mock.loseAcknowledgementOf = null;
         await route.fulfill({ status: 409, json: { code: "conflict" } });
         return;
       }
-      await route.fulfill({ json: uploadSession });
+      await route.fulfill({ json: mock.uploadSession });
       return;
     }
     if (url.pathname === "/api/v2/uploads/upload-1/commit") {
-      uploadCommits.push("upload-1");
+      mock.uploadCommits.push("upload-1");
       await route.fulfill({
         status: 201,
-        json: { track_id: "song-uploaded", full_hash: uploadOffers[0]?.full_hash },
+        json: { track_id: "song-uploaded", full_hash: mock.uploadOffers[0]?.full_hash },
       });
       return;
     }
@@ -1126,11 +500,11 @@ async function mockAuthenticatedApi(page: Page) {
       // with a track, which is not a list of lyrics — no test visited that page
       // before the canvas put a loop on it. Empty unless a test says otherwise.
       const trackId = url.pathname.split("/")[4] as string;
-      await lyricsGate;
+      await mock.lyricsGate;
       await route.fulfill({
         json: {
           trackId,
-          structuredLyrics: lyricSheets.get(trackId) ?? [],
+          structuredLyrics: mock.lyricSheets.get(trackId) ?? [],
         },
       });
       return;
@@ -1146,7 +520,7 @@ async function mockAuthenticatedApi(page: Page) {
       if (parts[5] === "canvas-ticket") {
         // What the server does: minting checks the link, so a track without
         // a canvas answers 404 to the ticket itself.
-        if (canvases.has(trackId)) {
+        if (mock.canvases.has(trackId)) {
           await route.fulfill({
             json: {
               url: `/api/v2/canvas-stream/ticket-${trackId}`,
@@ -1161,14 +535,14 @@ async function mockAuthenticatedApi(page: Page) {
       if (method === "PUT") {
         const body = route.request().postDataBuffer() ?? Buffer.alloc(0);
         const bytes = [...body];
-        canvasWrites.push({ method, track: trackId, bytes });
-        if (refuseCanvasWith !== null) {
-          const status = refuseCanvasWith;
-          refuseCanvasWith = null;
+        mock.canvasWrites.push({ method, track: trackId, bytes });
+        if (mock.refuseCanvasWith !== null) {
+          const status = mock.refuseCanvasWith;
+          mock.refuseCanvasWith = null;
           await route.fulfill({ status, json: { error: "refused" } });
           return;
         }
-        canvases.set(trackId, bytes);
+        mock.canvases.set(trackId, bytes);
         await route.fulfill({
           json: {
             url: "/api/v2/canvas/loop",
@@ -1180,8 +554,8 @@ async function mockAuthenticatedApi(page: Page) {
         return;
       }
       if (method === "DELETE") {
-        canvasWrites.push({ method, track: trackId });
-        if (!canvases.delete(trackId)) {
+        mock.canvasWrites.push({ method, track: trackId });
+        if (!mock.canvases.delete(trackId)) {
           await route.fulfill({ status: 404, json: { error: "not found" } });
           return;
         }
@@ -1190,7 +564,7 @@ async function mockAuthenticatedApi(page: Page) {
       }
     }
     if (url.pathname.startsWith("/api/v2/canvas-stream/")) {
-      await canvasStreamGate;
+      await mock.canvasStreamGate;
       // The element that asked may be gone by the time the gate opens, and a
       // request it abandoned can no longer be answered.
       await route
@@ -1203,20 +577,20 @@ async function mockAuthenticatedApi(page: Page) {
       return;
     }
     if (url.pathname === "/api/v2/tracks/song-9/overrides") {
-      await route.fulfill({ json: correctable.tracked });
+      await route.fulfill({ json: mock.correctable.tracked });
       return;
     }
     if (url.pathname === "/api/v2/tracks/song-9") {
       if (route.request().method() === "PATCH") {
         const body = route.request().postDataJSON() as Record<string, unknown>;
-        corrections.push(body);
+        mock.corrections.push(body);
         // What the server does with it: a key present replaces its correction,
         // null removes it, and a list that is removed goes back to the file.
-        Object.assign(correctable.tracked.overrides, body);
-        if (typeof body.title === "string") correctable.song.title = body.title;
-        if (body.artists === null) correctable.song.artists = fileArtists;
+        Object.assign(mock.correctable.tracked.overrides, body);
+        if (typeof body.title === "string") mock.correctable.song.title = body.title;
+        if (body.artists === null) mock.correctable.song.artists = fileArtists;
       }
-      await route.fulfill({ json: correctable.song });
+      await route.fulfill({ json: mock.correctable.song });
       return;
     }
     if (url.pathname.startsWith("/api/v2/tracks/")) {
@@ -1227,24 +601,24 @@ async function mockAuthenticatedApi(page: Page) {
     // RFC-024: the statistics and the mixes, as the server shapes them.
     if (url.pathname === "/api/v2/stats") {
       const period = url.searchParams.get("period") ?? "30d";
-      statsAsks.push(period);
+      mock.statsAsks.push(period);
       await route.fulfill({ json: statsFor(period) });
       return;
     }
     if (url.pathname === "/api/v2/mixes") {
-      await route.fulfill({ json: mixes });
+      await route.fulfill({ json: mock.mixes });
       return;
     }
     if (url.pathname.startsWith("/api/v2/mixes/")) {
       const id = decodeURIComponent(
         url.pathname.slice("/api/v2/mixes/".length),
       );
-      mixAsks.push(id);
-      if (mixFails) {
+      mock.mixAsks.push(id);
+      if (mock.mixFails) {
         await route.fulfill({ status: 500, json: { error: "internal" } });
         return;
       }
-      const found = mixes.find((mix) => mix.id === id);
+      const found = mock.mixes.find((mix) => mix.id === id);
       if (!found) {
         await route.fulfill({ status: 404, json: { error: "not found" } });
         return;
@@ -1293,7 +667,7 @@ async function mockAuthenticatedApi(page: Page) {
       return;
     }
     if (url.pathname === "/api/v2/playlists/import") {
-      importAsks.push({
+      mock.importAsks.push({
         dryRun: url.searchParams.get("dry_run") === "true",
         name: url.searchParams.get("name"),
       });
@@ -1311,7 +685,7 @@ async function mockAuthenticatedApi(page: Page) {
       return;
     }
     if (url.pathname.endsWith("/export")) {
-      exportAsks.push(url.pathname);
+      mock.exportAsks.push(url.pathname);
       await route.fulfill({
         status: 200,
         headers: {
@@ -1336,8 +710,8 @@ async function mockAuthenticatedApi(page: Page) {
       return;
     }
     if (url.pathname === "/api/v2/artists/artist-1/top-songs") {
-      topSongAsks.push(url.searchParams.get("limit"));
-      await route.fulfill({ json: artistPlayed });
+      mock.topSongAsks.push(url.searchParams.get("limit"));
+      await route.fulfill({ json: mock.artistPlayed });
       return;
     }
     if (url.pathname === "/api/v2/artists/artist-1/albums") {
@@ -1345,16 +719,16 @@ async function mockAuthenticatedApi(page: Page) {
       return;
     }
     if (url.pathname === "/api/v2/artists/artist-1") {
-      artistAsks += 1;
-      if (artistFailsAfterFirst && artistAsks > 1) {
+      mock.artistAsks += 1;
+      if (mock.artistFailsAfterFirst && mock.artistAsks > 1) {
         await route.fulfill({ status: 500, json: { error: "internal" } });
         return;
       }
       await route.fulfill({
         json: {
           ...artistDetail,
-          ...artistExtra,
-          enrichment: enrichmentOf(artistAsks),
+          ...mock.artistExtra,
+          enrichment: mock.enrichmentOf(mock.artistAsks),
         },
       });
       return;
@@ -1378,28 +752,32 @@ async function mockAuthenticatedApi(page: Page) {
   });
 }
 
-test.beforeEach(async ({ page }) => {
-  libraries = [library("library-1", "Ma musique")];
-  missingTracks = [];
-  purgedTracks = [];
-  purgeAsks = [];
-  restoreAsks = [];
-  membersFail = false;
-  tokensFail = false;
-  ownClients = freshClients();
-  bookmarks = [];
-  importAsks = [];
-  exportAsks = [];
-  stations = [];
-  radioWrites = [];
-  stationImages = [];
-  radioGate = Promise.resolve();
-  artistPlayed = [song(2, "Cocoon", 0, false), song(1, "Hidden Place", 5, true)];
-  topSongAsks = [];
-  artistAsks = 0;
-  artistExtra = {};
-  enrichmentOf = () => undefined;
-  artistFailsAfterFirst = false;
+/**
+ * Before every test: the mock's state back to its defaults, and `/api/v2`
+ * mocked over it. Each spec installs it with `test.beforeEach`.
+ */
+export const resetAndMockApi = async ({ page }: { page: Page }) => {
+  mock.libraries = [library("library-1", "Ma musique")];
+  mock.missingTracks = [];
+  mock.purgedTracks = [];
+  mock.purgeAsks = [];
+  mock.restoreAsks = [];
+  mock.membersFail = false;
+  mock.tokensFail = false;
+  mock.ownClients = freshClients();
+  mock.bookmarks = [];
+  mock.importAsks = [];
+  mock.exportAsks = [];
+  mock.stations = [];
+  mock.radioWrites = [];
+  mock.stationImages = [];
+  mock.radioGate = Promise.resolve();
+  mock.artistPlayed = [song(2, "Cocoon", 0, false), song(1, "Hidden Place", 5, true)];
+  mock.topSongAsks = [];
+  mock.artistAsks = 0;
+  mock.artistExtra = {};
+  mock.enrichmentOf = () => undefined;
+  mock.artistFailsAfterFirst = false;
   // **Reset here, and they were not.** These four reached the mock without
   // reaching this block, because a `replace` whose needle had already been
   // reformatted did nothing and said nothing. So `subsonicWrites`
@@ -1408,8204 +786,37 @@ test.beforeEach(async ({ page }) => {
   // land in different workers. A gate is worse: a test that fails before
   // releasing one leaves it pending, and every later test in that worker waits
   // on the route for ever.
-  subsonicWrites = [];
-  subsonicGate = Promise.resolve();
-  clientWrites = [];
-  clientGate = Promise.resolve();
+  mock.subsonicWrites = [];
+  mock.subsonicGate = Promise.resolve();
+  mock.clientWrites = [];
+  mock.clientGate = Promise.resolve();
   // An account the operator has granted one, because that is the state the
   // panel is about: it rotates and switches off, and never creates.
-  ownSubsonicCredential = { created_at: 1_700_000_000_000, updated_at: 1_700_000_000_000 };
-  scanFails = false;
-  scanDrops = false;
-  corrections = [];
-  correctable = correctableTrack();
-  uploadOffers = [];
-  uploadChunks = [];
-  uploadCommits = [];
-  uploadSession = freshUploadSession();
-  loseAcknowledgementOf = null;
-  lyricSheets = new Map();
-  lyricsGate = Promise.resolve();
-  mixes = [];
-  mixAsks = [];
-  mixFails = false;
-  statsAsks = [];
-  canvases = new Map();
-  canvasWrites = [];
-  refuseCanvasWith = null;
-  canvasStreamGate = Promise.resolve();
-  slowAlbum = Promise.resolve();
-  destinations = freshDestinations();
-  scrobbleLinks = [];
-  uncertain = freshUncertain();
-  scrobbleWrites = [];
-  lastFmAuthorizeUrl = "https://www.last.fm/api/auth/?api_key=k&cb=back";
+  mock.ownSubsonicCredential = { created_at: 1_700_000_000_000, updated_at: 1_700_000_000_000 };
+  mock.scanFails = false;
+  mock.scanDrops = false;
+  mock.corrections = [];
+  mock.correctable = correctableTrack();
+  mock.uploadOffers = [];
+  mock.uploadChunks = [];
+  mock.uploadCommits = [];
+  mock.uploadSession = freshUploadSession();
+  mock.loseAcknowledgementOf = null;
+  mock.lyricSheets = new Map();
+  mock.lyricsGate = Promise.resolve();
+  mock.mixes = [];
+  mock.mixAsks = [];
+  mock.mixFails = false;
+  mock.statsAsks = [];
+  mock.canvases = new Map();
+  mock.canvasWrites = [];
+  mock.refuseCanvasWith = null;
+  mock.canvasStreamGate = Promise.resolve();
+  mock.slowAlbum = Promise.resolve();
+  mock.destinations = freshDestinations();
+  mock.scrobbleLinks = [];
+  mock.uncertain = freshUncertain();
+  mock.scrobbleWrites = [];
+  mock.lastFmAuthorizeUrl = "https://www.last.fm/api/auth/?api_key=k&cb=back";
   await mockAuthenticatedApi(page);
-});
-
-test("renders the studio shell and persists appearance preferences", async ({
-  page,
-}, testInfo) => {
-  await page.goto("/");
-
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await expect(page.getByText("Post", { exact: true })).toBeVisible();
-  await expect(page.getByText("Vespertine", { exact: true })).toBeVisible();
-
-  // **The pickers live on the Settings page now**, not in the sidebar footer
-  // and not in the mobile header. They are settings and not destinations, and
-  // they sat under thirteen navigation entries; there is no copy left behind,
-  // because two ways to ask one question is the thing that move was about.
-  // Settings opens on its Account section, which holds them.
-  await page.goto("/settings");
-  await expect(
-    page.getByRole("heading", { name: "Account", exact: true }),
-  ).toBeVisible();
-  const preferences = page.locator(".settings-panel").first();
-  const theme = preferences.getByRole("radiogroup", { name: "Theme" });
-  await theme.getByRole("radio", { name: "Midnight light" }).check();
-  await expect
-    .poll(() => page.evaluate(() => localStorage.getItem("waveflow.theme")))
-    .toBe("midnight-light");
-
-  const language = preferences.getByLabel("Language");
-  await language.selectOption("fr");
-  await expect(page.getByRole("link", { name: "Recherche" }).first()).toBeVisible();
-  await expect(page.locator("html")).toHaveAttribute("lang", "fr");
-  // And nowhere else: a picker still reachable from the corridor would mean
-  // the move had added a place rather than chosen one.
-  await expect(page.locator(".sidebar").getByLabel("Thème")).toHaveCount(0);
-  await expect(page.locator(".mobile-header").getByLabel("Thème")).toHaveCount(
-    0,
-  );
-
-  if (testInfo.project.name === "mobile") {
-    await expect(page.locator(".mobile-navigation")).toBeVisible();
-    const overflow = await page.evaluate(
-      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
-    );
-    expect(overflow).toBeLessThanOrEqual(1);
-  } else {
-    await expect(page.locator(".sidebar")).toBeVisible();
-  }
-});
-
-/**
- * The heard part of the line ends under the thumb, wherever the track is.
- *
- * The wave is placed in the progress grid's middle column. Named by its start
- * alone, an absolutely placed item runs to the container's edge, so the wave
- * was measured against the gap and the duration's column as well and outran
- * the thumb further the later the track. Driven through `--played`, the value
- * the player writes, so every position is reached without playing anything.
- */
-test("ends the played wave under the progress thumb", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "the wave is drawn beside the rail");
-  await page.goto("/");
-  const progress = page.locator(".player-progress");
-  await expect(progress).toBeVisible();
-  const measured = await progress.evaluate((node: HTMLElement) => {
-    const wave = node.querySelector(".progress-wave") as HTMLElement;
-    const input = node.querySelector("input") as HTMLInputElement;
-    // The thumb's size as the stylesheet declares it, in rem — and the size it
-    // has always had where no token names it, so a stylesheet without one is
-    // judged on where its wave ends rather than on a missing variable.
-    const rem =
-      Number.parseFloat(
-        getComputedStyle(node).getPropertyValue("--fe-thumb"),
-      ) || 0.625;
-    const thumb =
-      rem *
-      Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
-    // The range's own bounds. A mocked track may carry no duration, which
-    // leaves `max` at zero and every value clamped to it, so the range is
-    // given a span to move along when it has none.
-    const min = Number(input.min) || 0;
-    if (!(Number(input.max) > min)) input.max = String(min + 100);
-    const max = Number(input.max);
-    return [0, 0.25, 0.5, 0.81, 1].map((played) => {
-      // The range moved, and the share the player would write beside it.
-      input.value = String(min + played * (max - min));
-      node.style.setProperty("--played", String(played));
-      // Where the native thumb sits, read back from the range's value rather
-      // than from `--played`: the wave has to follow the thumb, not itself.
-      const fraction = (Number(input.value) - min) / (max - min);
-      const w = wave.getBoundingClientRect();
-      const i = input.getBoundingClientRect();
-      return {
-        played,
-        waveEnd: w.right,
-        thumbCentre: i.left + thumb / 2 + fraction * (i.width - thumb),
-        trackEnd: i.right,
-      };
-    });
-  });
-  for (const { played, waveEnd, thumbCentre, trackEnd } of measured) {
-    expect(Math.abs(waveEnd - thumbCentre), `at ${played}`).toBeLessThanOrEqual(1);
-    expect(waveEnd, `at ${played}`).toBeLessThanOrEqual(trackEnd);
-  }
-});
-
-test("keeps navigation and player controls within their own space", async ({
-  page,
-}, testInfo) => {
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await expect(page.locator(".player")).toBeVisible();
-
-  if (testInfo.project.name === "mobile") {
-    await expect(page.locator(".sidebar")).toBeHidden();
-    const bounds = await page.evaluate(() => {
-      const track = document.querySelector(".player-track")?.getBoundingClientRect();
-      const progress = document.querySelector(".player-progress")?.getBoundingClientRect();
-      const player = document.querySelector(".player")?.getBoundingClientRect();
-      const navigation = document.querySelector(".mobile-navigation")?.getBoundingClientRect();
-      return {
-        trackBottom: track?.bottom ?? 0,
-        progressTop: progress?.top ?? 0,
-        playerBottom: player?.bottom ?? 0,
-        navigationTop: navigation?.top ?? 0,
-        overflow: document.documentElement.scrollWidth - window.innerWidth,
-      };
-    });
-    expect(bounds.progressTop).toBeGreaterThanOrEqual(bounds.trackBottom);
-    expect(bounds.navigationTop).toBeGreaterThanOrEqual(bounds.playerBottom);
-    expect(bounds.overflow).toBeLessThanOrEqual(1);
-    await page.setViewportSize({ width: 320, height: 700 });
-    const narrow = await page.evaluate(() => ({
-      trackBottom: document.querySelector(".player-track")?.getBoundingClientRect().bottom ?? 0,
-      progressTop: document.querySelector(".player-progress")?.getBoundingClientRect().top ?? 0,
-      playerBottom: document.querySelector(".player")?.getBoundingClientRect().bottom ?? 0,
-      navigationTop: document.querySelector(".mobile-navigation")?.getBoundingClientRect().top ?? 0,
-      overflow: document.documentElement.scrollWidth - window.innerWidth,
-    }));
-    expect(narrow.progressTop).toBeGreaterThanOrEqual(narrow.trackBottom);
-    expect(narrow.navigationTop).toBeGreaterThanOrEqual(narrow.playerBottom);
-    expect(narrow.overflow).toBeLessThanOrEqual(1);
-  } else {
-    const bounds = await page.evaluate(() => {
-      const sidebar = document.querySelector(".sidebar")?.getBoundingClientRect();
-      const footer = document.querySelector(".sidebar-footer")?.getBoundingClientRect();
-      const navigation = document.querySelector(".primary-navigation")?.getBoundingClientRect();
-      return {
-        sidebarBottom: sidebar?.bottom ?? 0,
-        footerBottom: footer?.bottom ?? 0,
-        navigationBottom: navigation?.bottom ?? 0,
-      };
-    });
-    expect(bounds.footerBottom).toBeLessThanOrEqual(bounds.sidebarBottom);
-    expect(bounds.navigationBottom).toBeLessThanOrEqual(bounds.footerBottom);
-    await expect(page.locator(".sidebar-footer").getByRole("button", { name: "Sign out" })).toBeVisible();
-    await page.setViewportSize({ width: 821, height: 650 });
-    const compact = await page.evaluate(() => ({
-      sidebarBottom: document.querySelector(".sidebar")?.getBoundingClientRect().bottom ?? 0,
-      footerBottom: document.querySelector(".sidebar-footer")?.getBoundingClientRect().bottom ?? 0,
-      overflow: document.documentElement.scrollWidth - window.innerWidth,
-    }));
-    expect(compact.footerBottom).toBeLessThanOrEqual(compact.sidebarBottom);
-    expect(compact.overflow).toBeLessThanOrEqual(1);
-  }
-});
-
-test("shows one current navigation item and separates administration panels", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "sidebar layout is desktop-only");
-  // A section of Settings: the rail has no entry of its own for it any more,
-  // and the one entry that leads there is the current one — in the rail's
-  // foot, so the whole sidebar is counted and not only the rail.
-  await page.goto("/settings/scrobbling");
-  const current = page.locator(".sidebar a[data-status='active']");
-  await expect(current).toHaveCount(1);
-  await expect(current).toHaveText("Settings");
-
-  const genres = page.locator(".primary-navigation").getByRole("link", {
-    name: "Genres",
-  });
-  await genres.hover();
-  const activeBackground = await current.evaluate((node) =>
-    getComputedStyle(node).backgroundColor,
-  );
-  const hoverBackground = await genres.evaluate((node) =>
-    getComputedStyle(node).backgroundColor,
-  );
-  expect(hoverBackground).not.toBe(activeBackground);
-
-  await page.goto("/admin");
-  await expect(page.locator(".admin-page > .stack .user-row")).toBeVisible();
-  await expect(page.locator(".now-playing-panel")).toBeVisible();
-  const gap = await page.evaluate(() => {
-    const accounts = document.querySelector(".admin-page > .stack");
-    const playing = document.querySelector(".now-playing-panel");
-    return (
-      (playing?.getBoundingClientRect().top ?? 0) -
-      (accounts?.getBoundingClientRect().bottom ?? 0)
-    );
-  });
-  expect(gap).toBeGreaterThanOrEqual(24);
-});
-
-/**
- * The sections of Settings, in the order the menu offers them, with the
- * heading each one opens on. Shared by the tests below, which walk the whole
- * menu: a section added to the hub and not here fails them by count.
- */
-const SETTINGS_SECTIONS = [
-  { link: "Account", path: "/settings", heading: "Account" },
-  { link: "Playback", path: "/settings/playback", heading: "Playback" },
-  {
-    link: "Scrobbling",
-    path: "/settings/scrobbling",
-    heading: "External scrobbling",
-  },
-  { link: "Shares", path: "/settings/shares", heading: "Shares" },
-  { link: "Upload", path: "/settings/upload", heading: "Upload to Ma musique" },
-  { link: "Admin", path: "/settings/admin", heading: "Administration" },
-];
-
-/**
- * The rail carried an "Account" group of five entries — Shares, Settings,
- * Scrobbling, Upload and Admin. One Settings entry replaces it, in the rail's
- * foot beside the account, and the five are the Settings page's sections.
- *
- * Asked of the longest rail any account sees: an administrator owning a
- * library that takes files, for whom every one of the five used to show.
- */
-test("gathers the account's places behind one Settings entry", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "the rail is desktop-only");
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  const sidebar = page.locator(".sidebar");
-  // Drawn in full before anything is counted: the Maintenance entry is gated
-  // on what the account may do in the library, and a count taken before it
-  // arrives proves nothing.
-  await expect(sidebar.locator('a[href="/maintenance"]')).toHaveCount(1);
-
-  await expect(sidebar.locator('.nav-group[data-group="account"]')).toHaveCount(0);
-  await expect(sidebar.locator(".nav-label")).toHaveText(["Library", "Listening"]);
-  const settings = sidebar.getByRole("link", { name: "Settings" });
-  await expect(settings).toHaveCount(1);
-  await expect(page.locator(".sidebar-footer").getByRole("link")).toHaveText([
-    "Settings",
-  ]);
-  for (const href of [
-    "/shares",
-    "/upload",
-    "/admin",
-    "/settings/scrobbling",
-    "/settings/shares",
-    "/settings/upload",
-    "/settings/admin",
-  ]) {
-    await expect(sidebar.locator(`a[href="${href}"]`), href).toHaveCount(0);
-  }
-
-  await settings.click();
-  await expect(page).toHaveURL(/\/settings$/);
-  await expect(
-    page.getByRole("heading", { name: "Account", exact: true }),
-  ).toBeVisible();
-});
-
-/**
- * The rail holds every destination without scrolling at a laptop's 1366×768
- * and a desktop's 1440×900, and the Settings entry in its foot is in view and
- * clear of the player bar.
- *
- * Asked of the longest rail any account sees — an administrator owning a
- * library that takes files — and measured after the fonts have loaded, since
- * a face arriving late changes every row's height. Three things got it
- * there: the Account group became one Settings entry, three maintenance
- * pages became one Maintenance entry, and a short window draws a denser rail
- * (fluid.css). Before all three the rail was 1112 px tall in 456 px at
- * 1366×768, and in 588 px at 1440×900.
- */
-test("fits the rail without scrolling at common desktop heights", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "the rail is desktop-only");
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  for (const [width, height] of [
-    [1366, 768],
-    [1440, 900],
-  ]) {
-    await page.setViewportSize({ width, height });
-    await page.goto("/");
-    await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-    const rail = page.locator(".primary-navigation");
-    await expect(rail.locator('a[href="/maintenance"]')).toHaveCount(1);
-    await page.evaluate(() => document.fonts.ready);
-    const measured = await rail.evaluate((node) => ({
-      scrollHeight: node.scrollHeight,
-      clientHeight: node.clientHeight,
-    }));
-    testInfo.annotations.push({
-      type: "rail",
-      description: `${width}x${height}: scrollHeight ${measured.scrollHeight}, clientHeight ${measured.clientHeight}`,
-    });
-    expect(
-      measured.scrollHeight,
-      `the rail scrolls at ${width}x${height}`,
-    ).toBeLessThanOrEqual(measured.clientHeight);
-    // Dense, not cramped: every row of the sidebar stays a target of at
-    // least 24 px (WCAG 2.5.8).
-    const smallest = await page
-      .locator(".sidebar")
-      .evaluate((node) =>
-        Math.min(
-          ...[...node.querySelectorAll("a, button")].map(
-            (target) => target.getBoundingClientRect().height,
-          ),
-        ),
-      );
-    expect(smallest, `targets at ${width}x${height}`).toBeGreaterThanOrEqual(24);
-    const settings = page.locator(".sidebar").getByRole("link", { name: "Settings" });
-    await expect(settings, `at ${width}x${height}`).toBeInViewport({ ratio: 1 });
-    // And not under the player bar, which runs across the rail's foot.
-    const overlap = await settings.evaluate((link) => {
-      const player = document.querySelector(".player")?.getBoundingClientRect();
-      return link.getBoundingClientRect().bottom - (player?.top ?? 0);
-    });
-    expect(overlap, `at ${width}x${height}`).toBeLessThanOrEqual(0);
-  }
-});
-
-/**
- * Every section opens from the hub's own menu, on a desktop from the rail's
- * Settings entry and on a phone from the More sheet's — the phone has no
- * other way in, so this is also the proof that nothing became unreachable
- * there when the sheet lost four entries.
- *
- * Each section is its own address, marked as the current one in the menu,
- * and Back walks the sections in the order they were opened.
- */
-test("opens every section of Settings from its menu", async ({
-  page,
-}, testInfo) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  if (testInfo.project.name === "mobile") {
-    await page
-      .locator(".mobile-navigation")
-      .getByRole("button", { name: "More" })
-      .click();
-    await page.getByRole("dialog").getByRole("link", { name: "Settings" }).click();
-  } else {
-    await page.locator(".sidebar").getByRole("link", { name: "Settings" }).click();
-  }
-
-  const menu = page.getByRole("navigation", { name: "Settings sections" });
-  await expect(menu.getByRole("link")).toHaveText(
-    SETTINGS_SECTIONS.map((section) => section.link),
-  );
-  // The order is reversed so that every click moves the open section, Account
-  // included, and so that Back has a different section to return to each time.
-  const visited: typeof SETTINGS_SECTIONS = [];
-  for (const section of [...SETTINGS_SECTIONS.slice(1), SETTINGS_SECTIONS[0]]) {
-    await menu.getByRole("link", { name: section.link, exact: true }).click();
-    await expect(page).toHaveURL((url) => url.pathname === section.path);
-    await expect(
-      page.getByRole("heading", { name: section.heading, exact: true }),
-    ).toBeVisible();
-    await expect(menu.locator('a[aria-current="page"]')).toHaveText([
-      section.link,
-    ]);
-    visited.push(section);
-  }
-  // The menu is new, so it is audited in the dark theme here and in the light
-  // one below, open on a short section and on a long one.
-  await expectNoWcagViolations(page);
-
-  if (testInfo.project.name === "mobile") {
-    // A list two to a row, not a strip running off the side of the phone.
-    const overflow = await page.evaluate(
-      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
-    );
-    expect(overflow).toBeLessThanOrEqual(1);
-    const columns = await menu.evaluate(
-      (node) => getComputedStyle(node).gridTemplateColumns.split(" ").length,
-    );
-    expect(columns).toBe(2);
-  }
-
-  // Back returns to the section opened before, as a page would.
-  visited.pop();
-  const previous = visited.pop();
-  await page.goBack();
-  await expect(page).toHaveURL((url) => url.pathname === previous?.path);
-  await expect(
-    page.getByRole("heading", { name: previous?.heading, exact: true }),
-  ).toBeVisible();
-});
-
-/**
- * Every address the moved pages had still arrives at its section. The three
- * old ones are redirects, and the redirect replaces its own history entry:
- * Back from the section leaves for where the visitor was before, rather than
- * landing on an address that would only send them forward again.
- */
-test("lands every old address on its section of Settings", async ({ page }) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  for (const [address, path, heading] of [
-    ["/settings", "/settings", "Account"],
-    ["/settings/scrobbling", "/settings/scrobbling", "External scrobbling"],
-    ["/shares", "/settings/shares", "Shares"],
-    ["/upload", "/settings/upload", "Upload to Ma musique"],
-    ["/admin", "/settings/admin", "Administration"],
-  ]) {
-    await page.goto(address);
-    await expect(page).toHaveURL((url) => url.pathname === path);
-    await expect(
-      page.getByRole("heading", { name: heading, exact: true }),
-    ).toBeVisible();
-  }
-
-  // The folder an upload was started from survives the move.
-  await page.goto("/upload?folder=folder-1");
-  await expect(page).toHaveURL(
-    (url) =>
-      url.pathname === "/settings/upload" &&
-      url.searchParams.get("folder") === "folder-1",
-  );
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await page.goto("/shares");
-  await expect(page).toHaveURL((url) => url.pathname === "/settings/shares");
-  await page.goBack();
-  await expect(page).toHaveURL((url) => url.pathname === "/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-});
-
-/**
- * The gates the rail entries had moved with them onto the menu: someone who
- * is not an administrator sees no Admin section, and someone who may not
- * upload sees no Upload one. Neither address opens for them either.
- */
-test("hides Admin and Upload from the Settings menu of an account without them", async ({
-  page,
-}) => {
-  await page.route("**/api/v2/web/auth/refresh", (route) =>
-    route.fulfill({
-      json: { ...session, user: { ...session.user, role: "user" } },
-    }),
-  );
-  libraries = [
-    { ...library("library-1", "Ma musique"), accepts_uploads: true, role: "listener" },
-  ];
-  await page.goto("/settings");
-  await expect(
-    page.getByRole("heading", { name: "Account", exact: true }),
-  ).toBeVisible();
-  const menu = page.getByRole("navigation", { name: "Settings sections" });
-  await expect(menu.getByRole("link")).toHaveText([
-    "Account",
-    "Playback",
-    "Scrobbling",
-    "Shares",
-  ]);
-
-  for (const address of ["/admin", "/settings/admin"]) {
-    await page.goto(address);
-    await expect(page).toHaveURL((url) => url.pathname === "/");
-    await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  }
-});
-
-// One test per section rather than one walking all six: each audit takes a
-// few seconds, and six in a row overran the timeout under a full parallel run.
-for (const section of SETTINGS_SECTIONS) {
-  test(`keeps the Settings menu readable in the light on ${section.link}`, async ({
-    page,
-  }) => {
-    libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-    await chooseLightTheme(page);
-    await page.goto(section.path);
-    await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
-    await expect(
-      page.getByRole("heading", { name: section.heading, exact: true }),
-    ).toBeVisible();
-    await expectNoWcagViolations(page);
-  });
-}
-
-/**
- * The sections of Maintenance, in the order its menu offers them, with the
- * heading each opens on. The pages draw their heading whatever their lists
- * answer, so these tests need none of the lists served.
- */
-const MAINTENANCE_SECTIONS = [
-  { link: "Needs attention", path: "/maintenance/attention", heading: "Needs attention" },
-  { link: "Missing files", path: "/maintenance/missing", heading: "Missing files" },
-  { link: "Quality", path: "/maintenance/quality", heading: "Quality" },
-];
-
-/**
- * "Needs attention", "Missing files" and "Quality" are one rail entry,
- * Maintenance, and each is a section of it: opened from the rail on a
- * desktop and from the More sheet on a phone, each at its own address,
- * marked current in the menu, with Back walking between them.
- */
-test("opens every section of Maintenance from its menu", async ({
-  page,
-}, testInfo) => {
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  for (const name of ["Needs attention", "Missing files", "Quality"]) {
-    await expect(
-      page.locator(".sidebar, .mobile-navigation").getByRole("link", { name }),
-      name,
-    ).toHaveCount(0);
-  }
-  if (testInfo.project.name === "mobile") {
-    await page
-      .locator(".mobile-navigation")
-      .getByRole("button", { name: "More" })
-      .click();
-    await page
-      .getByRole("dialog")
-      .getByRole("link", { name: "Maintenance" })
-      .click();
-  } else {
-    await page
-      .locator(".sidebar")
-      .getByRole("link", { name: "Maintenance" })
-      .click();
-  }
-
-  // The entry opens the first section this owner may use.
-  await expect(page).toHaveURL(
-    (url) => url.pathname === "/maintenance/attention",
-  );
-  const menu = page.getByRole("navigation", { name: "Maintenance sections" });
-  await expect(menu.getByRole("link")).toHaveText(
-    MAINTENANCE_SECTIONS.map((section) => section.link),
-  );
-  if (testInfo.project.name === "desktop") {
-    // The rail's entry stays current in every section.
-    await expect(
-      page.locator(".sidebar a[data-status='active']"),
-    ).toHaveText(["Maintenance"]);
-  }
-
-  for (const section of [...MAINTENANCE_SECTIONS.slice(1), MAINTENANCE_SECTIONS[0]]) {
-    await menu.getByRole("link", { name: section.link, exact: true }).click();
-    await expect(page).toHaveURL((url) => url.pathname === section.path);
-    await expect(
-      page.getByRole("heading", { name: section.heading, exact: true }),
-    ).toBeVisible();
-    await expect(menu.locator('a[aria-current="page"]')).toHaveText([
-      section.link,
-    ]);
-  }
-  await expectNoWcagViolations(page);
-
-  // Back to the section opened before the last.
-  await page.goBack();
-  await expect(page).toHaveURL((url) => url.pathname === "/maintenance/quality");
-  await expect(
-    page.getByRole("heading", { name: "Quality", exact: true }),
-  ).toBeVisible();
-});
-
-/**
- * The three old addresses arrive at their sections, with the open list or the
- * verdict filter they carried, and the redirect replaces its own history
- * entry.
- */
-test("lands every old address on its section of Maintenance", async ({
-  page,
-}) => {
-  for (const [address, path, search, heading] of [
-    ["/attention?category=missing_year", "/maintenance/attention", "category=missing_year", "Needs attention"],
-    ["/missing", "/maintenance/missing", "", "Missing files"],
-    ["/quality?verdict=upsampled", "/maintenance/quality", "verdict=upsampled", "Quality"],
-  ]) {
-    await page.goto(address);
-    await expect(page).toHaveURL(
-      (url) => url.pathname === path && url.search === (search ? `?${search}` : ""),
-    );
-    await expect(
-      page.getByRole("heading", { name: heading, exact: true }),
-    ).toBeVisible();
-  }
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await page.goto("/quality");
-  await expect(page).toHaveURL((url) => url.pathname === "/maintenance/quality");
-  await page.goBack();
-  await expect(page).toHaveURL((url) => url.pathname === "/");
-});
-
-/**
- * Each section keeps the rule its rail entry had. A listener who is not an
- * administrator may only read the quality of the files, so that is the only
- * section their menu shows and the one the entry opens.
- */
-test("shows a listener only the Maintenance sections theirs to use", async ({
-  page,
-}) => {
-  await page.route("**/api/v2/web/auth/refresh", (route) =>
-    route.fulfill({
-      json: { ...session, user: { ...session.user, role: "user" } },
-    }),
-  );
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  await page.goto("/maintenance");
-  await expect(page).toHaveURL((url) => url.pathname === "/maintenance/quality");
-  await expect(
-    page.getByRole("heading", { name: "Quality", exact: true }),
-  ).toBeVisible();
-  await expect(
-    page
-      .getByRole("navigation", { name: "Maintenance sections" })
-      .getByRole("link"),
-  ).toHaveText(["Quality"]);
-});
-
-/**
- * An administrator who only listens in this library still purges what the
- * scans lost (RFC-021), and does not decide what needs attention (RFC-015).
- */
-test("shows an administrator listening in a library the missing files", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  await page.goto("/maintenance");
-  await expect(page).toHaveURL((url) => url.pathname === "/maintenance/missing");
-  await expect(
-    page
-      .getByRole("navigation", { name: "Maintenance sections" })
-      .getByRole("link"),
-  ).toHaveText(["Missing files", "Quality"]);
-});
-
-for (const section of MAINTENANCE_SECTIONS) {
-  test(`keeps the Maintenance menu readable in the light on ${section.link}`, async ({
-    page,
-  }) => {
-    await chooseLightTheme(page);
-    await page.goto(section.path);
-    await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
-    await expect(
-      page.getByRole("heading", { name: section.heading, exact: true }),
-    ).toBeVisible();
-    await expectNoWcagViolations(page);
-  });
-}
-
-test("puts the songs playback action beside the sort and names its scope", async ({
-  page,
-}) => {
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({
-      json: [track, { ...track, id: "song-2", title: "Second track" }],
-    }),
-  );
-  await page.goto("/songs");
-  const play = page.locator(".page-header").getByRole("button", {
-    name: "Play all 2 tracks",
-  });
-  await expect(play).toBeVisible();
-  await play.click();
-  await expect(page.locator(".player-track strong")).toHaveText("Army of Me");
-});
-
-/**
- * Every credited artist in a song list is a link to its own page.
- *
- * The column used to be the display string as plain text, so a playlist or a
- * mix offered no way to reach an artist. A track credited to two artists names
- * two pages; a track whose credits the server did not list still links through
- * its primary credit; an artist the catalogue does not know stays text.
- */
-test("links each credited artist in a song list to its page", async ({
-  page,
-}, testInfo) => {
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({
-      json: [
-        {
-          ...track,
-          id: "song-duo",
-          title: "Soleil Bleu",
-          artist: "Bleu Soleil, LUIZA",
-          artist_id: "artist-1",
-          artists: [
-            { id: "artist-1", name: "Bleu Soleil" },
-            { id: "artist-2", name: "LUIZA" },
-          ],
-        },
-        {
-          ...track,
-          id: "song-primary",
-          title: "Second track",
-          artist: "Björk",
-          artist_id: "artist-1",
-          artists: [],
-        },
-        {
-          ...track,
-          id: "song-unknown",
-          title: "Third track",
-          artist: "Nobody We Know",
-          artist_id: null,
-          artists: [],
-        },
-      ],
-    }),
-  );
-  await page.goto("/songs");
-  const rows = page.locator(".songs tbody tr");
-  await expect(rows).toHaveCount(3);
-
-  // Every layout: the track's menu names each credited artist, which is how a
-  // phone, whose song table hides the artist column, reaches one.
-  await rows.nth(0).locator("button.song-title").focus();
-  await page.keyboard.press("Shift+F10");
-  const menu = page.getByRole("menu", { name: "Actions for Soleil Bleu" });
-  await expect(menu.getByRole("menuitem", { name: /^Go to / })).toHaveText([
-    "Go to album",
-    "Go to Bleu Soleil",
-    "Go to LUIZA",
-  ]);
-  await menu.getByRole("menuitem", { name: "Go to LUIZA" }).click();
-  await expect(page).toHaveURL(/\/artists\/artist-2$/);
-  await page.goBack();
-  await expect(rows).toHaveCount(3);
-
-  // The column itself is drawn on a wide screen only.
-  if (testInfo.project.name !== "desktop") return;
-  const duo = rows.nth(0).locator(".song-artists");
-  await expect(duo.getByRole("link")).toHaveCount(2);
-  await expect(duo).toHaveText("Bleu Soleil, LUIZA");
-  await expect(duo.getByRole("link", { name: "LUIZA" })).toHaveAttribute(
-    "href",
-    "/artists/artist-2",
-  );
-
-  await expect(
-    rows.nth(1).locator(".song-artists").getByRole("link", { name: "Björk" }),
-  ).toHaveAttribute("href", "/artists/artist-1");
-  await expect(rows.nth(2).locator(".song-artists").getByRole("link")).toHaveCount(
-    0,
-  );
-  await expect(rows.nth(2).locator(".song-artists")).toHaveText("Nobody We Know");
-
-  await expectNoWcagViolations(page);
-
-  await duo.getByRole("link", { name: "Bleu Soleil" }).click();
-  await expect(page).toHaveURL(/\/artists\/artist-1$/);
-});
-
-/**
- * A track menu taller than the window stays on screen and scrolls itself.
- *
- * One "Go to" entry per credited artist means a compilation track can carry a
- * menu longer than a short window. It is capped at the window and scrolls on
- * its own; the wheel over it scrolls it rather than closing it, and the wheel
- * over the page still closes it.
- */
-test("keeps a long track menu on screen and lets it scroll", async ({
-  page,
-}) => {
-  await page.setViewportSize({ width: 900, height: 420 });
-  const many = Array.from({ length: 30 }, (_, index) => ({
-    id: `artist-${index + 1}`,
-    name: `Guest ${index + 1}`,
-  }));
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({
-      json: [
-        {
-          ...track,
-          id: "song-crowd",
-          title: "Crowded",
-          artist: many.map((artist) => artist.name).join(", "),
-          artist_id: "artist-1",
-          artists: many,
-        },
-      ],
-    }),
-  );
-  await page.goto("/songs");
-  await page.locator(".songs tbody tr button.song-title").first().focus();
-  await page.keyboard.press("Shift+F10");
-  const menu = page.getByRole("menu", { name: "Actions for Crowded" });
-  await expect(menu).toBeVisible();
-
-  const box = await menu.boundingBox();
-  expect(box).not.toBeNull();
-  expect((box?.y ?? 0) + (box?.height ?? 0)).toBeLessThanOrEqual(420);
-  expect(await menu.evaluate((node) => node.scrollHeight > node.clientHeight)).toBe(
-    true,
-  );
-
-  // The wheel over the menu scrolls it and leaves it open.
-  await menu.hover();
-  await page.mouse.wheel(0, 400);
-  await expect
-    .poll(() => menu.evaluate((node) => node.scrollTop))
-    .toBeGreaterThan(0);
-  await expect(menu).toBeVisible();
-  const last = menu.getByRole("menuitem", { name: "Go to Guest 30" });
-  await last.scrollIntoViewIfNeeded();
-  await expect(last).toBeInViewport();
-
-  // The wheel anywhere else still closes it.
-  await page.mouse.move(880, 400);
-  await page.mouse.wheel(0, 100);
-  await expect(menu).toHaveCount(0);
-});
-
-/**
- * The right click on a track, and the properties it opens (RFC-012 decision 4).
- *
- * Driven from the keyboard first, because a menu reachable only by a right
- * click is one the accessibility gate is right to fail: Shift+F10 on the
- * focused row, arrows to Properties, Enter. The panel shows where the file
- * sits in its library — the one field only `GET /tracks/{id}` sends — and a
- * corrected tag beside what the file said. Escape gives focus back to the row
- * the menu was opened from, through the menu that no longer exists.
- */
-test("opens a track's properties from its context menu", async ({ page }) => {
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({ json: [correctable.song] }),
-  );
-  await page.route("**/api/v2/tracks/song-9", (route) =>
-    route.fulfill({
-      json: {
-        ...correctable.song,
-        relative_path: "Björk/Post/09 Army Of Me.flac",
-        full_hash: "a".repeat(64),
-        created_at: Date.UTC(2026, 8, 15, 12, 0),
-        album_artist: "Björk",
-        comment: "Remastered\nBonus edition",
-        musicbrainz_id: null,
-        isrc: ["GBAAA9500009"],
-        bpm: 92,
-        replay_gain_track_gain: -6.5,
-        replay_gain_track_peak: 0.98,
-        replay_gain_album_gain: null,
-        replay_gain_album_peak: null,
-      },
-    }),
-  );
-  await page.goto("/songs");
-  const row = page.locator(".songs tbody tr").first();
-  const title = row.locator("button.song-title");
-  await title.focus();
-
-  await page.keyboard.press("Shift+F10");
-  const menu = page.getByRole("menu", { name: "Actions for Army Of Me" });
-  await expect(menu).toBeVisible();
-  await expect(menu.getByRole("menuitem")).toHaveText([
-    "Play",
-    "Add to queue",
-    "Download",
-    // RFC-022: this browser supports Cache Storage, so it offers the copy.
-    "Keep for offline",
-    // Where the track belongs, reachable from any list and on a phone.
-    "Go to album",
-    "Go to Skunk Anansie",
-    "Properties",
-    "Edit tags",
-    "Move to folder…",
-  ]);
-  await expect(menu.getByRole("menuitem", { name: "Play" })).toBeFocused();
-  // Where focus is shows on its own, not only as a faint tint.
-  await expect(menu.getByRole("menuitem", { name: "Play" })).toHaveCSS(
-    "outline-style",
-    "solid",
-  );
-  // Past "Keep for offline" (RFC-022) and the album and artist entries, the
-  // seventh item.
-  for (let press = 0; press < 6; press += 1) {
-    await page.keyboard.press("ArrowDown");
-  }
-  await expect(menu.getByRole("menuitem", { name: "Properties" })).toBeFocused();
-  await page.keyboard.press("Enter");
-
-  const panel = page.getByRole("dialog", { name: "Army Of Me" });
-  await expect(panel).toBeVisible();
-  await expect(menu).toHaveCount(0);
-  await expect(panel).toContainText("Björk/Post/09 Army Of Me.flac");
-  await expect(panel).toContainText("a".repeat(64));
-  await expect(panel).toContainText("957 kbps");
-  await expect(panel).toContainText("44.1 kHz");
-  await expect(panel).toContainText("-6.5 dB, peak 0.98");
-  // The comment is a correction; the file carried none.
-  await expect(panel).toContainText("Corrected — the file says —");
-  await expectNoWcagViolations(page);
-
-  // A click in the panel's own padding lands on the dialog element, as a
-  // click on the backdrop does; only the second may close it.
-  await panel.click({ position: { x: 6, y: 6 } });
-  await expect(panel).toBeVisible();
-
-  await page.keyboard.press("Escape");
-  await expect(panel).toHaveCount(0);
-  await expect(title).toBeFocused();
-
-  // The backdrop, outside the panel's box, does close it.
-  await page.keyboard.press("Shift+F10");
-  for (let press = 0; press < 6; press += 1) {
-    await page.keyboard.press("ArrowDown");
-  }
-  await page.keyboard.press("Enter");
-  await expect(panel).toBeVisible();
-  await page.mouse.click(2, 2);
-  await expect(panel).toHaveCount(0);
-
-  // The pointer reaches the same menu, and a click away closes it.
-  await row.click({ button: "right" });
-  await expect(menu).toBeVisible();
-  await page.mouse.click(5, 5);
-  await expect(menu).toHaveCount(0);
-
-  // The wheel closes it even turned over the menu, which does not scroll:
-  // the page beneath would move and leave the menu off its row. Dispatched
-  // on the entry itself, because a real wheel in a headless browser brings
-  // side effects of its own that close the menu either way.
-  await row.click({ button: "right" });
-  await expect(menu).toBeVisible();
-  await menu
-    .getByRole("menuitem", { name: "Play" })
-    .dispatchEvent("wheel", { deltaY: 120, bubbles: true });
-  await expect(menu).toHaveCount(0);
-});
-
-/**
- * The lyrics in a track's properties (RFC-012 decision 6).
- *
- * The sheets come in the server's order, the first marked as the one shown,
- * each naming its source. An owner uploads a sheet as the bytes it is and
- * takes an upload back; anyone downloads the shown sheet, saved under the
- * name the server gives in `Content-Disposition`.
- */
-test("uploads, removes and downloads lyrics from a track's properties", async ({
-  page,
-}) => {
-  const sheet = (source: string, synced: boolean, value: string) => ({
-    displayArtist: "Björk",
-    displayTitle: "Army Of Me",
-    lang: "eng",
-    synced,
-    line: [{ start: synced ? 1000 : undefined, value }],
-    source,
-  });
-  let sheets = [sheet("sidecar_lrc", true, "from the sidecar")];
-  const sent: Array<{ method: string; path: string; body: string }> = [];
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({ json: [correctable.song] }),
-  );
-  await page.route("**/api/v2/tracks/song-9/lyrics", (route) =>
-    route.fulfill({
-      json: { trackId: "song-9", structuredLyrics: sheets },
-    }),
-  );
-  await page.route("**/api/v2/tracks/song-9/lyrics/ttml", (route) => {
-    const request = route.request();
-    sent.push({
-      method: request.method(),
-      path: "ttml",
-      body: request.postData() ?? "",
-    });
-    if (request.method() === "PUT") {
-      sheets = [sheet("upload_ttml", true, "bonjour"), ...sheets];
-      return route.fulfill({
-        json: { trackId: "song-9", structuredLyrics: sheets },
-      });
-    }
-    sheets = sheets.filter((entry) => entry.source !== "upload_ttml");
-    return route.fulfill({ status: 204, body: "" });
-  });
-  await page.route("**/api/v2/tracks/song-9/lyrics/file", (route) =>
-    route.fulfill({
-      body: "[00:01.00]from the sidecar\n",
-      headers: {
-        "content-type": "application/octet-stream",
-        "content-disposition":
-          "attachment; filename=\"Bj_rk - Army Of Me.lrc\"; filename*=UTF-8''Bj%C3%B6rk%20-%20Army%20Of%20Me.lrc",
-      },
-    }),
-  );
-  await page.goto("/songs");
-  await page.evaluate(() => {
-    const seen = window as unknown as { __saved: string[] };
-    seen.__saved = [];
-    HTMLAnchorElement.prototype.click = function (this: HTMLAnchorElement) {
-      seen.__saved.push(this.download);
-    };
-  });
-  await page
-    .locator(".songs tbody tr")
-    .first()
-    .locator("button.song-title")
-    .focus();
-  await page.keyboard.press("Shift+F10");
-  await page
-    .getByRole("menu", { name: "Actions for Army Of Me" })
-    .getByRole("menuitem", { name: "Properties" })
-    .click();
-  const panel = page.getByRole("dialog", { name: "Army Of Me" });
-  const lyrics = panel.locator(".lyrics-section");
-  await expect(lyrics).toContainText("Shown");
-  await expect(lyrics).toContainText("LRC file beside the track");
-
-  // An upload goes as the file's own bytes, and leads once it is in.
-  await panel.locator('input[type="file"]').setInputFiles({
-    name: "Army Of Me.ttml",
-    mimeType: "application/ttml+xml",
-    buffer: Buffer.from('<tt xmlns="http://www.w3.org/ns/ttml"/>'),
-  });
-  await expect(lyrics).toContainText("Uploaded TTML");
-  expect(sent).toEqual([
-    {
-      method: "PUT",
-      path: "ttml",
-      body: '<tt xmlns="http://www.w3.org/ns/ttml"/>',
-    },
-  ]);
-  await expect(lyrics.locator(".property-row").first()).toContainText(
-    "Uploaded TTML",
-  );
-
-  // A file that is not a sheet is refused before anything is sent.
-  await panel.locator('input[type="file"]').setInputFiles({
-    name: "notes.srt",
-    mimeType: "text/plain",
-    buffer: Buffer.from("1"),
-  });
-  await expect(lyrics.getByRole("alert")).toHaveText(
-    "Choose a .lrc, .txt or .ttml file.",
-  );
-  expect(sent).toHaveLength(1);
-
-  // Taking the upload back leaves the scanned sheet shown again.
-  await lyrics.getByRole("button", { name: "Remove the TTML" }).click();
-  await expect(lyrics).not.toContainText("Uploaded TTML");
-  expect(sent.at(-1)?.method).toBe("DELETE");
-
-  // The download is saved under the server's name, accents and all.
-  await lyrics.getByRole("button", { name: "Download lyrics" }).click();
-  await expect
-    .poll(() =>
-      page.evaluate(() => (window as unknown as { __saved: string[] }).__saved),
-    )
-    .toEqual(["Björk - Army Of Me.lrc"]);
-  await expectNoWcagViolations(page);
-});
-
-/**
- * Download is the stream ticket with `?download=1` (RFC-012 decision 5).
- *
- * The browser cannot send the session on a navigation, so the menu mints a
- * ticket and saves from it through a link with `download` and no value,
- * which leaves the file's name to the server's `Content-Disposition`. That
- * header is asserted server-side, against a real file; what is asserted here
- * is the link the page builds. Chromium hands a `download` link straight to
- * its download manager, past every route a test could install, so the link
- * is caught as it is clicked rather than on the wire.
- */
-test("downloads a track from its context menu", async ({ page }) => {
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({ json: [correctable.song] }),
-  );
-  await page.route("**/api/v2/tracks/song-9/stream-ticket", (route) =>
-    route.fulfill({
-      json: { url: "/api/v2/stream/ticket-9", expires_at: Date.now() + 60_000 },
-    }),
-  );
-  await page.goto("/songs");
-  await page.evaluate(() => {
-    const seen = window as unknown as {
-      __saved: Array<{ href: string | null; download: string }>;
-    };
-    seen.__saved = [];
-    HTMLAnchorElement.prototype.click = function (this: HTMLAnchorElement) {
-      seen.__saved.push({
-        href: this.getAttribute("href"),
-        download: this.getAttribute("download") ?? "absent",
-      });
-    };
-  });
-  await page
-    .locator(".songs tbody tr")
-    .first()
-    .locator("button.song-title")
-    .focus();
-  await page.keyboard.press("Shift+F10");
-  const menu = page.getByRole("menu", { name: "Actions for Army Of Me" });
-  await menu.getByRole("menuitem", { name: "Download" }).click();
-  await expect(menu).toHaveCount(0);
-  await expect
-    .poll(() =>
-      page.evaluate(
-        () =>
-          (window as unknown as { __saved: unknown[] }).__saved,
-      ),
-    )
-    .toEqual([{ href: "/api/v2/stream/ticket-9?download=1", download: "" }]);
-  // Nothing is left in the document once the link has been followed.
-  await expect(page.locator("a[download]")).toHaveCount(0);
-
-  // A ticket that cannot be minted says so, rather than a click doing
-  // nothing; and saves nothing.
-  await page.route("**/api/v2/tracks/song-9/stream-ticket", (route) =>
-    route.fulfill({ status: 503, body: "" }),
-  );
-  await page.keyboard.press("Shift+F10");
-  await menu.getByRole("menuitem", { name: "Download" }).click();
-  const failed = page
-    .getByRole("alert")
-    .filter({ hasText: "The download could not start" });
-  await expect(failed).toHaveText("The download could not start. Try again.");
-  await failed.getByRole("button", { name: "Dismiss" }).click();
-  await expect(failed).toHaveCount(0);
-  expect(
-    await page.evaluate(
-      () => (window as unknown as { __saved: unknown[] }).__saved.length,
-    ),
-  ).toBe(1);
-});
-
-test("gives random playback one clear primary action", async ({ page }) => {
-  await page.route("**/api/v2/songs/random?*", (route) =>
-    route.fulfill({ json: [track] }),
-  );
-  await page.goto("/random");
-  const controls = page.locator(".page-header");
-  const play = controls.getByRole("button", { name: "Play", exact: true });
-  const queue = controls.getByRole("button", { name: "Add queue" });
-  const redraw = controls.getByRole("button", { name: "Draw again" });
-  await expect(play).toBeVisible();
-  await expect(queue).toBeVisible();
-  await expect(redraw).toBeVisible();
-  const playFill = await play.evaluate((node) => getComputedStyle(node).backgroundColor);
-  const queueFill = await queue.evaluate((node) => getComputedStyle(node).backgroundColor);
-  expect(playFill).not.toBe(queueFill);
-});
-
-test("offers a keyboard skip link and a localized not-found route", async ({
-  page,
-}) => {
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await page.keyboard.press("Tab");
-  const skip = page.getByRole("link", { name: "Skip to content" });
-  await expect(skip).toBeFocused();
-  await skip.press("Enter");
-  await expect(page.locator("#main-content")).toBeFocused();
-
-  await page.goto("/a-room-that-does-not-exist");
-  await expect(
-    page.getByRole("heading", { name: "This room is silent" }),
-  ).toBeVisible();
-  await expect(page.getByRole("link", { name: "Back to the library" })).toBeVisible();
-});
-
-test("has no automated WCAG A or AA violations", async ({ page }) => {
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await expectNoWcagViolations(page);
-});
-
-test("keeps the light appearance readable", async ({ page }) => {
-  await page.addInitScript(() => {
-    localStorage.setItem("waveflow.theme", "default");
-  });
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
-  await expectNoWcagViolations(page);
-});
-
-/**
- * The browse controls are the whole of lot A that has behaviour rather than
- * appearance. Sorting has to reach the server — it is `AlbumOrder` there, and
- * four of its values filter as well as order — while filtering must not, since
- * the client already holds the list.
- */
-test("sorts through the server and filters in the browser", async ({
-  page,
-}) => {
-  const requested: Array<string | null> = [];
-  page.on("request", (request) => {
-    const url = new URL(request.url());
-    if (url.pathname === "/api/v2/albums") {
-      requested.push(url.searchParams.get("sort"));
-    }
-  });
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-
-  const titles = page.locator(".grid strong");
-  await expect(titles).toHaveText(["Post", "Vespertine"]);
-  // The page names its order on the first load rather than relying on the
-  // server default, so the menu and the request cannot disagree.
-  expect(requested).toEqual(["alphabeticalByName"]);
-
-  await page.getByLabel("Sort").selectOption("newest");
-  await expect(titles).toHaveText(["Vespertine", "Post"]);
-  expect(requested).toEqual(["alphabeticalByName", "newest"]);
-
-  // Filtering narrows what is already loaded: no further request is made, and
-  // the header count reports the subset against the whole.
-  await page.getByLabel("Filter by title or artist").fill("vesper");
-  await expect(titles).toHaveText(["Vespertine"]);
-  await expect(page.getByText("1 of 2 shown")).toBeVisible();
-  expect(requested).toEqual(["alphabeticalByName", "newest"]);
-
-  // A filter matching nothing says so instead of showing an empty grid.
-  await page.getByLabel("Filter by title or artist").fill("zzz");
-  await expect(page.getByText("Nothing matches that filter.")).toBeVisible();
-});
-
-/**
- * Covers are asked for when they are about to be seen, not when the page mounts.
- *
- * `/api/v2/artwork/{hash}` needs an `Authorization` header, so each thumbnail
- * costs a `fetch` of its own. A library of 164 tracks opened with 127 requests
- * in half a second against a connection limit of six, and the covers below the
- * fold were queued ahead of the ones being looked at.
- *
- * Asserted on one card at the far end rather than on a count: a count depends
- * on the viewport and would have to be loosened until it stopped meaning
- * anything. What this pins is the property — off screen is not asked for, and
- * scrolling to it asks.
- */
-test("asks for a cover when it comes into view, and not before", async ({
-  page,
-}) => {
-  const asked: string[] = [];
-  const shelf = Array.from({ length: 60 }, (_, index) => ({
-    id: `album-lazy-${index}`,
-    library_id: "library-1",
-    title: `Shelf ${String(index).padStart(2, "0")}`,
-    artist: "Rue Delacour",
-    artist_id: "artist-1",
-    artwork_hash: `hash-${index}`,
-    year: 2000 + index,
-    starred_at: null,
-    user_rating: null,
-  }));
-
-  // Registered after `mockAuthenticatedApi`, so these win: Playwright tries
-  // handlers newest first.
-  await page.route("**/api/v2/albums*", async (route) => {
-    await route.fulfill({ json: shelf });
-  });
-  await page.route("**/api/v2/artwork/*", async (route) => {
-    asked.push(new URL(route.request().url()).pathname.split("/").pop() ?? "");
-    // A 404 is enough: this is about which requests leave, not what comes back.
-    await route.fulfill({ status: 404, body: "" });
-  });
-
-  await page.goto("/");
-  const last = page.getByText("Shelf 59");
-  await expect(last).toBeVisible();
-
-  // The top of the shelf is on screen and has been asked for; the bottom is
-  // sixty cards away and has not.
-  await expect.poll(() => asked).toContain("hash-0");
-  expect(asked).not.toContain("hash-59");
-
-  await last.scrollIntoViewIfNeeded();
-  await expect.poll(() => asked).toContain("hash-59");
-});
-
-/**
- * The card actions guard themselves while their album's tracks are being
- * fetched. The guard was one album id, which meant two cards in flight shared
- * a single slot: pressing the second card cleared the first one's guard
- * outright, and its buttons came back to life with its own request still out.
- *
- * That mattered because one of the two actions appends. A second press on "add
- * to queue" while the first was unanswered queued the album twice.
- */
-test("keeps each card's actions guarded while its own fetch is out", async ({
-  page,
-}) => {
-  let releaseSlow = () => {};
-  slowAlbum = new Promise<void>((resolve) => {
-    releaseSlow = resolve;
-  });
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-
-  const slowPlay = page.getByRole("button", { name: "Play: Post" });
-  const fastQueue = page.getByRole("button", {
-    name: "Add to queue: Vespertine",
-  });
-
-  await page.locator(".grid li").first().hover();
-  await slowPlay.click();
-  await expect(slowPlay).toBeDisabled();
-
-  // The second album answers at once while the first is still held open.
-  // Synchronising on the response and not on the button is the point: the
-  // button is enabled before the click too, so `toBeEnabled` can resolve on
-  // its first poll, before React has even applied the disabling update — and
-  // the assertion below would then run at a moment when nothing has happened,
-  // which is exactly when the single-slot guard still looks correct.
-  const answered = page.waitForResponse(
-    (response) => new URL(response.url()).pathname === "/api/v2/albums/album-2",
-  );
-  await page.locator(".grid li").nth(1).hover();
-  await fastQueue.click();
-  await answered;
-  await expect(fastQueue).toBeEnabled();
-
-  // The first album has not answered, so its actions must still be refused.
-  await expect(slowPlay).toBeDisabled();
-
-  releaseSlow();
-  await expect(slowPlay).toBeEnabled();
-});
-
-test("album view plays its tracks and keeps its compact list readable", async ({
-  page,
-}) => {
-  // "More by" reads the artist's albums alone. The library listing would page
-  // through every album to keep six, and the artist's page asks a metadata
-  // provider; neither has any business being asked from here.
-  const listings: string[] = [];
-  page.on("request", (request) => {
-    const path = new URL(request.url()).pathname;
-    if (path === "/api/v2/albums" || path === "/api/v2/artists/artist-1") {
-      listings.push(path);
-    }
-  });
-  await page.goto("/albums/album-2");
-  await expect(page.locator(".album-hero h2")).toHaveText("Vespertine");
-  await expect(page.locator(".album-meta")).toContainText("3 tracks");
-  await expect(page.locator(".album-meta")).toContainText("15:00");
-  await expect(page.locator(".album-songs tbody tr")).toHaveCount(3);
-  await expect(page.locator(".album-songs .song-cover")).toHaveCount(0);
-  await expect(page.getByRole("heading", { name: "More by Björk" })).toBeVisible();
-  await expect(page.locator(".album-related-grid a")).toHaveCount(1);
-  expect(listings).toEqual([]);
-  const actions = await page.locator(".album-actions button").evaluateAll((buttons) =>
-    buttons.map((button) => {
-      const style = getComputedStyle(button);
-      return {
-        left: Number.parseFloat(style.paddingLeft),
-        right: Number.parseFloat(style.paddingRight),
-      };
-    }),
-  );
-  expect(actions).toHaveLength(2);
-  for (const action of actions) {
-    expect(action.left).toBeGreaterThanOrEqual(20);
-    expect(action.right).toBeGreaterThanOrEqual(20);
-  }
-
-  await page.getByRole("button", { name: "Play album" }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  await page.locator(".album-songs .song-title").nth(1).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Cocoon");
-  expect(
-    await page.evaluate(() =>
-      document.documentElement.scrollWidth <= window.innerWidth,
-    ),
-  ).toBe(true);
-});
-
-/**
- * The song table carries the controls the albums grid does not — a five-star
- * rating and a favourite — so the accessibility sweep has to reach a page that
- * shows one. Until this test the sweep only ever loaded the grid.
- */
-test("rates a track and stays free of WCAG A or AA violations", async ({
-  page,
-}) => {
-  const rated: string[] = [];
-  page.on("request", (request) => {
-    const url = new URL(request.url());
-    if (url.pathname.startsWith("/api/v2/ratings/")) {
-      rated.push(`${request.method()} ${url.pathname}`);
-    }
-  });
-
-  await page.goto("/albums/album-2");
-  await expect(page.getByRole("heading", { name: "Vespertine" })).toBeVisible();
-
-  // The rating is a radio group, so the stored value is a checked radio rather
-  // than a class on a span.
-  const hidden = page.getByRole("group", { name: "Rating: Hidden Place" });
-  await expect(hidden.getByRole("radio", { name: "5 stars" })).toBeChecked();
-  const cocoon = page.getByRole("group", { name: "Rating: Cocoon" });
-  await expect(cocoon.getByRole("radio", { checked: true })).toHaveCount(0);
-
-  await cocoon.getByRole("radio", { name: "4 stars" }).check();
-  await expect(cocoon.getByRole("radio", { name: "4 stars" })).toBeChecked();
-  expect(rated).toEqual(["PUT /api/v2/ratings/track/song-2"]);
-
-  await expectNoWcagViolations(page);
-});
-
-/**
- * Genres were a route the server answered and the client never called. The
- * navigation is the part worth pinning: the genre name travels into the query,
- * and it is a display string — "Hip-Hop" and "hip hop" are one genre to the
- * server, which canonicalises before matching.
- */
-test("browses into a genre and keeps WCAG A and AA clean", async ({ page }) => {
-  const asked: Array<string | null> = [];
-  page.on("request", (request) => {
-    const url = new URL(request.url());
-    if (url.pathname === "/api/v2/songs/by-genre") {
-      asked.push(url.searchParams.get("genre"));
-    }
-  });
-
-  await page.goto("/genres");
-  await expect(page.getByRole("heading", { name: "Genres" })).toBeVisible();
-  await expect(page.getByText("412 tracks · 31 albums")).toBeVisible();
-
-  await expectNoWcagViolations(page);
-
-  await page.getByRole("link", { name: "Art Pop" }).click();
-  await expect(page.getByRole("heading", { name: "Art Pop" })).toBeVisible();
-  await expect(page.locator(".songs tbody tr")).toHaveCount(2);
-  expect(asked).toEqual(["Art Pop"]);
-
-  await expectNoWcagViolations(page);
-});
-
-/**
- * A playlist file arrives, and nothing is created until the losses are shown.
- *
- * The panel is two steps because the failure it exists to prevent is a quiet
- * one: a file from another player names paths from another filesystem, so some
- * entries will not be here, and an import that silently produced a shorter
- * playlist would leave no way to know. So the first press only asks, and the
- * report is on screen — by line, with a reason — before anything is written.
- */
-test("previews an .m3u import, shows what it cannot place, then imports", async ({
-  page,
-}) => {
-  await page.goto("/playlists");
-  await expect(
-    page.getByRole("heading", { name: "Bring playlists from another player" }),
-  ).toBeVisible();
-
-  // The file is chosen, and only a dry run happens.
-  await page.getByLabel("Choose a playlist file").setInputFiles({
-    name: "Soirée.m3u",
-    mimeType: "audio/x-mpegurl",
-    buffer: Buffer.from("#EXTM3U\nA/01.flac\n"),
-  });
-  await expect(
-    page.getByText("3 of 5 entries are in your library."),
-  ).toBeVisible();
-  expect(importAsks).toEqual([{ dryRun: true, name: "Soirée" }]);
-  // The name offered is the file's own, without its extension, and editable.
-  await expect(page.getByLabel("Playlist name", { exact: true })).toHaveValue("Soirée");
-
-  // Both losses are named, with their line and their reason.
-  await expect(page.getByText("2 entries cannot be placed:")).toBeVisible();
-  const losses = page.locator(".import-unresolved li");
-  await expect(losses).toHaveCount(2);
-  await expect(losses.first()).toContainText("Line 7");
-  await expect(losses.first()).toContainText("matches several tracks");
-  await expect(losses.nth(1)).toContainText("not a file in a library");
-  // And the encoding, because a file that was not UTF-8 may have mangled
-  // names and the reader should know which guess was made.
-  await expect(
-    page.getByText(
-      "The file was not UTF-8 and was read as windows-1252. Check the names below before importing.",
-    ),
-  ).toBeVisible();
-
-  await expectNoWcagViolations(page);
-
-  // Cancelling writes nothing, and asks nothing more.
-  await page.getByRole("button", { name: "Cancel" }).click();
-  await expect(page.getByLabel("Playlist name", { exact: true })).toHaveCount(0);
-  expect(importAsks).toHaveLength(1);
-
-  // And the panel opens again after a cancel, on a fresh choice.
-  //
-  // **It does not pin the input being cleared between choices**, which is what
-  // lets a real user re-choose a file they have just fixed: `setInputFiles`
-  // fires a change event whether or not the file changed, so this harness
-  // cannot tell the two apart. Removing the reset leaves these assertions
-  // green — measured, not assumed.
-  await page.getByLabel("Choose a playlist file").setInputFiles({
-    name: "Soirée.m3u",
-    mimeType: "audio/x-mpegurl",
-    buffer: Buffer.from("#EXTM3U\nA/01.flac\n"),
-  });
-  await expect(page.getByLabel("Playlist name", { exact: true })).toBeVisible();
-  expect(importAsks).toHaveLength(2);
-
-  // A name of the reader's choosing, then the commit.
-  await page.getByLabel("Playlist name", { exact: true }).fill("Evening from elsewhere");
-  await page.getByRole("button", { name: "Import", exact: true }).click();
-  await expect(page.getByLabel("Playlist name", { exact: true })).toHaveCount(0);
-  expect(importAsks[2]).toEqual({
-    dryRun: false,
-    name: "Evening from elsewhere",
-  });
-});
-
-/**
- * Saving a playlist as a file, which is the other half of arriving with one.
- */
-test("saves a playlist as an .m3u8 the next player can read", async ({
-  page,
-}) => {
-  await page.goto("/playlists");
-  await expect(page.getByRole("heading", { name: "Evening" })).toBeVisible();
-
-  const download = page.waitForEvent("download");
-  await page.getByRole("button", { name: "Save as .m3u8" }).click();
-  const saved = await download;
-  // Named after the playlist, because a folder of "playlist.m3u8" is no use.
-  expect(saved.suggestedFilename()).toBe("Evening.m3u8");
-  expect(exportAsks).toEqual(["/api/v2/playlists/playlist-1/export"]);
-});
-
-/**
- * A playlist holds a position, not a set: the same track can be on it twice.
- * Each row's rating is a radio group named after the row, and a name built
- * from the track alone put both copies in one group — the browser keeps one
- * checked radio per group, so the first copy showed no rating at all.
- */
-test("shows the same track twice in a playlist, each with its rating", async ({
-  page,
-}) => {
-  // `?*`: the page asks for the public playlists of other accounts too
-  // (RFC-020), and a pattern without it matches no address with a query.
-  await page.route("**/api/v2/playlists?*", (route) =>
-    route.fulfill({
-      json: [
-        {
-          ...playlists[0],
-          songs: [
-            song(1, "Hidden Place", 5, true),
-            song(2, "Cocoon", 0, false),
-            song(1, "Hidden Place", 5, true),
-          ],
-        },
-      ],
-    }),
-  );
-  await page.goto("/playlists");
-  await expect(page.getByRole("heading", { name: "Evening" })).toBeVisible();
-
-  const copies = page.getByRole("group", { name: "Rating: Hidden Place" });
-  await expect(copies).toHaveCount(2);
-  await expect(
-    copies.first().getByRole("radio", { name: "5 stars" }),
-  ).toBeChecked();
-  await expect(
-    copies.last().getByRole("radio", { name: "5 stars" }),
-  ).toBeChecked();
-});
-
-/**
- * Another account's public playlist is listed apart from this account's own,
- * under its owner's name, and offers nothing that would change it: the server
- * answers anyone but the owner 404 (RFC-020 decision 2).
- */
-test("lists another account's public playlist apart, and read-only", async ({
-  page,
-}) => {
-  await page.route("**/api/v2/playlists?*", (route) =>
-    route.fulfill({
-      json: [
-        playlists[0],
-        {
-          ...playlists[0],
-          id: "playlist-2",
-          owner_id: "user-2",
-          owner_username: "guest",
-          name: "Guest picks",
-          public: true,
-        },
-      ],
-    }),
-  );
-  await page.goto("/playlists");
-  const others = page.getByRole("region", { name: "From other accounts" });
-  await expect(others.getByRole("heading", { name: "Guest picks" })).toBeVisible();
-  await expect(others.getByText("By guest")).toBeVisible();
-  await expect(others.getByRole("button", { name: "Delete" })).toHaveCount(0);
-  await expect(others.getByRole("checkbox")).toHaveCount(0);
-  // The account's own keeps every control, the publishing switch included.
-  await expect(
-    page.getByRole("checkbox", { name: "Visible to every account" }),
-  ).toHaveCount(1);
-});
-
-/**
- * A share link opens a player for somebody with no account (RFC-020
- * decision 3). The server hands a browser this page; the page asks the same
- * address for the share, and plays from the addresses it is given.
- */
-test("a share link opens a player that plays what the share hands out", async ({
-  page,
-}) => {
-  const shareAsks: Array<string | null> = [];
-  await page.route("**/share/wfs_e2e", async (route) => {
-    // The navigation itself is the page, which `vite preview` serves.
-    if (route.request().resourceType() === "document") {
-      await route.fallback();
-      return;
-    }
-    shareAsks.push(await route.request().headerValue("authorization"));
-    await route.fulfill({
-      json: {
-        id: "share-1",
-        description: "For the drive",
-        expiresAt: null,
-        visitCount: 1,
-        tracks: [
-          {
-            ...song(1, "Hidden Place", 5, true),
-            streamUrl: "/share/wfs_e2e/tracks/song-1/stream?visit=pass-1",
-          },
-          {
-            ...song(1, "Hidden Place", 5, true),
-            streamUrl: "/share/wfs_e2e/tracks/song-1/stream?visit=pass-2",
-          },
-        ],
-      },
-    });
-  });
-  await page.route("**/share/wfs_e2e/tracks/**", (route) =>
-    route.fulfill({ status: 204, body: "" }),
-  );
-  await page.goto("/share/wfs_e2e");
-  await expect(
-    page.getByRole("heading", { name: "For the drive" }),
-  ).toBeVisible();
-  // No rail and no sign-in: the visitor has neither.
-  await expect(page.getByRole("navigation")).toHaveCount(0);
-  // Named by what the row shows, which axe holds a label to.
-  const plays = page.getByRole("button", { name: /^Hidden Place/ });
-  await expect(plays).toHaveCount(2);
-  await plays.last().click();
-  await expect(page.getByLabel("Player")).toHaveAttribute(
-    "src",
-    /\/share\/wfs_e2e\/tracks\/song-1\/stream\?visit=pass-2/,
-  );
-  // Asked once, and without the session a signed-in visitor holds: the share
-  // route reads none, and every ask is a visit.
-  expect(shareAsks).toEqual([null]);
-  const results = await new AxeBuilder({ page }).analyze();
-  expect(results.violations).toEqual([]);
-});
-
-test("a share link that opens nothing says so", async ({ page }) => {
-  await page.route("**/share/wfs_gone", async (route) => {
-    if (route.request().resourceType() === "document") {
-      await route.fallback();
-      return;
-    }
-    await route.fulfill({ status: 404, body: "" });
-  });
-  await page.goto("/share/wfs_gone");
-  await expect(
-    page.getByRole("heading", { name: "This link opens nothing" }),
-  ).toBeVisible();
-});
-
-/**
- * An artist page carries what this account played, and nothing when it played
- * nothing.
- *
- * The desktop client fills this part of an artist page from a remote service.
- * This server queries none, so what is counted is local listening — which also
- * means a fresh account sees no section at all, and that is the half worth
- * pinning: a heading over an empty table would read as a broken feature rather
- * than as an honest answer.
- */
-test("an artist page shows this account's most played, and no heading without a history", async ({
-  page,
-}) => {
-  await page.goto("/artists/artist-1");
-  await expect(
-    page.getByRole("heading", { name: "Björk", level: 2 }),
-  ).toBeVisible();
-
-  await expect(
-    page.getByRole("heading", { name: "Most played here" }),
-  ).toBeVisible();
-  // The server ranked them; the client renders that order and does not re-sort.
-  await expect(page.locator(".artist-played .songs tbody tr")).toHaveCount(2);
-  await expect(
-    page.locator(".artist-played .song-title").first(),
-  ).toContainText("Cocoon");
-  // A screenful, not the discography.
-  expect(topSongAsks).toEqual(["10"]);
-  // And the albums are still what the page is.
-  await expect(page.getByRole("link", { name: "Open the album: Vespertine" })).toBeVisible();
-
-  await expectNoWcagViolations(page);
-
-  // Nothing played: the section is absent, not empty.
-  artistPlayed = [];
-  await page.goto("/artists/artist-1");
-  await expect(
-    page.getByRole("heading", { name: "Björk", level: 2 }),
-  ).toBeVisible();
-  await expect(page.getByRole("link", { name: "Open the album: Vespertine" })).toBeVisible();
-  await expect(
-    page.getByRole("heading", { name: "Most played here" }),
-  ).toHaveCount(0);
-});
-
-/**
- * RFC-011 decision 11 on the screen: what a provider said, and which one said
- * it. The first answer is `pending`, as an artist's first visit is; the page
- * asks again on its own, since the web client reads no event stream, and the
- * second answer fills it.
- */
-test("an artist page shows what the server learned, and where each part came from", async ({
-  page,
-}) => {
-  const lastfm = { provider: "lastfm", fetched_at: Date.UTC(2026, 9, 14) };
-  enrichmentOf = (ask) =>
-    ask === 1
-      ? { state: "pending", bio: null, image: null, similar: null }
-      : {
-          state: "ready",
-          bio: {
-            summary: "An Icelandic singer and songwriter.",
-            full: "An Icelandic singer and songwriter.\nHer albums are many.",
-            source: lastfm,
-          },
-          image: {
-            artwork_hash: "a".repeat(64),
-            source: { provider: "deezer", fetched_at: Date.UTC(2026, 9, 15) },
-          },
-          similar: {
-            artists: [
-              {
-                id: "artist-2",
-                name: "Sigur Rós",
-                album_count: 1,
-                artwork_hash: null,
-              },
-            ],
-            source: lastfm,
-          },
-        };
-  // Only the portrait's hash answers with an image: the artist row names
-  // none, so the hero can show it only through `enrichment.image`.
-  const png = Buffer.from(
-    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
-    "base64",
-  );
-  await page.route(`**/api/v2/artwork/${"a".repeat(64)}`, async (route) => {
-    await route.fulfill({ contentType: "image/png", body: png });
-  });
-
-  await page.goto("/artists/artist-1");
-  await expect(page.getByRole("status")).toContainText(
-    "Looking this artist up",
-  );
-  await expect(page.getByRole("heading", { name: "About" })).toBeVisible({
-    timeout: 10_000,
-  });
-  await expect(page.getByText("An Icelandic singer and songwriter.").first()).toBeVisible();
-  await expect(page.getByText(/^Biography from Last\.fm, /)).toBeVisible();
-  await expect(page.getByText(/^Portrait from Deezer, /)).toBeVisible();
-  await expect(page.locator(".artist-hero img.artist-portrait")).toBeVisible();
-  await expect(
-    page.getByRole("heading", { name: "Similar artists in your library" }),
-  ).toBeVisible();
-  await expect(page.getByRole("link", { name: /Sigur Rós/ })).toBeVisible();
-  await expect(page.getByText(/^Suggested by Last\.fm, /)).toBeVisible();
-  await expect(page.getByText("Looking this artist up")).toHaveCount(0);
-  expect(artistAsks).toBe(2);
-
-  await expectNoWcagViolations(page);
-});
-
-/** `none` is an answer: nothing is shown, and nothing is asked again. */
-test("an artist nobody knows shows no enrichment and is not asked again", async ({
-  page,
-}) => {
-  enrichmentOf = () => ({ state: "none", bio: null, image: null, similar: null });
-  await page.goto("/artists/artist-1");
-  await expect(page.getByRole("link", { name: "Open the album: Vespertine" })).toBeVisible();
-  await page.waitForTimeout(4_000);
-  await expect(page.getByRole("heading", { name: "About" })).toHaveCount(0);
-  await expect(page.getByText("Looking this artist up")).toHaveCount(0);
-  expect(artistAsks).toBe(1);
-});
-
-/**
- * A server that fails after a `pending` answer leaves that answer on screen,
- * and a failed ask does not move the count of answers. The failures are
- * counted with them, so the page still stops at the bound.
- */
-test("a pending artist whose server keeps failing is asked a bounded number of times", async ({
-  page,
-}) => {
-  test.setTimeout(45_000);
-  artistFailsAfterFirst = true;
-  enrichmentOf = () => ({ state: "pending", bio: null, image: null, similar: null });
-  await page.goto("/artists/artist-1");
-  await expect(page.getByRole("heading", { name: "Björk", level: 2 })).toBeVisible();
-  await expect.poll(() => artistAsks, { timeout: 30_000 }).toBe(6);
-  await page.waitForTimeout(5_000);
-  expect(artistAsks).toBe(6);
-  await expect(page.getByText("Looking this artist up")).toHaveCount(0);
-});
-
-/**
- * `GET /history` answers plays and not songs, so every distinct track on this
- * screen is a request of its own, and they all leave together. Without a cap a
- * long history meant a hundred-odd round trips for a list nobody reads to the
- * bottom of. The window stays wide — 200 plays asked for — and only what is
- * resolved is bounded.
- */
-test("resolves a bounded number of tracks from a long history", async ({
-  page,
-}) => {
-  // The track itself and nothing under it: `/tracks/{id}/stream-ticket` shares
-  // the prefix, and the restored queue asks for those as soon as it loads.
-  const asked: string[] = [];
-  page.on("request", (request) => {
-    const path = new URL(request.url()).pathname;
-    if (/^\/api\/v2\/tracks\/[^/]+$/.test(path)) asked.push(path);
-  });
-
-  await page.goto("/history");
-  await expect(
-    page.getByRole("heading", { name: "Recently played" }),
-  ).toBeVisible();
-
-  await expect(page.locator(".songs tbody tr")).toHaveCount(50);
-  expect(asked).toHaveLength(50);
-  // The newest plays are the ones kept, not an arbitrary fifty.
-  expect(asked[0]).toBe("/api/v2/tracks/t0");
-  expect(asked.at(-1)).toBe("/api/v2/tracks/t49");
-});
-
-/**
- * The player bar's modes. `shuffledOrder`, `advance` and `retreat` are unit
- * tested; this is the wiring — that the buttons reach them, and that repeat
- * says which of its three states is on rather than only naming the action. A
- * screen reader hearing "repeat" alone could not tell.
- *
- * No audio is served: the bar renders from the restored queue, which is enough
- * to press its controls.
- */
-test("carries shuffle and the three repeat states in the player bar", async ({
-  page,
-}, testInfo) => {
-  await page.goto("/");
-  const shuffle = page.getByRole("button", { name: "Shuffle" });
-
-  if (testInfo.project.name === "mobile") {
-    // Deliberate: a narrow bar keeps the transport and drops the modes. The
-    // layout that came before dropped previous and next instead and kept only
-    // play, which is the worse trade on a phone.
-    await expect(shuffle).toBeHidden();
-    await expect(page.getByRole("button", { name: "Repeat: off" })).toBeHidden();
-    await expect(page.getByRole("button", { name: "Next" })).toBeVisible();
-    return;
-  }
-
-  await expect(shuffle).toBeVisible();
-  await expect(shuffle).toHaveAttribute("aria-pressed", "false");
-  await shuffle.click();
-  await expect(shuffle).toHaveAttribute("aria-pressed", "true");
-  await shuffle.click();
-  await expect(shuffle).toHaveAttribute("aria-pressed", "false");
-
-  // Off → whole queue → this track → off.
-  const repeat = page.getByRole("button", { name: "Repeat: off" });
-  await repeat.click();
-  await expect(
-    page.getByRole("button", { name: "Repeat: the whole queue" }),
-  ).toBeVisible();
-  await page.getByRole("button", { name: "Repeat: the whole queue" }).click();
-  await expect(
-    page.getByRole("button", { name: "Repeat: this track" }),
-  ).toBeVisible();
-  await page.getByRole("button", { name: "Repeat: this track" }).click();
-  await expect(page.getByRole("button", { name: "Repeat: off" })).toBeVisible();
-
-  // The cover is the way back to the album that is playing.
-  await expect(
-    page.getByRole("link", { name: "Open the album: Vespertine" }),
-  ).toHaveAttribute("href", "/albums/album-2");
-});
-
-test("shows queue artwork beside tracks without crowding times or actions", async ({
-  page,
-}) => {
-  const songs = [
-    { ...track, artwork_hash: "queue-cover-1" },
-    {
-      ...track,
-      id: "song-2",
-      title: "A much longer title in the listening queue",
-      duration_ms: 92_000,
-      artwork_hash: "queue-cover-2",
-    },
-    {
-      ...track,
-      id: "song-3",
-      title: "Rising",
-      duration_ms: 236_000,
-      artwork_hash: "queue-cover-3",
-    },
-  ];
-  await page.route("**/api/v2/queue", async (route) => {
-    await route.fulfill({
-      json: {
-        current: "song-1",
-        position_ms: 0,
-        changed_by: null,
-        updated_at: 1,
-        songs,
-      },
-    });
-  });
-  const png = Buffer.from(
-    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
-    "base64",
-  );
-  await page.route("**/api/v2/artwork/*", async (route) => {
-    await route.fulfill({ contentType: "image/png", body: png });
-  });
-
-  await page.goto("/queue");
-  const rows = page.locator(".queue-list li");
-  await expect(rows).toHaveCount(3);
-  await rows.last().scrollIntoViewIfNeeded();
-  const covers = page.locator(".queue-list img.queue-cover");
-  await expect(covers).toHaveCount(3);
-  await expect
-    .poll(() =>
-      covers.evaluateAll((images) =>
-        images.every((image) => (image as HTMLImageElement).naturalWidth > 0),
-      ),
-    )
-    .toBe(true);
-  const timeEdges = await page.locator(".queue-duration").evaluateAll((times) =>
-    times.map((time) => Math.round(time.getBoundingClientRect().right)),
-  );
-  expect(new Set(timeEdges).size).toBe(1);
-
-  await page.setViewportSize({ width: 320, height: 700 });
-  const narrow = await rows.first().evaluate((row) => {
-    const [song, time, remove] = [...row.children].map((child) =>
-      child.getBoundingClientRect(),
-    );
-    return {
-      songRight: song?.right ?? 0,
-      timeLeft: time?.left ?? 0,
-      timeRight: time?.right ?? 0,
-      removeLeft: remove?.left ?? 0,
-      overflow: document.documentElement.scrollWidth - window.innerWidth,
-    };
-  });
-  expect(narrow.songRight).toBeLessThanOrEqual(narrow.timeLeft);
-  expect(narrow.timeRight).toBeLessThanOrEqual(narrow.removeLeft);
-  expect(narrow.overflow).toBeLessThanOrEqual(1);
-});
-
-/**
- * The web client works inside one library at a time — decided 2026-09-07, and
- * the contract is that changing library changes the catalogue's scope rather
- * than merging catalogues. What is worth pinning is that the scope actually
- * travels: a picker that changed nothing on the wire would look right and be
- * wrong.
- */
-test("scopes the catalogue to the active library, and hides the picker when there is one", async ({
-  page,
-}, testInfo) => {
-  const scopes: Array<string | null> = [];
-  page.on("request", (request) => {
-    const url = new URL(request.url());
-    if (url.pathname === "/api/v2/albums") {
-      scopes.push(url.searchParams.get("library_id"));
-    }
-  });
-
-  libraries = [
-    library("library-1", "Ma musique"),
-    library("library-2", "Les enfants"),
-  ];
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-
-  // The picker exists in the sidebar and in the mobile header; only one of the
-  // two is on screen, so the locator has to say which — as the appearance test
-  // above already does for theme and language.
-  const chrome =
-    testInfo.project.name === "mobile"
-      ? page.locator(".mobile-header")
-      : page.locator(".sidebar");
-  const picker = chrome.getByLabel("Library");
-  await expect(picker).toBeVisible();
-  // The first library leads until one has been chosen.
-  await expect.poll(() => scopes.at(-1)).toBe("library-1");
-
-  await picker.selectOption("library-2");
-  await expect.poll(() => scopes.at(-1)).toBe("library-2");
-
-  // Remembered across a reload rather than reset to the first.
-  await page.reload();
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await expect.poll(() => scopes.at(-1)).toBe("library-2");
-});
-
-test("shows no library picker when the account has only one", async ({
-  page,
-}) => {
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  // A select with a single option is a control that does nothing.
-  await expect(page.getByLabel("Library")).toHaveCount(0);
-});
-
-test("keeps the catalogue unasked until the active library is known", async ({
-  page,
-}) => {
-  // The first render used to fire an unscoped request and then a scoped one,
-  // so for a moment the screen showed every library's albums — the exact thing
-  // the single-library scope exists to prevent.
-  const scopes: Array<string | null> = [];
-  page.on("request", (request) => {
-    const url = new URL(request.url());
-    if (url.pathname === "/api/v2/albums") {
-      scopes.push(url.searchParams.get("library_id"));
-    }
-  });
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await expect(page.getByText("Post", { exact: true })).toBeVisible();
-  expect(scopes).toEqual(["library-1"]);
-});
-
-/**
- * Live scan progress. The stream is read with `fetch` and not `EventSource`,
- * because the route authenticates on a bearer token and `EventSource` sends no
- * headers — the same wall `<audio src>` hits. That puts the framing on the
- * client, so this covers a stream that arrives in pieces with a keep-alive
- * comment in the middle of it.
- */
-test("follows a scan while it runs", async ({ page }) => {
-  await page.goto("/admin");
-  await expect(
-    page.getByRole("heading", { name: "Administration" }),
-  ).toBeVisible();
-
-  await page.getByRole("button", { name: "Scan now" }).first().click();
-
-  const panel = page.locator(".scan-panel");
-  await expect(panel).toBeVisible();
-  // The snapshot lands first, then the progress frame replaces it whole.
-  await expect(panel.getByText("10 of 10 files")).toBeVisible();
-  await expect(panel.getByText("Finished")).toBeVisible();
-  await expect(
-    panel.getByText("10 added · 0 updated · 0 moved · 0 unchanged · 0 errors"),
-  ).toBeVisible();
-  // A finished scan stops showing the file it is on.
-  await expect(panel.locator(".scan-path")).toHaveCount(0);
-});
-
-/**
- * API tokens are rendered once per account, so loading them on mount meant one
- * request per account every time the admin screen opened — for a list almost
- * nobody opens. They wait for the panel to be opened.
- */
-test("asks for a account's tokens only when its panel is opened", async ({
-  page,
-}) => {
-  const asked: string[] = [];
-  page.on("request", (request) => {
-    const path = new URL(request.url()).pathname;
-    if (path.endsWith("/tokens")) asked.push(path);
-  });
-
-  await page.goto("/admin");
-  await expect(
-    page.getByRole("heading", { name: "Administration" }),
-  ).toBeVisible();
-  const disclosure = page.getByRole("button", {
-    name: "API tokens for listener",
-  });
-  await expect(disclosure).toHaveAttribute("aria-expanded", "false");
-  expect(asked).toEqual([]);
-
-  await disclosure.click();
-  await expect(disclosure).toHaveAttribute("aria-expanded", "true");
-  await expect(page.getByText("No token on this account.")).toBeVisible();
-  expect(asked).toEqual(["/api/v2/admin/users/listener/tokens"]);
-});
-
-/**
- * Both of these were failures wearing the clothes of an ordinary state: a
- * token list that could not be fetched read as "no token on this account", and
- * a progress stream that could not open left the panel waiting for a first
- * reading that was never coming. That is the kind of defect nobody reports,
- * because the screen looks like it is working.
- */
-test("says a token list failed instead of calling it empty", async ({
-  page,
-}) => {
-  tokensFail = true;
-  await page.goto("/admin");
-  await page
-    .getByRole("button", { name: "API tokens for listener" })
-    .click();
-
-  // Scoped to the panel: the player bar raises an alert of its own here, its
-  // stream being mocked away.
-  await expect(page.locator(".token-panel").getByRole("alert")).toHaveText(
-    "We could not load this view",
-  );
-  await expect(page.getByText("No token on this account.")).toHaveCount(0);
-});
-
-test("says the progress stream was lost instead of waiting for ever", async ({
-  page,
-}) => {
-  scanFails = true;
-  await page.goto("/admin");
-  await page.getByRole("button", { name: "Scan now" }).first().click();
-
-  const panel = page.locator(".scan-panel");
-  await expect(panel.getByRole("alert")).toContainText(
-    "The progress stream could not be opened",
-  );
-  await expect(panel.getByText("Waiting for the first reading")).toHaveCount(0);
-});
-
-/**
- * A refused status is the tidy failure. The likelier one is the request never
- * completing at all, and that arrives as a rejected `fetch` rather than a
- * response — which the stream reader used to swallow whole, leaving the panel
- * waiting on a reading that had no chance of coming.
- */
-test("says so when the progress stream never connects", async ({ page }) => {
-  scanDrops = true;
-  await page.goto("/admin");
-  await page.getByRole("button", { name: "Scan now" }).first().click();
-
-  const panel = page.locator(".scan-panel");
-  await expect(panel.getByRole("alert")).toContainText(
-    "The progress stream could not be opened",
-  );
-});
-
-/**
- * Library membership could be written since M4 and never read, so an interface
- * could grant and revoke without ever showing who already had access. The list
- * is behind a disclosure for the same reason the tokens are: the panel renders
- * once per library, and loading on mount would ask for every membership list
- * every time the admin screen opened.
- */
-test("lists who may see a library, once its panel is opened", async ({
-  page,
-}) => {
-  const asked: string[] = [];
-  page.on("request", (request) => {
-    const path = new URL(request.url()).pathname;
-    if (path.endsWith("/members") || path.endsWith("/settings")) {
-      asked.push(path);
-    }
-  });
-
-  // Two libraries, because one cannot tell the two layouts apart: with a single
-  // library, "list then panel" and "list, then every panel" produce the same
-  // rows. The defect only shows from the second library on.
-  libraries = [
-    library("library-1", "Ma musique"),
-    library("library-2", "Les enfants"),
-  ];
-
-  await page.goto("/admin");
-  const disclosure = page
-    .getByRole("button", { name: "Who may see this library" })
-    .first();
-  await expect(disclosure).toHaveAttribute("aria-expanded", "false");
-  expect(asked).toEqual([]);
-
-  // Each library's membership sits directly under that library, not after the
-  // whole list: two render passes put the third library's members four rows
-  // below it, which reads as belonging to whatever is above them. Its name,
-  // folder and deletion (RFC-021) follow, still before the next library.
-  const rows = page.locator(".admin-panel .resource-list > li");
-  await expect(rows.nth(0)).toContainText("Ma musique");
-  await expect(rows.nth(1)).toContainText("Who may see this library");
-  await expect(rows.nth(2)).toContainText("Name, folder and deletion");
-  await expect(rows.nth(3)).toContainText("Les enfants");
-  await expect(rows.nth(4)).toContainText("Who may see this library");
-  await expect(rows.nth(5)).toContainText("Name, folder and deletion");
-  await expect(rows).toHaveCount(6);
-  // Neither panel asks for anything until it is opened: the folder on the
-  // server is fetched for the one library somebody is looking at.
-  expect(asked).toEqual([]);
-
-  await disclosure.click();
-  await expect(page.getByText("guest")).toBeVisible();
-  expect(asked).toEqual(["/api/v2/libraries/library-1/members"]);
-
-  // The owner is shown and offers no role control: the route refuses `owner`
-  // outright, so a select here would be offering a refusal.
-  await expect(page.getByText("owner, and stays one")).toBeVisible();
-  await expect(
-    page.getByRole("combobox", { name: "Role: listener" }),
-  ).toHaveCount(0);
-  await expect(
-    page.getByRole("combobox", { name: "Role: guest" }),
-  ).toHaveValue("listener");
-});
-
-/**
- * A membership list that could not be read is not an empty one. Standing an
- * empty array in for "not known yet" made every account on the server look like
- * a non-member, so the panel offered access to people who already had it —
- * printed underneath the notice saying the list could not be read.
- */
-test("offers no membership to grant while the list is unknown", async ({
-  page,
-}) => {
-  membersFail = true;
-  await page.goto("/admin");
-  await page
-    .getByRole("button", { name: "Who may see this library" })
-    .first()
-    .click();
-
-  const panel = page.locator(".member-row .admin-panel").first();
-  await expect(panel.getByRole("alert")).toHaveText(
-    "We could not load this view",
-  );
-  // The grant control is built from the list, so without one there is nothing
-  // to build it from.
-  await expect(panel.getByLabel("Give access to")).toHaveCount(0);
-});
-
-/**
- * The editor's whole job, seen from the wire. The body must name the field that
- * changed and the list handed back to the file, and nothing else — above all
- * not the comment another client added, which a body sending the whole form
- * would have erased before #177 and would pin now.
- */
-test("corrects a track's tags and sends only what changed", async ({
-  page,
-}) => {
-  await page.goto("/tracks/song-9/edit");
-  await expect(
-    page.getByRole("heading", { name: "Correct tags" }),
-  ).toBeVisible();
-
-  const title = page.getByLabel("Title", { exact: true });
-  await expect(title).toHaveValue("Army Of Me");
-  // Provenance is shown here and nowhere else: the corrected value, and what
-  // the file says beneath it.
-  // A tagger's comment keeps both of its lines: an `<input>` would flatten it.
-  await expect(page.getByLabel("Comment", { exact: true })).toHaveValue(
-    "Remastered\nBonus edition",
-  );
-  await expect(page.getByText("The file says nothing here")).toBeVisible();
-
-  await title.fill("Army of Me");
-  await page
-    .getByRole("button", { name: /^Restore the file.s value: Artists$/ })
-    .click();
-  await expect(page.getByLabel("Artists", { exact: true })).toBeDisabled();
-
-  await page.getByRole("button", { name: "Save" }).click();
-  await expect(page.getByText("Saved.")).toBeVisible();
-  expect(corrections).toEqual([{ title: "Army of Me", artists: null }]);
-
-  // Read back, not assumed. The form now stands on the corrections the server
-  // holds: the artists are the file's again, and no longer corrected.
-  await expect(title).toHaveValue("Army of Me");
-  const artists = page.getByLabel("Artists", { exact: true });
-  await expect(artists).toBeEnabled();
-  await expect(artists).toHaveValue("Björk");
-  await expect(
-    page.getByRole("button", { name: /^Restore the file.s value: Artists$/ }),
-  ).toHaveCount(0);
-
-  await expectNoWcagViolations(page);
-});
-
-/**
- * Offered where the server would accept it, and nowhere else. The listener half
- * is not vacuous: the album waits for the list of libraries before it renders,
- * so the rows below exist only once the role that decides them is known.
- */
-test("offers a tag correction only to an owner or a manager", async ({
-  page,
-}) => {
-  await page.goto("/albums/album-2");
-  await expect(page.getByRole("heading", { name: "Vespertine" })).toBeVisible();
-  const links = page.getByRole("link", { name: /^Correct tags: / });
-  await expect(links).toHaveCount(3);
-  await expect(links.first()).toHaveAttribute("href", "/tracks/song-1/edit");
-
-  // A manager may correct as well: the other half of the pair the server
-  // names, and the half a regression to owner-only would drop.
-  libraries = [{ ...library("library-1", "Ma musique"), role: "manager" }];
-  await page.reload();
-  await expect(page.getByRole("heading", { name: "Vespertine" })).toBeVisible();
-  await expect(links).toHaveCount(3);
-
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  await page.reload();
-  await expect(page.getByRole("heading", { name: "Vespertine" })).toBeVisible();
-  // The row's own marks cell, where the link would be. Once its rating is in
-  // the page, the absence of the link is an answer and not a race.
-  await expect(
-    page.getByRole("group", { name: "Rating: Hidden Place" }),
-  ).toBeAttached();
-  await expect(links).toHaveCount(0);
-});
-
-/**
- * A file goes through the three steps RFC-008 describes, and the wire carries
- * what the server checks: the whole file's BLAKE3 as the offer, fragments of
- * exactly the advertised size in order, and one commit.
- *
- * The acknowledgement of the second fragment is lost on purpose. The client
- * must read the session back and carry on from where the server stands: not
- * send the written fragment again, and not skip the next one.
- */
-test("uploads a file in fragments, resuming from the server's account", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  loseAcknowledgementOf = 1;
-  const bytes = Buffer.from(Array.from({ length: 20 }, (_, i) => i));
-
-  await page.goto("/upload");
-  await expect(
-    page.getByRole("heading", { name: "Upload to Ma musique" }),
-  ).toBeVisible();
-  await page.getByLabel("Choose audio files").setInputFiles({
-    name: "Army of Me.flac",
-    mimeType: "audio/flac",
-    buffer: bytes,
-  });
-  await expect(page.getByText("Added to the library")).toBeVisible();
-
-  // The browser's digest is the one the server recomputes, computed here by an
-  // independent call rather than read back from the page.
-  expect(uploadOffers).toEqual([
-    { full_hash: bytesToHex(blake3(bytes)), size_bytes: 20, extension: "flac" },
-  ]);
-  expect(uploadChunks.map(({ index, bytes: sent }) => [index, sent.length])).toEqual([
-    [0, 8],
-    [1, 8],
-    [2, 4],
-  ]);
-  expect(uploadChunks.flatMap(({ bytes: sent }) => sent)).toEqual([...bytes]);
-  expect(uploadCommits).toEqual(["upload-1"]);
-
-  await expectNoWcagViolations(page);
-});
-
-/**
- * An extension the scanner does not index is refused on the spot. Hashing it
- * first would spend the time of a full read to be told `unsupported_format`.
- */
-test("refuses a file the library cannot index, before hashing it", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  await page.goto("/upload");
-  await page.getByLabel("Choose audio files").setInputFiles({
-    name: "notes.txt",
-    mimeType: "text/plain",
-    buffer: Buffer.from("not audio"),
-  });
-  await expect(
-    page.getByText("Refused: not an audio format the library can index"),
-  ).toBeVisible();
-  expect(uploadOffers).toEqual([]);
-});
-
-/**
- * A worker that cannot load sends no message at all. Waiting for one would leave
- * the row on "Fingerprinting…" for ever, and the queue — one file at a time —
- * stuck behind it. Both files must fail, the second without waiting on the
- * first, and nothing may be offered to the server.
- */
-test("fails a file whose fingerprinting worker cannot load, and moves on", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  await page.route("**/assets/hash-worker-*.js", (route) =>
-    route.fulfill({ status: 404, body: "" }),
-  );
-  await page.goto("/upload");
-  await page.getByLabel("Choose audio files").setInputFiles([
-    { name: "first.flac", mimeType: "audio/flac", buffer: Buffer.from([1, 2, 3]) },
-    { name: "second.flac", mimeType: "audio/flac", buffer: Buffer.from([4, 5, 6]) },
-  ]);
-  await expect(
-    page.getByText("Failed: this browser could not fingerprint the file"),
-  ).toHaveCount(2);
-  expect(uploadOffers).toEqual([]);
-});
-
-/**
- * Two locks, and the link needs both: a role that may upload, and a library
- * its operator has opened. The page behind it says which one is missing when
- * reached directly.
- */
-test("offers the upload only where the library takes files and the role may add them", async ({
-  page,
-}) => {
-  // The link is a section of Settings now, and the gate moved with it. The
-  // section menu is drawn at every width, so a zero below is a zero on a
-  // phone as well — the rail entry it replaces was counted in the DOM because
-  // the rail is hidden there.
-  const link = page.locator('.section-menu a[href="/settings/upload"]');
-  const account = page.getByRole("heading", { name: "Account", exact: true });
-
-  // The fixture's default: an owner, in a library closed to files.
-  await page.goto("/settings");
-  await expect(account).toBeVisible();
-  await expect(link).toHaveCount(0);
-
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  await page.reload();
-  await expect(account).toBeVisible();
-  await expect(link).toHaveCount(1);
-
-  libraries = [
-    {
-      ...library("library-1", "Ma musique"),
-      accepts_uploads: true,
-      role: "listener",
-    },
-  ];
-  await page.reload();
-  await expect(account).toBeVisible();
-  await expect(link).toHaveCount(0);
-  await page.goto("/upload");
-  await expect(
-    page.getByText(
-      "Only an owner or a manager of this library can add files to it.",
-    ),
-  ).toBeVisible();
-});
-
-/**
- * RFC-009 from the editor: a loop sent as the file's own bytes, read back
- * through its ticket rather than assumed from the answer, refused in words,
- * and taken away.
- */
-test("places, replaces and removes a track's canvas", async ({ page }) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_canvas: true }];
-  await page.goto("/tracks/song-9/edit");
-  await expect(page.getByText("This track has no canvas.")).toBeVisible();
-
-  const loop = Buffer.from([0x1a, 0x45, 0xdf, 0xa3, 0x01, 0x02]);
-  await page.getByLabel("Choose a loop").setInputFiles({
-    name: "loop.webm",
-    mimeType: "video/webm",
-    buffer: loop,
-  });
-  await expect(page.getByText("Canvas saved.")).toBeVisible();
-  const preview = page.getByLabel("Canvas preview");
-  await expect(preview).toHaveAttribute(
-    "src",
-    "/api/v2/canvas-stream/ticket-song-9",
-  );
-
-  // Refused: said in words, and the loop that was there is still there.
-  refuseCanvasWith = 422;
-  await page.getByLabel("Replace the loop").setInputFiles({
-    name: "episode.mp4",
-    mimeType: "video/mp4",
-    buffer: Buffer.from([9, 9, 9]),
-  });
-  await expect(
-    page.getByText(
-      "The server refused this file: it takes a short mp4 or webm loop with a picture.",
-    ),
-  ).toBeVisible();
-  await expect(preview).toHaveAttribute(
-    "src",
-    "/api/v2/canvas-stream/ticket-song-9",
-  );
-
-  await expectNoWcagViolations(page);
-
-  await page.getByRole("button", { name: "Remove the canvas" }).click();
-  await expect(page.getByText("Canvas removed.")).toBeVisible();
-  await expect(page.getByText("This track has no canvas.")).toBeVisible();
-  expect(canvasWrites).toEqual([
-    { method: "PUT", track: "song-9", bytes: [...loop] },
-    { method: "PUT", track: "song-9", bytes: [9, 9, 9] },
-    { method: "DELETE", track: "song-9" },
-  ]);
-});
-
-/**
- * A library its operator has not opened to loops offers no new canvas, and
- * still lets go of the one a track carries: the server does not gate removal on
- * the flag, and the screen must not strand what the server would release.
- */
-test("offers removal but no new canvas where the library takes none", async ({
-  page,
-}) => {
-  canvases.set("song-9", [1, 2, 3]);
-  await page.goto("/tracks/song-9/edit");
-  // The notice waits for the list of libraries. Until it answers the picker is
-  // offered, so its absence below is only an answer once this is on screen.
-  await expect(
-    page.getByText(
-      "This library does not take canvases. Its operator decides that on the server.",
-    ),
-  ).toBeVisible();
-  await expect(page.getByLabel("Canvas preview")).toBeAttached();
-  await expect(
-    page.getByRole("button", { name: "Remove the canvas" }),
-  ).toBeVisible();
-  await expect(page.locator(".canvas-panel input[type=file]")).toHaveCount(0);
-});
-
-/**
- * The loop over the cover, rendered as the desktop renders it: muted, looping
- * and hidden from assistive technology, with the cover underneath keeping its
- * name. It steps aside when motion is reduced, and when the browser cannot play
- * it — the cover shows then, never an empty frame.
- */
-/** Saved positions use their song artwork and a shared time column. */
-test("shows saved tracks with artwork and one aligned time column", async ({
-  page,
-}) => {
-  bookmarks = ["Soleil Bleu", "A much longer song title", "Rising"].map(
-    (title, index) => ({
-      position_ms: [224_000, 236_000, 92_000][index] as number,
-      comment: null,
-      created_at: 1,
-      updated_at: 1,
-      song: {
-        id: `saved-${index}`,
-        title,
-        artist: "Rue Delacour",
-        artwork_hash: `saved-cover-${index}`,
-      },
-    }),
-  );
-  const png = Buffer.from(
-    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
-    "base64",
-  );
-  await page.route("**/api/v2/artwork/*", async (route) => {
-    await route.fulfill({ contentType: "image/png", body: png });
-  });
-
-  await page.goto("/playing");
-  const rows = page.locator(".bookmark-list li");
-  await expect(rows).toHaveCount(3);
-  await rows.last().scrollIntoViewIfNeeded();
-  const covers = page.locator(".bookmark-list img.bookmark-cover");
-  await expect(covers).toHaveCount(3);
-  await expect
-    .poll(() =>
-      covers.evaluateAll((images) =>
-        images.every((image) => (image as HTMLImageElement).naturalWidth > 0),
-      ),
-    )
-    .toBe(true);
-  const timeEdges = await page.locator(".bookmark-position").evaluateAll(
-    (times) => times.map((time) => Math.round(time.getBoundingClientRect().right)),
-  );
-  expect(new Set(timeEdges).size).toBe(1);
-  await expect(page.locator(".playing-bookmarks")).toHaveCSS(
-    "background-color",
-    "rgba(0, 0, 0, 0)",
-  );
-  await page.setViewportSize({ width: 320, height: 700 });
-  const narrow = await rows.first().evaluate((row) => {
-    const [track, time, forget] = [...row.children].map((child) =>
-      child.getBoundingClientRect(),
-    );
-    return {
-      trackRight: track?.right ?? 0,
-      timeLeft: time?.left ?? 0,
-      timeRight: time?.right ?? 0,
-      forgetLeft: forget?.left ?? 0,
-      overflow: document.documentElement.scrollWidth - window.innerWidth,
-    };
-  });
-  expect(narrow.trackRight).toBeLessThanOrEqual(narrow.timeLeft);
-  expect(narrow.timeRight).toBeLessThanOrEqual(narrow.forgetLeft);
-  expect(narrow.overflow).toBeLessThanOrEqual(1);
-});
-
-/**
- * The playing page, reading what the server actually sends.
- *
- * Until 2026-09-15 `LyricsList` declared a `snake_case` envelope the server has
- * never sent, so this page threw on its first property and showed nothing at
- * all. Nothing caught it because the mock above was written from that type. An
- * assertion on the words themselves is what tells the two shapes apart: an
- * empty sheet renders the same "no lyrics" line under either name.
- */
-test("shows the words a track travels with", async ({ page }) => {
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: "Rue Delacour",
-      displayTitle: "Nocturne",
-      lang: "eng",
-      synced: false,
-      line: [{ value: "the lamps come on along the quay" }],
-    },
-  ]);
-  await page.goto("/playing");
-  await expect(
-    page.getByRole("listitem").filter({
-      hasText: "the lamps come on along the quay",
-    }),
-  ).toBeVisible();
-});
-
-/**
- * Most tracks carry no loop, and minting a ticket is how the client asks — so
- * most of the time the answer is 404. The playing screen asks from an effect on
- * mount, which made that 404 a per-navigation cost with no end to it: measured
- * in a real session as a burst in the console, one request per visit, for ever.
- *
- * Client-side navigation both ways, deliberately. `page.goto` loads a fresh
- * document and empties everything the module remembers, so a test built on it
- * would prove the reload rather than the fix.
- */
-test("asks once whether a track carries a canvas, not once per visit", async ({
-  page,
-}) => {
-  // `canvases` is left empty, so every ticket answers 404 — the shape at issue.
-  const tickets: string[] = [];
-  page.on("request", (request) => {
-    const path = new URL(request.url()).pathname;
-    if (path.endsWith("/canvas-ticket")) tickets.push(path);
-  });
-
-  await page.goto("/playing");
-  await expect(page.locator(".canvas-stage .cover")).toBeVisible();
-  await expect.poll(() => tickets).toEqual([
-    "/api/v2/tracks/song-1/canvas-ticket",
-  ]);
-
-  for (const _visit of [1, 2]) {
-    await page.getByRole("link", { name: "Albums" }).click();
-    await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-    await page.getByRole("link", { name: "Now playing" }).click();
-    await expect(page.locator(".canvas-stage .cover")).toBeVisible();
-  }
-
-  // Waited for rather than asserted straight away: a request issued by the
-  // mount effect leaves after the frame that made the cover visible, so
-  // counting at that moment would pass whether or not one was on its way.
-  await page.waitForLoadState("networkidle");
-  expect(tickets).toHaveLength(1);
-});
-
-test("plays a track's canvas over its cover, and steps aside for it", async ({
-  page,
-}) => {
-  canvases.set("song-1", [1, 2, 3]);
-  let release = () => {};
-  canvasStreamGate = new Promise<void>((resolve) => {
-    release = () => resolve();
-  });
-  await page.goto("/playing");
-  const stage = page.locator(".canvas-stage");
-  const video = stage.locator("video");
-  await expect(video).toHaveAttribute(
-    "src",
-    "/api/v2/canvas-stream/ticket-song-1",
-  );
-  await expect(video).toHaveAttribute("aria-hidden", "true");
-  await expect(video).toHaveJSProperty("muted", true);
-  await expect(video).toHaveJSProperty("loop", true);
-  await expect(stage.locator(".cover")).toBeVisible();
-  await expectNoWcagViolations(page);
-
-  await page.emulateMedia({ reducedMotion: "reduce" });
-  await expect(video).toHaveCount(0);
-  await page.emulateMedia({ reducedMotion: "no-preference" });
-  await expect(video).toHaveCount(1);
-
-  // Bytes that are not a video: the browser gives up on them, and the cover is
-  // what is left rather than a frame with nothing in it.
-  release();
-  await expect(video).toHaveCount(0);
-  await expect(stage.locator(".cover")).toBeVisible();
-});
-
-/**
- * External scrobbling — RFC-010, the four gestures a client owes.
- *
- * The path is the server's: `lastfm_callback` redirects to
- * `/settings/scrobbling`, so a page anywhere else leaves the last step of the
- * journey on the not-found screen.
- */
-test("offers each instance by name, and says why one cannot be linked", async ({
-  page,
-}) => {
-  await page.goto("/settings/scrobbling");
-
-  await expect(
-    page.getByRole("heading", { name: "External scrobbling" }),
-  ).toBeVisible();
-  // Two instances of one recipient, each named. A screen keyed on the
-  // recipient would show "Maloja" once and hide whichever it linked second.
-  await expect(page.getByText('Maloja — instance “alice”')).toBeVisible();
-  await expect(page.getByText('Maloja — instance “bob”')).toBeVisible();
-  await expect(
-    page.getByText('ListenBrainz — instance “default”'),
-  ).toBeVisible();
-
-  // Declared and unusable is a real shape, and the reason is published so the
-  // person is not left to discover it when a link fails later. Asserted on the
-  // words this client chose for `NO_PUBLIC_URL`, not on the code it was given:
-  // a case printed raw would satisfy any assertion made on the code itself.
-  await expect(
-    page.getByText(
-      "Unavailable here: the browser journey needs this server’s public " +
-        "address to be an https one — an operator can still link an account " +
-        "from the command line",
-    ),
-  ).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Connect to Last.fm" }),
-  ).toHaveCount(0);
-
-  await expectNoWcagViolations(page);
-});
-
-/**
- * A server newer than the client reading it.
- *
- * `unavailable` carries a case rather than a sentence, so this client has a
- * table of words for the cases it knows — and a case it does not know must not
- * become a blank where a reason should be. The type is open for the same
- * reason: a union naming only today's cases would be an assertion about the
- * wire that the wire never made, which is the fault this whole change set
- * exists to remove.
- */
-test("says a reason it does not recognise is a reason, not a blank", async ({
-  page,
-}) => {
-  const lastfm = destinations.find((row) => row.provider === "lastfm");
-  if (lastfm) lastfm.unavailable = "a_case_from_a_later_release";
-
-  await page.goto("/settings/scrobbling");
-
-  await expect(
-    page.getByText("Unavailable here: this server did not say why"),
-  ).toBeVisible();
-});
-
-/**
- * `toString` is not a translation key.
- *
- * Opening the union widened the lookup key to `string`, and a plain object
- * answers for names nobody put in it: `toString` and `constructor` come back
- * off the prototype, truthy, and would reach `t()` as if they were keys. Every
- * inherited name is a case this client does not know, and must read as one.
- */
-for (const inherited of ["toString", "constructor", "hasOwnProperty"]) {
-  test(`treats the inherited name ${inherited} as a case it does not know`, async ({
-    page,
-  }) => {
-    const lastfm = destinations.find((row) => row.provider === "lastfm");
-    if (lastfm) lastfm.unavailable = inherited;
-
-    await page.goto("/settings/scrobbling");
-
-    await expect(
-      page.getByText("Unavailable here: this server did not say why"),
-    ).toBeVisible();
-  });
-}
-
-test("links one instance by its key, and leaves the other alone", async ({
-  page,
-}) => {
-  await page.goto("/settings/scrobbling");
-  await expect(page.getByText('Maloja — instance “alice”')).toBeVisible();
-
-  await page
-    .getByLabel('API key: Maloja — instance “alice”')
-    .fill("alice-api-key");
-  await page
-    .locator(".scrobble-row", { hasText: "alice" })
-    .getByRole("button", { name: "Link" })
-    .click();
-
-  await expect(
-    page.getByRole("button", { name: 'Unlink: Maloja — instance “alice”' }),
-  ).toBeVisible();
-  expect(scrobbleWrites).toEqual([
-    {
-      method: "PUT",
-      path: "/api/v2/scrobble-links/maloja/alice",
-      body: { secret: "alice-api-key" },
-    },
-  ]);
-  // The pair names the resource: bob is untouched and still offers its field.
-  await expect(
-    page.getByLabel('API key: Maloja — instance “bob”'),
-  ).toBeVisible();
-
-  // The queue behind the link is a state and four counters, never an echo of
-  // what was heard.
-  await expect(page.getByText("The queue is not moving")).toBeVisible();
-  await expect(page.getByText("12 waiting")).toBeVisible();
-  await expect(page.getByText("1 waiting on you")).toBeVisible();
-  await expect(
-    page.getByText("Last refusal: the destination asked for room."),
-  ).toBeVisible();
-});
-
-test("sends the browser to Last.fm rather than asking for a key", async ({
-  page,
-}) => {
-  // Last.fm hands out no secret a person can hold, so the only gesture is a
-  // journey. Declared *and* usable here, unlike the listing test.
-  destinations = [
-    { provider: "lastfm" as const, destination: "default", available: true },
-  ];
-  await page.route("https://www.last.fm/**", (route) =>
-    route.fulfill({ status: 200, body: "<title>last.fm</title>" }),
-  );
-
-  await page.goto("/settings/scrobbling");
-  await page.getByRole("button", { name: "Connect to Last.fm" }).click();
-
-  await page.waitForURL("https://www.last.fm/**");
-  expect(scrobbleWrites).toEqual([
-    {
-      method: "POST",
-      path: "/api/v2/scrobble-links/lastfm/authorize/default",
-      body: undefined,
-    },
-  ]);
-});
-
-test("says so when the journey comes back, and names the instance", async ({
-  page,
-}) => {
-  // What the callback redirects to once it has finished the link itself. The
-  // value is shown and nothing more: anybody can type this address, and the
-  // listing beside it is what actually says a link exists.
-  await page.goto(
-    "/settings/scrobbling?linked=lastfm&destination=default&keep=me",
-  );
-
-  await expect(page.getByText("Last.fm is linked: default.")).toBeVisible();
-
-  // Said once, then spent. A reload is a later navigation and not this one, so
-  // the pair leaves the address while the notice stays on the page — and a URL
-  // copied out of the bar no longer tells somebody else their Last.fm is
-  // linked. Anything else in the query is left where it was.
-  await expect(page).toHaveURL(/\/settings\/scrobbling\?keep=me$/);
-  await page.reload();
-  await expect(page.getByText("Last.fm is linked: default.")).toHaveCount(0);
-});
-
-test("names the track behind an ambiguous listen, and answers it once", async ({
-  page,
-}) => {
-  scrobbleLinks = [linkState("maloja", "alice")];
-  await page.goto("/settings/scrobbling");
-
-  const entry = page.locator(".scrobble-uncertain li");
-  // The entry carries no title — decision 12 keeps the envelope out of the API
-  // — so the screen matches `played_at` against the account's own history,
-  // which is what that field is documented to be for. A bare timestamp would
-  // ask somebody to decide about a listen they cannot recognise.
-  await expect(entry.getByText("Track t5")).toBeVisible();
-  await expect(entry.getByText(/instance “alice”/)).toBeVisible();
-  await expect(entry.getByText(/the answer never arrived/)).toBeVisible();
-
-  await entry.getByRole("button", { name: "Send it again" }).click();
-
-  await expect(page.getByText("Nothing is waiting on you.")).toBeVisible();
-  expect(scrobbleWrites).toEqual([
-    { method: "POST", path: "/api/v2/scrobble-queue/uncertain/entry-1/retry" },
-  ]);
-});
-
-test("throws an ambiguous listen away when that is the answer", async ({
-  page,
-}) => {
-  scrobbleLinks = [linkState("maloja", "alice")];
-  await page.goto("/settings/scrobbling");
-
-  const entry = page.locator(".scrobble-uncertain li");
-  await expect(entry.getByText("Track t5")).toBeVisible();
-  await entry.getByRole("button", { name: "Throw it away" }).click();
-
-  await expect(page.getByText("Nothing is waiting on you.")).toBeVisible();
-  expect(scrobbleWrites).toEqual([
-    { method: "DELETE", path: "/api/v2/scrobble-queue/uncertain/entry-1" },
-  ]);
-});
-
-test("unlinks one instance and leaves a namesake at another recipient", async ({
-  page,
-}) => {
-  // `default` is the name every recipient uses, so the pair is the only thing
-  // that tells these two apart. A screen — or a mock — matching on the
-  // instance name alone withdraws both, which is the fault the unique index
-  // on `(user_id, provider, destination)` was rebuilt to make impossible.
-  destinations = [
-    { provider: "listenbrainz" as const, destination: "default", available: true },
-    { provider: "maloja" as const, destination: "default", available: true },
-  ];
-  scrobbleLinks = [
-    linkState("listenbrainz", "default"),
-    linkState("maloja", "default"),
-  ];
-
-  await page.goto("/settings/scrobbling");
-  await page
-    .getByRole("button", {
-      name: 'Unlink: ListenBrainz — instance “default”',
-    })
-    .click();
-
-  await expect(
-    page.getByRole("button", { name: 'Unlink: Maloja — instance “default”' }),
-  ).toBeVisible();
-  await expect(
-    page.getByLabel('API key: ListenBrainz — instance “default”'),
-  ).toBeVisible();
-  expect(scrobbleWrites).toEqual([
-    { method: "DELETE", path: "/api/v2/scrobble-links/listenbrainz/default" },
-  ]);
-});
-
-/**
- * The mobile bar holds six slots and the client has sixteen screens. Until
- * 2026-09-15 the other eight were reachable by typing their address and by
- * nothing else: the sidebar that carries them is `display: none` below 820px.
- * The ninth is Songs, added with the listing itself, and the tenth is
- * Settings — which is where the theme and the language went when they stopped
- * living in the sidebar footer.
- * Seven of the eight had been in that state since lot A, and no test saw it —
- * every mobile case here navigates by `page.goto`.
- */
-test("opens the rest of the client from the mobile bar", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "mobile", "about the phone bar");
-  // An administrator of a library that takes files, so all eight are this
-  // account's to see. The default fixture takes none, which left `Upload` out
-  // of the list below while the comment on it claimed otherwise — and nothing
-  // then proved the sheet ever shows an upload entry at all. Its absence in
-  // the test beside this one is over-determined: that account is a listener
-  // *and* its library is closed, so it would pass against a sheet that had
-  // dropped the entry entirely.
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  await page.goto("/");
-
-  const bar = page.locator(".mobile-navigation");
-  // Six links and the seventh slot, on one row. The grid counted five for as
-  // long as there were five, and a sixth primary entry added later had been
-  // wrapping onto a second row ever since.
-  await expect(bar.locator("a")).toHaveCount(6);
-  const rows = await bar.evaluate(
-    (element) =>
-      new Set(
-        [...element.children].map((child) =>
-          Math.round(child.getBoundingClientRect().top),
-        ),
-      ).size,
-  );
-  expect(rows).toBe(1);
-
-  // Asserted before it is clicked. Clicking a control that is not there fails
-  // by timing out, and a timeout in a CI log says a test was slow rather than
-  // that the seventh slot is missing.
-  const more = bar.getByRole("button", { name: "More" });
-  await expect(more).toBeVisible();
-  await more.click();
-
-  const sheet = page.getByRole("dialog");
-  await expect(sheet).toBeVisible();
-  // The twelve the bar cannot hold. `Radio` joined them with #217, `Folders`
-  // with RFC-012's filed folders, `Offline` with RFC-022, `Statistics` with
-  // RFC-024 and `Podcasts` with RFC-025. Shares, Scrobbling, Upload and Admin
-  // left it when they became sections of Settings, and `Needs attention`
-  // (RFC-015), `Missing files` (RFC-021) and `Quality` (RFC-016) when they
-  // became sections of Maintenance — which is how eighteen became twelve.
-  // This count is what said so: a new entry in the sidebar reaches the sheet,
-  // and the sheet is pinned.
-  for (const name of [
-    "Artists",
-    "Songs",
-    "Genres",
-    "Folders",
-    "Maintenance",
-    "Settings",
-    "Random",
-    "Recently played",
-    "Statistics",
-    "Offline",
-    "Radio",
-    "Podcasts",
-  ]) {
-    await expect(sheet.getByRole("link", { name })).toBeVisible();
-  }
-  // Counted as well as named: a sheet that also offered something nobody asked
-  // for would satisfy every line above.
-  await expect(sheet.getByRole("link")).toHaveCount(12);
-
-  await expectNoWcagViolations(page);
-
-  // Escape is the keyboard's way out, and it is the element's own rather than
-  // anything written here — which is why the sheet is a <dialog>.
-  await page.keyboard.press("Escape");
-  await expect(sheet).toBeHidden();
-
-  await bar.getByRole("button", { name: "More" }).click();
-  await sheet.getByRole("link", { name: "Settings" }).click();
-  await expect(
-    page.getByRole("heading", { name: "Account", exact: true }),
-  ).toBeVisible();
-  // Closed on the way out: a sheet left open would sit over the page it just
-  // reached.
-  await expect(sheet).toBeHidden();
-});
-
-test("offers nothing in the sheet that the account may not reach", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "mobile", "about the phone bar");
-  // A listener, in a library that takes no files: upload and admin are not
-  // hidden by width, they are not this account's to see at all.
-  await page.route("**/api/v2/web/auth/refresh", (route) =>
-    route.fulfill({
-      json: { ...session, user: { ...session.user, role: "user" } },
-    }),
-  );
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-
-  await page.goto("/");
-  await page.locator(".mobile-navigation").getByRole("button", { name: "More" }).click();
-
-  const sheet = page.getByRole("dialog");
-  // Settings is everyone's. What sits behind it is gated in its own menu, and
-  // the test of that menu for this account is with the hub's.
-  await expect(sheet.getByRole("link", { name: "Settings" })).toBeVisible();
-  await expect(sheet.getByRole("link", { name: "Admin" })).toHaveCount(0);
-  await expect(sheet.getByRole("link", { name: "Upload" })).toHaveCount(0);
-  // Every member reads the quality of the files (RFC-016), so Maintenance
-  // has a section for a listener; which ones is the hub's test.
-  await expect(sheet.getByRole("link", { name: "Maintenance" })).toBeVisible();
-  await expect(
-    sheet.getByRole("link", { name: "Needs attention" }),
-  ).toHaveCount(0);
-  await expect(
-    sheet.getByRole("link", { name: "Missing files" }),
-  ).toHaveCount(0);
-});
-
-/** A tab switch keeps the current screen until the destination can render. */
-test("keeps the current tab visible while the next tab loads", async ({
-  page,
-}) => {
-  const asked: string[] = [];
-  let answerGenres: (() => void) | undefined;
-  const genresReady = new Promise<void>((resolve) => {
-    answerGenres = resolve;
-  });
-  await page.route("**/api/v2/genres*", async (route) => {
-    asked.push(new URL(route.request().url()).pathname);
-    await genresReady;
-    await route.fulfill({
-      json: [{ name: "Trip hop", song_count: 4, album_count: 1 }],
-    });
-  });
-  await page.route("**/api/v2/albums*", async (route) => {
-    asked.push(new URL(route.request().url()).pathname);
-    await route.fulfill({ json: albums });
-  });
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  const mobile = await page.locator(".mobile-navigation").isVisible();
-  const genresLink = mobile
-    ? page.locator('.more-sheet a[href="/genres"]')
-    : page.locator(".primary-navigation").getByRole("link", { name: "Genres" });
-  async function visitGenres() {
-    if (mobile) {
-      await page.locator(".mobile-navigation").getByRole("button", { name: "More" }).click();
-    }
-    await genresLink.click();
-  }
-  await visitGenres();
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await expect(page.locator(".skeleton-grid")).toHaveCount(0);
-  await expect(genresLink).toHaveAttribute(
-    "aria-busy",
-    "true",
-  );
-  answerGenres?.();
-  await expect(page.getByRole("heading", { name: "Genres" })).toBeVisible();
-  await page.getByRole("link", { name: "Albums" }).click();
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await visitGenres();
-  await expect(page.getByRole("heading", { name: "Genres" })).toBeVisible();
-  await expect(page.locator(".skeleton-grid")).toHaveCount(0);
-  expect(asked).toEqual(["/api/v2/albums", "/api/v2/genres"]);
-});
-
-/**
- * A tab switch waits for its answer, but not for ever.
- *
- * Past a short deadline the destination is shown with its own wait. A server
- * that never answered held the previous screen, with nothing but a busy tab
- * to say anything was happening.
- */
-test("shows the next tab with its wait when the answer is slow", async ({
-  page,
-}) => {
-  // Never answered: the deadline is the only way out.
-  await page.route("**/api/v2/genres*", () => new Promise<void>(() => {}));
-  await page.route("**/api/v2/albums*", (route) =>
-    route.fulfill({ json: albums }),
-  );
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  const mobile = await page.locator(".mobile-navigation").isVisible();
-  if (mobile) {
-    await page
-      .locator(".mobile-navigation")
-      .getByRole("button", { name: "More" })
-      .click();
-  }
-  const genresLink = mobile
-    ? page.locator('.more-sheet a[href="/genres"]')
-    : page.locator(".primary-navigation").getByRole("link", { name: "Genres" });
-  await genresLink.click();
-  await expect(page).toHaveURL(/\/genres$/);
-  // The destination's own wait, which is what the visitor now looks at.
-  await expect(page.locator("main .skeleton-grid")).toBeVisible();
-});
-
-/**
- * The current tab's link still goes to its plain address.
- *
- * A click on the tab already open is how a second click cancels a switch
- * still loading. With nothing loading, swallowing it left `/playing?view=lyrics`
- * where it was, though the link says `/playing`.
- */
-test("takes the current tab back to its plain address", async ({ page }) => {
-  await page.goto("/playing?view=lyrics");
-  await expect(page).toHaveURL(/\/playing\?view=lyrics$/);
-  const navigation = (await page.locator(".mobile-navigation").isVisible())
-    ? page.locator(".mobile-navigation")
-    : page.locator(".primary-navigation");
-  await navigation.getByRole("link", { name: "Now playing" }).click();
-  await expect(page).toHaveURL(/\/playing$/);
-});
-
-/**
- * The random tab draws once.
- *
- * Its answer is held for no time at all, so a draw made ahead of the switch
- * was thrown away before the page mounted, and the page drew again: two
- * requests, and a wait for both.
- */
-test("draws the random tab once when switching to it", async ({ page }) => {
-  let draws = 0;
-  await page.route("**/api/v2/songs/random*", async (route) => {
-    draws += 1;
-    await route.fulfill({ json: [track] });
-  });
-  await page.route("**/api/v2/albums*", (route) =>
-    route.fulfill({ json: albums }),
-  );
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  if (await page.locator(".mobile-navigation").isVisible()) {
-    await page.locator(".mobile-navigation").getByRole("button", { name: "More" }).click();
-    await page.locator('.more-sheet a[href="/random"]').click();
-  } else {
-    await page.locator(".primary-navigation").getByRole("link", { name: "Random" }).click();
-  }
-  await expect(page.getByRole("heading", { name: "Random" })).toBeVisible();
-  await expect(page.locator(".songs")).toContainText("Army of Me");
-  // Long enough for a second draw from the mount to have been asked.
-  await page.waitForTimeout(500);
-  expect(draws).toBe(1);
-});
-
-/**
- * A tab that is still loading does not overrule a later move.
- *
- * The switch waits for the destination's first answer, and the page stays
- * usable meanwhile. Following a link in it during that wait is a newer
- * decision than the tab: arriving on the tab afterwards took the visitor away
- * from the album they had just opened.
- */
-test("leaves a tab switch behind when the visitor moves on while it loads", async ({
-  page,
-}) => {
-  let answerGenres: (() => void) | undefined;
-  const genresReady = new Promise<void>((resolve) => {
-    answerGenres = resolve;
-  });
-  let genresAnswered = false;
-  await page.route("**/api/v2/genres*", async (route) => {
-    await genresReady;
-    await route.fulfill({
-      json: [{ name: "Trip hop", song_count: 4, album_count: 1 }],
-    });
-    genresAnswered = true;
-  });
-  await page.route("**/api/v2/albums*", (route) =>
-    route.fulfill({ json: albums }),
-  );
-
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  const mobile = await page.locator(".mobile-navigation").isVisible();
-  if (mobile) {
-    await page.locator(".mobile-navigation").getByRole("button", { name: "More" }).click();
-  }
-  const genresLink = mobile
-    ? page.locator('.more-sheet a[href="/genres"]')
-    : page.locator(".primary-navigation").getByRole("link", { name: "Genres" });
-  await genresLink.click();
-  await expect(genresLink).toHaveAttribute("aria-busy", "true");
-
-  await page.locator('.grid a[href="/albums/album-1"]').click();
-  await expect(page).toHaveURL(/\/albums\/album-1$/);
-
-  answerGenres?.();
-  await expect.poll(() => genresAnswered).toBe(true);
-  await expect(genresLink).not.toHaveAttribute("aria-busy", "true");
-  // Long enough for the navigation the answer used to trigger to land.
-  await page.waitForTimeout(500);
-  await expect(page).toHaveURL(/\/albums\/album-1$/);
-  await expect(page.getByRole("heading", { name: "Genres" })).toHaveCount(0);
-});
-
-/**
- * Signing out empties what was answered for the account that left.
- *
- * The cache is the first thing in this client that outlives a screen, and a
- * sign-out here is a client-side navigation — the document is never reloaded,
- * so nothing is forgotten on its own. A catalogue is scoped by library
- * membership and an administrator sees more than that, so carrying any of it
- * across would show the next person what the last one could see.
- *
- * Asserted on the request, because that is the only thing that distinguishes an
- * emptied cache from a full one: both render the same albums, and only one of
- * them had to ask.
- */
-test("forgets the catalogue when the session changes", async ({
-  page,
-}, testInfo) => {
-  // The sidebar that carries the sign-out is hidden below 820px, where the
-  // same gesture lives behind the overflow sheet. What is being measured is
-  // the cache, not where the button sits, so it is measured once.
-  test.skip(testInfo.project.name !== "desktop", "about the sidebar");
-  let asked = 0;
-  await page.route("**/api/v2/albums*", async (route) => {
-    asked += 1;
-    await route.fulfill({ json: albums });
-  });
-  await page.route("**/api/v2/web/auth/login", async (route) => {
-    await route.fulfill({ json: session });
-  });
-
-  await page.goto("/");
-  await expect(page.getByText("Post", { exact: true })).toBeVisible();
-  expect(asked).toBe(1);
-
-  // Away and straight back, without signing out: this is the cache doing its
-  // job, and the contrast that makes the count below mean something.
-  const sidebar = page.getByRole("navigation");
-  await sidebar.getByRole("link", { name: "Queue" }).click();
-  await expect(page.getByRole("heading", { name: "Queue" })).toBeVisible();
-  await sidebar.getByRole("link", { name: "Albums" }).click();
-  await expect(page.getByText("Post", { exact: true })).toBeVisible();
-  expect(asked).toBe(1);
-
-  // Dispatched rather than clicked: the sidebar's footer sits under the fixed
-  // player bar at this viewport, so a real click waits on hit-testing forever.
-  // What this test is about is what the sign-out does to the cache, and the
-  // gesture itself is covered by the accessibility pass.
-  await page
-    .getByRole("button", { name: "Sign out" })
-    .dispatchEvent("click");
-  await expect(page).toHaveURL(/\/login$/);
-
-  // Signed in again through the form, not by reloading the page. A reload
-  // would destroy the cache whatever this code does, and would prove nothing:
-  // the leak this guards against is exactly the one that needs no reload.
-  await page.getByLabel("Username").fill("nocturne");
-  await page.getByLabel("Password").fill("correct horse battery staple");
-  await page.getByRole("button", { name: "Sign in" }).click();
-
-  await expect(page.getByText("Post", { exact: true })).toBeVisible();
-  expect(asked).toBe(2);
-});
-
-/**
- * A cover already in memory does not flash grey on the way back.
- *
- * The bytes are held in a map keyed by hash, but that map holds *promises*, so
- * nothing in it could be read while rendering: every mount started with no
- * image and put the placeholder on screen for a frame — on every navigation
- * back to a grid already visited, for every cover in it. Navidrome's own image
- * cache reads its entry synchronously into `useState` for exactly this reason.
- *
- * Watched frame by frame rather than checked once, because a single frame is
- * the whole of what went wrong: an assertion that ran after the navigation
- * settled would have found the covers in place and called it fixed.
- */
-test("shows a held cover at once, without a grey frame in between", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "about the sidebar");
-
-  const shelf = albums.map((album, index) => ({
-    ...album,
-    artwork_hash: `hash-${index}`,
-  }));
-  await page.route("**/api/v2/albums*", async (route) => {
-    await route.fulfill({ json: shelf });
-  });
-  const png = Buffer.from(
-    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
-    "base64",
-  );
-  await page.route("**/api/v2/artwork/*", async (route) => {
-    await route.fulfill({ contentType: "image/png", body: png });
-  });
-
-  await page.goto("/");
-  // Both covers in place, so their bytes are held before the round trip below.
-  await expect(page.locator("img.cover")).toHaveCount(2);
-
-  const sidebar = page.getByRole("navigation");
-  await sidebar.getByRole("link", { name: "Queue" }).click();
-  await expect(page.getByRole("heading", { name: "Queue" })).toBeVisible();
-
-  const greyFrames = await page.evaluate(async () => {
-    const link = [...document.querySelectorAll("nav a")].find((anchor) =>
-      anchor.textContent?.includes("Albums"),
-    ) as HTMLElement;
-    let grey = 0;
-    link.click();
-    const started = performance.now();
-    return await new Promise<number>((resolve) => {
-      const tick = () => {
-        grey += document.querySelectorAll(".grid .cover-fallback").length;
-        if (performance.now() - started > 400) return resolve(grey);
-        requestAnimationFrame(tick);
-      };
-      requestAnimationFrame(tick);
-    });
-  });
-
-  // The catalogue is back and showing its covers. Asserted after the count and
-  // not instead of it: zero grey frames is also what a navigation that never
-  // arrived would produce, and this assertion is the whole difference between
-  // measuring the fix and measuring nothing at all.
-  await expect(page.locator(".grid img.cover")).toHaveCount(2);
-  expect(greyFrames).toBe(0);
-});
-
-/**
- * A favourite asks the catalogue again, so the star survives the next visit.
- *
- * The table keeps its stars in a map of its own while the request is out, which
- * was enough when every screen re-read on mount: the server's answer replaced
- * that overlay on the way back. Against a cache it is not — the overlay dies
- * with the component and the held listing still carries the old `starred_at`,
- * so the star un-ticks itself on the next visit.
- *
- * Asserted on the request rather than on the star, because the mock answers a
- * fixture that never changes: what marks the difference is that the question
- * was asked at all.
- */
-test("asks the catalogue again after a track is favourited", async ({
-  page,
-}) => {
-  let asked = 0;
-  await page.route("**/api/v2/albums/album-1", async (route) => {
-    asked += 1;
-    await route.fulfill({ json: { ...albums[0], songs: [track] } });
-  });
-  // The star only invalidates once the server has taken it. Answered here
-  // because the harness has no favourites route, and a refused write must not
-  // invalidate anything — which is the other half of what this checks.
-  await page.route("**/api/v2/favorites/track/*", async (route) => {
-    await route.fulfill({ status: 204, body: "" });
-  });
-
-  await page.goto("/albums/album-1");
-  await expect(page.getByRole("heading", { name: "Post" })).toBeVisible();
-  expect(asked).toBe(1);
-
-  await page
-    .getByRole("button", { name: "Add favourite: Army of Me" })
-    .click();
-  await expect
-    .poll(() => asked, { message: "the album was re-asked" })
-    .toBe(2);
-});
-
-/**
- * A cover that failed to load is asked for again; one the server does not hold
- * is not.
- *
- * The two used to be the same answer: any response that was not `ok`, and any
- * network failure, became `null` and was then held for the session — so a
- * single blip left a cover grey until the tab was reloaded. A 404 is the server
- * saying it holds no such artwork, which is worth keeping; anything else is a
- * server that could not answer, which is not.
- */
-test("asks again for a cover that failed, and not for one that is absent", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "about the sidebar");
-
-  const shelf = albums.map((album, index) => ({
-    ...album,
-    artwork_hash: index === 0 ? "hash-flaky" : "hash-absent",
-  }));
-  await page.route("**/api/v2/albums*", async (route) => {
-    await route.fulfill({ json: shelf });
-  });
-
-  const png = Buffer.from(
-    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
-    "base64",
-  );
-  let flaky = 0;
-  let absent = 0;
-  await page.route("**/api/v2/artwork/hash-flaky", async (route) => {
-    flaky += 1;
-    // Down the first time, up afterwards.
-    if (flaky === 1) return route.fulfill({ status: 503, body: "" });
-    await route.fulfill({ contentType: "image/png", body: png });
-  });
-  await page.route("**/api/v2/artwork/hash-absent", async (route) => {
-    absent += 1;
-    await route.fulfill({ status: 404, body: "" });
-  });
-
-  await page.goto("/");
-  // Waited on rather than sampled: the covers are asked for once the observer
-  // says they are on screen, which is a frame or two after the grid renders.
-  await expect.poll(() => flaky).toBe(1);
-  await expect.poll(() => absent).toBe(1);
-  await expect(page.locator(".grid .cover-fallback")).toHaveCount(2);
-
-  const sidebar = page.getByRole("navigation");
-  await sidebar.getByRole("link", { name: "Queue" }).click();
-  await expect(page.getByRole("heading", { name: "Queue" })).toBeVisible();
-  await sidebar.getByRole("link", { name: "Albums" }).click();
-
-  // The one that failed is asked again and arrives; the one the server does not
-  // hold is not asked again, because that answer has not changed.
-  await expect(page.locator(".grid img.cover")).toHaveCount(1);
-  await expect.poll(() => flaky).toBe(2);
-  expect(absent).toBe(1);
-});
-
-/**
- * Starring a track on the shuffle page does not redraw the shuffle.
- *
- * A mutation invalidates everything it could have made wrong, because a song
- * appears in albums, genres, search, history, favourites, playlists and the
- * queue. The draw is the exception: it is the one question deliberately kept
- * out of the cache, so invalidating it asks the server for a *different*
- * sample — and the list goes out from under the hand that starred it, taking
- * the starred track with it.
- */
-test("keeps the shuffle still when a track in it is favourited", async ({
-  page,
-}) => {
-  let drawn = 0;
-  await page.route("**/api/v2/songs/random*", async (route) => {
-    drawn += 1;
-    await route.fulfill({ json: [track] });
-  });
-  await page.route("**/api/v2/favorites/track/*", async (route) => {
-    await route.fulfill({ status: 204, body: "" });
-  });
-
-  await page.goto("/random");
-  await expect(page.getByText("Army of Me")).toBeVisible();
-  expect(drawn).toBe(1);
-
-  await page
-    .getByRole("button", { name: "Add favourite: Army of Me" })
-    .click();
-  // The button renames itself once the star is on, so the state is read from
-  // the label rather than from a locator that no longer matches.
-  await expect(
-    page.getByRole("button", { name: "Remove favourite: Army of Me" }),
-  ).toBeVisible();
-
-  // The same track, still there, and the server was not asked to draw again.
-  await expect(page.getByText("Army of Me")).toBeVisible();
-  expect(drawn).toBe(1);
-});
-
-/**
- * A loop already on screen survives a failed re-mint.
- *
- * A query keeps the answer it has when a later one fails, so `data` and `error`
- * can both be set at once — and saving a correction makes that reachable, since
- * it invalidates everything and this ticket is re-minted. Reading the error
- * first replaced a preview that still played, for a credential good for an
- * hour.
- */
-test("keeps a canvas on screen when re-minting its ticket fails", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
-  canvases.set("song-9", [1, 2, 3]);
-
-  await page.goto("/tracks/song-9/edit");
-  const preview = page.locator("video.canvas-preview");
-  await expect(preview).toBeVisible();
-
-  // From here the ticket route is down, while the loop already on screen is
-  // still playable.
-  await page.route("**/api/v2/tracks/song-9/canvas-ticket", async (route) => {
-    await route.fulfill({ status: 503, body: "" });
-  });
-
-  const title = page.getByLabel("Title", { exact: true });
-  await title.fill("A title this track did not have");
-  // Armed before the click, and awaited after it: the assertions below are
-  // about what the panel shows once the re-mint has actually failed, and
-  // waiting only on "Saved." would leave that to the order two promises happen
-  // to settle in.
-  const refused = page.waitForResponse(
-    (response) =>
-      response.url().endsWith("/canvas-ticket") && response.status() === 503,
-  );
-  await page.getByRole("button", { name: "Save" }).click();
-  await refused;
-  await expect(page.getByText("Saved.")).toBeVisible();
-
-  await expect(preview).toBeVisible();
-  await expect(
-    page.getByText("Whether this track has a canvas could not be read."),
-  ).toHaveCount(0);
-});
-
-/**
- * A correction reaches the listings that were holding the old value.
- *
- * Correcting a track can change its title, its artists, its genres, its year
- * and its numbering — so it can change what an album holds, how a listing
- * orders, which genre a track belongs to and what a search matches. While every
- * screen re-read on mount the question did not arise; against a cache, a
- * listing sits on the old answer for as long as it is held.
- *
- * **Reached by clicking throughout.** A `goto` to the editor would load a fresh
- * document, and a fresh document has an empty cache — the listing would be
- * re-asked whether or not anything was invalidated, and the test would be
- * measuring the reload. That is what defeated the first attempt at this.
- *
- * Asserted on the request, because the mock answers a fixture that does not
- * change: what marks the difference is that the question was asked again.
- */
-test("re-asks a held listing after a correction is saved", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "about the sidebar");
-
-  let asked = 0;
-  await page.route("**/api/v2/albums*", async (route) => {
-    asked += 1;
-    await route.fulfill({ json: albums });
-  });
-  // The album holds the correctable track, so its editor is a link away rather
-  // than an address away.
-  await page.route("**/api/v2/albums/album-1", async (route) => {
-    await route.fulfill({
-      json: { ...albums[0], songs: [correctable.song] },
-    });
-  });
-
-  await page.goto("/");
-  await expect(page.getByText("Post", { exact: true })).toBeVisible();
-  expect(asked).toBe(1);
-
-  const sidebar = page.getByRole("navigation");
-  await page.getByRole("link", { name: /Post/ }).first().click();
-  await page
-    .getByRole("link", { name: "Correct tags: Army Of Me" })
-    .click();
-
-  const title = page.getByLabel("Title", { exact: true });
-  await expect(title).toHaveValue("Army Of Me");
-  await title.fill("Army of Me");
-  await page.getByRole("button", { name: "Save" }).click();
-  await expect(page.getByText("Saved.")).toBeVisible();
-
-  await sidebar.getByRole("link", { name: "Albums" }).click();
-  await expect(page.getByText("Post", { exact: true })).toBeVisible();
-  expect(asked).toBe(2);
-});
-
-/**
- * The icon is declared, and the declared icon is really there.
- *
- * Covered here rather than in the Rust suite, which runs against whatever
- * `build.rs` staged: a real client build when one exists, and a placeholder
- * holding nothing but `index.html` otherwise. The Rust CI never builds the
- * client, so asserting this there would pass on a developer's machine and fail
- * in CI for a reason that has nothing to do with the code. This project's
- * preview server holds the actual build.
- *
- * Both icons are the logo kit's, as its head snippet declares them: the `.ico`
- * sized for the browsers that read nothing else, and the SVG. Both carry the
- * kit's small drawing, the heavier stroke the guide asks for below 24px — a
- * flat Wave green W, where the old icon was five bars cut out of a gradient.
- *
- * What the server does with them — the file when the build has it, a JSON 404
- * when it does not, never the shell, which a browser cannot decode and asks
- * for again — belongs to the fallback and is pinned in `tests/service.rs`.
- */
-test("declares the logo kit's icons, and serves the ones it declares", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
-
-  await page.goto("/");
-  const icons = page.locator('link[rel="icon"]');
-  await expect(icons).toHaveCount(2);
-  await expect(icons.nth(0)).toHaveAttribute("href", "/favicon.ico");
-  await expect(icons.nth(0)).toHaveAttribute("sizes", "48x48");
-  await expect(icons.nth(1)).toHaveAttribute("href", "/favicon.svg");
-  await expect(icons.nth(1)).toHaveAttribute("type", "image/svg+xml");
-
-  const svg = await page.request.get("/favicon.svg");
-  expect(svg.status()).toBe(200);
-  expect(svg.headers()["content-type"]).toContain("image/svg+xml");
-  const drawing = await svg.text();
-  expect(drawing).toContain('fill="#10B981"');
-  expect(drawing).not.toContain("Gradient");
-  expect(drawing).not.toContain("<rect");
-
-  const ico = await page.request.get("/favicon.ico");
-  expect(ico.status()).toBe(200);
-  // An ICO directory: reserved zero, then type 1, then the image count.
-  const bytes = await ico.body();
-  expect([...bytes.subarray(0, 4)]).toEqual([0, 0, 1, 0]);
-  expect(bytes.readUInt16LE(4)).toBeGreaterThan(0);
-});
-
-/**
- * The sidebar's brand is the logo kit's horizontal logo, in the version the
- * guide gives for the background it sits on: the colour file on a light
- * theme, the dark file (mint and white) on a dark one. The theme is the
- * reader's preference rather than the system's, so the choice is made by the
- * root's `dark` class — and both themes are asked here, because a rule that
- * showed one file everywhere would pass on either alone.
- *
- * On a phone the same brand sits in the header instead of the rail; the
- * mobile project asks there.
- */
-test("draws the brand from the logo kit, in the version for the theme", async ({
-  page,
-}, testInfo) => {
-  const where = testInfo.project.name === "mobile" ? ".mobile-header" : ".sidebar";
-  const brand = page.locator(`${where} .brand`);
-
-  const expectLogo = async (file: string, hidden: string) => {
-    const shown = brand.locator(`img[src="/brand/${file}"]`);
-    await expect(shown).toBeVisible();
-    await expect(brand.locator(`img[src="/brand/${hidden}"]`)).toBeHidden();
-    // Really drawn, not a broken image the size of its attributes.
-    await expect
-      .poll(() => shown.evaluate((image: HTMLImageElement) => image.naturalWidth))
-      .toBeGreaterThan(0);
-    const drawn = await shown.evaluate((image) => {
-      const style = getComputedStyle(image);
-      return {
-        width: image.getBoundingClientRect().width,
-        animation: style.animationName,
-        filter: style.filter,
-      };
-    });
-    // The guide's minimum for the horizontal version, and none of what it
-    // rules out: no pulsing, no glow or shadow.
-    expect(drawn.width).toBeGreaterThanOrEqual(120);
-    expect(drawn.animation).toBe("none");
-    expect(drawn.filter).toBe("none");
-    // The logo and the label beside it fit their row.
-    expect(
-      await brand.evaluate((link) => link.scrollWidth <= link.clientWidth),
-    ).toBe(true);
-  };
-
-  await page.goto("/");
-  await expect(page.locator("html")).toHaveClass(/\bdark\b/);
-  await expectLogo(
-    "waveflow-logo-horizontal-dark.svg",
-    "waveflow-logo-horizontal-color.svg",
-  );
-
-  await page.evaluate(() => localStorage.setItem("waveflow.theme", "default"));
-  await page.reload();
-  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
-  await expect(page.locator("html")).not.toHaveClass(/\bdark\b/);
-  await expectLogo(
-    "waveflow-logo-horizontal-color.svg",
-    "waveflow-logo-horizontal-dark.svg",
-  );
-});
-
-/**
- * The first-load screen is in the document the server sends, and it carries
- * the one vector file.
- *
- * Structural only: nothing here times anything. The floor and the fade are
- * pinned in `src/lib/splash.test.ts` against fake timers, because an assertion on
- * when the screen left would be an assertion about how fast the runner parsed
- * 276 kB of React.
- *
- * What this adds is the half a unit test cannot see: that the markup ships in
- * `index.html` rather than in the bundle — a splash inside the bundle could
- * only appear after the wait it exists to dress — and that it points at the
- * logo kit's symbol, in mint because this screen is always the dark
- * background. A hand-drawn copy of the mark is the defect this screen's own
- * issue was filed about. And that it holds still: the mark used to breathe
- * here, and the brand guide rules a pulsing logo out.
- */
-test("ships the first-load screen in the document, drawn from the logo kit", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
-
-  // Read off the wire, before any script has run. Asking the rendered page
-  // would be asking after the screen has already been taken away.
-  const document_ = await page.request.get("/");
-  const html = await document_.text();
-  expect(html).toContain('id="splash"');
-  expect(html).toContain('src="/brand/waveflow-symbol-mint.svg"');
-  const inlineStyle = html.split("<style>")[1]?.split("</style>")[0] ?? "";
-  expect(inlineStyle).toContain("#splash");
-  expect(inlineStyle).not.toContain("animation");
-  expect(inlineStyle).not.toContain("@keyframes");
-
-  const logo = await page.request.get("/brand/waveflow-symbol-mint.svg");
-  expect(logo.status()).toBe(200);
-  expect(logo.headers()["content-type"]).toContain("image/svg+xml");
-  // The kit's symbol: one flat path in mint, no gradient — so a file swapped
-  // back to the old five bars fails here.
-  const svg = await logo.text();
-  expect(svg.match(/<path/g)).toHaveLength(1);
-  expect(svg).toContain('fill="#34D399"');
-  expect(svg).not.toContain("Gradient");
-  expect(svg).not.toContain("<rect");
-
-  await page.goto("/");
-  // Gone from the document once the application is up — removed rather than
-  // left transparent, because an element over the whole viewport still takes
-  // a click at zero opacity.
-  await expect(page.locator("#splash")).toHaveCount(0);
-  await expect(page.locator("#main-content")).toBeVisible();
-
-  // And on an address no route claims. This is the reason the dismissal sits
-  // in the root route component rather than in the sign-in and shell
-  // components: `notFoundComponent` belongs to the root and renders inside
-  // neither of those, so a first visit to an unknown address would have kept
-  // the mark until the ten-second ceiling.
-  await page.goto("/no-such-screen");
-  await expect(page.locator("#splash")).toHaveCount(0);
-});
-
-/**
- * The first-load screen leaves even when the client never arrives.
- *
- * `dismissSplash` runs from the bundle, so it cannot be what rescues a bundle
- * that fails to load: a reader would be left with a pulsing mark over the
- * whole viewport for as long as the tab stayed open — worse than a blank
- * page, which at least looks broken rather than looking like it is working.
- *
- * Eleven seconds of patience here, against a ten-second ceiling. It is the
- * slowest test in this file and it earns it: an untested fallback for a
- * failure nobody reproduces is the kind that turns out not to work on the one
- * day it matters.
- */
-test("takes the first-load screen away even when the bundle never loads", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
-
-  // Every script the document asks for is refused, so React never mounts and
-  // nothing in the bundle can clean up after it.
-  await page.route("**/*.js", (route) => route.abort());
-  await page.route("**/src/main.tsx", (route) => route.abort());
-
-  await page.goto("/");
-  // Up, and covering the page: this is the state the ceiling exists for.
-  await expect(page.locator("#splash")).toBeVisible();
-
-  // While it is up is the only moment the leaving state can be read on the
-  // real element. Marked by hand rather than waited for: what is checked is
-  // the rule, not the clock. Without `pointer-events: none` the layer keeps
-  // taking clicks for the length of the fade — and for all of it under
-  // `prefers-reduced-motion`, where it is already invisible.
-  await page.locator("#splash").evaluate((element: HTMLElement) => {
-    element.dataset.leaving = "true";
-  });
-  await expect(page.locator("#splash")).toHaveCSS("pointer-events", "none");
-  await page.locator("#splash").evaluate((element: HTMLElement) => {
-    delete element.dataset.leaving;
-  });
-
-  await expect(page.locator("#splash")).toHaveCount(0, { timeout: 11_000 });
-  // What is revealed is an empty root — the page as it was before this screen
-  // existed. The ceiling restores the old failure rather than inventing one.
-  await expect(page.locator("#root")).toBeEmpty();
-});
-
-/**
- * The playing screen says what the file is.
- *
- * The facts, not the meter: the meter is five lit bars and `aria-hidden`,
- * because the band it summarises is printed in words right beside it and a
- * reader should hear that once rather than twice.
- *
- * Asserted on the rendered line rather than on the mock that fed it. The mock
- * carries these fields because `Song` declares them, so it agrees with the
- * declaration by construction — exactly the loop the lyrics test above was
- * written against, where a `snake_case` envelope the server never sent was
- * confirmed by a mock built from it. What the server really answers is
- * pinned in `tests/native_api.rs`, against the bytes of a WAV.
- */
-test("says what the file is on the playing screen", async ({ page }) => {
-  await page.goto("/playing");
-
-  const facts = page.locator(".file-facts");
-  await expect(facts).toBeVisible();
-  // Read as one string: the order is part of what makes it legible at a
-  // glance, and six separate assertions would pass on a line that listed
-  // them backwards.
-  await expect(facts).toHaveText(
-    "Lossless · FLAC · 957 kbps · 44.1 kHz · 16 bit · 2 ch · 28 MB",
-  );
-
-  // Four of five steps lit: lossless, and not the hi-res band above it.
-  await expect(page.locator(".quality-meter span.on")).toHaveCount(4);
-  // And hidden from assistive technology, so the band is announced once.
-  await expect(page.locator(".quality-meter")).toHaveAttribute(
-    "aria-hidden",
-    "true",
-  );
-});
-
-/**
- * The clients holding a credential on this account, which nothing showed
- * before.
- *
- * The material existed and was reachable only by the instance administrator,
- * buried in a disclosure on a screen an ordinary account cannot open. So a
- * listener could not find out which devices were reading their library, let
- * alone stop one.
- *
- * A revoked credential is left out rather than struck through: this list
- * answers who **can** read the library, and one that cannot is not an answer
- * to that question. The administration screen keeps the full history.
- */
-test("shows the clients that can read the library, and revokes one", async ({
-  page,
-}) => {
-  await page.goto("/settings");
-
-  // Located by its heading rather than by its position. `.last()` named this
-  // panel until a second self-scoped panel was added below it, and a locator
-  // that depends on the order of the page silently follows whatever lands at
-  // the end.
-  const clients = page
-    .locator(".settings-panel")
-    .filter({ has: page.getByRole("heading", { name: "Registered clients" }) });
-  await expect(
-    clients.getByRole("heading", { name: "Registered clients" }),
-  ).toBeVisible();
-  // One of the three: the second is revoked and the third is past its
-  // expiry, and neither can read the library any more.
-  await expect(clients.getByRole("listitem")).toHaveCount(1);
-  await expect(clients.getByText("the kitchen speaker")).toBeVisible();
-  await expect(clients.getByText("a laptop that is gone")).toHaveCount(0);
-  await expect(
-    clients.getByText("a tablet whose year ran out"),
-  ).toHaveCount(0);
-
-  // Registering one shows the secret, once, and the list follows.
-  await clients.getByLabel("What it is for").fill("my phone");
-  await clients.getByRole("button", { name: "Register" }).click();
-  await expect(
-    page.getByText("wfapi_shown_once_and_never_again"),
-  ).toBeVisible();
-  await expect(clients.getByRole("listitem")).toHaveCount(2);
-
-  // And revoking stops one. The row goes, because the row is the answer to
-  // "who can read my library".
-  await clients
-    .getByRole("button", { name: "Revoke: the kitchen speaker" })
-    .click();
-  await expect(clients.getByText("the kitchen speaker")).toHaveCount(0);
-  await expect(clients.getByRole("listitem")).toHaveCount(1);
-
-  // **And a second press while the registration is out sends nothing.** Two
-  // registrations mint two credentials and only one secret reaches the
-  // screen: the other is a credential on this library whose secret nobody
-  // holds. This panel shipped without the guard; the one below it has the
-  // same one now, for the same reason.
-  let release = () => {};
-  clientGate = new Promise<void>((resolve) => {
-    release = resolve;
-  });
-  clientWrites = [];
-  const register = clients.getByRole("button", { name: "Register" });
-  await clients.getByLabel("What it is for").fill("a slow tablet");
-  await register.click();
-  await expect.soft(register).toBeDisabled();
-  await register.click({ force: true });
-  await register.click({ force: true });
-  release();
-  await expect(register).toBeEnabled();
-  expect(clientWrites).toEqual(["POST"]);
-});
-
-/**
- * The account changes its own Subsonic password, and switches it off.
- *
- * That password is typed into third-party clients, on phones, which is the
- * ordinary way an application password leaks. Until this panel its owner could
- * do neither — both server routes were administrative — so answering "my key
- * has leaked" meant finding an operator.
- */
-test("changes the Subsonic password, then switches it off", async ({
-  page,
-}) => {
-  await page.goto("/settings");
-
-  const subsonic = page
-    .locator(".settings-panel")
-    .filter({ has: page.getByRole("heading", { name: "Subsonic password" }) });
-  await expect(subsonic).toBeVisible();
-  // Set and never changed, so one date and not two.
-  await expect(subsonic.getByText(/^set /)).toBeVisible();
-  await expect(subsonic.getByText(/last changed/)).toHaveCount(0);
-
-  // **The key moves with the password**, and it is shown once. A leaked
-  // `wfsk_` key authenticates on its own, so a rotation that kept it would
-  // answer nothing.
-  await subsonic.getByLabel("New password").fill("a long enough replacement");
-  await subsonic.getByRole("button", { name: "Change it" }).click();
-  await expect(page.getByText("wfsk_shown_once_only")).toBeVisible();
-  await expect(subsonic.getByText(/last changed/)).toBeVisible();
-
-  // **Asked twice.** The account cannot put this credential back without an
-  // operator, so the first press only arms the second. `exact` because
-  // "Yes, switch it off" contains "Switch it off", and the default substring
-  // match would make every locator here ambiguous.
-  const off = subsonic.getByRole("button", {
-    name: "Switch it off",
-    exact: true,
-  });
-  const reallyOff = subsonic.getByRole("button", {
-    name: "Yes, switch it off",
-  });
-  await off.click();
-  await expect(off).toHaveCount(0);
-  // Backing out leaves the credential exactly as it was.
-  await subsonic.getByRole("button", { name: "Cancel" }).click();
-  await expect(off).toBeVisible();
-  await expect(reallyOff).toHaveCount(0);
-  await expect(subsonic.getByText(/^set /)).toBeVisible();
-
-  // Switching it off leaves the panel saying the account holds none — and
-  // offering nothing, because creating one opens the facade to an account and
-  // that is the operator's decision.
-  await off.click();
-  await reallyOff.click();
-  await expect(
-    subsonic.getByText(
-      "You have no Subsonic password, so no Subsonic client can read your library. Ask the administrator for one.",
-    ),
-  ).toBeVisible();
-  await expect(subsonic.getByLabel("New password")).toHaveCount(0);
-  await expect(
-    subsonic.getByRole("button", { name: "Change it" }),
-  ).toHaveCount(0);
-});
-
-/**
- * A short password is refused before it is sent.
- *
- * The server answers 422 under twelve characters, but that arrives after the
- * person has committed to the password they chose — and the panel would have
- * nothing to say about which of the two failures it was.
- */
-test("refuses a Subsonic password under twelve characters", async ({
-  page,
-}) => {
-  await page.goto("/settings");
-
-  const subsonic = page
-    .locator(".settings-panel")
-    .filter({ has: page.getByRole("heading", { name: "Subsonic password" }) });
-  await subsonic.getByLabel("New password").fill("abcdefghijk");
-  await subsonic.getByRole("button", { name: "Change it" }).click();
-  await expect(subsonic.getByText("Use at least 12 characters.")).toBeVisible();
-  // Nothing was sent: the credential still reads as never changed.
-  await expect(subsonic.getByText(/last changed/)).toHaveCount(0);
-  await expect(page.getByText("wfsk_shown_once_only")).toHaveCount(0);
-});
-
-/**
- * A second press while the rotation is out sends nothing.
- *
- * **This one is about a secret, not about tidiness.** Each rotation mints a key
- * and stores its hash, so two in flight leave the second one's hash stored
- * while the panel may have settled on the first one's key — a `wfsk_` key
- * already dead, shown for a credential whose whole point is that it is shown
- * once. The person copies it into their clients and the working key is never
- * shown again.
- */
-test("sends one rotation however many times the button is pressed", async ({
-  page,
-}) => {
-  let release = () => {};
-  subsonicGate = new Promise<void>((resolve) => {
-    release = resolve;
-  });
-
-  await page.goto("/settings");
-  const subsonic = page
-    .locator(".settings-panel")
-    .filter({ has: page.getByRole("heading", { name: "Subsonic password" }) });
-  const change = subsonic.getByRole("button", { name: "Change it" });
-
-  await subsonic.getByLabel("New password").fill("a long enough replacement");
-  await change.click();
-  // **Soft**, which is the only `expect.soft` in this file and earns it: the
-  // disabled state is the mechanism and the request count below is the
-  // consequence, and a hard failure here would stop the test before the
-  // consequence was ever measured. Removing the guard has to show both.
-  await expect.soft(change).toBeDisabled();
-  await change.click({ force: true });
-  await change.click({ force: true });
-
-  release();
-  await expect(page.getByText("wfsk_shown_once_only")).toBeVisible();
-  await expect(change).toBeEnabled();
-  expect(subsonicWrites).toEqual(["PUT"]);
-});
-
-/**
- * The words as the subject of the screen, and what timings buy.
- *
- * A sheet that carries them gets two things the strip cannot give: the sung
- * line is held in view, and every line is a button that seeks to it. A sheet
- * without them gets neither — and says so by having no buttons at all, rather
- * than promising a jump it cannot compute.
- *
- * No audio is served in these runs, so the head stays at zero and the first
- * line is the sung one. That is enough to tell a marked line from an unmarked
- * one; what it deliberately does not claim is that pressing a line moved the
- * head, which without a stream would be a measurement of nothing.
- */
-test("gives the words a view of their own, with timings where there are any", async ({
-  page,
-}) => {
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: "Rue Delacour",
-      displayTitle: "Nocturne",
-      lang: "eng",
-      synced: true,
-      line: [
-        { start: 0, value: "the lamps come on along the quay" },
-        { start: 5_000, value: "and the water keeps the light" },
-        { start: 12_500, value: "the lamps come on along the quay" },
-        // An instrumental break: timed, and with no words to name it by.
-        { start: 20_000, value: "" },
-      ],
-    },
-  ]);
-
-  await page.goto("/playing");
-  await page.getByRole("link", { name: "Lyrics", exact: true }).click();
-
-  const view = page.locator(".lyrics-view");
-  await expect(view).toBeVisible();
-  await expect(page).toHaveURL(/\?view=lyrics$/);
-  // The strip is gone, not duplicated: one view at a time, or the words would
-  // be on the screen twice and the sung line marked in two places.
-  await expect(page.locator(".playing")).toHaveCount(0);
-
-  // The head is at zero, so the first line is the one being sung — and a
-  // refrain repeated word for word does not take the mark with it.
-  const lines = view.getByRole("listitem");
-  await expect(lines).toHaveCount(4);
-  await expect(lines.nth(0)).toHaveAttribute("aria-current", "true");
-  await expect(lines.nth(2)).not.toHaveAttribute("aria-current", "true");
-
-  // **Every line is a button, named by its words and then the time.** The
-  // words because the name must contain what is on screen — voice control
-  // finds a control by what it shows — and the time because the words alone
-  // say nothing about what pressing does. A blank line has no words to
-  // repeat, so it keeps the time alone rather than a name that opens on a
-  // comma.
-  await expect(view.getByRole("button")).toHaveCount(4);
-  await expect(
-    view.getByRole("button", {
-      name: "and the water keeps the light, jump to 0:05",
-      exact: true,
-    }),
-  ).toBeVisible();
-  // Visible, not merely present: a blank line held a collapsible space, so its
-  // button had no height — reachable by the keyboard and drawn nowhere.
-  await expect(
-    view.getByRole("button", { name: "Jump to 0:20", exact: true }),
-  ).toBeVisible();
-  await expect(
-    view.getByText("This sheet carries timings — press a line to jump to it."),
-  ).toBeVisible();
-
-  await expectNoWcagViolations(page);
-
-  // **The switcher says where it is, once.** All three entries point at one
-  // path, and the router counts a link carrying no search as matching every
-  // search — so this read `['Detail', 'Lyrics']` before `activeOptions` was
-  // made exact, and the screen claimed to be in two views at once. A count
-  // rather than one attribute: the defect was an extra mark, which an
-  // assertion on the right one passes straight through.
-  const current = page.locator('.view-switcher a[aria-current="page"]');
-  await expect(current).toHaveText("Lyrics");
-  await page.goto("/playing");
-  await expect(page.locator(".playing")).toBeVisible();
-  await expect(current).toHaveText("Detail");
-
-  // And a mode this build does not know is not a mode: the detail view
-  // stands, rather than a blank screen or a crash.
-  await page.goto("/playing?view=karaoke");
-  await expect(page.locator(".playing")).toBeVisible();
-  await expect(page.locator(".lyrics-view")).toHaveCount(0);
-});
-
-/**
- * A sheet that arrives after the head has already moved is still centred.
- *
- * The case a review asked about: open the lyrics view mid-track with nothing
- * cached, so the column mounts only once the sheet lands. The claim was that
- * the scroll effect would not re-run, because it watches `active` and not the
- * three-state reading beside it. It does run — `active` is derived from the
- * sheet, so it is `-1` until one arrives and cannot already name a line — and
- * this is that argument turned into a measurement rather than left as one.
- */
-test("centres a sheet that lands after the head has moved", async ({
-  page,
-}) => {
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: "Rue Delacour",
-      displayTitle: "Nocturne",
-      lang: "eng",
-      synced: true,
-      line: Array.from({ length: 40 }, (_, index) => ({
-        start: index * 5_000,
-        value: `late line ${index}`,
-      })),
-    },
-  ]);
-  let release = () => {};
-  lyricsGate = new Promise<void>((resolve) => {
-    release = resolve;
-  });
-
-  try {
-    await page.goto("/playing?view=lyrics");
-    // Waiting, not empty: the view's frame is there and the column is not.
-    await expect(page.locator(".lyrics-view")).toContainText("Loading");
-    await expect(page.locator(".lyrics-view ol")).toHaveCount(0);
-
-    // The head moves while there is no sheet to mark, so `active` stays -1
-    // and the effect has nothing to do.
-    for (let press = 0; press < 20; press += 1) {
-      await page.keyboard.press("ArrowRight");
-    }
-  } finally {
-    // **Released whatever happened.** An assertion failing above would leave
-    // the route waiting on this promise for ever, and the context teardown
-    // waiting on the route — so the test would not fail, it would hang. The
-    // reset in `beforeEach` guards the tests after this one, not this one.
-    //
-    // The two gates added with the credential panels, and the canvas one
-    // above them, carry the same hazard and are left as they are: wrapping
-    // them means restructuring three tests this branch has no other reason to
-    // touch.
-    release();
-  }
-  const column = page.locator(".lyrics-view ol");
-  await expect(column).toBeVisible();
-  await expect(
-    page.getByRole("listitem").filter({ hasText: "late line 20" }),
-  ).toHaveAttribute("aria-current", "true");
-  // The line the head is on is in view, which is the whole claim.
-  await expect.poll(() => column.evaluate((list) => list.scrollTop)).toBeGreaterThan(0);
-});
-
-/**
- * A sheet without timings offers no seeking, and does not pretend to follow.
- *
- * The same view, the other half of the rule: `synced` is the server's statement
- * that the lines carry starts, and everything this view adds over the strip
- * hangs off it.
- */
-test("offers no seeking on a sheet that carries no timings", async ({
-  page,
-}) => {
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: null,
-      displayTitle: "Nocturne",
-      lang: "eng",
-      synced: false,
-      line: [
-        { value: "the lamps come on along the quay" },
-        { value: "and the water keeps the light" },
-      ],
-    },
-  ]);
-
-  await page.goto("/playing?view=lyrics");
-
-  const view = page.locator(".lyrics-view");
-  await expect(view.getByRole("listitem")).toHaveCount(2);
-  await expect(view.getByRole("button")).toHaveCount(0);
-  await expect(
-    view.getByText("This sheet carries timings — press a line to jump to it."),
-  ).toHaveCount(0);
-  // Nothing is marked: an unsynced sheet has no start to compare against, and
-  // weighting a line would be a claim about where the track is.
-  await expect(view.locator("[aria-current]")).toHaveCount(0);
-});
-
-/**
- * The strip beside the cover reads the way the lyrics view does.
- *
- * It used to mark the sung line and leave it to scroll out of its own box, and
- * no line could be pressed. Now it holds the sung line in view, and a synced
- * line is a button that seeks to it. A sheet without timings still gets no
- * buttons.
- */
-test("follows the sung line in the strip beside the cover, and seeks from it", async ({
-  page,
-}) => {
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: "Rue Delacour",
-      displayTitle: "Nocturne",
-      lang: "eng",
-      synced: true,
-      line: Array.from({ length: 40 }, (_, index) => ({
-        start: index * 5_000,
-        value: `strip line ${index}`,
-      })),
-    },
-  ]);
-
-  await page.goto("/playing");
-  const strip = page.locator(".playing .lyrics");
-  const column = strip.locator("ol");
-  await expect(column).toBeVisible();
-  // Every timed line is a button, named by its words and then the time.
-  await expect(strip.getByRole("button")).toHaveCount(40);
-  await expect(
-    strip.getByRole("button", {
-      name: "strip line 1, jump to 0:05",
-      exact: true,
-    }),
-  ).toBeVisible();
-  await expect.poll(() => column.evaluate((list) => list.scrollTop)).toBe(0);
-
-  // The head moves well down the sheet: the sung line is marked, and the strip
-  // has scrolled itself to it rather than leaving it below its own fold.
-  for (let press = 0; press < 20; press += 1) {
-    await page.keyboard.press("ArrowRight");
-  }
-  await expect(
-    strip.getByRole("listitem").filter({ hasText: "strip line 20" }),
-  ).toHaveAttribute("aria-current", "true");
-  await expect
-    .poll(() => column.evaluate((list) => list.scrollTop))
-    .toBeGreaterThan(0);
-  // The strip scrolls itself and nothing else: the page stays where it was.
-  expect(await page.evaluate(() => window.scrollY)).toBe(0);
-
-  // Pressing a line moves the head to it. The sung line is derived from the
-  // player's position, so the mark landing on the pressed line is the head
-  // having moved there — the arrow keys above go through the same `seek`.
-  await strip
-    .getByRole("button", { name: "strip line 5, jump to 0:25", exact: true })
-    .click();
-  await expect(
-    strip.getByRole("listitem").filter({ hasText: /^strip line 5$/ }),
-  ).toHaveAttribute("aria-current", "true");
-  await expect(
-    strip.getByRole("listitem").filter({ hasText: /^strip line 20$/ }),
-  ).not.toHaveAttribute("aria-current", "true");
-
-  await expectNoWcagViolations(page);
-
-  // Without timings, the strip offers no seeking, as the lyrics view does not.
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: null,
-      displayTitle: "Nocturne",
-      lang: "eng",
-      synced: false,
-      line: [
-        { value: "the lamps come on along the quay" },
-        { value: "and the water keeps the light" },
-      ],
-    },
-  ]);
-  await page.reload();
-  await expect(strip.getByRole("listitem")).toHaveCount(2);
-  await expect(strip.getByRole("button")).toHaveCount(0);
-});
-
-/**
- * The immersive view, and the two things that make it a mode rather than a trap.
- *
- * 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. And
- * it **lives in the location**, so Back leaves the view rather than the screen
- * — which is the press everybody makes on a phone, and the whole reason the
- * mode is a search parameter instead of a `useState`.
- */
-test("opens the immersive view, and Back leaves the view and not the screen", async ({
-  page,
-}) => {
-  await page.goto("/playing");
-  await page.getByRole("link", { name: "Immersive" }).click();
-
-  const immersive = page.locator("dialog.immersive");
-  await expect(immersive).toBeVisible();
-  await expect(page).toHaveURL(/\?view=immersive$/);
-  await expect(immersive.locator(".immersive-cover")).toBeVisible();
-  // The transport, so the mode can be sat in.
-  for (const name of ["Previous track", "Play", "Next track"]) {
-    await expect(immersive.getByRole("button", { name })).toBeVisible();
-  }
-
-  await expectNoWcagViolations(page);
-
-  // **Escape, which is the platform's and not ours.** `<dialog>` answers it,
-  // and the navigation hangs off the close rather than off the key, so the
-  // button below and this press go through one closer.
-  await page.keyboard.press("Escape");
-  await expect(immersive).toHaveCount(0);
-  await expect(page).toHaveURL(/\/playing$/);
-  await expect(page.locator(".playing")).toBeVisible();
-
-  // **And Back does not reopen what Escape just closed.** The close replaces
-  // the immersive entry rather than pushing a detail one on top of it.
-  // Pushing left `/playing → ?view=immersive → /playing` in the history, so
-  // this press landed back on the immersive entry and opened the view again —
-  // the opposite of the reason the mode is in the location.
-  await page.goBack();
-  await expect(page.locator("dialog.immersive")).toHaveCount(0);
-
-  // And Back, from inside the view, leaves the view.
-  await page.getByRole("link", { name: "Immersive" }).click();
-  await expect(page.locator("dialog.immersive")).toBeVisible();
-  await page.goBack();
-  await expect(page.locator("dialog.immersive")).toHaveCount(0);
-  await expect(page).toHaveURL(/\/playing$/);
-  await expect(page.locator(".playing")).toBeVisible();
-
-  // The close button takes the same route out.
-  await page.getByRole("link", { name: "Immersive" }).click();
-  await page
-    .getByRole("button", { name: "Leave the immersive view" })
-    .click();
-  await expect(page.locator("dialog.immersive")).toHaveCount(0);
-  await expect(page).toHaveURL(/\/playing$/);
-});
-
-/**
- * The sung line is held in view, and only the column moves to do it.
- *
- * `scrollIntoView` scrolls every scrollable ancestor it has, the window
- * included, so each new sung line dragged the whole page back to the words —
- * and somebody reading the saved positions underneath was hauled upwards every
- * few seconds. The column scrolls itself now.
- *
- * The head is moved with the keyboard rather than by pressing a line, because
- * Playwright scrolls an element into view before clicking it and that scroll
- * would be the one under test. Twelve saved positions are there to make the
- * page taller than the viewport: without something below the fold, "the window
- * did not scroll" is true however the scrolling is done.
- */
-test("holds the sung line in view without dragging the page", async ({
-  page,
-}) => {
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: "Rue Delacour",
-      displayTitle: "Nocturne",
-      lang: "eng",
-      synced: true,
-      line: Array.from({ length: 40 }, (_, index) => ({
-        start: index * 5_000,
-        value: `line number ${index}`,
-      })),
-    },
-  ]);
-  bookmarks = Array.from({ length: 12 }, (_, index) => ({
-    position_ms: index * 1_000,
-    comment: null,
-    created_at: 1,
-    updated_at: 1,
-    song: {
-      id: `saved-${index}`,
-      title: `Somewhere to pick up ${index}`,
-      artist: "Rue Delacour",
-    },
-  }));
-
-  await page.goto("/playing?view=lyrics");
-  const column = page.locator(".lyrics-view ol");
-  await expect(column).toBeVisible();
-  // The list the screen renders under the track, drawn by a test at last.
-  await expect(page.locator(".bookmark-list li")).toHaveCount(12);
-  const scrollable = await page.evaluate(
-    () => document.documentElement.scrollHeight > window.innerHeight,
-  );
-  expect(scrollable).toBe(true);
-
-  // **Scrolled down to the saved positions first, which is the whole case.**
-  // With the column fully on screen there is nothing for an ancestor scroll to
-  // do, so the page stays put however the following is written — the complaint
-  // was about a reader who had scrolled away from the words and kept being
-  // hauled back to them.
-  await page.evaluate(() => window.scrollTo(0, 400));
-  const before = await page.evaluate(() => window.scrollY);
-  expect(before).toBeGreaterThan(0);
-
-  // Twenty presses of five seconds each: the player listens on the window, and
-  // a modal dialog is the only thing that would be in the way.
-  for (let press = 0; press < 20; press += 1) {
-    await page.keyboard.press("ArrowRight");
-  }
-
-  // The head moved, which is also the proof that a line's own press would
-  // seek: both go through `player.seek`, and the position is React state
-  // rather than something read back off an element that is playing nothing.
-  await expect(
-    page.getByRole("listitem").filter({ hasText: "line number 20" }),
-  ).toHaveAttribute("aria-current", "true");
-
-  // Smooth scrolling settles over frames, so the column is polled rather than
-  // read once.
-  await expect
-    .poll(() => column.evaluate((list) => list.scrollTop))
-    .toBeGreaterThan(0);
-  // And the page did not move under the reader.
-  expect(await page.evaluate(() => window.scrollY)).toBe(before);
-});
-
-/**
- * The radio page, which manages a list the catalogue knows nothing about.
- *
- * Worth its own test for one reason: a station is written and then read back,
- * so every control here depends on the list the server holds rather than on
- * what the page remembers. The harness keeps the list for that reason too — a
- * mock answering a constant would let a delete that deletes nothing pass.
- */
-test("keeps a list of radio stations, replacing rather than patching", async ({
-  page,
-}) => {
-  await page.goto("/radio");
-  await expect(
-    page.getByRole("heading", { name: "Radio", exact: true }),
-  ).toBeVisible();
-  await expect(
-    page.getByText("No stations yet. Add one to keep it here."),
-  ).toBeVisible();
-
-  // The form lives in a dialog the page's own button opens.
-  await page.getByRole("button", { name: "Add station" }).click();
-  const form = page.getByRole("dialog", { name: "Add a station" });
-  await form.getByLabel("Station name").fill("Radio Nova");
-  await form.getByLabel("Stream address").fill("https://nova.example.org/live");
-  await form.getByLabel("Station page (optional)").fill("https://nova.example.org/");
-  await form.getByRole("button", { name: "Save station" }).click();
-  await expect(form).toHaveCount(0);
-
-  const listed = page.locator(".station-grid li");
-  await expect(listed).toHaveCount(1);
-  await expect(listed.first()).toContainText("Radio Nova");
-  await expect(listed.first()).toContainText("https://nova.example.org/live");
-  await expect(
-    page.getByRole("link", { name: "Station page" }),
-  ).toHaveAttribute("href", "https://nova.example.org/");
-
-  // An address the server would refuse is refused here first, with a reason,
-  // and the button stays shut rather than sending a request to find out.
-  await page.getByRole("button", { name: "Add station" }).click();
-  await form.getByLabel("Station name").fill("Elsewhere");
-  await form.getByLabel("Stream address").fill("mms://elsewhere.example.org/s");
-  await expect(
-    form.getByText("An address must start with http:// or https://."),
-  ).toBeVisible();
-  await expect(
-    form.getByRole("button", { name: "Save station" }),
-  ).toBeDisabled();
-
-  await expectNoWcagViolations(page);
-  await form.getByRole("button", { name: "Cancel" }).click();
-  await expect(form).toHaveCount(0);
-
-  // Editing, from the card's menu, loads the station into the same form, and
-  // says what saving means: the page address is cleared because the form
-  // sends every field.
-  await listed.first().getByRole("button", { name: "Actions for Radio Nova" }).click();
-  await page.getByRole("menuitem", { name: "Edit" }).click();
-  const editor = page.getByRole("dialog", { name: "Edit “Radio Nova”" });
-  await expect(editor.getByLabel("Station name")).toHaveValue("Radio Nova");
-  await expect(editor.getByLabel("Station page (optional)")).toHaveValue(
-    "https://nova.example.org/",
-  );
-  await expect(
-    editor.getByText(
-      "Saving replaces every field, so an empty page address clears the stored one.",
-    ),
-  ).toBeVisible();
-  await editor.getByLabel("Station name").fill("Radio Nova Classics");
-  await editor.getByLabel("Station page (optional)").fill("");
-  await editor.getByRole("button", { name: "Save station" }).click();
-
-  await expect(listed.first()).toContainText("Radio Nova Classics");
-  // Cleared, which is the half a patch would have got wrong.
-  await expect(page.getByRole("link", { name: "Station page" })).toHaveCount(0);
-
-  // A delete is confirmed first, then goes.
-  page.once("dialog", (question) => void question.accept());
-  await listed
-    .first()
-    .getByRole("button", { name: "Actions for Radio Nova Classics" })
-    .click();
-  await page.getByRole("menuitem", { name: "Delete" }).click();
-  await expect(listed).toHaveCount(0);
-  await expect(
-    page.getByText("No stations yet. Add one to keep it here."),
-  ).toBeVisible();
-});
-
-/**
- * The form is closed for the length of a write, and the station playing is
- * not.
- *
- * **The held request below is what makes this test able to fail.** Every other
- * mock in this file answers instantly, and against an instant answer a guarded
- * form and an unguarded one look identical: the save is over before a second
- * click or a second edit could begin. A request held open until this test lets
- * it go leaves the window open for as long as the assertions need — where a
- * fixed delay would be a race the slowest runner loses (constat de revue,
- * pris; the two tests above it hold their requests the same way).
- */
-test("closes the form while a station is saving, and leaves listening alone", async ({
-  page,
-}) => {
-  await page.goto("/radio");
-  const form = page.getByRole("dialog", { name: "Add a station" });
-  await page.getByRole("button", { name: "Add station" }).click();
-  await form.getByLabel("Station name").fill("Radio Nova");
-  await form.getByLabel("Stream address").fill("https://nova.example.org/live");
-  await form.getByRole("button", { name: "Save station" }).click();
-  await expect(page.locator(".station-grid li")).toHaveCount(1);
-  expect(radioWrites).toEqual(["POST"]);
-
-  // Held from here on, so only the second save waits.
-  let release = () => {};
-  radioGate = new Promise<void>((resolve) => {
-    release = resolve;
-  });
-
-  await page.getByRole("button", { name: "Add station" }).click();
-  await form.getByLabel("Station name").fill("FIP");
-  await form.getByLabel("Stream address").fill("https://fip.example.org/live");
-  await form.getByRole("button", { name: "Save station" }).click();
-
-  // Shut for the whole round trip: the button cannot be pressed again, and the
-  // fields cannot be refilled under a save that is about to clear them.
-  //
-  // **Holding the request is what lets the first line below distinguish**, and
-  // it did not when the mock merely answered slowly: an empty form disables
-  // that button too, so the assertion retried until the save landed, cleared
-  // the fields and disabled the button for the other reason. Held open, the
-  // save cannot land, and removing the guard fails on this very line —
-  // measured both ways.
-  await expect(form.getByRole("button", { name: "Save station" })).toBeDisabled();
-  await expect(form.getByLabel("Station name")).toBeDisabled();
-  await expect(form.getByLabel("Stream address")).toBeDisabled();
-  await expect(form.getByRole("button", { name: "Cancel" })).toBeDisabled();
-  // And no edit or delete can begin, which is what made a save clear a form
-  // somebody else had just filled: the cards' menus are shut as well.
-  await expect(
-    page.locator(".station-grid li").first().locator(".action-menu-button"),
-  ).toBeDisabled();
-  // Listening is the deliberate exception: it writes nothing, and a reader
-  // waiting on a save has no reason to lose the station they are hearing.
-  await expect(
-    page.locator(".station-grid li").first().locator(".station-play"),
-  ).toBeEnabled();
-
-  // The second click of an impatient double-click, dispatched for real rather
-  // than waited for: `force` skips Playwright's own actionability check, so
-  // what refuses it is the browser declining to activate a disabled button.
-  // Without the guard this click sends a second POST and the account ends up
-  // with two identical stations from one gesture — which is what the count
-  // below would then show.
-  await form
-    .getByRole("button", { name: "Save station" })
-    .click({ force: true });
-
-  release();
-
-  await expect(page.locator(".station-grid li")).toHaveCount(2);
-  // One gesture, one station. Two POSTs in all, one per click.
-  expect(radioWrites).toEqual(["POST", "POST"]);
-  // Closed once the save has landed, and empty when it is opened again.
-  await expect(form).toHaveCount(0);
-  await page.getByRole("button", { name: "Add station" }).click();
-  await expect(form.getByLabel("Station name")).toBeEnabled();
-  await expect(form.getByLabel("Station name")).toHaveValue("");
-});
-
-/**
- * Moves within the client, as a click on its navigation does — never by
- * loading a page, which would start the player over and prove nothing about
- * what survives a navigation.
- */
-async function navigateWithin(page: Page, name: string) {
-  const sidebar = page.locator(".sidebar");
-  if (await sidebar.isVisible()) {
-    await sidebar.getByRole("link", { name, exact: true }).click();
-    return;
-  }
-  const bar = page.locator(".mobile-navigation");
-  const direct = bar.getByRole("link", { name, exact: true });
-  if (await direct.count()) {
-    await direct.click();
-    return;
-  }
-  await bar.getByRole("button", { name: "More" }).click();
-  await page.getByRole("dialog").getByRole("link", { name, exact: true }).click();
-}
-
-const NOVA = "https://nova.example.org/live";
-
-/**
- * A station on another origin that plays, a queue whose tracks play, and a
- * record of every element asked to play and every element the ReplayGain
- * graph claimed — none of them is in the document, so this is the only way
- * to reach them. ReplayGain is on, so the graph exists to claim something.
- */
-async function serveStationAndQueue(page: Page) {
-  await page.addInitScript(() => {
-    localStorage.setItem(
-      "waveflow.replayGain",
-      JSON.stringify({ mode: "album", preampDb: 0 }),
-    );
-    const record = window as unknown as {
-      __played: Set<HTMLMediaElement>;
-      __claimed: Set<HTMLMediaElement>;
-    };
-    record.__played = new Set();
-    record.__claimed = new Set();
-    const play = HTMLMediaElement.prototype.play;
-    HTMLMediaElement.prototype.play = function () {
-      record.__played.add(this);
-      return play.call(this);
-    };
-    const claim = AudioContext.prototype.createMediaElementSource;
-    AudioContext.prototype.createMediaElementSource = function (element) {
-      record.__claimed.add(element);
-      return claim.call(this, element);
-    };
-  });
-  stations = [
-    {
-      id: "station-1",
-      name: "Radio Nova",
-      stream_url: NOVA,
-      homepage_url: null,
-      image_url: null,
-      artwork_hash: null,
-      created_at: 1_700_000_000_000,
-      updated_at: 1_700_000_000_000,
-    },
-  ];
-  const audio = silentWav(60);
-  // Served with no CORS header at all, as most stations are: an element plays
-  // it, and a MediaElementSource would turn it to silence.
-  await page.route(`${NOVA}**`, (route) =>
-    route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } }),
-  );
-  await page.route("**/api/v2/tracks/*/stream-ticket", (route) => {
-    const trackId = new URL(route.request().url()).pathname.split("/")[4];
-    return route.fulfill({
-      json: {
-        url: `/api/v2/stream/ticket-${trackId}`,
-        expires_at: Date.now() + 60_000,
-      },
-    });
-  });
-  await page.route("**/api/v2/stream/*", (route) =>
-    route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } }),
-  );
-}
-
-/** What the station's element and the queue's are doing, as seen now. */
-function elements(page: Page) {
-  return page.evaluate((nova) => {
-    const record = window as unknown as {
-      __played: Set<HTMLMediaElement>;
-      __claimed: Set<HTMLMediaElement>;
-      __station?: HTMLMediaElement;
-    };
-    const played = [...record.__played];
-    // Found by its source while it has one, and kept: stopping a station lets
-    // go of its source, and the element must still be found afterwards.
-    record.__station ??= played.find((element) => element.currentSrc === nova);
-    const station = record.__station;
-    const queue = played.find((element) =>
-      element.currentSrc.includes("/api/v2/stream/ticket-"),
-    );
-    return {
-      station: station
-        ? {
-            paused: station.paused,
-            time: station.currentTime,
-            source: station.currentSrc,
-            claimed: record.__claimed.has(station),
-          }
-        : null,
-      queue: queue
-        ? {
-            paused: queue.paused,
-            source: queue.currentSrc,
-            claimed: record.__claimed.has(queue),
-          }
-        : null,
-      claims: record.__claimed.size,
-    };
-  }, NOVA);
-}
-
-/**
- * A station plays in the player bar, not on the radio page: the page used to
- * own a private element and pause it on the way out, because it held the only
- * stop button there was. Now the bar is that button, and the station carries
- * on wherever the listener goes.
- *
- * **And it never goes through the ReplayGain graph.** A station is an address
- * on another origin, and a cross-origin stream without CORS headers routed
- * through a `MediaElementSource` plays as silence while the element reports
- * it playing. ReplayGain is on here and a track has built the graph, so the
- * graph exists and has claimed the queue's element; the station's must not be
- * that element, nor be claimed by it.
- */
-test("carries a live station in the bar across pages, off the ReplayGain graph", async ({
-  page,
-}) => {
-  await serveStationAndQueue(page);
-  await page.goto("/albums/album-2");
-  await page.getByRole("button", { name: "Play album" }).click();
-  const bar = page.locator(".player");
-  await expect(bar.locator(".player-track strong")).toHaveText("Hidden Place");
-  // The graph is built, and holds the queue's element.
-  await expect.poll(async () => (await elements(page)).queue?.claimed).toBe(true);
-
-  await navigateWithin(page, "Radio");
-  const station = page.locator(".station-grid li").filter({ hasText: "Radio Nova" });
-  await station.getByRole("button", { name: "Listen" }).click();
-
-  await expect(bar.locator(".player-track strong")).toHaveText("Radio Nova");
-  await expect(bar.locator(".live-badge")).toHaveText("Live");
-  await expect(station.getByRole("button", { name: "Stop" })).toBeVisible();
-  await expect
-    .poll(async () => (await elements(page)).station?.time ?? 0)
-    .toBeGreaterThan(0.2);
-  const playing = await elements(page);
-  expect(playing.station).toMatchObject({ paused: false, source: NOVA, claimed: false });
-  // Its own element: the queue's is paused under it, still the graph's, and
-  // still holding its track.
-  expect(playing.queue).toMatchObject({ paused: true, claimed: true });
-  expect(playing.claims).toBe(1);
-  // A station has nothing to seek in and nothing to go to next.
-  await expect(bar.getByRole("slider", { name: "Seek" })).toHaveCount(0);
-  await expect(bar.getByRole("button", { name: "Next track" })).toHaveCount(0);
-  await expect(bar.getByRole("button", { name: "Previous track" })).toHaveCount(0);
-  await expect(bar.getByRole("button", { name: "Shuffle" })).toHaveCount(0);
-  await expectNoWcagViolations(page);
-
-  // Away from the radio page, which used to stop it: still live, still heard.
-  await navigateWithin(page, "Albums");
-  await expect(page.locator(".grid li").first()).toBeVisible();
-  await expect(bar.locator(".player-track strong")).toHaveText("Radio Nova");
-  await expect(bar.locator(".live-badge")).toHaveText("Live");  const before = (await elements(page)).station?.time ?? 0;
-  await expect
-    .poll(async () => (await elements(page)).station?.time ?? 0)
-    .toBeGreaterThan(before);
-  expect((await elements(page)).station?.paused).toBe(false);
-
-  // The bar is the stop button now.
-  await bar.getByRole("button", { name: "Stop the station" }).click();
-  await expect.poll(async () => (await elements(page)).station?.paused).toBe(true);
-  await expect(bar.getByRole("button", { name: "Play" })).toBeVisible();
-  await expect(bar.locator(".player-track strong")).toHaveText("Radio Nova");
-});
-
-/**
- * Starting a station pauses the music and keeps the queue; playing a track
- * afterwards takes the speakers back. One audible source, always.
- */
-test("pauses the queue under a station, keeps it, and gives it back to a track", async ({
-  page,
-}) => {
-  await serveStationAndQueue(page);
-  await page.goto("/albums/album-2");
-  await page.getByRole("button", { name: "Play album" }).click();
-  const bar = page.locator(".player");
-  await expect(bar.getByRole("button", { name: "Pause" })).toBeVisible();
-
-  await navigateWithin(page, "Radio");
-  await page.getByRole("button", { name: "Listen" }).click();
-  await expect(bar.locator(".live-badge")).toHaveText("Live");
-  await expect.poll(async () => (await elements(page)).station?.paused).toBe(false);
-  expect((await elements(page)).queue?.paused).toBe(true);
-
-  // Paused, not cleared: the queue is all there.
-  await navigateWithin(page, "Queue");
-  const rows = page.locator(".queue-list li");
-  await expect(rows).toHaveCount(3);
-  await expect(rows.first()).toHaveClass("active");
-  expect((await elements(page)).station?.paused).toBe(false);
-
-  // A track takes over from the station, in the bar and in the speakers.
-  await rows.filter({ hasText: "Cocoon" }).locator(".queue-track").click();
-  await expect(bar.locator(".player-track strong")).toHaveText("Cocoon");
-  await expect(bar.locator(".live-badge")).toHaveCount(0);
-  await expect.poll(async () => (await elements(page)).station?.paused).toBe(true);
-  await expect
-    .poll(async () => (await elements(page)).queue)
-    .toMatchObject({ paused: false, source: expect.stringContaining("ticket-song-2") });
-  // And the radio page no longer calls the station playing.
-  await navigateWithin(page, "Radio");
-  await expect(page.getByRole("button", { name: "Listen" })).toBeVisible();
-  await expect(page.getByRole("button", { name: "Stop" })).toHaveCount(0);
-});
-
-/**
- * Taking a station out of the bar leaves the queue's track there, paused
- * where it was, and the light theme keeps the live badge readable.
- */
-/** A one-pixel PNG, for every cover the artwork route is asked for. */
-const PIXEL = Buffer.from(
-  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
-  "base64",
-);
-
-/**
- * A station's image is an address the account types, sent with the station;
- * the server fetches it once and answers a hash, and what the page shows is
- * the artwork route's answer for that hash — never the image's own host,
- * which RFC-019's `img-src` would refuse and which would see the listener.
- */
-test("takes an image address for a station, and shows the image the server kept", async ({
-  page,
-}) => {
-  const asked: string[] = [];
-  page.on("request", (request) => {
-    if (new URL(request.url()).hostname === "logos.example.org") {
-      asked.push(request.url());
-    }
-  });
-  await page.route("**/api/v2/artwork/station-art-*", (route) =>
-    route.fulfill({ contentType: "image/png", body: PIXEL }),
-  );
-  await page.goto("/radio");
-  await page.getByRole("button", { name: "Add station" }).click();
-  const form = page.getByRole("dialog", { name: "Add a station" });
-  await form.getByLabel("Station name").fill("Radio Nova");
-  await form.getByLabel("Stream address").fill(NOVA);
-  // Refused here first, as the server would, and the button stays shut.
-  await form.getByLabel("Station image (optional)").fill("ftp://logos.example.org/n.png");
-  await expect(
-    form.getByText("An address must start with http:// or https://."),
-  ).toBeVisible();
-  await expect(form.getByRole("button", { name: "Save station" })).toBeDisabled();
-  await form
-    .getByLabel("Station image (optional)")
-    .fill("https://logos.example.org/nova.png");
-  await expect(
-    form.getByText("The server downloads it once, when you save", { exact: false }),
-  ).toBeVisible();
-  await form.getByRole("button", { name: "Save station" }).click();
-
-  const listed = page.locator(".station-grid li").filter({ hasText: "Radio Nova" });
-  await expect(listed.locator("img.station-cover")).toBeVisible();
-  expect(stationImages).toEqual(["https://logos.example.org/nova.png"]);
-
-  // Edited, the form shows the address back and sends it again; cleared, it
-  // sends `null` and the station keeps the symbol.
-  await listed.getByRole("button", { name: "Actions for Radio Nova" }).click();
-  await page.getByRole("menuitem", { name: "Edit" }).click();
-  const editor = page.getByRole("dialog", { name: "Edit “Radio Nova”" });
-  await expect(editor.getByLabel("Station image (optional)")).toHaveValue(
-    "https://logos.example.org/nova.png",
-  );
-  await editor.getByLabel("Station image (optional)").fill("");
-  await editor.getByRole("button", { name: "Save station" }).click();
-  await expect(listed.locator(".station-cover.cover-fallback svg")).toBeVisible();
-  expect(stationImages).toEqual(["https://logos.example.org/nova.png", null]);
-  await expectNoWcagViolations(page);
-  expect(asked, "the browser never asks the image's own host").toEqual([]);
-});
-
-for (const theme of ["dark", "light"] as const) {
-  test(`shows a station's image in the bar, and the symbol without one, in the ${theme}`, async ({
-    page,
-  }) => {
-    if (theme === "light") await chooseLightTheme(page);
-    await serveStationAndQueue(page);
-    stations = [
-      { ...stations[0], image_url: "https://logos.example.org/nova.png", artwork_hash: "station-art-nova" },
-      {
-        ...stations[0],
-        id: "station-2",
-        name: "Radio Plain",
-      },
-    ];
-    let served = 0;
-    await page.route("**/api/v2/artwork/station-art-nova", (route) => {
-      served += 1;
-      return route.fulfill({ contentType: "image/png", body: PIXEL });
-    });
-    await page.goto("/radio");
-    const nova = page.locator(".station-grid li").filter({ hasText: "Radio Nova" });
-    await expect(nova.locator("img.station-cover")).toBeVisible();
-    await nova.getByRole("button", { name: "Listen" }).click();
-
-    const bar = page.locator(".player");
-    await expect(bar.locator(".player-track strong")).toHaveText("Radio Nova");
-    await expect(bar.locator("img.player-cover")).toBeVisible();
-    // The system's controls are given the same cover, by its object URL.
-    await expect
-      .poll(() =>
-        page.evaluate(
-          () => navigator.mediaSession?.metadata?.artwork?.[0]?.src ?? "",
-        ),
-      )
-      .toMatch(/^blob:/);
-    expect(served).toBe(1);
-    await expectNoWcagViolations(page);
-
-    // A station without an image keeps the radio symbol.
-    const plain = page.locator(".station-grid li").filter({ hasText: "Radio Plain" });
-    await plain.getByRole("button", { name: "Listen" }).click();
-    await expect(bar.locator(".player-track strong")).toHaveText("Radio Plain");
-    await expect(bar.locator(".player-cover.cover-fallback svg")).toBeVisible();
-    await expect(bar.locator("img.player-cover")).toHaveCount(0);
-    await expect
-      .poll(() =>
-        page.evaluate(() => navigator.mediaSession?.metadata?.artwork?.length ?? 0),
-      )
-      .toBe(0);
-  });
-}
-
-test("keeps a live station readable in the light, and closes back to the queue", async ({
-  page,
-}) => {
-  await chooseLightTheme(page);
-  await serveStationAndQueue(page);
-  await page.goto("/radio");
-  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
-  await page.getByRole("button", { name: "Listen" }).click();
-  const bar = page.locator(".player");
-  await expect(bar.locator(".live-badge")).toHaveText("Live");
-  await expect.poll(async () => (await elements(page)).station?.paused).toBe(false);
-  await expectNoWcagViolations(page);
-  await bar.getByRole("button", { name: "Stop and close" }).click();
-  await expect.poll(async () => (await elements(page)).station?.paused).toBe(true);
-  // The saved queue's track, still where the listener left it.
-  await expect(bar.locator(".player-track strong")).toHaveText("Hidden Place");
-  await expect(bar.getByRole("button", { name: "Play" })).toBeVisible();
-});
-
-/**
- * A station that failed can be tried again, from its page or from the bar.
- *
- * A source that fails leaves the element's `paused` at false — the failure
- * steps reject the play, they do not pause — so a player that took `paused`
- * for the truth thought the failed station was playing: Listen did nothing,
- * and the bar's play button stopped it instead of starting it. The station
- * answers 404 once, then plays.
- */
-for (const from of ["page", "bar"] as const) {
-  test(`tries a failed station again from the ${from}`, async ({ page }) => {
-    await serveStationAndQueue(page);
-    let asked = 0;
-    const audio = silentWav(60);
-    await page.route(`${NOVA}**`, (route) => {
-      asked += 1;
-      return asked === 1
-        ? route.fulfill({ status: 404, body: "" })
-        : route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } });
-    });
-    await page.goto("/radio");
-    await page.getByRole("button", { name: "Listen" }).click();
-    await expect(
-      page.getByText("That station could not be played.", { exact: false }),
-    ).toBeVisible();
-    const bar = page.locator(".player");
-    await expect(bar.getByRole("alert")).toHaveText("This station could not be played.");
-    expect(asked).toBe(1);
-
-    if (from === "page") {
-      await page.getByRole("button", { name: "Listen" }).click();
-    } else {
-      await bar.getByRole("button", { name: "Play" }).click();
-    }
-    await expect.poll(() => asked).toBe(2);
-    await expect
-      .poll(async () => (await elements(page)).station?.time ?? 0)
-      .toBeGreaterThan(0.2);
-    expect((await elements(page)).station?.paused).toBe(false);
-    await expect(bar.getByRole("alert")).toHaveCount(0);
-    await expect(bar.getByRole("button", { name: "Stop the station" })).toBeVisible();
-  });
-}
-
-/**
- * Signing out stops a station too, as it stops the music (#329, #330): the
- * station's element is the player's, and the player goes with the session.
- */
-test("stops a live station when the listener signs out", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
-  await serveStationAndQueue(page);
-  await page.goto("/radio");
-  await page.getByRole("button", { name: "Listen" }).click();
-  await expect.poll(async () => (await elements(page)).station?.paused).toBe(false);
-  // Dispatched rather than clicked, as in the cache test: the sidebar's
-  // footer sits under the fixed player bar at this viewport.
-  await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
-  await expect(page).toHaveURL(/\/login$/);
-  await expect.poll(async () => (await elements(page)).station?.paused).toBe(true);
-});
-
-/**
- * A stand-in for the filed-folder routes (RFC-012 decision 2), with state: the
- * screen re-reads after every write, and the point is that it shows what the
- * write did. Names collide case-insensitively, as on the server.
- */
-async function serveFiledFolders(page: Page, songs: ReturnType<typeof song>[]) {
-  const state = {
-    folders: [] as Array<{ id: string; parent_id: string | null; name: string }>,
-    placed: new Map<string, string>(),
-    writes: [] as Array<{ method: string; path: string; body: unknown }>,
-  };
-  const tree = () => ({
-    folders: state.folders.map((folder) => ({
-      ...folder,
-      track_count: [...state.placed.values()].filter((id) => id === folder.id)
-        .length,
-    })),
-    unfiled_track_count: songs.filter((entry) => !state.placed.has(entry.id))
-      .length,
-  });
-  await page.route("**/api/v2/libraries/library-1/folders", async (route) => {
-    const request = route.request();
-    if (request.method() === "POST") {
-      const body = request.postDataJSON() as { name: string; parent_id: string | null };
-      state.writes.push({ method: "POST", path: "folders", body });
-      const name = body.name.trim();
-      if (
-        state.folders.some(
-          (folder) =>
-            folder.parent_id === body.parent_id &&
-            folder.name.toLowerCase() === name.toLowerCase(),
-        )
-      ) {
-        await route.fulfill({ status: 409, json: { error: "conflict" } });
-        return;
-      }
-      const folder = { id: `folder-${state.folders.length + 1}`, parent_id: body.parent_id, name };
-      state.folders.push(folder);
-      await route.fulfill({ status: 201, json: { ...folder, track_count: 0 } });
-      return;
-    }
-    await route.fulfill({ json: tree() });
-  });
-  await page.route("**/api/v2/libraries/library-1/folders/*/tracks?*", (route) => {
-    const folder = new URL(route.request().url()).pathname.split("/").at(-2);
-    return route.fulfill({
-      json: songs.filter((entry) =>
-        folder === "unfiled"
-          ? !state.placed.has(entry.id)
-          : state.placed.get(entry.id) === folder,
-      ),
-    });
-  });
-  await page.route("**/api/v2/libraries/library-1/placements", async (route) => {
-    const body = route.request().postDataJSON() as {
-      track_ids: string[];
-      folder_id: string | null;
-    };
-    state.writes.push({ method: "PUT", path: "placements", body });
-    for (const id of body.track_ids) {
-      if (body.folder_id) state.placed.set(id, body.folder_id);
-      else state.placed.delete(id);
-    }
-    await route.fulfill({ json: { placed: body.track_ids.length } });
-  });
-  await page.route("**/api/v2/folders/*", async (route) => {
-    const request = route.request();
-    const id = new URL(request.url()).pathname.split("/").at(-1) ?? "";
-    if (request.method() === "DELETE") {
-      state.writes.push({ method: "DELETE", path: id, body: null });
-      const gone = new Set([id]);
-      for (const folder of state.folders) {
-        if (folder.parent_id && gone.has(folder.parent_id)) gone.add(folder.id);
-      }
-      let unfiled = 0;
-      for (const [track, folder] of [...state.placed]) {
-        if (gone.has(folder)) {
-          state.placed.delete(track);
-          unfiled += 1;
-        }
-      }
-      state.folders = state.folders.filter((folder) => !gone.has(folder.id));
-      await route.fulfill({ json: { unfiled } });
-      return;
-    }
-    const patch = request.postDataJSON() as { name?: string; parent_id?: string | null };
-    state.writes.push({ method: "PATCH", path: id, body: patch });
-    state.folders = state.folders.map((folder) =>
-      folder.id === id
-        ? {
-            ...folder,
-            name: patch.name ?? folder.name,
-            parent_id: patch.parent_id === undefined ? folder.parent_id : patch.parent_id,
-          }
-        : folder,
-    );
-    const folder = state.folders.find((entry) => entry.id === id);
-    await route.fulfill({ json: { ...folder, track_count: 0 } });
-  });
-  return state;
-}
-
-/**
- * Filing, end to end on the screen: a folder created, a track filed from its
- * menu — the keyboard's way — another dragged onto a folder, the folder
- * renamed and deleted, and its tracks back among the unfiled. No control
- * here claims to touch a file, and none does: every write is to the folder
- * routes.
- */
-test("files tracks into folders from the menu and by dragging", async ({
-  page,
-}, testInfo) => {
-  const songs = [
-    song(1, "Hidden Place", 0, false),
-    song(2, "Cocoon", 0, false),
-    song(3, "Pagan Poetry", 0, false),
-  ];
-  const state = await serveFiledFolders(page, songs);
-
-  await page.goto("/folders");
-  await expect(page.getByRole("heading", { name: "Folders" })).toBeVisible();
-  // WaveFlow's list, not a folder of the owner's: kept apart from them, and
-  // it says so.
-  const kept = page.getByRole("list", { name: "Kept by WaveFlow" });
-  await expect(kept.getByRole("link", { name: /To sort/ })).toContainText("3 tracks");
-  await expect(kept.getByRole("link", { name: /To sort/ })).toContainText("Automatic");
-
-  // A folder, and a second one refused for a name already taken.
-  await page.getByRole("button", { name: "New folder" }).click();
-  await page.getByLabel("Folder name").fill("Rock");
-  await page.getByRole("button", { name: "Create" }).click();
-  await expect(page.getByRole("status")).toHaveText("“Rock” created.");
-  await page.getByRole("button", { name: "New folder" }).click();
-  await page.getByLabel("Folder name").fill("ROCK");
-  await page.getByRole("button", { name: "Create" }).click();
-  await expect(
-    page.getByRole("alert").filter({ hasText: "A folder of that name is already here." }),
-  ).toBeVisible();
-  await page.getByRole("button", { name: "Cancel" }).click();
-
-  // From the menu: the unfiled tracks, the first one filed into Rock.
-  await kept.getByRole("link", { name: /To sort/ }).click();
-  await expect(page.getByRole("heading", { name: "To sort" })).toBeVisible();
-  const rows = page.locator(".songs tbody tr");
-  await expect(rows).toHaveCount(3);
-  await rows.first().locator("button.song-title").focus();
-  await page.keyboard.press("Shift+F10");
-  await page.getByRole("menuitem", { name: "Move to folder…" }).click();
-  const picker = page.getByRole("dialog", { name: "Move “Hidden Place” to a folder" });
-  await expect(picker).toBeVisible();
-  await expectNoWcagViolations(page);
-  await picker.getByRole("button", { name: "Rock" }).click();
-  await expect(picker).toBeHidden();
-  await expect(rows).toHaveCount(2);
-  expect(state.writes.at(-1)).toEqual({
-    method: "PUT",
-    path: "placements",
-    body: { track_ids: ["song-1"], folder_id: "folder-1" },
-  });
-
-  // Unfiled lists tracks and says how to file them; no folder card sits
-  // there, where it would read as a folder inside "Unfiled".
-  await expect(page.getByRole("list", { name: "Folders" })).toHaveCount(0);
-  await expect(
-    page.getByText("To file a track, open its menu", { exact: false }),
-  ).toBeVisible();
-
-  // Inside the folder: a second track, a sub-folder, and a drag onto it. A
-  // drag is a mouse gesture; the phone files from the menu, already proven.
-  state.placed.set("song-2", "folder-1");
-  await page.goto("/folders?folder=folder-1");
-  await expect(page.getByRole("heading", { name: "Rock" })).toBeVisible();
-  await expect(rows).toHaveCount(2);
-  await expect(page.getByText("Folders that exist only in WaveFlow", { exact: false })).toHaveCount(0);
-  await page.getByRole("button", { name: "New folder" }).click();
-  await page.getByLabel("Folder name").fill("Indie");
-  await page.getByRole("button", { name: "Create" }).click();
-  await expect(page.getByRole("status")).toHaveText("“Indie” created.");
-  if (testInfo.project.name === "desktop") {
-    await rows
-      .filter({ hasText: "Cocoon" })
-      .dragTo(page.getByRole("list", { name: "Folders" }).getByRole("link", { name: /Indie/ }));
-    await expect(page.getByRole("status")).toHaveText("1 track filed in Indie.");
-    await expect(rows).toHaveCount(1);
-  } else {
-    state.placed.set("song-2", "folder-2");
-  }
-
-  // Renamed, then deleted with its sub-folder: both tracks come back unfiled.
-  await page.getByRole("button", { name: "Rename" }).click();
-  await page.getByLabel("New name").fill("Rock & Roll");
-  await page.getByRole("button", { name: "Save" }).click();
-  await expect(page.getByRole("heading", { name: "Rock & Roll" })).toBeVisible();
-  page.once("dialog", (dialog) => void dialog.accept());
-  await page.getByRole("button", { name: "Delete" }).click();
-  await expect(page.getByRole("heading", { name: "Folders" })).toBeVisible();
-  await expect(page.getByRole("status")).toHaveText(
-    "Folder deleted: 2 tracks are back in To sort.",
-  );
-  await expect(kept.getByRole("link", { name: /To sort/ })).toContainText("3 tracks");
-  await expectNoWcagViolations(page);
-});
-
-/** A listener walks the filed tree and is offered nothing that writes. */
-test("shows a listener the filed tree with nothing to change", async ({ page }) => {
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  const songs = [song(1, "Hidden Place", 0, false)];
-  const state = await serveFiledFolders(page, songs);
-  state.folders.push({ id: "folder-1", parent_id: null, name: "Rock" });
-
-  await page.goto("/folders?folder=unfiled");
-  await expect(page.locator(".songs tbody tr")).toHaveCount(1);
-  for (const name of ["New folder", "Rename", "Delete", "Move…"]) {
-    await expect(page.getByRole("button", { name })).toHaveCount(0);
-  }
-  // A reader is told what Unfiled is, not how to file, and rows do not drag.
-  await expect(page.getByText("WaveFlow keeps this list itself", { exact: false })).toBeVisible();
-  await expect(page.locator(".songs tbody tr").first()).not.toHaveAttribute("draggable", "true");
-  await page.locator(".songs tbody tr button.song-title").first().focus();
-  await page.keyboard.press("Shift+F10");
-  await expect(page.getByRole("menuitem", { name: "Properties" })).toBeVisible();
-  await expect(page.getByRole("menuitem", { name: "Move to folder…" })).toHaveCount(0);
-});
-
-/**
- * Received first, filed second (RFC-012 decision 7): an upload started from a
- * folder commits as any other, then files the track it became.
- */
-test("files a received track into the folder the upload started from", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  const state = await serveFiledFolders(page, []);
-  state.folders.push({ id: "folder-1", parent_id: null, name: "Rock" });
-
-  await page.goto("/upload?folder=folder-1");
-  await expect(page.getByText("Received files go into the folder Rock.")).toBeVisible();
-  await page.getByLabel("Choose audio files").setInputFiles({
-    name: "Army of Me.flac",
-    mimeType: "audio/flac",
-    buffer: Buffer.from(Array.from({ length: 20 }, (_, i) => i)),
-  });
-  await expect(page.getByText("Added to the library")).toBeVisible();
-  expect(uploadCommits).toEqual(["upload-1"]);
-  expect(state.writes).toEqual([
-    {
-      method: "PUT",
-      path: "placements",
-      body: { track_ids: ["song-uploaded"], folder_id: "folder-1" },
-    },
-  ]);
-});
-
-/**
- * Received is not undone by a filing that fails: the commit stands, and the
- * line says the track arrived unfiled rather than claiming it was filed.
- */
-test("keeps a received track when filing it fails, and says so", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  const state = await serveFiledFolders(page, []);
-  state.folders.push({ id: "folder-1", parent_id: null, name: "Rock" });
-  await page.route("**/api/v2/libraries/library-1/placements", (route) =>
-    route.fulfill({ status: 422, json: { error: "validation" } }),
-  );
-
-  await page.goto("/upload?folder=folder-1");
-  await expect(page.getByText("Received files go into the folder Rock.")).toBeVisible();
-  await page.getByLabel("Choose audio files").setInputFiles({
-    name: "Army of Me.flac",
-    mimeType: "audio/flac",
-    buffer: Buffer.from(Array.from({ length: 20 }, (_, i) => i)),
-  });
-  await expect(page.getByText("Added to the library, in To sort")).toBeVisible();
-  expect(uploadCommits).toEqual(["upload-1"]);
-});
-
-/**
- * No file is taken before the folder is known, and a folder that is gone is
- * said before anything is sent: either way a file would have arrived unfiled
- * under a page that promised a folder.
- */
-test("waits for the folder before taking files, and says when it is gone", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  let release = () => {};
-  const held = new Promise<void>((resolve) => {
-    release = resolve;
-  });
-  await page.route("**/api/v2/libraries/library-1/folders", async (route) => {
-    await held;
-    await route.fulfill({ json: { folders: [], unfiled_track_count: 0 } });
-  });
-  try {
-    await page.goto("/upload?folder=folder-gone");
-    await expect(page.getByLabel("Choose audio files")).toBeDisabled();
-  } finally {
-    release();
-  }
-  await expect(page.getByLabel("Choose audio files")).toBeEnabled();
-  await expect(page.getByRole("status")).toHaveText(
-    "The folder this upload was opened for cannot be found: received files will go to To sort.",
-  );
-});
-
-/**
- * The root lists folders, not tracks. Coming back to it from the unfiled
- * tracks must not leave those tracks behind in its controls.
- */
-test("offers no tracks at the root after visiting the unfiled ones", async ({
-  page,
-}) => {
-  await serveFiledFolders(page, [song(1, "Hidden Place", 0, false)]);
-  await page.goto("/folders?folder=unfiled");
-  await expect(page.locator(".songs tbody tr")).toHaveCount(1);
-  const controls = page.locator(".page-controls");
-  await expect(controls.getByRole("button", { name: /Play/ })).toBeVisible();
-  await page
-    .getByRole("navigation", { name: "Folder path" })
-    .getByRole("link", { name: "Folders", exact: true })
-    .click();
-  await expect(page.getByRole("heading", { name: "Folders" })).toBeVisible();
-  await expect(controls.getByRole("button", { name: /Play/ })).toHaveCount(0);
-  await expect(page.getByRole("button", { name: "Load more" })).toHaveCount(0);
-});
-
-/**
- * A tree that could not be read says nothing about the folder: it is not
- * "missing", and no file is taken until a reading works.
- */
-test("takes no file while the folder cannot be checked", async ({ page }) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  let answers = 0;
-  await page.route("**/api/v2/libraries/library-1/folders", (route) => {
-    answers += 1;
-    return answers === 1
-      ? route.fulfill({ status: 500, json: { error: "boom" } })
-      : route.fulfill({
-          json: {
-            folders: [{ id: "folder-1", parent_id: null, name: "Rock", track_count: 0 }],
-            unfiled_track_count: 0,
-          },
-        });
-  });
-
-  await page.goto("/upload?folder=folder-1");
-  const unchecked = page.getByRole("alert").filter({
-    hasText: "could not be checked",
-  });
-  await expect(unchecked).toBeVisible();
-  await expect(page.getByLabel("Choose audio files")).toBeDisabled();
-  await expect(page.getByText("cannot be found", { exact: false })).toHaveCount(0);
-
-  await unchecked.getByRole("button", { name: "Check again" }).click();
-  await expect(page.getByText("Received files go into the folder Rock.")).toBeVisible();
-  await expect(page.getByLabel("Choose audio files")).toBeEnabled();
-});
-
-/**
- * The tag editor is reached from somewhere — a song row, the track menu — and
- * its arrow goes back there. Opened from a typed address, with nowhere to go
- * back to, it lands on the songs list rather than off the site.
- */
-test("goes back from the tag editor to where it was opened", async ({
-  page,
-}) => {
-  // Opened from an album, the arrow goes back to the album, not to a list
-  // it would also have landed on had it ignored where the visitor came from.
-  await page.route("**/api/v2/albums/album-2", (route) =>
-    route.fulfill({ json: { ...albumDetail, songs: [correctable.song] } }),
-  );
-  await page.goto("/albums/album-2");
-  await page.getByRole("link", { name: "Correct tags: Army Of Me" }).click();
-  await expect(page).toHaveURL(/\/tracks\/song-9\/edit$/);
-  await page.getByRole("button", { name: "Back", exact: true }).click();
-  await expect(page).toHaveURL(/\/albums\/album-2$/);
-
-  // A full load starts the router's history afresh: with nowhere to go back
-  // to, the arrow lands on the songs list, not on the album the browser
-  // still holds behind this page.
-  await page.goto("/tracks/song-9/edit");
-  await page.getByRole("button", { name: "Back", exact: true }).click();
-  await expect(page).toHaveURL(/\/songs$/);
-});
-
-/**
- * The upload screen goes back where the upload was started. Reached by a
- * full load, with nothing behind it, it goes to the folder it files into —
- * or home, when it files into none.
- */
-test("goes back from the upload screen to the folder it was opened for", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
-  const state = await serveFiledFolders(page, []);
-  state.folders.push({ id: "folder-1", parent_id: null, name: "Rock" });
-  const back = page.getByRole("button", { name: "Back", exact: true });
-
-  await page.goto("/folders?folder=folder-1");
-  await page.getByRole("link", { name: "Upload here" }).click();
-  await expect(page.getByText("Received files go into the folder Rock.")).toBeVisible();
-  await back.click();
-  await expect(page.getByRole("heading", { name: "Rock" })).toBeVisible();
-
-  await page.goto("/upload?folder=folder-1");
-  await back.click();
-  await expect(page).toHaveURL(/\/folders\?folder=folder-1$/);
-
-  await page.goto("/upload");
-  await back.click();
-  await expect(page).toHaveURL(/\/$/);
-});
-
-/**
- * A form opened for one folder stays with it. The page stays mounted while
- * only the folder in the address changes; carried along, a rename would rename
- * the folder navigated to with the old one's name, and a "new folder" opened
- * at the root would create one from Unfiled.
- */
-test("closes a folder's form when another folder is opened", async ({ page }) => {
-  const state = await serveFiledFolders(page, []);
-  state.folders.push(
-    { id: "folder-1", parent_id: null, name: "Rock" },
-    { id: "folder-2", parent_id: "folder-1", name: "Indie" },
-  );
-
-  await page.goto("/folders?folder=folder-1");
-  await page.getByRole("button", { name: "Rename" }).click();
-  await expect(page.getByLabel("New name")).toHaveValue("Rock");
-  await page.getByRole("list", { name: "Folders" }).getByRole("link", { name: /Indie/ }).click();
-  await expect(page.getByRole("heading", { name: "Indie" })).toBeVisible();
-  await expect(page.getByLabel("New name")).toHaveCount(0);
-  await page.getByRole("button", { name: "Rename" }).click();
-  await expect(page.getByLabel("New name")).toHaveValue("Indie");
-
-  await page.goto("/folders");
-  await page.getByRole("button", { name: "New folder" }).click();
-  await expect(page.getByLabel("Folder name")).toBeVisible();
-  await page
-    .getByRole("list", { name: "Kept by WaveFlow" })
-    .getByRole("link", { name: /To sort/ })
-    .click();
-  await expect(page.getByRole("heading", { name: "To sort" })).toBeVisible();
-  await expect(page.getByLabel("Folder name")).toHaveCount(0);
-  expect(state.writes).toEqual([]);
-});
-
-/**
- * Opens the artist header's image menu, where the portrait and banner actions
- * live behind one button, and returns the menu.
- */
-async function openImageMenu(page: Page) {
-  await page
-    .locator(".artist-hero")
-    .getByRole("button", { name: "Edit images", exact: true })
-    .click();
-  const menu = page.getByRole("menu", { name: "Images of Björk" });
-  await expect(menu).toBeVisible();
-  return menu;
-}
-
-/**
- * A stand-in for the artist routes of RFC-013 with state: the page re-reads
- * after every write, and what it shows must be what the write did.
- */
-async function serveArtistImages(page: Page) {
-  const state = {
-    portrait: null as string | null,
-    banner: null as string | null,
-    writes: [] as Array<{ method: string; kind: string; bytes: number }>,
-    refuseNext: false,
-  };
-  const detail = () => ({
-    ...artistDetail,
-    library_id: "library-1",
-    artwork_hash: state.portrait ?? "f".repeat(64),
-    ...(state.banner ? { banner_hash: state.banner } : {}),
-    ...(state.portrait || state.banner
-      ? {
-          image_choice: {
-            ...(state.portrait ? { portrait: { source: "upload", set_at: 1 } } : {}),
-            ...(state.banner ? { banner: { source: "upload", set_at: 1 } } : {}),
-          },
-        }
-      : {}),
-  });
-  await page.route("**/api/v2/artists/artist-1", (route) =>
-    route.fulfill({ json: detail() }),
-  );
-  await page.route("**/api/v2/artists/artist-1/image/*", async (route) => {
-    const request = route.request();
-    const kind = new URL(request.url()).pathname.split("/").at(-1) ?? "";
-    const bytes = request.postDataBuffer()?.length ?? 0;
-    state.writes.push({ method: request.method(), kind, bytes });
-    if (request.method() === "DELETE") {
-      if (kind === "portrait") state.portrait = null;
-      else state.banner = null;
-      await route.fulfill({ status: 204, body: "" });
-      return;
-    }
-    if (state.refuseNext) {
-      state.refuseNext = false;
-      await route.fulfill({ status: 422, json: { error: "validation" } });
-      return;
-    }
-    const hash = (kind === "portrait" ? "b" : "c").repeat(64);
-    if (kind === "portrait") state.portrait = hash;
-    else state.banner = hash;
-    await route.fulfill({ json: detail() });
-  });
-  const png = Buffer.from(
-    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
-    "base64",
-  );
-  await page.route("**/api/v2/artwork/*", (route) =>
-    route.fulfill({ contentType: "image/png", body: png }),
-  );
-  return { state, png };
-}
-
-/**
- * Choosing an artist's banner and portrait by hand (RFC-013 step 3): the file
- * goes as its own bytes, the header draws the banner behind it, a chosen
- * portrait says so, and each can go back to automatic.
- */
-test("changes an artist's banner and portrait from the artist page", async ({
-  page,
-}) => {
-  const { state, png } = await serveArtistImages(page);
-  await page.goto("/artists/artist-1");
-  const hero = page.locator(".artist-hero");
-  // The actions sit behind one button in the header's corner.
-  let menu = await openImageMenu(page);
-  await expect(menu.getByRole("menuitem", { name: "Change portrait" })).toBeVisible();
-  await expect(menu.getByRole("menuitem", { name: "Change banner" })).toBeVisible();
-  await expect(menu.getByRole("menuitem", { name: "No banner" })).toHaveCount(0);
-  await page.keyboard.press("Escape");
-  await expect(menu).toHaveCount(0);
-  // With no banner, the portrait is the backdrop, blurred.
-  await expect(hero.locator(".artist-hero-ambient")).toBeAttached();
-
-  await hero.getByLabel("Change banner").setInputFiles({
-    name: "banner.png",
-    mimeType: "image/png",
-    buffer: png,
-  });
-  await expect(hero.getByRole("status")).toHaveText("Banner changed.");
-  await expect(hero.locator("img.artist-banner")).toBeVisible();
-  await expect(hero.locator(".artist-hero-ambient")).toHaveCount(0);
-  expect(state.writes).toEqual([{ method: "PUT", kind: "banner", bytes: png.length }]);
-  await expectNoWcagViolations(page);
-
-  await hero.getByLabel("Change portrait").setInputFiles({
-    name: "portrait.png",
-    mimeType: "image/png",
-    buffer: png,
-  });
-  await expect(hero.getByRole("status")).toHaveText("Portrait changed.");
-  await expect(hero.getByText("Portrait chosen by hand")).toBeVisible();
-
-  // A file the server refuses is said, and nothing on screen changes.
-  state.refuseNext = true;
-  await hero.getByLabel("Change portrait").setInputFiles({
-    name: "notes.png",
-    mimeType: "image/png",
-    buffer: Buffer.from("not an image"),
-  });
-  await expect(hero.getByRole("alert")).toHaveText("Choose a JPEG, PNG or WebP image.");
-
-  // Back to automatic: no banner, and the fetched portrait again.
-  menu = await openImageMenu(page);
-  await menu.getByRole("menuitem", { name: "No banner" }).click();
-  await expect(hero.getByRole("status")).toHaveText("Banner removed.");
-  await expect(hero.locator("img.artist-banner")).toHaveCount(0);
-  menu = await openImageMenu(page);
-  await menu.getByRole("menuitem", { name: "Automatic portrait" }).click();
-  await expect(hero.getByRole("status")).toHaveText("Back to the automatic portrait.");
-  await expect(hero.getByText("Portrait chosen by hand")).toHaveCount(0);
-  expect(state.writes.slice(-2)).toEqual([
-    { method: "DELETE", kind: "banner", bytes: 0 },
-    { method: "DELETE", kind: "portrait", bytes: 0 },
-  ]);
-});
-
-/** A listener sees the chosen banner and is offered nothing to change. */
-test("shows a listener the artist's banner with nothing to change", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  const { state } = await serveArtistImages(page);
-  state.banner = "c".repeat(64);
-  await page.goto("/artists/artist-1");
-  const hero = page.locator(".artist-hero");
-  await expect(hero.locator("img.artist-banner")).toBeVisible();
-  // Not even the button the actions sit behind.
-  await expect(hero.getByRole("button", { name: "Edit images" })).toHaveCount(0);
-  await expect(hero.getByRole("button", { name: /Change/ })).toHaveCount(0);
-  await expect(hero.getByRole("button", { name: "Search Deezer" })).toHaveCount(0);
-});
-
-/**
- * The automatic banner (RFC-014): TheAudioDB's fanart is drawn behind the
- * header and credited to TheAudioDB, whose terms ask for it; a banner chosen
- * by hand is credited to nobody.
- */
-test("credits TheAudioDB for an automatic banner and nobody for a chosen one", async ({
-  page,
-}) => {
-  await serveArtistImages(page);
-  let chosen = false;
-  // Cached but not yet linked on the artist row: the enrichment alone names
-  // it, as it can on the visit after an artist is re-identified.
-  let linked = false;
-  await page.route("**/api/v2/artists/artist-1", (route) =>
-    route.fulfill({
-      json: {
-        ...artistDetail,
-        library_id: "library-1",
-        ...(chosen || linked
-          ? { banner_hash: (chosen ? "b" : "c").repeat(64) }
-          : {}),
-        ...(chosen
-          ? { image_choice: { banner: { source: "upload", set_at: 1 } } }
-          : {}),
-        enrichment: {
-          state: "ready",
-          bio: null,
-          image: null,
-          similar: null,
-          banner: chosen
-            ? null
-            : {
-                artwork_hash: "c".repeat(64),
-                source: {
-                  provider: "theaudiodb",
-                  fetched_at: Date.UTC(2026, 9, 24),
-                },
-              },
-        },
-      },
-    }),
-  );
-
-  await page.goto("/artists/artist-1");
-  const hero = page.locator(".artist-hero");
-  await expect(hero.locator("img.artist-banner")).toBeVisible();
-  await expect(hero.getByText(/^Banner from TheAudioDB, /)).toBeVisible();
-
-  linked = true;
-  await page.reload();
-  await expect(hero.locator("img.artist-banner")).toBeVisible();
-  await expect(hero.getByText(/^Banner from TheAudioDB, /)).toBeVisible();
-  await expectNoWcagViolations(page);
-
-  chosen = true;
-  await page.reload();
-  await expect(hero.locator("img.artist-banner")).toBeVisible();
-  await expect(hero.getByText(/^Banner from /)).toHaveCount(0);
-});
-
-/**
- * Choosing the portrait from Deezer (RFC-013 step 4): the picker searches the
- * artist's name as it opens, shows previews the server holds and nothing from
- * Deezer itself, says what a refusal means, and a pick sends the Deezer id
- * alone.
- */
-test("chooses an artist's portrait from a Deezer search", async ({ page }) => {
-  const { state } = await serveArtistImages(page);
-  const searches: string[] = [];
-  const picks: unknown[] = [];
-  const thirdParty: string[] = [];
-  let refuseNext = false;
-  page.on("request", (request) => {
-    if (/deezer\.com|dzcdn\.net/.test(request.url())) thirdParty.push(request.url());
-  });
-  await page.route("**/api/v2/artists/artist-1/image/candidates?*", async (route) => {
-    const query = new URL(route.request().url()).searchParams.get("q") ?? "";
-    searches.push(query);
-    if (refuseNext) {
-      refuseNext = false;
-      await route.fulfill({ status: 429, json: { code: "too_many_requests" } });
-      return;
-    }
-    await route.fulfill({
-      json:
-        query === "Nobody"
-          ? []
-          : [
-              { deezer_id: 76, name: "Björk", fans: 1500000, artwork_hash: "d".repeat(64) },
-              { deezer_id: 77, name: "Björk Tribute", fans: 1, artwork_hash: "e".repeat(64) },
-            ],
-    });
-  });
-  await page.route("**/api/v2/artists/artist-1/image/portrait/deezer", async (route) => {
-    picks.push(route.request().postDataJSON());
-    state.portrait = "d".repeat(64);
-    await route.fulfill({
-      json: {
-        ...artistDetail,
-        library_id: "library-1",
-        artwork_hash: state.portrait,
-        image_choice: { portrait: { source: "deezer", set_at: 1 } },
-      },
-    });
-  });
-
-  await page.goto("/artists/artist-1");
-  const hero = page.locator(".artist-hero");
-  await (await openImageMenu(page))
-    .getByRole("menuitem", { name: "Search Deezer" })
-    .click();
-  const picker = page.getByRole("dialog", { name: "Choose a portrait from Deezer" });
-  await expect(picker).toBeVisible();
-  const results = picker.getByRole("list", { name: "Deezer artists" });
-  await expect(results.getByRole("button")).toHaveCount(2);
-  await expect(results.getByText("1 fan", { exact: true })).toBeVisible();
-  expect(searches).toEqual(["Björk"]);
-  await expectNoWcagViolations(page);
-
-  const query = picker.getByRole("searchbox", { name: "Artist name" });
-  await query.fill("Nobody");
-  await picker.getByRole("button", { name: "Search", exact: true }).click();
-  await expect(picker.getByRole("status")).toHaveText(
-    "Deezer knows no artist by that name.",
-  );
-
-  refuseNext = true;
-  await query.fill("Bjork");
-  await picker.getByRole("button", { name: "Search", exact: true }).click();
-  await expect(picker.getByRole("alert")).toHaveText(
-    "Your previous search is still running. Try again in a moment.",
-  );
-  await picker.getByRole("button", { name: "Search", exact: true }).click();
-  await expect(results.getByRole("button")).toHaveCount(2);
-
-  await results.getByRole("button").first().click();
-  await expect(picker).toHaveCount(0);
-  await expect(hero.getByRole("status")).toHaveText("Portrait changed.");
-  expect(picks).toEqual([{ deezer_id: 76 }]);
-  expect(searches).toEqual(["Björk", "Nobody", "Bjork", "Bjork"]);
-  expect(thirdParty).toEqual([]);
-});
-
-/**
- * "Needs attention" (RFC-015), as the server answers it: the lists and their
- * counts, the joined credits with the fragments the library already knows,
- * and the decisions. Held here so a test can watch what the page writes.
- */
-async function serveAttention(page: Page) {
-  const state = {
-    candidates: [
-      {
-        artist_id: "artist-joined",
-        name: "Ashreveal, Ashish Swargiary",
-        track_count: 1,
-        fragments: [
-          { name: "Ashreveal", artist_id: "artist-known", album_count: 2 },
-          { name: "Ashish Swargiary", artist_id: null, album_count: 0 },
-        ],
-      },
-    ],
-    decisions: [] as Array<Record<string, unknown>>,
-    writes: [] as Array<{ method: string; path: string; body: unknown }>,
-    asks: 0,
-    /** Answer the next decision with this status, as if another owner had
-     * decided first: the credit leaves the list on the server. */
-    refuseWith: null as number | null,
-  };
-  const base = "**/api/v2/libraries/library-1";
-  await page.route(`${base}/attention`, (route) => {
-    state.asks += 1;
-    return route.fulfill({
-      json: [
-        { category: "split_credits", count: state.candidates.length },
-        { category: "missing_artist", count: 0 },
-        { category: "missing_album", count: 0 },
-        { category: "missing_year", count: 1 },
-        { category: "missing_track_number", count: 0 },
-        { category: "missing_cover", count: 0 },
-        { category: "album_year_conflict", count: 0 },
-        { category: "compilation_no_album_artist", count: 0 },
-        { category: "duplicate_track_number", count: 0 },
-        { category: "track_number_gap", count: 0 },
-        { category: "probable_duplicate", count: 0 },
-      ],
-    });
-  });
-  await page.route(`${base}/attention/credits`, (route) =>
-    route.fulfill({ json: state.candidates }),
-  );
-  await page.route(`${base}/attention/tracks?*`, (route) => {
-    const category = new URL(route.request().url()).searchParams.get(
-      "category",
-    );
-    const twice = (index: number, title: string, group: number) => ({
-      ...song(index, title, 0, false),
-      duplicate_group: group,
-    });
-    return route.fulfill({
-      json:
-        category === "missing_year"
-          ? [song(4, "Yearless", 0, false)]
-          : category === "probable_duplicate"
-            ? [
-                twice(5, "Echo", 1),
-                twice(6, "Echo (copy)", 1),
-                twice(7, "Other", 2),
-                twice(8, "Other (copy)", 2),
-              ]
-            : [],
-    });
-  });
-  await page.route(`${base}/credit-decisions`, async (route) => {
-    const request = route.request();
-    if (request.method() === "GET") {
-      await route.fulfill({ json: state.decisions });
-      return;
-    }
-    const body = request.postDataJSON();
-    state.writes.push({ method: "POST", path: "credit-decisions", body });
-    if (state.refuseWith !== null) {
-      const status = state.refuseWith;
-      state.refuseWith = null;
-      state.candidates = [];
-      await route.fulfill({ status, json: { error: "conflict" } });
-      return;
-    }
-    const candidate = state.candidates.find(
-      (entry) => entry.artist_id === body.artist_id,
-    );
-    state.candidates = state.candidates.filter(
-      (entry) => entry.artist_id !== body.artist_id,
-    );
-    const decision = {
-      id: "decision-1",
-      credit: candidate?.name ?? "?",
-      decision: body.decision,
-      ...(body.decision === "split"
-        ? { parts: candidate?.fragments.map((fragment) => fragment.name) }
-        : {}),
-      decided_by: "listener",
-      decided_at: 1_700_000_000_000,
-    };
-    state.decisions = [decision];
-    await route.fulfill({ status: 201, json: decision });
-  });
-  await page.route(`${base}/credit-decisions/*`, async (route) => {
-    const request = route.request();
-    state.writes.push({
-      method: request.method(),
-      path: new URL(request.url()).pathname.split("/").at(-1) ?? "",
-      body: null,
-    });
-    state.decisions = [];
-    await route.fulfill({ status: 204, body: "" });
-  });
-  return state;
-}
-
-test("lists what needs attention, splits a credit on the second click, and undoes it", async ({
-  page,
-}) => {
-  const state = await serveAttention(page);
-  await page.goto("/attention");
-  await expect(
-    page.getByRole("heading", { name: "Needs attention" }),
-  ).toBeVisible();
-  await expect(page.getByText("2 things to look at")).toBeVisible();
-  // The first list holding something is open, and an empty one stays drawn.
-  const lists = page.getByRole("list", { name: "Lists" });
-  await expect(
-    lists.getByRole("link", { name: /Artists to split/ }),
-  ).toHaveAttribute("aria-current", "page");
-  await expect(lists.getByRole("link", { name: /Missing cover/ })).toHaveClass(
-    /empty/,
-  );
-
-  // A fragment the library already knows leads to that artist.
-  const fragments = page.getByRole("list", {
-    name: "What Ashreveal, Ashish Swargiary would split into",
-  });
-  await expect(
-    fragments.getByRole("link", { name: "Ashreveal" }),
-  ).toHaveAttribute("href", "/artists/artist-known");
-  await expect(fragments.getByText("Ashish Swargiary")).toBeVisible();
-
-  // The first click arms, and sends nothing.
-  await page.getByRole("button", { name: "Split", exact: true }).click();
-  const confirm = page.getByRole("button", { name: "Confirm: split into 2" });
-  await expect(confirm).toBeVisible();
-  expect(state.writes).toEqual([]);
-  await expectNoWcagViolations(page);
-  // The confirmation stands for four seconds, and on a loaded machine the scan
-  // alone can outlast them: armed again if it lapsed, so the click below meets
-  // the confirmation rather than racing its timer.
-  if (!(await confirm.isVisible())) {
-    await page.getByRole("button", { name: "Split", exact: true }).click();
-  }
-  await confirm.click();
-  await expect(
-    page.getByText("Ashreveal, Ashish Swargiary is split."),
-  ).toBeVisible();
-  expect(state.writes).toEqual([
-    {
-      method: "POST",
-      path: "credit-decisions",
-      body: { artist_id: "artist-joined", decision: "split" },
-    },
-  ]);
-  await expect(
-    page.getByText("No credit is waiting for a decision."),
-  ).toBeVisible();
-
-  // Decided, then undone.
-  await page.getByRole("button", { name: "Decided" }).click();
-  await expect(
-    page.getByText("Split into Ashreveal · Ashish Swargiary"),
-  ).toBeVisible();
-  await page.getByRole("button", { name: "Undo" }).click();
-  await expect(
-    page.getByText("The decision about Ashreveal, Ashish Swargiary is undone."),
-  ).toBeVisible();
-  expect(state.writes.at(-1)).toEqual({
-    method: "DELETE",
-    path: "decision-1",
-    body: null,
-  });
-
-  // A track list opens its tracks in the song table.
-  await lists.getByRole("link", { name: /Missing year/ }).click();
-  await expect(page).toHaveURL(/category=missing_year/);
-  await expect(page.getByText("Yearless")).toBeVisible();
-
-  // Probable duplicates are drawn group by group.
-  await lists.getByRole("link", { name: /Probable duplicates/ }).click();
-  await expect(
-    page.getByRole("heading", { name: "Probable duplicate 1" }),
-  ).toBeVisible();
-  await expect(
-    page.getByRole("heading", { name: "Probable duplicate 2" }),
-  ).toBeVisible();
-  await expect(page.locator(".attention-group")).toHaveCount(2);
-  await expect(
-    page.locator(".attention-group").first().getByText("Echo (copy)"),
-  ).toBeVisible();
-  await expectNoWcagViolations(page);
-});
-
-/**
- * Two owners deciding the same credit: the second is refused, and the list is
- * read again rather than left showing a row that is no longer there.
- */
-test("reloads the credits when a decision is refused", async ({ page }) => {
-  const state = await serveAttention(page);
-  state.refuseWith = 409;
-  await page.goto("/attention?category=split_credits");
-  await page.getByRole("button", { name: "Keep as one" }).click();
-  await expect(
-    page.getByText(
-      "This credit was decided in the meantime. The list has been reloaded.",
-    ),
-  ).toBeVisible();
-  await expect(
-    page.getByText("No credit is waiting for a decision."),
-  ).toBeVisible();
-});
-
-/**
- * A listener cannot act on any of it, so the page says so and asks nothing:
- * the server would answer `404` regardless.
- */
-test("asks nothing of the server for a listener's library", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  const state = await serveAttention(page);
-  await page.goto("/attention");
-  await expect(
-    page.getByText(
-      "Only the owners and managers of this library see what needs attention in it.",
-    ),
-  ).toBeVisible();
-  // Settled before counting: the message and a request fired beside it
-  // arrive together, and a count taken first would be zero either way.
-  await page.waitForLoadState("networkidle");
-  expect(state.asks).toBe(0);
-});
-
-/** The desktop's other way in: from the joined artist's own page. */
-test("splits a joined artist from its page, after a confirming click", async ({
-  page,
-}) => {
-  const state = await serveAttention(page);
-  await page.route("**/api/v2/artists/artist-joined", (route) =>
-    route.fulfill({
-      json: {
-        ...artistDetail,
-        id: "artist-joined",
-        name: "Ashreveal, Ashish Swargiary",
-        library_id: "library-1",
-        album_count: 0,
-        albums: [],
-      },
-    }),
-  );
-  await page.route("**/api/v2/artists/artist-joined/*", (route) =>
-    route.fulfill({ json: [] }),
-  );
-  await page.goto("/artists/artist-joined");
-  const offer = page.getByRole("button", { name: "Split into 2 artists" });
-  await expect(offer).toBeVisible();
-  await offer.click();
-  await page.getByRole("button", { name: "Confirm: split into 2" }).click();
-  await expect(page).toHaveURL(/\/artists$/);
-  expect(state.writes).toEqual([
-    {
-      method: "POST",
-      path: "credit-decisions",
-      body: { artist_id: "artist-joined", decision: "split" },
-    },
-  ]);
-
-  // A listener is offered nothing.
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  await page.goto("/artists/artist-joined");
-  await expect(
-    page.getByRole("heading", { name: "Ashreveal, Ashish Swargiary" }),
-  ).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Split into 2 artists" }),
-  ).toHaveCount(0);
-});
-
-/**
- * The light themes on the 2.0 structure. fluid.css lays the same rail, heads
- * and player bar over a light material, so every page the dark redesign
- * recomposed is audited again in the light: the home page has its own test
- * above, and these follow the pages and the dialogs added since.
- */
-function chooseLightTheme(page: Page) {
-  return page.addInitScript(() => {
-    localStorage.setItem("waveflow.theme", "default");
-  });
-}
-
-test("keeps an album, the player bar and a track's properties readable in the light", async ({
-  page,
-}) => {
-  await chooseLightTheme(page);
-  await page.goto("/albums/album-2");
-  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
-  await expect(page.locator(".album-hero h2")).toHaveText("Vespertine");
-  await page.locator(".album-actions .album-play").click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  await expectNoWcagViolations(page);
-
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({ json: [correctable.song] }),
-  );
-  await page.route("**/api/v2/tracks/song-9", (route) =>
-    route.fulfill({
-      json: { ...correctable.song, relative_path: "Björk/Post/09 Army Of Me.flac" },
-    }),
-  );
-  await page.goto("/songs");
-  await page.locator(".songs tbody tr").first().locator("button.song-title").focus();
-  await page.keyboard.press("Shift+F10");
-  await expect(page.getByRole("menu", { name: "Actions for Army Of Me" })).toBeVisible();
-  await expectNoWcagViolations(page);
-  await page.getByRole("menuitem", { name: "Properties" }).click();
-  await expect(page.getByRole("dialog", { name: "Army Of Me" })).toBeVisible();
-  await expectNoWcagViolations(page);
-});
-
-test("keeps the artist hero and the Deezer picker readable in the light", async ({
-  page,
-}) => {
-  const { state } = await serveArtistImages(page);
-  await page.route("**/api/v2/artists/artist-1/image/candidates?*", (route) =>
-    route.fulfill({
-      json: [
-        { deezer_id: 76, name: "Björk", fans: 1500000, artwork_hash: "d".repeat(64) },
-      ],
-    }),
-  );
-  await chooseLightTheme(page);
-  await page.goto("/artists/artist-1");
-  const hero = page.locator(".artist-hero");
-  await expect(hero.locator(".artist-hero-ambient")).toBeAttached();
-  await expectNoWcagViolations(page);
-
-  // Opened from the hero, the picker sits inside it in the tree, and took
-  // the hero's light-on-dark ink: the fan count was white on white.
-  await (await openImageMenu(page))
-    .getByRole("menuitem", { name: "Search Deezer" })
-    .click();
-  const picker = page.getByRole("dialog", { name: "Choose a portrait from Deezer" });
-  await expect(picker.getByText("1500000 fans")).toBeVisible();
-  await expectNoWcagViolations(page);
-  await picker.getByRole("button", { name: "Close" }).click();
-
-  state.banner = "c".repeat(64);
-  await page.reload();
-  await expect(hero.locator("img.artist-banner")).toBeVisible();
-  await expectNoWcagViolations(page);
-});
-
-test("keeps Needs attention readable in the light", async ({ page }) => {
-  await serveAttention(page);
-  await chooseLightTheme(page);
-  await page.goto("/attention");
-  await expect(page.getByText("Ashreveal, Ashish Swargiary").first()).toBeVisible();
-  await expectNoWcagViolations(page);
-});
-
-test("keeps the folders and the folder picker readable in the light", async ({
-  page,
-}) => {
-  await serveFiledFolders(page, [song(1, "Hidden Place", 0, false)]);
-  await chooseLightTheme(page);
-  await page.goto("/folders");
-  const cards = page.getByRole("list", { name: "Kept by WaveFlow" });
-  await expect(cards.getByRole("link", { name: /To sort/ })).toBeVisible();
-  await expectNoWcagViolations(page);
-
-  await cards.getByRole("link", { name: /To sort/ }).click();
-  await page.locator(".songs tbody tr").first().locator("button.song-title").focus();
-  await page.keyboard.press("Shift+F10");
-  await page.getByRole("menuitem", { name: "Move to folder…" }).click();
-  await expect(
-    page.getByRole("dialog", { name: "Move “Hidden Place” to a folder" }),
-  ).toBeVisible();
-  await expectNoWcagViolations(page);
-});
-
-test("keeps settings and the sign-in screen readable in the light", async ({
-  page,
-}) => {
-  await chooseLightTheme(page);
-  await page.goto("/settings");
-  await expect(
-    page.getByRole("heading", { name: "Account", exact: true }),
-  ).toBeVisible();
-  await expectNoWcagViolations(page);
-
-  await page.context().clearCookies();
-  await page.route("**/api/v2/**", (route) =>
-    route.fulfill({ status: 401, json: { error: "unauthorized" } }),
-  );
-  await page.goto("/");
-  await expect(page.getByRole("button", { name: "Sign in" })).toBeVisible();
-  await expectNoWcagViolations(page);
-});
-
-/**
- * The lowest contrast a text keeps over whatever is drawn behind it, pixel by
- * pixel. axe cannot measure text over a picture and reports it as needing
- * review, so the hero's legibility over a banner was never checked: the text
- * is made transparent, the box it sits in is captured, and its colour is
- * composited over every pixel of that capture. A pill is measured inside its
- * rounded ends and its ring, which are not behind the text: the corners of
- * its box show the picture it sits on.
- */
-async function lowestContrast(page: Page, target: Locator, pill = false) {
-  const colour = await target.evaluate((element) => {
-    const { color } = getComputedStyle(element);
-    (element as HTMLElement).style.setProperty("color", "transparent", "important");
-    return color;
-  });
-  const box = await target.boundingBox();
-  if (!box) throw new Error("the text has no box to measure");
-  const inset = pill ? { x: box.height / 2, y: 3 } : { x: 0, y: 0 };
-  const shot = await page.screenshot({
-    animations: "disabled",
-    clip: {
-      x: box.x + inset.x,
-      y: box.y + inset.y,
-      width: box.width - inset.x * 2,
-      height: box.height - inset.y * 2,
-    },
-  });
-  await target.evaluate((element) =>
-    (element as HTMLElement).style.removeProperty("color"),
-  );
-  return page.evaluate(
-    async ({ png, colour }) => {
-      const image = new Image();
-      image.src = `data:image/png;base64,${png}`;
-      await image.decode();
-      const canvas = document.createElement("canvas");
-      canvas.width = image.width;
-      canvas.height = image.height;
-      const context = canvas.getContext("2d");
-      if (!context) throw new Error("no 2D context");
-      context.drawImage(image, 0, 0);
-      const { data } = context.getImageData(0, 0, image.width, image.height);
-      const [r, g, b, a = 1] = (colour.match(/[\d.]+/g) ?? []).map(Number);
-      const channel = (value: number) => {
-        const s = value / 255;
-        return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-      };
-      const luminance = (red: number, green: number, blue: number) =>
-        0.2126 * channel(red) + 0.7152 * channel(green) + 0.0722 * channel(blue);
-      let lowest = Number.POSITIVE_INFINITY;
-      for (let index = 0; index < data.length; index += 4) {
-        const [br, bg, bb] = [data[index], data[index + 1], data[index + 2]];
-        const ground = luminance(br, bg, bb);
-        const ink = luminance(
-          a * r + (1 - a) * br,
-          a * g + (1 - a) * bg,
-          a * b + (1 - a) * bb,
-        );
-        const ratio =
-          (Math.max(ground, ink) + 0.05) / (Math.min(ground, ink) + 0.05);
-        lowest = Math.min(lowest, ratio);
-      }
-      return lowest;
-    },
-    { png: shot.toString("base64"), colour },
-  );
-}
-
-/**
- * The artist hero over the picture least kind to its text, in both
- * materials: a white banner under the light text a banner always takes, and
- * a portrait at the far end from the ink — white behind the dark theme's
- * light text, black behind the light theme's dark ink. Small text holds AA's
- * 4.5:1 and the title, large, its 3:1.
- */
-for (const { theme, banner, portrait } of [
-  { theme: "default-dark", banner: true, portrait: "#ffffff" },
-  { theme: "default", banner: true, portrait: "#ffffff" },
-  { theme: "default-dark", banner: false, portrait: "#ffffff" },
-  { theme: "default", banner: false, portrait: "#000000" },
-]) {
-  test(`keeps the artist hero legible over a ${banner ? "white banner" : `${portrait} portrait`} in ${theme}`, async ({
-    page,
-  }) => {
-    const { state } = await serveArtistImages(page);
-    if (banner) state.banner = "c".repeat(64);
-    // A portrait chosen by hand, so the quiet "Automatic portrait" button is
-    // drawn too and measured with the others.
-    state.portrait = "d".repeat(64);
-    const fill = banner ? "#ffffff" : portrait;
-    await page.route("**/api/v2/artwork/*", (route) =>
-      route.fulfill({
-        contentType: "image/svg+xml",
-        body: `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="${fill}"/></svg>`,
-      }),
-    );
-    await page.addInitScript((id) => {
-      localStorage.setItem("waveflow.theme", id);
-    }, theme);
-    await page.goto("/artists/artist-1");
-    await expect(page.locator("html")).toHaveAttribute("data-theme", theme);
-    const hero = page.locator(".artist-hero");
-    await expect(
-      hero.locator(banner ? "img.artist-banner" : ".artist-hero-ambient"),
-    ).toBeVisible();
-    await page.evaluate(() =>
-      Promise.all(
-        document.getAnimations().map((animation) => animation.finished.catch(() => undefined)),
-      ),
-    );
-
-    // Each text named by what it says, so that a line gone missing fails
-    // here instead of handing its place to the next one of the same class.
-    const name = hero.getByRole("heading", { name: "Björk", exact: true });
-    const kicker = hero.locator(".eyebrow");
-    const count = hero.getByText("2 albums in your library", { exact: true });
-    const source = hero.getByText("Portrait chosen by hand", { exact: true });
-    for (const text of [name, kicker, count, source]) {
-      await expect(text).toHaveCount(1);
-      await expect(text).toBeVisible();
-    }
-    // And no other source line beside it, left unmeasured.
-    await expect(hero.locator(".artist-source")).toHaveCount(1);
-    expect(await lowestContrast(page, name), "the name").toBeGreaterThanOrEqual(3);
-    for (const [label, text] of [
-      ["the kicker", kicker],
-      ["the count", count],
-      ["the source", source],
-    ] as const) {
-      expect(await lowestContrast(page, text), label).toBeGreaterThanOrEqual(4.5);
-    }
-    // Every button over the picture is measured. The image actions sit
-    // behind one menu button now, which is required, so the loop below
-    // cannot pass over an empty list.
-    const trigger = hero.getByRole("button", { name: "Edit images", exact: true });
-    await expect(trigger).toHaveCount(1);
-    await expect(trigger).toBeVisible();
-    const overPicture = await hero.locator(".artist-image-button").all();
-    expect(overPicture.length).toBeGreaterThan(0);
-    for (const button of overPicture) {
-      if (!(await button.isVisible())) continue;
-      expect(
-        await lowestContrast(page, button, true),
-        `the button “${await button.innerText()}”`,
-      ).toBeGreaterThanOrEqual(4.5);
-    }
-    // And what it opens: the plain entry and the quiet one, both required —
-    // a portrait chosen by hand is why "Automatic portrait" is offered. The
-    // menu is drawn on its own panel, outside the header, and is measured
-    // over whatever it covers all the same.
-    await trigger.click();
-    const menu = page.getByRole("menu", { name: "Images of Björk" });
-    for (const required of ["Change portrait", "Automatic portrait"]) {
-      const entry = menu.getByRole("menuitem", { name: required, exact: true });
-      await expect(entry).toHaveCount(1);
-      await expect(entry).toBeVisible();
-    }
-    for (const entry of await menu.getByRole("menuitem").all()) {
-      expect(
-        await lowestContrast(page, entry.locator("span")),
-        `the menu entry “${await entry.innerText()}”`,
-      ).toBeGreaterThanOrEqual(4.5);
-    }
-  });
-}
-
-/**
- * The light presets share one material and differ by their ground's tint and
- * their accent's 700 stop, which is also the colour of every link and every
- * open item: each one is audited where the accent is spent most.
- */
-for (const theme of [
-  "default",
-  "midnight-light",
-  "sunset-light",
-  "lavender-light",
-  "crimson-light",
-  "ocean-light",
-]) {
-  test(`keeps the ${theme} theme readable`, async ({ page }) => {
-    await serveAttention(page);
-    await page.addInitScript((id) => {
-      localStorage.setItem("waveflow.theme", id);
-    }, theme);
-    await page.goto("/attention");
-    await expect(page.locator("html")).toHaveAttribute("data-theme", theme);
-    await expect(page.getByText("Ashreveal, Ashish Swargiary").first()).toBeVisible();
-    await expectNoWcagViolations(page);
-  });
-}
-
-/**
- * The quality page (RFC-016), as the server answers it: the counts per
- * verdict, the files worst first, one file's measurement with its averaged
- * spectrum, and a spectrogram drawn when asked. Held here so a test can watch
- * what the page asks for and writes.
- */
-async function serveQuality(page: Page) {
-  const fake = {
-    ...song(31, "Made From An MP3", 0, false),
-    bit_depth: 24,
-    bitrate: 812,
-    quality: {
-      verdict: "lossy_source",
-      cutoff_hz: 16_390,
-      wall_db: 41.2,
-      nyquist_hz: 22_050,
-      effective_bits: 24,
-      analyzed_at: 1_700_000_000_000,
-    },
-  };
-  const genuine = {
-    ...song(32, "Straight From The Desk", 0, false),
-    quality: {
-      verdict: "consistent",
-      cutoff_hz: null,
-      wall_db: 4.1,
-      nyquist_hz: 22_050,
-      effective_bits: 16,
-      analyzed_at: 1_700_000_000_000,
-    },
-  };
-  const state = {
-    asked: [] as string[],
-    writes: [] as string[],
-    spectrograms: 0,
-    summaries: 0,
-    /** What the summary says, one entry per ask; the last one repeats. */
-    analyses: [
-      {
-        measured: 2,
-        analysis: {
-          state: "idle",
-          in_flight: 0,
-          pass_started_at: null,
-          last_measured_at: 1_700_000_000_000,
-        },
-      },
-    ] as Array<{ measured: number; analysis: Record<string, unknown> }>,
-  };
-  const base = "**/api/v2/libraries/library-1";
-  await page.route(`${base}/quality`, (route) => {
-    const now =
-      state.analyses[Math.min(state.summaries, state.analyses.length - 1)];
-    state.summaries += 1;
-    return route.fulfill({
-      json: {
-        enabled: true,
-        lossless: 3,
-        measured: now?.measured ?? 2,
-        analysis: now?.analysis,
-        verdicts: [
-          { verdict: "lossy_source", count: 1 },
-          { verdict: "upsampled", count: 0 },
-          { verdict: "padded", count: 0 },
-          { verdict: "unreadable", count: 0 },
-          { verdict: "silent", count: 0 },
-          { verdict: "pending", count: 1 },
-          { verdict: "consistent", count: 1 },
-          { verdict: "lossy", count: 4 },
-          { verdict: "not_measured", count: 0 },
-        ],
-      },
-    });
-  });
-  await page.route(`${base}/quality/tracks?*`, (route) => {
-    const url = new URL(route.request().url());
-    state.asked.push(url.search);
-    const verdict = url.searchParams.get("verdict");
-    const all = [fake, genuine];
-    return route.fulfill({
-      json: verdict
-        ? all.filter((item) => item.quality.verdict === verdict)
-        : all,
-    });
-  });
-  await page.route(`${base}/quality/analysis`, async (route) => {
-    state.writes.push(route.request().method());
-    await route.fulfill({ status: 202, body: "" });
-  });
-  await page.route("**/api/v2/tracks/song-31/quality", (route) =>
-    route.fulfill({
-      json: {
-        ...fake.quality,
-        // Level to 16 kHz, then a wall: what LAME leaves at 128 kbps.
-        spectrum: Array.from({ length: 256 }, (_, band) =>
-          band < 190 ? -20 - band / 20 : -95,
-        ),
-      },
-    }),
-  );
-  await page.route("**/api/v2/tracks/song-31", (route) =>
-    route.fulfill({
-      json: {
-        ...fake,
-        relative_path: "Fakes/Made From An MP3.flac",
-        full_hash: "b".repeat(64),
-        created_at: 1_700_000_000_000,
-      },
-    }),
-  );
-  // No correction: the catch-all would answer with a track, which the panel
-  // would read as one.
-  await page.route("**/api/v2/tracks/song-31/overrides", (route) =>
-    route.fulfill({ status: 404, json: { error: "not found" } }),
-  );
-  await page.route("**/api/v2/tracks/song-31/spectrogram", async (route) => {
-    state.spectrograms += 1;
-    await route.fulfill({
-      status: 200,
-      headers: {
-        "content-type": "image/png",
-        "cache-control": "private, no-cache",
-      },
-      body: Buffer.from(
-        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y9Z4m8AAAAASUVORK5CYII=",
-        "base64",
-      ),
-    });
-  });
-  return state;
-}
-
-test("lists a library's files by what their audio says, worst first", async ({
-  page,
-}) => {
-  const state = await serveQuality(page);
-  await page.goto("/quality");
-  await expect(page.getByRole("heading", { name: "Quality" })).toBeVisible();
-  await expect(page.getByText("2 of 3 lossless files analysed")).toBeVisible();
-
-  const verdicts = page.getByRole("list", { name: "Verdicts" });
-  await expect(
-    verdicts.getByRole("link", { name: /Probably from a lossy file/ }),
-  ).toContainText("1");
-  const rows = page.locator(".quality-table tbody tr");
-  await expect(rows).toHaveCount(2);
-  await expect(rows.first()).toContainText("Made From An MP3");
-  // The cover before the title: a name alone is hard to place.
-  await expect(rows.first().locator(".song-cover")).toHaveCount(1);
-  await expect(rows.first()).toContainText("16.4 kHz");
-  await expect(rows.first()).toContainText("Probably from a lossy file");
-  await expect(rows.nth(1)).toContainText("Full band");
-  await expect(rows.nth(1)).toContainText("No sign of a lossy source");
-  await expectNoWcagViolations(page);
-
-  // A verdict filters through the server, and is written in the address.
-  await verdicts
-    .getByRole("link", { name: /Probably from a lossy file/ })
-    .click();
-  await expect(page).toHaveURL(/verdict=lossy_source/);
-  await expect(rows).toHaveCount(1);
-  expect(
-    state.asked.some((search) => search.includes("verdict=lossy_source")),
-  ).toBe(true);
-
-  // A file opens on its real quality: the verdict, the numbers behind it, the
-  // spectrum it was judged on, and no spectrogram until somebody asks.
-  await page
-    .getByRole("button", { name: /^Made From An MP3/ })
-    .click();
-  const dialog = page.getByRole("dialog");
-  await expect(
-    dialog.getByRole("heading", { name: "Real quality" }),
-  ).toBeVisible();
-  await expect(
-    dialog.getByRole("img", {
-      name: "Averaged spectrum: the highs stop at 16.4 kHz.",
-    }),
-  ).toBeVisible();
-  expect(state.spectrograms).toBe(0);
-  await dialog.getByRole("button", { name: "Show the spectrogram" }).click();
-  await expect(
-    dialog.getByRole("img", { name: /Spectrogram of Made From An MP3/ }),
-  ).toBeVisible();
-  expect(state.spectrograms).toBe(1);
-  await expectNoWcagViolations(page);
-});
-
-test("asks for the whole library to be analysed again on the second click", async ({
-  page,
-}) => {
-  const state = await serveQuality(page);
-  await page.goto("/quality");
-  await page.getByRole("button", { name: "Analyse again" }).click();
-  expect(state.writes).toEqual([]);
-  await page
-    .getByRole("button", { name: "Confirm: analyse the whole library again" })
-    .click();
-  await expect(
-    page.getByText("The library will be analysed again in the background."),
-  ).toBeVisible();
-  expect(state.writes).toEqual(["POST"]);
-});
-
-test("shows a listener the quality, and nothing to ask for", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  await serveQuality(page);
-  await page.goto("/quality");
-  await expect(page.locator(".quality-table tbody tr")).toHaveCount(2);
-  await expect(
-    page.getByRole("button", { name: "Analyse again" }),
-  ).toHaveCount(0);
-});
-
-test("keeps the quality page readable in the light", async ({ page }) => {
-  await serveQuality(page);
-  await chooseLightTheme(page);
-  await page.goto("/quality");
-  await expect(page.locator(".quality-table tbody tr")).toHaveCount(2);
-  await expectNoWcagViolations(page);
-});
-
-test("shows the analysis moving, then at rest, and stops asking", async ({
-  page,
-}) => {
-  const state = await serveQuality(page);
-  const running = (measured: number) => ({
-    measured,
-    analysis: {
-      state: "running",
-      in_flight: 1,
-      pass_started_at: 1_700_000_000_000,
-      last_measured_at: 1_700_000_000_000,
-    },
-  });
-  state.analyses = [
-    running(1),
-    running(2),
-    {
-      measured: 3,
-      analysis: {
-        state: "idle",
-        in_flight: 0,
-        pass_started_at: null,
-        last_measured_at: 1_700_000_000_000,
-      },
-    },
-  ];
-  await page.goto("/quality");
-  const status = page.getByRole("status").filter({ hasText: /Analysing|Idle/ });
-  await expect(status).toHaveText(
-    "Analysing now: 1 of 3 done, 1 in progress.",
-  );
-  // The count moves under the reader while the pass runs.
-  await expect(status).toHaveText(
-    "Analysing now: 2 of 3 done, 1 in progress.",
-    { timeout: 10_000 },
-  );
-  await expect(status).toHaveText(/^Idle\. Last file analysed /, {
-    timeout: 10_000,
-  });
-  // At rest, nothing is asked again.
-  const asked = state.summaries;
-  await page.waitForTimeout(4_000);
-  expect(state.summaries).toBe(asked);
-  await expectNoWcagViolations(page);
-});
-
-test("says the analysis waits for the scan", async ({ page }) => {
-  const state = await serveQuality(page);
-  state.analyses = [
-    {
-      measured: 0,
-      analysis: {
-        state: "waiting_for_scan",
-        in_flight: 0,
-        pass_started_at: null,
-        last_measured_at: null,
-      },
-    },
-  ];
-  await page.goto("/quality");
-  await expect(
-    page.getByText("Waiting for the scan to finish before analysing."),
-  ).toBeVisible();
-});
-
-/** What the summary says of the analysis, at rest or at work. */
-function analysisAt(
-  measured: number,
-  state: "idle" | "running",
-): { measured: number; analysis: Record<string, unknown> } {
-  return {
-    measured,
-    analysis: {
-      state,
-      in_flight: state === "running" ? 1 : 0,
-      pass_started_at: state === "running" ? 1_700_000_000_000 : null,
-      last_measured_at: 1_700_000_000_000,
-    },
-  };
-}
-
-test("offers no new analysis while one runs", async ({ page }) => {
-  const state = await serveQuality(page);
-  state.analyses = [analysisAt(1, "running")];
-  await page.goto("/quality");
-  await expect(page.getByText(/^Analysing now:/)).toBeVisible();
-  // The server says a pass runs, so there is nothing to start: the offer
-  // comes from its answer, not from what this page remembers doing.
-  await expect(
-    page.getByRole("button", { name: "Analyse again" }),
-  ).toHaveCount(0);
-});
-
-test("asks for the header again when the list is filtered", async ({
-  page,
-}) => {
-  const state = await serveQuality(page);
-  state.analyses = [analysisAt(0, "idle"), analysisAt(2, "idle")];
-  await page.goto("/quality");
-  await expect(page.getByText("0 of 3 lossless files analysed")).toBeVisible();
-  await page
-    .getByRole("list", { name: "Verdicts" })
-    .getByRole("link", { name: /No sign of a lossy source/ })
-    .click();
-  // At rest the summary is not polled, so only the filter can have asked.
-  await expect(page.getByText("2 of 3 lossless files analysed")).toBeVisible();
-});
-
-test("asks for the header again on every visit", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name === "mobile", "walks the desktop sidebar");
-  const state = await serveQuality(page);
-  state.analyses = [analysisAt(0, "idle"), analysisAt(2, "idle")];
-  await page.goto("/quality");
-  await expect(page.getByText("0 of 3 lossless files analysed")).toBeVisible();
-  // Away and back inside the cache's thirty seconds: an answer held from the
-  // first visit would contradict the rows drawn on the second.
-  const sidebar = page.getByRole("navigation");
-  await sidebar.getByRole("link", { name: "Queue" }).click();
-  await expect(page.getByRole("heading", { name: "Queue" })).toBeVisible();
-  // The rail's entry opens the first section this owner may use, and the
-  // hub's menu the one this test is about.
-  await page.locator(".sidebar").getByRole("link", { name: "Maintenance" }).click();
-  await page
-    .getByRole("navigation", { name: "Maintenance sections" })
-    .getByRole("link", { name: "Quality" })
-    .click();
-  await expect(page.getByText("2 of 3 lossless files analysed")).toBeVisible();
-});
-
-/**
- * RFC-022 decisions 2 and 3 on the screen: the albums in the sections the
- * server filed them under, in the page's order whatever order they came in,
- * empty sections left out, and the appearances last.
- */
-test("an artist page files its records by type, and lists what it appears on", async ({
-  page,
-}) => {
-  artistExtra = {
-    albums: [
-      { ...albums[1], id: "album-3", title: "Vespertine Live", release_group: "live" },
-      { ...albums[0], release_group: "album" },
-      { ...albums[1], release_group: "album" },
-    ],
-    appears_on: [
-      {
-        ...albums[0],
-        id: "album-9",
-        title: "Guest Spot",
-        artist: "Someone Else",
-        artist_id: "artist-9",
-        release_group: "album",
-      },
-    ],
-  };
-  await page.goto("/artists/artist-1");
-  await expect(
-    page.getByRole("heading", { name: "Björk", level: 2 }),
-  ).toBeVisible();
-  await expect(page.locator(".artist-discography h3")).toHaveText([
-    "Albums",
-    "Live",
-    "Appears on",
-  ]);
-  const appearances = page.getByRole("region", { name: "Appears on" });
-  await expect(appearances.getByText("Guest Spot", { exact: true })).toBeVisible();
-  await expect(appearances.getByText("Someone Else")).toBeVisible();
-  // Filed under its own section, and nowhere else.
-  await expect(
-    page.getByRole("region", { name: "Live" }).getByText("Vespertine Live"),
-  ).toBeVisible();
-  await expect(
-    page.getByRole("region", { name: "Albums" }).getByText("Vespertine Live"),
-  ).toHaveCount(0);
-  await expectNoWcagViolations(page);
-});
-
-/**
- * An older server sends no groups and no appearances: one section, the one
- * the page always had.
- */
-test("an artist page from a server without release groups keeps one section", async ({
-  page,
-}) => {
-  await page.goto("/artists/artist-1");
-  await expect(page.locator(".artist-discography h3")).toHaveText(["Albums"]);
-  await expect(
-    page.getByRole("region", { name: "Albums" }).getByText("Vespertine", { exact: true }),
-  ).toBeVisible();
-});
-
-/**
- * RFC-022 decision 1: ReplayGain is off until asked for, and asking for it is
- * what builds the Web Audio graph — on the next play, never on page load.
- *
- * The browser's own `AudioContext` and `AudioParam` are wrapped to count
- * contexts and record the gains set, because the level a track is played at
- * cannot be heard by a test. What can be read is that no context exists while
- * the setting is off, that exactly one exists once a play follows turning it
- * on, and that the gain set is the one the tags and the preamp call for.
- */
-test("levels a track by its ReplayGain only once asked to, and remembers how", async ({
-  page,
-}) => {
-  await page.addInitScript(() => {
-    const record = window as unknown as {
-      __contexts: number;
-      __gains: number[];
-    };
-    record.__contexts = 0;
-    record.__gains = [];
-    const setValueAtTime = AudioParam.prototype.setValueAtTime;
-    AudioParam.prototype.setValueAtTime = function (value, time) {
-      record.__gains.push(value);
-      return setValueAtTime.call(this, value, time);
-    };
-    const Original = window.AudioContext;
-    window.AudioContext = class extends Original {
-      constructor(options?: AudioContextOptions) {
-        super(options);
-        record.__contexts += 1;
-      }
-    };
-  });
-  const contexts = () =>
-    page.evaluate(() => (window as unknown as { __contexts: number }).__contexts);
-  const gains = () =>
-    page.evaluate(() => (window as unknown as { __gains: number[] }).__gains);
-
-  // Off by default: playing builds nothing.
-  await page.goto("/albums/album-2");
-  await page.getByRole("button", { name: "Play album" }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  expect(await contexts()).toBe(0);
-
-  await page.goto("/settings/playback");
-  const playback = page.locator(".settings-panel", {
-    has: page.getByRole("heading", { name: "Volume levelling" }),
-  });
-  // The preamp changes nothing while ReplayGain is off, so it is not offered.
-  await expect(playback.getByRole("slider", { name: "Preamp" })).toHaveCount(0);
-  await playback.getByLabel("ReplayGain").selectOption("album");
-  const preamp = playback.getByRole("slider", { name: "Preamp" });
-  await expect(preamp).toBeVisible();
-  await preamp.fill("3");
-  await expect(playback.locator("output")).toHaveText("+3 dB");
-  await expect
-    .poll(() => page.evaluate(() => localStorage.getItem("waveflow.replayGain")))
-    .toBe(JSON.stringify({ mode: "album", preampDb: 3 }));
-  await expectNoWcagViolations(page);
-  // Choosing it is not playing: still no graph.
-  expect(await contexts()).toBe(0);
-
-  // Remembered across a reload, and applied on the next play: the album gain
-  // of −8 dB plus the 3 dB preamp, well under what the 0.95 peak allows.
-  await page.goto("/albums/album-2");
-  await page.getByRole("button", { name: "Play album" }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  await expect.poll(contexts).toBe(1);
-  await expect
-    .poll(async () => (await gains()).at(-1))
-    .toBeCloseTo(10 ** (-5 / 20), 4);
-
-  // Track mode levels by the track's own gain: −7 dB for the first track.
-  await page.goto("/settings/playback");
-  await page.getByLabel("ReplayGain").selectOption("track");
-  await page.goto("/albums/album-2");
-  await page.getByRole("button", { name: "Play album" }).click();
-  await expect
-    .poll(async () => (await gains()).at(-1))
-    .toBeCloseTo(10 ** (-4 / 20), 4);
-});
-
-/**
- * RFC-022 decision 4: the client declares a manifest a phone can install from,
- * and every icon it names is served as an image.
- */
-test("declares an install manifest whose icons are all served", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
-  await page.goto("/");
-  await expect(page.locator('link[rel="manifest"]')).toHaveAttribute(
-    "href",
-    "/manifest.webmanifest",
-  );
-  await expect(page.locator('link[rel="apple-touch-icon"]')).toHaveAttribute(
-    "href",
-    "/apple-touch-icon.png",
-  );
-  const response = await page.request.get("/manifest.webmanifest");
-  expect(response.status()).toBe(200);
-  expect(response.headers()["content-type"]).toContain(
-    "application/manifest+json",
-  );
-  const manifest = (await response.json()) as {
-    start_url: string;
-    display: string;
-    theme_color: string;
-    background_color: string;
-    icons: Array<{ src: string; sizes: string; purpose: string }>;
-  };
-  expect(manifest.start_url).toBe("/");
-  expect(manifest.display).toBe("standalone");
-  // Wave green for both, as the logo kit's own manifest and head snippet set
-  // them: the launch screen is the icon's tile, edge to edge.
-  expect(manifest.theme_color).toBe("#10B981");
-  expect(manifest.background_color).toBe("#10B981");
-  await expect(page.locator('meta[name="theme-color"]')).toHaveAttribute(
-    "content",
-    "#10B981",
-  );
-  expect(manifest.icons.map((icon) => icon.sizes)).toEqual(
-    expect.arrayContaining(["192x192", "512x512"]),
-  );
-  expect(manifest.icons.some((icon) => icon.purpose === "maskable")).toBe(true);
-  for (const { src, sizes } of [
-    ...manifest.icons,
-    { src: "/apple-touch-icon.png", sizes: "180x180" },
-  ]) {
-    const icon = await page.request.get(src);
-    expect(icon.status(), src).toBe(200);
-    expect(icon.headers()["content-type"], src).toContain("image/png");
-    // The size it claims is the size it is: a PNG's IHDR carries both.
-    const bytes = await icon.body();
-    expect(
-      `${bytes.readUInt32BE(16)}x${bytes.readUInt32BE(20)}`,
-      src,
-    ).toBe(sizes);
-  }
-});
-
-/**
- * The two RFC-022 screens in the light appearance, whose contrast the dark
- * default's sweep says nothing about: the playback settings with the preamp
- * showing, and an artist page with every kind of section.
- */
-test("keeps the playback settings and the discography readable in light", async ({
-  page,
-}) => {
-  await page.addInitScript(() => {
-    localStorage.setItem("waveflow.theme", "default");
-    localStorage.setItem(
-      "waveflow.replayGain",
-      JSON.stringify({ mode: "track", preampDb: -2 }),
-    );
-  });
-  await page.goto("/settings/playback");
-  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
-  await expect(page.getByRole("slider", { name: "Preamp" })).toHaveValue("-2");
-  await expect(page.locator(".replay-gain-preamp output")).toHaveText("−2 dB");
-  await expectNoWcagViolations(page);
-
-  artistExtra = {
-    albums: [
-      { ...albums[0], release_group: "album" },
-      { ...albums[1], id: "album-4", title: "Single Cut", release_group: "single" },
-      { ...albums[1], id: "album-5", title: "Best Of", release_group: "compilation" },
-    ],
-    appears_on: [{ ...albums[0], id: "album-9", title: "Guest Spot", artist: "Someone Else" }],
-  };
-  await page.goto("/artists/artist-1");
-  await expect(page.locator(".artist-discography h3")).toHaveText([
-    "Albums",
-    "Singles",
-    "Compilations",
-    "Appears on",
-  ]);
-  await expectNoWcagViolations(page);
-});
-
-/**
- * A context the browser will not let run never claims the element.
- *
- * Once `createMediaElementSource` has the element, its sound reaches the
- * speakers only through the context, so a context left suspended would play
- * the music as silence while the player said it was playing. Here the
- * browser's context is replaced by one that stays suspended and whose resume
- * never settles — what a browser does when it does not count the gesture —
- * and the element must stay unclaimed, playing as it always did.
- */
-test("leaves the element alone when the audio context will not run", async ({
-  page,
-}) => {
-  await page.addInitScript(() => {
-    localStorage.setItem(
-      "waveflow.replayGain",
-      JSON.stringify({ mode: "album", preampDb: 0 }),
-    );
-    const record = window as unknown as { __contexts: number; __claims: number };
-    record.__contexts = 0;
-    record.__claims = 0;
-    const Original = window.AudioContext;
-    window.AudioContext = class extends Original {
-      constructor(options?: AudioContextOptions) {
-        super(options);
-        record.__contexts += 1;
-      }
-      override get state(): AudioContextState {
-        return "suspended";
-      }
-      override resume(): Promise<void> {
-        return new Promise(() => undefined);
-      }
-      override createMediaElementSource(element: HTMLMediaElement) {
-        record.__claims += 1;
-        return super.createMediaElementSource(element);
-      }
-    };
-  });
-  await page.goto("/albums/album-2");
-  await page.getByRole("button", { name: "Play album" }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  await expect
-    .poll(() =>
-      page.evaluate(() => (window as unknown as { __contexts: number }).__contexts),
-    )
-    .toBe(1);
-  // A second gesture asks the same candidate again rather than making another.
-  await page.locator(".album-songs .song-title").nth(1).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Cocoon");
-  const seen = await page.evaluate(() => {
-    const record = window as unknown as { __contexts: number; __claims: number };
-    return { contexts: record.__contexts, claims: record.__claims };
-  });
-  expect(seen).toEqual({ contexts: 1, claims: 0 });
-});
-
-/**
- * Signing out closes every AudioContext the player opened.
- *
- * Signing out unmounts the player, and an open context holds the audio device
- * until it is closed; a browser caps how many one page may have, so each
- * sign-in would otherwise leave one more behind. Both kinds are covered: the
- * graph a play built, and a candidate still waiting to run — the one a
- * browser that does not count the gesture leaves pending for ever.
- */
-for (const kind of ["running", "pending"] as const) {
-  test(`closes the ${kind} audio context when the listener signs out`, async ({
-    page,
-  }, testInfo) => {
-    test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
-    await page.addInitScript((pending) => {
-      localStorage.setItem(
-        "waveflow.replayGain",
-        JSON.stringify({ mode: "album", preampDb: 0 }),
-      );
-      const contexts: AudioContext[] = [];
-      (window as unknown as { __contexts: AudioContext[] }).__contexts =
-        contexts;
-      const Original = window.AudioContext;
-      window.AudioContext = pending
-        ? class extends Original {
-            constructor(options?: AudioContextOptions) {
-              super(options);
-              contexts.push(this);
-            }
-            // Stays suspended until closed, and never resumes.
-            override get state(): AudioContextState {
-              return super.state === "closed" ? "closed" : "suspended";
-            }
-            override resume(): Promise<void> {
-              return new Promise(() => undefined);
-            }
-          }
-        : class extends Original {
-            constructor(options?: AudioContextOptions) {
-              super(options);
-              contexts.push(this);
-            }
-          };
-    }, kind === "pending");
-    const states = () =>
-      page.evaluate(() =>
-        (window as unknown as { __contexts: AudioContext[] }).__contexts.map(
-          (context) => context.state,
-        ),
-      );
-
-    await page.goto("/albums/album-2");
-    await page.getByRole("button", { name: "Play album" }).click();
-    await expect(page.locator(".player-track strong")).toHaveText(
-      "Hidden Place",
-    );
-    await expect
-      .poll(states)
-      .toEqual([kind === "running" ? "running" : "suspended"]);
-
-    // Dispatched rather than clicked, as in the cache test: the sidebar's
-    // footer sits under the fixed player bar at this viewport.
-    await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
-    await expect(page).toHaveURL(/\/login$/);
-    await expect.poll(states).toEqual(["closed"]);
-  });
-}
-
-/**
- * Seconds of 8 kHz, 8-bit mono silence as a WAV file: something the browser
- * decodes and plays for real, so `paused` and `currentTime` mean what they
- * say, at a size a route can answer in one piece.
- */
-function silentWav(seconds: number): Buffer {
-  const rate = 8_000;
-  const samples = rate * seconds;
-  const header = Buffer.alloc(44);
-  header.write("RIFF", 0);
-  header.writeUInt32LE(36 + samples, 4);
-  header.write("WAVE", 8);
-  header.write("fmt ", 12);
-  header.writeUInt32LE(16, 16);
-  header.writeUInt16LE(1, 20);
-  header.writeUInt16LE(1, 22);
-  header.writeUInt32LE(rate, 24);
-  header.writeUInt32LE(rate, 28);
-  header.writeUInt16LE(1, 32);
-  header.writeUInt16LE(8, 34);
-  header.write("data", 36);
-  header.writeUInt32LE(samples, 40);
-  // Unsigned 8-bit samples sit at 128 when silent.
-  return Buffer.concat([header, Buffer.alloc(samples, 128)]);
-}
-
-/**
- * Signing out stops the music, whatever the ReplayGain mode.
- *
- * The cleanup that closes the audio contexts above also paused the element,
- * but only on its way out of a graph: with ReplayGain off — the default, and
- * so the common case — nothing paused it, and the music carried on over the
- * sign-in page. The element is never in the document, so every one that was
- * asked to play is recorded, and a real file is served so that it plays.
- */
-test("stops the music when the listener signs out with ReplayGain off", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
-  await page.addInitScript(() => {
-    const played = new Set<HTMLMediaElement>();
-    (window as unknown as { __played: Set<HTMLMediaElement> }).__played =
-      played;
-    const play = HTMLMediaElement.prototype.play;
-    HTMLMediaElement.prototype.play = function () {
-      played.add(this);
-      return play.call(this);
-    };
-    const record = window as unknown as { __contexts: number };
-    record.__contexts = 0;
-    const Original = window.AudioContext;
-    window.AudioContext = class extends Original {
-      constructor(options?: AudioContextOptions) {
-        super(options);
-        record.__contexts += 1;
-      }
-    };
-  });
-  const audio = silentWav(60);
-  await page.route("**/api/v2/tracks/*/stream-ticket", (route) =>
-    route.fulfill({
-      json: { url: "/api/v2/stream/ticket-e2e", expires_at: Date.now() + 60_000 },
-    }),
-  );
-  await page.route("**/api/v2/stream/*", (route) =>
-    route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } }),
-  );
-  const playing = () =>
-    page.evaluate(() =>
-      [
-        ...(window as unknown as { __played: Set<HTMLMediaElement> }).__played,
-      ].filter((element) => !element.paused).length,
-    );
-
-  await page.goto("/albums/album-2");
-  await page.getByRole("button", { name: "Play album" }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  // Playing for real, and off the plain path: no graph was asked for.
-  await expect
-    .poll(() =>
-      page.evaluate(() =>
-        [
-          ...(window as unknown as { __played: Set<HTMLMediaElement> }).__played,
-        ].some((element) => !element.paused && element.currentTime > 0),
-      ),
-    )
-    .toBe(true);
-  expect(
-    await page.evaluate(
-      () => (window as unknown as { __contexts: number }).__contexts,
-    ),
-  ).toBe(0);
-
-  // Dispatched rather than clicked, as in the cache test: the sidebar's
-  // footer sits under the fixed player bar at this viewport.
-  await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
-  await expect(page).toHaveURL(/\/login$/);
-  await expect.poll(playing).toBe(0);
-});
-
-/**
- * Signing out lets go of the next track too.
- *
- * The player loads the track after the current one into a second element so
- * that skipping starts at once. That element never plays, but it holds its
- * source and may still be fetching it, for an account that has just left. Every
- * element that was asked to load is recorded, and none may keep a source once
- * the listener is signed out.
- */
-test("releases the next track's preload when the listener signs out", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
-  await page.addInitScript(() => {
-    const loaded = new Set<HTMLMediaElement>();
-    (window as unknown as { __loaded: Set<HTMLMediaElement> }).__loaded =
-      loaded;
-    const load = HTMLMediaElement.prototype.load;
-    HTMLMediaElement.prototype.load = function () {
-      loaded.add(this);
-      return load.call(this);
-    };
-  });
-  const audio = silentWav(60);
-  await page.route("**/api/v2/tracks/*/stream-ticket", (route) => {
-    const trackId = new URL(route.request().url()).pathname.split("/")[4];
-    return route.fulfill({
-      json: {
-        url: `/api/v2/stream/ticket-${trackId}`,
-        expires_at: Date.now() + 60_000,
-      },
-    });
-  });
-  await page.route("**/api/v2/stream/*", (route) =>
-    route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } }),
-  );
-  const sources = () =>
-    page.evaluate(() =>
-      [...(window as unknown as { __loaded: Set<HTMLMediaElement> }).__loaded]
-        .map((element) => element.getAttribute("src"))
-        .filter((source) => source !== null),
-    );
-
-  await page.goto("/albums/album-2");
-  await page.getByRole("button", { name: "Play album" }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  // The next track, Cocoon, is being preloaded beside the one playing. Named
-  // rather than counted: the playing element is asked to load too, and its
-  // own source alone would let the sign-out run before the preload exists.
-  await expect.poll(sources).toContain("/api/v2/stream/ticket-song-2");
-
-  // Dispatched rather than clicked, as in the cache test: the sidebar's
-  // footer sits under the fixed player bar at this viewport.
-  await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
-  await expect(page).toHaveURL(/\/login$/);
-  await expect.poll(sources).toEqual([]);
-});
-
-/**
- * "Missing files" (RFC-021 decision 4): what the scans can no longer find, what
- * purging each would cost, and a purge that takes two clicks and only what was
- * chosen. A purge is not reversible, so the first click only arms it.
- */
-test("lists the missing files and purges only what was chosen", async ({
-  page,
-}) => {
-  missingTracks = [missingTrack(1, "First light"), missingTrack(2, "Second wind")];
-  await page.goto("/missing");
-
-  await expect(
-    page.getByRole("heading", { name: "Missing files" }),
-  ).toBeVisible();
-  await expect(
-    page.getByText("2 files the scans can no longer find"),
-  ).toBeVisible();
-  await expect(page.getByText("Gone/2 Second wind.flac")).toBeVisible();
-  await expect(
-    page.getByText("2 in playlists · 1 favourites · 6 plays"),
-  ).toBeVisible();
-  await expectNoWcagViolations(page);
-
-  await page.getByRole("checkbox", { name: "Select First light" }).check();
-  const purge = page.getByRole("button", { name: "Purge the selected (1)" });
-  await purge.click();
-  // Armed, not sent.
-  await expect(
-    page.getByRole("button", { name: "Confirm: purge 1" }),
-  ).toBeVisible();
-  expect(purgeAsks).toEqual([]);
-
-  await page.getByRole("button", { name: "Confirm: purge 1" }).click();
-  await expect(page.getByText("1 track purged.")).toBeVisible();
-  expect(purgeAsks).toEqual([{ track_ids: ["missing-1"] }]);
-  // Out of the missing files, and into the purged ones it can come back from.
-  const listed = page.locator("ul.missing-list").first();
-  await expect(listed.getByText("Gone/1 First light.flac")).toHaveCount(0);
-  await expect(listed.getByText("Gone/2 Second wind.flac")).toBeVisible();
-  await expect(
-    page
-      .getByRole("region", { name: "Purged, still restorable (1)" })
-      .getByText("Gone/1 First light.flac"),
-  ).toBeVisible();
-});
-
-/** Purging is a curator's: a listener is told so and asks for nothing. */
-test("keeps the missing files from a listener", async ({ page }) => {
-  const asked: string[] = [];
-  page.on("request", (request) => {
-    const path = new URL(request.url()).pathname;
-    if (path.includes("/unavailable-tracks")) asked.push(path);
-  });
-  // A listener who is not an administrator either: the default session is
-  // one, and an administrator may see the page whatever their library role.
-  await page.route("**/api/v2/web/auth/refresh", (route) =>
-    route.fulfill({
-      json: { ...session, user: { ...session.user, role: "user" } },
-    }),
-  );
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  missingTracks = [missingTrack(1, "First light")];
-  await page.goto("/missing");
-  await expect(
-    page.getByText(
-      "Only the owners and managers of this library, and administrators, see its missing files.",
-    ),
-  ).toBeVisible();
-  await expect(page.getByText("Gone/1 First light.flac")).toHaveCount(0);
-  expect(asked).toEqual([]);
-});
-
-/**
- * The server grants the page to the instance's administrators whatever their
- * role in the library (RFC-021 decision 4), so the client must not hide it
- * from an administrator who only listens to it.
- */
-test("shows the missing files to an administrator who only listens", async ({
-  page,
-}) => {
-  libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
-  missingTracks = [missingTrack(1, "First light")];
-  await page.goto("/missing");
-  await expect(page.getByText("Gone/1 First light.flac")).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Purge them all" }),
-  ).toBeVisible();
-});
-
-// ── RFC-024: mixes, statistics and lyrics from LRCLIB ──
-
-const dailyMixes = () => [
-  {
-    id: "most-played",
-    kind: "most_played",
-    genre: null,
-    decade: null,
-    track_count: 2,
-    artwork_hashes: [],
-  },
-  {
-    id: "genre:art pop",
-    kind: "genre",
-    genre: "Art Pop",
-    decade: null,
-    track_count: 2,
-    artwork_hashes: [],
-  },
-  {
-    id: "decade:1990",
-    kind: "decade",
-    genre: null,
-    decade: 1990,
-    track_count: 2,
-    artwork_hashes: [],
-  },
-];
-
-test("offers the day's mixes above the albums, and plays one", async ({
-  page,
-}) => {
-  mixes = dailyMixes();
-  // Asked within the active library, like every other catalogue read.
-  const scopes: Array<string | null> = [];
-  page.on("request", (request) => {
-    const url = new URL(request.url());
-    if (url.pathname === "/api/v2/mixes") {
-      scopes.push(url.searchParams.get("library_id"));
-    }
-  });
-  await page.goto("/");
-  const shelf = page.locator(".mix-shelf");
-  await expect(
-    shelf.getByRole("heading", { name: "Mixes for you" }),
-  ).toBeVisible();
-  // Named by the client, in the listener's language, from what the server
-  // sent: a kind and its parameter, never a title.
-  await expect(shelf.getByRole("link")).toHaveText([
-    /Most played/,
-    /Art Pop mix/,
-    /The 1990s/,
-  ]);
-  // The albums below are what they were: the shelf takes no card from them.
-  await expect(page.locator(".grid li")).toHaveCount(2);
-  expect(scopes).toEqual(["library-1"]);
-
-  await shelf.getByRole("button", { name: "Play: Most played" }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  expect(mixAsks).toEqual(["most-played"]);
-  await expectNoWcagViolations(page);
-
-  // A genre's name travels in the address whole, space and all.
-  await shelf.getByRole("link", { name: /Art Pop mix/ }).click();
-  await expect(page.getByRole("heading", { name: "Art Pop mix" })).toBeVisible();
-  await expect(page.getByText("2 tracks, drawn for today")).toBeVisible();
-  expect(mixAsks).toEqual(["most-played", "genre:art pop"]);
-  await expectNoWcagViolations(page);
-
-  // Filtering the albums leaves the suggestion out of the way.
-  await page.goto("/");
-  await expect(shelf).toBeVisible();
-  await page.getByLabel("Filter by title or artist").fill("Post");
-  await expect(shelf).toHaveCount(0);
-});
-
-test("says so when a mix cannot be opened, and lets the press be tried again", async ({
-  page,
-}) => {
-  mixes = dailyMixes();
-  mixFails = true;
-  await page.goto("/");
-  const shelf = page.locator(".mix-shelf");
-  await shelf.getByRole("button", { name: "Play: Most played" }).click();
-  await expect(shelf.getByRole("alert")).toHaveText(
-    "“Most played” could not be opened. Try again.",
-  );
-  // Both actions say it, and neither stays disabled after the failure.
-  await shelf.getByRole("button", { name: "Add to queue: Art Pop mix" }).click();
-  await expect(shelf.getByRole("alert")).toHaveText(
-    "“Art Pop mix” could not be opened. Try again.",
-  );
-  await expectNoWcagViolations(page);
-
-  mixFails = false;
-  await shelf.getByRole("button", { name: "Play: Most played" }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
-  await expect(shelf.getByRole("alert")).toHaveCount(0);
-});
-
-test("shows no shelf when the server has nothing to suggest", async ({
-  page,
-}) => {
-  await page.goto("/");
-  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
-  await expect(page.locator(".grid li")).toHaveCount(2);
-  await expect(page.locator(".mix-shelf")).toHaveCount(0);
-});
-
-test("says a mix that is gone is gone, rather than drawing an empty one", async ({
-  page,
-}) => {
-  await page.goto("/mixes/never-played");
-  // The page's own alert. The player bar may raise one of its own about the
-  // restored queue, which the mocks cannot stream; that one is not this
-  // test's subject.
-  await expect(page.locator("main").getByRole("alert")).toContainText(
-    "We could not load this view",
-  );
-});
-
-test("shows this account's listening, period by period", async ({ page }) => {
-  await page.goto("/stats");
-  await expect(page.getByRole("heading", { name: "Statistics" })).toBeVisible();
-  const totals = page.locator(".stats-totals");
-  await expect(totals).toContainText("Listens");
-  await expect(totals).toContainText("Listening time");
-  // A bar per day of the default thirty, the empty ones included.
-  await expect(page.locator(".stats-timeline li")).toHaveCount(30);
-  await expect(
-    page.getByRole("listitem", { name: "2026-10-30: 4 listens" }),
-  ).toBeVisible();
-  await expect(page.getByRole("heading", { name: "Top tracks" })).toBeVisible();
-  const columns = page.locator(".stats-columns");
-  await expect(
-    columns.getByRole("link", { name: "Björk", exact: true }),
-  ).toBeVisible();
-  await expect(columns.getByRole("link", { name: "Art Pop" })).toBeVisible();
-  await expect(columns.getByRole("link", { name: /Vespertine/ })).toBeVisible();
-  await expect(page.locator(".stats-moments")).toContainText("Cocoon, ");
-  // Every track, artist and album entry carries its cover (or the lettered
-  // placeholder when there is none); a genre has no artwork to show.
-  const entries = columns.locator(".stats-entry");
-  await expect(columns.locator(".stats-entry .stats-art")).toHaveCount(
-    (await entries.count()) - 1,
-  );
-  await expect(
-    columns
-      .getByRole("link", { name: "Björk", exact: true })
-      .locator(".stats-art-round"),
-  ).toHaveCount(1);
-  await expect(
-    columns.getByRole("link", { name: "Art Pop" }).locator(".stats-art"),
-  ).toHaveCount(0);
-  // A top track is a button, and a button holds phrasing content only: the
-  // lettered placeholder inside it must not be a `div`.
-  await expect(columns.locator("button .cover-fallback")).toHaveCount(2);
-  await expect(columns.locator("button div")).toHaveCount(0);
-  await expectNoWcagViolations(page);
-
-  await page.getByRole("combobox", { name: "Period" }).selectOption("7d");
-  await expect(page.locator(".stats-timeline li")).toHaveCount(7);
-  await page.getByRole("combobox", { name: "Period" }).selectOption("365d");
-  await expect(page.locator(".stats-timeline li")).toHaveCount(12);
-  await expect(
-    page.getByRole("heading", { name: "Listens per month" }),
-  ).toBeVisible();
-  expect(statsAsks).toEqual(["30d", "7d", "365d"]);
-
-  // A top track plays from the list, with the others after it.
-  await columns.getByRole("button", { name: /Cocoon/ }).click();
-  await expect(page.locator(".player-track strong")).toHaveText("Cocoon");
-});
-
-test("keeps the statistics and the shelf readable in the light", async ({
-  page,
-}) => {
-  await page.addInitScript(() => {
-    localStorage.setItem("waveflow.theme", "default");
-  });
-  mixes = dailyMixes();
-  await page.goto("/");
-  await expect(page.locator(".mix-shelf")).toBeVisible();
-  await expectNoWcagViolations(page);
-  await page.goto("/stats");
-  await expect(page.locator(".stats-timeline li")).toHaveCount(30);
-  await expectNoWcagViolations(page);
-});
-
-test("credits LRCLIB for words the server looked up", async ({ page }) => {
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: "Björk",
-      displayTitle: "Army of Me",
-      lang: "xxx",
-      synced: true,
-      line: [
-        { start: 1_000, value: "If you complain once more" },
-        { start: 4_500, value: "You'll meet an army of me" },
-      ],
-      source: "lrclib",
-    },
-  ]);
-  await page.goto("/playing");
-  await expect(page.locator(".playing .lyrics")).toContainText(
-    "Lyrics from LRCLIB",
-  );
-  await page.getByRole("link", { name: "Lyrics", exact: true }).click();
-  await expect(page.locator(".lyrics-view")).toContainText(
-    "Lyrics from LRCLIB",
-  );
-  await expectNoWcagViolations(page);
-});
-
-test("credits nobody for words that travel with the file", async ({ page }) => {
-  lyricSheets.set("song-1", [
-    {
-      displayArtist: "Björk",
-      displayTitle: "Army of Me",
-      lang: "eng",
-      synced: false,
-      line: [{ value: "If you complain once more" }],
-      source: "embedded",
-    },
-  ]);
-  await page.goto("/playing");
-  await expect(page.locator(".playing .lyrics")).toContainText(
-    "If you complain once more",
-  );
-  await expect(page.getByText("Lyrics from LRCLIB")).toHaveCount(0);
-});
-
-/**
- * A playlist's owner moves an entry and removes one, each named by the
- * position shown (RFC-020, what was still open): a move sends the track it
- * believes is there, so a list changed elsewhere is refused rather than
- * edited in the wrong place.
- */
-test("moves and removes a playlist entry by the position it is shown at", async ({
-  page,
-}) => {
-  const asks: Array<[string, unknown]> = [];
-  const listed = {
-    ...playlists[0],
-    songs: [
-      song(1, "Hidden Place", 5, true),
-      song(2, "Cocoon", 0, false),
-      song(3, "Aurora", 0, false),
-    ],
-  };
-  await page.route("**/api/v2/playlists?*", (route) =>
-    route.fulfill({ json: [listed] }),
-  );
-  await page.route("**/api/v2/playlists/playlist-1/move", async (route) => {
-    asks.push(["move", route.request().postDataJSON()]);
-    await route.fulfill({ json: listed });
-  });
-  await page.route("**/api/v2/playlists/playlist-1/remove", async (route) => {
-    asks.push(["remove", route.request().postDataJSON()]);
-    await route.fulfill({ json: listed });
-  });
-  await page.route("**/api/v2/playlists/playlist-1", async (route) => {
-    asks.push([route.request().method(), route.request().postDataJSON()]);
-    await route.fulfill({ json: listed });
-  });
-  await page.goto("/playlists");
-  await expect(page.getByRole("heading", { name: "Evening" })).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Move Hidden Place up" }),
-  ).toBeDisabled();
-  await expect(
-    page.getByRole("button", { name: "Move Aurora down" }),
-  ).toBeDisabled();
-  await page.getByRole("button", { name: "Move Cocoon down" }).click();
-  await expect.poll(() => asks.length).toBe(1);
-  await page
-    .getByRole("button", { name: "Remove Aurora from this playlist" })
-    .click();
-  await expect.poll(() => asks.length).toBe(2);
-  expect(asks).toEqual([
-    ["move", { from: 1, to: 2, track_id: "song-2" }],
-    ["remove", { position: 2, track_id: "song-3" }],
-  ]);
-  await expectNoWcagViolations(page);
-});
-
-/** Another account's public playlist offers none of an owner's controls. */
-test("offers no move or removal on another account's playlist", async ({
-  page,
-}) => {
-  await page.route("**/api/v2/playlists?*", (route) =>
-    route.fulfill({
-      json: [
-        {
-          ...playlists[0],
-          id: "playlist-2",
-          owner_id: "user-2",
-          owner_username: "guest",
-          name: "Guest picks",
-          public: true,
-          songs: [song(1, "Hidden Place", 5, true), song(2, "Cocoon", 0, false)],
-        },
-      ],
-    }),
-  );
-  await page.goto("/playlists");
-  await expect(page.getByRole("heading", { name: "Guest picks" })).toBeVisible();
-  await expect(page.getByRole("button", { name: /^Move / })).toHaveCount(0);
-  await expect(
-    page.getByRole("button", { name: /from this playlist$/ }),
-  ).toHaveCount(0);
-});
-
-/**
- * A share page shows the covers the share hands out, from the addresses it
- * hands out (RFC-020): plain image addresses under the visit's pass, loaded
- * with no session. A track with no cover shows a plain square.
- */
-test("a share page shows the covers its share hands out", async ({ page }) => {
-  const coverAsks: Array<string | null> = [];
-  await page.route("**/share/wfs_covers", async (route) => {
-    if (route.request().resourceType() === "document") {
-      await route.fallback();
-      return;
-    }
-    await route.fulfill({
-      json: {
-        id: "share-2",
-        description: "Covers",
-        expiresAt: null,
-        visitCount: 1,
-        tracks: [
-          {
-            ...song(1, "Hidden Place", 5, true),
-            streamUrl: "/share/wfs_covers/tracks/song-1/stream?visit=pass-1",
-            coverUrl: "/share/wfs_covers/tracks/song-1/cover?visit=pass-1",
-          },
-          {
-            ...song(2, "Cocoon", 0, false),
-            streamUrl: "/share/wfs_covers/tracks/song-2/stream?visit=pass-2",
-          },
-        ],
-      },
-    });
-  });
-  await page.route("**/share/wfs_covers/tracks/*/cover?*", async (route) => {
-    coverAsks.push(await route.request().headerValue("authorization"));
-    await route.fulfill({
-      status: 200,
-      headers: { "content-type": "image/png" },
-      body: Buffer.from(
-        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y9Z4m8AAAAASUVORK5CYII=",
-        "base64",
-      ),
-    });
-  });
-  await page.goto("/share/wfs_covers");
-  await expect(page.getByRole("heading", { name: "Covers" })).toBeVisible();
-  const covers = page.locator("img.share-track-cover");
-  await expect(covers).toHaveCount(1);
-  await expect(covers.first()).toHaveAttribute(
-    "src",
-    "/share/wfs_covers/tracks/song-1/cover?visit=pass-1",
-  );
-  await expect.poll(() => coverAsks).toEqual([null]);
-  const results = await new AxeBuilder({ page }).analyze();
-  expect(results.violations).toEqual([]);
-});
-
-/**
- * A purge can be taken back while the server keeps it (RFC-021, undoing a
- * purge): the purged track leaves the missing files for a list of its own,
- * says until when it can come back, and restoring it puts it back.
- */
-test("takes a purge back while the server still keeps it", async ({ page }) => {
-  missingTracks = [missingTrack(1, "First light"), missingTrack(2, "Second wind")];
-  await page.goto("/missing");
-  await page.getByRole("checkbox", { name: "Select First light" }).check();
-  await page.getByRole("button", { name: "Purge the selected (1)" }).click();
-  await page.getByRole("button", { name: "Confirm: purge 1" }).click();
-  await expect(
-    page.getByText(/1 track purged\. It can be restored until/),
-  ).toBeVisible();
-  const held = page.getByRole("region", {
-    name: "Purged, still restorable (1)",
-  });
-  await expect(held.getByText("Gone/1 First light.flac")).toBeVisible();
-  await expect(held.getByText(/deleted for good after/)).toBeVisible();
-  await expectNoWcagViolations(page);
-
-  await held.getByRole("button", { name: "Restore First light" }).click();
-  await expect(page.getByText("1 track restored.")).toBeVisible();
-  expect(restoreAsks).toEqual([{ track_ids: ["missing-1"] }]);
-  await expect(
-    page.getByRole("region", { name: /Purged, still restorable/ }),
-  ).toHaveCount(0);
-  await expect(page.getByText("Gone/1 First light.flac")).toBeVisible();
-});
-
-/** A library's watch is an administrator's switch beside its links setting. */
-test("switches a library's watch off from its settings", async ({ page }) => {
-  const updates: unknown[] = [];
-  await page.route("**/api/v2/libraries/library-1", async (route) => {
-    if (route.request().method() !== "PATCH") {
-      await route.fallback();
-      return;
-    }
-    updates.push(route.request().postDataJSON());
-    await route.fulfill({ json: { scan_id: null } });
-  });
-  await page.goto("/admin");
-  await page.getByRole("button", { name: "Name, folder and deletion" }).click();
-  const watch = page.getByRole("checkbox", { name: /Watch the folder/ });
-  await expect(watch).toBeChecked();
-  await watch.uncheck();
-  await page.getByRole("button", { name: "Save" }).click();
-  await expect.poll(() => updates).toEqual([{ watch: false }]);
-});
-
-/**
- * "Keep for offline" stores a track in this browser under its id, fetched
- * once through a ticket whose address is not what is kept (RFC-022), and the
- * offline page lists it and plays it from there with no server to ask.
- */
-test("keeps a track for offline, by its id, and plays it from the offline page", async ({
-  page,
-}) => {
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({ json: [correctable.song] }),
-  );
-  await page.route("**/api/v2/tracks/song-9/stream-ticket", (route) =>
-    route.fulfill({
-      json: { url: "/api/v2/stream/ticket-9", expires_at: Date.now() + 60_000 },
-    }),
-  );
-  await page.route("**/api/v2/stream/ticket-9", (route) =>
-    route.fulfill({
-      status: 200,
-      headers: { "content-type": "audio/flac" },
-      body: Buffer.from([0x66, 0x4c, 0x61, 0x43]),
-    }),
-  );
-  await page.goto("/songs");
-  await page
-    .locator(".songs tbody tr")
-    .first()
-    .locator("button.song-title")
-    .focus();
-  await page.keyboard.press("Shift+F10");
-  const menu = page.getByRole("menu", { name: "Actions for Army Of Me" });
-  await menu.getByRole("menuitem", { name: "Keep for offline" }).click();
-  const stored = () =>
-    page.evaluate(async () => {
-      const cache = await caches.open("waveflow-offline-v1:user-1");
-      return (await cache.keys())
-        .map((request) => new URL(request.url).pathname)
-        .sort();
-    });
-  await expect
-    .poll(stored)
-    .toEqual(["/offline/meta/song-9", "/offline/tracks/song-9"]);
-  expect((await stored()).some((path) => path.includes("ticket"))).toBe(false);
-
-  // The offline page asks the server for nothing.
-  const asked: string[] = [];
-  page.on("request", (request) => {
-    const path = new URL(request.url()).pathname;
-    if (path.startsWith("/api/")) asked.push(path);
-  });
-  await page.goto("/offline");
-  await expect(
-    page.getByRole("heading", { name: "Kept for offline" }),
-  ).toBeVisible();
-  await expect(page.getByRole("navigation")).toHaveCount(0);
-  await page.getByRole("button", { name: /^Army Of Me/ }).click();
-  await expect(page.getByLabel("Offline player")).toHaveAttribute(
-    "src",
-    /^(blob:|\/offline\/tracks\/song-9$)/,
-  );
-  expect(asked).toEqual([]);
-  const results = await new AxeBuilder({ page }).analyze();
-  expect(results.violations).toEqual([]);
-
-  await page
-    .getByRole("button", { name: "Remove the offline copy of Army Of Me" })
-    .click();
-  await expect(page.getByText("Nothing is kept yet.", { exact: false })).toBeVisible();
-  await expect.poll(stored).toEqual([]);
-});
-
-/** Keeps the fixture's track for offline through its menu, as a listener does. */
-async function keepFirstSongOffline(page: Page) {
-  await page.route("**/api/v2/songs?*", (route) =>
-    route.fulfill({ json: [correctable.song] }),
-  );
-  await page.route("**/api/v2/tracks/song-9/stream-ticket", (route) =>
-    route.fulfill({
-      json: { url: "/api/v2/stream/ticket-9", expires_at: Date.now() + 60_000 },
-    }),
-  );
-  await page.route("**/api/v2/stream/ticket-9", (route) =>
-    route.fulfill({
-      status: 200,
-      headers: { "content-type": "audio/flac" },
-      body: Buffer.from([0x66, 0x4c, 0x61, 0x43]),
-    }),
-  );
-  await page.goto("/songs");
-  await page
-    .locator(".songs tbody tr")
-    .first()
-    .locator("button.song-title")
-    .focus();
-  await page.keyboard.press("Shift+F10");
-  await page
-    .getByRole("menu", { name: "Actions for Army Of Me" })
-    .getByRole("menuitem", { name: "Keep for offline" })
-    .click();
-  await expect.poll(() => keptPaths(page)).toContain("/offline/tracks/song-9");
-}
-
-/** Every address this browser holds in an offline cache, whoever kept it. */
-function keptPaths(page: Page) {
-  return page.evaluate(async () => {
-    const paths: string[] = [];
-    for (const name of await caches.keys()) {
-      if (!name.startsWith("waveflow-offline-v1:")) continue;
-      const cache = await caches.open(name);
-      for (const request of await cache.keys()) {
-        paths.push(new URL(request.url).pathname);
-      }
-    }
-    return paths.sort();
-  });
-}
-
-/**
- * The kept tracks are one account's (RFC-022): a sign-out deletes them, so
- * the offline page opened afterwards — with no session at all — lists and
- * plays nothing of the account that left.
- */
-test("a sign-out deletes the tracks kept for offline", async ({
-  page,
-}, testInfo) => {
-  test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
-  await keepFirstSongOffline(page);
-  // Dispatched rather than clicked: the sidebar's footer sits under the
-  // fixed player bar at some viewports.
-  await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
-  await expect(page).toHaveURL(/\/login$/);
-  await expect.poll(() => keptPaths(page)).toEqual([]);
-
-  await page.route("**/api/v2/web/auth/refresh", (route) =>
-    route.fulfill({ status: 401, json: { code: "invalid_refresh_token" } }),
-  );
-  await page.goto("/offline");
-  await expect(page.getByText(/Nothing is kept yet/)).toBeVisible();
-  await expect(page.getByRole("button", { name: /^Army Of Me/ })).toHaveCount(0);
-  await expect(page.getByLabel("Offline player")).toHaveCount(0);
-});
-
-/**
- * Another account signing in on the same browser is shown none of the last
- * one's copies, and they are gone before it could ask for them.
- */
-test("another account signing in sees none of the tracks kept offline", async ({
-  page,
-}) => {
-  await keepFirstSongOffline(page);
-  await page.route("**/api/v2/web/auth/refresh", (route) =>
-    route.fulfill({
-      json: {
-        ...session,
-        user: { id: "user-2", username: "guest", role: "user" },
-      },
-    }),
-  );
-  await page.goto("/songs");
-  await expect.poll(() => keptPaths(page)).toEqual([]);
-  await page.goto("/offline");
-  await expect(page.getByText(/Nothing is kept yet/)).toBeVisible();
-  await expect(page.getByRole("button", { name: /^Army Of Me/ })).toHaveCount(0);
-});
-
-/**
- * One entry edit at a time: the controls stay held until the edited list
- * has been read again, so a second click cannot name positions in a list the
- * first edit already changed (review of #335).
- */
-test("holds a playlist's entry controls until the edited list is read again", async ({
-  page,
-}) => {
-  const listed = {
-    ...playlists[0],
-    songs: [
-      song(1, "Hidden Place", 5, true),
-      song(2, "Cocoon", 0, false),
-      song(3, "Aurora", 0, false),
-    ],
-  };
-  await page.route("**/api/v2/playlists?*", (route) =>
-    route.fulfill({ json: [listed] }),
-  );
-  let answer: () => void = () => undefined;
-  const held = new Promise<void>((resolve) => {
-    answer = resolve;
-  });
-  let moves = 0;
-  await page.route("**/api/v2/playlists/playlist-1/move", async (route) => {
-    moves += 1;
-    await held;
-    await route.fulfill({ json: listed });
-  });
-  await page.goto("/playlists");
-  await page.getByRole("button", { name: "Move Cocoon down" }).click();
-  await expect.poll(() => moves).toBe(1);
-  for (const name of [
-    "Move Cocoon up",
-    "Move Hidden Place down",
-    "Remove Aurora from this playlist",
-  ]) {
-    await expect(page.getByRole("button", { name })).toBeDisabled();
-  }
-  answer();
-  await expect(
-    page.getByRole("button", { name: "Move Cocoon up" }),
-  ).toBeEnabled();
-  expect(moves).toBe(1);
-});
-
-/** A queue longer than a share holds is not sent, and the page says why. */
-test("does not send a queue longer than a share holds", async ({ page }) => {
-  const long = Array.from({ length: 401 }, (_, index) =>
-    song(index + 1, `Track ${index + 1}`, 0, false),
-  );
-  await page.route("**/api/v2/queue", (route) =>
-    route.fulfill({
-      json: {
-        current: "song-1",
-        position_ms: 0,
-        changed_by: null,
-        updated_at: 1,
-        songs: long,
-      },
-    }),
-  );
-  const created: string[] = [];
-  await page.route("**/api/v2/shares", async (route) => {
-    if (route.request().method() === "POST") created.push(route.request().url());
-    await route.fulfill({ json: [] });
-  });
-  await page.goto("/shares");
-  await expect(
-    page.getByText(
-      "A share holds up to 400 tracks, and the queue holds 401. Shorten the queue to share it.",
-    ),
-  ).toBeVisible();
-  await expect(
-    page.getByRole("button", { name: "Share current queue" }),
-  ).toBeDisabled();
-  expect(created).toEqual([]);
-});
-
-/** A cover that will not load gives way to the plain square. */
-test("a share page falls back to a plain square when a cover will not load", async ({
-  page,
-}) => {
-  await page.route("**/share/wfs_broken", async (route) => {
-    if (route.request().resourceType() === "document") {
-      await route.fallback();
-      return;
-    }
-    await route.fulfill({
-      json: {
-        id: "share-3",
-        description: "Broken cover",
-        expiresAt: null,
-        visitCount: 1,
-        tracks: [
-          {
-            ...song(1, "Hidden Place", 5, true),
-            streamUrl: "/share/wfs_broken/tracks/song-1/stream?visit=pass-1",
-            coverUrl: "/share/wfs_broken/tracks/song-1/cover?visit=pass-1",
-          },
-        ],
-      },
-    });
-  });
-  await page.route("**/share/wfs_broken/tracks/*/cover?*", (route) =>
-    route.fulfill({ status: 404, body: "" }),
-  );
-  await page.goto("/share/wfs_broken");
-  await expect(page.getByRole("heading", { name: "Broken cover" })).toBeVisible();
-  await expect(page.locator("img.share-track-cover")).toHaveCount(0);
-  await expect(page.locator("span.share-track-cover")).toHaveCount(1);
-});
-
-/**
- * The offline page plays a track by its id: forgetting a track listed above
- * it neither switches what plays nor starts it over (review of #335).
- */
-test("keeps playing the same kept track when another is forgotten", async ({
-  page,
-}) => {
-  await page.goto("/offline");
-  await page.evaluate(async () => {
-    await (await caches.open("waveflow-offline-owner")).put(
-      "/offline/owner",
-      new Response("user-1"),
-    );
-    const cache = await caches.open("waveflow-offline-v1:user-1");
-    for (const [id, title, at] of [
-      ["k1", "First kept", 2],
-      ["k2", "Second kept", 1],
-    ] as const) {
-      await cache.put(
-        `/offline/tracks/${id}`,
-        new Response(new Blob([new Uint8Array([1, 2, 3])]), {
-          headers: { "content-type": "audio/flac" },
-        }),
-      );
-      await cache.put(
-        `/offline/meta/${id}`,
-        new Response(
-          JSON.stringify({
-            id,
-            title,
-            artist: "Ada Reed",
-            album: null,
-            duration_ms: 1_000,
-            suffix: "flac",
-            kept_at: at,
-            bytes: 3,
-          }),
-        ),
-      );
-    }
-  });
-  await page.reload();
-  await page.getByRole("button", { name: /^Second kept/ }).click();
-  const player = page.getByLabel("Offline player");
-  await expect(player).toHaveAttribute("src", /^(blob:|\/offline\/)/);
-  const before = await player.getAttribute("src");
-  await page
-    .getByRole("button", { name: "Remove the offline copy of First kept" })
-    .click();
-  await expect(page.getByRole("button", { name: /^First kept/ })).toHaveCount(0);
-  await expect(
-    page.getByRole("listitem").filter({ hasText: "Second kept" }),
-  ).toHaveAttribute("aria-current", "true");
-  await expect(player).toHaveAttribute("src", before ?? "");
-});
+};
diff --git a/webapp/e2e/fixtures/artist-images.ts b/webapp/e2e/fixtures/artist-images.ts
new file mode 100644
index 00000000..e29a7650
--- /dev/null
+++ b/webapp/e2e/fixtures/artist-images.ts
@@ -0,0 +1,78 @@
+// An artist's banner and portrait, served and changed, and their menu.
+
+import { expect, type Page } from "@playwright/test";
+
+import { artistDetail } from "./catalogue";
+
+/**
+ * Opens the artist header's image menu, where the portrait and banner actions
+ * live behind one button, and returns the menu.
+ */
+export async function openImageMenu(page: Page) {
+  await page
+    .locator(".artist-hero")
+    .getByRole("button", { name: "Edit images", exact: true })
+    .click();
+  const menu = page.getByRole("menu", { name: "Images of Björk" });
+  await expect(menu).toBeVisible();
+  return menu;
+}
+
+/**
+ * A stand-in for the artist routes of RFC-013 with state: the page re-reads
+ * after every write, and what it shows must be what the write did.
+ */
+export async function serveArtistImages(page: Page) {
+  const state = {
+    portrait: null as string | null,
+    banner: null as string | null,
+    writes: [] as Array<{ method: string; kind: string; bytes: number }>,
+    refuseNext: false,
+  };
+  const detail = () => ({
+    ...artistDetail,
+    library_id: "library-1",
+    artwork_hash: state.portrait ?? "f".repeat(64),
+    ...(state.banner ? { banner_hash: state.banner } : {}),
+    ...(state.portrait || state.banner
+      ? {
+          image_choice: {
+            ...(state.portrait ? { portrait: { source: "upload", set_at: 1 } } : {}),
+            ...(state.banner ? { banner: { source: "upload", set_at: 1 } } : {}),
+          },
+        }
+      : {}),
+  });
+  await page.route("**/api/v2/artists/artist-1", (route) =>
+    route.fulfill({ json: detail() }),
+  );
+  await page.route("**/api/v2/artists/artist-1/image/*", async (route) => {
+    const request = route.request();
+    const kind = new URL(request.url()).pathname.split("/").at(-1) ?? "";
+    const bytes = request.postDataBuffer()?.length ?? 0;
+    state.writes.push({ method: request.method(), kind, bytes });
+    if (request.method() === "DELETE") {
+      if (kind === "portrait") state.portrait = null;
+      else state.banner = null;
+      await route.fulfill({ status: 204, body: "" });
+      return;
+    }
+    if (state.refuseNext) {
+      state.refuseNext = false;
+      await route.fulfill({ status: 422, json: { error: "validation" } });
+      return;
+    }
+    const hash = (kind === "portrait" ? "b" : "c").repeat(64);
+    if (kind === "portrait") state.portrait = hash;
+    else state.banner = hash;
+    await route.fulfill({ json: detail() });
+  });
+  const png = Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+    "base64",
+  );
+  await page.route("**/api/v2/artwork/*", (route) =>
+    route.fulfill({ contentType: "image/png", body: png }),
+  );
+  return { state, png };
+}
diff --git a/webapp/e2e/fixtures/attention.ts b/webapp/e2e/fixtures/attention.ts
new file mode 100644
index 00000000..af666c8e
--- /dev/null
+++ b/webapp/e2e/fixtures/attention.ts
@@ -0,0 +1,121 @@
+// The credits waiting for a decision, as Needs attention is served them.
+
+import type { Page } from "@playwright/test";
+
+import { song } from "./catalogue";
+
+/**
+ * "Needs attention" (RFC-015), as the server answers it: the lists and their
+ * counts, the joined credits with the fragments the library already knows,
+ * and the decisions. Held here so a test can watch what the page writes.
+ */
+export async function serveAttention(page: Page) {
+  const state = {
+    candidates: [
+      {
+        artist_id: "artist-joined",
+        name: "Ashreveal, Ashish Swargiary",
+        track_count: 1,
+        fragments: [
+          { name: "Ashreveal", artist_id: "artist-known", album_count: 2 },
+          { name: "Ashish Swargiary", artist_id: null, album_count: 0 },
+        ],
+      },
+    ],
+    decisions: [] as Array<Record<string, unknown>>,
+    writes: [] as Array<{ method: string; path: string; body: unknown }>,
+    asks: 0,
+    /** Answer the next decision with this status, as if another owner had
+     * decided first: the credit leaves the list on the server. */
+    refuseWith: null as number | null,
+  };
+  const base = "**/api/v2/libraries/library-1";
+  await page.route(`${base}/attention`, (route) => {
+    state.asks += 1;
+    return route.fulfill({
+      json: [
+        { category: "split_credits", count: state.candidates.length },
+        { category: "missing_artist", count: 0 },
+        { category: "missing_album", count: 0 },
+        { category: "missing_year", count: 1 },
+        { category: "missing_track_number", count: 0 },
+        { category: "missing_cover", count: 0 },
+        { category: "album_year_conflict", count: 0 },
+        { category: "compilation_no_album_artist", count: 0 },
+        { category: "duplicate_track_number", count: 0 },
+        { category: "track_number_gap", count: 0 },
+        { category: "probable_duplicate", count: 0 },
+      ],
+    });
+  });
+  await page.route(`${base}/attention/credits`, (route) =>
+    route.fulfill({ json: state.candidates }),
+  );
+  await page.route(`${base}/attention/tracks?*`, (route) => {
+    const category = new URL(route.request().url()).searchParams.get(
+      "category",
+    );
+    const twice = (index: number, title: string, group: number) => ({
+      ...song(index, title, 0, false),
+      duplicate_group: group,
+    });
+    return route.fulfill({
+      json:
+        category === "missing_year"
+          ? [song(4, "Yearless", 0, false)]
+          : category === "probable_duplicate"
+            ? [
+                twice(5, "Echo", 1),
+                twice(6, "Echo (copy)", 1),
+                twice(7, "Other", 2),
+                twice(8, "Other (copy)", 2),
+              ]
+            : [],
+    });
+  });
+  await page.route(`${base}/credit-decisions`, async (route) => {
+    const request = route.request();
+    if (request.method() === "GET") {
+      await route.fulfill({ json: state.decisions });
+      return;
+    }
+    const body = request.postDataJSON();
+    state.writes.push({ method: "POST", path: "credit-decisions", body });
+    if (state.refuseWith !== null) {
+      const status = state.refuseWith;
+      state.refuseWith = null;
+      state.candidates = [];
+      await route.fulfill({ status, json: { error: "conflict" } });
+      return;
+    }
+    const candidate = state.candidates.find(
+      (entry) => entry.artist_id === body.artist_id,
+    );
+    state.candidates = state.candidates.filter(
+      (entry) => entry.artist_id !== body.artist_id,
+    );
+    const decision = {
+      id: "decision-1",
+      credit: candidate?.name ?? "?",
+      decision: body.decision,
+      ...(body.decision === "split"
+        ? { parts: candidate?.fragments.map((fragment) => fragment.name) }
+        : {}),
+      decided_by: "listener",
+      decided_at: 1_700_000_000_000,
+    };
+    state.decisions = [decision];
+    await route.fulfill({ status: 201, json: decision });
+  });
+  await page.route(`${base}/credit-decisions/*`, async (route) => {
+    const request = route.request();
+    state.writes.push({
+      method: request.method(),
+      path: new URL(request.url()).pathname.split("/").at(-1) ?? "",
+      body: null,
+    });
+    state.decisions = [];
+    await route.fulfill({ status: 204, body: "" });
+  });
+  return state;
+}
diff --git a/webapp/e2e/fixtures/catalogue.ts b/webapp/e2e/fixtures/catalogue.ts
new file mode 100644
index 00000000..d9bac2ac
--- /dev/null
+++ b/webapp/e2e/fixtures/catalogue.ts
@@ -0,0 +1,468 @@
+// The fixed catalogue the mock answers from, and its answer factories.
+
+
+
+export const session = {
+  access_token: "e2e-access-token",
+  user: { id: "user-1", username: "listener", role: "admin" },
+  device_id: "device-1",
+};
+
+export const albums = [
+  {
+    id: "album-1",
+    library_id: "library-1",
+    title: "Post",
+    artist: "Björk",
+    artist_id: "artist-1",
+    artwork_hash: null,
+    year: 1995,
+    starred_at: null,
+    user_rating: null,
+  },
+  {
+    id: "album-2",
+    library_id: "library-1",
+    title: "Vespertine",
+    artist: "Björk",
+    artist_id: "artist-1",
+    artwork_hash: null,
+    year: 2001,
+    starred_at: null,
+    user_rating: null,
+  },
+];
+
+export const track = {
+  id: "song-1",
+  library_id: "library-1",
+  album_id: "album-1",
+  title: "Army of Me",
+  album: "Post",
+  artist: "Björk",
+  artist_id: "artist-1",
+  artwork_hash: null,
+  duration_ms: 234_000,
+  track: 1,
+  disc: 1,
+  starred_at: null,
+  user_rating: null,
+};
+
+/**
+ * 120 distinct plays, newest first. More than the screen resolves, which is the
+ * point: each distinct track costs its own request.
+ */
+export const history = Array.from({ length: 120 }, (_, index) => ({
+  track_id: `t${index}`,
+  submission: true,
+  played_at: 1_000_000 - index,
+}));
+
+/**
+ * The whole `Library` shape, not just what the picker reads. A fixture that
+ * only carries the fields one screen happens to use is how the admin page went
+ * down on an absent `folder_ids`: the next screen to touch it reads a field
+ * nobody remembered to mock.
+ */
+export const library = (id: string, name: string) => ({
+  id,
+  name,
+  visibility: "private" as const,
+  role: "owner" as "owner" | "manager" | "listener",
+  last_scan_started_at: null,
+  last_scan_completed_at: null,
+  accepts_uploads: false as boolean,
+  accepts_canvas: false as boolean,
+  follow_links: false as boolean,
+});
+
+/**
+ * The tracks the scans can no longer find (RFC-021), as
+ * `GET /libraries/{id}/unavailable-tracks` answers them. Mutable, because the
+ * purge test removes them and the point is that the list follows.
+ */
+export const missingTrack = (index: number, title: string) => ({
+  id: `missing-${index}`,
+  relative_path: `Gone/${index} ${title}.flac`,
+  title,
+  artist: "Ada Reed",
+  album: "Gone",
+  duration_ms: 200_000,
+  unavailable_since: 1_700_000_000_000 + index,
+  playlist_entries: index,
+  favorites: 1,
+  plays: 3 * index,
+  purged_at: null as number | null,
+  deleted_after: null as number | null,
+});
+
+/** The grace window the mock server keeps a purge restorable for: a week. */
+export const PURGE_GRACE_MS = 7 * 24 * 60 * 60 * 1000;
+
+/**
+ * The clients this account has registered, as the self-scoped route answers
+ * them. Mutable, because the test registers one and revokes one and the point
+ * is that the list follows.
+ */
+export type Client = {
+  id: string;
+  name: string;
+  scopes: string[];
+  expires_at: number | null;
+  created_at: number;
+  last_used_at: number | null;
+  revoked_at: number | null;
+};
+
+export function freshClients(): Client[] {
+  return [
+    {
+      id: "client-1",
+      name: "the kitchen speaker",
+      scopes: [],
+      expires_at: 1_800_000_000_000,
+      created_at: 1_700_000_000_000,
+      last_used_at: 1_700_600_000_000,
+      revoked_at: null,
+    },
+    {
+      // Already revoked, so the page has something it must leave out: this
+      // list answers who can read the library, and a credential that cannot
+      // is not an answer to it.
+      id: "client-2",
+      name: "a laptop that is gone",
+      scopes: [],
+      expires_at: null,
+      created_at: 1_690_000_000_000,
+      last_used_at: null,
+      revoked_at: 1_695_000_000_000,
+    },
+    {
+      // Not revoked, and past its expiry, which the server refuses. It became
+      // a reachable shape when a self-minted credential started carrying an
+      // expiry, and it has to be left out for the reason the revoked one is.
+      id: "client-3",
+      name: "a tablet whose year ran out",
+      scopes: [],
+      expires_at: 1_600_000_000_000,
+      created_at: 1_560_000_000_000,
+      last_used_at: 1_590_000_000_000,
+      revoked_at: null,
+    },
+  ];
+}
+
+export const song = (
+  index: number,
+  title: string,
+  rating: number,
+  starred: boolean,
+) => ({
+  id: `song-${index}`,
+  library_id: "library-1",
+  album_id: "album-2",
+  title,
+  album: "Vespertine",
+  artist: "Björk",
+  artist_id: "artist-1",
+  artwork_hash: null,
+  duration_ms: 300_000,
+  track: index,
+  disc: 1,
+  starred_at: starred ? 1 : null,
+  user_rating: rating,
+  // What the file is, as `SongItem` has always sent it. Present here because
+  // the screen now draws it — and worth nothing as evidence of the wire,
+  // which is asserted server-side against a real file by
+  // `the_technical_fields_reach_the_wire_and_match_the_file`.
+  codec: "FLAC",
+  suffix: "flac",
+  size: 27_983_872,
+  bitrate: 957,
+  sample_rate: 44_100,
+  channels: 2,
+  bit_depth: 16,
+  // ReplayGain as tagged, different per track so a test can tell which one
+  // the player levelled. The album's pair is shared, as on a real record.
+  replay_gain_track_gain: -6 - index,
+  replay_gain_track_peak: 0.9,
+  replay_gain_album_gain: -8,
+  replay_gain_album_peak: 0.95,
+});
+
+export const albumDetail = {
+  ...albums[1],
+  songs: [
+    song(1, "Hidden Place", 5, true),
+    song(2, "Cocoon", 0, false),
+    song(3, "Undo", 2, false),
+  ],
+};
+
+/**
+ * The artist page's own answer: a name and its albums. The most played list is
+ * deliberately not in it — the page asks for that separately, because it
+ * changes every time something is played while the discography does not.
+ */
+export const artistDetail = {
+  id: "artist-1",
+  name: "Björk",
+  album_count: 2,
+  artwork_hash: null,
+  albums,
+};
+
+/**
+ * A dry run's answer: three of five entries placed, two it could not.
+ *
+ * Two entries short on purpose — the panel's whole reason to exist is showing
+ * what an import would lose before it happens, so the report has to carry
+ * losses for the test to mean anything.
+ */
+export const importReport = {
+  playlist: null,
+  name: "From another player",
+  encoding: "windows-1252",
+  entries: 5,
+  resolved: 3,
+  unresolved: [
+    {
+      line: 7,
+      entry: "common.flac",
+      title: null,
+      reason: "ambiguous",
+    },
+    {
+      line: 9,
+      entry: "http://radio.example/stream",
+      title: "A stream",
+      reason: "not-a-path",
+    },
+  ],
+};
+
+/**
+ * The hash the server would store a station's image under, made up from its
+ * address: what the mock answers instead of fetching anything.
+ */
+export const imageHash = (address: string) =>
+  `station-art-${address.replace(/[^a-z0-9]/gi, "")}`;
+
+export const playlists = [
+  {
+    id: "playlist-1",
+    owner_id: "user-1",
+    owner_username: "listener",
+    name: "Evening",
+    comment: null,
+    public: false,
+    created_at: 1_700_000_000_000,
+    updated_at: 1_700_000_000_000,
+    songs: [song(1, "Hidden Place", 5, true)],
+  },
+];
+
+export const genres = [
+  { name: "Art Pop", song_count: 412, album_count: 31 },
+  { name: "Shoegaze", song_count: 233, album_count: 18 },
+];
+
+export const genreSongs = [
+  song(1, "Hidden Place", 5, true),
+  song(2, "Cocoon", 0, false),
+];
+
+/**
+ * A track another client has already corrected: a comment over two lines, and
+ * an artist fixed. A save that does not touch the comment must leave it out of
+ * the body — the server keeps whatever a patch does not mention, but only if
+ * the client does not send it back.
+ *
+ * Built afresh for each test, because the PATCH mock applies what it receives.
+ * The editor reads the corrections back after a save, and a mock that ignored
+ * the write would let a form that never reloaded pass for one that did.
+ */
+export function correctableTrack() {
+  const overrides: Record<string, unknown> = {
+    title: null,
+    sort_title: null,
+    year: null,
+    track_number: null,
+    disc_number: null,
+    musicbrainz_recording_id: null,
+    comment: "Remastered\nBonus edition",
+    artists: ["Skunk Anansie"],
+    genres: null,
+  };
+  return {
+    song: {
+      ...song(9, "Army Of Me", 0, false),
+      year: 1995,
+      artists: [{ id: "artist-2", name: "Skunk Anansie" }],
+      genres: ["Trip Hop"],
+    },
+    tracked: {
+      source: {
+        title: "Army Of Me",
+        sort_title: null,
+        year: 1995,
+        track_number: 9,
+        disc_number: 1,
+        musicbrainz_recording_id: null,
+        comment: null,
+      },
+      overrides,
+    },
+  };
+}
+
+/** What the file credits: where a removed artists correction goes back to. */
+export const fileArtists = [{ id: "artist-1", name: "Björk" }];
+
+export type Offer = { full_hash: string; size_bytes: number; extension: string };
+
+export const freshUploadSession = () => ({
+  session_id: "upload-1",
+  next_chunk: 0,
+  received_bytes: 0,
+  chunk_bytes: 8,
+  expires_at: 0,
+});
+
+/**
+ * External scrobbling — RFC-010.
+ *
+ * Two instances of one recipient, because that is the case the whole named
+ * instances slice exists for and the one a screen keyed on the recipient alone
+ * would collapse. Last.fm is declared and unavailable, which is its real shape
+ * on a server whose operator registered no application.
+ */
+export type Recipient = "listenbrainz" | "maloja" | "lastfm";
+
+/**
+ * What `lastfm_unavailability` answers — a case, not a sentence.
+ *
+ * It used to be the server's own English prose, copied here and asserted
+ * verbatim below, so the test agreed with the server about a string neither of
+ * them should have been sending to a client that ships in two languages.
+ */
+const NO_PUBLIC_URL = "browser_journey_needs_https";
+
+export const freshDestinations = () => [
+  { provider: "listenbrainz" as const, destination: "default", available: true },
+  { provider: "maloja" as const, destination: "alice", available: true },
+  { provider: "maloja" as const, destination: "bob", available: true },
+  {
+    provider: "lastfm" as const,
+    destination: "default",
+    available: false,
+    unavailable: NO_PUBLIC_URL,
+  },
+];
+
+/**
+ * A link is named by the **pair**, here as on the server.
+ *
+ * The recipient was fixed at `maloja` and the mock matched on the destination
+ * alone, which works only while no two recipients share an instance name —
+ * and `default` is the name they all use. Unlinking `maloja/default` would
+ * have withdrawn `listenbrainz/default` beside it: the precise fault named in
+ * the migration that rebuilt `scrobble_link_live_idx`, reproduced in the mock
+ * that exists to catch it.
+ */
+export const linkState = (provider: Recipient, destination: string) => ({
+  provider,
+  destination,
+  health: "degraded" as const,
+  pending: 12,
+  retrying: 3,
+  uncertain: 1,
+  oldest_pending_at: 1_700_000_000_000,
+  last_success_at: 1_700_000_000_000,
+  last_failure: "rate_limited",
+});
+
+/** The one ambiguous listen, played when `t5` was, so history can name it. */
+export const freshUncertain = () => [
+  {
+    id: "entry-1",
+    provider: "maloja" as const,
+    destination: "alice",
+    played_at: 1_000_000 - 5,
+    attempts: 1,
+    last_failure: "ambiguous",
+    updated_at: 1_700_000_000_000,
+  },
+];
+
+/**
+ * `GET /api/v2/stats` for one period, shaped as the server shapes it: a day
+ * per bucket for the two short periods, a month for the others, and the
+ * busiest bucket last so the bars have something to measure against.
+ */
+export function statsFor(period: string) {
+  const buckets = period === "7d" ? 7 : period === "30d" ? 30 : 12;
+  const daily = period === "7d" || period === "30d";
+  const timeline = Array.from({ length: buckets }, (_, index) => ({
+    label: daily
+      ? `2026-10-${String(index + 1).padStart(2, "0")}`
+      : `2026-${String(index + 1).padStart(2, "0")}`,
+    plays: index === buckets - 1 ? 4 : index % 3 === 0 ? 1 : 0,
+    listening_ms: 0,
+  }));
+  const plays = timeline.reduce((sum, bucket) => sum + bucket.plays, 0);
+  return {
+    period,
+    from: period === "all" ? null : 1_790_000_000_000,
+    bucket: daily ? "day" : "month",
+    totals: {
+      plays,
+      listening_ms: plays * 234_000,
+      tracks: 2,
+      albums: 1,
+      artists: 1,
+    },
+    top_tracks: [
+      { song: song(1, "Hidden Place", 0, false), plays: 3 },
+      { song: song(2, "Cocoon", 0, false), plays: 1 },
+    ],
+    top_albums: [{ album: albums[1], plays: 4 }],
+    top_artists: [
+      { artist: { id: "artist-1", name: "Björk" }, artwork_hash: null, plays: 4 },
+    ],
+    top_genres: [{ name: "Art Pop", plays: 4 }],
+    timeline,
+    first_play: { song: song(2, "Cocoon", 0, false), played_at: 1_790_000_000_000 },
+    last_play: { song: song(1, "Hidden Place", 0, false), played_at: 1_790_100_000_000 },
+  };
+}
+
+// ── RFC-024: mixes, statistics and lyrics from LRCLIB ──
+
+export const dailyMixes = () => [
+  {
+    id: "most-played",
+    kind: "most_played",
+    genre: null,
+    decade: null,
+    track_count: 2,
+    artwork_hashes: [],
+  },
+  {
+    id: "genre:art pop",
+    kind: "genre",
+    genre: "Art Pop",
+    decade: null,
+    track_count: 2,
+    artwork_hashes: [],
+  },
+  {
+    id: "decade:1990",
+    kind: "decade",
+    genre: null,
+    decade: 1990,
+    track_count: 2,
+    artwork_hashes: [],
+  },
+];
diff --git a/webapp/e2e/fixtures/folders.ts b/webapp/e2e/fixtures/folders.ts
new file mode 100644
index 00000000..e6883783
--- /dev/null
+++ b/webapp/e2e/fixtures/folders.ts
@@ -0,0 +1,107 @@
+// The filed folder tree a library's tracks are served under.
+
+import type { Page } from "@playwright/test";
+
+import { song } from "./catalogue";
+
+/**
+ * A stand-in for the filed-folder routes (RFC-012 decision 2), with state: the
+ * screen re-reads after every write, and the point is that it shows what the
+ * write did. Names collide case-insensitively, as on the server.
+ */
+export async function serveFiledFolders(page: Page, songs: ReturnType<typeof song>[]) {
+  const state = {
+    folders: [] as Array<{ id: string; parent_id: string | null; name: string }>,
+    placed: new Map<string, string>(),
+    writes: [] as Array<{ method: string; path: string; body: unknown }>,
+  };
+  const tree = () => ({
+    folders: state.folders.map((folder) => ({
+      ...folder,
+      track_count: [...state.placed.values()].filter((id) => id === folder.id)
+        .length,
+    })),
+    unfiled_track_count: songs.filter((entry) => !state.placed.has(entry.id))
+      .length,
+  });
+  await page.route("**/api/v2/libraries/library-1/folders", async (route) => {
+    const request = route.request();
+    if (request.method() === "POST") {
+      const body = request.postDataJSON() as { name: string; parent_id: string | null };
+      state.writes.push({ method: "POST", path: "folders", body });
+      const name = body.name.trim();
+      if (
+        state.folders.some(
+          (folder) =>
+            folder.parent_id === body.parent_id &&
+            folder.name.toLowerCase() === name.toLowerCase(),
+        )
+      ) {
+        await route.fulfill({ status: 409, json: { error: "conflict" } });
+        return;
+      }
+      const folder = { id: `folder-${state.folders.length + 1}`, parent_id: body.parent_id, name };
+      state.folders.push(folder);
+      await route.fulfill({ status: 201, json: { ...folder, track_count: 0 } });
+      return;
+    }
+    await route.fulfill({ json: tree() });
+  });
+  await page.route("**/api/v2/libraries/library-1/folders/*/tracks?*", (route) => {
+    const folder = new URL(route.request().url()).pathname.split("/").at(-2);
+    return route.fulfill({
+      json: songs.filter((entry) =>
+        folder === "unfiled"
+          ? !state.placed.has(entry.id)
+          : state.placed.get(entry.id) === folder,
+      ),
+    });
+  });
+  await page.route("**/api/v2/libraries/library-1/placements", async (route) => {
+    const body = route.request().postDataJSON() as {
+      track_ids: string[];
+      folder_id: string | null;
+    };
+    state.writes.push({ method: "PUT", path: "placements", body });
+    for (const id of body.track_ids) {
+      if (body.folder_id) state.placed.set(id, body.folder_id);
+      else state.placed.delete(id);
+    }
+    await route.fulfill({ json: { placed: body.track_ids.length } });
+  });
+  await page.route("**/api/v2/folders/*", async (route) => {
+    const request = route.request();
+    const id = new URL(request.url()).pathname.split("/").at(-1) ?? "";
+    if (request.method() === "DELETE") {
+      state.writes.push({ method: "DELETE", path: id, body: null });
+      const gone = new Set([id]);
+      for (const folder of state.folders) {
+        if (folder.parent_id && gone.has(folder.parent_id)) gone.add(folder.id);
+      }
+      let unfiled = 0;
+      for (const [track, folder] of [...state.placed]) {
+        if (gone.has(folder)) {
+          state.placed.delete(track);
+          unfiled += 1;
+        }
+      }
+      state.folders = state.folders.filter((folder) => !gone.has(folder.id));
+      await route.fulfill({ json: { unfiled } });
+      return;
+    }
+    const patch = request.postDataJSON() as { name?: string; parent_id?: string | null };
+    state.writes.push({ method: "PATCH", path: id, body: patch });
+    state.folders = state.folders.map((folder) =>
+      folder.id === id
+        ? {
+            ...folder,
+            name: patch.name ?? folder.name,
+            parent_id: patch.parent_id === undefined ? folder.parent_id : patch.parent_id,
+          }
+        : folder,
+    );
+    const folder = state.folders.find((entry) => entry.id === id);
+    await route.fulfill({ json: { ...folder, track_count: 0 } });
+  });
+  return state;
+}
diff --git a/webapp/e2e/fixtures/media.ts b/webapp/e2e/fixtures/media.ts
new file mode 100644
index 00000000..49885f3d
--- /dev/null
+++ b/webapp/e2e/fixtures/media.ts
@@ -0,0 +1,39 @@
+// The bytes the mocks serve: a silent WAV and a one-pixel image.
+
+
+
+/**
+ * Taking a station out of the bar leaves the queue's track there, paused
+ * where it was, and the light theme keeps the live badge readable.
+ */
+/** A one-pixel PNG, for every cover the artwork route is asked for. */
+export const PIXEL = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+  "base64",
+);
+
+/**
+ * Seconds of 8 kHz, 8-bit mono silence as a WAV file: something the browser
+ * decodes and plays for real, so `paused` and `currentTime` mean what they
+ * say, at a size a route can answer in one piece.
+ */
+export function silentWav(seconds: number): Buffer {
+  const rate = 8_000;
+  const samples = rate * seconds;
+  const header = Buffer.alloc(44);
+  header.write("RIFF", 0);
+  header.writeUInt32LE(36 + samples, 4);
+  header.write("WAVE", 8);
+  header.write("fmt ", 12);
+  header.writeUInt32LE(16, 16);
+  header.writeUInt16LE(1, 20);
+  header.writeUInt16LE(1, 22);
+  header.writeUInt32LE(rate, 24);
+  header.writeUInt32LE(rate, 28);
+  header.writeUInt16LE(1, 32);
+  header.writeUInt16LE(8, 34);
+  header.write("data", 36);
+  header.writeUInt32LE(samples, 40);
+  // Unsigned 8-bit samples sit at 128 when silent.
+  return Buffer.concat([header, Buffer.alloc(samples, 128)]);
+}
diff --git a/webapp/e2e/fixtures/offline.ts b/webapp/e2e/fixtures/offline.ts
new file mode 100644
index 00000000..e92621d8
--- /dev/null
+++ b/webapp/e2e/fixtures/offline.ts
@@ -0,0 +1,51 @@
+// Keeping a track for offline, and reading back what the browser kept.
+
+import { expect, type Page } from "@playwright/test";
+
+import { mock } from "./state";
+
+/** Keeps the fixture's track for offline through its menu, as a listener does. */
+export async function keepFirstSongOffline(page: Page) {
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({ json: [mock.correctable.song] }),
+  );
+  await page.route("**/api/v2/tracks/song-9/stream-ticket", (route) =>
+    route.fulfill({
+      json: { url: "/api/v2/stream/ticket-9", expires_at: Date.now() + 60_000 },
+    }),
+  );
+  await page.route("**/api/v2/stream/ticket-9", (route) =>
+    route.fulfill({
+      status: 200,
+      headers: { "content-type": "audio/flac" },
+      body: Buffer.from([0x66, 0x4c, 0x61, 0x43]),
+    }),
+  );
+  await page.goto("/songs");
+  await page
+    .locator(".songs tbody tr")
+    .first()
+    .locator("button.song-title")
+    .focus();
+  await page.keyboard.press("Shift+F10");
+  await page
+    .getByRole("menu", { name: "Actions for Army Of Me" })
+    .getByRole("menuitem", { name: "Keep for offline" })
+    .click();
+  await expect.poll(() => keptPaths(page)).toContain("/offline/tracks/song-9");
+}
+
+/** Every address this browser holds in an offline cache, whoever kept it. */
+export function keptPaths(page: Page) {
+  return page.evaluate(async () => {
+    const paths: string[] = [];
+    for (const name of await caches.keys()) {
+      if (!name.startsWith("waveflow-offline-v1:")) continue;
+      const cache = await caches.open(name);
+      for (const request of await cache.keys()) {
+        paths.push(new URL(request.url).pathname);
+      }
+    }
+    return paths.sort();
+  });
+}
diff --git a/webapp/e2e/fixtures/quality.ts b/webapp/e2e/fixtures/quality.ts
new file mode 100644
index 00000000..17afe59c
--- /dev/null
+++ b/webapp/e2e/fixtures/quality.ts
@@ -0,0 +1,153 @@
+// A library's measured quality and its analysis, as the page is served.
+
+import type { Page } from "@playwright/test";
+
+import { song } from "./catalogue";
+
+/**
+ * The quality page (RFC-016), as the server answers it: the counts per
+ * verdict, the files worst first, one file's measurement with its averaged
+ * spectrum, and a spectrogram drawn when asked. Held here so a test can watch
+ * what the page asks for and writes.
+ */
+export async function serveQuality(page: Page) {
+  const fake = {
+    ...song(31, "Made From An MP3", 0, false),
+    bit_depth: 24,
+    bitrate: 812,
+    quality: {
+      verdict: "lossy_source",
+      cutoff_hz: 16_390,
+      wall_db: 41.2,
+      nyquist_hz: 22_050,
+      effective_bits: 24,
+      analyzed_at: 1_700_000_000_000,
+    },
+  };
+  const genuine = {
+    ...song(32, "Straight From The Desk", 0, false),
+    quality: {
+      verdict: "consistent",
+      cutoff_hz: null,
+      wall_db: 4.1,
+      nyquist_hz: 22_050,
+      effective_bits: 16,
+      analyzed_at: 1_700_000_000_000,
+    },
+  };
+  const state = {
+    asked: [] as string[],
+    writes: [] as string[],
+    spectrograms: 0,
+    summaries: 0,
+    /** What the summary says, one entry per ask; the last one repeats. */
+    analyses: [
+      {
+        measured: 2,
+        analysis: {
+          state: "idle",
+          in_flight: 0,
+          pass_started_at: null,
+          last_measured_at: 1_700_000_000_000,
+        },
+      },
+    ] as Array<{ measured: number; analysis: Record<string, unknown> }>,
+  };
+  const base = "**/api/v2/libraries/library-1";
+  await page.route(`${base}/quality`, (route) => {
+    const now =
+      state.analyses[Math.min(state.summaries, state.analyses.length - 1)];
+    state.summaries += 1;
+    return route.fulfill({
+      json: {
+        enabled: true,
+        lossless: 3,
+        measured: now?.measured ?? 2,
+        analysis: now?.analysis,
+        verdicts: [
+          { verdict: "lossy_source", count: 1 },
+          { verdict: "upsampled", count: 0 },
+          { verdict: "padded", count: 0 },
+          { verdict: "unreadable", count: 0 },
+          { verdict: "silent", count: 0 },
+          { verdict: "pending", count: 1 },
+          { verdict: "consistent", count: 1 },
+          { verdict: "lossy", count: 4 },
+          { verdict: "not_measured", count: 0 },
+        ],
+      },
+    });
+  });
+  await page.route(`${base}/quality/tracks?*`, (route) => {
+    const url = new URL(route.request().url());
+    state.asked.push(url.search);
+    const verdict = url.searchParams.get("verdict");
+    const all = [fake, genuine];
+    return route.fulfill({
+      json: verdict
+        ? all.filter((item) => item.quality.verdict === verdict)
+        : all,
+    });
+  });
+  await page.route(`${base}/quality/analysis`, async (route) => {
+    state.writes.push(route.request().method());
+    await route.fulfill({ status: 202, body: "" });
+  });
+  await page.route("**/api/v2/tracks/song-31/quality", (route) =>
+    route.fulfill({
+      json: {
+        ...fake.quality,
+        // Level to 16 kHz, then a wall: what LAME leaves at 128 kbps.
+        spectrum: Array.from({ length: 256 }, (_, band) =>
+          band < 190 ? -20 - band / 20 : -95,
+        ),
+      },
+    }),
+  );
+  await page.route("**/api/v2/tracks/song-31", (route) =>
+    route.fulfill({
+      json: {
+        ...fake,
+        relative_path: "Fakes/Made From An MP3.flac",
+        full_hash: "b".repeat(64),
+        created_at: 1_700_000_000_000,
+      },
+    }),
+  );
+  // No correction: the catch-all would answer with a track, which the panel
+  // would read as one.
+  await page.route("**/api/v2/tracks/song-31/overrides", (route) =>
+    route.fulfill({ status: 404, json: { error: "not found" } }),
+  );
+  await page.route("**/api/v2/tracks/song-31/spectrogram", async (route) => {
+    state.spectrograms += 1;
+    await route.fulfill({
+      status: 200,
+      headers: {
+        "content-type": "image/png",
+        "cache-control": "private, no-cache",
+      },
+      body: Buffer.from(
+        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y9Z4m8AAAAASUVORK5CYII=",
+        "base64",
+      ),
+    });
+  });
+  return state;
+}
+
+/** What the summary says of the analysis, at rest or at work. */
+export function analysisAt(
+  measured: number,
+  state: "idle" | "running",
+): { measured: number; analysis: Record<string, unknown> } {
+  return {
+    measured,
+    analysis: {
+      state,
+      in_flight: state === "running" ? 1 : 0,
+      pass_started_at: state === "running" ? 1_700_000_000_000 : null,
+      last_measured_at: 1_700_000_000_000,
+    },
+  };
+}
diff --git a/webapp/e2e/fixtures/radio.ts b/webapp/e2e/fixtures/radio.ts
new file mode 100644
index 00000000..07d53366
--- /dev/null
+++ b/webapp/e2e/fixtures/radio.ts
@@ -0,0 +1,127 @@
+// A station and a queue served together, and a live station's elements.
+
+import type { Page } from "@playwright/test";
+
+import { silentWav } from "./media";
+import { mock } from "./state";
+
+/**
+ * Moves within the client, as a click on its navigation does — never by
+ * loading a page, which would start the player over and prove nothing about
+ * what survives a navigation.
+ */
+export async function navigateWithin(page: Page, name: string) {
+  const sidebar = page.locator(".sidebar");
+  if (await sidebar.isVisible()) {
+    await sidebar.getByRole("link", { name, exact: true }).click();
+    return;
+  }
+  const bar = page.locator(".mobile-navigation");
+  const direct = bar.getByRole("link", { name, exact: true });
+  if (await direct.count()) {
+    await direct.click();
+    return;
+  }
+  await bar.getByRole("button", { name: "More" }).click();
+  await page.getByRole("dialog").getByRole("link", { name, exact: true }).click();
+}
+
+export const NOVA = "https://nova.example.org/live";
+
+/**
+ * A station on another origin that plays, a queue whose tracks play, and a
+ * record of every element asked to play and every element the ReplayGain
+ * graph claimed — none of them is in the document, so this is the only way
+ * to reach them. ReplayGain is on, so the graph exists to claim something.
+ */
+export async function serveStationAndQueue(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "waveflow.replayGain",
+      JSON.stringify({ mode: "album", preampDb: 0 }),
+    );
+    const record = window as unknown as {
+      __played: Set<HTMLMediaElement>;
+      __claimed: Set<HTMLMediaElement>;
+    };
+    record.__played = new Set();
+    record.__claimed = new Set();
+    const play = HTMLMediaElement.prototype.play;
+    HTMLMediaElement.prototype.play = function () {
+      record.__played.add(this);
+      return play.call(this);
+    };
+    const claim = AudioContext.prototype.createMediaElementSource;
+    AudioContext.prototype.createMediaElementSource = function (element) {
+      record.__claimed.add(element);
+      return claim.call(this, element);
+    };
+  });
+  mock.stations = [
+    {
+      id: "station-1",
+      name: "Radio Nova",
+      stream_url: NOVA,
+      homepage_url: null,
+      image_url: null,
+      artwork_hash: null,
+      created_at: 1_700_000_000_000,
+      updated_at: 1_700_000_000_000,
+    },
+  ];
+  const audio = silentWav(60);
+  // Served with no CORS header at all, as most stations are: an element plays
+  // it, and a MediaElementSource would turn it to silence.
+  await page.route(`${NOVA}**`, (route) =>
+    route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } }),
+  );
+  await page.route("**/api/v2/tracks/*/stream-ticket", (route) => {
+    const trackId = new URL(route.request().url()).pathname.split("/")[4];
+    return route.fulfill({
+      json: {
+        url: `/api/v2/stream/ticket-${trackId}`,
+        expires_at: Date.now() + 60_000,
+      },
+    });
+  });
+  await page.route("**/api/v2/stream/*", (route) =>
+    route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } }),
+  );
+}
+
+/** What the station's element and the queue's are doing, as seen now. */
+export function elements(page: Page) {
+  return page.evaluate((nova) => {
+    const record = window as unknown as {
+      __played: Set<HTMLMediaElement>;
+      __claimed: Set<HTMLMediaElement>;
+      __station?: HTMLMediaElement;
+    };
+    const played = [...record.__played];
+    // Found by its source while it has one, and kept: stopping a station lets
+    // go of its source, and the element must still be found afterwards.
+    record.__station ??= played.find((element) => element.currentSrc === nova);
+    const station = record.__station;
+    const queue = played.find((element) =>
+      element.currentSrc.includes("/api/v2/stream/ticket-"),
+    );
+    return {
+      station: station
+        ? {
+            paused: station.paused,
+            time: station.currentTime,
+            source: station.currentSrc,
+            claimed: record.__claimed.has(station),
+          }
+        : null,
+      queue: queue
+        ? {
+            paused: queue.paused,
+            source: queue.currentSrc,
+            claimed: record.__claimed.has(queue),
+          }
+        : null,
+      claims: record.__claimed.size,
+    };
+  }, NOVA);
+}
diff --git a/webapp/e2e/fixtures/state.ts b/webapp/e2e/fixtures/state.ts
new file mode 100644
index 00000000..5a650675
--- /dev/null
+++ b/webapp/e2e/fixtures/state.ts
@@ -0,0 +1,220 @@
+// The mock server's mutable state, which the tests read, replace and reset.
+
+import {
+  type Client,
+  correctableTrack,
+  freshDestinations,
+  freshUncertain,
+  freshUploadSession,
+  library,
+  linkState,
+  missingTrack,
+  type Offer,
+  song,
+} from "./catalogue";
+
+/**
+ * Everything the mock server keeps between requests, which the tests read,
+ * replace and reset. Fields of one object rather than module-level `let`s,
+ * because a binding imported from another module cannot be reassigned.
+ */
+class MockState {
+  missingTracks: Array<ReturnType<typeof missingTrack>> = [];
+  /**
+   * What a purge took out of sight and the server still holds, restorable,
+   * as `GET /libraries/{id}/purged-tracks` answers it.
+   */
+  purgedTracks: Array<ReturnType<typeof missingTrack>> = [];
+  /** What each purge asked for, in order. */
+  purgeAsks: unknown[] = [];
+  /** What each restoration asked for, in order. */
+  restoreAsks: unknown[] = [];
+
+  /** Replaced by the scoping test; one library elsewhere, so no picker appears. */
+  libraries: Array<ReturnType<typeof library>> = [library("library-1", "Ma musique")];
+
+  /** Flipped by the two tests that check a failure is shown as one. */
+  membersFail = false;
+  tokensFail = false;
+
+  ownClients: Client[] = [];
+  /**
+   * The Subsonic credential this account holds, or `null` for none.
+   *
+   * Two states and not one: the panel says different things about "you hold
+   * none" and "the request has not answered", so the mock has to be able to say
+   * the first.
+   */
+  ownSubsonicCredential: { created_at: number; updated_at: number } | null =
+    null;
+  /**
+   * The saved positions the playing screen lists under the track.
+   *
+   * Empty by default, which is what it was: `/api/v2/bookmarks` fell through to
+   * the mock's 404, so the list the screen renders was never drawn by any test.
+   * One that needs the page taller than the viewport fills it.
+   */
+  bookmarks: Array<{
+    position_ms: number;
+    comment: string | null;
+    created_at: number;
+    updated_at: number;
+    song: {
+      id: string;
+      title: string;
+      artist: string | null;
+      artwork_hash?: string | null;
+    };
+  }> = [];
+  /** Every registration the clients route received. */
+  clientWrites: string[] = [];
+  /** Held open by the double-press test; instant for everyone else. */
+  clientGate: Promise<void> = Promise.resolve();
+  /** Every method the credential route received, in order. */
+  subsonicWrites: string[] = [];
+  /** Held open by the double-press test; instant for everyone else. */
+  subsonicGate: Promise<void> = Promise.resolve();
+
+  scanFails = false;
+  /** The stream never answers at all, which is what a lost network looks like. */
+  scanDrops = false;
+
+  /** Resolved by default; one test replaces it to stall `album-1`. */
+  slowAlbum: Promise<void> = Promise.resolve();
+
+  /**
+   * What this account played, in the order the server ranked it. Reassigned by
+   * the test that empties it: an artist with no history must carry no heading
+   * rather than a heading over nothing.
+   */
+  artistPlayed: Array<ReturnType<typeof song>> = [];
+  /** The limits the page asked for, so a screenful can be told from a catalogue. */
+  topSongAsks: Array<string | null> = [];
+  /** How many times the artist page was asked for. */
+  artistAsks = 0;
+  /**
+   * Fields laid over the artist's answer: the RFC-022 sections and appearances.
+   * Empty by default, which is what a server from before RFC-022 sends.
+   */
+  artistExtra: Record<string, unknown> = {};
+  /**
+   * The `enrichment` object of the artist's nth answer, counting from one.
+   * Undefined leaves it out, as a server from before RFC-011 does.
+   */
+  enrichmentOf: (ask: number) => unknown = () => undefined;
+  /** Every artist answer after the first is a 500. */
+  artistFailsAfterFirst = false;
+
+  /** Every import request, so a dry run can be told from a commit. */
+  importAsks: Array<{ dryRun: boolean; name: string | null }> = [];
+  /** What the export route was asked for, and what it answered. */
+  exportAsks: string[] = [];
+
+  /**
+   * The account's radio stations, which this harness really does keep: the page
+   * writes and reads them back, so a mock answering a fixed list would pass a
+   * delete that deleted nothing.
+   */
+  /** Every write the radio page sent, so one click can be told from two. */
+  radioWrites: string[] = [];
+  /** Held open by the double-press test; instant for everyone else. */
+  radioGate: Promise<void> = Promise.resolve();
+
+  stations: Array<{
+    id: string;
+    name: string;
+    stream_url: string;
+    homepage_url: string | null;
+    image_url: string | null;
+    artwork_hash: string | null;
+    created_at: number;
+    updated_at: number;
+  }> = [];
+  /** Every image address a station write carried, as the server would fetch it. */
+  stationImages: Array<string | null | undefined> = [];
+
+  correctable = correctableTrack();
+
+  /** Every correction body sent, in order. */
+  corrections: unknown[] = [];
+
+  /** What the upload mock received, in order. */
+  uploadOffers: Offer[] = [];
+  uploadChunks: Array<{ index: number; bytes: number[] }> = [];
+  uploadCommits: string[] = [];
+  /** The one session the mock holds, advanced by each fragment it writes. */
+  uploadSession = freshUploadSession();
+  /**
+   * Set by the resume test: the fragment at this index is written, and its
+   * acknowledgement lost — the session advances and the client is told 409.
+   */
+  loseAcknowledgementOf: number | null = null;
+
+  destinations = freshDestinations();
+  scrobbleLinks: Array<ReturnType<typeof linkState>> = [];
+  uncertain = freshUncertain();
+  /** Every link, unlink and answer the mock received, in order. */
+  scrobbleWrites: Array<{ method: string; path: string; body?: unknown }> = [];
+  /** Where the Last.fm journey says to send the browser. */
+  lastFmAuthorizeUrl = "https://www.last.fm/api/auth/?api_key=k&cb=back";
+
+  /**
+   * The words the mock holds for each track. Absent is a track without any.
+   *
+   * Shaped like `src/lyrics.rs` answers, `camelCase` envelope included — written
+   * from the server rather than from `LyricsList` in `webapp/src/api/tracks.ts`, which
+   * is how that type spent a release claiming `structured_lyrics` while every
+   * read of it threw.
+   */
+  lyricSheets = new Map<
+    string,
+    Array<{
+      displayArtist: string | null;
+      displayTitle: string;
+      lang: string;
+      synced: boolean;
+      line: Array<{ start?: number; value: string }>;
+      /** Where the server says the sheet came from: `lrclib` since RFC-024. */
+      source?: string;
+    }>
+  >();
+
+  /**
+   * The mixes `GET /api/v2/mixes` answers (RFC-024). Empty by default, which is
+   * what a server answers for an account with nothing to suggest — and what
+   * keeps the home page every other test reads exactly as it was.
+   */
+  mixes: Array<{
+    id: string;
+    kind: string;
+    genre: string | null;
+    decade: number | null;
+    track_count: number;
+    artwork_hashes: string[];
+  }> = [];
+  /** Every mix id the mock was asked for, in order. */
+  mixAsks: string[] = [];
+  /** Set by the test that checks a mix which cannot be read says so. */
+  mixFails = false;
+  /** Every period the statistics route was asked for, in order. */
+  statsAsks: string[] = [];
+
+  /** Held open by the late-sheet test; instant for everyone else. */
+  lyricsGate: Promise<void> = Promise.resolve();
+  /** The loop the mock holds for each track, as bytes. Absent is none. */
+  canvases = new Map<string, number[]>();
+  /** Every placement and removal the mock received, in order. */
+  canvasWrites: Array<{ method: string; track: string; bytes?: number[] }> =
+    [];
+  /** Set by a test to refuse the next placement with this status. */
+  refuseCanvasWith: number | null = null;
+  /**
+   * Held by the playing page test, so a loop's bytes arrive only once it has
+   * looked at the element: they are not a video, and the browser drops the
+   * element the moment it finds that out.
+   */
+  canvasStreamGate: Promise<void> = Promise.resolve();
+}
+
+/** The one instance, shared by the mock and every spec in a worker. */
+export const mock = new MockState();
diff --git a/webapp/e2e/folders.spec.ts b/webapp/e2e/folders.spec.ts
new file mode 100644
index 00000000..5c1c4fe8
--- /dev/null
+++ b/webapp/e2e/folders.spec.ts
@@ -0,0 +1,354 @@
+// Folders: filing tracks, uploading into a folder, the folder picker.
+
+import { expect, test } from "@playwright/test";
+
+import {
+  chooseLightTheme,
+  expectNoWcagViolations,
+} from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { library, song } from "./fixtures/catalogue";
+import { serveFiledFolders } from "./fixtures/folders";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * Filing, end to end on the screen: a folder created, a track filed from its
+ * menu — the keyboard's way — another dragged onto a folder, the folder
+ * renamed and deleted, and its tracks back among the unfiled. No control
+ * here claims to touch a file, and none does: every write is to the folder
+ * routes.
+ */
+test("files tracks into folders from the menu and by dragging", async ({
+  page,
+}, testInfo) => {
+  const songs = [
+    song(1, "Hidden Place", 0, false),
+    song(2, "Cocoon", 0, false),
+    song(3, "Pagan Poetry", 0, false),
+  ];
+  const state = await serveFiledFolders(page, songs);
+
+  await page.goto("/folders");
+  await expect(page.getByRole("heading", { name: "Folders" })).toBeVisible();
+  // WaveFlow's list, not a folder of the owner's: kept apart from them, and
+  // it says so.
+  const kept = page.getByRole("list", { name: "Kept by WaveFlow" });
+  await expect(kept.getByRole("link", { name: /To sort/ })).toContainText("3 tracks");
+  await expect(kept.getByRole("link", { name: /To sort/ })).toContainText("Automatic");
+
+  // A folder, and a second one refused for a name already taken.
+  await page.getByRole("button", { name: "New folder" }).click();
+  await page.getByLabel("Folder name").fill("Rock");
+  await page.getByRole("button", { name: "Create" }).click();
+  await expect(page.getByRole("status")).toHaveText("“Rock” created.");
+  await page.getByRole("button", { name: "New folder" }).click();
+  await page.getByLabel("Folder name").fill("ROCK");
+  await page.getByRole("button", { name: "Create" }).click();
+  await expect(
+    page.getByRole("alert").filter({ hasText: "A folder of that name is already here." }),
+  ).toBeVisible();
+  await page.getByRole("button", { name: "Cancel" }).click();
+
+  // From the menu: the unfiled tracks, the first one filed into Rock.
+  await kept.getByRole("link", { name: /To sort/ }).click();
+  await expect(page.getByRole("heading", { name: "To sort" })).toBeVisible();
+  const rows = page.locator(".songs tbody tr");
+  await expect(rows).toHaveCount(3);
+  await rows.first().locator("button.song-title").focus();
+  await page.keyboard.press("Shift+F10");
+  await page.getByRole("menuitem", { name: "Move to folder…" }).click();
+  const picker = page.getByRole("dialog", { name: "Move “Hidden Place” to a folder" });
+  await expect(picker).toBeVisible();
+  await expectNoWcagViolations(page);
+  await picker.getByRole("button", { name: "Rock" }).click();
+  await expect(picker).toBeHidden();
+  await expect(rows).toHaveCount(2);
+  expect(state.writes.at(-1)).toEqual({
+    method: "PUT",
+    path: "placements",
+    body: { track_ids: ["song-1"], folder_id: "folder-1" },
+  });
+
+  // Unfiled lists tracks and says how to file them; no folder card sits
+  // there, where it would read as a folder inside "Unfiled".
+  await expect(page.getByRole("list", { name: "Folders" })).toHaveCount(0);
+  await expect(
+    page.getByText("To file a track, open its menu", { exact: false }),
+  ).toBeVisible();
+
+  // Inside the folder: a second track, a sub-folder, and a drag onto it. A
+  // drag is a mouse gesture; the phone files from the menu, already proven.
+  state.placed.set("song-2", "folder-1");
+  await page.goto("/folders?folder=folder-1");
+  await expect(page.getByRole("heading", { name: "Rock" })).toBeVisible();
+  await expect(rows).toHaveCount(2);
+  await expect(page.getByText("Folders that exist only in WaveFlow", { exact: false })).toHaveCount(0);
+  await page.getByRole("button", { name: "New folder" }).click();
+  await page.getByLabel("Folder name").fill("Indie");
+  await page.getByRole("button", { name: "Create" }).click();
+  await expect(page.getByRole("status")).toHaveText("“Indie” created.");
+  if (testInfo.project.name === "desktop") {
+    await rows
+      .filter({ hasText: "Cocoon" })
+      .dragTo(page.getByRole("list", { name: "Folders" }).getByRole("link", { name: /Indie/ }));
+    await expect(page.getByRole("status")).toHaveText("1 track filed in Indie.");
+    await expect(rows).toHaveCount(1);
+  } else {
+    state.placed.set("song-2", "folder-2");
+  }
+
+  // Renamed, then deleted with its sub-folder: both tracks come back unfiled.
+  await page.getByRole("button", { name: "Rename" }).click();
+  await page.getByLabel("New name").fill("Rock & Roll");
+  await page.getByRole("button", { name: "Save" }).click();
+  await expect(page.getByRole("heading", { name: "Rock & Roll" })).toBeVisible();
+  page.once("dialog", (dialog) => void dialog.accept());
+  await page.getByRole("button", { name: "Delete" }).click();
+  await expect(page.getByRole("heading", { name: "Folders" })).toBeVisible();
+  await expect(page.getByRole("status")).toHaveText(
+    "Folder deleted: 2 tracks are back in To sort.",
+  );
+  await expect(kept.getByRole("link", { name: /To sort/ })).toContainText("3 tracks");
+  await expectNoWcagViolations(page);
+});
+
+/** A listener walks the filed tree and is offered nothing that writes. */
+test("shows a listener the filed tree with nothing to change", async ({ page }) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  const songs = [song(1, "Hidden Place", 0, false)];
+  const state = await serveFiledFolders(page, songs);
+  state.folders.push({ id: "folder-1", parent_id: null, name: "Rock" });
+
+  await page.goto("/folders?folder=unfiled");
+  await expect(page.locator(".songs tbody tr")).toHaveCount(1);
+  for (const name of ["New folder", "Rename", "Delete", "Move…"]) {
+    await expect(page.getByRole("button", { name })).toHaveCount(0);
+  }
+  // A reader is told what Unfiled is, not how to file, and rows do not drag.
+  await expect(page.getByText("WaveFlow keeps this list itself", { exact: false })).toBeVisible();
+  await expect(page.locator(".songs tbody tr").first()).not.toHaveAttribute("draggable", "true");
+  await page.locator(".songs tbody tr button.song-title").first().focus();
+  await page.keyboard.press("Shift+F10");
+  await expect(page.getByRole("menuitem", { name: "Properties" })).toBeVisible();
+  await expect(page.getByRole("menuitem", { name: "Move to folder…" })).toHaveCount(0);
+});
+
+/**
+ * Received first, filed second (RFC-012 decision 7): an upload started from a
+ * folder commits as any other, then files the track it became.
+ */
+test("files a received track into the folder the upload started from", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  const state = await serveFiledFolders(page, []);
+  state.folders.push({ id: "folder-1", parent_id: null, name: "Rock" });
+
+  await page.goto("/upload?folder=folder-1");
+  await expect(page.getByText("Received files go into the folder Rock.")).toBeVisible();
+  await page.getByLabel("Choose audio files").setInputFiles({
+    name: "Army of Me.flac",
+    mimeType: "audio/flac",
+    buffer: Buffer.from(Array.from({ length: 20 }, (_, i) => i)),
+  });
+  await expect(page.getByText("Added to the library")).toBeVisible();
+  expect(mock.uploadCommits).toEqual(["upload-1"]);
+  expect(state.writes).toEqual([
+    {
+      method: "PUT",
+      path: "placements",
+      body: { track_ids: ["song-uploaded"], folder_id: "folder-1" },
+    },
+  ]);
+});
+
+/**
+ * Received is not undone by a filing that fails: the commit stands, and the
+ * line says the track arrived unfiled rather than claiming it was filed.
+ */
+test("keeps a received track when filing it fails, and says so", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  const state = await serveFiledFolders(page, []);
+  state.folders.push({ id: "folder-1", parent_id: null, name: "Rock" });
+  await page.route("**/api/v2/libraries/library-1/placements", (route) =>
+    route.fulfill({ status: 422, json: { error: "validation" } }),
+  );
+
+  await page.goto("/upload?folder=folder-1");
+  await expect(page.getByText("Received files go into the folder Rock.")).toBeVisible();
+  await page.getByLabel("Choose audio files").setInputFiles({
+    name: "Army of Me.flac",
+    mimeType: "audio/flac",
+    buffer: Buffer.from(Array.from({ length: 20 }, (_, i) => i)),
+  });
+  await expect(page.getByText("Added to the library, in To sort")).toBeVisible();
+  expect(mock.uploadCommits).toEqual(["upload-1"]);
+});
+
+/**
+ * No file is taken before the folder is known, and a folder that is gone is
+ * said before anything is sent: either way a file would have arrived unfiled
+ * under a page that promised a folder.
+ */
+test("waits for the folder before taking files, and says when it is gone", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  let release = () => {};
+  const held = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+  await page.route("**/api/v2/libraries/library-1/folders", async (route) => {
+    await held;
+    await route.fulfill({ json: { folders: [], unfiled_track_count: 0 } });
+  });
+  try {
+    await page.goto("/upload?folder=folder-gone");
+    await expect(page.getByLabel("Choose audio files")).toBeDisabled();
+  } finally {
+    release();
+  }
+  await expect(page.getByLabel("Choose audio files")).toBeEnabled();
+  await expect(page.getByRole("status")).toHaveText(
+    "The folder this upload was opened for cannot be found: received files will go to To sort.",
+  );
+});
+
+/**
+ * The root lists folders, not tracks. Coming back to it from the unfiled
+ * tracks must not leave those tracks behind in its controls.
+ */
+test("offers no tracks at the root after visiting the unfiled ones", async ({
+  page,
+}) => {
+  await serveFiledFolders(page, [song(1, "Hidden Place", 0, false)]);
+  await page.goto("/folders?folder=unfiled");
+  await expect(page.locator(".songs tbody tr")).toHaveCount(1);
+  const controls = page.locator(".page-controls");
+  await expect(controls.getByRole("button", { name: /Play/ })).toBeVisible();
+  await page
+    .getByRole("navigation", { name: "Folder path" })
+    .getByRole("link", { name: "Folders", exact: true })
+    .click();
+  await expect(page.getByRole("heading", { name: "Folders" })).toBeVisible();
+  await expect(controls.getByRole("button", { name: /Play/ })).toHaveCount(0);
+  await expect(page.getByRole("button", { name: "Load more" })).toHaveCount(0);
+});
+
+/**
+ * A tree that could not be read says nothing about the folder: it is not
+ * "missing", and no file is taken until a reading works.
+ */
+test("takes no file while the folder cannot be checked", async ({ page }) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  let answers = 0;
+  await page.route("**/api/v2/libraries/library-1/folders", (route) => {
+    answers += 1;
+    return answers === 1
+      ? route.fulfill({ status: 500, json: { error: "boom" } })
+      : route.fulfill({
+          json: {
+            folders: [{ id: "folder-1", parent_id: null, name: "Rock", track_count: 0 }],
+            unfiled_track_count: 0,
+          },
+        });
+  });
+
+  await page.goto("/upload?folder=folder-1");
+  const unchecked = page.getByRole("alert").filter({
+    hasText: "could not be checked",
+  });
+  await expect(unchecked).toBeVisible();
+  await expect(page.getByLabel("Choose audio files")).toBeDisabled();
+  await expect(page.getByText("cannot be found", { exact: false })).toHaveCount(0);
+
+  await unchecked.getByRole("button", { name: "Check again" }).click();
+  await expect(page.getByText("Received files go into the folder Rock.")).toBeVisible();
+  await expect(page.getByLabel("Choose audio files")).toBeEnabled();
+});
+
+/**
+ * The upload screen goes back where the upload was started. Reached by a
+ * full load, with nothing behind it, it goes to the folder it files into —
+ * or home, when it files into none.
+ */
+test("goes back from the upload screen to the folder it was opened for", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  const state = await serveFiledFolders(page, []);
+  state.folders.push({ id: "folder-1", parent_id: null, name: "Rock" });
+  const back = page.getByRole("button", { name: "Back", exact: true });
+
+  await page.goto("/folders?folder=folder-1");
+  await page.getByRole("link", { name: "Upload here" }).click();
+  await expect(page.getByText("Received files go into the folder Rock.")).toBeVisible();
+  await back.click();
+  await expect(page.getByRole("heading", { name: "Rock" })).toBeVisible();
+
+  await page.goto("/upload?folder=folder-1");
+  await back.click();
+  await expect(page).toHaveURL(/\/folders\?folder=folder-1$/);
+
+  await page.goto("/upload");
+  await back.click();
+  await expect(page).toHaveURL(/\/$/);
+});
+
+/**
+ * A form opened for one folder stays with it. The page stays mounted while
+ * only the folder in the address changes; carried along, a rename would rename
+ * the folder navigated to with the old one's name, and a "new folder" opened
+ * at the root would create one from Unfiled.
+ */
+test("closes a folder's form when another folder is opened", async ({ page }) => {
+  const state = await serveFiledFolders(page, []);
+  state.folders.push(
+    { id: "folder-1", parent_id: null, name: "Rock" },
+    { id: "folder-2", parent_id: "folder-1", name: "Indie" },
+  );
+
+  await page.goto("/folders?folder=folder-1");
+  await page.getByRole("button", { name: "Rename" }).click();
+  await expect(page.getByLabel("New name")).toHaveValue("Rock");
+  await page.getByRole("list", { name: "Folders" }).getByRole("link", { name: /Indie/ }).click();
+  await expect(page.getByRole("heading", { name: "Indie" })).toBeVisible();
+  await expect(page.getByLabel("New name")).toHaveCount(0);
+  await page.getByRole("button", { name: "Rename" }).click();
+  await expect(page.getByLabel("New name")).toHaveValue("Indie");
+
+  await page.goto("/folders");
+  await page.getByRole("button", { name: "New folder" }).click();
+  await expect(page.getByLabel("Folder name")).toBeVisible();
+  await page
+    .getByRole("list", { name: "Kept by WaveFlow" })
+    .getByRole("link", { name: /To sort/ })
+    .click();
+  await expect(page.getByRole("heading", { name: "To sort" })).toBeVisible();
+  await expect(page.getByLabel("Folder name")).toHaveCount(0);
+  expect(state.writes).toEqual([]);
+});
+
+test("keeps the folders and the folder picker readable in the light", async ({
+  page,
+}) => {
+  await serveFiledFolders(page, [song(1, "Hidden Place", 0, false)]);
+  await chooseLightTheme(page);
+  await page.goto("/folders");
+  const cards = page.getByRole("list", { name: "Kept by WaveFlow" });
+  await expect(cards.getByRole("link", { name: /To sort/ })).toBeVisible();
+  await expectNoWcagViolations(page);
+
+  await cards.getByRole("link", { name: /To sort/ }).click();
+  await page.locator(".songs tbody tr").first().locator("button.song-title").focus();
+  await page.keyboard.press("Shift+F10");
+  await page.getByRole("menuitem", { name: "Move to folder…" }).click();
+  await expect(
+    page.getByRole("dialog", { name: "Move “Hidden Place” to a folder" }),
+  ).toBeVisible();
+  await expectNoWcagViolations(page);
+});
diff --git a/webapp/e2e/library-cache.spec.ts b/webapp/e2e/library-cache.spec.ts
new file mode 100644
index 00000000..825a9eab
--- /dev/null
+++ b/webapp/e2e/library-cache.spec.ts
@@ -0,0 +1,476 @@
+// What the library keeps on screen, and when it asks the server again.
+
+import { expect, test } from "@playwright/test";
+
+import { resetAndMockApi } from "./fixtures/api";
+import { albums, session, track } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/** A tab switch keeps the current screen until the destination can render. */
+test("keeps the current tab visible while the next tab loads", async ({
+  page,
+}) => {
+  const asked: string[] = [];
+  let answerGenres: (() => void) | undefined;
+  const genresReady = new Promise<void>((resolve) => {
+    answerGenres = resolve;
+  });
+  await page.route("**/api/v2/genres*", async (route) => {
+    asked.push(new URL(route.request().url()).pathname);
+    await genresReady;
+    await route.fulfill({
+      json: [{ name: "Trip hop", song_count: 4, album_count: 1 }],
+    });
+  });
+  await page.route("**/api/v2/albums*", async (route) => {
+    asked.push(new URL(route.request().url()).pathname);
+    await route.fulfill({ json: albums });
+  });
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  const mobile = await page.locator(".mobile-navigation").isVisible();
+  const genresLink = mobile
+    ? page.locator('.more-sheet a[href="/genres"]')
+    : page.locator(".primary-navigation").getByRole("link", { name: "Genres" });
+  async function visitGenres() {
+    if (mobile) {
+      await page.locator(".mobile-navigation").getByRole("button", { name: "More" }).click();
+    }
+    await genresLink.click();
+  }
+  await visitGenres();
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await expect(page.locator(".skeleton-grid")).toHaveCount(0);
+  await expect(genresLink).toHaveAttribute(
+    "aria-busy",
+    "true",
+  );
+  answerGenres?.();
+  await expect(page.getByRole("heading", { name: "Genres" })).toBeVisible();
+  await page.getByRole("link", { name: "Albums" }).click();
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await visitGenres();
+  await expect(page.getByRole("heading", { name: "Genres" })).toBeVisible();
+  await expect(page.locator(".skeleton-grid")).toHaveCount(0);
+  expect(asked).toEqual(["/api/v2/albums", "/api/v2/genres"]);
+});
+
+/**
+ * A tab switch waits for its answer, but not for ever.
+ *
+ * Past a short deadline the destination is shown with its own wait. A server
+ * that never answered held the previous screen, with nothing but a busy tab
+ * to say anything was happening.
+ */
+test("shows the next tab with its wait when the answer is slow", async ({
+  page,
+}) => {
+  // Never answered: the deadline is the only way out.
+  await page.route("**/api/v2/genres*", () => new Promise<void>(() => {}));
+  await page.route("**/api/v2/albums*", (route) =>
+    route.fulfill({ json: albums }),
+  );
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  const mobile = await page.locator(".mobile-navigation").isVisible();
+  if (mobile) {
+    await page
+      .locator(".mobile-navigation")
+      .getByRole("button", { name: "More" })
+      .click();
+  }
+  const genresLink = mobile
+    ? page.locator('.more-sheet a[href="/genres"]')
+    : page.locator(".primary-navigation").getByRole("link", { name: "Genres" });
+  await genresLink.click();
+  await expect(page).toHaveURL(/\/genres$/);
+  // The destination's own wait, which is what the visitor now looks at.
+  await expect(page.locator("main .skeleton-grid")).toBeVisible();
+});
+
+/**
+ * The current tab's link still goes to its plain address.
+ *
+ * A click on the tab already open is how a second click cancels a switch
+ * still loading. With nothing loading, swallowing it left `/playing?view=lyrics`
+ * where it was, though the link says `/playing`.
+ */
+test("takes the current tab back to its plain address", async ({ page }) => {
+  await page.goto("/playing?view=lyrics");
+  await expect(page).toHaveURL(/\/playing\?view=lyrics$/);
+  const navigation = (await page.locator(".mobile-navigation").isVisible())
+    ? page.locator(".mobile-navigation")
+    : page.locator(".primary-navigation");
+  await navigation.getByRole("link", { name: "Now playing" }).click();
+  await expect(page).toHaveURL(/\/playing$/);
+});
+
+/**
+ * The random tab draws once.
+ *
+ * Its answer is held for no time at all, so a draw made ahead of the switch
+ * was thrown away before the page mounted, and the page drew again: two
+ * requests, and a wait for both.
+ */
+test("draws the random tab once when switching to it", async ({ page }) => {
+  let draws = 0;
+  await page.route("**/api/v2/songs/random*", async (route) => {
+    draws += 1;
+    await route.fulfill({ json: [track] });
+  });
+  await page.route("**/api/v2/albums*", (route) =>
+    route.fulfill({ json: albums }),
+  );
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  if (await page.locator(".mobile-navigation").isVisible()) {
+    await page.locator(".mobile-navigation").getByRole("button", { name: "More" }).click();
+    await page.locator('.more-sheet a[href="/random"]').click();
+  } else {
+    await page.locator(".primary-navigation").getByRole("link", { name: "Random" }).click();
+  }
+  await expect(page.getByRole("heading", { name: "Random" })).toBeVisible();
+  await expect(page.locator(".songs")).toContainText("Army of Me");
+  // Long enough for a second draw from the mount to have been asked.
+  await page.waitForTimeout(500);
+  expect(draws).toBe(1);
+});
+
+/**
+ * A tab that is still loading does not overrule a later move.
+ *
+ * The switch waits for the destination's first answer, and the page stays
+ * usable meanwhile. Following a link in it during that wait is a newer
+ * decision than the tab: arriving on the tab afterwards took the visitor away
+ * from the album they had just opened.
+ */
+test("leaves a tab switch behind when the visitor moves on while it loads", async ({
+  page,
+}) => {
+  let answerGenres: (() => void) | undefined;
+  const genresReady = new Promise<void>((resolve) => {
+    answerGenres = resolve;
+  });
+  let genresAnswered = false;
+  await page.route("**/api/v2/genres*", async (route) => {
+    await genresReady;
+    await route.fulfill({
+      json: [{ name: "Trip hop", song_count: 4, album_count: 1 }],
+    });
+    genresAnswered = true;
+  });
+  await page.route("**/api/v2/albums*", (route) =>
+    route.fulfill({ json: albums }),
+  );
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  const mobile = await page.locator(".mobile-navigation").isVisible();
+  if (mobile) {
+    await page.locator(".mobile-navigation").getByRole("button", { name: "More" }).click();
+  }
+  const genresLink = mobile
+    ? page.locator('.more-sheet a[href="/genres"]')
+    : page.locator(".primary-navigation").getByRole("link", { name: "Genres" });
+  await genresLink.click();
+  await expect(genresLink).toHaveAttribute("aria-busy", "true");
+
+  await page.locator('.grid a[href="/albums/album-1"]').click();
+  await expect(page).toHaveURL(/\/albums\/album-1$/);
+
+  answerGenres?.();
+  await expect.poll(() => genresAnswered).toBe(true);
+  await expect(genresLink).not.toHaveAttribute("aria-busy", "true");
+  // Long enough for the navigation the answer used to trigger to land.
+  await page.waitForTimeout(500);
+  await expect(page).toHaveURL(/\/albums\/album-1$/);
+  await expect(page.getByRole("heading", { name: "Genres" })).toHaveCount(0);
+});
+
+/**
+ * Signing out empties what was answered for the account that left.
+ *
+ * The cache is the first thing in this client that outlives a screen, and a
+ * sign-out here is a client-side navigation — the document is never reloaded,
+ * so nothing is forgotten on its own. A catalogue is scoped by library
+ * membership and an administrator sees more than that, so carrying any of it
+ * across would show the next person what the last one could see.
+ *
+ * Asserted on the request, because that is the only thing that distinguishes an
+ * emptied cache from a full one: both render the same albums, and only one of
+ * them had to ask.
+ */
+test("forgets the catalogue when the session changes", async ({
+  page,
+}, testInfo) => {
+  // The sidebar that carries the sign-out is hidden below 820px, where the
+  // same gesture lives behind the overflow sheet. What is being measured is
+  // the cache, not where the button sits, so it is measured once.
+  test.skip(testInfo.project.name !== "desktop", "about the sidebar");
+  let asked = 0;
+  await page.route("**/api/v2/albums*", async (route) => {
+    asked += 1;
+    await route.fulfill({ json: albums });
+  });
+  await page.route("**/api/v2/web/auth/login", async (route) => {
+    await route.fulfill({ json: session });
+  });
+
+  await page.goto("/");
+  await expect(page.getByText("Post", { exact: true })).toBeVisible();
+  expect(asked).toBe(1);
+
+  // Away and straight back, without signing out: this is the cache doing its
+  // job, and the contrast that makes the count below mean something.
+  const sidebar = page.getByRole("navigation");
+  await sidebar.getByRole("link", { name: "Queue" }).click();
+  await expect(page.getByRole("heading", { name: "Queue" })).toBeVisible();
+  await sidebar.getByRole("link", { name: "Albums" }).click();
+  await expect(page.getByText("Post", { exact: true })).toBeVisible();
+  expect(asked).toBe(1);
+
+  // Dispatched rather than clicked: the sidebar's footer sits under the fixed
+  // player bar at this viewport, so a real click waits on hit-testing forever.
+  // What this test is about is what the sign-out does to the cache, and the
+  // gesture itself is covered by the accessibility pass.
+  await page
+    .getByRole("button", { name: "Sign out" })
+    .dispatchEvent("click");
+  await expect(page).toHaveURL(/\/login$/);
+
+  // Signed in again through the form, not by reloading the page. A reload
+  // would destroy the cache whatever this code does, and would prove nothing:
+  // the leak this guards against is exactly the one that needs no reload.
+  await page.getByLabel("Username").fill("nocturne");
+  await page.getByLabel("Password").fill("correct horse battery staple");
+  await page.getByRole("button", { name: "Sign in" }).click();
+
+  await expect(page.getByText("Post", { exact: true })).toBeVisible();
+  expect(asked).toBe(2);
+});
+
+/**
+ * A cover already in memory does not flash grey on the way back.
+ *
+ * The bytes are held in a map keyed by hash, but that map holds *promises*, so
+ * nothing in it could be read while rendering: every mount started with no
+ * image and put the placeholder on screen for a frame — on every navigation
+ * back to a grid already visited, for every cover in it. Navidrome's own image
+ * cache reads its entry synchronously into `useState` for exactly this reason.
+ *
+ * Watched frame by frame rather than checked once, because a single frame is
+ * the whole of what went wrong: an assertion that ran after the navigation
+ * settled would have found the covers in place and called it fixed.
+ */
+test("shows a held cover at once, without a grey frame in between", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "about the sidebar");
+
+  const shelf = albums.map((album, index) => ({
+    ...album,
+    artwork_hash: `hash-${index}`,
+  }));
+  await page.route("**/api/v2/albums*", async (route) => {
+    await route.fulfill({ json: shelf });
+  });
+  const png = Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+    "base64",
+  );
+  await page.route("**/api/v2/artwork/*", async (route) => {
+    await route.fulfill({ contentType: "image/png", body: png });
+  });
+
+  await page.goto("/");
+  // Both covers in place, so their bytes are held before the round trip below.
+  await expect(page.locator("img.cover")).toHaveCount(2);
+
+  const sidebar = page.getByRole("navigation");
+  await sidebar.getByRole("link", { name: "Queue" }).click();
+  await expect(page.getByRole("heading", { name: "Queue" })).toBeVisible();
+
+  const greyFrames = await page.evaluate(async () => {
+    const link = [...document.querySelectorAll("nav a")].find((anchor) =>
+      anchor.textContent?.includes("Albums"),
+    ) as HTMLElement;
+    let grey = 0;
+    link.click();
+    const started = performance.now();
+    return await new Promise<number>((resolve) => {
+      const tick = () => {
+        grey += document.querySelectorAll(".grid .cover-fallback").length;
+        if (performance.now() - started > 400) return resolve(grey);
+        requestAnimationFrame(tick);
+      };
+      requestAnimationFrame(tick);
+    });
+  });
+
+  // The catalogue is back and showing its covers. Asserted after the count and
+  // not instead of it: zero grey frames is also what a navigation that never
+  // arrived would produce, and this assertion is the whole difference between
+  // measuring the fix and measuring nothing at all.
+  await expect(page.locator(".grid img.cover")).toHaveCount(2);
+  expect(greyFrames).toBe(0);
+});
+
+/**
+ * A favourite asks the catalogue again, so the star survives the next visit.
+ *
+ * The table keeps its stars in a map of its own while the request is out, which
+ * was enough when every screen re-read on mount: the server's answer replaced
+ * that overlay on the way back. Against a cache it is not — the overlay dies
+ * with the component and the held listing still carries the old `starred_at`,
+ * so the star un-ticks itself on the next visit.
+ *
+ * Asserted on the request rather than on the star, because the mock answers a
+ * fixture that never changes: what marks the difference is that the question
+ * was asked at all.
+ */
+test("asks the catalogue again after a track is favourited", async ({
+  page,
+}) => {
+  let asked = 0;
+  await page.route("**/api/v2/albums/album-1", async (route) => {
+    asked += 1;
+    await route.fulfill({ json: { ...albums[0], songs: [track] } });
+  });
+  // The star only invalidates once the server has taken it. Answered here
+  // because the harness has no favourites route, and a refused write must not
+  // invalidate anything — which is the other half of what this checks.
+  await page.route("**/api/v2/favorites/track/*", async (route) => {
+    await route.fulfill({ status: 204, body: "" });
+  });
+
+  await page.goto("/albums/album-1");
+  await expect(page.getByRole("heading", { name: "Post" })).toBeVisible();
+  expect(asked).toBe(1);
+
+  await page
+    .getByRole("button", { name: "Add favourite: Army of Me" })
+    .click();
+  await expect
+    .poll(() => asked, { message: "the album was re-asked" })
+    .toBe(2);
+});
+
+/**
+ * A cover that failed to load is asked for again; one the server does not hold
+ * is not.
+ *
+ * The two used to be the same answer: any response that was not `ok`, and any
+ * network failure, became `null` and was then held for the session — so a
+ * single blip left a cover grey until the tab was reloaded. A 404 is the server
+ * saying it holds no such artwork, which is worth keeping; anything else is a
+ * server that could not answer, which is not.
+ */
+test("asks again for a cover that failed, and not for one that is absent", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "about the sidebar");
+
+  const shelf = albums.map((album, index) => ({
+    ...album,
+    artwork_hash: index === 0 ? "hash-flaky" : "hash-absent",
+  }));
+  await page.route("**/api/v2/albums*", async (route) => {
+    await route.fulfill({ json: shelf });
+  });
+
+  const png = Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+    "base64",
+  );
+  let flaky = 0;
+  let absent = 0;
+  await page.route("**/api/v2/artwork/hash-flaky", async (route) => {
+    flaky += 1;
+    // Down the first time, up afterwards.
+    if (flaky === 1) return route.fulfill({ status: 503, body: "" });
+    await route.fulfill({ contentType: "image/png", body: png });
+  });
+  await page.route("**/api/v2/artwork/hash-absent", async (route) => {
+    absent += 1;
+    await route.fulfill({ status: 404, body: "" });
+  });
+
+  await page.goto("/");
+  // Waited on rather than sampled: the covers are asked for once the observer
+  // says they are on screen, which is a frame or two after the grid renders.
+  await expect.poll(() => flaky).toBe(1);
+  await expect.poll(() => absent).toBe(1);
+  await expect(page.locator(".grid .cover-fallback")).toHaveCount(2);
+
+  const sidebar = page.getByRole("navigation");
+  await sidebar.getByRole("link", { name: "Queue" }).click();
+  await expect(page.getByRole("heading", { name: "Queue" })).toBeVisible();
+  await sidebar.getByRole("link", { name: "Albums" }).click();
+
+  // The one that failed is asked again and arrives; the one the server does not
+  // hold is not asked again, because that answer has not changed.
+  await expect(page.locator(".grid img.cover")).toHaveCount(1);
+  await expect.poll(() => flaky).toBe(2);
+  expect(absent).toBe(1);
+});
+
+/**
+ * A correction reaches the listings that were holding the old value.
+ *
+ * Correcting a track can change its title, its artists, its genres, its year
+ * and its numbering — so it can change what an album holds, how a listing
+ * orders, which genre a track belongs to and what a search matches. While every
+ * screen re-read on mount the question did not arise; against a cache, a
+ * listing sits on the old answer for as long as it is held.
+ *
+ * **Reached by clicking throughout.** A `goto` to the editor would load a fresh
+ * document, and a fresh document has an empty cache — the listing would be
+ * re-asked whether or not anything was invalidated, and the test would be
+ * measuring the reload. That is what defeated the first attempt at this.
+ *
+ * Asserted on the request, because the mock answers a fixture that does not
+ * change: what marks the difference is that the question was asked again.
+ */
+test("re-asks a held listing after a correction is saved", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "about the sidebar");
+
+  let asked = 0;
+  await page.route("**/api/v2/albums*", async (route) => {
+    asked += 1;
+    await route.fulfill({ json: albums });
+  });
+  // The album holds the correctable track, so its editor is a link away rather
+  // than an address away.
+  await page.route("**/api/v2/albums/album-1", async (route) => {
+    await route.fulfill({
+      json: { ...albums[0], songs: [mock.correctable.song] },
+    });
+  });
+
+  await page.goto("/");
+  await expect(page.getByText("Post", { exact: true })).toBeVisible();
+  expect(asked).toBe(1);
+
+  const sidebar = page.getByRole("navigation");
+  await page.getByRole("link", { name: /Post/ }).first().click();
+  await page
+    .getByRole("link", { name: "Correct tags: Army Of Me" })
+    .click();
+
+  const title = page.getByLabel("Title", { exact: true });
+  await expect(title).toHaveValue("Army Of Me");
+  await title.fill("Army of Me");
+  await page.getByRole("button", { name: "Save" }).click();
+  await expect(page.getByText("Saved.")).toBeVisible();
+
+  await sidebar.getByRole("link", { name: "Albums" }).click();
+  await expect(page.getByText("Post", { exact: true })).toBeVisible();
+  expect(asked).toBe(2);
+});
diff --git a/webapp/e2e/library.spec.ts b/webapp/e2e/library.spec.ts
new file mode 100644
index 00000000..4e133c82
--- /dev/null
+++ b/webapp/e2e/library.spec.ts
@@ -0,0 +1,552 @@
+// Browsing the catalogue: songs, albums, genres, history and covers.
+
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { library, track } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+test("puts the songs playback action beside the sort and names its scope", async ({
+  page,
+}) => {
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({
+      json: [track, { ...track, id: "song-2", title: "Second track" }],
+    }),
+  );
+  await page.goto("/songs");
+  const play = page.locator(".page-header").getByRole("button", {
+    name: "Play all 2 tracks",
+  });
+  await expect(play).toBeVisible();
+  await play.click();
+  await expect(page.locator(".player-track strong")).toHaveText("Army of Me");
+});
+
+/**
+ * Every credited artist in a song list is a link to its own page.
+ *
+ * The column used to be the display string as plain text, so a playlist or a
+ * mix offered no way to reach an artist. A track credited to two artists names
+ * two pages; a track whose credits the server did not list still links through
+ * its primary credit; an artist the catalogue does not know stays text.
+ */
+test("links each credited artist in a song list to its page", async ({
+  page,
+}, testInfo) => {
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({
+      json: [
+        {
+          ...track,
+          id: "song-duo",
+          title: "Soleil Bleu",
+          artist: "Bleu Soleil, LUIZA",
+          artist_id: "artist-1",
+          artists: [
+            { id: "artist-1", name: "Bleu Soleil" },
+            { id: "artist-2", name: "LUIZA" },
+          ],
+        },
+        {
+          ...track,
+          id: "song-primary",
+          title: "Second track",
+          artist: "Björk",
+          artist_id: "artist-1",
+          artists: [],
+        },
+        {
+          ...track,
+          id: "song-unknown",
+          title: "Third track",
+          artist: "Nobody We Know",
+          artist_id: null,
+          artists: [],
+        },
+      ],
+    }),
+  );
+  await page.goto("/songs");
+  const rows = page.locator(".songs tbody tr");
+  await expect(rows).toHaveCount(3);
+
+  // Every layout: the track's menu names each credited artist, which is how a
+  // phone, whose song table hides the artist column, reaches one.
+  await rows.nth(0).locator("button.song-title").focus();
+  await page.keyboard.press("Shift+F10");
+  const menu = page.getByRole("menu", { name: "Actions for Soleil Bleu" });
+  await expect(menu.getByRole("menuitem", { name: /^Go to / })).toHaveText([
+    "Go to album",
+    "Go to Bleu Soleil",
+    "Go to LUIZA",
+  ]);
+  await menu.getByRole("menuitem", { name: "Go to LUIZA" }).click();
+  await expect(page).toHaveURL(/\/artists\/artist-2$/);
+  await page.goBack();
+  await expect(rows).toHaveCount(3);
+
+  // The column itself is drawn on a wide screen only.
+  if (testInfo.project.name !== "desktop") return;
+  const duo = rows.nth(0).locator(".song-artists");
+  await expect(duo.getByRole("link")).toHaveCount(2);
+  await expect(duo).toHaveText("Bleu Soleil, LUIZA");
+  await expect(duo.getByRole("link", { name: "LUIZA" })).toHaveAttribute(
+    "href",
+    "/artists/artist-2",
+  );
+
+  await expect(
+    rows.nth(1).locator(".song-artists").getByRole("link", { name: "Björk" }),
+  ).toHaveAttribute("href", "/artists/artist-1");
+  await expect(rows.nth(2).locator(".song-artists").getByRole("link")).toHaveCount(
+    0,
+  );
+  await expect(rows.nth(2).locator(".song-artists")).toHaveText("Nobody We Know");
+
+  await expectNoWcagViolations(page);
+
+  await duo.getByRole("link", { name: "Bleu Soleil" }).click();
+  await expect(page).toHaveURL(/\/artists\/artist-1$/);
+});
+
+/**
+ * A track menu taller than the window stays on screen and scrolls itself.
+ *
+ * One "Go to" entry per credited artist means a compilation track can carry a
+ * menu longer than a short window. It is capped at the window and scrolls on
+ * its own; the wheel over it scrolls it rather than closing it, and the wheel
+ * over the page still closes it.
+ */
+test("keeps a long track menu on screen and lets it scroll", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 900, height: 420 });
+  const many = Array.from({ length: 30 }, (_, index) => ({
+    id: `artist-${index + 1}`,
+    name: `Guest ${index + 1}`,
+  }));
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({
+      json: [
+        {
+          ...track,
+          id: "song-crowd",
+          title: "Crowded",
+          artist: many.map((artist) => artist.name).join(", "),
+          artist_id: "artist-1",
+          artists: many,
+        },
+      ],
+    }),
+  );
+  await page.goto("/songs");
+  await page.locator(".songs tbody tr button.song-title").first().focus();
+  await page.keyboard.press("Shift+F10");
+  const menu = page.getByRole("menu", { name: "Actions for Crowded" });
+  await expect(menu).toBeVisible();
+
+  const box = await menu.boundingBox();
+  expect(box).not.toBeNull();
+  expect((box?.y ?? 0) + (box?.height ?? 0)).toBeLessThanOrEqual(420);
+  expect(await menu.evaluate((node) => node.scrollHeight > node.clientHeight)).toBe(
+    true,
+  );
+
+  // The wheel over the menu scrolls it and leaves it open.
+  await menu.hover();
+  await page.mouse.wheel(0, 400);
+  await expect
+    .poll(() => menu.evaluate((node) => node.scrollTop))
+    .toBeGreaterThan(0);
+  await expect(menu).toBeVisible();
+  const last = menu.getByRole("menuitem", { name: "Go to Guest 30" });
+  await last.scrollIntoViewIfNeeded();
+  await expect(last).toBeInViewport();
+
+  // The wheel anywhere else still closes it.
+  await page.mouse.move(880, 400);
+  await page.mouse.wheel(0, 100);
+  await expect(menu).toHaveCount(0);
+});
+
+test("gives random playback one clear primary action", async ({ page }) => {
+  await page.route("**/api/v2/songs/random?*", (route) =>
+    route.fulfill({ json: [track] }),
+  );
+  await page.goto("/random");
+  const controls = page.locator(".page-header");
+  const play = controls.getByRole("button", { name: "Play", exact: true });
+  const queue = controls.getByRole("button", { name: "Add queue" });
+  const redraw = controls.getByRole("button", { name: "Draw again" });
+  await expect(play).toBeVisible();
+  await expect(queue).toBeVisible();
+  await expect(redraw).toBeVisible();
+  const playFill = await play.evaluate((node) => getComputedStyle(node).backgroundColor);
+  const queueFill = await queue.evaluate((node) => getComputedStyle(node).backgroundColor);
+  expect(playFill).not.toBe(queueFill);
+});
+
+/**
+ * The browse controls are the whole of lot A that has behaviour rather than
+ * appearance. Sorting has to reach the server — it is `AlbumOrder` there, and
+ * four of its values filter as well as order — while filtering must not, since
+ * the client already holds the list.
+ */
+test("sorts through the server and filters in the browser", async ({
+  page,
+}) => {
+  const requested: Array<string | null> = [];
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (url.pathname === "/api/v2/albums") {
+      requested.push(url.searchParams.get("sort"));
+    }
+  });
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+
+  const titles = page.locator(".grid strong");
+  await expect(titles).toHaveText(["Post", "Vespertine"]);
+  // The page names its order on the first load rather than relying on the
+  // server default, so the menu and the request cannot disagree.
+  expect(requested).toEqual(["alphabeticalByName"]);
+
+  await page.getByLabel("Sort").selectOption("newest");
+  await expect(titles).toHaveText(["Vespertine", "Post"]);
+  expect(requested).toEqual(["alphabeticalByName", "newest"]);
+
+  // Filtering narrows what is already loaded: no further request is made, and
+  // the header count reports the subset against the whole.
+  await page.getByLabel("Filter by title or artist").fill("vesper");
+  await expect(titles).toHaveText(["Vespertine"]);
+  await expect(page.getByText("1 of 2 shown")).toBeVisible();
+  expect(requested).toEqual(["alphabeticalByName", "newest"]);
+
+  // A filter matching nothing says so instead of showing an empty grid.
+  await page.getByLabel("Filter by title or artist").fill("zzz");
+  await expect(page.getByText("Nothing matches that filter.")).toBeVisible();
+});
+
+/**
+ * Covers are asked for when they are about to be seen, not when the page mounts.
+ *
+ * `/api/v2/artwork/{hash}` needs an `Authorization` header, so each thumbnail
+ * costs a `fetch` of its own. A library of 164 tracks opened with 127 requests
+ * in half a second against a connection limit of six, and the covers below the
+ * fold were queued ahead of the ones being looked at.
+ *
+ * Asserted on one card at the far end rather than on a count: a count depends
+ * on the viewport and would have to be loosened until it stopped meaning
+ * anything. What this pins is the property — off screen is not asked for, and
+ * scrolling to it asks.
+ */
+test("asks for a cover when it comes into view, and not before", async ({
+  page,
+}) => {
+  const asked: string[] = [];
+  const shelf = Array.from({ length: 60 }, (_, index) => ({
+    id: `album-lazy-${index}`,
+    library_id: "library-1",
+    title: `Shelf ${String(index).padStart(2, "0")}`,
+    artist: "Rue Delacour",
+    artist_id: "artist-1",
+    artwork_hash: `hash-${index}`,
+    year: 2000 + index,
+    starred_at: null,
+    user_rating: null,
+  }));
+
+  // Registered after `mockAuthenticatedApi`, so these win: Playwright tries
+  // handlers newest first.
+  await page.route("**/api/v2/albums*", async (route) => {
+    await route.fulfill({ json: shelf });
+  });
+  await page.route("**/api/v2/artwork/*", async (route) => {
+    asked.push(new URL(route.request().url()).pathname.split("/").pop() ?? "");
+    // A 404 is enough: this is about which requests leave, not what comes back.
+    await route.fulfill({ status: 404, body: "" });
+  });
+
+  await page.goto("/");
+  const last = page.getByText("Shelf 59");
+  await expect(last).toBeVisible();
+
+  // The top of the shelf is on screen and has been asked for; the bottom is
+  // sixty cards away and has not.
+  await expect.poll(() => asked).toContain("hash-0");
+  expect(asked).not.toContain("hash-59");
+
+  await last.scrollIntoViewIfNeeded();
+  await expect.poll(() => asked).toContain("hash-59");
+});
+
+/**
+ * The card actions guard themselves while their album's tracks are being
+ * fetched. The guard was one album id, which meant two cards in flight shared
+ * a single slot: pressing the second card cleared the first one's guard
+ * outright, and its buttons came back to life with its own request still out.
+ *
+ * That mattered because one of the two actions appends. A second press on "add
+ * to queue" while the first was unanswered queued the album twice.
+ */
+test("keeps each card's actions guarded while its own fetch is out", async ({
+  page,
+}) => {
+  let releaseSlow = () => {};
+  mock.slowAlbum = new Promise<void>((resolve) => {
+    releaseSlow = resolve;
+  });
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+
+  const slowPlay = page.getByRole("button", { name: "Play: Post" });
+  const fastQueue = page.getByRole("button", {
+    name: "Add to queue: Vespertine",
+  });
+
+  await page.locator(".grid li").first().hover();
+  await slowPlay.click();
+  await expect(slowPlay).toBeDisabled();
+
+  // The second album answers at once while the first is still held open.
+  // Synchronising on the response and not on the button is the point: the
+  // button is enabled before the click too, so `toBeEnabled` can resolve on
+  // its first poll, before React has even applied the disabling update — and
+  // the assertion below would then run at a moment when nothing has happened,
+  // which is exactly when the single-slot guard still looks correct.
+  const answered = page.waitForResponse(
+    (response) => new URL(response.url()).pathname === "/api/v2/albums/album-2",
+  );
+  await page.locator(".grid li").nth(1).hover();
+  await fastQueue.click();
+  await answered;
+  await expect(fastQueue).toBeEnabled();
+
+  // The first album has not answered, so its actions must still be refused.
+  await expect(slowPlay).toBeDisabled();
+
+  releaseSlow();
+  await expect(slowPlay).toBeEnabled();
+});
+
+test("album view plays its tracks and keeps its compact list readable", async ({
+  page,
+}) => {
+  // "More by" reads the artist's albums alone. The library listing would page
+  // through every album to keep six, and the artist's page asks a metadata
+  // provider; neither has any business being asked from here.
+  const listings: string[] = [];
+  page.on("request", (request) => {
+    const path = new URL(request.url()).pathname;
+    if (path === "/api/v2/albums" || path === "/api/v2/artists/artist-1") {
+      listings.push(path);
+    }
+  });
+  await page.goto("/albums/album-2");
+  await expect(page.locator(".album-hero h2")).toHaveText("Vespertine");
+  await expect(page.locator(".album-meta")).toContainText("3 tracks");
+  await expect(page.locator(".album-meta")).toContainText("15:00");
+  await expect(page.locator(".album-songs tbody tr")).toHaveCount(3);
+  await expect(page.locator(".album-songs .song-cover")).toHaveCount(0);
+  await expect(page.getByRole("heading", { name: "More by Björk" })).toBeVisible();
+  await expect(page.locator(".album-related-grid a")).toHaveCount(1);
+  expect(listings).toEqual([]);
+  const actions = await page.locator(".album-actions button").evaluateAll((buttons) =>
+    buttons.map((button) => {
+      const style = getComputedStyle(button);
+      return {
+        left: Number.parseFloat(style.paddingLeft),
+        right: Number.parseFloat(style.paddingRight),
+      };
+    }),
+  );
+  expect(actions).toHaveLength(2);
+  for (const action of actions) {
+    expect(action.left).toBeGreaterThanOrEqual(20);
+    expect(action.right).toBeGreaterThanOrEqual(20);
+  }
+
+  await page.getByRole("button", { name: "Play album" }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  await page.locator(".album-songs .song-title").nth(1).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Cocoon");
+  expect(
+    await page.evaluate(() =>
+      document.documentElement.scrollWidth <= window.innerWidth,
+    ),
+  ).toBe(true);
+});
+
+/**
+ * The song table carries the controls the albums grid does not — a five-star
+ * rating and a favourite — so the accessibility sweep has to reach a page that
+ * shows one. Until this test the sweep only ever loaded the grid.
+ */
+test("rates a track and stays free of WCAG A or AA violations", async ({
+  page,
+}) => {
+  const rated: string[] = [];
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (url.pathname.startsWith("/api/v2/ratings/")) {
+      rated.push(`${request.method()} ${url.pathname}`);
+    }
+  });
+
+  await page.goto("/albums/album-2");
+  await expect(page.getByRole("heading", { name: "Vespertine" })).toBeVisible();
+
+  // The rating is a radio group, so the stored value is a checked radio rather
+  // than a class on a span.
+  const hidden = page.getByRole("group", { name: "Rating: Hidden Place" });
+  await expect(hidden.getByRole("radio", { name: "5 stars" })).toBeChecked();
+  const cocoon = page.getByRole("group", { name: "Rating: Cocoon" });
+  await expect(cocoon.getByRole("radio", { checked: true })).toHaveCount(0);
+
+  await cocoon.getByRole("radio", { name: "4 stars" }).check();
+  await expect(cocoon.getByRole("radio", { name: "4 stars" })).toBeChecked();
+  expect(rated).toEqual(["PUT /api/v2/ratings/track/song-2"]);
+
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * Genres were a route the server answered and the client never called. The
+ * navigation is the part worth pinning: the genre name travels into the query,
+ * and it is a display string — "Hip-Hop" and "hip hop" are one genre to the
+ * server, which canonicalises before matching.
+ */
+test("browses into a genre and keeps WCAG A and AA clean", async ({ page }) => {
+  const asked: Array<string | null> = [];
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (url.pathname === "/api/v2/songs/by-genre") {
+      asked.push(url.searchParams.get("genre"));
+    }
+  });
+
+  await page.goto("/genres");
+  await expect(page.getByRole("heading", { name: "Genres" })).toBeVisible();
+  await expect(page.getByText("412 tracks · 31 albums")).toBeVisible();
+
+  await expectNoWcagViolations(page);
+
+  await page.getByRole("link", { name: "Art Pop" }).click();
+  await expect(page.getByRole("heading", { name: "Art Pop" })).toBeVisible();
+  await expect(page.locator(".songs tbody tr")).toHaveCount(2);
+  expect(asked).toEqual(["Art Pop"]);
+
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * `GET /history` answers plays and not songs, so every distinct track on this
+ * screen is a request of its own, and they all leave together. Without a cap a
+ * long history meant a hundred-odd round trips for a list nobody reads to the
+ * bottom of. The window stays wide — 200 plays asked for — and only what is
+ * resolved is bounded.
+ */
+test("resolves a bounded number of tracks from a long history", async ({
+  page,
+}) => {
+  // The track itself and nothing under it: `/tracks/{id}/stream-ticket` shares
+  // the prefix, and the restored queue asks for those as soon as it loads.
+  const asked: string[] = [];
+  page.on("request", (request) => {
+    const path = new URL(request.url()).pathname;
+    if (/^\/api\/v2\/tracks\/[^/]+$/.test(path)) asked.push(path);
+  });
+
+  await page.goto("/history");
+  await expect(
+    page.getByRole("heading", { name: "Recently played" }),
+  ).toBeVisible();
+
+  await expect(page.locator(".songs tbody tr")).toHaveCount(50);
+  expect(asked).toHaveLength(50);
+  // The newest plays are the ones kept, not an arbitrary fifty.
+  expect(asked[0]).toBe("/api/v2/tracks/t0");
+  expect(asked.at(-1)).toBe("/api/v2/tracks/t49");
+});
+
+/**
+ * The web client works inside one library at a time — decided 2026-09-07, and
+ * the contract is that changing library changes the catalogue's scope rather
+ * than merging catalogues. What is worth pinning is that the scope actually
+ * travels: a picker that changed nothing on the wire would look right and be
+ * wrong.
+ */
+test("scopes the catalogue to the active library, and hides the picker when there is one", async ({
+  page,
+}, testInfo) => {
+  const scopes: Array<string | null> = [];
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (url.pathname === "/api/v2/albums") {
+      scopes.push(url.searchParams.get("library_id"));
+    }
+  });
+
+  mock.libraries = [
+    library("library-1", "Ma musique"),
+    library("library-2", "Les enfants"),
+  ];
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+
+  // The picker exists in the sidebar and in the mobile header; only one of the
+  // two is on screen, so the locator has to say which — as the appearance test
+  // above already does for theme and language.
+  const chrome =
+    testInfo.project.name === "mobile"
+      ? page.locator(".mobile-header")
+      : page.locator(".sidebar");
+  const picker = chrome.getByLabel("Library");
+  await expect(picker).toBeVisible();
+  // The first library leads until one has been chosen.
+  await expect.poll(() => scopes.at(-1)).toBe("library-1");
+
+  await picker.selectOption("library-2");
+  await expect.poll(() => scopes.at(-1)).toBe("library-2");
+
+  // Remembered across a reload rather than reset to the first.
+  await page.reload();
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await expect.poll(() => scopes.at(-1)).toBe("library-2");
+});
+
+test("shows no library picker when the account has only one", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  // A select with a single option is a control that does nothing.
+  await expect(page.getByLabel("Library")).toHaveCount(0);
+});
+
+test("keeps the catalogue unasked until the active library is known", async ({
+  page,
+}) => {
+  // The first render used to fire an unscoped request and then a scoped one,
+  // so for a moment the screen showed every library's albums — the exact thing
+  // the single-library scope exists to prevent.
+  const scopes: Array<string | null> = [];
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (url.pathname === "/api/v2/albums") {
+      scopes.push(url.searchParams.get("library_id"));
+    }
+  });
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await expect(page.getByText("Post", { exact: true })).toBeVisible();
+  expect(scopes).toEqual(["library-1"]);
+});
diff --git a/webapp/e2e/lyrics.spec.ts b/webapp/e2e/lyrics.spec.ts
new file mode 100644
index 00000000..ec5a7126
--- /dev/null
+++ b/webapp/e2e/lyrics.spec.ts
@@ -0,0 +1,495 @@
+// The words a track travels with, the sung line, and where they came from.
+
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * The playing page, reading what the server actually sends.
+ *
+ * Until 2026-09-15 `LyricsList` declared a `snake_case` envelope the server has
+ * never sent, so this page threw on its first property and showed nothing at
+ * all. Nothing caught it because the mock above was written from that type. An
+ * assertion on the words themselves is what tells the two shapes apart: an
+ * empty sheet renders the same "no lyrics" line under either name.
+ */
+test("shows the words a track travels with", async ({ page }) => {
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: "Rue Delacour",
+      displayTitle: "Nocturne",
+      lang: "eng",
+      synced: false,
+      line: [{ value: "the lamps come on along the quay" }],
+    },
+  ]);
+  await page.goto("/playing");
+  await expect(
+    page.getByRole("listitem").filter({
+      hasText: "the lamps come on along the quay",
+    }),
+  ).toBeVisible();
+});
+
+/**
+ * The words as the subject of the screen, and what timings buy.
+ *
+ * A sheet that carries them gets two things the strip cannot give: the sung
+ * line is held in view, and every line is a button that seeks to it. A sheet
+ * without them gets neither — and says so by having no buttons at all, rather
+ * than promising a jump it cannot compute.
+ *
+ * No audio is served in these runs, so the head stays at zero and the first
+ * line is the sung one. That is enough to tell a marked line from an unmarked
+ * one; what it deliberately does not claim is that pressing a line moved the
+ * head, which without a stream would be a measurement of nothing.
+ */
+test("gives the words a view of their own, with timings where there are any", async ({
+  page,
+}) => {
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: "Rue Delacour",
+      displayTitle: "Nocturne",
+      lang: "eng",
+      synced: true,
+      line: [
+        { start: 0, value: "the lamps come on along the quay" },
+        { start: 5_000, value: "and the water keeps the light" },
+        { start: 12_500, value: "the lamps come on along the quay" },
+        // An instrumental break: timed, and with no words to name it by.
+        { start: 20_000, value: "" },
+      ],
+    },
+  ]);
+
+  await page.goto("/playing");
+  await page.getByRole("link", { name: "Lyrics", exact: true }).click();
+
+  const view = page.locator(".lyrics-view");
+  await expect(view).toBeVisible();
+  await expect(page).toHaveURL(/\?view=lyrics$/);
+  // The strip is gone, not duplicated: one view at a time, or the words would
+  // be on the screen twice and the sung line marked in two places.
+  await expect(page.locator(".playing")).toHaveCount(0);
+
+  // The head is at zero, so the first line is the one being sung — and a
+  // refrain repeated word for word does not take the mark with it.
+  const lines = view.getByRole("listitem");
+  await expect(lines).toHaveCount(4);
+  await expect(lines.nth(0)).toHaveAttribute("aria-current", "true");
+  await expect(lines.nth(2)).not.toHaveAttribute("aria-current", "true");
+
+  // **Every line is a button, named by its words and then the time.** The
+  // words because the name must contain what is on screen — voice control
+  // finds a control by what it shows — and the time because the words alone
+  // say nothing about what pressing does. A blank line has no words to
+  // repeat, so it keeps the time alone rather than a name that opens on a
+  // comma.
+  await expect(view.getByRole("button")).toHaveCount(4);
+  await expect(
+    view.getByRole("button", {
+      name: "and the water keeps the light, jump to 0:05",
+      exact: true,
+    }),
+  ).toBeVisible();
+  // Visible, not merely present: a blank line held a collapsible space, so its
+  // button had no height — reachable by the keyboard and drawn nowhere.
+  await expect(
+    view.getByRole("button", { name: "Jump to 0:20", exact: true }),
+  ).toBeVisible();
+  await expect(
+    view.getByText("This sheet carries timings — press a line to jump to it."),
+  ).toBeVisible();
+
+  await expectNoWcagViolations(page);
+
+  // **The switcher says where it is, once.** All three entries point at one
+  // path, and the router counts a link carrying no search as matching every
+  // search — so this read `['Detail', 'Lyrics']` before `activeOptions` was
+  // made exact, and the screen claimed to be in two views at once. A count
+  // rather than one attribute: the defect was an extra mark, which an
+  // assertion on the right one passes straight through.
+  const current = page.locator('.view-switcher a[aria-current="page"]');
+  await expect(current).toHaveText("Lyrics");
+  await page.goto("/playing");
+  await expect(page.locator(".playing")).toBeVisible();
+  await expect(current).toHaveText("Detail");
+
+  // And a mode this build does not know is not a mode: the detail view
+  // stands, rather than a blank screen or a crash.
+  await page.goto("/playing?view=karaoke");
+  await expect(page.locator(".playing")).toBeVisible();
+  await expect(page.locator(".lyrics-view")).toHaveCount(0);
+});
+
+/**
+ * A sheet that arrives after the head has already moved is still centred.
+ *
+ * The case a review asked about: open the lyrics view mid-track with nothing
+ * cached, so the column mounts only once the sheet lands. The claim was that
+ * the scroll effect would not re-run, because it watches `active` and not the
+ * three-state reading beside it. It does run — `active` is derived from the
+ * sheet, so it is `-1` until one arrives and cannot already name a line — and
+ * this is that argument turned into a measurement rather than left as one.
+ */
+test("centres a sheet that lands after the head has moved", async ({
+  page,
+}) => {
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: "Rue Delacour",
+      displayTitle: "Nocturne",
+      lang: "eng",
+      synced: true,
+      line: Array.from({ length: 40 }, (_, index) => ({
+        start: index * 5_000,
+        value: `late line ${index}`,
+      })),
+    },
+  ]);
+  let release = () => {};
+  mock.lyricsGate = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+
+  try {
+    await page.goto("/playing?view=lyrics");
+    // Waiting, not empty: the view's frame is there and the column is not.
+    await expect(page.locator(".lyrics-view")).toContainText("Loading");
+    await expect(page.locator(".lyrics-view ol")).toHaveCount(0);
+
+    // The head moves while there is no sheet to mark, so `active` stays -1
+    // and the effect has nothing to do.
+    for (let press = 0; press < 20; press += 1) {
+      await page.keyboard.press("ArrowRight");
+    }
+  } finally {
+    // **Released whatever happened.** An assertion failing above would leave
+    // the route waiting on this promise for ever, and the context teardown
+    // waiting on the route — so the test would not fail, it would hang. The
+    // reset in `beforeEach` guards the tests after this one, not this one.
+    //
+    // The two gates added with the credential panels, and the canvas one
+    // above them, carry the same hazard and are left as they are: wrapping
+    // them means restructuring three tests this branch has no other reason to
+    // touch.
+    release();
+  }
+  const column = page.locator(".lyrics-view ol");
+  await expect(column).toBeVisible();
+  await expect(
+    page.getByRole("listitem").filter({ hasText: "late line 20" }),
+  ).toHaveAttribute("aria-current", "true");
+  // The line the head is on is in view, which is the whole claim.
+  await expect.poll(() => column.evaluate((list) => list.scrollTop)).toBeGreaterThan(0);
+});
+
+/**
+ * A sheet without timings offers no seeking, and does not pretend to follow.
+ *
+ * The same view, the other half of the rule: `synced` is the server's statement
+ * that the lines carry starts, and everything this view adds over the strip
+ * hangs off it.
+ */
+test("offers no seeking on a sheet that carries no timings", async ({
+  page,
+}) => {
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: null,
+      displayTitle: "Nocturne",
+      lang: "eng",
+      synced: false,
+      line: [
+        { value: "the lamps come on along the quay" },
+        { value: "and the water keeps the light" },
+      ],
+    },
+  ]);
+
+  await page.goto("/playing?view=lyrics");
+
+  const view = page.locator(".lyrics-view");
+  await expect(view.getByRole("listitem")).toHaveCount(2);
+  await expect(view.getByRole("button")).toHaveCount(0);
+  await expect(
+    view.getByText("This sheet carries timings — press a line to jump to it."),
+  ).toHaveCount(0);
+  // Nothing is marked: an unsynced sheet has no start to compare against, and
+  // weighting a line would be a claim about where the track is.
+  await expect(view.locator("[aria-current]")).toHaveCount(0);
+});
+
+/**
+ * The strip beside the cover reads the way the lyrics view does.
+ *
+ * It used to mark the sung line and leave it to scroll out of its own box, and
+ * no line could be pressed. Now it holds the sung line in view, and a synced
+ * line is a button that seeks to it. A sheet without timings still gets no
+ * buttons.
+ */
+test("follows the sung line in the strip beside the cover, and seeks from it", async ({
+  page,
+}) => {
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: "Rue Delacour",
+      displayTitle: "Nocturne",
+      lang: "eng",
+      synced: true,
+      line: Array.from({ length: 40 }, (_, index) => ({
+        start: index * 5_000,
+        value: `strip line ${index}`,
+      })),
+    },
+  ]);
+
+  await page.goto("/playing");
+  const strip = page.locator(".playing .lyrics");
+  const column = strip.locator("ol");
+  await expect(column).toBeVisible();
+  // Every timed line is a button, named by its words and then the time.
+  await expect(strip.getByRole("button")).toHaveCount(40);
+  await expect(
+    strip.getByRole("button", {
+      name: "strip line 1, jump to 0:05",
+      exact: true,
+    }),
+  ).toBeVisible();
+  await expect.poll(() => column.evaluate((list) => list.scrollTop)).toBe(0);
+
+  // The head moves well down the sheet: the sung line is marked, and the strip
+  // has scrolled itself to it rather than leaving it below its own fold.
+  for (let press = 0; press < 20; press += 1) {
+    await page.keyboard.press("ArrowRight");
+  }
+  await expect(
+    strip.getByRole("listitem").filter({ hasText: "strip line 20" }),
+  ).toHaveAttribute("aria-current", "true");
+  await expect
+    .poll(() => column.evaluate((list) => list.scrollTop))
+    .toBeGreaterThan(0);
+  // The strip scrolls itself and nothing else: the page stays where it was.
+  expect(await page.evaluate(() => window.scrollY)).toBe(0);
+
+  // Pressing a line moves the head to it. The sung line is derived from the
+  // player's position, so the mark landing on the pressed line is the head
+  // having moved there — the arrow keys above go through the same `seek`.
+  await strip
+    .getByRole("button", { name: "strip line 5, jump to 0:25", exact: true })
+    .click();
+  await expect(
+    strip.getByRole("listitem").filter({ hasText: /^strip line 5$/ }),
+  ).toHaveAttribute("aria-current", "true");
+  await expect(
+    strip.getByRole("listitem").filter({ hasText: /^strip line 20$/ }),
+  ).not.toHaveAttribute("aria-current", "true");
+
+  await expectNoWcagViolations(page);
+
+  // Without timings, the strip offers no seeking, as the lyrics view does not.
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: null,
+      displayTitle: "Nocturne",
+      lang: "eng",
+      synced: false,
+      line: [
+        { value: "the lamps come on along the quay" },
+        { value: "and the water keeps the light" },
+      ],
+    },
+  ]);
+  await page.reload();
+  await expect(strip.getByRole("listitem")).toHaveCount(2);
+  await expect(strip.getByRole("button")).toHaveCount(0);
+});
+
+/**
+ * The immersive view, and the two things that make it a mode rather than a trap.
+ *
+ * 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. And
+ * it **lives in the location**, so Back leaves the view rather than the screen
+ * — which is the press everybody makes on a phone, and the whole reason the
+ * mode is a search parameter instead of a `useState`.
+ */
+test("opens the immersive view, and Back leaves the view and not the screen", async ({
+  page,
+}) => {
+  await page.goto("/playing");
+  await page.getByRole("link", { name: "Immersive" }).click();
+
+  const immersive = page.locator("dialog.immersive");
+  await expect(immersive).toBeVisible();
+  await expect(page).toHaveURL(/\?view=immersive$/);
+  await expect(immersive.locator(".immersive-cover")).toBeVisible();
+  // The transport, so the mode can be sat in.
+  for (const name of ["Previous track", "Play", "Next track"]) {
+    await expect(immersive.getByRole("button", { name })).toBeVisible();
+  }
+
+  await expectNoWcagViolations(page);
+
+  // **Escape, which is the platform's and not ours.** `<dialog>` answers it,
+  // and the navigation hangs off the close rather than off the key, so the
+  // button below and this press go through one closer.
+  await page.keyboard.press("Escape");
+  await expect(immersive).toHaveCount(0);
+  await expect(page).toHaveURL(/\/playing$/);
+  await expect(page.locator(".playing")).toBeVisible();
+
+  // **And Back does not reopen what Escape just closed.** The close replaces
+  // the immersive entry rather than pushing a detail one on top of it.
+  // Pushing left `/playing → ?view=immersive → /playing` in the history, so
+  // this press landed back on the immersive entry and opened the view again —
+  // the opposite of the reason the mode is in the location.
+  await page.goBack();
+  await expect(page.locator("dialog.immersive")).toHaveCount(0);
+
+  // And Back, from inside the view, leaves the view.
+  await page.getByRole("link", { name: "Immersive" }).click();
+  await expect(page.locator("dialog.immersive")).toBeVisible();
+  await page.goBack();
+  await expect(page.locator("dialog.immersive")).toHaveCount(0);
+  await expect(page).toHaveURL(/\/playing$/);
+  await expect(page.locator(".playing")).toBeVisible();
+
+  // The close button takes the same route out.
+  await page.getByRole("link", { name: "Immersive" }).click();
+  await page
+    .getByRole("button", { name: "Leave the immersive view" })
+    .click();
+  await expect(page.locator("dialog.immersive")).toHaveCount(0);
+  await expect(page).toHaveURL(/\/playing$/);
+});
+
+/**
+ * The sung line is held in view, and only the column moves to do it.
+ *
+ * `scrollIntoView` scrolls every scrollable ancestor it has, the window
+ * included, so each new sung line dragged the whole page back to the words —
+ * and somebody reading the saved positions underneath was hauled upwards every
+ * few seconds. The column scrolls itself now.
+ *
+ * The head is moved with the keyboard rather than by pressing a line, because
+ * Playwright scrolls an element into view before clicking it and that scroll
+ * would be the one under test. Twelve saved positions are there to make the
+ * page taller than the viewport: without something below the fold, "the window
+ * did not scroll" is true however the scrolling is done.
+ */
+test("holds the sung line in view without dragging the page", async ({
+  page,
+}) => {
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: "Rue Delacour",
+      displayTitle: "Nocturne",
+      lang: "eng",
+      synced: true,
+      line: Array.from({ length: 40 }, (_, index) => ({
+        start: index * 5_000,
+        value: `line number ${index}`,
+      })),
+    },
+  ]);
+  mock.bookmarks = Array.from({ length: 12 }, (_, index) => ({
+    position_ms: index * 1_000,
+    comment: null,
+    created_at: 1,
+    updated_at: 1,
+    song: {
+      id: `saved-${index}`,
+      title: `Somewhere to pick up ${index}`,
+      artist: "Rue Delacour",
+    },
+  }));
+
+  await page.goto("/playing?view=lyrics");
+  const column = page.locator(".lyrics-view ol");
+  await expect(column).toBeVisible();
+  // The list the screen renders under the track, drawn by a test at last.
+  await expect(page.locator(".bookmark-list li")).toHaveCount(12);
+  const scrollable = await page.evaluate(
+    () => document.documentElement.scrollHeight > window.innerHeight,
+  );
+  expect(scrollable).toBe(true);
+
+  // **Scrolled down to the saved positions first, which is the whole case.**
+  // With the column fully on screen there is nothing for an ancestor scroll to
+  // do, so the page stays put however the following is written — the complaint
+  // was about a reader who had scrolled away from the words and kept being
+  // hauled back to them.
+  await page.evaluate(() => window.scrollTo(0, 400));
+  const before = await page.evaluate(() => window.scrollY);
+  expect(before).toBeGreaterThan(0);
+
+  // Twenty presses of five seconds each: the player listens on the window, and
+  // a modal dialog is the only thing that would be in the way.
+  for (let press = 0; press < 20; press += 1) {
+    await page.keyboard.press("ArrowRight");
+  }
+
+  // The head moved, which is also the proof that a line's own press would
+  // seek: both go through `player.seek`, and the position is React state
+  // rather than something read back off an element that is playing nothing.
+  await expect(
+    page.getByRole("listitem").filter({ hasText: "line number 20" }),
+  ).toHaveAttribute("aria-current", "true");
+
+  // Smooth scrolling settles over frames, so the column is polled rather than
+  // read once.
+  await expect
+    .poll(() => column.evaluate((list) => list.scrollTop))
+    .toBeGreaterThan(0);
+  // And the page did not move under the reader.
+  expect(await page.evaluate(() => window.scrollY)).toBe(before);
+});
+
+test("credits LRCLIB for words the server looked up", async ({ page }) => {
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: "Björk",
+      displayTitle: "Army of Me",
+      lang: "xxx",
+      synced: true,
+      line: [
+        { start: 1_000, value: "If you complain once more" },
+        { start: 4_500, value: "You'll meet an army of me" },
+      ],
+      source: "lrclib",
+    },
+  ]);
+  await page.goto("/playing");
+  await expect(page.locator(".playing .lyrics")).toContainText(
+    "Lyrics from LRCLIB",
+  );
+  await page.getByRole("link", { name: "Lyrics", exact: true }).click();
+  await expect(page.locator(".lyrics-view")).toContainText(
+    "Lyrics from LRCLIB",
+  );
+  await expectNoWcagViolations(page);
+});
+
+test("credits nobody for words that travel with the file", async ({ page }) => {
+  mock.lyricSheets.set("song-1", [
+    {
+      displayArtist: "Björk",
+      displayTitle: "Army of Me",
+      lang: "eng",
+      synced: false,
+      line: [{ value: "If you complain once more" }],
+      source: "embedded",
+    },
+  ]);
+  await page.goto("/playing");
+  await expect(page.locator(".playing .lyrics")).toContainText(
+    "If you complain once more",
+  );
+  await expect(page.getByText("Lyrics from LRCLIB")).toHaveCount(0);
+});
diff --git a/webapp/e2e/maintenance.spec.ts b/webapp/e2e/maintenance.spec.ts
new file mode 100644
index 00000000..30d25186
--- /dev/null
+++ b/webapp/e2e/maintenance.spec.ts
@@ -0,0 +1,298 @@
+// The Maintenance hub and its sections, and the missing files (RFC-021).
+
+import { expect, test } from "@playwright/test";
+
+import {
+  chooseLightTheme,
+  expectNoWcagViolations,
+} from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { library, missingTrack, session } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * The sections of Maintenance, in the order its menu offers them, with the
+ * heading each opens on. The pages draw their heading whatever their lists
+ * answer, so these tests need none of the lists served.
+ */
+const MAINTENANCE_SECTIONS = [
+  { link: "Needs attention", path: "/maintenance/attention", heading: "Needs attention" },
+  { link: "Missing files", path: "/maintenance/missing", heading: "Missing files" },
+  { link: "Quality", path: "/maintenance/quality", heading: "Quality" },
+];
+
+/**
+ * "Needs attention", "Missing files" and "Quality" are one rail entry,
+ * Maintenance, and each is a section of it: opened from the rail on a
+ * desktop and from the More sheet on a phone, each at its own address,
+ * marked current in the menu, with Back walking between them.
+ */
+test("opens every section of Maintenance from its menu", async ({
+  page,
+}, testInfo) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  for (const name of ["Needs attention", "Missing files", "Quality"]) {
+    await expect(
+      page.locator(".sidebar, .mobile-navigation").getByRole("link", { name }),
+      name,
+    ).toHaveCount(0);
+  }
+  if (testInfo.project.name === "mobile") {
+    await page
+      .locator(".mobile-navigation")
+      .getByRole("button", { name: "More" })
+      .click();
+    await page
+      .getByRole("dialog")
+      .getByRole("link", { name: "Maintenance" })
+      .click();
+  } else {
+    await page
+      .locator(".sidebar")
+      .getByRole("link", { name: "Maintenance" })
+      .click();
+  }
+
+  // The entry opens the first section this owner may use.
+  await expect(page).toHaveURL(
+    (url) => url.pathname === "/maintenance/attention",
+  );
+  const menu = page.getByRole("navigation", { name: "Maintenance sections" });
+  await expect(menu.getByRole("link")).toHaveText(
+    MAINTENANCE_SECTIONS.map((section) => section.link),
+  );
+  if (testInfo.project.name === "desktop") {
+    // The rail's entry stays current in every section.
+    await expect(
+      page.locator(".sidebar a[data-status='active']"),
+    ).toHaveText(["Maintenance"]);
+  }
+
+  for (const section of [...MAINTENANCE_SECTIONS.slice(1), MAINTENANCE_SECTIONS[0]]) {
+    await menu.getByRole("link", { name: section.link, exact: true }).click();
+    await expect(page).toHaveURL((url) => url.pathname === section.path);
+    await expect(
+      page.getByRole("heading", { name: section.heading, exact: true }),
+    ).toBeVisible();
+    await expect(menu.locator('a[aria-current="page"]')).toHaveText([
+      section.link,
+    ]);
+  }
+  await expectNoWcagViolations(page);
+
+  // Back to the section opened before the last.
+  await page.goBack();
+  await expect(page).toHaveURL((url) => url.pathname === "/maintenance/quality");
+  await expect(
+    page.getByRole("heading", { name: "Quality", exact: true }),
+  ).toBeVisible();
+});
+
+/**
+ * The three old addresses arrive at their sections, with the open list or the
+ * verdict filter they carried, and the redirect replaces its own history
+ * entry.
+ */
+test("lands every old address on its section of Maintenance", async ({
+  page,
+}) => {
+  for (const [address, path, search, heading] of [
+    ["/attention?category=missing_year", "/maintenance/attention", "category=missing_year", "Needs attention"],
+    ["/missing", "/maintenance/missing", "", "Missing files"],
+    ["/quality?verdict=upsampled", "/maintenance/quality", "verdict=upsampled", "Quality"],
+  ]) {
+    await page.goto(address);
+    await expect(page).toHaveURL(
+      (url) => url.pathname === path && url.search === (search ? `?${search}` : ""),
+    );
+    await expect(
+      page.getByRole("heading", { name: heading, exact: true }),
+    ).toBeVisible();
+  }
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await page.goto("/quality");
+  await expect(page).toHaveURL((url) => url.pathname === "/maintenance/quality");
+  await page.goBack();
+  await expect(page).toHaveURL((url) => url.pathname === "/");
+});
+
+/**
+ * Each section keeps the rule its rail entry had. A listener who is not an
+ * administrator may only read the quality of the files, so that is the only
+ * section their menu shows and the one the entry opens.
+ */
+test("shows a listener only the Maintenance sections theirs to use", async ({
+  page,
+}) => {
+  await page.route("**/api/v2/web/auth/refresh", (route) =>
+    route.fulfill({
+      json: { ...session, user: { ...session.user, role: "user" } },
+    }),
+  );
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  await page.goto("/maintenance");
+  await expect(page).toHaveURL((url) => url.pathname === "/maintenance/quality");
+  await expect(
+    page.getByRole("heading", { name: "Quality", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page
+      .getByRole("navigation", { name: "Maintenance sections" })
+      .getByRole("link"),
+  ).toHaveText(["Quality"]);
+});
+
+/**
+ * An administrator who only listens in this library still purges what the
+ * scans lost (RFC-021), and does not decide what needs attention (RFC-015).
+ */
+test("shows an administrator listening in a library the missing files", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  await page.goto("/maintenance");
+  await expect(page).toHaveURL((url) => url.pathname === "/maintenance/missing");
+  await expect(
+    page
+      .getByRole("navigation", { name: "Maintenance sections" })
+      .getByRole("link"),
+  ).toHaveText(["Missing files", "Quality"]);
+});
+
+for (const section of MAINTENANCE_SECTIONS) {
+  test(`keeps the Maintenance menu readable in the light on ${section.link}`, async ({
+    page,
+  }) => {
+    await chooseLightTheme(page);
+    await page.goto(section.path);
+    await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
+    await expect(
+      page.getByRole("heading", { name: section.heading, exact: true }),
+    ).toBeVisible();
+    await expectNoWcagViolations(page);
+  });
+}
+
+/**
+ * "Missing files" (RFC-021 decision 4): what the scans can no longer find, what
+ * purging each would cost, and a purge that takes two clicks and only what was
+ * chosen. A purge is not reversible, so the first click only arms it.
+ */
+test("lists the missing files and purges only what was chosen", async ({
+  page,
+}) => {
+  mock.missingTracks = [missingTrack(1, "First light"), missingTrack(2, "Second wind")];
+  await page.goto("/missing");
+
+  await expect(
+    page.getByRole("heading", { name: "Missing files" }),
+  ).toBeVisible();
+  await expect(
+    page.getByText("2 files the scans can no longer find"),
+  ).toBeVisible();
+  await expect(page.getByText("Gone/2 Second wind.flac")).toBeVisible();
+  await expect(
+    page.getByText("2 in playlists · 1 favourites · 6 plays"),
+  ).toBeVisible();
+  await expectNoWcagViolations(page);
+
+  await page.getByRole("checkbox", { name: "Select First light" }).check();
+  const purge = page.getByRole("button", { name: "Purge the selected (1)" });
+  await purge.click();
+  // Armed, not sent.
+  await expect(
+    page.getByRole("button", { name: "Confirm: purge 1" }),
+  ).toBeVisible();
+  expect(mock.purgeAsks).toEqual([]);
+
+  await page.getByRole("button", { name: "Confirm: purge 1" }).click();
+  await expect(page.getByText("1 track purged.")).toBeVisible();
+  expect(mock.purgeAsks).toEqual([{ track_ids: ["missing-1"] }]);
+  // Out of the missing files, and into the purged ones it can come back from.
+  const listed = page.locator("ul.missing-list").first();
+  await expect(listed.getByText("Gone/1 First light.flac")).toHaveCount(0);
+  await expect(listed.getByText("Gone/2 Second wind.flac")).toBeVisible();
+  await expect(
+    page
+      .getByRole("region", { name: "Purged, still restorable (1)" })
+      .getByText("Gone/1 First light.flac"),
+  ).toBeVisible();
+});
+
+/** Purging is a curator's: a listener is told so and asks for nothing. */
+test("keeps the missing files from a listener", async ({ page }) => {
+  const asked: string[] = [];
+  page.on("request", (request) => {
+    const path = new URL(request.url()).pathname;
+    if (path.includes("/unavailable-tracks")) asked.push(path);
+  });
+  // A listener who is not an administrator either: the default session is
+  // one, and an administrator may see the page whatever their library role.
+  await page.route("**/api/v2/web/auth/refresh", (route) =>
+    route.fulfill({
+      json: { ...session, user: { ...session.user, role: "user" } },
+    }),
+  );
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  mock.missingTracks = [missingTrack(1, "First light")];
+  await page.goto("/missing");
+  await expect(
+    page.getByText(
+      "Only the owners and managers of this library, and administrators, see its missing files.",
+    ),
+  ).toBeVisible();
+  await expect(page.getByText("Gone/1 First light.flac")).toHaveCount(0);
+  expect(asked).toEqual([]);
+});
+
+/**
+ * The server grants the page to the instance's administrators whatever their
+ * role in the library (RFC-021 decision 4), so the client must not hide it
+ * from an administrator who only listens to it.
+ */
+test("shows the missing files to an administrator who only listens", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  mock.missingTracks = [missingTrack(1, "First light")];
+  await page.goto("/missing");
+  await expect(page.getByText("Gone/1 First light.flac")).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Purge them all" }),
+  ).toBeVisible();
+});
+
+/**
+ * A purge can be taken back while the server keeps it (RFC-021, undoing a
+ * purge): the purged track leaves the missing files for a list of its own,
+ * says until when it can come back, and restoring it puts it back.
+ */
+test("takes a purge back while the server still keeps it", async ({ page }) => {
+  mock.missingTracks = [missingTrack(1, "First light"), missingTrack(2, "Second wind")];
+  await page.goto("/missing");
+  await page.getByRole("checkbox", { name: "Select First light" }).check();
+  await page.getByRole("button", { name: "Purge the selected (1)" }).click();
+  await page.getByRole("button", { name: "Confirm: purge 1" }).click();
+  await expect(
+    page.getByText(/1 track purged\. It can be restored until/),
+  ).toBeVisible();
+  const held = page.getByRole("region", {
+    name: "Purged, still restorable (1)",
+  });
+  await expect(held.getByText("Gone/1 First light.flac")).toBeVisible();
+  await expect(held.getByText(/deleted for good after/)).toBeVisible();
+  await expectNoWcagViolations(page);
+
+  await held.getByRole("button", { name: "Restore First light" }).click();
+  await expect(page.getByText("1 track restored.")).toBeVisible();
+  expect(mock.restoreAsks).toEqual([{ track_ids: ["missing-1"] }]);
+  await expect(
+    page.getByRole("region", { name: /Purged, still restorable/ }),
+  ).toHaveCount(0);
+  await expect(page.getByText("Gone/1 First light.flac")).toBeVisible();
+});
diff --git a/webapp/e2e/mixes-and-statistics.spec.ts b/webapp/e2e/mixes-and-statistics.spec.ts
new file mode 100644
index 00000000..bfab646b
--- /dev/null
+++ b/webapp/e2e/mixes-and-statistics.spec.ts
@@ -0,0 +1,170 @@
+// The day's mixes on the home page, and this account's statistics.
+
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { dailyMixes } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+test("offers the day's mixes above the albums, and plays one", async ({
+  page,
+}) => {
+  mock.mixes = dailyMixes();
+  // Asked within the active library, like every other catalogue read.
+  const scopes: Array<string | null> = [];
+  page.on("request", (request) => {
+    const url = new URL(request.url());
+    if (url.pathname === "/api/v2/mixes") {
+      scopes.push(url.searchParams.get("library_id"));
+    }
+  });
+  await page.goto("/");
+  const shelf = page.locator(".mix-shelf");
+  await expect(
+    shelf.getByRole("heading", { name: "Mixes for you" }),
+  ).toBeVisible();
+  // Named by the client, in the listener's language, from what the server
+  // sent: a kind and its parameter, never a title.
+  await expect(shelf.getByRole("link")).toHaveText([
+    /Most played/,
+    /Art Pop mix/,
+    /The 1990s/,
+  ]);
+  // The albums below are what they were: the shelf takes no card from them.
+  await expect(page.locator(".grid li")).toHaveCount(2);
+  expect(scopes).toEqual(["library-1"]);
+
+  await shelf.getByRole("button", { name: "Play: Most played" }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  expect(mock.mixAsks).toEqual(["most-played"]);
+  await expectNoWcagViolations(page);
+
+  // A genre's name travels in the address whole, space and all.
+  await shelf.getByRole("link", { name: /Art Pop mix/ }).click();
+  await expect(page.getByRole("heading", { name: "Art Pop mix" })).toBeVisible();
+  await expect(page.getByText("2 tracks, drawn for today")).toBeVisible();
+  expect(mock.mixAsks).toEqual(["most-played", "genre:art pop"]);
+  await expectNoWcagViolations(page);
+
+  // Filtering the albums leaves the suggestion out of the way.
+  await page.goto("/");
+  await expect(shelf).toBeVisible();
+  await page.getByLabel("Filter by title or artist").fill("Post");
+  await expect(shelf).toHaveCount(0);
+});
+
+test("says so when a mix cannot be opened, and lets the press be tried again", async ({
+  page,
+}) => {
+  mock.mixes = dailyMixes();
+  mock.mixFails = true;
+  await page.goto("/");
+  const shelf = page.locator(".mix-shelf");
+  await shelf.getByRole("button", { name: "Play: Most played" }).click();
+  await expect(shelf.getByRole("alert")).toHaveText(
+    "“Most played” could not be opened. Try again.",
+  );
+  // Both actions say it, and neither stays disabled after the failure.
+  await shelf.getByRole("button", { name: "Add to queue: Art Pop mix" }).click();
+  await expect(shelf.getByRole("alert")).toHaveText(
+    "“Art Pop mix” could not be opened. Try again.",
+  );
+  await expectNoWcagViolations(page);
+
+  mock.mixFails = false;
+  await shelf.getByRole("button", { name: "Play: Most played" }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  await expect(shelf.getByRole("alert")).toHaveCount(0);
+});
+
+test("shows no shelf when the server has nothing to suggest", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await expect(page.locator(".grid li")).toHaveCount(2);
+  await expect(page.locator(".mix-shelf")).toHaveCount(0);
+});
+
+test("says a mix that is gone is gone, rather than drawing an empty one", async ({
+  page,
+}) => {
+  await page.goto("/mixes/never-played");
+  // The page's own alert. The player bar may raise one of its own about the
+  // restored queue, which the mocks cannot stream; that one is not this
+  // test's subject.
+  await expect(page.locator("main").getByRole("alert")).toContainText(
+    "We could not load this view",
+  );
+});
+
+test("shows this account's listening, period by period", async ({ page }) => {
+  await page.goto("/stats");
+  await expect(page.getByRole("heading", { name: "Statistics" })).toBeVisible();
+  const totals = page.locator(".stats-totals");
+  await expect(totals).toContainText("Listens");
+  await expect(totals).toContainText("Listening time");
+  // A bar per day of the default thirty, the empty ones included.
+  await expect(page.locator(".stats-timeline li")).toHaveCount(30);
+  await expect(
+    page.getByRole("listitem", { name: "2026-10-30: 4 listens" }),
+  ).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Top tracks" })).toBeVisible();
+  const columns = page.locator(".stats-columns");
+  await expect(
+    columns.getByRole("link", { name: "Björk", exact: true }),
+  ).toBeVisible();
+  await expect(columns.getByRole("link", { name: "Art Pop" })).toBeVisible();
+  await expect(columns.getByRole("link", { name: /Vespertine/ })).toBeVisible();
+  await expect(page.locator(".stats-moments")).toContainText("Cocoon, ");
+  // Every track, artist and album entry carries its cover (or the lettered
+  // placeholder when there is none); a genre has no artwork to show.
+  const entries = columns.locator(".stats-entry");
+  await expect(columns.locator(".stats-entry .stats-art")).toHaveCount(
+    (await entries.count()) - 1,
+  );
+  await expect(
+    columns
+      .getByRole("link", { name: "Björk", exact: true })
+      .locator(".stats-art-round"),
+  ).toHaveCount(1);
+  await expect(
+    columns.getByRole("link", { name: "Art Pop" }).locator(".stats-art"),
+  ).toHaveCount(0);
+  // A top track is a button, and a button holds phrasing content only: the
+  // lettered placeholder inside it must not be a `div`.
+  await expect(columns.locator("button .cover-fallback")).toHaveCount(2);
+  await expect(columns.locator("button div")).toHaveCount(0);
+  await expectNoWcagViolations(page);
+
+  await page.getByRole("combobox", { name: "Period" }).selectOption("7d");
+  await expect(page.locator(".stats-timeline li")).toHaveCount(7);
+  await page.getByRole("combobox", { name: "Period" }).selectOption("365d");
+  await expect(page.locator(".stats-timeline li")).toHaveCount(12);
+  await expect(
+    page.getByRole("heading", { name: "Listens per month" }),
+  ).toBeVisible();
+  expect(mock.statsAsks).toEqual(["30d", "7d", "365d"]);
+
+  // A top track plays from the list, with the others after it.
+  await columns.getByRole("button", { name: /Cocoon/ }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Cocoon");
+});
+
+test("keeps the statistics and the shelf readable in the light", async ({
+  page,
+}) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("waveflow.theme", "default");
+  });
+  mock.mixes = dailyMixes();
+  await page.goto("/");
+  await expect(page.locator(".mix-shelf")).toBeVisible();
+  await expectNoWcagViolations(page);
+  await page.goto("/stats");
+  await expect(page.locator(".stats-timeline li")).toHaveCount(30);
+  await expectNoWcagViolations(page);
+});
diff --git a/webapp/e2e/offline.spec.ts b/webapp/e2e/offline.spec.ts
new file mode 100644
index 00000000..1cb86b43
--- /dev/null
+++ b/webapp/e2e/offline.spec.ts
@@ -0,0 +1,186 @@
+// Tracks kept for offline listening, and what a sign-out does to them.
+
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+import { resetAndMockApi } from "./fixtures/api";
+import { session } from "./fixtures/catalogue";
+import { keepFirstSongOffline, keptPaths } from "./fixtures/offline";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * "Keep for offline" stores a track in this browser under its id, fetched
+ * once through a ticket whose address is not what is kept (RFC-022), and the
+ * offline page lists it and plays it from there with no server to ask.
+ */
+test("keeps a track for offline, by its id, and plays it from the offline page", async ({
+  page,
+}) => {
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({ json: [mock.correctable.song] }),
+  );
+  await page.route("**/api/v2/tracks/song-9/stream-ticket", (route) =>
+    route.fulfill({
+      json: { url: "/api/v2/stream/ticket-9", expires_at: Date.now() + 60_000 },
+    }),
+  );
+  await page.route("**/api/v2/stream/ticket-9", (route) =>
+    route.fulfill({
+      status: 200,
+      headers: { "content-type": "audio/flac" },
+      body: Buffer.from([0x66, 0x4c, 0x61, 0x43]),
+    }),
+  );
+  await page.goto("/songs");
+  await page
+    .locator(".songs tbody tr")
+    .first()
+    .locator("button.song-title")
+    .focus();
+  await page.keyboard.press("Shift+F10");
+  const menu = page.getByRole("menu", { name: "Actions for Army Of Me" });
+  await menu.getByRole("menuitem", { name: "Keep for offline" }).click();
+  const stored = () =>
+    page.evaluate(async () => {
+      const cache = await caches.open("waveflow-offline-v1:user-1");
+      return (await cache.keys())
+        .map((request) => new URL(request.url).pathname)
+        .sort();
+    });
+  await expect
+    .poll(stored)
+    .toEqual(["/offline/meta/song-9", "/offline/tracks/song-9"]);
+  expect((await stored()).some((path) => path.includes("ticket"))).toBe(false);
+
+  // The offline page asks the server for nothing.
+  const asked: string[] = [];
+  page.on("request", (request) => {
+    const path = new URL(request.url()).pathname;
+    if (path.startsWith("/api/")) asked.push(path);
+  });
+  await page.goto("/offline");
+  await expect(
+    page.getByRole("heading", { name: "Kept for offline" }),
+  ).toBeVisible();
+  await expect(page.getByRole("navigation")).toHaveCount(0);
+  await page.getByRole("button", { name: /^Army Of Me/ }).click();
+  await expect(page.getByLabel("Offline player")).toHaveAttribute(
+    "src",
+    /^(blob:|\/offline\/tracks\/song-9$)/,
+  );
+  expect(asked).toEqual([]);
+  const results = await new AxeBuilder({ page }).analyze();
+  expect(results.violations).toEqual([]);
+
+  await page
+    .getByRole("button", { name: "Remove the offline copy of Army Of Me" })
+    .click();
+  await expect(page.getByText("Nothing is kept yet.", { exact: false })).toBeVisible();
+  await expect.poll(stored).toEqual([]);
+});
+
+/**
+ * The kept tracks are one account's (RFC-022): a sign-out deletes them, so
+ * the offline page opened afterwards — with no session at all — lists and
+ * plays nothing of the account that left.
+ */
+test("a sign-out deletes the tracks kept for offline", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
+  await keepFirstSongOffline(page);
+  // Dispatched rather than clicked: the sidebar's footer sits under the
+  // fixed player bar at some viewports.
+  await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
+  await expect(page).toHaveURL(/\/login$/);
+  await expect.poll(() => keptPaths(page)).toEqual([]);
+
+  await page.route("**/api/v2/web/auth/refresh", (route) =>
+    route.fulfill({ status: 401, json: { code: "invalid_refresh_token" } }),
+  );
+  await page.goto("/offline");
+  await expect(page.getByText(/Nothing is kept yet/)).toBeVisible();
+  await expect(page.getByRole("button", { name: /^Army Of Me/ })).toHaveCount(0);
+  await expect(page.getByLabel("Offline player")).toHaveCount(0);
+});
+
+/**
+ * Another account signing in on the same browser is shown none of the last
+ * one's copies, and they are gone before it could ask for them.
+ */
+test("another account signing in sees none of the tracks kept offline", async ({
+  page,
+}) => {
+  await keepFirstSongOffline(page);
+  await page.route("**/api/v2/web/auth/refresh", (route) =>
+    route.fulfill({
+      json: {
+        ...session,
+        user: { id: "user-2", username: "guest", role: "user" },
+      },
+    }),
+  );
+  await page.goto("/songs");
+  await expect.poll(() => keptPaths(page)).toEqual([]);
+  await page.goto("/offline");
+  await expect(page.getByText(/Nothing is kept yet/)).toBeVisible();
+  await expect(page.getByRole("button", { name: /^Army Of Me/ })).toHaveCount(0);
+});
+
+/**
+ * The offline page plays a track by its id: forgetting a track listed above
+ * it neither switches what plays nor starts it over (review of #335).
+ */
+test("keeps playing the same kept track when another is forgotten", async ({
+  page,
+}) => {
+  await page.goto("/offline");
+  await page.evaluate(async () => {
+    await (await caches.open("waveflow-offline-owner")).put(
+      "/offline/owner",
+      new Response("user-1"),
+    );
+    const cache = await caches.open("waveflow-offline-v1:user-1");
+    for (const [id, title, at] of [
+      ["k1", "First kept", 2],
+      ["k2", "Second kept", 1],
+    ] as const) {
+      await cache.put(
+        `/offline/tracks/${id}`,
+        new Response(new Blob([new Uint8Array([1, 2, 3])]), {
+          headers: { "content-type": "audio/flac" },
+        }),
+      );
+      await cache.put(
+        `/offline/meta/${id}`,
+        new Response(
+          JSON.stringify({
+            id,
+            title,
+            artist: "Ada Reed",
+            album: null,
+            duration_ms: 1_000,
+            suffix: "flac",
+            kept_at: at,
+            bytes: 3,
+          }),
+        ),
+      );
+    }
+  });
+  await page.reload();
+  await page.getByRole("button", { name: /^Second kept/ }).click();
+  const player = page.getByLabel("Offline player");
+  await expect(player).toHaveAttribute("src", /^(blob:|\/offline\/)/);
+  const before = await player.getAttribute("src");
+  await page
+    .getByRole("button", { name: "Remove the offline copy of First kept" })
+    .click();
+  await expect(page.getByRole("button", { name: /^First kept/ })).toHaveCount(0);
+  await expect(
+    page.getByRole("listitem").filter({ hasText: "Second kept" }),
+  ).toHaveAttribute("aria-current", "true");
+  await expect(player).toHaveAttribute("src", before ?? "");
+});
diff --git a/webapp/e2e/player.spec.ts b/webapp/e2e/player.spec.ts
new file mode 100644
index 00000000..aa5dbf8d
--- /dev/null
+++ b/webapp/e2e/player.spec.ts
@@ -0,0 +1,719 @@
+// The player: its bar, the queue, ReplayGain and the audio element.
+
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { albums, track } from "./fixtures/catalogue";
+import { silentWav } from "./fixtures/media";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * The heard part of the line ends under the thumb, wherever the track is.
+ *
+ * The wave is placed in the progress grid's middle column. Named by its start
+ * alone, an absolutely placed item runs to the container's edge, so the wave
+ * was measured against the gap and the duration's column as well and outran
+ * the thumb further the later the track. Driven through `--played`, the value
+ * the player writes, so every position is reached without playing anything.
+ */
+test("ends the played wave under the progress thumb", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "the wave is drawn beside the rail");
+  await page.goto("/");
+  const progress = page.locator(".player-progress");
+  await expect(progress).toBeVisible();
+  const measured = await progress.evaluate((node: HTMLElement) => {
+    const wave = node.querySelector(".progress-wave") as HTMLElement;
+    const input = node.querySelector("input") as HTMLInputElement;
+    // The thumb's size as the stylesheet declares it, in rem — and the size it
+    // has always had where no token names it, so a stylesheet without one is
+    // judged on where its wave ends rather than on a missing variable.
+    const rem =
+      Number.parseFloat(
+        getComputedStyle(node).getPropertyValue("--fe-thumb"),
+      ) || 0.625;
+    const thumb =
+      rem *
+      Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+    // The range's own bounds. A mocked track may carry no duration, which
+    // leaves `max` at zero and every value clamped to it, so the range is
+    // given a span to move along when it has none.
+    const min = Number(input.min) || 0;
+    if (!(Number(input.max) > min)) input.max = String(min + 100);
+    const max = Number(input.max);
+    return [0, 0.25, 0.5, 0.81, 1].map((played) => {
+      // The range moved, and the share the player would write beside it.
+      input.value = String(min + played * (max - min));
+      node.style.setProperty("--played", String(played));
+      // Where the native thumb sits, read back from the range's value rather
+      // than from `--played`: the wave has to follow the thumb, not itself.
+      const fraction = (Number(input.value) - min) / (max - min);
+      const w = wave.getBoundingClientRect();
+      const i = input.getBoundingClientRect();
+      return {
+        played,
+        waveEnd: w.right,
+        thumbCentre: i.left + thumb / 2 + fraction * (i.width - thumb),
+        trackEnd: i.right,
+      };
+    });
+  });
+  for (const { played, waveEnd, thumbCentre, trackEnd } of measured) {
+    expect(Math.abs(waveEnd - thumbCentre), `at ${played}`).toBeLessThanOrEqual(1);
+    expect(waveEnd, `at ${played}`).toBeLessThanOrEqual(trackEnd);
+  }
+});
+
+/**
+ * The player bar's modes. `shuffledOrder`, `advance` and `retreat` are unit
+ * tested; this is the wiring — that the buttons reach them, and that repeat
+ * says which of its three states is on rather than only naming the action. A
+ * screen reader hearing "repeat" alone could not tell.
+ *
+ * No audio is served: the bar renders from the restored queue, which is enough
+ * to press its controls.
+ */
+test("carries shuffle and the three repeat states in the player bar", async ({
+  page,
+}, testInfo) => {
+  await page.goto("/");
+  const shuffle = page.getByRole("button", { name: "Shuffle" });
+
+  if (testInfo.project.name === "mobile") {
+    // Deliberate: a narrow bar keeps the transport and drops the modes. The
+    // layout that came before dropped previous and next instead and kept only
+    // play, which is the worse trade on a phone.
+    await expect(shuffle).toBeHidden();
+    await expect(page.getByRole("button", { name: "Repeat: off" })).toBeHidden();
+    await expect(page.getByRole("button", { name: "Next" })).toBeVisible();
+    return;
+  }
+
+  await expect(shuffle).toBeVisible();
+  await expect(shuffle).toHaveAttribute("aria-pressed", "false");
+  await shuffle.click();
+  await expect(shuffle).toHaveAttribute("aria-pressed", "true");
+  await shuffle.click();
+  await expect(shuffle).toHaveAttribute("aria-pressed", "false");
+
+  // Off → whole queue → this track → off.
+  const repeat = page.getByRole("button", { name: "Repeat: off" });
+  await repeat.click();
+  await expect(
+    page.getByRole("button", { name: "Repeat: the whole queue" }),
+  ).toBeVisible();
+  await page.getByRole("button", { name: "Repeat: the whole queue" }).click();
+  await expect(
+    page.getByRole("button", { name: "Repeat: this track" }),
+  ).toBeVisible();
+  await page.getByRole("button", { name: "Repeat: this track" }).click();
+  await expect(page.getByRole("button", { name: "Repeat: off" })).toBeVisible();
+
+  // The cover is the way back to the album that is playing.
+  await expect(
+    page.getByRole("link", { name: "Open the album: Vespertine" }),
+  ).toHaveAttribute("href", "/albums/album-2");
+});
+
+test("shows queue artwork beside tracks without crowding times or actions", async ({
+  page,
+}) => {
+  const songs = [
+    { ...track, artwork_hash: "queue-cover-1" },
+    {
+      ...track,
+      id: "song-2",
+      title: "A much longer title in the listening queue",
+      duration_ms: 92_000,
+      artwork_hash: "queue-cover-2",
+    },
+    {
+      ...track,
+      id: "song-3",
+      title: "Rising",
+      duration_ms: 236_000,
+      artwork_hash: "queue-cover-3",
+    },
+  ];
+  await page.route("**/api/v2/queue", async (route) => {
+    await route.fulfill({
+      json: {
+        current: "song-1",
+        position_ms: 0,
+        changed_by: null,
+        updated_at: 1,
+        songs,
+      },
+    });
+  });
+  const png = Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+    "base64",
+  );
+  await page.route("**/api/v2/artwork/*", async (route) => {
+    await route.fulfill({ contentType: "image/png", body: png });
+  });
+
+  await page.goto("/queue");
+  const rows = page.locator(".queue-list li");
+  await expect(rows).toHaveCount(3);
+  await rows.last().scrollIntoViewIfNeeded();
+  const covers = page.locator(".queue-list img.queue-cover");
+  await expect(covers).toHaveCount(3);
+  await expect
+    .poll(() =>
+      covers.evaluateAll((images) =>
+        images.every((image) => (image as HTMLImageElement).naturalWidth > 0),
+      ),
+    )
+    .toBe(true);
+  const timeEdges = await page.locator(".queue-duration").evaluateAll((times) =>
+    times.map((time) => Math.round(time.getBoundingClientRect().right)),
+  );
+  expect(new Set(timeEdges).size).toBe(1);
+
+  await page.setViewportSize({ width: 320, height: 700 });
+  const narrow = await rows.first().evaluate((row) => {
+    const [song, time, remove] = [...row.children].map((child) =>
+      child.getBoundingClientRect(),
+    );
+    return {
+      songRight: song?.right ?? 0,
+      timeLeft: time?.left ?? 0,
+      timeRight: time?.right ?? 0,
+      removeLeft: remove?.left ?? 0,
+      overflow: document.documentElement.scrollWidth - window.innerWidth,
+    };
+  });
+  expect(narrow.songRight).toBeLessThanOrEqual(narrow.timeLeft);
+  expect(narrow.timeRight).toBeLessThanOrEqual(narrow.removeLeft);
+  expect(narrow.overflow).toBeLessThanOrEqual(1);
+});
+
+/**
+ * The loop over the cover, rendered as the desktop renders it: muted, looping
+ * and hidden from assistive technology, with the cover underneath keeping its
+ * name. It steps aside when motion is reduced, and when the browser cannot play
+ * it — the cover shows then, never an empty frame.
+ */
+/** Saved positions use their song artwork and a shared time column. */
+test("shows saved tracks with artwork and one aligned time column", async ({
+  page,
+}) => {
+  mock.bookmarks = ["Soleil Bleu", "A much longer song title", "Rising"].map(
+    (title, index) => ({
+      position_ms: [224_000, 236_000, 92_000][index] as number,
+      comment: null,
+      created_at: 1,
+      updated_at: 1,
+      song: {
+        id: `saved-${index}`,
+        title,
+        artist: "Rue Delacour",
+        artwork_hash: `saved-cover-${index}`,
+      },
+    }),
+  );
+  const png = Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+    "base64",
+  );
+  await page.route("**/api/v2/artwork/*", async (route) => {
+    await route.fulfill({ contentType: "image/png", body: png });
+  });
+
+  await page.goto("/playing");
+  const rows = page.locator(".bookmark-list li");
+  await expect(rows).toHaveCount(3);
+  await rows.last().scrollIntoViewIfNeeded();
+  const covers = page.locator(".bookmark-list img.bookmark-cover");
+  await expect(covers).toHaveCount(3);
+  await expect
+    .poll(() =>
+      covers.evaluateAll((images) =>
+        images.every((image) => (image as HTMLImageElement).naturalWidth > 0),
+      ),
+    )
+    .toBe(true);
+  const timeEdges = await page.locator(".bookmark-position").evaluateAll(
+    (times) => times.map((time) => Math.round(time.getBoundingClientRect().right)),
+  );
+  expect(new Set(timeEdges).size).toBe(1);
+  await expect(page.locator(".playing-bookmarks")).toHaveCSS(
+    "background-color",
+    "rgba(0, 0, 0, 0)",
+  );
+  await page.setViewportSize({ width: 320, height: 700 });
+  const narrow = await rows.first().evaluate((row) => {
+    const [track, time, forget] = [...row.children].map((child) =>
+      child.getBoundingClientRect(),
+    );
+    return {
+      trackRight: track?.right ?? 0,
+      timeLeft: time?.left ?? 0,
+      timeRight: time?.right ?? 0,
+      forgetLeft: forget?.left ?? 0,
+      overflow: document.documentElement.scrollWidth - window.innerWidth,
+    };
+  });
+  expect(narrow.trackRight).toBeLessThanOrEqual(narrow.timeLeft);
+  expect(narrow.timeRight).toBeLessThanOrEqual(narrow.forgetLeft);
+  expect(narrow.overflow).toBeLessThanOrEqual(1);
+});
+
+/**
+ * Starring a track on the shuffle page does not redraw the shuffle.
+ *
+ * A mutation invalidates everything it could have made wrong, because a song
+ * appears in albums, genres, search, history, favourites, playlists and the
+ * queue. The draw is the exception: it is the one question deliberately kept
+ * out of the cache, so invalidating it asks the server for a *different*
+ * sample — and the list goes out from under the hand that starred it, taking
+ * the starred track with it.
+ */
+test("keeps the shuffle still when a track in it is favourited", async ({
+  page,
+}) => {
+  let drawn = 0;
+  await page.route("**/api/v2/songs/random*", async (route) => {
+    drawn += 1;
+    await route.fulfill({ json: [track] });
+  });
+  await page.route("**/api/v2/favorites/track/*", async (route) => {
+    await route.fulfill({ status: 204, body: "" });
+  });
+
+  await page.goto("/random");
+  await expect(page.getByText("Army of Me")).toBeVisible();
+  expect(drawn).toBe(1);
+
+  await page
+    .getByRole("button", { name: "Add favourite: Army of Me" })
+    .click();
+  // The button renames itself once the star is on, so the state is read from
+  // the label rather than from a locator that no longer matches.
+  await expect(
+    page.getByRole("button", { name: "Remove favourite: Army of Me" }),
+  ).toBeVisible();
+
+  // The same track, still there, and the server was not asked to draw again.
+  await expect(page.getByText("Army of Me")).toBeVisible();
+  expect(drawn).toBe(1);
+});
+
+/**
+ * The playing screen says what the file is.
+ *
+ * The facts, not the meter: the meter is five lit bars and `aria-hidden`,
+ * because the band it summarises is printed in words right beside it and a
+ * reader should hear that once rather than twice.
+ *
+ * Asserted on the rendered line rather than on the mock that fed it. The mock
+ * carries these fields because `Song` declares them, so it agrees with the
+ * declaration by construction — exactly the loop the lyrics test above was
+ * written against, where a `snake_case` envelope the server never sent was
+ * confirmed by a mock built from it. What the server really answers is
+ * pinned in `tests/native_api.rs`, against the bytes of a WAV.
+ */
+test("says what the file is on the playing screen", async ({ page }) => {
+  await page.goto("/playing");
+
+  const facts = page.locator(".file-facts");
+  await expect(facts).toBeVisible();
+  // Read as one string: the order is part of what makes it legible at a
+  // glance, and six separate assertions would pass on a line that listed
+  // them backwards.
+  await expect(facts).toHaveText(
+    "Lossless · FLAC · 957 kbps · 44.1 kHz · 16 bit · 2 ch · 28 MB",
+  );
+
+  // Four of five steps lit: lossless, and not the hi-res band above it.
+  await expect(page.locator(".quality-meter span.on")).toHaveCount(4);
+  // And hidden from assistive technology, so the band is announced once.
+  await expect(page.locator(".quality-meter")).toHaveAttribute(
+    "aria-hidden",
+    "true",
+  );
+});
+
+/**
+ * RFC-022 decision 1: ReplayGain is off until asked for, and asking for it is
+ * what builds the Web Audio graph — on the next play, never on page load.
+ *
+ * The browser's own `AudioContext` and `AudioParam` are wrapped to count
+ * contexts and record the gains set, because the level a track is played at
+ * cannot be heard by a test. What can be read is that no context exists while
+ * the setting is off, that exactly one exists once a play follows turning it
+ * on, and that the gain set is the one the tags and the preamp call for.
+ */
+test("levels a track by its ReplayGain only once asked to, and remembers how", async ({
+  page,
+}) => {
+  await page.addInitScript(() => {
+    const record = window as unknown as {
+      __contexts: number;
+      __gains: number[];
+    };
+    record.__contexts = 0;
+    record.__gains = [];
+    const setValueAtTime = AudioParam.prototype.setValueAtTime;
+    AudioParam.prototype.setValueAtTime = function (value, time) {
+      record.__gains.push(value);
+      return setValueAtTime.call(this, value, time);
+    };
+    const Original = window.AudioContext;
+    window.AudioContext = class extends Original {
+      constructor(options?: AudioContextOptions) {
+        super(options);
+        record.__contexts += 1;
+      }
+    };
+  });
+  const contexts = () =>
+    page.evaluate(() => (window as unknown as { __contexts: number }).__contexts);
+  const gains = () =>
+    page.evaluate(() => (window as unknown as { __gains: number[] }).__gains);
+
+  // Off by default: playing builds nothing.
+  await page.goto("/albums/album-2");
+  await page.getByRole("button", { name: "Play album" }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  expect(await contexts()).toBe(0);
+
+  await page.goto("/settings/playback");
+  const playback = page.locator(".settings-panel", {
+    has: page.getByRole("heading", { name: "Volume levelling" }),
+  });
+  // The preamp changes nothing while ReplayGain is off, so it is not offered.
+  await expect(playback.getByRole("slider", { name: "Preamp" })).toHaveCount(0);
+  await playback.getByLabel("ReplayGain").selectOption("album");
+  const preamp = playback.getByRole("slider", { name: "Preamp" });
+  await expect(preamp).toBeVisible();
+  await preamp.fill("3");
+  await expect(playback.locator("output")).toHaveText("+3 dB");
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("waveflow.replayGain")))
+    .toBe(JSON.stringify({ mode: "album", preampDb: 3 }));
+  await expectNoWcagViolations(page);
+  // Choosing it is not playing: still no graph.
+  expect(await contexts()).toBe(0);
+
+  // Remembered across a reload, and applied on the next play: the album gain
+  // of −8 dB plus the 3 dB preamp, well under what the 0.95 peak allows.
+  await page.goto("/albums/album-2");
+  await page.getByRole("button", { name: "Play album" }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  await expect.poll(contexts).toBe(1);
+  await expect
+    .poll(async () => (await gains()).at(-1))
+    .toBeCloseTo(10 ** (-5 / 20), 4);
+
+  // Track mode levels by the track's own gain: −7 dB for the first track.
+  await page.goto("/settings/playback");
+  await page.getByLabel("ReplayGain").selectOption("track");
+  await page.goto("/albums/album-2");
+  await page.getByRole("button", { name: "Play album" }).click();
+  await expect
+    .poll(async () => (await gains()).at(-1))
+    .toBeCloseTo(10 ** (-4 / 20), 4);
+});
+
+/**
+ * The two RFC-022 screens in the light appearance, whose contrast the dark
+ * default's sweep says nothing about: the playback settings with the preamp
+ * showing, and an artist page with every kind of section.
+ */
+test("keeps the playback settings and the discography readable in light", async ({
+  page,
+}) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("waveflow.theme", "default");
+    localStorage.setItem(
+      "waveflow.replayGain",
+      JSON.stringify({ mode: "track", preampDb: -2 }),
+    );
+  });
+  await page.goto("/settings/playback");
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
+  await expect(page.getByRole("slider", { name: "Preamp" })).toHaveValue("-2");
+  await expect(page.locator(".replay-gain-preamp output")).toHaveText("−2 dB");
+  await expectNoWcagViolations(page);
+
+  mock.artistExtra = {
+    albums: [
+      { ...albums[0], release_group: "album" },
+      { ...albums[1], id: "album-4", title: "Single Cut", release_group: "single" },
+      { ...albums[1], id: "album-5", title: "Best Of", release_group: "compilation" },
+    ],
+    appears_on: [{ ...albums[0], id: "album-9", title: "Guest Spot", artist: "Someone Else" }],
+  };
+  await page.goto("/artists/artist-1");
+  await expect(page.locator(".artist-discography h3")).toHaveText([
+    "Albums",
+    "Singles",
+    "Compilations",
+    "Appears on",
+  ]);
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * A context the browser will not let run never claims the element.
+ *
+ * Once `createMediaElementSource` has the element, its sound reaches the
+ * speakers only through the context, so a context left suspended would play
+ * the music as silence while the player said it was playing. Here the
+ * browser's context is replaced by one that stays suspended and whose resume
+ * never settles — what a browser does when it does not count the gesture —
+ * and the element must stay unclaimed, playing as it always did.
+ */
+test("leaves the element alone when the audio context will not run", async ({
+  page,
+}) => {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "waveflow.replayGain",
+      JSON.stringify({ mode: "album", preampDb: 0 }),
+    );
+    const record = window as unknown as { __contexts: number; __claims: number };
+    record.__contexts = 0;
+    record.__claims = 0;
+    const Original = window.AudioContext;
+    window.AudioContext = class extends Original {
+      constructor(options?: AudioContextOptions) {
+        super(options);
+        record.__contexts += 1;
+      }
+      override get state(): AudioContextState {
+        return "suspended";
+      }
+      override resume(): Promise<void> {
+        return new Promise(() => undefined);
+      }
+      override createMediaElementSource(element: HTMLMediaElement) {
+        record.__claims += 1;
+        return super.createMediaElementSource(element);
+      }
+    };
+  });
+  await page.goto("/albums/album-2");
+  await page.getByRole("button", { name: "Play album" }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  await expect
+    .poll(() =>
+      page.evaluate(() => (window as unknown as { __contexts: number }).__contexts),
+    )
+    .toBe(1);
+  // A second gesture asks the same candidate again rather than making another.
+  await page.locator(".album-songs .song-title").nth(1).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Cocoon");
+  const seen = await page.evaluate(() => {
+    const record = window as unknown as { __contexts: number; __claims: number };
+    return { contexts: record.__contexts, claims: record.__claims };
+  });
+  expect(seen).toEqual({ contexts: 1, claims: 0 });
+});
+
+/**
+ * Signing out closes every AudioContext the player opened.
+ *
+ * Signing out unmounts the player, and an open context holds the audio device
+ * until it is closed; a browser caps how many one page may have, so each
+ * sign-in would otherwise leave one more behind. Both kinds are covered: the
+ * graph a play built, and a candidate still waiting to run — the one a
+ * browser that does not count the gesture leaves pending for ever.
+ */
+for (const kind of ["running", "pending"] as const) {
+  test(`closes the ${kind} audio context when the listener signs out`, async ({
+    page,
+  }, testInfo) => {
+    test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
+    await page.addInitScript((pending) => {
+      localStorage.setItem(
+        "waveflow.replayGain",
+        JSON.stringify({ mode: "album", preampDb: 0 }),
+      );
+      const contexts: AudioContext[] = [];
+      (window as unknown as { __contexts: AudioContext[] }).__contexts =
+        contexts;
+      const Original = window.AudioContext;
+      window.AudioContext = pending
+        ? class extends Original {
+            constructor(options?: AudioContextOptions) {
+              super(options);
+              contexts.push(this);
+            }
+            // Stays suspended until closed, and never resumes.
+            override get state(): AudioContextState {
+              return super.state === "closed" ? "closed" : "suspended";
+            }
+            override resume(): Promise<void> {
+              return new Promise(() => undefined);
+            }
+          }
+        : class extends Original {
+            constructor(options?: AudioContextOptions) {
+              super(options);
+              contexts.push(this);
+            }
+          };
+    }, kind === "pending");
+    const states = () =>
+      page.evaluate(() =>
+        (window as unknown as { __contexts: AudioContext[] }).__contexts.map(
+          (context) => context.state,
+        ),
+      );
+
+    await page.goto("/albums/album-2");
+    await page.getByRole("button", { name: "Play album" }).click();
+    await expect(page.locator(".player-track strong")).toHaveText(
+      "Hidden Place",
+    );
+    await expect
+      .poll(states)
+      .toEqual([kind === "running" ? "running" : "suspended"]);
+
+    // Dispatched rather than clicked, as in the cache test: the sidebar's
+    // footer sits under the fixed player bar at this viewport.
+    await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
+    await expect(page).toHaveURL(/\/login$/);
+    await expect.poll(states).toEqual(["closed"]);
+  });
+}
+
+/**
+ * Signing out stops the music, whatever the ReplayGain mode.
+ *
+ * The cleanup that closes the audio contexts above also paused the element,
+ * but only on its way out of a graph: with ReplayGain off — the default, and
+ * so the common case — nothing paused it, and the music carried on over the
+ * sign-in page. The element is never in the document, so every one that was
+ * asked to play is recorded, and a real file is served so that it plays.
+ */
+test("stops the music when the listener signs out with ReplayGain off", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
+  await page.addInitScript(() => {
+    const played = new Set<HTMLMediaElement>();
+    (window as unknown as { __played: Set<HTMLMediaElement> }).__played =
+      played;
+    const play = HTMLMediaElement.prototype.play;
+    HTMLMediaElement.prototype.play = function () {
+      played.add(this);
+      return play.call(this);
+    };
+    const record = window as unknown as { __contexts: number };
+    record.__contexts = 0;
+    const Original = window.AudioContext;
+    window.AudioContext = class extends Original {
+      constructor(options?: AudioContextOptions) {
+        super(options);
+        record.__contexts += 1;
+      }
+    };
+  });
+  const audio = silentWav(60);
+  await page.route("**/api/v2/tracks/*/stream-ticket", (route) =>
+    route.fulfill({
+      json: { url: "/api/v2/stream/ticket-e2e", expires_at: Date.now() + 60_000 },
+    }),
+  );
+  await page.route("**/api/v2/stream/*", (route) =>
+    route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } }),
+  );
+  const playing = () =>
+    page.evaluate(() =>
+      [
+        ...(window as unknown as { __played: Set<HTMLMediaElement> }).__played,
+      ].filter((element) => !element.paused).length,
+    );
+
+  await page.goto("/albums/album-2");
+  await page.getByRole("button", { name: "Play album" }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  // Playing for real, and off the plain path: no graph was asked for.
+  await expect
+    .poll(() =>
+      page.evaluate(() =>
+        [
+          ...(window as unknown as { __played: Set<HTMLMediaElement> }).__played,
+        ].some((element) => !element.paused && element.currentTime > 0),
+      ),
+    )
+    .toBe(true);
+  expect(
+    await page.evaluate(
+      () => (window as unknown as { __contexts: number }).__contexts,
+    ),
+  ).toBe(0);
+
+  // Dispatched rather than clicked, as in the cache test: the sidebar's
+  // footer sits under the fixed player bar at this viewport.
+  await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
+  await expect(page).toHaveURL(/\/login$/);
+  await expect.poll(playing).toBe(0);
+});
+
+/**
+ * Signing out lets go of the next track too.
+ *
+ * The player loads the track after the current one into a second element so
+ * that skipping starts at once. That element never plays, but it holds its
+ * source and may still be fetching it, for an account that has just left. Every
+ * element that was asked to load is recorded, and none may keep a source once
+ * the listener is signed out.
+ */
+test("releases the next track's preload when the listener signs out", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
+  await page.addInitScript(() => {
+    const loaded = new Set<HTMLMediaElement>();
+    (window as unknown as { __loaded: Set<HTMLMediaElement> }).__loaded =
+      loaded;
+    const load = HTMLMediaElement.prototype.load;
+    HTMLMediaElement.prototype.load = function () {
+      loaded.add(this);
+      return load.call(this);
+    };
+  });
+  const audio = silentWav(60);
+  await page.route("**/api/v2/tracks/*/stream-ticket", (route) => {
+    const trackId = new URL(route.request().url()).pathname.split("/")[4];
+    return route.fulfill({
+      json: {
+        url: `/api/v2/stream/ticket-${trackId}`,
+        expires_at: Date.now() + 60_000,
+      },
+    });
+  });
+  await page.route("**/api/v2/stream/*", (route) =>
+    route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } }),
+  );
+  const sources = () =>
+    page.evaluate(() =>
+      [...(window as unknown as { __loaded: Set<HTMLMediaElement> }).__loaded]
+        .map((element) => element.getAttribute("src"))
+        .filter((source) => source !== null),
+    );
+
+  await page.goto("/albums/album-2");
+  await page.getByRole("button", { name: "Play album" }).click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  // The next track, Cocoon, is being preloaded beside the one playing. Named
+  // rather than counted: the playing element is asked to load too, and its
+  // own source alone would let the sign-out run before the preload exists.
+  await expect.poll(sources).toContain("/api/v2/stream/ticket-song-2");
+
+  // Dispatched rather than clicked, as in the cache test: the sidebar's
+  // footer sits under the fixed player bar at this viewport.
+  await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
+  await expect(page).toHaveURL(/\/login$/);
+  await expect.poll(sources).toEqual([]);
+});
diff --git a/webapp/e2e/playlists.spec.ts b/webapp/e2e/playlists.spec.ts
new file mode 100644
index 00000000..aeebf892
--- /dev/null
+++ b/webapp/e2e/playlists.spec.ts
@@ -0,0 +1,304 @@
+// Playlists: .m3u import and export, entries, another account's lists.
+
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { playlists, song } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * A playlist file arrives, and nothing is created until the losses are shown.
+ *
+ * The panel is two steps because the failure it exists to prevent is a quiet
+ * one: a file from another player names paths from another filesystem, so some
+ * entries will not be here, and an import that silently produced a shorter
+ * playlist would leave no way to know. So the first press only asks, and the
+ * report is on screen — by line, with a reason — before anything is written.
+ */
+test("previews an .m3u import, shows what it cannot place, then imports", async ({
+  page,
+}) => {
+  await page.goto("/playlists");
+  await expect(
+    page.getByRole("heading", { name: "Bring playlists from another player" }),
+  ).toBeVisible();
+
+  // The file is chosen, and only a dry run happens.
+  await page.getByLabel("Choose a playlist file").setInputFiles({
+    name: "Soirée.m3u",
+    mimeType: "audio/x-mpegurl",
+    buffer: Buffer.from("#EXTM3U\nA/01.flac\n"),
+  });
+  await expect(
+    page.getByText("3 of 5 entries are in your library."),
+  ).toBeVisible();
+  expect(mock.importAsks).toEqual([{ dryRun: true, name: "Soirée" }]);
+  // The name offered is the file's own, without its extension, and editable.
+  await expect(page.getByLabel("Playlist name", { exact: true })).toHaveValue("Soirée");
+
+  // Both losses are named, with their line and their reason.
+  await expect(page.getByText("2 entries cannot be placed:")).toBeVisible();
+  const losses = page.locator(".import-unresolved li");
+  await expect(losses).toHaveCount(2);
+  await expect(losses.first()).toContainText("Line 7");
+  await expect(losses.first()).toContainText("matches several tracks");
+  await expect(losses.nth(1)).toContainText("not a file in a library");
+  // And the encoding, because a file that was not UTF-8 may have mangled
+  // names and the reader should know which guess was made.
+  await expect(
+    page.getByText(
+      "The file was not UTF-8 and was read as windows-1252. Check the names below before importing.",
+    ),
+  ).toBeVisible();
+
+  await expectNoWcagViolations(page);
+
+  // Cancelling writes nothing, and asks nothing more.
+  await page.getByRole("button", { name: "Cancel" }).click();
+  await expect(page.getByLabel("Playlist name", { exact: true })).toHaveCount(0);
+  expect(mock.importAsks).toHaveLength(1);
+
+  // And the panel opens again after a cancel, on a fresh choice.
+  //
+  // **It does not pin the input being cleared between choices**, which is what
+  // lets a real user re-choose a file they have just fixed: `setInputFiles`
+  // fires a change event whether or not the file changed, so this harness
+  // cannot tell the two apart. Removing the reset leaves these assertions
+  // green — measured, not assumed.
+  await page.getByLabel("Choose a playlist file").setInputFiles({
+    name: "Soirée.m3u",
+    mimeType: "audio/x-mpegurl",
+    buffer: Buffer.from("#EXTM3U\nA/01.flac\n"),
+  });
+  await expect(page.getByLabel("Playlist name", { exact: true })).toBeVisible();
+  expect(mock.importAsks).toHaveLength(2);
+
+  // A name of the reader's choosing, then the commit.
+  await page.getByLabel("Playlist name", { exact: true }).fill("Evening from elsewhere");
+  await page.getByRole("button", { name: "Import", exact: true }).click();
+  await expect(page.getByLabel("Playlist name", { exact: true })).toHaveCount(0);
+  expect(mock.importAsks[2]).toEqual({
+    dryRun: false,
+    name: "Evening from elsewhere",
+  });
+});
+
+/**
+ * Saving a playlist as a file, which is the other half of arriving with one.
+ */
+test("saves a playlist as an .m3u8 the next player can read", async ({
+  page,
+}) => {
+  await page.goto("/playlists");
+  await expect(page.getByRole("heading", { name: "Evening" })).toBeVisible();
+
+  const download = page.waitForEvent("download");
+  await page.getByRole("button", { name: "Save as .m3u8" }).click();
+  const saved = await download;
+  // Named after the playlist, because a folder of "playlist.m3u8" is no use.
+  expect(saved.suggestedFilename()).toBe("Evening.m3u8");
+  expect(mock.exportAsks).toEqual(["/api/v2/playlists/playlist-1/export"]);
+});
+
+/**
+ * A playlist holds a position, not a set: the same track can be on it twice.
+ * Each row's rating is a radio group named after the row, and a name built
+ * from the track alone put both copies in one group — the browser keeps one
+ * checked radio per group, so the first copy showed no rating at all.
+ */
+test("shows the same track twice in a playlist, each with its rating", async ({
+  page,
+}) => {
+  // `?*`: the page asks for the public playlists of other accounts too
+  // (RFC-020), and a pattern without it matches no address with a query.
+  await page.route("**/api/v2/playlists?*", (route) =>
+    route.fulfill({
+      json: [
+        {
+          ...playlists[0],
+          songs: [
+            song(1, "Hidden Place", 5, true),
+            song(2, "Cocoon", 0, false),
+            song(1, "Hidden Place", 5, true),
+          ],
+        },
+      ],
+    }),
+  );
+  await page.goto("/playlists");
+  await expect(page.getByRole("heading", { name: "Evening" })).toBeVisible();
+
+  const copies = page.getByRole("group", { name: "Rating: Hidden Place" });
+  await expect(copies).toHaveCount(2);
+  await expect(
+    copies.first().getByRole("radio", { name: "5 stars" }),
+  ).toBeChecked();
+  await expect(
+    copies.last().getByRole("radio", { name: "5 stars" }),
+  ).toBeChecked();
+});
+
+/**
+ * Another account's public playlist is listed apart from this account's own,
+ * under its owner's name, and offers nothing that would change it: the server
+ * answers anyone but the owner 404 (RFC-020 decision 2).
+ */
+test("lists another account's public playlist apart, and read-only", async ({
+  page,
+}) => {
+  await page.route("**/api/v2/playlists?*", (route) =>
+    route.fulfill({
+      json: [
+        playlists[0],
+        {
+          ...playlists[0],
+          id: "playlist-2",
+          owner_id: "user-2",
+          owner_username: "guest",
+          name: "Guest picks",
+          public: true,
+        },
+      ],
+    }),
+  );
+  await page.goto("/playlists");
+  const others = page.getByRole("region", { name: "From other accounts" });
+  await expect(others.getByRole("heading", { name: "Guest picks" })).toBeVisible();
+  await expect(others.getByText("By guest")).toBeVisible();
+  await expect(others.getByRole("button", { name: "Delete" })).toHaveCount(0);
+  await expect(others.getByRole("checkbox")).toHaveCount(0);
+  // The account's own keeps every control, the publishing switch included.
+  await expect(
+    page.getByRole("checkbox", { name: "Visible to every account" }),
+  ).toHaveCount(1);
+});
+
+/**
+ * A playlist's owner moves an entry and removes one, each named by the
+ * position shown (RFC-020, what was still open): a move sends the track it
+ * believes is there, so a list changed elsewhere is refused rather than
+ * edited in the wrong place.
+ */
+test("moves and removes a playlist entry by the position it is shown at", async ({
+  page,
+}) => {
+  const asks: Array<[string, unknown]> = [];
+  const listed = {
+    ...playlists[0],
+    songs: [
+      song(1, "Hidden Place", 5, true),
+      song(2, "Cocoon", 0, false),
+      song(3, "Aurora", 0, false),
+    ],
+  };
+  await page.route("**/api/v2/playlists?*", (route) =>
+    route.fulfill({ json: [listed] }),
+  );
+  await page.route("**/api/v2/playlists/playlist-1/move", async (route) => {
+    asks.push(["move", route.request().postDataJSON()]);
+    await route.fulfill({ json: listed });
+  });
+  await page.route("**/api/v2/playlists/playlist-1/remove", async (route) => {
+    asks.push(["remove", route.request().postDataJSON()]);
+    await route.fulfill({ json: listed });
+  });
+  await page.route("**/api/v2/playlists/playlist-1", async (route) => {
+    asks.push([route.request().method(), route.request().postDataJSON()]);
+    await route.fulfill({ json: listed });
+  });
+  await page.goto("/playlists");
+  await expect(page.getByRole("heading", { name: "Evening" })).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Move Hidden Place up" }),
+  ).toBeDisabled();
+  await expect(
+    page.getByRole("button", { name: "Move Aurora down" }),
+  ).toBeDisabled();
+  await page.getByRole("button", { name: "Move Cocoon down" }).click();
+  await expect.poll(() => asks.length).toBe(1);
+  await page
+    .getByRole("button", { name: "Remove Aurora from this playlist" })
+    .click();
+  await expect.poll(() => asks.length).toBe(2);
+  expect(asks).toEqual([
+    ["move", { from: 1, to: 2, track_id: "song-2" }],
+    ["remove", { position: 2, track_id: "song-3" }],
+  ]);
+  await expectNoWcagViolations(page);
+});
+
+/** Another account's public playlist offers none of an owner's controls. */
+test("offers no move or removal on another account's playlist", async ({
+  page,
+}) => {
+  await page.route("**/api/v2/playlists?*", (route) =>
+    route.fulfill({
+      json: [
+        {
+          ...playlists[0],
+          id: "playlist-2",
+          owner_id: "user-2",
+          owner_username: "guest",
+          name: "Guest picks",
+          public: true,
+          songs: [song(1, "Hidden Place", 5, true), song(2, "Cocoon", 0, false)],
+        },
+      ],
+    }),
+  );
+  await page.goto("/playlists");
+  await expect(page.getByRole("heading", { name: "Guest picks" })).toBeVisible();
+  await expect(page.getByRole("button", { name: /^Move / })).toHaveCount(0);
+  await expect(
+    page.getByRole("button", { name: /from this playlist$/ }),
+  ).toHaveCount(0);
+});
+
+/**
+ * One entry edit at a time: the controls stay held until the edited list
+ * has been read again, so a second click cannot name positions in a list the
+ * first edit already changed (review of #335).
+ */
+test("holds a playlist's entry controls until the edited list is read again", async ({
+  page,
+}) => {
+  const listed = {
+    ...playlists[0],
+    songs: [
+      song(1, "Hidden Place", 5, true),
+      song(2, "Cocoon", 0, false),
+      song(3, "Aurora", 0, false),
+    ],
+  };
+  await page.route("**/api/v2/playlists?*", (route) =>
+    route.fulfill({ json: [listed] }),
+  );
+  let answer: () => void = () => undefined;
+  const held = new Promise<void>((resolve) => {
+    answer = resolve;
+  });
+  let moves = 0;
+  await page.route("**/api/v2/playlists/playlist-1/move", async (route) => {
+    moves += 1;
+    await held;
+    await route.fulfill({ json: listed });
+  });
+  await page.goto("/playlists");
+  await page.getByRole("button", { name: "Move Cocoon down" }).click();
+  await expect.poll(() => moves).toBe(1);
+  for (const name of [
+    "Move Cocoon up",
+    "Move Hidden Place down",
+    "Remove Aurora from this playlist",
+  ]) {
+    await expect(page.getByRole("button", { name })).toBeDisabled();
+  }
+  answer();
+  await expect(
+    page.getByRole("button", { name: "Move Cocoon up" }),
+  ).toBeEnabled();
+  expect(moves).toBe(1);
+});
diff --git a/webapp/e2e/quality.spec.ts b/webapp/e2e/quality.spec.ts
new file mode 100644
index 00000000..0e59c5bf
--- /dev/null
+++ b/webapp/e2e/quality.spec.ts
@@ -0,0 +1,221 @@
+// The quality page: what each file's audio says (RFC-016).
+
+import { expect, test } from "@playwright/test";
+
+import {
+  chooseLightTheme,
+  expectNoWcagViolations,
+} from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { library } from "./fixtures/catalogue";
+import { analysisAt, serveQuality } from "./fixtures/quality";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+test("lists a library's files by what their audio says, worst first", async ({
+  page,
+}) => {
+  const state = await serveQuality(page);
+  await page.goto("/quality");
+  await expect(page.getByRole("heading", { name: "Quality" })).toBeVisible();
+  await expect(page.getByText("2 of 3 lossless files analysed")).toBeVisible();
+
+  const verdicts = page.getByRole("list", { name: "Verdicts" });
+  await expect(
+    verdicts.getByRole("link", { name: /Probably from a lossy file/ }),
+  ).toContainText("1");
+  const rows = page.locator(".quality-table tbody tr");
+  await expect(rows).toHaveCount(2);
+  await expect(rows.first()).toContainText("Made From An MP3");
+  // The cover before the title: a name alone is hard to place.
+  await expect(rows.first().locator(".song-cover")).toHaveCount(1);
+  await expect(rows.first()).toContainText("16.4 kHz");
+  await expect(rows.first()).toContainText("Probably from a lossy file");
+  await expect(rows.nth(1)).toContainText("Full band");
+  await expect(rows.nth(1)).toContainText("No sign of a lossy source");
+  await expectNoWcagViolations(page);
+
+  // A verdict filters through the server, and is written in the address.
+  await verdicts
+    .getByRole("link", { name: /Probably from a lossy file/ })
+    .click();
+  await expect(page).toHaveURL(/verdict=lossy_source/);
+  await expect(rows).toHaveCount(1);
+  expect(
+    state.asked.some((search) => search.includes("verdict=lossy_source")),
+  ).toBe(true);
+
+  // A file opens on its real quality: the verdict, the numbers behind it, the
+  // spectrum it was judged on, and no spectrogram until somebody asks.
+  await page
+    .getByRole("button", { name: /^Made From An MP3/ })
+    .click();
+  const dialog = page.getByRole("dialog");
+  await expect(
+    dialog.getByRole("heading", { name: "Real quality" }),
+  ).toBeVisible();
+  await expect(
+    dialog.getByRole("img", {
+      name: "Averaged spectrum: the highs stop at 16.4 kHz.",
+    }),
+  ).toBeVisible();
+  expect(state.spectrograms).toBe(0);
+  await dialog.getByRole("button", { name: "Show the spectrogram" }).click();
+  await expect(
+    dialog.getByRole("img", { name: /Spectrogram of Made From An MP3/ }),
+  ).toBeVisible();
+  expect(state.spectrograms).toBe(1);
+  await expectNoWcagViolations(page);
+});
+
+test("asks for the whole library to be analysed again on the second click", async ({
+  page,
+}) => {
+  const state = await serveQuality(page);
+  await page.goto("/quality");
+  await page.getByRole("button", { name: "Analyse again" }).click();
+  expect(state.writes).toEqual([]);
+  await page
+    .getByRole("button", { name: "Confirm: analyse the whole library again" })
+    .click();
+  await expect(
+    page.getByText("The library will be analysed again in the background."),
+  ).toBeVisible();
+  expect(state.writes).toEqual(["POST"]);
+});
+
+test("shows a listener the quality, and nothing to ask for", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  await serveQuality(page);
+  await page.goto("/quality");
+  await expect(page.locator(".quality-table tbody tr")).toHaveCount(2);
+  await expect(
+    page.getByRole("button", { name: "Analyse again" }),
+  ).toHaveCount(0);
+});
+
+test("keeps the quality page readable in the light", async ({ page }) => {
+  await serveQuality(page);
+  await chooseLightTheme(page);
+  await page.goto("/quality");
+  await expect(page.locator(".quality-table tbody tr")).toHaveCount(2);
+  await expectNoWcagViolations(page);
+});
+
+test("shows the analysis moving, then at rest, and stops asking", async ({
+  page,
+}) => {
+  const state = await serveQuality(page);
+  const running = (measured: number) => ({
+    measured,
+    analysis: {
+      state: "running",
+      in_flight: 1,
+      pass_started_at: 1_700_000_000_000,
+      last_measured_at: 1_700_000_000_000,
+    },
+  });
+  state.analyses = [
+    running(1),
+    running(2),
+    {
+      measured: 3,
+      analysis: {
+        state: "idle",
+        in_flight: 0,
+        pass_started_at: null,
+        last_measured_at: 1_700_000_000_000,
+      },
+    },
+  ];
+  await page.goto("/quality");
+  const status = page.getByRole("status").filter({ hasText: /Analysing|Idle/ });
+  await expect(status).toHaveText(
+    "Analysing now: 1 of 3 done, 1 in progress.",
+  );
+  // The count moves under the reader while the pass runs.
+  await expect(status).toHaveText(
+    "Analysing now: 2 of 3 done, 1 in progress.",
+    { timeout: 10_000 },
+  );
+  await expect(status).toHaveText(/^Idle\. Last file analysed /, {
+    timeout: 10_000,
+  });
+  // At rest, nothing is asked again.
+  const asked = state.summaries;
+  await page.waitForTimeout(4_000);
+  expect(state.summaries).toBe(asked);
+  await expectNoWcagViolations(page);
+});
+
+test("says the analysis waits for the scan", async ({ page }) => {
+  const state = await serveQuality(page);
+  state.analyses = [
+    {
+      measured: 0,
+      analysis: {
+        state: "waiting_for_scan",
+        in_flight: 0,
+        pass_started_at: null,
+        last_measured_at: null,
+      },
+    },
+  ];
+  await page.goto("/quality");
+  await expect(
+    page.getByText("Waiting for the scan to finish before analysing."),
+  ).toBeVisible();
+});
+
+test("offers no new analysis while one runs", async ({ page }) => {
+  const state = await serveQuality(page);
+  state.analyses = [analysisAt(1, "running")];
+  await page.goto("/quality");
+  await expect(page.getByText(/^Analysing now:/)).toBeVisible();
+  // The server says a pass runs, so there is nothing to start: the offer
+  // comes from its answer, not from what this page remembers doing.
+  await expect(
+    page.getByRole("button", { name: "Analyse again" }),
+  ).toHaveCount(0);
+});
+
+test("asks for the header again when the list is filtered", async ({
+  page,
+}) => {
+  const state = await serveQuality(page);
+  state.analyses = [analysisAt(0, "idle"), analysisAt(2, "idle")];
+  await page.goto("/quality");
+  await expect(page.getByText("0 of 3 lossless files analysed")).toBeVisible();
+  await page
+    .getByRole("list", { name: "Verdicts" })
+    .getByRole("link", { name: /No sign of a lossy source/ })
+    .click();
+  // At rest the summary is not polled, so only the filter can have asked.
+  await expect(page.getByText("2 of 3 lossless files analysed")).toBeVisible();
+});
+
+test("asks for the header again on every visit", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name === "mobile", "walks the desktop sidebar");
+  const state = await serveQuality(page);
+  state.analyses = [analysisAt(0, "idle"), analysisAt(2, "idle")];
+  await page.goto("/quality");
+  await expect(page.getByText("0 of 3 lossless files analysed")).toBeVisible();
+  // Away and back inside the cache's thirty seconds: an answer held from the
+  // first visit would contradict the rows drawn on the second.
+  const sidebar = page.getByRole("navigation");
+  await sidebar.getByRole("link", { name: "Queue" }).click();
+  await expect(page.getByRole("heading", { name: "Queue" })).toBeVisible();
+  // The rail's entry opens the first section this owner may use, and the
+  // hub's menu the one this test is about.
+  await page.locator(".sidebar").getByRole("link", { name: "Maintenance" }).click();
+  await page
+    .getByRole("navigation", { name: "Maintenance sections" })
+    .getByRole("link", { name: "Quality" })
+    .click();
+  await expect(page.getByText("2 of 3 lossless files analysed")).toBeVisible();
+});
diff --git a/webapp/e2e/radio.spec.ts b/webapp/e2e/radio.spec.ts
new file mode 100644
index 00000000..8f8ad0fc
--- /dev/null
+++ b/webapp/e2e/radio.spec.ts
@@ -0,0 +1,483 @@
+// Radio: the list of stations, and a live station in the player bar.
+
+import { expect, test } from "@playwright/test";
+
+import {
+  chooseLightTheme,
+  expectNoWcagViolations,
+} from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { PIXEL, silentWav } from "./fixtures/media";
+import {
+  elements,
+  navigateWithin,
+  NOVA,
+  serveStationAndQueue,
+} from "./fixtures/radio";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * The radio page, which manages a list the catalogue knows nothing about.
+ *
+ * Worth its own test for one reason: a station is written and then read back,
+ * so every control here depends on the list the server holds rather than on
+ * what the page remembers. The harness keeps the list for that reason too — a
+ * mock answering a constant would let a delete that deletes nothing pass.
+ */
+test("keeps a list of radio stations, replacing rather than patching", async ({
+  page,
+}) => {
+  await page.goto("/radio");
+  await expect(
+    page.getByRole("heading", { name: "Radio", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByText("No stations yet. Add one to keep it here."),
+  ).toBeVisible();
+
+  // The form lives in a dialog the page's own button opens.
+  await page.getByRole("button", { name: "Add station" }).click();
+  const form = page.getByRole("dialog", { name: "Add a station" });
+  await form.getByLabel("Station name").fill("Radio Nova");
+  await form.getByLabel("Stream address").fill("https://nova.example.org/live");
+  await form.getByLabel("Station page (optional)").fill("https://nova.example.org/");
+  await form.getByRole("button", { name: "Save station" }).click();
+  await expect(form).toHaveCount(0);
+
+  const listed = page.locator(".station-grid li");
+  await expect(listed).toHaveCount(1);
+  await expect(listed.first()).toContainText("Radio Nova");
+  await expect(listed.first()).toContainText("https://nova.example.org/live");
+  await expect(
+    page.getByRole("link", { name: "Station page" }),
+  ).toHaveAttribute("href", "https://nova.example.org/");
+
+  // An address the server would refuse is refused here first, with a reason,
+  // and the button stays shut rather than sending a request to find out.
+  await page.getByRole("button", { name: "Add station" }).click();
+  await form.getByLabel("Station name").fill("Elsewhere");
+  await form.getByLabel("Stream address").fill("mms://elsewhere.example.org/s");
+  await expect(
+    form.getByText("An address must start with http:// or https://."),
+  ).toBeVisible();
+  await expect(
+    form.getByRole("button", { name: "Save station" }),
+  ).toBeDisabled();
+
+  await expectNoWcagViolations(page);
+  await form.getByRole("button", { name: "Cancel" }).click();
+  await expect(form).toHaveCount(0);
+
+  // Editing, from the card's menu, loads the station into the same form, and
+  // says what saving means: the page address is cleared because the form
+  // sends every field.
+  await listed.first().getByRole("button", { name: "Actions for Radio Nova" }).click();
+  await page.getByRole("menuitem", { name: "Edit" }).click();
+  const editor = page.getByRole("dialog", { name: "Edit “Radio Nova”" });
+  await expect(editor.getByLabel("Station name")).toHaveValue("Radio Nova");
+  await expect(editor.getByLabel("Station page (optional)")).toHaveValue(
+    "https://nova.example.org/",
+  );
+  await expect(
+    editor.getByText(
+      "Saving replaces every field, so an empty page address clears the stored one.",
+    ),
+  ).toBeVisible();
+  await editor.getByLabel("Station name").fill("Radio Nova Classics");
+  await editor.getByLabel("Station page (optional)").fill("");
+  await editor.getByRole("button", { name: "Save station" }).click();
+
+  await expect(listed.first()).toContainText("Radio Nova Classics");
+  // Cleared, which is the half a patch would have got wrong.
+  await expect(page.getByRole("link", { name: "Station page" })).toHaveCount(0);
+
+  // A delete is confirmed first, then goes.
+  page.once("dialog", (question) => void question.accept());
+  await listed
+    .first()
+    .getByRole("button", { name: "Actions for Radio Nova Classics" })
+    .click();
+  await page.getByRole("menuitem", { name: "Delete" }).click();
+  await expect(listed).toHaveCount(0);
+  await expect(
+    page.getByText("No stations yet. Add one to keep it here."),
+  ).toBeVisible();
+});
+
+/**
+ * The form is closed for the length of a write, and the station playing is
+ * not.
+ *
+ * **The held request below is what makes this test able to fail.** Every other
+ * mock in this file answers instantly, and against an instant answer a guarded
+ * form and an unguarded one look identical: the save is over before a second
+ * click or a second edit could begin. A request held open until this test lets
+ * it go leaves the window open for as long as the assertions need — where a
+ * fixed delay would be a race the slowest runner loses (constat de revue,
+ * pris; the two tests above it hold their requests the same way).
+ */
+test("closes the form while a station is saving, and leaves listening alone", async ({
+  page,
+}) => {
+  await page.goto("/radio");
+  const form = page.getByRole("dialog", { name: "Add a station" });
+  await page.getByRole("button", { name: "Add station" }).click();
+  await form.getByLabel("Station name").fill("Radio Nova");
+  await form.getByLabel("Stream address").fill("https://nova.example.org/live");
+  await form.getByRole("button", { name: "Save station" }).click();
+  await expect(page.locator(".station-grid li")).toHaveCount(1);
+  expect(mock.radioWrites).toEqual(["POST"]);
+
+  // Held from here on, so only the second save waits.
+  let release = () => {};
+  mock.radioGate = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+
+  await page.getByRole("button", { name: "Add station" }).click();
+  await form.getByLabel("Station name").fill("FIP");
+  await form.getByLabel("Stream address").fill("https://fip.example.org/live");
+  await form.getByRole("button", { name: "Save station" }).click();
+
+  // Shut for the whole round trip: the button cannot be pressed again, and the
+  // fields cannot be refilled under a save that is about to clear them.
+  //
+  // **Holding the request is what lets the first line below distinguish**, and
+  // it did not when the mock merely answered slowly: an empty form disables
+  // that button too, so the assertion retried until the save landed, cleared
+  // the fields and disabled the button for the other reason. Held open, the
+  // save cannot land, and removing the guard fails on this very line —
+  // measured both ways.
+  await expect(form.getByRole("button", { name: "Save station" })).toBeDisabled();
+  await expect(form.getByLabel("Station name")).toBeDisabled();
+  await expect(form.getByLabel("Stream address")).toBeDisabled();
+  await expect(form.getByRole("button", { name: "Cancel" })).toBeDisabled();
+  // And no edit or delete can begin, which is what made a save clear a form
+  // somebody else had just filled: the cards' menus are shut as well.
+  await expect(
+    page.locator(".station-grid li").first().locator(".action-menu-button"),
+  ).toBeDisabled();
+  // Listening is the deliberate exception: it writes nothing, and a reader
+  // waiting on a save has no reason to lose the station they are hearing.
+  await expect(
+    page.locator(".station-grid li").first().locator(".station-play"),
+  ).toBeEnabled();
+
+  // The second click of an impatient double-click, dispatched for real rather
+  // than waited for: `force` skips Playwright's own actionability check, so
+  // what refuses it is the browser declining to activate a disabled button.
+  // Without the guard this click sends a second POST and the account ends up
+  // with two identical stations from one gesture — which is what the count
+  // below would then show.
+  await form
+    .getByRole("button", { name: "Save station" })
+    .click({ force: true });
+
+  release();
+
+  await expect(page.locator(".station-grid li")).toHaveCount(2);
+  // One gesture, one station. Two POSTs in all, one per click.
+  expect(mock.radioWrites).toEqual(["POST", "POST"]);
+  // Closed once the save has landed, and empty when it is opened again.
+  await expect(form).toHaveCount(0);
+  await page.getByRole("button", { name: "Add station" }).click();
+  await expect(form.getByLabel("Station name")).toBeEnabled();
+  await expect(form.getByLabel("Station name")).toHaveValue("");
+});
+
+/**
+ * A station plays in the player bar, not on the radio page: the page used to
+ * own a private element and pause it on the way out, because it held the only
+ * stop button there was. Now the bar is that button, and the station carries
+ * on wherever the listener goes.
+ *
+ * **And it never goes through the ReplayGain graph.** A station is an address
+ * on another origin, and a cross-origin stream without CORS headers routed
+ * through a `MediaElementSource` plays as silence while the element reports
+ * it playing. ReplayGain is on here and a track has built the graph, so the
+ * graph exists and has claimed the queue's element; the station's must not be
+ * that element, nor be claimed by it.
+ */
+test("carries a live station in the bar across pages, off the ReplayGain graph", async ({
+  page,
+}) => {
+  await serveStationAndQueue(page);
+  await page.goto("/albums/album-2");
+  await page.getByRole("button", { name: "Play album" }).click();
+  const bar = page.locator(".player");
+  await expect(bar.locator(".player-track strong")).toHaveText("Hidden Place");
+  // The graph is built, and holds the queue's element.
+  await expect.poll(async () => (await elements(page)).queue?.claimed).toBe(true);
+
+  await navigateWithin(page, "Radio");
+  const station = page.locator(".station-grid li").filter({ hasText: "Radio Nova" });
+  await station.getByRole("button", { name: "Listen" }).click();
+
+  await expect(bar.locator(".player-track strong")).toHaveText("Radio Nova");
+  await expect(bar.locator(".live-badge")).toHaveText("Live");
+  await expect(station.getByRole("button", { name: "Stop" })).toBeVisible();
+  await expect
+    .poll(async () => (await elements(page)).station?.time ?? 0)
+    .toBeGreaterThan(0.2);
+  const playing = await elements(page);
+  expect(playing.station).toMatchObject({ paused: false, source: NOVA, claimed: false });
+  // Its own element: the queue's is paused under it, still the graph's, and
+  // still holding its track.
+  expect(playing.queue).toMatchObject({ paused: true, claimed: true });
+  expect(playing.claims).toBe(1);
+  // A station has nothing to seek in and nothing to go to next.
+  await expect(bar.getByRole("slider", { name: "Seek" })).toHaveCount(0);
+  await expect(bar.getByRole("button", { name: "Next track" })).toHaveCount(0);
+  await expect(bar.getByRole("button", { name: "Previous track" })).toHaveCount(0);
+  await expect(bar.getByRole("button", { name: "Shuffle" })).toHaveCount(0);
+  await expectNoWcagViolations(page);
+
+  // Away from the radio page, which used to stop it: still live, still heard.
+  await navigateWithin(page, "Albums");
+  await expect(page.locator(".grid li").first()).toBeVisible();
+  await expect(bar.locator(".player-track strong")).toHaveText("Radio Nova");
+  await expect(bar.locator(".live-badge")).toHaveText("Live");  const before = (await elements(page)).station?.time ?? 0;
+  await expect
+    .poll(async () => (await elements(page)).station?.time ?? 0)
+    .toBeGreaterThan(before);
+  expect((await elements(page)).station?.paused).toBe(false);
+
+  // The bar is the stop button now.
+  await bar.getByRole("button", { name: "Stop the station" }).click();
+  await expect.poll(async () => (await elements(page)).station?.paused).toBe(true);
+  await expect(bar.getByRole("button", { name: "Play" })).toBeVisible();
+  await expect(bar.locator(".player-track strong")).toHaveText("Radio Nova");
+});
+
+/**
+ * Starting a station pauses the music and keeps the queue; playing a track
+ * afterwards takes the speakers back. One audible source, always.
+ */
+test("pauses the queue under a station, keeps it, and gives it back to a track", async ({
+  page,
+}) => {
+  await serveStationAndQueue(page);
+  await page.goto("/albums/album-2");
+  await page.getByRole("button", { name: "Play album" }).click();
+  const bar = page.locator(".player");
+  await expect(bar.getByRole("button", { name: "Pause" })).toBeVisible();
+
+  await navigateWithin(page, "Radio");
+  await page.getByRole("button", { name: "Listen" }).click();
+  await expect(bar.locator(".live-badge")).toHaveText("Live");
+  await expect.poll(async () => (await elements(page)).station?.paused).toBe(false);
+  expect((await elements(page)).queue?.paused).toBe(true);
+
+  // Paused, not cleared: the queue is all there.
+  await navigateWithin(page, "Queue");
+  const rows = page.locator(".queue-list li");
+  await expect(rows).toHaveCount(3);
+  await expect(rows.first()).toHaveClass("active");
+  expect((await elements(page)).station?.paused).toBe(false);
+
+  // A track takes over from the station, in the bar and in the speakers.
+  await rows.filter({ hasText: "Cocoon" }).locator(".queue-track").click();
+  await expect(bar.locator(".player-track strong")).toHaveText("Cocoon");
+  await expect(bar.locator(".live-badge")).toHaveCount(0);
+  await expect.poll(async () => (await elements(page)).station?.paused).toBe(true);
+  await expect
+    .poll(async () => (await elements(page)).queue)
+    .toMatchObject({ paused: false, source: expect.stringContaining("ticket-song-2") });
+  // And the radio page no longer calls the station playing.
+  await navigateWithin(page, "Radio");
+  await expect(page.getByRole("button", { name: "Listen" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Stop" })).toHaveCount(0);
+});
+
+/**
+ * A station's image is an address the account types, sent with the station;
+ * the server fetches it once and answers a hash, and what the page shows is
+ * the artwork route's answer for that hash — never the image's own host,
+ * which RFC-019's `img-src` would refuse and which would see the listener.
+ */
+test("takes an image address for a station, and shows the image the server kept", async ({
+  page,
+}) => {
+  const asked: string[] = [];
+  page.on("request", (request) => {
+    if (new URL(request.url()).hostname === "logos.example.org") {
+      asked.push(request.url());
+    }
+  });
+  await page.route("**/api/v2/artwork/station-art-*", (route) =>
+    route.fulfill({ contentType: "image/png", body: PIXEL }),
+  );
+  await page.goto("/radio");
+  await page.getByRole("button", { name: "Add station" }).click();
+  const form = page.getByRole("dialog", { name: "Add a station" });
+  await form.getByLabel("Station name").fill("Radio Nova");
+  await form.getByLabel("Stream address").fill(NOVA);
+  // Refused here first, as the server would, and the button stays shut.
+  await form.getByLabel("Station image (optional)").fill("ftp://logos.example.org/n.png");
+  await expect(
+    form.getByText("An address must start with http:// or https://."),
+  ).toBeVisible();
+  await expect(form.getByRole("button", { name: "Save station" })).toBeDisabled();
+  await form
+    .getByLabel("Station image (optional)")
+    .fill("https://logos.example.org/nova.png");
+  await expect(
+    form.getByText("The server downloads it once, when you save", { exact: false }),
+  ).toBeVisible();
+  await form.getByRole("button", { name: "Save station" }).click();
+
+  const listed = page.locator(".station-grid li").filter({ hasText: "Radio Nova" });
+  await expect(listed.locator("img.station-cover")).toBeVisible();
+  expect(mock.stationImages).toEqual(["https://logos.example.org/nova.png"]);
+
+  // Edited, the form shows the address back and sends it again; cleared, it
+  // sends `null` and the station keeps the symbol.
+  await listed.getByRole("button", { name: "Actions for Radio Nova" }).click();
+  await page.getByRole("menuitem", { name: "Edit" }).click();
+  const editor = page.getByRole("dialog", { name: "Edit “Radio Nova”" });
+  await expect(editor.getByLabel("Station image (optional)")).toHaveValue(
+    "https://logos.example.org/nova.png",
+  );
+  await editor.getByLabel("Station image (optional)").fill("");
+  await editor.getByRole("button", { name: "Save station" }).click();
+  await expect(listed.locator(".station-cover.cover-fallback svg")).toBeVisible();
+  expect(mock.stationImages).toEqual(["https://logos.example.org/nova.png", null]);
+  await expectNoWcagViolations(page);
+  expect(asked, "the browser never asks the image's own host").toEqual([]);
+});
+
+for (const theme of ["dark", "light"] as const) {
+  test(`shows a station's image in the bar, and the symbol without one, in the ${theme}`, async ({
+    page,
+  }) => {
+    if (theme === "light") await chooseLightTheme(page);
+    await serveStationAndQueue(page);
+    mock.stations = [
+      { ...mock.stations[0], image_url: "https://logos.example.org/nova.png", artwork_hash: "station-art-nova" },
+      {
+        ...mock.stations[0],
+        id: "station-2",
+        name: "Radio Plain",
+      },
+    ];
+    let served = 0;
+    await page.route("**/api/v2/artwork/station-art-nova", (route) => {
+      served += 1;
+      return route.fulfill({ contentType: "image/png", body: PIXEL });
+    });
+    await page.goto("/radio");
+    const nova = page.locator(".station-grid li").filter({ hasText: "Radio Nova" });
+    await expect(nova.locator("img.station-cover")).toBeVisible();
+    await nova.getByRole("button", { name: "Listen" }).click();
+
+    const bar = page.locator(".player");
+    await expect(bar.locator(".player-track strong")).toHaveText("Radio Nova");
+    await expect(bar.locator("img.player-cover")).toBeVisible();
+    // The system's controls are given the same cover, by its object URL.
+    await expect
+      .poll(() =>
+        page.evaluate(
+          () => navigator.mediaSession?.metadata?.artwork?.[0]?.src ?? "",
+        ),
+      )
+      .toMatch(/^blob:/);
+    expect(served).toBe(1);
+    await expectNoWcagViolations(page);
+
+    // A station without an image keeps the radio symbol.
+    const plain = page.locator(".station-grid li").filter({ hasText: "Radio Plain" });
+    await plain.getByRole("button", { name: "Listen" }).click();
+    await expect(bar.locator(".player-track strong")).toHaveText("Radio Plain");
+    await expect(bar.locator(".player-cover.cover-fallback svg")).toBeVisible();
+    await expect(bar.locator("img.player-cover")).toHaveCount(0);
+    await expect
+      .poll(() =>
+        page.evaluate(() => navigator.mediaSession?.metadata?.artwork?.length ?? 0),
+      )
+      .toBe(0);
+  });
+}
+
+test("keeps a live station readable in the light, and closes back to the queue", async ({
+  page,
+}) => {
+  await chooseLightTheme(page);
+  await serveStationAndQueue(page);
+  await page.goto("/radio");
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
+  await page.getByRole("button", { name: "Listen" }).click();
+  const bar = page.locator(".player");
+  await expect(bar.locator(".live-badge")).toHaveText("Live");
+  await expect.poll(async () => (await elements(page)).station?.paused).toBe(false);
+  await expectNoWcagViolations(page);
+  await bar.getByRole("button", { name: "Stop and close" }).click();
+  await expect.poll(async () => (await elements(page)).station?.paused).toBe(true);
+  // The saved queue's track, still where the listener left it.
+  await expect(bar.locator(".player-track strong")).toHaveText("Hidden Place");
+  await expect(bar.getByRole("button", { name: "Play" })).toBeVisible();
+});
+
+/**
+ * A station that failed can be tried again, from its page or from the bar.
+ *
+ * A source that fails leaves the element's `paused` at false — the failure
+ * steps reject the play, they do not pause — so a player that took `paused`
+ * for the truth thought the failed station was playing: Listen did nothing,
+ * and the bar's play button stopped it instead of starting it. The station
+ * answers 404 once, then plays.
+ */
+for (const from of ["page", "bar"] as const) {
+  test(`tries a failed station again from the ${from}`, async ({ page }) => {
+    await serveStationAndQueue(page);
+    let asked = 0;
+    const audio = silentWav(60);
+    await page.route(`${NOVA}**`, (route) => {
+      asked += 1;
+      return asked === 1
+        ? route.fulfill({ status: 404, body: "" })
+        : route.fulfill({ body: audio, headers: { "content-type": "audio/wav" } });
+    });
+    await page.goto("/radio");
+    await page.getByRole("button", { name: "Listen" }).click();
+    await expect(
+      page.getByText("That station could not be played.", { exact: false }),
+    ).toBeVisible();
+    const bar = page.locator(".player");
+    await expect(bar.getByRole("alert")).toHaveText("This station could not be played.");
+    expect(asked).toBe(1);
+
+    if (from === "page") {
+      await page.getByRole("button", { name: "Listen" }).click();
+    } else {
+      await bar.getByRole("button", { name: "Play" }).click();
+    }
+    await expect.poll(() => asked).toBe(2);
+    await expect
+      .poll(async () => (await elements(page)).station?.time ?? 0)
+      .toBeGreaterThan(0.2);
+    expect((await elements(page)).station?.paused).toBe(false);
+    await expect(bar.getByRole("alert")).toHaveCount(0);
+    await expect(bar.getByRole("button", { name: "Stop the station" })).toBeVisible();
+  });
+}
+
+/**
+ * Signing out stops a station too, as it stops the music (#329, #330): the
+ * station's element is the player's, and the player goes with the session.
+ */
+test("stops a live station when the listener signs out", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "signs out from the sidebar");
+  await serveStationAndQueue(page);
+  await page.goto("/radio");
+  await page.getByRole("button", { name: "Listen" }).click();
+  await expect.poll(async () => (await elements(page)).station?.paused).toBe(false);
+  // Dispatched rather than clicked, as in the cache test: the sidebar's
+  // footer sits under the fixed player bar at this viewport.
+  await page.getByRole("button", { name: "Sign out" }).dispatchEvent("click");
+  await expect(page).toHaveURL(/\/login$/);
+  await expect.poll(async () => (await elements(page)).station?.paused).toBe(true);
+});
diff --git a/webapp/e2e/scrobbling.spec.ts b/webapp/e2e/scrobbling.spec.ts
new file mode 100644
index 00000000..086f1783
--- /dev/null
+++ b/webapp/e2e/scrobbling.spec.ts
@@ -0,0 +1,255 @@
+// External scrobbling (RFC-010): instances, links and ambiguous listens.
+
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { linkState } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * External scrobbling — RFC-010, the four gestures a client owes.
+ *
+ * The path is the server's: `lastfm_callback` redirects to
+ * `/settings/scrobbling`, so a page anywhere else leaves the last step of the
+ * journey on the not-found screen.
+ */
+test("offers each instance by name, and says why one cannot be linked", async ({
+  page,
+}) => {
+  await page.goto("/settings/scrobbling");
+
+  await expect(
+    page.getByRole("heading", { name: "External scrobbling" }),
+  ).toBeVisible();
+  // Two instances of one recipient, each named. A screen keyed on the
+  // recipient would show "Maloja" once and hide whichever it linked second.
+  await expect(page.getByText('Maloja — instance “alice”')).toBeVisible();
+  await expect(page.getByText('Maloja — instance “bob”')).toBeVisible();
+  await expect(
+    page.getByText('ListenBrainz — instance “default”'),
+  ).toBeVisible();
+
+  // Declared and unusable is a real shape, and the reason is published so the
+  // person is not left to discover it when a link fails later. Asserted on the
+  // words this client chose for `NO_PUBLIC_URL`, not on the code it was given:
+  // a case printed raw would satisfy any assertion made on the code itself.
+  await expect(
+    page.getByText(
+      "Unavailable here: the browser journey needs this server’s public " +
+        "address to be an https one — an operator can still link an account " +
+        "from the command line",
+    ),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Connect to Last.fm" }),
+  ).toHaveCount(0);
+
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * A server newer than the client reading it.
+ *
+ * `unavailable` carries a case rather than a sentence, so this client has a
+ * table of words for the cases it knows — and a case it does not know must not
+ * become a blank where a reason should be. The type is open for the same
+ * reason: a union naming only today's cases would be an assertion about the
+ * wire that the wire never made, which is the fault this whole change set
+ * exists to remove.
+ */
+test("says a reason it does not recognise is a reason, not a blank", async ({
+  page,
+}) => {
+  const lastfm = mock.destinations.find((row) => row.provider === "lastfm");
+  if (lastfm) lastfm.unavailable = "a_case_from_a_later_release";
+
+  await page.goto("/settings/scrobbling");
+
+  await expect(
+    page.getByText("Unavailable here: this server did not say why"),
+  ).toBeVisible();
+});
+
+/**
+ * `toString` is not a translation key.
+ *
+ * Opening the union widened the lookup key to `string`, and a plain object
+ * answers for names nobody put in it: `toString` and `constructor` come back
+ * off the prototype, truthy, and would reach `t()` as if they were keys. Every
+ * inherited name is a case this client does not know, and must read as one.
+ */
+for (const inherited of ["toString", "constructor", "hasOwnProperty"]) {
+  test(`treats the inherited name ${inherited} as a case it does not know`, async ({
+    page,
+  }) => {
+    const lastfm = mock.destinations.find((row) => row.provider === "lastfm");
+    if (lastfm) lastfm.unavailable = inherited;
+
+    await page.goto("/settings/scrobbling");
+
+    await expect(
+      page.getByText("Unavailable here: this server did not say why"),
+    ).toBeVisible();
+  });
+}
+
+test("links one instance by its key, and leaves the other alone", async ({
+  page,
+}) => {
+  await page.goto("/settings/scrobbling");
+  await expect(page.getByText('Maloja — instance “alice”')).toBeVisible();
+
+  await page
+    .getByLabel('API key: Maloja — instance “alice”')
+    .fill("alice-api-key");
+  await page
+    .locator(".scrobble-row", { hasText: "alice" })
+    .getByRole("button", { name: "Link" })
+    .click();
+
+  await expect(
+    page.getByRole("button", { name: 'Unlink: Maloja — instance “alice”' }),
+  ).toBeVisible();
+  expect(mock.scrobbleWrites).toEqual([
+    {
+      method: "PUT",
+      path: "/api/v2/scrobble-links/maloja/alice",
+      body: { secret: "alice-api-key" },
+    },
+  ]);
+  // The pair names the resource: bob is untouched and still offers its field.
+  await expect(
+    page.getByLabel('API key: Maloja — instance “bob”'),
+  ).toBeVisible();
+
+  // The queue behind the link is a state and four counters, never an echo of
+  // what was heard.
+  await expect(page.getByText("The queue is not moving")).toBeVisible();
+  await expect(page.getByText("12 waiting")).toBeVisible();
+  await expect(page.getByText("1 waiting on you")).toBeVisible();
+  await expect(
+    page.getByText("Last refusal: the destination asked for room."),
+  ).toBeVisible();
+});
+
+test("sends the browser to Last.fm rather than asking for a key", async ({
+  page,
+}) => {
+  // Last.fm hands out no secret a person can hold, so the only gesture is a
+  // journey. Declared *and* usable here, unlike the listing test.
+  mock.destinations = [
+    { provider: "lastfm" as const, destination: "default", available: true },
+  ];
+  await page.route("https://www.last.fm/**", (route) =>
+    route.fulfill({ status: 200, body: "<title>last.fm</title>" }),
+  );
+
+  await page.goto("/settings/scrobbling");
+  await page.getByRole("button", { name: "Connect to Last.fm" }).click();
+
+  await page.waitForURL("https://www.last.fm/**");
+  expect(mock.scrobbleWrites).toEqual([
+    {
+      method: "POST",
+      path: "/api/v2/scrobble-links/lastfm/authorize/default",
+      body: undefined,
+    },
+  ]);
+});
+
+test("says so when the journey comes back, and names the instance", async ({
+  page,
+}) => {
+  // What the callback redirects to once it has finished the link itself. The
+  // value is shown and nothing more: anybody can type this address, and the
+  // listing beside it is what actually says a link exists.
+  await page.goto(
+    "/settings/scrobbling?linked=lastfm&destination=default&keep=me",
+  );
+
+  await expect(page.getByText("Last.fm is linked: default.")).toBeVisible();
+
+  // Said once, then spent. A reload is a later navigation and not this one, so
+  // the pair leaves the address while the notice stays on the page — and a URL
+  // copied out of the bar no longer tells somebody else their Last.fm is
+  // linked. Anything else in the query is left where it was.
+  await expect(page).toHaveURL(/\/settings\/scrobbling\?keep=me$/);
+  await page.reload();
+  await expect(page.getByText("Last.fm is linked: default.")).toHaveCount(0);
+});
+
+test("names the track behind an ambiguous listen, and answers it once", async ({
+  page,
+}) => {
+  mock.scrobbleLinks = [linkState("maloja", "alice")];
+  await page.goto("/settings/scrobbling");
+
+  const entry = page.locator(".scrobble-uncertain li");
+  // The entry carries no title — decision 12 keeps the envelope out of the API
+  // — so the screen matches `played_at` against the account's own history,
+  // which is what that field is documented to be for. A bare timestamp would
+  // ask somebody to decide about a listen they cannot recognise.
+  await expect(entry.getByText("Track t5")).toBeVisible();
+  await expect(entry.getByText(/instance “alice”/)).toBeVisible();
+  await expect(entry.getByText(/the answer never arrived/)).toBeVisible();
+
+  await entry.getByRole("button", { name: "Send it again" }).click();
+
+  await expect(page.getByText("Nothing is waiting on you.")).toBeVisible();
+  expect(mock.scrobbleWrites).toEqual([
+    { method: "POST", path: "/api/v2/scrobble-queue/uncertain/entry-1/retry" },
+  ]);
+});
+
+test("throws an ambiguous listen away when that is the answer", async ({
+  page,
+}) => {
+  mock.scrobbleLinks = [linkState("maloja", "alice")];
+  await page.goto("/settings/scrobbling");
+
+  const entry = page.locator(".scrobble-uncertain li");
+  await expect(entry.getByText("Track t5")).toBeVisible();
+  await entry.getByRole("button", { name: "Throw it away" }).click();
+
+  await expect(page.getByText("Nothing is waiting on you.")).toBeVisible();
+  expect(mock.scrobbleWrites).toEqual([
+    { method: "DELETE", path: "/api/v2/scrobble-queue/uncertain/entry-1" },
+  ]);
+});
+
+test("unlinks one instance and leaves a namesake at another recipient", async ({
+  page,
+}) => {
+  // `default` is the name every recipient uses, so the pair is the only thing
+  // that tells these two apart. A screen — or a mock — matching on the
+  // instance name alone withdraws both, which is the fault the unique index
+  // on `(user_id, provider, destination)` was rebuilt to make impossible.
+  mock.destinations = [
+    { provider: "listenbrainz" as const, destination: "default", available: true },
+    { provider: "maloja" as const, destination: "default", available: true },
+  ];
+  mock.scrobbleLinks = [
+    linkState("listenbrainz", "default"),
+    linkState("maloja", "default"),
+  ];
+
+  await page.goto("/settings/scrobbling");
+  await page
+    .getByRole("button", {
+      name: 'Unlink: ListenBrainz — instance “default”',
+    })
+    .click();
+
+  await expect(
+    page.getByRole("button", { name: 'Unlink: Maloja — instance “default”' }),
+  ).toBeVisible();
+  await expect(
+    page.getByLabel('API key: ListenBrainz — instance “default”'),
+  ).toBeVisible();
+  expect(mock.scrobbleWrites).toEqual([
+    { method: "DELETE", path: "/api/v2/scrobble-links/listenbrainz/default" },
+  ]);
+});
diff --git a/webapp/e2e/settings.spec.ts b/webapp/e2e/settings.spec.ts
new file mode 100644
index 00000000..ce70bd43
--- /dev/null
+++ b/webapp/e2e/settings.spec.ts
@@ -0,0 +1,458 @@
+// The Settings hub, its sections, the account's clients and Subsonic password.
+
+import { expect, test } from "@playwright/test";
+
+import {
+  chooseLightTheme,
+  expectNoWcagViolations,
+} from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { library, session } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * The sections of Settings, in the order the menu offers them, with the
+ * heading each one opens on. Shared by the tests below, which walk the whole
+ * menu: a section added to the hub and not here fails them by count.
+ */
+const SETTINGS_SECTIONS = [
+  { link: "Account", path: "/settings", heading: "Account" },
+  { link: "Playback", path: "/settings/playback", heading: "Playback" },
+  {
+    link: "Scrobbling",
+    path: "/settings/scrobbling",
+    heading: "External scrobbling",
+  },
+  { link: "Shares", path: "/settings/shares", heading: "Shares" },
+  { link: "Upload", path: "/settings/upload", heading: "Upload to Ma musique" },
+  { link: "Admin", path: "/settings/admin", heading: "Administration" },
+];
+
+/**
+ * The rail carried an "Account" group of five entries — Shares, Settings,
+ * Scrobbling, Upload and Admin. One Settings entry replaces it, in the rail's
+ * foot beside the account, and the five are the Settings page's sections.
+ *
+ * Asked of the longest rail any account sees: an administrator owning a
+ * library that takes files, for whom every one of the five used to show.
+ */
+test("gathers the account's places behind one Settings entry", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "the rail is desktop-only");
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  const sidebar = page.locator(".sidebar");
+  // Drawn in full before anything is counted: the Maintenance entry is gated
+  // on what the account may do in the library, and a count taken before it
+  // arrives proves nothing.
+  await expect(sidebar.locator('a[href="/maintenance"]')).toHaveCount(1);
+
+  await expect(sidebar.locator('.nav-group[data-group="account"]')).toHaveCount(0);
+  await expect(sidebar.locator(".nav-label")).toHaveText(["Library", "Listening"]);
+  const settings = sidebar.getByRole("link", { name: "Settings" });
+  await expect(settings).toHaveCount(1);
+  await expect(page.locator(".sidebar-footer").getByRole("link")).toHaveText([
+    "Settings",
+  ]);
+  for (const href of [
+    "/shares",
+    "/upload",
+    "/admin",
+    "/settings/scrobbling",
+    "/settings/shares",
+    "/settings/upload",
+    "/settings/admin",
+  ]) {
+    await expect(sidebar.locator(`a[href="${href}"]`), href).toHaveCount(0);
+  }
+
+  await settings.click();
+  await expect(page).toHaveURL(/\/settings$/);
+  await expect(
+    page.getByRole("heading", { name: "Account", exact: true }),
+  ).toBeVisible();
+});
+
+/**
+ * Every section opens from the hub's own menu, on a desktop from the rail's
+ * Settings entry and on a phone from the More sheet's — the phone has no
+ * other way in, so this is also the proof that nothing became unreachable
+ * there when the sheet lost four entries.
+ *
+ * Each section is its own address, marked as the current one in the menu,
+ * and Back walks the sections in the order they were opened.
+ */
+test("opens every section of Settings from its menu", async ({
+  page,
+}, testInfo) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  if (testInfo.project.name === "mobile") {
+    await page
+      .locator(".mobile-navigation")
+      .getByRole("button", { name: "More" })
+      .click();
+    await page.getByRole("dialog").getByRole("link", { name: "Settings" }).click();
+  } else {
+    await page.locator(".sidebar").getByRole("link", { name: "Settings" }).click();
+  }
+
+  const menu = page.getByRole("navigation", { name: "Settings sections" });
+  await expect(menu.getByRole("link")).toHaveText(
+    SETTINGS_SECTIONS.map((section) => section.link),
+  );
+  // The order is reversed so that every click moves the open section, Account
+  // included, and so that Back has a different section to return to each time.
+  const visited: typeof SETTINGS_SECTIONS = [];
+  for (const section of [...SETTINGS_SECTIONS.slice(1), SETTINGS_SECTIONS[0]]) {
+    await menu.getByRole("link", { name: section.link, exact: true }).click();
+    await expect(page).toHaveURL((url) => url.pathname === section.path);
+    await expect(
+      page.getByRole("heading", { name: section.heading, exact: true }),
+    ).toBeVisible();
+    await expect(menu.locator('a[aria-current="page"]')).toHaveText([
+      section.link,
+    ]);
+    visited.push(section);
+  }
+  // The menu is new, so it is audited in the dark theme here and in the light
+  // one below, open on a short section and on a long one.
+  await expectNoWcagViolations(page);
+
+  if (testInfo.project.name === "mobile") {
+    // A list two to a row, not a strip running off the side of the phone.
+    const overflow = await page.evaluate(
+      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    );
+    expect(overflow).toBeLessThanOrEqual(1);
+    const columns = await menu.evaluate(
+      (node) => getComputedStyle(node).gridTemplateColumns.split(" ").length,
+    );
+    expect(columns).toBe(2);
+  }
+
+  // Back returns to the section opened before, as a page would.
+  visited.pop();
+  const previous = visited.pop();
+  await page.goBack();
+  await expect(page).toHaveURL((url) => url.pathname === previous?.path);
+  await expect(
+    page.getByRole("heading", { name: previous?.heading, exact: true }),
+  ).toBeVisible();
+});
+
+/**
+ * Every address the moved pages had still arrives at its section. The three
+ * old ones are redirects, and the redirect replaces its own history entry:
+ * Back from the section leaves for where the visitor was before, rather than
+ * landing on an address that would only send them forward again.
+ */
+test("lands every old address on its section of Settings", async ({ page }) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  for (const [address, path, heading] of [
+    ["/settings", "/settings", "Account"],
+    ["/settings/scrobbling", "/settings/scrobbling", "External scrobbling"],
+    ["/shares", "/settings/shares", "Shares"],
+    ["/upload", "/settings/upload", "Upload to Ma musique"],
+    ["/admin", "/settings/admin", "Administration"],
+  ]) {
+    await page.goto(address);
+    await expect(page).toHaveURL((url) => url.pathname === path);
+    await expect(
+      page.getByRole("heading", { name: heading, exact: true }),
+    ).toBeVisible();
+  }
+
+  // The folder an upload was started from survives the move.
+  await page.goto("/upload?folder=folder-1");
+  await expect(page).toHaveURL(
+    (url) =>
+      url.pathname === "/settings/upload" &&
+      url.searchParams.get("folder") === "folder-1",
+  );
+
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await page.goto("/shares");
+  await expect(page).toHaveURL((url) => url.pathname === "/settings/shares");
+  await page.goBack();
+  await expect(page).toHaveURL((url) => url.pathname === "/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+});
+
+/**
+ * The gates the rail entries had moved with them onto the menu: someone who
+ * is not an administrator sees no Admin section, and someone who may not
+ * upload sees no Upload one. Neither address opens for them either.
+ */
+test("hides Admin and Upload from the Settings menu of an account without them", async ({
+  page,
+}) => {
+  await page.route("**/api/v2/web/auth/refresh", (route) =>
+    route.fulfill({
+      json: { ...session, user: { ...session.user, role: "user" } },
+    }),
+  );
+  mock.libraries = [
+    { ...library("library-1", "Ma musique"), accepts_uploads: true, role: "listener" },
+  ];
+  await page.goto("/settings");
+  await expect(
+    page.getByRole("heading", { name: "Account", exact: true }),
+  ).toBeVisible();
+  const menu = page.getByRole("navigation", { name: "Settings sections" });
+  await expect(menu.getByRole("link")).toHaveText([
+    "Account",
+    "Playback",
+    "Scrobbling",
+    "Shares",
+  ]);
+
+  for (const address of ["/admin", "/settings/admin"]) {
+    await page.goto(address);
+    await expect(page).toHaveURL((url) => url.pathname === "/");
+    await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  }
+});
+
+// One test per section rather than one walking all six: each audit takes a
+// few seconds, and six in a row overran the timeout under a full parallel run.
+for (const section of SETTINGS_SECTIONS) {
+  test(`keeps the Settings menu readable in the light on ${section.link}`, async ({
+    page,
+  }) => {
+    mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+    await chooseLightTheme(page);
+    await page.goto(section.path);
+    await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
+    await expect(
+      page.getByRole("heading", { name: section.heading, exact: true }),
+    ).toBeVisible();
+    await expectNoWcagViolations(page);
+  });
+}
+
+/**
+ * The clients holding a credential on this account, which nothing showed
+ * before.
+ *
+ * The material existed and was reachable only by the instance administrator,
+ * buried in a disclosure on a screen an ordinary account cannot open. So a
+ * listener could not find out which devices were reading their library, let
+ * alone stop one.
+ *
+ * A revoked credential is left out rather than struck through: this list
+ * answers who **can** read the library, and one that cannot is not an answer
+ * to that question. The administration screen keeps the full history.
+ */
+test("shows the clients that can read the library, and revokes one", async ({
+  page,
+}) => {
+  await page.goto("/settings");
+
+  // Located by its heading rather than by its position. `.last()` named this
+  // panel until a second self-scoped panel was added below it, and a locator
+  // that depends on the order of the page silently follows whatever lands at
+  // the end.
+  const clients = page
+    .locator(".settings-panel")
+    .filter({ has: page.getByRole("heading", { name: "Registered clients" }) });
+  await expect(
+    clients.getByRole("heading", { name: "Registered clients" }),
+  ).toBeVisible();
+  // One of the three: the second is revoked and the third is past its
+  // expiry, and neither can read the library any more.
+  await expect(clients.getByRole("listitem")).toHaveCount(1);
+  await expect(clients.getByText("the kitchen speaker")).toBeVisible();
+  await expect(clients.getByText("a laptop that is gone")).toHaveCount(0);
+  await expect(
+    clients.getByText("a tablet whose year ran out"),
+  ).toHaveCount(0);
+
+  // Registering one shows the secret, once, and the list follows.
+  await clients.getByLabel("What it is for").fill("my phone");
+  await clients.getByRole("button", { name: "Register" }).click();
+  await expect(
+    page.getByText("wfapi_shown_once_and_never_again"),
+  ).toBeVisible();
+  await expect(clients.getByRole("listitem")).toHaveCount(2);
+
+  // And revoking stops one. The row goes, because the row is the answer to
+  // "who can read my library".
+  await clients
+    .getByRole("button", { name: "Revoke: the kitchen speaker" })
+    .click();
+  await expect(clients.getByText("the kitchen speaker")).toHaveCount(0);
+  await expect(clients.getByRole("listitem")).toHaveCount(1);
+
+  // **And a second press while the registration is out sends nothing.** Two
+  // registrations mint two credentials and only one secret reaches the
+  // screen: the other is a credential on this library whose secret nobody
+  // holds. This panel shipped without the guard; the one below it has the
+  // same one now, for the same reason.
+  let release = () => {};
+  mock.clientGate = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+  mock.clientWrites = [];
+  const register = clients.getByRole("button", { name: "Register" });
+  await clients.getByLabel("What it is for").fill("a slow tablet");
+  await register.click();
+  await expect.soft(register).toBeDisabled();
+  await register.click({ force: true });
+  await register.click({ force: true });
+  release();
+  await expect(register).toBeEnabled();
+  expect(mock.clientWrites).toEqual(["POST"]);
+});
+
+/**
+ * The account changes its own Subsonic password, and switches it off.
+ *
+ * That password is typed into third-party clients, on phones, which is the
+ * ordinary way an application password leaks. Until this panel its owner could
+ * do neither — both server routes were administrative — so answering "my key
+ * has leaked" meant finding an operator.
+ */
+test("changes the Subsonic password, then switches it off", async ({
+  page,
+}) => {
+  await page.goto("/settings");
+
+  const subsonic = page
+    .locator(".settings-panel")
+    .filter({ has: page.getByRole("heading", { name: "Subsonic password" }) });
+  await expect(subsonic).toBeVisible();
+  // Set and never changed, so one date and not two.
+  await expect(subsonic.getByText(/^set /)).toBeVisible();
+  await expect(subsonic.getByText(/last changed/)).toHaveCount(0);
+
+  // **The key moves with the password**, and it is shown once. A leaked
+  // `wfsk_` key authenticates on its own, so a rotation that kept it would
+  // answer nothing.
+  await subsonic.getByLabel("New password").fill("a long enough replacement");
+  await subsonic.getByRole("button", { name: "Change it" }).click();
+  await expect(page.getByText("wfsk_shown_once_only")).toBeVisible();
+  await expect(subsonic.getByText(/last changed/)).toBeVisible();
+
+  // **Asked twice.** The account cannot put this credential back without an
+  // operator, so the first press only arms the second. `exact` because
+  // "Yes, switch it off" contains "Switch it off", and the default substring
+  // match would make every locator here ambiguous.
+  const off = subsonic.getByRole("button", {
+    name: "Switch it off",
+    exact: true,
+  });
+  const reallyOff = subsonic.getByRole("button", {
+    name: "Yes, switch it off",
+  });
+  await off.click();
+  await expect(off).toHaveCount(0);
+  // Backing out leaves the credential exactly as it was.
+  await subsonic.getByRole("button", { name: "Cancel" }).click();
+  await expect(off).toBeVisible();
+  await expect(reallyOff).toHaveCount(0);
+  await expect(subsonic.getByText(/^set /)).toBeVisible();
+
+  // Switching it off leaves the panel saying the account holds none — and
+  // offering nothing, because creating one opens the facade to an account and
+  // that is the operator's decision.
+  await off.click();
+  await reallyOff.click();
+  await expect(
+    subsonic.getByText(
+      "You have no Subsonic password, so no Subsonic client can read your library. Ask the administrator for one.",
+    ),
+  ).toBeVisible();
+  await expect(subsonic.getByLabel("New password")).toHaveCount(0);
+  await expect(
+    subsonic.getByRole("button", { name: "Change it" }),
+  ).toHaveCount(0);
+});
+
+/**
+ * A short password is refused before it is sent.
+ *
+ * The server answers 422 under twelve characters, but that arrives after the
+ * person has committed to the password they chose — and the panel would have
+ * nothing to say about which of the two failures it was.
+ */
+test("refuses a Subsonic password under twelve characters", async ({
+  page,
+}) => {
+  await page.goto("/settings");
+
+  const subsonic = page
+    .locator(".settings-panel")
+    .filter({ has: page.getByRole("heading", { name: "Subsonic password" }) });
+  await subsonic.getByLabel("New password").fill("abcdefghijk");
+  await subsonic.getByRole("button", { name: "Change it" }).click();
+  await expect(subsonic.getByText("Use at least 12 characters.")).toBeVisible();
+  // Nothing was sent: the credential still reads as never changed.
+  await expect(subsonic.getByText(/last changed/)).toHaveCount(0);
+  await expect(page.getByText("wfsk_shown_once_only")).toHaveCount(0);
+});
+
+/**
+ * A second press while the rotation is out sends nothing.
+ *
+ * **This one is about a secret, not about tidiness.** Each rotation mints a key
+ * and stores its hash, so two in flight leave the second one's hash stored
+ * while the panel may have settled on the first one's key — a `wfsk_` key
+ * already dead, shown for a credential whose whole point is that it is shown
+ * once. The person copies it into their clients and the working key is never
+ * shown again.
+ */
+test("sends one rotation however many times the button is pressed", async ({
+  page,
+}) => {
+  let release = () => {};
+  mock.subsonicGate = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+
+  await page.goto("/settings");
+  const subsonic = page
+    .locator(".settings-panel")
+    .filter({ has: page.getByRole("heading", { name: "Subsonic password" }) });
+  const change = subsonic.getByRole("button", { name: "Change it" });
+
+  await subsonic.getByLabel("New password").fill("a long enough replacement");
+  await change.click();
+  // **Soft**, which is the only `expect.soft` in this file and earns it: the
+  // disabled state is the mechanism and the request count below is the
+  // consequence, and a hard failure here would stop the test before the
+  // consequence was ever measured. Removing the guard has to show both.
+  await expect.soft(change).toBeDisabled();
+  await change.click({ force: true });
+  await change.click({ force: true });
+
+  release();
+  await expect(page.getByText("wfsk_shown_once_only")).toBeVisible();
+  await expect(change).toBeEnabled();
+  expect(mock.subsonicWrites).toEqual(["PUT"]);
+});
+
+test("keeps settings and the sign-in screen readable in the light", async ({
+  page,
+}) => {
+  await chooseLightTheme(page);
+  await page.goto("/settings");
+  await expect(
+    page.getByRole("heading", { name: "Account", exact: true }),
+  ).toBeVisible();
+  await expectNoWcagViolations(page);
+
+  await page.context().clearCookies();
+  await page.route("**/api/v2/**", (route) =>
+    route.fulfill({ status: 401, json: { error: "unauthorized" } }),
+  );
+  await page.goto("/");
+  await expect(page.getByRole("button", { name: "Sign in" })).toBeVisible();
+  await expectNoWcagViolations(page);
+});
diff --git a/webapp/e2e/shares.spec.ts b/webapp/e2e/shares.spec.ts
new file mode 100644
index 00000000..e54e1e62
--- /dev/null
+++ b/webapp/e2e/shares.spec.ts
@@ -0,0 +1,205 @@
+// Share links: the page a share opens, what it plays and its covers.
+
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+import { resetAndMockApi } from "./fixtures/api";
+import { song } from "./fixtures/catalogue";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * A share link opens a player for somebody with no account (RFC-020
+ * decision 3). The server hands a browser this page; the page asks the same
+ * address for the share, and plays from the addresses it is given.
+ */
+test("a share link opens a player that plays what the share hands out", async ({
+  page,
+}) => {
+  const shareAsks: Array<string | null> = [];
+  await page.route("**/share/wfs_e2e", async (route) => {
+    // The navigation itself is the page, which `vite preview` serves.
+    if (route.request().resourceType() === "document") {
+      await route.fallback();
+      return;
+    }
+    shareAsks.push(await route.request().headerValue("authorization"));
+    await route.fulfill({
+      json: {
+        id: "share-1",
+        description: "For the drive",
+        expiresAt: null,
+        visitCount: 1,
+        tracks: [
+          {
+            ...song(1, "Hidden Place", 5, true),
+            streamUrl: "/share/wfs_e2e/tracks/song-1/stream?visit=pass-1",
+          },
+          {
+            ...song(1, "Hidden Place", 5, true),
+            streamUrl: "/share/wfs_e2e/tracks/song-1/stream?visit=pass-2",
+          },
+        ],
+      },
+    });
+  });
+  await page.route("**/share/wfs_e2e/tracks/**", (route) =>
+    route.fulfill({ status: 204, body: "" }),
+  );
+  await page.goto("/share/wfs_e2e");
+  await expect(
+    page.getByRole("heading", { name: "For the drive" }),
+  ).toBeVisible();
+  // No rail and no sign-in: the visitor has neither.
+  await expect(page.getByRole("navigation")).toHaveCount(0);
+  // Named by what the row shows, which axe holds a label to.
+  const plays = page.getByRole("button", { name: /^Hidden Place/ });
+  await expect(plays).toHaveCount(2);
+  await plays.last().click();
+  await expect(page.getByLabel("Player")).toHaveAttribute(
+    "src",
+    /\/share\/wfs_e2e\/tracks\/song-1\/stream\?visit=pass-2/,
+  );
+  // Asked once, and without the session a signed-in visitor holds: the share
+  // route reads none, and every ask is a visit.
+  expect(shareAsks).toEqual([null]);
+  const results = await new AxeBuilder({ page }).analyze();
+  expect(results.violations).toEqual([]);
+});
+
+test("a share link that opens nothing says so", async ({ page }) => {
+  await page.route("**/share/wfs_gone", async (route) => {
+    if (route.request().resourceType() === "document") {
+      await route.fallback();
+      return;
+    }
+    await route.fulfill({ status: 404, body: "" });
+  });
+  await page.goto("/share/wfs_gone");
+  await expect(
+    page.getByRole("heading", { name: "This link opens nothing" }),
+  ).toBeVisible();
+});
+
+/**
+ * A share page shows the covers the share hands out, from the addresses it
+ * hands out (RFC-020): plain image addresses under the visit's pass, loaded
+ * with no session. A track with no cover shows a plain square.
+ */
+test("a share page shows the covers its share hands out", async ({ page }) => {
+  const coverAsks: Array<string | null> = [];
+  await page.route("**/share/wfs_covers", async (route) => {
+    if (route.request().resourceType() === "document") {
+      await route.fallback();
+      return;
+    }
+    await route.fulfill({
+      json: {
+        id: "share-2",
+        description: "Covers",
+        expiresAt: null,
+        visitCount: 1,
+        tracks: [
+          {
+            ...song(1, "Hidden Place", 5, true),
+            streamUrl: "/share/wfs_covers/tracks/song-1/stream?visit=pass-1",
+            coverUrl: "/share/wfs_covers/tracks/song-1/cover?visit=pass-1",
+          },
+          {
+            ...song(2, "Cocoon", 0, false),
+            streamUrl: "/share/wfs_covers/tracks/song-2/stream?visit=pass-2",
+          },
+        ],
+      },
+    });
+  });
+  await page.route("**/share/wfs_covers/tracks/*/cover?*", async (route) => {
+    coverAsks.push(await route.request().headerValue("authorization"));
+    await route.fulfill({
+      status: 200,
+      headers: { "content-type": "image/png" },
+      body: Buffer.from(
+        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y9Z4m8AAAAASUVORK5CYII=",
+        "base64",
+      ),
+    });
+  });
+  await page.goto("/share/wfs_covers");
+  await expect(page.getByRole("heading", { name: "Covers" })).toBeVisible();
+  const covers = page.locator("img.share-track-cover");
+  await expect(covers).toHaveCount(1);
+  await expect(covers.first()).toHaveAttribute(
+    "src",
+    "/share/wfs_covers/tracks/song-1/cover?visit=pass-1",
+  );
+  await expect.poll(() => coverAsks).toEqual([null]);
+  const results = await new AxeBuilder({ page }).analyze();
+  expect(results.violations).toEqual([]);
+});
+
+/** A queue longer than a share holds is not sent, and the page says why. */
+test("does not send a queue longer than a share holds", async ({ page }) => {
+  const long = Array.from({ length: 401 }, (_, index) =>
+    song(index + 1, `Track ${index + 1}`, 0, false),
+  );
+  await page.route("**/api/v2/queue", (route) =>
+    route.fulfill({
+      json: {
+        current: "song-1",
+        position_ms: 0,
+        changed_by: null,
+        updated_at: 1,
+        songs: long,
+      },
+    }),
+  );
+  const created: string[] = [];
+  await page.route("**/api/v2/shares", async (route) => {
+    if (route.request().method() === "POST") created.push(route.request().url());
+    await route.fulfill({ json: [] });
+  });
+  await page.goto("/shares");
+  await expect(
+    page.getByText(
+      "A share holds up to 400 tracks, and the queue holds 401. Shorten the queue to share it.",
+    ),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Share current queue" }),
+  ).toBeDisabled();
+  expect(created).toEqual([]);
+});
+
+/** A cover that will not load gives way to the plain square. */
+test("a share page falls back to a plain square when a cover will not load", async ({
+  page,
+}) => {
+  await page.route("**/share/wfs_broken", async (route) => {
+    if (route.request().resourceType() === "document") {
+      await route.fallback();
+      return;
+    }
+    await route.fulfill({
+      json: {
+        id: "share-3",
+        description: "Broken cover",
+        expiresAt: null,
+        visitCount: 1,
+        tracks: [
+          {
+            ...song(1, "Hidden Place", 5, true),
+            streamUrl: "/share/wfs_broken/tracks/song-1/stream?visit=pass-1",
+            coverUrl: "/share/wfs_broken/tracks/song-1/cover?visit=pass-1",
+          },
+        ],
+      },
+    });
+  });
+  await page.route("**/share/wfs_broken/tracks/*/cover?*", (route) =>
+    route.fulfill({ status: 404, body: "" }),
+  );
+  await page.goto("/share/wfs_broken");
+  await expect(page.getByRole("heading", { name: "Broken cover" })).toBeVisible();
+  await expect(page.locator("img.share-track-cover")).toHaveCount(0);
+  await expect(page.locator("span.share-track-cover")).toHaveCount(1);
+});
diff --git a/webapp/e2e/shell.spec.ts b/webapp/e2e/shell.spec.ts
new file mode 100644
index 00000000..1aa5e719
--- /dev/null
+++ b/webapp/e2e/shell.spec.ts
@@ -0,0 +1,653 @@
+// The studio shell: navigation, the mobile bar, the logo kit, the manifest.
+
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { library, session } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+test("renders the studio shell and persists appearance preferences", async ({
+  page,
+}, testInfo) => {
+  await page.goto("/");
+
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await expect(page.getByText("Post", { exact: true })).toBeVisible();
+  await expect(page.getByText("Vespertine", { exact: true })).toBeVisible();
+
+  // **The pickers live on the Settings page now**, not in the sidebar footer
+  // and not in the mobile header. They are settings and not destinations, and
+  // they sat under thirteen navigation entries; there is no copy left behind,
+  // because two ways to ask one question is the thing that move was about.
+  // Settings opens on its Account section, which holds them.
+  await page.goto("/settings");
+  await expect(
+    page.getByRole("heading", { name: "Account", exact: true }),
+  ).toBeVisible();
+  const preferences = page.locator(".settings-panel").first();
+  const theme = preferences.getByRole("radiogroup", { name: "Theme" });
+  await theme.getByRole("radio", { name: "Midnight light" }).check();
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("waveflow.theme")))
+    .toBe("midnight-light");
+
+  const language = preferences.getByLabel("Language");
+  await language.selectOption("fr");
+  await expect(page.getByRole("link", { name: "Recherche" }).first()).toBeVisible();
+  await expect(page.locator("html")).toHaveAttribute("lang", "fr");
+  // And nowhere else: a picker still reachable from the corridor would mean
+  // the move had added a place rather than chosen one.
+  await expect(page.locator(".sidebar").getByLabel("Thème")).toHaveCount(0);
+  await expect(page.locator(".mobile-header").getByLabel("Thème")).toHaveCount(
+    0,
+  );
+
+  if (testInfo.project.name === "mobile") {
+    await expect(page.locator(".mobile-navigation")).toBeVisible();
+    const overflow = await page.evaluate(
+      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    );
+    expect(overflow).toBeLessThanOrEqual(1);
+  } else {
+    await expect(page.locator(".sidebar")).toBeVisible();
+  }
+});
+
+test("keeps navigation and player controls within their own space", async ({
+  page,
+}, testInfo) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await expect(page.locator(".player")).toBeVisible();
+
+  if (testInfo.project.name === "mobile") {
+    await expect(page.locator(".sidebar")).toBeHidden();
+    const bounds = await page.evaluate(() => {
+      const track = document.querySelector(".player-track")?.getBoundingClientRect();
+      const progress = document.querySelector(".player-progress")?.getBoundingClientRect();
+      const player = document.querySelector(".player")?.getBoundingClientRect();
+      const navigation = document.querySelector(".mobile-navigation")?.getBoundingClientRect();
+      return {
+        trackBottom: track?.bottom ?? 0,
+        progressTop: progress?.top ?? 0,
+        playerBottom: player?.bottom ?? 0,
+        navigationTop: navigation?.top ?? 0,
+        overflow: document.documentElement.scrollWidth - window.innerWidth,
+      };
+    });
+    expect(bounds.progressTop).toBeGreaterThanOrEqual(bounds.trackBottom);
+    expect(bounds.navigationTop).toBeGreaterThanOrEqual(bounds.playerBottom);
+    expect(bounds.overflow).toBeLessThanOrEqual(1);
+    await page.setViewportSize({ width: 320, height: 700 });
+    const narrow = await page.evaluate(() => ({
+      trackBottom: document.querySelector(".player-track")?.getBoundingClientRect().bottom ?? 0,
+      progressTop: document.querySelector(".player-progress")?.getBoundingClientRect().top ?? 0,
+      playerBottom: document.querySelector(".player")?.getBoundingClientRect().bottom ?? 0,
+      navigationTop: document.querySelector(".mobile-navigation")?.getBoundingClientRect().top ?? 0,
+      overflow: document.documentElement.scrollWidth - window.innerWidth,
+    }));
+    expect(narrow.progressTop).toBeGreaterThanOrEqual(narrow.trackBottom);
+    expect(narrow.navigationTop).toBeGreaterThanOrEqual(narrow.playerBottom);
+    expect(narrow.overflow).toBeLessThanOrEqual(1);
+  } else {
+    const bounds = await page.evaluate(() => {
+      const sidebar = document.querySelector(".sidebar")?.getBoundingClientRect();
+      const footer = document.querySelector(".sidebar-footer")?.getBoundingClientRect();
+      const navigation = document.querySelector(".primary-navigation")?.getBoundingClientRect();
+      return {
+        sidebarBottom: sidebar?.bottom ?? 0,
+        footerBottom: footer?.bottom ?? 0,
+        navigationBottom: navigation?.bottom ?? 0,
+      };
+    });
+    expect(bounds.footerBottom).toBeLessThanOrEqual(bounds.sidebarBottom);
+    expect(bounds.navigationBottom).toBeLessThanOrEqual(bounds.footerBottom);
+    await expect(page.locator(".sidebar-footer").getByRole("button", { name: "Sign out" })).toBeVisible();
+    await page.setViewportSize({ width: 821, height: 650 });
+    const compact = await page.evaluate(() => ({
+      sidebarBottom: document.querySelector(".sidebar")?.getBoundingClientRect().bottom ?? 0,
+      footerBottom: document.querySelector(".sidebar-footer")?.getBoundingClientRect().bottom ?? 0,
+      overflow: document.documentElement.scrollWidth - window.innerWidth,
+    }));
+    expect(compact.footerBottom).toBeLessThanOrEqual(compact.sidebarBottom);
+    expect(compact.overflow).toBeLessThanOrEqual(1);
+  }
+});
+
+test("shows one current navigation item and separates administration panels", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "sidebar layout is desktop-only");
+  // A section of Settings: the rail has no entry of its own for it any more,
+  // and the one entry that leads there is the current one — in the rail's
+  // foot, so the whole sidebar is counted and not only the rail.
+  await page.goto("/settings/scrobbling");
+  const current = page.locator(".sidebar a[data-status='active']");
+  await expect(current).toHaveCount(1);
+  await expect(current).toHaveText("Settings");
+
+  const genres = page.locator(".primary-navigation").getByRole("link", {
+    name: "Genres",
+  });
+  await genres.hover();
+  const activeBackground = await current.evaluate((node) =>
+    getComputedStyle(node).backgroundColor,
+  );
+  const hoverBackground = await genres.evaluate((node) =>
+    getComputedStyle(node).backgroundColor,
+  );
+  expect(hoverBackground).not.toBe(activeBackground);
+
+  await page.goto("/admin");
+  await expect(page.locator(".admin-page > .stack .user-row")).toBeVisible();
+  await expect(page.locator(".now-playing-panel")).toBeVisible();
+  const gap = await page.evaluate(() => {
+    const accounts = document.querySelector(".admin-page > .stack");
+    const playing = document.querySelector(".now-playing-panel");
+    return (
+      (playing?.getBoundingClientRect().top ?? 0) -
+      (accounts?.getBoundingClientRect().bottom ?? 0)
+    );
+  });
+  expect(gap).toBeGreaterThanOrEqual(24);
+});
+
+/**
+ * The rail holds every destination without scrolling at a laptop's 1366×768
+ * and a desktop's 1440×900, and the Settings entry in its foot is in view and
+ * clear of the player bar.
+ *
+ * Asked of the longest rail any account sees — an administrator owning a
+ * library that takes files — and measured after the fonts have loaded, since
+ * a face arriving late changes every row's height. Three things got it
+ * there: the Account group became one Settings entry, three maintenance
+ * pages became one Maintenance entry, and a short window draws a denser rail
+ * (fluid.css). Before all three the rail was 1112 px tall in 456 px at
+ * 1366×768, and in 588 px at 1440×900.
+ */
+test("fits the rail without scrolling at common desktop heights", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "the rail is desktop-only");
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  for (const [width, height] of [
+    [1366, 768],
+    [1440, 900],
+  ]) {
+    await page.setViewportSize({ width, height });
+    await page.goto("/");
+    await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+    const rail = page.locator(".primary-navigation");
+    await expect(rail.locator('a[href="/maintenance"]')).toHaveCount(1);
+    await page.evaluate(() => document.fonts.ready);
+    const measured = await rail.evaluate((node) => ({
+      scrollHeight: node.scrollHeight,
+      clientHeight: node.clientHeight,
+    }));
+    testInfo.annotations.push({
+      type: "rail",
+      description: `${width}x${height}: scrollHeight ${measured.scrollHeight}, clientHeight ${measured.clientHeight}`,
+    });
+    expect(
+      measured.scrollHeight,
+      `the rail scrolls at ${width}x${height}`,
+    ).toBeLessThanOrEqual(measured.clientHeight);
+    // Dense, not cramped: every row of the sidebar stays a target of at
+    // least 24 px (WCAG 2.5.8).
+    const smallest = await page
+      .locator(".sidebar")
+      .evaluate((node) =>
+        Math.min(
+          ...[...node.querySelectorAll("a, button")].map(
+            (target) => target.getBoundingClientRect().height,
+          ),
+        ),
+      );
+    expect(smallest, `targets at ${width}x${height}`).toBeGreaterThanOrEqual(24);
+    const settings = page.locator(".sidebar").getByRole("link", { name: "Settings" });
+    await expect(settings, `at ${width}x${height}`).toBeInViewport({ ratio: 1 });
+    // And not under the player bar, which runs across the rail's foot.
+    const overlap = await settings.evaluate((link) => {
+      const player = document.querySelector(".player")?.getBoundingClientRect();
+      return link.getBoundingClientRect().bottom - (player?.top ?? 0);
+    });
+    expect(overlap, `at ${width}x${height}`).toBeLessThanOrEqual(0);
+  }
+});
+
+test("offers a keyboard skip link and a localized not-found route", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await page.keyboard.press("Tab");
+  const skip = page.getByRole("link", { name: "Skip to content" });
+  await expect(skip).toBeFocused();
+  await skip.press("Enter");
+  await expect(page.locator("#main-content")).toBeFocused();
+
+  await page.goto("/a-room-that-does-not-exist");
+  await expect(
+    page.getByRole("heading", { name: "This room is silent" }),
+  ).toBeVisible();
+  await expect(page.getByRole("link", { name: "Back to the library" })).toBeVisible();
+});
+
+test("has no automated WCAG A or AA violations", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await expectNoWcagViolations(page);
+});
+
+test("keeps the light appearance readable", async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("waveflow.theme", "default");
+  });
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "Albums" })).toBeVisible();
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * The mobile bar holds six slots and the client has sixteen screens. Until
+ * 2026-09-15 the other eight were reachable by typing their address and by
+ * nothing else: the sidebar that carries them is `display: none` below 820px.
+ * The ninth is Songs, added with the listing itself, and the tenth is
+ * Settings — which is where the theme and the language went when they stopped
+ * living in the sidebar footer.
+ * Seven of the eight had been in that state since lot A, and no test saw it —
+ * every mobile case here navigates by `page.goto`.
+ */
+test("opens the rest of the client from the mobile bar", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "mobile", "about the phone bar");
+  // An administrator of a library that takes files, so all eight are this
+  // account's to see. The default fixture takes none, which left `Upload` out
+  // of the list below while the comment on it claimed otherwise — and nothing
+  // then proved the sheet ever shows an upload entry at all. Its absence in
+  // the test beside this one is over-determined: that account is a listener
+  // *and* its library is closed, so it would pass against a sheet that had
+  // dropped the entry entirely.
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  await page.goto("/");
+
+  const bar = page.locator(".mobile-navigation");
+  // Six links and the seventh slot, on one row. The grid counted five for as
+  // long as there were five, and a sixth primary entry added later had been
+  // wrapping onto a second row ever since.
+  await expect(bar.locator("a")).toHaveCount(6);
+  const rows = await bar.evaluate(
+    (element) =>
+      new Set(
+        [...element.children].map((child) =>
+          Math.round(child.getBoundingClientRect().top),
+        ),
+      ).size,
+  );
+  expect(rows).toBe(1);
+
+  // Asserted before it is clicked. Clicking a control that is not there fails
+  // by timing out, and a timeout in a CI log says a test was slow rather than
+  // that the seventh slot is missing.
+  const more = bar.getByRole("button", { name: "More" });
+  await expect(more).toBeVisible();
+  await more.click();
+
+  const sheet = page.getByRole("dialog");
+  await expect(sheet).toBeVisible();
+  // The twelve the bar cannot hold. `Radio` joined them with #217, `Folders`
+  // with RFC-012's filed folders, `Offline` with RFC-022, `Statistics` with
+  // RFC-024 and `Podcasts` with RFC-025. Shares, Scrobbling, Upload and Admin
+  // left it when they became sections of Settings, and `Needs attention`
+  // (RFC-015), `Missing files` (RFC-021) and `Quality` (RFC-016) when they
+  // became sections of Maintenance — which is how eighteen became twelve.
+  // This count is what said so: a new entry in the sidebar reaches the sheet,
+  // and the sheet is pinned.
+  for (const name of [
+    "Artists",
+    "Songs",
+    "Genres",
+    "Folders",
+    "Maintenance",
+    "Settings",
+    "Random",
+    "Recently played",
+    "Statistics",
+    "Offline",
+    "Radio",
+    "Podcasts",
+  ]) {
+    await expect(sheet.getByRole("link", { name })).toBeVisible();
+  }
+  // Counted as well as named: a sheet that also offered something nobody asked
+  // for would satisfy every line above.
+  await expect(sheet.getByRole("link")).toHaveCount(12);
+
+  await expectNoWcagViolations(page);
+
+  // Escape is the keyboard's way out, and it is the element's own rather than
+  // anything written here — which is why the sheet is a <dialog>.
+  await page.keyboard.press("Escape");
+  await expect(sheet).toBeHidden();
+
+  await bar.getByRole("button", { name: "More" }).click();
+  await sheet.getByRole("link", { name: "Settings" }).click();
+  await expect(
+    page.getByRole("heading", { name: "Account", exact: true }),
+  ).toBeVisible();
+  // Closed on the way out: a sheet left open would sit over the page it just
+  // reached.
+  await expect(sheet).toBeHidden();
+});
+
+test("offers nothing in the sheet that the account may not reach", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "mobile", "about the phone bar");
+  // A listener, in a library that takes no files: upload and admin are not
+  // hidden by width, they are not this account's to see at all.
+  await page.route("**/api/v2/web/auth/refresh", (route) =>
+    route.fulfill({
+      json: { ...session, user: { ...session.user, role: "user" } },
+    }),
+  );
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+
+  await page.goto("/");
+  await page.locator(".mobile-navigation").getByRole("button", { name: "More" }).click();
+
+  const sheet = page.getByRole("dialog");
+  // Settings is everyone's. What sits behind it is gated in its own menu, and
+  // the test of that menu for this account is with the hub's.
+  await expect(sheet.getByRole("link", { name: "Settings" })).toBeVisible();
+  await expect(sheet.getByRole("link", { name: "Admin" })).toHaveCount(0);
+  await expect(sheet.getByRole("link", { name: "Upload" })).toHaveCount(0);
+  // Every member reads the quality of the files (RFC-016), so Maintenance
+  // has a section for a listener; which ones is the hub's test.
+  await expect(sheet.getByRole("link", { name: "Maintenance" })).toBeVisible();
+  await expect(
+    sheet.getByRole("link", { name: "Needs attention" }),
+  ).toHaveCount(0);
+  await expect(
+    sheet.getByRole("link", { name: "Missing files" }),
+  ).toHaveCount(0);
+});
+
+/**
+ * The icon is declared, and the declared icon is really there.
+ *
+ * Covered here rather than in the Rust suite, which runs against whatever
+ * `build.rs` staged: a real client build when one exists, and a placeholder
+ * holding nothing but `index.html` otherwise. The Rust CI never builds the
+ * client, so asserting this there would pass on a developer's machine and fail
+ * in CI for a reason that has nothing to do with the code. This project's
+ * preview server holds the actual build.
+ *
+ * Both icons are the logo kit's, as its head snippet declares them: the `.ico`
+ * sized for the browsers that read nothing else, and the SVG. Both carry the
+ * kit's small drawing, the heavier stroke the guide asks for below 24px — a
+ * flat Wave green W, where the old icon was five bars cut out of a gradient.
+ *
+ * What the server does with them — the file when the build has it, a JSON 404
+ * when it does not, never the shell, which a browser cannot decode and asks
+ * for again — belongs to the fallback and is pinned in `tests/service.rs`.
+ */
+test("declares the logo kit's icons, and serves the ones it declares", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
+
+  await page.goto("/");
+  const icons = page.locator('link[rel="icon"]');
+  await expect(icons).toHaveCount(2);
+  await expect(icons.nth(0)).toHaveAttribute("href", "/favicon.ico");
+  await expect(icons.nth(0)).toHaveAttribute("sizes", "48x48");
+  await expect(icons.nth(1)).toHaveAttribute("href", "/favicon.svg");
+  await expect(icons.nth(1)).toHaveAttribute("type", "image/svg+xml");
+
+  const svg = await page.request.get("/favicon.svg");
+  expect(svg.status()).toBe(200);
+  expect(svg.headers()["content-type"]).toContain("image/svg+xml");
+  const drawing = await svg.text();
+  expect(drawing).toContain('fill="#10B981"');
+  expect(drawing).not.toContain("Gradient");
+  expect(drawing).not.toContain("<rect");
+
+  const ico = await page.request.get("/favicon.ico");
+  expect(ico.status()).toBe(200);
+  // An ICO directory: reserved zero, then type 1, then the image count.
+  const bytes = await ico.body();
+  expect([...bytes.subarray(0, 4)]).toEqual([0, 0, 1, 0]);
+  expect(bytes.readUInt16LE(4)).toBeGreaterThan(0);
+});
+
+/**
+ * The sidebar's brand is the logo kit's horizontal logo, in the version the
+ * guide gives for the background it sits on: the colour file on a light
+ * theme, the dark file (mint and white) on a dark one. The theme is the
+ * reader's preference rather than the system's, so the choice is made by the
+ * root's `dark` class — and both themes are asked here, because a rule that
+ * showed one file everywhere would pass on either alone.
+ *
+ * On a phone the same brand sits in the header instead of the rail; the
+ * mobile project asks there.
+ */
+test("draws the brand from the logo kit, in the version for the theme", async ({
+  page,
+}, testInfo) => {
+  const where = testInfo.project.name === "mobile" ? ".mobile-header" : ".sidebar";
+  const brand = page.locator(`${where} .brand`);
+
+  const expectLogo = async (file: string, hidden: string) => {
+    const shown = brand.locator(`img[src="/brand/${file}"]`);
+    await expect(shown).toBeVisible();
+    await expect(brand.locator(`img[src="/brand/${hidden}"]`)).toBeHidden();
+    // Really drawn, not a broken image the size of its attributes.
+    await expect
+      .poll(() => shown.evaluate((image: HTMLImageElement) => image.naturalWidth))
+      .toBeGreaterThan(0);
+    const drawn = await shown.evaluate((image) => {
+      const style = getComputedStyle(image);
+      return {
+        width: image.getBoundingClientRect().width,
+        animation: style.animationName,
+        filter: style.filter,
+      };
+    });
+    // The guide's minimum for the horizontal version, and none of what it
+    // rules out: no pulsing, no glow or shadow.
+    expect(drawn.width).toBeGreaterThanOrEqual(120);
+    expect(drawn.animation).toBe("none");
+    expect(drawn.filter).toBe("none");
+    // The logo and the label beside it fit their row.
+    expect(
+      await brand.evaluate((link) => link.scrollWidth <= link.clientWidth),
+    ).toBe(true);
+  };
+
+  await page.goto("/");
+  await expect(page.locator("html")).toHaveClass(/\bdark\b/);
+  await expectLogo(
+    "waveflow-logo-horizontal-dark.svg",
+    "waveflow-logo-horizontal-color.svg",
+  );
+
+  await page.evaluate(() => localStorage.setItem("waveflow.theme", "default"));
+  await page.reload();
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
+  await expect(page.locator("html")).not.toHaveClass(/\bdark\b/);
+  await expectLogo(
+    "waveflow-logo-horizontal-color.svg",
+    "waveflow-logo-horizontal-dark.svg",
+  );
+});
+
+/**
+ * The first-load screen is in the document the server sends, and it carries
+ * the one vector file.
+ *
+ * Structural only: nothing here times anything. The floor and the fade are
+ * pinned in `src/lib/splash.test.ts` against fake timers, because an assertion on
+ * when the screen left would be an assertion about how fast the runner parsed
+ * 276 kB of React.
+ *
+ * What this adds is the half a unit test cannot see: that the markup ships in
+ * `index.html` rather than in the bundle — a splash inside the bundle could
+ * only appear after the wait it exists to dress — and that it points at the
+ * logo kit's symbol, in mint because this screen is always the dark
+ * background. A hand-drawn copy of the mark is the defect this screen's own
+ * issue was filed about. And that it holds still: the mark used to breathe
+ * here, and the brand guide rules a pulsing logo out.
+ */
+test("ships the first-load screen in the document, drawn from the logo kit", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
+
+  // Read off the wire, before any script has run. Asking the rendered page
+  // would be asking after the screen has already been taken away.
+  const document_ = await page.request.get("/");
+  const html = await document_.text();
+  expect(html).toContain('id="splash"');
+  expect(html).toContain('src="/brand/waveflow-symbol-mint.svg"');
+  const inlineStyle = html.split("<style>")[1]?.split("</style>")[0] ?? "";
+  expect(inlineStyle).toContain("#splash");
+  expect(inlineStyle).not.toContain("animation");
+  expect(inlineStyle).not.toContain("@keyframes");
+
+  const logo = await page.request.get("/brand/waveflow-symbol-mint.svg");
+  expect(logo.status()).toBe(200);
+  expect(logo.headers()["content-type"]).toContain("image/svg+xml");
+  // The kit's symbol: one flat path in mint, no gradient — so a file swapped
+  // back to the old five bars fails here.
+  const svg = await logo.text();
+  expect(svg.match(/<path/g)).toHaveLength(1);
+  expect(svg).toContain('fill="#34D399"');
+  expect(svg).not.toContain("Gradient");
+  expect(svg).not.toContain("<rect");
+
+  await page.goto("/");
+  // Gone from the document once the application is up — removed rather than
+  // left transparent, because an element over the whole viewport still takes
+  // a click at zero opacity.
+  await expect(page.locator("#splash")).toHaveCount(0);
+  await expect(page.locator("#main-content")).toBeVisible();
+
+  // And on an address no route claims. This is the reason the dismissal sits
+  // in the root route component rather than in the sign-in and shell
+  // components: `notFoundComponent` belongs to the root and renders inside
+  // neither of those, so a first visit to an unknown address would have kept
+  // the mark until the ten-second ceiling.
+  await page.goto("/no-such-screen");
+  await expect(page.locator("#splash")).toHaveCount(0);
+});
+
+/**
+ * The first-load screen leaves even when the client never arrives.
+ *
+ * `dismissSplash` runs from the bundle, so it cannot be what rescues a bundle
+ * that fails to load: a reader would be left with a pulsing mark over the
+ * whole viewport for as long as the tab stayed open — worse than a blank
+ * page, which at least looks broken rather than looking like it is working.
+ *
+ * Eleven seconds of patience here, against a ten-second ceiling. It is the
+ * slowest test in this file and it earns it: an untested fallback for a
+ * failure nobody reproduces is the kind that turns out not to work on the one
+ * day it matters.
+ */
+test("takes the first-load screen away even when the bundle never loads", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
+
+  // Every script the document asks for is refused, so React never mounts and
+  // nothing in the bundle can clean up after it.
+  await page.route("**/*.js", (route) => route.abort());
+  await page.route("**/src/main.tsx", (route) => route.abort());
+
+  await page.goto("/");
+  // Up, and covering the page: this is the state the ceiling exists for.
+  await expect(page.locator("#splash")).toBeVisible();
+
+  // While it is up is the only moment the leaving state can be read on the
+  // real element. Marked by hand rather than waited for: what is checked is
+  // the rule, not the clock. Without `pointer-events: none` the layer keeps
+  // taking clicks for the length of the fade — and for all of it under
+  // `prefers-reduced-motion`, where it is already invisible.
+  await page.locator("#splash").evaluate((element: HTMLElement) => {
+    element.dataset.leaving = "true";
+  });
+  await expect(page.locator("#splash")).toHaveCSS("pointer-events", "none");
+  await page.locator("#splash").evaluate((element: HTMLElement) => {
+    delete element.dataset.leaving;
+  });
+
+  await expect(page.locator("#splash")).toHaveCount(0, { timeout: 11_000 });
+  // What is revealed is an empty root — the page as it was before this screen
+  // existed. The ceiling restores the old failure rather than inventing one.
+  await expect(page.locator("#root")).toBeEmpty();
+});
+
+/**
+ * RFC-022 decision 4: the client declares a manifest a phone can install from,
+ * and every icon it names is served as an image.
+ */
+test("declares an install manifest whose icons are all served", async ({
+  page,
+}, testInfo) => {
+  test.skip(testInfo.project.name !== "desktop", "one viewport is enough");
+  await page.goto("/");
+  await expect(page.locator('link[rel="manifest"]')).toHaveAttribute(
+    "href",
+    "/manifest.webmanifest",
+  );
+  await expect(page.locator('link[rel="apple-touch-icon"]')).toHaveAttribute(
+    "href",
+    "/apple-touch-icon.png",
+  );
+  const response = await page.request.get("/manifest.webmanifest");
+  expect(response.status()).toBe(200);
+  expect(response.headers()["content-type"]).toContain(
+    "application/manifest+json",
+  );
+  const manifest = (await response.json()) as {
+    start_url: string;
+    display: string;
+    theme_color: string;
+    background_color: string;
+    icons: Array<{ src: string; sizes: string; purpose: string }>;
+  };
+  expect(manifest.start_url).toBe("/");
+  expect(manifest.display).toBe("standalone");
+  // Wave green for both, as the logo kit's own manifest and head snippet set
+  // them: the launch screen is the icon's tile, edge to edge.
+  expect(manifest.theme_color).toBe("#10B981");
+  expect(manifest.background_color).toBe("#10B981");
+  await expect(page.locator('meta[name="theme-color"]')).toHaveAttribute(
+    "content",
+    "#10B981",
+  );
+  expect(manifest.icons.map((icon) => icon.sizes)).toEqual(
+    expect.arrayContaining(["192x192", "512x512"]),
+  );
+  expect(manifest.icons.some((icon) => icon.purpose === "maskable")).toBe(true);
+  for (const { src, sizes } of [
+    ...manifest.icons,
+    { src: "/apple-touch-icon.png", sizes: "180x180" },
+  ]) {
+    const icon = await page.request.get(src);
+    expect(icon.status(), src).toBe(200);
+    expect(icon.headers()["content-type"], src).toContain("image/png");
+    // The size it claims is the size it is: a PNG's IHDR carries both.
+    const bytes = await icon.body();
+    expect(
+      `${bytes.readUInt32BE(16)}x${bytes.readUInt32BE(20)}`,
+      src,
+    ).toBe(sizes);
+  }
+});
diff --git a/webapp/e2e/track.spec.ts b/webapp/e2e/track.spec.ts
new file mode 100644
index 00000000..c69301ce
--- /dev/null
+++ b/webapp/e2e/track.spec.ts
@@ -0,0 +1,460 @@
+// A track's menu, its properties, its download and its tag corrections.
+
+import { expect, test } from "@playwright/test";
+
+import {
+  chooseLightTheme,
+  expectNoWcagViolations,
+} from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { albumDetail, library } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * The right click on a track, and the properties it opens (RFC-012 decision 4).
+ *
+ * Driven from the keyboard first, because a menu reachable only by a right
+ * click is one the accessibility gate is right to fail: Shift+F10 on the
+ * focused row, arrows to Properties, Enter. The panel shows where the file
+ * sits in its library — the one field only `GET /tracks/{id}` sends — and a
+ * corrected tag beside what the file said. Escape gives focus back to the row
+ * the menu was opened from, through the menu that no longer exists.
+ */
+test("opens a track's properties from its context menu", async ({ page }) => {
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({ json: [mock.correctable.song] }),
+  );
+  await page.route("**/api/v2/tracks/song-9", (route) =>
+    route.fulfill({
+      json: {
+        ...mock.correctable.song,
+        relative_path: "Björk/Post/09 Army Of Me.flac",
+        full_hash: "a".repeat(64),
+        created_at: Date.UTC(2026, 8, 15, 12, 0),
+        album_artist: "Björk",
+        comment: "Remastered\nBonus edition",
+        musicbrainz_id: null,
+        isrc: ["GBAAA9500009"],
+        bpm: 92,
+        replay_gain_track_gain: -6.5,
+        replay_gain_track_peak: 0.98,
+        replay_gain_album_gain: null,
+        replay_gain_album_peak: null,
+      },
+    }),
+  );
+  await page.goto("/songs");
+  const row = page.locator(".songs tbody tr").first();
+  const title = row.locator("button.song-title");
+  await title.focus();
+
+  await page.keyboard.press("Shift+F10");
+  const menu = page.getByRole("menu", { name: "Actions for Army Of Me" });
+  await expect(menu).toBeVisible();
+  await expect(menu.getByRole("menuitem")).toHaveText([
+    "Play",
+    "Add to queue",
+    "Download",
+    // RFC-022: this browser supports Cache Storage, so it offers the copy.
+    "Keep for offline",
+    // Where the track belongs, reachable from any list and on a phone.
+    "Go to album",
+    "Go to Skunk Anansie",
+    "Properties",
+    "Edit tags",
+    "Move to folder…",
+  ]);
+  await expect(menu.getByRole("menuitem", { name: "Play" })).toBeFocused();
+  // Where focus is shows on its own, not only as a faint tint.
+  await expect(menu.getByRole("menuitem", { name: "Play" })).toHaveCSS(
+    "outline-style",
+    "solid",
+  );
+  // Past "Keep for offline" (RFC-022) and the album and artist entries, the
+  // seventh item.
+  for (let press = 0; press < 6; press += 1) {
+    await page.keyboard.press("ArrowDown");
+  }
+  await expect(menu.getByRole("menuitem", { name: "Properties" })).toBeFocused();
+  await page.keyboard.press("Enter");
+
+  const panel = page.getByRole("dialog", { name: "Army Of Me" });
+  await expect(panel).toBeVisible();
+  await expect(menu).toHaveCount(0);
+  await expect(panel).toContainText("Björk/Post/09 Army Of Me.flac");
+  await expect(panel).toContainText("a".repeat(64));
+  await expect(panel).toContainText("957 kbps");
+  await expect(panel).toContainText("44.1 kHz");
+  await expect(panel).toContainText("-6.5 dB, peak 0.98");
+  // The comment is a correction; the file carried none.
+  await expect(panel).toContainText("Corrected — the file says —");
+  await expectNoWcagViolations(page);
+
+  // A click in the panel's own padding lands on the dialog element, as a
+  // click on the backdrop does; only the second may close it.
+  await panel.click({ position: { x: 6, y: 6 } });
+  await expect(panel).toBeVisible();
+
+  await page.keyboard.press("Escape");
+  await expect(panel).toHaveCount(0);
+  await expect(title).toBeFocused();
+
+  // The backdrop, outside the panel's box, does close it.
+  await page.keyboard.press("Shift+F10");
+  for (let press = 0; press < 6; press += 1) {
+    await page.keyboard.press("ArrowDown");
+  }
+  await page.keyboard.press("Enter");
+  await expect(panel).toBeVisible();
+  await page.mouse.click(2, 2);
+  await expect(panel).toHaveCount(0);
+
+  // The pointer reaches the same menu, and a click away closes it.
+  await row.click({ button: "right" });
+  await expect(menu).toBeVisible();
+  await page.mouse.click(5, 5);
+  await expect(menu).toHaveCount(0);
+
+  // The wheel closes it even turned over the menu, which does not scroll:
+  // the page beneath would move and leave the menu off its row. Dispatched
+  // on the entry itself, because a real wheel in a headless browser brings
+  // side effects of its own that close the menu either way.
+  await row.click({ button: "right" });
+  await expect(menu).toBeVisible();
+  await menu
+    .getByRole("menuitem", { name: "Play" })
+    .dispatchEvent("wheel", { deltaY: 120, bubbles: true });
+  await expect(menu).toHaveCount(0);
+});
+
+/**
+ * The lyrics in a track's properties (RFC-012 decision 6).
+ *
+ * The sheets come in the server's order, the first marked as the one shown,
+ * each naming its source. An owner uploads a sheet as the bytes it is and
+ * takes an upload back; anyone downloads the shown sheet, saved under the
+ * name the server gives in `Content-Disposition`.
+ */
+test("uploads, removes and downloads lyrics from a track's properties", async ({
+  page,
+}) => {
+  const sheet = (source: string, synced: boolean, value: string) => ({
+    displayArtist: "Björk",
+    displayTitle: "Army Of Me",
+    lang: "eng",
+    synced,
+    line: [{ start: synced ? 1000 : undefined, value }],
+    source,
+  });
+  let sheets = [sheet("sidecar_lrc", true, "from the sidecar")];
+  const sent: Array<{ method: string; path: string; body: string }> = [];
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({ json: [mock.correctable.song] }),
+  );
+  await page.route("**/api/v2/tracks/song-9/lyrics", (route) =>
+    route.fulfill({
+      json: { trackId: "song-9", structuredLyrics: sheets },
+    }),
+  );
+  await page.route("**/api/v2/tracks/song-9/lyrics/ttml", (route) => {
+    const request = route.request();
+    sent.push({
+      method: request.method(),
+      path: "ttml",
+      body: request.postData() ?? "",
+    });
+    if (request.method() === "PUT") {
+      sheets = [sheet("upload_ttml", true, "bonjour"), ...sheets];
+      return route.fulfill({
+        json: { trackId: "song-9", structuredLyrics: sheets },
+      });
+    }
+    sheets = sheets.filter((entry) => entry.source !== "upload_ttml");
+    return route.fulfill({ status: 204, body: "" });
+  });
+  await page.route("**/api/v2/tracks/song-9/lyrics/file", (route) =>
+    route.fulfill({
+      body: "[00:01.00]from the sidecar\n",
+      headers: {
+        "content-type": "application/octet-stream",
+        "content-disposition":
+          "attachment; filename=\"Bj_rk - Army Of Me.lrc\"; filename*=UTF-8''Bj%C3%B6rk%20-%20Army%20Of%20Me.lrc",
+      },
+    }),
+  );
+  await page.goto("/songs");
+  await page.evaluate(() => {
+    const seen = window as unknown as { __saved: string[] };
+    seen.__saved = [];
+    HTMLAnchorElement.prototype.click = function (this: HTMLAnchorElement) {
+      seen.__saved.push(this.download);
+    };
+  });
+  await page
+    .locator(".songs tbody tr")
+    .first()
+    .locator("button.song-title")
+    .focus();
+  await page.keyboard.press("Shift+F10");
+  await page
+    .getByRole("menu", { name: "Actions for Army Of Me" })
+    .getByRole("menuitem", { name: "Properties" })
+    .click();
+  const panel = page.getByRole("dialog", { name: "Army Of Me" });
+  const lyrics = panel.locator(".lyrics-section");
+  await expect(lyrics).toContainText("Shown");
+  await expect(lyrics).toContainText("LRC file beside the track");
+
+  // An upload goes as the file's own bytes, and leads once it is in.
+  await panel.locator('input[type="file"]').setInputFiles({
+    name: "Army Of Me.ttml",
+    mimeType: "application/ttml+xml",
+    buffer: Buffer.from('<tt xmlns="http://www.w3.org/ns/ttml"/>'),
+  });
+  await expect(lyrics).toContainText("Uploaded TTML");
+  expect(sent).toEqual([
+    {
+      method: "PUT",
+      path: "ttml",
+      body: '<tt xmlns="http://www.w3.org/ns/ttml"/>',
+    },
+  ]);
+  await expect(lyrics.locator(".property-row").first()).toContainText(
+    "Uploaded TTML",
+  );
+
+  // A file that is not a sheet is refused before anything is sent.
+  await panel.locator('input[type="file"]').setInputFiles({
+    name: "notes.srt",
+    mimeType: "text/plain",
+    buffer: Buffer.from("1"),
+  });
+  await expect(lyrics.getByRole("alert")).toHaveText(
+    "Choose a .lrc, .txt or .ttml file.",
+  );
+  expect(sent).toHaveLength(1);
+
+  // Taking the upload back leaves the scanned sheet shown again.
+  await lyrics.getByRole("button", { name: "Remove the TTML" }).click();
+  await expect(lyrics).not.toContainText("Uploaded TTML");
+  expect(sent.at(-1)?.method).toBe("DELETE");
+
+  // The download is saved under the server's name, accents and all.
+  await lyrics.getByRole("button", { name: "Download lyrics" }).click();
+  await expect
+    .poll(() =>
+      page.evaluate(() => (window as unknown as { __saved: string[] }).__saved),
+    )
+    .toEqual(["Björk - Army Of Me.lrc"]);
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * Download is the stream ticket with `?download=1` (RFC-012 decision 5).
+ *
+ * The browser cannot send the session on a navigation, so the menu mints a
+ * ticket and saves from it through a link with `download` and no value,
+ * which leaves the file's name to the server's `Content-Disposition`. That
+ * header is asserted server-side, against a real file; what is asserted here
+ * is the link the page builds. Chromium hands a `download` link straight to
+ * its download manager, past every route a test could install, so the link
+ * is caught as it is clicked rather than on the wire.
+ */
+test("downloads a track from its context menu", async ({ page }) => {
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({ json: [mock.correctable.song] }),
+  );
+  await page.route("**/api/v2/tracks/song-9/stream-ticket", (route) =>
+    route.fulfill({
+      json: { url: "/api/v2/stream/ticket-9", expires_at: Date.now() + 60_000 },
+    }),
+  );
+  await page.goto("/songs");
+  await page.evaluate(() => {
+    const seen = window as unknown as {
+      __saved: Array<{ href: string | null; download: string }>;
+    };
+    seen.__saved = [];
+    HTMLAnchorElement.prototype.click = function (this: HTMLAnchorElement) {
+      seen.__saved.push({
+        href: this.getAttribute("href"),
+        download: this.getAttribute("download") ?? "absent",
+      });
+    };
+  });
+  await page
+    .locator(".songs tbody tr")
+    .first()
+    .locator("button.song-title")
+    .focus();
+  await page.keyboard.press("Shift+F10");
+  const menu = page.getByRole("menu", { name: "Actions for Army Of Me" });
+  await menu.getByRole("menuitem", { name: "Download" }).click();
+  await expect(menu).toHaveCount(0);
+  await expect
+    .poll(() =>
+      page.evaluate(
+        () =>
+          (window as unknown as { __saved: unknown[] }).__saved,
+      ),
+    )
+    .toEqual([{ href: "/api/v2/stream/ticket-9?download=1", download: "" }]);
+  // Nothing is left in the document once the link has been followed.
+  await expect(page.locator("a[download]")).toHaveCount(0);
+
+  // A ticket that cannot be minted says so, rather than a click doing
+  // nothing; and saves nothing.
+  await page.route("**/api/v2/tracks/song-9/stream-ticket", (route) =>
+    route.fulfill({ status: 503, body: "" }),
+  );
+  await page.keyboard.press("Shift+F10");
+  await menu.getByRole("menuitem", { name: "Download" }).click();
+  const failed = page
+    .getByRole("alert")
+    .filter({ hasText: "The download could not start" });
+  await expect(failed).toHaveText("The download could not start. Try again.");
+  await failed.getByRole("button", { name: "Dismiss" }).click();
+  await expect(failed).toHaveCount(0);
+  expect(
+    await page.evaluate(
+      () => (window as unknown as { __saved: unknown[] }).__saved.length,
+    ),
+  ).toBe(1);
+});
+
+/**
+ * The editor's whole job, seen from the wire. The body must name the field that
+ * changed and the list handed back to the file, and nothing else — above all
+ * not the comment another client added, which a body sending the whole form
+ * would have erased before #177 and would pin now.
+ */
+test("corrects a track's tags and sends only what changed", async ({
+  page,
+}) => {
+  await page.goto("/tracks/song-9/edit");
+  await expect(
+    page.getByRole("heading", { name: "Correct tags" }),
+  ).toBeVisible();
+
+  const title = page.getByLabel("Title", { exact: true });
+  await expect(title).toHaveValue("Army Of Me");
+  // Provenance is shown here and nowhere else: the corrected value, and what
+  // the file says beneath it.
+  // A tagger's comment keeps both of its lines: an `<input>` would flatten it.
+  await expect(page.getByLabel("Comment", { exact: true })).toHaveValue(
+    "Remastered\nBonus edition",
+  );
+  await expect(page.getByText("The file says nothing here")).toBeVisible();
+
+  await title.fill("Army of Me");
+  await page
+    .getByRole("button", { name: /^Restore the file.s value: Artists$/ })
+    .click();
+  await expect(page.getByLabel("Artists", { exact: true })).toBeDisabled();
+
+  await page.getByRole("button", { name: "Save" }).click();
+  await expect(page.getByText("Saved.")).toBeVisible();
+  expect(mock.corrections).toEqual([{ title: "Army of Me", artists: null }]);
+
+  // Read back, not assumed. The form now stands on the corrections the server
+  // holds: the artists are the file's again, and no longer corrected.
+  await expect(title).toHaveValue("Army of Me");
+  const artists = page.getByLabel("Artists", { exact: true });
+  await expect(artists).toBeEnabled();
+  await expect(artists).toHaveValue("Björk");
+  await expect(
+    page.getByRole("button", { name: /^Restore the file.s value: Artists$/ }),
+  ).toHaveCount(0);
+
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * Offered where the server would accept it, and nowhere else. The listener half
+ * is not vacuous: the album waits for the list of libraries before it renders,
+ * so the rows below exist only once the role that decides them is known.
+ */
+test("offers a tag correction only to an owner or a manager", async ({
+  page,
+}) => {
+  await page.goto("/albums/album-2");
+  await expect(page.getByRole("heading", { name: "Vespertine" })).toBeVisible();
+  const links = page.getByRole("link", { name: /^Correct tags: / });
+  await expect(links).toHaveCount(3);
+  await expect(links.first()).toHaveAttribute("href", "/tracks/song-1/edit");
+
+  // A manager may correct as well: the other half of the pair the server
+  // names, and the half a regression to owner-only would drop.
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "manager" }];
+  await page.reload();
+  await expect(page.getByRole("heading", { name: "Vespertine" })).toBeVisible();
+  await expect(links).toHaveCount(3);
+
+  mock.libraries = [{ ...library("library-1", "Ma musique"), role: "listener" }];
+  await page.reload();
+  await expect(page.getByRole("heading", { name: "Vespertine" })).toBeVisible();
+  // The row's own marks cell, where the link would be. Once its rating is in
+  // the page, the absence of the link is an answer and not a race.
+  await expect(
+    page.getByRole("group", { name: "Rating: Hidden Place" }),
+  ).toBeAttached();
+  await expect(links).toHaveCount(0);
+});
+
+/**
+ * The tag editor is reached from somewhere — a song row, the track menu — and
+ * its arrow goes back there. Opened from a typed address, with nowhere to go
+ * back to, it lands on the songs list rather than off the site.
+ */
+test("goes back from the tag editor to where it was opened", async ({
+  page,
+}) => {
+  // Opened from an album, the arrow goes back to the album, not to a list
+  // it would also have landed on had it ignored where the visitor came from.
+  await page.route("**/api/v2/albums/album-2", (route) =>
+    route.fulfill({ json: { ...albumDetail, songs: [mock.correctable.song] } }),
+  );
+  await page.goto("/albums/album-2");
+  await page.getByRole("link", { name: "Correct tags: Army Of Me" }).click();
+  await expect(page).toHaveURL(/\/tracks\/song-9\/edit$/);
+  await page.getByRole("button", { name: "Back", exact: true }).click();
+  await expect(page).toHaveURL(/\/albums\/album-2$/);
+
+  // A full load starts the router's history afresh: with nowhere to go back
+  // to, the arrow lands on the songs list, not on the album the browser
+  // still holds behind this page.
+  await page.goto("/tracks/song-9/edit");
+  await page.getByRole("button", { name: "Back", exact: true }).click();
+  await expect(page).toHaveURL(/\/songs$/);
+});
+
+test("keeps an album, the player bar and a track's properties readable in the light", async ({
+  page,
+}) => {
+  await chooseLightTheme(page);
+  await page.goto("/albums/album-2");
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "default");
+  await expect(page.locator(".album-hero h2")).toHaveText("Vespertine");
+  await page.locator(".album-actions .album-play").click();
+  await expect(page.locator(".player-track strong")).toHaveText("Hidden Place");
+  await expectNoWcagViolations(page);
+
+  await page.route("**/api/v2/songs?*", (route) =>
+    route.fulfill({ json: [mock.correctable.song] }),
+  );
+  await page.route("**/api/v2/tracks/song-9", (route) =>
+    route.fulfill({
+      json: { ...mock.correctable.song, relative_path: "Björk/Post/09 Army Of Me.flac" },
+    }),
+  );
+  await page.goto("/songs");
+  await page.locator(".songs tbody tr").first().locator("button.song-title").focus();
+  await page.keyboard.press("Shift+F10");
+  await expect(page.getByRole("menu", { name: "Actions for Army Of Me" })).toBeVisible();
+  await expectNoWcagViolations(page);
+  await page.getByRole("menuitem", { name: "Properties" }).click();
+  await expect(page.getByRole("dialog", { name: "Army Of Me" })).toBeVisible();
+  await expectNoWcagViolations(page);
+});
diff --git a/webapp/e2e/uploads.spec.ts b/webapp/e2e/uploads.spec.ts
new file mode 100644
index 00000000..4f3af8b8
--- /dev/null
+++ b/webapp/e2e/uploads.spec.ts
@@ -0,0 +1,142 @@
+// Uploading files into a library: fragments, refusals, who may upload.
+
+import { blake3 } from "@noble/hashes/blake3.js";
+import { bytesToHex } from "@noble/hashes/utils.js";
+import { expect, test } from "@playwright/test";
+
+import { expectNoWcagViolations } from "./fixtures/accessibility";
+import { resetAndMockApi } from "./fixtures/api";
+import { library } from "./fixtures/catalogue";
+import { mock } from "./fixtures/state";
+
+test.beforeEach(resetAndMockApi);
+
+/**
+ * A file goes through the three steps RFC-008 describes, and the wire carries
+ * what the server checks: the whole file's BLAKE3 as the offer, fragments of
+ * exactly the advertised size in order, and one commit.
+ *
+ * The acknowledgement of the second fragment is lost on purpose. The client
+ * must read the session back and carry on from where the server stands: not
+ * send the written fragment again, and not skip the next one.
+ */
+test("uploads a file in fragments, resuming from the server's account", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  mock.loseAcknowledgementOf = 1;
+  const bytes = Buffer.from(Array.from({ length: 20 }, (_, i) => i));
+
+  await page.goto("/upload");
+  await expect(
+    page.getByRole("heading", { name: "Upload to Ma musique" }),
+  ).toBeVisible();
+  await page.getByLabel("Choose audio files").setInputFiles({
+    name: "Army of Me.flac",
+    mimeType: "audio/flac",
+    buffer: bytes,
+  });
+  await expect(page.getByText("Added to the library")).toBeVisible();
+
+  // The browser's digest is the one the server recomputes, computed here by an
+  // independent call rather than read back from the page.
+  expect(mock.uploadOffers).toEqual([
+    { full_hash: bytesToHex(blake3(bytes)), size_bytes: 20, extension: "flac" },
+  ]);
+  expect(mock.uploadChunks.map(({ index, bytes: sent }) => [index, sent.length])).toEqual([
+    [0, 8],
+    [1, 8],
+    [2, 4],
+  ]);
+  expect(mock.uploadChunks.flatMap(({ bytes: sent }) => sent)).toEqual([...bytes]);
+  expect(mock.uploadCommits).toEqual(["upload-1"]);
+
+  await expectNoWcagViolations(page);
+});
+
+/**
+ * An extension the scanner does not index is refused on the spot. Hashing it
+ * first would spend the time of a full read to be told `unsupported_format`.
+ */
+test("refuses a file the library cannot index, before hashing it", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  await page.goto("/upload");
+  await page.getByLabel("Choose audio files").setInputFiles({
+    name: "notes.txt",
+    mimeType: "text/plain",
+    buffer: Buffer.from("not audio"),
+  });
+  await expect(
+    page.getByText("Refused: not an audio format the library can index"),
+  ).toBeVisible();
+  expect(mock.uploadOffers).toEqual([]);
+});
+
+/**
+ * A worker that cannot load sends no message at all. Waiting for one would leave
+ * the row on "Fingerprinting…" for ever, and the queue — one file at a time —
+ * stuck behind it. Both files must fail, the second without waiting on the
+ * first, and nothing may be offered to the server.
+ */
+test("fails a file whose fingerprinting worker cannot load, and moves on", async ({
+  page,
+}) => {
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  await page.route("**/assets/hash-worker-*.js", (route) =>
+    route.fulfill({ status: 404, body: "" }),
+  );
+  await page.goto("/upload");
+  await page.getByLabel("Choose audio files").setInputFiles([
+    { name: "first.flac", mimeType: "audio/flac", buffer: Buffer.from([1, 2, 3]) },
+    { name: "second.flac", mimeType: "audio/flac", buffer: Buffer.from([4, 5, 6]) },
+  ]);
+  await expect(
+    page.getByText("Failed: this browser could not fingerprint the file"),
+  ).toHaveCount(2);
+  expect(mock.uploadOffers).toEqual([]);
+});
+
+/**
+ * Two locks, and the link needs both: a role that may upload, and a library
+ * its operator has opened. The page behind it says which one is missing when
+ * reached directly.
+ */
+test("offers the upload only where the library takes files and the role may add them", async ({
+  page,
+}) => {
+  // The link is a section of Settings now, and the gate moved with it. The
+  // section menu is drawn at every width, so a zero below is a zero on a
+  // phone as well — the rail entry it replaces was counted in the DOM because
+  // the rail is hidden there.
+  const link = page.locator('.section-menu a[href="/settings/upload"]');
+  const account = page.getByRole("heading", { name: "Account", exact: true });
+
+  // The fixture's default: an owner, in a library closed to files.
+  await page.goto("/settings");
+  await expect(account).toBeVisible();
+  await expect(link).toHaveCount(0);
+
+  mock.libraries = [{ ...library("library-1", "Ma musique"), accepts_uploads: true }];
+  await page.reload();
+  await expect(account).toBeVisible();
+  await expect(link).toHaveCount(1);
+
+  mock.libraries = [
+    {
+      ...library("library-1", "Ma musique"),
+      accepts_uploads: true,
+      role: "listener",
+    },
+  ];
+  await page.reload();
+  await expect(account).toBeVisible();
+  await expect(link).toHaveCount(0);
+  await page.goto("/upload");
+  await expect(
+    page.getByText(
+      "Only an owner or a manager of this library can add files to it.",
+    ),
+  ).toBeVisible();
+});
diff --git a/webapp/e2e/workspace-pages.spec.ts b/webapp/e2e/workspace-pages.spec.ts
index 8175a533..edced121 100644
--- a/webapp/e2e/workspace-pages.spec.ts
+++ b/webapp/e2e/workspace-pages.spec.ts
@@ -5,7 +5,7 @@ import { expect, type Page, test } from "@playwright/test";
  * The workspace pages: Radio, Podcasts, Folders and the Maintenance hub, which
  * manage something rather than present it.
  *
- * The radio mock keeps what it is sent, as the one in `studio-nocturne` does:
+ * The radio mock keeps what it is sent, as the one in `fixtures/api.ts` does:
  * a delete that deleted nothing, or an edit that saved nothing, would
  * otherwise pass against a fixed answer.
  */

From 6a709b989d22bfd8dbf992c0b2e587fc63790452 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 26 Oct 2026 23:40:40 +0100
Subject: [PATCH 3/4] docs(webapp): repoint the e2e comments the split left
 pointing at other files

Comments written for one long file said "above", "below" or "this file"
about tests and mocks that now live in another spec or under fixtures/;
each now names the file or the test, and its reasoning is unchanged. The
French fragment in the radio test's comment is translated, and the canvas
comment that sat ahead of the saved-positions test moves to the canvas
test it describes.

Signed-off-by: InstaZDLL <github.105mh@8shield.net>
---
 webapp/e2e/canvas.spec.ts            |  6 ++++++
 webapp/e2e/fixtures/accessibility.ts |  3 ++-
 webapp/e2e/fixtures/catalogue.ts     |  5 +++--
 webapp/e2e/library.spec.ts           |  3 ++-
 webapp/e2e/lyrics.spec.ts            | 15 ++++++++-------
 webapp/e2e/player.spec.ts            | 15 +++++----------
 webapp/e2e/radio.spec.ts             | 15 +++++++++------
 7 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/webapp/e2e/canvas.spec.ts b/webapp/e2e/canvas.spec.ts
index d86eb653..346caccd 100644
--- a/webapp/e2e/canvas.spec.ts
+++ b/webapp/e2e/canvas.spec.ts
@@ -125,6 +125,12 @@ test("asks once whether a track carries a canvas, not once per visit", async ({
   expect(tickets).toHaveLength(1);
 });
 
+/**
+ * The loop over the cover, rendered as the desktop renders it: muted, looping
+ * and hidden from assistive technology, with the cover underneath keeping its
+ * name. It steps aside when motion is reduced, and when the browser cannot play
+ * it — the cover shows then, never an empty frame.
+ */
 test("plays a track's canvas over its cover, and steps aside for it", async ({
   page,
 }) => {
diff --git a/webapp/e2e/fixtures/accessibility.ts b/webapp/e2e/fixtures/accessibility.ts
index 5a306b32..81c11cdd 100644
--- a/webapp/e2e/fixtures/accessibility.ts
+++ b/webapp/e2e/fixtures/accessibility.ts
@@ -36,7 +36,8 @@ export async function expectNoWcagViolations(page: Page) {
  * The light themes on the 2.0 structure. fluid.css lays the same rail, heads
  * and player bar over a light material, so every page the dark redesign
  * recomposed is audited again in the light: the home page has its own test
- * above, and these follow the pages and the dialogs added since.
+ * in `shell.spec.ts` ("keeps the light appearance readable"), and the tests
+ * that call this follow the pages and the dialogs added since.
  */
 export function chooseLightTheme(page: Page) {
   return page.addInitScript(() => {
diff --git a/webapp/e2e/fixtures/catalogue.ts b/webapp/e2e/fixtures/catalogue.ts
index d9bac2ac..1203ed72 100644
--- a/webapp/e2e/fixtures/catalogue.ts
+++ b/webapp/e2e/fixtures/catalogue.ts
@@ -344,8 +344,9 @@ export type Recipient = "listenbrainz" | "maloja" | "lastfm";
  * What `lastfm_unavailability` answers — a case, not a sentence.
  *
  * It used to be the server's own English prose, copied here and asserted
- * verbatim below, so the test agreed with the server about a string neither of
- * them should have been sending to a client that ships in two languages.
+ * verbatim in `scrobbling.spec.ts`, so the test agreed with the server about a
+ * string neither of them should have been sending to a client that ships in
+ * two languages.
  */
 const NO_PUBLIC_URL = "browser_journey_needs_https";
 
diff --git a/webapp/e2e/library.spec.ts b/webapp/e2e/library.spec.ts
index 4e133c82..538389d2 100644
--- a/webapp/e2e/library.spec.ts
+++ b/webapp/e2e/library.spec.ts
@@ -503,7 +503,8 @@ test("scopes the catalogue to the active library, and hides the picker when ther
 
   // The picker exists in the sidebar and in the mobile header; only one of the
   // two is on screen, so the locator has to say which — as the appearance test
-  // above already does for theme and language.
+  // in `shell.spec.ts` ("renders the studio shell and persists appearance
+  // preferences") already does for theme and language.
   const chrome =
     testInfo.project.name === "mobile"
       ? page.locator(".mobile-header")
diff --git a/webapp/e2e/lyrics.spec.ts b/webapp/e2e/lyrics.spec.ts
index ec5a7126..8e491ffc 100644
--- a/webapp/e2e/lyrics.spec.ts
+++ b/webapp/e2e/lyrics.spec.ts
@@ -13,9 +13,10 @@ test.beforeEach(resetAndMockApi);
  *
  * Until 2026-09-15 `LyricsList` declared a `snake_case` envelope the server has
  * never sent, so this page threw on its first property and showed nothing at
- * all. Nothing caught it because the mock above was written from that type. An
- * assertion on the words themselves is what tells the two shapes apart: an
- * empty sheet renders the same "no lyrics" line under either name.
+ * all. Nothing caught it because the mock in `fixtures/api.ts` was written
+ * from that type. An assertion on the words themselves is what tells the two
+ * shapes apart: an empty sheet renders the same "no lyrics" line under either
+ * name.
  */
 test("shows the words a track travels with", async ({ page }) => {
   mock.lyricSheets.set("song-1", [
@@ -174,10 +175,10 @@ test("centres a sheet that lands after the head has moved", async ({
     // waiting on the route — so the test would not fail, it would hang. The
     // reset in `beforeEach` guards the tests after this one, not this one.
     //
-    // The two gates added with the credential panels, and the canvas one
-    // above them, carry the same hazard and are left as they are: wrapping
-    // them means restructuring three tests this branch has no other reason to
-    // touch.
+    // The two gates added with the credential panels (`settings.spec.ts`), and
+    // the canvas one (`canvas.spec.ts`), carry the same hazard and are left as
+    // they are: wrapping them means restructuring three tests this branch has
+    // no other reason to touch.
     release();
   }
   const column = page.locator(".lyrics-view ol");
diff --git a/webapp/e2e/player.spec.ts b/webapp/e2e/player.spec.ts
index aa5dbf8d..9ceaab68 100644
--- a/webapp/e2e/player.spec.ts
+++ b/webapp/e2e/player.spec.ts
@@ -194,12 +194,6 @@ test("shows queue artwork beside tracks without crowding times or actions", asyn
   expect(narrow.overflow).toBeLessThanOrEqual(1);
 });
 
-/**
- * The loop over the cover, rendered as the desktop renders it: muted, looping
- * and hidden from assistive technology, with the cover underneath keeping its
- * name. It steps aside when motion is reduced, and when the browser cannot play
- * it — the cover shows then, never an empty frame.
- */
 /** Saved positions use their song artwork and a shared time column. */
 test("shows saved tracks with artwork and one aligned time column", async ({
   page,
@@ -314,10 +308,11 @@ test("keeps the shuffle still when a track in it is favourited", async ({
  *
  * Asserted on the rendered line rather than on the mock that fed it. The mock
  * carries these fields because `Song` declares them, so it agrees with the
- * declaration by construction — exactly the loop the lyrics test above was
- * written against, where a `snake_case` envelope the server never sent was
- * confirmed by a mock built from it. What the server really answers is
- * pinned in `tests/native_api.rs`, against the bytes of a WAV.
+ * declaration by construction — exactly the loop the lyrics test in
+ * `lyrics.spec.ts` ("shows the words a track travels with") was written
+ * against, where a `snake_case` envelope the server never sent was confirmed
+ * by a mock built from it. What the server really answers is pinned in
+ * `tests/native_api.rs`, against the bytes of a WAV.
  */
 test("says what the file is on the playing screen", async ({ page }) => {
   await page.goto("/playing");
diff --git a/webapp/e2e/radio.spec.ts b/webapp/e2e/radio.spec.ts
index 8f8ad0fc..392fe126 100644
--- a/webapp/e2e/radio.spec.ts
+++ b/webapp/e2e/radio.spec.ts
@@ -111,12 +111,15 @@ test("keeps a list of radio stations, replacing rather than patching", async ({
  * not.
  *
  * **The held request below is what makes this test able to fail.** Every other
- * mock in this file answers instantly, and against an instant answer a guarded
- * form and an unguarded one look identical: the save is over before a second
- * click or a second edit could begin. A request held open until this test lets
- * it go leaves the window open for as long as the assertions need — where a
- * fixed delay would be a race the slowest runner loses (constat de revue,
- * pris; the two tests above it hold their requests the same way).
+ * mock under `fixtures/` answers instantly, and against an instant answer a
+ * guarded form and an unguarded one look identical: the save is over before a
+ * second click or a second edit could begin. A request held open until this
+ * test lets it go leaves the window open for as long as the assertions need —
+ * where a fixed delay would be a race the slowest runner loses (a review
+ * finding, taken; the two credential tests in `settings.spec.ts`, "shows the
+ * clients that can read the library, and revokes one" and "sends one rotation
+ * however many times the button is pressed", hold their requests the same
+ * way).
  */
 test("closes the form while a station is saving, and leaves listening alone", async ({
   page,

From 25223a36b5f87fa07b72648f191bf3fef5306674 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Tue, 27 Oct 2026 00:38:03 +0100
Subject: [PATCH 4/4] docs(webapp): reattach two e2e comments to what they
 describe

The light-theme live-station comment had sat orphaned above PIXEL since before the split; it now heads its test in radio.spec.ts. The stations field's doc had been left above radioWrites; it is back above stations.

Signed-off-by: InstaZDLL <github.105mh@8shield.net>
---
 webapp/e2e/fixtures/media.ts |  4 ----
 webapp/e2e/fixtures/state.ts | 10 +++++-----
 webapp/e2e/radio.spec.ts     |  4 ++++
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/webapp/e2e/fixtures/media.ts b/webapp/e2e/fixtures/media.ts
index 49885f3d..d71fe80f 100644
--- a/webapp/e2e/fixtures/media.ts
+++ b/webapp/e2e/fixtures/media.ts
@@ -2,10 +2,6 @@
 
 
 
-/**
- * Taking a station out of the bar leaves the queue's track there, paused
- * where it was, and the light theme keeps the live badge readable.
- */
 /** A one-pixel PNG, for every cover the artwork route is asked for. */
 export const PIXEL = Buffer.from(
   "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
diff --git a/webapp/e2e/fixtures/state.ts b/webapp/e2e/fixtures/state.ts
index 5a650675..dd38e572 100644
--- a/webapp/e2e/fixtures/state.ts
+++ b/webapp/e2e/fixtures/state.ts
@@ -110,16 +110,16 @@ class MockState {
   /** What the export route was asked for, and what it answered. */
   exportAsks: string[] = [];
 
-  /**
-   * The account's radio stations, which this harness really does keep: the page
-   * writes and reads them back, so a mock answering a fixed list would pass a
-   * delete that deleted nothing.
-   */
   /** Every write the radio page sent, so one click can be told from two. */
   radioWrites: string[] = [];
   /** Held open by the double-press test; instant for everyone else. */
   radioGate: Promise<void> = Promise.resolve();
 
+  /**
+   * The account's radio stations, which this harness really does keep: the page
+   * writes and reads them back, so a mock answering a fixed list would pass a
+   * delete that deleted nothing.
+   */
   stations: Array<{
     id: string;
     name: string;
diff --git a/webapp/e2e/radio.spec.ts b/webapp/e2e/radio.spec.ts
index 392fe126..e4dcd0c8 100644
--- a/webapp/e2e/radio.spec.ts
+++ b/webapp/e2e/radio.spec.ts
@@ -403,6 +403,10 @@ for (const theme of ["dark", "light"] as const) {
   });
 }
 
+/**
+ * Taking a station out of the bar leaves the queue's track there, paused
+ * where it was, and the light theme keeps the live badge readable.
+ */
 test("keeps a live station readable in the light, and closes back to the queue", async ({
   page,
 }) => {