feat: one Missing files page under Collection: folders gone, each with its album's want, last search or download, and Search, Releases and Remove; an album held before its files went is no longer shown as held again (M504 #5626)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/routes/collection/collection.test.ts

@@ -51,7 +51,6 @@ describe('/collection layout', () => {
     expect(links).toEqual([
       ['/collection', 'Catalogue 7'],
       ['/collection/wanted', 'Wanted 5'],
-      ['/collection/missing', 'Missing files 1'],
       ['/collection/upgrades', 'Upgrades 6'],
       ['/collection/activity', 'Activity 3'],
       ['/collection/following', 'Following 2'],
@@ -59,7 +58,8 @@ describe('/collection layout', () => {
       ['/collection/unmatched', 'Unmatched 3'],
       ['/collection/reports', 'Reports'],
       ['/collection/duplicates', 'Duplicates'],
-      ['/collection/suspect-sources', 'Suspect sources']
+      ['/collection/suspect-sources', 'Suspect sources'],
+      ['/collection/missing', 'Missing files']
     ]);
     expect(screen.getByRole('link', { name: /activity/i })).toHaveAttribute('aria-current', 'page');
     expect(screen.getByRole('link', { name: /^catalogue/i })).not.toHaveAttribute('aria-current');
@@ -90,7 +90,7 @@ describe('/collection layout', () => {
 
   // The library's health queues moved here from Admin (M504): their counts
   // come from the admin summary, accented, and a line names the ones waiting.
-  test('reports, duplicates and suspect sources carry what waits on you, and a line links to each', () => {
+  test('the library health queues carry what waits on you, and a line links to each', () => {
     setup(counts, '/collection', {
       ...clear,
       reports: { count: 2, since: null },
@@ -102,11 +102,12 @@ describe('/collection layout', () => {
     expect(dup.textContent?.replace(/\s+/g, ' ').trim()).toBe('Duplicates 5');
     const health = screen.getByTestId('collection-health');
     expect(health.textContent?.replace(/\s+/g, ' ').trim()).toBe(
-      'To look at: 2 broken tracks reported, 5 sets of duplicates to review.'
+      'To look at: 2 broken tracks reported, 5 sets of duplicates to review, 9 missing files.'
     );
     expect(Array.from(health.querySelectorAll('a')).map((a) => a.getAttribute('href'))).toEqual([
       '/collection/reports',
-      '/collection/duplicates'
+      '/collection/duplicates',
+      '/collection/missing'
     ]);
   });
 

web/src/routes/collection/missing/+page.svelte

@@ -1,8 +1,308 @@
 <script lang="ts">
   import { pageTitle } from '#lib/branding.js';
-  import WantList from '#lib/components/wanted/WantList.svelte';
+  import { ChevronDown, FolderX, Music2, Search, X } from 'lucide-svelte';
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import {
+    createMissingFilesQuery,
+    getReacquisitionSettings,
+    type ReacquisitionSettings
+  } from '#lib/api/admin.js';
+  import { removeWant, searchWant } from '#lib/api/wanted.js';
+  import { qk } from '#lib/api/queries.js';
+  import { errMessage } from '#lib/api/errors.js';
+  import { pushToast } from '#lib/stores/toast.svelte.js';
+  import { relativeTime } from '#lib/utils/relativeTime.js';
+  import { coverUrl } from '#lib/media/covers.js';
+  import { needsYou, searched, wantStatus } from '#lib/wanted/wantStatus.js';
+  import WantCandidates from '#lib/components/WantCandidates.svelte';
+  import { onMount } from 'svelte';
+  import type { AdminMissingGroup, Want } from '#lib/api/types.js';
+
+  // Files the scan looked for and could not find, by folder, with where each
+  // folder's album stands on the wanted list (M504: this page and the
+  // Collection's list of missing wants were one subject on two pages). A
+  // missing file keeps its track row, its play history and its likes,
+  // because the file may come back: the scanner clears the mark by itself,
+  // and adopts the row if it returns under a new name (#2528). Nothing on
+  // this page deletes a track; its actions are the wanted list's own.
+
+  const PAGE_SIZE = 50;
+
+  let offset = $state(0);
+
+  // $derived so paging re-creates the query with a new key — same shape the
+  // playback-errors page uses for its tab state.
+  const queryStore = $derived(createMissingFilesQuery(offset, PAGE_SIZE));
+  const query = $derived($queryStore);
+  const groups = $derived((query.data?.groups ?? []) as AdminMissingGroup[]);
+  const total = $derived(query.data?.total ?? 0);
+  const shown = $derived(groups.reduce((n, g) => n + g.tracks.length, 0));
+  const hasMore = $derived(offset + shown < total);
+
+  function trackCountLabel(n: number): string {
+    return n === 1 ? '1 track' : `${n} tracks`;
+  }
+
+  function durationLabel(sec: number): string {
+    const m = Math.floor(sec / 60);
+    const s = sec % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  }
+
+  // What happens to these is set under Acquisition (#5607); the line above
+  // the list says what it is now, since this is where the question comes up.
+  let policy = $state<ReacquisitionSettings | null>(null);
+  onMount(async () => {
+    try {
+      policy = await getReacquisitionSettings();
+    } catch {
+      policy = null;
+    }
+  });
+
+  // A folder's want, acted on here as on the wanted list.
+  const client = useQueryClient();
+  let busy = $state<string | null>(null);
+  let searching = $state<string | null>(null);
+  let open = $state<string | null>(null);
+
+  const refresh = () =>
+    Promise.all([
+      client.invalidateQueries({ queryKey: ['adminMissingFiles'] }),
+      client.invalidateQueries({ queryKey: ['adminWants'] })
+    ]);
+
+  async function onSearch(w: Want) {
+    searching = w.id;
+    try {
+      const r = await searchWant(w.id);
+      pushToast(searched(w, r), r.outcome === 'error' ? 'error' : 'info');
+      await Promise.all([refresh(), client.invalidateQueries({ queryKey: qk.wantCandidates(w.id) })]);
+    } catch (e) {
+      pushToast(errMessage(e), 'error');
+    } finally {
+      searching = null;
+    }
+  }
+
+  async function onRemove(w: Want) {
+    busy = w.id;
+    try {
+      await removeWant(w.id);
+      pushToast(`${w.title} is off the wanted list, and won't be fetched back.`);
+      await refresh();
+    } catch (e) {
+      pushToast(errMessage(e), 'error');
+    } finally {
+      busy = null;
+    }
+  }
+
 </script>
 
 <svelte:head><title>{pageTitle('Collection · Missing files')}</title></svelte:head>
 
-<WantList list="missing" />
+<div class="space-y-6">
+  <header class="space-y-1">
+    <div class="flex items-center gap-2">
+      <h2 class="font-display text-2xl font-medium text-text-primary">Missing files</h2>
+      {#if total > 0}
+        <span
+          class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
+          data-testid="missing-count-pill"
+        >
+          {total}
+        </span>
+      {/if}
+    </div>
+    <p class="text-text-secondary">
+      Tracks whose audio file the last scan couldn't find. They keep their play
+      history and likes, and stop being offered anywhere until the file returns.
+    </p>
+  </header>
+
+  <p class="text-sm text-text-secondary" data-testid="reacquisition-policy">
+    {#if policy}
+      {policy.enabled
+        ? `Albums missing for ${policy.grace_hours} hours go back on the wanted list by themselves.`
+        : 'Missing albums are not wanted back automatically.'}
+    {/if}
+    <a href="/admin/acquisition#reacquisition" class="text-accent-fg hover:underline">
+      {policy ? 'Change' : 'Set what happens to missing files'}
+    </a>
+  </p>
+
+  {#if query.isPending}
+    <p class="text-text-secondary">Checking what's missing…</p>
+  {:else if query.isError}
+    <p class="text-sm text-error-fg">
+      Couldn't load the missing files.
+      <button type="button" class="underline hover:no-underline" onclick={() => query.refetch()}>Try again</button>
+    </p>
+  {:else if groups.length === 0}
+    <!-- Empty state explains the feature, not just the emptiness: an operator
+         who has never seen this page shouldn't have to guess what would put a
+         row here or when it would appear. -->
+    <div class="rounded-lg border border-border bg-surface p-6 text-center">
+      <FolderX size={28} strokeWidth={1} class="mx-auto text-text-muted" />
+      <p class="mt-3 text-text-primary">Every track's file is where it should be.</p>
+      <p class="mt-1 text-sm text-text-secondary">
+        A track lands here when a library scan can't find its file — moved outside
+        Minstrel, deleted, or on a drive that didn't mount. It leaves on its own
+        when the file comes back.
+      </p>
+    </div>
+  {:else}
+    <ul class="space-y-4">
+      {#each groups as group (group.directory)}
+        <li class="overflow-hidden rounded-lg border border-border bg-surface">
+          <!-- The folder is the unit of decision. Three reorganised albums are
+               three things to think about, not forty. -->
+          <div class="flex items-baseline justify-between gap-4 border-b border-border px-4 py-3">
+            <h3 class="truncate font-mono text-sm text-text-primary" title={group.directory}>
+              {group.directory}
+            </h3>
+            <span class="shrink-0 text-xs text-text-secondary">
+              {trackCountLabel(group.tracks.length)} · gone {relativeTime(group.missing_since)}
+            </span>
+          </div>
+
+          <!-- Where this folder's album stands on the wanted list. Without it
+               the only way to tell "not wanted yet" from "wanted, nothing has
+               come" is to go and read the wanted list. -->
+          {#if group.reacquisition}
+            {@const r = group.reacquisition}
+            {@const w = r.want}
+            <div class="space-y-1.5 border-b border-border px-4 py-2" data-testid="reacquisition-state">
+              <div class="flex flex-wrap items-center justify-between gap-2">
+                <div class="min-w-0 space-y-0.5 text-xs">
+                  <p class="text-text-secondary">
+                    {#if r.held_at}
+                      Held again {relativeTime(r.held_at)}. The rows here clear on the next scan.
+                    {:else if r.wanted_at}
+                      Wanted back since {relativeTime(r.wanted_at)}.
+                    {/if}
+                  </p>
+                  {#if w && !r.held_at}
+                    <p
+                      class={needsYou(w) ? 'text-text-primary' : 'text-text-secondary'}
+                      data-testid="missing-want-status"
+                    >
+                      {wantStatus(w)}
+                      {#if needsYou(w)}
+                        <a href="/collection/activity" class="ml-1 text-accent-fg hover:underline">Decide on Activity</a>
+                      {/if}
+                    </p>
+                  {/if}
+                </div>
+                {#if w && !r.held_at}
+                  <div class="flex shrink-0 flex-wrap justify-end gap-1.5">
+                    <button
+                      type="button"
+                      onclick={() => onSearch(w)}
+                      disabled={searching !== null || !!w.grab?.live}
+                      aria-label="Search for {w.title} now"
+                      class="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs text-text-secondary hover:bg-surface-hover hover:text-text-primary disabled:opacity-50"
+                    >
+                      <Search size={12} strokeWidth={2} /> {searching === w.id ? 'Searching…' : 'Search'}
+                    </button>
+                    <button
+                      type="button"
+                      onclick={() => (open = open === w.id ? null : w.id)}
+                      aria-expanded={open === w.id}
+                      aria-label="Releases found for {w.title}"
+                      class="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs text-text-secondary hover:bg-surface-hover hover:text-text-primary"
+                    >
+                      Releases <ChevronDown size={12} strokeWidth={2} class={open === w.id ? 'rotate-180' : ''} />
+                    </button>
+                    <button
+                      type="button"
+                      onclick={() => onRemove(w)}
+                      disabled={busy === w.id}
+                      aria-label="Stop wanting {w.title}"
+                      class="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs text-text-secondary hover:bg-surface-hover hover:text-text-primary disabled:opacity-50"
+                    >
+                      <X size={12} strokeWidth={2} /> Remove
+                    </button>
+                  </div>
+                {/if}
+              </div>
+              {#if w && open === w.id}
+                <WantCandidates wantId={w.id} title={w.title} />
+              {/if}
+            </div>
+          {/if}
+
+          <ul class="divide-y divide-border">
+            {#each group.tracks as t (t.track_id)}
+              <li class="flex items-center gap-3 px-4 py-2" data-testid="missing-track-row">
+                <div
+                  class="flex h-10 w-10 shrink-0 items-center justify-center rounded bg-surface-hover"
+                  aria-hidden="true"
+                >
+                  {#if t.album_id}
+                    <img
+                      src={coverUrl(t.album_id)}
+                      alt=""
+                      class="h-full w-full rounded object-cover"
+                      loading="lazy"
+                    />
+                  {:else}
+                    <Music2 size={18} strokeWidth={1} class="text-text-muted" />
+                  {/if}
+                </div>
+
+                <div class="min-w-0 flex-1">
+                  <div class="truncate text-sm text-text-primary">{t.title}</div>
+                  <div class="truncate text-xs text-text-secondary">
+                    {t.artist_name} · {t.album_title}
+                  </div>
+                </div>
+
+                <!-- Last played is the deciding fact: a file gone six months
+                     that nobody ever played is not the same problem as one
+                     played two hundred times last week. -->
+                <span class="shrink-0 text-xs text-text-muted">
+                  {#if t.last_played_at}
+                    last played {relativeTime(t.last_played_at)}
+                  {:else}
+                    never played
+                  {/if}
+                </span>
+                <span class="shrink-0 text-xs text-text-muted">{durationLabel(t.duration_sec)}</span>
+              </li>
+            {/each}
+          </ul>
+        </li>
+      {/each}
+    </ul>
+
+    {#if hasMore || offset > 0}
+      <nav class="flex items-center justify-between" aria-label="Missing files pages">
+        <button
+          type="button"
+          class="rounded border border-border px-3 py-1.5 text-sm text-text-primary
+                 hover:bg-surface-hover focus-visible:outline-solid focus-visible:outline-2
+                 focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-40"
+          disabled={offset === 0}
+          onclick={() => (offset = Math.max(0, offset - PAGE_SIZE))}
+        >
+          Previous
+        </button>
+        <span class="text-xs text-text-secondary">
+          {offset + 1}–{offset + shown} of {total}
+        </span>
+        <button
+          type="button"
+          class="rounded border border-border px-3 py-1.5 text-sm text-text-primary
+                 hover:bg-surface-hover focus-visible:outline-solid focus-visible:outline-2
+                 focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-40"
+          disabled={!hasMore}
+          onclick={() => (offset += PAGE_SIZE)}
+        >
+          Next
+        </button>
+      </nav>
+    {/if}
+  {/if}
+</div>

web/src/routes/collection/missing/missing.test.ts

@@ -0,0 +1,246 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
+import { mockQuery } from '../../../test-utils/query';
+import type { AdminMissingResponse, Want } from '#lib/api/types.js';
+
+// The page reads the re-acquisition policy to say what happens to these;
+// the settings themselves are on Admin › Acquisition.
+vi.mock('#lib/api/admin.js', () => ({
+  createMissingFilesQuery: vi.fn(),
+  getReacquisitionSettings: vi.fn().mockResolvedValue({
+    enabled: true,
+    grace_hours: 24,
+    max_per_pass: 20,
+    unnameable_albums: 0
+  })
+}));
+// A folder's want is acted on here as on the wanted list (M504).
+vi.mock('#lib/api/wanted.js', () => ({
+  removeWant: vi.fn().mockResolvedValue(undefined),
+  searchWant: vi.fn().mockResolvedValue({
+    outcome: 'nothing', considered: 0, best_release: '', best_verdict: '', narrowed: []
+  }),
+  createCandidatesQuery: vi.fn(),
+  grabCandidate: vi.fn(),
+  blockCandidate: vi.fn(),
+  unblockRelease: vi.fn()
+}));
+vi.mock('#lib/stores/toast.svelte.js', () => ({ pushToast: vi.fn() }));
+
+import MissingPage from './+page.svelte';
+import { createMissingFilesQuery } from '#lib/api/admin.js';
+import { removeWant, searchWant } from '#lib/api/wanted.js';
+import { pushToast } from '#lib/stores/toast.svelte.js';
+
+const DAY = 24 * 3_600_000;
+
+function track(title: string, opts: { lastPlayed?: string | null } = {}) {
+  return {
+    track_id: `t-${title}`,
+    title,
+    artist_id: 'ar-1',
+    artist_name: 'Linkin Park',
+    album_id: 'al-1',
+    album_title: 'Minutes to Midnight',
+    file_path: `/music/Linkin Park/Minutes to Midnight/${title}.flac`,
+    duration_sec: 185,
+    missing_since: new Date(Date.now() - 3 * DAY).toISOString(),
+    last_played_at: opts.lastPlayed === undefined ? null : opts.lastPlayed
+  };
+}
+
+const response: AdminMissingResponse = {
+  total: 3,
+  limit: 50,
+  offset: 0,
+  groups: [
+    {
+      directory: '/music/Linkin Park/Minutes to Midnight',
+      missing_since: new Date(Date.now() - 3 * DAY).toISOString(),
+      reacquisition: null,
+      tracks: [
+        track('Given Up', { lastPlayed: new Date(Date.now() - 2 * DAY).toISOString() }),
+        track('Bleed It Out')
+      ]
+    },
+    {
+      directory: '/music/Boards of Canada/Geogaddi',
+      missing_since: new Date(Date.now() - 9 * DAY).toISOString(),
+      reacquisition: null,
+      tracks: [track('1969')]
+    }
+  ]
+};
+
+afterEach(() => vi.clearAllMocks());
+
+// Whitespace-normalised text of a testid'd element. Svelte templates wrap
+// mid-sentence, so raw textContent has newlines where the rendered page has
+// single spaces — asserting on it directly makes tests fail on reflow.
+function text(testId: string): string {
+  return (screen.getByTestId(testId).textContent ?? '').replace(/\s+/g, ' ').trim();
+}
+
+function renderWith(data: AdminMissingResponse | undefined, extra = {}) {
+  vi.mocked(createMissingFilesQuery).mockReturnValue(
+    mockQuery({ data, ...extra }) as ReturnType<typeof createMissingFilesQuery>
+  );
+  return render(MissingPage);
+}
+
+function want(extra: Partial<Want> = {}): Want {
+  return {
+    id: 'w-1',
+    release_group_mbid: 'rg-1',
+    title: 'Minutes to Midnight',
+    artist_mbid: 'lp',
+    artist_name: 'Linkin Park',
+    primary_type: 'Album',
+    secondary_types: [],
+    year: '2007',
+    reason: 'missing',
+    wanted_at: new Date(Date.now() - 2 * DAY).toISOString(),
+    held_at: null,
+    image_url: '',
+    search: {
+      searched_at: new Date(Date.now() - 3_600_000).toISOString(),
+      outcome: 'nothing',
+      considered: 0,
+      best_release: '',
+      best_verdict: '',
+      error: ''
+    },
+    ...extra
+  };
+}
+
+function wantedBack(w: Want | null = want()): AdminMissingResponse {
+  const withState = structuredClone(response);
+  withState.groups[0].reacquisition = { wanted_at: new Date(Date.now() - 2 * DAY).toISOString(), held_at: null, want: w };
+  return withState;
+}
+
+describe('/collection/missing', () => {
+  test('says what happens to missing files, and links to where it is set', async () => {
+    renderWith(response);
+    const line = screen.getByTestId('reacquisition-policy');
+    await screen.findByText(/missing for 24 hours go back on the wanted list/i);
+    expect(line.querySelector('a')?.getAttribute('href')).toBe('/admin/acquisition#reacquisition');
+  });
+
+  test('groups rows under their directory', () => {
+    renderWith(response);
+    expect(screen.getByText('/music/Linkin Park/Minutes to Midnight')).toBeTruthy();
+    expect(screen.getByText('/music/Boards of Canada/Geogaddi')).toBeTruthy();
+    expect(screen.getAllByTestId('missing-track-row')).toHaveLength(3);
+  });
+
+  test('the count pill reports the server total, not the page size', () => {
+    renderWith(response);
+    expect(screen.getByTestId('missing-count-pill').textContent?.trim()).toBe('3');
+  });
+
+  test('a group states how many tracks and how long gone', () => {
+    renderWith(response);
+    expect(screen.getByText(/2 tracks · gone 3d ago/)).toBeTruthy();
+    expect(screen.getByText(/1 track · gone 9d ago/)).toBeTruthy();
+  });
+
+  // The deciding fact for whether a missing file is worth chasing.
+  test('distinguishes a played track from one never played', () => {
+    renderWith(response);
+    expect(screen.getByText(/last played 2d ago/)).toBeTruthy();
+    expect(screen.getAllByText('never played')).toHaveLength(2);
+  });
+
+  // An operator who has never seen this page should not have to guess what
+  // would put a row here.
+  test('the empty state explains what missing means', () => {
+    renderWith({ total: 0, limit: 50, offset: 0, groups: [] });
+    expect(screen.getByText(/every track's file is where it should be/i)).toBeTruthy();
+    expect(screen.getByText(/can't find its file/i)).toBeTruthy();
+    expect(screen.queryByTestId('missing-count-pill')).toBeNull();
+  });
+
+  test('shows a loading line while pending', () => {
+    renderWith(undefined, { isPending: true });
+    expect(screen.getByText(/checking what's missing/i)).toBeTruthy();
+  });
+
+  test('shows an error line when the query fails', () => {
+    renderWith(undefined, { isError: true });
+    expect(screen.getByText(/couldn't load the missing files/i)).toBeTruthy();
+  });
+
+  // Not wanted yet is the common case for a folder that just went missing;
+  // a line saying so would be noise on every row.
+  test('no re-acquisition line before the album is wanted', () => {
+    renderWith(response);
+    expect(screen.queryByTestId('reacquisition-state')).toBeNull();
+  });
+
+  test('an album wanted back says since when, and what its last search found', () => {
+    renderWith(wantedBack());
+    expect(text('reacquisition-state')).toMatch(/wanted back since 2d ago/i);
+    expect(text('missing-want-status')).toBe('Searched 1h ago: nothing found');
+  });
+
+  test('its download, when one is running, is the line', () => {
+    renderWith(
+      wantedBack(
+        want({
+          grab: {
+            id: 'g', name: 'LP - MtM [FLAC]', grabbed_at: new Date().toISOString(), origin: 'schedule', quality: 'FLAC',
+            live: true, end_reason: '', progress: 0.42, import_state: 'downloading', import_reason: '', end_detail: '',
+            imported_at: null, imported_files: 0
+          }
+        })
+      )
+    );
+    expect(text('missing-want-status')).toBe('Downloading 42% · LP - MtM [FLAC]');
+    expect(screen.getByRole('button', { name: /search for minutes to midnight now/i })).toHaveProperty('disabled', true);
+  });
+
+  test('Search runs one now and says what it found', async () => {
+    renderWith(wantedBack());
+    await fireEvent.click(screen.getByRole('button', { name: /search for minutes to midnight now/i }));
+    await waitFor(() => expect(searchWant).toHaveBeenCalledWith('w-1'));
+    await waitFor(() => expect(pushToast).toHaveBeenCalledWith('Nothing found for Minutes to Midnight.', 'info'));
+  });
+
+  test('Remove takes it off the wanted list', async () => {
+    renderWith(wantedBack());
+    await fireEvent.click(screen.getByRole('button', { name: /stop wanting minutes to midnight/i }));
+    await waitFor(() => expect(removeWant).toHaveBeenCalledWith('w-1'));
+    expect(pushToast).toHaveBeenCalledWith("Minutes to Midnight is off the wanted list, and won't be fetched back.");
+  });
+
+  test('an album held again says so', () => {
+    const withState = structuredClone(response);
+    withState.groups[0].reacquisition = {
+      wanted_at: new Date(Date.now() - 5 * DAY).toISOString(),
+      held_at: new Date(Date.now() - DAY).toISOString(),
+      want: want({ held_at: new Date(Date.now() - DAY).toISOString() })
+    };
+    renderWith(withState);
+    expect(text('reacquisition-state')).toMatch(/held again 1d ago/i);
+    // Nothing left to search for.
+    expect(screen.queryByTestId('missing-want-status')).toBeNull();
+    expect(screen.queryByRole('button', { name: /search for/i })).toBeNull();
+  });
+
+  // Paging only appears when it can do something: a single page of results
+  // should not render dead Previous/Next buttons.
+  test('no pager when everything fits on one page', () => {
+    renderWith(response);
+    expect(screen.queryByLabelText('Missing files pages')).toBeNull();
+  });
+
+  test('pager appears when the server reports more than this page holds', () => {
+    renderWith({ ...response, total: 120 });
+    expect(screen.getByLabelText('Missing files pages')).toBeTruthy();
+    expect(screen.getByText('1–3 of 120')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Previous' })).toHaveProperty('disabled', true);
+    expect(screen.getByRole('button', { name: 'Next' })).toHaveProperty('disabled', false);
+  });
+});